wxapp_shuibei/pages/order_details/index.vue

<template>
  <view>
    <view class="order-details">
      <view class="header" v-if="orderInfo.shippingType === 1">
        <view class="picTxt" v-if="orderInfo.status != 6">
          <image
            v-if="!orderInfo.paid"
            src="@/static/images/shop/daifukuan@2x.png"
            mode=""
          ></image>
          <image
            v-else-if="orderInfo.status === 0 || orderInfo.status === 1"
            src="@/static/images/shop/daifahuo@2x.png"
            mode=""
          ></image>
          <image
            v-else-if="orderInfo.status === 3"
            src="@/static/images/shop/yiwancheng@2x.png"
            mode=""
          ></image>
          <view class="data">{{ curOrderStepTxt }}</view>
          <view class="state">{{ orderInfo.orderStatusMsg }}</view>
        </view>
        <view class="header-bot">
          <image src="@/static/images/shop/dingwei@2x.png" mode=""></image>
          <view class="header-bot-right">
            <view class="header-bot-address">{{ orderInfo.userAddress }}</view>
            <view class="header-bot-name">
              <text>{{ orderInfo.realName }}</text>
              <text>{{ orderInfo.userPhone }}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="!isGoodsReturn">
        <view
          v-if="orderInfo.shippingType == 2 && orderInfo.paid"
          class="writeOff borRadius14"
        >
          <view class="title">核销信息</view>
          <view class="grayBg">
            <view class="pictrue">
              <image :src="codeImg"></image>
            </view>
          </view>
          <view class="gear">
            <image src="@/static/images/writeOff.jpg"></image>
          </view>
          <view class="num">{{ orderInfo.verifyCode }}</view>
          <view class="rules" v-if="orderInfo.systemStore">
            <view class="item">
              <view class="rulesTitle acea-row row-middle">
                <text class="iconfont icon-shijian"></text>核销时间
              </view>
              <view class="info">
                每日：<text class="time">{{
                  orderInfo.systemStore.dayTime.replace(",", "-")
                }}</text>
              </view>
            </view>
            <view class="item">
              <view class="rulesTitle acea-row row-middle">
                <text class="iconfont icon-shuoming1"></text>使用说明
              </view>
              <view class="info">可将二维码出示给店员扫描或提供数字核销码</view>
            </view>
          </view>
        </view>
        <view v-if="orderInfo.shippingType === 1" class=""></view>
        <view v-else class="address" style="margin-top: 15rpx">
          <view class="name" @tap="makePhone"
            >{{ orderInfo.systemStore ? orderInfo.systemStore.name : ""
            }}<text class="phone">{{
              orderInfo.systemStore ? orderInfo.systemStore.phone : ""
            }}</text
            ><text class="iconfont icon-tonghua font-color"></text
          ></view>
          <view>{{
            orderInfo.systemStore ? orderInfo.systemStore.detailedAddress : ""
          }}</view>
        </view>
      </view>

      <view class="wrapper">
        <orderGoods
          :mallType="orderInfo.mallType"
          :evaluate="evaluate"
          :productType="orderInfo.type"
          :orderId="order_id"
          :ids="id"
          :uniId="uniId"
          :cartInfo="cartInfo"
          :sbMerchant="orderInfo.sbMerchant"
        ></orderGoods>
        <view
          class="wrapper-return"
          v-if="
            orderInfo.paid === true &&
            orderInfo.type !== 1 &&
            orderInfo.mallType !== 1 &&
            type === 'normal'
          "
        >
          <view v-if="orderInfo.status == 3">
            <view
              hover-class="none"
              @click="changeProduct"
              class="cancel"
              style="margin-right: 10rpx"
              v-if="
                orderInfo.exchangeStatus === 0 &&
                orderInfo.refundStatus === 0 &&
                isGoodsReturn == false
              "
            >
              申请换货
            </view>
            <navigator
              hover-class="none"
              :url="
                '/pages/users/goods_change/index?orderId=' + orderInfo.orderId
              "
              class="cancel"
              style="margin-right: 10rpx"
              v-if="
                orderInfo.exchangeStatus === 2 &&
                orderInfo.refundStatus === 0 &&
                isGoodsReturn == false
              "
            >
              退货信息填写
            </navigator>
            <view
              hover-class="none"
              class="cancel"
              style="margin-right: 10rpx"
              v-if="
                orderInfo.exchangeStatus === 4 &&
                orderInfo.refundStatus === 0 &&
                isGoodsReturn == false
              "
            >
              换货中
            </view>
            <view
              hover-class="none"
              class="cancel"
              style="margin-right: 10rpx"
              v-if="
                orderInfo.exchangeStatus === 1 &&
                orderInfo.refundStatus === 0 &&
                isGoodsReturn == false
              "
            >
              换货申请中
            </view>
          </view>

          <navigator
            hover-class="none"
            :url="
              '/pages/users/goods_return/index?orderId=' + orderInfo.orderId
            "
            class="cancel"
            v-if="
              orderInfo.refundStatus === 0 &&
              isGoodsReturn == false &&
              orderInfo.exchangeStatus === 0
            "
          >
            申请退款
          </navigator>
        </view>
        <view class="wrapper-list">
          <view class="item">
            <view class="">商品总价</view>
            <view class="txt">￥{{ orderInfo.proTotalPrice }}</view>
          </view>
          <view class="item" v-if="orderInfo.payPostage > 0">
            <view class="">运费</view>
            <view class="txt">￥{{ orderInfo.payPostage }}</view>
          </view>
          <view
            class="item"
            v-if="orderInfo.payPostage > 0 && orderInfo?.additionalAmount"
          >
            <view class="">附加费</view>
            <view class="txt">￥{{ orderInfo.additionalAmount }}</view>
          </view>
          <view class="item" v-if="orderInfo.mallType === 0">
            <view class="">会员折扣</view>
            <view class="red">-￥{{ orderInfo.vipLevelDis }}</view>
          </view>
          <view class="item">
            <view class="">实付款</view>
            <view class="txt">
              {{
                orderInfo.mallType === 0
                  ? `￥${orderInfo.payPrice}`
                  : `${Number(orderInfo.proTotalPrice)}贝币`
              }}
            </view>
          </view>
        </view>
      </view>
      <view class="wrapper">
        <view class="wrapper-title">订单信息</view>
        <view class="item">
          <view>订单编号</view>
          <view class="conter acea-row row-middle row-right"
            >{{ orderInfo.orderId }}
            <!-- #ifndef H5 -->
            <text class="copy" @tap="copy">复制</text>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <text class="copy copy-data" @click="setOrderId">复制</text>
            <!-- #endif -->
          </view>
        </view>
        <view class="item">
          <view>下单时间</view>
          <view class="conter">{{ orderInfo.createTime || 0 }}</view>
        </view>
        <view class="item">
          <view>支付状态</view>
          <view class="conter" v-if="orderInfo.paid">已支付</view>
          <view class="conter" v-else>未支付</view>
        </view>
        <view class="item">
          <view>支付方式</view>
          <view class="conter" v-if="orderInfo.mallType === 0">{{
            orderInfo.payTypeStr
          }}</view>
          <view class="conter" v-else>贝币</view>
        </view>
        <view class="item" v-if="orderInfo.mark">
          <view>买家留言</view>
          <view class="conter">{{ orderInfo.mark }}</view>
        </view>
      </view>

      <view class="">
        <view class="nav refund" v-if="orderInfo.refundStatus > 0">
          <view class="title">
            <image src="@/static/images/shuoming.png" mode=""></image>
            {{ getRefundStatus() }}
          </view>
          <view class="con pad30">{{ getRefundReason() }}</view>
        </view>

        <!-- 退款订单详情 "-->
        <view v-if="isGoodsReturn" class="wrapper">
          <view class="wrapper-title">退款信息</view>
          <view class="item">
            <view>收货人</view>
            <view class="conter">{{ orderInfo.realName }}</view>
          </view>
          <view class="item">
            <view>联系电话</view>
            <view class="conter">{{ orderInfo.userPhone }}</view>
          </view>
          <view class="item">
            <view>收货地址</view>
            <view class="conter">{{ orderInfo.userAddress }}</view>
          </view>
          <view class="item">
            <view>退款快递单号</view>
            <view class="conter">{{ orderInfo.refundExpressNum }}</view>
          </view>
        </view>
        <view v-if="orderInfo.status > 0">
          <view class="wrapper" v-if="orderInfo.deliveryType == 'express'">
            <view class="wrapper-title">物流信息</view>
            <view class="item">
              <view>配送方式</view>
              <view class="conter">发货</view>
            </view>
            <view class="item">
              <view>快递公司</view>
              <view class="conter">{{ orderInfo.deliveryName || "" }}</view>
            </view>
            <view class="item">
              <view>快递号</view>
              <view class="conter">{{ orderInfo.deliveryId || "" }}</view>
            </view>
          </view>
          <view class="wrapper" v-else-if="orderInfo.deliveryType == 'send'">
            <view class="item acea-row row-between">
              <view>配送方式：</view>
              <view class="conter">送货</view>
            </view>
            <view class="item acea-row row-between">
              <view>配送人姓名：</view>
              <view class="conter">{{ orderInfo.deliveryName || "" }}</view>
            </view>
            <view class="item acea-row row-between">
              <view>联系电话：</view>
              <view class="conter acea-row row-middle row-right"
                >{{ orderInfo.deliveryId || ""
                }}<text class="copy" @tap="goTel">拨打</text></view
              >
            </view>
          </view>
          <view
            class="wrapper borRadius14"
            v-else-if="orderInfo.deliveryType == 'fictitious'"
          >
            <view class="item acea-row row-between">
              <view>虚拟发货：</view>
              <view class="conter">已发货，请注意查收</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- && orderInfo.status != 0 -->
    <template
      v-if="
        (isGoodsReturn == false && orderInfo.status != 0) ||
        (orderInfo.status == 0 && !orderInfo.paid)
      "
    >
      <view class="kong"></view>
      <view class="footer" v-if="orderInfo.status != 6">
        <view class="footer-box">
          <view class="qs-btn" v-if="!orderInfo.paid" @click.stop="cancelOrder">
            <image src="@/static/images/shop/closeOrder@2x.png" mode=""></image>
            <view class="">取消订单</view>
          </view>
          <view
            class="buyPlay"
            v-if="!orderInfo.paid"
            @tap="pay_open(orderInfo.orderId)"
          >
            <view class="buyPlay-left">
              <view class="buyPlay-left-top">
                <text>合计:</text>
                <text>{{
                  orderInfo.mallType === 0
                    ? `￥${orderInfo.payPrice}`
                    : `${Number(orderInfo.proTotalPrice)}贝币`
                }}</text>
              </view>
              <view class="buyPlay-left-bot" v-if="orderInfo.mallType === 0"
                >共减￥{{ orderInfo.vipLevelDis }}</view
              >
            </view>
            <view class="buyPlay-btn">立即付款</view>
          </view>
          <view class="qs-btn" v-if="orderInfo.status == 3" @tap="delOrder">
            <image src="@/static/images/shop/delorder@2x.png" mode=""></image>
            <view class="">删除订单</view>
          </view>
          <navigator
            class="wuliu align-center"
            v-if="orderInfo.deliveryType == 'express' && orderInfo.status > 0"
            hover-class="none"
            :url="`/pages/users/goods_logistics/index?orderId=${orderInfo.orderId}`"
            >查看物流
          </navigator>
          <view
            class="wuliu align-center buy"
            v-if="orderInfo.status == 3 && orderInfo.type !== 1"
            @click="goOrderConfirm"
            >再次购买
          </view>
          <view
            class="align-center shouhuo"
            v-if="orderInfo.status == 1"
            @tap="confirmOrder"
            style="width: 100%"
            >确认收货</view
          >
        </view>
      </view>
    </template>

    <payment
      :payMode="payMode"
      :showPopup="showPopup"
      @payComplete="payComplete"
      @close="payClose"
      :order_id="pay_order_id"
      :totalPrice="totalPrice"
      :mallType="orderInfo.mallType"
    ></payment>
    <WechatPayment ref="wechatPaymentRef" />

    <!--    申请换货弹窗-->
    <up-popup
      :show="changeProductShow"
      @close="changeProductShow = false"
      closeable
    >
      <view class="changeProductReasonPopup">
        <view class="title">理由</view>
        <up-textarea
          class="text-area"
          v-model="changeProductReason"
          placeholder="请输入换货理由"
        ></up-textarea>
        <view class="btnView">
          <button class="sure" @click="changeProductSure">确定</button>
          <button class="cancel" @click="changeProductShow = false">
            取消
          </button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useAppStore } from "@/stores/app.js";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import {
  getOrderDetail,
  orderTake,
  orderDel,
  orderCancel,
  qrcodeApi,
  applyExchange,
} from "@/api/order.js";
import { openOrderRefundSubscribe } from "@/utils/SubscribeMessage.js";
import payment from "@/components/payment";
import WechatPayment from "@/components/payment/WechatPayment.vue";
import orderGoods from "@/components/orderGoods";
import { toLogin } from "@/libs/login.js";
import { useToast } from "@/hooks/useToast";
import { getPreOrder } from "@/libs/order";

