taoke/pages/order/deposit.vue

<template>
	<view style="overflow: hidden;">
		<payment-pasword ref="paymentPassword" mode="1" @submit="balancePay"></payment-pasword>
		<timer-tips v-if="orders.length" :createtime="orders[0].createtime"></timer-tips>
		<view class="money-info">
			保证金：{{deposit}}元
		</view>
		<!-- <view class="sum">合计：{{total_amount_sum|priceFilter}}元</view> -->

		<view class="pay-method">
			<view class="label">请选择支付方式</view>
			<view>
				<view class="item" :class="{'active':pay_method==='alipay'}"
					@tap="pay_method='alipay',pay_provider='alipay'">
					<image class="image" src="../../static/alipay.png" mode="scaleToFill"
						style="width: 50upx;height: 50upx;"></image>支付宝
				</view>
				<view class="item" :class="{'active':pay_method==='wechat'}"
					@tap="pay_method='wechat',pay_provider='wxpay'">
					<image class="image" src="../../static/wxpay.png" mode="scaleToFill"
						style="width: 50upx;height: 50upx;"></image>微信支付
				</view>
				<!-- 				<view class="item" :class="{'active':pay_method==='balance'}" @tap="pay_method='balance'">
					<image class="image" src="../../static/logo.png" mode="scaleToFill"
						style="width: 50upx;height: 50upx;"></image>使用余额（{{$store.state.user.money}}）
				</view> -->
			</view>
			<view class="" style="margin-top: 40upx;">
				<button class="pay-btn" type="default" @tap="pay">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import paymentPasword from "@/components/sanshui-payment-password/index.vue"
	export default {
		data() {
			return {
				deposit: 2000,
				pay_method: "alipay",
				pay_provider: "alipay",
				orders: [],
				order_no: ""
			}
		},
		components: {
			paymentPasword
		},
		computed: {
			total_amount_sum() {
				return deposit;
			}
		},

		onLoad(option) {
			this.order_no = option.order_no;
			// this.getCashierData();
		},
		methods: {
			getCashierData() {
				this.$http.get({
					url: "/order/cashier",
					data: {
						order_no: this.order_no
					},
					success: (res) => {
						this.orders = res.data.data.map((value) => {
							value.products_json = JSON.parse(value.products_snapshot)
							return value;
						})
					}
				})
			},
			balancePay(e) {
				console.log(e)
				this.$http.post({
					url: '/order/balancePay',
					data: {
						'order_no': this.order_no,
						'pay_method': this.pay_method,
						'amount': this.total_amount_sum,
						'safe_pass': e.value
					},
					success: (res) => {
						uni.navigateTo({
							url: "/pages/order/order",
						})
					}
				})
			},
			pay() {
				if (this.pay_method !== 'balance') {
					this.$http.get({
						url: '/order/pay',
						data: {
							'order_no': this.order_no,
							'pay_method': this.pay_method,
							'amount': this.total_amount_sum

						},
						success: (res) => {

							uni.requestPayment({
								provider: this.pay_provider,
								orderInfo: res.data.data,
								success: (res) => {
									uni.showModal({
										content: JSON.stringify(res)
									})
								},
								fail: (res) => {
									uni.showModal({
										content: "支付失败",
									})
								}
							})
						}
					})

				} else {
					this.$refs.paymentPassword.modalFun('show');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		overflow: hidden;
	}

	.money-info {
		font-size: 50upx;
		text-align: center;
		margin: 150upx;
	}

	.sum {
		margin: 20upx;
		font-size: 30upx;
		text-align: right;
		font-weight: bold;
	}

	.pay-method {
		margin: 20upx;
		padding: 20upx;
		background: white;

		.label {
			font-size: 30upx;
			margin-bottom: 20upx;
		}

		.item {
			height: 80upx;
			display: flex;
			align-items: center;
			font-size: 30upx;
			border-bottom: 2upx solid #F5F5F5;

			.image {
				margin-right: 10upx;
			}

			&.active {
				background: url(../../static/gou.png) no-repeat;
				background-size: 40upx 40upx;
				background-position: 600upx 20upx;
			}
		}
	}

	.pay-btn {
		margin: 20upx 0;
		background: $primary-color;
		color: white;
		font-size: 32upx;
		font-weight: bold;
	}
</style>