parent
63bff7b0d1
commit
acc4e2a4d2
@ -0,0 +1,143 @@ |
|||||||
|
<template> |
||||||
|
<view class="fright"> |
||||||
|
<view class="fright-hd"> |
||||||
|
<view class="a"> |
||||||
|
<view class="title">退货运费</view> |
||||||
|
<view class="desc"> |
||||||
|
平台秉承“谁过错,谁承担”的原则。如商品存在质量问题、发错货等情况,退货运费由商家承担。 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="title">商家责任</view> |
||||||
|
<view class="desc">无需消费者承担退货运费。您需向商家发起退货退款/换货申请,商家同意申请后,寄件时请您先垫付运费。退货/换货完成后,审核通过将自动打款运费给您。 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="title">非商家责任</view> |
||||||
|
<view class="desc">消费者承担退货运费。 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="fright-bd"> |
||||||
|
<image class="icon" src="/static/home/phone.jpg"></image> |
||||||
|
<view class="info"> |
||||||
|
<view class="a">我要退货退款我要退货退款我要退货退款我要退货退款我要退货退款</view> |
||||||
|
<view class="b">已收货</view> |
||||||
|
</view> |
||||||
|
<view class="btn">申请售后</view> |
||||||
|
</view> |
||||||
|
<view class="fright-fd"> |
||||||
|
运费常见问题<image class="arrow" src="/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.fright{ |
||||||
|
overflow: hidden; |
||||||
|
.arrow{ |
||||||
|
width: 30rpx; |
||||||
|
height: 30rpx; |
||||||
|
} |
||||||
|
&-hd{ |
||||||
|
padding: 40rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-top: 20rpx; |
||||||
|
background: linear-gradient(180deg, #FFE0E0 0%, #FFFFFF 100%); |
||||||
|
border-radius: 0px 0px 0px 0px; |
||||||
|
.a{ |
||||||
|
overflow: hidden; |
||||||
|
.title{ |
||||||
|
font-size: 36rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #F55349; |
||||||
|
line-height: 42rpx; |
||||||
|
} |
||||||
|
.desc{ |
||||||
|
padding: 30rpx 0; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #212121; |
||||||
|
line-height: 50rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
overflow: hidden; |
||||||
|
.title{ |
||||||
|
font-size: 36rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #212121; |
||||||
|
line-height: 42rpx; |
||||||
|
} |
||||||
|
.desc{ |
||||||
|
padding: 30rpx 0; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #212121; |
||||||
|
line-height: 50rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-bd{ |
||||||
|
padding: 40rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-top: 20rpx; |
||||||
|
.icon{ |
||||||
|
width: 135rpx; |
||||||
|
height: 132rpx; |
||||||
|
margin-right: 30rpx; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
.info{ |
||||||
|
flex: 1; |
||||||
|
.a{ |
||||||
|
font-size: 30rpx; |
||||||
|
color: #212121; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
max-width: 300rpx; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
font-size: 26rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
color: #F55349; |
||||||
|
} |
||||||
|
} |
||||||
|
.btn{ |
||||||
|
padding: 0 20rpx; |
||||||
|
line-height: 70rpx; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 12rpx; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
padding: 40rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #212121; |
||||||
|
background-color: #FFFFFF; |
||||||
|
margin-top: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,428 @@ |
|||||||
|
<template> |
||||||
|
<view class="invoice"> |
||||||
|
<view class="invoice-goods"> |
||||||
|
<view class="a"> |
||||||
|
<image src="/static/home/phone.jpg"></image> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="l">产品名称iPhone13</view> |
||||||
|
<view class="r">【配置套餐】<text>x1</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-info"> |
||||||
|
<view class="b"> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">申请类型:</view> |
||||||
|
<view class="r"> |
||||||
|
我要退货退款 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="l">申请原因:</view> |
||||||
|
<view class="r"> |
||||||
|
<picker :value="index1" :range="array1" @change="bindPickerChange1"> |
||||||
|
<view class="lx" :class="index1==-1?'lx-on':''">{{index1==-1?'点击选择申请原因':array[index1]}}</view> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-money"> |
||||||
|
<view class="a">申请金额</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="l">¥ |
||||||
|
<view class="money" v-if="toggleIndex">{{value}}</view> |
||||||
|
<input type="number" :focus="true" v-model="value" v-else placeholder-class="box" placeholder="请输入金额" /> |
||||||
|
</view> |
||||||
|
<view class="r" @click="toggleItem()"> |
||||||
|
<image src="@/static/news/icon-edit.png"></image> |
||||||
|
修改金额</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-remark"> |
||||||
|
<view class="a"> |
||||||
|
<view class="l">申请说明<text>(必填)</text></view> |
||||||
|
<view class="r">您还可以输入{{value?(200-value.length):200}}字</view> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<u-input v-model="value" maxlength="200" type="textarea" :height="height" placeholder="请您详细填写申请说明" /> |
||||||
|
</view> |
||||||
|
<view class="c"> |
||||||
|
<u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5"> |
||||||
|
<template v-slot:addBtn> |
||||||
|
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
||||||
|
<image src="/static/news/icon-upload.png"></image> |
||||||
|
<view class="1">上传图片</view> |
||||||
|
<view class="1">最多5张</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
</u-upload> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="invoice-phone"> |
||||||
|
联系电话<input type="number" placeholder=""/> |
||||||
|
</view> |
||||||
|
<view class="invoice-fd" @click="toDetail()"> |
||||||
|
提交申请 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
height: 150, |
||||||
|
fileList: [ |
||||||
|
{ |
||||||
|
url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg', |
||||||
|
} |
||||||
|
], |
||||||
|
value: "1235", |
||||||
|
content: "确认您的发票信息无误后再提交", |
||||||
|
show: true, |
||||||
|
toggleIndex: true, |
||||||
|
index: -1, |
||||||
|
array: ['已收到货','未收到货'], |
||||||
|
index1: -1, |
||||||
|
array1: ['不喜欢、效果不好','不想要了',"外观、型号、参数与描述不符",'货物与描述不符','商品有划痕或破损','配件、部件、屏幕问题','质量问题','收到商品少件(含少配件)','商品破损或污渍','商家发错货'], |
||||||
|
tabIndex: 2 |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
onClose() {}, |
||||||
|
tabItem(i){ |
||||||
|
this.tabIndex = i; |
||||||
|
}, |
||||||
|
toggleItem(i){ |
||||||
|
this.toggleIndex = !this.toggleIndex; |
||||||
|
}, |
||||||
|
toDetail(i){ |
||||||
|
uni.navigateTo({ |
||||||
|
url: "/pages/order/refund/refundDetail1" |
||||||
|
}) |
||||||
|
}, |
||||||
|
bindPickerChange(e){ |
||||||
|
this.index = e.detail.value |
||||||
|
}, |
||||||
|
bindPickerChange1(e){ |
||||||
|
this.index1 = e.detail.value |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.invoice{ |
||||||
|
&-goods{ |
||||||
|
padding: 0 20rpx 0 40rpx; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
padding: 30rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.a{ |
||||||
|
width: 145rpx; |
||||||
|
height: 135rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
image{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
.l{ |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 30rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 20rpx; |
||||||
|
text{ |
||||||
|
display: block; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-info{ |
||||||
|
margin-top: 20rpx; |
||||||
|
background-color: #fff; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 20rpx 30rpx 20rpx 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
border-bottom: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
text{ |
||||||
|
color: #006AFF; |
||||||
|
padding-right: 40rpx; |
||||||
|
position: relative; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #006AFF; |
||||||
|
border-left: 1px solid #006AFF; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
padding: 0 30rpx 0 45rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
.item{ |
||||||
|
padding: 30rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
border-top: 1px solid #F3F3F3; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
overflow: hidden; |
||||||
|
&:first-child{ |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
.l{ |
||||||
|
width: 180rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #656565; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
.li{ |
||||||
|
width: 150rpx; |
||||||
|
height: 78rpx; |
||||||
|
background: #F3F3F3; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
line-height: 78rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #262626; |
||||||
|
margin-right: 12rpx; |
||||||
|
&-on{ |
||||||
|
background: #FDF4F4; |
||||||
|
background: url(/static/invoice/select-active.png) center top no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
} |
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
picker{ |
||||||
|
flex: 1; |
||||||
|
.tt{ |
||||||
|
width: 180rpx; |
||||||
|
position: relative; |
||||||
|
color: #4894FF; |
||||||
|
text-align: right; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #4894FF; |
||||||
|
border-left: 1px solid #4894FF; |
||||||
|
position: absolute; |
||||||
|
right: -50rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
.lx{ |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
&-on{ |
||||||
|
color: #B8B8B8; |
||||||
|
} |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-top: 1px solid #B8B8B8; |
||||||
|
border-left: 1px solid #B8B8B8; |
||||||
|
position: absolute; |
||||||
|
right: 20rpx; |
||||||
|
top: 14rpx; |
||||||
|
z-index: 1; |
||||||
|
transform: rotate(135deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
width: 664rpx; |
||||||
|
height: 104rpx; |
||||||
|
background: #F55349; |
||||||
|
border-radius: 8rpx; |
||||||
|
text-align: center; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 60rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #FFFFFF; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
&-money{ |
||||||
|
width: 100%; |
||||||
|
background: #FFFFFF; |
||||||
|
margin-top: 20rpx; |
||||||
|
padding: 26rpx 26rpx 26rpx 48rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
padding-bottom: 10rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.l{ |
||||||
|
font-size: 40rpx; |
||||||
|
font-weight: 600; |
||||||
|
color: #262626; |
||||||
|
display: flex; |
||||||
|
align-items: baseline; |
||||||
|
input,.money{ |
||||||
|
width: 400rpx; |
||||||
|
font-size: 52rpx; |
||||||
|
color: #212121; |
||||||
|
margin-left: 15rpx; |
||||||
|
} |
||||||
|
.box{ |
||||||
|
font-size: 26rpx; |
||||||
|
color: #B8B8B8; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #C2C2C2; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
image{ |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
margin-right: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-remark{ |
||||||
|
width: 100%; |
||||||
|
background: #FFFFFF; |
||||||
|
overflow: hidden; |
||||||
|
margin-top: 20rpx; |
||||||
|
padding: 26rpx 26rpx 26rpx 48rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 15rpx 0; |
||||||
|
.l{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
color: #838383; |
||||||
|
text{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #F55349; |
||||||
|
} |
||||||
|
} |
||||||
|
.r{ |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #A8A8A8; |
||||||
|
} |
||||||
|
} |
||||||
|
.c{ |
||||||
|
padding-bottom: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
.slot-btn{ |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 10rpx; |
||||||
|
border: 1px solid #C0C0C0; |
||||||
|
text-align: center; |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #D1D1D1; |
||||||
|
image{ |
||||||
|
width: 50rpx; |
||||||
|
height: 50rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-phone{ |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
padding: 30rpx 26rpx 30rpx 48rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-top: 20rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #838383; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
input { |
||||||
|
flex: 1; |
||||||
|
margin-left: 20rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #212121; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,265 @@ |
|||||||
|
<template> |
||||||
|
<view class="refund"> |
||||||
|
<view class="refund-navbar"> |
||||||
|
<u-navbar title="退货退款详情" :background="background"></u-navbar> |
||||||
|
</view> |
||||||
|
<view class="refund-hd"> |
||||||
|
<view class="l"> |
||||||
|
<view class="a">退款成功</view> |
||||||
|
<view class="b"> |
||||||
|
<text>¥3323</text>已退到农行信用卡3949 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="r"> |
||||||
|
<image src="@/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="refund-bd"> |
||||||
|
<view class="li" :class="currentIndex >= 0?'li-on':''"> |
||||||
|
<view class="line"> |
||||||
|
<image v-if="currentIndex >= 0" class="icon" src="@/static/news/icon-success.png"></image> |
||||||
|
<view v-else class="clicle">●</view> |
||||||
|
</view> |
||||||
|
<view class="title">同意退款</view> |
||||||
|
<view class="timer">12-1 19:22</view> |
||||||
|
</view> |
||||||
|
<view class="li" :class="currentIndex >= 1?'li-on':''"> |
||||||
|
<view class="line"> |
||||||
|
<image v-if="currentIndex >= 1" class="icon" src="@/static/news/icon-success.png"></image> |
||||||
|
<view v-else class="clicle">●</view> |
||||||
|
</view> |
||||||
|
<view class="title">微信支付处理中</view> |
||||||
|
<view class="timer">12-1 19:22</view> |
||||||
|
</view> |
||||||
|
<view class="li" :class="currentIndex >= 2?'li-on':''"> |
||||||
|
<view class="line"> |
||||||
|
<image v-if="currentIndex >= 2" class="icon" src="@/static/news/icon-success.png"></image> |
||||||
|
<view v-else class="clicle">●</view> |
||||||
|
</view> |
||||||
|
<view class="title">退款成功</view> |
||||||
|
<view class="timer">12-1 19:22</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="refund-box"> |
||||||
|
<view class="a"> |
||||||
|
退货物流 |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
顺丰快递 SF234568990 |
||||||
|
</view> |
||||||
|
<view class="c"> |
||||||
|
<image src="@/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="refund-box"> |
||||||
|
<view class="a"> |
||||||
|
协商记录 |
||||||
|
</view> |
||||||
|
<view class="c"> |
||||||
|
<image src="@/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="refund-fd"> |
||||||
|
<view class="a"> |
||||||
|
协商记录 |
||||||
|
<view class="more"> |
||||||
|
查看全部<image src="@/static/news/icon-arrow.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="li">问:退款什么时候到账,退到哪里?</view> |
||||||
|
<view class="li">问:如何查询退款到账信息?</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import img from "@/static/news/refund-bg.png" |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
currentIndex: 0, |
||||||
|
background: { |
||||||
|
background: 'url('+ img+') center -44px no-repeat', |
||||||
|
backgroundSize: '100%', |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.refund{ |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; |
||||||
|
&-hd{ |
||||||
|
height: 206rpx; |
||||||
|
background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 0 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
.l{ |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
display: flex; |
||||||
|
align-items: baseline; |
||||||
|
margin-top: 30rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #4F4F4F; |
||||||
|
text{ |
||||||
|
font-size: 53rpx; |
||||||
|
margin-right: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.r{ |
||||||
|
image{ |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-bd{ |
||||||
|
background-color: #FFFFFF; |
||||||
|
padding: 35rpx 40rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
.li{ |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
text-align: center; |
||||||
|
.line{ |
||||||
|
display: flex; |
||||||
|
height: 50rpx; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
position: relative; |
||||||
|
&::after{ |
||||||
|
content: ""; |
||||||
|
width: 160rpx; |
||||||
|
height: 4rpx; |
||||||
|
background: #000; |
||||||
|
position: absolute; |
||||||
|
left: -80rpx; |
||||||
|
top: 50%; |
||||||
|
margin-top: 0rpx; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
} |
||||||
|
&-on{ |
||||||
|
.line::after{ |
||||||
|
content: ""; |
||||||
|
width: 160rpx; |
||||||
|
height: 4rpx; |
||||||
|
background: #3BC020; |
||||||
|
position: absolute; |
||||||
|
left: -80rpx; |
||||||
|
top: 50%; |
||||||
|
margin-top: 0rpx; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
.clicle{ |
||||||
|
color: #3BC020; |
||||||
|
} |
||||||
|
} |
||||||
|
&:first-child{ |
||||||
|
.line::after{ |
||||||
|
content: ""; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
.clicle{ |
||||||
|
color: #212121; |
||||||
|
} |
||||||
|
.icon{ |
||||||
|
width: 30rpx; |
||||||
|
height: 30rpx; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #4F4F4F; |
||||||
|
margin-top: 20rpx; |
||||||
|
} |
||||||
|
.timer{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #959595; |
||||||
|
margin-top: 20rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-box{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
background-color: #FFFFFF; |
||||||
|
padding: 35rpx 40rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
.a{ |
||||||
|
flex: 1; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #292929; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #484848; |
||||||
|
} |
||||||
|
.c{ |
||||||
|
flex: 1; |
||||||
|
text-align: right; |
||||||
|
image{ |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
background-color: #FFFFFF; |
||||||
|
padding: 35rpx 40rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
.a{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #212122; |
||||||
|
.more{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #959595; |
||||||
|
image{ |
||||||
|
width: 30rpx; |
||||||
|
height: 30rpx; |
||||||
|
margin-left: 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.b{ |
||||||
|
margin-top: 20rpx; |
||||||
|
overflow: hidden; |
||||||
|
.li{ |
||||||
|
line-height: 50rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
color: #959595; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,165 @@ |
|||||||
|
<template> |
||||||
|
<view class="refund"> |
||||||
|
<view class="refund-navbar"> |
||||||
|
<u-navbar title="退货退款详情" :background="background"></u-navbar> |
||||||
|
</view> |
||||||
|
<view class="refund-hd"> |
||||||
|
<view class="l"> |
||||||
|
<view class="a">商家已同意退货/退款申请</view> |
||||||
|
<view class="b"> |
||||||
|
剩余:<u-count-down :timestamp="timestamp" format="DD天HH时mm分ss秒"></u-count-down> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="r"> |
||||||
|
<image src="@/static/news/refund-01.png"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="refund-bd"> |
||||||
|
<view class="a">卖家已同意退货申请,请尽早发货</view> |
||||||
|
<view class="b"> |
||||||
|
<view class="l">退货说明:</view> |
||||||
|
<view class="r"><text>●</text>未与商家协商一致请勿平邮或到付。</view> |
||||||
|
<view class="r"><text>●</text>我是退货说明。</view> |
||||||
|
</view> |
||||||
|
<view class="c"> |
||||||
|
<view class="btn">撤销申请</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="refund-fd"> |
||||||
|
<view class="l"> |
||||||
|
<view class="a">退款原因</view> |
||||||
|
<view class="b">不喜欢,效果不好</view> |
||||||
|
</view> |
||||||
|
<view class="l"> |
||||||
|
<view class="a">退款金额</view> |
||||||
|
<view class="b">¥3323</view> |
||||||
|
</view> |
||||||
|
<view class="l"> |
||||||
|
<view class="a">退款时间</view> |
||||||
|
<view class="b">2023-12-12 18:30</view> |
||||||
|
</view> |
||||||
|
<view class="l"> |
||||||
|
<view class="a">退款编号</view> |
||||||
|
<view class="b">3880404038400808408</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import img from "@/static/news/refund-bg.png" |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
timestamp: 24*3600*1000, |
||||||
|
background: { |
||||||
|
background: 'url('+ img+') center -44px no-repeat', |
||||||
|
backgroundSize: '100%', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.refund{ |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; |
||||||
|
&-hd{ |
||||||
|
height: 206rpx; |
||||||
|
background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 0 60rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
.l{ |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
.a{ |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 30rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #F55349; |
||||||
|
} |
||||||
|
} |
||||||
|
.r{ |
||||||
|
margin-left: 100rpx; |
||||||
|
overflow: hidden; |
||||||
|
image{ |
||||||
|
width: 114rpx; |
||||||
|
height: 129rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-bd{ |
||||||
|
background-color: #FFFFFF; |
||||||
|
padding: 35rpx 60rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
.a{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #262626; |
||||||
|
} |
||||||
|
.b{ |
||||||
|
margin-top: 20rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
.l{ |
||||||
|
font-weight: 400; |
||||||
|
line-height: 60rpx; |
||||||
|
color: #959595; |
||||||
|
} |
||||||
|
.r{ |
||||||
|
text{ |
||||||
|
margin-right: 30rpx; |
||||||
|
} |
||||||
|
color: #959595; |
||||||
|
line-height: 60rpx; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
||||||
|
.c{ |
||||||
|
padding: 20rpx 0 0; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
.btn{ |
||||||
|
width: 250rpx; |
||||||
|
text-align: center; |
||||||
|
line-height: 70rpx; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 12rpx; |
||||||
|
font-size: 30rpx; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&-fd{ |
||||||
|
background-color: #FFFFFF; |
||||||
|
padding: 10rpx 60rpx; |
||||||
|
overflow: hidden; |
||||||
|
margin-top: 20rpx; |
||||||
|
.l{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 20rpx 0; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #959595; |
||||||
|
.b{ |
||||||
|
margin-left: 30rpx; |
||||||
|
color: #484848; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
After Width: | Height: | Size: 475 B |
After Width: | Height: | Size: 3.2 KiB |
Loading…
Reference in new issue