commit message

buyer/src/pages/home/orderCenter/AddAddress.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <card _Title="收货地址" />
+    <div class="add-box">
+      <Form
+        :model="formData"
+        ref="form"
+        label-position="left"
+        :label-width="100"
+        :rules="ruleInline"
+      >
+        <FormItem label="收件人" prop="name">
+          <i-input v-model="formData.name" style="width: 600px"></i-input>
+        </FormItem>
+        <FormItem label="收件地区" prop="address">
+          <i-input
+            v-model="formData.address"
+            disabled
+            style="width: 600px"
+          ></i-input>
+          <Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
+        </FormItem>
+        <FormItem label="详细地址" prop="detail">
+          <i-input v-model="formData.detail" style="width: 600px"></i-input>
+        </FormItem>
+        <FormItem label="手机号码" prop="mobile">
+          <i-input v-model="formData.mobile" style="width: 600px"></i-input>
+        </FormItem>
+        <FormItem label="地址别名">
+          <i-input
+            v-model="formData.alias"
+            length
+            :maxlength="4"
+            placeholder="请输入地址别名，例如公司"
+            style="width: 600px"
+          ></i-input>
+        </FormItem>
+        <FormItem label="默认地址">
+          <i-switch v-model="formData.isDefault" />
+        </FormItem>
+      </Form>
+    </div>
+    <div class="mt_20">
+      <Button type="primary" class="mr_10" :loading="loading" @click="save"
+        >保存收货地址</Button
+      >
+      <Button @click="$router.back()">返回</Button>
+    </div>
+    <lili-map ref="map" @getAddress="getAddress"></lili-map>
+  </div>
+</template>
+
+<script>
+import card from '@/components/card';
+import liliMap from '@/components/map';
+import {
+  newMemberAddress,
+  editMemberAddress,
+  getAddrDetail
+} from '@/api/address';
+export default {
+  name: 'AddAddress',
+  data () {
+    return {
+      formData: { // 添加地址表单
+        isDefault: false
+      },
+      ruleInline: { // 验证规则
+        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
+        detail: [
+          { required: true, message: '请输入详细地址', trigger: 'blur' }
+        ],
+        mobile: [
+        ]
+      },
+      loading: false, // 加载状态
+      mapMsg: {} // 地图信息
+    };
+  },
+  methods: {
+    save () {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(this.formData));
+          params.consigneeAddressPath = params.address.replace(/\s/g, ',');
+          delete params.address;
+          this.loading = true;
+          if (this.$route.query.id) {
+            editMemberAddress(params).then((res) => {
+              if (res.code === 200) {
+                this.loading = false;
+                this.$router.push('/home/MyAddress');
+              }
+            }).catch(() => { this.loading = false; });
+          } else {
+            newMemberAddress(params).then((res) => {
+              if (res.code === 200) {
+                this.loading = false;
+                this.$router.push('/home/MyAddress');
+              }
+            }).catch(() => { this.loading = false; });
+          }
+        }
+      });
+    },
+    getAddrById (id) {
+      // 获取地址详情
+      getAddrDetail(id).then((res) => {
+        if (res.code === 200) {
+          console.log(res);
+          const data = res.result;
+          data.address = res.result.consigneeAddressPath.replace(/,/g, ' ');
+          this.formData = data;
+        }
+      });
+    },
+    getAddress (item) {
+      // 获取地图选择信息
+      console.log(item);
+      this.mapMsg = item;
+      this.$set(this.formData, 'address', item.addr);
+      this.$set(this.formData, 'consigneeAddressIdPath', item.addrId);
+      this.$set(this.formData, 'detail', item.detail);
+      this.formData.lat = item.position.lat;
+      this.formData.lon = item.position.lng;
+    }
+  },
+  mounted () {
+    const id = this.$route.query.id;
+    if (id) this.getAddrById(id);
+  },
+  components: {
+    card,
+    liliMap
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.add-box {
+  margin: 40px 0;
+}
+</style>

buyer/src/pages/home/orderCenter/AfterSale.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="wrapper">
+    <!-- 卡片组件 -->
+    <card _Title="我的售后" :_Size="16"></card>
+    <!-- 搜索 筛选 -->
+    <div class="mb_20 box">
+      <div class="global_float_right" >
+        <Input
+          class="width_300"
+          search
+          enter-button
+          v-model="params.keywords"
+          @on-search="getList"
+          placeholder="请输入订单号搜索"
+        />
+      </div>
+    </div>
+    <!-- 列表 -->
+    <empty v-if="orderList.length === 0" />
+    <div class="order-content" v-else>
+      <template v-for="(order, onderIndex) in orderList">
+        <div
+          class="order-list"
+          :key="onderIndex"
+        >
+          <div class="order-header">
+            <div>
+              <div v-if="order.serviceStatus">{{filterOrderStatus(order.serviceStatus)}}</div>
+              <div>
+                售后单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{order.createTime}}
+                &nbsp; &nbsp;{{ order.memberName | secrecyMobile }}
+              </div>
+            </div>
+            <div>
+              <span>{{ order.applyRefundPrice | unitPrice("￥") }}</span>
+            </div>
+          </div>
+          <div class="order-body">
+            <div class="goods-list">
+              <img @click="goodsDetail(order.skuId, order.goodsId)" class="hover-color" :src="order.goodsImage" alt="" />
+
+              <div>
+                <div class="hover-color" @click="goodsDetail(order.skuId, order.goodsId)">{{ order.goodsName }}</div>
+                <div class="mt_10">
+                  <span class="global_color"
+                    >{{ order.flowPrice | unitPrice("￥") }} </span
+                  >x {{ order.num }}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <span @click="shopPage(order.shopId)">{{ order.storeName }}</span>
+            </div>
+            <div>
+              <!-- 订单基础操作 -->
+              <Button @click="goDetail(order.sn)" size="small">售后详情</Button>
+              <Button @click="cancel(order.sn)" v-if="order.afterSaleAllowOperationVO.cancel" size="small">取消售后</Button>
+            </div>
+          </div>
+        </div>
+      </template>
+      <Spin size="large" fix v-if="spinShow"></Spin>
+    </div>
+    <!-- 分页 -->
+    <div class="page-size">
+      <Page :total="total" @on-change="changePageNum"
+        @on-page-size-change="changePageSize"
+        :page-size="params.pageSize"
+        show-sizer>
+      </Page>
+    </div>
+  </div>
+</template>
+
+<script>
+import { afterSaleList, cancelAfterSale } from '@/api/member.js';
+import { afterSaleStatusList } from '../enumeration.js'
+export default {
+  name: 'AfterSale',
+  data () {
+    return {
+      orderList: [], // 订单列表
+      params: { // 请求参数
+        pageNumber: 1,
+        pageSize: 10,
+        keywords: ''
+      },
+      // 状态数组
+      afterSaleStatusList,
+      total: 0, // 订单总数
+      spinShow: false // 加载状态
+    };
+  },
+  mounted () {
+    this.getList();
+  },
+  methods: {
+    goDetail (sn) { // 跳转售后详情
+      this.$router.push({
+        name: 'AfterSaleDetail',
+        query: {sn}
+      })
+    },
+    cancel (sn) { // 取消售后申请
+      this.$Modal.confirm({
+        title: '取消',
+        content: '<p>确定取消此次售后申请吗？</p>',
+        onOk: () => {
+          cancelAfterSale(sn).then(res => {
+            if (res.success) {
+              this.$Message.success('取消售后申请成功')
+              this.getList()
+            }
+          })
+        },
+        onCancel: () => {}
+      });
+    },
+    goodsDetail (skuId, goodsId) {
+      // 跳转商品详情
+      let routeUrl = this.$router.resolve({
+        path: '/goodsDetail',
+        query: { skuId, goodsId }
+      });
+      window.open(routeUrl.href, '_blank');
+    },
+    // 跳转店铺首页
+    shopPage (id) {
+      let routeUrl = this.$router.resolve({
+        path: '/Merchant',
+        query: { id: id }
+      });
+      window.open(routeUrl.href, '_blank');
+    },
+    getList () {
+      this.spinShow = true;
+      let params = JSON.parse(JSON.stringify(this.params))
+      afterSaleList(params).then(res => {
+        this.spinShow = false
+        if (res.success) {
+          this.orderList = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    changePageNum (val) {
+      this.params.pageNumber = val;
+      this.getList()
+    },
+    changePageSize (val) {
+      this.pageNumber = 1;
+      this.params.pageSize = val;
+      this.getList()
+    },
+    filterOrderStatus (status) { // 获取订单状态中文
+      const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
+      return ob[0].name
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  margin-bottom: 40px;
+}
+.box {
+  overflow: hidden;
+}
+.page-size {
+  margin: 15px 0px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+/** 订单列表 */
+.order-list {
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  margin-bottom: 10px;
+
+  &:hover{
+    .del-btn{visibility: visible;}
+  }
+  .del-btn{
+    visibility: hidden;
+  }
+
+  .order-header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    justify-content: space-between;
+    border-bottom: 1px solid #ddd;
+    > div:nth-child(1) > div:nth-child(2) {
+      font-size: 12px;
+      color: #999;
+      margin-top: 3px;
+    }
+  }
+  .order-body {
+    display: flex;
+    justify-content: space-between;
+    color: #999;
+    padding: 10px;
+
+    .goods-list {
+      width: 500px;
+      display: flex;
+      margin-bottom: 10px;
+      img {
+        width: 60px;
+        height: 60px;
+        margin-right: 10px;
+      }
+      > div {
+        flex: 1;
+      }
+    }
+
+    > div:nth-child(2) {
+      width: 150px;
+      text-align: center;
+      span {
+        color: #438cde;
+        cursor: pointer;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+      .ivu-icon {
+        color: #ff8f23;
+        cursor: pointer;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+    }
+
+    > div:nth-child(3) {
+      width: 100px;
+      .ivu-btn {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+</style>

buyer/src/pages/home/orderCenter/AfterSaleDetail.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="order-detail">
+    <card _Title="售后详情" :_Size="16"></card>
+    <div class="order-card">
+      <h3>{{filterOrderStatus(afterSale.serviceStatus)}}</h3>
+      <p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
+      <p>售后单号：{{ afterSale.sn }} &nbsp;&nbsp;&nbsp;订单号：{{afterSale.orderSn}}</p>
+      <div style="color:#999;" class="operation-time">创建时间：{{afterSale.createTime}}</div>
+      <div class="service-after">
+        <div>
+          本次售后服务由<span>{{afterSale.storeName}}</span>为您提供
+        </div>
+        <div>
+          <img :src="afterSale.goodsImage" alt="" width="60" height="60">
+          <span>{{afterSale.goodsName}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="order-card">
+      <h3>售后进程</h3>
+      <Steps class="progress" :current="logList.length" direction="vertical">
+        <Step
+          :content="'操作人：'+ log.operatorName + '   ' + log.createTime"
+          :title="log.message"
+          v-for="(log, index) in logList"
+          :key="index"
+        ></Step>
+      </Steps>
+    </div>
+    <div class="order-card">
+      <h3 class="mb_10">服务单信息</h3>
+      <table border="1" cellpadding='0' cellspacing="0">
+        <tr>
+          <td>退款方式</td><td>{{afterSale.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}{{afterSale.applyRefundPrice | unitPrice('￥')}}</td>
+        </tr>
+        <tr>
+          <td>商品处理方式</td><td>{{afterSale.serviceType == 'RETURN_MONEY' ? '退款' : '退货'}}</td>
+        </tr>
+        <tr>
+          <td>退款原因</td><td>{{afterSale.reason}}</td>
+        </tr>
+        <tr>
+          <td>问题描述</td><td>{{afterSale.problemDesc}}</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import { afterSaleDetail, afterSaleReason, afterSaleLog } from '@/api/member.js';
+import { afterSaleStatusList } from '../enumeration.js'
+export default {
+  name: 'aftersale-detail',
+  data () {
+    return {
+      afterSale: {}, // 售后详情数据
+      logList: [], // 日志
+      afterSaleStatusList // 售后状态列表
+
+    };
+  },
+  methods: {
+    getDetail () { // 售后详情
+      afterSaleDetail(this.$route.query.sn).then(res => {
+        if (res.success) {
+          this.afterSale = res.result;
+
+          afterSaleReason(this.afterSale.serviceType).then(res => {
+            res.result.forEach(element => {
+              if (element.id === this.afterSale.reason) {
+                this.$set(this.afterSale, 'reason', element.reason)
+              }
+            });
+          })
+        }
+      })
+    },
+    getLog () {
+      afterSaleLog(this.$route.query.sn).then(res => {
+        this.logList = res.result;
+      })
+    },
+    filterOrderStatus (status) { // 获取订单状态中文
+      const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
+      return ob[0].name
+    }
+  },
+  mounted () {
+    this.getDetail();
+    this.getLog()
+  }
+};
+</script>
+<style lang="scss" scoped>
+.order-card {
+  padding: 10px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #e8eaec;
+  position: relative;
+  .global_color {
+    color: $theme_color;
+  }
+  p {
+    color: #999;
+    margin: 3px;
+  }
+  h3 {
+    font-weight: normal;
+    font-size: 16px;
+  }
+  .operation-time {
+    position: absolute;
+    right: 20px;
+    top: 10px;
+  }
+  &:last-child{
+    border: none;
+  }
+}
+.service-after {
+  border: 1px solid #eee;
+  display: flex;
+  height: 80px;
+  padding: 10px;
+  >div:nth-child(1) {
+    width: 400px;
+    font-size: 15px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 60px;
+    span{color: $theme_color;}
+    border-right: 1px solid #eee;
+  }
+  >div:nth-child(2){
+    padding-left: 15px;
+    img{vertical-align: top;}
+    span{color: #999;}
+  }
+}
+/** 售后进度条 */
+.progress {
+  margin: 15px 0;
+}
+table{
+  border-color: #eee;
+  width: 100%;
+  color: #999;
+  tr{
+    td:nth-child(1){
+      width: 200px;
+    }
+  }
+  td{
+    padding: 5px;
+  }
+}
+</style>

buyer/src/pages/home/orderCenter/ApplyAfterSale.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="apply-after-sale">
+    <card _Title="申请售后"></card>
+    <Table
+      border
+      :columns="columns"
+      :data="goodsData"
+    >
+    <template slot-scope="{ row }" slot="goodsName">
+      <div style="padding:5px;display:flex;">
+        <img :src="row.image" style="vertical-align: top;" width="60" alt=""> <span class="ml_10">{{row.goodsName}}</span>
+      </div>
+    </template>
+    <template slot-scope="{ row }" slot="goodsPrice">
+      <div>{{row.goodsPrice | unitPrice('￥')}}</div>
+    </template>
+    </Table>
+    <div>
+      <Form :model="form" ref="form" :rules="rules" :label-width="80">
+        <FormItem label="售后类别">
+          <RadioGroup v-model="form.serviceType" @on-change="changeReason">
+            <Radio label="RETURN_GOODS">退货</Radio>
+            <Radio label="RETURN_MONEY">退款</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="提交数量" prop="num">
+          <Input type="number" v-model="form.num" style="width:260px" />
+        </FormItem>
+        <FormItem label="提交原因" prop="reason">
+          <Select v-model="form.reason" style="width:260px">
+            <Option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</Option>
+          </Select>
+        </FormItem>
+        <FormItem label="问题描述" prop="problemDesc">
+          <Input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
+        </FormItem>
+        <FormItem label="图片信息">
+          <div style="display:flex;align-items:center;">
+            <div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
+              <img :src="img">
+              <div class="demo-upload-list-cover">
+                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
+                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+              </div>
+            </div>
+            <Upload
+                :show-upload-list="false"
+                :on-success="handleSuccess"
+                :before-upload="handleBeforeUpload"
+                :format="['jpg','jpeg','png']"
+                :action="action"
+                :headers="accessToken"
+                style="display: inline-block;width:58px;">
+                <div class="hover-pointer icon-upload" style="">
+                  <Icon type="md-add" size="20"></Icon>
+                </div>
+            </Upload>
+          </div>
+        </FormItem>
+        <FormItem label="退款方式">
+          <div>{{info.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</div>
+        </FormItem>
+        <template v-if="info.accountType === 'BANK_TRANSFER' && info.applyRefundPrice != 0">
+          <FormItem label="开户行" prop="bankDepositName">
+            <Input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
+          </FormItem>
+          <FormItem label="开户名" prop="bankAccountName">
+            <Input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
+          </FormItem>
+          <FormItem label="银行账号" prop="bankAccountNumber">
+            <Input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
+          </FormItem>
+        </template>
+        <FormItem label="返回方式">
+          <div>快递至第三方卖家</div>
+        </FormItem>
+        <FormItem>
+          <Button type="primary" @click="apply">提交申请</Button>
+        </FormItem>
+      </Form>
+      <Modal title="View Image" v-model="visible">
+        <img :src="previewImage" v-if="visible" style="width: 100%">
+      </Modal>
+    </div>
+  </div>
+</template>
+<script>
+import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
+import { commonUrl } from '@/plugins/request.js';
+import storage from '@/plugins/storage';
+import * as RegExp from '@/plugins/RegExp'
+export default {
+  data () {
+    const checkNum = (rule, value, callback) => {
+      if (value === '') {
+        console.log(RegExp);
+        callback(new Error('请填写提交数量'));
+      } else if (value > this.info.num) {
+        callback(new Error('提交数量不能大于购买数量'));
+      } else if (!RegExp.integer.test(value)) {
+        callback(new Error('提交数量必须为正整数'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      columns: [ // 表格表头
+        {title: '商品名称', slot: 'goodsName'},
+        {title: '价格', slot: 'goodsPrice'},
+        {title: '购买数量', key: 'num'}
+      ],
+      goodsData: [], // 商品数据
+      reasonList: [], // 售后原因列表
+      info: {}, // 售后信息
+      form: { // 售后数据
+        serviceType: 'RETURN_GOODS',
+        num: 1
+      },
+      uploadList: [], // 上传列表
+      action: commonUrl + '/common/upload/file', // 上传地址
+      accessToken: {}, // 验证token
+      visible: false, // 图片预览
+      previewImage: '', // 预览图片url
+      rules: { // 验证规则
+        num: [{ validator: checkNum }],
+        reason: [{ required: true, message: '请选择提交原因' }],
+        problemDesc: [{ required: true, message: '请输入问题描述' }],
+        bankAccountNumber: [
+          { required: true, message: '请输入银行卡号' },
+          {
+            type: 'string',
+            pattern: /^([1-9]{1})(\d{14}|\d{18})$/,
+            message: '请输入正确的银行卡号'
+          }
+        ],
+        bankAccountName: [{ required: true, message: '请输入银行开户名' }],
+        bankDepositName: [{ required: true, message: '请输入银行开户行' }]
+      }
+    }
+  },
+  methods: {
+    getInfo () {
+      afterSaleInfo(this.$route.query.sn).then(res => {
+        if (res.success) {
+          this.info = res.result
+          this.goodsData.push(res.result)
+        }
+      })
+    },
+    getReason (type) {
+      afterSaleReason(type).then(res => {
+        if (res.success) this.reasonList = res.result
+      })
+    },
+    changeReason (type) {
+      this.getReason(type)
+    },
+    apply () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let params = Object.assign(this.info, this.form)
+          params.images = this.uploadList.toString()
+          params.orderItemSn = this.$route.query.sn
+          applyAfterSale(params).then(res => {
+            if (res.success) {
+              this.$Message.success('售后申请提交成功，请到售后订单查看！')
+              this.$router.push({name: 'AfterSale'})
+            }
+          })
+        }
+      })
+    },
+    handleView (name) {
+      this.previewImage = name;
+      this.visible = true;
+    },
+    handleRemove (index) {
+      this.uploadList.splice(index, 1)
+      this.$forceUpdate()
+    },
+    handleSuccess (res, file) {
+      this.uploadList.push(res.result)
+      this.$forceUpdate()
+    },
+    handleBeforeUpload () {
+      const check = this.uploadList.length < 6;
+      if (!check) {
+        this.$Notice.warning({
+          title: '最多可以上传5张图片'
+        });
+        return check;
+      }
+    }
+  },
+  mounted () {
+    this.accessToken.accessToken = storage.getItem('accessToken');
+    this.getInfo()
+    this.getReason('RETURN_GOODS')
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+/** 商品信息 */
+.order-price {
+  text-align: right;
+  margin-top: 30px;
+  font-size: 16px;
+  color: #999;
+  > div > span:nth-child(2) {
+    width: 130px;
+    text-align: right;
+    display: inline-block;
+    margin-top: 10px;
+  }
+  .actrual-price {
+    color: $theme_color;
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+.demo-upload-list{
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0,0,0,.2);
+  margin-right: 4px;
+  margin-top: 10px;
+}
+.demo-upload-list img{
+  width: 100%;
+  height: 100%;
+}
+.demo-upload-list-cover{
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,.6);
+}
+.demo-upload-list:hover .demo-upload-list-cover{
+  display: block;
+}
+.demo-upload-list-cover i{
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+.icon-upload {
+  width: 58px;
+  height:58px;
+  line-height: 58px;
+  text-align:center;
+  display: inline-block;
+  border:1px dashed #999;
+  border-radius: 4px;
+  margin-top: 10px;
+  &:hover{
+    cursor: pointer;
+    border-color: $theme_color;
+  }
+}
+</style>

buyer/src/pages/home/orderCenter/Complain.vue

@@ -0,0 +1,235 @@
+
+<template>
+  <div class="add-eval">
+    <div class="title">
+      <card _Title="商品投诉" :_Size="16"></card>
+      <p>
+        <span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
+        <span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
+      </p>
+    </div>
+    <ul class="goods-eval">
+      <li >
+        <div class="goods-con">
+          <img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
+          <p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
+          <p>{{orderGoods.goodsPrice | unitPrice('￥')}}</p>
+        </div>
+
+        <div class="eval-con">
+          <div>
+            <span class="color999">投诉主题：</span>
+            <Select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
+              <Option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</Option>
+            </Select>
+            <Input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
+          </div>
+          <div style="display:flex;align-items:center;">
+            <div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
+              <img :src="img">
+              <div class="demo-upload-list-cover">
+                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
+                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
+              </div>
+            </div>
+            <Upload
+                :show-upload-list="false"
+                :on-success="handleSuccess"
+                :before-upload="handleBeforeUpload"
+                :format="['jpg','jpeg','png']"
+                :action="action"
+                :headers="accessToken"
+                style="display: inline-block;width:58px;">
+                <div class="hover-pointer icon-upload" style="">
+                  <Icon type="ios-camera" size="20"></Icon>
+                </div>
+            </Upload>
+            <div class="describe">上传投诉凭证，最多5张</div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <Button type="primary" class="mt_10" :loading="loading" @click="save">提交</Button>
+    <Modal title="View Image" v-model="visible">
+        <img :src="previewImage" v-if="visible" style="width: 100%">
+    </Modal>
+  </div>
+</template>
+<script>
+import { orderDetail } from '@/api/order.js';
+import { afterSaleReason, handleComplain } from '@/api/member.js';
+import { commonUrl } from '@/plugins/request.js';
+import storage from '@/plugins/storage';
+export default {
+  data () {
+    return {
+      order: {}, // 订单详情
+      orderGoods: {}, // 订单商品
+      form: { // 投诉表单
+        complainTopic: '',
+        content: ''
+      }, // 表单
+      visible: false, // 图片预览
+      action: commonUrl + '/common/upload/file', // 上传地址
+      accessToken: {}, // 验证token
+      previewImage: '', // 图片地址
+      loading: false, // 加载状态
+      reasonList: [] // 投诉原因
+    }
+  },
+  methods: {
+    getOrderDetail () {
+      orderDetail(this.$route.query.sn).then(res => {
+        this.order = res.result
+        this.orderGoods = res.result.orderItems[this.$route.query.index]
+        this.orderGoods.uploadList = []
+      })
+      afterSaleReason('COMPLAIN').then(res => {
+        if (res.success) {
+          this.reasonList = res.result
+          this.$set(this.form, 'complainTopic', res.result[0].reason)
+          this.$forceUpdate()
+        }
+      })
+    },
+    save () {
+      let params = {
+        goodsId: this.orderGoods.goodsId,
+        complainTopic: this.form.complainTopic,
+        content: this.form.content,
+        images: this.orderGoods.uploadList.toString(),
+        orderSn: this.$route.query.sn,
+        skuId: this.orderGoods.skuId
+      }
+      handleComplain(params).then(res => {
+        if (res.success) {
+          this.$Message.success('投诉申请已提交，感谢您的反馈')
+          this.$router.push({name: 'ComplainList'})
+        }
+      })
+    },
+    goGoodsDetail (skuId, goodsId) {
+      let routerUrl = this.$router.resolve({
+        path: '/goodsDetail',
+        query: {skuId, goodsId}
+      })
+      window.open(routerUrl.href, '_blank')
+    },
+    handleView (name) {
+      this.previewImage = name;
+      this.visible = true;
+    },
+    handleRemove (index) {
+      this.orderGoods.uploadList.splice(index, 1)
+      this.$forceUpdate()
+    },
+    handleSuccess (res, file) {
+      this.orderGoods.uploadList.push(res.result)
+      this.$forceUpdate()
+    },
+    handleBeforeUpload () {
+      const check = this.orderGoods.uploadList.length < 6;
+      if (!check) {
+        this.$Notice.warning({
+          title: '最多可以上传五张图片'
+        });
+        return check;
+      }
+    }
+  },
+  mounted () {
+    this.accessToken.accessToken = storage.getItem('accessToken');
+    this.getOrderDetail()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.delivery-rate {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  height: 50px;
+  border-bottom: 1px solid #eee;
+  >div:nth-child(1) {
+    width: 30%;
+    font-weight: bold;
+  }
+}
+.goods-eval li{
+  display: flex;
+  border-bottom: 1px solid #eee;
+
+  .goods-con {
+    width: 30%;
+    padding: 20px;
+    text-align: center;
+    p {
+      word-wrap: wrap;
+      &:hover{ color: $theme_color; }
+    }
+  }
+  .eval-con {
+    width: 70%;
+    padding: 20px;
+  }
+}
+
+.demo-upload-list{
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0,0,0,.2);
+  margin-right: 4px;
+  margin-top: 10px;
+}
+.demo-upload-list img{
+  width: 100%;
+  height: 100%;
+}
+.demo-upload-list-cover{
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0,0,0,.6);
+}
+.demo-upload-list:hover .demo-upload-list-cover{
+  display: block;
+}
+.demo-upload-list-cover i{
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+.icon-upload {
+  width: 58px;
+  height:58px;
+  line-height: 58px;
+  text-align:center;
+  display: inline-block;
+  border:1px dashed #999;
+  border-radius: 4px;
+  margin-top: 10px;
+  &:hover{
+    cursor: pointer;
+    border-color: $theme_color;
+  }
+}
+.describe{
+  font-size: 12px;
+  color: #999;
+  position:relative;
+  top: 46px;
+  left: -60px;
+}
+</style>

buyer/src/pages/home/orderCenter/MyAddress.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <card _Title="收货地址" _More="添加新地址" _Src="/home/addAddress"></card>
+    <div class="address-box" v-for="(item, index) in list" :key="index">
+      <div class="address-header">
+        <span
+          >{{ item.name }}
+          <Tag class="ml_10" v-if="item.isDefault" color="red">默认地址</Tag>
+          <Tag class="ml_10" v-if="item.alias" color="warning">{{
+            item.alias
+          }}</Tag>
+        </span>
+        <div class="address-action">
+          <span @click="edit(item.id)"><Icon type="edit"></Icon>修改</span>
+          <span @click="del(item.id)"><Icon type="trash-a"></Icon>删除</span>
+        </div>
+      </div>
+      <div class="address-content">
+        <p>
+          <span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
+        </p>
+        <p>
+          <span class="address-content-title">收货地区:</span
+          >{{ item.consigneeAddressPath | unitAddress }}
+        </p>
+        <p>
+          <span class="address-content-title">详细地址:</span> {{ item.detail }}
+        </p>
+        <p>
+          <span class="address-content-title">手机号码:</span> {{ item.mobile }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import card from '@/components/card';
+import { memberAddress, delMemberAddress } from '@/api/address.js';
+
+export default {
+  name: 'MyAddress',
+
+  data () {
+    return {
+      list: [] // 地址列表
+    };
+  },
+  methods: {
+    edit (id) {
+      // 编辑地址
+      this.$router.push({ path: '/home/addAddress', query: { id: id } });
+    },
+    del (id) {
+      // 删除地址
+      this.$Modal.confirm({
+        title: '提示',
+        content: '你确定删除这个收货地址',
+        onOk: () => {
+          delMemberAddress(id).then((res) => {
+            if (res.code === 200) {
+              this.$Message.success('删除成功');
+              this.getAddrList();
+            }
+          });
+        },
+        onCancel: () => {
+          this.$Message.info('取消删除');
+        }
+      });
+    },
+    getAddrList () {
+      // 获取地址列表
+      memberAddress().then((res) => {
+        console.log(res);
+        if (res.code === 200) {
+          this.list = res.result.records;
+        }
+      });
+    }
+  },
+  mounted () {
+    this.getAddrList();
+  },
+  components: {
+    card
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.address-box {
+  padding: 15px;
+  margin: 15px;
+
+  border-bottom: 1px solid $border_color;
+}
+
+.address-header {
+  cursor: pointer;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  @include title_color($light_title_color);
+  font-size: 18px;
+}
+
+.address-content {
+  cursor: pointer;
+  font-size: 14px;
+
+  > p {
+    padding: 12px 0;
+  }
+}
+
+.address-content-title {
+  @include sub_color($light_sub_color);
+}
+
+.address-action span {
+  margin-left: 15px;
+  font-size: 14px;
+  color: $theme_color;
+  cursor: pointer;
+}
+
+#map-container {
+  width: 500px;
+  height: 300px;
+}
+</style>

buyer/src/pages/home/orderCenter/MyOrder.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="wrapper">
+    <!-- 卡片组件 -->
+    <card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" v-if="!homePage"></card>
+    <card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-else></card>
+    <!-- 搜索 筛选 -->
+    <div class="mb_20 box" v-if="!homePage">
+      <div class="global_float_right" >
+        <Input
+          class="width_300"
+          search
+          enter-button
+          v-model="params.keywords"
+          @on-search="getList"
+          placeholder="请输入订单号搜索"
+        />
+      </div>
+    </div>
+    <!-- 订单列表 -->
+    <empty v-if="orderList.length === 0" />
+    <div class="order-content" v-else>
+      <div
+        class="order-list"
+        v-for="(order, onderIndex) in orderList"
+        :key="onderIndex"
+      >
+        <div class="order-header">
+          <div>
+            <div>{{ filterOrderStatus(order.orderStatus) }}</div>
+            <div>
+              订单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{order.createTime}}
+              &nbsp; &nbsp;{{ order.memberName | secrecyMobile }}
+            </div>
+          </div>
+          <div>
+            <Button @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></Button>
+            <span>{{ order.flowPrice | unitPrice("￥") }}</span>
+          </div>
+        </div>
+        <div class="order-body">
+          <div class="goods-list">
+            <div
+              v-for="(goods, goodsIndex) in order.orderItems"
+              :key="goodsIndex"
+            >
+              <img
+                @click="goodsDetail(goods.skuId, goods.goodsId)"
+                class="hover-color"
+                :src="goods.image"
+                alt=""
+              />
+              <div>
+                <div class="hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
+                <div class="mt_10">
+                  <span class="global_color"
+                    >{{ goods.goodsPrice | unitPrice("￥") }} </span
+                  >x {{ goods.num }}
+                </div>
+                <Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" style="position:relative;top:-22px;left:100px">评价</Button>
+                <Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" size="small" style="position:relative;top:-22px;left:110px">投诉</Button>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <span @click="shopPage(order.storeId)">{{ order.storeName }}</span
+            >&nbsp;<Icon custom="iconfont icon-kefu" />
+          </div>
+          <div>
+            <!-- 订单基础操作 -->
+            <Button @click="orderDetail(order.sn)" size="small">订单详情</Button>
+            <Button @click="handleCancelOrder(order.sn)" v-if="order.allowOperationVO.cancel" size="small">取消订单</Button>
+            <Button @click="goPay(order.sn)" size="small" v-if="order.allowOperationVO.pay">去支付</Button>
+            <Button @click="received(order.sn)" size="small" v-if="order.allowOperationVO.rog">确认收货</Button>
+            <!-- 售后 -->
+            <Button v-if="order.groupAfterSaleStatus.includes('NOT_APPLIED')" @click="applyAfterSale(order.orderItems)" size="small">申请售后</Button>
+          </div>
+        </div>
+      </div>
+      <Spin size="large" fix v-if="spinShow"></Spin>
+    </div>
+    <!-- 分页 -->
+    <div class="page-size" v-if="paging">
+      <Page :total="total" @on-change="changePageNum"
+        @on-page-size-change="changePageSize"
+        :page-size="params.pageSize"
+        show-sizer>
+      </Page>
+    </div>
+    <!-- 选择售后商品 -->
+    <Modal v-model="afterSaleModal" title="请选择申请售后的商品">
+        <div>
+            <Table
+              border
+              :columns="afterSaleColumns"
+              :data="afterSaleArr"
+              @on-row-click="afterSaleSelect"
+            >
+            </Table>
+        </div>
+        <div slot="footer"></div>
+    </Modal>
+    <Modal v-model="cancelAvail" title="请选择取消订单原因" @on-ok="sureCancel" @on-cancel="cancelAvail = false">
+      <RadioGroup v-model="cancelParams.reason" vertical>
+        <Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
+           {{item.reason}}
+        </Radio>
+      </RadioGroup>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { getOrderList, sureReceived, cancelOrder, delOrder } from '@/api/order';
+import { afterSaleReason } from '@/api/member';
+import { orderStatusList } from '../enumeration.js'
+export default {
+  name: 'MyOrder',
+  props: {
+    paging: {
+      type: Boolean,
+      default: true
+    },
+    homePage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      orderList: [], // 订单列表
+      params: { // 请求参数
+        pageNumber: 1,
+        pageSize: 10,
+        // orderStatus: 'ALL',
+        keywords: '',
+        tag: 'ALL'
+      },
+      cancelParams: { // 取消售后参数
+        orderSn: '',
+        reason: ''
+      },
+      // 状态数组
+      orderStatusList,
+      changeWay: ['全部订单', '待付款', '待收货', '已完成'], // 订单状态
+      total: 0, // 数据总数
+      spinShow: false, // 加载状态
+      afterSaleModal: false, // 选择售后商品模态框
+      afterSaleColumns: [ // 售后商品表头
+        {title: '商品名称', key: 'name'},
+        {title: '价格', key: 'goodsPrice'}
+      ],
+      afterSaleArr: [], // 售后商品列表
+      cancelAvail: false, // 取消订单modal控制
+      cancelReason: [] // 取消订单原因
+    };
+  },
+  mounted () {
+    if (this.homePage) this.params.pageSize = 5;
+    this.getList();
+  },
+  methods: {
+    goodsDetail (skuId, goodsId) {
+      // 跳转商品详情
+      let routeUrl = this.$router.resolve({
+        path: '/goodsDetail',
+        query: { skuId, goodsId }
+      });
+      window.open(routeUrl.href, '_blank');
+    },
+    change (index) {
+      switch (index) {
+        case 0:
+          this.params.tag = 'ALL'
+          break;
+        case 1:
+          this.params.tag = 'WAIT_PAY'
+          break;
+        case 2:
+          this.params.tag = 'WAIT_ROG'
+          break;
+        case 3:
+          this.params.tag = 'COMPLETE'
+          break;
+      }
+      this.getList()
+    },
+    // 跳转店铺首页
+    shopPage (id) {
+      let routeUrl = this.$router.resolve({
+        path: '/Merchant',
+        query: { id: id }
+      });
+      window.open(routeUrl.href, '_blank');
+    },
+    orderDetail (sn) {
+      // 跳转订单详情
+      this.$router.push({ name: 'OrderDetail', query: {sn} });
+    },
+    received (sn) { // 确认收货
+      sureReceived(sn).then(res => {
+        if (res.success) {
+          this.$Message.success('确认收货成功')
+          this.getList()
+        }
+      })
+    },
+    goPay (sn) { // 去支付
+      this.$router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
+    },
+    applyAfterSale (goodsItem) { // 申请售后
+      let arr = []
+      goodsItem.forEach(e => {
+        if (e.afterSaleStatus === 'NOT_APPLIED') {
+          arr.push(e)
+        }
+      });
+      if (arr.length === 1) {
+        this.$router.push({name: 'ApplyAfterSale', query: {sn: arr[0].sn}})
+      } else {
+        this.afterSaleArr = arr;
+        this.afterSaleModal = true
+      }
+    },
+    afterSaleSelect (item) {
+      this.$router.push({name: 'ApplyAfterSale', query: {sn: item.sn}})
+    },
+    viewComment (sn) { // 查看评价
+
+    },
+    comment (sn, goodsIndex) { // 评价
+      this.$router.push({path: '/home/addEval', query: {sn, index: goodsIndex}})
+    },
+    addComment (sn) { // 追加评价
+
+    },
+    complain (sn, goodsIndex) { // 投诉
+      this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
+    },
+    complainResult (sn) { // 投诉结果
+
+    },
+    delOrder (sn) {
+      this.$Modal.confirm({
+        title: '删除订单',
+        content: '<p>确认删除当前订单吗？</p>',
+        onOk: () => {
+          delOrder(sn).then(res => {
+            if (res.success) {
+              this.$Message.success('删除成功');
+              this.getList()
+            }
+          })
+        },
+        onCancel: () => {}
+      });
+    },
+    getList () {
+      this.spinShow = true;
+      let params = JSON.parse(JSON.stringify(this.params))
+      if (params.orderStatus === 'ALL') {
+        delete params.orderStatus
+      }
+      getOrderList(params).then(res => {
+        this.spinShow = false
+        if (res.success) {
+          this.orderList = res.result.records;
+          this.total = res.result.total;
+        }
+      });
+    },
+    changePageNum (val) {
+      this.params.pageNumber = val;
+      this.getList()
+    },
+    changePageSize (val) {
+      this.pageNumber = 1;
+      this.params.pageSize = val;
+      this.getList()
+    },
+    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.getList()
+          this.cancelAvail = false
+        }
+      })
+    },
+    filterOrderStatus (status) { // 获取订单状态中文
+      const ob = this.orderStatusList.filter(e => { return e.status === status });
+      return ob[0].name
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  margin-bottom: 40px;
+}
+.box {
+  overflow: hidden;
+}
+.page-size {
+  margin: 15px 0px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+/** 订单列表 */
+.order-list {
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  margin-bottom: 10px;
+
+  &:hover{
+    .del-btn{visibility: visible;}
+  }
+  .del-btn{
+    visibility: hidden;
+  }
+
+  .order-header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    justify-content: space-between;
+    border-bottom: 1px solid #ddd;
+    > div:nth-child(1) > div:nth-child(2) {
+      font-size: 12px;
+      color: #999;
+      margin-top: 3px;
+    }
+  }
+  .order-body {
+    display: flex;
+    justify-content: space-between;
+    color: #999;
+    padding: 10px;
+
+    .goods-list > div {
+      width: 500px;
+      display: flex;
+      margin-bottom: 10px;
+      img {
+        width: 60px;
+        height: 60px;
+        margin-right: 10px;
+      }
+      > div {
+        flex: 1;
+      }
+    }
+
+    > div:nth-child(2) {
+      width: 150px;
+      text-align: center;
+      span {
+        color: #438cde;
+        cursor: pointer;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+      .ivu-icon {
+        color: #ff8f23;
+        cursor: pointer;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+    }
+
+    > div:nth-child(3) {
+      width: 100px;
+      .ivu-btn {
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+</style>

buyer/src/pages/home/orderCenter/OrderDetail.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="order-detail" v-if="order.order">
+    <card _Title="订单详情" :_Size="16"></card>
+    <div class="order-card">
+      <p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
+      <p class="global_color">订单号：{{ order.order.sn }}</p>
+      <div style="color:#999;" class="operation-time">操作时间：{{order.order.updateTime}}</div>
+      <Steps class="progress" :current="progressList.length" direction="vertical">
+        <Step
+          :title="progress.message"
+          :content="progress.createTime"
+          v-for="(progress, index) in progressList"
+          :key="index"
+        ></Step>
+      </Steps>
+    </div>
+    <div class="order-card">
+      <h3>收货人信息</h3>
+      <p>收货人：{{order.order.consigneeName}}</p>
+      <p>手机号码：{{order.order.consigneeMobile | secrecyMobile}}</p>
+      <p>收货地址：{{order.order.consigneeAddressPath | unitAddress}} {{order.order.consigneeDetail}}</p>
+    </div>
+    <div class="order-card">
+      <h3>付款信息</h3>
+      <p>支付方式：在线支付</p>
+      <p>付款状态：未付款</p>
+    </div>
+    <div class="order-card">
+      <h3>配送信息</h3>
+      <p>配送方式：{{order.deliveryMethodValue}}</p>
+      <p>配送状态：{{order.deliverStatusValue}}</p>
+    </div>
+    <div class="order-card" v-if="order.order.receipt">
+      <h3>发票信息</h3>
+      <p>发票抬头：{{order.order.receiptVO.receiptTitle}}</p>
+      <p>发票内容：{{order.order.receiptVO.receiptContent}}</p>
+      <p v-if="order.order.receiptVO.taxpayerId">纳税人识别号：{{order.order.receiptVO.taxpayerId}}</p>
+    </div>
+    <!-- 订单商品 -->
+    <div class="goods">
+      <div class="shop-name">
+        <span @click="shopPage(order.order.storeId)">{{ order.order.storeName }}</span> &nbsp; <Icon custom="iconfont icon-kefu" />
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th width="50%">商品</th>
+            <!-- <th width="20%">属性</th> -->
+            <th width="20%">货号</th>
+            <!-- <th width="10%">发货仓库</th> -->
+            <th width="10%">单价</th>
+            <th width="10%">数量</th>
+            <th width="10%">小计</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
+            <td>
+              <img @click="goodsDetail(goods.id, goods.goodsId)" :src="goods.image" alt="" />
+              <div>
+                <p @click="goodsDetail(goods.id, goods.goodsId)" class="hover-color">
+                  {{ goods.goodsName }}
+                </p>
+              </div>
+            </td>
+            <td>{{ goods.id }}</td>
+            <td>{{ goods.goodsPrice | unitPrice }}</td>
+            <td>{{ goods.num }}</td>
+            <td>{{ (goods.goodsPrice * goods.num) | unitPrice }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <!-- 订单价格 -->
+      <div class="order-price">
+        <div>
+          <span>商品件数：</span><span>{{ order.order.goodsNum }}件</span>
+        </div>
+        <div>
+          <span>商品总价：</span><span>{{ order.order.goodsPrice | unitPrice("￥") }}</span><br>
+        </div>
+        <div>
+          <span>运费：</span><span>+{{ order.order.freightPrice | unitPrice("￥") }}</span><br>
+        </div>
+        <div><span>优惠金额：</span><span>-{{ order.order.discountPrice | unitPrice("￥") }}</span></div>
+        <div>
+          <span>应付金额：</span
+          ><span class="actrual-price">{{ order.order.flowPrice | unitPrice("￥") }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import card from '@/components/card';
+import { orderDetail, getTraces } from '@/api/order.js';
+export default {
+  components: { card },
+  name: 'order-detail',
+  data () {
+    return {
+      order: {}, // 订单详情数据
+      progressList: [], // 订单流程
+      logistics: [] // 物流数据
+    };
+  },
+  methods: {
+    goodsDetail (skuId, goodsId) {
+      // 跳转商品详情
+      let routeUrl = this.$router.resolve({
+        path: '/goodsDetail',
+        query: { skuId, goodsId }
+      });
+      window.open(routeUrl.href, '_blank');
+    },
+    // 跳转店铺首页
+    shopPage (id) {
+      let routeUrl = this.$router.resolve({
+        path: '/Merchant',
+        query: { id: id }
+      });
+      window.open(routeUrl.href, '_blank');
+    },
+    getDetail () { // 订单详情
+      orderDetail(this.$route.query.sn).then(res => {
+        if (res.success) {
+          this.order = res.result;
+          this.progressList = res.result.orderLogs
+        }
+      })
+    },
+    traces () {
+      getTraces(this.$route.query.sn).then(res => {
+        if (res.success) {
+          this.logistics = res.result
+        }
+      })
+    }
+  },
+  mounted () {
+    this.getDetail()
+    this.traces()
+  }
+};
+</script>
+<style lang="scss" scoped>
+.order-card {
+  padding: 10px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #e8eaec;
+  position: relative;
+  .global_color {
+    color: $theme_color;
+  }
+  p {
+    color: #999;
+    margin: 3px;
+  }
+  h3 {
+    font-weight: normal;
+    font-size: 16px;
+  }
+  .operation-time {
+    position: absolute;
+    right: 20px;
+    top: 10px;
+  }
+}
+/** 店铺名称 */
+.shop-name {
+  margin: 15px 0;
+  span {
+    color: #438cde;
+    cursor: pointer;
+    &:hover {
+      color: $theme_color;
+    }
+  }
+  .ivu-icon {
+    color: #ff8f23;
+    cursor: pointer;
+    &:hover {
+      color: $theme_color;
+    }
+  }
+}
+/** 商品列表 */
+table {
+  border: 1px solid #ddd;
+  color: #999;
+  border-collapse: collapse;
+  width: 100%;
+  tr {
+    border-top: 1px solid #ddd;
+  }
+  thead > tr {
+    height: 40px;
+    background: #eee;
+  }
+  td {
+    padding: 5px;
+    text-align: center;
+    &:first-child {
+      text-align: left;
+      display: flex;
+      img {
+        width: 70px;
+        height: 70px;
+        margin-right: 10px;
+        margin-left: 10px;
+        cursor: pointer;
+      }
+    }
+    &:last-child {
+      color: $theme_color;
+    }
+  }
+}
+/** 订单价格 */
+.order-price {
+  text-align: right;
+  margin-top: 30px;
+  font-size: 16px;
+  color: #999;
+  > div > span:nth-child(2) {
+    width: 130px;
+    text-align: right;
+    display: inline-block;
+    margin-top: 10px;
+  }
+  .actrual-price {
+    color: $theme_color;
+    font-weight: bold;
+    font-size: 20px;
+  }
+}
+
+/** 订单进度条 */
+.progress {
+  margin: 15px 0;
+}
+</style>