经销商管理

doum

9 小时以前 17b72a7f765612e3ebd0d0330e7a668955793172

 admin/src/components/business/OperaGoodsOrderDetail.vue

@@ -1,216 +1,200 @@
<template>
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
      :title="title"
      width="100%"
      :visible.sync="visible"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="订单信息" name="first">
        <el-descriptions title="订单信息" size="medium" direction="horizontal" :column="4">
          <el-descriptions-item label="订单编号">{{ form.code }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <span :class="[0,1,2,5].indexOf(form.status) != -1 ? 'underway' : 'complete'">
              {{ 
                form.status==0 ? '待支付'
                  : form.status==1 ? '待发货'
                    : form.status==2 ? '待收货'
                      : form.status==3 ? '交易完成'
                        : form.status==4 ? '已关闭' : '部分发货'
              }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ form.createDate }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ form.payDate }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">
            <span v-if="isPlatform">￥</span>{{ form.price }}<span v-if="!isPlatform">咖豆</span></el-descriptions-item>
          <el-descriptions-item label="支付订单号">{{ form.payOrderId }}</el-descriptions-item>
          <el-descriptions-item label="完成时间" :span="2">{{ form.completeDate }}</el-descriptions-item>
         
          <el-descriptions-item label="用户备注" :span="4">{{ form.memberInfo }}</el-descriptions-item>
          <el-descriptions-item label="平台备注" :span="4">{{ form.sysInfo }}</el-descriptions-item>
          
        </el-descriptions>
        <div style="height: 20px;"></div>
        <el-descriptions title="订单信息" size="medium" direction="horizontal" :column="4">
          <el-descriptions-item label="收件姓名">{{ form.linkname }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ form.linkphone }}</el-descriptions-item>
          <el-descriptions-item label="收获地址">{{ form.linkaddr }}</el-descriptions-item>
        </el-descriptions>
        <div style="height: 20px;"></div>
        <el-descriptions title="商品信息" size="medium" direction="horizontal" :column="4">
          
        </el-descriptions>
        <el-table
          :data="list"
          stripe
          border
        >
          <el-table-column prop="name" label="商品ID" align="center" min-width="100px"></el-table-column>
          <el-table-column prop="name" label="商品信息" align="center" min-width="100px"></el-table-column>
          <el-table-column prop="name" label="分类" align="center" width="100px"></el-table-column>
          <el-table-column prop="name" label="规格" align="center" min-width="100px"></el-table-column>
          <el-table-column prop="name" :label="isPlatform?'价格(元)':'价格(咖豆)'" align="center" width="100px"></el-table-column>
        </el-table>
        <div v-if="isPlatform" class="statistics">
          <div>订单商品金额：{{ form.price }}元</div>
          <div>订单优惠金额：-{{ form.price }}元</div>
          <div>实收款：{{ form.price }}元</div>
    <div style="display: block">
      <div class="header">
        <div  class="header-b">订单详情</div>
          <div v-if="info.status ==0"  class="header-orange">待支付</div>
          <div  v-if="info.status ==1"  class="header-orange">{{info.receiveType==1?'待自提':'待发货'}}</div>
          <div  v-if="info.status ==2" class="header-orange">待收货</div>
          <span  v-if="info.status ==3"   class="header-grey ">交易完成</span>
          <div  v-if="info.status ==4"   class="header-grey">已关闭</div>
          <div  v-if="info.status ==6"   class="header-grey">已退款</div>
           <div class="header-blue-btn" @click="showChangeRecord">变更记录</div>
      </div>
      <div class="info-item">
        <div class="info-item-a">订单编号：<span>{{info.code}}</span></div>
        <div class="info-item-a">创建时间：<span>{{info.createDate}}</span></div>
        <div class="info-item-a">支付时间：<span>{{info.payDate }}</span></div>
      </div>
      <div class="info-item">
        <div class="info-item-a">实付金额：<span class="orange">￥{{(info.price||0).toFixed(2)}}</span></div>
        <div class="info-item-a">支付方式：<span>{{info.payMethod==0?'微信支付':'积分抵扣'}}</span></div>
        <div class="info-item-a">取货方式：<span>{{info.receiveType==1?'门店自提':'快递配送'}}</span>
         </div>
      </div>
      <div class="info-item">
        <div class="info-item-a" style="flex: 3">归属经销商：<span >{{ info.shopName }}</span></div>
      </div>
      <div class="info-item">
        <div class="info-item-a" style="flex: 3">备注：<span v-if="info.sysInfo" class="red">{{info.sysInfo}}</span></div>
      </div>
      <div class="info-item"></div>
      <div class="header">
        <div  class="header-b">会员信息</div>
      </div>
      <div class="info-item">
        <div class="info-item-a">姓名：<span class="el-icon-user">{{info.memberName}}</span></div>
        <div class="info-item-a">手机号：<span class="el-icon-phone-outline">{{info.phone}}</span></div>
        <div class="info-item-a">用户昵称：<span>{{info.nickName }}</span></div>
      </div>
      <div class="info-item"></div>
      <template  v-if="info.receiveType!=1">
        <div class="header">
          <div  class="header-b">快递信息</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="物流信息" name="second">
        <el-descriptions title="快递信息" size="medium" direction="horizontal" :column="4">
          <el-descriptions-item label="运单号">{{ form.createDate }}</el-descriptions-item>
          <el-descriptions-item label="物流公司" :span="3">{{ form.kdName }}</el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="4">{{ form.linkaddr }}</el-descriptions-item>
          <el-descriptions-item label="发货时间" :span="4">{{ form.kdDate }}</el-descriptions-item>
        </el-descriptions>
        <div class="kd-detail">
          <div class="kd-status">已签收</div>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in kdDetail"
              :key="index"
              hide-timestamp
              :class="index==0&&'first'"
              :size="index==0?'large':'normal'"
              :timestamp="item.date"
            >
              <h4>{{ item.date }}</h4>
              <p>{{ item.message }}</p>
            </el-timeline-item>
          </el-timeline>
        <div class="info-item"  >
          <div class="info-item-a">收货人：<span class="el-icon-user">{{info.linkname}}</span></div>
          <div class="info-item-a">联系电话：<span class="el-icon-phone-outline">{{info.linkphone}}</span></div>
          <div class="info-item-a">所在位置：<span class="el-icon-location-outline">{{info.linkaddr }}</span></div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer"></div>
        <div class="info-item"  >
          <div class="info-item-a">快递公司：<span >{{info.kdName}}</span></div>
          <div class="info-item-a">快递单号：<span >{{info.kdCode}}</span></div>
          <div class="info-item-a"  >发货人：<span>{{info.kdUserName }}</span></div>
        </div>
        <div class="info-item"  >
          <div class="info-item-a">发货时间：<span  >{{info.kdDate }}</span></div>
          <div class="info-item-a" style="flex: 2">快递备注：<span>{{info.kdInfo }}</span></div>
        </div>
        <div class="info-item"></div>
      </template>

    </div>
    <template  v-slot:footer>
      <el-button @click="visible=false">返回</el-button>
    </template>
    <OperaChangeOrderRecordWindow ref="OperaChangeOrderRecordWindow"/>
    <OperaChangeIntegralWindow ref="OperaChangeIntegralWindow" @success="successBiz"/>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import OperaChangeOrderRecordWindow from '@/components/business/OperaChangeOrderRecordWindow'