const appStore = useAppStore();
const { Toast } = useToast();

const codeImg = ref("");
const order_id = ref("");
const evaluate = ref(0);
const cartInfo = ref([]);
const orderInfo = reactive({
  systemStore: {},
  pstatus: {},
});
const system_store = ref({});
const isGoodsReturn = ref(false);
const status = ref({});
const isClose = ref(false);
const payMode = ref([
  {
    name: "微信支付",
    icon: "icon-wechat",
    value: "weixin",
    title: "微信快捷支付",
    payChannel: "routine",
    number: 0,
  },
  //   {
  //     name: "余额支付",
  //     icon: "icon-balance",
  //     value: "yue",
  //     title: "可用余额:",
  //     payChannel: "yue",
  //     number: 0,
  //   },
]);
const showPopup = ref(false);
const pay_order_id = ref("");
const totalPrice = ref("0");
const id = ref(0);
const uniId = ref("");
const type = ref("normal");
const wechatPaymentRef = ref(null);

const WX_PAY_STATUS = {
  SUCCESS: "支付成功",
  FAIL: "支付失败",
  CANCEL: "用户取消支付",
};

const changeProductShow = ref(false);
const changeProductReason = ref("");

function payComplete() {
  showPopup.value = false;
  pay_order_id.value = "";
  getOrderInfo();
}

