小程序 接口开发

rk

7 天以前 585ff1cd29e9875f5f2a0fa2b0fdc876c5c6301f

 admin/src/components/business/OperaGoodsOrderDetail.vue

@@ -1,216 +1,325 @@
<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>
    <div class="detail-box">
      <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 style="text-align: right;">
            <div class="header-red-btn" v-if="info.status == 0 || info.status == 1" @click="$refs.OperaOrderCancelWindow.open('取消订单', info)">取消订单</div>
            <div class="header-red-btn" v-if="info.status == 3" @click="$refs.OperaOrderRefundWindow.open('订单退款', info)">订单退款</div>
          </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>
        <span style="margin-left: 20px;" >
           <el-button  type="text" @click="$refs.operaOrderMarkWindow.open(info.sysInfo && info.sysInfo.length?'编辑备注':'添加备注', info)">
              {{ info.sysInfo && info.sysInfo.length?'修改备注':'添加备注' }}</el-button>
        </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 class="header-blue-btn" v-if="info.status==1 && info.receiveType!=1"  @click="$refs.operaShipmentsWindow.open('发货',info)">发货</div>
          <div class="header-blue-btn" v-if="info.status==2 && info.receiveType!=1"  @click="$refs.operaShipmentsWindow.open('快递变更',info)">快递变更</div>
          <div class="header-blue-btn" @click="showChangeRecord">快递变更记录</div>
        </div>
        <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>
        <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>
      <template  v-if="info.status ==6">
        <div class="header">
          <div  class="header-b">退款信息</div>
          <div class="header-blue-btn" v-if="info.status==1 && info.receiveType!=1"  @click="$refs.operaShipmentsWindow.open('发货',info)">发货</div>
          <div class="header-blue-btn" v-if="info.status==2 && info.receiveType!=1"  @click="$refs.operaShipmentsWindow.open('快递变更',info)">快递变更</div>
        </div>
        <div class="info-item"  >
          <div class="info-item-a">退款金额：<span class="orange">￥{{(info.refundMoney||0).toFixed(2)}}</span></div>
          <div class="info-item-a"  >操作人：<span>{{info.refundUserName }}</span></div>
          <div class="info-item-a"  >退款时间：<span>{{info.refundTime }}</span></div>
        </div>
        <div class="info-item"  >
          <div class="info-item-a" >退款备注：<span>{{info.kdInfo }}</span></div>
        </div>
        <div class="info-item"></div>
      </template>
      <template  v-if="info.status == 4">
        <div class="header">
          <div  class="header-b">取消信息</div>
        </div>
        <div class="info-item"  >
          <div class="info-item-a">取消时间：<span >{{info.cancelDate}}</span></div>
          <div class="info-item-a">取消人员：<span>{{info.cancelUser !=null?info.cancelUserName:'用户主动取消'}}</span></div>
          <div class="info-item-a">取消说明：<span>{{info.cancelInfo }}</span></div>
        </div>
        <div class="info-item"></div>
      </template>
       <div class="header">
          <div  class="header-b">返积分信息</div>
        </div>
        <div class="info-item"  >
          <div class="info-item-a">返还用户积分：<span class="orange"> {{(info.returnMemberIntegral||0)}}</span></div>
          <div class="info-item-a">返还经销商积分：<span class="orange">{{info.returnCustomerIntegral || 0 }}</span></div>
          <div class="info-item-a"></div>
        </div>
        <div class="info-item"></div>
      <div class="header">
        <div  class="header-b">商品信息</div>
      </div>
      <div class="info-item"  >
        <el-table  :data="info.goodsorderDetailList||[]"  stripe  border >
          <el-table-column prop="imgurl" label="商品图" min-width="80px" align="center">
            <template slot-scope="{row}">
              <el-image style="width: 50px;height: 50px;" v-if="row.imgurl && row.imgurl!=''" :src="row.imgurl" :preview-src-list="[row.imgurl]"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称"   align="center" min-width="150px">  </el-table-column>
          <el-table-column prop="categoryName" label="商品分类"   align="center" min-width="150px">  </el-table-column>
          <el-table-column prop="goodsWeight" label="重量(kg)" align="center" min-width="150px"></el-table-column>
          <el-table-column prop="price" label="销售价(元)" align="center" min-width="100px">
            <template slot-scope="{row}">
              <span>￥{{(row.price || 0).toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodsNum" label="数量" align="center" min-width="150px"></el-table-column>
          <el-table-column prop="totalPrice" label="小计(元)" align="center" min-width="150px">
            <template slot-scope="{row}">
              <span class="orange">￥{{(row.totalPrice || 0).toFixed(2)}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="isPlatform" class="statistics">
          <div>订单商品金额：{{ form.price }}元</div>
          <div>订单优惠金额：-{{ form.price }}元</div>
          <div>实收款：{{ form.price }}元</div>
      </div>
      <div class="info-item"  >
        <div class="info-item-a">商品总价：<span> ￥{{((info.totalPrice||0)-(info.mailPrice || 0)).toFixed(2)}}</span></div>
        <div class="info-item-a">快递费：<span>￥{{(info.mailPrice||0).toFixed(2)}}</span></div>
        <div class="info-item-a">订单总价：<span> ￥{{(info.totalPrice||0).toFixed(2)}}</span></div>
      </div>
      <div class="info-item"  >
        <div class="info-item-a">优惠共减：<span> -￥{{((info.integral||0) + (info.couponPrice||0)).toFixed(2) }}</span>
          <span  v-if="((info.integral||0) + (info.couponPrice||0)).toFixed(2)>0">
            <el-popover
                style="margin-left: 20px;"
                placement="right-start"
                width="360px"
                @show="visible2=true"
                @hide="visible2=false"
                trigger="click" >
                <div style="margin-top: 10px;font-size: 12px;">
                  <div style="margin-bottom: 20px;font-weight: 600;"> 优惠共减：<span class="red"> -￥{{((info.integral||0) + (info.couponPrice||0)).toFixed(2) }}</span></div>
                  <div style="margin-bottom: 10px;display: flex;align-items: baseline;" v-if="(info.integral||0)>0">
                    <span  style="border-left: 3px solid red;font-size: 10px;margin-right: 10px;height: 10px;"></span>
                    积分抵扣：-￥{{(info.integral||0).toFixed(2) +'  '}}使用{{(info.useIntegral||0)}}积分抵扣￥{{(info.integral||0).toFixed(2) +'  '}}元
                  </div>
                  <div  style="margin-bottom: 10px;display: flex;align-items: baseline;" v-if="(info.couponPrice||0)>0">
                     <span  style="border-left: 3px solid red;font-size: 10px;margin-right: 10px;height: 10px;"></span>
                   {{' 优  惠  券 '}}：{{'  '}}-￥{{(info.couponPrice||0).toFixed(2) +'  '}}使用{{info.couponName}}
                  </div>
                </div>
                <el-button  slot="reference"  type="text">{{visible2?'收起':'查看'}}</el-button>
              </el-popover>
        </span>
        </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>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer"></div>
      </div>
      <div class="info-item"  >
        <div class="info-item-a">实付金额：<span class="red"> ￥{{(info.price||0).toFixed(2)}}</span></div>
      </div>
    </div>
    <template  v-slot:footer>
      <el-button @click="visible=false">返回</el-button>
    </template>
    <OperaChangeOrderRecordWindow ref="OperaChangeOrderRecordWindow"/>
    <OperaShipmentsWindow ref="operaShipmentsWindow" @success="successBiz"/>
    <OperaChangeIntegralWindow ref="OperaChangeIntegralWindow" @success="successBiz"/>
    <OperaOrderMarkWindow ref="operaOrderMarkWindow" @success="successBiz"/>
    <OperaOrderCancelWindow ref="OperaOrderCancelWindow" @success="successBiz"/>
    <OperaOrderRefundWindow ref="OperaOrderRefundWindow" @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'
import OperaOrderCancelWindow from '@/components/business/OperaOrderCancelWindow'
import OperaOrderMarkWindow from '@/components/business/OperaOrderMarkWindow'
import OperaShipmentsWindow from '@/components/business/OperaShipmentsWindow'
import OperaOrderRefundWindow from '@/components/business/OperaOrderRefundWindow'
export default {
  name: 'OperaGoodsOrderDetail',
  name: 'OperaShopGoodsWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  components: { OperaOrderRefundWindow, GlobalWindow, OperaChangeOrderRecordWindow, OperaChangeIntegralWindow, OperaOrderMarkWindow, OperaShipmentsWindow, OperaOrderCancelWindow },
  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: '',
      visible2: false,
      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.loadInfo()
      this.$emit('success')
    },
    showCouponPrice () {

    },
    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-red-btn{
  display: inline-block;
  font-size: 12px;
  background-color:  red;
  padding: 2px 10px 3px 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-blue-btn{
  display: inline-block;
  font-size: 12px;
  background-color:  #216EEE;
  padding: 2px 10px 3px 10px;
  margin-left: 20px;
  color: white;
  cursor: pointer;
  border-radius: 5px ;
}
.statistics {
  text-align: right;
  padding: 10px 5px;
.header-grey{
  display: inline-block;
  font-size: 12px;
  border: 1px solid grey;
  padding: 2px 10px;
  margin-left: 20px;
  color: grey;
  border-radius: 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: 500;
}
.info-item-a  .btn{
  font-size: 12px !important;
  cursor: pointer !important;
}
</style>