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

订单详情页

master
tianyi 1 month ago
parent
df9ad3a23c
commit
dd3f192ab2
2 changed files with 574 additions and 38 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. 335
      package1/order/orderDetail.vue
  2. 277
      package1/runErrand/runErrand.vue

335
package1/order/orderDetail.vue
View File

@ -1,9 +1,342 @@
<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 class="content">
<view class="box1" style="display: flex;">
<view class="status-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6cf6fff020614ebebb34f7c371e11331.png" alt="" />
<!--
待支付 https://jewel-shop.oss-cn-beijing.aliyuncs.com/6cf6fff020614ebebb34f7c371e11331.png
订单取消 https://jewel-shop.oss-cn-beijing.aliyuncs.com/03d7e8d5914e4b9ca04728113900d1fe.png
等待商家接单、等待配送员接单、等待商家同意 https://jewel-shop.oss-cn-beijing.aliyuncs.com/35ff6276eb3a4e58b8baa724ca44d5dc.png
配送中、配送员已接单、配送员已到店、等待配送员接单 https://jewel-shop.oss-cn-beijing.aliyuncs.com/0ab87a35cbca473997c679a023337df6.png
订单完成 https://jewel-shop.oss-cn-beijing.aliyuncs.com/dbfa6dc934e2414c912c67430d5f802c.png
-->
</view>
<view class="status-text">
<view class="status-zhu">
<text>待支付，剩余9:51</text>
<!-- <text>订单已取消</text>
<text>等待商家接单</text>
<text>等待配送员接单</text>
<text>配送员已接单</text>
<text>配送员已到店</text>
<text>配送中</text>
<text>订单已送达</text>
<text>请等待商家同意</text>
<text>订单已取消</text> -->
</view>
<view class="status-fu">
<view class="">预计<text>10:51</text>送达</view>
<!-- <view class="">超过15分钟未支付，订单自动取消</view>
<view class="">您申请了取消订单，请等待商家同意</view>
<view class="">商家已同意取消订单，订单金额将原路返回</view>
<view class="">商家已拒绝取消订单，将会继续为您配送</view> -->
</view>
<view class="status-address">
送至 <text>北校区1号宿舍楼6楼612</text>
</view>
<view class="status-btn">
取消订单
</view>
</view>
</view>
<view class="btn-box">
<view class="btn">
￥5 去支付
</view>
<!-- <view class="">
再来一单
</view>
<view class="">
增加配送佣金
</view>
<view class="">
取消申请
</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: 50%;">
X1
</view>
<view class="pintuan-left-price">
￥90.00
</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>
<view class="box1">
<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号宿舍楼5楼512(0702)
</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;">
不指定
</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;">
3847283739782938
</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;">
尽快送达
</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;">
2026-02-01 23:00:00
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {}
}
},
components: {
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
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: 54%;
}
.content{
position: absolute;
top: 100px;
width: 95%;
margin-left: 2.5%;
}
.title-sreach{
width: 100%;
display: flex;
height: 200rpx;
position: relative;
}
.back-btn{
position: absolute;
bottom: 0;
left: 0;
}
.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;
}
.goods-deal1 {
width: 60%;
}
.goods-content-bottom {
display: flex;
line-height: 28px;
color: #777;
}
.pintuan-left-price {
width: 50%;
text-align: right;
font-weight: 700;
color: #000;
}
.status-img{
width: 42px;
height: 42px;
img{
width: 42px;
height: 42px;
background-size: 100%;
}
}
.status-text{
flex: 1;
position: relative;
padding-left: 10px;
}
.status-zhu{
font-size: 16px;
font-weight: 700;
}
.status-fu{
height: 25px;
line-height: 25px;
}
.status-address{
font-weight: 700;
}
.status-btn{
position: absolute;
top: 10px;
right: 0;
background: #eee;
width: 65px;
height: 25px;
text-align: center;
line-height: 25px;
border-radius: 8px;
color: #777;
border: 1px solid #777;
font-size: 10px;
}
.btn-box{
height: 60px;
}
.btn{
width: 90%;
height: 50px;
line-height: 50px;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
font-size: 16px;
border-radius: 60px;
text-align: center;
margin: 0 auto;
font-weight: 700;
}
</style>

