xinelu-applet-ui/pagesC/wxSport/wxSport.vue

<template>
	<view class="app">
		<view class="item" v-for="item in list" :key="item.date" @tap="tapstep(item)">
			<view class="left">
				<image v-if="item.step>=5000" mode="" :src="require('@/pagesC/images/greensport.png')"></image>
				<image mode="" v-else :src="require('@/pagesC/images/sport.png')"></image>
				<view class="time" :style="item.step>=5000?'color:#29AF2A':''">
					{{item.date}}
				</view>
			</view>
			<view class="right">
				<view class="number" :style="item.step>=5000?'color:#29AF2A':''">
					{{item.step}}
				</view>
				<view class="text" :style="item.step>=5000?'color:#29AF2A':''">
					步数
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		wxSportDecrypt,
		wxsportadd,
		wxsportaddV1
	} from '@/api/pages/homepage/homepage.js'
	export default {
		data() {
			return {
				list: undefined,
				userinfo: undefined,
				sportlist: [],
			};
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo')
			this.getStepInfo();
		},
		methods: {
			tapstep(item) {
				if (item.step >= 5000) {
					wxsportaddV1(uni.getStorageSync('userinfo').cardNo, item.date, item.step).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '新增积分成功',
								duration: '1500',
								type: 'success',
							})
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								duration: '1500',
								type: 'error',
							})
						}
					})
				}
			},
			wxSport(res, resp) {
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1;
				let day = currentDate.getDate();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let time = `${year}-${month}-${day}`
				let identtime = `${this.userinfo.cardNo}${year}-${month}-${day}`
				if (uni.getStorageSync('sportlist')) {
					if (uni.getStorageSync('sportlist')[0].date != time) {
						uni.removeStorageSync('sportlist');
					} else {
						this.sportlist = uni.getStorageSync('sportlist');
					}
				}
				let obj = {
					code: res.code,
					encryptedData: resp.encryptedData,
					iv: resp.iv
				}
				wxSportDecrypt(obj).then(Sportres => {
					this.list = Sportres.data
					if (!this.sportlist.some(e => e.text == identtime)) {
						if (Sportres.data && Sportres.data[0].step >= 5000) {
							wxsportadd(this.userinfo.cardNo, Sportres.data[0].step).then(sportaddres => {
								if (sportaddres.code == 200) {
									let sportitem = {
										text: `${this.userinfo.cardNo}${Sportres.data[0].date}`,
										date: Sportres.data[0].date
									}
									this.sportlist.unshift(sportitem)
									uni.setStorageSync('sportlist', this.sportlist);
								}
							})
						}
					}
				})
			},
			getStepInfo() {
				let that = this
				wx.getSetting({
					success: function(res) {
						// 未开启微信运动授权
						if (!res.authSetting['scope.werun']) {
							wx.showModal({
								title: '提示',
								content: '获取微信运动步数，需要开启计步权限',
								success: function(resp) {
									if (resp.confirm) {
										//跳转去设置
										wx.openSetting({
											success: function(respp) {}
										})
									}
								}
							})
						} else {
							wx.login({
								success: function(loginres) {
									if (loginres.code) {
										wx.getWeRunData({
											success: function(WeRunDatares) {
												that.wxSport(loginres,
													WeRunDatares)
											}
										});
									}
								},
								fail: function(err) {
									wx.showModal({
										title: '提示',
										content: '未开通微信运动，请关注“微信运动”公众号后重试',
										showCancel: false,
										confirmText: '知道了'
									})
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.app {
		width: 100%;
		padding-bottom: 50rpx;

		.item {
			width: 96%;
			margin: 20rpx auto;
			height: 200rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			border-radius: 10rpx;

			.right {
				width: 44%;
				height: 160rpx;
				margin: 20rpx 0;
				font-weight: bold;
				color: #333333;
				text-align: center;

				.text {
					line-height: 60rpx;
				}

				.number {
					line-height: 100rpx;
					font-size: 56rpx;
				}
			}

			.left {
				width: 54%;
				display: flex;
				align-items: center;
				height: 160rpx;
				margin: 20rpx 0;
				border-right: 2rpx solid #DBDBDB;

				image {
					width: 90rpx;
					height: 90rpx;
					margin-left: 30rpx;
				}

				.time {
					font-size: 32rpx;
					color: #999999;
				}
			}
		}
	}
</style>