3 changed files with 830 additions and 290 deletions
@ -1,9 +1,323 @@ |
|||
<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="content-box"> |
|||
<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 class="content-box"> |
|||
<view class="content-title"> |
|||
取件数量<text>*</text> |
|||
</view> |
|||
<view class=""> |
|||
<view>-</view> |
|||
<input type="number" disabled> |
|||
<view>+</view> |
|||
</view> |
|||
</view> |
|||
<view class="content-box"> |
|||
<view class="content-title"> |
|||
取件凭证<text>*</text> |
|||
</view> |
|||
<view class=""> |
|||
<view class=""> |
|||
<view class=""> |
|||
<radio></radio> 手机号 |
|||
</view> |
|||
<view class=""> |
|||
<input type="text"> |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class=""> |
|||
<radio></radio> 取件码 |
|||
</view> |
|||
<view class=""> |
|||
<input type="text"> |
|||
</view> |
|||
<view class=""> |
|||
+ 添加取件码 |
|||
</view> |
|||
</view> |
|||
<view class=""> |
|||
<view class=""> |
|||
<radio></radio> 取件码截图 |
|||
</view> |
|||
<view class=""> |
|||
<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> |
|||
<view class=""> |
|||
5公斤以内 |
|||
</view> |
|||
<view class=""> |
|||
5-10公斤 |
|||
</view> |
|||
<view class=""> |
|||
10-15公斤 |
|||
</view> |
|||
<view class=""> |
|||
15-20公斤 |
|||
</view> |
|||
<view class=""> |
|||
20公斤以上 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="content-box"> |
|||
<view class="content-title"> |
|||
物品体积<text>*</text> |
|||
</view> |
|||
<view> |
|||
<view class=""> |
|||
0.5立方米以下 |
|||
</view> |
|||
<view class=""> |
|||
0.5-1立方米 |
|||
</view> |
|||
<view class=""> |
|||
1.1-1.5立方米 |
|||
</view> |
|||
<view class=""> |
|||
1.6-2立方米 |
|||
</view> |
|||
<view class=""> |
|||
2.1立方米以上 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class=""> |
|||
下单 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isPaotui: true, |
|||
menuButtonInfo: {}, |
|||
} |
|||
}, |
|||
components: { |
|||
|
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
onShow() { |
|||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
}, |
|||
methods: { |
|||
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> |
|||
<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; |
|||
} |
|||
.dizhi-btn{ |
|||
width: 56px; |
|||
height: 25px; |
|||
background: #fff; |
|||
line-height: 25px; |
|||
text-align: center; |
|||
border: 1px solid #777; |
|||
border-radius: 25px; |
|||
margin-top: 13px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue