<template>
  <view class="page order-list-container">
    <view :class="show ? 'cover' : ''"></view>
    <view class="m-product-all">
      <view class="m-tab">
        <scroll-view
          class="m-navbar scroll-view_H"
          scroll-x
          style="width: 100%"
        >
          <view class="tab-list">
            <view
              :class="[
                'm-navbar-item ellipsis',
                tapindex == 1 ? 'm-navbar-item-on' : '',
              ]"
              @click="allOrders"
            >
              全部
            </view>
            <view
              :class="[
                'm-navbar-item ellipsis',
                tapindex == 2 ? 'm-navbar-item-on' : '',
              ]"
              @click="toBePaid"
            >
              {{ __("待支付") }}
            </view>
            <view
              v-if="!card_kind_id"
              :class="[
                'm-navbar-item ellipsis',
                tapindex == 5 ? 'm-navbar-item-on' : '',
              ]"
              @click="toBeShipping"
            >
              <label v-if="kind_id == 1201">{{ __("待发货") }}</label>
              <label v-else>{{ __("待服务") }}</label>
            </view>
            <view
              :class="[
                'm-navbar-item ellipsis',
                tapindex == 3 ? 'm-navbar-item-on' : '',
              ]"
              @click="receiptOfGoods"
            >
              <label v-if="kind_id == 1201">{{ __("待收货") }}</label>
              <label v-else>{{ __("待确认") }}</label>
            </view>
            <view
              :class="[
                'm-navbar-item ellipsis',
                tapindex == 4 ? 'm-navbar-item-on' : '',
              ]"
              @click="toBeEvaluated"
            >
              <label v-if="kind_id == 1201">{{ __("已完成") }}</label>
              <label v-else>{{ __("已服务") }}</label>
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-if="loadComplete">
        <scroll-view
          v-if="orderlist.length > 0"
          scroll-y="true"
          class="m-orderlist page-container"
          @scrolltolower="scrollbottom"
        >
          <view
            v-for="(items, i) in orderlist"
            :key="i"
            class="m-panel m-panel-access"
          >
            <view class="m-panel-hd">
              <navigator
                :url="'/pagesub/index/store?store_id=' + items.store_id"
                class="m-cell m-cell-access"
                style=""
                hover-class="none"
              >
                <text class="iconfontAili icon-dianpu"></text>
                <view class="m-cell-bd m-cell-primary title-block">
                  <p class="m-store-info">
                    {{ items.store_name }}
                  </p>
                </view>
                <text class="m-cell-ft"></text>
              </navigator>
              <text v-if="false"
                >{{ __("订单编号：") }}{{ items.order_id }}</text
              >
              <text style="font-size: 20rpx; padding-left: 6rpx" v-if="false">{{
                items.payment_type_id == StateCode.PAYMENT_TYPE_DELIVER ||
                items.payment_type_id == StateCode.PAYMENT_TYPE_OFFLINE
                  ? __("货到付款")
                  : __("在线支付")
              }}</text>
              <label>{{ formatOrderName(items.order_state_name) }}</label>
            </view>

            <view class="m-product-list" v-if="items.item.length == 1">
              <navigator
                :url="'/member/order/detail?on=' + items.order_id"
                v-for="(item, ii) in items.item"
                :key="ii"
              >
                <view class="m-product-item-1">
                  <view class="m-product-img">
                    <image :src="item.order_item_image" mode="aspectFill" />
                  </view>
                  <view class="m-product-info-item">
                    <view class="m-product-name">
                      <!-- items.OrderType == 1 拼团 -->
                      <label
                        ><text
                          v-if="item.activity_type_name"
                          class="tag tag-orange"
                          >{{ item.activity_type_name }}</text
                        >{{ item.item_name }}</label
                      >

                      <label
                        class="m-min-name"
                        style="
                          overflow: hidden;
                          text-overflow: ellipsis;
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          -webkit-line-clamp: 1;
                        "
                        v-if="false"
                      >
                        {{ item.spec_info ? item.spec_info : "" }}
                      </label>
                    </view>

                    <!-- <view class="m-product-price">
                      <block v-if="item.order_item_unit_price">
                        <label>{{ __("￥") }}</label
                        >{{ item.order_item_unit_price }}
                      </block>

                      <block v-if="item.item_unit_points">
                        <label style="margin: auto 10rpx">+</label
                        >{{ item.item_unit_points }}{{ __("积分") }}
                      </block>

                      <block v-if="item.item_unit_sp">
                        <label style="margin: auto 10rpx">+</label
                        >{{ item.item_unit_sp }}{{ __("众宝") }}
                      </block>

                      <text style="float: right; margin-right: 60rpx"
                        >x{{ item.order_item_quantity }}</text
                      >
                    </view> -->
                  </view>
                  <view class="m-product-price-item">
                    <view class="m-product-price-item-amount">
                      <label>{{ __("￥") }}</label>
                      <label style="font-size: 17px; min-height: 37px">
                        {{
                          String(items.order_payment_amount).split(".")[0]
                        }}</label
                      >

                      <label
                        v-if="String(items.order_payment_amount).includes('.')"
                      >
                        .
                        {{
                          String(items.order_payment_amount).split(".")[1]
                        }}</label
                      >
                    </view>
                    <view class="m-product-price-item-number"
                      >共{{ items.item.length }}件</view
                    >
                  </view>
                </view>
              </navigator>
            </view>

            <view class="m-product-list" v-else>
              <navigator :url="'/member/order/detail?on=' + items.order_id">
                <view class="m-product-item-2">
                  <scroll-view
                    class="m-product-item-2-scroll"
                    scroll-x="true"
                    :show-scrollbar="true"
                    :enable-flex="true"
                    style="
                      display: flex;
                      white-space: nowrap;
                      position: relative;
                      width: 100%;
                    "
                  >
                    <view
                      class="img-item"
                      v-for="(item, index) in items.item"
                      :key="index"
                    >
                      <image :src="item.order_item_image" mode="aspectFill" />
                    </view>
                  </scroll-view>
                  <view class="m-product-price-item m-product-price-item-2">
                    <view class="m-product-price-item-amount">
                      <label>{{ __("￥") }}</label>
                      <label style="font-size: 17px; min-height: 37px">
                        {{
                          String(items.order_payment_amount).split(".")[0]
                        }}</label
                      >

                      <label
                        v-if="String(items.order_payment_amount).includes('.')"
                      >
                        .
                        {{
                          String(items.order_payment_amount).split(".")[1]
                        }}</label
                      >
                    </view>
                    <view class="m-product-price-item-number"
                      >共{{ items.item.length }}件</view
                    >
                  </view>
                </view>
              </navigator>
            </view>
            <!-- items.Type==2 ???? -->
            <view
              class="m-product-item"
              v-if="items.Type == 2"
              style="height: 154rpx"
            >
              <view class="m-product-img">
                <image
                  :src="items.store_logo"
                  mode="aspectFill"
                  style="width: 172rpx; height: 172rpx"
                />
              </view>
              <view class="m-product-info2" style="padding: 20rpx 0">
                <view class="m-product-name">
                  <label>{{ items.store_name }}</label>
                </view>
              </view>
            </view>
            <!-- <view class="m-total-info">
              <view>
                {{ __("总金额") }}：
                <block v-if="items.order_payment_amount">
                  <text style="">{{ __("￥") }}</text
                  ><label class="m-total-price">{{
                    items.order_payment_amount
                  }}</label>
                </block>
              </view>
              <view
                v-if="
                  items.order_payment_amount !== items.trade_payment_amount &&
                  items.trade_payment_amount > 0
                "
              >
                {{ __("待付款") }}：
                <block v-if="items.order_payment_amount">
                  <text style="">{{ __("￥") }}</text
                  ><label class="m-total-price">{{
                    items.trade_payment_amount
                  }}</label>
                </block>
              </view>

              <block v-if="items.order_resource_ext1"></block>
              <label
                class="m-total-price"
                v-if="items.order_resource_ext1"
                style="margin: auto 10rpx"
              >
                + {{ items.order_resource_ext1 }}{{ __("积分") }}</label
              >
              <label
                class="m-total-price"
                v-if="items.order_resource_ext2"
                style="margin: auto 10rpx"
              >
                + {{ items.order_resource_ext2 }}{{ __("众宝") }}</label
              >
            </view> -->
            <view class="m-total-btn">
              <form report-submit="true">
                <button
                  :data-on="items.order_id"
                  :data-order_payment_amount="items.trade_payment_amount"
                  v-if="
                    items.order_is_paid != StateCode.ORDER_PAID_STATE_YES &&
                    items.order_state_id != StateCode.ORDER_STATE_CANCEL
                  "
                  class="u-link-btn"
                  @click="gotopay"
                  formType="submit"
                >
                  {{ __("去支付") }}
                </button>
              </form>

              <view
                :data-on="items.order_id"
                v-if="items.order_lock_status"
                class="u-link-btn"
                >{{ __("退款/退货中...") }}</view
              >

              <navigator
                :url="'/member/product/comment?od=' + items.order_id"
                v-if="
                  items.order_buyer_evaluation_status == 0 &&
                  items.order_state_id == StateCode.ORDER_STATE_FINISH
                "
                class="u-link-btn"
                >{{ __("去评价") }}</navigator
              >
              <navigator
                :url="'/member/product/comment?od=' + items.order_id"
                v-if="items.order_buyer_evaluation_status == 1"
                class="u-link-btn"
                >{{ __("查看评价") }}</navigator
              >
              <view
                :data-on="items.order_id"
                v-if="
                  (items.kind_id == 1202 || items.kind_id == 1203) &&
                  items.order_state_id == StateCode.ORDER_STATE_SHIPPED
                "
                class="u-link-btn"
                @click="writeOrder"
                >{{ __("确认服务") }}</view
              >
              <view
                :data-on="items.order_id"
                v-if="items.if_buyer_cancel"
                class="u-link-btn"
                @click="cancelOrder"
                >{{ __("取消订单") }}</view
              >
              <view
                :data-on="items.order_id"
                v-if="
                  items.kind_id == 1201 &&
                  items.order_state_id == StateCode.ORDER_STATE_SHIPPED
                "
                class="u-link-btn"
                @click="confirmReceipt(items, $event)"
                >{{ __("确认收货") }}</view
              >
              <view
                class="u-link-btn"
                :data-on="items.order_id"
                v-if="
                  items.kind_id == 1201 &&
                  items.order_state_id == StateCode.ORDER_STATE_FINISH
                "
                @click="placeAnOrder"
                >{{ __("再下一单") }}</view
              >
              <navigator
                :url="'/member/order/detail?on=' + items.order_id"
                class="u-link-btn"
                >{{ __("查看详情") }}</navigator
              >
              <!-- ????? -->
              <navigator
                v-if="items.Type == 2"
                :url="
                  '../favorableorderdetail/favorableorderdetail?on=' +
                  items.order_id
                "
                class="u-link-btn"
                >{{ __("查看详情") }}</navigator
              >
            </view>
          </view>
          <view class="m-loading-box">
            <block v-if="ispage">
              <view class="u-loadmore">
                <label class="u-loading"></label>
                <text class="u-loadmore-tips">{{ __("正在加载") }}</text>
              </view>
              <view>
                <text></text>
              </view>
            </block>
            <block v-else>
              <view class="u-loadmore u-loadmore-line">
                <text class="u-loadmore-tips">{{
                  __("没有更多数据啦！")
                }}</text>
              </view>
            </block>
          </view>
        </scroll-view>

        <navigator
          url="/pages/product/list"
          redirect="true"
          class="m-nullpage"
          v-else
        >
          <view class="m-nullpage-middle" v-if="!flag">
            <view class="m-null-tip">
              <label style="font-size: 32rpx">{{
                __("亲~您还没有订单哦，")
              }}</label
              ><label class="highlight-link">{{ __("快去看看吧") }}</label>
            </view>
          </view>
        </navigator>
      </view>
      <view class="alert" v-if="show">
        <image
          style="width: 50rpx; height: 50rpx"
          src="/static/images/true.png"
        ></image>
        <text style="margin-left: 20rpx">{{ Info }}</text>
      </view>
    </view>

    <payment-box
      :paymentDataDefault="paymentData"
      :order_id="order_id"
      ref="paymentBox"
      @onCancel="onCancel"
      @onPaid="onPaid"
      @onFail="onFail"
    ></payment-box>
  </view>
