608 lines
14 KiB
Vue
608 lines
14 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="/static/img/41.png" class="icon1"></image>
|
||
<view class="text1">线下支付</view>
|
||
</view>
|
||
<image v-if="!upPayCheck" :src="path+'/assets/img/icon/noSelected.png'" @click="upPayClick" class="img1"></image>
|
||
<image v-else :src="path+'/assets/img/icon/selected.png'" @click="upPayClick" class="img1"></image>
|
||
</view>
|
||
<view class="flex-between" style="margin-top: 46rpx;margin-bottom: 20rpx;">
|
||
<view class="flex-center">
|
||
<image src="/static/img/41.png" class="icon1"></image>
|
||
<view class="text1">线上支付</view>
|
||
</view>
|
||
<image v-if="!downPayCheck" :src="path+'/assets/img/icon/noSelected.png'" @click="downPayClick" class="img1"></image>
|
||
<image v-else :src="path+'/assets/img/icon/selected.png'" @click="downPayClick" class="img1"></image>
|
||
</view>
|
||
</view>
|
||
<view class="moduleBox">
|
||
<view class="moduleLabel">
|
||
支付方式
|
||
<text class="text2">请上传支付记录截图或照片</text>
|
||
</view>
|
||
<view style="margin-top: 35rpx;">
|
||
<commonUpload></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">323</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">323</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></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="toshow()">《用户回收协议》</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: evaluate?1:0}">
|
||
<text class="text1">￥</text>
|
||
<text class="text2">{{evaluate}}</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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import lvvPopup from '@/components/lvv-popup/lvv-popup.vue';
|
||
import commonUpload from '@/components/commonUpload.vue'
|
||
import util from '../../common/util.js'
|
||
export default {
|
||
components: { lvvPopup,commonUpload },
|
||
data() {
|
||
return {
|
||
useraddress:{},
|
||
id:0,
|
||
xieyi:'',
|
||
address_id:0,
|
||
weight:-1 ,
|
||
typeinfo:'',
|
||
detail:[],
|
||
remark:'',
|
||
weightlist:[],
|
||
index:[0,0],
|
||
timeflag:'',
|
||
yuyue_time:[],
|
||
typelist: [],
|
||
typeShow: false,
|
||
value1: '',
|
||
recyclingType: {},
|
||
specifications: [],
|
||
addressInfo: {},
|
||
toDoorShow: false,
|
||
showTime: Number(new Date()),
|
||
toDoorTime: '',
|
||
notesText: '',
|
||
specsList: [],
|
||
quantity: '',
|
||
path: this.path,
|
||
isRead: false,
|
||
evaluate: '',
|
||
|
||
upPayCheck: false,
|
||
downPayCheck: false
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getdata()
|
||
let user_address = uni.getStorageSync('user_address');
|
||
|
||
if (user_address) {
|
||
this.useraddress = user_address;
|
||
this.address_id = user_address.id;
|
||
uni.removeStorageSync('user_address');
|
||
}
|
||
},
|
||
onHide() {
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id;
|
||
if(options.id){
|
||
this.recyclingType.id = options.id;
|
||
}
|
||
this.getdata()
|
||
this.getTypeData()
|
||
var token = uni.getStorageSync('userToken');
|
||
if (token) {
|
||
this.userDefaultaddress();
|
||
}
|
||
|
||
},
|
||
onReachBottom (){
|
||
|
||
},
|
||
methods: {
|
||
upPayClick(){
|
||
this.upPayCheck = !this.upPayCheck
|
||
},
|
||
downPayClick(){
|
||
this.downPayCheck = !this.downPayCheck
|
||
},
|
||
selectRead(){
|
||
this.isRead = !this.isRead;
|
||
},
|
||
doorTimeClick(){
|
||
this.toDoorShow = true;
|
||
// if(!this.toDoorTime){
|
||
// this.showTime = util.formatDate(new Date(),'YYYY-MM-DD')
|
||
// }
|
||
},
|
||
confirmTime(data){
|
||
console.log(data)
|
||
this.showTime = data.value;
|
||
this.toDoorTime = util.formatDate(data.value,'YYYY-MM-DD HH:mm')
|
||
this.toDoorShow = false;
|
||
},
|
||
cancelClick(){
|
||
this.toDoorShow = false;
|
||
},
|
||
openSelect(item,index) {
|
||
this.specifications[index].show = true;
|
||
console.log(index, this.specifications[index])
|
||
},
|
||
selectConfirm(value,item,index) {
|
||
console.log(value,item,index, 'dddddddddww')
|
||
this.specifications[index].select = {
|
||
key: item.name,
|
||
val: value.value[0]
|
||
}
|
||
this.specifications[index].show = false;
|
||
console.log(this.specifications)
|
||
this.getPrice()
|
||
},
|
||
selectType(val) {
|
||
console.log(val.value[0])
|
||
this.recyclingType = val.value[0]
|
||
this.typeShow = false
|
||
this.getTypeSpecs(val.value[0].name)
|
||
},
|
||
getTypeData(){
|
||
let data = {
|
||
}
|
||
this.$api.indexpage(data,res=>{
|
||
if(res.code == '1'){
|
||
this.typelist = [res.data.type]
|
||
res.data.type.some((item,index)=>{
|
||
if(item.id == this.recyclingType.id){
|
||
this.recyclingType = item;
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getTypeSpecs(name){
|
||
// /api/recover/recover/type_specs
|
||
this.$api.type_specs({type_name: name}, res => {
|
||
if (res.code ==1) {
|
||
if(res.data){
|
||
// this.useraddress = res.data;
|
||
// this.address_id = this.useraddress.id;
|
||
console.log(res.data,'dddd')
|
||
this.specsList = res.data.specs;
|
||
for (let key in res.data.specArr) {
|
||
this.specifications.push({
|
||
name: key,
|
||
arr: res.data.specArr[key],
|
||
show: false,
|
||
select: {}
|
||
})
|
||
}
|
||
console.log(this.specifications)
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
userDefaultaddress() {
|
||
this.$api.userDefaultAddress({}, res => {
|
||
if (res.code ==1) {
|
||
if(res.data){
|
||
this.useraddress = res.data;
|
||
this.address_id = this.useraddress.id;
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
goAddress() {
|
||
var token = uni.getStorageSync('userToken');
|
||
if (!token) {
|
||
uni.navigateTo({
|
||
url: '/pages/login/authorize'
|
||
});
|
||
}else{
|
||
uni.navigateTo({
|
||
url: '/pages/address/list?type=order'
|
||
});
|
||
}
|
||
},
|
||
toshow() {
|
||
this.$refs.lvvpopref.show();
|
||
},
|
||
toclose() {
|
||
this.$refs.lvvpopref.close();
|
||
},
|
||
changeWeight(e){
|
||
this.weight=e;console.log(e);
|
||
},
|
||
bindPickerChange(e) {
|
||
this.index = e.detail.value
|
||
let left = e.detail.value[0]
|
||
let right = e.detail.value[1]
|
||
if(this.yuyue_time[1].length ==0){
|
||
this.timeflag = this.yuyue_time[0][left]
|
||
}else{
|
||
this.timeflag = this.yuyue_time[0][left] +'-'+this.yuyue_time[1][right]
|
||
}
|
||
},
|
||
getdata(){
|
||
let data = {
|
||
id:this.id
|
||
}
|
||
this.$api.typeinit(data,res=>{
|
||
if(res.code == '1'){
|
||
this.yuyue_time = res.data.yuyue_time
|
||
this.typeinfo= res.data.typeinfo
|
||
this.weightlist= res.data.weight
|
||
this.detail= res.data.detail
|
||
this.xieyi=res.data.xieyi
|
||
}
|
||
})
|
||
},
|
||
areObjectsEqual(obj1, obj2) {
|
||
const keys1 = Object.keys(obj1);
|
||
const keys2 = Object.keys(obj2);
|
||
if (keys1.length !== keys2.length) {
|
||
return false;
|
||
}
|
||
for (let key of keys1) {
|
||
if (obj1[key] !== obj2[key]) {
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
},
|
||
getPrice(){
|
||
let selecObj = {}
|
||
this.specifications.some((item,index)=>{
|
||
selecObj[item.select.key] = item.select.val
|
||
})
|
||
let priceId = ''
|
||
this.specsList.some((item,index)=>{
|
||
if(this.areObjectsEqual(item.spec_data,selecObj)){
|
||
priceId = item.id
|
||
if(this.quantity){
|
||
this.evaluate = item.current_price*this.quantity
|
||
}else{
|
||
this.evaluate = ''
|
||
}
|
||
}
|
||
})
|
||
return priceId
|
||
},
|
||
createOrder(){
|
||
console.log(this.specifications,'fff')
|
||
if(!this.isRead){
|
||
uni.showToast({ icon: "none", title: '请勾选用户回收协议' })
|
||
return false;
|
||
}
|
||
// let selecObj = {}
|
||
// this.specifications.some((item,index)=>{
|
||
// selecObj[item.select.key] = item.select.val
|
||
// })
|
||
// let priceId = ''
|
||
// this.specsList.some((item,index)=>{
|
||
// if(this.areObjectsEqual(item.spec_data,selecObj)){
|
||
// priceId = item.id
|
||
// }
|
||
// })
|
||
let priceId = this.getPrice
|
||
// console.log(selecObj,priceId);
|
||
// if(this.weight =='-1'){
|
||
// uni.showToast({ icon: "none", title: '请选择预约重量' })
|
||
// return false;
|
||
// }if(this.address_id ==0 || !this.address_id ){
|
||
// uni.showToast({ icon: "none", title: '请选择回收地址' })
|
||
// return false;
|
||
// } if(this.timeflag ==''){
|
||
// uni.showToast({ icon: "none", title: '请选择回收时间' })
|
||
// return false;
|
||
// }
|
||
let data = {
|
||
id: this.recyclingType.id,//this.id,
|
||
order_time: this.toDoorTime,//this.timeflag,
|
||
// weight:this.weightlist[this.weight],
|
||
address_id: this.useraddress.id,//this.address_id,
|
||
remark: this.notesText, //this.remark,
|
||
specsId: priceId,
|
||
quantity: this.quantity
|
||
}
|
||
console.log(data,'gggggg')
|
||
// return;
|
||
this.$api.addorder(data,res=>{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
if(res.code == '1'){
|
||
|
||
setTimeout(function() {
|
||
uni.switchTab({
|
||
url: '/pages/order/order'
|
||
})
|
||
}, 1500)
|
||
} else {
|
||
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
.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> |