function openSubcribe(page) {
  uni.showLoading({
    title: "正在加载",
  });
  openOrderRefundSubscribe()
    .then(() => {
      uni.hideLoading();
      uni.navigateTo({
        url: page,
      });
    })
    .catch(() => {
      uni.hideLoading();
    });
}

function makePhone() {
  uni.makePhoneCall({
    phoneNumber: system_store.value.phone,
  });
}

function payClose() {
  showPopup.value = false;
}

function pay_open() {
  const orderNo = orderInfo.orderId;
  const price = orderInfo.payPrice;
  const goPages = "/pages/order_pay_status/index?order_id=" + orderNo;

  uni.showActionSheet({
    itemList: ["微信支付"],
    success: async (res) => {
      if (res.tapIndex === 0) {
        // 微信支付
        uni.showLoading({ title: "订单支付中" });
        try {
          await wechatPaymentRef.value.createUniPay({
            amount: Number(price) * 100,
            description: `商品（￥${price}）`,
            openId: appStore.$userInfo.openId,
            orderNo: orderNo,
            orderPrefix: "SHOP",
            onUniPaySuccess: async () => {
              try {
                return Toast(
                  { title: "支付成功", icon: "success" },
                  { tab: 4, url: goPages }
                );
              } catch (err) {
                console.error("支付失败：", err);
                uni.showToast({ title: "支付失败，请重试", icon: "none" });
              }
            },
            onUniPayCancel: () => {
              uni.showToast({ title: "用户取消支付", icon: "none" });
            },
            onUniPayFail: (err) => {
              uni.showToast({ title: "支付失败，请重试", icon: "none" });
            },
          });
          uni.hideLoading();
        } catch (wxErr) {
          uni.hideLoading();
          const errMsg = wxErr?.errMsg || "";
          if (errMsg.includes("cancel") || errMsg.includes("取消")) {
            return Toast(
              { title: WX_PAY_STATUS.CANCEL },
              { tab: 5, url: `${goPages}&msg=${WX_PAY_STATUS.CANCEL}` }
            );
          }
          return Toast(
            { title: WX_PAY_STATUS.FAIL },
            { tab: 5, url: `${goPages}&msg=${errMsg || WX_PAY_STATUS.FAIL}` }
          );
        }
      } else if (res.tapIndex === 1) {
        // 余额支付，沿用原有弹窗
        showPopup.value = true;
        pay_order_id.value = orderNo;
        totalPrice.value = price;
      }
    },
  });
}

