500 lines
13 KiB
Vue
500 lines
13 KiB
Vue
<template>
|
||
<view class="index-container">
|
||
<view class="shop-info">
|
||
<view class="shop-logo-img"></view>
|
||
<view class="shop-name">岛内价生活超市</view>
|
||
</view>
|
||
<view class="tab-content">
|
||
<tui-tabs
|
||
:tabs="tabs"
|
||
:currentTab="currentTab"
|
||
bottom="50%"
|
||
:backgroundColor="'#f2f2f2'"
|
||
:width="360"
|
||
:itemWidth="'50%'"
|
||
:bold="true"
|
||
color="#000"
|
||
selectedColor="#fd806b"
|
||
:sliderWidth="150"
|
||
:sliderHeight="60"
|
||
sliderBgColor="#fff"
|
||
:unlined="true"
|
||
@change="handleTab"
|
||
></tui-tabs>
|
||
</view>
|
||
<view class="tab2-content" v-if="currentTab == 0">
|
||
<tui-tabs
|
||
:tabs="tabs2"
|
||
:width="280"
|
||
:currentTab="currentTab2"
|
||
@change="handleTab2"
|
||
></tui-tabs>
|
||
</view>
|
||
|
||
<view class="order-info-content">
|
||
<scroll-view
|
||
class="uni-swiper-list"
|
||
scroll-y
|
||
:scroll-top="0"
|
||
enhanced
|
||
:show-scrollbar="false"
|
||
>
|
||
<view class="order-info-block">
|
||
<view class="order-info-hander">
|
||
<view class="order-num-block">
|
||
<view class="order-serial-num"
|
||
>#<text
|
||
style="
|
||
font-size: 46rpx;
|
||
padding-left: 4rpx;
|
||
font-weight: bold;
|
||
"
|
||
>3</text
|
||
></view
|
||
>
|
||
<view class="order-num">订单号：DD2025010803</view>
|
||
</view>
|
||
<view class="rider-info">
|
||
<view class="delivery-time"> 预计送达11:23前 </view>
|
||
<view class="delivery-status"> 待骑手接单 </view>
|
||
</view>
|
||
</view>
|
||
<view class="" v-show="showOrderInfo">
|
||
<view class="user-info-block">
|
||
<view class="user-info"> 张先生 手机尾号3158 </view>
|
||
<view class="user-address"
|
||
>收货地址：金凤凰商业街18号4楼（桂平发发网络有限公司）</view
|
||
>
|
||
</view>
|
||
<view class="picking-info">
|
||
<view class="picking-status">
|
||
<view class="picking-name">拣货中</view>
|
||
<view class="picking-time">已用时 03:54</view>
|
||
</view>
|
||
<u-button class="picking-btn">拣货完成</u-button>
|
||
</view>
|
||
<view class="delivery-status-info">
|
||
<view class="delivery-status">待接单</view>
|
||
<view class="delivery-num">JS4151266256655</view>
|
||
</view>
|
||
<view class="order-remark">
|
||
<text style="color: red; font-weight: bold">备注：</text>
|
||
<text>【如遇缺货】：缺货时请与我电话联系</text>
|
||
</view>
|
||
<view class="commodity-info-block">
|
||
<view class="commodity-num">
|
||
<text style="font-size: 36rpx">{{ commodityArr.length }}</text>
|
||
<text>件商品</text>
|
||
</view>
|
||
<view
|
||
class="commodity-info"
|
||
v-for="(item, index) of commodityArr"
|
||
:key="index"
|
||
>
|
||
<image class="commodity-info-img" :src="item.imrUrl"></image>
|
||
<view class="commodity-content">
|
||
<view class="commodity-name">{{ item.name }}</view>
|
||
<view class="commodity-barcode"
|
||
>条码
|
||
<text style="padding-left: 8rpx">{{
|
||
item.barcode
|
||
}}</text></view
|
||
>
|
||
<view class="commodity-specification"
|
||
>规格
|
||
<text style="padding-left: 8rpx">{{
|
||
item.specification
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="commodity-num"
|
||
>X
|
||
<text style="padding-left: 8rpx">{{ item.num }}</text></view
|
||
>
|
||
<view class="commodity-price">￥{{ item.price }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="baling-charges-block">
|
||
<view class="baling-charges-name">打包费</view>
|
||
<view class="baling charges-num">￥0.5</view>
|
||
</view>
|
||
<view class="cost-info-block">
|
||
<view class="cost-info-item cost-info-subtotal">
|
||
<view class="cost-info-title">小计</view>
|
||
<view class="cost-info-num">￥30.50</view>
|
||
</view>
|
||
<view class="cost-info-item cost-info-subtotal">
|
||
<view
|
||
class="cost-info-title"
|
||
style="color: #555555; font-weight: 700"
|
||
>商家活动支付<text
|
||
><u-icon
|
||
style="display: inline-block; margin-left: 8rpx"
|
||
name="question-circle"
|
||
size="12"
|
||
color="aaaaaa"
|
||
></u-icon></text
|
||
></view>
|
||
<view class="cost-info-num">￥30.50</view>
|
||
</view>
|
||
<view class="cost-info-item cost-info-subtotal">
|
||
<view
|
||
class="cost-info-title"
|
||
style="color: #555555; font-weight: 700"
|
||
>平台服务费<text
|
||
><u-icon
|
||
style="display: inline-block; margin-left: 8rpx"
|
||
name="question-circle"
|
||
size="12"
|
||
color="#aaaaaa"
|
||
></u-icon></text
|
||
></view>
|
||
<view class="cost-info-num">￥30.50</view>
|
||
</view>
|
||
<view class="cost-info-income">
|
||
<view class="predict -income"
|
||
>预计收入<text
|
||
style="font-size: 40rpx; color: #555555; font-weight: 700"
|
||
>￥24.95</text
|
||
></view
|
||
>
|
||
<view class="customer-actual-payment">
|
||
顾客实际支付 ￥30.50
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-btn-block">
|
||
<view class="btn-list">
|
||
<u-button class="btn-item">取消订单</u-button>
|
||
<u-button class="btn-item">退差价</u-button>
|
||
<u-button class="btn-item">部分退款</u-button>
|
||
</view>
|
||
<view class="arrow-item" @click="showOrderInfo = !showOrderInfo">
|
||
{{ showOrderInfo ? "收起订单" : "展开订单" }}
|
||
<u-icon
|
||
style="display: inline-block; margin-left: 6rpx"
|
||
:name="showOrderInfo ? 'arrow-up' : 'arrow-down'"
|
||
size="12"
|
||
></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tuiTabs from "../../components/tui-tabs.vue";
|
||
export default {
|
||
components: {
|
||
tuiTabs,
|
||
},
|
||
data() {
|
||
return {
|
||
currentTab: 0,
|
||
currentTab2: 0,
|
||
tabs: [
|
||
{
|
||
name: "处理中",
|
||
},
|
||
{
|
||
name: "预订单",
|
||
},
|
||
{
|
||
name: "物流订单",
|
||
},
|
||
{
|
||
name: "全部订单",
|
||
num: 99,
|
||
},
|
||
],
|
||
tabs2: [
|
||
{
|
||
name: "进行中",
|
||
},
|
||
{
|
||
name: "异常配送",
|
||
},
|
||
{
|
||
name: "退款",
|
||
},
|
||
],
|
||
commodityArr: [
|
||
{
|
||
imrUrl: "../../static/logo.png",
|
||
name: "猪肉",
|
||
barcode: "11131312123",
|
||
specification: "500g*1袋",
|
||
num: "3",
|
||
price: 300,
|
||
},
|
||
{
|
||
imrUrl: "../../static/logo.png",
|
||
name: "猪肉",
|
||
barcode: "11131312123",
|
||
specification: "500g*1袋",
|
||
num: "3",
|
||
price: 300,
|
||
},
|
||
{
|
||
imrUrl: "../../static/logo.png",
|
||
name: "猪肉",
|
||
barcode: "11131312123",
|
||
specification: "500g*1袋",
|
||
num: "3",
|
||
price: 300,
|
||
},
|
||
],
|
||
showOrderInfo: false,
|
||
};
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
handleTab(e) {
|
||
this.currentTab = e.index;
|
||
},
|
||
handleTab2(e) {
|
||
this.currentTab2 = e.index;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.index-container {
|
||
// overflow: hidden;
|
||
.shop-info {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 40rpx;
|
||
|
||
.shop-logo-img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-image: url("../../static/logo.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
.shop-name {
|
||
margin-left: 20rpx;
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
.tab-content {
|
||
padding: 12rpx 0;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.order-info-content {
|
||
margin: 28rpx;
|
||
|
||
border-radius: 8rpx;
|
||
|
||
.uni-swiper-list {
|
||
height: calc(100vh - 245px);
|
||
}
|
||
|
||
.order-info-block {
|
||
border: 1px #d7d7d7 solid;
|
||
.order-info-hander {
|
||
background: #d7d7d7;
|
||
font-size: 32rpx;
|
||
|
||
.order-num-block {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 12rpx;
|
||
|
||
.order-serial-num {
|
||
color: #555555;
|
||
}
|
||
|
||
.order-num {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.rider-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12rpx;
|
||
color: #555555;
|
||
|
||
.delivery-time {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.delivery-status {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-info-block {
|
||
padding: 32rpx 20rpx;
|
||
border-bottom: 1px dashed #d7d7d7;
|
||
|
||
.user-info {
|
||
font-size: 26rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.user-address {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.picking-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 40rpx 32rpx 20rpx;
|
||
border-bottom: 1px dashed #d7d7d7;
|
||
|
||
.picking-status {
|
||
font-size: 26rpx;
|
||
color: #7f7f7f;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
}
|
||
|
||
.picking-btn {
|
||
width: 34%;
|
||
height: 60rpx;
|
||
font-size: 24rpx;
|
||
background: rgba(30, 152, 215, 1);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.delivery-status-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 20rpx;
|
||
border-bottom: 1px dashed #d7d7d7;
|
||
color: #555555;
|
||
|
||
.delivery-status {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.delivery-num {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.order-remark {
|
||
margin: 12rpx;
|
||
padding: 12rpx;
|
||
background: linear-gradient(
|
||
270deg,
|
||
rgba(215, 215, 215, 1) 1%,
|
||
rgba(242, 242, 242, 1) 99%
|
||
);
|
||
}
|
||
|
||
.commodity-info-block {
|
||
padding: 12rpx;
|
||
border-bottom: 1px dashed #d7d7d7;
|
||
|
||
.commodity-num {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.commodity-info {
|
||
margin: 16rpx 8rpx;
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
color: #555555;
|
||
|
||
.commodity-info-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
|
||
.commodity-content {
|
||
width: 50%;
|
||
margin-left: 16rpx;
|
||
|
||
.commodity-name {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.commodity-barcode,
|
||
.commodity-specification {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.commodity-num {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.baling-charges-block {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
font-size: 24rpx;
|
||
border-bottom: 1px dashed #d7d7d7;
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.cost-info-block {
|
||
padding: 24rpx;
|
||
border-bottom: 1px dashed #d7d7d7;
|
||
font-size: 26rpx;
|
||
|
||
.cost-info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
|
||
.cost-info-num {
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.cost-info-income {
|
||
margin-top: 20rpx;
|
||
font-size: 26rpx;
|
||
text-align: right;
|
||
color: #7f7f7f;
|
||
}
|
||
}
|
||
|
||
.order-btn-block {
|
||
padding: 36rpx 24rpx 12rpx 24rpx;
|
||
.btn-list {
|
||
display: flex;
|
||
.btn-item {
|
||
margin: 0;
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
font-size: 24rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
}
|
||
|
||
.arrow-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: right;
|
||
margin-top: 40rpx;
|
||
font-size: 26rpx;
|
||
color: #7f7f7f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|