oil-station/gasStation-uni/pagesHome/memberRecharge/index.vue

<template>
	<view class="centenr">
		<!-- 储值卡 -->
		<view class="vip-top" v-if="type=='balance'">
			<view class="t-right">储值卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
			<view class="t-title">当前余额（元）</view>
			<view class="t-num">{{cardBalance.cardBalance || 0}}</view>
		</view>
		<!-- 囤油卡 -->
		<view class="vip-top" v-if="type=='oilCard'">
			<view class="t-right">囤油卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
			<view class="t-title">剩余油量（L）</view>
			<view class="t-num">{{cardBalance.cardBalance || 0}}</view>
		</view>

		<view class="vip-title">
			<view class="">{{storeName || "--"}}</view>
			<!-- <image src="../../static/new/qh.png" style="width: 18px; height: 18px;" @click="show = true"></image> -->
		</view>
		<!-- 储值卡 -->
		<view v-if="type=='balance'">
			<view class="input-box">
				<view class="i-title">充值金额</view>
				<view class="n_input">
					<input type="text" v-model="rechargeOrder.balance" :disabled="isEdit">
					<view class="r-title">
						{{staff.realName || "--"}}
					</view>
				</view>
			</view>
			<view class="wrap_box">
				<view class="w_box" v-for="(item,index) in rechargeList" :key="index" @click="setIndex(index,item)"
					:class="{ 'acvit' :windex  == index}">
					<view class="">充{{item.rechargeBalance}}元</view>
					<view class="">赠{{item.giftBalance}}元</view>
				</view>
				<view class="w_box" @click="setIndex(rechargeList.length)"
					:class="{ 'acvit' :windex  == rechargeList.length}">
					<view class="" style="line-height: 40px;">自定义金额</view>
				</view>
			</view>
			<view class="input-box">
				<view class="i-title">赠送金额</view>
				<view class="n_input">
					<input type="text" v-model="rechargeOrder.giftBalance" disabled>
				</view>
			</view>
			<view class="input-box">
				<view class="i-title">充值备注</view>
				<view class="b_input">
					<input type="text" v-model="rechargeOrder.remark">
				</view>
			</view>
		</view>
		<!-- 囤油卡 -->
		<view v-if="type=='oilCard'">
			<view class="input-box">
				<view class="i-title">充值金额</view>
				<view class="n_input">
					<input type="text" v-model="rechargeOrder.balance" :disabled="isEdit">
					<view class="r-title">
						{{staff.realName || "--"}}
					</view>
				</view>
			</view>
			<view class="wrap_box">
				<view class="w_box1" v-for="(item,index) in oilRechargeList" :key="index" @click="setIndex(index,item)"
					:class="{ 'acvit' :windex  == index}">
					<view class="">充值{{item.rechargeBalance}}元，囤油{{item.incomeLitres}}升</view>
					<view class="">锁定单价{{item.lockPrice}}元/L</view>
				</view>
			</view>
			<view class="input-box">
				<view class="i-title">充值备注</view>
				<view class="b_input">
					<input type="text" v-model="rechargeOrder.remark">
				</view>
			</view>
		</view>

		<view class="title-box">
			<view class="i-title">充值有礼</view>
			<view class="i-text" v-for="(item,index) in describe" :key="index">{{item.discountActiveDescribe}}</view>
		</view>
		<view class="k-box">
			<view class="i-title">充值规则</view>
			<view class="i-text" v-if="describe.length>0">活动时间：{{describe[0].time}}</view>
			<view class="i-text" v-else>暂无规则</view>
		</view>

		<view style="width: 100%; height: 88px; "></view>
		<view class="bottom_">
			<view class="anniu_" @click="goRecharge()">
				立即充值{{rechargeOrder.balance}}元
			</view>
		</view>
		<u-popup :show="show" :closeable="true" :round="10" mode="bottom" @close="close">
			<view class="_tbox">
				<view class="_btop">选择油站</view>
				<view class="input_sou">
					<input type="text" placeholder="请输入油站" />
					<u-icon name="search" size="18px"></u-icon>
				</view>
				<view class="h_box" v-for="(item,index) in 4" :key="index">
					<view class="">测试A店</view>
					<view class="">129.9km</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		data() {
			return {
				type: 'oilCard',
				show: false,
				windex: 0,
				storeId: uni.getStorageSync("storeId"),
				storeName: "",
				// 充值信息列表
				rechargeList: [],
				// 囤油卡充值列表信息
				oilRechargeList: [],
				// 员工列表
				staffList: [],
				staff: {},
				query: {
					chainStoreId: uni.getStorageSync("chainStoreId"),
					couponType: '',
					useStatus: 0,
					pageNo: 1,
					pageSize: 10
				},
				cardBalance: {},
				rechargeOrder: {
					payType: uni.getStorageSync("appltType"),
					mtStaffId: '',
					id: '',
					storeId: uni.getStorageSync("storeId"),
					chainStoreId: uni.getStorageSync("chainStoreId"),
					cardRecordId: '',
					balance: 0,
					types: 0
				},
				isEdit: true,
				describe: [],
				// 小程序类型 微信 WECHAT 支付宝 ALIPAY
				appltType: uni.getStorageSync("appltType"),
			}
		},
		onShow() {
			this.getList()
			this.getList1()
			this.getUserBalance()
			this.getDescribe()
		},
		methods: {
			// 调用充值接口
			goRecharge() {
				if (this.type == 'oilCard') {
					uni.showToast({
						icon: 'error',
						title: "暂未开发！"
					})
					return;
				}
				let _this = this
				request({
					url: 'business/marketingActivity/cardValueRecord',
					method: 'post',
					data: this.rechargeOrder,
				}).then(res => {
					if (res.code === 200) {
						if (_this.appltType == "WECHAT") {
							if (!res.data.reservedPayInfo) {
								uni.showToast({
									title: '支付失败，请联系商家',
									icon: "none"
								})
								return;
							}
							let payProvider = "wxpay"
							_this.orderInfo = JSON.parse(res.data.reservedPayInfo);
							uni.requestPayment({
								// 微信支付provider: 'wxpay' 支付宝支付 'alipay'
								provider: payProvider,
								timeStamp: _this.orderInfo.timeStamp,
								nonceStr: _this.orderInfo.nonceStr,
								package: _this.orderInfo.package,
								signType: 'MD5',
								paySign: _this.orderInfo.paySign,
								success: function(res) {
									console.log('success:', res);
									uni.reLaunch({
										url: '/pagesRefuel/orderSuccess/index'
									})
								},
								fail: function(err) {
									request({
										url: "business/marketingActivity/cardValueRecord/changeOrderPayStatus",
										method: 'post',
										data: {
											"orderNo": res.data.orderNo,
											"status": "payFail"
										},
									}).then((res) => {})
									uni.showToast({
										title: "支付失败!",
										icon: "error"
									})
									// console.log('fail:', err);
								}
							});
						}
					}
					if (_this.appltType == "ALIPAY") {
						if (!res.data.reservedTransactionId) {
							uni.showToast({
								title: '支付失败，请联系商家',
								icon: "none"
							})
							return;
						}
						my.tradePay({
							tradeNO: res.data.reservedTransactionId
						}, function(resp) {
							if (resp.resultCode == '9000') {
								console.log("支付成功")
								uni.reLaunch({
									url: '/pagesRefuel/orderSuccess/index'
								})
							} else {
								request({
									url: "/business/marketingActivity/cardValueRecord/changeOrderPayStatus",
									method: 'post',
									data: {
										"orderNo": res.data.orderNo,
										"status": "payFail"
									},
								}).then((res) => {})
								uni.showToast({
									title: "支付失败!",
									icon: "error"
								})
								console.log('支付失败，' + resp.resultCode);
							}
						});
					}
				})
			},
			// 获取充值活动描述信息
			getDescribe() {
				request({
					url: "/business/marketingActivity/cardValue/appletList",
					method: 'get',
					params: {
						storeId: this.storeId,
						isonline: '0',
						activeStatus: "1"
					},
				}).then((res) => {
					this.describe = res.data
				})
			},
			// 获取列表信息
			getList() {
				request({
					url: "/business/marketingActivity/cardValue/appletL",
					method: 'get',
					params: {
						storeId: this.storeId
					},
				}).then((res) => {
					this.storeName = res.data.storeName
					this.rechargeList = res.data.cardValueList
					if (res.data.cardValueList && res.data.cardValueList.length > 0) {
						this.rechargeOrder.balance = res.data.cardValueList[0].rechargeBalance
						this.rechargeOrder.payAmount = res.data.cardValueList[0].rechargeBalance
						this.rechargeOrder.bidBalance = res.data.cardValueList[0].bidBalance
						this.rechargeOrder.rechargeBalance = res.data.cardValueList[0].rechargeBalance
						this.rechargeOrder.giftBalance = res.data.cardValueList[0].giftBalance
						this.rechargeOrder.id = res.data.cardValueList[0].id
					}
					this.staffList = res.data.staffList
					this.staff = res.data.staff
				})
			},
			// 获取列表信息
			getList1() {
				request({
					url: "business/marketingActivity/cardFuelDiesel/selectAllApplet",
					method: 'get',
					params: {
						storeId: this.storeId,
						activeStatus: 1
					},
				}).then((res) => {
					this.oilRechargeList = res.data.records
					console.log(res, 271);
				})
			},
			getUserBalance() {
				request({
					url: '/business/userManager/user/getUserBalanceApplet',
					method: 'get',
					params: this.query
				}).then(res => {
					if (res.code == 200) {
						this.cardBalance = res.data
					}
				})
			},
			close() {
				this.show = false
			},
			setIndex(index, data) {
				this.windex = index
				if (this.type == 'balance') {
					if (index != this.rechargeList.length) {
						this.rechargeOrder.balance = data.rechargeBalance
						this.rechargeOrder.payAmount = data.rechargeBalance
						this.rechargeOrder.bidBalance = data.bidBalance
						this.rechargeOrder.rechargeBalance = data.rechargeBalance
						this.rechargeOrder.giftBalance = data.giftBalance
						this.rechargeOrder.id = data.id
					} else {
						this.rechargeOrder.balance = 0
						this.rechargeOrder.payAmount = 0
						this.rechargeOrder.bidBalance = 0
						this.rechargeOrder.rechargeBalance = 0
						this.rechargeOrder.giftBalance = 0
					}
				}
				if (this.type == 'oilCard') {

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.centenr {}

	.vip-top {
		width: 95%;
		height: 90px;
		background: url('../../static/imgs/topback.png') no-repeat;
		background-size: 100% 100%;
		margin: 15px auto;
		overflow: hidden;
		border-radius: 4px;
		color: #fff;
		box-sizing: border-box;
		padding: 10px;
	}

	.t-right {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: flex-end;
		font-size: 14px;
	}

	.t-title {
		font-size: 14px;
		color: #FFFFFF;
		margin-bottom: 5px;
	}

	.t-num {
		font-size: 20px;
		color: #FFFFFF;
	}

	.vip-title {
		width: 95%;
		margin: 15px auto;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		color: #333333;
	}

	.n_input {
		width: 95%;
		height: 40px;
		background: #FAFAFA;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-left: 10px;
	}

	.b_input {
		width: 95%;
		height: 40px;
		background: #fff;
		border-radius: 4px;
		border: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input-box {
		width: 95%;
		margin: 15px auto;
	}

	.title-box {
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding: 15px 10px;
	}

	.bottom_ {
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		background: #fff;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wrap_box {
		width: 95%;
		margin: 15px auto;
		display: flex;
		flex-wrap: wrap;

	}

	.w_box {
		width: 31%;
		border: 1px solid #EEEEEE;
		border-radius: 4px;
		text-align: center;
		color: #333333;
		box-sizing: border-box;
		padding: 5px;
		font-size: 14px;
		margin-bottom: 15px;
		margin-right: 1%;
	}

	.w_box1 {
		width: 48%;
		border: 1px solid #EEEEEE;
		border-radius: 4px;
		text-align: center;
		color: #333333;
		box-sizing: border-box;
		padding: 5px;
		font-size: 14px;
		margin-bottom: 15px;
		margin-right: 1%;
	}

	.anniu_ {
		width: 80%;
		height: 35px;
		background: #FF9655;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 50px;
		color: #fff;
	}

	.i-title {
		font-weight: 600;
		font-size: 14px;
		color: #333333;
		margin-bottom: 15px;
	}

	.k-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px 10px;
	}

	.acvit {
		background: #FF9655 !important;
		color: #fff !important;
	}

	.r-title {
		border-left: 1px solid #eee;
		width: 60px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #333333;

	}

	._tbox {
		border-radius: 10px;
		background: #fff;
		width: 100%;


	}

	._btop {
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #EEEEEE;
		text-align: center;
		font-weight: 600;
		font-size: 14px;
		color: #333333;
	}

	.input_sou {
		width: 95%;
		border: 1px solid #EEEEEE;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 5px 10px;
		margin: 15px auto;
	}

	.h_box {
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding: 5px 15px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>