<template> <view class="main"> <TopBar title="加入包年计划" :bold="true" /> <text class="ins_btn" @click="$jump('/pages/monthlyIntroduce/monthlyIntroduce',2)">说明</text> <view class="bar"> <text class="title1">选择您的包年计划</text> <text class="title2">/ 选择计划开通时限</text> </view> <view class="plan_card"> <view class="card_btn_box"> <view class="card_btn" v-for="(item, index) in ruleList" :key="index" :class="{act: index=== key}" @click="changeMonth(index)"> 开通{{item.contract_period}}个月 <!-- <view class="label">最划算</view> --> </view> </view> <view class="card_tips" v-if="tips"> <text>请根据您{{ruleList[key]['contract_period']}}个月内计划采购总量,选择折扣方案</text> <text @click="closeTips">×</text> </view> <view class="now_plan"> <text class="left">当前方案:</text> <text class="right"> 采购量需≥<text class="amount">{{ruleList[key]['child'][monthKey]['min_quantity']}}</text> 元 </text> </view> <view class="overdate">{{overdate}} 到期</view> <view class="pre_box"> <view class="pre_item" v-for="(item, index) in ruleList[key]['child']" :key="index" :class="{act: monthKey === index}" @click="changeDiscount(index)"> <view class="title1">商品折扣</view> <view class="title2">{{Number(item.discount)*10}}折</view> <view class="title3">包年计划内商品</view> <view class="label" v-if="item.cheap_flg === '1'">最优惠</view> </view> </view> </view> <view class="bar"> <text class="title1">选择押金方案</text> <text class="title2">/ 达成计划后将退还押金</text> </view> <view class="pay_card"> <view class="title1" v-if="depositKey === '1'">先缴纳押金,可立享即时折扣</view> <view class="title1" v-else>0押金,先按原价购买</view> <view class="title2" v-if="depositKey === '1'">达成计划:退还押金¥{{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</view> <view class="title2" v-else>达成计划:满¥{{ruleList[key]['child'][monthKey]['min_quantity']}}按{{Number(ruleList[key]['child'][monthKey]['discount'])*10}}折返现</view> <view class="pay_box"> <view class="pay_item" :class="{act: depositKey === '1'}" @click="changeDeposit('1')"> <view class="title1">押金:<text>¥{{Number(ruleList[key]['child'][monthKey]['min_quantity'])*Number(ruleList[key]['child'][monthKey]['deposit'])/100}}</text></view> <view class="title2">达成计划后退还</view> </view> <view class="pay_item" :class="{act: depositKey === '0'}" @click="changeDeposit('0')"> <view class="title1">押金:<text>0</text></view> <view class="title2">达成计划后返现</view> </view> </view> </view> <view class="bottom_fixed"> <view class="fixed_top"> <text class="checked eosfont" v-if="checked" @click="check"></text> <text class="uncheked" v-else @click="check"></text> <text>我已阅读</text> <text class="contract" @click="previewContract">《谛宝多多包年会员合同》</text> </view> <view class="fixed_bottom" @click="submit">同意并签署合同</view> </view> </view> </template> <script> import TopBar from '@/components/TopBar/TopBar.vue'; import moment from 'moment'; export default { data() { return { tips: true, checked: false, ruleList: [{ child: [ {contract_period:1, min_quantity:0} ] }], key: 0, monthKey: 0, depositKey: '1', // 1交押金 0不交押金 month_rule_id: '', auth_status: '', // 是否四要素 overdate: '', auth_id: '' } }, onLoad() { uni.request({ url:'/uni/api/month_signcontract/MonthRuleList', method: 'GET', dataType: 'json', success: (res) => { if(res.data.code === 0) { this.ruleList = res.data.data.ruleList; this.month_rule_id = res.data.data.ruleList[0]['child'][0]['month_rule_id']; this.auth_status = res.data.data.auth_status; let month = this.ruleList[0]['contract_period']; this.overdate = moment().add(month,'M').format('YYYY.MM.DD'); } } }); uni.request({ url: '/uni/api/certification/GetRealnameAuth', method: 'GET', dataType: 'json', success: (res) => { if(res.data.code === 0) { this.auth_id = res.data.data.auth_id; } } }); }, methods: { closeTips() { this.tips = false; }, check() { this.checked = !this.checked; }, changeMonth(key) { this.key = key; this.monthKey = 0; this.month_rule_id = this.ruleList[key]['child'][this.monthKey]['month_rule_id']; let month = this.ruleList[key]['contract_period']; this.overdate = moment().add(month,'M').format('YYYY.MM.DD'); }, changeDiscount(key) { this.monthKey = key; this.month_rule_id = this.ruleList[this.key]['child'][key]['month_rule_id']; }, changeDeposit(key) { this.depositKey = key; }, submit() { if(!this.checked) { uni.showToast({ title: '请先勾选《谛宝多多包年会员合同》', icon: 'none' }) return } // 是否四要素校验 if(this.auth_status === '1') { uni.showLoading({ title: '提交中', mask: true }) uni.request({ url: '/uni/api/month_signcontract/AddContract', method: 'POST', dataType: 'json', data: { is_deposit: this.depositKey, month_rule_id: this.month_rule_id }, success:(res) => { if(res.data.code === 0) { uni.hideLoading(); uni.showToast({ title: '合同已签署', icon: 'none' }) // 是否交押金 if(this.depositKey === '1') { // 交押金 setTimeout(() => { this.$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${res.data.data.month_apply_id}`,2); }, 2000); } else { // 不交押金 setTimeout(() => { this.$jump(`/pages/monthlyPlan/monthlyPlan?month_apply_id=${res.data.data.month_apply_id}`,2); }, 2000); } } else { uni.hideToast(); if(res.data.message.indexOf('未进行授权') !== -1) { uni.showToast({ title: '校验信息已过期,请重新校验', icon: 'none' }); setTimeout(() => { this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}&auth_id=${this.auth_id}`,2) }, 2000); } else { uni.showToast({ title: res.data.message, icon: 'none' }); } } } }) } else { this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}`,2) } }, previewContract() { uni.showLoading({ title: '获取合同中' }); uni.request({ url: '/uni/api/month_signcontract/PreviewContract', method: 'POST', data: { is_deposit: this.depositKey, month_rule_id: this.month_rule_id }, dataType: 'json', success: (res) => { if(res.data.code === 0) { uni.hideLoading(); uni.navigateTo({ url: `/pages/web/web?contract_url=${res.data.data.viewUrl}` }); } else { uni.hideLoading(); if(res.data.message.indexOf('未进行授权') !== -1) { uni.showToast({ title: '校验信息已过期,请重新校验', icon: 'none' }); setTimeout(() => { this.$jump(`/pages/certification/certification?month_rule_id=${this.month_rule_id}&is_deposit=${this.depositKey}&auth_id=${this.auth_id}`,2) }, 2000); } else { uni.showToast({ title: res.data.message, icon: 'none' }); } } } }) } }, components: { TopBar } } </script> <style lang="scss" scoped> .main { padding: 80rpx 24rpx 168rpx; background-color: #fff; .ins_btn { font-size: 26rpx; color: #000; height: 36rpx; line-height: 36rpx; position: fixed; right: 24rpx; top: 22rpx; z-index: 101; } .bar { height: 98rpx; line-height: 98rpx; .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; } } .plan_card { width: 100%; border-radius: 20rpx; box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.06); .card_btn_box { height: 82rpx; display: flex; background:linear-gradient(270deg,rgba(255,251,238,1) 0%,rgba(255,246,217,1) 100%); .card_btn { text-align: center; line-height: 82rpx; font-size: 30rpx; color: #7B5100; flex: 1; .label { width: 80rpx; height: 32rpx; line-height: 32rpx; text-align: center; background: #FF6400; border-radius:16rpx 16rpx 16rpx 0px; color: #fff; font-size: 18rpx; position: absolute; right: 18rpx; top: -10rpx; } } .act { background-color: #FFF; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color: #000; position: relative; } .act:after { content: ''; width: 40rpx; height: 6rpx; background-color: #FF6400; border-radius: 3rpx; position: absolute; bottom: 0; left: 50%; margin-left: -20rpx; } .card_btn:nth-of-type(1) { border-top-right-radius: 16rpx; } .card_btn:nth-of-type(2) { border-bottom-left-radius: 16rpx; } } .card_tips { height: 56rpx; width: 654rpx; border-radius: 8rpx; background-color: #2F2E33; line-height: 56rpx; color: #F3D8A6; font-size: 24rpx; padding: 0 24rpx; box-sizing: border-box; display: flex; justify-content: space-between; margin: 30rpx auto 32rpx; } .now_plan { width: 654rpx; height: 44rpx; line-height: 44rpx; display: flex; justify-content: space-between; margin: 0 auto; .left { color: #333; font-size: 28rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; } .right { font-size: 24rpx; .amount { font-size: 32rpx; color: #B48000; font-family:PingFangSC-Semibold,PingFang SC; font-weight:600; margin: 0 16rpx; } } } .overdate { font-size: 24rpx; color: #7C7C7C; height: 34rpx; line-height: 34rpx; margin: 0 0 32rpx 24rpx; } .pre_box { width: 654rpx; display: flex; flex-wrap: wrap; margin: 0 auto 16rpx; .pre_item { width: 204rpx; height: 200rpx; box-sizing: border-box; border-radius: 16rpx; border: 2rpx solid #ECECEC; box-sizing: border-box; text-align: center; position: relative; margin-bottom: 26rpx; .label { width: 96rpx; height: 36rpx; line-height: 36rpx; text-align: center; font-size: 22rpx; color: #fff; background: #FF6400; border-radius:30rpx 20rpx 20rpx 0; position: absolute; left: 0; top: -18rpx; z-index: 10; } .title1 { font-size: 28rpx; color: #333; height: 40rpx; line-height: 40rpx; font-family:PingFangSC-Semibold,PingFang SC; font-weight:600; margin-top: 24rpx; } .title2 { color: #CE9300; font-size: 36rpx; height: 50rpx; line-height: 50rpx; font-family:PingFangSC-Semibold,PingFang SC; font-weight:600; margin: 14rpx auto 8rpx; } .title3 { color: #979797; font-size: 22rpx; height: 32rpx; line-height: 32rpx; } } .pre_item:nth-of-type(3n-1) { margin: 0 20rpx; } .act { border: 4rpx solid #F2D8A4; background-color: #FFFBF3; .title3 { color: #CE9300; } } } } .pay_card { padding: 24rpx 24rpx 28rpx; border-radius: 20rpx; box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.07); .title1 { color: #977035; font-size: 28rpx; height: 40rpx; line-height: 40rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; } .title2 { color: #979797; font-size: 26rpx; height: 36rpx; line-height: 36rpx; } .pay_box { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 24rpx; .pay_item { width: 318rpx; height: 120rpx; border-radius: 16rpx; border: 2px solid #ECECEC; text-align: center; box-sizing: border-box; .title1 { color: #333333; font-size: 28rpx; height: 40rpx; line-height: 40rpx; font-family:PingFangSC-Semibold,PingFang SC; font-weight:600; margin-top: 20rpx; text { color: #FF4A00; } } .title2 { margin-top: 8rpx; color: #979797; font-size: 22rpx; height: 32rpx; line-height: 22rpx; } } .act { border: 4rpx solid #F2D8A4; background-color: #FFFBF3; .title2 { color: #CE9300; } } } } .bottom_fixed { position: fixed; bottom: 0; left: 0; width: 100%; height: 168rpx; .fixed_top { height: 80rpx; display: flex; align-items: center; font-size: 26rpx; color: #000; .uncheked { width: 32rpx; height: 32rpx; border-radius: 50%; background-color: #fff; margin: 0 16rpx 0 24rpx; display: inline-block; box-sizing: border-box; border: 1px solid rgba(0,0,0,0.5); } .checked { width: 32rpx; height: 32rpx; border-radius: 50%; background-color: #FFCD00; display: inline-block; text-align: center; line-height: 32rpx; margin: 0 16rpx 0 24rpx; } .contract { color: #009BFF; text-decoration: underline; } } .fixed_bottom { height: 88rpx; line-height: 88rpx; text-align: center; background-color: #FFCD00; font-size: 32rpx; color: #000; } } } </style>