|
|
@@ -12,522 +12,535 @@
|
|
|
<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>
|
|
|
+ <text class="pay-sm">￥</text> <text class="pay-bg">{{ payableAmount | NumFormat }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pay-bring-wrapper clearfix">
|
|
|
<view class="pay-bring-content">
|
|
|
- <view class="text-v title">转账信息 <text class="clipboard" @click.stop="clipboard(clipboardtEXT)">复制信息</text></view>
|
|
|
- <view class="text-v">开户行：{{ bankInfo.bankOfDeposit }}</view>
|
|
|
- <view class="text-v">银行卡号：{{ bankInfo.bankCardNo }}</view>
|
|
|
- <view class="text-v">户名：{{ bankInfo.bankUserName }}</view>
|
|
|
- <view class="text-content">请将订单款项转账至上述账号，转账完成后截图支付凭证，并在订单页面上传支付凭证。</view>
|
|
|
+ <view class="text-v title"
|
|
|
+ ><text class="label">转账信息</text>
|
|
|
+ <text class="clipboard" @click.stop="clipboard(clipboardtEXT)">复制信息</text></view
|
|
|
+ >
|
|
|
+ <view class="text-v"><text class="label">开户行：</text> {{ bankInfo.bankOfDeposit }}</view>
|
|
|
+ <view class="text-v"><text class="label">银行卡号：</text>{{ bankInfo.bankCardNo }}</view>
|
|
|
+ <view class="text-v"
|
|
|
+ ><text class="label">公司名称：</text>{{ bankInfo.bankUserName }}</view
|
|
|
+ >
|
|
|
+ <view class="text-content"
|
|
|
+ >请将订单款项转账至上述账号，转账完成后截图支付凭证，并在订单页面上传支付凭证。</view
|
|
|
+ >
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- const thorui = require('@/components/clipboard/clipboard.thorui.js')
|
|
|
- import bankMixins from './mixins/bankMixins.js'
|
|
|
- export default{
|
|
|
- mixins: [bankMixins],
|
|
|
- data(){
|
|
|
- return{
|
|
|
- bankInfo:{
|
|
|
- bankOfDeposit:'中国农业银行股份有限公司北京康运支行',
|
|
|
- bankCardNo:'11230401040009344',
|
|
|
- bankUserName:'李斌'
|
|
|
- },
|
|
|
- clipboardtEXT:`开户行：中国农业银行股份有限公司北京康运支行，银行卡号：11230401040009344，户名：李斌`,
|
|
|
- orderId:'',
|
|
|
- payableAmount:0,
|
|
|
- payOrderId:'',
|
|
|
- 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() //拿到小数部分
|
|
|
+const thorui = require('@/components/clipboard/clipboard.thorui.js')
|
|
|
+import bankMixins from './mixins/bankMixins.js'
|
|
|
+export default {
|
|
|
+ mixins: [bankMixins],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bankInfo: {
|
|
|
+ bankOfDeposit: '江苏银行北京朝阳门支行',
|
|
|
+ bankCardNo: '32250188000060717',
|
|
|
+ bankUserName: '联合丽格（北京）医疗美容投资连锁集团股份有限公司'
|
|
|
+ },
|
|
|
+ clipboardtEXT: `开户行：江苏银行北京朝阳门支行，银行卡号：32250188000060717，公司名称：联合丽格（北京）医疗美容投资连锁集团股份有限公司`,
|
|
|
+ orderId: '',
|
|
|
+ payableAmount: 0,
|
|
|
+ payOrderId: '',
|
|
|
+ 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
|
|
|
- }
|
|
|
+ if (floatPart.length == 1) {
|
|
|
+ //补0,实际上用不着
|
|
|
+ return intPartFormat + '.' + floatPart + '0'
|
|
|
} else {
|
|
|
- return intPartFormat + floatPart
|
|
|
+ return intPartFormat + '.' + floatPart
|
|
|
}
|
|
|
+ } else {
|
|
|
+ return intPartFormat + floatPart
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.orderId = e.orderId
|
|
|
+ this.payOrderId = '#' + e.orderId + '#'
|
|
|
+ // this.cmGetBankTypeLists()
|
|
|
+ this.PayOrderCheckoutCounter(this.orderId)
|
|
|
},
|
|
|
- methods:{
|
|
|
- initData(e){
|
|
|
- console.log(e)
|
|
|
- this.orderId = e.orderId
|
|
|
- this.payOrderId ='#'+e.orderId+'#'
|
|
|
- // this.cmGetBankTypeLists()
|
|
|
- this.PayOrderCheckoutCounter(this.orderId)
|
|
|
- },
|
|
|
- async PayOrderCheckoutCounter(orderId){
|
|
|
- try{
|
|
|
- const res = await this.PayService.PayOrderCheckoutCounter({orderId:orderId})
|
|
|
- const data = res.data.order
|
|
|
- this.payableAmount = data.payableAmount - data.receiptAmount //待付金额
|
|
|
- setTimeout(()=>{
|
|
|
- this.skeletonShow = false
|
|
|
- },500)
|
|
|
- }catch(error){
|
|
|
- console.log('error',error)
|
|
|
- }
|
|
|
- },
|
|
|
- clipboard(data) {
|
|
|
- thorui.getClipboardData(data, (res) => {
|
|
|
- if (res) {
|
|
|
- this.$util.msg('复制成功',2000,true,'success')
|
|
|
- } else {
|
|
|
- this.$util.msg('复制失败',2000,true,'none')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- previewImg (index) {//顶部商品图片预览
|
|
|
- let previewUrls = this.productImage
|
|
|
- uni.previewImage({
|
|
|
- current: 0, //图片索引
|
|
|
- urls: previewUrls, //必须是http图片，本地图片无效
|
|
|
- longPressActions:''
|
|
|
- })
|
|
|
+ async PayOrderCheckoutCounter(orderId) {
|
|
|
+ try {
|
|
|
+ const res = await this.PayService.PayOrderCheckoutCounter({ orderId: orderId })
|
|
|
+ const data = res.data.order
|
|
|
+ this.payableAmount = data.payableAmount - data.receiptAmount //待付金额
|
|
|
+ setTimeout(() => {
|
|
|
+ this.skeletonShow = false
|
|
|
+ }, 500)
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error)
|
|
|
}
|
|
|
},
|
|
|
- onShow() {
|
|
|
-
|
|
|
+ clipboard(data) {
|
|
|
+ thorui.getClipboardData(data, res => {
|
|
|
+ if (res) {
|
|
|
+ this.$util.msg('复制成功', 2000, true, 'success')
|
|
|
+ } else {
|
|
|
+ this.$util.msg('复制失败', 2000, true, 'none')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ previewImg(index) {
|
|
|
+ //顶部商品图片预览
|
|
|
+ let previewUrls = this.productImage
|
|
|
+ uni.previewImage({
|
|
|
+ current: 0, //图片索引
|
|
|
+ urls: previewUrls, //必须是http图片，本地图片无效
|
|
|
+ longPressActions: ''
|
|
|
+ })
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page{
|
|
|
- height: auto !important;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
- .container-cash{
|
|
|
+page {
|
|
|
+ height: auto !important;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+.container-cash {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 250rpx;
|
|
|
+ .pay-bring-title {
|
|
|
+ box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
- padding-bottom: 250rpx;
|
|
|
- .pay-bring-title{
|
|
|
- box-sizing: border-box;
|
|
|
+ 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%;
|
|
|
- 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;
|
|
|
+ float: left;
|
|
|
}
|
|
|
- .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/mini-mcare/icon/icon_payUnd@2x.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ float: left;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .pay-p {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 36rpx;
|
|
|
}
|
|
|
- .pay-content{
|
|
|
- width: 574rpx;
|
|
|
- height: 136rpx;
|
|
|
- padding: 52rpx 44rpx;
|
|
|
- background: url(https://static.caimei365.com/app/mini-mcare/icon/icon_payUnd@2x.png) no-repeat;
|
|
|
- background-size: cover;
|
|
|
- float: left;
|
|
|
- margin-top: 40rpx;
|
|
|
- .pay-p{
|
|
|
+ .pay-money {
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 84rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .pay-sm {
|
|
|
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-bg {
|
|
|
+ font-size: 50rpx;
|
|
|
}
|
|
|
}
|
|
|
- .pay-check{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- float: left;
|
|
|
- .check-title{
|
|
|
- width: 622rpx;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .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-l {
|
|
|
+ flex: 8;
|
|
|
+ .item-icon {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 96rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 88rpx;
|
|
|
}
|
|
|
- .item-texts{
|
|
|
- line-height: 96rpx;
|
|
|
- font-size:$font-size-26;
|
|
|
- color: $text-color;
|
|
|
+ .icon-weixinzhifu {
|
|
|
+ color: #09bb07;
|
|
|
}
|
|
|
- .item-text{
|
|
|
- line-height: 48rpx;
|
|
|
- font-size:$font-size-26;
|
|
|
- .txt-p{
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- .txt-t{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ .icon-gerenwangyinzhifu {
|
|
|
+ color: #034582;
|
|
|
+ }
|
|
|
+ .icon-daewangyinzhuanzhang {
|
|
|
+ font-size: 68rpx;
|
|
|
+ color: #034582;
|
|
|
+ }
|
|
|
+ .icon-qiyewangyinzhifu {
|
|
|
+ color: #004889;
|
|
|
}
|
|
|
}
|
|
|
- .item-r{
|
|
|
- flex: 2;
|
|
|
- text-align: center;
|
|
|
+ .item-texts {
|
|
|
line-height: 96rpx;
|
|
|
- .icon-duigou{
|
|
|
- font-size: 60rpx;
|
|
|
- color: #FFFFFF;
|
|
|
+ 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-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;
|
|
|
+ }
|
|
|
+ .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%;
|
|
|
- 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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
- flex-direction: column;
|
|
|
- .pay-bring-line{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .line{
|
|
|
- display: inline-block;
|
|
|
- width: 48rpx;
|
|
|
- height: 2px;
|
|
|
- background-color: #707070;
|
|
|
+ .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;
|
|
|
}
|
|
|
}
|
|
|
- .pay-bring-content{
|
|
|
- width: 654rpx;
|
|
|
- height: auto;
|
|
|
- padding: 0 24rpx;
|
|
|
- .text{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #666;
|
|
|
+ .text-v {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #4a4f58;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: left;
|
|
|
+ &.bg-color {
|
|
|
line-height: 44rpx;
|
|
|
- text-align: center;
|
|
|
- &.bg-color{
|
|
|
- color: $color-system;
|
|
|
- line-height: 88rpx;
|
|
|
- }
|
|
|
+ color: $color-system;
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
+ .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%;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- image{
|
|
|
- width: 320rpx;
|
|
|
- height: 320rpx;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
+ 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 {
|
|
|
+ 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: justify;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- &.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-v {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #4a4f58;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: justify;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ .label {
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
- .text-content{
|
|
|
- width: 100%;
|
|
|
- background-color: #F5F5F5;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 24rpx;
|
|
|
+ &.bg-color {
|
|
|
line-height: 44rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
color: $color-system;
|
|
|
- text-align: justify;
|
|
|
- margin-top: 60rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ .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,.5);
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
+}
|
|
|
+.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;
|
|
|
- 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%;
|
|
|
+ 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;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .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>
|
