打卡的积分
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
|
||||
</div>
|
||||
<div class="title">任务大厅</div>
|
||||
<div class="card-list">
|
||||
<div class="card-list" v-if="list.length">
|
||||
<div class="card" v-for="(item,index) in list" :key="index" @click="$linkTo('./taskDetail?id='+item.id)">
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.detail }}</p>
|
||||
@@ -12,12 +12,12 @@
|
||||
<image mode="aspectFill" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
|
||||
</div>
|
||||
<div class="time">
|
||||
<div class="goin">
|
||||
<div class="goin" v-if="item.intoBegintime && item.intoEndtime">
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-jinchangshijian.png" alt="">
|
||||
<div class="label">进场时间:</div>
|
||||
<div class="value">{{ item.intoBegintime.substring(0, 16)}} 至 {{ item.intoEndtime.substring(0, 16) }}</div>
|
||||
</div>
|
||||
<div class="exit">
|
||||
<div class="exit" v-if="item.exitBegintime && item.exitEndtime">
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-lichangshijian.png" alt="">
|
||||
<div class="label">离场时间:</div>
|
||||
<div class="value">{{ item.exitBegintime.substring(0, 16) }} 至 {{ item.exitEndtime.substring(0, 16) }}</div>
|
||||
@@ -25,11 +25,12 @@
|
||||
<div class="type">
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-renwuleixing.png" alt="">
|
||||
<div class="label">任务类型:</div>
|
||||
<div class="value">{{ item.type==0? '打卡得积分':'报名得积分' }}</div>
|
||||
<div class="value">{{ $dict.getLabel('fdIntegralTaskType', item.type) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty :description="`暂无任务`" class="emptyWrap" v-else/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -44,7 +45,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$instance.post('/app/appintegraltask/list').then(res=> {
|
||||
this.$instance.post('/app/appintegraltask/list?status=1').then(res=> {
|
||||
if(res?.data) {
|
||||
this.list = res.data.records
|
||||
}
|
||||
@@ -55,7 +56,9 @@ export default {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '功德银行'
|
||||
});
|
||||
this.getList()
|
||||
this.$dict.load(['fdIntegralTaskType']).then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<div class="taskDetail">
|
||||
<div class="task">
|
||||
<h4>10月31日线下公益宣传</h4>
|
||||
<p>百年征和波澜壮阔,百年初心历争议弥坚。7月1日上午,庆祝中国共产党成立100周年在国务院举办午,庆
|
||||
祝中国共产党成立100周年在国务院举办午,庆祝中…</p>
|
||||
<div class="imgs" v-for="(item, index) in info.annexs" :key="index">
|
||||
<!-- <img :src="item.annexFile.url" mode="aspectFill" @click="preview(info.annexs, item.annexFile.url)" /> -->
|
||||
<h4>{{ info.title }}</h4>
|
||||
<p>{{ info.detail }}</p>
|
||||
<div class="imgs" v-if="info.files">
|
||||
<image :src="item.url" v-for="(item, index) in info.files" :key="index" mode="aspectFill" @click="preview(item.url)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +14,7 @@
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-dizhi.png" alt="">
|
||||
<div class="items-info">
|
||||
<label>活动地点:</label>
|
||||
<div class="value">丰都县金牛区XXXX大厦XXX楼2101</div>
|
||||
<div class="value">{{ info.address }}</div>
|
||||
</div>
|
||||
<div class="address" @click="toAddress">
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-daohang.png" alt="">
|
||||
@@ -26,45 +25,116 @@
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-renwuleixing.png" alt="">
|
||||
<div class="item-info">
|
||||
<label>任务类型:</label>
|
||||
<div class="value">报名得积分</div>
|
||||
<div class="value">{{ $dict.getLabel('fdIntegralTaskType', info.type) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-jinchangshijian.png" alt="">
|
||||
<div class="item-info">
|
||||
<div class="item-info" v-if="info.intoBegintime && info.intoEndtime">
|
||||
<label>进场时间:</label>
|
||||
<div class="value">2020-12-11 10:10 至 2020-12-11 10:10</div>
|
||||
<div class="value">{{ info.intoBegintime.substring(0, 16) }} 至 {{ info.intoEndtime.substring(0, 16) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="https://cdn.cunwuyun.cn/fengdu/ic-lichangshijian.png" alt="">
|
||||
<div class="item-info">
|
||||
<div class="item-info" v-if="info.exitBegintime && info.exitEndtime">
|
||||
<label>离场时间:</label>
|
||||
<div class="value">2020-12-11 10:10 至 2020-12-11 10:10</div>
|
||||
<div class="value">{{ info.exitBegintime.substring(0, 16) }} 至 {{ info.exitEndtime.substring(0, 16) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="btn-wrapper">
|
||||
<div class="btn" @click="toReport" hover-class="text-hover">报名得积分/积分+5,已报名</div>
|
||||
</div> -->
|
||||
<div class="btn-clock">
|
||||
<div class="btn-circle" @click="toReport" hover-class="text-hover">
|
||||
<div class="daka">打卡签到</div>
|
||||
<div class="text">积分+5</div>
|
||||
<div class="btn-wrapper" v-if="info.type==1">
|
||||
<!-- , -->
|
||||
<div class="btn" @click="signUp" hover-class="text-hover">
|
||||
<span>报名得积分/积分+{{ info.enrollIntegral }}</span>
|
||||
<!-- <span>已报名</span> -->
|
||||
</div>
|
||||
<div class="tips">符合打卡条件,未到打卡时间,无法重复打卡</div>
|
||||
</div>
|
||||
<div class="btn-clock" v-if="info.type == 0">
|
||||
<div class="btn-circle" @click="clockIn" hover-class="text-hover" :class="isClock== 0? 'gray': isClock==3? 'gray': isClock== 2? 'opacity':''">
|
||||
<div class="daka">打卡签到</div>
|
||||
<div class="text" v-if="isClock==1">积分+{{ intoIntegral }}</div>
|
||||
</div>
|
||||
<div class="tips">{{ scope }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: "taskDetail",
|
||||
appName: "任务详情",
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
id: ''
|
||||
id: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
address: '',
|
||||
qqmapsdk: null,
|
||||
distance: 100,
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
intoIntegral() {
|
||||
const times = new Date().getTime()
|
||||
const inSTimes = new Date(this.info.intoBegintime?.replaceAll('-', '/')).getTime()
|
||||
const inETimes = new Date(this.info.intoEndtime?.replaceAll('-', '/')).getTime()
|
||||
const outSTimes = new Date(this.info.exitBegintime?.replaceAll('-', '/')).getTime()
|
||||
const outETimes = new Date(this.info.exitEndtime?.replaceAll('-', '/')).getTime()
|
||||
|
||||
if (times > inSTimes && times < inETimes) {
|
||||
return this.info.intoIntegral
|
||||
}
|
||||
|
||||
if (times > outSTimes && times < outETimes) {
|
||||
return this.info.exitIntegral
|
||||
}
|
||||
|
||||
return 0
|
||||
},
|
||||
isClock() {
|
||||
const times = new Date().getTime()
|
||||
const inSTimes = new Date(this.info.intoBegintime?.replaceAll('-', '/')).getTime()
|
||||
const inETimes = new Date(this.info.intoEndtime?.replaceAll('-', '/')).getTime()
|
||||
const outSTimes = new Date(this.info.exitBegintime?.replaceAll('-', '/')).getTime()
|
||||
const outETimes = new Date(this.info.exitEndtime?.replaceAll('-', '/')).getTime()
|
||||
// 不符合条件(任务未开始、已经结束..)
|
||||
if (times < inSTimes || times > outETimes || (inETimes < times && times < outSTimes)) {
|
||||
return 0
|
||||
}
|
||||
// 在打卡范围内未打卡
|
||||
if (this.info.clockRange > this.distance && (!this.info.intoClock && (inSTimes < times && times < inETimes)) || !this.info.exitClock && (outSTimes < times && times < outETimes)) {
|
||||
return 1
|
||||
}
|
||||
// 已打卡(打卡距离内 && 打卡时间内)
|
||||
if(this.info.clockRange > this.distance && (this.info.intoClock && (inSTimes < times && times < inETimes)) || (this.info.exitClock && outSTimes < times && times < outETimes)) {
|
||||
return 2
|
||||
}
|
||||
// 没在指定范围
|
||||
if(this.distance > this.info.clockRange) {
|
||||
return 3
|
||||
}
|
||||
},
|
||||
scope() {
|
||||
const times = new Date().getTime()
|
||||
const inSTimes = new Date(this.info.intoBegintime?.replaceAll('-', '/')).getTime() // 进场开始
|
||||
const inETimes = new Date(this.info.intoEndtime?.replaceAll('-', '/')).getTime() // 进场结束
|
||||
const outSTimes = new Date(this.info.exitBegintime?.replaceAll('-', '/')).getTime() // 离场开始
|
||||
const outETimes = new Date(this.info.exitEndtime?.replaceAll('-', '/')).getTime() // 离场结束
|
||||
|
||||
if (this.info.clockRange > this.distance && (this.info.intoClock && (inSTimes < times && times < inETimes)) || (this.info.exitClock && outSTimes < times && times < outETimes)) {
|
||||
return `无法重复打卡`
|
||||
}
|
||||
|
||||
if (this.info.clockRange > this.distance && (!this.info.intoClock && (times > inSTimes && times < inETimes)) || !this.info.exitClock && (times > outSTimes && times < outETimes)) {
|
||||
return `符合打卡条件`
|
||||
}
|
||||
|
||||
return `未到打卡时间/不在指定位置`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -75,19 +145,157 @@ export default {
|
||||
scale: 18
|
||||
})
|
||||
},
|
||||
// preview(url) {
|
||||
// uni.previewImage({
|
||||
// urls: this.info.checkPhoto.map(v => v.url),
|
||||
// current: url
|
||||
// })
|
||||
// },
|
||||
preview(url) {
|
||||
uni.previewImage({
|
||||
urls: this.info.files.map(v => v.url),
|
||||
current: url
|
||||
})
|
||||
},
|
||||
getDetail() {
|
||||
this.$instance.post(`/app/appintegraltask/queryDetailById?id=${this.id}`).then(res=> {
|
||||
if(res?.data) {
|
||||
console.log(res);
|
||||
this.info = res.data
|
||||
this.$nextTick(() => {
|
||||
this.getLocation()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 打卡积分
|
||||
clockIn() {
|
||||
if(!this.user.idNumber) {
|
||||
return this.$dialog.confirm({
|
||||
content: '您只有完成信息认证后,才可进行相关操作。',
|
||||
confirmText: '去认证'
|
||||
}).then(() => {
|
||||
this.$linkTo('/mods/AppMine/userInfo')
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
if (!this.latitude) {
|
||||
this.$dialog.alert({
|
||||
title: '温馨提示',
|
||||
content: '您未授权定位,请先授权!'
|
||||
}).then(() => {
|
||||
this.getLocation()
|
||||
}).catch(() => {
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.isClock == 0 || this.isClock == 3) {
|
||||
return this.$dialog.alert({
|
||||
title: '温馨提示',
|
||||
content: '不满足打卡条件!'
|
||||
}).then(() => {
|
||||
this.getLocation()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
if (this.isClock == 2) {
|
||||
return this.$u.toast(`已打卡,请勿重复打卡!`)
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.daKa()
|
||||
},
|
||||
// 报名积分
|
||||
signUp() {
|
||||
if(this.info.enrollClock) return
|
||||
|
||||
this.flag = true
|
||||
this.daKa()
|
||||
},
|
||||
daKa() {
|
||||
this.$instance.post(`/app/appintegraltask/clock`, {
|
||||
address: this.address,
|
||||
clockTime: this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
|
||||
lat: this.latitude,
|
||||
lng: this.longitude,
|
||||
openId: this.user.openId,
|
||||
realName: this.user.realName,
|
||||
taskId: this.id,
|
||||
type: this.info.type
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.flag = false
|
||||
if (this.info.type == 1) {
|
||||
this.$u.toast('报名成功!')
|
||||
} else {
|
||||
this.$u.toast('打卡签到成功!')
|
||||
}
|
||||
setTimeout(()=> {
|
||||
uni.navigateBack()
|
||||
}, 500)
|
||||
}
|
||||
}).catch(err => this.$u.toast(err))
|
||||
},
|
||||
getLocation() {
|
||||
wx.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: () => {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: res => {
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
this.qqmapsdk.reverseGeocoder({
|
||||
location: `${res.latitude},${res.longitude}`,
|
||||
success: data => {
|
||||
console.log(data);
|
||||
this.address = data.result.formatted_addresses.recommend
|
||||
},
|
||||
fail: function (info) {
|
||||
console.log(info)
|
||||
}
|
||||
})
|
||||
|
||||
this.qqmapsdk.calculateDistance({
|
||||
from: {
|
||||
longitude: res.longitude,
|
||||
latitude: res.latitude
|
||||
},
|
||||
to: [{
|
||||
longitude: this.info.lng,
|
||||
latitude: this.info.lat
|
||||
}],
|
||||
success: res => {
|
||||
this.distance = res.result.elements[0].distance
|
||||
},
|
||||
fail: function (error) {
|
||||
console.error(error)
|
||||
},
|
||||
complete: function (res) {
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: e => {
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.$dialog.confirm({
|
||||
content: '您未授权定位,功能将无法使用'
|
||||
}).then(() => {
|
||||
uni.openSetting({
|
||||
success: res => {
|
||||
if (!res.authSetting['scope.userLocation']) {
|
||||
this.$dialog.alert({
|
||||
content: '您未授权定位,功能将无法使用'
|
||||
}).then(() => {
|
||||
})
|
||||
} else {
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
onLoad(o) {
|
||||
this.id = o.id
|
||||
@@ -95,6 +303,9 @@ export default {
|
||||
title: '任务详情'
|
||||
});
|
||||
this.getDetail()
|
||||
this.qqmapsdk = new QQMapWX({
|
||||
key: process.env.NODE_ENV == 'production' ? 'RWWBZ-64BEJ-MVLFJ-FTHLQ-JTR6J-SAB2S' : '3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY'
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -122,11 +333,21 @@ export default {
|
||||
|
||||
.imgs {
|
||||
display: flex;
|
||||
max-width: 450px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
image {
|
||||
height: 208px;
|
||||
width: 33.33%;
|
||||
padding-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -188,13 +409,12 @@ export default {
|
||||
}
|
||||
|
||||
.opacity {
|
||||
opacity: 0.6000000238418579;
|
||||
opacity: 0.6000000238418579 !important;
|
||||
}
|
||||
|
||||
.gray {
|
||||
background: #b5b5bcff;
|
||||
background: #b5b5bcff !important;
|
||||
}
|
||||
|
||||
.btn-clock {
|
||||
height: 372px;
|
||||
width: 100%;
|
||||
@@ -222,6 +442,14 @@ export default {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.opacity {
|
||||
opacity: 0.6000000238418579 !important;
|
||||
}
|
||||
|
||||
.gray {
|
||||
background: #b5b5bcff !important;
|
||||
}
|
||||
.tips {
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
|
||||
Reference in New Issue
Block a user