412 lines
9.6 KiB
Vue
412 lines
9.6 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="hstop bglv">
|
|
<view class="top_1">{{typeinfo.name}}</view>
|
|
<view class="top_2">
|
|
<view class="top_t2" >今日指导价</view>
|
|
</view>
|
|
</view>
|
|
<view class="hs-box">
|
|
<view class="li-b" v-for="(item, index) in detail" >
|
|
<view class="li-b-hd">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="li-b-ft">
|
|
{{item.price}}元/{{item.unit}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card mr8">
|
|
<view class="title">预估重量</view>
|
|
<view class="card-box" v-if="weightlist">
|
|
<view class="li" v-for="(item, index) in weightlist" :key="index" @click="changeWeight(index)" >
|
|
<view class="name" :class="[weight==index?'active':'']" >{{item}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card mr8" v-if="typeinfo.note">
|
|
<view class="title">注意事项</view>
|
|
<view class="note"><text style="white-space: pre-wrap;color:#e64340; ">{{typeinfo.note}}</text></view>
|
|
</view>
|
|
<view class="hs-box mr8">
|
|
<view class="li-b " >
|
|
<view class="li-b-hd">
|
|
预约时间
|
|
</view>
|
|
<view class="li-b-ft" >
|
|
<picker mode="multiSelector" @change="bindPickerChange" :value="index" :range="yuyue_time">
|
|
|
|
<view class="hs-input" v-if="timeflag ==''">请选择
|
|
<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons>
|
|
</view>
|
|
<view class="hs-input" v-else>{{timeflag}}
|
|
<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hs-box mr8">
|
|
<view class="li-b " >
|
|
<view class="li-b-hd">
|
|
回收地址
|
|
</view>
|
|
<view class="li-b-ft" @click="goAddress()">
|
|
<text class="hs-input" v-if="useraddress && useraddress.id" style="width:225px;overflow: hidden;text-align: right;">{{ useraddress.address || '' }},{{ useraddress.room_number || '' }}</text>
|
|
<text class="hs-input" v-else>请选择</text>
|
|
<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="hs-box mr8">
|
|
<view class="li-b">
|
|
<view class="li-b-hd">
|
|
下单留言
|
|
</view>
|
|
</view>
|
|
<view class="hs-textarea ">
|
|
<textarea v-model="remark" placeholder="选填" maxlength="50" />
|
|
</view>
|
|
</view>
|
|
<view style="height:100px"></view>
|
|
<view class="footer">
|
|
<view class="fsz28" @click="toshow()">
|
|
<view>下单即同意</view>
|
|
<view style="color: #31b977;">《回收协议》</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>
|
|
</template>
|
|
|
|
<script>
|
|
import lvvPopup from '@/components/lvv-popup/lvv-popup.vue';
|
|
export default {
|
|
components: { lvvPopup },
|
|
data() {
|
|
return {
|
|
useraddress:{},
|
|
id:0,
|
|
xieyi:'',
|
|
address_id:0,
|
|
weight:-1 ,
|
|
typeinfo:'',
|
|
detail:[],
|
|
remark:'',
|
|
weightlist:[],
|
|
index:[0,0],
|
|
timeflag:'',
|
|
yuyue_time:[]
|
|
}
|
|
},
|
|
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;
|
|
this.getdata()
|
|
|
|
|
|
var token = uni.getStorageSync('userToken');
|
|
if (token) {
|
|
this.userDefaultaddress();
|
|
}
|
|
|
|
},
|
|
onReachBottom (){
|
|
|
|
},
|
|
methods: {
|
|
|
|
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
|
|
}
|
|
})
|
|
},
|
|
createOrder(){
|
|
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.id,
|
|
order_time:this.timeflag,
|
|
weight:this.weightlist[this.weight],
|
|
address_id:this.address_id,
|
|
remark:this.remark,
|
|
}
|
|
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;
|
|
}
|
|
.hstop{ color:#fff;
|
|
height: 200rpx;}
|
|
.top_1{padding: 31px 0px 0rpx 58rpx;
|
|
font-size: 50rpx;
|
|
color: #ff;
|
|
width: 90%;
|
|
overflow: hidden;
|
|
height: 68px;}
|
|
.top_2{ width: 100%;
|
|
text-align: right;
|
|
padding-right: 10px;}
|
|
.top_t2{ color: #FFEB3B;
|
|
bottom: 0px;
|
|
right: 0px; }
|
|
.hs-box {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.card{
|
|
padding: 0rpx 20rpx 20rpx 20rpx;
|
|
background-color: #FFFFFF; .title{padding-top:45rpx}
|
|
}
|
|
.card-box{
|
|
display: flex;
|
|
flex-wrap: wrap; margin-top: 12px;
|
|
|
|
.li{
|
|
flex: 0 0 33%;
|
|
text-align: center;
|
|
margin-bottom: 15rpx;
|
|
.name{
|
|
font-size: 26rpx ;
|
|
border: solid 2px #c3c3c3;
|
|
border-radius: 10rpx;
|
|
margin: 5px;
|
|
padding: 15px 0px;
|
|
font-weight: 600;
|
|
color: #888;
|
|
}
|
|
}
|
|
}.active{
|
|
border: solid 2px #31b977 ! important;
|
|
color: #31b977 ! important; font-weight:600;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
|
|
|
|
.hs-item-hd{background-color: #fff; padding: 5px 0px 1px 5px;
|
|
margin-top:20rpx}
|
|
.hs-hd-title { border-left: solid 3px #46b45d;padding-left: 4px;font-size: 30rpx;
|
|
color: #333; font-weight: bold;}
|
|
.li-b {
|
|
padding: 20upx 26upx 20upx 0;
|
|
width: 724upx;
|
|
margin-left: 26upx;
|
|
border-bottom: 2upx solid #f3f3f3;
|
|
position: relative;
|
|
background-color: #fff;
|
|
color: #333;
|
|
display: flex;
|
|
min-height: 90upx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
|
|
.li-b:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.li-b-hd {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28upx;
|
|
position: relative;
|
|
}
|
|
.th-icon {
|
|
width: 40upx;
|
|
height: 40upx;
|
|
display: inline-block;
|
|
margin-right: 8upx;
|
|
}
|
|
|
|
.th-title {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
.note{font-size:32rpx;margin-top:12px;}
|
|
.li-b-bd {
|
|
display: flex;
|
|
margin-left: 20upx;
|
|
min-height: 30upx;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
padding-right: 50upx;
|
|
}
|
|
|
|
|
|
|
|
.hs-input {
|
|
display: inline-block;
|
|
float: left;
|
|
font-size: 30upx;
|
|
}
|
|
|
|
.li-b-ft {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.right-img .li-b-ft {
|
|
right: 8upx;
|
|
height: 50upx;
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
width: 50upx;
|
|
height: 50upx;
|
|
}
|
|
|
|
|
|
.hs-textarea {
|
|
padding: 0 26upx 20upx;
|
|
}
|
|
|
|
.hs-textarea textarea {
|
|
width: 100%;
|
|
height: 100upx;
|
|
font-size: 26upx;
|
|
color: #333;
|
|
}
|
|
.neirong{height: 252px;
|
|
overflow-y: auto;
|
|
padding: 10px 20px;}
|
|
.input-value{padding:0px}.input-arrow{display:none}
|
|
</style> |