jje_uniapp/storePages/rights/index.vue

<template>
	<view class="page" :style="{ 'height': equityList.length > 0 ? windowHeight : windowHeight1 }">
		<view class="centent">
			<view class="flex-col" v-if="equityList.length === 0">
				<view class="flex-row justify-center">
					<image class="empty" src="/static/imageIcon/empty.png" mode="widthFix"></image>
				</view>
				<view class="emptyText flex-row justify-center">
					<text>暂无内容</text>
				</view>
			</view>

			<scroll-view v-else scroll-y :style="{ 'height': windowHeight }">
				<view class="row-list flex-row justify-start" v-for="(item, index) in equityList" :key="index">
					<view class="h-text flex-col justify-center ">
						<view class="money">
							<text>￥{{ item.salePrice }}</text>
						</view>
						<!--				<view class="desc">-->
						<!--					<text>{{item.title}}</text>-->
						<!--				</view>-->
					</view>

					<view class="h-center-content flex-col justify-around">
						<view class="h-value">
							<text>{{ item.title }}</text>
						</view>
						<view class="title">
							使用项目：{{ item.serviceProjectName || '' }}
						</view>
						<view class="title">
							有效天数：{{ item.effectiveDays }}
						</view>
					</view>

					<view class="h-right-content flex-col justify-center ">
						<view class="btn" @click="payRights(item)">
							<text>购买</text>
						</view>
					</view>

				</view>
			</scroll-view>


		</view>

		<view class="btnTitle flex-row" v-if="equityList.length > 0">
			<u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18" @click="selectChange"></u-icon>
			<u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
			<text :style="{ 'margin-left': '10rpx' }">请阅读并同意</text>
			<text :style="{ 'color': 'red' }" @click="goTermsOfService">《娇骄儿权益服务协议》</text>
		</view>

		<uni-popup ref="popup" :catchtouchmove="true" :animation="false" type="bottom">

			<view class=" payView">
				<view class="flex-row justify-between">
					<text class="payType">微信支付</text>
					<image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
				</view>
				<!--				<view class="payTitle">-->
				<!--					<text>选择微信支付或余额支付</text>-->
				<!--				</view>-->


				<!--				<view class="payItem flex-row justify-between" @click="payItem(1)">-->
				<!--					<view class="flex-row">-->
				<!--						<u-icon name="/static/me/u701.png" color="#38db38" size="36"></u-icon>-->
				<!--						<view class="payName flex-col justify-center">-->
				<!--							<text>余额支付</text>-->
				<!--							<text class="balance">可以余额￥{{userInfo.balance || 0}}</text>-->
				<!--						</view>-->
				<!--					</view>-->

				<!--					<view class="flex-col justify-center">-->
				<!--						<view v-if="curServiceTab === 1" >-->
				<!--							<u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>-->
				<!--						</view>-->
				<!--						<view v-else>-->
				<!--							<u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>-->
				<!--						</view>-->
				<!--					</view>-->

				<!--				</view>-->

				<view class="payItem flex-row justify-between" @click="payItem(2)">
					<view class="flex-row">
						<u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
						<view class="payName flex-col justify-center">
							<text>微信支付</text>
						</view>
					</view>
					<view class="flex-col justify-center">
						<view v-if="curServiceTab === 2">
							<u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
						</view>
						<view v-else>
							<u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
						</view>
					</view>
				</view>

				<view class="commitBtn" @click="commonGeneralOrder">
					<text>确定</text>
				</view>
			</view>

		</uni-popup>

		<u-picker :show="show" title="选择服务对象" :closeOnClickOverlay="true" @close="show = false" :columns="serviceObjectList"
			keyName="nickName" @cancel="show = false" @confirm="confirm"></u-picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			selectIcon: '',
			windowHeight: '',
			windowHeight1: '',
			show: false,
			curServiceTab: 2,
			orderRights: {},
			userInfo: {},
			serviceObjectList: [],
			serviceObjectIndex: 0,
			equityList: [],
			serviceObject: {},
			orderNo: ''
		};
	},
	onLoad(option) {
		this.userInfo = uni.getStorageSync('userInfo')
		let sysInfo = uni.getSystemInfoSync()
		this.windowHeight = sysInfo.windowHeight - 50 + 'px'//除标题栏栏外的屏幕可用高度
		this.windowHeight1 = sysInfo.windowHeight + 'px'//除标题栏栏外的屏幕可用高度
		this.listServiceObject()
		this.equityCardList()
	},

	methods: {

		goTermsOfService() {
			uni.navigateTo({
				url: '/myPages/TermsOfService/index?name=' + '娇骄儿权益服务协议' + '&type=' + 4
			})
		},

		selectChange() {
			this.selectIcon = !this.selectIcon
		},

		commonGeneralOrder() {
			let promotionParam = uni.getStorageSync('promotionParam')
			this.$refs.popup.close()
			this.$api.commonGeneralOrder({
				...promotionParam,
				orderType: 5,
				serviceObjectId: this.serviceObject.id,
				equityCardId: this.orderRights.id
			}).then(res => {
				this.orderNo = res.data.data.orderNo

				if (this.curServiceTab === 1) {
					//开启余额支付
					this.balancePay()
				}
				if (this.curServiceTab === 2) {
					//调微信支付
					this.wechatPay()
				}


			})
		},

		//余额支付
		balancePay() {
			let that = this;
			this.$api.balancePay({
				orderNo: this.orderNo,
				password: ''
			}).then((res) => {
				uni.showToast({
					title: '支付成功!'
				});
				this.getUserInfo()
			})
		},

		wechatPay() {
			let that = this;
			// 发起微信支付
			this.$api.wechatPay({
				orderNo: this.orderNo
			}).then((res) => {
				var param = res.data.data;
				uni.requestPayment({
					appId: param.appid,
					timeStamp: param.timestamp + "",
					nonceStr: param.noncestr,
					package: "prepay_id=" + param.prepayid,
					signType: "RSA",
					paySign: param.sign,
					success: res => {
						uni.showToast({
							title: '支付成功!'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/storePages/myRights/index'
							});
						}, 2000)
					},
					fail: res => {
						console.log(res)
						uni.showModal({
							content: '支付失败',
							showCancel: false
						});
					}
				});
			})
		},

		getUserInfo() {
			this.$api.getUserInfo().then(res => {
				console.log('++++++++++++获取用户信息++++++++++++++++++', res)
				uni.setStorageSync('userInfo', res.data.data)
				this.userInfo = res.data.data
			})

		},

		confirm(e) {
			console.log(e)
			this.serviceObject = e.value[0]
			this.show = false
			this.$refs.popup.open()
		},

		equityCardList() {
			this.$api.equityCardList().then(res => {
				console.log(res)
				this.equityList = res.data.data
			})
		},


		// 查询服务对像信息列表
		listServiceObject() {
			let serviceObjectList = []
			this.$api.listServiceObject(this.reqParm).then((res) => {
				res.data.data.forEach(i => {
					if (i.isSelf != 1) {
						serviceObjectList.push(i)
					}
				})
				this.serviceObjectList[0] = serviceObjectList

			})
		},

		closePayPopup() {
			this.$refs.popup.close()
		},

		payItem(num) {
			if (this.userInfo.balance * 1 < this.orderRights.salePrice * 1) {
				return
			}
			this.curServiceTab = num
		},

		payRights(item) {
			if (this.serviceObjectList[0].length === 0) {
				uni.showModal({
					title: '温馨提示',
					content: '默认服务对象不能使用权益卡，是否前往绑定新的服务对象?',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/myPages/ServiceObjectManagement/index',
							})
						}
					}
				})
				return;
			}


			if (!this.selectIcon) {
				uni.$u.toast('请阅读并同意《娇骄儿权益服务协议》')
				return;
			}
			this.show = true
			this.orderRights = item
		}

	},
};
</script>
<style lang="scss" scoped>
@import '/common/css/common.css';
@import './index.rpx.scss';
</style>