XLJK-web/xinlijiankang-uniapp-main/pages/user/cp-pay.vue

<template>
	<view class="pages-box">
		<view class="topup-listbtn-box">
			
		  <view class="topup-listbtn-items" v-for="(item,index) in resultList" :key="index">    
		    <view :class="selected == item.id ? 'select_class' :'' " @click="select_items(item.id,item.price)">
					<view class="">{{item.title}}</view>
					<view class="" style="margin-top: 10rpx;">({{item.desc}})</view>
					<view class="" style="margin-top: 10rpx;">
						￥<span style="font-size: 36rpx;font-weight: bold;">{{item.price}}</span>
					</view>
					<view class="" style="margin-top: 10rpx;"><span style="text-decoration:line-through;">￥{{item.original_price}}</span></view>
				</view>
		  </view>

		</view>
		
		<view class="zf-fs-box">
			<text>支付方式:</text>
			<text>微信</text>
		</view>
		<view class="pages-btn" hover-class="hover-btn" @click="submitReview">确认协议并支付￥{{pay_text}}</view>
		<view class="checkbox-view">
		  <checkbox-group @change="bindChange">
		    <label class="checkbox">
		      <checkbox value="1" :checked="checked"/>
		      <text>开通前请阅读</text>
		    </label>
		  </checkbox-group>
		  <text class="lable-text" @click="openPrivacyContract">《服务协议》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: 1,
				pay_text: '',
				sel_info: null,
				checked: true,
				tempFilePaths: '',
				resultList: [],
				order_id: ''
			}
		},
		created() {
		},
		onLoad(option) {
			this.tempFilePaths = option.tempFilePaths;
			this.getPrice();
		},
		methods: {
			select_items(n,t){
				this.selected = n;
				this.pay_text = t;
			},
			getPrice(){
				let that = this;
				that.$request.getPrice({}).then( res =>{
					console.log(res)
					if(res.code == 0){
						let resultList = res.data.result;
						let selected = that.selected;
						resultList.forEach( ele =>{
							if(ele.id == selected){
								that.pay_text = ele.price;
								that.sel_info = ele;
							}
						})
						that.resultList = resultList;
					}else{
						uni.showToast({
							title: res.message,
							icon: "none",
						})
					}
				}).catch( e =>{
					console.log(e)
				})
			},
			submitReview(){
				let that = this;
				let tempFilePaths = JSON.parse(that.tempFilePaths).tempFilePath;
				console.log(tempFilePaths)
				wx.uploadFile({
				  url: 'https://ocr.lfwhzb.com/api/review',
				  filePath: tempFilePaths,
				  name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
				  formData: { pay_id: that.selected },
				  success(res) {
						let data = JSON.parse(res.data);
						if(data.code == 0){
							that.order_id = data.data.order_id;
							that.reviewPay(data.data.order_id);
						}else{
							uni.showToast({
								title: data.message,
								icon:"none"
							})
						}
				  },
				  fail(err) {
				    console.log('上传失败:', err);
				  }
				});
				
				// that.$request.submitReview({
				// 	file: that.file,
				// 	pay_id: that.selected,
				// }).then( res =>{
				// 	console.log(res)
				// 	if(res.code == 0){
				// 		that.order_id = res.data.order_id;
				// 		that.reviewPay(res.data.order_id);
				// 	}else{
				// 		uni.showToast({
				// 			title: res.message,
				// 			icon: "none",
				// 		})
				// 	}
				// }).catch( e =>{
				// 	console.log(e)
				// })
			},
			// 支付
			reviewPay(o){
				let that = this;
				that.$request.reviewPay({
					order_id: o,
				}).then( res =>{
					console.log(res)
					if(res.code == 0){
						let data = res.data;
						uni.requestPayment({
							"appId": data.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							"nonceStr": data.nonceStr, // 随机字符串
							"package": data.package,        // 固定值
							"timeStamp": data.timeStamp,        // 时间戳（单位：秒）
							"signType": data.signType, //签名类型
							"paySign": data.paySign ,// 签名，这里用的 MD5/RSA 签名
							success(res) {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})
								setTimeout(() =>{
									uni.navigateTo({
										url:'../user/cp-cg'
									})
								},1000)
							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: '支付报错',
									icon: 'none'
								})
							}
						})
						
					}else{
						uni.showToast({
							title: res.message,
							icon: "none",
						})
					}
				}).catch( e =>{
					console.log(e)
					uni.showToast({
						title: e,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.pages-box{
		padding: 40rpx;
		box-sizing: border-box;
	}
	.topup-listbtn-box{
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.topup-listbtn-box>view.topup-listbtn-items{
		width: 50%;
		padding: 15rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	.topup-listbtn-items>view{
		text-align: center;
	  height: auto;
	  border-radius: 8px;
	  font-size: 28rpx;
		padding: 20rpx 0;
	  box-shadow: 0 0 20rpx 2rpx #00000020;
	}
	.topup-listbtn-items>.select_class{
	  background: #95bf7f;
	  color: #fff;
	}
	.zf-fs-box{
		width: 462rpx;
		margin: 0 auto;
		margin-top: 160rpx;
		padding: 20rpx 30rpx 10rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.pages-btn{
	  width: 480rpx;
	  height: 74rpx;
	  line-height: 74rpx;
	  text-align: center;
	  background: #95bf7f;
	  color: #fff;
	  border-radius: 20px;
	  margin: 10rpx auto;
		box-shadow: 0 0 20rpx 2rpx #00000020;
	}
	.hover-btn{
	  opacity: 0.8;
	}
	.checkbox-view{
		width: 480rpx;
		margin: 0 auto;
	  margin-top: 20rpx;
	  font-size: 30rpx;
	  color: #333;
	  display: flex;
	  align-items: center;
	}
	.checkbox{
	  display: flex;
	  align-items: center;
	}
	.lable-text{
	  color: blue;
	}
	.checkbox checkbox{
	  transform: scale(0.7);
	}
</style>