import OperaChangeIntegralWindow from '@/components/business/OperaChangeIntegralWindow'
export default {
  name: 'OperaGoodsOrderDetail',
  name: 'OperaShopGoodsWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  components: { GlobalWindow, OperaChangeOrderRecordWindow, OperaChangeIntegralWindow },
  data () {
    
    return {
      activeName: '0',
      isPlatform: true,
      // 表单数据
      form: {
        id: '1',
        code: '256302564258',
        payOrderId: '256302564258',
        createDate: '2022-11-01 22:30:43',
        payDate: '2022-11-01 22:30:43',
        soonTime: '2022-11-03 22:30:43',
        completeDate: '2022-11-03 22:30:43',
        imgurl: '',
        goodsName: '咖啡杯',
        attr: '白色；其它规格内容； 10L',
        memberInfo: '这里是用户备注',
        sysInfo: '这里是平台备注',
        linkname: '李怀英',
        linkphone: '18055151023',
        linkaddr: '四川省成都市金牛区，金泉街道中海国际社区蓝岸街98号橙郡一期5-2-504',
        price: '2333',
        status: 1, 
        kdCode: 'SF01021213',
        kdDate: '2022-11-03 23:30:43',
        kdId: 'KD21312',
        kdInfo: '这是发货备注',
        kdName: '顺丰快递',
        kdUser: '00190',
      },
      list: [],
      kdDetail: [
        { date: '2022-11-03 23:30:43', message: '已发货' },
        { date: '2022-11-03 23:30:43', message: '已发货' },
        { date: '2022-11-03 23:30:43', message: '已发货' },
        { date: '2022-11-03 23:30:43', message: '已发货' },
        { date: '2022-11-03 23:30:43', message: '已发货' },
      ]
      title: '',
      visible: false,
      tabelHeight: null,
      info: {},
      // 搜索
      searchForm: {
        memberId: '',
        userType: 0,
        type: null
      }
    }
  },

  created () {
    this.config({
      api: '/business/coupon',
      'field.id': 'id'
      module: '用户信息表',
      api: '/business/goodsorder',
      'field.id': 'id',
      'field.main': 'id'
    })
  },
  methods: {
    open(title, target, active, isPlatform=true) {
      this.title = title
      this.visible = true
      this.activeName = active
      this.isPlatform = isPlatform
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.type = '0'
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        if (this.form.shopId) {
          this.type = 0
          this.shops = [{ label: target.shopName, id: this.form.shopId }]
        } else {
          this.type = 1
          this.orgs = [{ label: target.orgName, id: this.form.orgId }]
        }
    successBiz () {
      this.handlePageChange()
      this.loadInfo()
      this.$emit('success')
    },
    loadInfo () {
      this.api.detail(this.info.id).then(res => {
        this.info = res || this.info
      })
    },
    handleClick() {}
  },
    showChangeRecord () {
      if (this.info) {
        this.$refs.OperaChangeOrderRecordWindow.open('订单变更记录', this.info)
      }
    },
    changeIntegral () {
      if (this.info) {
        this.$refs.OperaChangeIntegralWindow.open('客户积分调整', this.info, 0)
      }
    },
    open (title, info) {
      this.title = title
      this.visible = true
      this.info = info || {}
      this.loadInfo()
    },
    handleClick (val) {
    }
  }
}
</script>

