root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
230 Commits
1 Branch
0 Tags
6.3 MiB
 
 
 
 
 
Tree: 0ed565ea76
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0ed565ea76'
${ noResults }
school_uni/package1/runErrand/runErrand.vue

561 lines
14 KiB
Raw Blame History

<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: 200rpx;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: 160rpx;position: absolute;top:0;left: 0;display: flex;">
<view style="width: 50%;height: 160rpx;"></view>
<view style="width: 50%;height: 160rpx;" @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: 160rpx;position: absolute;top:0;left: 0;display: flex;">
<view style="width: 50%;height: 160rpx;" @tap="isPaotui=!isPaotui"></view>
<view style="width: 50%;height: 160rpx;"></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" @tap="openAddressBook">
地址簿
</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" @tap="openAddressBook">
地址簿
</view>
</view>
</view>
</view>
<view style="width: 100%;height: 20rpx;border-top: 1px solid #eee;matgin-top:20rpx"></view>
<view class="content-box" style="height: 120rpx;">
<view class="content-title">
取件数量<text>*</text>
</view>
<view
style="display:flex;height: 80rpx;margin-top: 20rpx;line-height: 80rpx;border: 1px solid #777;background: #eee;border-radius: 20rpx;width: 40%;">
<view @tap="addFormData.num > 0 ? addFormData.num-- : 0"
style="width: 30%;font-size: 44rpx;font-weight: 700;text-align: center;">-</view>
<input type="number" v-model="addFormData.num" disabled
style="line-height: 80rpx;height: 80rpx;flex: 1;font-size: 36rpx;font-weight: 700;text-align: center;">
<view @tap="addFormData.num++"
style="width: 30%;font-size: 44rpx;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 20rpx;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 20rpx;border: 1px solid #eee;">
<view @tap="delCode(index)" v-if="addFormData.codeList.length>1"
style="width: 90rpx;height: 70rpx;line-height: 70rpx;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"
:style="{'background':addFormData.isOverweightOrOvervolume?'rgba(166, 255, 234, 1)':'#eee'}">
超重超大
</view>
</view>
</view>
<view class="content-box" style="line-height: 200rpx;">
<view class="content-title">
订单备注<text>*</text>
</view>
<view style="height: 200rpx;background: #eee;border-radius: 40rpx;padding: 20rpx;width: 70%;">
<textarea name="" id="" cols="30" rows="10" placeholder="请填写备注"
style="height: 160rpx;width: 100%;"></textarea>
</view>
</view>
<view class="content-box">
<view class="content-title">
送达时间<text>*</text>
</view>
<view style="flex: 1;font-size: 28rpx;font-weight: 700;" @tap="checkTime">
{{addFormData.deliveryTime}} <uni-icons type="right"></uni-icons>
</view>
</view>
<view style="width: 100%;height: 240rpx;"></view>
</view>
<view class="buy-bottom">
<view class="bottom-btn">
直接购买
</view>
</view>
<!-- 地址簿弹出层 -->
<uni-popup ref="bookPopup" background-color="#fff">
<view class="book-popup-content">
<address-list></address-list>
</view>
</uni-popup>
<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'
import addressList from '@/package1/address/addressList.vue'
export default {
data() {
return {
selected: 'phone',
isPaotui: true,
menuButtonInfo: {},
addFormData: {
qu: '',
song: '',
num: 0,
phone: '',
codeList: [{
code: ''
}],
picture: [],
isOverweightOrOvervolume: false,
deliveryTime: '立即送达'
},
content: []
}
},
components: {
deliveryTimeOp,
addressList
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
openAddressBook(){
this.$refs.bookPopup.open('bottom')
},
checkTime(){
this.$refs.model.open();
this.generateDeliveryTimes()
},
//时间选择器获取时间数据
generateDeliveryTimes() {
const now = new Date();
const today = new Date(now);
const tomorrow = new Date(now);
tomorrow.setDate(tomorrow.getDate() + 1);
// 星期几
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const todayWeekday = weekdays[today.getDay()];
const todayStr = `今天 (${todayWeekday})`;
// 明天的日期格式：月-日（不补零）
const month = tomorrow.getMonth() + 1;
const day = tomorrow.getDate();
const tomorrowStr = `${month}-${day}`;
// ----- 生成今天的时间列表 -----
const todayTimelist = [{
timestr: '自动送达'
}];
const currentHour = now.getHours();
const currentMinute = now.getMinutes();
// 计算下一个半小时点
let nextHour = currentHour;
let nextMinute = 30;
if (currentMinute >= 30) {
nextHour = currentHour + 1;
nextMinute = 0;
}
// 从下一个半小时点开始，直到 23:30
for (let h = nextHour; h <= 23; h++) {
const startMin = (h === nextHour) ? nextMinute : 0;
for (let m = startMin; m < 60; m += 30) {
if (h === 23 && m > 30) continue; // 不超过 23:30
const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
todayTimelist.push({
timestr: timeStr
});
}
}
// ----- 生成明天的时间列表（全天 00:00 ~ 23:30）-----
const tomorrowTimelist = [];
for (let h = 0; h <= 23; h++) {
for (let m = 0; m < 60; m += 30) {
if (h === 23 && m > 30) continue;
const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
tomorrowTimelist.push({
timestr: timeStr
});
}
}
this.content = [{
timezh: todayStr,
timelist: todayTimelist
},
{
timezh: tomorrowStr,
timelist: tomorrowTimelist
}
];
},
//切换日期
dataCallback(type) {
console.log("11111111111")
},
//时间选择器点击后
timeCallback(val) {
this.addFormData.deliveryTime = val.timestr
this.$refs.model.close()
},
checkWeightOrVolume() {
this.addFormData.isOverweightOrOvervolume = !this.addFormData.isOverweightOrOvervolume
},
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: 110rpx;
font-size: 36rpx;
font-weight: 700;
flex: 1;
text-align: center;
}
.content {
position: absolute;
top: 360rpx;
width: 100%;
overflow: scroll;
height: 80%;
background: #fff;
padding: 0 2.5%;
}
.tab1 {
width: 100%;
height: 160rpx;
position: relative;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.upload-img {
width: 160rpx;
height: 160rpx;
}
.dizhi {
display: flex;
margin-bottom: 20rpx;
}
.dizhi-tu {
width: 50rpx;
height: 50rpx;
margin: 26rpx 20rpx 0 0;
img {
width: 100%;
height: 100%;
}
}
.dizhi1 {
flex: 1;
background: #eee;
border-radius: 20rpx;
height: 100rpx;
line-height: 100rpx;
display: flex;
padding: 0 20rpx;
}
.dizhi-ming {
flex: 1;
font-weight: 700;
}
.dizhi-btn {
width: 112rpx;
height: 50rpx;
background: #fff;
line-height: 50rpx;
text-align: center;
border: 1px solid #777;
border-radius: 50rpx;
margin-top: 26rpx;
}
.content-box {
width: 100%;
display: flex;
line-height: 120rpx;
}
.content-title {
font-size: 28rpx;
font-weight: 700;
margin-right: 40rpx;
}
.radio-check {
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
width: 48rpx;
height: 48rpx;
border-radius: 48rpx;
text-align: center;
line-height: 48rpx;
margin: 36rpx 20rpx 0 0;
}
.radio-no-check {
width: 48rpx;
height: 48rpx;
border-radius: 48rpx;
border: 1px solid #eee;
margin: 36rpx 20rpx 0 0;
}
.check-input {
border: 1px solid rgba(0, 35, 28, 0.1);
border-radius: 20rpx;
height: 70rpx;
width: 75%;
margin-bottom: 20rpx;
}
.check-add {
width: 160rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
background: rgba(166, 255, 234, 1);
margin-top: 20rpx;
border-radius: 10rpx;
font-size: 22rpx;
}
.duoxuan {
display: inline-block;
text-align: center;
height: 72rpx;
background: #eee;
line-height: 72rpx;
border-radius: 10rpx;
padding: 0 20rpx;
color: #777;
margin-right: 20rpx;
}
.buy-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 150rpx;
display: flex;
background: #fff;
z-index: 99;
box-shadow: 0 -20rpx 30rpx rgba(0, 0, 0, 0.3);
}
.bottom-btn {
width: 90%;
height: 100rpx;
background: linear-gradient(90deg, #e3ff96, #a6ffea);
font-size: 26rpx;
font-weight: 700;
line-height: 100rpx;
text-align: center;
border-radius: 100rpx;
margin: 20rpx auto;
}
.book-popup-content{
position: relative;
height: 1200rpx;
width: 100%;
padding: 20rpx;
overflow: scroll;
}
</style>