function getRefundStatus() {
  const statusMap = {
    1: "商家审核中",
    2: "商家已退款",
    3: "商家退款中",
  };
  return orderInfo?.refundStatus ? statusMap[orderInfo.refundStatus] : "";
}

function getRefundReason() {
  if (orderInfo.refundStatus == 1) {
    return "您已成功发起退款申请，请耐心等待商家处理；退款前请与商家协商一致，有助于更好的处理售后问题";
  } else if (orderInfo.refundStatus == 2) {
    return "退款已成功受理，如商家已寄出商品请尽快退回；感谢您的支持";
  } else if (orderInfo?.refundReason) {
    return "拒绝原因：" + orderInfo?.refundReason;
  }
}

// 订单步骤配置
const orderSteps = ref([
  {
    title: "待付款",
  },
  {
    title: "待发货",
  },
  {
    title: "待收货",
  },
  {
    title: "已完成",
  },
]);

// 当前的订单状态
const curOrderStep = computed(() => {
  let step = 0;
  if (!orderInfo.paid) {
    step = 0; // 待付款
  } else if (orderInfo.status === 0) {
    step = 1; // 待发货
  } else if (orderInfo.status === 1) {
    step = 2; // 待收货
  } else if (orderInfo.status === 2 || orderInfo.status === 3) {
    step = 3; // 已完成
  }
  return step;
});

