<!-- 订单详情-->
<template>
  <div class="wrapper_1200 order_details">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
        <el-breadcrumb-item>{{ orderData.order_status_name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 订单信息 -->
    <div class="cont">
      <div class="table">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column prop="name" label="商品" align="center" width="320">
            <template slot-scope="scope">
              <div class="good_info">
                <div class="l">
                  <img :src="imgUrl + scope.row.sku_image" alt />
                </div>
                <div class="r">
                  <p>{{ scope.row.goods_name }}</p>
                  <!-- <span>商品编号：a0001 规格：10g/袋</span>
                  <span>产地：北京</span>-->
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="order_no"
            label="订单编号"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column
            v-if="integralGoods == 0"
            prop="real_goods_money"
            label="金额"
            align="center"
          ></el-table-column>
          <el-table-column
            v-if="integralGoods == 1"
            prop="moeny"
            label="商品总价"
            align="center"
          >
            <template>
              <div style="color: #ff7d02">2000积分</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="num"
            label="订货数量"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column
            v-if="integralGoods == 0"
            prop="price"
            label="单价"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="delivery_status_name"
            label="订单状态"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="buyer_messag"
            label="备注"
            show-overflow-tooltip
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <div class="infoBoxF" v-if="orderType != -1">
        <div class="leftInfo">
          <div class="item" v-if="integralGoods == 1">
            <div class="l">服务</div>
            <div class="r">不支持退换</div>
          </div>
          <div
            class="item"
            v-if="
              (orderType == 1 ||
                orderType == 2 ||
                orderType == 3 ||
                orderType == 4 ||
                orderType == 5) &&
              integralGoods == 0
            "
          >
            <div class="l">商品金额</div>
            <div class="r">¥{{ orderData.goods_money }}</div>
          </div>
          <div
            class="item"
            v-if="
              (orderType == 1 ||
                orderType == 2 ||
                orderType == 3 ||
                orderType == 4 ||
                orderType == 5) &&
              integralGoods == 0
            "
          >
            <div class="l">优惠券</div>
            <div class="r red">-¥{{ orderData.coupon_money }}</div>
          </div>
          <div
            class="item"
            v-if="
              orderType == 1 ||
              orderType == 2 ||
              orderType == 3 ||
              orderType == 4 ||
              orderType == 5
            "
          >
            <div class="l">运费</div>
            <div class="r red">¥{{ orderData.delivery_money }}</div>
          </div>

          <div
            class="item"
            v-if="
              (orderType == 1 ||
                orderType == 2 ||
                orderType == 3 ||
                orderType == 4 ||
                orderType == 5) &&
              integralGoods == 0
            "
          >
            <div class="l">实付金额</div>
            <div class="r red">¥{{ orderData.order_money }}</div>
          </div>
          <div class="item" v-if="orderType == 3">
            <div class="l">等待付款</div>
            <div class="r qx">
              剩余时间
              <span class="red">{{ min }}分钟 {{ sec }}秒</span>自动关闭
            </div>
          </div>

          <div class="item" v-if="integralGoods == 1">
            <div class="l">商品总价</div>
            <div class="r red">2000积分</div>
          </div>
          <div class="item" v-if="integralGoods == 1">
            <div class="l">实付</div>
            <div class="r red">2000积分</div>
          </div>
          <div class="item">
            <div class="l">收货地址</div>
            <div class="r address">
              <p>{{ orderData.name }} {{ orderData.mobile }}</p>
              <span>{{ orderData.full_address }}{{ orderData.address }}</span>
            </div>
          </div>
        </div>
        <div class="rightInfo" v-if="integralGoods == 1">
          <div class="title">凭证信息</div>
          <div class="item">
            <div class="l">凭证</div>
            <div class="r">
              <p>03945858</p>
              <div class="tm"></div>
              <div class="code"></div>
            </div>
          </div>
          <div class="item">
            <div class="l">服务内容</div>
            <div class="r">商城优惠券100元</div>
          </div>
          <div class="item">
            <div class="l">可用数量</div>
            <div class="r">
              可使用
              <span>1</span>张/共2
            </div>
          </div>
          <div class="item">
            <div class="l">有效期</div>
            <div class="r">2022-12-21至2023-01-19</div>
          </div>
        </div>
      </div>
      <div class="btns" v-if="orderType != -1">
        <div class="hs" v-if="orderType == 1 && integralGoods == 0">申请售后</div>
        <div class="gl" v-if="orderType == 1" @click="clickQrsh">确定收货</div>
        <!-- <div class="hs" v-if="orderType == 2" @click="clickGhdz">更换地址</div> -->
        <div class="gl" v-if="orderType == 2" @click="clickTxfh">提醒发货</div>
        <!-- <div class="hs" v-if="orderType == 3 && integralGoods == 0" @click="clickDdqx">取消订单</div> -->
        <div class="gl" v-if="orderType == 3 && integralGoods == 0" @click="clickJxfk">
          继续付款
        </div>
        <div class="gl" v-if="orderType == 4 && integralGoods == 0" @click="clickScdd">
          删除订单
        </div>
        <div
          class="bs"
          v-if="
            (!(orderType == 3) && integralGoods == 0) ||
            (orderData.is_invoice == 1 && orderData.invoice_status == 1)
          "
          @click="clickSqkp"
        >
          申请开票
        </div>
        <div class="hs" v-if="orderType == 5 && integralGoods == 0" @click="clickSpsh">
          申请售后
        </div>
        <div class="gl" v-if="orderType == 5 && integralGoods == 0" @click="clickQpj">
          去评价
        </div>
        <div
          class="gl"
          v-if="(orderType == 5 || orderType == 4) && integralGoods == 1"
          @click="clickZcdh"
        >
          再次兑换
        </div>
        <div class="hs" v-if="orderType == 3 && integralGoods == 1" @click="clickQxdh">
          取消兑换
        </div>
        <div class="gl" v-if="orderType == 3 && integralGoods == 1" @click="clickJxdh">
          继续兑换
        </div>
      </div>
    </div>
    <!-- 物流信息 -->
    <div class="playInfo" v-if="orderType != -1">
      <div class="left">
        <div class="item">
          <div class="l">物流信息</div>
          <div class="r" v-if="!(orderType == 2) && !(orderType == 3)">
            <p v-if="logisticsData.trace">{{ logisticsData.trace.reason }}</p>
          </div>
          <div class="r" v-if="orderType == 2">等待发货</div>
          <div class="r" v-if="orderType == 3">暂无</div>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <div class="l">订单信息</div>
          <div class="r">
            <p>
              订单编号：{{ orderData.order_no }} |
              <span @click="playCopy(orderData.order_no)">复制</span>
            </p>
            <p>
              下单时间：{{
                $dayjs(orderData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss")
              }}
            </p>

            <p v-if="!(orderType == 3)">
              付款时间：{{
                $dayjs(orderData.pay_time * 1000).format("YYYY-MM-DD HH:mm:ss")
              }}
            </p>

            <p v-if="!(orderType == 2) && !(orderType == 3)">
              发货时间：{{
                $dayjs(logisticsData.delivery_time * 1000).format("YYYY-MM-DD HH:mm:ss")
              }}
            </p>
            <p v-if="orderType == 5">
              收货时间：{{
                $dayjs(logisticsData.delivery_time * 1000).format("YYYY-MM-DD HH:mm:ss")
              }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 为你推荐 -->
    <!-- <Guess v-if="orderType == 1"></Guess> -->

    <!-- 提示弹框 -->
    <Dialog
      ref="dialog"
      :confirmText="dialogCon.confirmText"
      :tipsText="dialogCon.tipsText"
      :contentText="dialogCon.contentText"
      :cancelText="dialogCon.cancelText"
      @clickConfirm="submit()"
    ></Dialog>

    <!-- 插槽弹框 -->
    <DialogSlot
      :dialogSlotShow.sync="dialogSlotCon.dialogSlotShow"
      :tipsText="dialogSlotCon.tipsText"
      :cancelText="dialogSlotCon.cancelText"
      :confirmText="dialogSlotCon.confirmText"
      :confirmBtnShow="dialogSlotCon.confirmBtnShow"
      :titleShow="dialogSlotCon.titleShow"
      @clickCancel="clickCancel"
      @clickConfirm="clickConfirm"
    >
      <!-- 内容插槽 -->
      <template v-slot:contentSlot>
        <!-- 跟换地址 -->
        <div class="ghdz" v-if="dialogSlotType == 'ghdz'">
          <div class="dz">
            <el-radio v-model="addressType" :label="1">
              <div class="radio">
                <p>李三 19293984987</p>
                <span>四川省攀枝花市盐边县哈雷路胡同34号</span>
              </div>
            </el-radio>
          </div>
          <div class="dz">
            <el-radio v-model="addressType" :label="2">
              <div class="radio">
                <p>罗爱拉 13456987568</p>
                <span>福建省厦门市集美区李冰大道500号</span>
              </div>
            </el-radio>
          </div>
          <div class="dz">
            <el-radio v-model="addressType" :label="3">
              <div class="radio">
                <p>罗杰 19293984987</p>
                <span>西藏自治区拉萨市堆龙德庆县兴业街961号</span>
              </div>
            </el-radio>
          </div>
        </div>

        <!-- 订单取消 -->
        <div class="ddqx" v-if="dialogSlotType == 'ddqx'">
          <span>您确认要取消订单吗？取消订单后，订单不能恢复。</span>
          <div class="slec">
            <p>请选择取消订单原因：</p>
            <el-select style="width: 100%" v-model="clecanReason" placeholder="请选择">
              <el-option
                v-for="item in clecanReasonOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>

        <!-- 继续支付 -->
        <div class="jxfk" v-if="dialogSlotType == 'jxfk'">
          <el-form
            :model="paymentForm"
            ref="paymentForm"
            label-width="120px"
            hide-required-asterisk
            v-if="payState == 1"
          >
            <el-radio-group v-model="isBalance" class="czText" @change="paidChange">
              <el-radio :label="false">待支付金额：￥{{ orderData.pay_money }}</el-radio>
              <el-radio :label="true"
                >预存款支付（当前余额{{ userInfo.balance }}，本次抵扣{{
                  orderData.pay_money
                }}）</el-radio
              >
            </el-radio-group>

            <el-form-item label="还需支付">
              <el-input
                v-model="paymentForm.payment_money"
                size="small"
                :placeholder="Tobepaid ? orderData.pay_money : Tobepaid"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item
              label="请选择支付方式"
              prop="moneryType"
              v-if="!paymentForm.is_balance"
            >
              <!-- <div class="zf" style="margin-top: 8px">
                <div class="l">
                  <el-radio v-model="paymentForm.payType" :label="1">
                    <div class="radio">
                      <img src="~assets/images/wxpay.png" alt />
                      <p>微信</p>
                    </div>
                  </el-radio>
                </div>
                <span class="rr">
                  <span>使用微信扫描二维码即可付款</span>
                </span>
              </div> -->
              <div class="zf" style="margin-top: 20px">
                <div class="l">
                  <el-radio v-model="paymentForm.payType" :label="2">
                    <div class="radio">
                      <img src="~assets/images/AlipayTag.png" alt />
                      <p>支付宝</p>
                    </div>
                  </el-radio>
                </div>
                <span class="rr">使用手机支付宝扫描二维码付款</span>
              </div>
            </el-form-item>
          </el-form>
          <div v-if="payState == 2" class="smzf">
            <div class="code">
              <img src="~assets/images/code.png" alt />
            </div>
            <p>请使用微信“扫一扫”扫描二维码支付</p>
          </div>
          <div v-if="payState == 3" class="zfcg">
            <div class="code">
              <img src="~assets/images/paySuccess.png" alt />
            </div>
            <p>充值成功</p>
          </div>
        </div>

        <!-- 去评价 -->
        <div class="qpj" v-if="dialogSlotType == 'qpj'">
          <el-radio-group v-model="pjForm.radio" style="margin: 10px 0 20px">
            <el-radio :label="1">好评</el-radio>
            <el-radio :label="2">中评</el-radio>
            <el-radio :label="3">差评</el-radio>
          </el-radio-group>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="pjForm.textarea"
          ></el-input>
          <div class="tj">
            <p>添加图片</p>
            <UploadImage1
              @input="uploadSccess($event, '1')"
              :value="pjForm.license"
              :limit="9"
            >
              <template v-slot:upload>
                <div class="upload">
                  <img src="~assets/images/downloadIMG.png" />

                  <span>上传照片</span>
                </div>
              </template>
            </UploadImage1>
          </div>
        </div>
        <!-- 申请发票 -->
        <div class="sqkp" v-if="dialogSlotType == 'sqkp'">
          <el-form
            v-if="!sqscussess"
            label-position="right"
            label-width="85px"
            :model="kpForm"
          >
            <el-form-item label="发票类型：">
              <el-select
                style="width: 100%"
                v-model="kpForm.value"
                placeholder="请选择发票类型"
              >
                <el-option
                  v-for="item in optionsType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="抬头类型：">
              <el-input v-model="kpForm.type" placeholder="确认要删除吗？"></el-input>
            </el-form-item>

            <el-form-item label="发票抬头：">
              <el-input
                v-model="kpForm.type"
                placeholder="请填写需要开具发票的企业名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="税号：">
              <el-input v-model="kpForm.type" placeholder="纳税人识别号"></el-input>
            </el-form-item>
            <el-form-item label="开户银行：">
              <el-input v-model="kpForm.type" placeholder="请填写开户银行"></el-input>
            </el-form-item>
            <el-form-item label="银行帐号：">
              <el-input v-model="kpForm.type" placeholder="请填写银行帐号"></el-input>
            </el-form-item>
            <el-form-item label="企业地址：">
              <el-input v-model="kpForm.type" placeholder="请填写企业地址"></el-input>
            </el-form-item>
            <el-form-item label="企业电话：">
              <el-input v-model="kpForm.type" placeholder="请填写企业电话"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址：">
              <el-input v-model="kpForm.type" placeholder="请填写邮箱地址"></el-input>
            </el-form-item>
            <el-form-item label="开票金额：">
              <el-input v-model="kpForm.type" placeholder="请填写开票金额"></el-input>
            </el-form-item>
          </el-form>
          <div v-else class="zfcg">
            <div class="code">
              <img src="~assets/images/paySuccess.png" alt />
            </div>
            <p>申请成功</p>
          </div>
        </div>
        <!-- 兑换 -->
        <div class="dh" v-if="dialogSlotType == 'dh'">
          <div class="zfcg">
            <div class="code">
              <img src="~assets/images/paySuccess.png" alt />
            </div>
            <p>兑换成功</p>
          </div>
        </div>
      </template>
      <!-- 选择插槽 -->
      <template v-slot:seleSlot v-if="!sqscussess && dialogSlotType == 'sqkp'">
        <el-checkbox v-model="kpForm.checked">设为默认抬头</el-checkbox>
      </template>
    </DialogSlot>

    <!-- 申请开票 -->
    <Dialog
      ref="billDialog"
      :contentText="contentText"
      @clickConfirm="billBtn"
      :cancelText="'返回'"
    ></Dialog>
  </div>
</template>

<script>
import Setting from "~/setting";
import Guess from "@/components/guess.vue";

export default {
  name: "order_details",
  auth: false,
  //import引入的组件需要注入到对象中才能使用
  components: {
    Guess,
  },
  data() {
    //这里存放数据
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      imgUrl: Setting.uplodBaseURL,
      orderData: {},
      // 提示弹框配置
      dialogCon: {},
      dialogType: "", //弹框当前打开的弹框
      // ---------------------------------
      // 插槽配置
      dialogSlotCon: {},
      dialogSlotType: "", //弹框插槽当前打开的弹框
      payState: 1,

      // ---------------------------------
      addressType: "1", //选中的地址
      paymentForm: {
        is_balance: false,
      }, //继续支付
      isBalance: false,
      Tobepaid: "",
      pjForm: {}, //评价
      kpForm: {
        checked: false,
      }, //申请开票
      sqscussess: false, //申请成功
      integralGoods: 0, //0-非积分兑换的商品  1-积分兑换的商品

      orderType: 3, //1-待收货  2-待发货  3-待付款 4-取消订单  5-已完成
      titleType: "已完成",
      tableData: [],
      clecanReasonOption: [],
      clecanReason: "", //取消原因
      // 发票类型
      optionsType: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      min: "",
      sec: "",
      order_create_time: "",
      logisticsData: {},
      contentText: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getOrderData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.countdown();
  },
  //方法集合
  methods: {
    getOrderData() {
      let id = this.$route.query.order_id;
      let obj = {
        order_id: id,
      };
      this.$axios
        .post(`/order/detail`, obj)
        .then((res) => {
          console.log(res.data);
          this.orderData = res.data;
          this.tableData = res.data.order_goods;
          this.tableData.map((item) => {
            item.buyer_messag = this.orderData.buyer_message;
          });
          this.order_create_time = res.data.create_time;
          this.countdown();
          // -1-已关闭 1-待收货  2-待发货  3-待付款 4-取消订单  5-已完成
          if (this.orderData.order_status == -1) {
            this.orderType = -1;
          } else if (this.orderData.order_status == 1) {
            this.orderType = 2;
          } else if (this.orderData.order_status == 0) {
            this.orderType = 3;
          } else if (this.orderData.order_status == 3) {
            this.orderType = 1;
            // 待收货查询物流信息
            this.getLogisticsData();
          } else if (this.orderData.order_status == 4) {
            this.orderType = 5;
            this.getLogisticsData();
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    getLogisticsData() {
      let id = this.$route.query.order_id;
      let obj = {
        order_id: id,
      };
      this.$axios
        .post(`/order/package`, obj)
        .then((res) => {
          console.log(res);
          this.logisticsData = res.data[0];
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 确认收货
    clickQrsh() {
      this.dialogType = "qrsh";
      this.dialogCon = {
        tipsText: "提示",
        contentText: "是否确认收货？",
        cancelText: "返回",
        confirmText: "是",
      };
      this.$refs.dialog.dialogShow = true;
    },
    // 更换地址
    clickGhdz() {
      this.dialogSlotType = "ghdz";
      this.dialogSlotCon = {
        dialogSlotShow: true,
        tipsText: "选择地址",
        cancelText: "返回",
      };
    },

    // 提醒发货
    clickTxfh() {
      let obj = {
        order_id: this.$route.query.order_id,
      };
      this.$axios
        .post(`/order/doDeliveryMessage`, obj)
        .then((res) => {
          console.log(res);
          this.$message.success(res.message);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 订单取消
    clickDdqx() {
      this.dialogSlotType = "ddqx";
      this.dialogSlotCon = {
        dialogSlotShow: true,
        tipsText: "订单取消",
        cancelText: "暂不取消",
        confirmText: "确定取消",
      };
    },
    // 继续支付
    clickJxfk() {
      this.dialogSlotType = "jxfk";
      this.dialogSlotCon = {
        dialogSlotShow: true,
        tipsText: "继续支付",
        cancelText: "返回",
        confirmText: "确定支付",
      };
    },
    // 继续支付是否直接支付还是余额抵扣
    paidChange(val) {
      if (!val) {
        this.paymentForm.is_balance = false;
        this.Tobepaid = Number(this.orderData.pay_money);
      } else if (val) {
        let num = Number(this.userInfo.balance) - Number(this.orderData.pay_money);
        this.paymentForm.is_balance = true;
        if (num < Number(this.userInfo.balance)) {
          this.Tobepaid = 0;
        } else if (num > Number(this.userInfo.balance)) {
          this.Tobepaid = num - Number(this.userInfo.balance);
        }
      }
    },
    // 删除订单
    clickScdd() {
      this.$refs.dialog.dialogShow = true;
      this.dialogCon = {
        cancelText: "返回",
        contentText: "确定删除？",
      };
    },
    // 去评价
    clickQpj() {
      this.dialogSlotType = "qpj";
      this.dialogSlotCon = {
        dialogSlotShow: true,
        tipsText: "商品评价",
        cancelText: "取消",
        confirmText: "确认",
      };
    },
    // 申请开票
    clickSqkp() {
      this.contentText = "确定要申请开发票吗？";
      this.$refs.billDialog.dialogShow = true;
    },
    billBtn() {
      let obj = {
        order_id: this.orderData.order_id,
        store_id: JSON.parse(localStorage.getItem("drugstoreObj")).id,
      };
      this.$axios
        .post(`/order/doInvoice`, obj)
        .then((res) => {
          this.$message.success(res.message);
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 申请售后
    clickSpsh() {},

    // 点击确认
    clickConfirm() {
      // 继续支付
      if (this.dialogSlotType == "jxfk") {
        let obj = {
          is_balance: this.paymentForm.is_balance ? "1" : "0",
          out_trade_no: this.orderData.out_trade_no,
          pay_type: this.orderData.pay_type,
        };
        this.$axios
          .post(`/pay/pay`, obj)
          .then((res) => {
            this.$message.success(res.message);
          })
          .catch((err) => {
            this.$message.error(err);
          });
        // if (this.payState == 2) {
        //   this.dialogSlotCon = {
        //     dialogSlotShow: true,
        //     titleShow: false,
        //     cancelText: "返回首页",
        //     confirmText: "查看订单",
        //   };
        //   this.payState = 3;
        // }
        // if (this.payState == 1) {
        //   this.dialogSlotCon = {
        //     dialogSlotShow: true,
        //     tipsText: "微信扫码支付",
        //     cancelText: "返回",
        //   };
        //   this.payState = 2;
        // }
      }
      // 申请开票成功
      if (this.dialogSlotType == "sqkp") {
        this.sqscussess = true;
        this.dialogSlotCon = {
          dialogSlotShow: true,
          titleShow: false,
          cancelText: "返回",
          confirmBtnShow: false,
        };
      }

      this.dialogSlotCon.dialogSlotShow = false;
    },
    submit() {
      //确定收货
      console.log(this.orderData);
      if (this.dialogType == "qrsh") {
        let obj = {
          order_id: this.orderData.order_id,
        };
        this.$axios
          .post(`/order/takeDelivery`, obj)
          .then((res) => {
            console.log(res);
            this.$message({
              message: res.message,
              type: "success",
            });
            this.$router.push({ path: `/order` });
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
    // 继续兑换
    clickJxdh() {
      this.dialogSlotType = "dh";
      this.dialogSlotCon = {
        dialogSlotShow: true,
        titleShow: false,
        cancelText: "返回首页",
        confirmText: "查看订单",
      };
    },
    // 再次兑换
    clickZcdh() {},
    // 取消兑换
    clickQxdh() {
      this.dialogType = "zcdh";
      this.dialogCon = {
        tipsText: "提示",
        contentText: "是否取消订单",
        cancelText: "取消",
        confirmText: "确认",
      };
      this.$refs.dialog.dialogShow = true;
    },
    // 点击取消或返回
    clickCancel() {
      this.dialogSlotCon.dialogSlotShow = false;
    },

    // 复制
    playCopy(v) {
      let url = v; //拿到想要复制的值
      let copyInput = document.createElement("input"); //创建input元素
      document.body.appendChild(copyInput); //向页面底部追加输入框
      copyInput.setAttribute("value", url); //添加属性，将url赋值给input元素的value属性
      copyInput.select(); //选择input元素
      document.execCommand("Copy"); //执行复制命令
      this.$message.success("复制成功"); //弹出提示信息，不同组件可能存在写法不同
      //复制之后再删除元素，否则无法成功赋值
      copyInput.remove(); //删除动态创建的节点
    },
    //倒计时
    countdown() {
      const end = this.order_create_time * 1000; // update_time是后台返的数据，代表创建订单的那一个时刻的毫秒数
      const now = new Date().getTime(); // 获取当前时间的毫秒数
      const minus = now - end;
      const m_30 = 30 * 60 * 1000; // 30分钟毫秒数，如十分钟倒计时，公式即为10*60*100，以此类推

      const differ = m_30 - minus; // 时间差

      let m = parseInt((differ / 1000 / 60) % 60);
      let s = parseInt((differ / 1000) % 60);

      this.min = m > 9 ? m : "0" + m;
      this.sec = s > 9 ? s : "0" + s;

      const that = this;
      if (m >= 0 && s >= 0) {
        if (m == 0 && s == 0) {
          return;
        }
        setTimeout(function () {
          that.countdown();
        }, 1000);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .jxfk,
  .ghdz {
    .el-radio {
      display: flex;
      align-items: center;
    }
  }
  .qpj {
    .el-textarea__inner {
      background-color: #f6f6f6;
      border: 0;
    }
  }
}

.order_details {
  .zfcg {
    display: flex;
    flex-direction: column;
    align-items: center;
    .code {
      width: 110px;
      height: 110px;
      im {
        width: 100%;
        height: 100%;
      }
    }

    p {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #585858;
      margin: 30px 0 50px;
    }
  }
  .crumbs {
    margin: 20px 0;
  }
  .cont {
    background: #ffffff;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
    .table {
      .good_info {
        display: flex;
        .l {
          width: 80px;
          height: 80px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .r {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20px;
          p {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
            text-align: left;
          }
          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #585858;
            text-align: left;
          }
        }
      }
    }
    .infoBoxF {
      margin-top: 30px;
      display: flex;

      .leftInfo {
        width: 50%;
        .item {
          display: flex;
          margin-bottom: 15px;
          .l {
            width: 110px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #585858;
          }
          .r {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
          }
          .red {
            color: #ff3333;
          }
          .qx {
            color: #999;
            font-size: 12px;
          }
          .address {
            p {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #222222;
              margin-bottom: 10px;
            }
            span {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
      }
      .rightInfo {
        width: 50%;

        .title {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #585858;
          line-height: 22px;
        }
        .item {
          display: flex;
          margin-top: 15px;
          .l {
            width: 65px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            text-align: right;
          }
          .r {
            margin-left: 25px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
            span {
              color: #ff2e2e;
            }
            .tm {
              width: 113px;
              height: 50px;
              background-color: #999;
              margin-top: 10px;
            }
            .code {
              width: 113px;
              height: 114px;
              margin-top: 10px;
              background-color: #999;
            }
          }
        }
      }
    }

    .btns {
      display: flex;
      justify-content: flex-end;

      div {
        width: 68px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        margin-left: 15px;
        cursor: pointer;
      }
      .hs {
        background: #f6f6f6;

        color: var(--themeColor);
      }
      .bs {
        background: #f6f6f6;

        color: #333;
      }
      .gl {
        background: var(--themeColor);

        color: #ffffff;
      }
    }
  }
  .playInfo {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
    .left,
    .right {
      width: 50%;
      .item {
        display: flex;
        .l {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #585858;
        }
        .r {
          margin-left: 70px;

          p {
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
            margin-bottom: 15px;
            span {
              // color: #0094f9;
              color: var(--themeColor);

              cursor: pointer;
            }
          }
          p:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .ghdz {
    .dz {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 20px;
      .radio {
        margin-left: 15px;
        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #222222;
          margin-bottom: 10px;
        }
        span {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
        }
      }
    }
  }
  .ddqx {
    span {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff5d5d;
    }
    .slec {
      margin-bottom: 30px;

      p {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;
        margin: 15px 0 10px;
      }
    }
  }
  .jxfk {
    .czText {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      margin-bottom: 20px;
      .el-radio {
        margin-bottom: 20px;
      }
    }
    .zf {
      width: 100%;
      .l {
        display: flex;
        align-items: center;
        .radio {
          display: flex;
          align-items: center;
        }
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        p {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #222222;
        }
      }
      .rr {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-left: 54px;
      }
    }
    .smzf {
      display: flex;
      flex-direction: column;
      align-items: center;
      .code {
        width: 186px;
        height: 186px;
        border: 1px solid #e0e0e0;
        im {
          width: 100%;
          height: 100%;
        }
      }

      p {
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #585858;
        margin: 20px 0 30px;
      }
    }
  }
  .qpj {
    .tj {
      p {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        margin: 20px 0 10px;
      }
      .upload {
        width: 74px;
        height: 74px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px dashed #dcdcdc;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 22px;
          height: 22px;
        }
        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
