<template>
<view class="page">
<view class="priceNum">
<view class="num">
<view class="flag">￥</view>
<view class="text">{{num}}</view>
</view>
<image src="../../static/image/copy.png" mode="widthFix"></image>
</view>
<view class="tabs">
<view :class="activeIndex==item.id?'tabsItem active':'tabsItem'" @click="getPay(item)" v-for="item in list4" :key="item.id">
{{item.name}}
</view>
</view>
<view >
<view class="yhk" v-show="activeIndex==1">
<view class="list-input">
<view class="title">
<text>姓名</text>
</view>
<view class="content">
{{yhk.bank_realname}}
</view>
</view>
<view class="list-input">
<view class="title">
<text>预留手机号</text>
</view>
<view class="content">
{{yhk.bank_mobile}}
</view>
</view>
<view class="list-input">
<view class="title">
<text>卡号</text>
</view>
<view class="content">
{{yhk.bank_no}}
</view>
</view>
<view class="list-input">
<view class="title">
<text>开户行</text>
</view>
<view class="content">
{{yhk.bank_address}}
</view>
</view>
</view>
<view class="zfb" v-show="activeIndex==2">
<image :src="zfburl" v-if="zfburl" mode="" @click="uploadZfb"></image>
<image src="/static/image/up_img.png" v-else mode="" @click="uploadZfb"></image>
</view>
<view class="zfb" v-show="activeIndex==3">
<image :src="wxurl" mode="" v-if="wxurl" @click="uploadwx"></image>
<image src="/static/image/up_img.png" mode="" v-else @click="uploadwx"></image>
</view>
<!-- <view class="yhk">
<view class="list-input">
<view class="title">
<text>手机号</text>
</view>
<view class="content">
<input type="text" disabled v-model="mobileForm.simplephone" placeholder="请输入手机号">
</view>
</view>
<view class="list-input">
<view class="title">
<text>验证码</text>
</view>
<view class="content">
<input type="text" v-model="mobileForm.code" placeholder="请输入验证码">
</view>
<view class="yzmBtn" v-show="!codeSend" @click="getCode">
获取验证码
</view>
<view class="yzmBtn" v-show="codeSend">
{{timeNum}}s后重试
</view>
</view>
</view> -->
<!-- <view class="saveBtn" :style="issave?'opacity:1':'opacity:0.4'" @click="issave?submitSave():''">
{{activeIndex==1?'保存银行卡':activeIndex==2?'保存支付宝二维码':activeIndex==3?'保存微信二维码':''}}
</view> -->
<view style="color: #999;font-size: 30rpx;text-align: center;margin-top:30rpx;" @click="show=true">
请您仔细阅读并理解《委托寄售服务协议》
</view>
</view>
<u-popup :show="show" mode="bottom" @close="close" round="10" >
<view style="padding:24rpx;max-height:calc(60vh);overflow: auto;">
<u-parse :content="content" style="margin-top:45px;"></u-parse>
</view>
</u-popup>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import {getToken} from '@/common/auth.js'
import {orderDetail,privacyPolicy} from '@/common/api.js'
export default {
data() {
return {
num:0,
id:null,
show:false,
content:'',
activeIndex:1,
list4: [{
name: '银行卡',
id:1
}, {
name: '支付宝',
id:2
}, {
name: '微信',
id:3
}],
yhk:{
bank_realname:null,
bank_mobile:null,
bank_no:null,
bank_address:null,
},
zfburl:'',
wxurl:'',
};
},
onLoad(option) {
this.num = option.num;
this.id = option.id;
this.getOrderDetails()
this.getText()
},
methods:{
getPay(item){
this.activeIndex = item.id;
},
getOrderDetails(){
orderDetail({id:this.id,custom: { auth: true }}).then(res=>{
Object.keys(this.yhk).forEach(item=>{
this.yhk[item] = res.data.seller[item]
})
this.zfburl = res.data.seller.alipay_image
this.wxurl = res.data.seller.wechat_image
})
},
close() {
this.show = false
},
getText(){
privacyPolicy({id:4}).then(res=>{
this.content = res.data.content
})
},
},
destroyed() {
},
watch:{
}
}
</script>
<style scoped lang="scss">
.page{
min-height:calc(100vh - 45px);
background-color: #f5f5f5;
padding:24rpx;
.priceNum{
padding:30rpx;
justify-content: center;
width:100%;
background-color: #ffffff;
border-radius: 10rpx;
display: flex;
align-items: center;
color:$base;
margin-bottom:20rpx;
.num{
display: flex;
align-items: center;
.text{
font-size: 40rpx;
}
}
image{
margin-left:10rpx;
width:30rpx;
height:auto;
}
}
.tabs{
height: 80rpx;
background-color: rgb(35, 96, 48);
padding: 6rpx;
border-radius: 5px;
display: flex;
.tabsItem{
flex:1;
text-align: center;
line-height: 70rpx;
font-size: 26rpx;
color: #ffffff;
}
.active{
background-color: #fff;
font-size: 30rpx;
font-weight: bold;
border-radius: 5px;
color: rgb(35, 96, 48);
}
}
.yhk{
width: 100%;
background-color: #FFFFFF;
margin-top:20rpx;
border-radius: 10px;
.list-input{
display: flex;
align-items: center;
padding: 0 4%;
height: 100rpx;
border-bottom: 2rpx solid #f6f6f6;
.title{
display: flex;
align-items: center;
width: 30%;
height: 100%;
text{
color: #236030;
font-size: 26rpx;
}
}
.content{
display: flex;
align-items: center;
width: 70%;
height: 100%;
input{
width: 100%;
height: 100%;
font-size: 26rpx;
color: #222222;
}
}
}
.yzmBtn{
background: rgb(35, 96, 48);
color: rgb(255, 255, 255);
margin-bottom: 5px;
padding: 0px;
width: 126px;
overflow: hidden;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #fff;
text-align: center;
border-radius:10rpx;
}
}
.saveBtn{
background: rgb(35, 96, 48);
color: rgb(255, 255, 255);
border: 1px solid rgb(35, 96, 48);
overflow: hidden;
font-size: 28rpx;
height: 44px;
line-height: 44px;
text-align: center;
border-radius: 10rpx;
margin-top:50rpx;
}
.input-info{
padding: 0 6%;
.info{
display: flex;
align-items:center;
justify-content: space-between;
width: 100%;
height: 100rpx;
border-bottom: 2rpx solid #f6f6f6;
input{
width: 70%;
height: 100%;
font-size: 26rpx;
color: #222222;
}
.more{
display: flex;
align-items: center;
justify-content: flex-end;
width: 30%;
height: 100%;
.iconfont{
font-size: 34rpx;
}
.mo{
font-size: 26rpx;
padding-left: 20rpx;
margin-left: 10rpx;
border-left: 2rpx solid #EEEEEE;
}
}
}
}
}
.zfb{
text-align: center;
image{
width:200rpx;
height:200rpx;
margin:100rpx auto;
}
.mesInfo{
margin-top: 26rpx;
font-size: 26rpx;
color: #999;
}
}
</style>