checkstand.vue

<template>
	<view class="stand_content">
		<TopBar title="谛宝收银台"/>
		<view class="stand_title">分期定金</view>
		<view class="stand_price">
			<text class="symbol">¥</text>{{data.advance_payment}}
		</view>
		<view class="flex">
			<image :src="data.img_url"></image>
			<view>
				<view class="stand_goods_name">{{data.equipment_name}}</view>
				<view class="stand_goods_price">¥{{data.equipment_price}}</view>
			</view>
		</view>
		<view class="stand_title" style="margin-top:60rpx">分期定金</view>
		<view class="stand_tips">方案内详细信息</view>
		<view class="stand_nper">{{data.periods_num}}期</view>
		<view class="poupp_deposit">
			<text>定金</text>
			<text>¥ {{data.advance_payment}}</text>
		</view>
		<view class="poupp_nper_detail">
			<view>
				<text>第1期 支付</text>
				<text>¥ {{(Number(data.first_payment)+(Number(data.equipment_price)-Number(data.advance_payment))*Number(data.count)).toFixed(2)}}</text>
			</view>
			<view>
				<text>剩余{{data.periods_num-1}}期 每期支付</text>
				<text>¥ {{(Number(data.remaining_payment)+(Number(data.equipment_price)-Number(data.advance_payment))*Number(data.count)).toFixed(2)}}</text>
			</view>
		</view>
		<view class="pay_btn" @click="open()">确认支付</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_content">
				<view class="popup_top_bar">选择支付方式<text @click="close()"></text></view>
				<view class="flex">
					<text class="pay_title">支付定金</text>
					<text class="pay_num">¥{{data.order_price}}</text>
				</view>
				<view class="flex pay_item" @click="handleSelect(1)">
					<view class="flex">
						<text class="pay_methods_icon yue"></text>
						<view>
							<view class="pay_methods_name">余额支付</view>
							<view class="pay_methods_num">剩余余额：{{data.money}}元</view>
						</view>
					</view>
					<text :class="type ===1 ? 'check' : 'uncheck'"></text>
				</view>
				<view v-if="isWx" class="flex pay_item pay_item_other" @click="handleSelect(2)">
					<view class="flex">
						<text class="pay_methods_icon weixin"></text>
						<view>
							<view class="pay_methods_name">微信支付</view>
						</view>
					</view>
					<text :class="type === 2 ? 'check' : 'uncheck'"></text>
				</view>
				<view v-if="!isWx" class="flex pay_item pay_item_other" @click="handleSelect(3)">
					<view class="flex">
						<text class="pay_methods_icon alipay"></text>
						<view>
							<view class="pay_methods_name">支付宝支付</view>
						</view>
					</view>
					<text :class="type === 3 ? 'check' : 'uncheck'"></text>
				</view>
				<view class="pay_methods_btn" @click="handleSubmit">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import { isWeixin } from '../../common/util.js';
	export default {
		data() {
			return {
				data: {},
				type: 1,
				order_price: '',
				money: '',
				isWx: false,
				contract_no: ''
			}
		},
		onLoad(options){
			this.contract_no = options.contract_no || '';
			this.loadData();
			this.isWx = isWeixin();
		},
		methods: {
			loadData(){
				const install = uni.getStorageSync('installment');
				const { equipment_id, property_id} = install;
				uni.request({
					url: `/uni/api/repayment/PayDetails?contract_no=${this.contract_no || install.contract_no}`,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						const {data} = res;
						if(data.data){
							this.data = data.data;
							this.order_price = data.data.order_price;
							this.money = data.data.money;
						}
					}
				})
			},
			// 选择支付方式
			handleSelect(type){
				this.type = type;
			},
			// 确认支付
			handleSubmit(){
				const {origin} = location;
				const install = uni.getStorageSync('installment');
				// 清除存储合同信息
				// uni.removeStorageSync('temporary');
				const {equipment_id, property_id} = install;
				if(!this.order_price || !this.contract_no){
					uni.showToast({
						title: '参数错误，无法发起支付',
						icon: 'none'
					})
				}
				// 余额支付
				if(this.type === 1){
					uni.navigateTo({
						url: `/pages/yuepay/yuepay?amount=${this.order_price}&money=${this.money}&order_id=${this.contract_no}`
					})
				}
				// 微信支付
				if(this.type === 2){
					this.$jump(`${origin}/uni/api/repayment/RedirectAuth?amount=${this.order_price}&order_id=${this.contract_no}`);
				}
				// 支付宝支付
				if(this.type === 3){
					uni.showLoading({
						title: '提交中。。。'
					})
					uni.request({
						url: `/uni/api/repayment/GoPay`,
						method: 'post',
						dataType: 'json',
						data: {
							amount: parseFloat(this.order_price),
							order_id: this.contract_no,
							payment_code: "epayalipaywap",
							payment_name: "手机支付宝支付"
						},
						success: (res) => {
							const {data} = res;
							uni.hideLoading();
							if(data.code === 0){
								this.$jump(data.data);
							}else{
								uni.showToast({
									title: '发起支付失败',
									icon: 'none'
								})
							}
						}
					})
				}
			},
			open()  {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			}
		},
		components: {
			TopBar,
			uniPopup
		}
	}
