买家端订单详情添加操作，商品选择器，categoryId传参错误
mabo
parent
d822c3c809
commit
db42d19f44
|
|
@ -3,10 +3,10 @@
|
|||
<BaseHeader></BaseHeader>
|
||||
<Search></Search>
|
||||
<cateNav></cateNav>
|
||||
<ul class="category">
|
||||
<li @click="selectCate(cate.id)" :class="{'selected-cate': cate.id === params.pointsGoodsCategoryId}" v-for="(cate, index) in cateList" :key="index">{{cate.name}}</li>
|
||||
</ul>
|
||||
<h3 class="promotion-decorate">积分商品</h3>
|
||||
<Select @on-select="selectCate" size="small" class="cate-select-con" v-model="cateId">
|
||||
<Option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</Option>
|
||||
</Select>
|
||||
<!-- 列表 -->
|
||||
<div class="goods-list">
|
||||
<empty v-if="goodsList.length === 0" />
|
||||
|
|
@ -58,18 +58,20 @@ export default {
|
|||
goodsList: [], // 积分商品列表
|
||||
cateList: [{ // 商品分类
|
||||
name: '全部分类',
|
||||
id: ''
|
||||
id: 0
|
||||
}], // 积分分类列表
|
||||
params: { // 商品列表请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
pointsGoodsCategoryId: ''
|
||||
},
|
||||
total: 0 // 商品总数
|
||||
total: 0, // 商品总数
|
||||
cateId: '' // 店铺分类id
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.params.pointsGoodsCategoryId = this.$route.query.categoryId || ''
|
||||
this.cateId = this.$route.query.categoryId || 0
|
||||
this.getList()
|
||||
this.getCate()
|
||||
},
|
||||
|
|
@ -89,10 +91,11 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
selectCate (id) { // 选择商品分类
|
||||
this.params.pointsGoodsCategoryId = id
|
||||
selectCate (item) { // 选择商品分类
|
||||
let cateId = item.value === 0 ? '' : item.value
|
||||
this.params.pointsGoodsCategoryId = cateId
|
||||
this.getList()
|
||||
this.$router.push({query: {categoryId: id}})
|
||||
this.$router.push({query: {categoryId: cateId}})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routerUrl = this.$router.resolve({
|
||||
|
|
@ -118,6 +121,9 @@ export default {
|
|||
.seckill-price {
|
||||
font-size: 18px;
|
||||
}
|
||||
.point-mall{
|
||||
position: relative;
|
||||
}
|
||||
.category {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -147,4 +153,12 @@ export default {
|
|||
.promotion-decorate::before,.promotion-decorate::after{
|
||||
background-image: url('../../static/sprite@2x.png');
|
||||
}
|
||||
.cate-select-con{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: -60px;
|
||||
left: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -159,6 +159,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
window.scrollTo(0, 0)
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getOrderDetail()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<div class="order-detail">
|
||||
<card _Title="售后详情" :_Size="16"></card>
|
||||
<!-- 操作按钮 -->
|
||||
<Card class="mb_10" v-if="(afterSale.serviceStatus == 'PASS' &&
|
||||
afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
|
||||
<Button type="success" @click="openModal" v-if="afterSale.serviceStatus == 'PASS' &&
|
||||
afterSale.serviceType != 'RETURN_MONEY'" size="small">提交物流</Button>
|
||||
<Button type="error" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</Button>
|
||||
</Card>
|
||||
<div class="order-card">
|
||||
<h3>{{afterSale.serviceName}}</h3>
|
||||
<p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
|
||||
|
|
@ -67,10 +74,35 @@
|
|||
<img :src="img" width="200" height="200" @click="perviewImg(img)" class="hover-pointer" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<Modal v-model="logisticsShow" width="530">
|
||||
<p slot="header">
|
||||
<span>提交物流信息</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form ref="form" :model="form" label-position="left" :label-width="100" :rules="rules">
|
||||
<FormItem label="物流公司" prop="logisticsId">
|
||||
<Select v-model="form.logisticsId" placeholder="请选择物流公司">
|
||||
<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="快递单号" prop="logisticsNo">
|
||||
<Input v-model="form.logisticsNo" placeholder="请填写快递单号"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="发货时间" prop="mDeliverTime">
|
||||
<DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: right">
|
||||
<Button @click="logisticsShow = false">关闭</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitDelivery">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { afterSaleDetail, afterSaleLog, afterSaleReason } from '@/api/member.js';
|
||||
import { afterSaleDetail, afterSaleLog, afterSaleReason, cancelAfterSale } from '@/api/member.js';
|
||||
import { afterSaleDelivery, getLogisticsCompany } from '@/api/order.js';
|
||||
import { afterSaleStatusList } from '../enumeration.js'
|
||||
export default {
|
||||
name: 'aftersale-detail',
|
||||
|
|
@ -79,7 +111,21 @@ export default {
|
|||
afterSale: {}, // 售后详情数据
|
||||
logList: [], // 日志
|
||||
reasonList: [], // 售后原因列表
|
||||
afterSaleStatusList // 售后状态列表
|
||||
afterSaleStatusList, // 售后状态列表
|
||||
companyList: [], // 物流公司列表
|
||||
logisticsShow: false, // 物流信息modal
|
||||
form: { // 物流信息数据
|
||||
afterSaleSn: '',
|
||||
logisticsId: '',
|
||||
logisticsNo: '',
|
||||
mDeliverTime: ''
|
||||
},
|
||||
rules: { // 必填校验
|
||||
logisticsId: [{ required: true, message: '请选择物流公司' }],
|
||||
logisticsNo: [{ required: true, message: '请填写物流编号' }],
|
||||
mDeliverTime: [{ required: true, message: '请选择发货时间' }]
|
||||
},
|
||||
submitLoading: false // 提交加载状态
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -89,7 +135,7 @@ export default {
|
|||
this.afterSale = res.result;
|
||||
this.afterSale.serviceName = this.filterOrderStatus(this.afterSale.serviceStatus)
|
||||
// 如果是原因id，则调接口查询原因中文释义
|
||||
const pattern3 = new RegExp("[0-9]+");
|
||||
const pattern3 = new RegExp('[0-9]+');
|
||||
if (pattern3.test(this.afterSale.reason)) {
|
||||
this.getReason(this.afterSale.serviceType)
|
||||
} else {
|
||||
|
|
@ -102,7 +148,7 @@ export default {
|
|||
afterSaleReason(type).then(res => {
|
||||
if (res.success) {
|
||||
this.reasonList = res.result
|
||||
this.reasonList.forEach(e=> {
|
||||
this.reasonList.forEach(e => {
|
||||
if (e.id === this.afterSale.reason) {
|
||||
this.$set(this.afterSale, 'reasonName', e.reason)
|
||||
}
|
||||
|
|
@ -121,6 +167,56 @@ export default {
|
|||
},
|
||||
perviewImg (img) { // 查看图片
|
||||
window.open(img, '_blank')
|
||||
},
|
||||
cancel (sn) { // 取消售后申请
|
||||
this.$Modal.confirm({
|
||||
title: '取消',
|
||||
content: '<p>确定取消此次售后申请吗？</p>',
|
||||
onOk: () => {
|
||||
cancelAfterSale(sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消售后申请成功')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel: () => {}
|
||||
});
|
||||
},
|
||||
// 获取物流公司列表
|
||||
getCompany () {
|
||||
getLogisticsCompany().then(res => {
|
||||
if (res.success) {
|
||||
this.companyList = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交物流信息
|
||||
submitDelivery () {
|
||||
this.submitLoading = true
|
||||
afterSaleDelivery(this.form).then(res => {
|
||||
if (res.success) {
|
||||
this.logisticsShow = false;
|
||||
this.$Message.success('提交成功')
|
||||
this.getDetail()
|
||||
}
|
||||
this.submitLoading = false
|
||||
}).catch(() => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
},
|
||||
// 提交物流modal
|
||||
openModal () {
|
||||
this.form.afterSaleSn = this.afterSale.sn
|
||||
this.logisticsShow = true;
|
||||
this.$refs.form.resetFields()
|
||||
if (!this.companyList.length) {
|
||||
this.getCompany()
|
||||
}
|
||||
},
|
||||
// 格式化时间
|
||||
changeTime (time) {
|
||||
this.form.mDeliverTime = time;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@ export default {
|
|||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getOrderDetail()
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="order-detail" v-if="order.order">
|
||||
<card _Title="订单详情" :_Size="16"></card>
|
||||
<Card class="mb_10" v-if="order.allowOperationVO.pay || order.allowOperationVO.rog || order.allowOperationVO.cancel">
|
||||
<Button type="success" @click="goPay(order.order.sn)" size="small" v-if="order.allowOperationVO.pay">去支付</Button>
|
||||
<Button type="info" @click="received(order.order.sn)" size="small" v-if="order.allowOperationVO.rog">确认收货</Button>
|
||||
<Button type="error" @click="handleCancelOrder(order.order.sn)" v-if="order.allowOperationVO.cancel" size="small">取消订单</Button>
|
||||
</Card>
|
||||
<p class="verificationCode" v-if="order.order.verificationCode">核验码：<span>{{order.order.verificationCode}}</span></p>
|
||||
<div class="order-card">
|
||||
<p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
|
||||
|
|
@ -50,11 +55,12 @@
|
|||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">商品</th>
|
||||
<th width="40%">商品</th>
|
||||
<th width="20%">货号</th>
|
||||
<th width="10%">单价</th>
|
||||
<th width="10%">数量</th>
|
||||
<th width="10%">小计</th>
|
||||
<th width="10%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -71,6 +77,11 @@
|
|||
<td>{{ goods.goodsPrice | unitPrice('￥') }}</td>
|
||||
<td>{{ goods.num }}</td>
|
||||
<td>{{ (goods.goodsPrice * goods.num) | unitPrice('￥') }}</td>
|
||||
<td>
|
||||
<Button v-if="goods.afterSaleStatus.includes('NOT_APPLIED')" @click="applyAfterSale(goods.sn)" type="info" size="small" class="mb_5">申请售后</Button>
|
||||
<Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.order.sn, goodsIndex)" size="small" type="success" class="fontsize_12 mb_5" >评价</Button>
|
||||
<Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small">投诉</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -93,17 +104,31 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal v-model="cancelAvail" title="请选择取消订单原因" @on-ok="sureCancel" @on-cancel="cancelAvail = false">
|
||||
<RadioGroup v-model="cancelParams.reason" vertical type="button" button-style="solid">
|
||||
<Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
|
||||
{{item.reason}}
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { orderDetail, getTraces } from '@/api/order.js';
|
||||
import { orderDetail, getTraces, sureReceived, cancelOrder } from '@/api/order.js';
|
||||
import { afterSaleReason } from '@/api/member';
|
||||
export default {
|
||||
name: 'order-detail',
|
||||
data () {
|
||||
return {
|
||||
order: {}, // 订单详情数据
|
||||
progressList: [], // 订单流程
|
||||
logistics: [] // 物流数据
|
||||
logistics: [], // 物流数据
|
||||
cancelParams: { // 取消售后参数
|
||||
orderSn: '',
|
||||
reason: ''
|
||||
},
|
||||
cancelAvail: false, // 取消订单modal控制
|
||||
cancelReason: [] // 取消订单原因
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -137,6 +162,46 @@ export default {
|
|||
this.logistics = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
received (sn) { // 确认收货
|
||||
sureReceived(sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('确认收货成功')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
goPay (sn) { // 去支付
|
||||
this.$router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
|
||||
},
|
||||
applyAfterSale (sn) { // 申请售后
|
||||
this.$router.push({name: 'ApplyAfterSale', query: {sn: sn}})
|
||||
},
|
||||
comment (sn, goodsIndex) { // 评价
|
||||
this.$router.push({path: '/home/addEval', query: {sn, index: goodsIndex}})
|
||||
},
|
||||
complain (sn, goodsIndex) { // 投诉
|
||||
this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
|
||||
},
|
||||
handleCancelOrder (sn) {
|
||||
// 取消订单
|
||||
this.cancelParams.orderSn = sn;
|
||||
afterSaleReason('CANCEL').then(res => {
|
||||
if (res.success) {
|
||||
this.cancelReason = res.result;
|
||||
this.cancelAvail = true
|
||||
this.cancelParams.reason = this.cancelReason[0].reason
|
||||
}
|
||||
})
|
||||
},
|
||||
sureCancel () { // 确定取消
|
||||
cancelOrder(this.cancelParams).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消订单成功')
|
||||
this.getDetail()
|
||||
this.cancelAvail = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -146,6 +211,9 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mb_5{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.order-card {
|
||||
padding: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -167,7 +235,7 @@ export default {
|
|||
.operation-time {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
/** 店铺名称 */
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
category(val) {
|
||||
this.goodsParams.categoryPath = val[0];
|
||||
this.goodsParams.categoryPath = val[2];
|
||||
},
|
||||
selectedWay: {
|
||||
handler() {
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export default {
|
|||
background: #ededed;
|
||||
}
|
||||
.item-title {
|
||||
background: #f5f7fa;
|
||||
background: #d7e7f5!important;
|
||||
height: 54px;
|
||||
}
|
||||
.no-more {
|
||||
|
|
@ -244,7 +244,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(3n) {
|
||||
.item:nth-of-type(2n+1) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="seckill">
|
||||
<div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
|
||||
<div class="aside">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
|
|
@ -152,6 +153,13 @@ export default {
|
|||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.desc{
|
||||
position: absolute;
|
||||
color: $theme_color;
|
||||
left: 200px;
|
||||
top: 5px;
|
||||
}
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
background: #ededed;
|
||||
}
|
||||
.item-title {
|
||||
background: #f5f7fa;
|
||||
background: #d7e7f5!important;
|
||||
height: 54px;
|
||||
}
|
||||
.no-more {
|
||||
|
|
@ -217,7 +217,7 @@ export default {
|
|||
align-items: center;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(3n) {
|
||||
.item:nth-of-type(2n+1) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue