<template>
  <view>
    <view class="m-tips" style="margin: 0rpx 0" v-if="titleText">
      <view
        class="m-tips-str"
        :style="
          'line-height: 100rpx;height: 100rpx;font-size: 32rpx;font-weight: 500;color:' +
          titleColor
        "
        >{{ titleText }}</view
      >
    </view>
    <view
      class="m-tips"
      style="margin: 0rpx 0; color: #000000"
      v-if="titleText"
    >
      <!-- table切换start -->
      <scroll-view
        class="scroll-view_S"
        scroll-x
        show-scrollbar="false"
        :style="{ backgroundColor: bgColor }"
      >
        <view class="scroll-view-item_S">
          <label
            :class="['m-navbar-item', tapindex == -1 ? 'm-navbar-item-on' : '']"
            style="padding: 0"
            :data-index="-1"
            :data-id="0"
            @click="setTab"
            >{{ __("推荐") }}</label
          >
        </view>
        <view
          class="scroll-view-item_S"
          v-for="(items, index) in store_category_lists"
          :key="index"
        >
          <label
            :class="[
              'm-navbar-item',
              tapindex == index ? 'm-navbar-item-on' : '',
            ]"
            style="padding: 0"
            :data-index="index"
            :data-id="items.store_category_id"
            @click="setTab"
            >{{ items.store_category_name }}</label
          >
        </view>
      </scroll-view>
      <!-- table切换end -->
      <!-- 全部订单start -->
    </view>
    <view v-if="loadComplete">
      <block v-if="true">
        <view class="flex-container">
          <HMfilterDropdown
            :filterData="filterData"
            :defaultSelected="filterDropdownValue"
            :updateMenuName="true"
            :scrollTop="hight"
            @confirm="confirm"
            v-if="isShowFilter"
            >></HMfilterDropdown
          >
        </view>
        <block v-if="isdata && !issshow">
          <scroll-view
            class="order-list"
            scroll-y="true"
            @scrolltolower="scrollbottom"
            :style="
              isShowFilter && isFilterTop0
                ? 'padding-top:100rpx'
                : 'padding-top:20rpx'
            "
          >
            <view class="list">
              <view class="row" v-for="(item, index) in Info" :key="index">
                <navigator
                  class="order-info"
                  :url="
                    '/pagesub/index/store?store_id=' +
                    item.store_id +
                    '&d=' +
                    item.distance
                  "
                >
                  <view class="left">
                    <image :src="item.store_logo"></image>
                  </view>
                  <view class="right">
                    <view class="name">
                      <label class="store-name">{{ item.store_name }}</label>
                      <label
                        style="display: flex"
                        @click.stop="gotomap"
                        :data-address="item.store_address"
                        :data-name="item.store_name"
                        :data-lat="item.store_latitude"
                        :data-lng="item.store_longitude"
                        ><image
                          style="
                            width: 20rpx;
                            height: 26rpx;
                            line-height: 26rpx;
                          "
                          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/location.png"
                        ></image
                        ><label class="u-font" style="line-height: 26rpx">{{
                          item.distance
                        }}</label></label
                      >
                    </view>
                    <view
                      class="flex-info-box"
                      style="display: flex; align-items: center"
                    >
                      <image
                        src="../static/images/xing.png"
                        style="width: 26rpx; height: 26rpx"
                      ></image>
                      <label class="u-font evaluation-rate">{{
                        sprintf(__("%s分"), item.store_evaluation_rate)
                      }}</label>
                      <label class="u-font">{{
                        sprintf(__("销量 %s"), item.store_sales_num)
                      }}</label>

                      <label class="u-font" v-if="item.store_category_name">{{
                        sprintf(__("主营： %s"), item.store_category_name)
                      }}</label>
                    </view>
                  </view>
                </navigator>
                <view
                  class="flex-info-box"
                  style="display: flex; align-items: center; padding: 20rpx 0"
                  v-if="item.activity_rows"
                >
                  <label
                    class="u-activity"
                    v-for="(row, ii) in item.activity_rows"
                    :key="ii"
                    v-show="ii < 3"
                    >{{ row.activity_title }}</label
                  >
                </view>

                <view
                  class="product-item"
                  v-if="item.products && item.products.length > 0"
                >
                  <navigator
                    :url="'/pages/product/detail?pid=' + val.item_id"
                    class="item-s"
                    v-for="(val, ii) in item.products"
                    :key="ii"
                  >
                    <view class="p-image">
                      <view style="position: absolute">
                        <label
                          class="flag flag-reduction"
                          v-if="val.activity_type_id"
                          >{{ val.activity_type_name }}</label
                        >
                      </view>

                      <image
                        :src="val.product_image"
                        style="float: left"
                      ></image>
                    </view>
                    <view class="p-bottom">
                      <view class="p-name">{{ val.product_name }}</view>
                      <view class="p-price">
                        <label class="p-left"
                          >{{ __("￥") }}{{ val.item_unit_price }}</label
                        >
                      </view>
                    </view>
                  </navigator>
                </view>
              </view>
              <view class="m-loading-box uni-list-cell" v-if="isShowLoading">
                <block v-if="ispage">
                  <view class="u-loadmore">
                    <label class="u-loading"></label
                    ><text class="u-loadmore-tips">{{ __("正在加载") }}</text>
                  </view>
                </block>
                <block v-if="!ispage">
                  <view class="u-loadmore u-loadmore-line"
                    ><text class="u-loadmore-tips">{{
                      __("没有更多数据啦！")
                    }}</text></view
                  >
                </block>
              </view>
            </view>
          </scroll-view>
        </block>
      </block>

      <block v-else>
        <block v-if="isdata && !issshow">
          <scroll-view
            class="order-list"
            scroll-y="true"
            @scrolltolower="scrollbottom"
            :style="isShowFilter ? '' : 'padding-top:20rpx'"
          >
            <view class="list">
              <view class="row" v-for="(item, index) in Info" :key="index">
                <navigator
                  class="order-info"
                  :url="'/pagesub/index/store?store_id=' + item.store_id"
                >
                  <view class="left">
                    <image :src="item.store_logo"></image>
                  </view>
                  <view class="right">
                    <view class="name">
                      <label class="store-name">{{ item.store_name }}</label>
                      <label style="display: flex"
                        ><image
                          style="
                            width: 20rpx;
                            height: 26rpx;
                            line-height: 26rpx;
                          "
                          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/location.png"
                        ></image
                        ><label class="u-font" style="line-height: 26rpx">{{
                          item.distance
                        }}</label></label
                      >
                    </view>
                    <view
                      class="flex-info-box"
                      style="display: flex; align-items: center"
                    >
                      <image
                        src="../static/images/xing.png"
                        style="width: 26rpx; height: 26rpx"
                      ></image>
                      <label class="u-font evaluation-rate">{{
                        sprintf(__("%s分"), item.store_evaluation_rate)
                      }}</label>
                      <label class="u-font">{{
                        sprintf(__("销量 %s"), item.store_sales_num)
                      }}</label>
                    </view>
                    <view
                      class="flex-info-box"
                      style="display: flex; align-items: center"
                      v-if="item.activity_rows"
                    >
                      <label
                        class="u-activity"
                        v-for="(row, ii) in item.activity_rows"
                        :key="ii"
                        v-show="ii < 3"
                        >{{ row.activity_title }}</label
                      >
                    </view>

                    <view
                      class="price-number"
                      @click.stop="gotomap"
                      :data-address="item.store_address"
                      :data-name="item.store_name"
                      :data-lat="item.store_latitude"
                      :data-lng="item.store_longitude"
                    >
                      <view class="price" v-if="item.store_category_name">{{
                        sprintf(__("主营： %s"), item.store_category_name)
                      }}</view>
                    </view>
                  </view>
                </navigator>
              </view>
              <view class="m-loading-box uni-list-cell" v-if="isShowLoading">
                <block v-if="ispage">
                  <view class="u-loadmore">
                    <label class="u-loading"></label
                    ><text class="u-loadmore-tips">{{ __("正在加载") }}</text>
                  </view>
                </block>
                <block v-if="!ispage">
                  <view class="u-loadmore u-loadmore-line"
                    ><text class="u-loadmore-tips">{{
                      __("没有更多数据啦！")
                    }}</text></view
                  >
                </block>
              </view>
            </view>
          </scroll-view>
        </block>
      </block>

      <view class="m-nullcontent" v-if="!isdata">
        <view class="m-nullpage-middle"
          ><label class="iconfont icon-meiyougengduo"></label>
          <view class="m-null-tip"
            ><text>{{ __("亲~什么都没有") }}</text
            ><text>{{ __("附近没什么商家店铺!") }}</text></view
          >
        </view>
      </view>
    </view>
    <view v-if="isdata && issshow" class="open_ba">
      <view
        style="
          width: 200rpx;
          margin: 71px auto 25px auto;
          wxcs_style_margin: 143rpx auto 50rpx auto;
          auto: 50rpx auto;
        "
      >
        <image
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/ditulogo.png"
          style="width: 200rpx; height: 200rpx"
        ></image>
      </view>
      <view style="font-size: 28rpx">{{
        __(
          "无法获取到您的定位，请开启地理位置权限，将根据你的位置展示附近商家店铺。"
        )
      }}</view
      ><button
        style="
          width: 34%;
          height: 79rpx;
          background: #33cc66;
          margin: 39px auto 0 auto;
          wxcs_style_margin: 79rpx auto 0 auto;
          color: #fff;
          line-height: 80rpx;
          text-align: center;
        "
        open-type="openSetting"
        @opensetting="handler"
      >
        {{ __("去开启") }}
      </button>
    </view>
  </view>
