wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://git.njrzwl.cn:3000/wangmingchuan/yanzong_qianduan

Browse Source
dev
zhouzhenyuan 1 year ago
parent bf7d09909e acc4e2a4d2
commit 0a3ca8a90a
9 changed files with 1051 additions and 4 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 38
      pages.json
  2. 143
      pages/order/refund/freight.vue
  3. 12
      pages/order/refund/index.vue
  4. 4
      pages/order/refund/refund.vue
  5. 428
      pages/order/refund/refund1.vue
  6. 265
      pages/order/refund/refundDetail.vue
  7. 165
      pages/order/refund/refundDetail1.vue
  8. BIN
      static/news/icon-success.png
  9. BIN
      static/news/refund-01.png

38
pages.json
Unescape View File

@ -448,6 +448,44 @@
}
}
,{
"path" : "pages/order/refund/freight",
"style" :
{
"navigationBarTitleText": "退货运费",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/order/refund/refund1",
"style" :
{
"navigationBarTitleText": "申请退款",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/order/refund/refundDetail",
"style" :
{
"navigationBarTitleText": "退货退款详情",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/order/refund/refundDetail1",
"style" :
{
"navigationBarTitleText": "退货退款详情",
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
// #ifdef H5

143
pages/order/refund/freight.vue
Unescape View File

@ -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>

12
pages/order/refund/index.vue
Unescape View File

@ -6,7 +6,7 @@
<view class="n">出柜|圆通快递：已签收，签收人凭取..</view>
<image class="arrow" src="/static/news/icon-arrow.png"></image>
</view>
<view class="b">
<view class="b" @click="openPage(4)">
退货运费规则
<image class="arrow" src="/static/news/icon-arrow.png"></image>
</view>
@ -48,7 +48,15 @@
openPage(index){
if(index == 1){
uni.navigateTo({
url: "/pages/order/refund/refund"
url: "/pages/order/refund/refund1"
})
}else if(index == 2){
uni.navigateTo({
url: "/pages/order/refund/refund"
})
}else if(index == 4){
uni.navigateTo({
url: "/pages/order/refund/freight"
})
}
}

4
pages/order/refund/refund.vue
Unescape View File

@ -71,7 +71,7 @@
<view class="invoice-phone">
联系电话<input type="number" placeholder=""/>
</view>
<view class="invoice-fd">
<view class="invoice-fd" @click="toDetail()">
提交申请
</view>
</view>
@ -108,7 +108,7 @@
},
toDetail(i){
uni.navigateTo({
url: "/pages/invoice/edit"
url: "/pages/order/refund/refundDetail"
})
},
bindPickerChange(e){

428
pages/order/refund/refund1.vue
Unescape View File

@ -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>

265
pages/order/refund/refundDetail.vue
Unescape View File

@ -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>

165
pages/order/refund/refundDetail1.vue
Unescape View File

@ -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>

BIN
static/news/icon-success.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 475 B

BIN
static/news/refund-01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

Write Preview
Loading…
Cancel
Save