Skip to content

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

新增物流售后页面

parent ba9d0225
Show whitespace changes
Inline Side-by-side
Showing with 405 additions and 0 deletions
src/pages.json
View file @ cb9c41f1
......@@ -263,6 +263,12 @@
"navigationBarTitleText": "评论",
"enablePullDownRefresh": true
}
},
{
"path": "pages/assistingAgriculture/order/afterSales",
"style": {
"navigationBarTitleText": "售后详情"
}
}
],
"globalStyle": {
......
src/pages/assistingAgriculture/order/afterSales.vue 0 → 100644
View file @ cb9c41f1
<template>
<Search title="售后详情" backgroundBox="white" :showTitle="true"></Search>
<view class="container">
<view class="content">
<view class="headbox">
<view class="h-between">
<text>退款金额</text>
<text>￥198.00</text>
</view>
<text class="detail">申请通过后退回原账户</text>
</view>
<view class="steps">
<wd-steps vertical>
<wd-step>
<template #icon>
<view class="dot-red">
<wd-icon name="check" size="22rpx" color="#fff"></wd-icon>
</view>
</template>
<template #title>
<view class="titlebox">
<text class="title">申请售后</text>
</view>
</template>
<template #description>
<view class="descbox">
<text class="desc">售后申请已提交</text>
<text class="desc">2024-08-14 14:47:30</text>
</view>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot-red">
<wd-icon name="check" size="22rpx" color="#fff"></wd-icon>
</view>
</template>
<template #title>
<view class="titlebox">
<text class="title t-red">请等待商家处理</text>
<view class="timebox">
<text class="time">剩余：</text>
<wd-count-down :time="time" />
</view>
</view>
</template>
<template #description>
<view class="descbox">
<text class="desc">
您已成功发起售后申请，请耐心等待商家处理。
如果商家拒绝，您可以修改售后申请后再次发起，商家会 重新处理。
</text>
</view>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot-red">
<wd-icon name="check" size="22rpx" color="#fff"></wd-icon>
</view>
</template>
<template #title>
<view class="titlebox">
<text class="title">请输入退货商品运单编号</text>
</view>
</template>
<template #description>
<view class="inputbox">
<input
class="text"
type="text"
placeholder="请输入退货商品运单编号"
placeholder-style="font-size:24rpx;"
/>
<view class="btn">提交</view>
</view>
</template>
</wd-step>
<wd-step>
<template #icon>
<view class="dot-red">
<wd-icon name="close" size="22rpx" color="#fff"></wd-icon>
</view>
</template>
<template #title>
<view class="titlebox">
<text class="title">已取消</text>
</view>
</template>
<template #description>
<view class="descbox">
<text class="desc">2024-08-14 14:47:30</text>
</view>
</template>
</wd-step>
</wd-steps>
</view>
<view class="info">
<text class="title">售后信息</text>
<view class="infobox">
<image src="@/static/ticket/logo.png" mode="aspectFill" class="img"></image>
<view class="right">
<text>
商品名称商品名称商品名称商品名 商品名称商品名称商品名称商品名 商品名称商品名称
</text>
<text class="num">x1</text>
</view>
</view>
<view class="reasonbox">
<view class="r-between">
<text class="title">申请时间：</text>
<text class="detail">2024-08-14 14:50:35</text>
</view>
<view class="r-between">
<text class="title">售后原因：</text>
<text class="detail">这是售后原因最多好像只有这么多字就得隐藏了</text>
</view>
<view class="r-between">
<text class="title">订单号：</text>
<text class="detail">14171819161415723312454</text>
</view>
</view>
</view>
<view style="height: 160rpx"></view>
</view>
<view class="footer">
<view class="btn">撤销申请</view>
<view class="btn-warning">修改申请</view>
</view>
</view>
</template>
<script setup>
const time = ref(30 * 60 * 60 * 1000);
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
.content {
display: flex;
flex-direction: column;
padding: 10rpx 20rpx;
gap: 10rpx;
.headbox {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 16rpx;
padding: 40rpx 40rpx 40rpx 28rpx;
gap: 10rpx;
.h-between {
display: flex;
justify-content: space-between;
align-items: center;
text {
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 32rpx;
color: #3d3d3d;
}
}
.detail {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 24rpx;
color: #abaaaa;
}
}
.steps {
background-color: #fff;
border-radius: 16rpx;
padding: 40rpx 40rpx 0;
:deep(.wd-step__line) {
background-color: #fa5151;
left: 32%;
}
.dot-red {
height: 40rpx;
width: 40rpx;
border-radius: 50%;
background-color: #fa5151;
display: flex;
align-items: center;
justify-content: center;
}
.titlebox {
display: flex;
align-items: center;
gap: 20rpx;
.title {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 28rpx;
color: #3d3d3d;
}
.t-red {
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 30rpx;
color: #fa5151;
}
.timebox {
display: flex;
align-items: center;
.wd-count-down {
color: #ff0909;
font-size: 24rpx;
}
.time {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 24rpx;
color: #fa5151;
}
}
}
.descbox {
display: flex;
flex-direction: column;
gap: 20rpx;
.desc {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 22rpx;
color: #abaaaa;
line-height: 30rpx;
}
}
.inputbox {
display: flex;
align-items: center;
position: relative;
.text {
margin-left: 10rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
background-color: #f3f3f3;
padding: 16rpx 20rpx;
width: 100%;
color: #000;
}
.btn {
background-color: #fa5151;
color: #fff;
border-radius: 6rpx;
padding: 14rpx 28rpx;
text-align: center;
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 24rpx;
position: absolute;
right: 2rpx;
}
}
}
.info {
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 16rpx;
padding: 20rpx;
gap: 20rpx;
.title {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 36rpx;
color: #3d3d3d;
}
.infobox {
display: flex;
gap: 20rpx;
.img {
width: 216rpx;
height: 216rpx;
border-radius: 10rpx;
}
.right {
display: flex;
flex-direction: column;
gap: 20rpx;
text {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 28rpx;
color: #3d3d3d;
line-height: 36rpx;
max-width: 420rpx;
}
.num {
color: #abaaaa;
line-height: 28rpx;
}
}
}
.reasonbox {
display: flex;
flex-direction: column;
gap: 20rpx;
.r-between {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 24rpx;
color: #abaaaa;
}
.detail {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 24rpx;
color: #3d3d3d;
max-width: 474rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.footer {
position: fixed;
bottom: 0;
background-color: #fff;
width: 100%;
z-index: 10;
display: flex;
justify-content: flex-end;
gap: 20rpx;
padding: 20rpx 38rpx 60rpx;
box-sizing: border-box;
.btn {
border-radius: 40rpx;
color: #908f8f;
font-size: 28rpx;
text-align: center;
padding: 22rpx 72rpx;
border: 2rpx solid #908f8f;
}
.btn-warning {
background-color: #ff8f1f;
border-radius: 40rpx;
color: #fff;
font-size: 28rpx;
font-size: 28rpx;
text-align: center;
padding: 22rpx 72rpx;
}
}
}
</style>
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