效果图
2706dceef35e18a69a9a880b4e1851f.jpg
<template>
<view>
<!-- 签到 -->
<view class="sign-a">
<view class="sign-a-a">
<view class="sign-item" :class="item.sign_type == 1 ? 'click-disabled' : 'click-canbe'" v-for="(item,index) in dateShow"
:key="index">
<view style="width:90%; display: flex; height:48rpx;" v-show="item.day != 1">
<view class="image-left" v-show="item.day == 1"></view>
<view class="image" style="justify-content: space-around;display: flex;width: 100%;">
<image :src=" item.sign_type == 1 ? '../../../../static/me/gold@2x.png' : '../../../../static/me/gold@2x.png'"
style="width: 48upx;height: 48upx;marrgin: 0;border-radius: 50%;" v-show="item.day == sign_day"></image>
<image class="sign-a-image" :src="item.sign_type == 0 ? '../../../../static/sign/gold-1@2x.png' : '../../../../static/sign/gold-2@2x.png'"
v-show="item.day != sign_day"></image>
</view>
<view class="image-right" v-show="item.day != 7"></view>
</view>
<!-- <view style="width: 100%; display: flex; height:48rpx;" v-show="item.day == 1">
<view class="image-left" v-show="item.day == 1"></view>
<image style="margin-left: 15rpx; width: 48rpx; height: 48rpx;" :src=" item.sign_type == 1 ? '../../../../static/me/gold@2x.png' : '../../../../static/me/gold@2x.png'"
v-show="item.day == sign_day"></image>
<image style="margin-left: 15rpx; width: 38rpx; height: 38rpx;" :src="item.sign_type == 0 ? '../../../../static/sign/gold-1@2x.png' : '../../../../static/sign/gold-2@2x.png'"
v-show="item.day != sign_day"></image>
<view class="image-right" v-show="item.day != 7"></view>
</view> -->
<view class="tian" :class="item.sign_type == 0 ? 'click-disabled' : 'click-canbe'">{{item.day}}天</view>
<view class="bi" :class="item.sign_type == 0 ? 'click-disabled' : 'click-canbe'">{{item.score}}趣币</view>
</view>
</view>
<button v-show="canBeClick" @click="sign" class="qian ok">签到</button>
<button v-show="!canBeClick" class="qian no">已签到</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
sign_day: 0,
sign_type: 0,
coin: 5,
index: 0,
days: 4, //获得当月天数
dateShow: [],
canBeClick: false
}
},
onLoad() {
this.pearch()
},
onShow() {
this.pearch()
},
methods: {
pearch() {
uni.request({
url: this.baseUrl + 'api/Signin/siginIntype', //地址
method: 'POST', //请求方式
data: { //传值的数据
},
header: {
'Content-type': 'application/x-www-form-urlencoded',
"Authorization": uni.getStorageSync('token')
},
success: (ret) => {
console.log("用户签到", ret);
var that = this
if (ret.data.code == 0) {
//判断状态码 数组[几天,趣币]
that.dateShow = ret.data.data.sign_config
console.log(that.dateShow)
that.sign_type = ret.data.data.sign_type
that.sign_day = ret.data.data.sign_day
console.log(this.sign_day)
if (that.sign_type == 0) {
// 未签到
this.canBeClick = true
}
uni.hideLoading();
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
} else {
that.dateShow = ret.data.data.sign_config
console.log(that.dateShow)
that.sign_type = ret.data.data.sign_type
that.sign_day = ret.data.data.sign_day
console.log(this.sign_day)
console.log(this.sign_day == this.dateShow[this.sign_day - 1].day)
console.log(this.dateShow[this.sign_day - 1].day)
if (that.sign_type == 1) {
// 获取当前是否已经签到 已签到
this.canBeClick = false
}
uni.hideLoading();
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
}
},
error: (e) => {
uni.hideLoading();
uni.showToast({
title: e.response.data.msg,
icon: 'none'
});
}
});
},
sign() {
uni.request({
url: this.baseUrl + 'api/Signin/siginIn', //签到
method: 'POST', //请求方式
data: { //传值的数据
},
header: {
'Content-type': 'application/x-www-form-urlencoded',
"Authorization": uni.getStorageSync('token')
},
success: (ret) => {
var that = this
console.log(ret);
if (ret.data.code == 0) { //判断状态码
uni.hideLoading();
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
// 签到成功,改变按钮状态
this.canBeClick = false
that.dateShow[that.sign_day].sign_type = this.dateShow[that.sign_day].sign_type == 0 ? 1 : 0
} else if (ret.data.code == 1) {
that.sign_type == 1
uni.hideLoading();
uni.showToast({
title: ret.data.msg,
icon: 'none'
});
}
},
error: (e) => {
uni.hideLoading();
uni.showToast({
title: e.response.data.msg,
icon: 'none'
});
}
});
},
PengYou() {
uni.navigateTo({
url: '../../gener/gener'
})
},
SuaDan() {
uni.navigateTo({
url: '../../task'
})
}
}
}
</script>
<style lang="less">
page {
width: 100%;
height: 100%;
display: flex;
font-size: 34upx;
font-family: sfprodisplay-regular;
background: #FDFDFD;
justify-content: center;
}
.image-left {
width: 21rpx;
margin-left: 15upx;
height: 1rpx;
background-color: #BEBEBE;
/* margin-top: 23.5rpx; */
margin-top: 24rpx;
}
.image-left:first-child {
display: none;
}
.sign-a-image:nth-of-type(1) {
margin-left: 20rpx;
}
.image-right {
width: 30rpx;
height: 1rpx;
margin: 0 auto;
margin-left: 8rpx;
background-color: #EEEEEE;
margin-top: 24rpx;
}
.click-canbe {
color: #FDEDA9;
}
.click-disabled {
color: #BEBEBE;
}
.sign-a {
width: 690upx;
height: 320rpx;
background: #333333;
padding: 50rpx 0 0;
box-sizing: border-box;
margin: 40upx auto;
border-radius: 20upx;
}
.sign-a-a {
display: flex;
width: 600rpx;
height: 110rpx;
margin: 0 auto;
}
.sign-item {
flex: 1;
width: 100%;
height: 100%;
margin-top: 15upx;
justify-content: space-around;
}
.sign-item image {
margin-left: 5%;
}
.sign-a-image {
width: 38rpx;
height: 38rpx;
marrgin: 0;
border-radius: 50%;
}
.tian {
/* margin: 0 auto; */
/* width: 100%; */
height: 35rpx;
text-align: center;
margin-top: 20upx;
line-height: 24rpx;
}
.bi {
width: 120%;
height: 22rpx;
line-height: 22rpx;
font-size: 28rpx;
margin: 20upx auto;
}
.qian {
width: 230rpx;
height: 50rpx;
padding: 0;
margin: 0;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
color: #333333;
margin: 80rpx auto;
border-radius: 25rpx;
}
.ok {
background-color: #FDE6A4;
}
.no {
background-color: #e6e1dc;
}
/* .ba-sum {
width: 230upx;
height: 48upx;
line-height: 48upx;
text-align: center;
justify-content: center;
margin: 200upx auto;
background-color: #FDEDA9;
border-radius: 40upx;
}
*/
/* .renw {
box-shadow: 10 10 10 #BEBEBE;
width: 630rpx;
height: 600rpx;
padding: 50rpx 30rpx 0;
box-sizing: border-box;
margin: 60upx 60rpx;
border-radius: 20upx;
border: #BEBEBE solid 1upx;
}
.ba-ce {
text-align: center;
margin-top: 38upx;
font-size: 38upx;
color: #333231;
font-family: pingfang-sc-regular;
}
.ba-ce-b {
margin-top: 40upx;
display: flex;
color: #333231;
justify-content: space-between;
width: 550upx;
}
.pad {
width: 170upx;
height: 48upx;
border-radius: 24upx;
background-color: #FDEDA9;
color: #333231;
text-align: center;
}
.le {
margin-left: 10upx;
}
.sign {
display: flex;
margin-top: 80upx;
color: #FDEDA9;
}
.sign-image {
margin-left: 30upx;
width: 38upx;
height: 38upx;
} */
</style>
