wxapp_shuibei/pages/order_details/index.vue

<template>
  <view>
    <view class="order-details">
      <!-- 给header上与data上加on为退款订单-->
      <view class="header" :class="isGoodsReturn ? 'on' : ''">
        <view class="picTxt acea-row row-middle">
          <!-- <view class="pictrue" v-if="isGoodsReturn == false">
            <image :src="orderInfo.statusPic"></image>
          </view> -->
          <view class="data" :class="isGoodsReturn ? 'on' : ''">
            <view class="state">{{ orderInfo.orderStatusMsg }}</view>
            <view>{{ orderInfo.createTime }}</view>
          </view>
        </view>
      </view>

      <view v-if="!isGoodsReturn" class="pad30">
        <view class="nav">
          <uni-steps
            :active="curOrderStep"
            :options="orderSteps"
            activeColor="#e9c279"
          ></uni-steps>
        </view>
        <view
          v-if="orderInfo.shippingType == 2 && orderInfo.paid"
          class="writeOff borRadius14"
        >
          <view class="title">核销信息</view>
          <view class="grayBg">
            <view class="pictrue">
              <!-- <div class="qrcode" ref="qrcode"></div> -->
              <!-- <canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}100%`, height: `${qrcodeSize}100%`}"/> -->
              <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="address borRadius14">
          <view class="name"
            >{{ orderInfo.realName
            }}<text class="phone">{{ orderInfo.userPhone }}</text></view
          >
          <view>{{ orderInfo.userAddress }}</view>
        </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>

        <orderGoods
          :mallType="orderInfo.mallType"
          :evaluate="evaluate"
          :productType="orderInfo.type"
          :orderId="order_id"
          :ids="id"
          :uniId="uniId"
          :cartInfo="cartInfo"
          :sbMerchant="sbMerchant"
          :jump="true"
        ></orderGoods>
        <!-- <div class="goodCall borRadius14" @click="kefuClick">
          <span class="iconfont icon-kefu"></span><span>联系客服</span>
        </div> -->
      </view>

      <view class="pad30">
        <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 class="wrapper borRadius14">
          <view class="item acea-row row-between">
            <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 acea-row row-between">
            <view>下单时间：</view>
            <view class="conter">{{ orderInfo.createTime || 0 }}</view>
          </view>
          <view class="item acea-row row-between">
            <view>支付状态：</view>
            <view class="conter" v-if="orderInfo.paid">已支付</view>
            <view class="conter" v-else>未支付</view>
          </view>
          <view class="item acea-row row-between">
            <view>支付方式：</view>
            <view class="conter" v-if="orderInfo.mallType === 0">{{
              orderInfo.payTypeStr
            }}</view>
            <view class="conter" v-else>贝币</view>
          </view>
          <view class="item acea-row row-between" v-if="orderInfo.mark">
            <view>买家留言：</view>
            <view class="conter">{{ orderInfo.mark }}</view>
          </view>
        </view>
        <!-- 退款订单详情 "-->
        <view v-if="isGoodsReturn" class="wrapper borRadius14">
          <view class="item acea-row row-between">
            <view>收货人：</view>
            <view class="conter">{{ orderInfo.realName }}</view>
          </view>
          <view class="item acea-row row-between">
            <view>联系电话：</view>
            <view class="conter">{{ orderInfo.userPhone }}</view>
          </view>
          <view class="item acea-row row-between">
            <view>收货地址：</view>
            <view class="conter">{{ orderInfo.userAddress }}</view>
          </view>
          <view class="item acea-row row-between">
            <view>退款快递单号：</view>
            <view class="conter">{{ orderInfo.refundExpressNum }}</view>
          </view>
        </view>
        <view v-if="orderInfo.status > 0">
          <view
            class="wrapper borRadius14"
            v-if="orderInfo.deliveryType == 'express'"
          >
            <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">{{ orderInfo.deliveryId || "" }}</view>
            </view>
          </view>
          <view
            class="wrapper borRadius14"
            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 class="wrapper borRadius14">
          <view class="item acea-row row-between">
            <view>商品总价：</view>
            <view class="conter" v-if="orderInfo.mallType === 0">
              ￥{{ orderInfo.proTotalPrice }}
            </view>
            <view class="conter" v-else>{{ orderInfo.proTotalPrice }}</view>
          </view>
          <view
            class="item acea-row row-between"
            v-if="orderInfo.payPostage > 0"
          >
            <view>运费：</view>
            <view class="conter">￥{{ orderInfo.payPostage }}</view>
          </view>
          <view
            class="item acea-row row-between"
            v-if="orderInfo.payPostage > 0 && orderInfo?.additionalAmount"
          >
            <view>附加费：</view>
            <view class="conter">￥{{ orderInfo.additionalAmount }}</view>
          </view>
          <!-- <view class="item acea-row row-between" v-if="orderInfo.couponId">
            <view>优惠券抵扣：</view>
            <view class="conter">-￥{{ orderInfo.couponPrice }}</view>
          </view> -->
          <view
            class="item acea-row row-between"
            v-if="orderInfo.mallType === 0"
          >
            <view>会员折扣：</view>
            <view class="conter">-￥{{ orderInfo.vipLevelDis }}</view>
          </view>
          <view
            v-if="orderInfo.mallType === 0"
            class="actualPay acea-row row-right"
          >
            实付款：<text class="money font-color">
              ￥{{ orderInfo.payPrice }}
            </text>
          </view>
          <view v-else class="actualPay acea-row row-right"
            >实付款：<text class="money font-color">
              {{ Number(orderInfo.proTotalPrice) }}贝币
            </text>
          </view>
        </view>
        <view style="height: 120rpx"></view>
        <view
          class="footer acea-row row-right row-middle"
          v-if="isGoodsReturn == false"
        >
          <view class="qs-btn" v-if="!orderInfo.paid" @click.stop="cancelOrder"
            >取消订单</view
          >
          <view
            class="bnt bg-color"
            v-if="!orderInfo.paid"
            @tap="pay_open(orderInfo.orderId)"
            >立即付款</view
          >

          <navigator
            hover-class="none"
            :url="
              '/pages/users/goods_return/index?orderId=' + orderInfo.orderId
            "
            class="bnt cancel"
            v-else-if="
              orderInfo.paid === true &&
              orderInfo.refundStatus === 0 &&
              orderInfo.type !== 1 &&
              orderInfo.mallType !== 1 &&
              type === 'normal'
            "
          >
            申请退款
          </navigator>
          <navigator
            class="bnt cancel"
            v-if="orderInfo.deliveryType == 'express' && orderInfo.status > 0"
            hover-class="none"
            :url="`/pages/users/goods_logistics/index?orderId=${orderInfo.orderId}`"
            >查看物流
          </navigator>
          <view
            class="bnt bg-color"
            v-if="orderInfo.status == 1"
            @tap="confirmOrder"
            >确认收货</view
          >
          <view class="bnt cancel" v-if="orderInfo.status == 3" @tap="delOrder"
            >删除订单</view
          >
          <view
            class="bnt bg-color"
            v-if="orderInfo.status == 3 && orderInfo.type !== 1"
            @tap="goOrderConfirm"
            >再次购买</view
          >
        </view>
      </view>
    </view>
    <payment
      :payMode="payMode"
      :showPopup="showPopup"
      @payComplete="payComplete"
      @close="payClose"
      :order_id="pay_order_id"
      :totalPrice="totalPrice"
      :mallType="orderInfo.mallType"
    ></payment>
  </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,
} from "@/api/order.js";
import { openOrderRefundSubscribe } from "@/utils/SubscribeMessage.js";
import payment from "@/components/payment";
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 sbMerchant = 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-zhifubao",
    value: "alipay",
    title: "支付宝快捷支付",
    payChannel: "appAliPay",
  },
  {
    name: "微信支付",
    icon: "icon-wechat",
    value: "weixin",
    title: "微信快捷支付",
    payChannel: "weixinApp",
  },
  {
    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");

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() {
  showPopup.value = true;
  pay_order_id.value = orderInfo.orderId;
  totalPrice.value = orderInfo.payPrice;
}

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;
});
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;
      sbMerchant.value = res.data.sbMerchant;
      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[2].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: "复制成功" });
    },
  });
};
</script>

<style scoped lang="scss">
.order-details {
  .header {
    height: 250rpx;
    padding: 0 30rpx;
    background-color: $header-color;

    &.on {
      background-color: $header-color !important;
    }

    .picTxt {
      height: 150rpx;

      .pictrue {
        width: 110rpx;
        height: 110rpx;

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

      .data {
        color: rgba(255, 255, 255, 0.8);
        font-size: 24rpx;
        margin-left: 27rpx;

        &.on {
          margin-left: 0;
        }

        .state {
          font-size: 30rpx;
          font-weight: bold;
          color: #fff;
          margin-bottom: 7rpx;
        }
        .time {
          margin-left: 20rpx;
        }
      }
    }
  }

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

  .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: #fff;
    margin-top: 12rpx;
    padding: 30rpx 24rpx;

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

      & ~ .item {
        margin-top: 20rpx;
      }

      .conter {
        color: #868686;
        text-align: right;

        .copy {
          font-size: 20rpx;
          color: #333;
          border-radius: 20rpx;
          border: 1rpx solid #666;
          padding: 3rpx 15rpx;
          margin-left: 24rpx;
        }
      }
    }

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

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

  .footer {
    width: 100%;
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;

    .bnt {
      width: 158rpx;
      height: 54rpx;
      text-align: center;
      line-height: 54rpx;
      border-radius: 50rpx;
      color: #fff;
      font-size: 27rpx;

      &.cancel {
        color: #F8C008;
        border: 1rpx solid #F8C008;
      }

      & ~ .bnt {
        margin-left: 18rpx;
      }
    }
  }

  .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 */
}
</style>

<style>
.qs-btn {
  width: auto;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 50rpx;
  color: #fff;
  font-size: 27rpx;
  padding: 0 3%;
  color: #aaa;
  border: 1px solid #ddd;
  margin-right: 20rpx;
}
</style>