退货申请详情页完善

src/api/companyAddress.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+export function fetchList() {
+ return request({
+ url:'/companyAddress/list',
+ method:'get'
+ })
+}

src/api/returnApply.js

@@ -14,3 +14,10 @@ export function deleteApply(params) {
  params:params
  })
 }
+
+export function getApplyDetail(id) {
+ return request({
+ url:'/returnApply/'+id,
+ method:'get'
+ })
+}

src/router/index.js

@@ -177,6 +177,13 @@ export const constantRouterMap = [
  name: 'returnReason',
  component: () => import('@/views/oms/apply/reason'),
  meta: {title: '退货原因设置', icon: 'order-return-reason'}
+ },
+ {
+ path: 'returnApplyDetail',
+ name: 'returnApplyDetail',
+ component: () => import('@/views/oms/apply/applyDetail'),
+ meta: {title: '退货原因详情'},
+ hidden:true
  }
  ]
  },

src/styles/index.scss

@@ -99,3 +99,54 @@ a:hover {
  padding: 35px 35px 15px 35px;
  margin: 20px auto;
 }
+
+//主标题
+.font-extra-large {
+ font-size: 20px;
+ color: #303133;
+}
+
+//标题
+.font-large {
+ font-size: 18px;
+ color: #303133;
+}
+
+//小标题
+.font-medium {
+ font-size: 16px;
+ color: #303133;
+}
+
+//正文
+.font-small {
+ font-size: 14px;
+ color: #606266;
+}
+
+//正文（小）
+.font-extra-small {
+ font-size: 13px;
+ color: #606266;
+}
+
+.color-main {
+ color: #409EFF;
+}
+
+.color-success {
+ color: #67C23A;
+}
+
+.color-warning {
+ color: #E6A23C;
+}
+
+.color-danger {
+ color: #F56C6C;
+}
+
+.color-info {
+ color: #909399;
+}
+

src/views/oms/apply/applyDetail.vue

