jje_uniapp/storePages/rights/index.vue

<template>
	<view class="page">

		<view  class="row-list flex-row justify-start" v-for="(item,index) in 10" :key="index">
			<view class="h-text flex-col justify-center ">
				<view class="money">
					<text>￥100</text>
				</view>
				<view class="desc">
					<text>权益券</text>
				</view>
			</view>

			<view class="h-center-content flex-col ">
				<view class="h-value">
					<text>门店通用</text>
				</view>
				<view class="title">
					使用平台：<text>全平台</text>
				</view>
				<view class="title">
					使用次数：3
				</view>
				<view class="title">
					到期时间：2023-12-12
				</view>
			</view>

			<view class="h-right-content flex-col justify-center ">
				<picker  @change="bindPickerChange" mode='selector'  range-key="nickName" :value="serviceObjectIndex" :range="serviceObjectList">
					<view class="btn" @click="payRights(item)">
						<text>购买</text>
					</view>
				</picker>

			</view>

		</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>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				curServiceTab:1,
				orderRights:{},
				userInfo:{},
				serviceObjectList:[],
				serviceObjectIndex:0

			};
		},
		onLoad(option) {
			this.userInfo = uni.getStorageSync('userInfo')
			this.listServiceObject()
		},

		methods: {

			bindPickerChange(e){
				console.log(e)
			},

			// 查询服务对像信息列表
			listServiceObject(){
				this.$api.listServiceObject(this.reqParm).then((res)=>{
					this.serviceObjectList = res.data.data
				})
			},

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

			payItem(num){
				if (this.userInfo.balance < this.price){
					return
				}
				this.curServiceTab = num
			},

			payRights(item){
				this.orderRights = item
			}

		},
	};
</script>
<style lang="scss" scoped>

	@import '/common/css/common.css';
	@import './index.rpx.scss';

</style>