<template>
|
<view class="sign-container ">
|
<image class="sign-bg" mode="aspectFit"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/e9/e95fc4312ac341cdb021f47803e3852fpu6Pi3C2PVVrf85eee3998d17ec30907cd7e2941388a.png">
|
</image>
|
<view class="sign-info p20">
|
<view class="title">
|
<uni-icons class="icon" type="left" size="24" @click="backpage()"></uni-icons>
|
签到
|
</view>
|
<view class="flex" style="margin-top: 40rpx;">
|
<image class="user-icon" v-if="
|
currentInfo.customerDTO&¤tInfo.customerDTO.cover
|
||currentInfo.supplierDTO&¤tInfo.supplierDTO.cover
|
|| currentInfo.picture
|
" :src="
|
currentInfo.customerDTO&¤tInfo.customerDTO.cover
|
||currentInfo.supplierDTO&¤tInfo.supplierDTO.cover
|
|| currentInfo.picture
|
" mode="scaleToFill"></image>
|
<image class="user-icon" v-else
|
src='https://youzhen123.oss-cn-huhehaote.aliyuncs.com/WechatOwnerProperty/images/mrtx.png'
|
mode="scaleToFill"></image>
|
<view>
|
<view class="tj">
|
已经累计签到 <span class="b">{{signNum||0}}</span> 天
|
</view>
|
<view class="tip">
|
明日签到可获取1积分
|
</view>
|
</view>
|
</view>
|
|
</view>
|
<view class="sign-main-container">
|
<image mode="scaleToFill" src="../../../static/images/customer/coupon/sign-main-bg.png" class="bg"></image>
|
<view class="sign-icon-0"></view>
|
<image class="title-top" mode="scaleToFill"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/05/058b7bd0a5884c318e64329051739b0agwMJMk8Hhfccf336b87df7523e7e8799da761965becc.png">
|
</image>
|
<view class="calendar-list flex">
|
<view class="calendar-item" :class="[item.sign?'sign':'',item.date==today?'today':'']" v-for="(item,index) of list" :key="index" @click="signToday(item)">
|
<view class="date">{{item.date==today?'今日':item.dateMonth}}</view>
|
<view class="sign-icon-1">
|
|
</view>
|
<view class="point">{{item.point || 1}}积分</view>
|
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
signNum: 0,
|
list: [],
|
today: ''
|
}
|
},
|
async onLoad() {
|
this.today = this.$util.toDate(new Date())
|
this.list = this.getAllDatesInCurrentMonth()
|
//请求
|
var start = this.list[0].date
|
var end = this.list[this.list.length - 1].date
|
this.$message.showLoading()
|
const {
|
code,
|
data
|
} = await this.$http.request('get', '/api/customer/point/sign/list', {
|
params: {
|
startDate: start,
|
endDate: end,
|
}
|
})
|
this.$message.hideLoading()
|
if (code == 0) {
|
for (var item of this.list) {
|
for (var j of data) {
|
if (j.recordDate && j.recordDate.startsWith(item.date)) {
|
item.sign = true
|
item.point = j.point || 1
|
this.signNum += 1
|
break
|
}
|
}
|
}
|
}
|
|
},
|
methods: {
|
async signToday(item) {
|
if (item.sign) {
|
return
|
}
|
if (item.date === this.today) {
|
|
} else {
|
return
|
}
|
this.$message.showLoading()
|
const {
|
code,
|
data
|
} = await this.$http.request('post', '/api/customer/point/sign/in', {
|
|
})
|
this.$message.hideLoading()
|
if (code == 0) {
|
this.$message.showToast('签到成功')
|
item.sign = true
|
this.signNum += 1
|
this.$forceUpdate()
|
}
|
|
},
|
getAllDatesInCurrentMonth() {
|
const dates = [];
|
const currentDate = new Date();
|
const currentYear = currentDate.getFullYear();
|
const currentMonth = currentDate.getMonth(); // 月份是从0开始的，0代表1月
|
|
// 获取当前月的第一天
|
const firstDay = new Date(currentYear, currentMonth, 1);
|
// 获取当前月的最后一天
|
const lastDay = new Date(currentYear, currentMonth + 1, 0);
|
|
for (let day = firstDay.getDate(); day <= lastDay.getDate(); day++) {
|
dates.push({
|
// date:new Date(currentYear, currentMonth, day),
|
date: this.$util.toDate(new Date(currentYear, currentMonth, day)),
|
dateMonth: this.$util.toMonth(new Date(currentYear, currentMonth, day)),
|
sign: false,
|
point: 1,
|
});
|
}
|
|
return dates;
|
}
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.sign-container {
|
position: relative;
|
|
.sign-main-container {
|
.bg {
|
// background-image: url('@/static/images/customer/coupon/sign-main-bg.png');
|
height: 440rpx;
|
// left: 0rpx;
|
// right: 0rpx;
|
position: absolute;
|
top: -20rpx;
|
max-width: 690rpx;
|
min-width: 690rpx;
|
;
|
z-index: -1;
|
}
|
|
// background-color: #fff;
|
// background-size: 100% 50%;
|
min-height: 444rpx;
|
// padding: 20rpx;
|
position: absolute;
|
top: 400rpx;
|
left: 20rpx;
|
right: 20rpx;
|
// z-index: -
|
|
.calendar-list {
|
max-width: 650rpx;
|
padding: 20rpx;
|
background-color: #fff;
|
margin-top: 20rpx;
|
|
.calendar-item {
|
width: 120rpx;
|
height: 136rpx;
|
background: #E7F4E8;
|
border-radius: 8rpx;
|
border: 2rpx solid #E7F4E8;
|
text-align: center;
|
padding-top: 20rpx;
|
padding-bottom: 20rpx;
|
margin: 0 auto;
|
margin-bottom: 20rpx;
|
|
.date {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #000000;
|
line-height: 40rpx;
|
}
|
|
.sign-icon-1 {
|
width: 44rpx;
|
height: 44rpx;
|
margin: 0 auto;
|
background-image: url('@/static/images/customer/coupon/sign-icon-1-0.png');
|
background-size: 100% 100%;
|
|
}
|
|
.point {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #20613D;
|
line-height: 40rpx;
|
}
|
}
|
|
.calendar-item.sign {
|
border: 2rpx solid #87C48C;
|
|
.sign-icon-1 {
|
background-image: url("https://hmy-flower.oss-cn-shanghai.aliyuncs.com/02/02cf142651e84ddab6d2b334fedf3efa5FUKyuraE1U97cfcc36775df368c2f9b34abc8b527d6.png");
|
background-size: 100% 100%;
|
|
}
|
}
|
|
.calendar-item.today {
|
border: 2rpx solid #87C48C;
|
background: linear-gradient(180deg, #D5F2D8 0%, #8BDF92 100%);
|
}
|
}
|
|
.sign-icon-0 {
|
position: absolute;
|
right: 0rpx;
|
top: -70rpx;
|
width: 172rpx;
|
height: 148rpx;
|
background-size: 100% 100%;
|
|
background-image: url("https://hmy-flower.oss-cn-shanghai.aliyuncs.com/24/242efb615f4e4827bdda1b252906db9bIcLxoETs7MXVc85f821ae127c62dbe772349d1e6951e.png");
|
}
|
|
.title-top {
|
// background-image: url("https://hmy-flower.oss-cn-shanghai.aliyuncs.com/05/058b7bd0a5884c318e64329051739b0agwMJMk8Hhfccf336b87df7523e7e8799da761965becc.png");
|
width: 346rpx;
|
height: 42rpx;
|
// margin-top: 20rpx;
|
margin: 20rpx;
|
margin-left: 40rpx;
|
}
|
}
|
|
.sign-info {
|
position: absolute;
|
left: 0rpx;
|
top: 80rpx;
|
right: 0rpx;
|
|
.title {
|
text-align: center;
|
font-weight: 600;
|
font-size: 32rpx;
|
position: relative;
|
|
.icon {
|
position: absolute;
|
left: 0rpx;
|
z-index: 1;
|
}
|
}
|
|
.user-icon {
|
width: 110rpx;
|
height: 110rpx;
|
margin-right: 20rpx;
|
border-radius: 50%;
|
}
|
|
.tj {
|
margin-left: 48rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #000000;
|
line-height: 40rpx;
|
margin-bottom: 10rpx;
|
|
.b {
|
font-size: 42rpx;
|
font-weight: 600;
|
}
|
}
|
|
.tip {
|
background: linear-gradient(to right, #D8ECDA, #E8F3E9);
|
padding: 10rpx 20rpx;
|
border-radius: 20rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #619663;
|
line-height: 40rpx;
|
text-align: left;
|
margin-top: 10rpx;
|
}
|
|
}
|
|
|
|
.sign-bg {
|
// background-image: url("https://hmy-flower.oss-cn-shanghai.aliyuncs.com/e9/e95fc4312ac341cdb021f47803e3852fpu6Pi3C2PVVrf85eee3998d17ec30907cd7e2941388a.png");
|
width: 750rpx;
|
|
min-height: 482rpx;
|
position: relative;
|
}
|
|
|
|
|
|
}
|
</style>
|
