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.
466 lines
12 KiB
466 lines
12 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>
|
|
</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="address-box">
|
|
<view v-if="formData.address == ''">
|
|
请选择收货地址 <uni-icons type="right" size="16"></uni-icons>
|
|
</view>
|
|
<view v-else>
|
|
男生宿舍楼2楼211
|
|
</view>
|
|
</view>
|
|
<view class="time-box">
|
|
<view class="time1" @tap="checkTime(true)" :style="{'background':formData.isImmediately?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#eee'}">
|
|
<view style="font-weight: 700;">
|
|
立即送出
|
|
</view>
|
|
<view style="font-size: 10px;color: #777;">
|
|
预计18:47-19:02送达
|
|
</view>
|
|
</view>
|
|
<view class="time1" @tap="checkTime(false)" :style="{'background':formData.isImmediately==false?'linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1))':'#eee'}">
|
|
<view style="font-weight: 700;">
|
|
预约配送
|
|
</view>
|
|
<view class="">
|
|
<view style="font-size: 10px;color: #777;" v-if="formData.isImmediately!=true&&formData.deliveryTime!=''">
|
|
{{formData.deliveryTime}}
|
|
</view>
|
|
<view v-else style="font-size: 10px;color: #777;">
|
|
选择时间 >
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style='background: #fff;border-bottom: 1px solid #eee;'>
|
|
<view style="height: 45px;line-height: 20px;padding: 0 20px;font-size: 14px;font-weight: 700;padding-top: 10px;">
|
|
<view class="">
|
|
配送员
|
|
</view>
|
|
<view style="font-size: 12px;color: #777;">
|
|
指定配送员后，如遇到配送员拒绝接单，该订单进入抢单大厅
|
|
</view>
|
|
</view>
|
|
<view style="padding: 20px;">
|
|
<view style="display: flex;font-size: 14px;font-weight: bold;line-height: 25px;margin-bottom: 15px;">
|
|
<view class="radio-check" v-if="selected === 'buzhiding'">
|
|
<uni-icons type="checkmarkempty" size="12"></uni-icons>
|
|
</view>
|
|
<view class="radio-no-check" @tap="checkVoucher('buzhiding')" v-else></view>
|
|
不指定
|
|
</view>
|
|
<view class="" style="display: flex;font-size: 14px;font-weight: bold;line-height: 25px;">
|
|
<view style="width:50%;display: flex;">
|
|
<view class="radio-check" v-if="selected === 'zhiding'">
|
|
<uni-icons type="checkmarkempty" size="12"></uni-icons>
|
|
</view>
|
|
<view class="radio-no-check" @tap="checkVoucher('zhiding')" v-else></view>
|
|
指定配送员
|
|
</view>
|
|
<view style="width: 50%;color: #777;text-align: right;">
|
|
配送员
|
|
<uni-icons type="right" size="12"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="box1">
|
|
<view style="width: 100%;line-height: 35px;font-size: 14px;font-weight: 700;">
|
|
竹仔园牛仔农庄(第六分店)
|
|
</view>
|
|
<view style="display: flex;padding: 10px;background: #eee;border-radius: 10px;">
|
|
<view class="goods-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="goods-content">
|
|
<view class="goods-name">
|
|
牛仔农庄(医专店)
|
|
</view>
|
|
<view class="goods-content-center">
|
|
<view class="goods-deal1">
|
|
打分；不要啦
|
|
</view>
|
|
</view>
|
|
<view class="goods-content-bottom">
|
|
<view style="width: 45%;">
|
|
X1
|
|
</view>
|
|
<view class="pintuan-left-price">
|
|
￥90.00
|
|
<view style="background: rgba(255, 57, 57, 0.2);padding: 0px 6px;border-radius: 10px;margin-left: 10px;">
|
|
<text>拼团</text>
|
|
<text style="color: red;">￥59.9</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view style="height: 40px;line-height: 40px;display: flex;">
|
|
<view style="flex: 1;color: #777;font-weight: 700;">
|
|
打包费
|
|
</view>
|
|
<view style="color: #000;font-weight:700;">
|
|
￥1
|
|
</view>
|
|
</view>
|
|
<view style="height: 40px;line-height: 40px;display: flex;">
|
|
<view style="flex: 1;color: #777;font-weight: 700;">
|
|
配送费
|
|
</view>
|
|
<view style="color: #000;font-weight:700;">
|
|
￥5
|
|
</view>
|
|
</view>
|
|
<view style="height: 40px;line-height: 40px;display: flex;">
|
|
<view style="flex: 1;color: #777;font-weight: 700;">
|
|
优惠券
|
|
</view>
|
|
<view style="color: #000;font-weight:700;">
|
|
-￥1 <uni-icons type="right" size="12"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
style="display: flex;height: 40px;line-height: 50px;border-top: 1px solid #eee;font-size: 16px;font-weight: 700;">
|
|
<view style="flex: 1;">
|
|
合计
|
|
</view>
|
|
<view class="">
|
|
￥90.00
|
|
</view>
|
|
</view>
|
|
<view style="height:80px;"></view>
|
|
<view class="buy-bottom">
|
|
<view class="bottom-btn">
|
|
立即支付
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<delivery-time-op @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 {
|
|
menuButtonInfo: {},
|
|
formData:{
|
|
address:'',
|
|
isImmediately:true,
|
|
deliveryTime:''
|
|
},
|
|
content: [],
|
|
selected: 'buzhiding',
|
|
}
|
|
},
|
|
components: {
|
|
deliveryTimeOp
|
|
},
|
|
onLoad(option) {
|
|
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
methods: {
|
|
checkTime(type){
|
|
if(type == this.formData.isImmediately){
|
|
|
|
}
|
|
this.formData.isImmediately = !this.formData.isImmediately
|
|
if(this.formData.isImmediately == false){
|
|
this.$refs.model.open()
|
|
this.generateDeliveryTimes()
|
|
}
|
|
},
|
|
checkVoucher(type) {
|
|
if (type == this.selected) return;
|
|
this.selected = type;
|
|
|
|
this.addFormData.phone = '',
|
|
this.addFormData.codeList = [{
|
|
code: ''
|
|
}]
|
|
this.addFormData.picture = []
|
|
},
|
|
//时间选择器获取时间数据
|
|
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
|
|
}
|
|
];
|
|
},
|
|
//时间选择器点击后
|
|
timeCallback(val) {
|
|
this.formData.deliveryTime = val.timestr
|
|
this.$refs.model.close()
|
|
},
|
|
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;
|
|
}
|
|
|
|
.title {
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
|
width: 100%;
|
|
height: 20%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.tab1 {
|
|
width: 100%;
|
|
height: 80px;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.box1 {
|
|
width: 95%;
|
|
margin: 0 auto 10px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.goods-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
background-size: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.goods-content {
|
|
flex: 1;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.goods-content-center {
|
|
display: flex;
|
|
margin: 16rpx 0;
|
|
color: #777;
|
|
}
|
|
|
|
.pintuan-left-price {
|
|
width: 55%;
|
|
text-align: right;
|
|
font-weight: 700;
|
|
color: #000;
|
|
display: flex;
|
|
}
|
|
|
|
.goods-content-bottom {
|
|
display: flex;
|
|
line-height: 28px;
|
|
color: #777;
|
|
}
|
|
.address-box{
|
|
background: #fff;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
padding: 0 20px;
|
|
}
|
|
.time-box{
|
|
background: #fff;
|
|
display: flex;
|
|
height: 70px;
|
|
padding: 10px;
|
|
}
|
|
.time1{
|
|
height: 50px;
|
|
flex: 1;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
margin: 0 5px 0 10px;
|
|
line-height: 20px;
|
|
padding-top: 5px;
|
|
}
|
|
.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: 0 10px 0 0;
|
|
}
|
|
|
|
.radio-no-check {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 24px;
|
|
border: 1px solid #eee;
|
|
margin: 0 10px 0 0;
|
|
}
|
|
.buy-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>
|