root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

代买饭页

master
tianyi 1 month ago
parent
612ee45f31
commit
b61732336b
3 changed files with 534 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      package1/address/addressList.vue
  2. 458
      package1/buyFood/buyFood.vue
  3. 11
      package1/runErrand/runErrand.vue

74
package1/address/addressList.vue
View File

@ -1,22 +1,53 @@
<template>
<view class="address-box">
<view>收货地址</view>
<view class="box1" style="display: flex;padding: 20px;">
<view style="height: 60px;line-height: 60px;font-size: 18px;font-weight: 700;text-align: center;">
收货地址
</view>
<view class="box1"
style="margin-bottom: 10px;display: flex;padding: 10px 20px 20px;background: #eee;border-radius: 10px;">
<view style="flex: 1;">
<view style="height: 21px;line-height: 21px;display: flex;">
<view style="height: 35px;line-height: 35px;display: flex;">
<text style="font-size: 15px;font-weight: 700;">沁园春第三食堂A20窗口</text>
</view>
<view style="text-align: right;margin-left: 30px;color: #777;width: 73px;">
<view style="color: #777;">
刘柳柳 18827381928
</view>
</view>
<view style="width: 18px;padding-top: 10px;">
<view
style="margin-top: 15px;width: 44px;height: 25px;line-height: 25px;text-align: center;border: 1px solid #777;border-radius: 25px;color: #777;">
编辑
</view>
</view>
<view class="">
<view class="bottom-btn" @tap="$refs.addBookPopup.open('bottom')">
新增地址
</view>
<!-- 新增地址弹出层 -->
<uni-popup ref="addBookPopup" background-color="#fff">
<view class="book-popup-content" style="height: 325px;">
<view style="height: 60px;line-height: 60px;font-size: 18px;font-weight: 700;text-align: center;">
填写地址
</view>
<view class="box1"
style="margin-bottom: 10px;background: #eee;border-radius: 10px;">
<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
</view>
<view class="box1"
style="margin-bottom: 10px;display: flex;padding: 10px;background: #eee;border-radius: 10px;">
<input type="text" placeholder="请填写详细地址" />
</view>
<view class="box1"
style="margin-bottom: 10px;display: flex;padding: 10px;background: #eee;border-radius: 10px;">
<input type="text" placeholder="收货人名字" />
</view>
<view class="box1"
style="margin-bottom: 10px;display: flex;padding: 10px;background: #eee;border-radius: 10px;">
<input type="text" placeholder="联系电话" />
</view>
<view class="bottom-btn">
确认
</view>
</view>
</uni-popup>
</view>
</template>
@ -24,7 +55,17 @@
export default {
data() {
return {
selected: 'phone'
selected: 'phone',
range: [{
"value": 0,
"text": "篮球运动"
}, {
"value": 1,
"text": "足球运动",
}, {
"value": 2,
"text": "游泳健身运动"
}]
}
},
methods: {
@ -36,5 +77,22 @@
}
</script>
<style>
<style lang="scss">
.address-box {
height: 600px;
}
.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;
position: fixed;
bottom: 10px;
}
</style>

458
package1/buyFood/buyFood.vue
View File

@ -1,12 +1,466 @@
<template>
<!-- 代买饭页 -->
<view class="page1">
<view>代买饭页</view>
<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>
<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>

11
package1/runErrand/runErrand.vue
View File

@ -170,7 +170,7 @@
</view>
<view style="width: 100%;height: 120px;"></view>
</view>
<view class="bottom">
<view class="buy-bottom">
<view class="bottom-btn">
直接购买
</view>
@ -528,7 +528,7 @@
margin-right: 10px;
}
.bottom {
.buy-bottom {
position: fixed;
bottom: 0;
left: 0;
@ -551,4 +551,11 @@
border-radius: 50px;
margin: 10px auto;
}
.book-popup-content{
position: relative;
height: 600px;
width: 100%;
padding: 10px;
overflow: scroll;
}
</style>
Write Preview
Loading…
Cancel
Save