nurseWeChatAppletUI/pages/integral/integral.vue

<template>
	<view class="app">
		<view class="vacancies">
			<image src="../../static/jifenbeij.png" mode=""></image>
			<view class="lefttext">
				积分余额
			</view>
			<view class="righttext">
				<!-- <image src="../../static/jfgz.png" mode=""></image>
				<view class="">
					积分规则
				</view> -->
			</view>
			<view class="title">
				{{integral}}
			</view>
			<view class="centertext">
				<!-- 20积分将于2022.01.01过期 -->
			</view>
			<view class="bottombutton" @tap='gainshow=true'>
				获取积分
			</view>
		</view>
		<view class="titles">
			积分兑换
		</view>
		<view class="items">
			<view class="item" v-for="(item,index) in goodslist" :key="index">
				<image :src="item.goodsPictureUrl" mode=""></image>
				<view class="title">
					{{item.goodsName}}
				</view>
				<view class="text">
					{{item.attributeDetailsName}}
				</view>
				<view class="jifen">
					需使用
					<span style='padding: 0 5rpx;'> {{item.integralExchangeSill}}</span>
					积分兑换
				</view>
				<view class="btn">
					立即兑换
				</view>
			</view>
		</view>
		<u-mask :show="gainshow" @tap="gainshow = false">
			<view class="mask" @click.stop="">
				<view class="title">
					获取方式
				</view>
				<view class="maskitems">
					<view class="item">
						<image src="../../static/qiandao.png" mode=""></image>
						<view class="titletext">
							累计签到
							<span style='padding: 0 5rpx;'> {{list.totalSignInDays}}</span>
							天(当前签到
							<span style='padding: 0 5rpx;'> {{list.patientSignInCount}}</span>天)
						</view>
						<view class="text">
							＋<span style='padding: 0 5rpx;'> {{list.signInCount}}</span>积分
						</view>
						<view class="btn" @tap='signIninfo' v-if='list.todaySignInCount==0'>
							签到
						</view>
						<view class="btn" v-if='list.todaySignInCount==1'>
							已签到
						</view>
					</view>
					<view class="item" style="background-color: #F44B2F;">
						<image src="../../static/yaoqing.png" mode=""></image>
						<view class="titletext">
							每邀请
							<span style='padding: 0 5rpx;'> 1</span>
							位好友
						</view>
						<view class="text">
							＋<span style='padding: 0 5rpx;'> {{list.inviteFriends}}</span>积分
						</view>
						<view class="btn" style="color: #F44B2F;" @tap="yaoqingshowtrue">
							去完成
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-mask :show="yaoqingshow" @tap="yaoqingshowfalse">
			<view class="masks" @click.stop="">
				<r-canvas ref="rCanvas"></r-canvas>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		signIn,
		selectPatientSignIn,
		selectExchangeGoods
	} from '@/api/integral/index.js'
	import {
		inviteFriends
	} from '@/api/Personal/Personal.js';
	import baseurl from '../../api/baseurl';
	export default {

		data() {
			return {
				integral: 0,
				gainshow: false,
				yaoqingshow: false,
				patientId: null,
				list: null,
				inviteimg: null,
				pageNum: 1,
				pageSize: 10,
				goodstotal: 0,
				goodslist: null,
			};
		},
		onReady() {

		},
		onLoad(options) {
			this.integral = options.integral
			var that = this
			this.selectExchangeGoodsinfo();
			const value = uni.getStorageSync('patientId');
			if (value) {
				that.patientId = value
				that.selectPatientSignInifo();
				inviteFriends(value).then(res => {
					that.inviteimg = res.msg
				})
			}
		},
		methods: {
			yaoqingshowfalse() {},
			//可兑换商品
			selectExchangeGoodsinfo() {
				selectExchangeGoods(this.pageNum, this.pageSize).then(res => {
					res.rows.forEach(e => {
						e.goodsPictureUrl = baseurl + e.goodsPictureUrl
					})
					this.goodslist = res.rows
					this.goodstotal = res.total
				})
			},
			//积分
			selectPatientSignInifo() {
				selectPatientSignIn(this.patientId).then(res => {
					this.list = res.data
				})
			},
			//点击签到
			signIninfo() {
				signIn(this.patientId).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '今日签到成功',
							type: 'success',
							duration: '1000',
						})
						this.selectPatientSignInifo();
					}
				})
			},
		},
		onReachBottom() { //下滑加载
			if (this.goodslist.length >= this.goodstotal) {} else {
				this.pageNum++;
				selectExchangeGoods(this.pageNum, this.pageSize).then(res => {
					res.rows.forEach(e => {
						e.goodsPictureUrl = baseurl + e.goodsPictureUrl
						this.goodslist.push(e)
					})
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			this.selectExchangeGoodsinfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		.masks {
			margin: 50rpx auto 0;
			height: 1100rpx;
			width: 620rpx;

			::v-deep .r-canvas {
				height: 1100rpx !important;
				width: 620rpx !important;
				margin: 0 auto;
			}

			::v-deep .r-canvas-component {
				height: 1100rpx !important;
				width: 620rpx !important;
				margin: 0 auto;
			}
		}

		.mask {
			position: fixed;
			bottom: 0;
			height: 600rpx;
			width: 100%;
			background-color: #fff;

			.maskitems {
				color: #fff;
				width: 90%;
				margin: 60rpx auto 0;

				.item {
					background: #557BC2;
					width: 100%;
					margin: 0 auto 20rpx;
					height: 150rpx;
					position: relative;
					font-size: 26rpx;

					.btn {
						text-align: center;
						width: 121rpx;
						height: 44rpx;
						background: #FFFFFF;
						border-radius: 22rpx;
						position: absolute;
						right: 30rpx;
						top: 58rpx;
						line-height: 44rpx;
						font-size: 22rpx;
						color: #557BC2;
					}

					.text {
						position: absolute;
						left: 150rpx;
						top: 90rpx;
					}

					.titletext {
						position: absolute;
						left: 150rpx;
						top: 48rpx;
					}

					image {
						margin: 49rpx 0 0 43rpx;
						width: 66rpx;
						height: 66rpx;
					}
				}
			}

			.title {
				padding-top: 10rpx;
				font-size: 38rpx;
				font-weight: 600;
				text-align: center;
				width: 100%;
			}
		}

		.items {
			margin-top: 30rpx;

			.item {
				width: 92%;
				margin: 0 auto 12rpx;
				background-color: #FFFFFF;
				height: 220rpx;
				position: relative;

				.text {
					font-size: 24rpx;
					position: absolute;
					left: 220rpx;
					top: 90rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis
				}

				.btn {
					position: absolute;
					right: 40rpx;
					top: 140rpx;
					width: 139rpx;
					height: 44rpx;
					background: #557BC2;
					border-radius: 22rpx;
					color: #fff;
					text-align: center;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}

				.jifen {
					position: absolute;
					left: 220rpx;
					top: 140rpx;
					font-size: 26rpx;
					color: #666666;
				}

				.title {
					width: 460rpx;
					font-size: 34rpx;
					font-weight: 600;
					position: absolute;
					left: 220rpx;
					top: 25rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis
				}

				image {
					margin: 15rpx 0 0 15rpx;
					width: 180rpx;
					height: 180rpx;
				}
			}
		}

		.titles {
			margin: 38rpx 0 0 31rpx;
			font-size: 30rpx;
		}

		.vacancies {
			width: 92%;
			height: 330rpx;
			margin: 0 auto;
			position: relative;
			color: #fff;

			.bottombutton {
				position: absolute;
				top: 230rpx;
				left: 50%;
				font-size: 32rpx;
				color: #557BC2;
				line-height: 72rpx;
				text-align: center;
				transform: translateX(-50%);
				width: 440rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
			}

			.centertext {
				position: absolute;
				top: 160rpx;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				opacity: 0.8;
			}

			.title {
				position: absolute;
				left: 50%;
				font-size: 70rpx;
				top: 90rpx;
				transform: translateX(-50%);
			}

			.righttext {
				position: absolute;
				top: 32rpx;
				right: 31rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				width: 130rpx;
				height: 28rpx;

				image {
					position: absolute;
					left: 0;
					width: 28rpx;
					height: 28rpx;
				}

				view {
					opacity: 0.6;
					position: absolute;
					right: 0;
				}
			}

			.lefttext {
				position: absolute;
				top: 32rpx;
				left: 33rpx;
				font-size: 30rpx;
				line-height: 33rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>