monthlyDeposit.vue

<template>
	<view class="main">
		<TopBar title="缴纳押金" :bold="true" />
		<view class="deposit_card">
			<view class="bar">
				<text class="title1">当前计划详情</text>
				<text class="title2">/ 缴纳押金后即可享受计划</text>
			</view>
			<view class="tip1">开通时间</view>
			<view class="month">{{data.contract_period || 0}}个月</view>
			<view class="tip2">计划持续时间</view>
			<view class="info_box">
				<view class="info_item info1">
					<view class="tip1">商品折扣</view>
					<view class="month">{{data.discount*10 || 0}}折</view>
					<view class="tip2">包年计划内商品</view>
				</view>
				<view class="info_item info2">
					<view class="tip1">押金</view>
					<view class="month">{{(data.min_quantity*data.deposit/100) || 0}}元</view>
					<view class="tip2">达成计划后退还</view>
				</view>
			</view>
			<view class="check_btn" @click="previewContract">查看我的合同</view>
			<view class="pay_btn" @click="goPay">支付押金 ¥{{(data.min_quantity*data.deposit/100) || 0}}</view>
			<view class="cancel_btn" @click="open">取消支付 重新签署合同</view>
		</view>
		<uni-popup ref="popup">
			<view class="cancel_card">
				<view class="linear">
					<view class="title1">请问您要</view>
					<view class="title2">取消当前包年计划 ？</view>
				</view>
				<view class="content_box">
					<view>
						<view class="title1">商品折扣</view>
						<view class="title2">包年计划内产品</view>
					</view>
					<view style="position:relative;">
						<text class="num">{{data.discount*10}}</text>
						<text class="abso">折</text>
					</view>
				</view>
				<view class="content_box">
					<view>
						<view class="title1">享受时间</view>
						<view class="title2">包年计划持续时间</view>
					</view>
					<view style="position:relative;">
						<text class="num">{{data.contract_period}}</text>
						<text class="abso">月</text>
					</view>
				</view>
				<view class="btn_box">
					<view class="btn" @click="close">取消</view>
					<view class="btn confirm" @click="cancel">确认</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pay" type="bottom">
			<view class="popup_content">
				<view class="popup_top_bar">选择支付方式<text @click="closePay"></text></view>
				<view class="flex">
					<text class="pay_title">支付押金</text>
					<text class="pay_num">¥{{data.min_quantity*data.deposit/100}}</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,
				isWx: false,
				pageShow: false
			}
		},
		onLoad(options) {
			this.isWx = isWeixin();
			uni.request({
				url: `/uni/api/month_repayment/PayDetails/${options.month_apply_id}`,
				method: 'GET',
				dataType: 'json',
				success: (res) => {
					if(res.data.code === 0) {
						if(res.data.data === null) {
							uni.showToast({
								title: '您已支付过押金',
								icon: 'none'
							});
							setTimeout(() => {
								this.$jump('/pages/monthly/monthly', 2);
							}, 2000);
							return
						}
						this.data = res.data.data;
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				}
			})
		},
		methods: {
			close() {
				this.$refs.popup.close();
			},
			open() {
				this.$refs.popup.open();
			},
			goPay() {
				this.$refs.pay.open();
			},
			closePay() {
				this.$refs.pay.close();
			},
			// 选择支付方式
			handleSelect(type){
				this.type = type;
			},
			// 确认支付
			handleSubmit(){
				const {origin} = location;
				const amount = this.data.min_quantity*this.data.deposit/100;
				// 余额支付
				this.pageShow = true;
				this.$refs.pay.close();
				if(this.type === 1){
					uni.navigateTo({
						url: `/pages/yuepay/yuepay?amount=${amount}&money=${this.data.money}&order_id=${this.data.order_no}&type=monthly`
					})
				}
				// 微信支付
				if(this.type === 2){
					uni.setStorage({
						key: 'monthly',
						data: 'monthly',
						success: () => {
							this.$jump(`${origin}/uni/api/repayment/RedirectAuth?amount=${amount}&order_id=${this.data.order_no}`);
						}
					})
				}
				// 支付宝支付
				if(this.type === 3){
					uni.showLoading({
						title: '提交中。。。'
					})
					uni.request({
						url: `/uni/api/month_repayment/GoPay`,
						method: 'post',
						dataType: 'json',
						data: {
							amount: parseFloat(amount),
							order_id: this.data.order_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'
								})
							}
						}
					})
				}
			},
			cancel() {
				uni.request({
					url: '/uni/api/month_signcontract/CancelContract',
					method: 'POST',
					dataType: 'json',
					data: {
						month_apply_id: this.data.month_apply_id
					},
					success: (res) => {
						if(res.data.code === 0) {
							this.close()
							uni.showToast({
								title: '您的合同已取消',
								icon: 'none'
							});
							setTimeout(() => {
								this.$jump('/pages/monthly/monthly',2);
							}, 2000);
						}
					}
				});
			},
			previewContract() {
				uni.navigateTo({
				  url: `/pages/web/web?contract_url=${this.data.view_url}`
				});
			}
		},
		components: {
			TopBar,
			uniPopup
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 80rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F5F5F5;
		.deposit_card {
			width: 702rpx;
			margin: 24rpx auto;
			background-color: #fff;
			padding: 32rpx;
			box-sizing: border-box;
			.bar {
				height: 44rpx;
				line-height: 44rpx;
				margin-bottom: 50rpx;
				.title1 {
					font-size: 32rpx;
					color: #000;
					height: 44rpx;
					line-height: 44rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
				}
				.title2 {
					color: #7C7C7C;
					font-size: 26rpx;
					height: 36rpx;
					line-height: 36rpx;
					margin-left: 16rpx;
				}
			}
			.tip1 {
				color: #464646;
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
			.month {
				color: #000;
				font-size: 40rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				margin: 8rpx 0 4rpx;
			}
			.tip2 {
				color: #979797;
				font-size: 24rpx;
				height: 34rpx;
				line-height: 34rpx;
			}
			.info_box {
				display: flex;
				margin-top: 50rpx;
				.info_item {
					width: 168rpx;
					margin-right: 80rpx;
				}
				.info_item:nth-of-type(2) {
					margin-right: 0;
				}
			}
			.check_btn {
				color: #0074FF;
				font-size: 40rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				margin: 50rpx 0 80rpx;
			}
			.pay_btn {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #FFCD00;
				border-radius: 16rpx;
				color: #000;
				font-size: 32rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
			}
			.cancel_btn {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #F8F8F8;
				border-radius: 16rpx;
				color: #464646;
				font-size: 28rpx;
				margin-top: 24rpx;
			}
		}
		.cancel_card {
			width: 578rpx;
			height: 620rpx;
			background-color: #fff;
			box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
			border-radius:20rpx;
			overflow: hidden;
			.linear {
				width: 418rpx;
				height: 176rpx;
				background:linear-gradient(180deg,rgba(255,231,130,1) 0%,rgba(255,253,250,1) 100%);
				overflow: hidden;
				.title1 {
					font-size: 32rpx;
					height: 44rpx;
					line-height: 44rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					margin: 32rpx 0 4rpx 32rpx;
				}
				.title2 {
					font-size: 40rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					margin-left: 32rpx;
				}
			}
			.content_box {
				width: 514rpx;
				height: 114rpx;
				border-radius: 16rpx;
				background-color: #fbfbfb;
				margin: 0 auto 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 48rpx 0 24rpx;
				box-sizing: border-box;
				.title1 {
					font-size: 28rpx;
					color: #333;
					height: 40rpx;
					line-height: 40rpx;
					font-family:PingFangSC-Semibold,PingFang SC;
					font-weight:600;
					margin-bottom: 2rpx;
				}
				.title2 {
					color: #979797;
					font-size: 20rpx;
					height: 28rpx;
					line-height: 28rpx;
				}
				.num, .abso {
					font-size: 60rpx;
					color: #FF6400;
					font-family:PingFangSC-Semibold,PingFang SC;
					font-weight:600;
				}
				.abso {
					font-size: 20rpx;
					position: absolute;
					top: 14rpx;
				}
			}
			.btn_box {
				display: flex;
				justify-content: space-between;
				width: 530rpx;
				margin: 100rpx auto 0;
				.btn {
					width: 256rpx;
					height: 76rpx;
					text-align: center;
					line-height: 76rpx;
					border-radius: 16rpx;
					background: #F5F5F5;
					color: #7C7C7C;
					font-size: 32rpx;
				}
				.confirm {
					background: #FFCD00;
					color: #000;
				}
			}
		}
	}
	.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>