|
@@ -0,0 +1,581 @@
|
|
|
+<template>
|
|
|
+ <view class="container cashier">
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="5"
|
|
|
+ />
|
|
|
+ <view class="container-cash clearfix" v-else>
|
|
|
+ <view class="container-wrapper">
|
|
|
+ <view class="pay-content">
|
|
|
+ <view class="pay-p"><text>待付金额</text></view>
|
|
|
+ <view class="pay-money">
|
|
|
+ <text class="pay-sm">¥</text> <text class="pay-bg">{{ payableAmount | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-bring-wrapper clearfix" v-if="bankInfo.bankAccount">
|
|
|
+ <view class="pay-bring-content">
|
|
|
+ <view class="text-v title"
|
|
|
+ ><text class="label">转账信息</text>
|
|
|
+ <text class="clipboard" @click.stop="clipboard">复制信息</text></view
|
|
|
+ >
|
|
|
+ <view class="text-v"><text class="label">开户行:</text> {{ bankInfo.bankName }}</view>
|
|
|
+ <view class="text-v"><text class="label">银行卡号:</text>{{ bankInfo.bankAccount }}</view>
|
|
|
+ <view class="text-v"
|
|
|
+ ><text class="label">公司名称:</text>{{ bankInfo.bankAccountName }}</view
|
|
|
+ >
|
|
|
+ <view class="text-content"
|
|
|
+ >请将订单款项转账至上述账号,转账完成后截图支付凭证,并在订单页面上传支付凭证。</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-bring-wrapper clearfix" v-else>
|
|
|
+ <view class="pay-bring-content">
|
|
|
+ <view class="text-title">
|
|
|
+ <image
|
|
|
+ v-if="payableAmount < 5000"
|
|
|
+ src="https://static.caimei365.com/app/img/icon/icon-vxPaycode@2x.jpg"
|
|
|
+ mode=""
|
|
|
+ @click="previewImg(1)"
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ v-else
|
|
|
+ src="https://static.caimei365.com/app/img/icon/icon-vxkecode.png"
|
|
|
+ mode=""
|
|
|
+ @click="previewImg(2)"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="text-content" v-if="payableAmount < 5000"
|
|
|
+ >请点击上方二维码,长按识别后输入待付金额金额付款。</view
|
|
|
+ >
|
|
|
+ <view class="text-content" v-else
|
|
|
+ >请点击上方二维码,长按保存后,使用微信扫码添加采美客服,客服会为您推荐最合适的线下转账方式。</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const thorui = require('@/components/clipboard/clipboard.thorui.js')
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bankInfo: {},
|
|
|
+ payableAmount: 0,
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ skeletonShow: true,
|
|
|
+ productImage: ['https://static.caimei365.com/app/img/icon/icon-vxkecode.png']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.initData(option)
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat(value) {
|
|
|
+ if (!value) return '0.00'
|
|
|
+ /*原来用的是Number(value).toFixed(0),这样取整时有问题,例如0.51取整之后为1,感谢Nils指正*/
|
|
|
+ /*后来改成了 Number(value)|0,但是输入超过十一位就为负数了,具体见评论 */
|
|
|
+ var intPart = Number(value) - (Number(value) % 1) //获取整数部分(这里是windy93的方法)
|
|
|
+ var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
|
|
|
+ var floatPart = '.00' //预定义小数部分
|
|
|
+ var value2Array = value.toString().split('.')
|
|
|
+ //=2表示数据有小数位
|
|
|
+ if (value2Array.length == 2) {
|
|
|
+ floatPart = value2Array[1].toString() //拿到小数部分
|
|
|
+
|
|
|
+ if (floatPart.length == 1) {
|
|
|
+ //补0,实际上用不着
|
|
|
+ return intPartFormat + '.' + floatPart + '0'
|
|
|
+ } else {
|
|
|
+ return intPartFormat + '.' + floatPart
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return intPartFormat + floatPart
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.payableAmount = e.amount
|
|
|
+ setTimeout(() => {
|
|
|
+ this.skeletonShow = false
|
|
|
+ }, 500)
|
|
|
+ // this.PayOrderCheckoutCounter(this.shopOrderId)
|
|
|
+ },
|
|
|
+ //初始化子订单信息
|
|
|
+ async PayOrderCheckoutCounter(shopOrderId) {
|
|
|
+ try {
|
|
|
+ const res = await this.PayService.PayOrderCheckoutCounter({ shopOrderId: shopOrderId })
|
|
|
+ const data = res.data.shopOrder
|
|
|
+ this.payableAmount = data.needPayAmount
|
|
|
+ this.getShopBank(data.shopId)
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取供应商线下转账账号
|
|
|
+ async getShopBank(shopId){
|
|
|
+ try {
|
|
|
+ const res = await this.PayService.getShopBank({ shopId: shopId })
|
|
|
+ const data = res.data
|
|
|
+ this.bankInfo = data
|
|
|
+ setTimeout(() => {
|
|
|
+ this.skeletonShow = false
|
|
|
+ }, 500)
|
|
|
+ }catch (error) {
|
|
|
+ console.log('error', error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //复制
|
|
|
+ clipboard() {
|
|
|
+ const data = `开户行:${this.bankInfo.bankName},银行卡号:${this.bankInfo.bankAccount},公司名称:${this.bankInfo.bankAccountName}`
|
|
|
+ thorui.getClipboardData(data, res => {
|
|
|
+ if (res) {
|
|
|
+ this.$util.msg('复制成功', 2000, true, 'success')
|
|
|
+ } else {
|
|
|
+ this.$util.msg('复制失败', 2000, true, 'none')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //顶部商品图片预览
|
|
|
+ previewImg (index) {
|
|
|
+ let previewUrls = []
|
|
|
+ if(index === 1){
|
|
|
+ previewUrls = ['https://static.caimei365.com/app/img/icon/icon-vxPaycode@2x.jpg']
|
|
|
+ }else{
|
|
|
+ previewUrls = ['https://static.caimei365.com/app/img/icon/icon-vxkecode.png']
|
|
|
+ }
|
|
|
+ uni.previewImage({
|
|
|
+ current: 0, //图片索引
|
|
|
+ urls: previewUrls, //必须是http图片,本地图片无效
|
|
|
+ longPressActions:''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ height: auto !important;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.container-cash {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 250rpx;
|
|
|
+ .pay-bring-title {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 96rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ background: rgba(255, 234, 221, 1);
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .container-wrapper {
|
|
|
+ width: 662rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ .pay-title {
|
|
|
+ font-size: $font-size-32;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #2a86ff;
|
|
|
+ margin: 40rpx 0 0 0;
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .pay-content {
|
|
|
+ width: 574rpx;
|
|
|
+ height: 136rpx;
|
|
|
+ padding: 52rpx 44rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-paybg.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ float: left;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .pay-p {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ .pay-money {
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 84rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .pay-sm {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .pay-bg {
|
|
|
+ font-size: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-check {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .check-title {
|
|
|
+ width: 622rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ background: radial-gradient(
|
|
|
+ circle,
|
|
|
+ rgba(225, 86, 22, 1) 0%,
|
|
|
+ rgba(255, 170, 0, 1) 67%,
|
|
|
+ rgba(249, 185, 156, 1) 100%
|
|
|
+ );
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-checked {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .pay-item {
|
|
|
+ width: 618rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border: 2px solid #f5f5f5;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin: 24rpx 0;
|
|
|
+ display: flex;
|
|
|
+ background-color: #ffffff;
|
|
|
+ &.current {
|
|
|
+ border-color: $color-system;
|
|
|
+ .item-r {
|
|
|
+ .icon-duigou {
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-l {
|
|
|
+ flex: 8;
|
|
|
+ .item-icon {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 96rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 88rpx;
|
|
|
+ }
|
|
|
+ .icon-weixinzhifu {
|
|
|
+ color: #09bb07;
|
|
|
+ }
|
|
|
+ .icon-gerenwangyinzhifu {
|
|
|
+ color: #034582;
|
|
|
+ }
|
|
|
+ .icon-daewangyinzhuanzhang {
|
|
|
+ font-size: 68rpx;
|
|
|
+ color: #034582;
|
|
|
+ }
|
|
|
+ .icon-qiyewangyinzhifu {
|
|
|
+ color: #004889;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-texts {
|
|
|
+ line-height: 96rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ .item-text {
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ .txt-p {
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ .txt-t {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-r {
|
|
|
+ flex: 2;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 96rpx;
|
|
|
+ .icon-duigou {
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-button {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .btn {
|
|
|
+ width: 662rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 88rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ background: $btn-confirm;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-statustext {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .pay-statustext-inner {
|
|
|
+ width: 662rpx;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .pay-icon {
|
|
|
+ width: 62rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ .iconfont {
|
|
|
+ color: #ff2a2a;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ line-height: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-text {
|
|
|
+ width: 560rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ff2a2a;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-bring {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 190rpx;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .pay-bring-line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #707070;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-bring-content {
|
|
|
+ width: 654rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.bg-color {
|
|
|
+ color: $color-system;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-v {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #4a4f58;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: left;
|
|
|
+ &.bg-color {
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .clipboard {
|
|
|
+ width: 84rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: linear-gradient(34deg, rgba(255, 41, 41, 1) 0%, rgba(255, 109, 27, 1) 100%);
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-bring-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .pay-bring-content {
|
|
|
+ width: 654rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ .text-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 320rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ image {
|
|
|
+ width: 320rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.bg-color {
|
|
|
+ color: $color-system;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-v {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #4a4f58;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: justify;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ .label {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ &.bg-color {
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .clipboard {
|
|
|
+ height: 48rpx;
|
|
|
+ background: #e2e2e2;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ line-height: 46rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ border: 1px solid #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-content {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: justify;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.freight-alert {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 8888;
|
|
|
+ transition: all 0.4s;
|
|
|
+ &.none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &.show {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 422rpx;
|
|
|
+ height: 434rpx;
|
|
|
+ position: absolute;
|
|
|
+ background: $bg-color;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: auto;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ line-height: 68rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ .icon-iconfontguanbi {
|
|
|
+ width: 68rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 68rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .text {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #666666;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ .text-p {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|