664 lines
13 KiB
Vue
664 lines
13 KiB
Vue
<!-- 签到任务 -->
|
||
<template>
|
||
<navbar_neadVue title="签到任务" background_color="#CAF6F5"></navbar_neadVue>
|
||
<view class="content-top">
|
||
<view class="top">
|
||
<view class="top-right-text">
|
||
<text @click="GoTo()">签到明细</text>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="top-left-text">
|
||
<text>{{campus_coin}}</text>
|
||
<text>校园币</text>
|
||
</view>
|
||
|
||
<view class="top-left">
|
||
<text>我的校园币</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="right-image">
|
||
<image src="../../static/images/sign/jin.png"></image>
|
||
</view>
|
||
|
||
<view class="content-bottom">
|
||
<view class="c-bottom">
|
||
<text>
|
||
已连续签到<text class="text-1">{{number_days_sign}}</text>天
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-bottom-bot">
|
||
<view class="bot-text">
|
||
<text>记得去商城兑换礼物奥！</text>
|
||
</view>
|
||
|
||
<!-- 签到日期 -->
|
||
<view>
|
||
<view class="data">
|
||
<view class="data-view" v-for="(item,index) in weekDates" :key="index">
|
||
<image v-if="item.isDate == true" class="data-image"
|
||
src="../../static/images/sign/one_l.png">
|
||
</image>
|
||
<image v-else class="data-image" src="../../static/images/sign/one.png"></image>
|
||
<text class="data-text">{{item.data}}日</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 签到任务 -->
|
||
<view class="task">
|
||
<view style="height: 60rpx;">
|
||
<text class="tasktext">签到任务</text>
|
||
</view>
|
||
|
||
<view class="task-content" v-for="(item,index) in arr" :key="index">
|
||
<!-- 签到按钮 -->
|
||
<view class="task-right" @click="goTaskRight(item.type,item.id)">
|
||
<text>{{item.type}}</text>
|
||
</view>
|
||
<view>
|
||
<text class="c-text">{{item.title}}</text>
|
||
<image style="width: 21rpx;height: 21rpx;margin-left: 36rpx;vertical-align: middle;"
|
||
src="../../static/images/sign/one.png">
|
||
</image>
|
||
<text class="count-text">+{{item.rewards}}</text>
|
||
</view>
|
||
<view class="task-left">
|
||
<text class="left-text">{{item.content}}</text>
|
||
<text v-show="item.conditons != null" class="left-text"
|
||
style="margin-left: 20rpx;">{{leftParenthesis}}</text>
|
||
<text v-show="item.conditons != null" class="left-0text">{{acquiesce}}</text>
|
||
<text v-show="item.conditons != null"
|
||
class="left-text">{{slash}}{{item.conditons}}{{rightParenthesis}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 24rpx;"></view>
|
||
</view>
|
||
|
||
<view class="bottom">
|
||
<view class="bottom-left"></view>
|
||
<view class="bottom-text">
|
||
<text class="bottom-text-s">兑换商城</text>
|
||
<view class="bottom-text-r" @click="GoExchange()">
|
||
<text style=" vertical-align: middle;">更多</text>
|
||
<image style="width: 14rpx; height: 23rpx;margin-left: 9rpx; vertical-align: middle;"
|
||
src="../../static/images/sign/rig.png">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view>
|
||
<ex></ex>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
getCurrentInstance
|
||
} from "vue";
|
||
import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
|
||
import ex from "@/pages/common/exchange/index.vue";
|
||
import {
|
||
listTask,
|
||
getTask,
|
||
delTask,
|
||
addTask,
|
||
updateTask
|
||
} from "@/api/signln/checktask/task";
|
||
|
||
import {
|
||
listSignTa,
|
||
getSignTa,
|
||
delSignTa,
|
||
addSignTa,
|
||
updateSignTa,
|
||
newtableone,
|
||
listSignTaUser
|
||
} from "@/api/signln/SignTa/SignTa";
|
||
|
||
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance();
|
||
|
||
|
||
//首次进入页面的用户创建一条数据
|
||
function FirstEntry() {
|
||
newtableone('sign_table').then(response => {})
|
||
}
|
||
|
||
|
||
// 签到的数据
|
||
let arr = ref([])
|
||
const leftParenthesis = ref("(")
|
||
const rightParenthesis = ref(")")
|
||
const slash = ref("/");
|
||
const acquiesce = ref("0");
|
||
/** 查询签到任务列表 */
|
||
function getList() {
|
||
listTask().then(response => {
|
||
arr.value = response.rows;
|
||
});
|
||
}
|
||
getList();
|
||
|
||
//签到表自己的数据
|
||
const form = reactive([]);
|
||
|
||
|
||
// 校园币
|
||
let campus_coin = ref(0);
|
||
// 连续签到天数
|
||
let number_days_sign = ref(0);
|
||
//上次签到的时间
|
||
let lastTimeSign = ref();
|
||
//具体日期
|
||
const past = 19;
|
||
|
||
/** 查询签到详情列表 */
|
||
function getListsign() {
|
||
listSignTaUser().then(response => {
|
||
if (response.rows.length > 0) {
|
||
form.value = response.rows[0];
|
||
campus_coin.value = response.rows[0].campusCoin;
|
||
number_days_sign.value = response.rows[0].numberDaysSign;
|
||
lastTimeSign.value = response.rows[0].lastTimeSign;
|
||
} else {
|
||
FirstEntry();
|
||
}
|
||
});
|
||
}
|
||
getListsign();
|
||
|
||
//签到点击事件
|
||
function goTaskRight(type, id) {
|
||
switch (type) {
|
||
case "立即签到":
|
||
SignSuccess(id);
|
||
break;
|
||
case "立即邀请":
|
||
uni.navigateBack({
|
||
url: '/pages/index'
|
||
});
|
||
// proxy.$tab.navigateTo('/pages/index')
|
||
break;
|
||
default:
|
||
uni.navigateBack({
|
||
url: '/pages/index'
|
||
});
|
||
// proxy.$tab.navigateTo('/pages/index')
|
||
break;
|
||
}
|
||
|
||
cot.value++;
|
||
Ipp(cot.value);
|
||
// console.log(weekDates)
|
||
// console.log(cot.value)
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
// 签到成功
|
||
function SignSuccess(id) {
|
||
//判断是否给币的条件
|
||
ToDaySign();
|
||
form.value.numberDaysSign++;
|
||
form.value.lastTimeSign = parseTime(new Date(), '{y}-{m}-{d}')
|
||
form.value.campusCoin = arr.value.find(item => item.id == id).rewards;
|
||
form.value.taskid = id;
|
||
|
||
console.log(form.value)
|
||
// 修改签到表
|
||
updateSignTa(form.value).then(response => {
|
||
getListsign();
|
||
});
|
||
|
||
// 添加签到明细
|
||
// addSign(form.value).then(response => {
|
||
|
||
// });
|
||
|
||
|
||
// uni.showToast({
|
||
// title: '操作成功',
|
||
// //将值设置为 success 或者直接不用写icon这个参数
|
||
// icon: 'success',
|
||
// //显示持续时间为 2秒
|
||
// duration: 2000
|
||
// })
|
||
}
|
||
|
||
// 今天是否签到了
|
||
function ToDaySign() {
|
||
var today = new Date().getDate();
|
||
var lasttimesign = new Date(form.value.lastTimeSign).getDate();
|
||
if (today != lasttimesign) {
|
||
return;
|
||
} else {
|
||
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// 获取上次签到时间 然后返回后面7天的时间 然后上次签到断了则开始新的日期
|
||
var date = new Date();
|
||
console.log("日" + date.getDate() + "年" + date.getFullYear() + "月" + (date.getMonth() + 1))
|
||
|
||
const datetimes = reactive([{
|
||
data: date.getDate(),
|
||
}])
|
||
|
||
const sdate = new Date();
|
||
const dayof = date.getDay();
|
||
const weekDates = reactive([]);
|
||
sdate.setDate(date.getDate() - dayof + (dayof === 0 ? -6 : 1));
|
||
console.log(dayof)
|
||
for (let i = 0; i < 7; i++) {
|
||
const date = new Date(sdate);
|
||
date.setDate(sdate.getDate() + i);
|
||
const list = {
|
||
data: date.getDate(),
|
||
isDate: false
|
||
}
|
||
weekDates.push(list);
|
||
}
|
||
|
||
|
||
//连续签到天数
|
||
const cot = ref(2);
|
||
|
||
|
||
|
||
async function Ipp(ite) {
|
||
const indexs = weekDates.indexOf(weekDates.find(item => item.data == past));
|
||
for (let j = 0; j < ite; j++) {
|
||
weekDates.find(item => item.data == past + j).isDate = true;
|
||
}
|
||
}
|
||
|
||
Ipp(cot.value);
|
||
// console.log(indexs)
|
||
// console.log(weekDates)
|
||
|
||
//签到时间
|
||
const datetime = reactive([])
|
||
|
||
//
|
||
function GoTo() {
|
||
uni.navigateTo({
|
||
url: './signiddetails'
|
||
});
|
||
}
|
||
|
||
//
|
||
function GoExchange() {
|
||
uni.navigateTo({
|
||
url: './exchangemall',
|
||
});
|
||
}
|
||
|
||
|
||
//时间
|
||
function parseTime(time, pattern) {
|
||
if (arguments.length === 0 || !time) {
|
||
return null
|
||
}
|
||
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
|
||
let date
|
||
if (typeof time === 'object') {
|
||
date = time
|
||
} else {
|
||
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
|
||
time = parseInt(time)
|
||
} else if (typeof time === 'string') {
|
||
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
|
||
}
|
||
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||
time = time * 1000
|
||
}
|
||
date = new Date(time)
|
||
}
|
||
const formatObj = {
|
||
y: date.getFullYear(),
|
||
m: date.getMonth() + 1,
|
||
d: date.getDate(),
|
||
h: date.getHours(),
|
||
i: date.getMinutes(),
|
||
s: date.getSeconds(),
|
||
a: date.getDay()
|
||
}
|
||
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||
let value = formatObj[key]
|
||
// Note: getDay() returns 0 on Sunday
|
||
if (key === 'a') {
|
||
return ['日', '一', '二', '三', '四', '五', '六'][value]
|
||
}
|
||
if (result.length > 0 && value < 10) {
|
||
value = '0' + value
|
||
}
|
||
return value || 0
|
||
})
|
||
return time_str
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<style scoped>
|
||
@import '@/pages/common/navbar/navbar.css';
|
||
|
||
.content-top {
|
||
/* height: 424rpx; */
|
||
height: 502rpx;
|
||
background: linear-gradient(-180deg, #c9f6f5, #ffffff);
|
||
}
|
||
|
||
.top {
|
||
margin-left: 32rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.top-right-text>text {
|
||
font-weight: Regular;
|
||
/* width: 95rpx; */
|
||
height: 24rpx;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
float: right;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.top-left-text {
|
||
padding-top: 99rpx;
|
||
padding-left: 1rpx;
|
||
}
|
||
|
||
.top-left-text>text:first-child {
|
||
color: #000000;
|
||
font-weight: Regular;
|
||
font-face: Microsoft YaHei;
|
||
font-size: 48rpx;
|
||
text-align: left;
|
||
line-height: 46.29rpx;
|
||
}
|
||
|
||
.top-left-text>text:last-child {
|
||
color: #000000;
|
||
font-weight: Regular;
|
||
font-weight: 600;
|
||
font-face: Microsoft YaHei;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
line-height: 46.29rpx;
|
||
}
|
||
|
||
.top-left>text {
|
||
display: block;
|
||
font-weight: Regular;
|
||
/* width: 119rpx; */
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #6F6F6F;
|
||
padding-left: 1rpx;
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
.right-image>image {
|
||
width: 248rpx;
|
||
height: 289rpx;
|
||
position: absolute;
|
||
top: 279rpx;
|
||
right: 32rpx;
|
||
z-index: 7;
|
||
}
|
||
|
||
.content-bottom {
|
||
width: 319rpx;
|
||
height: 60rpx;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
background: #ffffff;
|
||
margin-top: 48rpx;
|
||
}
|
||
|
||
.c-bottom {
|
||
padding-left: 26rpx;
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
.c-bottom>text:first-child {
|
||
color: #000000;
|
||
font-weight: Regular;
|
||
font-face: Microsoft YaHei;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
line-height: 46.29rpx;
|
||
}
|
||
|
||
.text-1 {
|
||
color: #fa3939;
|
||
font-weight: Regular;
|
||
font-face: Microsoft YaHei;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
line-height: 46.29rpx;
|
||
}
|
||
|
||
.content-bottom-bot {
|
||
position: relative;
|
||
/* width: 686rpx; */
|
||
height: 214rpx;
|
||
border-radius: 0 32rpx 32rpx 32rpx;
|
||
background: #ffffff;
|
||
z-index: 9;
|
||
}
|
||
|
||
.bot-text {
|
||
padding-left: 24rpx;
|
||
display: block;
|
||
/* padding-top: 12rpx; */
|
||
}
|
||
|
||
.bot-text>text {
|
||
font-weight: Regular;
|
||
width: 248rpx;
|
||
height: 24rpx;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #6F6F6F;
|
||
}
|
||
|
||
.task {
|
||
width: 686rpx;
|
||
/* height: 484rpx; */
|
||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||
background: #ffffff;
|
||
/* background: #fa3939; */
|
||
margin-left: 32rpx;
|
||
margin-right: 32rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.tasktext {
|
||
display: block;
|
||
font-weight: Regular;
|
||
width: 144rpx;
|
||
height: 36rpx;
|
||
font-size: 36rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
padding-top: 24rpx;
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.task-content {
|
||
margin-left: 24rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.task-right {
|
||
margin-top: 16rpx;
|
||
width: 120rpx;
|
||
height: 48rpx;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
background: #f99b46;
|
||
float: right;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.c-text {
|
||
font-weight: Regular;
|
||
width: 95rpx;
|
||
height: 24rpx;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.count-text {
|
||
font-weight: Regular;
|
||
width: 20rpx;
|
||
height: 16rpx;
|
||
font-size: 20rpx;
|
||
text-align: left;
|
||
color: #F99B46;
|
||
padding-left: 3rpx;
|
||
line-height: 16rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.task-right>text {
|
||
font-weight: Regular;
|
||
/* width: 95rpx; */
|
||
height: 25rpx;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #FFFFFF;
|
||
display: block;
|
||
margin: auto;
|
||
text-align: center;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.task-left {
|
||
/* display: block; */
|
||
height: 20rpx;
|
||
}
|
||
|
||
.left-text {
|
||
display: inline;
|
||
color: #999999;
|
||
font-weight: Regular;
|
||
font-face: Microsoft YaHei;
|
||
font-size: 20rpx;
|
||
text-align: left;
|
||
/* margin-top: 12rpx; */
|
||
}
|
||
|
||
.left-0text {
|
||
color: #fb5c5c;
|
||
font-weight: Regular;
|
||
font-face: Microsoft YaHei;
|
||
font-size: 20rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
.bottom {
|
||
margin-right: 32rpx;
|
||
margin-left: 32rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.bottom-left {
|
||
width: 4rpx;
|
||
height: 30rpx;
|
||
border-radius: 2rpx 2rpx 2rpx 2rpx;
|
||
background: #f99b46;
|
||
float: left;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.bottom-text-s {
|
||
font-weight: Regular;
|
||
/* width: 123rpx; */
|
||
height: 31rpx;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
margin-left: 24rpx;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
.bottom-text-r {
|
||
float: right;
|
||
font-weight: Regular;
|
||
/* width: 47rpx; */
|
||
height: 24rpx;
|
||
line-height: 48rpx;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
vertical-align: middle;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.bottom-text-r>text {}
|
||
|
||
|
||
.data {
|
||
display: flex;
|
||
margin-left: 24rpx;
|
||
padding-left: 2rpx;
|
||
margin-top: 48rpx;
|
||
border-radius: 0 32rpx 32rpx 32rpx;
|
||
}
|
||
|
||
.data-view {
|
||
margin-right: 45rpx;
|
||
}
|
||
|
||
.data-image {
|
||
display: flex;
|
||
}
|
||
|
||
.data-image {
|
||
width: 42rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.data-text {
|
||
display: block;
|
||
font-weight: Regular;
|
||
width: 60rpx;
|
||
height: 22rpx;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
color: #7E7E7E;
|
||
margin-left: -8rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
</style> |