412 lines
9.5 KiB
Vue
412 lines
9.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view style="padding: 0 0rpx;">
|
||
<view class="moduleBox">
|
||
<view class="moduleLabel">支付方式</view>
|
||
<view class="flex-between" style="margin-top: 46rpx;">
|
||
<view class="flex-center">
|
||
<image :src="path+'/assets/img/icon/offline.png'" class="icon1"></image>
|
||
<view class="text1">线下支付</view>
|
||
</view>
|
||
<image v-if="radioType == '1'" :src="path+'/assets/img/icon/selected.png'" class="img1"></image>
|
||
<image v-else :src="path+'/assets/img/icon/noSelected.png'" @click="upPayClick('1')" class="img1"></image>
|
||
</view>
|
||
<view class="flex-between" style="margin-top: 46rpx;margin-bottom: 20rpx;">
|
||
<view class="flex-center">
|
||
<image :src="path+'/assets/img/icon/online.png'" class="icon1"></image>
|
||
<view class="text1">线上支付</view>
|
||
</view>
|
||
<image v-if="radioType == '2'" :src="path+'/assets/img/icon/selected.png'" class="img1"></image>
|
||
<image v-else :src="path+'/assets/img/icon/noSelected.png'" @click="upPayClick('2')" class="img1"></image>
|
||
</view>
|
||
</view>
|
||
<view class="moduleBox">
|
||
<view class="moduleLabel">
|
||
支付方式
|
||
<text class="text2">请上传支付记录截图或照片</text>
|
||
</view>
|
||
<view style="margin-top: 35rpx;">
|
||
<commonUpload @imgList="recordList"></commonUpload>
|
||
</view>
|
||
</view>
|
||
<view class="moduleBox2">
|
||
<view class="moduleBox3">
|
||
<view class="moduleLabel">
|
||
回收价格
|
||
</view>
|
||
<view style="line-height: 39rpx;margin-top: 46rpx;">
|
||
<text class="text3">平台预估费用</text>
|
||
<text class="text4">￥</text>
|
||
<text class="text5">{{total_amount}}</text>
|
||
</view>
|
||
<view class="text3" style="margin-top: 46rpx;">实际结算费用</view>
|
||
<view class="flex-between" style="margin-top: 36rpx;">
|
||
<view>
|
||
<text class="text6">￥</text>
|
||
<text class="text7">{{actual_amount}}</text>
|
||
</view>
|
||
<image :src="path+'/assets/img/icon/edit2.png'" class="img2"></image>
|
||
</view>
|
||
</view>
|
||
<view class="payLable">
|
||
<view>费用说明：</view>
|
||
<view>实际结算费用包含支付用户商品货款+平台技术服务费</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="moduleBox">
|
||
<view class="moduleLabel">
|
||
货物图片
|
||
<text class="text2">请上传回收货物照片</text>
|
||
</view>
|
||
<view style="margin-top: 35rpx;">
|
||
<commonUpload @imgList="goodsList"></commonUpload>
|
||
</view>
|
||
</view>
|
||
<view style="height:130px"></view>
|
||
<view class="footer">
|
||
<view class="protBox">
|
||
<image v-if="!isRead" @click="selectRead" :src="path+'/assets/img/icon/noSelected.png'"></image>
|
||
<image v-else @click="selectRead" :src="path+'/assets/img/icon/selected.png'"></image>
|
||
<text>我已阅读并同意</text>
|
||
<text class="protText" @click="linkDetail">《用户回收协议》</text>
|
||
</view>
|
||
<!-- <view class="fsz28" @click="toshow()">
|
||
<view>下单即同意</view>
|
||
<view style="color: #31b977;">《回收协议》</view>
|
||
</view> -->
|
||
<view>
|
||
<view class="evalueBox">
|
||
<text class="text1">合计预估</text>
|
||
<text class="text2">结算金额以实际为准</text>
|
||
</view>
|
||
<view class="priceBox" :style="{opacity: actual_amount?1:0}">
|
||
<text class="text1">￥</text>
|
||
<text class="text2">{{actual_amount}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="btn btn-default" @click="createOrder()" >去下单</view>
|
||
</view>
|
||
|
||
<lvv-popup position="bottom" ref="lvvpopref">
|
||
<view style="width: 100%;height: 700upx;background: #F8F8F8;;position: absolute;left:0;bottom: 0;">
|
||
<view class="pop-c">
|
||
<view class="pop-t">
|
||
<view class='li-b '>
|
||
<view class='li-b-hd'>
|
||
回收免责条款
|
||
</view>
|
||
<view class='li-b-ft'
|
||
@click="toclose()">
|
||
<image class='icon' src='/static/img/close.png'></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="neirong">
|
||
<text style="white-space: pre-wrap;font-size: 28rpx;color: #4c4c4c;">{{xieyi}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</lvv-popup>
|
||
</view>
|
||
<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import commonUpload from '@/components/commonUpload.vue'
|
||
import util from '../../common/util.js'
|
||
import payKeyboard from '../../components/keyboard.vue'
|
||
export default {
|
||
components: { commonUpload, payKeyboard },
|
||
data() {
|
||
return {
|
||
isRead: false,
|
||
radioType: 1,
|
||
orderId: '',
|
||
orderDetail: {},
|
||
total_amount: '',
|
||
actual_amount: '',
|
||
xieyi: '',
|
||
payment_vouchers: [],
|
||
goods_images: [],
|
||
pay_password: '',
|
||
show_key: false,
|
||
path: this.path
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onHide() {
|
||
},
|
||
onLoad(options) {
|
||
this.orderDetail = uni.getStorageSync('orderDetail');
|
||
this.total_amount = this.orderDetail.total_amount;
|
||
this.actual_amount = this.orderDetail.total_amount;
|
||
this.id = options.id;
|
||
if(options.id){
|
||
this.orderId = options.id;
|
||
}
|
||
},
|
||
onReachBottom (){
|
||
|
||
},
|
||
methods: {
|
||
linkDetail(){
|
||
uni.navigateTo({
|
||
url: '/pages/mine/detail?type=recycleProt'
|
||
})
|
||
},
|
||
hideFun(){
|
||
this.show_key = false
|
||
},
|
||
getPassword(n){
|
||
console.log("用户输入的密码",n.password)
|
||
this.pay_password = n.password
|
||
this.show_key = false
|
||
this.createPayment();
|
||
},
|
||
recordList(res){
|
||
this.payment_vouchers = res;
|
||
},
|
||
goodsList(res){
|
||
this.goods_images = res
|
||
},
|
||
upPayClick(name){
|
||
this.radioType = name
|
||
},
|
||
selectRead(){
|
||
this.isRead = !this.isRead
|
||
},
|
||
createOrder(){
|
||
if(this.isRead){
|
||
this.show_key = true
|
||
}else{
|
||
uni.showToast({ title: '请勾选用户回收协议' , icon: 'none' })
|
||
}
|
||
},
|
||
createPayment(){
|
||
let data = {
|
||
"order_id": this.orderDetail.id,
|
||
"actual_amount": this.actual_amount,
|
||
"payment_method": this.radioType,
|
||
"payment_vouchers": this.payment_vouchers,
|
||
"goods_images": this.goods_images,
|
||
"pay_password": this.pay_password
|
||
}
|
||
console.log(data);
|
||
this.$api.createPayment(data,res=>{
|
||
if(res.code == '1'){
|
||
uni.showToast({ title: res.msg , icon: 'success' })
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},2000)
|
||
}else{
|
||
uni.showToast({ title: res.msg , icon: 'none' })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #eee;
|
||
}
|
||
|
||
.footer{
|
||
padding: 20upx 30upx 30upx;
|
||
justify-content: space-between;
|
||
display:flex;
|
||
background-color: #FFFFFF;position: fixed;
|
||
width: 100%;
|
||
bottom: 0px;z-index: 90;
|
||
border:solid 1px #eee;
|
||
}
|
||
.footer .fsz28{
|
||
text-align:center
|
||
}
|
||
.footer .btn{ background-color: #fe5047;
|
||
color: #ffffff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 28rpx;
|
||
// border: solid 1px #fe5047;width: 132px;
|
||
width: 224rpx;
|
||
background: linear-gradient(45deg, #FFAD38 0%, #FF9023 100%);
|
||
border-radius: 45rpx;
|
||
border: none;
|
||
}
|
||
.protBox{
|
||
width: 100%;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
background: #F8F4F0;
|
||
position: absolute;
|
||
top: -60rpx;
|
||
left: 0;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
padding-left: 40rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
image{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.protText{
|
||
color: #FF852C;
|
||
}
|
||
}
|
||
.evalueBox{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.text1{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.text2{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-left: 22rpx;
|
||
}
|
||
}
|
||
.priceBox{
|
||
margin-top: 6rpx;
|
||
.text1{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #FF852C;
|
||
}
|
||
.text2{
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #FF852C;
|
||
margin-left: 9rpx;
|
||
}
|
||
}
|
||
|
||
.moduleBox2{
|
||
margin: 20rpx 36rpx;
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
background: #FFF9F0;
|
||
}
|
||
.moduleBox3{
|
||
padding: 31rpx 35rpx 40rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
.moduleLabel{
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
}
|
||
.text3{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #282F38;
|
||
}
|
||
.text4{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-left: 28rpx;
|
||
}
|
||
.text5{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
.img2{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.text6{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #FF852C;
|
||
}
|
||
.text7{
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #FF852C;
|
||
}
|
||
}
|
||
.moduleBox{
|
||
margin: 20rpx 36rpx;
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
padding: 31rpx 35rpx 40rpx;
|
||
.moduleLabel{
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
}
|
||
.icon1{
|
||
width: 42rpx;
|
||
height: 42rpx;
|
||
}
|
||
.img1{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
.text1{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #282F38;
|
||
margin-left: 16rpx;
|
||
}
|
||
.text2{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #95979B;
|
||
margin-left: 22rpx;
|
||
}
|
||
.text3{
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #282F38;
|
||
}
|
||
.text4{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
margin-left: 28rpx;
|
||
}
|
||
.text5{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
}
|
||
.img2{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.text6{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #FF852C;
|
||
}
|
||
.text7{
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #FF852C;
|
||
}
|
||
}
|
||
.payLable{
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FF9526;
|
||
padding: 33rpx;
|
||
}
|
||
</style> |