// 当前的订单状态
const curOrderStepTxt = computed(() => {
  let step = "";
  if (!orderInfo.paid) {
    step = "待付款"; // 待付款
  } else if (orderInfo.status === 0) {
    step = "待发货"; // 待发货
  } else if (orderInfo.status === 1) {
    step = "待收货"; // 待收货
  } else if (orderInfo.status === 2 || orderInfo.status === 3) {
    step = "已完成"; // 已完成
  }
  return step;
});

function getOrderInfo() {
  uni.showLoading({
    title: "正在加载中",
  });
  getOrderDetail(order_id.value)
    .then((res) => {
      uni.hideLoading();
      Object.assign(orderInfo, res.data);
      evaluate.value = res.data.status == 2 ? 2 : 0;
      system_store.value = res.data.systemStore;
      id.value = res.data.id;
      cartInfo.value = res.data.orderInfoList;
      if (res.data.refundStatus != 0) isGoodsReturn.value = true;
      if (orderInfo.shippingType == 2 && orderInfo.paid)
        markCode(res.data.verifyCode);
      if (orderInfo.refundStatus > 0) {
        // uni.setNavigationBarColor({
        //   frontColor: "#ffffff",
        //   backgroundColor: "#666666",
        // });
      }
    })
    .catch((err) => {
      uni.hideLoading();
      Toast(
        {
          title: err,
        },
        "/pages/users/order_list/index"
      );
    });
}

function markCode(text) {
  qrcodeApi({
    height: "145",
    text: text,
    width: "145",
  }).then((res) => {
    codeImg.value = res.data.code;
  });
}
// #ifndef H5
function copy() {
  uni.setClipboardData({
    data: orderInfo.orderId,
  });
}
// #endif
function goTel() {
  uni.makePhoneCall({
    phoneNumber: orderInfo.deliveryId,
  });
}

