You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.2 KiB
133 lines
3.2 KiB
<template>
|
|
<view class="padding-top-lg">
|
|
<template v-if="!success">
|
|
<view class="text-xxl padding text-center margin-top-xl">
|
|
<text class="text-black text-bold">{{ site.siteName }}</text>
|
|
</view>
|
|
<button @tap="handleSign(siteId)" class="cu-btn lg bg-purple margin sign-btn">{{ typeText }}</button>
|
|
</template>
|
|
<view class="success" v-else>
|
|
<view class="cuIcon-roundcheckfill text-green"></view>
|
|
<text class="text-black margin-top">打卡成功</text>
|
|
<button @tap="goHome" class="cu-btn lg bg-purple margin-lg sign-btn">返回首页</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from 'vuex';
|
|
import { formatQuery } from 'utils/util';
|
|
import { SCAN_SIGN } from 'api/api';
|
|
|
|
export default {
|
|
name: 'SignScan',
|
|
data() {
|
|
return {
|
|
siteId: '',
|
|
siteName: '',
|
|
success: false,
|
|
type: 0, // 0进 / 1出
|
|
timer: null,
|
|
latitude: 37.80079,
|
|
longitude: 112.58679,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapState('site', ['site']),
|
|
...mapState('user', ['token']),
|
|
typeText() {
|
|
return this.type === 0 ? '进场打卡' : '出场打卡';
|
|
},
|
|
},
|
|
|
|
onLoad(options) {
|
|
console.log('options: ', options);
|
|
this.init(options);
|
|
this.getLocation();
|
|
},
|
|
|
|
methods: {
|
|
...mapActions('site', ['sign', 'getSiteByQrId']),
|
|
|
|
init(options) {
|
|
try {
|
|
const query = formatQuery(decodeURIComponent(options.scene));
|
|
console.log('query: ', query);
|
|
const { d, t } = query;
|
|
if (!d || !t) {
|
|
uni.showToast({
|
|
title: '二维码参数错误',
|
|
icon: 'none',
|
|
duration: 3000,
|
|
});
|
|
}
|
|
this.siteId = d;
|
|
this.type = +t;
|
|
this.getSignInfo({ param: { id: d, type: t } });
|
|
} catch (error) {
|
|
console.log('error: ', error);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 获取场所的基本信息
|
|
* @param {object} params 提交给后端的参数
|
|
*/
|
|
getSignInfo(params) {
|
|
this.timer && clearInterval(this.timer);
|
|
if (!this.token) {
|
|
this.timer = setTimeout(() => {
|
|
this.getSignInfo(params);
|
|
}, 100);
|
|
} else {
|
|
this.getSiteByQrId(params);
|
|
}
|
|
},
|
|
|
|
// 获取当前的地址位置
|
|
// 注意用国测局的数据 map只支持gcj02
|
|
getLocation() {
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success: res => {
|
|
this.longitude = res.longitude;
|
|
this.latitude = res.latitude;
|
|
console.log('当前位置的经度:' + res.longitude);
|
|
console.log('当前位置的纬度:' + res.latitude);
|
|
},
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 扫码打卡
|
|
* @param {string} siteId 场所id
|
|
*/
|
|
async handleSign(siteId) {
|
|
try {
|
|
const params = { param: { siteId, locationLatitude: this.latitude, locationLongitude: this.longitude } };
|
|
await this.sign(params);
|
|
this.success = true;
|
|
} catch (error) {
|
|
console.log('error: ', error);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sign-btn {
|
|
display: flex;
|
|
}
|
|
.success {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 100rpx;
|
|
|
|
.cuIcon-roundcheckfill {
|
|
font-size: 200rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|