ts_aimz_uni/pages/pay/payment/payment.vue

<template>
	<view class="page-container">
		<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
			<swiper-item>
				<image src="/static/images/banner_1.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/banner_2.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
		</swiper>
		<!-- 充值金额输入 -->
		<view class="card-box sum-input-box mt-20">
			<view class="mt-20">充值金额</view>
			<view class="sum-input mt-20">
				<text style="font-size: 12px;margin-bottom: 6px;">¥</text>
				<input class="input-money" type="digit" placeholder-style="font-size:23px;" placeholder="请输入金额"
					@input="obMoney" :value="payMoney" />
			</view>
			<scroll-view scroll-x class="mt-20">
				<view class="list-tabs">
					<block v-for="(item,index) in paySumOptions" :key="index">
						<view :class="currentTab==index? 'tab-select' :'tab-normal'" class="item-margin"
							@click="doChangePayMoney" :data-value="item" :data-index="index">
							<text>{{item}}</text>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 付款方式 -->
		<view class="card-box mt-20">
			<view>付款方式</view>
			<radio-group class="form-radio_wrap">
				<view class="pay-option-item mt-20" @click="doChangePayWay" data-value="1">
					<view class="option-type">
						<view class="icon icon-bd"></view>
						<!-- #ifdef MP-BAIDU -->
						<view>百度支付</view>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<view>抖音支付</view>
						<!-- #endif -->
					</view>
					<radio :checked="payWay==1" value="1"></radio>
				</view>
				<view class="pay-option-item" @click="doChangePayWay" data-value="2">
					<view class="option-type">
						<view class="icon icon-card"></view>
						<view>对公转账</view>
					</view>
					<radio :checked="payWay==2" value="2"></radio>
				</view>
			</radio-group>
		</view>
		<!-- 套餐包 -->
		<view class="card-box mt-20">
			<view class="bag-box">
				<view :class="currentBagTab=='MATERIAL'?'bag-select':'bag-normal'" class="border-left"
					@click="doChangeBagTab" data-value="MATERIAL">写材料套餐包</view>
				<view :class="currentBagTab=='ALL'?'bag-select':'bag-normal'" class="border-right"
					@click="doChangeBagTab" data-value="ALL">全托管套餐包</view>
			</view>
			<ContainerLoading style="min-height: 40vh;" :loadingVisible="listLoading" @doRefresh="doRefreshList">
				<view class="bag-list" style="min-height: 40vh;">
					<!-- 列表 -->
					<block v-for="(item,index) in bagList" :key="index">
						<view class="bag-item">
							<view class="bag-item-title-box">
								<view class="bag-title">{{item.packageName}}</view>
								<view class="bag-desc">{{item.packageDescription}}</view>
							</view>
							<view class="bag-item-desc-box">
								<rich-text :nodes="moneyTxt(10,14,item.packageMoney/100)"></rich-text>
								<view class="bag-btn" @click="chooseBag" :data-value="item">选购</view>
							</view>
						</view>
					</block>
				</view>
			</ContainerLoading>
		</view>
		<view class="bottom-fixed-footer">
			<view class="bottom-btn-green" @click="doPay">确认充值</view>
		</view>
	</view>
	<view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import ContainerLoading from '@/components/container-loading.vue';
	import PayService from '@/common/js/net/payApi.js';
	import {
		inject
	} from 'vue';
	import {
		moneyTxt
	} from '@/common/js/conver.js'
	export default {
		components: {
			ContainerLoading
		},
		setup() {
			const globalData = inject('globalData')
			return {
				globalData
			}
		},
		data() {
			return {
				paySumOptions: [100, 300, 500, 1000, 2000, 5000],
				currentTab: 0, //充值金额选项
				payMoney: 100, //支付金额
				currentBagTab: 'MATERIAL', //当前套餐包tab
				bagList: [], //套餐包列表
				payWay: 1, //支付方式  1微信   2对公
				showError: false,
				errorHint: '',
				showSuccess: false,
				successHint: '',
				listLoading: 'loading',
				selectBag: {}, //选中的套餐包
				msgType: 'info',
				msgTxt: '',
				primaryColor: this.globalData.primaryColor
			}
		},
		onLoad() {
			const _self = this
			uni.setNavigationBarTitle({
				title: 'AI喵著'
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			_self.doGetPackageList(_self.currentBagTab)
		},
		methods: {
			moneyTxt,
			doRefreshList() {
				this.doGetPackageList(this.currentBagTab)
			},
			//获取可以购买的套餐包
			doGetPackageList(path) {
				const _self = this
				_self.listLoading = 'loading'
				const data = {
					page: 1,
					rows: 20
				}
				PayService.doGetBuyPackageList(path, data)
					.then(res => {
						console.log(res)
						_self.listLoading = res.rows && res.rows.length > 0 ? 'success' : 'empty'
						_self.bagList = res.rows
					})
					.catch(err => {
						console.log(err)
						_self.listLoading = 'error'
						_self.msgType = 'error'
						_self.msgTxt = '不好意思，没能获取到套餐数据。请您再试一次，相信马上就能看到啦。'
						_self.$refs.msg.open()
					})
			},
			//监听充值金额选项
			doChangePayMoney(e) {
				this.payMoney = e.currentTarget.dataset.value
				this.selectBag = {}
				this.currentTab = e.currentTarget.dataset.index
			},
			//监听充值金额变化
			obMoney(e) {
				var _self = this
				const inputValue = e.detail.value
				const regex = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
				if (inputValue != '') {
					if (regex.test(inputValue)) {
						//数字
						_self.payMoney = e.detail.value
						_self.selectBag = {}
						_self.currentTab = -1
					} else {
						_self.msgTxt = '请输入数字'
						_self.msgType = 'error'
						_self.$refs.msg.open()
						setTimeout(() => {
							_self.payMoney = 100
							_self.selectBag = {}
						}, 1000);
					}
				}
			},
			//切换套餐包
			doChangeBagTab(e) {
				this.currentBagTab = e.currentTarget.dataset.value
				this.doGetPackageList(this.currentBagTab)
			},
			//切换支付方式
			doChangePayWay(e) {
				this.payWay = e.currentTarget.dataset.value
			},
			//选中套餐包
			chooseBag(e) {
				const _self = this
				const selItem = e.currentTarget.dataset.value
				_self.payMoney = selItem.packageMoney / 100
				_self.currentTab = -1
				_self.selectBag = selItem
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			//调用微信支付
			toWeChatPay() {
				const _self = this
				const data = {
					rechargeMoney: _self.payMoney,
					packageInfoId: _self.selectBag.packageInfoId ? _self.selectBag.packageInfoId : ''
				}
				// #ifdef MP-BAIDU
				_self.doPayBd(data)
				// #endif
			},
			doPayBd(data) {
				const _self = this
				uni.showLoading({
					title: '支付中...',
				})
				PayService.doGetBdPayParams(data)
					.then(res => {
						uni.hideLoading()
						console.log('获取支付参数成功', res)
						if (res && res.tpOrderId) {
							const orderInfoRes = {
								dealId: res.dealId,
								appKey: res.appKey,
								totalAmount: res.totalAmount,
								tpOrderId: res.tpOrderId,
								dealTitle: res.dealTitle,
								signFieldsRange: res.signFieldsRange,
								rsaSign: res.rsaSign,
								notifyUrl: res.notifyUrl
							}
							uni.requestPayment({
								provider: 'baidu',
								orderInfo: orderInfoRes,
								success: succRes => {
									console.log('支付成功', succRes)
									_self.msgTxt = '恭喜，您的充值已成功到账！'
									_self.msgType = 'success'
									_self.$refs.msg.open()
									setTimeout(() => {
										uni.navigateBack()
									}, 1800);
								},
								fail: failErr => {
									console.log('调用支付函数失败', failErr)
									var hint = '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
									_self.msgTxt = failErr.errMsg ? failErr.errMsg :
										'很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
									_self.msgType = 'error'
									_self.$refs.msg.open()
								}
							})
						} else {
							console.log('获取支付参数失败', res)
							_self.msgType = 'error'
							_self.msgTxt = err.msg ? err.msg : '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
							_self.$refs.msg.open()
						}
					})
					.catch(err => {
						uni.hideLoading()
						console.log('获取支付参数失败Fail', err)
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '很抱歉，本次充值失败，可能是网络不稳定或支付信息有误，请检查后重试。'
						_self.$refs.msg.open()
					})
			},
			//去支付
			doPay() {
				const _self = this
				//判断钱大于0
				if (_self.payMoney > 0) {
					if (_self.payWay == '1') {
						//微信
						_self.toWeChatPay()
					} else {
						//对公 需要传递参数 选中套餐 or 直接冲钱
						const id = _self.selectBag.packageInfoId
						const name = _self.selectBag.packageName
						uni.redirectTo({
							url: `/pages/pay/publicPay/publicPay?packageId=${id}&name=${name}&money=${_self.payMoney}`,
						})
					}
				} else {
					//显示输入金额提示
					_self.msgTxt = '请输入要充值的金额'
					_self.msgType = 'error'
					_self.$refs.msg.open()
				}
			}
		}
	}
</script>

<style lang="scss">
	.input-money {
		font-size: 48rpx;
		font-weight: bold;
		height: 24px;
		line-height: 24px;
		text-align: left;
	}

	.input-money-placeholder {
		font-size: 24px;
		font-weight: bold;
		height: 24px;
		line-height: 24px;
		text-align: left;
	}

	.card-box {
		border-radius: 10rpx;
		display: flex;
		padding: 30rpx;
		flex-direction: column;
		background-color: white;
		border: 1rpx solid #F5F5F5;
	}

	.sum-input-box {
		font-size: 28rpx;
	}

	.sum-input-box .title {
		font-size: 12px;
		color: black;
	}

	.sum-input-box input {
		font-size: 42rpx;
		color: black;
		padding: 20rpx 10rpx;
		flex: 1;
	}

	.sum-input {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: baseline;
		border-bottom: 1rpx solid #dbdada;
		font-weight: bold;
	}

	.pay-option-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.pay-option-item .option-type {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		margin: 20rpx 0rpx;
		font-size: 28rpx;
	}

	.option-type .icon {
		width: 42rpx;
		height: 42rpx;
		padding-right: 20rpx;
	}

	.list-tabs {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 10rpx 0rpx;
	}

	.bag-box {
		display: flex;
		flex-direction: row;
		font-size: 28rpx;
	}

	.bag-select {
		flex: 1;
		text-align: center;
		background-color: $primary-color;
		color: white;
		padding: 20rpx;
		align-self: center;
	}

	.bag-normal {
		flex: 1;
		text-align: center;
		background-color: transparent;
		color: $primary-color;
		border: 1rpx solid $primary-color;
		padding: 20rpx;
	}

	.tab-select {
		font-size: 20rpx;
		color: black;
		background-color: #FAE9D0;
		text-align: center;
		padding: 5rpx 30rpx;
		white-space: nowrap;
	}


	.item-margin {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.item-margin:nth-of-type(n+2) {
		margin-left: 20rpx;
	}

	.tab-normal {
		font-size: 20rpx;
		color: #F4CC92;
		background: #FFFFFF;
		border: 1rpx solid #F4CC92;
		text-align: center;
		padding: 5rpx 30rpx;
		white-space: nowrap;
	}

	.bottom-btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		width: 100vw;
		line-height: 100rpx;
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80px;
	}

	.green-bottom-btn {
		background-color: #37AD46;
		color: white;
		text-align: center;
		height: 42px;
		width: 90vw;
		line-height: 42px;
		border-radius: 20rpx;
		margin-bottom: 20px;
	}


	.green-bottom-btn:active {
		background-color: #7ef58e;
		color: white;
	}

	.bag-list {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 110rpx;
		width: 86vw;
	}

	.bag-item {
		display: flex;
		flex-direction: row;
		border: 1rpx solid rgba(239, 239, 239, 1);
		padding: 20rpx;
	}

	.bag-item:nth-of-type(n+2) {
		border-top: none;
		border-left: 1rpx solid rgba(239, 239, 239, 1);
		border-right: 1rpx solid rgba(239, 239, 239, 1);
		border-bottom: 1rpx solid rgba(239, 239, 239, 1);
	}

	.bag-item-title-box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		flex: 1;
	}

	.bag-title {
		font-size: 28rpx;
		color: $text-color;
		font-weight: bold;
	}

	.bag-desc {
		font-size: 24rpx;
		color: $text-gray-hint-color;
		margin-top: 20rpx;
	}

	.bag-item-desc-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.bag-num {}

	.bag-btn {
		padding: 5rpx 30rpx;
		color: $white-color;
		border-radius: 20rpx;
		background-color: $primary-color;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		margin-top: 20rpx;
		text-align: center;
		white-space: nowrap;
	}

	// .p-title {

	// }

	// .bag-item-title-box .title {
	// 	font-size: 40rpx;
	// 	color: black;
	// 	font-weight: 500;
	// }

	// .bag-item-title-box .sum {
	// 	font-size: 14px;
	// 	color: black;
	// 	font-weight: 400;
	// }




	// .bag-item-desc-box .num {

	// }

	// .bag-item-desc-box .btn {

	// }
</style>