function getOrderStatus() {
  let _orderInfo = orderInfo || {},
    _status = _orderInfo.pstatus || {
      type: 0,
    },
    _statusObj = {};
  let typeVal = parseInt(_status.type),
    delivery_type = _orderInfo.deliveryType,
    seckill_id = _orderInfo.seckillId ? parseInt(_orderInfo.seckillId) : 0,
    bargain_id = _orderInfo.bargainId ? parseInt(_orderInfo.bargainId) : 0,
    combination_id = _orderInfo.combinationId
      ? parseInt(_orderInfo.combinationId)
      : 0;
  _statusObj = {
    type: typeVal == 9 ? -9 : typeVal,
    class_status: 0,
  };
  if (typeVal == 1 && combination_id > 0) _statusObj.class_status = 1;
  if (typeVal == 2 && delivery_type == "express") _statusObj.class_status = 2;
  if (typeVal == 2) _statusObj.class_status = 3;
  if (typeVal == 4 || typeVal == 0) _statusObj.class_status = 4;
  if (
    !seckill_id &&
    !bargain_id &&
    !combination_id &&
    (typeVal == 3 || typeVal == 4)
  )
    _statusObj.class_status = 5;
  status.value = _statusObj;
}

function goJoinPink() {
  uni.navigateTo({
    url:
      "/pages/activity/goods_combination_status/index?id=" + orderInfo.pinkId,
  });
}

function goOrderConfirm() {
  const params = {
    mallType: orderInfo.mallType,
    preOrderType: "again",
    orderDetails: [
      {
        orderNo: order_id.value,
      },
    ],
  };
  getPreOrder(params);
}

function confirmOrder() {
  uni.showModal({
    title: "确认收货",
    content: "为保障权益，请收到货确认无误后，再确认收货",
    success: function (res) {
      if (res.confirm) {
        orderTake(id.value)
          .then(() => {
            Toast(
              {
                title: "操作成功",
                icon: "success",
              },
              function () {
                getOrderInfo();
              }
            );
          })
          .catch((err) => {
            Toast({
              title: err,
            });
          });
      }
    },
  });
}

function delOrder() {
  orderDel(id.value)
    .then(() => {
      Toast(
        {
          title: "删除成功",
          icon: "success",
        },
        {
          tab: 3,
          url: 1,
        }
      );
    })
    .catch((err) => {
      Toast({
        title: err,
      });
    });
}

function cancelOrder() {
  uni.showModal({
    title: "提示",
    content: "确认取消该订单?",
    success: function (res) {
      if (res.confirm) {
        orderCancel(orderInfo.id)
          .then(() => {
            Toast({
              title: "取消成功",
            });
            uni.navigateTo({
              url: "/pages/order_list/index",
            });
          })
          .catch((err) => {
            Toast({
              title: err,
            });
            getOrderInfo();
          });
      }
    },
  });
}

// 生命周期
onLoad((options) => {
  type.value =
    options.type == undefined || options.type == null ? "normal" : options.type;
  if (!options.order_id && !options.uniId) {
    Toast(
      {
        title: "缺少参数",
      },
      {
        tab: 3,
        url: 1,
      }
    );
    return;
  }
  order_id.value = options.order_id;
});
onShow(() => {
  if (appStore.isLogin) {
    getOrderInfo();
    payMode.value[0].number = appStore.$userInfo.nowMoney;
    payMode.value = [...payMode.value];
  } else {
    toLogin();
  }
});
onHide(() => {
  isClose.value = true;
});