@@ -0,0 +1,262 @@
+<template>
+ <div class="detail-container">
+ <el-card shadow="never">
+ <span class="font-medium">退货商品</span>
+ <el-table
+ border
+ class="standard-margin"
+ ref="productTable"
+ :data="productList">
+ <el-table-column label="商品图片" width="160" align="center">
+ <template slot-scope="scope">
+ <img style="height:80px" :src="scope.row.productPic">
+ </template>
+ </el-table-column>
+ <el-table-column label="商品名称" align="center">
+ <template slot-scope="scope">
+ <span class="font-small">{{scope.row.productName}}</span><br>
+ <span class="font-small">品牌：{{scope.row.productBrand}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="价格/货号" width="180" align="center">
+ <template slot-scope="scope">
+ <span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
+ <span class="font-small">货号：NO.{{scope.row.productId}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="属性" width="180" align="center">
+ <template slot-scope="scope">{{scope.row.productAttr}}</template>
+ </el-table-column>
+ <el-table-column label="数量" width="100" align="center">
+ <template slot-scope="scope">{{scope.row.productCount}}</template>
+ </el-table-column>
+ <el-table-column label="小计" width="100" align="center">
+ <template slot-scope="scope">￥{{totalAmount}}</template>
+ </el-table-column>
+ </el-table>
+ <div style="float:right;margin-top:15px;margin-bottom:15px">
+ <span class="font-medium">合计：</span>
+ <span class="font-medium color-danger">￥{{totalAmount}}</span>
+ </div>
+ </el-card>
+ <el-card shadow="never" class="standard-margin">
+ <span class="font-medium">服务单信息</span>
+ <el-row class="standard-margin">
+ <el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号</el-col>
+ <el-col class="form-border font-small" :span="18" style="height:50px">
+ {{orderReturnApply.orderSn}}
+ <el-button type="text" size="small">查看</el-button>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
+ <el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
+ </el-col>
+ <el-col class="form-border font-small" :span="18" style="height:100px">
+ <img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
+ </el-col>
+ </el-row>
+ <el-row class="standard-margin">
+ <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
+ <el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
+ </el-col>
+ <el-col class="form-border font-small" style="height:52px" :span="18">
+ ￥
+ <el-input size="small" v-model="updateStatusParam.returnAmount"
+ style="width:200px;margin-left: 10px"></el-input>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
+ </el-col>
+ <el-col class="form-border font-small" style="height:52px" :span="18">
+ <el-select size="small" style="width:200px" v-model="updateStatusParam.companyAddressId">
+ <el-option v-for="address in companyAddressList"
+ :key="address.id"
+ :value="address.id"
+ :label="address.addressName">
+ </el-option>
+ </el-select>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
+ <el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
+ <el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
+ <el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
+ </el-row>
+ <el-row>
+ <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
+ <el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
+ </el-row>
+ </el-card>
+ </div>
+</template>
+<script>
+ import {getApplyDetail} from '@/api/returnApply';
+ import {fetchList} from '@/api/companyAddress';
+ import {formatDate} from '@/utils/date';
+
+ const defaultUpdateStatusParam = {
+ companyAddressId: null,
+ handleMan: null,
+ handleNote: null,
+ receiveMan: null,
+ receiveNote: null,
+ returnAmount: 0,
+ status: 0
+ };
+ export default {
+ name: 'returnApplyDetail',
+ data() {
+ return {
+ id: null,
+ orderReturnApply: null,
+ productList: null,
+ proofPics: null,
+ updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
+ companyAddressList: null
+ }
+ },
+ created() {
+ this.id = this.$route.query.id;
+ this.getDetail();
+ this.getCompanyAddressList();
+ },
+ computed: {
+ totalAmount() {
+ if (this.orderReturnApply != null) {
+ return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
+ } else {
+ return 0;
+ }
+ },
+ currentAddress(){
+ let id = this.updateStatusParam.companyAddressId;
+ for(let i=0;i<this.companyAddressList.length;i++){
+ let address=this.companyAddressList[i];
+ if(address.id===id){
+ return address;
+ }
+ }
+ return null;
+ }
+ },
+ filters: {
+ formatStatus(status) {
+ if (status === 0) {
+ return "待处理";
+ } else if (status === 1) {
+ return "退货中";
+ } else if (status === 2) {
+ return "已完成";
+ } else {
+ return "已拒绝";
+ }
+ },
+ formatTime(time) {
+ if (time == null || time === '') {
+ return 'N/A';
+ }
+ let date = new Date(time);
+ return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+ },
+ formatRegion(address){
+ let str=address.province;
+ if(address.city!=null){
+ str+=" "+address.city;
+ }
+ str+=" "+address.region;
+ return str;
+ }
+ },
+ methods: {
+ getDetail() {
+ getApplyDetail(this.id).then(response => {
+ this.orderReturnApply = response.data;
+ this.productList = [];
+ this.productList.push(this.orderReturnApply);
+ if (this.orderReturnApply.proofPics != null) {
+ this.proofPics = this.orderReturnApply.proofPics.split(",")
+ }
+ });
+ },
+ getCompanyAddressList() {
+ fetchList().then(response => {
+ this.companyAddressList = response.data;
+ for(let i=0;i<this.companyAddressList.length;i++){
+ if(this.companyAddressList[i].receiveStatus===1){
+ this.updateStatusParam.companyAddressId=this.companyAddressList[i].id;
+ }
+ }
+ });
+ }
+ }
+ }
+</script>
+<style scoped>
+ .detail-container {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 1080px;
+ padding: 35px 35px 15px 35px;
+ margin: 20px auto;
+ }
+
+ .standard-margin {
+ margin-top: 15px;
+ }
+
+ .form-border {
+ border: 1px solid #DCDFE6;
+ padding: 10px;
+ margin: 0 0 -1px -1px;
+ }
+
+ .form-left-bg {
+ background: #F2F6FC;
+ }
+</style>
+
+

src/views/oms/apply/index.vue

@@ -198,7 +198,7 @@
  },
  formatReturnAmount(row){
  return row.productRealPrice*row.productCount;
- },
+ }
  },
  methods:{
  handleSelectionChange(val){
@@ -211,7 +211,9 @@
  this.listQuery.pageNum = 1;
  this.getList();
  },
- handleViewDetail(){},
+ handleViewDetail(index,row){
+ this.$router.push({path:'/oms/returnApplyDetail',query:{id:row.id}})
+ },
  handleBatchOperate(){
  if(this.multipleSelection==null||this.multipleSelection.length<1){
  this.$message({