</template>

<script>
import HMfilterDropdown from "@/components/HM-filterDropdown/HM-filterDropdown.vue";

import { mapState, mapMutations } from "vuex";

export default {
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },

    optionStr: {
      type: String,
      default: "{}",
    },

    isShowFilter: {
      type: [Boolean, Number],
      default: false,
    },

    isFilterTop0: {
      type: Boolean,
      default: true,
    },

    viewtype: {
      type: Number,
      default: 1,
    },

    titleText: {
      type: String,
      default: "",
    },

    titleColor: {
      type: String,
      default: "#bfbfbf",
    },

    bgColor: {
      type: String,
      default: "#f8f8f8",
    },

    maxNumber: {
      type: Number,
      default: 100,
    },

    isShowLoading: {
      type: [Boolean, Number],
      default: true,
    },
    uniId: {
      type: String,
      default() {
        return "guessyoulike";
      },
    },
  },
  data() {
    return {
      page: 1,
      ispage: true,
      flag: true,
      Info: [],
      latitude: 0,
      longitude: 0,
      isdata: false,
      issshow: 0,
      store_id: null,
      rows: 10,

      hight: 2850,
      scrollTop: 0,

      store_category_lists: [],
      tapindex: -1,

      post: {
        latitude: 0,
        longitude: 0,
        distance: 0,
        store_category_id: 0,
        sidx: "store_sales_num",
        sord: "DESC",
        store_type: 1,
        store_id: null,
      },

      filterDropdownValue: [],
      filterData: [],
      loadComplete: false, // 没有加载数据前不显示的对应内容
    };
  },
  components: {
    HMfilterDropdown: HMfilterDropdown,
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  created() {
    uni.setNavigationBarTitle({
      title: this.__("店铺街"),
    });

    var that = this;

    setTimeout(() => {
      that.$.getLocation({
        type: "wgs84",
        success: function (response) {
          that.setData({
            latitude: response.latitude,
            longitude: response.longitude,
          });

          console.info("手机定位:");
          console.info(JSON.stringify(response));

          that.getNearbylist();
        },
        fail: function () {
          console.info("手机定位失败");
          that.setData({
            // options: options,
            isdata: true,
          });

          that.$.confirm(that.__("手机定位失败"));

          that.getNearbylist();
        },
        complete: function (err) {},
      });

      that.$.request({
        url: this.Config.URL.store.lists_store_category,
        data: {},
        dataType: "json",
        success: function (data, status, msg, code) {
          if (status == 200) {
            that.store_category_lists = data.items;
          } else {
          }
        },
      });

      that.$.request({
        url: this.Config.URL.filter_opt,
        data: {},
        dataType: "json",
        success: function (data, status, msg, code) {
          if (status == 200) {
            that.filterData = data;
          } else {
          }
        },
      });
    }, 400);

    uni.$on("diy-scrollbottom", function (data) {
      console.log(
        "Store 监听到事件来自 update ，携带参数 uniId 为：" + data.uniId
      );
      console.info(that.uniId);
      if (data.uniId == that.uniId) {
        console.log("Store 监听到 scrollbottom");
        console.info(that.$refs);
        that.scrollbottom();
      }
    });
  },

  mounted() {
    /*
			var that = this;
			var query = uni.createSelectorQuery().in(this);
			query.select('.m-tips').boundingClientRect(data => {
			  console.log("得到布局位置信息" + JSON.stringify(data));
			  console.log("节点离页面顶部的距离为" + data.top);
			  that.setData({
				  scrollTop: 0,
			  })
			}).exec();
            */
  },

  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),

    //接收菜单结果
    confirm(e) {
      console.info(e);
      console.info(this.filterData);
      var that = this;
      var post = this.post;

      e.value.forEach(function (v, k) {
        if (that.filterData[k].type == "hierarchy") {
          var index = that.filterData[k].sub[e.index[k][0]]["index"];
          console.info(k, " - ", index);
          console.info(v);
          switch (k) {
            case 0:
              switch (index) {
                case "store_category_id":
                  post.store_category_id = e.value[k][0];
                  break;
              }
              break;
            case 1:
              switch (index) {
                case "store_sales_num":
                  post.sidx = "store_sales_num";
                  post.sord = e.value[k][0];
                  break;
                case "store_evaluation_rate":
                  post.sidx = "store_evaluation_rate";
                  post.sord = e.value[k][0];
                  break;
                case "store_distance":
                  post.sidx = "distance";
                  post.sord = e.value[k][0];
                  break;
                case "store_deliverycredit":
                  post.sidx = "store_deliverycredit";
                  post.sord = e.value[k][0];
                  break;
                default:
                  break;
              }
              break;
            case 2:
              switch (index) {
                case "near":
                  post.distance = e.value[k][1];
                  break;
              }
              break;
            case 3:
              switch (index) {
                case "store_category_id":
                  post.store_category_id = e.value[k][0];
                  break;
              }
              break;
          }
        } else {
          e.value[k].forEach(function (ee, ii) {
            var index = that.filterData[k].sub[ii]["index"];

            switch (index) {
              case "contract_type_ids":
                post.contract_type_ids = JSON.stringify(e.value[k][ii]);
                break;
              case "activity_type_ids":
                post.activity_type_ids = JSON.stringify(e.value[k][ii]);
                break;
              case "price":
                post.price = e.value[k][ii];
                break;
              default:
                post = post;
                break;
            }
          });
        }
      });

      console.info(post);

      this.setData({
        Info: [],
        page: 1,
        ispage: true,
        post: post,
      });

      this.getNearbylist();
    },
    getNearbylist: function () {
      var post = this.post;
      var that = this;

      var params = {
        lat: that.latitude,
        lng: that.longitude,
        page: that.page,
        rows: that.rows,
        sidx: post.sidx,
        sord: post.sord,
        store_type: 1,
        distance: post.distance,
        store_category_id: post.store_category_id ? post.store_category_id : "",
      };

      that.$.request({
        url: this.Config.URL.store.lists,
        data: params,
        dataType: "json",
        success: function (data, status, msg, code) {
          if (status == 200) {
            for (let i = 0; i < data.items.length; i++) {
              data.items[i]["distance"] = that.$.distanceFormat(
                data.items[i]["distance"]
              );

              let coord = that.$.bMapTransQQMap(
                data.items[i]["store_longitude"],
                data.items[i]["store_latitude"]
              );
              data.items[i]["store_longitude"] = coord.lng;
              data.items[i]["store_latitude"] = coord.lat;
            }
            that.setData({
              isdata: true,
              loadComplete: true,
            });
            if (data.page >= data.total) {
              that.setData({
                flag: false,
                ispage: false,
                Info: that.Info.concat(data.items),
              });
            } else {
              that.setData({
                flag: true,
                ispage: true,
                Info: that.Info.concat(data.items),
              });
            }
          } else {
            that.setData({
              flag: false,
              ispage: false,
              loadComplete: true,
            });
          }
        },
        fail: function (data) {
          that.setData({
            loadComplete: true,
          });
          that.$.alert("网络异常请重试！");
        },
      });
    },

    setTab: function (e) {
      this.setData({
        tapindex: e.target.dataset.index,
      });
      var post = this.post;

      post.store_category_id = e.target.dataset.id;
      this.setData({
        Info: [],
        page: 1,
        ispage: true,
        post: post,
      });

      this.getNearbylist();
    },
    gotomap: function (e) {
      var that = this;
      if (that.options.issub) {
        that.backCheckout(e.currentTarget.dataset);
      } else {
        that.$.openLocation({
          latitude: parseFloat(e.currentTarget.dataset.lat),
          longitude: parseFloat(e.currentTarget.dataset.lng),
          name: e.currentTarget.dataset.name,
          address: e.currentTarget.dataset.address,
          scale: 28,
        });
      }
    },
    backCheckout: function (data) {
      let that = this;
      var options = this.options;

      //存入本地
      uni.setStorageSync("distributor_id", data.id);
      uni.setStorageSync("distributor_name", data.name);
      var params = {};
      var info_list = this.Info;
      for (var r = 0; r < info_list.length; r++) {
        info_list[r].chain_id == data.chain_id;
        params = info_list[r];
      }

      options.store_row = params;

      that.$.navigateBack(1, function () {
        that.notice.postNotificationName("RefreshStoreName", options);
      });
    },
    scrollbottom: function () {
      if (this.flag) {
        var e = this;
        e.setData({
          flag: false,
        }),
          clearTimeout(t);
        var t = setTimeout(function () {
          e.setData({
            page: parseInt(e.page) + 1,
            rows: 10,
          }),
            e.getNearbylist();
        }, 500);
      }
    },
    selectAddress: function (e) {
      var params = {},
        info_list = this.Info;
      for (var r = 0; r < info_list.length; r++)
        info_list[r].chain_id == e.currentTarget.dataset.chain_id &&
          (params = info_list[r]);
      var that = this;
      that.$.navigateBack(1, function () {
        var e = {
          chain_id: that.chain_id,
          spinfo: that.spid,
          ChainInfo: params,
        };
        that.notice.postNotificationName("RefreshStoreName", e);
      });
    },
    call: function (e) {
      let that = this;
      that.$.makePhoneCall({
        phoneNumber: e.currentTarget.dataset.phone,
      });
    },
  },
};
</script>



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

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.list-box {
  background-color: #fff;
  color: #333;
}