</script>

<style lang="less" scoped>
	.stand_content {
		padding: 80rpx 32rpx 32rpx;
		.stand_title {
			height:56rpx;
			font-size:40rpx;
			line-height: 56rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color: #212121;
			margin-top: 40rpx;
		}
		.stand_price {
			height:80rpx;
			font-size:56rpx;
			line-height: 80rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color: #212121;
			margin-top: 10rpx;
			.symbol {
				height:60rpx;
				font-size:44rpx;
				line-height: 60rpx;
				margin-right: 10rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
			}
		}
		.flex {
			display: flex;
			align-items: center;
			margin-top: 60rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
			}
			.stand_goods_name {
				color: #7C7C7C;
				font-size: 28rpx;
				line-height: 40rpx;
				margin-bottom: 38rpx;
			}
			.stand_goods_price {
				color: #7C7C7C;
				font-size: 30rpx;
				line-height: 42rpx;
			}
		}
		.stand_tips {
			margin-top: 4rpx;
			color: #979797;
			font-size: 24rpx;
			line-height: 34rpx;
		}
		.stand_nper {
			width: 122rpx;
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 28rpx;
			text-align: center;
			border: 1px solid #000;
			margin-top: 32rpx;
			color: #000;
			font-size: 28rpx;
		}
		.poupp_deposit {
			height: 80rpx;
			background-color: #F8F8F8;
			padding: 22rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #464646;
			border-radius: 16rpx;
			margin-top: 36rpx;
		}
		.poupp_nper_detail {
			padding: 36rpx 32rpx;
			background-color: #F8F8F8;
			border-radius: 16rpx;
			margin-top: 24rpx;
			view {
				display: flex;
				justify-content: space-between;
				color: #464646;
				font-size: 26rpx;
			}
			view:nth-of-type(2) {
				margin-top: 26rpx;
			}
		}
		.pay_btn {
			width: 686rpx;
			height: 76rpx;
			line-height: 76rpx;
			border-radius: 16rpx;
			background-color: #FFCD00;
			margin: 100rpx auto 22rpx;
			color: #212121;
			font-size: 28rpx;
			text-align: center;
		}
	}
	.popup_content {
		border-radius:24rpx 24rpx 0px 0px;
		background-color: #fff;
		padding: 42rpx 32rpx 22rpx;
		.popup_top_bar {
			position: relative;
			text-align: center;
			color: #7C7C7C;
			font-size: 30rpx;
			line-height: 42rpx;
			margin-bottom: 56rpx;
			text {
				position: absolute;
				width: 56rpx;
				height: 56rpx;
				right: 0;
				top: -6rpx;
				background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAnFBMVEUAAAD////////////4+Pj5+fn5+fn4+Pj4+Pj4+Pj5+fn5+fn4+Pj39/f5+fn5+fn5+fmNjY2SkpKTk5OWlpacnJydnZ2enp6np6epqamrq6u5ubm6urq7u7u9vb3KysrLy8vU1NTV1dXW1tbc3Nzh4eHn5+fo6Ojq6urs7Ozt7e3v7+/w8PDx8fHy8vLz8/P09PT19fX39/f4+Pi1Oh3/AAAAEXRSTlMABwwYJC1XiZmbx8ji6vT4+TH0AcAAAAFMSURBVEjHndfncsIwEATgswFXXBRCGklIj0kjcO//bjFucZMs7f7UzDeybA23EDWxHS+MEpYkiULPsWmYuR/zZGJ/3mOWm7JWUtdqu1nA2glm/26xZIMsF81+Ri6X1Z5WwIYJynO6bBy3+A6pOUxPX8VnIH5+X2IExjY5DMUhD4MehRgMKcJgRAkGE2IwQ3h4yvorj5kOvBGr187C/kqs3qfhtxBdmTshHjR2vOvKwq0/NeBx05al+9A5Y0dK3RhsSbkbhY1UuHFYyReFk8BSCoWTwVpKnRTy/vwEn9kUFu9F9G/fNCzcmUqS3K13G4UkhevdvmlYO1ZJUjmVJKVTyAE8XrddLd+m4U/XVXKr8aj34mLXfYZbcfml83Ky38HKYeSM8A8yPALgoQOPOXiwwqMcLg94XYELEl7J4BKI10686OLVGi/z5n8f/gDdHCF1hcxGRAAAAABJRU5ErkJggg==') no-repeat;
				background-size: 100% 100%;
			}
		}
		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.pay_title {
				height:44rpx;
				line-height: 44rpx;
				font-size:32rpx;
				color: #212121;
			}
			.pay_num {
				color: #212121;
				height:50rpx;
				font-size:36rpx;
				font-family:PingFangSC-Semibold,PingFang SC;
				font-weight:600
			}
			.pay_methods_icon {
				width: 60rpx;
				height: 60rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 16rpx;
				&.yue{
					background-image: url(../../static/paytype/yue.png);
				}
				&.weixin{
					background-image: url(../../static/paytype/weixin.png);
				}
				&.alipay{
					background-image: url(../../static/paytype/alipay.png);
				}
			}
			.pay_methods_name {
				font-size: 26rpx;
				color: #212121;
				line-height: 36rpx;
				margin-bottom: 4rpx;
			}
			.pay_methods_num {
				font-size: 24rpx;
				color: #8D8D8D;
				line-height: 34rpx;
			}
			.uncheck {
				width: 40rpx;
				height: 40rpx;
				background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAAAAADEa8dEAAAA4ElEQVQ4y73UuwqDMBSA4b7/K/06RBwEBxGcI0jIJOggdvGYDrW2thFOhzZb4MvtXHIJinH5FZLBO+cHOUerKxMASEq3xpE3QF41TZUDxkeQ1JDZ6T6ZbAa1vKNrQWqX5+LFphTXI5ICMx5vOxoKOaAaM78/fDbUr8iTjp/hGVP8E60GGwuixaw7cmRLDC0ZbkdlfKMQLOUDScIURxOJbKgnP0ttTr+hjuoMVXQbamnOUEP7DVIdp7q4KgSqYOrSokqwqlR0RacrX1Uj6FpK15zKNg8hBOm7tu16+dP/FB83GSPcKcU7y9kAAAAASUVORK5CYII=') no-repeat;
				background-size: 100% 100%;
			}
			.check {
				width: 40rpx;
				height: 40rpx;
				background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAACoFBMVEUhISEkIyArKR84Mx49Nh1cThhgURdiUxdqWRZwXhVzYBV+aROAahOihQ61kwu4lQu6lwq9mQrKpAjasAXwwQL3xgH9ywD/zQD/zQH/zQL/zgf/zgn/zwr/zxD/0BD/0BL/0BP/0RP/0RT/0RX/0h7/0x7/0x//0yP/1CT/1Cj/1Sf/1Sj/1Sr/1Sz/1jH/1zP/1zT/1zX/2Dn/2Dr/2T//2UD/2UL/2kH/2kT/2kX/20X/3E3/3E//3VL/3VT/3lT/3lf/3lj/31v/313/31//32H/4GH/4Gb/4Wb/4Wr/4Wz/4mn/4mv/4m3/43H/43L/43T/43X/5HP/5HT/5HX/5Hb/5Hf/5Hj/5Hn/5Hr/5Xn/5Xv/5X3/5oD/5oH/5oP/5oT/54P/54X/54b/54f/54n/6In/6Iv/6I7/6Y7/6Y//6ZL/6ZP/6ZT/6pf/6pj/6pn/65f/65n/65r/65v/657/65//7KD/7KP/7KT/7aP/7ab/7af/7aj/7an/7qr/7qv/7qz/7q3/763/767/76//77H/77P/8LT/8LX/8Lb/8Lf/8br/8bv/8b3/8r7/8sD/8sH/8sL/88L/88T/88X/88b/88n/9Mj/9Mn/9Mr/9Mv/9Mz/9M3/9c3/9c7/9dD/9dH/9tH/9tL/9tP/9tT/99b/99f/99j/99n/99r/99z/+Nv/+Nz/+N3/+N7/+N//+d7/+d//+eH/+eL/+eP/+eX/+uL/+uT/+uX/+ub/+uf/+uj/+un/+uv/++r/++v/++z/++3/++7/++//+/D//O7//O///PD//PH//PL//PP//PT//PX//fT//fX//fb//ff//fj//fn//fv//vb//vj//vn//vr//vv//vz//v3///z///3///7////If3C4AAACf0lEQVQ4y2O4TwRgQBe4BwR4FN27dfPyxfPnTp8+c+Hi5Zu372FRdO/m9bMn922ujg8Pj6/efujUhcu37qEpunfr+vljW1P0JcXBQNIgbcdxhDKIors3LxzdlSkvjgTks/acunbzHkLR7RvnD660EEcDlmuPXbhyF6bo7o3z+6doi2MA7RkHL1y5B1F07+b5/Yu1xLEAzeUHL4BsZAC6+cLBVabiWIHZ+uPXboMU3b58ZH2cOA6QtOXU5XtARTfPbZsli0uR3KK9F27dZ7h3/dCKYHGcIGzjicv3GG6d3zlLB1NSmFcETOsu2HvhNsONE2u6JTHUCDExcELCvm/z6TsMlw4sjsOmhoEbwkxecfgGw4VdM10hXAEWHjGEGlZRCNtjwf5rDGc2T3KAcNkYGLjE0NWIO03fdYHh9Lo+ewhXkBGiCkWNuOOUrVcZTq7ucYTy+cCqUNWIO0/ecgakyFccSRU7qhrxIJAioHXZEsiqUNVIFIOsAzq8RFUcWRWyGnG1KpDDgUFQYYMQ5GfmQFYjbtcACgJgYLamSOOKOpmMLlBgAqOlN88alyLb0kmgaAFFcE2COnY1Gukt4AgGJZWe/ABFbGqUIksngJMKKNHNbcn0UMBUo+iT27lkDyjRgZPv1JpUHxV0NWp+GU2zockXnBEmVqb5mUghK5EyD8monwbLCOAstWJSTUaUu5ESNOwllI29Y3Iap62DZSlI5lw1taUoKdTTxcJQT8/Qys0rIrW0fdZGROaEZPMN83vr8tNjI0L8/QOjEzNKmics3IKczaEFxso5fW01ZQWFhcXltR0T569GKzCgRc+2dUvnTJ3Q3z9x2rxlm3afQBQ9AO0gCIzNUhSlAAAAAElFTkSuQmCC') no-repeat;
				background-size: 100% 100%;
			}
		}
		.pay_item {
			height: 120rpx;
			align-items: center;
			border-bottom: 1px solid #ECECEC;
			.flex {
				margin-top: 0;
			}
		}
		.pay_methods_btn {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			border-radius: 16rpx;
			background-color: #FFCD00;
			text-align: center;
			font-size: 28rpx;
			margin-top: 22rpx;
		}
		.pay_item_other{
			margin-top: 0;
		}
	}
</style>