You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
526 lines
14 KiB
526 lines
14 KiB
<template>
|
|
<!-- 代跑腿页 -->
|
|
<view class="page1">
|
|
<view class="title">
|
|
<view class="title-sreach">
|
|
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
|
|
<uni-icons type="left" size="28"></uni-icons>
|
|
</view>
|
|
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
|
|
<!-- 代取快递/跑腿 -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="position: absolute;top: 100px;width: 100%;">
|
|
<view class="tab1" v-if="isPaotui">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f1356c4db9b5488bb46140e2cdd2b4ee.png" alt=""
|
|
style="position: absolute;" />
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e380fd14442c476bb6d3f5ec471af515.png" alt="" />
|
|
<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
|
|
<view style="width: 50%;height: 80px;"></view>
|
|
<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
|
|
</view>
|
|
</view>
|
|
<view class="tab1" v-else>
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3aea88803cb446139aa80ff5a606645a.png" alt=""
|
|
style="position: absolute;" />
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/2cdff43ecdd4409a8bd1f5f46a6ad38d.png" alt=""
|
|
style="position: absolute;" />
|
|
<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
|
|
<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
|
|
<view style="width: 50%;height: 80px;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="">
|
|
<view class="dizhi">
|
|
<view class="dizhi-tu">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="dizhi1">
|
|
<view class="dizhi-ming">
|
|
沁园春第三食堂A20窗口
|
|
</view>
|
|
<view class="dizhi-btn">
|
|
地址簿
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="dizhi">
|
|
<view class="dizhi-tu">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="dizhi1">
|
|
<view class="dizhi-ming">
|
|
沁园春第三食堂A20窗口
|
|
</view>
|
|
<view class="dizhi-btn">
|
|
地址簿
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 10px;border-top: 1px solid #eee;matgin-top:10px"></view>
|
|
<view class="content-box" style="height: 60px;">
|
|
<view class="content-title">
|
|
取件数量<text>*</text>
|
|
</view>
|
|
<view
|
|
style="display:flex;height: 40px;margin-top: 10px;line-height: 40px;border: 1px solid #777;background: #eee;border-radius: 10px;width: 40%;">
|
|
<view @tap="addFormData.num > 0 ? addFormData.num-- : 0"
|
|
style="width: 30%;font-size: 22px;font-weight: 700;text-align: center;">-</view>
|
|
<input type="number" v-model="addFormData.num" disabled
|
|
style="line-height: 40px;height: 40px;flex: 1;font-size: 18px;font-weight: 700;text-align: center;">
|
|
<view @tap="addFormData.num++"
|
|
style="width: 30%;font-size: 22px;font-weight: 700;text-align: center;">+</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="content-title">
|
|
取件凭证<text>*</text>
|
|
</view>
|
|
<view class="" style="flex: 1;">
|
|
<view class="">
|
|
<view class="" style="display: flex;">
|
|
<view class="radio-check" v-if="selected === 'phone'">
|
|
<uni-icons type="checkmarkempty" size="12"></uni-icons>
|
|
</view>
|
|
<view class="radio-no-check" @tap="checkVoucher('phone')" v-else></view>
|
|
手机尾号
|
|
</view>
|
|
<view class="check-input" v-if="selected == 'phone'">
|
|
<input type="text" style="width: 100%;height: 100%;padding: 0 10px;border: 1px solid #eee;">
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="" style="display: flex;">
|
|
<view class="radio-check" v-if="selected === 'code'">
|
|
<uni-icons type="checkmarkempty" size="12"></uni-icons>
|
|
</view>
|
|
<view class="radio-no-check" @tap="checkVoucher('code')" v-else></view>
|
|
取件码
|
|
</view>
|
|
<view class="check-input" v-if="selected == 'code'" v-for="(item,index) in addFormData.codeList"
|
|
:key="index" style="border: none;display: flex;">
|
|
<input type="text" v-model="item.code"
|
|
style="width: 100%;height: 100%;padding: 0 10px;border: 1px solid #eee;">
|
|
<view @tap="delCode(index)" v-if="addFormData.codeList.length>1"
|
|
style="width: 45px;height: 35px;line-height: 35px;text-align: center;">
|
|
<uni-icons type="trash" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="check-add" @tap="addCode" v-if="selected == 'code'">
|
|
+ 添加取件码
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view class="" style="display: flex;">
|
|
<view class="radio-check" v-if="selected === 'screenshot'">
|
|
<uni-icons type="checkmarkempty" size="12"></uni-icons>
|
|
</view>
|
|
<view class="radio-no-check" @tap="checkVoucher('screenshot')" v-else></view>
|
|
取件码截图
|
|
</view>
|
|
<view class="" v-if="selected == 'screenshot'">
|
|
<view class="upload-img" @tap="pictureAdd"
|
|
style="background: #eee;text-align: center;line-height: 160rpx;">
|
|
<uni-icons type="camera" size="28" color="#777"></uni-icons>
|
|
</view>
|
|
<view style="overflow-x: scroll;display: flex;width: 350rpx;">
|
|
<view v-if="formData.productPictures !=''"
|
|
v-for="(item,index) in formData.productPictures" :key="index"
|
|
style="width: 160rpx;height: 160rpx;margin-left: 20rpx;">
|
|
<img :src="item.productPicture" alt="" class="upload-img">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="content-title">
|
|
取件重量<text>*</text>
|
|
</view>
|
|
<view style="flex: 1;">
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('weight','5公斤以内')"
|
|
:style="{'background':addFormData.weight == '5公斤以内' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
5公斤以内
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('weight','5-10公斤')"
|
|
:style="{'background':addFormData.weight == '5-10公斤' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
5-10公斤
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('weight','10-15公斤')"
|
|
:style="{'background':addFormData.weight == '10-15公斤' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
10-15公斤
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('weight','15-20公斤')"
|
|
:style="{'background':addFormData.weight == '15-20公斤' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
15-20公斤
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('weight','20公斤以上')"
|
|
:style="{'background':addFormData.weight == '20公斤以上' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
20公斤以上
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="content-title">
|
|
物品体积<text>*</text>
|
|
</view>
|
|
<view style="flex: 1;">
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('volume','0.5立方米以下')"
|
|
:style="{'background':addFormData.volume == '0.5立方米以下' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
0.5立方米以下
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('volume','0.5-1立方米')"
|
|
:style="{'background':addFormData.volume == '0.5-1立方米' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
0.5-1立方米
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('volume','1.1-1.5立方米')"
|
|
:style="{'background':addFormData.volume == '1.1-1.5立方米' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
1.1-1.5立方米
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('volume','1.6-2立方米')"
|
|
:style="{'background':addFormData.volume == '1.6-2立方米' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
1.6-2立方米
|
|
</view>
|
|
<view class="duoxuan" @tap="checkWeightOrVolume('volume','2.1立方米以上')"
|
|
:style="{'background':addFormData.volume == '2.1立方米以上' ?'rgba(166, 255, 234, 1)':'#eee'}">
|
|
2.1立方米以上
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="content-title">
|
|
订单备注<text>*</text>
|
|
</view>
|
|
<view style="flex: 1;">
|
|
<textarea name="" id="" cols="30" rows="10" placeholder="请填写备注"></textarea>
|
|
</view>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="content-title">
|
|
送达时间<text>*</text>
|
|
</view>
|
|
<view style="flex: 1;" @tap="$refs.model.open();">
|
|
选择送达时间 <uni-icons type="right"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 120px;"></view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="bottom-btn">
|
|
直接购买
|
|
</view>
|
|
</view>
|
|
<delivery-time-op @dataCallback="dataCallback" @timeCallback="timeCallback" :dodge="true" ref='model'
|
|
:content="content" :barHidth='600' title="选择预送达时间">
|
|
> </delivery-time-op>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import deliveryTimeOp from '@/components/delivery-time-op/delivery-time-op.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
selected: 'phone',
|
|
isPaotui: true,
|
|
menuButtonInfo: {},
|
|
addFormData: {
|
|
qu: '',
|
|
song: '',
|
|
num: 0,
|
|
phone: '',
|
|
codeList: [{
|
|
code: ''
|
|
}],
|
|
picture: [],
|
|
weight: '',
|
|
volume: ''
|
|
},
|
|
content: [{
|
|
timezh: "今天 (周三)",
|
|
timeformatter: "8-10",
|
|
id: 108,
|
|
timelist: [{
|
|
timestr: "立即送达",
|
|
}, {
|
|
timestr: "15:35",
|
|
}, {
|
|
timestr: "16:05",
|
|
}, {
|
|
timestr: "16:35",
|
|
}, {
|
|
timestr: "17:05",
|
|
}, {
|
|
timestr: "17:35",
|
|
}, {
|
|
timestr: "18:05",
|
|
}, {
|
|
timestr: "18:35",
|
|
}]
|
|
}]
|
|
}
|
|
},
|
|
components: {
|
|
deliveryTimeOp
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
methods: {
|
|
checkWeightOrVolume(type, value) {
|
|
if (type == 'weight') {
|
|
this.addFormData.weight = value
|
|
} else {
|
|
this.addFormData.volume = value
|
|
}
|
|
},
|
|
addCode() {
|
|
this.addFormData.codeList.push({
|
|
code: ''
|
|
})
|
|
},
|
|
delCode(index) {
|
|
this.addFormData.codeList.splice(index, 1)
|
|
},
|
|
checkVoucher(type) {
|
|
if (type == this.selected) return;
|
|
this.selected = type;
|
|
|
|
this.addFormData.phone = '',
|
|
this.addFormData.codeList = [{
|
|
code: ''
|
|
}]
|
|
this.addFormData.picture = []
|
|
},
|
|
toggleReply() {
|
|
this.isExpanded = !this.isExpanded;
|
|
},
|
|
checkTab(index) {
|
|
for (let i = 0; i < this.menuList.length; i++) {
|
|
if (i == index) {
|
|
this.menuList[i].checked = true
|
|
} else {
|
|
this.menuList[i].checked = false
|
|
}
|
|
}
|
|
},
|
|
//查看大图
|
|
largeImg(img) {
|
|
this.bigImg = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png'
|
|
this.$refs.imgPopup.open()
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.title {
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
|
width: 100%;
|
|
height: 54%;
|
|
}
|
|
|
|
.title-sreach {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 200rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.back-btn {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.title-name {
|
|
padding-top: 55px;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
position: absolute;
|
|
top: 180px;
|
|
width: 100%;
|
|
overflow: scroll;
|
|
height: 80%;
|
|
background: #fff;
|
|
padding: 0 2.5%;
|
|
}
|
|
|
|
.tab1 {
|
|
width: 100%;
|
|
height: 80px;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.upload-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.dizhi {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dizhi-tu {
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: 13px 10px 0 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.dizhi1 {
|
|
flex: 1;
|
|
background: #eee;
|
|
border-radius: 10px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: flex;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.dizhi-ming {
|
|
flex: 1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dizhi-btn {
|
|
width: 56px;
|
|
height: 25px;
|
|
background: #fff;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
border: 1px solid #777;
|
|
border-radius: 25px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
display: flex;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.radio-check {
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 24px;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
margin: 18px 10px 0 0;
|
|
}
|
|
|
|
.radio-no-check {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 24px;
|
|
border: 1px solid #eee;
|
|
margin: 18px 10px 0 0;
|
|
}
|
|
|
|
.check-input {
|
|
border: 1px solid rgba(0, 35, 28, 0.1);
|
|
border-radius: 10px;
|
|
height: 35px;
|
|
width: 75%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.check-add {
|
|
width: 80px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
background: rgba(166, 255, 234, 1);
|
|
margin-top: 10px;
|
|
border-radius: 5px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.duoxuan {
|
|
display: inline-block;
|
|
text-align: center;
|
|
height: 36px;
|
|
background: #eee;
|
|
line-height: 36px;
|
|
border-radius: 5px;
|
|
padding: 0 10px;
|
|
color: #777;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 150rpx;
|
|
display: flex;
|
|
background: #fff;
|
|
z-index: 99;
|
|
box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.bottom-btn {
|
|
width: 90%;
|
|
height: 50px;
|
|
background: linear-gradient(90deg, #e3ff96, #a6ffea);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
border-radius: 50px;
|
|
margin: 10px auto;
|
|
}
|
|
</style>
|