<view class="sing-in" style="margin-top: 60rpx;">
<view class="padding-top-sm">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/singIn2.svg"
height="84" width="230" border-radius="10rpx"></u-image>
</view>
<view class="flex align-center justify-between padding-lr">
<view class="text-sm text-gray">
断签以及每周一会重置连续签到天数
</view>
<view class="text-white text-sm text-bold flex align-center justify-center"
@click="handleSignClick()"
style="background-color: #E88A3D;height: 60rpx;width: 214rpx; border-radius: 30rpx;">
点我签到领积分
</view>
</view>
<view class="flex padding-lr padding-top-lg">
<view class="item" v-for="item in signList"
style="height: 155rpx;width: 84rpx; margin-left: 8rpx;">
<view class="" style="background-color: #FDF8EC; height: 102rpx;">
<view class="flex justify-center align-center"
style="padding-top: 12rpx;padding-bottom: 12rpx;">
<u-image :src="item.signed ? grayIcon :item.img" height="48" width="48"
border-radius="10rpx"></u-image>
</view>
<view class="text-white flex justify-center align-center"
:style="{ color: item.signed ? '#BFBFBF' : item.pointColor }"
style="height: 32rpx; width: 60rpx;background-color: #E88A3D; border-radius: 16rpx; margin: 0 auto; font-size: 24rpx;">
+{{item.points}}
</view>
</view>
<view class="padding-top-sm text-xs text-center"
:style="{ color: item.signed ? '#BFBFBF' : '#333' }">
{{item.dayText}}
</view>
<view v-if="item.signed" class="signed-mask"></view>
</view>
</view>
</view>
<script>
export default {
data() {
return {
navBarHeight: "",
grayIcon: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/grey.svg',
signList: [{
img: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/gold.svg',
bgColor: '#FDF8EC',
pointColor: '#fff',
points: 20,
dayText: '第一天',
signed: true // 是否已签到
},
{
img: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/gold.svg',
bgColor: '#F0F9FF',
pointColor: '#fff',
points: 30,
dayText: '第二天',
signed: false // 是否已签到
},
{
img: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/gold.svg',
bgColor: '#F6FFED',
pointColor: '#fff',
points: 40,
dayText: '第三天',
signed: false // 是否已签到
},
{
img: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/gold.svg',
bgColor: '#FFF7E6',
pointColor: '#fff',
points: 50,
dayText: '第四天',
signed: false // 是否已签到
},
{
img: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/gold.svg',
bgColor: '#F9F0FF',
pointColor: '#fff',
points: 60,
dayText: '第五天',
signed: false // 是否已签到
},
{
img: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/gold.svg',
bgColor: '#E6F7FF',
pointColor: '#fff',
points: 70,
dayText: '第六天',
signed: false // 是否已签到
},
{
img: 'https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/gold.svg',
bgColor: '#FFF2E8',
pointColor: '#fff',
points: 100,
dayText: '第七天',
signed: false // 是否已签到
}
]
};
},
methods: {
goremark() {
uni.navigateTo({
url: '/pages/my/myRemark/myRemark'
})
},
goUserLnfo() {
uni.navigateTo({
url: '/pages/my/userInfo/userInfo'
})
},
goService() {
uni.navigateTo({
url: '/pages/my/service/service'
})
},
goBusiness() {
uni.navigateTo({
url: '/pages/my/business/business'
})
},
goWe() {
uni.navigateTo({
url: '/pages/my/we/we'
})
},
goMycoupon() {
uni.navigateTo({
url: '/pages/my/myCoupon/myCoupon'
})
},
goAddress() {
uni.navigateTo({
url: '/pages/my/address/index'
})
},
goMember() {
uni.navigateTo({
url: '/pages/my/member/member'
})
},
goMyOrder() {
uni.navigateTo({
url: '/pages/my/myOrder/myOrder'
})
},
goCollect() {
uni.navigateTo({
url: '/pages/my/collect/collect'
})
},
goAgreement() {
uni.navigateTo({
url: '/pages/my/agreement/agreement'
})
},
handleSignClick() {
// 查找第一个未签到的项目
const nextItemIndex = this.signList.findIndex(item => !item.signed);
if (nextItemIndex === -1) {
// 所有都签过了
uni.showToast({
title: '本周已全部签到',
icon: 'none'
});
return;
}
// 执行签到
this.sign(nextItemIndex);
},
sign(index) {
const item = this.signList[index];
// 防止重复签到
if (item.signed) {
uni.showToast({
title: '已签到',
icon: 'none'
});
return;
}
// 使用 $set 确保响应式更新
this.$set(this.signList[index], 'signed', true);
uni.showToast({
title: `签到成功！获得 ${item.points} 积分`,
icon: 'success'
});
// 可在此发送请求保存到后端
// this.submitSignIn(index);
// this.$set(this.signList[index], 'signed', false);
}
},
onLoad() {
this.signList.forEach((item, i) => {
this.$set(this.signList[i], 'signed', false);
});
this.$nextTick(() => {
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight
})
}
}
</script>
帮我优化签到的地方
最新发布
本文探讨了在 Django 项目中遇到的 admin.py 注册错误问题。主要关注于字段重复导致的问题，并提供了一些排查和解决思路。
扫一扫
5789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