</template>

<script>
import paymentBox from "../../components/payment-box.vue";

import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      isdata: false,
      tapindex: 1,
      page: 1,
      rows: 10,
      ispage: true,
      flag: true,
      type: 0,
      kind_id: 1201,
      card_kind_id: 1002,
      formId: "",
      orderlist: [],
      imgLogo: "",
      show: false,
      Info: "",
      order_id: "",
      paymentData: {},
      loadComplete: false, // 没有加载数据前不显示的对应内容
    };
  },
  components: {
    paymentBox,
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  onLoad: function (options) {
    this.setData({
      tapindex: options.sl ? options.sl : 1,
      page: 1,
      rows: 10,
      orderlist: [],
      type: options.type ? options.type : 0,
      kind_id: options.kind_id ? options.kind_id : 1201,
      card_kind_id: options.card_kind_id ? options.card_kind_id : 0,
    });

    if (this.kind_id == 1201) {
      uni.setNavigationBarTitle({
        title: this.__("我的订单"),
      });
    } else if (this.kind_id == 1202) {
      uni.setNavigationBarTitle({
        title: this.__("我的预约"),
      });
    } else {
      uni.setNavigationBarTitle({
        title: this.__("优惠券订单"),
      });
    }

    var t = this;
    this.notice.addNotification("RefreshMessage", t.RefreshMessage, t);
    this.getOrderlist();
  },
  onShow: function () {
    let that = this;
    // 刷新评论
    uni.$on("refreshComment", function (data) {
      let orderlist = that.orderlist;
      for (var i = 0; i < orderlist.length; i++) {
        if (orderlist[i].order_id == data) {
          orderlist[i].order_buyer_evaluation_status = 1;
        }
      }
    });
  },

  onUnload: function () {
    //移除通知
    // 离开页面，注销事件
    var that = this;
    this.notice.removeNotification("RefreshMessage", that);

    if (this.$refs.paymentBox.showBoxView) {
      this.$refs.paymentBox.cancel();
    }
  },
  onBackPress() {
    if (this.$refs.paymentBox.showBoxView) {
      this.$refs.paymentBox.cancel();

      return true;
    }
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getOrderlist();
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    formatOrderName(name) {
      switch (name) {
        case "已取消/已作废":
          return "已取消";
          break;
        case "已完成/已签收":
          return "已完成";
          break;
        default:
          return name;
      }
    },
    formatAmout(amout) {},
    RefreshMessage: function (e) {
      this.setData({
        tapindex: 1,
        page: 1,
        rows: 10,
        orderlist: [],
        ispage: true,
        flag: true,
        type: 0,
        kind_id: this.kind_id,
        loadComplete: false,
      }),
        this.getOrderlist();
    },
    allOrders: function () {
      this.setData({
        tapindex: 1,
        page: 1,
        rows: 10,
        orderlist: [],
        ispage: true,
        flag: true,
        type: 0,
        kind_id: this.kind_id,
        loadComplete: false,
      }),
        this.getOrderlist();
    },
    toBePaid: function () {
      this.setData({
        tapindex: 2,
        page: 1,
        rows: 10,
        orderlist: [],
        ispage: true,
        flag: true,
        type: this.StateCode.ORDER_STATE_WAIT_PAY,
        kind_id: this.kind_id,
        loadComplete: false,
      }),
        this.getOrderlist();
    },
    toBeShipping: function () {
      this.setData({
        tapindex: 5,
        page: 1,
        rows: 10,
        orderlist: [],
        ispage: true,
        flag: true,
        type: this.StateCode.ORDER_STATE_WAIT_SHIPPING,
        kind_id: this.kind_id,
        loadComplete: false,
      }),
        this.getOrderlist();
    },
    receiptOfGoods: function () {
      this.setData({
        tapindex: 3,
        page: 1,
        rows: 10,
        ispage: true,
        flag: true,
        orderlist: [],
        type: this.StateCode.ORDER_STATE_SHIPPED,
        kind_id: this.kind_id,
        loadComplete: false,
      }),
        this.getOrderlist();
    },
    toBeEvaluated: function () {
      this.setData({
        tapindex: 4,
        page: 1,
        rows: 10,
        ispage: true,
        flag: true,
        orderlist: [],
        type: this.StateCode.ORDER_STATE_FINISH,
        kind_id: this.kind_id,
        loadComplete: false,
      }),
        this.getOrderlist();
    },
    scrollbottom: function () {
      if (this.flag) {
        var that = this;
        that.setData({
          flag: false,
        });

        clearTimeout(t);
        var t = setTimeout(function () {
          that.setData({
            state_type: that.type,
            flag: false,
            page: parseInt(that.page) + 1,
            rows: 10,
          });

          that.getOrderlist();
        }, 100);
      }
    },
    getOrderlist: function () {
      var that = this;
      var params = {
        page: that.page,
        rows: that.rows,
        state_type: that.type,
        kind_id: this.kind_id,
        card_kind_id: this.card_kind_id,
      };
      that.$.request({
        url: this.Config.URL.user.order_lists,
        data: params,
        success: function (data, status, msg, code) {
          console.log(data);
          if (status == 200 && data && data.items.length > 0) {
            if (data.page >= data.total) {
              that.setData({
                flag: false,
                ispage: false,
                orderlist: that.orderlist.concat(data.items),
              });
            } else {
              that.setData({
                flag: true,
                ispage: true,
                orderlist: that.orderlist.concat(data.items),
              });
            }

            that.setData({
              isdata: true,
              loadComplete: true,
            });
          } else {
            that.setData({
              flag: false,
              ispage: false,
              isdata: false,
              loadComplete: true,
            });
          }
        },
        fail: function (data) {
          that.setData({
            loadComplete: true,
          });
          that.$.alert("网络异常请重试！");
        },
      });
    },
    cancelOrder: function (e) {
      var that = this,
        params = {
          order_id: e.currentTarget.dataset.on,
        };
      that.$.confirm(
        that.__("是否取消订单"),
        function (e) {
          if (e.confirm) {
            that.$.request({
              url: that.Config.URL.user.order_cancel,
              data: params,
              success: function (data, status, msg, code) {
                if (status == 200) {
                  that.$.alert("取消成功！", function () {
                    that.setData({
                      orderlist: [],
                      page: 1,
                    });
                    that.getOrderlist();
                  });
                }
              },
            });
          }
        },
        true
      );
    },
    writeOrder: function (e) {
      var that = this,
        params = {
          order_id: e.currentTarget.dataset.on,
        };
      that.$.confirm(
        "是否核销订单？",
        function (e) {
          if (e.confirm) {
            that.$.request({
              url: that.Config.URL.user.order_receive,
              data: params,
              success: function (data, status, msg, code) {
                if (status == 200) {
                  that.$.alert(that.__("核销成功！"), function () {
                    that.setData({
                      orderlist: [],
                      page: 1,
                      Info: msg,
                    });
                    setTimeout(function () {
                      that.getOrderlist();
                    }, 1000);
                  });
                } else {
                  (that.setData({
                    orderlist: [],
                    Info: msg,
                    show: true,
                  }),
                  setTimeout(function () {
                    that.setData({
                      show: false,
                    });
                  }, 2e3)),
                    that.getOrderlist();
                }
              },
            });
          }
        },
        true
      );
    },
    confirmReceipt: function (data, obj) {
      var params = {
        order_id: obj.currentTarget.dataset.on,
      };
      var that = this;

      //拉起确认收货组件
      if (wx.openBusinessView) {
        wx.openBusinessView({
          businessType: "weappOrderConfirm",
          extraData: {
            // merchant_id: data.lkl_merchant_no,//用户交易商户号
            // merchant_trade_no: data.order_id,//商户订单号
            transaction_id: data.lkl_trade_no, //用户交易单号
            // transaction_id: "4200002884202509154936380358", //用户交易单号
          },
          success: (e) => {
            console.log("e1", e);
            if (e.extraData.status === "success") {
              // 用户确认收货成功，再执行自己的代码
              that.$.request({
                url: that.Config.URL.user.order_receive,
                data: params,
                success: function (data, status, msg, code) {
                  if (status == 200) {
                    that.$.alert(that.__("收货成功！"), function () {
                      that.setData({
                        orderlist: [],
                        page: 1,
                      });
                      setTimeout(function () {
                        that.getOrderlist();
                      }, 1000);
                    });
                  }
                },
              });
            } else if (e.extraData.status === "fail") {
              // 用户确认收货失败
              uni.showToast({
                title: "确认收货失败",
                icon: "none",
              });
            } else if (e.extraData.status === "cancel") {
              // 用户取消
              uni.showToast({
                title: "取消确认收货",
                icon: "none",
              });
            }
          },
          fail: (e) => {
            console.log("e2", e);
            uni.showToast({
              title: "确认收货失败",
              icon: "none",
            });
          },
          complete: (e) => {
            console.log("e3", e);
            console.log("无论是否成功都会执行");
          },
        });
      } else {
        //引导用户升级微信版本
        uni.showToast({
          title: "请升级微信版本",
          icon: "none",
        });
        that.$.confirm(
          that.__("是否确认收货？"),
          function (e) {
            if (e.confirm) {
              that.$.request({
                url: that.Config.URL.user.order_receive,
                data: params,
                success: function (data, status, msg, code) {
                  if (status == 200) {
                    that.$.alert(that.__("收货成功！"), function () {
                      that.setData({
                        orderlist: [],
                        page: 1,
                      });
                      setTimeout(function () {
                        that.getOrderlist();
                      }, 1000);
                    });
                  }
                },
              });
            }
          },
          true
        );
      }

      // that.$.confirm(
      //     that.__("是否确认收货？"),
      //     function (e) {
      //       if (e.confirm) {
      //         that.$.request({
      //           url: that.Config.URL.user.order_receive,
      //           data: params,
      //           success: function (data, status, msg, code) {
      //             if (status == 200) {
      //               that.$.alert(that.__("收货成功！"), function () {
      //                 that.setData({
      //                   orderlist: [],
      //                   page: 1,
      //                 });
      //                 setTimeout(function () {
      //                   that.getOrderlist();
      //                 }, 1000);
      //               });
      //             }
      //           },
      //         });
      //       }
      //     },
      //     true
      //   );
    },
    placeAnOrder: function (obj) {
      var params = {
        order_id: obj.currentTarget.dataset.on,
      };

      var that = this;
      that.$.confirm(
        that.__("是否再次下单？"),
        function (e) {
          if (e.confirm) {
            that.$.request({
              url: that.Config.URL.user.next_order,
              data: params,
              method: "POST",
              success: function (data, status, msg, code) {
                if (200 == status) {
                  that.$.switchTab({
                    url: "/pages/cart/cart",
                  });
                } else {
                  that.$.alert(msg);
                }
              },
            });
          }
        },
        true
      );
    },
    gotopay: function (e) {
      var that = this;

      that.setData({
        order_id: e.currentTarget.dataset.on,
        paymentData: {
          order_id: e.currentTarget.dataset.on,
          orderSelMoneyAmount: e.currentTarget.dataset.order_payment_amount,

          user_money: this.userInfo.user_money,
          user_points: this.userInfo.user_points,
          user_recharge_card: this.userInfo.user_recharge_card,
          user_sp: this.userInfo.user_sp,
        },
      });

      this.$refs.paymentBox.show();
      return true;
    },

    onCancel: function (e) {
      return;
    },
    onPaid: function (e) {
      let that = this;
      that.$.alert(
        that.__("支付成功"),
        function () {
          that.$.gotopage("/member/order/detail?on=" + e.order_id);
        },
        2000
      );

      if (this.$refs.paymentBox.showBoxView) {
        this.$refs.paymentBox.cancel();
      }
    },
    onFail: function (e) {},

    sendMessage: function (order_id) {
      let that = this;
      var params = {
        api: orderapi.OrderPaySuccessWXMessage,
        pages: "/member/order/detail?on=" + order_id,
        formId: this.formId,
        WeiXinOpenId: this.userInfo.openId,
        value: {
          order_id: order_id,
        },
      };
      that.$.sendTpl(params);
    },
  },
};
</script>

