other_project/mallplus
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

初始项目

Browse Source
This commit is contained in:
liupopo
2023-02-11 12:55:02 +08:00
parent 1748bda84a
commit 0b89e36064
3363 changed files with 506201 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
mallplusui-uniapp-app/pagesA/after_sale/detail.vue Normal file
View File

@@ -0,0 +1,388 @@
<template>
<view class="content">
<view class="content-top">
<!-- <view class="back-img">
<view class="back-img-c">
<view class="back-img-t">退款单状态</view>
<view class="back-img-b">{{status_name}} {{refund_name}} {{reship_name}}...</view>
</view>
</view> -->
<view class='cell-group margin-cell-group'>
<view class='cell-item add-title-item'>
<view class='cell-item-bd'>
<view class="cell-bd-view black-text">
<text class="cell-bd-text color-3">退款单状态</text>
</view>
<view class="cell-bd-view">
<text class="cell-bd-text color-9">{{status_name}} {{refund_name}} {{reship_name}}...</text>
</view>
<view class="cell-bd-view">
<!-- <text class="cell-bd-text">下单时间：{{ orderInfo.ctime }}</text> -->
</view>
</view>
</view>
</view>
<view class='cell-group margin-cell-group'>
<view class='cell-item'>
<view class='cell-item-hd'><view class='cell-hd-title'>售后类型</view></view>
<view class='cell-item-ft'><view class="cell-ft-p">{{type_name}}</view></view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'><view class='cell-hd-title'>退款金额</view></view>
<view class='cell-item-ft'><view class="cell-ft-p red-price">{{refund}}元</view></view>
</view>
</view>
<view class='cell-group margin-cell-group' v-if="images.length > 0">
<view class='cell-item right-img'><view class='cell-item-hd'><view class='cell-hd-title'>图片凭证</view></view></view>
<view class="">
<view class="evaluate-c-b">
<view class="goods-img-item" v-for="(item, key) in images" :key="key">
<image :src="item.url" mode="aspectFit" @click="clickImg(item.url)"></image>
</view>
</view>
</view>
</view>
<view class='cell-group margin-cell-group'>
<view class='cell-item right-img'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>问题描述</view>
</view>
</view>
<view class="cell-textarea">
<text v-if="reason">{{reason}}</text>
<text v-else>暂无描述</text>
</view>
</view>
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status == 1">
<view class='cell-item right-img'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>退货邮寄信息</view>
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>收件人</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_name" />
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>联系方式</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_mobile" />
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>邮寄地址</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_area + reship_info.reship_address" />
</view>
</view>
</view>
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status == 1">
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>快递公司</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" v-model="logi_code" placeholder="请填写快递公司名称"/>
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>物流单号</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" v-model="logi_no" placeholder="请填写物流单号" />
</view>
</view>
</view>
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status > 1">
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>快递公司</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="logi_code"/>
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>物流单号</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="logi_no"/>
</view>
</view>
</view>
</view>
<view class="button-bottom" v-show="status == 2 && reship_status == 1">
<button class="btn btn-b" @click="submitBtn" :disabled='submitStatus' :loading='submitStatus'>提交</button>
</view>
<view class="button-bottom" v-show="(order_status == 1 && status == 3) || (order_status == 1 && status == 2 && refund_status != 1 && refund_status != 0) || (order_status == 1 && status == 2 && reship_status == 3)">
<button class="btn btn-b" @click="repeat">再次申请售后</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
delivers: ["请选择物流公司","顺丰", "中通", "圆通","韵达"],
deliverIndex: 0,
type_name:'', //售后类型显示
refund:0, //退款金额
images:[], //图片
reason: '暂无', //问题描述
ttype:1, //售后类型
status:1, //售后单状态
status_name: '审核中', //售后单状态文字描述
reship_status:0, //退货单状态
reship_name:'',
refund_status:0, //退款单状态
refund_name:'',
reship_info:[], //退货单明细,如果售后单未审核呢，那么显示的是售后单明细，如果售后单审核通过了，显示退款单明细
items:[], //退货明细
mark:"暂无", //拒绝原因
logi_no:'', //回填物流信息
logi_code:'', //物流公司
reship_id:'',
mode: 'aspectFill',
order_id: '', //订单号
order_status: '', //订单状态
submitStatus: false
}
},
methods: {
//提交按钮
submitBtn() {
this.submitStatus = true;
if (this.logino == '') {
this.$common.errorToShow('请输入退货快递信息');
this.submitStatus = false;
return false;
}
let data = {
logi_no: this.logi_no,
logi_code:this.logi_code,
reship_id: this.reship_id,
};
this.$api.sendShip(data, res => {
if (res.status) {
this.$common.successToShow('提交成功', ress => {
this.submitStatus = false;
uni.navigateBack({
delta: 1
});
});
} else {
this.$common.errorToShow(res.msg);
this.submitStatus = false;
}
});
},
repeat() {
this.$common.navigateTo('../after_sale/index?order_id='+this.order_id);
},
// 图片点击放大
clickImg (img) {
// 预览图片
uni.previewImage({
urls: img.split()
});
}
},
//页面加载
onLoad(options) {
let data = {
aftersales_id: options.aftersales_id
}
this.$api.afterSalesInfo(data, res => {
if(res.status){
let info = res.data.info;
if (info.type == 1){
this.ttype = 1;
this.type_name = '仅退款';
}else{
this.ttype = 2;
this.type_name = '退款退货';
}
this.refund = info.refund;
this.images = info.images;
this.reason = info.reason;
this.reship_info = res.data.reship;
this.order_id = info.order_id;
this.order_status = info.order_status;
if(info.mark){
this.mark = info.mark;
}
if(info.status == 1){
this.status = 1;
this.status_name = '审核中';
}else if(info.status == 2){
this.status = 2;
this.status_name = '申请通过';
//退款单状态
if (info.bill_refund) {
if (info.bill_refund.status == 1) {
this.refund_status = 1;
this.refund_name = '退款中';
} else if (info.bill_refund.status == 2) {
this.refund_status = 2;
this.refund_name = '退款成功';
}
}
//退货单状态
if(info.bill_reship){
this.reship_id = info.bill_reship.reship_id
if(info.bill_reship.status == 1) {
this.reship_status = 1;
this.reship_name = '待发退货';
} else if (info.bill_reship.status == 2) {
this.reship_status = 2;
this.reship_name = '待收退货';
this.logi_no = info.bill_reship.logi_no;
this.logi_code = info.bill_reship.logi_code;
} else {
this.reship_status = 3;
this.reship_name = '已收退货';
this.logi_no = info.bill_reship.logi_no;
this.logi_code = info.bill_reship.logi_code;
}
}
}else{
this.status = 3;
this.status_name = '申请驳回';
}
//售后单明细,如果有退货单明细，就用退货单明细，否则就用售后单明细
// if(info.bill_reship.items){
// page.data.items = info.bill_reship.items;
// }else{
// page.data.items = info.items;
// }
} else {
this.$common.errorToShow(res.msg);
}
});
}
}
</script>
<style>
.back-img{
width: 100%;
height: 200upx;
position: relative;
background-color: #FF7159;
}
.back-img image{
width: 100%;
height: 100%;
position: absolute;
}
.back-img-c{
width: 100%;
height: 100%;
color: #fff;
position: relative;
z-index: 99;
padding: 50upx;
}
.back-img-t{
font-size: 32upx;
}
.back-img-b{
font-size: 24upx;
}
.list-goods-name{
width: 100% !important;
}
.invoice-type .uni-list-cell{
display: inline-block;
font-size: 26upx;
color: #333;
position: relative;
margin-left: 50upx;
}
.invoice-type .uni-list-cell>view{
display: inline-block;
}
.invoice-type-icon{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.invoice-type-c{
margin-left: 50upx;
line-height: 2;
}
.cell-item-ft .cell-bd-input{
text-align: right;
width: 500upx;
font-size: 28upx;
}
.cell-item-bd .cell-bd-input{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right-img{
border-bottom: 0;
}
.cell-textarea{
padding: 0 26upx 20upx;
font-size: 26upx;
color: #333;
word-wrap: break-word;
}
.evaluate-c-b{
overflow: hidden;
padding: 0 20upx;
}
.upload-img{
width: 146upx;
height: 146upx;
margin: 14upx;
text-align: center;
color: #999999;
font-size: 22upx;
border: 2upx solid #E1E1E1;
border-radius: 4upx;
display: inline-block;
float: left;
padding: 24upx 0;
}
.goods-img-item{
width: 174upx;
height: 174upx;
padding: 14upx;
float: left;
position: relative;
}
.goods-img-item:nth-child(4n){
margin-right: 0;
}
.goods-img-item image{
width: 100%;
height: 100%;
}
.del{
width: 30upx !important;
height: 30upx !important;
position: absolute;
right: 0;
top: 0;
z-index: 999;
}
.black-text .cell-bd-text{
font-size: 28upx;
}
</style>

382
mallplusui-uniapp-app/pagesA/after_sale/index.vue Normal file
View File

@@ -0,0 +1,382 @@
<template>
<view class="content">
<form @submit="submit" report-submit="true">
<view class="content-top">
<view class="img-list cart-list">
<checkbox-group class="cart-checkbox" @change="checkboxChange">
<view class="cart-checkbox-item" v-for="(item, key) in orderInfo.orderItemList" :key="key">
<label class="uni-list-cell uni-list-cell-pd">
<view class="cart-checkbox-c"><checkbox v-if="item.status != 30" :value="item.id" :checked="item.checked" color="#FF7159" /></view>
<view class="img-list-item">
<image class="img-list-item-l little-img have-none" :src="item.productPic" mode="aspectFill"></image>
<view class="img-list-item-r little-right">
<view class="little-right-t">
<view class="goods-name list-goods-name">{{ item.productName }}</view>
<view v-if="item.status == 30" class="list-goods-name red-price">已申请</view>
</view>
<view class="goods-item-c">
<view class="goods-buy">
<!-- 商品规格 -->
<view class="goods-salesvolume">{{ item.productPrice }} x{{ item.productQuantity }}</view>
</view>
</view>
</view>
</view>
</label>
</view>
</checkbox-group>
</view>
<view class="cell-group margin-cell-group">
<view class="cell-item">
<view class="cell-item-hd"><view class="cell-hd-title">服务类型</view></view>
<view class="cell-item-ft">
<view class="uni-form-item uni-column invoice-type">
<!-- <radio-group class="uni-list" @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in type_list" :key="index">
<view>
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
</view>
<view>
<label class="label-2-text" :for="item.name">
<text>{{item.value}}</text>
</label>
</view>
</label>
</radio-group> -->
<!-- #ifndef MP-ALIPAY -->
<radio-group class="uni-list" @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in type_list" :key="index">
<view class="invoice-type-icon">
<radio class="a-radio" :id="item.name" :value="item.value" :checked="item.checked" :disabled="item.disabled"></radio>
</view>
<view class="invoice-type-c">
<label class="label-2-text" :for="item.name">
<text>{{ item.name }}</text>
</label>
</view>
</label>
</radio-group>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<jhlable></jhlable>
<!-- #endif -->
</view>
</view>
</view>
<view class="cell-item">
<view class="cell-item-hd"><view class="cell-hd-title">退款金额</view></view>
<view class="cell-item-ft"><input class="cell-bd-input red-price" v-model="refund" :disabled="refund_input_noedit" /></view>
</view>
</view>
<view class="cell-group margin-cell-group">
<view class="cell-item right-img">
<view class="cell-item-hd"><view class="cell-hd-title">上传凭证</view></view>
</view>
<view class="">
<view class="evaluate-c-b">
<view class="goods-img-item" v-for="(item, key) in images" :key="key">
<image class="del" src="/static/image/del.png" mode="" @click="delImage(item)"></image>
<image class="" :src="item" mode="" @click="clickImg(item)"></image>
</view>
<view class="upload-img" v-show="isImage" @click="upImage">
<image class="icon" src="/static/image/camera.png" mode=""></image>
<view class="">上传照片</view>
</view>
</view>
</view>
</view>
<view class="cell-group margin-cell-group">
<view class="cell-item right-img">
<view class="cell-item-hd"><view class="cell-hd-title">问题描述</view></view>
</view>
<view class="cell-textarea "><textarea v-model="reason" placeholder="请您在此描述问题(最多200字)" maxlength="200" /></view>
</view>
</view>
<view class="button-bottom"><button class="btn btn-b btn-square" formType="submit">提交</button></view>
</form>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import jhlable from '@/components/jihai-lable.vue';
export default {
data() {
return {
type_list: [
{ value: '0', name: '换货', checked: true, disabled: false },
// { value: '1', name: '仅退款', checked: true, disabled: false },
// { value: '2', name: '退货', checked: false, disabled:false },
{ value: '3', name: '退货退款', checked: false, disabled: false }
],
orderInfo: [],
order_id: '',
items: [], //退货明细
item_ids: [], //选择的退货
aftersale_type: 1, //售后类型1退款，2退款退货
refund: 0, //退款金额，等于已支付的金额减去已退款的金额
refund_show: 0,
images: [], //图片
reason: '', //原因
image_max: 5, //用于前台判断上传图片按钮是否显示
refund_input_noedit: false,
mode: 'aspectFill',
submitStatus: false,
receiverId:''
};
},
components: { jhlable },
computed: {
isImage() {
let num = this.image_max - this.images.length;
if (num > 0) {
return true;
} else {
return false;
}
}
},
methods: {
// 单选框点击切换
radioChange: function(evt) {
this.type_list.forEach(item => {
if (item.value === evt.target.value) {
item.checked = true;
this.aftersale_type = evt.target.value;
} else {
item.checked = false;
}
});
if (this.type_list[0].checked) {
this.refund_input_noedit = true;
} else {
this.refund_input_noedit = false;
}
},
//订单商品信息
async getOrderInfo() {
debugger;
let params = { id: this.order_id };
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
this.refund_show = this.orderInfo.payAmount;
this.receiverId = this.orderInfo.receiverId;
console.log(this.receiverId)
},
//退货商品选择
checkboxChange(e) {
let nums = 0;
this.item_ids = [];
for (var i = 0; i < e.detail.value.length; i++) {
let k = e.detail.value[i];
for (var j = 0; j < this.orderInfo.orderItemList.length; j++) {
if (this.orderInfo.orderItemList[j].id == k) {
this.item_ids = this.item_ids.concat(k);
}
}
}
},
//提交
async submit(e) {
this.submitStatus = true;
/* let images = [];
for(var i = 0; i<this.images.length; i++) {
images = images.concat(this.images[i].image_id);
} */
//判断退款金额
let reg = /^[0-9]+(.[0-9]{1,2})?$/;
if (!reg.test(this.refund)) {
this.$common.errorToShow('请输入正确金额');
this.submitStatus = false;
return false;
} else {
if (this.refund < 0) {
this.$common.errorToShow('退款金额不能小于0');
return false;
}
if (this.refund > this.refund_show) {
this.$common.errorToShow('退款金额过大');
this.submitStatus = false;
return false;
}
}
if (!this.item_ids || this.item_ids.length == 0) {
this.$common.errorToShow('请选择需要售后的商品');
return false;
}
//组装数据，提交数据
let data = {
orderId: this.order_id,
type: this.aftersale_type,
items: this.item_ids,
images: this.images,
returnAmount: this.refund,
desc: this.reason,
companyAddressId:this.receiverId
};
// #ifdef MP-WEIXIN
data['formId'] = e.detail.formId;
// #endif
let res = await Api.apiCall('post', Api.order.saveOmsOrderReturnApply, data);
if (res.code == 200) {
// this.$common.successToShow('提交成功', ress => {
// this.submitStatus = false;
// uni.navigateBack({
// delta: 1
// });
// });
uni.showToast({
title: "提交成功",
icon: "none"
});
} else {
this.$common.errorToShow(res.msg);
this.submitStatus = false;
uni.navigateBack({ delta: 1 });
}
},
//上传图片
upImage() {
let num = this.image_max - this.images.length;
if (num > 0) {
this.$otherApi.uploadFiles(res => {
//this.$otherApi.uploadImage(num, res => {
if (res.code == 200) {
this.images = this.images.concat(res.data);
this.$common.successToShow(res.msg);
} else {
this.$common.errorToShow(res.msg);
}
});
}
},
//删除图片
delImage(e) {
let newImages = [];
for (var i = 0; i < this.images.length; i++) {
if (this.images[i].image_id != e.image_id) {
newImages.push(this.images[i]);
}
}
this.images = newImages;
},
// 图片点击放大
clickImg(img) {
// 预览图片
uni.previewImage({
urls: img.split()
});
}
},
onLoad(e) {
this.order_id = e.order_id;
this.getOrderInfo();
}
};
</script>
<style lang="scss">
@import '../../static/css/style.css';
.list-goods-name {
width: 100% !important;
}
.cart-checkbox-item {
position: relative;
}
.invoice-type .uni-list-cell {
display: inline-block;
font-size: 26upx;
color: #333;
position: relative;
margin-left: 50upx;
}
.invoice-type .uni-list-cell > view {
display: inline-block;
}
.invoice-type-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.invoice-type-c {
margin-left: 50upx;
line-height: 2;
}
.cell-item-ft .cell-bd-input {
text-align: right;
width: 500upx;
font-size: 28upx;
}
.right-img {
border-bottom: 0;
}
.cell-textarea {
padding: 0 26upx 20upx;
}
.cell-textarea textarea {
width: 100%;
height: 200upx;
font-size: 26upx;
color: #333;
}
.evaluate-c-b {
overflow: hidden;
padding: 0 20upx;
}
.upload-img {
width: 146upx;
height: 146upx;
margin: 14upx;
text-align: center;
color: #999999;
font-size: 22upx;
border: 2upx solid #e1e1e1;
border-radius: 4upx;
display: inline-block;
float: left;
padding: 24upx 0;
}
.goods-img-item {
width: 174upx;
height: 174upx;
padding: 14upx;
float: left;
position: relative;
}
.goods-img-item:nth-child(4n) {
margin-right: 0;
}
.goods-img-item image {
width: 100%;
height: 100%;
}
.del {
width: 30upx !important;
height: 30upx !important;
position: absolute;
right: 0;
top: 0;
z-index: 999;
}
.cell-group {
background-color: #fff;
}
.margin-cell-group {
margin: 20upx 0;
}
/* #ifdef MP-ALIPAY */
/* #endif */
</style>

642
mallplusui-uniapp-app/pagesA/after_sale/list.vue Normal file
View File

@@ -0,0 +1,642 @@
<template>
<view class="content">
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
<!-- 空白页 -->
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
<!-- 订单列表 -->
<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item" >
<view class="i-top b-b">
<text class="time" @click="navToDetailPage(item)">{{ item.createTime }}</text>
<text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.id }}--</text>
<text class='state' v-if="item.status == 0">待审核</text>
<text class='state' v-else-if="item.status == 1">退货中</text>
<text class='state' v-else-if="item.status == 2">已完成</text>
<text class='state' v-else-if="item.status == 3">审核拒绝</text>
</view>
<scroll-view v-if="item.orderItemList.length > 1" class="goods-box" scroll-y >
<view v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex" class="goods-item">
<img class="goods-img" :src="goodsItem.productPic" @click="navToDetailPage(item)" mode="aspectFill"></img>
</view>
</scroll-view>
<view v-if="item.orderItemList.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex">
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img>
<view class="right" @click="navToDetailPage(item)">
<text class="title clamp">{{ goodsItem.productName }}</text>
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
<text class="price">{{ goodsItem.productPrice }}</text>
</view>
</view>
<view class="price-box">
共
<text class="num">{{ item.orderItemList.length }}</text>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { mapState } from 'vuex';
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { formatDate } from '@/common/date';
export default {
components: {
mallplusCopyright,
uniLoadMore,
empty
},
data() {
return {
tabCurrentIndex: 0,
pageNum: 1,
orderList:[],
headerPosition: 'fixed',
headerTop: '0px',
loadingType: 'loading', //加载更多状态
navList: [
{
status: 0,
text: '全部',
loadingType: 'loading',
orderList: []
},
]
};
},
onLoad(options) {
/**
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
* 替换onLoad下代码即可
*/
this.tabCurrentIndex = 0;
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = 1;
this.loadData('refresh');
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
methods: {
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `detail?aftersales_id='+${id}`
});
},
//获取订单列表
async loadData(type = 'add', loading) {
//这里是将订单挂载到tab列表下
let index = this.tabCurrentIndex;
let navItem = this.navList[index];
let status = navItem.status;
let url;
if (!this.hasLogin) {
url = '/pages/public/login';
uni.navigateTo({
url
});
} else {
let params = { pageNum: this.pageNum };
let data = await Api.apiCall('get', Api.order.aftersaleslist, params);
let goodsList = data.records;
let orderList = goodsList.filter(item => {
//添加不同状态下订单的表现形式
item = Object.assign(item, this.orderStateExp(item.status));
item.createTime = this.dateFormat(item.createTime);
//演示数据所以自己进行状态筛选
if (status === 0) {
//0为全部订单
return item;
}
return item.status === status;
});
if (type === 'refresh') {
this.orderList = [];
}
this.orderList = this.orderList.concat(orderList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.orderList.length >= data.total ? 'nomore' : 'loading';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
this.pageNum = this.pageNum + 1;
navItem.orderList=[];
orderList.forEach(item => {
navItem.orderList.push(item);
});
}
},
//swiper 切换
changeTab(e) {
this.tabCurrentIndex = e.target.current;
//this.pageNum = 1;
this.loadData('refresh');
},
//顶部tab点击
tabClick(index) {
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = index;
},
//删除订单
async deleteOrder(index) {
uni.showLoading({
title: '请稍后'
});
setTimeout(() => {
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
uni.hideLoading();
}, 600);
},
async payOrder(item) {
let url = '/pages/order/payment/index?order_id=' + item.id + '&type=1' ;
this.$common.navigateTo(
url
)
},
//取消订单
async cancelOrder(item) {
let params = { orderId: item.id };
let data = await Api.apiCall('post', Api.order.closeOrder, params);
if (data) {
this.$api.msg(data);
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 4;
}
},
//订单确认收货
async confimDelivery(item) {
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.confimDelivery, params);
console.log(data);
if (data) {
this.$api.msg(data);
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 4;
}
},
// 申请售后
applyRefund(orderId) {
this.$common.navigateTo(
'../../pagesA/after_sale/index?order_id=' + orderId
)
},
//订单申请退款
async applyRefund1(item) {
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.applyRefund, params);
if (data) {
console.log(data);
this.$api.msg(data);
}
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 5;
},
// 去评价
toEvaluate(orderId) {
this.$common.navigateTo(
'/pages/order/evaluate?order_id=' + orderId
)
},
//订单状态文字和颜色
orderStateExp(value) {
let stateTip = '',
stateTipColor = '#fa436a';
if (value === 12) {
stateTipColor = '#909399';
stateTip = '待付款';
}if (value === 1) {
stateTipColor = '#909399';
stateTip = '支付成功，没有回掉';
}if (value === 2) {
stateTip = '待发货';
} else if (value === 3) {
stateTip = '待收货';
} else if (value === 4) {
stateTip = '待评价';
} else if (value === 5) {
stateTip = '已完成';
} else if (value === 6) {
stateTipColor = '#909399';
stateTip = '维权中';
} else if (value === 7) {
stateTip = ' 维权已完成';
} else if (value === 8) {
stateTip = '待分享';
} else if (value === 13) {
stateTip = '申请退款';
} else if (value === 14) {
stateTip = '已退款';
} else if (value === 15) {
stateTip = '已关闭';
} else if (value === 16) {
stateTip = '无效订单';
} else {
stateTip = '待付款';
}
return { stateTip, stateTipColor };
},
dateFormat(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.swiper-box {
height: calc(100% - 40px);
}
.list-scroll-content {
height: 100%;
}
.navbar {
display: flex;
height: 40px;
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 15px;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 0;
border-bottom: 2px solid $base-color;
}
}
}
}
.uni-swiper-item {
height: auto;
}
.order-item {
display: flex;
flex-direction: column;
padding-left: 30upx;
background: #fff;
margin-top: 16upx;
.i-top {
display: flex;
align-items: center;
height: 80upx;
padding-right: 30upx;
font-size: $font-base;
color: $font-color-dark;
position: relative;
.time {
flex: 1;
}
.state {
color: $base-color;
}
.del-btn {
padding: 10upx 0 10upx 36upx;
font-size: $font-lg;
color: $font-color-light;
position: relative;
&:after {
content: '';
width: 0;
height: 30upx;
border-left: 1px solid $border-color-dark;
position: absolute;
left: 20upx;
top: 50%;
transform: translateY(-50%);
}
}
}
/* 多条商品 */
.goods-box {
height: 160upx;
padding: 20upx 0;
white-space: nowrap;
.goods-item {
width: 120upx;
height: 120upx;
display: inline-block;
margin-right: 24upx;
}
.goods-img {
display: block;
width: 100%;
height: 100%;
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
}
/* load-more */
.uni-load-more {
display: flex;
flex-direction: row;
height: 80upx;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
font-size: 28upx;
color: #999;
}
.uni-load-more__img {
height: 24px;
width: 24px;
margin-right: 10px;
}
.uni-load-more__img > view {
position: absolute;
}
.uni-load-more__img > view view {
width: 6px;
height: 2px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
background: #999;
position: absolute;
opacity: 0.2;
transform-origin: 50%;
animation: load 1.56s ease infinite;
}
.uni-load-more__img > view view:nth-child(1) {
transform: rotate(90deg);
top: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(2) {
transform: rotate(180deg);
top: 11px;
right: 0;
}
.uni-load-more__img > view view:nth-child(3) {
transform: rotate(270deg);
bottom: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(4) {
top: 11px;
left: 0;
}
.load1,
.load2,
.load3 {
height: 24px;
width: 24px;
}
.load2 {
transform: rotate(30deg);
}
.load3 {
transform: rotate(60deg);
}
.load1 view:nth-child(1) {
animation-delay: 0s;
}
.load2 view:nth-child(1) {
animation-delay: 0.13s;
}
.load3 view:nth-child(1) {
animation-delay: 0.26s;
}
.load1 view:nth-child(2) {
animation-delay: 0.39s;
}
.load2 view:nth-child(2) {
animation-delay: 0.52s;
}
.load3 view:nth-child(2) {
animation-delay: 0.65s;
}
.load1 view:nth-child(3) {
animation-delay: 0.78s;
}
.load2 view:nth-child(3) {
animation-delay: 0.91s;
}
.load3 view:nth-child(3) {
animation-delay: 1.04s;
}
.load1 view:nth-child(4) {
animation-delay: 1.17s;
}
.load2 view:nth-child(4) {
animation-delay: 1.3s;
}
.load3 view:nth-child(4) {
animation-delay: 1.43s;
}
@-webkit-keyframes load {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
</style>