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.
37 Commits
1 Branch
0 Tags
6.3 MiB
 
 
 
 
 
Tree: 2ba42ae90c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2ba42ae90c'
${ noResults }
school_uni/package1/buyFood/buyFood.vue

563 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>
</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/6b3a4d4c61ee42feb29e69d6fcfd2c1e.png" alt=""
style="position: absolute;" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1cbed0734a154a70b75cb84a811bd0b7.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/3b98dfb370eb4ddcb942b7942dedced2.png" alt=""
style="position: absolute;" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/82627e6cedcf409a932d6afaafa19a4b.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="ziqu-box" v-if="isPaotui==false">
<view class="ziqu-xuanfu">
取餐信息
</view>
<view class="ziqu-address">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e13c675ffd4547d0b271900902ffea66.png" alt="" />
<view class="ziqu-text">
北校区1食堂3楼12号窗口杨国福麻辣烫
</view>
</view>
<view class="ziqu-time-box">
<view style="flex: 1;">
自取时间
</view>
<view style="color: red;">
19:00
</view>
</view>
<view class="ziqu-call-box">
<view class="ziqu-call">
预留电话
</view>
<view class="ziqu-call-input">
<input type="text" placeholder="请输入预留电话" style="height: 35px;line-height: 35px;text-align: right;" />
</view>
</view>
</view>
<view class="address-box" v-if="isPaotui">
<view v-if="formData.address == ''" @tap="openAddressBook">
请选择收货地址 <uni-icons type="right" size="16"></uni-icons>
</view>
<view v-else>
男生宿舍楼2楼211
</view>
</view>
<view class="time-box" v-if="isPaotui">
<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 v-if="isPaotui" 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>
<!-- 地址簿弹出层 -->
<uni-popup ref="bookPopup" background-color="#fff">
<view class="book-popup-content">
<address-list></address-list>
</view>
</uni-popup>
<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'
import addressList from '@/package1/address/addressList.vue'
export default {
data() {
return {
isPaotui: true,
menuButtonInfo: {},
formData:{
address:'',
isImmediately:true,
deliveryTime:'',
peisongyuan:''
},
content: [],
selected: 'buzhiding',
}
},
components: {
deliveryTimeOp,
addressList
},
onLoad(option) {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
openAddressBook(){
this.$refs.bookPopup.open('bottom')
},
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;
if(this.selected == 'buzhiding'){
this.formData.peisongyuan = ""
}
},
//时间选择器获取时间数据
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;
background: #fff;
}
.title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
width: 100%;
height: 22%;
}
.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;
}
.ziqu-box{
background: #eee;
width: 90%;
margin: 0 auto;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.ziqu-xuanfu{
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
background: rgba(166, 255, 234, 1);
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
font-weight: 700;
font-size: 10px;
}
.ziqu-address{
display: flex;
height: 50px;
background: #fff;
width: 90%;
border-radius: 10px;
font-size: 13px;
margin: 30px auto 0;
font-weight: bold;
line-height: 50px;
img{
width: 20px;
height: 20px;
margin: 15px 10px 0 15px;
}
}
.ziqu-time-box{
width: 90%;
margin: 10px auto;
display: flex;
font-weight: 700;
}
.ziqu-call-box{
width: 90%;
display: flex;
height: 35px;
line-height: 35px;
margin: 0 auto 10px;
}
.ziqu-call{
flex: 1;
}
.book-popup-content{
position: relative;
height: 600px;
width: 100%;
padding: 10px;
overflow: scroll;
}
</style>