<style lang="scss">
@import "../../styles/_variables";

.order-list-container {
  .tab-list {
    display: flex;
    margin: 8px 0;
  }

  /* 隐藏滚动条 */
  .scroll-view {
    scrollbar-width: none; /* Firefox */
  }

  .scroll-view::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .icon-dianpu {
    font-size: 18px;
    font-weight: bold;
  }

  .title-block {
    max-width: 275px;
    padding-left: 4px;
    padding-right: 4px;
    font-weight: bold;
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #202021;
  }
  .m-navbar {
    background: none;
  }

  .m-product-list {
    position: relative;
    padding: 0 11px 11px;
  }

  .m-product-info-item {
    flex: 1;
  }

  .m-product-price-item-2 {
    position: absolute;
    right: 0;
    bottom: 10;
    height: 80px;
    padding-right: 11px;
  }

  .m-navbar-item {
    // padding: 20rpx 0;
    padding: 0;
    font-size: 28rpx;
    height: 40px;
    line-height: 40px;
    color: #999ca7;
  }

  .m-navbar-item:after {
    border: none;
  }

  .m-navbar-item.m-navbar-item-on {
    background: none;
    color: #202021 !important;
    font-weight: 700;
  }

  .m-product-item-2 {
    display: flex;
    background: #fff;

    .m-product-item-2-scroll {
      .uni-scroll-view-content {
        display: flex;
        background: ccc;
      }
    }
  }

  .m-navbar-item.m-navbar-item-on::before {
    content: " ";
    position: absolute;
    width: 22px;
    height: 4px;
    bottom: 0;
    left: 50%;
    margin-left: -11px;
    background: #fe0137;
    color: #fff;
  }

  .m-product-price-item-number {
    color: #999ca7;
    font-size: 13px;
  }

  .m-panel-hd {
    display: flex;
    padding: 0 11px;
    height: 60px;
    line-height: 60px;
    color: #202021;
  }
  .m-cell {
    padding: 0px;
  }

  .m-product-price-item-amount {
    font-weight: 700;
  }

  .img-item {
    width: 80px;
    height: 80px;
    background: red;
    margin-right: 10px;
    display: inline-block;
    image {
      width: 80px;
      height: 80px;
    }
  }

  .m-cell-access .m-cell-ft:after {
    margin-top: -3px;
    margin-left: 6rpx;
  }

  .m-panel-hd:after {
    border-bottom: 0;
  }

  .m-panel-hd label {
    float: right;
    color: #202021;
    font-size: 14px;
    flex: 1;
    text-align: right;
    font-weight: 700;
  }

  .m-total-info {
    text-align: right;
    padding: 10rpx 38rpx;
    font-size: 24rpx;
  }

  .m-total-info label {
    font-size: 32rpx;
    color: $default-skin-bg;
  }

  .m-total-info text {
    font-size: 24rpx;
    color: $default-skin-bg;
  }

  .m-total-btn {
    text-align: right;
    padding: 20rpx 20rpx 20rpx 20rpx;
    // position: relative;
  }

  .m-total-btn::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #ebebe7;
    color: #ebebe7;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .m-total-btn .u-link-btn {
    margin: 0 10rpx;
    vertical-align: middle;
    display: inline-block;
    line-height: 40rpx;
    background-color: #fff;
    height: 38px;
    line-height: 38px;
    width: 94px;
    margin-left: 4px;
    text-align: center;
    font-size: 14px;
    padding: 0;
    border-radius: 114px;
    color: #fe0137;
  }

  @media screen and (max-width: 320px) {
    .m-total-btn .u-link-btn {
      width: 64px;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
    }
  }

  @media screen and (min-width: 321px) {
    // .m-total-btn {
    //   height: 38px;
    //   line-height: 38px;
    // }
  }

  .m-sort {
    position: relative;
  }

  .m-sort image {
    width: 24rpx;
    height: 24rpx;
    position: absolute;
    /*top: 50%;*/
    margin-top: 10rpx;
    margin-left: 2rpx;
  }

  .m-product-price-item {
    min-width: 68px;
    background: linear-gradient(
      270deg,
      hsla(0, 0%, 100%, 0.9),
      hsla(0, 0%, 100%, 0.9)
    );
    text-align: right;
    display: flex;
    flex-flow: column;
    justify-content: center;
    color: #202021;
    font-size: 13px;

    .uni-label-pointer {
      font-weight: bold;
    }
  }

  .m-product-price text {
    font-size: 24rpx;
    color: #999999;
    margin-left: 6rpx;
  }

  .m-product-price .m-tab {
    position: fixed;
    width: 100%;
    top: var(--window-top);
    z-index: 2;
  }

  .m-orderlist {
    // padding-top: 84rpx;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  .u-tuan-label {
    padding: 5rpx;
    background-color: $default-skin-bg;
    border-radius: 4rpx;
    font-size: 24rpx;
    color: #fff;
    margin-right: 5rpx;
  }

  .alert {
    font-size: 32rpx;
    width: 70%;
    height: 200rpx;
    padding: 0 40rpx;
    position: absolute;
    left: 10%;
    top: 40%;
    background: #fff;
    border-radius: 10rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    z-index: 999;
  }

  .cover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 998;
  }

  .m-product-name {
    font-size: 24rpx;
  }

  .m-product-img {
    width: 80px;
    height: 80px;
    image {
      width: 80px;
      height: 80px;
    }
  }

  .m-product-item {
    margin-top: 0rpx;
  }

  .m-product-item-1 {
    display: flex;
  }

  .scroll-view_H {
    width: 100%;
    white-space: nowrap;

    height: 84rpx;

    .m-navbar-item {
      display: inline-block;
      padding-left: 20rpx;
      padding-right: 20rpx;

      /*min-width:110rpx;*/
      min-width: 150rpx;
      min-width: 108rpx;
    }
  }
}
</style>
