2025-10-26 16:36:59 +08:00
|
|
|
|
<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">
|
2025-11-06 22:06:37 +08:00
|
|
|
|
<image :src="path+'/assets/img/icon/offline.png'" class="icon1"></image>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
<view class="text1">线下支付</view>
|
|
|
|
|
|
</view>
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<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>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="flex-between" style="margin-top: 46rpx;margin-bottom: 20rpx;">
|
|
|
|
|
|
<view class="flex-center">
|
2025-11-06 22:06:37 +08:00
|
|
|
|
<image :src="path+'/assets/img/icon/online.png'" class="icon1"></image>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
<view class="text1">线上支付</view>
|
|
|
|
|
|
</view>
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<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>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="moduleBox">
|
|
|
|
|
|
<view class="moduleLabel">
|
|
|
|
|
|
支付方式
|
|
|
|
|
|
<text class="text2">请上传支付记录截图或照片</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view style="margin-top: 35rpx;">
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<commonUpload @imgList="recordList"></commonUpload>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</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>
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<text class="text5">{{total_amount}}</text>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="text3" style="margin-top: 46rpx;">实际结算费用</view>
|
|
|
|
|
|
<view class="flex-between" style="margin-top: 36rpx;">
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<text class="text6">￥</text>
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<text class="text7">{{actual_amount}}</text>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</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;">
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<commonUpload @imgList="goodsList"></commonUpload>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</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>
|
2025-11-06 22:06:37 +08:00
|
|
|
|
<text class="protText" @click="linkDetail">《用户回收协议》</text>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</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>
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<view class="priceBox" :style="{opacity: actual_amount?1:0}">
|
2025-10-26 16:36:59 +08:00
|
|
|
|
<text class="text1">￥</text>
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<text class="text2">{{actual_amount}}</text>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</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>
|
2025-11-03 21:54:54 +08:00
|
|
|
|
<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
|
2025-10-26 16:36:59 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import commonUpload from '@/components/commonUpload.vue'
|
|
|
|
|
|
import util from '../../common/util.js'
|
2025-11-03 21:54:54 +08:00
|
|
|
|
import payKeyboard from '../../components/keyboard.vue'
|
2025-10-26 16:36:59 +08:00
|
|
|
|
export default {
|
2025-11-03 21:54:54 +08:00
|
|
|
|
components: { commonUpload, payKeyboard },
|
2025-10-26 16:36:59 +08:00
|
|
|
|
data() {
|
2025-11-03 21:54:54 +08:00
|
|
|
|
return {
|
2025-10-26 16:36:59 +08:00
|
|
|
|
isRead: false,
|
2025-11-03 21:54:54 +08:00
|
|
|
|
radioType: 1,
|
|
|
|
|
|
orderId: '',
|
|
|
|
|
|
orderDetail: {},
|
|
|
|
|
|
total_amount: '',
|
|
|
|
|
|
actual_amount: '',
|
|
|
|
|
|
xieyi: '',
|
|
|
|
|
|
payment_vouchers: [],
|
|
|
|
|
|
goods_images: [],
|
|
|
|
|
|
pay_password: '',
|
2025-11-06 22:06:37 +08:00
|
|
|
|
show_key: false,
|
|
|
|
|
|
path: this.path
|
2025-10-26 16:36:59 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onShow() {
|
2025-11-03 21:54:54 +08:00
|
|
|
|
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
|
|
|
|
|
onHide() {
|
|
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
this.orderDetail = uni.getStorageSync('orderDetail');
|
|
|
|
|
|
this.total_amount = this.orderDetail.total_amount;
|
|
|
|
|
|
this.actual_amount = this.orderDetail.total_amount;
|
2025-10-26 16:36:59 +08:00
|
|
|
|
this.id = options.id;
|
|
|
|
|
|
if(options.id){
|
2025-11-03 21:54:54 +08:00
|
|
|
|
this.orderId = options.id;
|
2025-10-26 16:36:59 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onReachBottom (){
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
2025-11-06 22:06:37 +08:00
|
|
|
|
linkDetail(){
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/mine/detail?type=recycleProt'
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
hideFun(){
|
|
|
|
|
|
this.show_key = false
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
getPassword(n){
|
|
|
|
|
|
console.log("用户输入的密码",n.password)
|
|
|
|
|
|
this.pay_password = n.password
|
|
|
|
|
|
this.show_key = false
|
|
|
|
|
|
this.createPayment();
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
recordList(res){
|
|
|
|
|
|
this.payment_vouchers = res;
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
goodsList(res){
|
|
|
|
|
|
this.goods_images = res
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
upPayClick(name){
|
|
|
|
|
|
this.radioType = name
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
selectRead(){
|
|
|
|
|
|
this.isRead = !this.isRead
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
createOrder(){
|
2025-11-06 22:06:37 +08:00
|
|
|
|
if(this.isRead){
|
|
|
|
|
|
this.show_key = true
|
|
|
|
|
|
}else{
|
|
|
|
|
|
uni.showToast({ title: '请勾选用户回收协议' , icon: 'none' })
|
|
|
|
|
|
}
|
2025-10-26 16:36:59 +08:00
|
|
|
|
},
|
2025-11-03 21:54:54 +08:00
|
|
|
|
createPayment(){
|
2025-10-26 16:36:59 +08:00
|
|
|
|
let data = {
|
2025-11-03 21:54:54 +08:00
|
|
|
|
"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
|
2025-10-26 16:36:59 +08:00
|
|
|
|
}
|
2025-11-03 21:54:54 +08:00
|
|
|
|
console.log(data);
|
|
|
|
|
|
this.$api.createPayment(data,res=>{
|
2025-10-26 16:36:59 +08:00
|
|
|
|
if(res.code == '1'){
|
2025-11-03 21:54:54 +08:00
|
|
|
|
uni.showToast({ title: res.msg , icon: 'success' })
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
|
uni.navigateBack({
|
|
|
|
|
|
delta: 1
|
2025-10-26 16:36:59 +08:00
|
|
|
|
})
|
2025-11-03 21:54:54 +08:00
|
|
|
|
},2000)
|
|
|
|
|
|
}else{
|
|
|
|
|
|
uni.showToast({ title: res.msg , icon: 'none' })
|
2025-10-26 16:36:59 +08:00
|
|
|
|
}
|
|
|
|
|
|
})
|
2025-11-03 21:54:54 +08:00
|
|
|
|
}
|
2025-10-26 16:36:59 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</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{
|
2025-11-06 22:06:37 +08:00
|
|
|
|
width: 42rpx;
|
|
|
|
|
|
height: 42rpx;
|
2025-10-26 16:36:59 +08:00
|
|
|
|
}
|
|
|
|
|
|
.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>
|
