mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-17 07:55:53 +08:00
commit message
This commit is contained in:
Chopper
412
pages/order/afterSales/afterSales.vue
Normal file
412
pages/order/afterSales/afterSales.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="u-tabs-box">
|
||||
<u-tabs bg-color="#fff" :list="list" :is-scroll="false" :current="current" @change="change" :active-color="$lightColor"></u-tabs>
|
||||
</view>
|
||||
<scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
|
||||
<view class="seller-view" v-for="(order, orderIndex) in orderList" :key="orderIndex">
|
||||
<!-- 店铺名称 -->
|
||||
<view class="seller-info u-flex u-row-between" v-if="current == 0">
|
||||
<view class="seller-name">
|
||||
<view class="name">{{ order.storeName }}</view>
|
||||
</view>
|
||||
<view class="order-sn">订单编号：{{ order.sn }}</view>
|
||||
</view>
|
||||
<!-- 申请记录 选项卡 -->
|
||||
<view class="seller-info u-flex u-row-between" v-if="current != 0">
|
||||
<view class="order-sn">售后单号：{{ order.service_sn || order.sn }}</view>
|
||||
<view class="order-sn">{{ order.serviceType_text }}</view>
|
||||
</view>
|
||||
<view v-for="(sku, goodsIndex) in order.orderItems" :key="goodsIndex">
|
||||
<view class="goods-item-view" @click="onDetail(sku)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="100%" height="100%" :src="sku.image"></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.name }}</view>
|
||||
<!-- 如果商品多个则不显示每个商品价格-->
|
||||
<view class="goods-price" v-if="order.orderItems.length <= 1">
|
||||
￥{{ order.flowPrice | unitPrice }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-num">
|
||||
<view>x{{ sku.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-view u-flex u-row-between">
|
||||
<view class="description">
|
||||
<!-- 售后申请 -->
|
||||
<view v-if="
|
||||
current === 0 && order.groupAfterSaleStatus &&
|
||||
order.groupAfterSaleStatus === 'ALREADY_APPLIED'
|
||||
" class="cannot_apply">
|
||||
<u-icon class="icon" name="info-circle-fill"></u-icon>
|
||||
该商品已申请售后服务
|
||||
</view>
|
||||
<view class="cannot_apply" v-if="current === 0 && order.groupAfterSaleStatus && order.groupAfterSaleStatus === 'EXPIRED'" @click="tipsShow = true">
|
||||
<u-icon class="icon" name="info-circle-fill"></u-icon>
|
||||
该商品无法申请售后
|
||||
</view>
|
||||
|
||||
<div v-if="current === 1 || current === 2">
|
||||
<!-- 申请中 -->
|
||||
<view class="cannot_apply" v-if="order.serviceType == 'RETURN_GOODS'">退货处理-{{ serviceStatusList[order.serviceStatus] }}</view>
|
||||
<view class="cannot_apply" v-if="order.serviceType == 'SUPPLY_AGAIN_GOODS'">补发商品-{{ serviceStatusList[order.serviceStatus] }}</view>
|
||||
<view class="cannot_apply" v-if="order.serviceType == 'RETURN_MONEY'">退款-{{ serviceStatusList[order.serviceStatus] }}</view>
|
||||
<view class="cannot_apply" v-if="order.serviceType == 'EXCHANGE_GOODS'">换货-{{ serviceStatusList[order.serviceStatus] }}</view>
|
||||
<view class="cannot_apply" v-if="order.serviceType == 'CANCEL'">取消订单-{{ serviceStatusList[order.serviceStatus] }}</view>
|
||||
</div>
|
||||
<!-- 申请记录 -->
|
||||
</view>
|
||||
<view class="after-line">
|
||||
<!-- 售后申请 -->
|
||||
<view v-if="
|
||||
current === 0 && order.groupAfterSaleStatus=='NOT_APPLIED'
|
||||
" @click="applyService(sku.sn, order, sku)" class="rebuy-btn">
|
||||
申请售后
|
||||
</view>
|
||||
<!-- 申请中 -->
|
||||
<view class="rebuy-btn" v-if="
|
||||
current === 2 &&
|
||||
order.serviceStatus &&
|
||||
order.serviceStatus == 'PASS' &&
|
||||
order.serviceType != 'RETURN_MONEY'
|
||||
" @click="onExpress(order, sku)">
|
||||
提交物流
|
||||
</view>
|
||||
|
||||
<view @click="afterDetails(order, sku)" v-if="current === 1 || current === 2" class="rebuy-btn">
|
||||
售后详情
|
||||
</view>
|
||||
|
||||
<!-- 申请记录 -->
|
||||
<!-- <u-button type="info" size="mini" shape="circle" v-if="current === 2">删除记录</u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="
|
||||
current === 0 && order.groupAfterSaleStatus &&
|
||||
order.groupAfterSaleStatus != 'ALREADY_APPLIED' &&
|
||||
order.orderItems.length >= 1
|
||||
" class="btn-view u-flex u-row-between">
|
||||
<!-- 多个商品显示订单总价格 -->
|
||||
<view class="cannot_apply">
|
||||
订单总金额:<span class="countMoney">￥{{ order.flowPrice | unitPrice }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore bg-color="#f8f8f8" :status="status" />
|
||||
</scroll-view>
|
||||
<u-modal v-model="tipsShow" content="当订单未确认收货|已过售后服务有效期|已申请售后服务时，不能申请售后"></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
|
||||
import empty from "@/components/empty";
|
||||
import { getAfterSale, getAfterSaleList } from "@/api/after-sale.js";
|
||||
import { getOrderList } from "@/api/order.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniLoadMore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
serviceStatusList: {
|
||||
APPLY: "申请售后",
|
||||
PASS: "通过售后",
|
||||
REFUSE: "拒绝售后",
|
||||
BUYER_RETURN: "买家退货，待卖家收货",
|
||||
SELLER_RE_DELIVERY: "商家换货/补发",
|
||||
SELLER_CONFIRM: "卖家确认收货",
|
||||
SELLER_TERMINATION: "卖家终止售后",
|
||||
BUYER_CONFIRM: "买家确认收货",
|
||||
BUYER_CANCEL: "买家取消售后",
|
||||
WAIT_REFUND: "等待平台退款",
|
||||
COMPLETE: "完成售后",
|
||||
},
|
||||
list: [
|
||||
{
|
||||
name: "售后申请",
|
||||
},
|
||||
{
|
||||
name: "申请中",
|
||||
},
|
||||
{
|
||||
name: "申请记录",
|
||||
},
|
||||
],
|
||||
current: 0,
|
||||
tipsShow: false,
|
||||
orderList: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
logParams: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
status: "loadmore",
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.orderList = [];
|
||||
this.params.pageNumber = 1;
|
||||
this.getOrderList(this.current);
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.change(this.current);
|
||||
},
|
||||
watch: {
|
||||
current(val) {},
|
||||
},
|
||||
methods: {
|
||||
//切换tab页时，初始化数据
|
||||
change(index) {
|
||||
this.current = index;
|
||||
this.params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
this.orderList = [];
|
||||
//如果是2 则读取售后申请记录列表
|
||||
if (index == 0) {
|
||||
this.getOrderList(index);
|
||||
} else {
|
||||
this.logParams = {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
if (index === 1) {
|
||||
this.logParams.serviceStatus = "APPLY";
|
||||
}
|
||||
this.orderList = [];
|
||||
this.getAfterSaleLogList();
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
getOrderList(index) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
getOrderList(this.params).then((res) => {
|
||||
uni.hideLoading();
|
||||
const orderlist = res.data.result.records;
|
||||
if (orderlist.length > 0) {
|
||||
this.orderList = this.orderList.concat(orderlist);
|
||||
this.params.pageNumber += 1;
|
||||
}
|
||||
if (orderlist.length < 10) {
|
||||
this.status = "nomore";
|
||||
} else {
|
||||
this.status = "loading";
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 详情
|
||||
afterDetails(order) {
|
||||
uni.navigateTo({
|
||||
url: "./applyDetail?sn=" + order.sn,
|
||||
});
|
||||
},
|
||||
|
||||
//申请记录列表
|
||||
getAfterSaleLogList() {
|
||||
getAfterSaleList(this.logParams).then((res) => {
|
||||
let afterSaleLogList = res.data.result.records;
|
||||
|
||||
afterSaleLogList.forEach((item) => {
|
||||
item.orderItems = [
|
||||
{
|
||||
image: item.goodsImage,
|
||||
skuId: item.skuId,
|
||||
name: item.goodsName,
|
||||
num: item.num,
|
||||
price: item.flowPrice,
|
||||
},
|
||||
];
|
||||
console.log(item.orderItems);
|
||||
});
|
||||
|
||||
this.orderList = this.orderList.concat(afterSaleLogList);
|
||||
|
||||
if (afterSaleLogList.length < 10) {
|
||||
this.status = "nomore";
|
||||
} else {
|
||||
this.status = "loading";
|
||||
}
|
||||
});
|
||||
},
|
||||
//申请售后
|
||||
applyService(sn, order, sku) {
|
||||
let data = {
|
||||
...order,
|
||||
...sku,
|
||||
};
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent(
|
||||
JSON.stringify(data)
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
//提交物流信息
|
||||
onExpress(order, sku) {
|
||||
sku.storeName = order.storeName;
|
||||
|
||||
uni.navigateTo({
|
||||
url: `./afterSalesDetailExpress?serviceSn=${
|
||||
order.sn
|
||||
}&sku=${encodeURIComponent(JSON.stringify(sku))}`,
|
||||
});
|
||||
},
|
||||
|
||||
onDetail(sku) {
|
||||
console.log(sku);
|
||||
if (!this.$u.test.isEmpty(sku.skuId)) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
renderDate() {
|
||||
if (this.current === 0) {
|
||||
this.params.pageNumber += 1;
|
||||
this.getOrderList();
|
||||
} else {
|
||||
this.logParams.pageNumber += 1;
|
||||
this.getAfterSaleLogList();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.body-view {
|
||||
// height: calc(100vh - 44px -40px);
|
||||
// overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.countMoney {
|
||||
margin-left: 7rpx;
|
||||
color: $main-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.seller-view {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
.seller-name {
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.name {
|
||||
margin-left: 15rpx;
|
||||
margin-top: -2rpx;
|
||||
}
|
||||
}
|
||||
.order-sn {
|
||||
font-size: 22rpx;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 10rpx;
|
||||
|
||||
.goods-img {
|
||||
width: 131rpx;
|
||||
height: 131rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #ff5a10;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.btn-view {
|
||||
padding: 16rpx 0;
|
||||
|
||||
.after-line {
|
||||
display: flex;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.description {
|
||||
color: #909399;
|
||||
size: 25rpx;
|
||||
}
|
||||
.cannot_apply {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
|
||||
color: #999999;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.cancel-btn {
|
||||
color: #999999;
|
||||
border-color: #999999;
|
||||
margin-left: 15rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.pay-btn {
|
||||
background-color: #1abc9c;
|
||||
color: #ffffff;
|
||||
margin-left: 15rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.rebuy-btn {
|
||||
background-color: #ffffff;
|
||||
margin-left: 15rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid $light-color;
|
||||
color: $light-color;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 200px;
|
||||
}
|
||||
</style>
|
||||
566
pages/order/afterSales/afterSalesDetail.vue
Normal file
566
pages/order/afterSales/afterSalesDetail.vue
Normal file
@@ -0,0 +1,566 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-form :model="form" ref="uForm">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view class="header">
|
||||
<view>
|
||||
本次售后服务将由
|
||||
<text class="seller-name">{{ sku.storeName }}</text>
|
||||
为您提供
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="goods-item-view" v-for="(item,index) in sku.orderItems" v-if="item.sn == sn" @click="gotoGoodsDetail(sku.goods_id)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ item.name }}</view>
|
||||
<view class="goods-price">
|
||||
<span>￥{{ applyInfo.applyRefundPrice }}</span>
|
||||
|
||||
<span class="num">购买数量:{{ item.num }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="after-num">
|
||||
<view>申请数量</view>
|
||||
<view>
|
||||
<u-number-box :value="parseInt(form.num)" disabled-input :min="1" :max="parseInt(sku.num)" bg-color="#fff" @change="valChange"></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="body-view">
|
||||
<!-- 退款原因 -->
|
||||
<view class="opt-view">
|
||||
<u-form-item label="申请原因" :label-width="150">
|
||||
<u-input v-model="form.reason" type="select" input-align="right" :select-open="reasonSelectShow" @click="reasonSelectShow = true" placeholder="请选择申请原因" />
|
||||
</u-form-item>
|
||||
<u-form-item label="申请说明" :label-width="150">
|
||||
<u-input input-align="right" type="textarea" v-model="form.problemDesc" placeholder="请描述申请售后的说明" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<!-- 上传凭证 -->
|
||||
<view class="opt-view">
|
||||
<view class="img-title">上传凭证（最多5张）</view>
|
||||
<view class="images-view">
|
||||
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="opt-view">
|
||||
<u-form-item label="退款方式" :label-width="150">
|
||||
<u-input :value="
|
||||
applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
|
||||
" type="text" input-align="right" :disabled="true" />
|
||||
</u-form-item>
|
||||
<view v-if="
|
||||
applyInfo.accountType === 'BANK_TRANSFER' &&
|
||||
applyInfo.applyRefundPrice != 0
|
||||
">
|
||||
<u-form-item label="银行开户行" :label-width="150">
|
||||
<u-input v-model="form.bankDepositName" type="text" input-align="right" placeholder="请输入银行开户行" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行开户名" :label-width="150">
|
||||
<u-input v-model="form.bankAccountName" type="text" input-align="right" placeholder="请输入银行开户名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行账号" :label-width="150">
|
||||
<u-input v-model="form.bankAccountNumber" type="text" input-align="right" placeholder="请输入银行账号" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<u-form-item label="返回方式" :label-width="150">
|
||||
<u-input type="text" input-align="right" value="快递至第三方卖家" :disabled="true" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
<view class="opt-tip">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</view>
|
||||
</view>
|
||||
</u-form>
|
||||
|
||||
<view class="submit-view">
|
||||
<u-button type="primary" ripple shape="circle" v-if="applyInfo.refundWay" :custom-style="customStyle" @click="onSubmit">提交申请</u-button>
|
||||
</view>
|
||||
<u-select mode="single-column" :list="reasonList" v-model="reasonSelectShow" @confirm="reasonSelectConfirm"></u-select>
|
||||
<u-select mode="single-column" :list="typeList" v-model="typeSelectShow" @confirm="typeSelectConfirm"></u-select>
|
||||
<u-select mode="single-column" :list="returnList" v-model="returnSelectShow" @confirm="returnSelectConfirm"></u-select>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAfterSaleReason,
|
||||
applyReturn,
|
||||
getAfterSaleInfo,
|
||||
} from "@/api/after-sale";
|
||||
|
||||
import city from "@/components/m-city/m-city";
|
||||
import { upload } from "@/api/common.js";
|
||||
|
||||
import storage from "@/utils/storage.js";
|
||||
export default {
|
||||
component: {
|
||||
city,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
storage,
|
||||
list: [{ id: "", localName: "请选择", children: [] }],
|
||||
action: upload,
|
||||
fileList: [],
|
||||
sn: "",
|
||||
sku: {},
|
||||
typeValue: 0,
|
||||
value: "",
|
||||
type: "textarea",
|
||||
border: true,
|
||||
//退款原因 弹出框
|
||||
reasonSelectShow: false,
|
||||
reasonList: [],
|
||||
//退款方式为账号退款 账号类型弹出框
|
||||
typeSelectShow: false,
|
||||
typeList: [
|
||||
{
|
||||
value: "ALIPAY",
|
||||
label: "支付宝",
|
||||
},
|
||||
{
|
||||
value: "WEIXINPAY",
|
||||
label: "微信",
|
||||
},
|
||||
{
|
||||
value: "BANK_TRANSFER",
|
||||
label: "银行卡",
|
||||
},
|
||||
],
|
||||
//返回方式
|
||||
returnSelectShow: false,
|
||||
returnList: [
|
||||
{
|
||||
value: 1,
|
||||
label: "快递至第三方卖家",
|
||||
},
|
||||
],
|
||||
|
||||
customStyle: {
|
||||
backgroundColor: this.$lightColor,
|
||||
},
|
||||
applyInfo: {},
|
||||
form: {
|
||||
orderItemSn: "", // 订单sn
|
||||
skuId: "",
|
||||
reason: "", //退款原因
|
||||
problemDesc: "", //退款说明
|
||||
images: [], //图片凭证
|
||||
num: 1, //退货数量
|
||||
goodsId: "", //商品id
|
||||
accountType: "",
|
||||
applyRefundPrice: "",
|
||||
refundWay: "",
|
||||
serviceType: "", //申请类型
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
let navTitle = "申请售后";
|
||||
this.form.serviceType = "RETURN_GOODS";
|
||||
if (options.value == 1) {
|
||||
navTitle = "申请退货";
|
||||
this.form.serviceType = "RETURN_GOODS";
|
||||
}
|
||||
if (options.value == 2) {
|
||||
navTitle = "申请换货";
|
||||
this.form.serviceType = "EXCHANGE_GOODS";
|
||||
}
|
||||
if (options.value == 3) {
|
||||
navTitle = "申请退款";
|
||||
this.form.serviceType = "RETURN_MONEY";
|
||||
}
|
||||
this.typeValue = options.value;
|
||||
uni.setNavigationBarTitle({
|
||||
title: navTitle, //此处写页面的title
|
||||
});
|
||||
this.sn = options.sn;
|
||||
let dsku = decodeURIComponent(options.sku);
|
||||
let newSku = JSON.parse(dsku);
|
||||
this.sku = newSku
|
||||
|
||||
this.form.orderItemSn = options.sn;
|
||||
this.form.skuId = this.sku.skuId;
|
||||
this.form.num = this.sku.num;
|
||||
this.form.goodsId = this.sku.goodsId;
|
||||
this.getReasonActions(this.form.serviceType);
|
||||
|
||||
this.init(options.sn);
|
||||
},
|
||||
methods: {
|
||||
/** 获取申请原因下拉框数据 */
|
||||
async getReasonActions(serviceType) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
await getAfterSaleReason(serviceType).then((res) => {
|
||||
if (res.data.success) {
|
||||
let action = [];
|
||||
res.data.result.forEach((item) => {
|
||||
action.push({
|
||||
value: item.id,
|
||||
label: item.reason,
|
||||
});
|
||||
});
|
||||
|
||||
this.reasonList = action;
|
||||
}
|
||||
});
|
||||
uni.hideLoading();
|
||||
},
|
||||
//打开地区选择器
|
||||
showCitySelect() {
|
||||
this.$refs.cityPicker.show();
|
||||
},
|
||||
init(sn) {
|
||||
getAfterSaleInfo(sn).then((response) => {
|
||||
if (response.data.code == 400) {
|
||||
uni.showToast({
|
||||
title: response.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
this.applyInfo = response.data.result;
|
||||
|
||||
this.form.accountType = response.data.result.accountType;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//退款原因
|
||||
reasonSelectConfirm(e) {
|
||||
this.form.reason = e[0].label;
|
||||
},
|
||||
//退款方式
|
||||
typeSelectConfirm(e) {
|
||||
this.form.accountType = e[0].value;
|
||||
this.form.accountType_label = e[0].label;
|
||||
},
|
||||
//返回方式
|
||||
returnSelectConfirm(e) {
|
||||
console.log(e);
|
||||
},
|
||||
|
||||
//修改申请数量
|
||||
valChange(e) {
|
||||
this.form.num = e.value;
|
||||
},
|
||||
//图片上传
|
||||
onUploaded(lists) {
|
||||
console.log(lists);
|
||||
let images = [];
|
||||
|
||||
lists.forEach((item) => {
|
||||
images.push(item.response.result);
|
||||
});
|
||||
this.form.images = images;
|
||||
},
|
||||
//提交申请
|
||||
onSubmit() {
|
||||
//提交申请前检测参数
|
||||
if (!this.handleCheckParams()) {
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
this.form.accountType = this.applyInfo.accountType;
|
||||
this.form.refundWay = this.applyInfo.refundWay;
|
||||
this.form.applyRefundPrice = this.applyInfo.applyRefundPrice;
|
||||
|
||||
applyReturn(this.sn, this.form).then((resp) => {
|
||||
uni.hideLoading();
|
||||
if (resp.data.success) {
|
||||
this.$refs.uToast.show({ title: "提交成功", type: "success" });
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/afterSales/applySuccess",
|
||||
});
|
||||
} else {
|
||||
this.$refs.uToast.show({ title: resp.data.message, type: "error" });
|
||||
}
|
||||
});
|
||||
},
|
||||
// 验证银行卡号
|
||||
checkBankno(bankno) {
|
||||
var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位（与luhm进行比较）
|
||||
var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位
|
||||
var newArr = [];
|
||||
|
||||
for (var i = first15Num.length - 1; i > -1; i--) {
|
||||
//前15或18位倒序存进数组
|
||||
newArr.push(first15Num.substr(i, 1));
|
||||
}
|
||||
|
||||
var arrJiShu = []; //奇数位*2的积 <9
|
||||
var arrJiShu2 = []; //奇数位*2的积 >9
|
||||
var arrOuShu = []; //偶数位数组
|
||||
for (var j = 0; j < newArr.length; j++) {
|
||||
if ((j + 1) % 2 == 1) {
|
||||
//奇数位
|
||||
if (parseInt(newArr[j]) * 2 < 9)
|
||||
arrJiShu.push(parseInt(newArr[j]) * 2);
|
||||
else arrJiShu2.push(parseInt(newArr[j]) * 2);
|
||||
} //偶数位
|
||||
else arrOuShu.push(newArr[j]);
|
||||
}
|
||||
|
||||
var jishu_child1 = []; //奇数位*2 >9 的分割之后的数组个位数
|
||||
var jishu_child2 = []; //奇数位*2 >9 的分割之后的数组十位数
|
||||
for (var h = 0; h < arrJiShu2.length; h++) {
|
||||
jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
|
||||
jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
|
||||
}
|
||||
|
||||
var sumJiShu = 0; //奇数位*2 < 9 的数组之和
|
||||
var sumOuShu = 0; //偶数位数组之和
|
||||
var sumJiShuChild1 = 0; //奇数位*2 >9 的分割之后的数组个位数之和
|
||||
var sumJiShuChild2 = 0; //奇数位*2 >9 的分割之后的数组十位数之和
|
||||
var sumTotal = 0;
|
||||
for (var m = 0; m < arrJiShu.length; m++) {
|
||||
sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
|
||||
}
|
||||
for (var n = 0; n < arrOuShu.length; n++) {
|
||||
sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
|
||||
}
|
||||
for (var p = 0; p < jishu_child1.length; p++) {
|
||||
sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
|
||||
sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
|
||||
}
|
||||
//计算总和
|
||||
sumTotal =
|
||||
parseInt(sumJiShu) +
|
||||
parseInt(sumOuShu) +
|
||||
parseInt(sumJiShuChild1) +
|
||||
parseInt(sumJiShuChild2);
|
||||
//计算Luhm值
|
||||
var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
|
||||
var luhm = 10 - k;
|
||||
if (lastNum == luhm) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
//检测提交参数
|
||||
handleCheckParams() {
|
||||
console.log(this.form.accountType);
|
||||
if (this.$u.test.isEmpty(this.form.reason)) {
|
||||
this.$refs.uToast.show({ title: "请选择 退款原因", type: "error" });
|
||||
return false;
|
||||
}
|
||||
if (this.$u.test.isEmpty(this.form.problemDesc)) {
|
||||
this.$refs.uToast.show({ title: "请输入 退款说明", type: "error" });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.form.accountType == "BANK_TRANSFER") {
|
||||
// 银行开户行校验
|
||||
if (this.$u.test.isEmpty(this.form.bankDepositName)) {
|
||||
this.$refs.uToast.show({
|
||||
title: "请输入 银行开户行",
|
||||
type: "error",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 银行开户名校验
|
||||
if (this.$u.test.isEmpty(this.form.bankAccountName)) {
|
||||
this.$refs.uToast.show({
|
||||
title: "请输入 银行开户名",
|
||||
type: "error",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 银行账号校验
|
||||
if (this.$u.test.isEmpty(this.form.bankAccountNumber)) {
|
||||
this.$refs.uToast.show({
|
||||
title: "请输入 银行账号",
|
||||
type: "error",
|
||||
});
|
||||
return false;
|
||||
} else if (this.checkBankno(this.form.bankAccountNumber) === false) {
|
||||
this.$refs.uToast.show({
|
||||
title: "银行卡卡号不正确",
|
||||
type: "error",
|
||||
});
|
||||
return false;
|
||||
} else if (this.$u.test.chinese(this.form.bankAccountName) === false) {
|
||||
this.$refs.uToast.show({
|
||||
title: "银行开户名输入错误",
|
||||
type: "error",
|
||||
});
|
||||
return false;
|
||||
} else if (this.$u.test.chinese(this.form.bankDepositName) === false) {
|
||||
this.$refs.uToast.show({
|
||||
title: "银行开户行输入错误",
|
||||
type: "error",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
showOrHide() {
|
||||
let flag = true;
|
||||
switch (this.form.serviceType) {
|
||||
case "CHANGE_GOODS":
|
||||
flag = false;
|
||||
break;
|
||||
case "SUPPLY_AGAIN_GOODS":
|
||||
flag = false;
|
||||
break;
|
||||
default:
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.body-view {
|
||||
margin-bottom: 150rpx;
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #fff;
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 70rpx;
|
||||
.header-text {
|
||||
background-color: #999999;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $light-color;
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.after-num {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.opt-tip {
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.opt-view {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
.how-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
border-bottom: 1px solid $page-color-base;
|
||||
}
|
||||
.explain-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 150rpx;
|
||||
}
|
||||
.img-title {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.images-view {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.item-apply-voucher {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.submit-view {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
margin-top: 100rpx;
|
||||
border: solid 2rpx #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
align-items: center;
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
255
pages/order/afterSales/afterSalesDetailExpress.vue
Normal file
255
pages/order/afterSales/afterSalesDetailExpress.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<view class="mp-iphonex-bottom content">
|
||||
<u-form :model="form" ref="uForm">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view class="header">
|
||||
<view>
|
||||
本次售后服务将由
|
||||
<text class="seller-name">{{ sku.storeName }}</text>
|
||||
为您提供
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="goods-item-view" @click="gotoGoodsDetail(sku.skuId)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.name }}</view>
|
||||
|
||||
<view class="goods-price">
|
||||
<!-- <span v-if="sku.point">￥{{ sku.subtotal }}+{{ sku.point }}积分</span> -->
|
||||
<span>￥{{ sku.price | unitPrice }}</span>
|
||||
|
||||
<span class="num">购买数量: {{ sku.num }} </span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y>
|
||||
<!-- 上传凭证 -->
|
||||
<view class="opt-view">
|
||||
<view class="img-title" style="font-size: 30rpx">填写物流信息</view>
|
||||
<u-form-item label="返回方式" :label-width="150">
|
||||
<u-input type="text" input-align="right" value="快递至第三方卖家" />
|
||||
</u-form-item>
|
||||
<u-form-item label="快递公司" :label-width="150">
|
||||
<u-input v-model="form.courier_company" type="select" input-align="right" :select-open="companySelectShow" @click="companySelectShow = true" placeholder="请选择快递公司" />
|
||||
</u-form-item>
|
||||
<u-form-item label="快递单号" :label-width="150">
|
||||
<u-input input-align="right" v-model="form.logisticsNo" placeholder="请输入快递单号" />
|
||||
</u-form-item>
|
||||
<u-form-item label="发货时间" :label-width="150">
|
||||
<u-input input-align="right" type="selects" disabled v-model="form.mDeliverTime" @click="timeshow = true" placeholder="请选择发货时间" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="submit-view">
|
||||
|
||||
<u-button ripple :customStyle="{'background':$lightColor,'color':'#fff' }" shape="circle" @click="onSubmit">提交申请</u-button>
|
||||
</view>
|
||||
</u-form>
|
||||
<u-select mode="single-column" :list="companyList" v-model="companySelectShow" @confirm="companySelectConfirm"></u-select>
|
||||
<u-calendar v-model="timeshow" :mode="'date'" @change="onTimeChange"></u-calendar>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLogistics } from "@/api/address.js";
|
||||
import { fillShipInfo } from "@/api/after-sale.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
typeValue: 0,
|
||||
value: "",
|
||||
type: "textarea",
|
||||
border: true,
|
||||
//快递公司 弹出框
|
||||
companySelectShow: false,
|
||||
companyList: [],
|
||||
timeshow: false,
|
||||
form: {
|
||||
courier_company: "",
|
||||
logisticsId: "", //快递公司ID
|
||||
logisticsNo: "", //快递单号
|
||||
mDeliverTime: "", //发货时间
|
||||
},
|
||||
serviceDetail: {},
|
||||
sku: {},
|
||||
};
|
||||
},
|
||||
onShow(options) {},
|
||||
onLoad(options) {
|
||||
|
||||
this.sku = JSON.parse(decodeURIComponent(options.sku));
|
||||
let navTitle = "服务单详情";
|
||||
uni.setNavigationBarTitle({
|
||||
title: navTitle, //此处写页面的title
|
||||
});
|
||||
this.serviceDetail.sn = options.serviceSn;
|
||||
this.Logistics();
|
||||
},
|
||||
methods: {
|
||||
//快递公司
|
||||
companySelectConfirm(e) {
|
||||
this.form.logisticsId = e[0].value;
|
||||
this.form.courier_company = e[0].label;
|
||||
},
|
||||
// 获取快递公司
|
||||
Logistics() {
|
||||
getLogistics().then((res) => {
|
||||
if (res.data.success) {
|
||||
res.data.result.forEach((item, index) => {
|
||||
this.companyList[index] = {
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
};
|
||||
});
|
||||
// this.companyList= res
|
||||
}
|
||||
});
|
||||
},
|
||||
onTimeChange(e) {
|
||||
this.form.mDeliverTime = e.result;
|
||||
},
|
||||
onSubmit() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
});
|
||||
delete this.form.courier_company;
|
||||
fillShipInfo(this.serviceDetail.sn, this.form).then((res) => {
|
||||
uni.hideLoading();
|
||||
if (res.statusCode === 200) {
|
||||
this.$refs.uToast.show({
|
||||
title: "提交成功",
|
||||
type: "success",
|
||||
back: true,
|
||||
url: "/pages/order/afterSales/afterSales",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.mp-iphonex-bottom{
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #fff;
|
||||
padding: 10rpx 0rpx;
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 70rpx;
|
||||
.header-text {
|
||||
background-color: #999999;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $light-color;
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.opt-view {
|
||||
background-color: #fff;
|
||||
padding: 40rpx 30rpx 0rpx 30rpx;
|
||||
|
||||
font-size: 26rpx;
|
||||
.how-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
border-bottom: 1px solid $page-color-base;
|
||||
}
|
||||
.explain-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 150rpx;
|
||||
}
|
||||
.img-title {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.images-view {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.submit-view {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: 10px;
|
||||
left: 0px;
|
||||
margin-top: 100rpx;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
align-items: center;
|
||||
padding: 0rpx 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
193
pages/order/afterSales/afterSalesSelect.vue
Normal file
193
pages/order/afterSales/afterSalesSelect.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view class="header">
|
||||
<view>
|
||||
本次售后服务将由
|
||||
<text class="seller-name">{{ sku.storeName }}</text>
|
||||
为您提供
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="goods-item-view" v-for="(item,index) in sku.orderItems" v-if="item.sn == sn" @click="gotoGoodsDetail(sku.skuId)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ item.name }}</view>
|
||||
<view class="goods-price">
|
||||
<!-- <span v-if="sku.point">￥{{ sku.subtotal }}+{{ sku.point }}积分</span> -->
|
||||
|
||||
<span v-if="sku.orderItems.length <= 1">￥{{ sku.flowPrice }}</span>
|
||||
<span class="num" v-else>购买数量{{item.num}}</span>
|
||||
|
||||
<span v-if="sku.orderItems.length <= 1" class="num">购买数量: {{ item.num }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="select-view">
|
||||
<view class="select-cell" @click="onSelect(1)">
|
||||
<view class="select-image">
|
||||
<image style="height: 51rpx; width: 51rpx" src="/static/order/t1.png"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="select-title">退货</view>
|
||||
<view class="select-sub-title">
|
||||
退回收到的商品
|
||||
<uni-icons color="#BABABA" type="arrowright"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-cell" @click="onSelect(3)">
|
||||
<view class="select-image">
|
||||
<image style="height: 51rpx; width: 51rpx" src="/static/order/t3.png"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="select-title">退款</view>
|
||||
<view class="select-sub-title">
|
||||
退款商品返还金额
|
||||
<uni-icons color="#BABABA" type="arrowright"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UniIcons from "@/components/uni-icons/uni-icons.vue";
|
||||
export default {
|
||||
components: {
|
||||
UniIcons,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sn: "",
|
||||
applyInfo: {},
|
||||
sku: {},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.sn = options.sn;
|
||||
let dData = decodeURIComponent(options.sku);
|
||||
let newData = JSON.parse(dData);
|
||||
this.sku = newData;
|
||||
},
|
||||
methods: {
|
||||
onSelect(value) {
|
||||
uni.redirectTo({
|
||||
url: `./afterSalesDetail?sn=${this.sn}&sku=${encodeURIComponent(
|
||||
JSON.stringify(this.sku)
|
||||
)}&value=${value}`,
|
||||
});
|
||||
},
|
||||
gotoGoodsDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${id}&goodsId=${goodsId}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #fff;
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 70rpx;
|
||||
.header-text {
|
||||
background-color: #999999;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
.goods-img {
|
||||
}
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $light-color;
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-view {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
.select-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0rpx 20rpx;
|
||||
line-height: 110rpx;
|
||||
border-bottom: 1px solid $page-color-base;
|
||||
.select-image {
|
||||
width: 51rpx;
|
||||
height: 110rpx;
|
||||
line-height: 110rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.select-title {
|
||||
margin-left: 18rpx;
|
||||
color: #666666;
|
||||
width: 200rpx;
|
||||
}
|
||||
.select-sub-title {
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
pages/order/afterSales/applyCancel.vue
Normal file
298
pages/order/afterSales/applyCancel.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="cancel-head">
|
||||
<u-cell-group>
|
||||
<u-cell-item title="未收货" :arrow="false">
|
||||
<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="NO" @click="radioChange('NO')"></u-radio></u-radio-group>
|
||||
</u-cell-item>
|
||||
<u-cell-item title="已收货" v-if="applyService" :arrow="false">
|
||||
<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="YES" @click="radioChange('YES')"></u-radio></u-radio-group>
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<view class="cancle-body" v-if="rog === 'NO'">
|
||||
<view class="cancel-tips">
|
||||
<view class="tips-header">温馨提示：</view>
|
||||
<view>1. 订单取消后无法恢复;</view>
|
||||
<view>2. 订单取消后，使用的优惠券将不再返还，积分可以退回;</view>
|
||||
<view>3. 订单取消后，订单中的赠品要随商品一起返还给商家;</view>
|
||||
</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="退款方式" value="原路退回" :arrow="false" v-if="isRetrace"></u-cell-item>
|
||||
<u-cell-item title="退款方式" value="账号退款" :arrow="false" v-else></u-cell-item>
|
||||
<u-cell-item title="退款金额" :value="refund_info.refund_price" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="取消原因" :value="refund_info.reason" @click="handleShowReason" :arrow="true" arrow-direction="down" required></u-cell-item>
|
||||
<u-action-sheet :list="reasonSelectActions" v-model="reasonSelectShow" @click="onSelectReason"></u-action-sheet>
|
||||
<view v-if="!isRetrace">
|
||||
<u-cell-item title="账户类型" :value="accountTypeText" @click="handleShowAccountType" :arrow="true" arrow-direction="down" required></u-cell-item>
|
||||
<u-action-sheet :list="accountTypeSelectActions" v-model="accountTypeSelectShow" @click="onSelectAccountType"></u-action-sheet>
|
||||
<view v-if="refund_info.account_type === 'BANK_TRANSFER'">
|
||||
<u-field v-model="refund_info.bank_name" required clearable label="银行名称" input-align="right" placeholder="请输入银行名称"></u-field>
|
||||
<u-field v-model="refund_info.bank_deposit_name" label-width="150" required clearable label="银行开户行" input-align="right" placeholder="请输入银行开户行"></u-field>
|
||||
<u-field v-model="refund_info.bank_account_name" label-width="150" required clearable label="银行开户名" input-align="right" placeholder="请输入银行开户名"></u-field>
|
||||
<u-field v-model="refund_info.bank_account_number" required clearable label="银行账号" input-align="right" placeholder="请输入银行账号"></u-field>
|
||||
</view>
|
||||
<u-field v-model="refund_info.return_account" required clearable label="退款账号" input-align="right" placeholder="请输入退款账号"></u-field>
|
||||
</view>
|
||||
<u-field v-model="refund_info.mobile" required clearable label="联系方式" input-align="right" placeholder="请输入手机号码"></u-field>
|
||||
</u-cell-group>
|
||||
<view class="submit-btn">
|
||||
<u-button shape="circle" class="cancel-btn" @click="handleCancelSubmit">取消</u-button>
|
||||
<u-button shape="circle" class="main-btn" @click="handleSubmitApply">提交</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-body" v-else>
|
||||
<view class="cancel-tips">
|
||||
<view class="tips-header">温馨提示：</view>
|
||||
<view>1. 当前订单还未确认收货，如果申请售后，则订单自动确认收货;</view>
|
||||
<view>2. 如申请售后，使用的优惠券和积分等将不再返还;</view>
|
||||
<view>3. 订单中的赠品要随申请售后的商品一起返还给商家;</view>
|
||||
</view>
|
||||
<view class="submit-btn"><u-button shape="circle" class="main-btn" @click="handleApplyService">申请售后</u-button></view>
|
||||
</view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Foundation from '@/utils/Foundation.js';
|
||||
import RegExp from '@/utils/RegExp.js';
|
||||
import { applyCancelOrder } from '@/api/after-sale.js';
|
||||
import { confirmReceipt, getOrderDetail } from '@/api/order.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
/** 订单编号 */
|
||||
order_sn: 0,
|
||||
/** 订单详细 */
|
||||
order: '',
|
||||
/** 是否允许申请售后 */
|
||||
applyService: false,
|
||||
/** 是否已收货 */
|
||||
rog: 'NO',
|
||||
/** 是否支持原路退款 */
|
||||
isRetrace: false,
|
||||
/** 申请取消订单参数 */
|
||||
refund_info: {
|
||||
reason: '请选择取消原因',
|
||||
mobile: '',
|
||||
account_type: '',
|
||||
return_account: '',
|
||||
refund_price: 0.0
|
||||
},
|
||||
/** 是否展示取消原因下拉框 */
|
||||
reasonSelectShow: false,
|
||||
/** 取消原因下拉框数据 */
|
||||
reasonSelectActions: [
|
||||
{ text: '商品无货' },
|
||||
{ text: '配送时间问题' },
|
||||
{ text: '不想要了' },
|
||||
{ text: '商品信息填写错误' },
|
||||
{ text: '地址信息填写错误' },
|
||||
{ text: '商品降价' },
|
||||
{ text: '货物破损已拒签' },
|
||||
{ text: '订单无物流跟踪记录' },
|
||||
{ text: '非本人签收' },
|
||||
{ text: '其他' }
|
||||
],
|
||||
/** 账户类型下拉框选中的值 */
|
||||
accountTypeText: '请选择账户类型',
|
||||
/** 是否展示账户类型下拉框 */
|
||||
accountTypeSelectShow: false,
|
||||
/** 账户类型下拉框数据 */
|
||||
accountTypeSelectActions: [{ text: '支付宝', value: 'ALIPAY' }, { text: '微信', value: 'WEIXINPAY' }, { text: '银行卡', value: 'BANK_TRANSFER' }]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.order_sn = options.sn;
|
||||
this.GET_OrderCancelDetail();
|
||||
},
|
||||
methods: {
|
||||
// 选中任一radio时，由radio-group触发
|
||||
radioChange(e) {
|
||||
this.rog = e;
|
||||
},
|
||||
/** 展示申请原因上拉框事件绑定 */
|
||||
handleShowReason() {
|
||||
this.reasonSelectShow = true;
|
||||
},
|
||||
|
||||
/** 申请原因选中事件绑定 */
|
||||
onSelectReason(index) {
|
||||
this.reasonSelectShow = false;
|
||||
this.refund_info.reason = this.reasonSelectActions[index].text;
|
||||
},
|
||||
|
||||
/** 展示账户类型上拉框事件绑定 */
|
||||
handleShowAccountType() {
|
||||
this.accountTypeSelectShow = true;
|
||||
},
|
||||
|
||||
/** 账户类型选中事件绑定 */
|
||||
onSelectAccountType(index) {
|
||||
this.accountTypeSelectShow = false;
|
||||
this.accountTypeText = this.accountTypeSelectActions[index].text;
|
||||
this.refund_info.account_type = this.accountTypeSelectActions[index].value;
|
||||
},
|
||||
|
||||
/** 跳转至订单列表页面 */
|
||||
handleCancelSubmit() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/myOrder?status=0'
|
||||
});
|
||||
},
|
||||
|
||||
/** 申请售后 */
|
||||
handleApplyService() {
|
||||
confirmReceipt(this.order_sn).then(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/afterSales/afterSales'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/** 校验参数 */
|
||||
handleCheckParams() {
|
||||
// 取消原因校验
|
||||
if (!this.refund_info.reason || this.refund_info.reason === '请选择取消原因') {
|
||||
this.$refs.uToast.show({ title: '请选择取消原因!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
// 联系方式校验
|
||||
if (!this.refund_info.mobile || !this.$u.test.mobile(this.refund_info.mobile)) {
|
||||
this.$refs.uToast.show({ title: '请输入正确格式的手机号码!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 如果不支持原路退款
|
||||
if (!this.isRetrace) {
|
||||
// 账户类型校验
|
||||
if (!this.refund_info.account_type) {
|
||||
this.$refs.uToast.show({ title: '请选择账户类型!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 如果账户类型不为银行卡
|
||||
if (this.refund_info.account_type != 'BANK_TRANSFER') {
|
||||
// 退款账号校验
|
||||
if (!this.refund_info.return_account) {
|
||||
this.$refs.uToast.show({ title: '请输入退款账号!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
// 银行名称校验
|
||||
if (!this.refund_info.bank_name) {
|
||||
this.$refs.uToast.show({ title: '请输入银行名称!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
// 银行开户行校验
|
||||
if (!this.refund_info.bank_deposit_name) {
|
||||
this.$refs.uToast.show({ title: '请输入银行开户行!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
// 银行开户名校验
|
||||
if (!this.refund_info.bank_account_name) {
|
||||
this.$refs.uToast.show({ title: '请输入银行开户名!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
// 银行账号校验
|
||||
if (!this.refund_info.bank_account_number) {
|
||||
this.$refs.uToast.show({ title: '请输入银行账号!', type: 'error' });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
/** 提交取消订单申请 */
|
||||
handleSubmitApply() {
|
||||
// 校验参数
|
||||
if (!this.handleCheckParams()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.refund_info.order_sn = this.order_sn;
|
||||
|
||||
applyCancelOrder(this.refund_info).then(() => {
|
||||
this.$refs.uToast.show({ title: '提交成功!', type: 'success' });
|
||||
this.handleCancelSubmit();
|
||||
});
|
||||
},
|
||||
|
||||
/** 获取订单详情信息 */
|
||||
GET_OrderCancelDetail() {
|
||||
getOrderDetail(this.order_sn).then(response => {
|
||||
this.order = response.data;
|
||||
this.isRetrace = this.order.is_retrace;
|
||||
this.refund_info.refund_price = Foundation.formatPrice(this.order.order_price);
|
||||
this.applyService = this.order.order_status === 'SHIPPED' && this.order.ship_status === 'SHIP_YES';
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-cell {
|
||||
// #ifdef MP-WEIXIN
|
||||
width: 100vw !important;
|
||||
overflow: hidden !important;
|
||||
display: block !important;
|
||||
|
||||
// #endif
|
||||
}
|
||||
/deep/ .u-cell_title{
|
||||
// #ifdef MP-WEIXIN
|
||||
float: left;
|
||||
// #endif
|
||||
}
|
||||
/deep/ .u-cell__value{
|
||||
// #ifdef MP-WEIXIN
|
||||
float: right;
|
||||
// #endif
|
||||
}
|
||||
|
||||
.cancel-head {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.submit-btn {
|
||||
display: flex;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cancel-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC, PingFang SC-Regular;
|
||||
color: #999999;
|
||||
view {
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
.tips-header {
|
||||
color: #ff6262;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
}
|
||||
.main-btn {
|
||||
width: 40%;
|
||||
background-color: $light-color;
|
||||
color: #ffffff;
|
||||
}
|
||||
.cancel-btn {
|
||||
margin-right: 30px;
|
||||
width: 40%;
|
||||
border-color: $light-color;
|
||||
color: $light-color;
|
||||
}
|
||||
</style>
|
||||
592
pages/order/afterSales/applyDetail.vue
Normal file
592
pages/order/afterSales/applyDetail.vue
Normal file
@@ -0,0 +1,592 @@
|
||||
<template>
|
||||
<view v-if="serviceDetail">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view class="header">
|
||||
<view>
|
||||
本次售后服务将由
|
||||
<text class="seller-name">{{ serviceDetail.storeName }}</text>
|
||||
为您提供
|
||||
</view>
|
||||
</view>
|
||||
<view class="apply-info-view">
|
||||
<view class="status-info">
|
||||
<view class="status-info-box">
|
||||
<view class="status-val">{{
|
||||
serviceStatusList[serviceDetail.serviceStatus]
|
||||
}}</view>
|
||||
<!-- <view class="status-tip" v-if="allowable.allow_ship"
|
||||
>请您尽快将申请售后的商品退还给卖家</view
|
||||
> -->
|
||||
<view class="status-tip">{{
|
||||
serviceDetail.serviceStatus | statusFilter
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="log-box-bottom"></view>
|
||||
<view class="log-box-top" @click="onProgress()">
|
||||
<view class="top01">
|
||||
<view>审核日志</view>
|
||||
<view class="log-first-show" v-if="logs[0]">{{
|
||||
logs[0].message
|
||||
}}</view>
|
||||
</view>
|
||||
<uni-icons type="arrowright" style="margin-right: 5px"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="info-box">
|
||||
<view class="goods-item-view" @click="gotoGoodsDetail(serviceDetail)">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="serviceDetail.goodsImage"></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{
|
||||
serviceDetail.goodsName
|
||||
}}</view>
|
||||
|
||||
<view class="goods-price">
|
||||
<view class="price"> ￥{{ serviceDetail.flowPrice | unitPrice }}</view>
|
||||
<view>
|
||||
<view>申请售后数量：{{ serviceDetail.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="apply-detail-view">
|
||||
<view class="detail-item">
|
||||
<view class="title">服务单号:</view>
|
||||
<view class="value">{{ serviceDetail.sn }}</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="title">订单编号:</view>
|
||||
<view class="value">{{ serviceDetail.orderSn }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.new_order_sn">
|
||||
<view class="title">新订单编号:</view>
|
||||
<view class="value">{{ serviceDetail.new_order_sn }}</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="title">服务类型:</view>
|
||||
<view class="value">{{
|
||||
serviceTypeList[serviceDetail.serviceType]
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<view class="title">申请原因:</view>
|
||||
<view class="value">{{ serviceDetail.reason }}</view>
|
||||
</view>
|
||||
<!-- <view class="detail-item" v-if="serviceDetail.apply_vouchers">
|
||||
<view class="title">申请凭证:</view>
|
||||
<view class="value">{{ serviceDetail.apply_vouchers }}</view>
|
||||
</view> -->
|
||||
<view class="detail-item" v-if="serviceDetail.problemDesc">
|
||||
<view class="title">问题描述:</view>
|
||||
<view class="value">{{ serviceDetail.problemDesc }}</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-item" v-if="
|
||||
serviceDetail.afterSaleImage &&
|
||||
serviceDetail.afterSaleImage.split(',').length != 0
|
||||
">
|
||||
<image :src="img" @click="preview(serviceDetail.afterSaleImage.split(','), index)" v-for="(img, index) in serviceDetail.afterSaleImage.split(',')" :key="index"
|
||||
style="width: 50px; height: 50px; margin: 0px 5px"></image>
|
||||
</view>
|
||||
<!-- 如果服务类型为退款则不显示 -->
|
||||
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
|
||||
<view class="title">收货地址:</view>
|
||||
<view class="value">
|
||||
<span v-if="change_info.salesConsigneeAddressPath">{{
|
||||
change_info.salesConsigneeAddressPath
|
||||
}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 如果服务类型为退款则不显示 -->
|
||||
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
|
||||
<view class="title">联系人:</view>
|
||||
<view class="value">{{ change_info.salesConsigneeName }}</view>
|
||||
</view>
|
||||
<!-- 如果服务类型为退款则不显示 -->
|
||||
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
|
||||
<view class="title">联系方式:</view>
|
||||
<view class="value">{{
|
||||
change_info.salesConsigneeMobile || "" | secrecyMobile
|
||||
}}</view>
|
||||
</view>
|
||||
<view v-if="refundShow">
|
||||
<view class="detail-item">
|
||||
<view class="title">退款金额:</view>
|
||||
<view class="value">{{
|
||||
serviceDetail.flowPrice | unitPrice("￥")
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.agree_price">
|
||||
<view class="title">同意退款:</view>
|
||||
<view class="value">{{
|
||||
serviceDetail.agree_price | unitPrice("￥")
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.actual_price">
|
||||
<view class="title">实际退款:</view>
|
||||
<view class="value">{{
|
||||
serviceDetail.actual_price | unitPrice("￥")
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.actual_price">
|
||||
<view class="title">退款时间:</view>
|
||||
<view class="value">{{
|
||||
serviceDetail.refund_time | unixToDate
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.refund_price !== 0">
|
||||
<view class="title">退款方式:</view>
|
||||
<view class="value">{{
|
||||
serviceDetail.refundWay | refundWayFilter
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="accountShow && serviceDetail.refund_price != 0">
|
||||
<view class="title">账户类型:</view>
|
||||
<view class="value">{{
|
||||
serviceDetail.accountType | accountTypeFilter
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="
|
||||
accountShow && !bankShow && serviceDetail.actualRefundPrice != 0
|
||||
">
|
||||
<view class="title">退款账号:</view>
|
||||
<view class="value">{{ serviceDetail.bankAccountNumber }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="bankShow">
|
||||
<view class="title">银行名称:</view>
|
||||
<view class="value">{{ serviceDetail.bankAccountName }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="bankShow">
|
||||
<view class="title">银行账号:</view>
|
||||
<view class="value">{{ serviceDetail.bankAccountNumber }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="bankShow">
|
||||
<view class="title">银行开户名:</view>
|
||||
<view class="value">{{ serviceDetail.bankAccountName }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="bankShow">
|
||||
<view class="title">银行开户行:</view>
|
||||
<view class="value">{{ serviceDetail.bankDepositName }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.mlogisticsName">
|
||||
<view class="title">回寄快递:</view>
|
||||
<view class="value">{{ serviceDetail.mlogisticsName }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.mlogisticsNo">
|
||||
<view class="title">回寄运单号:</view>
|
||||
<view class="value">{{ serviceDetail.mlogisticsNo }}</view>
|
||||
</view>
|
||||
<view class="detail-item" v-if="serviceDetail.mDeliverTime">
|
||||
<view class="title">回寄时间:</view>
|
||||
<view class="value">{{ serviceDetail.mDeliverTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- <view class="submit-view">
|
||||
<view>在线客服</view>
|
||||
<view><u-button type="info" shape="circle" size="mini">撤销申请</u-button></view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getServiceDetail,
|
||||
getstoreAfterSaleAddress,
|
||||
getAfterSaleLog,
|
||||
} from "@/api/after-sale.js";
|
||||
import UniIcons from "@/components/uni-icons/uni-icons.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UniIcons,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 售后单状态
|
||||
serviceStatusList: {
|
||||
APPLY: "申请售后",
|
||||
PASS: "通过售后",
|
||||
REFUSE: "拒绝售后",
|
||||
BUYER_RETURN: "买家退货，待卖家收货",
|
||||
SELLER_RE_DELIVERY: "商家换货/补发",
|
||||
SELLER_CONFIRM: "卖家确认收货",
|
||||
SELLER_TERMINATION: "卖家终止售后",
|
||||
BUYER_CONFIRM: "买家确认收货",
|
||||
BUYER_CANCEL: "买家取消售后",
|
||||
WAIT_REFUND: "等待平台退款",
|
||||
COMPLETE: "完成售后",
|
||||
},
|
||||
// 售后类型
|
||||
serviceTypeList: {
|
||||
CANCEL: "取消",
|
||||
RETURN_GOODS: "退货",
|
||||
EXCHANGE_GOODS: "换货",
|
||||
RETURN_MONEY: "退款",
|
||||
},
|
||||
|
||||
orderStatusList: {
|
||||
UNDELIVERED: "待发货",
|
||||
UNPAID: "未付款",
|
||||
PAID: "已付款",
|
||||
DELIVERED: "已发货",
|
||||
CANCELLED: "已取消",
|
||||
COMPLETE: "已完成",
|
||||
TAKE: "已完成",
|
||||
},
|
||||
serviceDetail: {},
|
||||
logs: [],
|
||||
allowable: {},
|
||||
goodsList: [],
|
||||
change_info: {},
|
||||
serviceDetail: {},
|
||||
express_info: {},
|
||||
imagesList: [],
|
||||
refundShow: false,
|
||||
accountShow: false,
|
||||
bankShow: false,
|
||||
returnAdressShow: true,
|
||||
shipInfoShow: false,
|
||||
sn: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: "服务单详情",
|
||||
});
|
||||
this.sn = options.sn;
|
||||
this.loadDetail();
|
||||
this.getAddress();
|
||||
this.getLog(options.sn);
|
||||
},
|
||||
filters: {
|
||||
statusFilter(val) {
|
||||
switch (val) {
|
||||
case "APPLY":
|
||||
return "售后服务申请成功，等待商家审核";
|
||||
case "PASS":
|
||||
return "售后服务申请审核通过";
|
||||
case "REFUSE":
|
||||
return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
|
||||
case "FULL_COURIER":
|
||||
return "申请售后的商品已经寄出，等待商家收货";
|
||||
case "STOCK_IN":
|
||||
return "商家已将售后商品入库";
|
||||
case "WAIT_FOR_MANUAL":
|
||||
return "等待平台进行人工退款";
|
||||
case "REFUNDING":
|
||||
return "商家退款中，请您耐心等待";
|
||||
case "COMPLETED":
|
||||
return "售后服务已完成，感谢您的支持";
|
||||
case "ERROR_EXCEPTION":
|
||||
return "系统生成新订单异常，等待商家手动创建新订单";
|
||||
case "CLOSED":
|
||||
return "售后服务已关闭";
|
||||
case "WAIT_REFUND":
|
||||
return "等待平台进行退款";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
refundWayFilter(val) {
|
||||
switch (val) {
|
||||
case "OFFLINE":
|
||||
return "账户退款";
|
||||
case "OFFLINE":
|
||||
return "线下退款";
|
||||
case "ORIGINAL":
|
||||
return "原路退回";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
accountTypeFilter(val) {
|
||||
switch (val) {
|
||||
case "WEIXINPAY":
|
||||
return "微信";
|
||||
case "ALIPAY":
|
||||
return "支付宝";
|
||||
case "BANK_TRANSFER":
|
||||
return "银行卡";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
preview(urls, index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
getAddress() {
|
||||
getstoreAfterSaleAddress(this.sn).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.change_info = res.data.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
getLog(sn) {
|
||||
getAfterSaleLog(sn).then((res) => {
|
||||
this.logs = res.data.result;
|
||||
});
|
||||
},
|
||||
loadDetail() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
getServiceDetail(this.sn).then((res) => {
|
||||
uni.hideLoading();
|
||||
this.serviceDetail = res.data.result;
|
||||
this.allowable = this.serviceDetail.allowable;
|
||||
|
||||
this.express_info = this.serviceDetail.express_info;
|
||||
if (this.serviceDetail.serviceType == "RETURN_GOODS") {
|
||||
this.refundShow = true;
|
||||
}
|
||||
|
||||
this.accountShow =
|
||||
(this.serviceDetail.serviceType === "RETURN_GOODS" ||
|
||||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
|
||||
this.serviceDetail.refundWay === "OFFLINE";
|
||||
this.bankShow =
|
||||
(this.serviceDetail.serviceType === "RETURN_GOODS" ||
|
||||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
|
||||
this.serviceDetail.refundWay === "OFFLINE" &&
|
||||
this.serviceDetail.accountType === "BANK_TRANSFER";
|
||||
});
|
||||
},
|
||||
gotoGoodsDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
onProgress() {
|
||||
uni.navigateTo({
|
||||
url: `./applyProgress?sn=${
|
||||
this.serviceDetail.sn
|
||||
}&createTime=${encodeURIComponent(this.serviceDetail.createTime)}
|
||||
&logs=${encodeURIComponent(JSON.stringify(this.logs))}&serviceStatus=${
|
||||
this.serviceDetail.serviceStatus
|
||||
}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #fff;
|
||||
.header {
|
||||
background-color: #f7f7f7;
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 70rpx;
|
||||
.header-text {
|
||||
background-color: #999999;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.apply-info-view {
|
||||
background: $page-color-base;
|
||||
}
|
||||
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.price {
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.after-num {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
.apply-detail-view {
|
||||
background-color: #f7f7f7;
|
||||
margin-top: 10rpx;
|
||||
padding: 20rpx;
|
||||
color: #666666;
|
||||
|
||||
.detail-item {
|
||||
padding: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.title {
|
||||
padding-left: 10rpx;
|
||||
width: 140rpx;
|
||||
}
|
||||
.value {
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit-view {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
margin-top: 100rpx;
|
||||
border: solid 2rpx #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
padding: 0rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.addr-title {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
border-bottom: 2rpx solid #d6d6d6;
|
||||
}
|
||||
.addr-info {
|
||||
padding: 50rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.log-box-bottom {
|
||||
height: 120rpx;
|
||||
flex-direction: column;
|
||||
background-color: rgb(247, 247, 247);
|
||||
}
|
||||
.log-box-top {
|
||||
height: 153rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: rgb(255, 255, 255);
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
left: 0rpx;
|
||||
right: 0rpx;
|
||||
bottom: 0rpx;
|
||||
margin-left: 22rpx;
|
||||
margin-right: 22rpx;
|
||||
margin-top: 22rpx;
|
||||
border-radius: 22rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 52rpx;
|
||||
padding-top: 52rpx;
|
||||
padding-left: 32rpx;
|
||||
|
||||
.top01 {
|
||||
width: 90%;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 28rpx;
|
||||
line-height: 30rpx;
|
||||
color: rgb(46, 45, 45);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
|
||||
.log-first-show {
|
||||
flex-direction: row;
|
||||
margin-top: 16rpx;
|
||||
margin-right: 44rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 22rpx;
|
||||
color: rgb(140, 140, 140);
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-info {
|
||||
flex-direction: row;
|
||||
background-color: $light-color;
|
||||
|
||||
.status-info-box {
|
||||
height: 180rpx;
|
||||
flex-direction: row;
|
||||
padding-left: 54rpx;
|
||||
padding-right: 54rpx;
|
||||
padding-top: 20rpx;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
line-height: 50rpx;
|
||||
|
||||
.status-val {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.status-tip {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-box {
|
||||
padding-right: 40rpx 0rpx;
|
||||
background-color: #eef1f2;
|
||||
}
|
||||
</style>
|
||||
141
pages/order/afterSales/applyProgress.vue
Normal file
141
pages/order/afterSales/applyProgress.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="info-view">
|
||||
<view class="header-title-view">
|
||||
<view class="title">售后单号:</view>
|
||||
<view>{{ sn }}</view>
|
||||
</view>
|
||||
<view class="header-title-view">
|
||||
<view class="title">申请时间:</view>
|
||||
<view>{{ createTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-view">
|
||||
<view class="header-title-view">
|
||||
<view>{{ serviceStatus }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-view">
|
||||
<view>
|
||||
<u-time-line v-if="list.length != 0">
|
||||
<u-time-line-item>
|
||||
|
||||
<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
|
||||
<template v-slot:content>
|
||||
<view v-for="(time,index) in list" :key="index">
|
||||
<view class="u-order-desc">{{time.message}}</view>
|
||||
<view class="u-order-time">{{time.createTime}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-time-line-item>
|
||||
</u-time-line>
|
||||
<view v-else>
|
||||
<u-empty text="暂无审核日志"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UEmpty from "@/uview-ui/components/u-empty/u-empty.vue";
|
||||
export default {
|
||||
components: {
|
||||
UEmpty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sn: "",
|
||||
createTime: "",
|
||||
list: [],
|
||||
serviceStatus: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.sn = options.sn;
|
||||
this.createTime = decodeURIComponent(options.createTime);
|
||||
this.serviceStatus = this.statusFilter(options.serviceStatus);
|
||||
this.list = JSON.parse(decodeURIComponent(options.logs));
|
||||
console.log(options.logs);
|
||||
// list.forEach(res => {
|
||||
// res.log_time_str = this.$u.timeFormat(res.log_time, 'yyyy-mm-dd hh:MM:ss');
|
||||
// })
|
||||
// this.list = list;
|
||||
},
|
||||
methods: {
|
||||
statusFilter(val) {
|
||||
switch (val) {
|
||||
case "APPLY":
|
||||
return "售后服务申请成功，等待商家审核";
|
||||
case "PASS":
|
||||
return "售后服务申请审核通过";
|
||||
case "REFUSE":
|
||||
return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
|
||||
case "FULL_COURIER":
|
||||
return "申请售后的商品已经寄出，等待商家收货";
|
||||
case "STOCK_IN":
|
||||
return "商家已将售后商品入库";
|
||||
case "WAIT_FOR_MANUAL":
|
||||
return "等待平台进行人工退款";
|
||||
case "REFUNDING":
|
||||
return "商家退款中，请您耐心等待";
|
||||
case "COMPLETED":
|
||||
return "售后服务已完成，感谢您的支持";
|
||||
case "ERROR_EXCEPTION":
|
||||
return "系统生成新订单异常，等待商家手动创建新订单";
|
||||
case "CLOSED":
|
||||
return "售后服务已关闭";
|
||||
case "WAIT_REFUND":
|
||||
return "等待平台进行退款";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-order-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.info-view {
|
||||
margin: 20rpx 0;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
|
||||
.header-title-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #909399;
|
||||
|
||||
.title {
|
||||
width: 160rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #909399;
|
||||
border-bottom: 1px solid $page-color-base;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.title {
|
||||
width: 160rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
pages/order/afterSales/applySuccess.vue
Normal file
81
pages/order/afterSales/applySuccess.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<u-icon name='checkmark' size="150" color="#ff6b35"></u-icon>
|
||||
<view class="success-text">售后申请提交成功</view>
|
||||
<view class="btn-view">
|
||||
<view class="btn-item">
|
||||
<u-button ripple class="btn1" shape="circle" @click="toMenu()">查看记录</u-button>
|
||||
</view>
|
||||
<view class="btn-item">
|
||||
<u-button ripple class="btn2" shape="circle" @click="toHome()">回到主页</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-view">
|
||||
<view style="display: flex; margin-bottom: 20rpx; align-items: center">温馨提示：</view>
|
||||
<view>• 商品寄回地址将在审核通过后在申请记录中查询。</view>
|
||||
<view>• 提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。</view>
|
||||
<view>• 退货处理成功后退款金额将原路返回到您的支持账户中；</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
toMenu() {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/afterSales/afterSales",
|
||||
});
|
||||
},
|
||||
toHome() {
|
||||
uni.switchTab({
|
||||
url: "/pages/tabbar/home/index",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: $page-color-base;
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
.btn1 {
|
||||
background: $light-color;
|
||||
color: #fff;
|
||||
}
|
||||
.btn2 {
|
||||
color: $light-color;
|
||||
}
|
||||
.header {
|
||||
background-color: #fff;
|
||||
height: 500rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.success-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 400;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
.btn-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 40rpx 0rpx;
|
||||
.btn-item {
|
||||
margin: 0rpx 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-view {
|
||||
margin: 40rpx;
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
223
pages/order/complain/complain.vue
Normal file
223
pages/order/complain/complain.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 商品模块 -->
|
||||
<view class="seller-view">
|
||||
<view class="seller-info u-flex u-row-between">
|
||||
<view class="seller-name">
|
||||
<view class="name">{{ order.storeName || "" }}</view>
|
||||
<view class="status">{{ orderStatusList[order.orderStatus] }}</view>
|
||||
</view>
|
||||
<view class="order-sn"></view>
|
||||
</view>
|
||||
<u-line color="#DCDFE6"></u-line>
|
||||
<view class="goods-item-view" v-for="(sku, index) in orderGoodsList" :key="index" v-if="sku.skuId == skuId">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.goodsName }}</view>
|
||||
|
||||
<view class="goods-price">
|
||||
￥{{ sku.flowPrice | unitPrice }}
|
||||
<!-- <span>+{{ '1' }}积分</span> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-num">
|
||||
<view>x{{ sku.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 投诉主题 -->
|
||||
<u-select @confirm="confirmComplain" v-model="complainShow" :list="complainList"></u-select>
|
||||
<!-- 投诉模块 -->
|
||||
<view class="cell">
|
||||
<view class="cell-item between" @click="complainShow = true">
|
||||
<view class="cell-title"> 投诉主题 </view>
|
||||
<view class="cell-view"> {{ complainTopic }} </view>
|
||||
<u-icon style="margin-left: 20rpx" name="arrow-down"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="cell-item complain-content">
|
||||
<view class="cell-title title"> 投诉内容 </view>
|
||||
<view class="cell-view content">
|
||||
<u-input type="textarea" height="70rpx" auto-height v-model="complainValue" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell-item">
|
||||
<view class="cell-title"> 投诉凭证 </view>
|
||||
<view class="cell-view">
|
||||
<u-upload ref="uUpload" :header=" { accessToken: storage.getAccessToken() }" upload-text="" :show-progress="false" :action="action" width="100" @on-uploaded="onUploaded" :max-count="5"></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit-btn" @click="handleSumit">提交</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js";
|
||||
import { getOrderDetail } from "@/api/order.js";
|
||||
import { getComplainReason, addComplain } from "@/api/after-sale.js";
|
||||
import { upload } from "@/api/common.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storage,
|
||||
action: upload,
|
||||
orderStatusList: {
|
||||
UNDELIVERED: "待发货",
|
||||
UNPAID: "未付款",
|
||||
PAID: "已付款",
|
||||
DELIVERED: "已发货",
|
||||
CANCELLED: "已取消",
|
||||
COMPLETE: "已完成",
|
||||
TAKE: "已完成",
|
||||
},
|
||||
complainValue: "", //投诉内容
|
||||
complainShow: false, //投诉主题开关
|
||||
complainTopic: "",
|
||||
// 投诉列表
|
||||
complainList: [],
|
||||
images: [],
|
||||
order: "",
|
||||
orderGoodsList: "",
|
||||
orderDetail: "",
|
||||
sn: "",
|
||||
skuId: "",
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option);
|
||||
this.loadData(option.sn);
|
||||
this.sn = option.sn;
|
||||
this.skuId = option.skuId;
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getReasion();
|
||||
},
|
||||
methods: {
|
||||
onUploaded(lists) {
|
||||
console.log(lists);
|
||||
let images = [];
|
||||
|
||||
lists.forEach((item) => {
|
||||
images.push(item.response.result);
|
||||
});
|
||||
|
||||
this.images = images;
|
||||
console.log(this.images);
|
||||
},
|
||||
// 提交
|
||||
handleSumit() {
|
||||
let goods = this.orderGoodsList.filter((item) => {
|
||||
return item.skuId == this.skuId;
|
||||
});
|
||||
|
||||
let data = {
|
||||
complainTopic: this.complainTopic, //投诉主题,
|
||||
content: this.complainValue, //投诉内容
|
||||
goodsId: goods[0].goodsId, //商品id
|
||||
images: this.images, //图片
|
||||
orderSn: this.sn, //订单号
|
||||
skuId: this.skuId, //skuid
|
||||
};
|
||||
|
||||
addComplain(data).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "提交成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: "/pages/order/complain/complainList",
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getReasion() {
|
||||
getComplainReason().then((res) => {
|
||||
if (res.data.result.length >= 1) {
|
||||
res.data.result.forEach((item) => {
|
||||
let way = {
|
||||
value: item.reason,
|
||||
label: item.reason,
|
||||
};
|
||||
this.complainList.push(way);
|
||||
});
|
||||
this.complainTopic = res.data.result[0].reason;
|
||||
console.log(this.complainTopic);
|
||||
}
|
||||
});
|
||||
},
|
||||
loadData(sn) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
getOrderDetail(sn).then((res) => {
|
||||
const order = res.data.result;
|
||||
this.order = order.order;
|
||||
this.orderGoodsList = order.orderItems;
|
||||
this.orderDetail = res.data.result;
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
confirmComplain(e) {
|
||||
console.log(e);
|
||||
this.complainTopic = e[0].label;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../goods.scss";
|
||||
.cell {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 26rpx;
|
||||
}
|
||||
.cell-item {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 2rpx solid #f5f7fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.complain-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
.title {
|
||||
width: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .u-input__textarea {
|
||||
padding: 0;
|
||||
}
|
||||
.cell-title {
|
||||
font-weight: bold;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.submit-btn {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: $light-color;
|
||||
margin-top: 20px;
|
||||
border-radius: 200px;
|
||||
}
|
||||
</style>
|
||||
169
pages/order/complain/complainInfo.vue
Normal file
169
pages/order/complain/complainInfo.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<view class="tips">我的投诉信息</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.goodsName"
|
||||
title="投诉商品"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="statusData[detail.complainStatus]"
|
||||
title="投诉状态"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.createTime"
|
||||
title="投诉时间"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.complainTopic"
|
||||
title="投诉主题"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.content"
|
||||
title="投诉内容"
|
||||
></u-cell-item>
|
||||
<view class="row" v-if="detail.orderComplaintImages">
|
||||
<u-image
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
border-radius="10"
|
||||
style="margin: 0 10rpx"
|
||||
v-for="(item, index) in detail.orderComplaintImages"
|
||||
:key="index"
|
||||
:src="item"
|
||||
@click="preview(detail.orderComplaintImages, index)"
|
||||
/>
|
||||
</view>
|
||||
</u-cell-group>
|
||||
<view class="tips">商家申诉信息</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.appealTime || '暂无'"
|
||||
title="申诉时间"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.appealContent || '暂无'"
|
||||
title="申诉内容"
|
||||
></u-cell-item>
|
||||
<view class="row" v-if="detail.appealImagesList">
|
||||
<u-image
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
border-radius="10"
|
||||
style="margin: 0 10rpx"
|
||||
v-for="(item, index) in detail.appealImagesList"
|
||||
@click="preview(detail.appealImagesList, index)"
|
||||
:key="index"
|
||||
:src="item"
|
||||
/>
|
||||
</view>
|
||||
</u-cell-group>
|
||||
<view class="tips">对话详情</view>
|
||||
<view class="speak-way" v-if="detail.orderComplaintCommunications">
|
||||
<view
|
||||
class="speak-msg seller"
|
||||
:key="i"
|
||||
v-for="(complaint, i) in detail.orderComplaintCommunications"
|
||||
>
|
||||
{{
|
||||
complaint.owner == "PLATFORM"
|
||||
? "平台"
|
||||
: complaint.owner == "BUYER"
|
||||
? "买家"
|
||||
: "卖家"
|
||||
}}：
|
||||
<span>{{ complaint.content }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="speak-way" v-else>暂无对话</view>
|
||||
<view class="tips">平台仲裁</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
title="仲裁意见"
|
||||
:value="detail.arbitrationResult || '暂无'"
|
||||
></u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getComplainDetail } from "@/api/after-sale";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detail: "",
|
||||
|
||||
statusData: {
|
||||
NO_APPLY: "未申请",
|
||||
APPLYING: "申请中",
|
||||
COMPLETE: "已完成，此时可申请",
|
||||
EXPIRED: "已失效，不可申请",
|
||||
CANCEL: "已取消",
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.init(option.id);
|
||||
},
|
||||
methods: {
|
||||
preview(urls, index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
},
|
||||
init(id) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
getComplainDetail(id).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.detail = res.data.result;
|
||||
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.speak-msg {
|
||||
padding: 26rpx 32rpx;
|
||||
> span {
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
.admin {
|
||||
color: $main-color;
|
||||
}
|
||||
.speak-way {
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
padding: 16rpx;
|
||||
}
|
||||
.tips {
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
</style>
|
||||
188
pages/order/complain/complainList.vue
Normal file
188
pages/order/complain/complainList.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
class="seller-view"
|
||||
v-for="(item, index) in complaionData"
|
||||
:key="index"
|
||||
>
|
||||
<view class="seller-info u-flex u-row-between">
|
||||
<view class="seller-name">
|
||||
<view class="name">{{ item.storeName }}</view>
|
||||
</view>
|
||||
<view class="order-sn">{{ statusData[item.complainStatus] }}</view>
|
||||
</view>
|
||||
<u-line color="#DCDFE6"></u-line>
|
||||
<view class="goods-item-view">
|
||||
<view class="goods-img" @click="handleToGoods(item)">
|
||||
<u-image
|
||||
border-radius="6"
|
||||
width="131rpx"
|
||||
height="131rpx"
|
||||
:src="item.goodsImage"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="goods-info" @click="handleToGoods(item)">
|
||||
<view class="goods-title u-line-2">{{ item.goodsName }}</view>
|
||||
<view class="goods-price">
|
||||
￥{{ item.goodsPrice | unitPrice }}
|
||||
<!-- <span>+{{ '1' }}积分</span> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-num">
|
||||
<view>x{{ item.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="complain-item-view">
|
||||
<view class="complain-time"> {{ item.createTime }} </view>
|
||||
<view class="complain-speak"> {{ item.complainTopic }} </view>
|
||||
</view>
|
||||
<view class="complain-btn">
|
||||
<u-tag
|
||||
mode="plain"
|
||||
@click="handleClear(item)"
|
||||
class="complain-tag"
|
||||
text="撤销投诉"
|
||||
type="info"
|
||||
v-if="
|
||||
item.complainStatus != 'EXPIRED' && item.complainStatus != 'CANCEL'
|
||||
"
|
||||
/>
|
||||
<u-tag
|
||||
mode="plain"
|
||||
@click="handleInfo(item)"
|
||||
class="complain-tag"
|
||||
text="投诉详情"
|
||||
type="info"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="empty" style="margin-top: 40rpx">
|
||||
<u-empty text="暂无投诉列表" mode="list"></u-empty>
|
||||
</view>
|
||||
<u-modal
|
||||
show-cancel-button
|
||||
@confirm="handleClearConfirm"
|
||||
v-model="show"
|
||||
:content="content"
|
||||
></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getComplain, clearComplain } from "@/api/after-sale";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusData: {
|
||||
NEW: "新订单",
|
||||
NO_APPLY: "未申请",
|
||||
APPLYING: "申请中",
|
||||
COMPLETE: "已完成",
|
||||
EXPIRED: "已失效",
|
||||
CANCEL: "已取消",
|
||||
},
|
||||
show: false,
|
||||
content: "是否撤销投诉？",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
// memberId: "",
|
||||
// memberName: "",
|
||||
},
|
||||
complaionData: [],
|
||||
empty: false,
|
||||
rows: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.params.pageNumber++;
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 点击跳转到商品
|
||||
handleToGoods(val) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/goods?id=" + val.skuId+"&goodsId="+val.goodsId,
|
||||
});
|
||||
},
|
||||
|
||||
// 撤销投诉
|
||||
handleClear(val) {
|
||||
console.log(val);
|
||||
this.show = true;
|
||||
this.rows = val;
|
||||
},
|
||||
handleClearConfirm() {
|
||||
clearComplain(this.rows.id).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "撤销成功",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.complaionData = [];
|
||||
this.params.pageNumber = 1;
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
handleInfo(val) {
|
||||
uni.navigateTo({
|
||||
url: "./complainInfo?id=" + val.id,
|
||||
});
|
||||
},
|
||||
|
||||
init() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
|
||||
getComplain(this.params).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.result.records.length >= 1) {
|
||||
this.complaionData.push(...res.data.result.records);
|
||||
} else {
|
||||
this.empty = true;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../goods.scss";
|
||||
|
||||
.complain-item-view {
|
||||
border-bottom: 2rpx solid #f5f7fa;
|
||||
border-top: 2rpx solid #f5f7fa;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.complain-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
/deep/ .seller-name {
|
||||
width: auto !important;
|
||||
}
|
||||
.complain-btn {
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.complain-tag {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
</style>
|
||||
241
pages/order/evaluate/againEvaluate.vue
Normal file
241
pages/order/evaluate/againEvaluate.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<view class="page-main">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view>
|
||||
<view class="goods-item-view">
|
||||
<view class="goods-img"><u-image width="131rpx" height="131rpx" :src="order.goods_img"></u-image></view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ order.goodsName }}</view>
|
||||
<view class="goods-specs">/</view>
|
||||
<view class="goods-price"></view>
|
||||
</view>
|
||||
<view class="goods-num"><view></view></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="info-cell">
|
||||
<view class="info-cell-title">初评日期：{{ $u.timeFormat(order.create_time, 'yyyy-mm-dd') }}</view>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<view class="info-cell-title">初评评价：{{ order.grade_str }}</view>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<view class="info-cell-title">初评内容：{{ order.content }}</view>
|
||||
</view>
|
||||
<view class="info-cell"><view class="info-cell-title">初评审核状态：您的初评审核通过</view></view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="input-view">
|
||||
<u-input
|
||||
height="200"
|
||||
placeholder-style="font-size:12px;color:#CCCCCC"
|
||||
v-model="form[0].content"
|
||||
:type="type"
|
||||
maxlength="500"
|
||||
:border="border"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="input-num">
|
||||
<text>{{ form[0].content.length }}/{{ maxlength }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="images-view"><u-upload :action="action" width="150" @on-uploaded="onUploaded" :max-count="5"></u-upload></view>
|
||||
</view>
|
||||
<view class="submit-view"><u-button shape="circle" style="background-color: #1abc9c;color: #ffffff;" @click="onSubmit">提交</u-button></view>
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { commentsOrder, AppendCommentsOrder } from '@/api/members.js';
|
||||
import { upload } from '@/api/common.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
type: 'textarea',
|
||||
border: false,
|
||||
maxlength: 500,
|
||||
placeholder: '对评价进行补充，更客观，更全面',
|
||||
order: {},
|
||||
form: [],
|
||||
action: upload
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.order = JSON.parse(options.order);
|
||||
console.log(this.order);
|
||||
let sku = {
|
||||
comment_id: this.order.comment_id,
|
||||
content: '',
|
||||
grade: this.order.grade,
|
||||
images: [],
|
||||
sku_id: this.order.sku_id
|
||||
};
|
||||
this.form.push(sku);
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
AppendCommentsOrder(this.form).then(res => {
|
||||
if(res.statusCode == 200){
|
||||
this.$refs.uToast.show({
|
||||
title: '发布追评成功',
|
||||
type: 'success',
|
||||
url: '/pages/order/evaluate/myEvaluate'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
onUploaded(lists) {
|
||||
let images = [];
|
||||
lists.forEach(item => {
|
||||
images.push(item.response.url);
|
||||
});
|
||||
this.form[0].images = images;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page,
|
||||
.content {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #f4f4f5;
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20rpx;
|
||||
.header-text {
|
||||
background-color: #f4f4f5;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
.seller-name {
|
||||
color: #fa3534;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 30rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
.goods-img {
|
||||
}
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #ff5a10;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.after-num {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
.goods-evaluate-view {
|
||||
margin-top: 8rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 5rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.goods-view {
|
||||
width: 250rpx;
|
||||
}
|
||||
.rate-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-btn {
|
||||
margin: 0rpx 35rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-evaluate-view {
|
||||
margin: 20rpx 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
color: #666666;
|
||||
align-items: center;
|
||||
.input-view {
|
||||
width: 100%;
|
||||
}
|
||||
.input-num {
|
||||
color: #cccccc;
|
||||
text-align: right;
|
||||
}
|
||||
.images-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.info-header {
|
||||
font-size: 33rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.seller-rate-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-title {
|
||||
width: 150rpx;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
}
|
||||
.info-cell {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 8rpx 0rpx;
|
||||
}
|
||||
}
|
||||
.submit-view {
|
||||
margin-top: 100rpx;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.uni-textarea-wrapper {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.u-hairline-border:after{
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
272
pages/order/evaluate/evaluateDetail.vue
Normal file
272
pages/order/evaluate/evaluateDetail.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="exaluate-member-view">
|
||||
<view class="member-view">
|
||||
<view class="member-img">
|
||||
<u-image
|
||||
width="82rpx"
|
||||
style="border: 1px solid #ededed"
|
||||
height="82rpx"
|
||||
shape="circle"
|
||||
:src="comment.memberProfile || '/static/missing-face.png'"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="member-info">
|
||||
<view class="memName">{{ comment.memberName }}</view>
|
||||
<view class="creName">{{ comment.createTime }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-view">
|
||||
<view class="goods-title"
|
||||
>商品评价: {{ gradeList[comment.grade] }}</view
|
||||
>
|
||||
<view class="goods-subtitle">
|
||||
{{ comment.content }}
|
||||
|
||||
</view>
|
||||
<view class="goods-imgs-view" v-if="comment.image != null && comment.image.length != 0">
|
||||
|
||||
<view
|
||||
class="img-view"
|
||||
v-for="(img, imgIndex) in comment.image.split(',')"
|
||||
:key="imgIndex"
|
||||
|
||||
>
|
||||
<u-image @click.native="preview(comment.image.split(','),imgIndex)" width="160rpx" height="160rpx" :src="img"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-name">
|
||||
{{ comment.goodsName }}
|
||||
</view>
|
||||
<view class="goods-subtitle"></view>
|
||||
<view v-if="comment.additional_comment != null">
|
||||
<view class="goods-comm">
|
||||
<span style="margin-left: 10rpx">
|
||||
购买{{ calcDay(comment) }}天后追加评论
|
||||
</span>
|
||||
<text>{{
|
||||
comment.additional_comment.create_time | unixToDate
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="goods-subtitle additional">{{
|
||||
comment.additional_comment.content
|
||||
}}</view>
|
||||
<view class="goods-imgs-view">
|
||||
<view
|
||||
class="img-view"
|
||||
v-for="(img, imgIndex) in comment.additional_comment.images"
|
||||
:key="imgIndex"
|
||||
>
|
||||
<!-- <image :src="img"></image> -->
|
||||
<u-image width="160rpx" height="160rpx" :src="img"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="comment.additional_comment.reply_status == 1">
|
||||
<view style="border-bottom: 1px solid #ededed; width: 100%"></view>
|
||||
<view class="goods-comm store-reply">
|
||||
<span style="margin-left: 10rpx">掌柜回复：</span>
|
||||
</view>
|
||||
<view class="goods-subtitle additional">{{
|
||||
comment.additional_comment.reply.content
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: "",
|
||||
comment: {},
|
||||
gradeList: {
|
||||
GOOD: "好评",
|
||||
MODERATE: "中评",
|
||||
WORSE: "差评",
|
||||
haveImage: "有图",
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.comment = JSON.parse(decodeURIComponent(options.comment));
|
||||
|
||||
},
|
||||
methods: {
|
||||
preview(urls, index) {
|
||||
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
},
|
||||
calcDay(order) {
|
||||
let date = "";
|
||||
console.log();
|
||||
if (order.additional_comment) {
|
||||
date =
|
||||
(order.additional_comment.create_time - order.create_time) /
|
||||
60 /
|
||||
60 /
|
||||
24;
|
||||
}
|
||||
return Math.ceil(date);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goods-comm {
|
||||
color: #ff6262;
|
||||
border-left: 3px solid #1abc9c;
|
||||
text {
|
||||
float: right;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.store-reply {
|
||||
color: #333;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.memName {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.additional {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
.goods-name {
|
||||
border-bottom: 1px solid #ededed;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.creName,
|
||||
.goods-name {
|
||||
font-size: 24rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.seller-view {
|
||||
background-color: #fff;
|
||||
margin: 5rpx 0rpx;
|
||||
padding: 0rpx 30rpx;
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
.seller-name {
|
||||
font-size: 33rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.order-sn {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 0rpx;
|
||||
.goods-img {
|
||||
}
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
width: 380rpx;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.goods-specs {
|
||||
margin-bottom: 10rpx;
|
||||
color: #909399;
|
||||
}
|
||||
.goods-price {
|
||||
margin-bottom: 10rpx;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.btn-view {
|
||||
min-height: 70rpx;
|
||||
margin: 5rpx 0rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.description {
|
||||
color: #909399;
|
||||
size: 25rpx;
|
||||
.text {
|
||||
margin: 10rpx 0rpx;
|
||||
}
|
||||
.title {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
.again-btn {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.exaluate-member-view {
|
||||
background-color: #fff;
|
||||
margin-top: 12rpx;
|
||||
padding: 20rpx;
|
||||
.member-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.member-img {
|
||||
width: 100rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
.member-info {
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
}
|
||||
.goods-view {
|
||||
margin-left: 15rpx;
|
||||
.border-bottom {
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.goods-subtitle {
|
||||
margin-bottom: 20rpx;
|
||||
color: #909399;
|
||||
}
|
||||
.goods-imgs-view {
|
||||
margin: 20rpx 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.img-view {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
pages/order/evaluate/evaluateInfo.vue
Normal file
81
pages/order/evaluate/evaluateInfo.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="info-view">
|
||||
<view class="info-text">
|
||||
1.对商品金额大于20元商品(虚拟商品除外)进行评价并通过审核后，根据商品价格和您的评价内容为您发放积分。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
2.只能对90天内购买的订单进行商品评价。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
3.同一订单和相隔15日内不同订单中的相同商品，只能评价一次。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
4.退换货订单产生的商品评价将会被删除，且会扣除相应的优币。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
5.鼓励发表原创、有价值的评价;杜绝剽窃、发表无意义、违反法律法规的评价内容，如果您发布的无效评价超过(包含)5条，则一年内您发表的商品评价都不会获得积分奖励。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
6.晒单发表成功后会对晒图进行审核，审核过程中，心得文字会先展示出来，审核通过后，晒图会一起进行展示。
|
||||
</view>
|
||||
<view class="info-text">
|
||||
7.对于审核不通过的评价晒单，不能获得优币奖励，且文字、晒图均不能被展示出来，有下列情形之一的，审核不予通过：
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 评价心得文字与商品无关，且出现言辞露骨的情况;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片与所购商品不一致;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 晒单为截屏图片;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片不清晰，不能达到晒单目的;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片中涉及淫秽、色情等违法不良信息;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 未经过他人同意，涉及使用他人图片或将他人图片进行编辑后发布;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 盗用他人图片经举报、诉讼情况属实;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片中涉及敏感词汇(如：曝光，315，假二水，翻新等);
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 图片涉及与客服聊天记录;
|
||||
</view>
|
||||
<view class="info-text">
|
||||
• 对于成人用品晒单，未对特殊部位进行遮掩或打马赛克。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page, .content{
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
}
|
||||
.info-view {
|
||||
padding: 50rpx;
|
||||
.info-text {
|
||||
color: #909399;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
365
pages/order/evaluate/myEvaluate.vue
Normal file
365
pages/order/evaluate/myEvaluate.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="wrap">
|
||||
<view class="u-tabs-box">
|
||||
<u-tabs :list="list" :is-scroll="false" inactive-color="#333" :current="current" class="utabs" :active-color="$lightColor" @change="change"></u-tabs>
|
||||
</view>
|
||||
<swiper class="swiper-box" :current="current" @change="changeTab" duration="500">
|
||||
<swiper-item v-for="(item, listIndex) in list" :key="listIndex">
|
||||
<scroll-view scroll-y style="height: 100%" @scrolltolower="renderData(listIndex)">
|
||||
<u-empty text="尚无需要评价的商品" mode="list" v-if="orderList.length == 0"></u-empty>
|
||||
<view class="seller-view" v-for="(order, index) in orderList" :key="index">
|
||||
<!-- 店铺名称 -->
|
||||
<view class="box-title">
|
||||
<view class="title_seller_name">
|
||||
{{ order.storeName }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(sku, _index) in order.orderItems" :key="_index">
|
||||
<view class="goods-item-view">
|
||||
<view>
|
||||
<u-image border-radius="6rpx" width="132rpx" height="132rpx" class="goods_img" :src="sku.image" alt />
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.name }}</view>
|
||||
<view class="text title">{{ gradeList[order.grade] || '' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-view u-row-between" v-if="current != 0">
|
||||
<view class="description">
|
||||
<view class="text title">
|
||||
<u-read-more ref="uReadMore" :color="$lightColor" text-indent="0">
|
||||
<rich-text :nodes="'评论内容：' + order.content || ''"></rich-text>
|
||||
</u-read-more>
|
||||
</view>
|
||||
|
||||
<view class="goods-imgs-view" v-if="order.image">
|
||||
<view class="img-view" v-if="order.image" v-for="(img, imgIndex) in order.image.split(',')" :key="imgIndex">
|
||||
<u-image v-if="order.image" @click.native="
|
||||
preview(order.image.split(','), imgIndex)
|
||||
" width="160rpx" height="160rpx" :src="img"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="again-btn" @click="onDetail(order)" v-if="current == 1">
|
||||
<u-tag text="评价详情" shape="circle" mode="plain" type="error" />
|
||||
</view>
|
||||
<view v-if="current == 0 && sku.commentStatus == 'UNFINISHED'">
|
||||
<view class="evaluate">
|
||||
<view @click="onCommont(order)">
|
||||
<u-tag text="发表评价" shape="circle" mode="plain" type="error" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="params.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderList } from "@/api/order.js";
|
||||
import { getComments } from "@/api/members.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customStyle: {
|
||||
backgroundColor: this.$lightColor,
|
||||
color: "#FFF",
|
||||
height: "60rpx",
|
||||
width: "150rpx",
|
||||
margin: "20rpx 0",
|
||||
},
|
||||
list: [
|
||||
{
|
||||
name: "待评价",
|
||||
},
|
||||
{
|
||||
name: "已评价",
|
||||
},
|
||||
],
|
||||
gradeList: {
|
||||
GOOD: "好评",
|
||||
MODERATE: "中评",
|
||||
WORSE: "差评",
|
||||
haveImage: "有图",
|
||||
},
|
||||
current: 0,
|
||||
orderList: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
orderStatus: "",
|
||||
loadStatus: "more",
|
||||
},
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.orderList = [];
|
||||
this.params.pageNumber = 1;
|
||||
this.current == 0 ? this.loadData() : this.loadComments();
|
||||
},
|
||||
watch: {
|
||||
current(val) {
|
||||
this.params.pageNumber = 1;
|
||||
this.params.loadStatus = "more";
|
||||
this.orderList = [];
|
||||
//重新读取数据
|
||||
if (val == 0) {
|
||||
this.loadData();
|
||||
}
|
||||
if (val == 1) {
|
||||
this.orderList = [];
|
||||
this.loadComments();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
// 判断当前店铺是否有可评价的商品
|
||||
commentStatus(val) {
|
||||
if (this.current == 1) {
|
||||
return true;
|
||||
} else {
|
||||
let show;
|
||||
|
||||
val.orderItems &&
|
||||
val.orderItems.forEach((item) => {
|
||||
if (item.commentStatus == "UNFINISHED") {
|
||||
show = true;
|
||||
} else {
|
||||
show = false;
|
||||
}
|
||||
});
|
||||
|
||||
return show;
|
||||
}
|
||||
},
|
||||
|
||||
preview(urls, index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.current = index;
|
||||
},
|
||||
changeTab(e) {
|
||||
this.current = e.target.current;
|
||||
},
|
||||
loadData() {
|
||||
uni.showLoading({});
|
||||
getOrderList(this.params).then((res) => {
|
||||
uni.hideLoading();
|
||||
const orderList = res.data.result.records;
|
||||
if (orderList.length < 10) {
|
||||
this.params.loadStatus = "noMore";
|
||||
}
|
||||
if (orderList.length > 0) {
|
||||
this.orderList = this.orderList.concat(orderList);
|
||||
this.params.pageNumber += 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
onCommont(order) {
|
||||
uni.navigateTo({
|
||||
url: `./releaseEvaluate?sn=${order.sn}&order=${encodeURIComponent(
|
||||
JSON.stringify(order)
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
loadComments() {
|
||||
uni.showLoading({});
|
||||
getComments(this.params).then((res) => {
|
||||
uni.hideLoading();
|
||||
let orderList = res.data.result.records;
|
||||
if (orderList.length < 10) {
|
||||
this.params.loadStatus = "noMore";
|
||||
}
|
||||
orderList.forEach((item) => {
|
||||
item.orderItems = [
|
||||
{
|
||||
image: item.goodsImage,
|
||||
name: item.goodsName,
|
||||
goodsId: item.goodsId,
|
||||
skuId: item.skuId,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
this.orderList = this.orderList.concat(orderList);
|
||||
|
||||
this.params.pageNumber += 1;
|
||||
});
|
||||
},
|
||||
onAgain(order) {
|
||||
uni.navigateTo({
|
||||
url: `./againEvaluate?order=${encodeURIComponent(
|
||||
JSON.stringify(order)
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
renderData(index) {
|
||||
if (this.params.loadStatus == "noMore") return;
|
||||
if (index == 0) {
|
||||
this.loadData();
|
||||
}
|
||||
if (index == 1) {
|
||||
this.params.audit_status = "PASS_AUDIT";
|
||||
this.params.comments_type = "INITIAL";
|
||||
this.params.comment_status = "WAIT_CHASE";
|
||||
this.loadComments();
|
||||
}
|
||||
if (index == 2) {
|
||||
this.params.audit_status = "";
|
||||
this.params.comments_type = "";
|
||||
this.params.comment_status = "FINISHED";
|
||||
this.loadComments();
|
||||
}
|
||||
},
|
||||
onDetail(comment) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"./evaluateDetail?comment=" +
|
||||
encodeURIComponent(JSON.stringify(comment)),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
.wrap {
|
||||
background: #f6f6f6;
|
||||
height: calc(100vh - var(--window-top));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goods-imgs-view {
|
||||
margin: 20rpx 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.img-view {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
.u-tabs-box {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.box-content {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
.title_seller_name {
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.box-title {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100% - 88rpx);
|
||||
}
|
||||
|
||||
.goods-specs {
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.goods-price {
|
||||
margin-bottom: 10rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
|
||||
.goods-title {
|
||||
color: $u-main-color;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
.u-num {
|
||||
color: $aider-light-color;
|
||||
font-size: 33rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.again-btn {
|
||||
margin: 0rpx 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.seller-view {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0px;
|
||||
padding: 0px 20rpx 20rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
.seller-name {
|
||||
font-size: 33rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.order-sn {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
min-height: 70rpx;
|
||||
margin: 5rpx 5rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.description {
|
||||
size: 25rpx;
|
||||
color: #999999;
|
||||
.text {
|
||||
margin: 20rpx 0rpx;
|
||||
}
|
||||
.title {
|
||||
color: #5f5d5f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
321
pages/order/evaluate/releaseEvaluate.vue
Normal file
321
pages/order/evaluate/releaseEvaluate.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-for="(sku, index) in order.orderItems" :key="index">
|
||||
<view class="after-sales-goods-detail-view">
|
||||
<view>
|
||||
<view class="goods-item-view">
|
||||
<view class="goods-img">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image" />
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="goods-title u-line-2">{{ sku.name }}</view>
|
||||
<view class="goods-price">
|
||||
<view>x{{ sku.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-evaluate-view">
|
||||
<view class="goods-view">
|
||||
<view>商品评价</view>
|
||||
<view class="sub-title">满意请打好评哦</view>
|
||||
</view>
|
||||
<view class="rate-view">
|
||||
<view class="rate-btn" @click="onGrade('GOOD', index)">
|
||||
<view style="font-size: 42rpx" :style="{ color: form.grade === 'GOOD' ? 'red' : '#CCCCCC' }" class="alifont icon-haoping1"></view>
|
||||
<text>好评</text>
|
||||
</view>
|
||||
<view class="rate-btn" @click="onGrade('MODERATE', index)">
|
||||
<view style="font-size: 42rpx" :style="{ color: form.grade === 'MODERATE' ? 'red' : '#CCCCCC' }" class="alifont icon-zhongping1"></view>
|
||||
<text>中评</text>
|
||||
</view>
|
||||
<view class="rate-btn" @click="onGrade('WORSE', index)">
|
||||
<view style="font-size: 42rpx" :style="{ color: form.grade === 'WORSE' ? 'red' : '#CCCCCC' }" class="alifont icon-chaping"></view>
|
||||
<text>差评</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="input-view">
|
||||
<u-input v-model="form.content" height="200" placeholder-style="font-size:12px;color:#CCCCCC" :type="type" :border="border" :maxlength="maxlength" :placeholder="placeholder" />
|
||||
</view>
|
||||
<view class="input-num">
|
||||
<text>{{ form.content.length }}/{{ maxlength }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view">
|
||||
<view class="images-view" @click="beforeUpload(index)">
|
||||
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-evaluate-view" style="margin-bottom: 150rpx">
|
||||
<view class="info-header">店铺评分</view>
|
||||
<view>
|
||||
<view class="seller-rate-view">
|
||||
<view class="rate-title">描述相符</view>
|
||||
<view>
|
||||
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.descriptionScore" :size="40"></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="seller-rate-view">
|
||||
<view class="rate-title">服务态度</view>
|
||||
<view>
|
||||
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.serviceScore" :size="40"></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="seller-rate-view">
|
||||
<view class="rate-title">物流服务</view>
|
||||
<view>
|
||||
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.deliveryScore" :size="40"></u-rate>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="onSubmit" @click="onSubmit"> 提交申请</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from "@/utils/storage.js";
|
||||
import { commentsMemberOrder } from "@/api/members.js";
|
||||
import { upload } from "@/api/common.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storage,
|
||||
value: "",
|
||||
type: "textarea",
|
||||
border: false,
|
||||
maxlength: 500,
|
||||
placeholder:
|
||||
"宝贝满足您的期待吗？说说它的优点和美中不足的地方吧。您的评价会帮助更多的人",
|
||||
order: {},
|
||||
form: {
|
||||
content: "",
|
||||
goodsId: "",
|
||||
grade: "GOOD",
|
||||
orderItemSn: "",
|
||||
skuId: "",
|
||||
descriptionScore: 5,
|
||||
serviceScore: 5,
|
||||
deliveryScore: 5,
|
||||
// // 是否为初评价 true 默认为初评
|
||||
// first_comment: true,
|
||||
//content,grade: 'GOOD',skuId,images:[]
|
||||
},
|
||||
currentIndex: 0,
|
||||
action: upload,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.form.orderItemSn = options.sn;
|
||||
this.order = JSON.parse(decodeURIComponent(options.order));
|
||||
//现在只能一个商品一个评价
|
||||
},
|
||||
mounted() {
|
||||
this.form.goodsId = this.order.orderItems[0].goodsId;
|
||||
this.form.orderItemSn = this.order.orderItems[0].sn;
|
||||
this.form.skuId = this.order.orderItems[0].skuId;
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(index) {
|
||||
this.currentIndex = index;
|
||||
},
|
||||
onGrade(grade, index) {
|
||||
this.form.grade = grade;
|
||||
},
|
||||
onSubmit() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
commentsMemberOrder(this.form).then((res) => {
|
||||
uni.hideLoading();
|
||||
|
||||
uni.showToast({
|
||||
title: "发布评价成功",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
success: () => {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
onUploaded(lists) {
|
||||
let images = [];
|
||||
console.log(lists);
|
||||
lists.forEach((item) => {
|
||||
images.push(item.response.result);
|
||||
});
|
||||
this.form.images = images;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
background: $page-color-base;
|
||||
height: 100%;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.onSubmit {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: $aider-light-color;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.after-sales-goods-detail-view {
|
||||
background-color: #f4f4f5;
|
||||
padding: 10rpx 0rpx;
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20rpx;
|
||||
.header-text {
|
||||
background-color: #f4f4f5;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
.seller-name {
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 30rpx;
|
||||
background-color: #eef1f2;
|
||||
.goods-img {
|
||||
}
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.after-num {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
.goods-evaluate-view {
|
||||
margin-top: 8rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 5rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.goods-view {
|
||||
width: 250rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
.sub-title {
|
||||
font-size: 22rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
.rate-view {
|
||||
color: #333333;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-btn {
|
||||
margin: 0rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-evaluate-view {
|
||||
margin-top: 8rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.input-view {
|
||||
width: 100%;
|
||||
}
|
||||
.input-num {
|
||||
color: #cccccc;
|
||||
text-align: right;
|
||||
}
|
||||
.images-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.info-header {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.seller-rate-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.rate-title {
|
||||
line-height: 70rpx;
|
||||
width: 150rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-view {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
margin-top: 100rpx;
|
||||
border: solid 2rpx #f2f2f2;
|
||||
background-color: #ffffff;
|
||||
height: 100rpx;
|
||||
width: 750rpx;
|
||||
align-items: center;
|
||||
padding: 0rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
850
pages/order/fillorder.vue
Normal file
850
pages/order/fillorder.vue
Normal file
@@ -0,0 +1,850 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 选择地址 -->
|
||||
<div class="box1 box">
|
||||
<u-row style="margin-top: 32rpx">
|
||||
<u-col style="padding: 0 !important" :offset="0" :span="11" @click.native="clickToAddress()">
|
||||
<div v-if="!address.id">请选择地址</div>
|
||||
<div v-else>
|
||||
<div class="userClass">
|
||||
{{ address.name }}
|
||||
<span>
|
||||
{{ address.mobile | secrecyMobile }}
|
||||
<u-tag v-if="address.isDefault" text="默认" style="margin-left: 24rpx" mode="plain" type="error" size="mini" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="userAdress">
|
||||
<span v-if="address.consigneeAddressPath[0]">{{
|
||||
address.consigneeAddressPath[0]
|
||||
}}</span>
|
||||
|
||||
<span v-if="address.consigneeAddressPath[1]">{{
|
||||
address.consigneeAddressPath[1]
|
||||
}}</span>
|
||||
<span v-if="address.consigneeAddressPath[2]">{{
|
||||
address.consigneeAddressPath[2]
|
||||
}}</span>
|
||||
|
||||
<span v-if="address.consigneeAddressPath[3]">{{
|
||||
address.consigneeAddressPath[3]
|
||||
}}</span>
|
||||
<span>
|
||||
{{ address.detail }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</u-col>
|
||||
<u-col :span="1" @click.native="
|
||||
navigateTo('/pages/mine/address/address?way=' + routerVal.way)
|
||||
" style="text-align: right">
|
||||
<u-icon name="arrow-right" style="color: #bababa"></u-icon>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
<!-- 背景 -->
|
||||
<div class="bar"></div>
|
||||
|
||||
<!-- 开团信息 -->
|
||||
<view class="group-box" v-if="isAssemble">
|
||||
<view class="group-title">
|
||||
<span v-if="pintuanFlage">你正在开团购买</span>
|
||||
<span v-else>为你加入仅差<span>{{routerVal.parentOrder.toBeGroupedNum }}</span>人的团购买</span>
|
||||
</view>
|
||||
<view class="group">
|
||||
<view>
|
||||
<u-image borderRadius="50%" shape="square" class="head-img" width="81rpx" height="81rpx" :src="masterWay.face || '/static/missing-face.png'"></u-image>
|
||||
<view class="btn-one">团长</view>
|
||||
</view>
|
||||
<view class="line"> </view>
|
||||
<view>
|
||||
<!-- 如果有最后一名，显示最后一名，没有最后一名，显示等待参团 -->
|
||||
<u-image class="head-img" v-if="endWay.face" :src="endWay.face" borderRadius="50%" shape="square" width="81rpx" height="81rpx">
|
||||
<view slot="loading"></view>
|
||||
</u-image>
|
||||
|
||||
<u-image class="head-img" borderRadius="50%" shape="square" v-else width="81rpx" height="81rpx" :src="endWay.face || '/static/missing-face.png'"></u-image>
|
||||
|
||||
<view class="wait">{{ endWay.nickname || "等待参团" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 店铺商品信息 -->
|
||||
<div class="box box2" v-for="(item, index) in orderMessage.cartList" :key="index">
|
||||
<u-row class="tab1" @click="tostore(item)">
|
||||
<u-col :offset="0">
|
||||
<span class="ybname">{{ item.storeName }}</span>
|
||||
</u-col>
|
||||
</u-row>
|
||||
<div class="promotionNotice">{{ item.promotionNotice }}</div>
|
||||
<u-row class="goodsBorder" v-for="(val, i) in item.skuList" :key="i">
|
||||
<u-col class="tabL" :offset="0" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3">
|
||||
<u-image borderRadius="10rpx" :src="val.goodsSku.thumbnail" alt />
|
||||
</u-col>
|
||||
<u-col :span="9" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" class="tabC">
|
||||
<div style="overflow: hidden">
|
||||
<p class="sp_name">{{ val.goodsSku.goodsName }}</p>
|
||||
<p class="sp_promotion" v-if="val.promotion_tags">
|
||||
<view class="sp_tag sp_tag_plain" v-for="(promotion_item, promotion_index) in val.promotion_tags" :key="promotion_index">{{ promotion_item }}</view>
|
||||
</p>
|
||||
<span class="nums">x{{ val.num }}</span>
|
||||
</div>
|
||||
|
||||
<p class="sp_number">￥{{ val.goodsSku.price | unitPrice }}</p>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<u-row>
|
||||
<u-col :offset="0" :span="4" class="tl" style="text-align: left">备注信息</u-col>
|
||||
<u-col :span="8" textAlign="right">
|
||||
<u-input style="text-align:right;" class="uinput" v-model="remarkVal[index].remark" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
<!-- 订单信息 -->
|
||||
<div class="box box3">
|
||||
<u-row>
|
||||
<u-col :offset="0" :span="4">发票信息</u-col>
|
||||
<u-col :span="8" class="tipsColor" textAlign="right" @click.native="invoice()">
|
||||
<span v-if="receiptList">{{receiptList.receiptTitle}} - {{receiptList.receiptContent}}</span>
|
||||
<span v-else>不开发票</span>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
|
||||
<!-- 发票信息 -->
|
||||
<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
|
||||
<u-select v-model="shippingFlag" :list="shippingMethod" @confirm="checkedshipMethod"></u-select>
|
||||
|
||||
<!-- 优惠券 -->
|
||||
<div class="box box4">
|
||||
<u-row>
|
||||
<u-col :offset="0" :span="9" @click="shippingFlag = true">配送方式</u-col>
|
||||
<u-col :span="3" textAlign="right" @click="shippingFlag = true">
|
||||
{{ shippingMethod.find(e=>{ return e.value == shippingText; }).label }}
|
||||
</u-col>
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-col :offset="0" :span="9" @click="GET_Discount()">优惠券</u-col>
|
||||
|
||||
<u-col :span="3" v-if="orderMessage.priceDetailDTO && orderMessage.priceDetailDTO.couponPrice" textAlign="right" @click="GET_Discount()">
|
||||
<span class="main-color">-{{orderMessage.priceDetailDTO.couponPrice | unitPrice}}</span>
|
||||
</u-col>
|
||||
<!-- orderMessage.priceDetailDTO.couponPrice | unitPrice -->
|
||||
<u-col :span="3" v-else textAlign="right" @click="GET_Discount()">
|
||||
{{ couponNums || "0" }}张可用
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="box box5" v-if="orderMessage.priceDetailDTO">
|
||||
<div>
|
||||
<u-row>
|
||||
<u-col :span="9">商品合计</u-col>
|
||||
<u-col :span="3" textAlign="right">
|
||||
<span>￥{{ orderMessage.priceDetailDTO.goodsPrice | unitPrice }}</span>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
<div>
|
||||
<u-row>
|
||||
<u-col :span="7">运费</u-col>
|
||||
<u-col :span="5" class="tr tipsColor" textAlign="right">
|
||||
<u-tag v-if="orderMessage.priceDetailDTO.freightPrice == 0" style="margin-right: 20rpx" color="#FF6262" text="包邮" type="warning" size="mini" mode="plain" shape="circle" />
|
||||
<span>￥{{
|
||||
orderMessage.priceDetailDTO.freightPrice | unitPrice
|
||||
}}</span>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<u-row>
|
||||
<u-col :span="9">优惠金额</u-col>
|
||||
<u-col :span="3" textAlign="right">-￥{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
<div>
|
||||
<u-row>
|
||||
<u-col :span="6">活动优惠</u-col>
|
||||
<u-col :span="6" class="tr tipsColor" textAlign="right">
|
||||
<u-tag style="margin-right: 20rpx" v-if="orderMessage.priceDetailDTO.discountPrice != 0" color="#FF6262" :text="`优惠 ${orderMessage.priceDetailDTO.discountPrice} 元`" type="warning"
|
||||
size="mini" mode="plain" shape="circle" />
|
||||
<span>{{
|
||||
orderMessage.priceDetailDTO.discountPrice | unitPrice
|
||||
}}</span>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结账 -->
|
||||
<div class="box box6 mp-iphonex-bottom" v-if="orderMessage.priceDetailDTO">
|
||||
<div class="navL">
|
||||
合计：
|
||||
<span class="number">
|
||||
¥
|
||||
<span>{{ orderMessage.priceDetailDTO.billPrice | unitPrice }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="navRiv" @click="createTradeFun()">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<div class="navR">提交订单</div>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<div class="navR">微信支付</div>
|
||||
<!-- #endif -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Trade from "@/api/trade";
|
||||
import * as API_Address from "@/api/address";
|
||||
import * as API_Order from "@/api/order";
|
||||
import invoices from "@/pages/order/invoice/setInvoice";
|
||||
|
||||
import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
|
||||
|
||||
export default {
|
||||
onLoad: function (val) {
|
||||
this.routerVal = val;
|
||||
},
|
||||
components: {
|
||||
invoices,
|
||||
},
|
||||
|
||||
watch: {},
|
||||
data() {
|
||||
return {
|
||||
invoiceFlag: false, //开票开关
|
||||
shippingText: "LOGISTICS",
|
||||
shippingFlag: false,
|
||||
shippingMethod: [
|
||||
// {
|
||||
// value: "SELF_PICK_UP",
|
||||
// label: "自提",
|
||||
// },
|
||||
// {
|
||||
// value: "LOCAL_TOWN_DELIVERY",
|
||||
// label: "同城配送",
|
||||
// },
|
||||
{
|
||||
value: "LOGISTICS",
|
||||
label: "物流",
|
||||
},
|
||||
],
|
||||
isAssemble: false, //是否拼团
|
||||
couponNums: "", //结算页面优惠券数量
|
||||
selectAddressId: "",
|
||||
routerVal: "",
|
||||
params: {},
|
||||
// 优惠劵
|
||||
couponList: "",
|
||||
// 已选地址
|
||||
address: "",
|
||||
// 发票信息
|
||||
receiptList: "",
|
||||
// 店铺信息
|
||||
orderMessage: "",
|
||||
data: "",
|
||||
// 存储备注
|
||||
remarkVal: [],
|
||||
detail: "", //返回的所有数据
|
||||
endWay: "", //最后一个参团人
|
||||
masterWay: "", //团长信息
|
||||
pintuanFlage: true, //是开团还是拼团
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
receiptType(type) {
|
||||
switch (type) {
|
||||
case "VATORDINARY":
|
||||
return "增值税普通发票";
|
||||
case "ELECTRO":
|
||||
return "电子普通发票";
|
||||
case "VATOSPECIAL":
|
||||
return "增值税专用发票";
|
||||
default:
|
||||
return "不开发票";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听返回
|
||||
*/
|
||||
onBackPress(e) {
|
||||
if (e.from == "backbutton") {
|
||||
let routes = getCurrentPages();
|
||||
let curRoute = routes[routes.length - 1].options;
|
||||
console.log(routes);
|
||||
|
||||
routes.forEach((item) => {
|
||||
if (
|
||||
item.route == "pages/tabbar/cart/cartList" ||
|
||||
item.route.indexOf("pages/product/goods") != -1
|
||||
) {
|
||||
uni.redirectTo({
|
||||
url: item.route,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (curRoute.addId) {
|
||||
uni.reLaunch({
|
||||
url: "/pages/tabbar/cart/cartList",
|
||||
});
|
||||
} else {
|
||||
uni.navigateBack();
|
||||
}
|
||||
return true; //阻止默认返回行为
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
});
|
||||
// this.checkedshipMethod([this.shippingMethod[2]]);
|
||||
|
||||
this.getOrderList();
|
||||
uni.hideLoading();
|
||||
if (this.routerVal.way == "PINTUAN") {
|
||||
this.isAssemble = true;
|
||||
this.routerVal.parentOrder = JSON.parse(
|
||||
decodeURIComponent(this.routerVal.parentOrder)
|
||||
);
|
||||
this.pintuanWay();
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
//发票回调 选择发票之后刷新购物车
|
||||
async callbackInvoice(val) {
|
||||
this.invoiceFlag = false;
|
||||
|
||||
this.receiptList = val;
|
||||
|
||||
if (val) {
|
||||
let submit = {
|
||||
way: this.routerVal.way,
|
||||
...this.receiptList,
|
||||
};
|
||||
let receipt = await API_Order.getReceipt(submit);
|
||||
if (receipt.data.success) {
|
||||
this.shippingFlag = false;
|
||||
this.getOrderList();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到店铺
|
||||
tostore(val) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/shopPage?id=" + val.storeId,
|
||||
});
|
||||
},
|
||||
// 点击配送方式选择
|
||||
// checkedshipMethod(val) {
|
||||
// API_Order.selectedShipMethod({
|
||||
// shippingMethod: val[0].value,
|
||||
// way: this.routerVal.way,
|
||||
// }).then((res) => {
|
||||
// if (res.data.code == 200) {
|
||||
// this.shippingText = val[0].value;
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: res.data.message,
|
||||
// duration: 2000,
|
||||
// icon: "none",
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
// 点击跳转地址
|
||||
clickToAddress() {
|
||||
this.navigateTo(
|
||||
`/pages/mine/address/address?from=cart&way=${
|
||||
this.routerVal.way
|
||||
}&parentOrder=${encodeURIComponent(
|
||||
JSON.stringify(this.routerVal.parentOrder)
|
||||
)}`
|
||||
);
|
||||
},
|
||||
|
||||
// 判断团长以及团员信息
|
||||
pintuanWay() {
|
||||
const { memberId } = this.routerVal.parentOrder;
|
||||
|
||||
const userInfo = this.$options.filters.isLogin();
|
||||
if (memberId) {
|
||||
this.endWay = userInfo;
|
||||
this.masterWay = this.routerVal.parentOrder;
|
||||
this.pintuanFlage = false;
|
||||
} else {
|
||||
this.pintuanFlage = true;
|
||||
this.masterWay = userInfo;
|
||||
}
|
||||
},
|
||||
// 判断发票
|
||||
invoice() {
|
||||
this.invoiceFlag = true;
|
||||
},
|
||||
|
||||
// 领取优惠券
|
||||
GET_Discount() {
|
||||
// 循环店铺id,商品id获取优惠券
|
||||
let store = [];
|
||||
let skus = [];
|
||||
this.orderMessage.cartList.forEach((item) => {
|
||||
item.skuList.forEach((sku) => {
|
||||
store.push(sku.storeId);
|
||||
skus.push(sku.goodsSku.id);
|
||||
});
|
||||
});
|
||||
store = Array.from(new Set(store));
|
||||
skus = Array.from(new Set(skus));
|
||||
uni.setStorage({
|
||||
key: "totalPrice",
|
||||
data: this.orderMessage.priceDetailDTO.goodsPrice,
|
||||
});
|
||||
this.navigateTo(
|
||||
`/pages/cart/coupon/index?way=${this.routerVal.way}&storeId=${store}&skuId=${skus}`
|
||||
);
|
||||
},
|
||||
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
|
||||
submit() {
|
||||
if (!this.address.id) {
|
||||
uni.showToast({
|
||||
title: "请选择地址",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
// 创建订单
|
||||
let client;
|
||||
// #ifdef H5
|
||||
client = "H5";
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
client = "WECHAT_MP";
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
client = "APP";
|
||||
// #endif
|
||||
|
||||
let submit = {
|
||||
client,
|
||||
way: this.routerVal.way,
|
||||
remark: this.remarkVal,
|
||||
parentOrderSn: "",
|
||||
};
|
||||
// 如果是拼团并且当前用户不是团长
|
||||
this.routerVal.parentOrder && this.routerVal.parentOrder.orderSn
|
||||
? (submit.parentOrderSn = this.routerVal.parentOrder.orderSn)
|
||||
: delete submit.parentOrderSn;
|
||||
|
||||
API_Trade.createTrade(submit).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "创建订单成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序中点击创建订单直接开始支付
|
||||
this.pay(res.data.result.sn);
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.navigateTo(
|
||||
`/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
|
||||
);
|
||||
// #endif
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "创建订单有误!请稍后重试",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 创建订单
|
||||
createTradeFun() {
|
||||
// 防抖
|
||||
this.$u.debounce(this.submit(), 3000);
|
||||
},
|
||||
|
||||
async pay(sn) {
|
||||
new LiLiWXPay({
|
||||
sn: sn,
|
||||
price: this.orderMessage.priceDetailDTO.billPrice,
|
||||
}).pay();
|
||||
},
|
||||
|
||||
/**
|
||||
* @param id
|
||||
*/
|
||||
getUserAddress() {
|
||||
// 如果没有商品选择地址的话 则选择 默认地址
|
||||
API_Address.getAddressDefault().then((res) => {
|
||||
if (res.data.result) {
|
||||
res.data.result.consigneeAddressPath = res.data.result.consigneeAddressPath.split(
|
||||
","
|
||||
);
|
||||
this.address = res.data.result;
|
||||
|
||||
console.log(this.address);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 获取结算参数
|
||||
getOrderList() {
|
||||
// 获取购物车可用优惠券
|
||||
this.getCartsCouponNums();
|
||||
// 获取结算参数
|
||||
API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
|
||||
res.data.result.cartList.forEach((item, index) => {
|
||||
this.remarkVal[index] = {
|
||||
remark: item.remark,
|
||||
storeId: item.storeId,
|
||||
};
|
||||
});
|
||||
this.orderMessage = res.data.result;
|
||||
|
||||
if (!res.data.result.memberAddress.id) {
|
||||
// 获取会员默认地址
|
||||
this.getUserAddress();
|
||||
} else {
|
||||
this.address = res.data.result.memberAddress;
|
||||
res.data.result.memberAddress.consigneeAddressPath = res.data.result.memberAddress.consigneeAddressPath.split(
|
||||
","
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**购物车可用优惠券 */
|
||||
getCartsCouponNums() {
|
||||
API_Trade.getCartCouponNum(this.routerVal.way).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.couponNums = res.data.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.main-color {
|
||||
font-weight: bold;
|
||||
}
|
||||
.uinput {
|
||||
/deep/ input {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.promotionNotice {
|
||||
font-size: 24rpx;
|
||||
color: $aider-light-color;
|
||||
}
|
||||
.nums {
|
||||
color: $light-color;
|
||||
float: right;
|
||||
width: 15%;
|
||||
text-align: center;
|
||||
}
|
||||
.wait {
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC, PingFang SC-Regular;
|
||||
font-weight: 400;
|
||||
color: #cccccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-left: 14rpx;
|
||||
margin-right: 14rpx;
|
||||
margin-bottom: 50rpx;
|
||||
width: 143rpx;
|
||||
border-bottom: 2px dotted #999;
|
||||
}
|
||||
|
||||
.btn-one,
|
||||
.wait {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.btn-one {
|
||||
width: 100rpx;
|
||||
height: 40rpx;
|
||||
background: $light-color;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC, PingFang SC-Regular;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.head-img {
|
||||
width: 81rpx;
|
||||
height: 81rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
text-align: center;
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC, PingFang SC-Regular;
|
||||
font-weight: 400;
|
||||
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
.group-box {
|
||||
height: 242rpx;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.group {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.tr {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tl {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/deep/ .u-col-3 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 4rpx;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: url("/pages/floor/imgs/line.png") no-repeat;
|
||||
}
|
||||
|
||||
.tabC {
|
||||
> p {
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.box2 {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.userClass {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: $u-content-color;
|
||||
> span {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.userAdress {
|
||||
margin: 20rpx 0;
|
||||
color: $u-tips-color;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.box6 {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
margin: 0;
|
||||
height: 100rpx;
|
||||
overflow: hidden;
|
||||
line-height: 100rpx;
|
||||
margin-bottom: 0px !important;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
|
||||
> .navL {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
> .navRiv {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.navR {
|
||||
margin-top: 10rpx;
|
||||
height: 80rpx;
|
||||
color: #fff;
|
||||
line-height: 80rpx;
|
||||
background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
|
||||
padding: 0 44rpx;
|
||||
text-align: center;
|
||||
border-radius: 400px;
|
||||
}
|
||||
|
||||
.sp_tag {
|
||||
display: inline;
|
||||
background: #f2f2f2;
|
||||
padding: 0 20rpx 0 10rpx;
|
||||
height: 20rpx;
|
||||
line-height: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #262626;
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
.sp_promotion {
|
||||
float: left;
|
||||
width: 75%;
|
||||
margin: 4rpx 0;
|
||||
}
|
||||
|
||||
.sp_tag_plain {
|
||||
margin-left: 8rpx;
|
||||
padding: 0 6rpx 0 6rpx;
|
||||
background: #fff;
|
||||
border: 1px solid $main-color;
|
||||
font-size: 24rpx;
|
||||
color: $main-color;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.sp_tag_plain:nth-of-type(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sp_name {
|
||||
float: left;
|
||||
width: 75%;
|
||||
font-size: 28rpx;
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sp_type {
|
||||
color: $u-tips-color;
|
||||
padding: 8rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: $main-color;
|
||||
font-size: 26rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
> span {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sp_number {
|
||||
color: $light-color;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
background: #f6f6f6 !important;
|
||||
min-height: 166rpx;
|
||||
// height: 200rpx;
|
||||
|
||||
/deep/ .u-row {
|
||||
border: none;
|
||||
}
|
||||
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.navL,
|
||||
.navR {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background: #f9f9f9;
|
||||
height: auto;
|
||||
padding-bottom: 200rpx;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.tab1 {
|
||||
}
|
||||
|
||||
.ybname {
|
||||
margin-left: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/deep/ .u-col {
|
||||
padding: 36rpx 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .u-col-3,
|
||||
.tipsColor {
|
||||
color: $u-tips-color;
|
||||
}
|
||||
|
||||
.tabL {
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
|
||||
/deep/ .u-image,
|
||||
.u-image__image {
|
||||
width: 132rpx !important;
|
||||
height: 132rpx !important;
|
||||
border-radius: 0.4em !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
pages/order/goods.scss
Normal file
107
pages/order/goods.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
.goods-img {flex: 1;}
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 3;
|
||||
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: $font-color-dark;
|
||||
}
|
||||
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #ff5a10;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-num {
|
||||
>.good-complaint{
|
||||
margin-top:10rpx;
|
||||
}
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.seller-view {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0rpx;
|
||||
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.seller-name {
|
||||
font-size: 33rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 90rpx;
|
||||
// justify-content: space-between;
|
||||
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 15rpx;
|
||||
margin-top: -2rpx;
|
||||
font-size: 28rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status {
|
||||
|
||||
font-size: 26rpx;
|
||||
color: #ff6262;
|
||||
}
|
||||
}
|
||||
|
||||
.order-sn {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn-view {
|
||||
// padding: 25rpx 30rpx;
|
||||
margin-bottom: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.description {
|
||||
color: #909399;
|
||||
size: 25rpx;
|
||||
|
||||
.price {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
205
pages/order/invoice/invoiceDetail.vue
Normal file
205
pages/order/invoice/invoiceDetail.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<view class="invoice-detail">
|
||||
<view class="block-item flex-center">
|
||||
<view>
|
||||
<view>
|
||||
{{'增值税普通发票'}}
|
||||
<view class="circle">
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
<view>{{order.receiptPrice | unitPrice('￥')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="common-msg flex-center">
|
||||
<view>
|
||||
<view>抬头类型</view>
|
||||
<view>{{order.receiptTitle}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>发票状态</view>
|
||||
<view class="invoice_status">{{order.receiptStatus === 1?'已开具':'暂未开具'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-cell-group :border="false">
|
||||
<u-cell-item title="发票类型" :border-top="false" :value="'增值税普通发票'" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="发票内容" :value="order.receiptContent" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="发票抬头" :value="order.receiptTitle" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="纳税人识别号" v-if="order.taxpayerId" :value="order.taxpayerId" :arrow="false"></u-cell-item>
|
||||
</u-cell-group>
|
||||
<!-- <u-cell-group :border="false" style="margin-top: 20rpx;">
|
||||
<u-cell-item title="订单状态" :border-top="false" :value="order.order_status_text" :arrow="false"></u-cell-item>
|
||||
<u-cell-item title="订单编号" :value="order.sn" :arrow="false"></u-cell-item>
|
||||
</u-cell-group> -->
|
||||
<!-- <view class="show-pic" @click="preview">
|
||||
|
||||
<text>点击预览发票</text>
|
||||
</view>
|
||||
<button class="btn" @click="download">下载电子发票</button>
|
||||
<view class="block-2-view" v-for="(item,index) in order.elec_file_list" :key="index">
|
||||
<u-image width="300" height="150" :src="item"></u-image>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getReceiptDetail } from "@/api/order.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
order: {},
|
||||
order: {},
|
||||
title_type: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadData(options.id);
|
||||
},
|
||||
methods: {
|
||||
loadData(id) {
|
||||
getReceiptDetail(id).then((res) => {
|
||||
let order = res.data.result;
|
||||
this.order = order;
|
||||
});
|
||||
},
|
||||
preview() {
|
||||
//预览发票
|
||||
if (this.order.elec_file_list.length) {
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: this.order.elec_file_list,
|
||||
longPressActions: {
|
||||
itemList: ["发送给朋友", "保存图片", "收藏"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$api.msg("暂无发票可预览");
|
||||
}
|
||||
},
|
||||
download() {
|
||||
//下载发票
|
||||
let _this = this;
|
||||
if (this.order.elec_file_list.length) {
|
||||
this.order.elec_file_list.forEach((item) => {
|
||||
uni.downloadFile({
|
||||
url: item,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
let tempFilePath = res.tempFilePath;
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: function (res) {
|
||||
_this.$api.msg("发票已下载到" + res.savedFilePath);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$api.msg("暂无发票可下载");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.block-item {
|
||||
height: 217rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
> view {
|
||||
color: #ff6262;
|
||||
}
|
||||
> view:first-child {
|
||||
text-align: center;
|
||||
line-height: 3em;
|
||||
> view:first-child {
|
||||
position: relative;
|
||||
.circle {
|
||||
width: 166rpx;
|
||||
height: 65rpx;
|
||||
border: 1px solid #ff6262;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
view {
|
||||
width: 130rpx;
|
||||
height: 40rpx;
|
||||
border: 1px solid #ff6262;
|
||||
border-radius: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
> view:last-child {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.common-msg {
|
||||
flex-direction: row;
|
||||
padding: 20rpx;
|
||||
height: 118rpx;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
> view {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
line-height: 1.5em;
|
||||
view {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.invoice_status {
|
||||
color: #ff6262;
|
||||
}
|
||||
}
|
||||
|
||||
> view:first-child {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
.show-pic {
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
image {
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
text {
|
||||
color: $main-color;
|
||||
font-size: $font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 34rpx;
|
||||
margin: 60rpx 20rpx;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.u-cell {
|
||||
padding: 35rpx 20rpx;
|
||||
height: 110rpx;
|
||||
color: #333333;
|
||||
}
|
||||
</style>
|
||||
255
pages/order/invoice/setInvoice.vue
Normal file
255
pages/order/invoice/setInvoice.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<u-popup closeable border-radius="28" @close="close" mode="bottom" height="80%" v-model="show">
|
||||
|
||||
<div class="wrapper">
|
||||
<!-- 发票类型 -->
|
||||
<div class="invoice-title">发票类型</div>
|
||||
<div class="flex">
|
||||
<div class="invoice-item" :class="{'active':typeItem.active,disabled:typeItem.disabled}" v-for="(typeItem,index) in invoiceType" :key="index">
|
||||
{{typeItem.title}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips">
|
||||
{{tips}}
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<!-- 发票抬头 -->
|
||||
<div class="invoice-title">发票抬头</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="invoice-item" @click="handleClickHeader(headerItem,index,invoiceHeader)" :class="{'active':headerItem.active,disabled:headerItem.disabled}"
|
||||
v-for="(headerItem,index) in invoiceHeader" :key="index">
|
||||
{{headerItem.title}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-item">
|
||||
<span> {{title}}名称</span>
|
||||
<u-input :placeholder="'请输入'+title+'名称'" v-model="submitData.receiptTitle" />
|
||||
</div>
|
||||
<div class="form-item" v-if="taxpayerFlag">
|
||||
<span>纳税人识别号</span>
|
||||
<u-input placeholder="请输入纳税人识别号" v-model="submitData.taxpayerId" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<div class="invoice-title">
|
||||
发票信息
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="invoice-item" @click="handleClickHeader(goodsItem,index,goodsType)" :class="{'active':goodsItem.active,disabled:goodsItem.disabled}" v-for="(goodsItem,index) in goodsType"
|
||||
:key="index">
|
||||
{{goodsItem.title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="submit" @click="submitInvoice()">确定</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</template>
|
||||
<script>
|
||||
import { addReceipt } from "@/api/members";
|
||||
export default {
|
||||
props: ["res"],
|
||||
watch: {
|
||||
invoiceHeader: {
|
||||
handler(val) {
|
||||
this.title = val.filter((item) => {
|
||||
return item.active == true;
|
||||
})[0].title;
|
||||
this.taxpayerFlag = false;
|
||||
this.submitData.taxpayerId = "";
|
||||
|
||||
if (this.title == "单位") {
|
||||
this.taxpayerFlag = true;
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
goodsType: {
|
||||
handler(val) {
|
||||
this.submitData.receiptContent = val.filter((item) => {
|
||||
return item.active == true;
|
||||
})[0].title;
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
taxpayerFlag: false,
|
||||
submitData: {
|
||||
receiptTitle: "", //发票抬头
|
||||
taxpayerId: "", //纳税人
|
||||
receiptContent: "",
|
||||
},
|
||||
show: true,
|
||||
title: "",
|
||||
tips:
|
||||
"电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。",
|
||||
// 发票类型
|
||||
invoiceType: [
|
||||
{
|
||||
title: "电子普通发票",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
title: "增值税专用发票",
|
||||
active: false,
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
// 发票抬头
|
||||
invoiceHeader: [
|
||||
{
|
||||
title: "个人",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
title: "单位",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
// 商品类型
|
||||
goodsType: [
|
||||
{
|
||||
title: "商品明细",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
title: "商品类别",
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.res) {
|
||||
this.submitData.receiptTitle = this.res.receiptTitle;
|
||||
this.submitData.taxpayerId = this.res.taxpayerId; //纳税人
|
||||
this.submitData.receiptContent = this.res.receiptContent;
|
||||
this.res.receiptContent == "商品明细"
|
||||
? (this.goodsType[0].active = true)
|
||||
: (this.goodsType[1].active = true);
|
||||
this.res.taxpayerId
|
||||
? (this.invoiceHeader[1].active = true)
|
||||
: (this.invoiceHeader[0].active = true);
|
||||
} else {
|
||||
this.invoiceHeader[0].active = true;
|
||||
this.goodsType[0].active = true;
|
||||
}
|
||||
console.log(this.res);
|
||||
},
|
||||
methods: {
|
||||
handleClickHeader(val, index, arr) {
|
||||
arr = arr.map((item) => {
|
||||
return (item.active = false);
|
||||
});
|
||||
val.active = true;
|
||||
},
|
||||
/**
|
||||
* 监听关闭
|
||||
*/
|
||||
close(val) {
|
||||
this.$emit("callbackInvoice", val);
|
||||
},
|
||||
submitInvoice() {
|
||||
/**
|
||||
* 验证
|
||||
*/
|
||||
const { receiptTitle, taxpayerId, receiptContent } = this.submitData;
|
||||
|
||||
if (this.$u.test.isEmpty(receiptTitle)) {
|
||||
uni.showToast({
|
||||
title: "请您填写发票抬头!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
!this.$u.test.isEmpty(receiptTitle) &&
|
||||
this.$u.test.isEmpty(taxpayerId) &&
|
||||
this.invoiceHeader[1].active == true
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "请您填写纳税人识别号!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
this.show = false;
|
||||
this.close(this.submitData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.form-item {
|
||||
display: flex;
|
||||
margin: 30rpx 0;
|
||||
align-items: center;
|
||||
> span {
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
width: 100%;
|
||||
margin-top: 100rpx;
|
||||
background: $main-color;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 100rpx auto 0 auto;
|
||||
color: #f2f2f2;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.invoice-item {
|
||||
margin-right: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 24rpx;
|
||||
|
||||
padding: 12rpx 46rpx;
|
||||
border-radius: 100px;
|
||||
background: #eee;
|
||||
min-width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
font-weight: bold;
|
||||
color: $main-color;
|
||||
border: 2rpx solid $main-color;
|
||||
background: rgba($color: $main-color, $alpha: 0.1);
|
||||
}
|
||||
.disabled {
|
||||
color: #b5b5b6;
|
||||
}
|
||||
.wrapper {
|
||||
padding: 30rpx;
|
||||
}
|
||||
.invoice-title {
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.tips {
|
||||
margin-top: 30rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.divider {
|
||||
margin: 30rpx 0;
|
||||
height: 1rpx;
|
||||
border-bottom: 1px solid #f2f3f5;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
803
pages/order/myOrder.vue
Normal file
803
pages/order/myOrder.vue
Normal file
@@ -0,0 +1,803 @@
|
||||
<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(tabIndex)">
|
||||
<!-- 空白页 -->
|
||||
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="seller-view" :key="oderIndex" v-for="(order, oderIndex) in tabItem.orderList">
|
||||
<!-- 店铺名称 -->
|
||||
<view class="seller-info u-flex u-row-between">
|
||||
<view class="seller-name" @click="tostore(order)">
|
||||
<view class="name">{{ order.storeName }}</view>
|
||||
</view>
|
||||
<view class="order-sn">{{
|
||||
orderStatusList[order.orderStatus]
|
||||
}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<view class="goods-item-view" @click="onDetail(order.sn)">
|
||||
<view class="goods-img" v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
|
||||
<u-image border-radius="6" width="100%" height="100%" :src="goods.image"></u-image>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view v-if="order.orderItems.length <= 1" class="goods-title u-line-2">{{ order.groupName }}</view>
|
||||
<view v-if="order.orderItems.length <= 1" class="goods-price">
|
||||
￥{{ order.flowPrice | unitPrice }}
|
||||
<!-- <span v-if="order.point">+{{ order.point }}积分</span> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="order.orderItems.length <= 1" class="goods-num">
|
||||
<view>x{{ order.groupNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-view u-flex u-row-between">
|
||||
<view class="description">
|
||||
<!-- 全部 -->
|
||||
<!-- 等待付款 -->
|
||||
<text v-if="order.payStatus === 'PAID'">已付金额：</text>
|
||||
<text v-else>应付金额：</text>
|
||||
<text class="price">￥{{ order.flowPrice | unitPrice }}</text>
|
||||
|
||||
<!-- 等待发货 || 等待收货 || 交易完成 || 交易关闭 -->
|
||||
<!-- <text>已付金额：</text>
|
||||
<text class="price">￥12.00</text> -->
|
||||
</view>
|
||||
<view>
|
||||
<!-- 全部 -->
|
||||
<u-button ripple class="pay-btn" shape="circle" size="mini" v-if="order.allowOperationVO.pay" @click="waitPay(order)">立即付款</u-button>
|
||||
<!-- 取消订单 -->
|
||||
<u-button ripple class="cancel-btn" shape="circle" size="mini" v-if="order.allowOperationVO.cancel" @click="onCancel(order.sn)">
|
||||
取消订单
|
||||
</u-button>
|
||||
<!-- 等待收货 -->
|
||||
<u-button ripple shape="circle" class="rebuy-btn" size="mini" v-if="order.allowOperationVO.showLogistics" @click="onLogistics(order)">
|
||||
查看物流
|
||||
</u-button>
|
||||
<u-button ripple :customStyle="{'background':$lightColor,'color':'#fff' }" shape="circle" class="pay-btn" size="mini" v-if="order.allowOperationVO.rog" @click="onRog(order.sn)">
|
||||
确认收货
|
||||
</u-button>
|
||||
<!-- 交易完成 未评价 -->
|
||||
<!-- <u-button
|
||||
shape="circle"
|
||||
class="rebuy-btn"
|
||||
size="mini"
|
||||
v-if="order.orderStatus == 'COMPLETE'"
|
||||
@click="onComment(order.sn)"
|
||||
>
|
||||
评价商品
|
||||
</u-button> -->
|
||||
<u-button ripple shape="circle" class="rebuy-btn" size="mini" v-if="
|
||||
order.orderStatus === 'CANCELLED' ||
|
||||
order.orderStatus === 'COMPLETE'
|
||||
" @click="reBuy(order)">
|
||||
再次购买
|
||||
</u-button>
|
||||
|
||||
<!-- 交易完成 未追评 -->
|
||||
<!-- <u-button class="u-margin-left-15" size="mini"> 追加评价</u-button>
|
||||
<u-button class="u-margin-left-15" size="mini"> 再次购买</u-button> -->
|
||||
<!-- 交易关闭 -->
|
||||
<!-- <u-button class="u-margin-left-15" size="mini"> 取消订单</u-button>
|
||||
<u-button class="u-margin-left-15" size="mini"> 重新购买</u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nodata" v-if="tabItem.loadStatus === 'noMore'">
|
||||
|
||||
</view>
|
||||
|
||||
<uni-load-more :status="tabItem.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<u-popup class="cancel-popup" v-model="cancelShow" mode="bottom" length="60%">
|
||||
<view class="header">取消订单</view>
|
||||
<view class="body">
|
||||
<view class="title">取消订单后，本单享有的优惠可能会一并取消，是否继续？</view>
|
||||
<view>
|
||||
<u-radio-group v-model="reason">
|
||||
<view class="value">
|
||||
<view class="radio-view" :key="index" v-for="(item, index) in cancelList">
|
||||
<u-radio :active-color="$lightColor" label-size="25" shape="circle" :name="item.reason" @change="reasonChange">{{ item.reason }}</u-radio>
|
||||
</view>
|
||||
</view>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<u-button size="medium" ripple v-if="reason" shape="circle" @click="submitCancel">提交</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-toast ref="uToast" />
|
||||
<u-modal v-model="rogShow" :show-cancel-button="true" :content="'是否确认收货?'" @confirm="confirmRog"></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
|
||||
import empty from "@/components/empty";
|
||||
import { getOrderList, cancelOrder, confirmReceipt } from "@/api/order.js";
|
||||
import { getClearReason } from "@/api/after-sale.js";
|
||||
import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
|
||||
export default {
|
||||
components: {
|
||||
uniLoadMore,
|
||||
empty,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabCurrentIndex: 0,
|
||||
orderStatusList: {
|
||||
UNDELIVERED: "待发货",
|
||||
UNPAID: "未付款",
|
||||
PAID: "已付款",
|
||||
DELIVERED: "已发货",
|
||||
CANCELLED: "已取消",
|
||||
COMPLETED: "已完成",
|
||||
TAKE: "已完成",
|
||||
},
|
||||
navList: [
|
||||
{
|
||||
state: 0,
|
||||
text: "全部",
|
||||
loadStatus: "more",
|
||||
orderList: [],
|
||||
pageNumber: 1,
|
||||
},
|
||||
{
|
||||
state: 1,
|
||||
text: "待付款",
|
||||
loadStatus: "more",
|
||||
orderList: [],
|
||||
pageNumber: 1,
|
||||
},
|
||||
{
|
||||
state: 2,
|
||||
text: "待发货",
|
||||
loadStatus: "more",
|
||||
orderList: [],
|
||||
pageNumber: 1,
|
||||
},
|
||||
{
|
||||
state: 3,
|
||||
text: "待收货",
|
||||
loadStatus: "more",
|
||||
orderList: [],
|
||||
pageNumber: 1,
|
||||
},
|
||||
{
|
||||
state: 4,
|
||||
text: "已完成",
|
||||
loadStatus: "more",
|
||||
orderList: [],
|
||||
pageNumber: 1,
|
||||
},
|
||||
{
|
||||
state: 5,
|
||||
text: "已取消",
|
||||
loadStatus: "more",
|
||||
orderList: [],
|
||||
pageNumber: 1,
|
||||
},
|
||||
],
|
||||
status: "",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
tag: "ALL",
|
||||
},
|
||||
orderStatus: [
|
||||
{
|
||||
orderStatus: "ALL", //全部
|
||||
},
|
||||
{
|
||||
orderStatus: "WAIT_PAY", //代付款
|
||||
},
|
||||
{
|
||||
orderStatus: "WAIT_SHIP",
|
||||
},
|
||||
{
|
||||
orderStatus: "WAIT_ROG", //待收货
|
||||
},
|
||||
{
|
||||
orderStatus: "COMPLETE", //已完成
|
||||
},
|
||||
{
|
||||
orderStatus: "CANCELLED", //已取消
|
||||
},
|
||||
],
|
||||
cancelShow: false,
|
||||
orderSn: "",
|
||||
reason: "", //取消原因
|
||||
cancelList: "",
|
||||
|
||||
rogShow: false,
|
||||
};
|
||||
},
|
||||
onBackPress(e) {
|
||||
if (e.from == "backbutton") {
|
||||
uni.reLaunch({
|
||||
url: "/pages/tabbar/user/my",
|
||||
});
|
||||
return true; //阻止默认返回行为
|
||||
}
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
this.loadData(this.status)
|
||||
// uni.stopPullDownRefresh();
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
/**
|
||||
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
|
||||
* 替换onLoad下代码即可
|
||||
*/
|
||||
let status = Number(options.status);
|
||||
this.status = status;
|
||||
this.tabCurrentIndex = status;
|
||||
if (status == 0) {
|
||||
this.loadData(status);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
tabCurrentIndex(val) {
|
||||
this.params.tag = this.orderStatus[val].orderStatus;
|
||||
//切换标签页将所有的页数都重置为1
|
||||
this.navList.forEach((res) => {
|
||||
res.pageNumber = 1;
|
||||
res.loadStatus = "more";
|
||||
res.orderList = [];
|
||||
});
|
||||
this.loadData(val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 店铺详情
|
||||
tostore(val) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/shopPage?id=" + val.storeId,
|
||||
});
|
||||
},
|
||||
|
||||
//取消订单
|
||||
onCancel(sn) {
|
||||
this.orderSn = sn;
|
||||
this.cancelShow = true;
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
getClearReason().then((res) => {
|
||||
if (res.data.result.length >= 1) {
|
||||
this.cancelList = res.data.result;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
initData(index) {
|
||||
this.navList[index].pageNumber = 1;
|
||||
this.navList[index].loadStatus = "more";
|
||||
this.navList[index].orderList = [];
|
||||
this.loadData(index);
|
||||
},
|
||||
waitPay(val) {
|
||||
this.$u.debounce(this.pay(val), 3000)
|
||||
},
|
||||
pay(val){
|
||||
if(val.sn){
|
||||
// #ifdef MP-WEIXIN
|
||||
new LiLiWXPay({sn:val.sn,price:val.flowPrice,orderType:'ORDER'}).pay()
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.navigateTo({
|
||||
url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//获取订单列表
|
||||
loadData(index) {
|
||||
this.params.pageNumber = this.navList[index].pageNumber;
|
||||
getOrderList(this.params).then((res) => {
|
||||
uni.stopPullDownRefresh()
|
||||
if (!res.data.success) {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
return false;
|
||||
}
|
||||
let orderList = res.data.result.records;
|
||||
if (orderList.length == 0) {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
} else if (orderList.length < 10) {
|
||||
this.navList[index].loadStatus = "noMore";
|
||||
}
|
||||
if (orderList.length > 0) {
|
||||
this.navList[index].orderList = this.navList[index].orderList.concat(
|
||||
orderList
|
||||
);
|
||||
this.navList[index].pageNumber += 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
//swiper 切换监听
|
||||
changeTab(e) {
|
||||
this.tabCurrentIndex = e.target.current;
|
||||
},
|
||||
//顶部tab点击
|
||||
tabClick(index) {
|
||||
this.tabCurrentIndex = index;
|
||||
},
|
||||
//删除订单
|
||||
deleteOrder(index) {
|
||||
uni.showLoading({
|
||||
title: "请稍后",
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
|
||||
uni.hideLoading();
|
||||
}, 600);
|
||||
},
|
||||
//取消订单
|
||||
cancelOrder(item) {
|
||||
uni.showLoading({
|
||||
title: "请稍后",
|
||||
});
|
||||
setTimeout(() => {
|
||||
let { stateTip, stateTipColor } = this.orderStateExp(9);
|
||||
item = Object.assign(item, {
|
||||
state: 9,
|
||||
stateTip,
|
||||
stateTipColor,
|
||||
});
|
||||
|
||||
//取消订单后删除待付款中该项
|
||||
let list = this.navList[1].orderList;
|
||||
let index = list.findIndex((val) => val.id === item.id);
|
||||
index !== -1 && list.splice(index, 1);
|
||||
uni.hideLoading();
|
||||
}, 600);
|
||||
},
|
||||
|
||||
//订单状态文字和颜色
|
||||
orderStateExp(state) {
|
||||
let stateTip = "",
|
||||
stateTipColor = this.$lightColor;
|
||||
switch (+state) {
|
||||
case 1:
|
||||
stateTip = "待付款";
|
||||
break;
|
||||
case 2:
|
||||
stateTip = "待发货";
|
||||
break;
|
||||
case 9:
|
||||
stateTip = "订单已关闭";
|
||||
stateTipColor = "#909399";
|
||||
break;
|
||||
|
||||
//更多自定义
|
||||
}
|
||||
return {
|
||||
stateTip,
|
||||
stateTipColor,
|
||||
};
|
||||
},
|
||||
onDetail(sn) {
|
||||
uni.navigateTo({
|
||||
url: "./orderDetail?sn=" + sn,
|
||||
});
|
||||
},
|
||||
|
||||
//选择取消原因
|
||||
reasonChange(reason) {
|
||||
this.reason = reason;
|
||||
},
|
||||
//提交取消订单（未付款）
|
||||
submitCancel() {
|
||||
cancelOrder(this.orderSn, { reason: this.reason }).then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
uni.showToast({
|
||||
title: "订单已取消",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.initData(0);
|
||||
|
||||
this.cancelShow = false;
|
||||
}
|
||||
else{
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.cancelShow = false
|
||||
}
|
||||
});
|
||||
},
|
||||
//确认收货
|
||||
onRog(sn) {
|
||||
this.orderSn = sn;
|
||||
this.rogShow = true;
|
||||
|
||||
//
|
||||
},
|
||||
confirmRog() {
|
||||
confirmReceipt(this.orderSn).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
uni.showToast({
|
||||
title: "已确认收货",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.initData(this.tabCurrentIndex);
|
||||
this.rogShow = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//评价商品
|
||||
onComment(sn) {
|
||||
uni.navigateTo({
|
||||
url: "./evaluate/myEvaluate",
|
||||
});
|
||||
},
|
||||
reBuy(order) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/goods?id=" + order.groupSkuId + "&goodsId="+ order.goodsId,
|
||||
});
|
||||
},
|
||||
//查看物流
|
||||
onLogistics(order) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/msgTips/packageMsg/logisticsDetail?order_sn=" + order.sn,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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: 26rpx;
|
||||
color: $font-color-light;
|
||||
position: relative;
|
||||
|
||||
&.current {
|
||||
color: $main-color;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 44px;
|
||||
height: 0;
|
||||
border-bottom: 2px solid $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.uni-swiper-item {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* load-more */
|
||||
.uni-load-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 80rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-load-more__text {
|
||||
font-size: 28rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.seller-view {
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 20rpx 0rpx;
|
||||
|
||||
.seller-info {
|
||||
height: 70rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.seller-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.name {
|
||||
margin-left: 15rpx;
|
||||
margin-top: -2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-sn {
|
||||
color: $aider-light-color;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item-view {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
padding: 10rpx 20rpx;
|
||||
|
||||
.goods-img {
|
||||
width: 131rpx;
|
||||
height: 131rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
padding-left: 30rpx;
|
||||
flex: 1;
|
||||
|
||||
.goods-title {
|
||||
margin-bottom: 10rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.goods-specs {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: $aider-light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-num {
|
||||
width: 60rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
padding: 25rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.description {
|
||||
color: #909399;
|
||||
size: 25rpx;
|
||||
|
||||
.price {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-popup {
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 15rpx 0rpx;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 30rpx;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20rpx 0;
|
||||
.radio-view {
|
||||
margin: 20rpx 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: #999999 !important;
|
||||
border-color: #999999 !important;
|
||||
margin-left: 15rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
// #ifndef MP-WEIXIN
|
||||
background-color: $light-color !important;
|
||||
// #endif
|
||||
color: #ffffff !important;
|
||||
margin-left: 15rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.rebuy-btn {
|
||||
color: $light-color !important;
|
||||
border-color: $light-color !important;
|
||||
background-color: #ffffff !important;
|
||||
margin-left: 15rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.nodata {
|
||||
// padding-top: 300rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 346rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
720
pages/order/orderDetail.vue
Normal file
720
pages/order/orderDetail.vue
Normal file
@@ -0,0 +1,720 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 订单状态 -->
|
||||
<div class="info-view order-view">
|
||||
<div class="order-status" v-if="orderStatusList[order.orderStatus]">
|
||||
{{ orderStatusList[order.orderStatus].title }}
|
||||
<div>{{ orderStatusList[order.orderStatus].value }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 物流信息 -->
|
||||
<view class="info-view logi-view">
|
||||
<view class="logi-List" v-if="logiList && logiList.traces.length != 0">
|
||||
<view class="logi-List-title">
|
||||
{{logiList.traces[logiList.traces.length-1].AcceptStation}}
|
||||
</view>
|
||||
<view class="logi-List-time">
|
||||
{{logiList.traces[logiList.traces.length-1].AcceptTime}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="logi-List" v-else>
|
||||
<view class="logi-List-title">
|
||||
暂无物流信息
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 地址 -->
|
||||
<view class="info-view">
|
||||
<view class="address-view">
|
||||
<view>
|
||||
<view class="address-title">
|
||||
<span>{{ order.consigneeName || "未填写昵称" }}</span>
|
||||
<span>{{ order.consigneeMobile || "未填写手机号" | secrecyMobile }}</span>
|
||||
</view>
|
||||
<view class="address">地址：{{ order.consigneeAddressPath }}
|
||||
{{ order.consigneeDetail }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<view>
|
||||
<view class="seller-view">
|
||||
<!-- 店铺名称 -->
|
||||
<view class="seller-info u-flex u-row-between">
|
||||
<view class="seller-name" @click="tostore(order)">
|
||||
<view class="name">{{ order.storeName }}</view>
|
||||
<view class="status" v-if="orderStatusList[order.orderStatus]"> {{ orderStatusList[order.orderStatus].title }}</view>
|
||||
</view>
|
||||
<view class="order-sn"></view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-for="(sku, skuIndex) in orderGoodsList" :key="skuIndex">
|
||||
<view class="goods-item-view">
|
||||
<view class="goods-img" @click="gotoGoodsDetail(sku)">
|
||||
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
|
||||
</view>
|
||||
<view class="goods-info" @click="gotoGoodsDetail(sku)">
|
||||
<view class="goods-title u-line-2">{{ sku.goodsName }}</view>
|
||||
<view class="goods-price">
|
||||
￥{{ sku.goodsPrice | unitPrice }}
|
||||
<!-- <span v-if="sku.point">+{{ sku.point }}积分</span> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-num">
|
||||
<view>x{{ sku.num }}</view>
|
||||
|
||||
<view class="good-complaint">
|
||||
<u-tag size="mini" mode="plain" @click="complaint(sku)" v-if="sku.complainStatus == 'NO_APPLY'" text="投诉" type="info" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-view">
|
||||
<view>
|
||||
<view class="order-info-view">
|
||||
<view class="title">商品总价：</view>
|
||||
<view class="value">￥{{ order.goodsPrice | unitPrice }}</view>
|
||||
</view>
|
||||
<view class="order-info-view">
|
||||
<view class="title">运费：</view>
|
||||
<view class="value">￥{{ order.freightPrice | unitPrice }}</view>
|
||||
</view>
|
||||
<view class="order-info-view">
|
||||
<view class="title">优惠券：</view>
|
||||
<view class="value">￥{{ order.couponPrice | unitPrice }}</view>
|
||||
</view>
|
||||
<view class="order-info-view">
|
||||
<view class="title">活动优惠：</view>
|
||||
<view class="value">￥{{ order.discountPrice | unitPrice }}</view>
|
||||
</view>
|
||||
<!-- <view class="order-info-view" v-if="order.use_point">
|
||||
<view class="title">使用积分：</view>
|
||||
<view class="value">{{ order.use_point }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 客户服务， 售后，取消订单，查看物流，投诉等 -->
|
||||
<view class="info-view" v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.cancel == true || order.orderStatus == 'DELIVERED' || order.orderStatus != 'UNPAID' && order.orderType =='PINTUAN'">
|
||||
<view style="width: 100%">
|
||||
<view class="order-info-view">
|
||||
<view class="title">服务</view>
|
||||
</view>
|
||||
<view class="customer-list">
|
||||
<view class="customer-service" v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.cancel == true" @click="onCancel(order.sn)">取消订单</view>
|
||||
<view class="customer-service" v-if="order.orderStatus == 'DELIVERED'" @click="onLogistics(order)">查看物流</view>
|
||||
<view class="customer-service" v-if="order.orderStatus != 'UNPAID' && order.orderType =='PINTUAN' " @click="ByUserMessage(order)">查看拼团信息</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-view">
|
||||
<view style="width: 100%">
|
||||
<view class="order-info-view">
|
||||
<view class="title">订单编号：</view>
|
||||
<view class="value">
|
||||
{{ order.sn }}
|
||||
<u-tag class="copy" text="复制" type="info" size="mini" @click="onCopy(order.sn)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-info-view">
|
||||
<view class="title">下单时间：</view>
|
||||
<view class="value">{{
|
||||
order.createTime
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="order-info-view">
|
||||
<view class="title">支付状态：</view>
|
||||
<view class="value">
|
||||
{{
|
||||
order.payStatus == "UNPAID"
|
||||
? "未付款"
|
||||
: order.payStatus == "PAID"
|
||||
? "已付款"
|
||||
: ""
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="order-info-view">
|
||||
<view class="title">支付方式：</view>
|
||||
<view class="value">{{ orderDetail.paymentMethodValue }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-view" v-if="order.payStatus == 'PAID'">
|
||||
<view>
|
||||
<view class="invoice-info-view">
|
||||
<view class="ltitle">发票信息：</view>
|
||||
<view v-if="!order.needReceipt" class="value">无需发票</view>
|
||||
<view v-else class="value" @click="onReceipt(order.receiptVO)">查看发票</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding-bottom: 150rpx"></view>
|
||||
|
||||
<view class="bottom_view">
|
||||
<view class="btn-view u-flex u-row-between">
|
||||
<view class="description">
|
||||
<!-- 全部 -->
|
||||
<!-- 等待付款 -->
|
||||
|
||||
<text v-if="order.payStatus === 'PAID'">已付金额：</text>
|
||||
<text v-else>应付金额：</text>
|
||||
|
||||
<text class="price" v-if="order.priceDetailDTO">￥{{ order.priceDetailDTO.flowPrice | unitPrice }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<!-- 全部 -->
|
||||
<!-- 等待付款 -->
|
||||
<u-button type="error" ripple size="mini" v-if=" order.allowOperationVO && order.allowOperationVO.pay" @click="toPay(order)">立即付款</u-button>
|
||||
|
||||
<!-- <u-button class="rebuy-btn" size="mini" v-if="order.order_operate_allowable_vo.allow_service_cancel"> 提醒发货</u-button> -->
|
||||
<!-- <div class="pay-btn">确认收货</div> -->
|
||||
<u-button shape="circle" ripple type="warning" size="mini" v-if="order.orderStatus == 'DELIVERED'" @click="onRog(order.sn)">确认收货</u-button>
|
||||
<!-- 交易完成 未评价 -->
|
||||
<u-button shape="circle" ripple size="mini" v-if="order.orderStatus == 'COMPLETE'" @click="onComment(order.sn)">评价商品</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup class="cancel-popup" v-model="cancelShow" mode="bottom" length="60%">
|
||||
<view class="header">取消订单</view>
|
||||
<view class="body">
|
||||
<view class="title">取消订单后，本单享有的优惠可能会一并取消，是否继续？</view>
|
||||
<view>
|
||||
<u-radio-group v-model="reason">
|
||||
<view class="value">
|
||||
<view class="radio-view" v-for="(item, index) in cancelList" :key="index">
|
||||
<u-radio :active-color="lightColor" label-size="25" shape="circle" :name="item.reason" @change="reasonChange">{{ item.reason }}</u-radio>
|
||||
</view>
|
||||
</view>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<u-button size="medium" v-if="reason" shape="circle" @click="submitCancel">提交</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-toast ref="uToast" />
|
||||
<u-modal v-model="rogShow" :show-cancel-button="true" :content="'是否确认收货?'" @confirm="confirmRog"></u-modal>
|
||||
|
||||
<!-- 分享 -->
|
||||
<shares v-if="shareFlage " :thumbnail="orderDetail.orderItems[0].image" :goodsName="orderDetail.orderItems[0].goodsName" @close="shareFlage = false" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getExpress } from "@/api/trade.js";
|
||||
import { cancelOrder, confirmReceipt, getOrderDetail } from "@/api/order.js";
|
||||
|
||||
import h5Copy from "@/js_sdk/h5-copy/h5-copy.js";
|
||||
import shares from "@/components/m-share/index"; //分享
|
||||
|
||||
import { getClearReason } from "@/api/after-sale.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
shares,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$lightColor,
|
||||
logiList: "", //物流信息
|
||||
shareFlage: false, //拼团分享开关
|
||||
orderStatusList: {
|
||||
UNPAID: {
|
||||
title: "未付款",
|
||||
value: "商品暂未付款",
|
||||
},
|
||||
PAID: {
|
||||
title: "已付款",
|
||||
value: "买家已付款",
|
||||
},
|
||||
UNDELIVERED: {
|
||||
title: "待发货",
|
||||
value: "商品等待发货中",
|
||||
},
|
||||
DELIVERED: {
|
||||
title: "已发货",
|
||||
value: "商品已发货,请您耐心等待",
|
||||
},
|
||||
CANCELLED: {
|
||||
title: "已取消",
|
||||
value: "订单已取消",
|
||||
},
|
||||
COMPLETED: {
|
||||
title: "已完成",
|
||||
value: "订单已完成,祝您生活愉快",
|
||||
},
|
||||
TAKE: {
|
||||
title: "带核验",
|
||||
},
|
||||
},
|
||||
order: {},
|
||||
cancelShow: false, //取消订单
|
||||
orderSn: "",
|
||||
orderGoodsList: "", //订单中商品集合
|
||||
orderDetail: "", //订单详情信息
|
||||
sn: "",
|
||||
cancelList: "",
|
||||
rogShow: false,
|
||||
reason: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.loadData(options.sn);
|
||||
this.loadLogistics(options.sn);
|
||||
this.sn = options.sn;
|
||||
},
|
||||
methods: {
|
||||
tostore(val) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/shopPage?id=" + val.storeId,
|
||||
});
|
||||
},
|
||||
// 获取物流信息
|
||||
loadLogistics(sn) {
|
||||
getExpress(sn).then((res) => {
|
||||
this.logiList = res.data.result;
|
||||
});
|
||||
},
|
||||
|
||||
// 分享当前拼团信息
|
||||
inviteGroup() {
|
||||
this.shareFlage = true;
|
||||
},
|
||||
// #TODO 这块需要写一下 目前没有拼团的详细信息
|
||||
ByUserMessage(order) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/cart/payment/shareOrderGoods?sn=" +
|
||||
order.sn +
|
||||
"&sku=" +
|
||||
this.orderGoodsList[0].skuId +
|
||||
"&goodsId=" +
|
||||
this.orderGoodsList[0].goodsId,
|
||||
});
|
||||
},
|
||||
loadData(sn) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
getOrderDetail(sn).then((res) => {
|
||||
const order = res.data.result;
|
||||
this.order = order.order;
|
||||
this.orderGoodsList = order.orderItems;
|
||||
this.orderDetail = res.data.result;
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
onReceipt(val) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/order/invoice/invoiceDetail?id=" + val.id,
|
||||
});
|
||||
},
|
||||
gotoGoodsDetail(sku) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${sku.id}&goodsId=${sku.goodsId}`,
|
||||
});
|
||||
},
|
||||
onCopy(sn) {
|
||||
// #ifdef H5
|
||||
if (sn === null || sn === undefined) {
|
||||
sn = "";
|
||||
} else sn = sn + "";
|
||||
const result = h5Copy(sn);
|
||||
if (result === false) {
|
||||
uni.showToast({
|
||||
title: "不支持",
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
uni.setClipboardData({
|
||||
data: sn,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "复制成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 投诉
|
||||
*/
|
||||
complaint(sku) {
|
||||
console.log(sku);
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/order/complain/complain?sn=" +
|
||||
this.sn +
|
||||
"&skuId=" +
|
||||
sku.skuId,
|
||||
});
|
||||
},
|
||||
//售后按钮
|
||||
onAfterSales(sn, sku) {
|
||||
uni.navigateTo({
|
||||
url: `./afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent(
|
||||
JSON.stringify(sku)
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
// 去支付
|
||||
toPay(val) {
|
||||
console.log(val);
|
||||
val.sn
|
||||
? uni.navigateTo({
|
||||
url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
|
||||
})
|
||||
: false;
|
||||
}, //删除订单
|
||||
deleteOrder(index) {
|
||||
uni.showLoading({
|
||||
title: "请稍后",
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
|
||||
uni.hideLoading();
|
||||
}, 600);
|
||||
},
|
||||
//取消订单
|
||||
onCancel(sn) {
|
||||
this.orderSn = sn;
|
||||
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
getClearReason().then((res) => {
|
||||
if (res.data.result.length >= 1) {
|
||||
this.cancelList = res.data.result;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
|
||||
this.cancelShow = true;
|
||||
},
|
||||
|
||||
//取消订单
|
||||
toCancel(sn) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/order/afterSales/applyCancel?sn=" + sn,
|
||||
});
|
||||
}, //提交取消订单（未付款）
|
||||
submitCancel() {
|
||||
cancelOrder(this.orderSn, { reason: this.reason }).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "已取消",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.cancelShow = false;
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/order/myOrder?status=0",
|
||||
});
|
||||
}, 500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.cancelShow = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//确认收货
|
||||
onRog(sn) {
|
||||
this.orderSn = sn;
|
||||
this.rogShow = true;
|
||||
},
|
||||
confirmRog() {
|
||||
confirmReceipt(this.orderSn).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.$refs.uToast.show({
|
||||
title: "已确认收货",
|
||||
type: "success",
|
||||
});
|
||||
this.rogShow = false;
|
||||
this.loadData(options.sn);
|
||||
}
|
||||
});
|
||||
},
|
||||
//评价商品
|
||||
onComment(sn) {
|
||||
uni.navigateTo({
|
||||
url: "./evaluate/myEvaluate",
|
||||
});
|
||||
}, //查看物流
|
||||
onLogistics(order) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/mine/msgTips/packageMsg/logisticsDetail?logi_id=" +
|
||||
order.logi_id +
|
||||
"&ship_no=" +
|
||||
order.ship_no +
|
||||
"&order_sn=" +
|
||||
order.sn,
|
||||
});
|
||||
},
|
||||
|
||||
//选择取消原因
|
||||
reasonChange(reason) {
|
||||
this.reason = reason;
|
||||
},
|
||||
reBuy(order) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
"/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./goods.scss";
|
||||
.empty {
|
||||
width: 100%;
|
||||
}
|
||||
.customer-service {
|
||||
background: #ededed;
|
||||
// padding: 12rpx 40rpx;
|
||||
width: 48%;
|
||||
margin: 0 1%;
|
||||
height: 55rpx;
|
||||
line-height: 55rpx;
|
||||
margin-bottom: 10rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.customer-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.logi-view {
|
||||
justify-content: space-between;
|
||||
padding: 30rpx !important;
|
||||
margin: 0 !important;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
.order-status {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
margin-top: 40rpx;
|
||||
> div {
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
.logi-List-title {
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.logi-List-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.info-detail {
|
||||
margin-right: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.order-view {
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
padding: 0 !important;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$light-color 0%,
|
||||
$aider-light-color 100%
|
||||
) !important;
|
||||
}
|
||||
page,
|
||||
.content {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-line {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
border-radius: 30rpx;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
|
||||
.info-title {
|
||||
margin: 0 30rpx;
|
||||
padding: 16rpx 0rpx;
|
||||
}
|
||||
}
|
||||
.seller-view {
|
||||
margin: 20rpx 0;
|
||||
padding: 15rpx 0;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.address-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
> span {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.info-view {
|
||||
display: flex;
|
||||
margin: 0 0 20rpx 0;
|
||||
border-radius: 30rpx;
|
||||
flex-direction: row;
|
||||
padding: 15rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.address-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 16rpx 0;
|
||||
|
||||
.address {
|
||||
color: $font-color-light;
|
||||
overflow: hidden;
|
||||
line-height: 1.75;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-info-view {
|
||||
line-height: 60rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
margin: 10rpx 0rpx;
|
||||
|
||||
.title {
|
||||
color: #666;
|
||||
width: 140rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.copy {
|
||||
font-size: 20rpx;
|
||||
color: #333;
|
||||
border: 1px solid #dddddd;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-info-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 10rpx 0rpx;
|
||||
|
||||
.ltitle {
|
||||
width: 550rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_view {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.btn-view {
|
||||
padding: 0 30rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.description {
|
||||
color: #909399;
|
||||
size: 25rpx;
|
||||
|
||||
.price {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: #999999;
|
||||
border-color: #999999;
|
||||
margin-left: 15rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-popup {
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 15rpx 0rpx;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 30rpx;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.radio-view {
|
||||
margin: 10rpx 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user