From 1b27ffe11072674c6afb912a882c66df76c6c4a1 Mon Sep 17 00:00:00 2001 From: Liuxin <1360643156@qq.com> Date: Mon, 11 Nov 2019 17:15:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7=E9=A6=96=E4=BB=98=E6=AC=BE?= =?UTF-8?q?=E6=94=AF=E4=BB=98=E4=BB=A5=E5=8F=8A=E6=AC=BE=E9=A1=B9=E6=94=AF?= =?UTF-8?q?=E4=BB=98=EF=BC=8C=E4=BF=AE=E5=A4=8Dbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/contractRepayment/refund.vue | 1 + src/pages/contractRepayment/repay-details.vue | 2 +- src/pages/contractRepayment/repay-plan.vue | 1 - src/pages/pay/firstPay/contract-record.vue | 7 +- src/pages/pay/firstPay/first-pay.vue | 10 +- src/pages/pay/firstPay/pay-entry.vue | 338 +++++++++----- src/pages/pay/payment/new-list.vue | 4 +- src/pages/pay/payment/pay-entry.vue | 439 +++++++++++++++--- src/pages/videoSign/video-list.vue | 4 +- 9 files changed, 612 insertions(+), 194 deletions(-) diff --git a/src/pages/contractRepayment/refund.vue b/src/pages/contractRepayment/refund.vue index b6d69469..8172e465 100644 --- a/src/pages/contractRepayment/refund.vue +++ b/src/pages/contractRepayment/refund.vue @@ -107,6 +107,7 @@ export default { }, beforeRouteEnter (to, from, next) { next(vm => { + vm.show = false vm.getRefund() }) }, diff --git a/src/pages/contractRepayment/repay-details.vue b/src/pages/contractRepayment/repay-details.vue index 51b00401..0e0d6eab 100644 --- a/src/pages/contractRepayment/repay-details.vue +++ b/src/pages/contractRepayment/repay-details.vue @@ -28,7 +28,7 @@ </item> <item> <div slot="name">合同金额</div> - <div slot="content">{{ detailInfo.total_price }}</div> + <div slot="content">{{ detailInfo.total_price|currency }}</div> </item> <item> <div slot="name">商务政策</div> diff --git a/src/pages/contractRepayment/repay-plan.vue b/src/pages/contractRepayment/repay-plan.vue index 8ac3e7a8..21ce0e17 100644 --- a/src/pages/contractRepayment/repay-plan.vue +++ b/src/pages/contractRepayment/repay-plan.vue @@ -27,7 +27,6 @@ </div> </div> </h-content> - </h-view> </template> diff --git a/src/pages/pay/firstPay/contract-record.vue b/src/pages/pay/firstPay/contract-record.vue index 0f687515..b8240bc3 100644 --- a/src/pages/pay/firstPay/contract-record.vue +++ b/src/pages/pay/firstPay/contract-record.vue @@ -34,7 +34,7 @@ <p>本次还款</p> </div> <div class="item-right"> - <p>{{ e.due_amount|currency }}</p> + <p>{{ parseFloat(e.due_amount).toFixed(2)|currency }}</p> <p>{{ e.received_amount|currency }}</p> <input v-model="e.amount" type="text" placeholder="请输入还款金额" > </div> @@ -102,7 +102,7 @@ export default { }, beforeRouteEnter (to, from, next) { next(vm => { - // vm.getDetail() + vm.getDetail() }) }, @@ -312,7 +312,8 @@ export default { border: none; border-bottom: 1px solid #1d3fff; font-size: 13px; - text-align: center; + text-align: right; + float: right; } input::placeholder { font-family: PingFangSC-Regular; diff --git a/src/pages/pay/firstPay/first-pay.vue b/src/pages/pay/firstPay/first-pay.vue index 3d199dd9..e689b259 100644 --- a/src/pages/pay/firstPay/first-pay.vue +++ b/src/pages/pay/firstPay/first-pay.vue @@ -13,7 +13,7 @@ <div class="title">当前应付</div> <div class="data"> <span>¥</span> - {{ money |currency }} + {{ moneyToFix |currency }} </div> </div> </div> @@ -27,7 +27,7 @@ </div> <div class="pay-input"> <span>应还首付款</span> - <input v-model="money" type="text" placeholder="请输入支付金额" > + <input v-model="moneyToFix" type="text" placeholder="请输入支付金额" > <div @click="createOrder"> <img src="@/assets/payment/into.png" > </div> @@ -73,7 +73,11 @@ export default { } }) }, - computed: {}, + computed: { + moneyToFix () { + return parseFloat(this.money).toFixed(2) + }, + }, watch: {}, methods: { getDownPayment () { diff --git a/src/pages/pay/firstPay/pay-entry.vue b/src/pages/pay/firstPay/pay-entry.vue index 0d7a8a80..72d49bf8 100644 --- a/src/pages/pay/firstPay/pay-entry.vue +++ b/src/pages/pay/firstPay/pay-entry.vue @@ -21,7 +21,7 @@ v-for="(item,index) in nongBank" :proportion="[7,1,1]" :key="item.bank_account_num" - @click.native="isSelect(`nong${index}`)" + @click.native="isSelect(`nong${index}`);ischeck(item)" > <div slot="name" style="flex=3"> <img :src="selectImg(item)" alt class="icon" > @@ -37,7 +37,7 @@ <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt > </section> </item> - <item :proportion="[7,1,1]" @click.native="isSelect('one')"> + <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')"> <div slot="name"> <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝 </div> @@ -46,7 +46,7 @@ <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt > </section> </item> - <item :proportion="[7,1,1]" @click.native="isSelect('two')"> + <item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')"> <div slot="name"> <img src="@/assets/payment/wx.png" alt class="icon2" > 微信 </div> @@ -59,7 +59,7 @@ v-for="(item,index) in newList" :proportion="[7,1,1]" :key="index" - @click.native="isSelect(`three${index}`)" + @click.native="isSelect(`three${index}`);ischeck(item)" > <div slot="name" style="flex=3"> <img :src="selectImg(item)" alt class="icon" > @@ -77,79 +77,86 @@ </item> </list-item> </div> - </div></transition> + </div> + </transition> <transition name="trans"> - <div v-show="confirm" class="modal-show-bank"> + <div v-show="confirm" class="modal-show-confirm"> <div class="down"> <div class="top"> - <img src="@/assets/payment/back.png" @click="show=false" > + <img src="@/assets/payment/back.png" @click="confirm=false" > <span>确认付款</span> </div> <div class="info"> <div class="info-item"> <span>还款金额</span> - <span>¥50600.00</span> + <span>¥{{ money |currency }}</span> </div> <div class="interest"> - <span>本次交易收取0.03%服务费</span> + <span>本次交易收取{{ rate }}%服务费</span> </div> <div class="info-item"> <span>服务费</span> - <span>+¥15.00</span> - </div> - <div class="info-item"> - <span>合同编号</span> - <span>EF12345678</span> + <span>+¥{{ serviceCharge |currency }}</span> </div> <div class="info-item" @click="show=true"> <span>付款方式</span> - <span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span> - <span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span> + <span> + <img :src="checkType.img" > + <span>{{ checkType.bank_full_name }}</span> + <span v-if="sectctNong">({{ selectLast(checkType) }})</span> + <img class="arrow" src="@/assets/payment/go.png" > + </span> </div> </div> + <bottom-tab> + <tab-button class="foot" @click.native="pay">立即支付</tab-button> + </bottom-tab> </div> - </div></transition> + </div> + </transition> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> - <img src="@/assets/userBind/arrow.png" @click="$routeGo()"> + <img src="@/assets/userBind/arrow.png" @click="$routeGo()" > <span>支付中心</span> </div> </h-header> <h-content class="entry-content"> <div class="amount"> <p>{{ userName }}</p> - <div>¥{{ money |currency }}</div> + <div>¥{{ sumMoney |currency }}</div> </div> <div class="info"> <div class="info-item"> <span>还款金额</span> - <span>¥50600.00</span> + <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span> </div> <div class="interest"> - <span>本次交易收取0.03%服务费</span> + <span>本次交易收取{{ rate }}%服务费</span> </div> <div class="info-item"> <span>服务费</span> - <span>+¥15.00</span> - </div> - <div class="info-item"> - <span>合同编号</span> - <span>EF12345678</span> + <span>+¥{{ serviceCharge }}</span> </div> <div class="info-item" @click="show=true"> <span>付款方式</span> - <span v-if="flag"><img src="@/assets/payment/ly.png"><span>农业银行</span><img class="arrow" src="@/assets/payment/go.png"></span> - <span v-if="!flag"><img src="@/assets/payment/alipay.png"><span>支付宝</span><img class="arrow" src="@/assets/payment/go.png"></span> + <span> + <img :src="checkType.img" > + <span>{{ checkType.bank_full_name }}</span> + <span v-if="sectctNong">({{ selectLast(checkType) }})</span> + <img class="arrow" src="@/assets/payment/go.png" > + </span> </div> </div> </h-content> <bottom-tab> - <tab-button class="foot" @click.native="pay">确认支付</tab-button> + <tab-button class="foot" @click.native="affirm">确认支付</tab-button> </bottom-tab> </h-view> </template> <script> +import zfb from '@/assets/payment/alipay.png' +import wx from '@/assets/payment/wx.png' import js from '@/assets/payment/js.png' import ny from '@/assets/payment/ly.png' import pf from '@/assets/payment/pf.png' @@ -171,9 +178,15 @@ export default { data () { return { money: '', + rate: 0.03, select: 'three0', name: '', - checkType: {}, + sectctNong: false, + checkType: { + img: '', + bank_full_name: '', + bank_account_num: '', + }, confirm: false, show: false, downNum: false, @@ -185,6 +198,14 @@ export default { } }, computed: { + serviceCharge () { + return (this.money * (this.rate / 100)).toFixed(2) + }, + sumMoney () { + return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed( + 2 + ) + }, newList () { let vm = this vm.nongBank = [] @@ -199,19 +220,24 @@ export default { }) if (vm.flag) { vm.select = 'nong0' + vm.checkType.bank_full_name = '农业银行' + vm.checkType.img = ny + vm.checkType.bank_account_num = this.nongBank[0].bank_account_num + vm.sectctNong = true } else { vm.select = 'one' - } - if (vm.nongBank.length !== 0) { - vm.checkType = {...vm.nongBank[0]} + vm.checkType.bank_full_name = '支付宝' + vm.checkType.img = zfb + vm.sectctNong = false } return notNong }, - }, - watch: {}, beforeRouteEnter (to, from, next) { next(vm => { + vm.confirm = false + vm.show = false + vm.downNum = false vm.name = from.name vm.getType() vm.nongBank = [] @@ -263,6 +289,23 @@ export default { isSelect (way) { this.select = way }, + ischeck (way) { + if (way === 'one') { + this.checkType.bank_full_name = '支付宝' + this.checkType.img = zfb + this.sectctNong = false + } else if (way === 'two') { + this.checkType.bank_full_name = '微信' + this.checkType.img = wx + this.sectctNong = false + } else { + this.checkType.bank_full_name = way.bank_full_name + this.checkType.bank_account_num = way.bank_account_num + this.checkType.img = this.selectImg(way) + this.sectctNong = true + } + this.show = false + }, pay () { let vm = this hlsPopup.showLoading('请稍候') @@ -275,6 +318,9 @@ export default { } }, 2000) }, + affirm () { + this.confirm = true + }, changePage () { this.$router.push({ name: 'Success', @@ -314,7 +360,7 @@ export default { .trans-leave-active { opacity: 0; } - .modal-show-bank { + .modal-show-confirm { width: 100%; height: 100%; position: absolute; @@ -324,80 +370,123 @@ export default { justify-content: center; align-items: center; .down { - height:466px; - width: 100%; - position: absolute; - bottom: 0px; - background-color: #fff; - border-radius: 12px 12px 0 0; - overflow: scroll; - .top{ - position: fixed; - left:24px; - width:330px; - height:54px; - display: flex; - z-index: 999; - align-items: center; + height: 466px; + width: 100%; + position: absolute; + bottom: 0px; background-color: #fff; - img{ - width:20px; + border-radius: 12px 12px 0 0; + overflow: scroll; + .top { + position: fixed; + left: 24px; + width: 330px; + height: 54px; + display: flex; + z-index: 999; + align-items: center; + background-color: #fff; + img { + width: 20px; + } + span { + margin-left: 38%; + font-family: PingFangSC-Semibold; + font-size: 16px; + color: #656464; + letter-spacing: 0.49px; + text-align: center; + } } - span{ - margin-left:38%; - font-family: PingFangSC-Semibold; -font-size: 16px; -color: #656464; -letter-spacing: 0.49px; -text-align: center; + .info { + margin-top: 60px; } - } - .pay-way { - width:350px; - margin:0 auto; - margin-top:54px; - background-color: #fff; - .hls-item { - padding-left: 12px; - .add-name { - flex: 3; - line-height: 56px; - font-family: PingFangSC-Regular; - font-size: 14px; + } + } + .modal-show-bank { + width: 100%; + height: 100%; + position: absolute; + display: flex; + z-index: 910; + background-color: rgba(56, 63, 69, 0.3); + justify-content: center; + align-items: center; + .down { + height: 466px; + width: 100%; + position: absolute; + bottom: 0px; + background-color: #fff; + border-radius: 12px 12px 0 0; + overflow: scroll; + .top { + position: fixed; + left: 24px; + width: 330px; + height: 54px; + display: flex; + z-index: 999; + align-items: center; + background-color: #fff; + img { + width: 20px; + } + span { + margin-left: 38%; + font-family: PingFangSC-Semibold; + font-size: 16px; color: #656464; + letter-spacing: 0.49px; + text-align: center; + } + } + .pay-way { + width: 350px; + margin: 0 auto; + margin-top: 54px; + background-color: #fff; + .hls-item { + padding-left: 12px; + .add-name { + flex: 3; + line-height: 56px; + font-family: PingFangSC-Regular; + font-size: 14px; + color: #656464; - .icon1 { - width: 34px; - height: 34px; - display: block; - float: left; - margin-top: 10px; - margin-right: 5px; + .icon1 { + width: 34px; + height: 34px; + display: block; + float: left; + margin-top: 10px; + margin-right: 5px; + } + .icon2 { + width: 32px; + display: block; + float: left; + margin-top: 12px; + margin-right: 8px; + } + .icon { + width: 30px; + display: block; + float: left; + position: relative; + margin: 12px 8px 0 3px; + } } - .icon2 { - width: 32px; - display: block; - float: left; - margin-top: 12px; - margin-right: 8px; - } - .icon { - width: 30px; - display: block; - float: left; - position: relative; - margin: 12px 8px 0 3px; - } - } - .add-content { - img { - width: 21px; + .add-content { + img { + width: 21px; + } } } } } - } } .info { width: 100%; @@ -411,12 +500,12 @@ text-align: center; display: flex; justify-content: space-between; align-items: center; - .arrow{ - margin-right:-10px; + .arrow { + margin-right: -10px; } - img{ - width:17px; - margin-right:10px; + img { + width: 17px; + margin-right: 10px; } span:first-child { font-family: PingFangSC-Regular; @@ -435,31 +524,31 @@ text-align: center; align-items: center; } } - .info-item:nth-of-type(1)::after{ - content:""; - display:block; + .info-item:nth-of-type(1)::after { + content: ""; + display: block; position: absolute; - right:20px; - top:25px; + right: 20px; + top: 25px; border: 10px solid #fff; - border-left-color:transparent; - border-right-color:transparent; - border-top-color:transparent; - border-bottom-color:rgba(75,74,75,0.10); + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + border-bottom-color: rgba(75, 74, 75, 0.1); } - .info-item:nth-of-type(1){ + .info-item:nth-of-type(1) { border-top: 1px solid #d9dbdf; } - .interest{ - width:100%; - height:37px; + .interest { + width: 100%; + height: 37px; line-height: 37px; -font-family: PingFangSC-Medium; -font-size: 11px; -color: #4B4A4B; -letter-spacing: 0; -text-indent:215px; - background-color:rgba(75,74,75,0.10); + font-family: PingFangSC-Medium; + font-size: 11px; + color: #4b4a4b; + letter-spacing: 0; + text-indent: 215px; + background-color: rgba(75, 74, 75, 0.1); } } .modal-show { @@ -467,7 +556,7 @@ text-indent:215px; height: 100%; position: absolute; display: flex; - z-index: 900; + z-index: 999; background-color: rgba(56, 63, 69, 0.3); justify-content: center; align-items: center; @@ -541,7 +630,6 @@ text-indent:215px; margin-top: 10px; } } - } .foot { background-color: @headerColor; diff --git a/src/pages/pay/payment/new-list.vue b/src/pages/pay/payment/new-list.vue index 6a325d69..1baff30a 100644 --- a/src/pages/pay/payment/new-list.vue +++ b/src/pages/pay/payment/new-list.vue @@ -39,7 +39,7 @@ <img src="@/assets/payment/first-pay.png" >逾期利息 </div> <div class="pay-input"> - <span>应还利息</span> + <span>逾期利息</span> <input v-model="liquidated_damages" readonly type="text" placeholder="请输入支付金额" > </div> </div> @@ -86,7 +86,7 @@ export default { }, computed: {}, watch: { - 'pay_rent': { + 'liquidated_damages': { handler () { this.money = parseFloat(parseFloat(this.pay_rent) + parseFloat(this.liquidated_damages)) }, diff --git a/src/pages/pay/payment/pay-entry.vue b/src/pages/pay/payment/pay-entry.vue index 4c6b361e..0b91634b 100644 --- a/src/pages/pay/payment/pay-entry.vue +++ b/src/pages/pay/payment/pay-entry.vue @@ -9,6 +9,112 @@ </div> </div> </transition> + <transition name="trans"> + <div v-show="show" class="modal-show-bank"> + <transition name="show"> + <div class="down"> + <div class="top"> + <img src="@/assets/payment/back.png" @click="show=false" > + <span>支付方式</span> + </div> + <list-item :item-height="56" class="pay-way"> + <item + v-for="(item,index) in nongBank" + :proportion="[7,1,1]" + :key="item.bank_account_num" + @click.native="isSelect(`nong${index}`);ischeck(item)" + > + <div slot="name" style="flex=3"> + <img :src="selectImg(item)" alt class="icon" > + {{ item.bank_full_name }}({{ selectLast(item) }}) + <img + v-show="item.recommand" + class="push" + src="@/assets/payment/push.png" + > + </div> + <section slot="content"> + <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt > + <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt > + </section> + </item> + <item :proportion="[7,1,1]" @click.native="isSelect('one');ischeck('one')"> + <div slot="name"> + <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝 + </div> + <section slot="content"> + <img v-show="select === 'one'" src="@/assets/payment/select.png" alt > + <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt > + </section> + </item> + <item :proportion="[7,1,1]" @click.native="isSelect('two');ischeck('two')"> + <div slot="name"> + <img src="@/assets/payment/wx.png" alt class="icon2" > 微信 + </div> + <section slot="content"> + <img v-show="select === 'two'" src="@/assets/payment/select.png" alt > + <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt > + </section> + </item> + <item + v-for="(item,index) in newList" + :proportion="[7,1,1]" + :key="index" + @click.native="isSelect(`three${index}`);ischeck(item)" + > + <div slot="name" style="flex=3"> + <img :src="selectImg(item)" alt class="icon" > + {{ item.bank_full_name }}({{ selectLast(item) }}) + <img + v-show="item.recommand" + class="push" + src="@/assets/payment/push.png" + > + </div> + <section slot="content"> + <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt > + <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt > + </section> + </item> + </list-item> + </div> + </transition></div> + </transition> + <transition name="trans"> + <div v-show="confirm" class="modal-show-confirm"> + <div class="down"> + <div class="top"> + <img src="@/assets/payment/back.png" @click="confirm=false" > + <span>确认付款</span> + </div> + <div class="info"> + <div class="info-item"> + <span>还款金额</span> + <span>¥{{ money |currency }}</span> + </div> + <div class="interest"> + <span>本次交易收取{{ rate }}%服务费</span> + </div> + <div class="info-item"> + <span>服务费</span> + <span>+¥{{ serviceCharge |currency }}</span> + </div> + <div class="info-item" @click="show=true"> + <span>付款方式</span> + <span> + <img :src="checkType.img" > + <span>{{ checkType.bank_full_name }}</span> + <span v-if="sectctNong">({{ selectLast(checkType) }})</span> + <img class="arrow" src="@/assets/payment/go.png" > + </span> + </div> + </div> + <bottom-tab> + <tab-button class="footer" @click.native="pay">立即支付</tab-button> + </bottom-tab> + </div> + </div> + </transition> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="changePage" > @@ -18,70 +124,41 @@ <h-content class="entry-content"> <div class="amount"> - <p>交易金额</p> - <div>¥{{ money |currency }}</div> + <p>{{ userName }}</p> + <div>¥{{ sumMoney |currency }}</div> + </div> + <div class="info"> + <div class="info-item"> + <span>还款金额</span> + <span>¥{{ parseFloat(money).toFixed(2) |currency }}</span> + </div> + <div class="interest"> + <span>本次交易收取{{ rate }}%服务费</span> + </div> + <div class="info-item"> + <span>服务费</span> + <span>+¥{{ serviceCharge }}</span> + </div> + <div class="info-item" @click="show=true"> + <span>付款方式</span> + <span> + <img :src="checkType.img" > + <span>{{ checkType.bank_full_name }}</span> + <span v-if="sectctNong">({{ selectLast(checkType) }})</span> + <img class="arrow" src="@/assets/payment/go.png" > + </span> + </div> </div> - <list-item :item-height="56" class="pay-way"> - <item - v-for="(item,index) in nongBank" - :proportion="[7,1,1]" - :key="item.bank_account_num" - @click.native="isSelect(`nong${index}`)" - > - <div slot="name" style="flex=3"> - <img :src="selectImg(item)" alt class="icon" > - {{ item.bank_full_name }}({{ selectLast(item) }}) - <img v-show="item.recommand" class="push" src="@/assets/payment/push.png" > - </div> - <section slot="content"> - <img v-show="select === `nong${index}`" src="@/assets/payment/select.png" alt > - <img v-show="select !== `nong${index}`" src="@/assets/payment/unselect.png" alt > - </section> - </item> - <item :proportion="[7,1,1]" @click.native="isSelect('one')"> - <div slot="name"> - <img src="@/assets/payment/alipay.png" alt class="icon1" > 支付宝 - </div> - <section slot="content"> - <img v-show="select === 'one'" src="@/assets/payment/select.png" alt > - <img v-show="select !== 'one'" src="@/assets/payment/unselect.png" alt > - </section> - </item> - <item :proportion="[7,1,1]" @click.native="isSelect('two')"> - <div slot="name"> - <img src="@/assets/payment/wx.png" alt class="icon2" > 微信 - </div> - <section slot="content"> - <img v-show="select === 'two'" src="@/assets/payment/select.png" alt > - <img v-show="select !== 'two'" src="@/assets/payment/unselect.png" alt > - </section> - </item> - <item - v-for="(item,index) in newList" - :proportion="[7,1,1]" - :key="index" - @click.native="isSelect(`three${index}`)" - > - <div slot="name" style="flex=3"> - <img :src="selectImg(item)" alt class="icon" > - {{ item.bank_full_name }}({{ selectLast(item) }}) - <img v-show="item.recommand" class="push" src="@/assets/payment/push.png" > - </div> - <section slot="content"> - <img v-show="select === `three${index}`" src="@/assets/payment/select.png" alt > - <img v-show="select !== `three${index}`" src="@/assets/payment/unselect.png" alt > - </section> - </item> - </list-item> </h-content> - <bottom-tab> - <tab-button class="footer" @click.native="pay">立即付款</tab-button> + <tab-button class="footer" @click.native="affirm">确认支付</tab-button> </bottom-tab> </h-view> </template> <script> +import zfb from '@/assets/payment/alipay.png' +import wx from '@/assets/payment/wx.png' import js from '@/assets/payment/js.png' import ny from '@/assets/payment/ly.png' import pf from '@/assets/payment/pf.png' @@ -103,13 +180,32 @@ export default { return { money: '', select: 'one', + rate: 0.03, + name: '', + sectctNong: false, + checkType: { + img: '', + bank_full_name: '', + bank_account_num: '', + }, + confirm: false, + show: false, downNum: false, + userName: window.sessionStorage.getItem('bp_name'), nongBank: [], // 存农行卡 flag: false, // 用于判断是否有农业银行卡 lists: [], } }, computed: { + serviceCharge () { + return (this.money * (this.rate / 100)).toFixed(2) + }, + sumMoney () { + return (parseFloat(this.serviceCharge) + parseFloat(this.money)).toFixed( + 2 + ) + }, newList () { let vm = this vm.nongBank = [] @@ -120,12 +216,19 @@ export default { } }) let notNong = vm.lists.filter(i => { - return (i.bank_full_name.indexOf('农业') === -1) + return i.bank_full_name.indexOf('农业') === -1 }) if (vm.flag) { vm.select = 'nong0' + vm.checkType.bank_full_name = '农业银行' + vm.checkType.img = ny + vm.checkType.bank_account_num = this.nongBank[0].bank_account_num + vm.sectctNong = true } else { vm.select = 'one' + vm.checkType.bank_full_name = '支付宝' + vm.checkType.img = zfb + vm.sectctNong = false } return notNong }, @@ -133,6 +236,9 @@ export default { watch: {}, beforeRouteEnter (to, from, next) { next(vm => { + vm.confirm = false + vm.show = false + vm.downNum = false if (from.name === 'NewList') { vm.money = vm.$route.params.money } else if (from.name === 'PaymentContractRecord') { @@ -143,6 +249,9 @@ export default { }) }, methods: { + affirm () { + this.confirm = true + }, pay () { let vm = this hlsPopup.showLoading('请稍候') @@ -155,6 +264,23 @@ export default { } }, 2000) }, + ischeck (way) { + if (way === 'one') { + this.checkType.bank_full_name = '支付宝' + this.checkType.img = zfb + this.sectctNong = false + } else if (way === 'two') { + this.checkType.bank_full_name = '微信' + this.checkType.img = wx + this.sectctNong = false + } else { + this.checkType.bank_full_name = way.bank_full_name + this.checkType.bank_account_num = way.bank_account_num + this.checkType.img = this.selectImg(way) + this.sectctNong = true + } + this.show = false + }, selectLast (item) { let num = item.bank_account_num return num.substring(num.length - 4) @@ -233,6 +359,205 @@ export default { </script> <style lang='less' > #payment-pay-entry { + .trans-enter-active, + .trans-leave-active { + transition: opacity 0.5s; + } + .trans-enter, + .trans-leave-active { + opacity: 0; + } + .modal-show-confirm { + width: 100%; + height: 100%; + position: absolute; + display: flex; + z-index: 900; + background-color: rgba(56, 63, 69, 0.3); + justify-content: center; + align-items: center; + .down { + height: 466px; + width: 100%; + position: absolute; + bottom: 0px; + background-color: #fff; + border-radius: 12px 12px 0 0; + overflow: scroll; + .top { + position: fixed; + left: 24px; + width: 330px; + height: 54px; + display: flex; + z-index: 999; + align-items: center; + background-color: #fff; + img { + width: 20px; + } + span { + margin-left: 38%; + font-family: PingFangSC-Semibold; + font-size: 16px; + color: #656464; + letter-spacing: 0.49px; + text-align: center; + } + } + .info { + margin-top: 60px; + } + } + } + .modal-show-bank { + width: 100%; + height: 100%; + position: absolute; + display: flex; + z-index: 910; + background-color: rgba(56, 63, 69, 0.3); + justify-content: center; + align-items: center; + .down { + height: 466px; + width: 100%; + position: absolute; + bottom: 0px; + background-color: #fff; + border-radius: 12px 12px 0 0; + overflow: scroll; + .top { + position: fixed; + left: 24px; + width: 330px; + height: 54px; + display: flex; + z-index: 999; + align-items: center; + background-color: #fff; + img { + width: 20px; + } + span { + margin-left: 38%; + font-family: PingFangSC-Semibold; + font-size: 16px; + color: #656464; + letter-spacing: 0.49px; + text-align: center; + } + } + .pay-way { + width: 350px; + margin: 0 auto; + margin-top: 54px; + background-color: #fff; + .hls-item { + padding-left: 12px; + .add-name { + flex: 3; + line-height: 56px; + font-family: PingFangSC-Regular; + font-size: 14px; + color: #656464; + + .icon1 { + width: 34px; + height: 34px; + display: block; + float: left; + margin-top: 10px; + margin-right: 5px; + } + .icon2 { + width: 32px; + display: block; + float: left; + margin-top: 12px; + margin-right: 8px; + } + .icon { + width: 30px; + display: block; + float: left; + position: relative; + margin: 12px 8px 0 3px; + } + } + + .add-content { + img { + width: 21px; + } + } + } + } + } + } + .info { + width: 100%; + height: 226px; + background-color: #fff; + .info-item { + height: 46px; + width: 335px; + margin: 0 auto; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + .arrow { + margin-right: -10px; + } + img { + width: 17px; + margin-right: 10px; + } + span:first-child { + font-family: PingFangSC-Regular; + font-size: 14px; + color: rgba(56, 63, 69, 0.6); + letter-spacing: 0; + line-height: 18px; + } + span:last-child { + font-family: Verdana; + font-size: 14px; + color: #383f45; + letter-spacing: 0; + line-height: 18px; + display: flex; + align-items: center; + } + } + .info-item:nth-of-type(1)::after { + content: ""; + display: block; + position: absolute; + right: 20px; + top: 25px; + border: 10px solid #fff; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + border-bottom-color: rgba(75, 74, 75, 0.1); + } + .info-item:nth-of-type(1) { + border-top: 1px solid #d9dbdf; + } + .interest { + width: 100%; + height: 37px; + line-height: 37px; + font-family: PingFangSC-Medium; + font-size: 11px; + color: #4b4a4b; + letter-spacing: 0; + text-indent: 215px; + background-color: rgba(75, 74, 75, 0.1); + } + } .icon { width: 30px; display: block; diff --git a/src/pages/videoSign/video-list.vue b/src/pages/videoSign/video-list.vue index a76543af..771b367d 100644 --- a/src/pages/videoSign/video-list.vue +++ b/src/pages/videoSign/video-list.vue @@ -20,7 +20,7 @@ </div> <div class="right"> <div class="right-top"> - <span>进件号</span> + <span>合同号</span> <span>{{ item.project_number }}</span> </div> <div class="right-bottom"> @@ -30,7 +30,7 @@ <span>{{ item.bp_name }}</span> </li> <li> - 已还租金 + 产品线 <span>{{ item.division_n }}</span> </li> <li> -- 2.21.0