.item-box {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.flex-box {
  display: flex;
  align-items: center;
  position: relative;
}

.flex-shop {
  width: 120rpx;
  height: 120rpx;
}

.flex-title {
  font-size: 30rpx;
  margin-left: 10rpx;
  max-width: 75%;
  overflow: hidden;
  height: 40rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-postion {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
}

.flex-postion image {
  width: 20rpx;
  height: 26rpx;
}

.flex-postion label {
  font-size: 24rpx;
  color: #9b9b9b;
  margin-left: 10rpx;
}

.m-nearbylist {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flex-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-info view {
  margin: 10rpx 0 0 0;
  font-size: 28rpx;
}

.flex-info-box {
  display: flex;
  align-items: flex-start;
}

.flex-info label {
  display: inline-block;
  vertical-align: top;
  word-wrap: break-word;
  width: 520rpx;
}

.flex-info image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: 10rpx;
}

.flex-info-title {
  flex-basis: 145rpx;
}

.open_ba {
  width: 80%;
  margin: 0 auto;
}

.open_dl {
  width: 34%;
  height: 79rpx;
  background: #33cc66;
  border-radius: 20rpx;
  text-align: center;
  color: #fff;
  margin: 79rpx auto 0 auto;
  line-height: 75rpx;
}

.nearbylist-item {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
  background: white;
}

.nearbylist-item:last-child {
  border: none;
}

.item-info {
  position: relative;
  font-size: 28rpx;
}

.item-name {
  display: inline-block;
  font-size: 30rpx;
}

.item-phone {
  line-height: 45rpx;
  display: flex;
  align-items: center;
}

.item-distance {
  float: right;
  font-size: 26rpx;
  color: #bbb;
}

.item-address {
  position: relative;
  font-size: 26rpx;
  color: #bbb;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-right: 40rpx;
  line-height: 40rpx;
}

.item-info::after {
  content: " ";
  display: inline-block;
  height: 12rpx;
  width: 12rpx;
  border-width: 4rpx 4rpx 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: -4rpx;
  position: absolute;
  top: 72%;
  right: 4rpx;
  padding: 3rpx;
}

.m-nearbylist {
  height: 100%;
  position: absolute;
}

.uni-media-list-logo {
  width: 140rpx;
  height: 140rpx;
}

.uni-media-list-body {
  height: auto;
  justify-content: space-around;
}

.uni-media-list-text-top {
  height: 74rpx;
  font-size: 28rpx;
  overflow: hidden;
}

.uni-media-list-text-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.uni-media-list-text-bottom text {
  width: 400rpx;
}
.uni-media-list-text-bottom image {
  width: 20rpx;
  height: 26rpx;
}

.uni-media-list-text-bottom label {
  font-size: 24rpx;
  color: #9b9b9b;
  margin-left: 10rpx;
}

.uni-list-cell {
  position: auto;
}

.m-nearbylist {
  top: 88rpx;
}

.order-list {
  // margin-top: 80rpx;
  background-color: #f5f5f5;

  width: 100%;
  .list {
    width: 100%;
    margin: 0 auto;
    .onorder {
      width: 100%;
      height: 50vw;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      image {
        width: 20vw;
        height: 20vw;
        border-radius: 100%;
      }
      .text {
        width: 100%;
        height: 60rpx;
        font-size: 28rpx;
        color: #444;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .row {
      width: calc(100% - 40rpx);
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin-bottom: 30rpx;
      .type {
        font-size: 26rpx;
        color: #ec652f;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
      .order-info {
        width: 100%;
        height: 100rpx;
        padding: 10rpx 0;
        display: flex;
        .left {
          flex-shrink: 0;
          width: 13vw;
          height: 13vw;
          image {
            width: 13vw;
            height: 13vw;
            border-radius: 10rpx;
          }
        }
        .right {
          width: 100%;
          position: relative;
          padding: 0 18rpx 0;
          .name {
            width: 100%;
            height: 50rpx;
            font-size: 28rpx;
            // display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
          }
          .spec {
            color: #a7a7a7;
            font-size: 22rpx;
          }
          .price-number {
            position: absolute;
            // bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 22rpx;
            color: #333;
            display: flex;
            align-items: flex-end;
            .price {
              font-size: 24rpx;
              margin-right: 5rpx;
            }
          }
        }
      }
      .detail {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 60rpx;
        font-size: 26rpx;
        .sum {
          padding: 0 8rpx;
          display: flex;
          align-items: flex-end;
          .price {
            font-size: 30rpx;
          }
        }
      }
      .btns {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        view {
          min-width: 120rpx;
          height: 50rpx;
          padding: 0 20rpx;
          border-radius: 50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          margin-left: 20rpx;
        }
        .default {
          border: solid 1rpx #ccc;
          color: #666;
        }
        .pay {
          border: solid 1rpx #ec652f;
          color: #ec652f;
        }
      }
    }
  }
}

.u-font {
  font-size: 24rpx;
  color: #bfbfbf;
  padding: 0 10rpx;
  margin-top: 4rpx;
}

.evaluation-rate {
  color: #ffb400;
}

.store-name {
  width: 290rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-weight: bold;
}

.u-activity {
  padding: 0 6rpx;
  border: solid 2rpx #ec652f;
  border-radius: 8%;
  font-size: 16rpx;
  color: #ec652f;
  text-align: center;
  // max-width:150rpx;
  margin: 0 10rpx;
}

.product-item {
  width: 100%;
  height: 260rpx;
  margin-top: 20rpx;

  display: flex;
  justify-content: flex-start;
}

.item-s {
  width: 31%;
  height: 100%;
  border-radius: 10rpx;
  // padding:10rpx 0;

  .p-bottom {
    // position: relative;
    bottom: 70rpx;
    padding: 10rpx;
  }
  .p-image {
    width: 27vw;
    height: 25vw;
    image {
      width: 27vw;
      height: 25vw;
      border-radius: 10rpx;
    }

    .flag {
      position: relative;
      z-index: 2;
      width: 50px;
      height: 20px;
      // top:10px;
      left: 21px;
      font-size: 10px;
      line-height: 20px;
      text-align: center;
      color: #fff;
    }
    .flag-reduction {
      background-color: #e50dbb;
      z-index: 8;
      float: left;
    }
  }

  .p-name {
    // width:150rpx;
    // height:45rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20rpx;
    // color:#f5f5f5;
    line-height: 1;
  }

  .p-price {
    // width:150rpx;
    // height:45rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .p-left {
      font-size: 24rpx;
      color: #db384c;
      // color:#f5f5f5;
    }

    .p-right {
      font-size: 20rpx;
      color: #bfbfbf;
      margin-left: 10rpx;
      text-decoration: line-through;
    }
  }
}

.scroll-view_S {
  width: 100%;
  height: 100rpx;
  background: rgba(245, 245, 245, 1);
  white-space: nowrap;
  // position: absolute;
  // top:calc(var(--status-bar-height) + 82rpx);
}

.scroll-view-item_S {
  // width: 90rpx;
  height: 60rpx;
  display: inline-block;
  padding: 20rpx;
  line-height: 60rpx;
}

.nav-text {
  width: 100%;
  height: 24rpx;
  font-size: 16rpx;
  // font-family:HelveticaNeue;
  color: rgba(51, 51, 51, 1);
  line-height: 24rpx;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m-navbar-item {
  padding: 20rpx 0;
  font-size: 24rpx;
}

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

.m-navbar-item.m-navbar-item-on {
  background-color: #f5f5f5;
  font-weight: bold;
  // color: $default-skin-bg;
  font-size: 30rpx;
}

.m-navbar-item.m-navbar-item-on::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 6rpx;
  border-bottom: 6rpx solid $default-skin-bg;
  color: #cccccc;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  z-index: 3;
}
</style>
