saasadminui/src/views/hisStore/components/productOrder.vue

<template>
  <div class="order-content">
      <div class="order-status" v-if="order!=null" >
          <el-steps  :active="order.status==3?order.status+1:order.status" align-center>
            <el-step title="待支付"></el-step>
            <el-step title="待发货"></el-step>
            <el-step title="待收货"></el-step>
            <el-step title="交易完成"></el-step>
          </el-steps>
      </div>
      <div>

      <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container"  v-if="order!=null">
        <span  style="margin-left: 20px" class="color-danger">订单状态：
           <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="order.status==item.dictValue">{{item.dictLabel}}</el-tag>
        </span>

        <div class="operate-button-container" >
          <el-button size="mini" @click="handleCertificates()"  v-hasPermi="['store:storeOrder:uploadCredentials']" >上传凭证</el-button>
          <el-button size="mini" @click="handleEditAddress()" v-if="order.status==0||order.status==1"  v-hasPermi="['store:storeOrder:editAddress']" >修改收货地址</el-button>
          <el-button size="mini" @click="handleBindCustomer()"  v-hasPermi="['store:storeOrder:bindCustomer']" >关联客户</el-button>
          <el-button size="mini" @click="editOrder()"  v-hasPermi="['store:storeOrder:edit']" >修改订单</el-button>
          <!-- <el-button size="mini" @click="handleEditUser()"  v-hasPermi="['users:user:edit']" >修改会员修改</el-button> -->
          <el-button size="mini" v-if="order.customerId!=null&&order.customerId>0"  @click="handleCustomer()"    >查看客户详情</el-button>
        </div>
        <div class="operate-button-container"  v-hasPermi="['store:storeOrder:express']"  >
          <el-button size="mini" @click="showExpress()" >查看物流</el-button>
        </div>
      </div>
      <div style="margin: 20px 0px"  v-if="order!=null">
        <span class="font-small">
          基本信息
        </span>
      </div>
      <el-descriptions :column="4" border  >
            <el-descriptions-item label="订单编号"  >
                <span v-if="order!=null">
                  {{order.orderCode}}
                </span>
                <el-tag  v-for="(item, index) in createTypeOptions"    v-if="order!=null&&order.orderCreateType==item.dictValue">{{item.dictLabel}}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="会员"  >
                <span v-if="user!=null">
                  {{user.nickname}}({{user.phone}})
                </span>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="进线时间"  >
                <span v-if="user!=null">
                  {{user.registerDate}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="推线编码"  >
                <span v-if="user!=null">
                  {{user.registerCode}}
                </span>
            </el-descriptions-item> -->

            <el-descriptions-item label="收货人"  >
                <span v-if="order!=null ">
                  {{order.realName }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="手机号码"  >
                <span v-if="order!=null ">
                  {{order.userPhone }}
                </span>
                <el-button type="text" size="mini" @click="callNumber(0,0,orderId)"  v-hasPermi="['store:storeOrder:callNumber']">拨号</el-button>
                <el-button type="text" size="mini" @click="handleSms(order.userPhone)" v-hasPermi="['store:storeOrder:sendSms']">短信</el-button>
                <el-button icon="el-icon-search" size="mini" @click="handlePhone()" style="margin-left: 20px;" circle v-hasPermi="['store:storeOrder:queryPhone']"></el-button>
            </el-descriptions-item>
            <el-descriptions-item label="收货地址"  >
              <el-popover
                v-if="order!=null"
                placement="top-start"
                title="收货地址"
                width="300"
                trigger="hover"
                :content="order.userAddress">
                <span slot="reference">{{order.userAddress}}</span>
                <el-button icon="el-icon-search" size="mini" @click="handleAddress()" style="margin-left: 20px;" circle v-hasPermi="['store:storeOrder:queryAddress']"></el-button>
              </el-popover>
            </el-descriptions-item>
            <el-descriptions-item label="支付方式"  >
                <span v-if="order!=null ">
                  <el-tag prop="orderType" v-for="(item, index) in payTypeOptions"    v-if="order.payType==item.dictValue">{{item.dictLabel}}</el-tag>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="订单类型"  >
                <span v-if="order!=null ">
                  <el-tag prop="orderType" v-for="(item, index) in orderTypeOptions"    v-if="order.orderType==item.dictValue">{{item.dictLabel}}</el-tag>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="物流公司编号"  >
                <span v-if="order!=null ">
                  {{order.deliverySn }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="物流公司名称"  >
                <span v-if="order!=null ">
                  {{order.deliveryName }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="快递单号"  >
                <span v-if="order!=null ">
                  {{order.deliveryId }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="档期归属"  >
              <el-tag prop="scheduleId" v-for="(item, index) in scheduleOptions"    v-if="order!=null&&order.scheduleId==item.id">{{item.name}}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="用户备注"  >
                <span v-if="order!=null ">
                  {{order.mark }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="平台备注"  >
                <span v-if="order!=null ">
                  {{order.remark }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="跟随阶段"  v-if="company.companyId == 174">
              <span v-if="order!=null ">
                <el-tag prop="orderVisit" v-for="(item, index) in customerUserStatusOptions"    v-if="order.orderVisit==item.dictValue">{{item.dictLabel}}</el-tag>
              </span>
            </el-descriptions-item>
            <el-descriptions-item v-if="customerInfo!=null " label="客户编码"  >
                <span >
                  {{customerInfo.customerCode }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item v-if="customerInfo!=null " label="进线时间"  >
                <span >
                  {{customerInfo.registerDate }}
                </span>
            </el-descriptions-item>

      </el-descriptions>
      <div style="margin: 20px 0px"  v-if="order!=null">
        <span class="font-small">
          凭证信息
        </span>
      </div>
      <el-image
          v-if="this.certificates != null"
          :src="certificates"
          :preview-src-list="[certificates]"
          :style="{ width: '100px', height: '100px' }"
          @click.native="showImageDialog"
        ></el-image>
        <el-dialog :visible.sync="dialogVisibleImage" width="10%">
          <img :src="certificates" style="width: 100%" alt="">
        </el-dialog>

      <div style="margin-top: 20px">
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        border
        v-if="items!=null"
        :data="items"
        size="small"
        style="width: 100%;margin-top: 20px" >
        <el-table-column label="商品图片" width="150" align="center">
          <template slot-scope="scope">
            <img :src="JSON.parse(scope.row.jsonInfo).image" style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="300" align="center">
          <template slot-scope="scope">
            <p>{{JSON.parse(scope.row.jsonInfo).productName}}</p>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="240" align="center">
          <template slot-scope="scope">
            <p>￥{{JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}</p>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="240" align="center">
          <template slot-scope="scope">
            {{JSON.parse(scope.row.jsonInfo).sku}}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.num}}
          </template>
        </el-table-column>
        <el-table-column label="小计"  align="center">
          <template slot-scope="scope" >
            ￥{{scope.row.num*JSON.parse(scope.row.jsonInfo).price.toFixed(2)}}
          </template>
        </el-table-column>
      </el-table>
      <div style="float: right;margin: 20px" v-if="order!=null">
        合计：<span class="color-danger">￥{{order.totalPrice.toFixed(2)}}</span>
      </div>

      <div style="margin: 60px 0px 20px 0px">
        <span class="font-small">费用信息</span>
      </div>
      <el-descriptions   :column="4" border  >
          <el-descriptions-item label="商品合计"  >
              <span v-if="order!=null">
                ￥{{order.totalPrice.toFixed(2)}}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="应付金额"  >
              <span v-if="order!=null">
                ￥{{order.payPrice.toFixed(2)}}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="运费"  >
              <span v-if="order!=null">
                ￥{{order.payPostage.toFixed(2)}}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="优惠券"  >
              <span v-if="order!=null">
                ￥{{order.couponPrice.toFixed(2)}}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="积分抵扣"  >
              <span v-if="order!=null">
                ￥{{order.deductionPrice.toFixed(2)}}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="实付金额"  >
              <span v-if="order!=null">
                ￥{{order.payMoney.toFixed(2)}}
              </span>
          </el-descriptions-item>
          <el-descriptions-item label="代收金额"  >
              <span v-if="order!=null">
                ￥{{order.payDelivery.toFixed(2)}}
              </span>
          </el-descriptions-item>
      </el-descriptions>

      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">支付信息</span>
      </div>
      <el-table
        border
        :data="payments"
        size="small"
        style="width: 100%;margin-top: 20px" >
          <el-table-column label="支付单号" align="center" prop="payCode" width="120px" />
          <el-table-column label="支付金额" align="center" prop="payMoney" />
          <el-table-column label="类型" align="center" prop="payTypeCode" />
          <el-table-column label="交易单号" align="center" prop="bankTransactionId" />
          <el-table-column label="银行单号" align="center" prop="bankSerialNo" />
          <el-table-column label="创建时间" align="center" prop="createTime" />
          <el-table-column label="支付时间" align="center" prop="payTime" />
      </el-table>

      <div style="margin-top: 20px">
        <span class="font-small">操作信息</span>
      </div>
      <el-table style="margin-top: 20px;width: 100%"
                ref="orderHistoryTable"
                :data="logs" border>
        <el-table-column label="操作时间"  width="160" align="center">
          <template slot-scope="scope">
            {{scope.row.changeTime}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{scope.row.changeMessage}}
          </template>
        </el-table-column>
      </el-table>

        <div style="margin-top: 20px">
          <span class="font-small">审批信息</span>
        </div>
        <el-table style="margin-top: 20px;width: 100%"
                  :data="auditLogs" border>
          <el-table-column label="操作时间"  width="160" align="center">
            <template slot-scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              {{scope.row.content}}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-dialog :title="edit.title" :visible.sync="edit.open" width="600px" append-to-body>
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
        <el-form-item label="订单类型" prop="orderType"  >
            <el-select style="width: 200px" v-model="editForm.orderType" placeholder="请选择订单类型" clearable size="small" >
              <el-option
                      v-for="item in orderTypeOptions"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    />
            </el-select>
        </el-form-item>
        <el-form-item label="档期归属" prop="scheduleId"  >
            <el-select filterable style="width: 200px" v-model="editForm.scheduleId" placeholder="请选择档期" clearable size="small" >
              <el-option
                      v-for="item in scheduleOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
            </el-select>
        </el-form-item>
        <el-form-item label="跟随阶段" prop="orderVisit" v-if="company.companyId == 174" >
          <el-select filterable style="width: 200px" v-model="editForm.orderVisit" placeholder="请选择跟随阶段" clearable size="small" >
            <el-option
                v-for="item in customerUserStatusOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="mark"  >
          <el-input v-model="editForm.mark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="editUser.title" :visible.sync="editUser.open" width="600px" append-to-body>
      <el-form ref="editUserForm" :model="editUserForm" :rules="editUserRules" label-width="100px">
         <el-form-item label="进线时间" prop="registerDate">
          <el-date-picker clearable size="small"
            v-model="editUserForm.registerDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择进线时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="推线编码" prop="registerCode">
          <el-input v-model="editUserForm.registerCode" placeholder="请输入推线编码" />
        </el-form-item>
          <el-form-item label="渠道来源" prop="source">
          <el-input v-model="editUserForm.source" placeholder="请输入渠道来源" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditUserForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="editAddress.title" :visible.sync="editAddress.open" width="600px" append-to-body>
      <el-form ref="editAddressForm" :model="editAddressForm" :rules="editAddressRules" label-width="100px">
        <el-form-item label="收件人" prop="realName">
          <el-input v-model="editAddressForm.realName" placeholder="请输入收件人" />
        </el-form-item>
          <el-form-item label="联系电话" prop="source">
          <el-input v-model="editAddressForm.userPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="收货地址" prop="district">
          <el-row :gutter="20">
          <el-col :span="6">
             <el-select @change="provinceChange" v-model="editAddressForm.provinceId" placeholder="请选择">
                <el-option
                  v-for="item in province"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
          <el-col :span="6">
            <el-select @change="cityChange" v-model="editAddressForm.cityId" placeholder="请选择">
                <el-option
                  v-for="item in city"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
          <el-col :span="6">
             <el-select @change="districtChange" v-model="editAddressForm.districtId" placeholder="请选择">
                <el-option
                  v-for="item in district"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
        </el-row>
        </el-form-item>
        <el-form-item label="详细地址" prop="detail">
          <el-input v-model="editAddressForm.detail" placeholder="请输入收货人详细地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditAddressForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="expressDialog.title" :visible.sync="expressDialog.open" width="600px" append-to-body>
      <el-table style="margin-top: 20px;width: 100%"
                ref="orderHistoryTable"
                :data="traces" border>
        <el-table-column label="操作时间"  width="160" align="center">
          <template slot-scope="scope">
            {{scope.row.AcceptTime}}
          </template>
        </el-table-column>
         <el-table-column label="位置" align="center">
          <template slot-scope="scope">
            {{scope.row.Location}}
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center">
          <template slot-scope="scope">
            {{scope.row.AcceptStation}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :title="bindCustomerDialog.title" :visible.sync="bindCustomerDialog.open" width="800px" append-to-body>
      <el-form ref="bindCustomerForm" :model="bindCustomerForm" :rules="bindCustomerRules" label-width="100px">
        <el-form-item label="客户查询">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-input v-model="bindCustomerForm.mobile"   placeholder="请输入客户手机号"/>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" @click="searchCustomer">查看</el-button>
            </el-col>
          </el-row>

        </el-form-item>
        <el-form-item label="客户选择"  prop="customerIds">
          <el-table   @selection-change="handleSelectionChange"
                :data="customers" border>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" align="center" prop="customerId" />
            <el-table-column label="客户编号"  width="160" align="center">
              <template slot-scope="scope">
                {{scope.row.customerCode}}
              </template>
            </el-table-column>
            <el-table-column label="客户名称"  width="160" align="center">
              <template slot-scope="scope">
                {{scope.row.customerName}}
              </template>
            </el-table-column>
            <el-table-column label="客户手机号"  width="160" align="center">
              <template slot-scope="scope">
                {{scope.row.mobile}}
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBindCustomerForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="certificateDialig.title" :visible.sync="certificateDialig.open" append-to-body>
      <el-form ref="certificateForm" :model="certificateForm" :rules="certificateRules" label-width="100px">
        <el-form-item label="凭证" prop="certificates">
          <ImageUpload v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :append-to-body="true"
      size="75%"
      :title="customer.title" :visible.sync="customer.open"
      >
        <customer-details  ref="customerDetails" />
    </el-drawer>
    <el-dialog :title="addSms.title" :visible.sync="addSms.open" width="800px" append-to-body>
        <add-sms ref="sms" @close="closeSms()"></add-sms>
    </el-dialog>
  </div>
</template>

<script>
import {updateUser,getUser } from "@/api/users/user";
import { getTcmScheduleList } from "@/api/company/tcmScheduleReport";
import {getCustomerListBySearch } from "@/api/crm/customer";
import ImageUpload from '@/components/ImageUpload'
import Material from '@/components/Material'
import {bindCustomer,getExpress, listStoreOrder, getStoreOrder, delStoreOrder, addStoreOrder, updateStoreOrder, exportStoreOrder,uploadCredentials, getStoreOrderAddress,getUserPhone} from "@/api/hisStore/storeOrder";
import {getCitys} from "@/api/hisStore/city";
import customerDetails from '../../crm/components/customerDetails.vue';
import addSms from '../../crm/components/addSms.vue';
export default {
  name: "order",
  components: {customerDetails,
    ImageUpload,Material ,addSms},
  data() {
    return {
      customerUserStatusOptions:[],
      scheduleOptions:[],
      dialogVisibleImage: false,
      customerInfo:null,
      customer:{
        title:"客户详情",
        open:false,
      },
      photoArr:null,
      certificateDialig:{
        title:"上传凭证",
        open:false,
      },
      certificateForm:{
        orderCode:null,
        certificates:null,
      },
      addSms:{
        open:false,
        title:"发短信"
      },
      certificateRules:{
        certificates:[
          { required: true, message: "凭证不能为空", trigger: "change" }
        ]
      },
      customers:[],
      bindCustomerDialog:{
        title:"关联客户",
        open:false,
      },
      bindCustomerForm:{
        mobile:null,
        customerIds:null,
      },
      bindCustomerRules:{
        customerIds: [
            { required: true, message: "客户不能为空", trigger: "change" }
        ],

      },
      orderId:null,
      expressDialog:{
        title:"物流信息",
        open:false,
      },
      citys:[],
      province:[],
      city:[],
      district:[],
      editAddress:{
        title:"修改收货地址",
        open:false,
      },
      editAddressForm:{
        districtId:null,

      },
      editAddressRules:{

      },
      editUser:{
        title:"修改会员信息",
        open:false,
      },
      editUserForm:{
        registerDate:null,
        registerCode:"",
        source:"",
      },
      editUserRules:{

      },
      edit:{
        title:"",
        open:false,
      },
      editForm:{
        orderType:null,
        scheduleId:null,
        orderVisit:null,
        mark:"",
      },
      editRules:{

      },
      createTypeOptions:[],
      orderTypeOptions:[],
      payTypeOptions:[],
      statusOptions:[],
      certificates:null,
      order:null,
      user:{},
      logs:[],
      items:[],
      express:[],
      traces:[],
      payments:[],
      auditLogs: []
    };
  },
  created() {
    this.getDicts("crm_customer_user_status").then((response) => {
            this.customerUserStatusOptions = response.data;
        });
    this.getDicts("store_order_type").then((response) => {
      this.orderTypeOptions = response.data;
    });
    this.getDicts("store_order_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("store_pay_type").then((response) => {
      this.payTypeOptions = response.data;
    });
    this.getDicts("store_order_create_type").then((response) => {
      this.createTypeOptions = response.data;
    });
    getTcmScheduleList().then(response => {
      this.scheduleOptions = response.data;
    });
  },
  computed: {
    company(){
      return this.$store.state.user.user;
    }
  },
  methods: {
    closeSms(){
      this.addSms.open=false;
    },
    handleSms(mobile){
        this.addSms.open=true;
        var that=this;
        setTimeout(() => {
            that.$refs.sms.getOrderId(this.orderId,mobile,2);
        }, 500);

    },
    handlePhone(){
      const id = this.order.id;
        getUserPhone(id).then(response =>{
          this.order.userPhone = response.userPhone;
        })
      },
    handleAddress(){
      const id = this.order.id;
      getStoreOrderAddress(id).then(response =>{
          this.order.userAddress = response.address;
      })
    },
    showImageDialog() {
      this.dialogVisible = true;
    },
    handleCustomer(){
      var that=this;
      this.customer.open = true;
      setTimeout(() => {
          that.$refs.customerDetails.getDetails(this.order.customerId);
      }, 200);
    },
    handleSelectionChange(selection) {
      this.bindCustomerForm.customerIds = selection.map(item => item.customerId)
    },
    searchCustomer(){
      if(this.bindCustomerForm.mobile==null||this.bindCustomerForm.mobile==""){
        this.msgError("请输入手机号");
        return;
      }
      var data={mobile:this.bindCustomerForm.mobile};
      getCustomerListBySearch(data).then(response => {
          this.customers=response.data;
      });
    },
    handleBindCustomer() {
      this.customers=[];
      this.bindCustomerDialog.open = true;
      this.bindCustomerForm.mobile=null;
      this.bindCustomerForm.orderId=this.orderId;
      this.bindCustomerForm.customerIds=null;
    },
    /** 提交按钮 */
    submitBindCustomerForm() {
      this.$refs["bindCustomerForm"].validate(valid => {
        if (valid) {
          bindCustomer(this.bindCustomerForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.bindCustomerDialog.open = false;
              }
            });
        }
      });
    },
    handleCertificates(){
      this.certificateDialig.open = true;
      this.photoArr = null;
    },
    handleConfirm(){
      this.certificateForm.id = this.orderId;
      this.certificateForm.orderCode = this.order.orderCode;
      this.certificateForm.certificates = this.photoArr;
      uploadCredentials(this.certificateForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("上传成功");
                this.certificateDialig.open = false;
                this.getOrder(this.order.id);
              }
            });
    },
    showExpress(){
      this.expressDialog.open=true;
      getExpress(this.orderId).then(response => {
          this.express = response.data;
          if(this.express!=null&&this.express.Traces!=null){
              this.traces=this.express.Traces
          }

      });

    },
    districtChange(val){
      var item=this.district.find((item)=>{
        return item.value==val;
      })

      this.editAddressForm.district=item.label;

    },
    cityChange(val){
      // this.district=this.citys.filter(item => item.value===val )
      this.editAddressForm.districtId=null;
      var item=this.city.find((item)=>{
        return item.value==val;
      })
      console.log(item)
      this.district = item.children;
      this.editAddressForm.city=item.label;


    },
    provinceChange(val){
      // this.city=this.citys.filter(item => item.value===val )
      this.district=[];
      this.editAddressForm.cityId=null;
      this.editAddressForm.districtId=null;
      var item=this.citys.find((item)=>{
        return item.value==val;
      })
      this.city = item.children;
      this.editAddressForm.province=item.label;
    },
    async getCityList() {
      try {
        const res = await getCitys();
        this.citys = res.data;
        this.province = res.data.filter(item => item.pid == 0);
        // 可选：返回数据以便链式调用
        return res.data;
      } catch (error) {
        console.error('获取城市列表失败:', error);
      }
    },
    async handleEditAddress() {
      // 等待城市数据加载完成
      await this.getCityList();

      // 初始化表单数据
      this.editAddressForm.id = this.order.id;
      this.editAddressForm.realName = this.order.realName;
      this.editAddressForm.userPhone = this.order.userPhone;

      // 初始化表单中的地址字段
      this.editAddressForm.provinceId = '';
      this.editAddressForm.cityId = '';
      this.editAddressForm.districtId = '';
      this.editAddressForm.detail = '';

      // 初始化级联数据
      this.city = [];
      this.district = [];

      // 检查是否有地址数据
      if (!this.order?.userAddress) {
        this.editAddress.open = true;
        return;
      }

      // 分割地址
      const addressParts = this.order.userAddress.trim().split(/\s+/);

      // 如果地址格式不正确，将整个地址作为详情
      if (addressParts.length < 4) {
        this.editAddressForm.detail = this.order.userAddress;
        this.editAddress.open = true;
        return;
      }

      // 解析省份
      const provinceName = addressParts[0];
      const province = this.citys?.find(item => item.label === provinceName);

      if (province) {
        this.editAddressForm.provinceId = province.value;

        // 获取城市列表
        if (Array.isArray(province.children)) {
          this.city = province.children.filter(item => item.pid == province.value);

          // 解析城市
          const cityName = addressParts[1];
          const city = this.city.find(item => item.label === cityName);

          if (city) {
            this.editAddressForm.cityId = city.value;

            // 获取区县列表
            if (Array.isArray(city.children)) {
              this.district = city.children.filter(item => item.pid == city.value);

              // 解析区县
              const districtName = addressParts[2];
              const district = this.district.find(item => item.label === districtName);

              if (district) {
                this.editAddressForm.districtId = district.value;
              }
            }
          }
        }
      }

      // 详细地址是剩余部分
      this.editAddressForm.detail = addressParts.slice(3).join(' ');

      // 打开编辑对话框
      this.editAddress.open = true;
    },
    /** 提交按钮 */
    submitEditAddressForm() {
      this.$refs["editAddressForm"].validate(valid => {
        if (valid) {
           this.editAddressForm.userAddress=this.editAddressForm.province+" "+this.editAddressForm.city+" "+this.editAddressForm.district+" "+this.editAddressForm.detail;
            updateStoreOrder(this.editAddressForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.editAddress.open = false;
                this.getOrder(this.order.id);
              }
            });
        }
      });
    },
    handleEditUser() {
      const userId = this.order.userId
      getUser(userId).then(response => {
        this.editUserForm.userId=response.data.userId;
        this.editUserForm.registerDate=response.data.registerDate;
        this.editUserForm.registerCode=response.data.registerCode;
        this.editUserForm.source=response.data.source;
        this.editUser.open = true;
      });
    },
    /** 提交按钮 */
    submitEditUserForm() {
      this.$refs["editUserForm"].validate(valid => {
        if (valid) {
            updateUser(this.editUserForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.editUser.open = false;
                this.getOrder(this.order.id);
              }
            });
        }
      });
    },
    submitEditForm(){
        this.$refs["editForm"].validate(valid => {
        if (valid) {
          updateStoreOrder(this.editForm).then(response => {
            if (response.code === 200) {
              this.msgSuccess("操作成功");
              this.edit.open = false;
              this.getOrder(this.order.id);
            }
          });

        }
      });
    },
    editOrder(){
        this.edit.open=true;
        this.editForm.mark=this.order.mark
        this.editForm.id=this.order.id;
        if(this.order.orderType!=null){
          this.editForm.orderType=this.order.orderType.toString();
        }
        this.editForm.scheduleId=this.order.scheduleId;
        this.editForm.orderVisit = this.order.orderVisit;

    },
    getOrder(orderId){
        this.orderId=orderId;
        this.certificates = null;
        getStoreOrder(orderId).then(response => {
            this.order = response.order;
            if(response.order.certificates != null){
              this.certificates = response.order.certificates;
            }
            this.user = response.user;
            this.logs = response.logs;
            this.items = response.items;
            this.payments=response.payments;
            this.customerInfo=response.customer;
            this.auditLogs = response.auditLogs;
        });
     }
  }
};
</script>
<style scoped>
.order-content{
  margin: 10px;
}
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>