<style lang="scss" scoped>
.underway {
  color: rgb(233, 165, 80)
<style scoped  lang="scss">
.table-pagination{
  position: fixed !important;
  bottom: 50px;
}
.complete {
  color: #ccc;
.header-b{
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.first {
  ::v-deep .el-timeline-item__node {
    background-color: #fff !important;
    width: 8px !important;
    height: 8px !important;
    transform: translateX(-3px);
    border: #216EEE solid 6px !important;
  }
.header-blue-btn{
  display: inline-block;
  font-size: 12px;
  background-color:  #216EEE;
  padding: 2px 10px;
  margin-left: 20px;
  color: white;
  cursor: pointer;
  border-radius: 5px ;
}
.kd-detail {
  padding: 30px;
  background-color: #f2f2f2;
  .kd-status {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: 500;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
  }
.header-grey{
  display: inline-block;
  font-size: 12px;
  border: 1px solid grey;
  padding: 2px 10px;
  margin-left: 20px;
  color: grey;
  border-radius: 5px ;
}
.statistics {
  text-align: right;
  padding: 10px 5px;
.header-orange{
  display: inline-block;
  font-size: 12px;
  border: 1px solid orange;
  padding: 2px 10px;
  margin-left: 20px;
  color: orange;
  border-radius: 5px ;
}
.header-btn{
  display: inline-block;
  border: none;
  padding: 2px 10px;
  margin-left: 20px;
}
.info-item{
  display: flex;
  width: 100%;
  margin: 15px;
}
.info-item-a{
  flex: 1;
  font-size: 14px;
  line-height: 24px;
  :last-child {
    color: rgb(232, 60,45);
  }

}
.info-item-a span{
  font-weight: 600;
}
.info-item-a  .btn{
  font-size: 12px !important;
  cursor: pointer !important;
}
</style>