<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>