188 lines
4.3 KiB
Vue
188 lines
4.3 KiB
Vue
<script setup>
|
||
// 售后详情
|
||
import {
|
||
reactive
|
||
} from 'vue';
|
||
|
||
// 流程
|
||
const flow = reactive([{
|
||
name: '同意退款',
|
||
},
|
||
{
|
||
name: '平台处理中',
|
||
},
|
||
{
|
||
name: '到账成功',
|
||
}
|
||
])
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<view class="container">
|
||
<!-- 退款状态 -->
|
||
<view class="statusText mtb30 f48">退款成功</view>
|
||
<!-- 退款金额 -->
|
||
<view class="result mtb30">
|
||
<view class="refundPrice ">
|
||
<text class="f48">￥</text>
|
||
<text class="value">2</text>
|
||
</view>
|
||
<view class="c37B111">已退回至九亿钱包</view>
|
||
</view>
|
||
|
||
<!-- 退款流程 -->
|
||
<view class="flow mtb30">
|
||
<view class="item f1" v-for="(item,index) in flow" :key="index">
|
||
<view class="side">
|
||
<view class="line"></view>
|
||
<view class="circle mlr10 cir">
|
||
<view class="wh24 fmid" v-if="index == flow.length - 1">
|
||
<uni-icons type="checkmarkempty" color="#fff" />
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="main mt20 tac c999 f26">
|
||
<view class="name">{{item.name}}</view>
|
||
<view class="time mt10">10-10 15:27</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退款金额 -->
|
||
<view class="container info c999 f28">
|
||
<view class="title mtb20 c333 f32">钱款去向</view>
|
||
<view class="line rows mtb20">
|
||
<view class="key">九亿账号</view>
|
||
<view class="">12345665</view>
|
||
</view>
|
||
<view class="line rows mtb20">
|
||
<view class="key">支付方式</view>
|
||
<view class="">余额</view>
|
||
</view>
|
||
<view class="line rows mtb20">
|
||
<view class="key">退款账户</view>
|
||
<view class="">12345665</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="product container">
|
||
<view class="header line rows ptb20 f28">
|
||
<!-- 店铺 -->
|
||
<view class="store df aic thd f1">
|
||
<image class="wh50 br10"
|
||
src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
|
||
mode="aspectFill" />
|
||
<view class="name ml10 c333">家纺专营店</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="product line df ptb20">
|
||
<view class="poster wh160">
|
||
<image class="wh160 br10"
|
||
src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
|
||
mode="aspectFill" />
|
||
</view>
|
||
|
||
<!-- 产品名称 和 购买的规格 -->
|
||
<view class="info mlr20 f1">
|
||
<view class="name c333 f28">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>
|
||
<view class="spec mt10 c999 f26">款式：普通款 小熊</view>
|
||
</view>
|
||
|
||
<!-- 单价 数量 -->
|
||
<view class="tar">
|
||
<view class="price c666">
|
||
<text class="f20">￥</text>
|
||
<text class="f26">89</text>
|
||
</view>
|
||
<view class="number f24 c999">x 1</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="order mt30 f26 c999">
|
||
<view class="line mtb20 rows">
|
||
<text>订单编号：251547812138</text>
|
||
<view class="btn ti closeHollow plr20">复制</view>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>申请金额：￥2</text>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>退款原因：其他原因</text>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>收货状态：已收货</text>
|
||
</view>
|
||
<view class="line mtb20">
|
||
<text>申请时间：2024-12-15 17:00</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 填充 -->
|
||
<view class="fill" style="height: 150rpx;"></view>
|
||
|
||
<!-- -->
|
||
<view class="footer df jcr plr30 bfff shadow">
|
||
<view class="btn sm bar closeHollow plr20">联系商家</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
//
|
||
.container {
|
||
overflow: hidden;
|
||
margin: 20rpx 0;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
color: #333;
|
||
background-color: #fff;
|
||
}
|
||
|
||
//
|
||
.refundPrice {
|
||
.value {
|
||
font-size: 72rpx;
|
||
}
|
||
}
|
||
|
||
// 退款流程
|
||
.flow {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.item {
|
||
.side {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 40rpx;
|
||
|
||
.line {
|
||
flex: 1;
|
||
border-top: 4rpx solid #37B111;
|
||
}
|
||
|
||
.circle {
|
||
padding: 10rpx;
|
||
background-color: #37B111;
|
||
}
|
||
}
|
||
|
||
//
|
||
&:nth-child(1) .line:nth-child(1) {
|
||
opacity: 0;
|
||
}
|
||
|
||
//
|
||
&:nth-last-child(1) .line:nth-last-child(1) {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |