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">《娇骄儿88卡权益服务协议》</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:1,
				orderRights:{},
				userInfo:{},
				serviceObjectList:[],
				serviceObjectIndex:0,
				equityList:[],
				serviceObject:{},
				orderNo:''
			};
		},
		onLoad(option) {
			let sysInfo = uni.getSystemInfoSync()
			this.windowHeight =sysInfo.windowHeight -50  +'px'//除标题栏栏外的屏幕可用高度
			this.windowHeight1 =sysInfo.windowHeight  +'px'//除标题栏栏外的屏幕可用高度
			this.userInfo = uni.getStorageSync('userInfo')
			this.listServiceObject()
			this.equityCardList()
		},

		methods: {

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

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

			commonGeneralOrder(){
				this.$refs.popup.close()
				this.$api.commonGeneralOrder({
					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()
				}).catch((res) =>{
					console.log(res)
					that.$refs.popup.close()
					let msg = res.data.msg || '操作失败';
					uni.showToast({
						title: msg,
						icon:'error'
					})
				});
			},

			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: '支付成功!'
							});
						},
						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(){
				this.$api.listServiceObject(this.reqParm).then((res)=>{
					this.serviceObjectList[0] =res.data.data
				})
			},

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

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

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

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

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

</style>