GuangYuYuan-app/pages/my/pay.vue

<template>
	<view class="pay">
		<view class="balance">
			<view class="title">
				账户余额（元）
			</view>
			<view class="money">
				{{dBalance}}
			</view>
			<view class="histroy" @click="goBill">
				余额记录
			</view>
		</view>
		<view class="select_money">
			<view class="title">
				充值金额
			</view>
			<view class="option_money">
				<view class="value" :class="currentIndex == index?'current':''" v-for="(item,index) in moneyList" :key="index"
					@click="selectMoney(item,index)">
					￥{{item.value}}
				</view>
			</view>
			<view class="for_js">
				<text>选择为商户充值</text>
				<!-- <span class="select" @click="popup_show = true">去选择 <image src="../../static/identify/more.png" mode=""></image> -->
				<view class="select" @click="popup_show = true">
					<view class="right" >
						<!-- <image :src="$globalData.publicUrl+jsHead" mode="" v-if="jsHead !== ''"></image> -->
						{{jsName}}
						<image src="../../static/identify/more.png" mode=""></image>
					</view>
				</view>
				</span>
			</view>
			<view class="title_text">
				<span style="color:#2F3437;font-size: 28rpx;">温馨提示:</span>
				<span>1 预存的金额和赠送的优惠券均不可提现，转移，转赠</span>
				<span>2 预存余额使用范围，只限本平合项目及交通费支付</span>
				<!-- 3 优惠券可与预存余额同时使用<br>
				4 每个订单优惠券每次仅使用一张<br>
				5 项目回购与优惠券不能同时使用<br>
				6 赠送优惠券金额均为50元一张<br> -->
			</view>
		</view>
		<!-- 		<view class="select_money">
			<view class="title">
				<span>充值对象</span>
				<view class="technician" @click="popup_show = true">
					<view class="right" >
						<image src="../../static/identify/add1.png" mode="" v-if="jsHead == ''"></image>
						<image :src="$globalData.publicUrl+jsHead" mode="" v-else></image>
						{{jsName}}
						<image src="../../static/identify/more.png" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="pay_btn">
			<view class="sub_money">
				充值金额：<text v-if="form.dMoney !== ''">{{form.dMoney}}元</text>
			</view>
			<view class="btn" @click="submit">
				确认充值
			</view>
		</view>

		<view class="select_technician" v-if="popup_show" @click="cut" > 
			<view class="select_technician_content"  @click.stop>
				<view class="head">
					<image src="../../static/identify/head.png" mode=""></image>
				</view>
				<view class="title">
					请选择一位商户充值
				</view>
				<view class="technician_select">
					<view class="address">
						<view class="left" @click="show = true">
							<image src="../../static/identify/my3.png" mode=""></image>
							{{city}}
						</view>
						<u-select v-model="show" :list="cityList" @confirm="confirm"></u-select>
						<view class="right">
							<u-search placeholder="请输入商户昵称" v-model="search" :clearabled="true" :show-action="false" @search="getJsList"></u-search>
						</view>
					</view>
				</view>
				<view class="technician_box" v-if="jsList.length  > 0">
					<view class="technician" :class="nowIndex == index?'option_technician':''" v-for="(item,index) in jsList"
						:key="index" @click="selectJs(item,index)">
						<view class="technician_left">
							<image :src="$globalData.publicUrl + item.cPortrait" mode=""></image>
						</view>
						<view class="technician_center">
							<view class="name">
								{{item.cNickName}}
							</view>
							<view class="technician_data">
								<!-- <view class="technician_mark">
									<image src="../../static/identify/star.png" mode=""></image>
									{{item.nStar}}
								</view> -->
								<view class="technician_num">
									已服务{{item.nNum}}单
								</view>
							</view>
						</view>
						<view class="round">
							<!-- <span class="real" v-if="nowIndex == index"></span> -->
							<!-- <span class="empty" v-else></span> -->
							<!-- <image src="../../static/identify/head.png" mode=""></image> -->
							<image src="../../static/identify/round.png" mode="" v-if="nowIndex !== index"></image>
							<image src="../../static/other/select_round.png" mode="" v-else></image>
						</view>
					</view>
				</view>
				<view class="technician_box" v-else>
					<view class="null">
						<image src="https://www.mescroll.com/img/mescroll-empty.png" mode=""></image>
					</view>
				</view>
				<view class="btn_box">
					<!-- <view class="btn" @click="popup_show = false">
						取 消
					</view> -->
					<view class="btn yes" @click="popup_show = false">
						确 定
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="pays">
			<input type="number" decimal="true" v-model="form.dMoney" placeholder="自定义充值金额（￥）" />
			
			<view>
				<view class="paybtn" @click="submit">充值</view>
			</view>
			<view class="log" @click="goBill">
				账单
			</view>
		</view> -->
	</view>
