524 lines
13 KiB
Vue
524 lines
13 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 class="flex-between" style="width: 100%;" v-if="!isEdit">
|
|
<view>
|
|
<text class="text6">￥</text>
|
|
<text class="text7">{{actual_amount}}</text>
|
|
</view>
|
|
<view class="priceTip">需告知用户改价理由及金额！</view>
|
|
<image @click="isEdit = true" :src="path+'/assets/img/icon/edit2.png'" class="img2"></image>
|
|
</view>
|
|
<view class="flex-between" v-else>
|
|
<input type="number" v-model="editPrice" style="border: 1rpx solid rgba(100,100,100,0.5);border-radius: 10rpx;width: 250rpx;padding: 5rpx 10rpx;" />
|
|
<view class="okBtn" @click="updatePrice">确定</view>
|
|
</view>
|
|
</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 class="moduleBox">
|
|
<view class="moduleLabel" >
|
|
<view class="li-c-hd">
|
|
订单备注
|
|
</view>
|
|
<view class="textAreaBox" style="margin-top: 30rpx;font-size: 22rpx;">
|
|
<u--textarea v-model="notesText" placeholder="请输入您要留言的内容..." style="background: #F3F3F3;font-size: 22rpx;"></u--textarea>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <u-popup :show="pop4Show" @close="pop4Show = false" @open="open" mode="center" :round="30">
|
|
<view class="pop4Box">
|
|
<view class="flex-between" style="padding: 51rpx 55rpx 0;">
|
|
<text class="pop4Title">修改</text>
|
|
<u-icon @click="pop4Show = false" name="close" color="#333333" size="16" bold></u-icon>
|
|
</view>
|
|
<u--textarea v-model="notesText" placeholder="请填写改派原因" class="pop4Input" style="background: #EFEFEF;border: none"></u--textarea>
|
|
<view class="flex-center" style="margin-top: 55rpx;">
|
|
<view class="pop4Btn1" @click="pop4Show = false">取消改派</view>
|
|
<view class="pop4Btn2" @click="conformChangeOrder">确认改派</view>
|
|
</view>
|
|
</view>
|
|
</u-popup> -->
|
|
<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>
|
|
<view class="btn btn-default" style="width: 160rpx;" @click="cancleOrder()" >取消订单</view>
|
|
<view class="btn btn-default" @click="createOrder()" style="margin-left: 10rpx;width: 120rpx" >支付</view>
|
|
</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>
|
|
<cancleOrder @cancleReason="cancleReason" :cancleShow="cancleShow" @closeCancle="cancleShow=false"></cancleOrder>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import commonUpload from '@/components/commonUpload.vue'
|
|
import util from '../../common/util.js'
|
|
import payKeyboard from '../../components/keyboard.vue'
|
|
import cancleOrder from '../index/cancleOrder.vue';
|
|
export default {
|
|
components: { commonUpload, payKeyboard, cancleOrder },
|
|
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,
|
|
isEdit: false,
|
|
editPrice: '',
|
|
cancleShow: false,
|
|
notesText: ''
|
|
}
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onHide() {
|
|
},
|
|
onLoad(options) {
|
|
this.orderDetail = uni.getStorageSync('orderDetail');
|
|
this.total_amount = this.orderDetail.price //total_amount;
|
|
this.actual_amount = this.orderDetail.total_amount;
|
|
this.editPrice = this.orderDetail.total_amount;
|
|
this.id = options.id;
|
|
if(options.id){
|
|
this.orderId = options.id;
|
|
}
|
|
},
|
|
onReachBottom (){
|
|
|
|
},
|
|
methods: {
|
|
cancleReason(obj){
|
|
console.log('ddd')
|
|
let data = {
|
|
status: 6,
|
|
order_id: this.orderId,
|
|
cancel_reason: obj.name
|
|
}
|
|
if(obj.id == 4){
|
|
data.cancel_image = obj.list
|
|
}
|
|
this.$api.cancelorder(data,res=>{
|
|
if(res.code == '1'){
|
|
uni.showToast({ title: res.msg , icon: 'success' })
|
|
this.cancleShow = false
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},2000)
|
|
}else{
|
|
uni.showToast({ title: res.msg , icon: 'none' })
|
|
}
|
|
})
|
|
},
|
|
cancleOrder(){
|
|
this.cancleShow = true
|
|
},
|
|
updatePrice() {
|
|
this.isEdit = false;
|
|
this.actual_amount = this.editPrice
|
|
},
|
|
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.isEdit){
|
|
uni.showToast({ title: '请确定修改结算金额' , icon: 'none' })
|
|
return
|
|
}
|
|
this.show_key = true
|
|
// 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,
|
|
"remark": this.notesText
|
|
}
|
|
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;
|
|
}
|
|
.okBtn{
|
|
background-color: #fe5047;
|
|
color: #ffffff;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
font-size: 28rpx;
|
|
// border: solid 1px #fe5047;width: 132px;
|
|
width: 150rpx;
|
|
background: linear-gradient(45deg, #FFAD38 0%, #FF9023 100%);
|
|
border-radius: 45rpx;
|
|
border: none;
|
|
text-align: center;
|
|
margin-left: 20rpx;
|
|
}
|
|
.priceTip{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF9526;
|
|
// padding: 33rpx;
|
|
}
|
|
.btn-default{
|
|
margin-right: 0;
|
|
// width: 150rpx!important;
|
|
}
|
|
.textAreaBox textarea{
|
|
width: 100%;
|
|
height: 200upx;
|
|
font-size: 26upx;
|
|
color: #333;
|
|
}
|
|
::v-deep .input-placeholder {
|
|
// color: #b2b2b2 !important;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
}
|
|
</style> |