const setOrderId = () => {
  uni.setClipboardData({
    data: orderInfo.orderId,
    success: function () {
      Toast({
        title: "复制成功",
      });
    },
  });
};
// 申请换货
const changeProduct = () => {
  changeProductShow.value = true;
  changeProductReason.value = "";
};
// 换货申请确认
const changeProductSure = async () => {
  if (!changeProductReason.value) {
    uni.showToast({ title: "请输入换货理由", icon: "none" });
    return;
  }
  let obj = {
    text: changeProductReason.value,
    uni: orderInfo.orderId,
  };
  const res = await applyExchange(obj);
  if (res.code == 200) {
    changeProductShow.value = false;
    getOrderInfo();
    payMode.value[0].number = appStore.$userInfo.nowMoney;
    payMode.value = [...payMode.value];
  }
};
</script>
<style>
page {
  background: #f9f7f0;
}
</style>
<style scoped lang="scss">
.order-details {
  padding: 16rpx;

  .header {
    padding: 16rpx;
    border-radius: 16rpx;
    background: #ffffff;

    .picTxt {
      margin-bottom: 16rpx;
      display: flex;
      font-size: 28rpx;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      .data {
        margin: 0 8rpx;
        color: #f8c008;
        font-weight: bold;
      }
    }

    .header-bot {
      display: flex;
      color: #333333;
      font-size: 28rpx;

      .header-bot-right {
        flex: 1;
      }

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
      }

      .header-bot-address {
        font-weight: bold;
      }

      .header-bot-name {
        text {
          &:first-child {
            margin-right: 32rpx;
          }
        }
      }
    }
  }

  .nav {
    background-color: #fff;
    font-size: 26rpx;
    color: #282828;
    padding: 27rpx 0;
    width: 100%;
    border-radius: 14rpx;
  }

  .address {
    font-size: 26rpx;
    color: #868686;
    background-color: #fff;
    margin-top: 15rpx;
    padding: 30rpx 24rpx;

    .name {
      font-size: 30rpx;
      color: #282828;
      margin-bottom: 15rpx;

      .phone {
        margin-left: 40rpx;
      }

      .iconfont {
        font-size: 34rpx;
        margin-left: 10rpx;
      }
    }
  }

  .line {
    width: 100%;
    height: 3rpx;

    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .wrapper {
    background-color: #ffffff;
    margin-top: 16rpx;
    padding: 16rpx;
    border-radius: 16rpx;
    .wrapper-return {
      display: flex;
      margin-top: 16rpx;
      justify-content: flex-end;
      .cancel {
        color: #333333;
        width: 190rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        background: #f1f3f8;
        border-radius: 8rpx;
      }
    }
    .wrapper-title {
      color: #333333;
      font-size: 32rpx;
      font-weight: bold;
    }

    .item {
      font-size: 28rpx;
      color: #666666;
      display: flex;
      margin-top: 16rpx;
      justify-content: space-between;

      view {
        &:last-child {
          color: #333333;
        }

        &.red {
          color: #fd5f3c;
          font-weight: bold;
        }

        &.txt {
          font-weight: bold;
        }
      }

      .conter {
        flex: 1;
        text-align: right;
        margin-left: 16rpx;
        .copy {
          font-size: 28rpx;
          color: #f8c008;
          font-weight: bold;
          margin-left: 8rpx;
          padding-left: 8rpx;
          border-left: 2rpx solid #d8d8d8;
        }
      }
    }

    .actualPay {
      border-top: 1rpx solid #eee;
      margin-top: 30rpx;
      padding-top: 30rpx;

      .money {
        font-weight: bold;
        font-size: 30rpx;
      }
    }
  }

  .writeOff {
    background-color: #fff;
    margin-top: 15rpx;
    padding-bottom: 50rpx;

    .title {
      font-size: 30rpx;
      color: #282828;
      height: 87rpx;
      border-bottom: 1px solid #f0f0f0;
      padding: 0 24rpx;
      line-height: 87rpx;
    }

    .grayBg {
      background-color: #f2f5f7;
      width: 590rpx;
      height: 384rpx;
      border-radius: 20rpx 20rpx 0 0;
      margin: 50rpx auto 0 auto;
      padding-top: 55rpx;

      .pictrue {
        width: 290rpx;
        height: 290rpx;
        margin: 0 auto;

        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

    .gear {
      width: 590rpx;
      height: 30rpx;
      margin: 0 auto;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .num {
      background-color: #f0c34c;
      width: 590rpx;
      height: 84rpx;
      color: #282828;
      font-size: 48rpx;
      margin: 0 auto;
      border-radius: 0 0 20rpx 20rpx;
      text-align: center;
      padding-top: 4rpx;
    }

    .rules {
      margin: 46rpx 30rpx 0 30rpx;
      border-top: 1px solid #f0f0f0;
      padding-top: 10rpx;

      .item {
        margin-top: 20rpx;

        .rulesTitle {
          font-size: 28rpx;
          color: #282828;

          .iconfont {
            font-size: 30rpx;
            color: #333;
            margin-right: 8rpx;
            margin-top: 5rpx;
          }
        }

        .info {
          font-size: 28rpx;
          color: #999;
          margin-top: 7rpx;

          .time {
            margin-left: 20rpx;
          }
        }
      }
    }
  }

  .map {
    height: 86rpx;
    font-size: 30rpx;
    color: #282828;
    line-height: 86rpx;
    border-bottom: 1px solid #f0f0f0;
    margin-top: 15rpx;
    background-color: #fff;
    padding: 0 24rpx;

    .place {
      font-size: 26rpx;
      width: 176rpx;
      height: 50rpx;
      border-radius: 25rpx;
      line-height: 50rpx;
      text-align: center;

      .iconfont {
        font-size: 27rpx;
        height: 27rpx;
        line-height: 27rpx;
        margin: 2rpx 3rpx 0 0;
      }
    }
  }

  .refund {
    padding: 0 !important;
    margin-top: 15rpx;
    background-color: #fff;

    .title {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333;
      height: 86rpx;
      border-bottom: 1px solid #f5f5f5;
      font-weight: 400;
      padding: 0 24rpx;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }

    .con {
      font-size: 25rpx;
      color: #666666;
      padding: 30rpx 24rpx;
    }
  }
}

.goodCall {
  color: $theme-color;
  text-align: center;
  width: 100%;
  height: 86rpx;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 30rpx;
  line-height: 86rpx;
  background: #fff;

  .icon-kefu {
    font-size: 36rpx;
    margin-right: 15rpx;
  }

  /* #ifdef MP */
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86rpx;
    font-size: 30rpx;
    color: $theme-color;
  }

  /* #endif */
}

.kong {
  height: calc(132rpx + constant(safe-area-inset-bottom));
  height: calc(132rpx + env(safe-area-inset-bottom));
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 9;
  background: #ffffff;
  box-shadow: inset 0rpx 1rpx 0rpx 0rpx #f1f3f8;

  .footer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22rpx 32rpx;
    padding: 22rpx 32rpx;
  }

  .qs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    view {
      color: #333333;
      font-size: 20rpx;
      line-height: 36rpx;
    }
  }

  .buyPlay {
    display: flex;
    align-items: center;

    .buyPlay-left {
      text-align: right;

      .buyPlay-left-top {
        text {
          color: #333333;
          font-size: 24rpx;
          font-weight: bold;

          &:last-child {
            color: #fd5f3c;
          }
        }
      }

      .buyPlay-left-bot {
        color: #fd5f3c;
        font-size: 24rpx;
        line-height: 40rpx;
      }
    }

    .buyPlay-btn {
      color: #333333;
      width: 224rpx;
      height: 88rpx;
      display: flex;
      font-size: 32rpx;
      font-weight: bold;
      align-items: center;
      justify-content: center;
      background: #f8c008;
      border-radius: 16rpx;
      margin-left: 16rpx;
    }
  }
  .wuliu {
    width: 252rpx;

    background: rgba(248, 192, 8, 0.1);
  }
  .shouhuo {
    width: 418rpx;

    background: #f8c008;
  }
  .align-center {
    height: 88rpx;
    border-radius: 16rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .buy {
    background: #f8c008;
  }
}
.changeProductReasonPopup {
  padding: 20rpx;
  box-sizing: border-box;
  .title {
    font-size: 28rpx;
    color: #333;
    text-align: center;
    padding: 10rpx 20rpx;
  }
  .text-area {
    border: 2rpx solid #dedede;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-top: 20rpx;
  }
  .btnView {
    display: flex;
    width: 100%;
    gap: 20rpx;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    .sure {
      background: #f8c008;
      color: #fff;
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
    .cancel {
      background-color: #f1f3f8;
      color: #333333;
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
}
</style>