</template>
<script>
	import wx from 'weixin-js-sdk'
	import {
		pay,
		getSignature,
		getCityList,
		engineer,
		getInfo
	} from '../../api/index.js'
	export default {
		data() {
			return {
				form: {
					dMoney: '',
					cOpenId: uni.getStorageSync('wx_copenid'),
					jsId: ''
				},
				dBalance: 0.00,
				wxconfig: {},
				jsId: '',
				show: false,
				cityList: [],
				city: '城市',
				jsList: [],
				jsName: '去选择',
				moneyList: [{
						value: 200
					},
					{
						value: 500
					},
					{
						value: 2000
					},
					{
						value: 5000
					}
				],
				currentIndex: null,
				search: '',
				popup_show: false,
				nowIndex: null,
				jsHead: ''
			}
		},
		onLoad() {
			wx.checkJsApi({
				jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
				success: function(res) {
					// 以键值对的形式返回，可用的api值true，不可用为false
					// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
				}
			});
		},
		methods: {
			cut(){
				this.popup_show = false
			},
			//账户余额
			getinfo() {
				getInfo().then(res => {
					if (res.data.code == 200) {
						this.isLogin = true
						this.info = res.data.data,
							this.dBalance = res.data.data.dBalance.toFixed(2)
					}
				})
			},
			//选择商户
			selectJs(item, index) {
				this.nowIndex = index
				this.form.jsId = item.id
				this.jsHead = item.cPortrait
				this.jsName = item.cName
			},
			//选择部门
			select_address() {
				this.show = true
			},
			selectMoney(item, index) {
				this.currentIndex = index
				this.form.dMoney = item.value
			},
			getDeptList() {
				let data = {}
				// data.city = uni.getStorageSync('selectCity')
				data.city = '太原'
				data.search = this.search
				getCityList().then(res => {
					res.data.data.forEach(item => {
						this.cityList.push({
							label: item.deptName,
							value: item.deptId
						})
					})
				})
			},
			getJsList() {
				let data = {}
				data.city = this.city
				engineer(data).then(res => {
					this.jsList = res.data.data.records
				})
			},
			confirm(e) {
				this.city = e[0].label
				this.getJsList()
			},
			goBill() {
				uni.navigateTo({
					url: '/pages/my/bill'
				})
			},
			submit() {
				if (this.form.dMoney == 0) {
					uni.showToast({
						title: '请选择充值金额',
						icon: 'none'
					})
					return
				}
				let url = 'https://test.baoxianzhanggui.com/fragrance/'
				pay(this.form).then(res => {
					let payConfig = JSON.parse(res.data.data)
					getSignature(url).then(res => {
						this.wxconfig = res.data
						wx.config({
							beta: true,
							debug: false,
							appId: this.wxconfig.appId, // 公众号ID 
							// appId: uni.getAppBaseInfo().host.appId, // 公众号ID 
							timestamp: this.wxconfig.timestamp, // 时间戳，自1970年以来的秒数
							nonceStr: this.wxconfig.nonceStr, // 随机串
							signature: this.wxconfig.sign, // 微信签名方式
							jsApiList: ['getBrandWCPayRequest']
						});
						var vm = this
						wx.invoke(
							'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
								'appId': payConfig.appid, // 公众号名称，由商户传入
								'timeStamp': payConfig.timeStamp, // 时间戳
								'nonceStr': payConfig.nonceStr, // 随机串
								'package': payConfig.package, // 预支付id
								'signType': payConfig.signType, // 微信签名方式
								'paySign': payConfig.paySign, // 微信签名
							},
							function(res) {
								// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

								// JSON.stringify(res);
								if (res.err_msg == "get_brand_wcpay_request:ok") {

									vm.$message.success(
										"支付成功") // 使用alert来弹窗 支付成功  是没有反应的。所以这里改为框架页面的弹窗就好了。注意必须要上这个微信浏览器内置事件外 转this指向才能弹窗
									// vm.isDisabledSubmitBtn = false;
									vm.getInfo()
								} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
									uni.showToast({
										title: '已取消支付',
										icon: 'none'
									})
									// alert('支付取消');
									// vm.isDisabledSubmitBtn = false;

								} else {
									alert('付款失败');
									// vm.isDisabledSubmitBtn = false;
								}
							})
					})
				})
			},
		},
		onShow() {
			this.getinfo()
			this.getDeptList()
		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		width: 100%;
		height: 100%;
		// padding: 32rpx;
		box-sizing: border-box;
		background: #F8F8F8;

		// position: relative;
		.balance {
			width: 100%;
			height: 256rpx;
			background: linear-gradient(90deg, #2ADDD2 0%, #22BEB5 100%);
			// background: linear-gradient(to right, #35c99d, #27aea7);
			padding: 32rpx;
			box-sizing: border-box;
			color: #fff;
			position: relative;
			z-index: 1;

			.title {
				font-size: 32rpx;
				color: #FFFFFF;
				margin-bottom: 20rpx;
			}

			.money {
				font-size: 56rpx;
				color: #FFFFFF;
				line-height: 66rpx;
				margin-bottom: 20rpx;
			}

			.histroy {
				width: 160rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 12rpx 0px 0px 12rpx;
				font-size: 28rpx;
				color: #22BEB5;
				box-sizing: border-box;
				text-align: center;
				line-height: 56rpx;
				position: absolute;
				top: 76rpx;
				right: 0;
				// transform: translateY(-50%);
			}
		}

		.select_money {
			width: 100%;
			background-color: #fff;
			padding: 48rpx 32rpx;
			box-sizing: border-box;
			border-radius: 48rpx;
			margin-top: -50rpx;
			z-index: 9;
			position: absolute;

			.title_text {
				font-size: 28rpx;

				span {
					font-size: 26rpx;
					color: #666666;
					line-height: 30rpx;
					display: block;
					margin-top: 12rpx;
				}
			}

			.title {
				line-height: 45rpx;

				.right {
					display: flex;
					align-items: center;
					float: right;
					margin-top: -7%;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0px 10rpx;
					}
				}
			}

			.option_money {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;

				// .title_text {
				// 	font-size: 28rpx;
				// }

				.value {
					// width: 45%;
					// height: 100rpx;
					// border-radius: 10px;
					// background-color: rgb(238,251,251);
					width: 321rpx;
					height: 108rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #EEEEEE;
					margin: 12rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 700;
					box-sizing: border-box;
					font-size: 40rpx;
					color: #232A24;
					line-height: 47rpx;
				}

				.current {
					border: 1px solid #22BFB5;
					background: #F2FBFB;
					color: #22BFB5;
				}
			}

			.for_js {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				color: #2F3437;
				// line-height: 35rpx;
				margin-top: 22rpx;
				margin-bottom: 34rpx;
				font-weight: 600;

				.select {
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					display: flex;
					align-items: center;
					image {
						width: 32rpx;
						height: 32rpx;
					}
					.right{
						display: flex;
						align-items: center;
					}
				}

			}
		}

		.select_technician {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;
			.back{
				width: 100%;
				// height: ;
			}
			.select_technician_content {
				width: 630rpx;
				height: 798rpx;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				position: relative;
	z-index: 9999;
				.head {
					position: absolute;
					top: 0;
					left: 50%;
					transform: translate(-50%,-24rpx);

					image {
						width: 200rpx;
						height: 58rpx;
					}
				}

				.title {
					width: 100%;
					height: 40rpx;
					text-align: center;
					font-size: 28rpx;
					margin-top: 10rpx;
					margin-bottom: 32rpx;
				}

				.technician_select {
					height:64rpx;
					margin-bottom: 40rpx;
					.address {
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							// width: 50%;
							display: flex;
							align-items: center;
							margin-right: 32rpx;

							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 5px;
							}
						}

						.right {
							flex: 1;
							// width: 100%;
						}
					}

				}

				.technician_box {
					width: 100%;
					flex: 1;
					overflow-y: auto;

					.null {
						width: 100%;
						height: 100%;

						image {
							width: 100%;
							// margin-top: 50px;
						}
					}

					.technician {
						width: 100%;
						height: 80rpx;
						border-radius: 10px;
						margin-bottom: 10px;
						// padding: 0px 10px;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.technician_left {
							width:80rpx;
							height: 80rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}

						.technician_center {
							width: 60%;
							height: 100%;
							display: flex;
							flex-direction: column;

							.name {
								font-size: 28rpx;
								// margin-top: 8rpx;
								margin-bottom: 10rpx;
							}

							.technician_data {
								// height: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.technician_mark {
									display: flex;
									align-items: center;

									image {
										width: 20px;
										height: 20px;
									}
								}

								.technician_num {
									font-size: 26rpx;
									color: #333333;
								}
							}
						}

						.round {
							width: 36rpx;
							height: 36rpx;
							image{
								width: 36rpx;
								height: 36rpx;
							}
						}
					}
				}

				.btn_box {
					height: 92rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.btn {
						width: 510rpx;
						height: 68rpx;
						text-align: center;
						line-height: 68rpx;
						border: 1px solid #ccc;
						border-radius: 44rpx;
					}

					.yes {
						background: linear-gradient(to right, #35c99d, #27aea7);
						color: #fff;
					}
				}
			}
		}

		.pay_btn {
			width: 100%;
			height: 124rpx;
			background: #FFFFFF;
			border-radius: 10px;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sub_money {
				font-size: 28rpx;
				color: #2F3437;
				display: flex;
				align-items: center;

				text {
					font-size: 36rpx;
					color: #F53E54;
				}
			}

			.btn {
				width: 288rpx;
				height: 76rpx;
				background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
				border-radius: 106rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>