326 lines
6.5 KiB
Vue
326 lines
6.5 KiB
Vue
<template>
|
||
<view class='container'>
|
||
<view class="top_banner">
|
||
<image src="../../static/imgs/qdmr.png" mode=""></image>
|
||
</view>
|
||
<view class="cont-title">
|
||
<view class="or-size">已连续签到</view>
|
||
<view class="or-num">{{signInDays}}</view>
|
||
<view class="or-size">天</view>
|
||
</view>
|
||
<view class="wrap-box">
|
||
<view class="w_box" v-for="(item,index) in list" :key="index" @click="setIndex(index,item)"
|
||
:class="{'acv_w' : (index + 1) <= wIndex }">
|
||
<view class="">{{item.integralName}}</view>
|
||
<image src="@/static/imgs/jinbi.png" style="width: 25px; height: 25px; "></image>
|
||
<view class="">{{item.integral}}积分</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom_bs" @click="equityShow = true">
|
||
<view class="">连续签到获得更多积分</view>
|
||
<view class="d-s"> <u-icon name="info-circle" size="14px"></u-icon>
|
||
<view style="font-size: 14px; color: #333; margin-left: 5px; ">签到规则</view>
|
||
</view>
|
||
</view>
|
||
<view class="anniu" :style="isSignIn ? 'background: #FF9655;' : 'background: #999999;'" @click="goSignIn()">
|
||
签到
|
||
</view>
|
||
<u-overlay :show="show" @click="show = false">
|
||
<view class="box_">
|
||
<view class="r_size">+{{integral}}积分</view>
|
||
</view>
|
||
</u-overlay>
|
||
<u-popup :show="equityShow" :closeable="true" :round="10" mode="bottom" @close="equityclose">
|
||
<view class="_tbox">
|
||
<view class="_btop">签到规则</view>
|
||
<view class="_bbox">
|
||
<!-- <view class="b_title">获取您的位置信息</view> -->
|
||
<view class="">
|
||
{{signInRule}}
|
||
<!-- 1.签到时间：
|
||
全天可签到，不限制具体时间段。
|
||
2.签到方式：
|
||
用户通过小程序的签到入口进行点击签到。
|
||
3、签到奖励：
|
||
为鼓励用户签到，我们设置了签到奖励：积分。
|
||
签到奖励可能随着连续签到天数的增加而增加，形成签到
|
||
激励机制。
|
||
4、补签与断签：
|
||
不允许用户进行补签，以恢复连续签到天数。
|
||
断签后，用户需重新开始计算连续签到天数。 -->
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
export default {
|
||
data() {
|
||
return {
|
||
wIndex: 0,
|
||
show: false,
|
||
equityShow: false,
|
||
list: [],
|
||
signInRule: '',
|
||
signInDays: '01',
|
||
isSignIn: false,
|
||
integral: 0,
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
//下拉刷新
|
||
this.getList() //调用请求
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
onReachBottom() {
|
||
// 触底加载
|
||
if (this.pageNo >= this.totalPage) {
|
||
|
||
} else {
|
||
this.pageNo++
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getList()
|
||
this.getSignIn()
|
||
this.getIsSignIn()
|
||
},
|
||
components: {
|
||
|
||
},
|
||
methods: {
|
||
goSignIn() {
|
||
if (this.isSignIn == true) {
|
||
request({
|
||
url: 'business/integral/integralSettings/signInFunction',
|
||
method: 'post',
|
||
data: {
|
||
storeId: uni.getStorageSync("storeId"),
|
||
chainStoreId: uni.getStorageSync("chainStoreId")
|
||
}
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log(res, 108);
|
||
this.integral = res.data.pointsChange
|
||
this.show = true
|
||
this.getList()
|
||
this.getIsSignIn()
|
||
}
|
||
})
|
||
this.getList()
|
||
}
|
||
},
|
||
// 判断是否签到
|
||
getIsSignIn() {
|
||
request({
|
||
url: 'business/integral/integralSettings/todayIsSignIn',
|
||
method: 'get',
|
||
params: {
|
||
storeId: uni.getStorageSync("storeId")
|
||
}
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.data == 0) {
|
||
this.isSignIn = true
|
||
} else {
|
||
this.isSignIn = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getSignIn() {
|
||
request({
|
||
url: '/business/integral/integralSettings/getIntegralSignInRules',
|
||
method: 'get',
|
||
params: {
|
||
storeId: uni.getStorageSync("storeId")
|
||
}
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.signInRule = res.data
|
||
}
|
||
})
|
||
},
|
||
equityclose() {
|
||
this.equityShow = false
|
||
},
|
||
setIndex(index, data) {
|
||
// this.wIndex = index
|
||
this.integral = data.integral
|
||
},
|
||
getList() {
|
||
request({
|
||
url: '/business/integral/integralSettings/getIntegral',
|
||
method: 'get',
|
||
params: {
|
||
storeId: uni.getStorageSync("storeId")
|
||
}
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.list = res.data.integralSettings
|
||
this.signInDays = res.data.signInDays
|
||
this.wIndex = res.data.classColor
|
||
}
|
||
})
|
||
},
|
||
goback() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-bottom: 50px;
|
||
|
||
}
|
||
|
||
.top_banner {
|
||
width: 100%;
|
||
height: 200px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.cont-title {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.or-size {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.or-num {
|
||
box-sizing: border-box;
|
||
padding: 0px 5px;
|
||
background: #FF9655;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
color: #FFFFFF;
|
||
margin: 10px;
|
||
}
|
||
|
||
.wrap-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
|
||
.w_box {
|
||
width: 19%;
|
||
box-sizing: border-box;
|
||
padding: 5px 15px;
|
||
background: #F7F7F7;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
border-radius: 4px;
|
||
margin-right: 1%;
|
||
margin-bottom: 2%;
|
||
|
||
image {
|
||
margin: 5px auto;
|
||
}
|
||
}
|
||
|
||
.anniu {
|
||
width: 80%;
|
||
height: 40px;
|
||
background: #FF9655;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
border-radius: 50px;
|
||
margin: 25px auto;
|
||
|
||
}
|
||
|
||
.acv_w {
|
||
background: #FF9655 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.bottom_bs {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.box_ {
|
||
width: 230px;
|
||
height: 200px;
|
||
background: url('http://47.94.122.58:83/qdcg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translate(-50%, 150%);
|
||
bottom: 10%;
|
||
|
||
}
|
||
|
||
.r_size {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
bottom: 10%;
|
||
color: #FA6400;
|
||
}
|
||
|
||
._tbox {
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
width: 100%;
|
||
|
||
|
||
}
|
||
|
||
._btop {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
._bbox {
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 18px;
|
||
}
|
||
</style> |