Skip to content

G
groupPurchase-miniapp
Commit ebb1cd19 authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

物流订单详情

parent 62c70bb4
Show whitespace changes
Inline Side-by-side
Showing with 503 additions and 12 deletions
src/pages/assistingAgriculture/order/components/stepBar/index.vue 0 → 100644
View file @ ebb1cd19
<template>
<wd-popup
v-model="show"
position="bottom"
:safe-area-inset-bottom="true"
custom-style="border-radius: 16rpx 16rpx 0 0; height: 80vh"
@close="show = false"
lockScroll
>
<view class="content">
<view class="header">
<view class="rowbox">
<view class="title">快递详情</view>
<wd-icon name="close" size="10" color="#333" @tap="close"></wd-icon>
</view>
<view class="top">
<view class="left">
<image class="logo" src="/static/ticket/logo.png" mode="aspectFill"></image>
<text>中通快递78810259271088</text>
</view>
<view class="right">
<text>复制</text>
<text>丨</text>
<text>打电话</text>
</view>
</view>
</view>
</view>
<view class="steps">
<wd-steps :active="1" vertical>
<wd-step>
<template #icon>
<view class="dot-red"></view>
</template>
<template #title>
<view class="titlebox">
<text class="title red-title">待取件</text>
<text class="time red">06-25 17:37</text>
</view>
</template>
<template #description>
<view class="desc">您购买的包裹已暂存至贵阳市市政公园菜鸟驿站， 请凭取件码取件。</view>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox">
<text class="title">派送中</text>
<text class="time">06-25 09:05</text>
</view>
</template>
<template #description>
<rich-text class="desc1" :nodes="detail"></rich-text>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox">
<text class="title">运输中</text>
<text class="time">06-25 05:15</text>
</view>
</template>
<template #description>
<text class="desc2">【贵阳市】快件已到达 贵阳小河二部</text>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox">
<text class="time">06-20 01:25</text>
</view>
</template>
<template #description>
<text class="desc2">【黔南布依族苗族自治州】快件已发往 贵阳小河二部</text>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot"></view>
</template>
<template #title>
<view class="titlebox" @tap="close">
<text class="time">收起更多物流</text>
<wd-icon name="chevron-up" size="28rpx" color="#999"></wd-icon>
</view>
</template>
</wd-step>
</wd-steps>
</view>
<view class="bottom">
<view class="b-icon">收</view>
<view class="right">
<text class="title">送至 贵阳市市政公园正门菜鸟驿站</text>
<view class="rowbox">
<text class="text1">李先生 +86-187****4253</text>
<text class="text">隐藏保护中</text>
</view>
</view>
</view>
</wd-popup>
</template>
<script setup>
const show = ref(false);
// 正则表达式匹配电话号码
const phoneRegex = /\b(\d{3,4}-\d{7,8}|\d{11})\b/g;
const highlightedText = (val) => {
return val.replace(phoneRegex, '<span class="highlight">$1</span>');
};
const detail = ref(
'【贵阳市】贵阳小河二部的业务员【文凯凯， 18784286692】正在为您派件（95720为中通快递员外呼专属号码，请放心接听，如有问题可联系网点：0851-83876676，投诉电话：0851-83876678）',
);
const open = () => {
detail.value = highlightedText(detail.value);
show.value = true;
};
const close = () => {
show.value = false;
};
defineExpose({
open,
close,
});
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
.header {
display: flex;
flex-direction: column;
border-bottom: 1px solid #ededed;
padding: 20rpx 30rpx 33rpx;
gap: 26rpx;
.rowbox {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
text-align: center;
width: 100%;
}
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
gap: 16rpx;
.logo {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
}
text {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
.right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16rpx;
text {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
}
}
}
}
}
.steps {
padding: 28rpx 30rpx;
&:deep(.wd-step__icon.is-icon) {
display: flex;
align-items: center;
justify-content: center;
width: 30rpx;
height: 30rpx;
top: 8rpx;
}
&:deep(.wd-step.is-vertical .wd-step__line) {
top: 16rpx;
}
.dot {
width: 30rpx;
height: 27rpx;
border-radius: 50%;
border: 2rpx solid #c9c9c9;
}
.dot-red {
background-color: #f12a2a;
width: 30rpx;
height: 30rpx;
border-radius: 50%;
}
.titlebox {
display: flex;
flex-direction: row;
align-items: center;
gap: 33rpx;
text {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #999999;
}
.title {
font-size: 32rpx;
}
.red-title {
color: #ff0909;
font-weight: bold;
}
.red {
color: #ff0909;
}
}
.desc {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #333333;
line-height: 34rpx;
}
.desc1 {
font-family:
PingFang SC,
PingFang SC;
font-size: 24rpx;
color: #999999;
}
.desc2 {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #999999;
}
.highlight {
color: #ff0909;
}
}
.bottom {
display: flex;
gap: 18rpx;
padding: 0rpx 30rpx 33rpx;
.b-icon {
font-family:
PingFang SC,
PingFang SC;
font-size: 24rpx;
color: #ff0909;
border: 1rpx solid #ff0909;
border-radius: 50%;
width: 34rpx;
height: 34rpx;
text-align: center;
}
.right {
width: 100%;
display: flex;
flex-direction: column;
gap: 6rpx;
.title {
font-family:
PingFang SC,
PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.rowbox {
display: flex;
justify-content: space-between;
align-items: center;
.textbox {
display: flex;
flex-direction: row;
gap: 30rpx;
align-items: center;
}
.title {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #ff0909;
}
.text {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #ff0909;
}
.detail {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #ff0909;
}
.text1 {
font-family: PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
}
}
</style>
src/pages/assistingAgriculture/order/detail.vue
View file @ ebb1cd19
<template>
<view class="container">
<Header title="商品详情页"></Header>
<view style="height: 600rpx; background-color: aquamarine"></view>
<web-view
style="height: 600rpx"
src="https://api.kuaidi100.com/tools/map/59d4a57b7964ebd6fc1d831847cb61c9_106.714305,26.568055_6"
></web-view>
<!-- <view style="height: 600rpx; background-color: aquamarine"></view> -->
<view class="content">
<view class="info">
<view class="top">
......@@ -27,17 +31,31 @@
<text class="title">待取件</text>
<text class="text">06-25 17:37</text>
</view>
<text class="detail">详细信息 ></text>
<text class="detail" @tap="openPop()">详细信息 ></text>
</view>
<view class="detailbox">
<text class="text">
【贵阳市】您的快递已签收。如有疑问请联系业务员：
18275185576，代理点电话：18275185576，投诉电
话：0851-88628778。感谢使用中通快递，期待再次 为您服务！
</text>
<!-- <view class="infobox">
<text class="addr">请问本次收件是否遇到问题？</text>
<view class="row">
<view class="btn">有问题，去解决</view>
<view class="btn">去评价</view>
</view>
</view> -->
<view class="infobox">
<text class="addr">贵阳市市政公园菜鸟驿站店</text>
<view class="row">
<view class="column">
<text class="text">取件码</text>
<text class="code">2-7-4109</text>
</view>
</view>
</view>
</view>
</view>
<view class="step-box">
<view class="header">
<view class="past-dot"></view>
......@@ -79,7 +97,7 @@
<text class="num">x1</text>
</view>
</view>
<view class="product-item">
<view class="product-item" v-if="showMore">
<view class="left">
<image src="/static/ticket/logo.png" class="img" mode="aspectFill"></image>
<view class="infobox">
......@@ -96,7 +114,7 @@
</view>
</view>
</view>
<view class="totalbox">
<view class="totalbox totalbox-line" v-if="showMore">
<view class="total-item">
<text>商品总价：</text>
<text>￥98.70</text>
......@@ -119,7 +137,7 @@
</view>
</view>
</view>
<view class="totalbox">
<view class="totalbox" v-if="showMore">
<text class="title">订单信息</text>
<view class="total-item">
<text>订单号：</text>
......@@ -138,13 +156,40 @@
<text>微信</text>
</view>
</view>
<view class="more" @tap="changeShowMore">
<text v-if="showMore">收起订单信息</text>
<text v-else>查看全部订单信息</text>
<wd-icon
:name="showMore ? 'chevron-up' : 'chevron-down'"
size="30rpx"
color="#999"
></wd-icon>
</view>
</view>
<view style="height: 170rpx"></view>
</view>
<view class="footer">
<view class="btn">查看物流</view>
<view class="btn">申请售后</view>
<view class="btn err">确认收货</view>
</view>
</view>
<stepBar ref="stepBarRef"></stepBar>
</template>
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import stepBar from '@/pages/assistingAgriculture/order/components/stepBar/index.vue';
const showMore = ref(false);
const changeShowMore = () => {
showMore.value = !showMore.value;
};
const stepBarRef = ref(null);
const openPop = () => {
stepBarRef.value.open();
};
</script>
<style lang="scss" scoped>
......@@ -152,6 +197,10 @@ page {
background: #f3f3f3;
}
::v-deep uni-web-view.uni-webview--fullscreen {
position: relative;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
......@@ -160,6 +209,7 @@ page {
position: relative;
top: -20rpx;
border-radius: 20rpx 20rpx 0 0;
z-index: 10;
.info {
background-color: #fff;
......@@ -305,6 +355,18 @@ page {
}
}
.detailbox {
display: flex;
flex-direction: column;
gap: 22rpx;
.text {
font-family: PingFang SC;
font-size: 24rpx;
color: #999999;
line-height: 28rpx;
}
.infobox {
display: flex;
flex-direction: column;
......@@ -322,6 +384,24 @@ page {
}
.row {
display: flex;
align-items: center;
gap: 16rpx;
.btn {
font-family:
PingFang SC,
PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
border: 1rpx solid #d2d2d2;
border-radius: 32rpx;
padding: 12rpx 32rpx;
}
}
.column {
display: flex;
align-items: center;
gap: 28rpx;
......@@ -343,6 +423,7 @@ page {
}
}
}
}
.product {
display: flex;
......@@ -465,8 +546,7 @@ page {
flex-direction: column;
gap: 28rpx;
margin-top: 40rpx;
padding: 0 30rpx;
border-bottom: 1rpx solid #ededed;
padding: 0 30rpx 30rpx;
.title {
font-family:
......@@ -525,10 +605,55 @@ page {
}
}
.totalbox:last-child {
border-bottom: none;
.totalbox-line {
border-bottom: 1rpx solid #ededed;
}
.more {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
text {
font-family:
PingFang SC,
PingFang SC;
font-size: 26rpx;
color: #999999;
}
}
}
}
.footer {
position: fixed;
bottom: 0;
background-color: #fff;
width: 100%;
z-index: 10;
display: flex;
justify-content: flex-end;
gap: 16rpx;
padding: 18rpx 28rpx 88rpx;
box-sizing: border-box;
.btn {
font-family:
PingFang SC,
PingFang SC;
font-size: 28rpx;
color: #333333;
border-radius: 32rpx;
border: 1rpx solid #cccccc;
padding: 12rpx 24rpx;
}
.err {
color: #ff0909;
border-radius: 32rpx;
border: 1rpx solid #ff0909;
}
}
}
</style>
src/pages/ticket/detail.vue
View file @ ebb1cd19
......@@ -13,8 +13,9 @@
<wd-rate
custom-class="icon-statr"
v-model="shopDetail.grade"
size="13px"
space="1px"
size="26rpx"
space="2rpx"
readonly
active-color="#f12929"
/>
<text class="rate">{{ shopDetail.grade }}</text>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment