Skip to content

U
user
Commit 664a6ff7 by songbingqi
Options

完成退款流程页面开发

parent f5556cca
Showing with 268 additions and 4 deletions
orderSubPackage/pages/refundInfo/index.vue 0 → 100644
<template>
<view class="big">
<view class="refundStep">
<view class="refund_title">退款进程</view>
<view class="refund_list">
<view :class="item.status===1?'refund_item_action':'refund_item'" v-for="(item,index) in newList" :key="index">
<view class="item">
<view :class="item.status===1?'refund_info_action':'refund_info'">
<view :class="item.status===1?'info_ciycle_action':'info_ciycle'"></view>
<view class="info_text">
<view :class="item.status===1?'info_title_action':'info_title'">{{item.title}}</view>
<view :class="item.status===1?'info_time_action':'info_time'">2022年6月2日09:35:27</view>
</view>
</view>
</view>
</view>
</view>
<view class="morInfo" v-if="list.length>4" @click="watchMore">
更多退款信息
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
flag:false,
list:[
{
title:'退款成功',
time:'2022年6月2日09:35:27',
status:0
},
{
title:'退款中',
time:'2022年6月2日09:35:27',
status:1
},
{
title:'审核中',
time:'2022年6月2日09:35:27',
status:0
},
{
title:'退款申请已提交',
time:'2022年6月2日09:35:27',
status:0
},
{
title:'退款申请已提交',
time:'2022年6月2日09:35:27',
status:0
},
],
oldList:[],
newList:[]
};
},
mounted() {
if(this.list.length>4){
this.newList = [...this.list].splice(0,4)
this.flag = false
}else{
this.newList = this.list
}
},
methods:{
watchMore(){
if(this.flag){
this.newList = [...this.list].splice(0,4)
}else{
this.newList = this.list
}
this.flag = !this.flag
}
}
};
</script>
<style scoped lang="scss">
.big {
background: #F8F8F8;
padding-top: 32rpx;
height: 100vh;
}
.refundStep {
background: white;
margin: 0rpx 32rpx 32rpx 32rpx;
padding-bottom: 32rpx;
overflow: hidden;
.refund_title {
margin: 38rpx 30rpx;
height: 44rpx;
margin-bottom: 42rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 44rpx;
}
.refund_list {
margin: 0rpx 32rpx 0rpx 35rpx;
.refund_item {
height: 100rpx;
border-left: 2rpx solid #ECECEC;
.item {
position: relative;
.refund_info {
width: 622rpx;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
top: -12rpx;
left: -8rpx;
.info_ciycle {
width: 18rpx;
height: 16rpx;
border: 2rpx solid #ECECEC;
background-color: white;
border-radius: 50%;
box-sizing: border-box;
}
.info_text {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 40rpx;
.info_title {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.info_time {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
}
}
}
.refund_item_action {
height: 100rpx;
border-left: 2rpx solid #ECECEC;
.item {
position: relative;
.refund_info_action {
width: 622rpx;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
top: -12rpx;
left: -10rpx;
.info_ciycle_action {
width: 22rpx;
height: 20rpx;
background: #0050f6;
// border: 1rpx solid red;
border-radius: 50%;
box-sizing: border-box;
}
.info_text {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 40rpx;
.info_title_action {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.info_time_action {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
}
}
.refund_item:last-child {
height: 25rpx;
border: 1px solid rgba(255, 255, 255, 0);
}
.refund_item_action:last-child {
height: 25rpx;
border: 1px solid rgba(255, 255, 255, 0);
}
}
.morInfo {
margin-top: 40rpx;
margin-right: 32rpx;
text-align: right;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0050F6;
line-height: 34rpx;
}
}
</style>
\ No newline at end of file
pages.json
......@@ -72,6 +72,13 @@
"navigationBarTitleText": "我的HOOLOO券",
"enablePullDownRefresh": false
}
},
{
"path": "pages/refundInfo/index",
"style": {
"navigationBarTitleText": "退款详情",
"enablePullDownRefresh": false
}
}
]
},
......
pages/order/order.vue
......@@ -42,8 +42,9 @@
<span v-if="index!=jsonParse(good.specRuleDetail).length-1">/</span>
</span>
</view>
<view>
<view class="numbox">
×{{ good.num }}
<a class="btntk" v-if="checkStatus(item.state,[12,13,14,15])&&(index+1)===item.orderDetails.length" @click.stop="refundInfo(item)" type="primary">退款详情</a>
</view>
</view>
</view>
......@@ -54,7 +55,7 @@
</view>
</view>
</div>
<view class="order_footer">
<view class="order_footer" :style="{'margin-top':checkStatus(item.state,[12,13,14,15])?'16rpx':'39rpx'}">
<view class="total">
共{{ orderDetailsSize(item.orderDetails) }}件商品 实付<text class="price">￥{{ Utils.isInteger(item.amount) }}</text>
</view>
......@@ -106,6 +107,19 @@ export default {
}
},
methods: {
refundInfo(item) {
const { id } = item
uni.setStorageSync('orderId', id);
let url = '/orderSubPackage/pages/refundInfo/index'
uni.navigateTo({ url })
},
checkStatus(status,list){
if(list.includes(Number(status))){
return true
}else{
return false
}
},
getStateText(state) {
state = '' + state;
switch (state) {
......@@ -421,7 +435,7 @@ export default {
}
.goods_spce {
margin-top: 2rpx;
margin-top: 2.62rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
......@@ -429,7 +443,26 @@ export default {
color: #999999;
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-start;
.numbox{
display: flex;
.btntk {
box-sizing: border-box;
width: 167rpx;
height: 64rpx;
line-height: 64rpx;
border-radius: 2rpx;
font-family: PingFangSC-Regular, PingFang SC;
border: 2rpx solid #0050F6;
font-size: 24rpx;
margin: 0;
margin-left: 17rpx;
color: #0050F6;
font-weight: 400;
text-align: center;
}
}
}
}
}
......
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