277
package1/runErrand/runErrand.vue
View File

@ -33,7 +33,7 @@
</view>
</view>
<view class="content">
<view class="content-box">
<view class="">
<view class="dizhi">
<view class="dizhi-tu">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png"
@ -63,45 +63,68 @@
</view>
</view>
</view>
<view class="content-box">
<view style="width: 100%;height: 10px;border-top: 1px solid #eee;matgin-top:10px"></view>
<view class="content-box" style="height: 60px;">
<view class="content-title">
取件数量<text>*</text>
</view>
<view class="">
<view>-</view>
<input type="number" disabled>
<view>+</view>
<view
style="display:flex;height: 40px;margin-top: 10px;line-height: 40px;border: 1px solid #777;background: #eee;border-radius: 10px;width: 40%;">
<view @tap="addFormData.num > 0 ? addFormData.num-- : 0"
style="width: 30%;font-size: 22px;font-weight: 700;text-align: center;">-</view>
<input type="number" v-model="addFormData.num" disabled
style="line-height: 40px;height: 40px;flex: 1;font-size: 18px;font-weight: 700;text-align: center;">
<view @tap="addFormData.num++"
style="width: 30%;font-size: 22px;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="">
<view class="">
<radio></radio> 手机号
<view class="" style="display: flex;">
<view class="radio-check" v-if="selected === 'phone'">
<uni-icons type="checkmarkempty" size="12"></uni-icons>
</view>
<view class="">
<input type="text">
<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 10px;border: 1px solid #eee;">
</view>
<view class="">
<view class="">
<radio></radio> 取件码
</view>
<view class="">
<input type="text">
<view class="" style="display: flex;">
<view class="radio-check" v-if="selected === 'code'">
<uni-icons type="checkmarkempty" size="12"></uni-icons>
</view>
<view class="">
<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 10px;border: 1px solid #eee;">
<view @tap="delCode(index)" v-if="addFormData.codeList.length>1"
style="width: 45px;height: 35px;line-height: 35px;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="">
<radio></radio> 取件码截图
<view class="" style="display: flex;">
<view class="radio-check" v-if="selected === 'screenshot'">
<uni-icons type="checkmarkempty" size="12"></uni-icons>
</view>
<view class="">
<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>
@ -121,20 +144,25 @@
<view class="content-title">
取件重量<text>*</text>
</view>
<view>
<view class="">
<view style="flex: 1;">
<view class="duoxuan" @tap="checkWeightOrVolume('weight','5公斤以内')"
:style="{'background':addFormData.weight == '5公斤以内' ?'rgba(166, 255, 234, 1)':'#eee'}">
5公斤以内
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('weight','5-10公斤')"
:style="{'background':addFormData.weight == '5-10公斤' ?'rgba(166, 255, 234, 1)':'#eee'}">
5-10公斤
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('weight','10-15公斤')"
:style="{'background':addFormData.weight == '10-15公斤' ?'rgba(166, 255, 234, 1)':'#eee'}">
10-15公斤
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('weight','15-20公斤')"
:style="{'background':addFormData.weight == '15-20公斤' ?'rgba(166, 255, 234, 1)':'#eee'}">
15-20公斤
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('weight','20公斤以上')"
:style="{'background':addFormData.weight == '20公斤以上' ?'rgba(166, 255, 234, 1)':'#eee'}">
20公斤以上
</view>
</view>
@ -143,43 +171,104 @@
<view class="content-title">
物品体积<text>*</text>
</view>
<view>
<view class="">
<view style="flex: 1;">
<view class="duoxuan" @tap="checkWeightOrVolume('volume','0.5立方米以下')"
:style="{'background':addFormData.volume == '0.5立方米以下' ?'rgba(166, 255, 234, 1)':'#eee'}">
0.5立方米以下
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('volume','0.5-1立方米')"
:style="{'background':addFormData.volume == '0.5-1立方米' ?'rgba(166, 255, 234, 1)':'#eee'}">
0.5-1立方米
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('volume','1.1-1.5立方米')"
:style="{'background':addFormData.volume == '1.1-1.5立方米' ?'rgba(166, 255, 234, 1)':'#eee'}">
1.1-1.5立方米
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('volume','1.6-2立方米')"
:style="{'background':addFormData.volume == '1.6-2立方米' ?'rgba(166, 255, 234, 1)':'#eee'}">
1.6-2立方米
</view>
<view class="">
<view class="duoxuan" @tap="checkWeightOrVolume('volume','2.1立方米以上')"
:style="{'background':addFormData.volume == '2.1立方米以上' ?'rgba(166, 255, 234, 1)':'#eee'}">
2.1立方米以上
</view>
</view>
</view>
<view class="content-box">
<view class="content-title">
订单备注<text>*</text>
</view>
<view style="flex: 1;">
<textarea name="" id="" cols="30" rows="10" placeholder="请填写备注"></textarea>
</view>
</view>
<view class="content-box">
<view class="content-title">
送达时间<text>*</text>
</view>
<view style="flex: 1;" @tap="$refs.model.open();">
选择送达时间 <uni-icons type="right"></uni-icons>
</view>
</view>
<view style="width: 100%;height: 120px;"></view>
</view>
<view class="bottom">
<view class="">
下单
<view class="bottom-btn">
直接购买
</view>
</view>
<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'
export default {
data() {
return {
selected: 'phone',
isPaotui: true,
menuButtonInfo: {},
addFormData: {
qu: '',
song: '',
num: 0,
phone: '',
codeList: [{
code: ''
}],
picture: [],
weight: '',
volume: ''
},
content: [{
timezh: "今天 (周三)",
timeformatter: "8-10",
id: 108,
timelist: [{
timestr: "立即送达",
}, {
timestr: "15:35",
}, {
timestr: "16:05",
}, {
timestr: "16:35",
}, {
timestr: "17:05",
}, {
timestr: "17:35",
}, {
timestr: "18:05",
}, {
timestr: "18:35",
}]
}]
}
},
components: {
deliveryTimeOp
},
onLoad() {
@ -188,6 +277,31 @@
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
checkWeightOrVolume(type, value) {
if (type == 'weight') {
this.addFormData.weight = value
} else {
this.addFormData.volume = value
}
},
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;
},
@ -298,7 +412,8 @@
height: 100%;
}
}
.dizhi1{
.dizhi1 {
flex: 1;
background: #eee;
border-radius: 10px;
@ -307,10 +422,13 @@
display: flex;
padding: 0 10px;
}
.dizhi-ming{
.dizhi-ming {
flex: 1;
font-weight: 700;
}
.dizhi-btn{
.dizhi-btn {
width: 56px;
height: 25px;
background: #fff;
@ -320,4 +438,89 @@
border-radius: 25px;
margin-top: 13px;
}
.content-box {
width: 100%;
display: flex;
line-height: 60px;
}
.content-title {
font-size: 14px;
font-weight: 700;
margin-right: 20px;
}
.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: 18px 10px 0 0;
}
.radio-no-check {
width: 24px;
height: 24px;
border-radius: 24px;
border: 1px solid #eee;
margin: 18px 10px 0 0;
}
.check-input {
border: 1px solid rgba(0, 35, 28, 0.1);
border-radius: 10px;
height: 35px;
width: 75%;
margin-bottom: 10px;
}
.check-add {
width: 80px;
height: 25px;
line-height: 25px;
text-align: center;
background: rgba(166, 255, 234, 1);
margin-top: 10px;
border-radius: 5px;
font-size: 11px;
}
.duoxuan {
display: inline-block;
text-align: center;
height: 36px;
background: #eee;
line-height: 36px;
border-radius: 5px;
padding: 0 10px;
color: #777;
margin-right: 10px;
}
.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>
Write Preview
Loading…
Cancel
Save