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.
101 Commits
1 Branch
0 Tags
6.3 MiB
 
 
 
 
 
Tree: 8625e4fa24
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '8625e4fa24'
${ noResults }
school_uni/package1/order/orderDetail.vue

363 lines
8.9 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 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 class="status-btn">
去评价
</view> -->
</view>
</view>
<view class="btn-box">
<view class="btn" @tap="openCode">
核销取餐码
</view>
<!-- <view class="btn">
再来一单
</view>
<view class="btn">
￥5 去支付
</view>
<view class="btn">
增加配送佣金
</view>
<view class="btn">
取消申请
</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>
<!-- 核销二维码弹出层 -->
<uni-popup ref="imgPopup" background-color="#fff">
<view class="img-popup-content" @tap="$refs.imgPopup.close()">
<img :src="codeImg" alt="" style="width: 330rpx;height: 330rpx;margin: 282rpx 0 0 136rpx;border: 20rpx solid rgba(222, 255, 248, 1);border-radius: 20rpx;">
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {},
codeImg:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/3a4e68eb14d7417cbb4f15fa85907c64.jpg'
}
},
components: {
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
openCode(){
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;
}
.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;
}
.img-popup-content {
width: 600rpx;
height: 800rpx;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/73e684e3319c468d9252461ba3c9e95b.png') no-repeat;
background-size: 100%;
}
</style>