<template>
  <scroll-view scroll-y="true" class="pointsBox">
    <!-- <authorize ref="authorize"></authorize> -->
    <div class="points-top">
      <div class="uni-form-item uni-column header-search">
        <div class="search-input">
          <input
            class="uni-input"
            v-model="condition.name"
            confirm-type="search"
            @confirm="getProductList"
          />
          <img class="searchIcon" :src="searchIcon"/>
          <span class="searchText" @click="getProductList">搜索</span>
        </div>
        <div
          :class="{
            myPonits: true,
            blueMyPonits: custTypeId === 1,
            greenMyPonits: custTypeId === 2,
          }"
        >
          <div style="font-size: 30px">{{ integral }}</div>
          <div style="font-size: 26px">我的积分</div>
        </div>
      </div>
      <!-- <div :class="{'classify': custTypeId === 0, 'blueClassify': custTypeId === 1, 'greenClassify': custTypeId === 2}">
                <div :class="{ 'classifyItem': true, 'isChecked': condition.tabTag === item.value }" v-for="(item, index) in classifyList" :key="index">
                    <div @click="changeClassify(item.value)">{{item.key}}</div>
                    <div class="classifyBorder"></div>
                </div>
            </div> -->
      <div
        :class="{
          classify: custTypeId === 0,
          blueClassify: custTypeId === 1,
          greenClassify: custTypeId === 2,
        }"
      >
        <div
          :class="{
            classifyItem: true,
            isChecked: condition.tabTag === item.value,
          }"
          v-for="(item, index) in classifyList"
          :key="index"
        >
          <div @click="changeClassify(item.value)">{{ item.key }}</div>
          <div class="classifyBorder"></div>
        </div>
      </div>
      <div
        :class="{
          sorting: true,
          blueSorting: custTypeId === 1,
          greenSorting: custTypeId === 2,
        }"
      >
        <div
          class="sortItem"
          :class="comprehensive !== null ? ' isActived' : ''"
          @click="chooseSorts('comprehensive')"
        >
          <div>综合</div>
          <div class="sortIcons">
            <img
              class="upIcon"
              :src="comprehensive == 1 ? triUpActivedIcon : triUpIcon"
            />
            <img
              class="downIcon"
              :src="comprehensive == 0 ? triDownActivedIcon : triDownIcon"
            />
          </div>
        </div>
        <div
          class="sortItem"
          :class="sales !== null ? ' isActived' : ''"
          @click="chooseSorts('sales')"
        >
          <div>销量</div>
          <div class="sortIcons">
            <img
              class="upIcon"
              :src="sales == 1 ? triUpActivedIcon : triUpIcon"
            />
            <img
              class="downIcon"
              :src="sales == 0 ? triDownActivedIcon : triDownIcon"
            />
          </div>
        </div>
        <div
          class="sortItem"
          :class="price !== null ? ' isActived' : ''"
          @click="chooseSorts('price')"
        >
          <div>价格</div>
          <div class="sortIcons">
            <img
              class="upIcon"
              :src="price == 1 ? triUpActivedIcon : triUpIcon"
            />
            <img
              class="downIcon"
              :src="price == 0 ? triDownActivedIcon : triDownIcon"
            />
          </div>
        </div>
        <div
          class="sortItem sortClassify"
          :class="isNavClassify ? ' isActived' : ''"
          @click="chooseSorts('isNavClassify')"
        >
          <img
            :src="isNavClassify ? navClassifyActivedIcon : navClassifyIcon"
          />
          <div>分类</div>
        </div>
      </div>
    </div>

    <!-- pubuliu -->
    <div
      class="product-list products"
      v-if="products.length"
      :class="{ products1: custTypeId === 1, products1: custTypeId === 2 }"
    >
      <!-- flex-direction: column;display:flex;flex-wrap:wrap;  -->
      <div class="productItem" style="margin-left: 32px; margin-right: 11px">
        <div
          :class="{
            'single-p': true,
            'blueSingle-p': custTypeId === 1,
            'greenSingle-p': custTypeId === 2,
          }"
          v-for="(item, index1) in products"
          :key="index1"
          v-if="index1 % 2 == 0"
          @click="goToDetail(item)"
        >
          <div class="single-p-t">
            <div v-if="custTypeId != 0">
              <label-tip
                :labelTip="labelTip"
                v-if="item.isSpike == '1'"
              ></label-tip>
              <div class="sellBg" v-if="item.batchAvailableNum == 0">
                <img class="imgNull" :src="sellOut" mode="widthFix"/>
              </div>
              <img
                class="imgNull1"
                v-if="item.isComingSoon == '1'"
                :src="toSell"
                mode="widthFix"
              />
            </div>
            <img
              class="productImg"
              :class="'productImg' + index1"
              :src="picUrl + item.picture"
              v-if="String(item.imageUrl).indexOf('http') == -1"
              mode="widthFix"
            />
            <img
              class="productImg"
              :class="'productImg' + index1"
              :src="item.picture"
              v-else
              mode="widthFix"
            />
          </div>
          <div class="single-p-b">
            <div class="productTitle">{{ item.ticketName }}</div>
            <div
              class="productTag"
              v-if="
                custTypeId !== 0 &&
                item.gradeLimit != null &&
                item.gradeLimit != ''
              "
              :class="{ productTag1: custTypeId === 2 }"
              >{{ item.gradeLimit }}
            </div>
            <div class="prices">
              <div class="left">
                <div class="productPrice" v-if="item.convertible === '1'">
                  <div class="prodectPricePoints" v-if="item.exType == '1'">
                    <span>{{ item.exIntegral || 0 }}</span
                    >积分
                  </div>
                  <div
                    class="prodectPricePoints"
                    v-else-if="item.exType == '2'"
                  >
                    <span>{{ item.exMoney }}</span
                    >元
                  </div>
                  <div class="prodectPricePoints" v-else>
                    <span>{{ item.exIntegral || 0 }}</span
                    >积分+<span>{{ item.exMoney }}</span> 元
                  </div>
                  <!-- <uni-div class="prodectPriceCard">
                                        <img :src="productCardIcon"/>
                                    </uni-div> -->
                </div>
                <div class="productStop" v-else>
                  <div class="productStopText">不可兑换</div>
                </div>
              </div>
              <div
                class="prePrice"
                v-if="custTypeId !== 0 && item.originalExchangePrice != null"
                >{{ item.originalExchangePrice }}</div
              >
            </div>
            <div class="productExchanged">
              <soan>{{ item.saleNum }} 人已兑换</soan>
              <!-- iscollect: 0 收藏， 1未收藏 -->
              <div
                v-if="item.isShare == 0"
                class="islike"
                @click.stop="likePoints(item)"
              >
                <div v-if="custTypeId == 0">
                  <img
                    class="islikeImg"
                    :src="item.iscollect == '1' ? unlikeIcon : likeIcon"
                    mode="widthFix"
                  />
                  <span :class="item.iscollect == '1' ? '' : 'liked'">{{
                    item.iscollect == '1' ? '收藏' : '已收藏'
                  }}</span>
                </div>
                <div v-if="custTypeId == 1">
                  <img
                    class="islikeImg"
                    :src="item.iscollect == '1' ? unlikeIcon1 : blueLike"
                    mode="widthFix"
                  />
                  <span :class="item.iscollect == '1' ? '' : 'blueLiked'">{{
                    item.iscollect == '1' ? '收藏' : '已收藏'
                  }}</span>
                </div>
                <div v-if="custTypeId == 2">
                  <img
                    class="islikeImg"
                    :src="item.iscollect == '1' ? unlikeIcon1 : greenLike"
                    mode="widthFix"
                  />
                  <span :class="item.iscollect == '1' ? '' : 'greenLiked'">{{
                    item.iscollect == '1' ? '收藏' : '已收藏'
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="productItem" style="margin-left: 11px; margin-right: 32px">
        <div
          :class="{
            'single-p': true,
            'blueSingle-p': custTypeId === 1,
            'greenSingle-p': custTypeId === 2,
          }"
          v-for="(item, index1) in products"
          :key="index1"
          v-if="index1 % 2 != 0"
          @click="goToDetail(item)"
        >
          <div class="single-p-t">
            <div v-if="custTypeId != 0">
              <label-tip
                :labelTip="labelTip"
                v-if="item.isSpike == '1'"
              ></label-tip>
              <div class="sellBg" v-if="item.batchAvailableNum == 0">
                <img class="imgNull" :src="sellOut" mode="widthFix"/>
              </div>
              <img
                class="imgNull1"
                v-if="item.isComingSoon == '1'"
                :src="toSell"
                mode="widthFix"
              />
            </div>
            <img
              class="productImg"
              :class="'productImg' + index1"
              :src="picUrl + item.picture"
              v-if="String(item.imageUrl).indexOf('http') == -1"
              mode="widthFix"
            />
            <img
              class="productImg"
              :class="'productImg' + index1"
              :src="item.picture"
              v-else
              mode="widthFix"
            />
          </div>
          <div class="single-p-b">
            <div class="productTitle">{{ item.ticketName }}</div>
            <div
              class="productTag"
              v-if="
                custTypeId !== 0 &&
                item.gradeLimit != null &&
                item.gradeLimit != ''
              "
              :class="{ productTag1: custTypeId === 2 }"
              >{{ item.gradeLimit }}
            </div>
            <div class="prices">
              <div class="left">
                <div class="productPrice" v-if="item.convertible === '1'">
                  <div class="prodectPricePoints" v-if="item.exType == '1'">
                    <span>{{ item.exIntegral || 0 }}</span
                    >积分
                  </div>
                  <div
                    class="prodectPricePoints"
                    v-else-if="item.exType == '2'"
                  >
                    <span>{{ item.exMoney }}</span
                    >元
                  </div>
                  <div class="prodectPricePoints" v-else>
                    <span>{{ item.exIntegral || 0 }}</span
                    >积分+<span>{{ item.exMoney }}</span> 元
                  </div>
                  <!-- <uni-div class="prodectPriceCard">
                                        <img :src="productCardIcon"/>
                                    </uni-div> -->
                </div>
                <div class="productStop" v-else>
                  <div class="productStopText">不可兑换</div>
                </div>
              </div>
              <div
                class="prePrice"
                v-if="custTypeId !== 0 && item.originalExchangePrice != null"
                >{{ item.originalExchangePrice }}</div
              >
            </div>
            <div class="productExchanged">
              <span>{{ item.saleNum }} 人已兑换</span>
              <!-- iscollect: 0 收藏， 1未收藏 -->
              <div
                v-if="item.isShare == 0"
                class="islike"
                @click.stop="likePoints(item)"
              >
                <div v-if="custTypeId == 0">
                  <img
                    class="islikeImg"
                    :src="item.iscollect == '1' ? unlikeIcon : likeIcon"
                    mode="widthFix"
                  />
                  <span :class="item.iscollect == '1' ? '' : 'liked'">{{
                    item.iscollect == '1' ? '收藏' : '已收藏'
                  }}</span>
                </div>
                <div v-if="custTypeId == 1">
                  <img
                    class="islikeImg"
                    :src="item.iscollect == '1' ? unlikeIcon1 : blueLike"
                    mode="widthFix"
                  />
                  <span :class="item.iscollect == '1' ? '' : 'blueLiked'">{{
                    item.iscollect == '1' ? '收藏' : '已收藏'
                  }}</span>
                </div>
                <div v-if="custTypeId == 2">
                  <img
                    class="islikeImg"
                    :src="item.iscollect == '1' ? unlikeIcon1 : greenLike"
                    mode="widthFix"
                  />
                  <span :class="item.iscollect == '1' ? '' : 'greenLiked'">{{
                    item.iscollect == '1' ? '收藏' : '已收藏'
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nomore" v-show="loading" style="color: #bd9035">
        加载中...
      </div>
      <div class="nomore" v-show="noMore" style="color: #bd9035">
        没有更多了
      </div>
    </div>
    <!-- 没有数据的占位展示 -->
    <div class="no-products" v-else>
      <div class="no-product-info">
        <img class="no-product-img" :src="noTickets"/>
        <div class="no-product-text">暂时没有相关兑换商品</div>
      </div>
    </div>
    <!-- 侧边抽屉 -->
    <uni-drawer ref="showRight" mode="right" maskClick="false">
      <scroll-view class="drawerClassify" style="height: 100%" scroll-y="true">
        <div class="drawerClassifies">
          <div class="drawerItem drawerFormats">
            <div class="drawerClassifyTitle">业态</div>
            <div class="drawerClassifyOptions">
              <div
                v-for="(item, index) in formats"
                :key="index"
                :class="{
                  drawerClassifyOptionItem: true,
                  blueDrawerClassifyOptionItem: custTypeId === 1,
                  greenDrawerClassifyOptionItem: custTypeId === 2,
                  isChecked: item.isChecked && custTypeId === 0,
                  blueIsChecked: item.isChecked && custTypeId === 1,
                  greenIsChecked: item.isChecked && custTypeId === 2,
                }"
                @click="chooseOption(item)"
              >
                <div>{{ item.formatName }}</div>
              </div>
            </div>
          </div>
          <div class="drawerItem drawerFormats">
            <div class="drawerClassifyTitle">兑换类型</div>
            <div class="drawerClassifyOptions">
              <div
                v-for="(item, index) in exchangeTypes"
                :key="index"
                :class="{
                  drawerClassifyOptionItem: true,
                  blueDrawerClassifyOptionItem: custTypeId === 1,
                  greenDrawerClassifyOptionItem: custTypeId === 2,
                  isChecked: item.isChecked && custTypeId === 0,
                  blueIsChecked: item.isChecked && custTypeId === 1,
                  greenIsChecked: item.isChecked && custTypeId === 2,
                }"
                @click="chooseOption(item)"
              >
                <div>{{ item.label }}</div>
              </div>
            </div>
          </div>
          <div class="drawerItem drawerFormats">
            <div class="drawerClassifyTitle">积分范围</div>
            <div class="drawerClassifyOptions drawerClassifyInputs">
              <input
                class="uni-input"
                type="number"
                v-model="condition.minIntegral"
                placeholder="最低积分"
              />
              <span>-</span>
              <input
                class="uni-input"
                type="number"
                v-model="condition.maxIntegral"
                placeholder="最高积分"
              />
            </div>
          </div>
          <div class="drawerItem drawerFormats" style="padding-bottom: 120px">
            <div class="drawerClassifyTitle">会员等级</div>
            <div class="drawerClassifyOptions">
              <div
                v-for="(item, index) in grades"
                :key="index"
                :class="{
                  drawerClassifyOptionItem: true,
                  blueDrawerClassifyOptionItem: custTypeId === 1,
                  greenDrawerClassifyOptionItem: custTypeId === 2,
                  isChecked: item.isChecked && custTypeId === 0,
                  blueIsChecked: item.isChecked && custTypeId === 1,
                  greenIsChecked: item.isChecked && custTypeId === 2,
                }"
                @click="chooseOption(item)"
              >
                <div>{{ item.desc }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="drawerBtns">
          <div
            :class="{
              drawerBtnItem: true,
              blueDrawerBtnItem: custTypeId === 1,
              greenDrawerBtnItem: custTypeId === 2,
              drawerBtnCancle: true,
              blueDrawerBtnCancle: custTypeId === 1,
              greenDrawerBtnCancle: custTypeId === 2,
            }"
            @click="closeDrawer"
            >取消</div
          >
          <div
            :class="{
              drawerBtnItem: true,
              blueDrawerBtnItem: custTypeId === 1,
              greenDrawerBtnItem: custTypeId === 2,
              drawerBtnCancle: true,
              blueDrawerBtnCancle: custTypeId === 1,
              greenDrawerBtnCancle: custTypeId === 2,
            }"
            @click="resetDrawer"
            >重置</div
          >
          <div
            :class="{
              drawerBtnItem: true,
              blueDrawerBtnItem: custTypeId === 1,
              greenDrawerBtnItem: custTypeId === 2,
              drawerBtnComfirm: custTypeId === 0,
              blueDrawerBtnComfirm: custTypeId === 1,
              greenDrawerBtnComfirm: custTypeId === 2,
            }"
            @click="comfirmDrawer"
            >确认</div
          >
        </div>
      </scroll-view>
    </uni-drawer>
    <!-- 收藏成功弹窗 -->
    <uni-popup ref="popup" type="center" class="uni-popup" :mask-click="false">
      <div class="popup-like">
        <div class="popup-like-body">
          <div class="title">收藏电子券</div>
          <div class="img-text">
            <img
              v-if="custTypeId === 0"
              class="img"
              :src="likedIcon"
              mode="widthFix"
            />
            <img
              v-if="custTypeId === 1"
              class="img"
              :src="blueLiked"
              mode="widthFix"
            />
            <img
              v-if="custTypeId === 2"
              class="img"
              :src="greenLiked"
              mode="widthFix"
            />
            <div class="text">恭喜您已收藏该电子券！</div>
          </div>
        </div>
        <div class="popup-like-footer" @click="close">确认</div>
      </div>
    </uni-popup>
    <!-- 取消收藏前的弹窗 -->
    <uni-popup
      ref="popupUnlike"
      type="dialog"
      class="uni-popup"
      :mask-click="false"
    >
      <div class="popup-like">
        <div class="popup-like-body">
          <div class="title">取消收藏</div>
          <div class="img-text">
            <div class="text">您确认要求取消收藏该电子券吗？</div>
          </div>
        </div>
        <div class="popup-unlike-footer">
          <div class="popup-unlike-footer-item" @click="close">返回</div>
          <div
            class="popup-unlike-footer-item"
            @click="likePoints(temporaryProduct)"
            >确认</div
          >
        </div>
      </div>
    </uni-popup>
  </scroll-view>
</template>

<script>
// var app = getApp()
const app = {
  globalData:{
    regSource:''
  }
};
// import authorize from '@/components/authorize/authorize.vue'
import searchIcon from '../../static/images/points-mail-search.png'
import triUpIcon from '../../static/images/pointsMail/triangle-up.png'
import triUpActivedIcon from '../../static/images/pointsMail/triangle-up-actived.png'
import triDownIcon from '../../static/images/pointsMail/triangle-down.png'
import triDownActivedIcon from '../../static/images/pointsMail/triangle-down-actived.png'
import navClassifyIcon from '../../static/images/pointsMail/nav-classify.png'
import navClassifyActivedIcon from '../../static/images/pointsMail/nav-classify-actived.png'
import productCardIcon from '../../static/images/pointsMail/product-card.png'
import likeIcon from '../activity/static/activity-liked.png'
import unlikeIcon from '../activity/static/activity-unlike.png'
import unlikeIcon1 from '../activity/static/collectionList.png'
import likedIcon from '../../static/images/loggedOff/icon.png'
import blueLike from './static/images/blueLike.png'
import greenLike from './static/images/greenLike.png'
import blueLiked from '../../static/images/loggedOff/icon-blue.png'
import greenLiked from '../../static/images/loggedOff/icon-green.png'
import sellOut from '@/static/images/pointsMail/sellOut.png'
import toSell from '@/static/images/pointsMail/toSell.png'
import noTickets from './static/images/noTickets.png'
const noProductImg = `/20210908/d83c7ae2db704b7c986534c12b8b134e.png`
import labelTip from '@/components/label-tip/index'
import { mapState } from 'vuex'
import { REG_SOURCE } from '@/constants.js'
export default {
  data() {
    return {
      picUrl: this.$picUrl,
      globalData: app.globalData,
      searchIcon: searchIcon,
      triUpIcon: triUpIcon,
      triUpActivedIcon: triUpActivedIcon,
      triDownIcon: triDownIcon,
      triDownActivedIcon: triDownActivedIcon,
      navClassifyIcon: navClassifyIcon,
      navClassifyActivedIcon: navClassifyActivedIcon,
      productCardIcon: productCardIcon,
      likeIcon: likeIcon,
      unlikeIcon: unlikeIcon,
      unlikeIcon1: unlikeIcon1,
      noProductImg: noProductImg,
      likedIcon: likedIcon,
      blueLike: blueLike,
      greenLike: greenLike,
      blueLiked: blueLiked,
      greenLiked: greenLiked,
      sellOut: sellOut,
      toSell: toSell,
      noTickets: noTickets,
      classifyList: [],
      sortingList: ['综合', '销量', '价格', '分类'],
      // 分类条件
      formats: ['综合', '销量', '价格', '分类', '卡卡'],
      // 兑换类型
      exchangeTypes: ['综的合', '销的量', '价的格', '分的类', '卡的卡'],
      // 会员等级
      grades: ['铂金会员', '金卡会员', '银卡会员'],
      // 升序1,上箭头亮  降序0
      comprehensive: null,
      sales: null,
      price: null,
      // 初始状态
      condition: {
        name: '', // |string|否|券名称
        tabTag: '0', // |string|否| tab标签检索条件 1：可兑换商品   非1:全部
        formats: '', // |string|否| 业态检索条件  逗号拼接id，如 ”“
        exchangeTypes: '', // |string|否| 兑换类型检索条件
        grades: '', // gades|string|否| 会员等级检索条件  逗号拼接id，如 ”“
        minIntegral: '', // |string|否| 积分检索条件 最低积分
        maxIntegral: '', // |string|否| 积分检索条件 最大积分
        isComprehensive: 0, // |string|否| 是否综合排序 0:否 1：是（按电子券录入时间升降排序）
        isComprehensiveAsc: false, // |boolean|否| 综合排序是否升序
        isSale: 0, // |string|否| 是否销量排序 0:否 1：是（按已兑换销售数量升降排序）
        isSaleAsc: false, //|boolean|否| 销量排序是否升序
        isIntegral: 0, //|string|否| 是否价格排序 0:否 1：是（按已兑换积分升降序排）
        isIntegralAsc: false, //|boolean|否| 价格排序是否升序
      },
      isNavClassify: false,
      loading: false,
      noMore: false,
      products: [],
      integral: 0,
      // 用于临时存放要取消保存的对象
      temporaryProduct: null,
      labelTip: '积分秒杀',
      options: null,
      preUrl: '',
    }
  },
  components: {
    // authorize,
    labelTip,
  },
  computed: {
    // custTypeId: 0 默认版本，1 上海静安 2 上海浦东
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  watch: {
    isNavClassify: function (newVal, oldVal) {
      if (newVal) this.showDrawer()
    },
    comprehensive: function (newVal, oldVal) {
      if (newVal == 1) {
        this.condition.isComprehensive = 1
        this.condition.isComprehensiveAsc = true
      } else if (newVal == 0) {
        this.condition.isComprehensive = 1
        this.condition.isComprehensiveAsc = false
      } else {
        this.condition.isComprehensive = 0
        this.condition.isComprehensiveAsc = false
      }
      this.getProductList()
    },
    sales: function (newVal, oldVal) {
      if (newVal == 1) {
        this.condition.isSale = 1
        this.condition.isSaleAsc = true
      } else if (newVal == 0) {
        this.condition.isSale = 1
        this.condition.isSaleAsc = false
      } else {
        this.condition.isSale = 0
        this.condition.isSaleAsc = false
      }
      this.getProductList()
    },
    price: function (newVal, oldVal) {
      if (newVal == 1) {
        this.condition.isIntegral = 1
        this.condition.isIntegralAsc = true
      } else if (newVal == 0) {
        this.condition.isIntegral = 1
        this.condition.isIntegralAsc = false
      } else {
        this.condition.isIntegral = 0
        this.condition.isIntegralAsc = false
      }
      this.getProductList()
    },
  },
  // onLoad(params) {
  //     this.condition.exchangeTypes = params.exchangeTypes;
  // },
  async onLoad(options) {
    this.options = options
    await this.$onLaunched
    this.picUrl = this.$picUrl
    this.condition.exchangeTypes = options.exchangeTypes
    // 场景二维码记录(是否扫码进入)
    if (options.scene) {
      this.getMiniCodeParam(options.scene)
    } else {
      app.globalData.pullVipcode = options.pullVipcode || ''
      app.globalData.paramsScene = {}
      this.setLoginInfo()
    }
    // 测试专用-强行更换到浦东
    // app.globalData.groupId = '8a8480487c96d58f017c9b7bab7d0020';
    // uni.setStorageSync('groupId', '8a8480487c96d58f017c9b7bab7d0020');
    // app.globalData.mallid = '8a8481f57cca9442017ce02875b8004a';
    // uni.setStorageSync('mallid', '8a8481f57cca9442017ce02875b8004a');
    this.preUrl = uni.getStorageSync('previousUrl')
    uni.setStorageSync('previousUrl', '/pages/pointsMall/pointsMall.vue')
  },
  onShow() {
    //   this.getclassifyList();
    this.getMemberDetail()
  },
  mounted() {},
  methods: {
    // 根据场景二维码获取参数
    getMiniCodeParam: function (scene) {
      this.$md({
        scene: scene,
      })
      uni.request({
        url: this.$baseURL + 'api/1.0/login/getMiniCodeParam',
        data: {
          scene: scene,
        },
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          if (res.data.code == 0) {
            const data = res.data.data
            app.globalData.paramsScene = data
            this.setLoginInfo()
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000,
            })
          }
        },
      })
    },
    // 设置授权后信息
    setLoginInfo: function () {
      console.log('setLoginInfo', '492行2')
      if (!app.globalData.member) {
        const regSource = REG_SOURCE.ACTIVITY
        app.globalData.regSource = regSource
        if (this.options?.regSource) {
          app.globalData.regSource = REG_SOURCE[this.options?.regSource]
        }
        if (this.options?.tpName) {
          app.globalData.tpName = this.options?.tpName
        }
      }
      if (this.$store.state.custTypeId === 0) {
        var ths = this
        // #ifdef MP-WEIXIN
        if (app.globalData.member) {
          app.globalData.isNewMember = ''
          ths.$saveSceneQrcodeDetail(
            'page',
            'pointsMall',
            '积分商城',
            '',
            '',
            '',
            ''
          )
          ths.getMemberDetail()
          ths.getClassifyOptions()
          ths.getclassifyList()
        } else {
          ths.$refs.authorize.login(
            '/pages/pointsMall/pointsMall',
            function () {
              ths.$saveSceneQrcodeDetail(
                'page',
                'pointsMall',
                '积分商城',
                '',
                '',
                '',
                ''
              )
              // 拉新会员记录
              if (app.globalData.isNewMember == 1) {
                ths.$savePullVipcode(
                  app.globalData.pullVipcode,
                  '',
                  'pointsMall'
                )
              }
              ths.getMemberDetail()
              ths.getClassifyOptions()
              ths.getclassifyList()
              ths.getProductList()
            }
          )
        }
        // #endif
      } else {
        var ths = this
        // #ifdef MP-WEIXIN
        if (app.globalData.member) {
          app.globalData.isNewMember = ''
          ths.$saveSceneQrcodeDetail(
            'page',
            'pointsMall',
            '积分商城',
            '',
            '',
            '',
            ''
          )
          ths.getMemberDetail()
          ths.getClassifyOptions()
          ths.getclassifyList()
        } else {
          // ths.$refs.authorize.login("/pages/pointsMall/pointsMall", function () {
          ths.$saveSceneQrcodeDetail(
            'page',
            'pointsMall',
            '积分商城',
            '',
            '',
            '',
            ''
          )
          // 拉新会员记录
          if (app.globalData.isNewMember == 1) {
            ths.$savePullVipcode(app.globalData.pullVipcode, '', 'pointsMall')
          }
          // ths.getMemberDetail();
          ths.condition.tabTag = 0
          ths.getClassifyOptions()
          ths.getclassifyList()
          ths.getProductList()
          // });
        }
        // #endif
      }
    },
    // 获取积分商城Tab列表
    getclassifyList() {
      // console.log(this.$store.state.custTypeId)
      if (this.$store.state.custTypeId === 0) {
        this.classifyList = [
          {
            isDefault: true,
            value: '0',
            key: '全部商品',
          },
          {
            isDefault: false,
            value: '1',
            key: '可兑换商品',
          },
        ]
        if (!this.condition.tabTag) {
          this.condition.tabTag = this.classifyList[0].value
        }
        this.getProductList()
      } else {
        const params = {
          groupId: app.globalData.groupId,
          mallid: app.globalData.mallid,
        }
        if (app.globalData.member) {
          params.vipcode = app.globalData.member.vipcode
        } else {
          params.vipcode = ''
        }
        this.$md(params)
        uni.request({
          url: this.$baseURL + 'api/1.0/ticket/getIntegralMallTabListForVVIP',
          data: params,
          method: 'post',
          header: JSON.parse(uni.getStorageSync('handleUser')),
          success: (res) => {
            console.log('获取积分商城Tab列表', res.data)
            if (res.data.code === 0) {
              if (app.globalData.member) {
                this.classifyList = res.data.data
                //  this.condition.tabTag = this.classifyList[0].value;
                this.condition.tabTag =
                  this.classifyList[this.classifyList.length - 1].value
                console.log('获取积分商城Tab列表', this.condition.tabTag)
                // if (!this.condition.tabTag) {
                //     this.condition.tabTag = this.classifyList[0].value;
                // }
                this.getProductList()
              } else {
                this.classifyList = [
                  {
                    isDefault: false,
                    value: '0',
                    key: '全部商品',
                  },
                ]
              }
            }
          },
        })
      }

      // 接口暂时还没有，就用测试用例进行测试
      // this.classifyList = [{
      //     "isDefault": true,
      //     "value": "1",
      //     "key": "可兑换商品"
      // },
      // {
      //     "isDefault": false,
      //     "value": "2",
      //     "key": "卡等升级专享"
      // },
      // {
      //     "isDefault": false,
      //     "value": "3",
      //     "key": "秒杀商品"
      // },
      // {
      //     "isDefault": false,
      //     "value": "0",
      //     "key": "全部商品"
      // }]
      // this.condition.tabTag = this.classifyList[0].value;
    },
    changeClassify(index) {
      this.condition.tabTag = index
      // let event = index == 0 ? '' : '';
      // this.sensorsClick(event, {
      //     ticket_id: item.ticketId,
      //     vipcode: app.globalData.member.vipcode,
      //     redirect_url: '',
      // })
      this.getProductList()
    },
    chooseSorts(str) {
      if (str == 'isNavClassify') this.isNavClassify = !this.isNavClassify
      else {
        const linshi = this[str]
        this.reset()
        this[str] = linshi
        this[str] = this[str] == null ? 1 : this[str] == 1 ? 0 : 1
        let sortingName =
            str == 'comprehensive'
              ? '综合'
              : str == 'sales'
              ? '销量'
              : str == 'price'
              ? '价格'
              : '',
          sortingRule = this[str] ? '升序' : '降序'
        this.sensorsClick('$Sorting', {
          cta_itemno: '',
          cta_name: sortingName,
          sorting_rule: sortingRule,
          redirect_url: '',
        })
      }
    },
    reset() {
      this.comprehensive = null
      this.sales = null
      this.price = null
    },
    showDrawer() {
      this.$refs.showRight.open()
    },
    chooseOption(obj) {
      // if (!obj.isChecked) obj.isChecked = true;
      // else obj.isChecked = false
      obj.isChecked = !obj.isChecked
    },
    comfirmDrawer() {
      // 积分是否是数字
      const testNum = /^\+?[1-9][0-9]*$/
      if (
        this.condition.minIntegral &&
        !testNum.test(this.condition.minIntegral)
      ) {
        uni.showToast({
          title: '最小积分输入有误，请重新输入',
          duration: 2000,
          icon: 'none',
        })
        this.condition.minIntegral = ''
        return
      }
      if (
        this.condition.maxIntegral &&
        !testNum.test(this.condition.maxIntegral)
      ) {
        uni.showToast({
          title: '最大积分输入有误，请重新输入',
          duration: 2000,
          icon: 'none',
        })
        this.condition.maxIntegral = ''
        return
      }
      // 积分大小
      if (
        this.condition.minIntegral &&
        this.condition.maxIntegral &&
        Number(this.condition.minIntegral) > Number(this.condition.maxIntegral)
      ) {
        uni.showToast({
          title: '最小积分不得大于最大积分，请重新输入',
          duration: 2000,
          icon: 'none',
        })
        return
      }
      // 整理筛选条件
      const conditionFormat = [],
        conditionExchangeTypes = [],
        conditionGrades = []
      // 埋点数组
      const categoryFormat = [],
        categoryExchangeTypes = [],
        categoryGrades = []
      this.formats.map((item) => {
        if (item.isChecked)
          conditionFormat.push(item.id), categoryFormat.push(item.formatName)
      })
      this.exchangeTypes.map((item) => {
        if (item.isChecked)
          conditionExchangeTypes.push(item.value),
            categoryExchangeTypes.push(item.label)
      })
      this.grades.map((item) => {
        if (item.isChecked)
          conditionGrades.push(item.membergrade), categoryGrades.push(item.desc)
      })
      this.condition.formats = conditionFormat.join(',')
      this.condition.exchangeTypes = conditionExchangeTypes.join(',')
      this.condition.grades = conditionGrades.join(',')
      // 埋点
      this.sensorsClick('$category', {
        category_types: categoryFormat.concat(
          categoryExchangeTypes,
          categoryGrades
        ),
        category_min_integral: this.condition.minIntegral,
        category_max_integral: this.condition.maxIntegral,
        redirect_url: '',
      })
      this.getProductList()
      this.closeDrawer()
    },
    closeDrawer() {
      this.isNavClassify = false
      this.$refs.showRight.close()
    },
    resetDrawer() {
      this.formats.map((item) => {
        item.isChecked = false
      })
      this.exchangeTypes.map((item) => {
        item.isChecked = false
      })
      this.grades.map((item) => {
        item.isChecked = false
      })
      this.condition.formats = ''
      this.condition.exchangeTypes = ''
      this.condition.grades = ''
      this.condition.minIntegral = ''
      this.condition.maxIntegral = ''
    },
    // 收藏弹窗关闭
    close() {
      this.$refs.popup.close()
      this.$refs.popupUnlike.close()
      this.temporaryProduct = null
    },
    search() {},
    // 获取分类条件
    getClassifyOptions() {
      // 1329609284362932225 SHJA
      this.$request({
        url: this.$baseURL + 'api/1.0/ticket/getIntegralSearchConditionList',
        data: {
          groupId: app.globalData.groupId,
          mallid: app.globalData.mallid,
        },
        method: 'get',
        header: JSON.parse(uni.getStorageSync('handleUser')),
      })
        .then((res) => {
          if (res.data.code == 0) {
            if (res.data.data) {
              const datas = res.data.data
              this.formats = datas.formats.map((item) => {
                return {
                  ...item,
                  isChecked: false,
                }
              })
              this.exchangeTypes = datas.exchangeTypes.map((item) => {
                return {
                  ...item,
                  isChecked: this.condition.exchangeTypes == item.value,
                }
              })
              this.grades = datas.grades.map((item) => {
                return {
                  ...item,
                  isChecked: false,
                }
              })
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getProductList() {
      // console.log('调用商品列表接口', params)
      // 搜索埋点
      this.sensorsClick('$ClickSearch', {
        search_key_word: this.condition.name,
        redirect_url :'',
      })
      uni.showLoading({
        title: '加载中',
      })
      if (this.$store.state.custTypeId === 0) {
        const params = {
          groupId: app.globalData.groupId,
          mallid: app.globalData.mallid,
          paramsCode: app.globalData.paramsCode || '',
          ...this.condition,
        }
        const member = app.globalData.member
        if (member) {
          params.grade = member.grade
          params.vipcode = member.vipcode
        }
        this.$md(params)
        this.$request({
          url: this.$baseURL + 'api/1.0/ticket/getIntegralMallList',
          data: params,
          method: 'post',
          header: JSON.parse(uni.getStorageSync('handleUser')),
        })
          .then((res) => {
            // console.log('商品列表', res.data)
            uni.hideLoading()
            if (res.data.code === 0) {
              if (
                res.data.data &&
                res.data.data.divisionModuleList.length > 0
              ) {
                this.products =
                  res.data.data.divisionModuleList[0].pageList[0].ticketPage
              } else {
                this.products = []
              }
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        if (app.globalData.member) {
          const params = {
            groupId: app.globalData.groupId,
            mallid: app.globalData.mallid,
            grade: app.globalData.member.grade,
            vipcode: app.globalData.member.vipcode,
            paramsCode: app.globalData.paramsCode,
            ...this.condition,
          }
          console.log(this.condition.tabTag, '813行')
          this.$md(params)
          uni.request({
            url: this.$baseURL + 'api/1.0/ticket/getIntegralMallListForVVIP',
            data: params,
            method: 'post',
            header: JSON.parse(uni.getStorageSync('handleUser')),
            success: (res) => {
              // console.log('商品列表', res.data)
              uni.hideLoading()
              if (res.data.code === 0) {
                if (
                  res.data.data &&
                  res.data.data.divisionModuleList.length > 0
                ) {
                  this.products =
                    res.data.data.divisionModuleList[0].pageList[0].ticketPage
                } else {
                  this.products = []
                }
              }
            },
          })
        } else {
          const params = {
            groupId: app.globalData.groupId,
            mallid: app.globalData.mallid,
            grade: '',
            vipcode: '',
            paramsCode: '',
            ...this.condition,
          }
          console.log(this.condition.tabTag, '842行')
          this.$md(params)
          uni.request({
            url: this.$baseURL + 'api/1.0/ticket/getIntegralMallListForVVIP',
            data: params,
            method: 'post',
            header: JSON.parse(uni.getStorageSync('handleUser')),
            success: (res) => {
              // console.log('商品列表', res.data)
              uni.hideLoading()
              if (res.data.code === 0) {
                if (
                  res.data.data &&
                  res.data.data.divisionModuleList.length > 0
                ) {
                  this.products =
                    res.data.data.divisionModuleList[0].pageList[0].ticketPage
                  this.products.forEach(function (item, index) {
                    item.iscollect = '1'
                  })
                } else {
                  this.products = []
                }
              }
            },
          })
        }
      }
    },
    goToDetail(item) {
      this.$router.push({
        path: '/pages/ticket/ticketDetails?id=' + item.ticketId,
      })
    },
    //获取用户信息
    getMemberDetail: function () {
      const member = app.globalData.member
      if (!member) {
        console.warn('===> 获取会员详情, 没有会员信息')
        return
      }
      var params = {
        groupId: app.globalData.groupId,
        mallid: app.globalData.mallid,
        mobile: app.globalData.member.mobile,
      }
      this.$md(params)
      this.$request({
        method: 'POST',
        url: this.$baseURL + 'api/1.0/member/getMemberInfo',
        header: JSON.parse(uni.getStorageSync('handleUser')),
        data: params,
      })
        .then((r) => {
          if (r.data.code == 0) {
            var result = r.data.data
            console.log('获取会员信息', result)
            this.integral = result.currnentintegral + ''
          } else {
            uni.showToast({
              title: '获取积分数据失败，请刷新后再试',
              duration: 2000,
              icon: 'none',
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 收藏
    beforeLike(item) {
      if (item.iscollect == '1') this.likePoints(item)
      else {
        this.$refs.popupUnlike.open()
        this.temporaryProduct = item
      }
    },
    likePoints(item) {
      const params = {
        groupId: app.globalData.groupId,
        mallId: app.globalData.mallid,
        ticketId: item.ticketId,
        vipcode: app.globalData.member.vipcode,
      }
      this.$md(params)
      // 收藏
      if (item.iscollect == '1') {
        item.iscollect = '0'
        uni.request({
          url: this.$baseURL + 'api/1.0/ticket/collectionTicket',
          data: params,
          method: 'post',
          header: JSON.parse(uni.getStorageSync('handleUser')),
          success: (res) => {
            console.log('收藏商品成功', res.data)
            if (res.data.code !== 0) {
              item.iscollect = '1'
              uni.showToast({
                title: '收藏商品失败，请刷新后再试',
                duration: 2000,
                icon: 'none',
              })
            } else {
              // 埋点
              this.sensorsClick('$ClickFavoritesIcon', {
                cta_itemno: '',
                cta_name: '',
                ticket_id: item.ticketId,
                vipcode: app.globalData.member.vipcode,
                redirect_url: '',
              })
            }
            // this.$refs.popup.open();
          },
        })
      } else {
        item.iscollect = '1'
        uni.request({
          url: this.$baseURL + 'api/1.0/ticket/cancelCollectionTicket',
          data: params,
          method: 'post',
          header: JSON.parse(uni.getStorageSync('handleUser')),
          success: (res) => {
            console.log('取消收藏商品成功', res.data)
            if (res.data.code !== 0) {
              item.iscollect = '0'
              uni.showToast({
                title: '取消收藏商品失败，请刷新后再试',
                duration: 2000,
                icon: 'none',
              })
            } else {
              this.sensorsClick('$ClickCancelFavoritesIcon', {
                cta_itemno: '',
                cta_name: '',
                ticket_id: item.ticketId,
                vipcode: app.globalData.member.vipcode,
                redirect_url: '',
              })
            }
            // this.$refs.popupUnlike.close();
          },
        })
      }
    },
    // 埋点方法
    sensorsClick(eventName, params) {
      let optionsQuery = uni.getStorageSync('options_query')
      let fixedParams = {
          previous_url: this.preUrl || '',
          // 原previous_url: uni.getStorageSync('previousUrl') || ''
          // previous_url: 使用sdk预置参数$referrer,
          $brand_id:uni.getStorageSync('groupId'),
          $location: uni.getStorageSync('mallid'),
          $channel: optionsQuery.channel || '',
          // $utm_lbs: this.optionsQuery.utm_lbs || '',
          $utm_channel: optionsQuery.utm_channel || '',
          $utm_method: optionsQuery.utm_method || '',
          $utm_source: optionsQuery.utm_source || '',
          $utm_function: optionsQuery.utm_function || '',
          $utm_user: optionsQuery.utm_user || '',
        },
        finalParams = Object.assign(fixedParams, params)
      this.$sensors.track(eventName, finalParams)
    },
  },
  // 分享好友
  onShareAppMessage: function (res) {
    let pullVipcode = ''
    if (app.globalData.member) {
      pullVipcode = app.globalData.member.vipcode
    } else {
      pullVipcode = ''
    }
    return {
      title: '积分商城',
      path:
        'pages/pointsMall/pointsMall?pullVipcode=' +
        pullVipcode +
        '&mallid=' +
        app.globalData.mallid,
    }
  },
  // 分享朋友圈
  onShareTimeline: function (res) {
    let pullVipcode = ''
    if (app.globalData.member) {
      pullVipcode = app.globalData.member.vipcode
    } else {
      pullVipcode = ''
    }
    return {
      title: '积分商城',
      path:
        'pages/pointsMall/pointsMall?pullVipcode=' +
        pullVipcode +
        '&mallid=' +
        app.globalData.mallid,
    }
  },
}
</script>

<style lang="less" scoped>
@import '../../styles/common.less';
@gray: #aca9a9;

.pointsBox {
  background-color: #eeeeee;
  height: 100vh;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
}

.points-top {
  width: 750px;
  height: auto;
  position: fixed;
  z-index: 99;

  .header-search {
    height: 88px;
    padding: 22px 0;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .search-input {
      flex: 1;
      position: relative;
      padding-left: 20px;

      .uni-input {
        border-radius: 50px;
        // border: 2px solid #dddddd;
        background-color: #eeeeee;
        padding: 10px 70px;
        font-size: 26px;
        // text-indent: 20px;
      }

      .searchIcon {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 40px;
        transform: translateY(-50%);
      }

      .searchText {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: @gray;
        z-index: 2;
        font-size: 22px;
      }
    }

    .myPonits {
      width: 80px;
      text-align: center;
    }
  }

  .myPonits {
    // position: absolute;
    // right: 10px;
    // top: 50%;
    // transform: translateY(-50%);
    // text-align: center;
    width: 80px;
    text-align: center;
  }

  .blueMyPonits {
    .colorMyPonits('blue');
  }

  .greenMyPonits {
    .colorMyPonits('green');
  }

  .colorMyPonits(@value) {
    @color: 'color-@{value}';
    color: @@color;
  }
}

.classify {
  display: flex;
  padding: 10px 32px;
  background-color: #ffffff;
  font-size: 28px;
  height: 88px;
  box-sizing: border-box;

  .classifyItem {
    flex: 1;
    color: @gray;
    text-align: center;

    .classifyBorder {
      width: 60px;
      margin: 20px auto 0;
      display: none;
    }
  }

  .isChecked {
    color: #000000;

    .classifyBorder {
      display: block;
      border: 2px solid #000000;
      background: #000000;
    }
  }
}

.blueClassify {
  .colorClassify('blue');
}

.greenClassify {
  .colorClassify('green');
}

.sorting {
  display: flex;
  // padding-top: 20px;
  background-color: #eeeeee;
  font-size: 26px;
  height: 88px;
  box-sizing: border-box;

  .sortItem {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: @gray;
    background-color: #ffffff;
    padding: 20px 0;

    .sortIcons {
      display: flex;
      flex-flow: column;

      img {
        width: 20px;
        height: 20px;
        position: relative;
      }

      .upIcon {
        top: 5px;
      }
    }
  }

  .sortClassify {
    img {
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
  }

  .isActived {
    color: #000000;
  }
}

.blueSorting {
  .colorSorting('blue');
}

.greenSorting {
  .colorSorting('green');
}

.colorSorting(@value) {
  @color: 'color-@{value}';
  padding-top: 0;

  .isActived {
    color: @@color;
  }
}

.product-list {
  // margin: 20px 10px 0;
  // display: flex;
  // flex-wrap: wrap;
  // height: calc(100vh - 210px);
  // overflow: auto;
  // margin-top: 300px;
  // position: fixed;
  width: 750px;
  height: auto;
  // height: calc(100vh - 195px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 50px;
  // padding-top: 22px;
  padding-top: 286px;
  background-color: #eeeeee;

  .productItem {
    // padding: 10px 20px;
    background-color: #eeeeee;
    border-radius: 20px;
    width: 332px;

    .single-p {
      // margin-bottom: 20px;
      // padding: 20px;
      // background-color: #ffffff;
      // border-radius: 20px;
      // width: 340px;
      width: 100%;
      padding: 0;
      background: #fff;
      margin: 0 0px 22px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
    }

    .blueSingle-p {
      .colorSingle-p('blue');
    }

    .greenSingle-p {
      .colorSingle-p('green');
    }

    .colorSingle-p(@value) {
      @color: 'color-@{value}';
      outline: 2px solid @color-gold;
      padding: 0px;
      // position: relative;
    }

    .single-p-t {
      position: relative;
      overflow: hidden;
    }

    .single-p-b {
      padding: 20px;
    }
    .sellBg {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #000;
      opacity: 0.6;
      display: flex;
      z-index: 3;
      align-content: center;
      justify-content: center;
      align-items: center;
      .imgNull {
        width: 100%;
        display: block;
      }
    }

    .imgNull1 {
      position: absolute;
      width: 100%;
      bottom: 0;
      z-index: 2;
      // height: 340px;
      // margin-bottom: 10px;
    }

    .productImg {
      width: 100%;
      display: block;
      // height: 340px;
      margin-bottom: 10px;
    }

    .productTitle {
      font-size: 26px;
      color: #000000;
      text-align: justify;
      // padding: 0 20px;
      margin-bottom: 10px;
    }

    .productPrice {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      // padding: 0 20px;
      .prodectPricePoints {
        font-size: 24px;
        color: #c49a6d;
      }

      .prodectPriceCard {
        width: 32px;
        height: 32px;

        > img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .productStop {
      // padding: 0 20px;
      margin-bottom: 10px;

      .productStopText {
        color: #aca9a9;
        font-size: 24px;
      }
    }

    .productExchanged {
      // padding: 0 20px;
      font-size: 24px;
      color: #b3b3b3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;

      .islike {
        .islikeImg {
          width: 20px;
          margin-right: 10px;
        }

        .liked {
          color: #662d91;
        }

        .blueLiked {
          color: @color-blue;
        }

        .greenLiked {
          color: @color-green;
        }
      }
    }
  }

  .nomore {
    margin-top: 10px;
    text-align: center;
    float: left;
    width: 100%;
    font-size: 26px;
  }
}

.products1 {
  .single-p-t {
    .productImg {
      margin: 0 !important;
    }
  }

  .single-p-b {
    padding: 10px 20px 10px 20px !important;

    .productTitle {
      color: #000;
      font-size: 28px;
      font-weight: 500;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      // margin-bottom: 0;
    }

    .productTag {
      font-size: 18px;
      border: 1px solid #c7b299;
      color: #c7b299;
      background: #023694;
      border-radius: 50px;
      padding: 6px 14px;
      float: left;
      margin-bottom: 10px;
    }

    .productTag1 {
      background: #0b683a;
    }

    .prices {
      display: flex;
      clear: both;
      align-items: baseline;

      .left {
        .productPrice {
          margin-bottom: 0;
          .prodectPricePoints {
            font-size: 22px;
            // margin: 4px 0;

            span {
              font-size: 28px;
            }
          }
          .productStop {
            font-size: 28px;
            color: #b3b3b3;
          }
        }
      }

      .prePrice {
        font-size: 24px;
        color: #b3b3b3;
        margin-left: 4%;
        // line-height: 50px;
        text-decoration: line-through;
      }
    }

    .productExchanged {
      font-size: 22px;
      color: #999;
      margin-bottom: 10px;

      // justify-content: flex-start;
      .islike {
        margin-left: 40px;
        display: flex;
        justify-content: flex-start;
        div {
          display: flex;
          align-items: center;
        }

        .islikeImg {
          width: 30px;
          padding-top: 1%;
          margin-right: 6px;
        }
      }
    }
  }
}

.no-products {
  // padding: 20px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-product-info {
    text-align: center;
    position: relative;
    top: -50px;

    .no-product-img {
      width: 200px;
      height: 200px;
    }

    .no-product-text {
      width: 500px;
      text-align: center;
      font-size: 32px;
      color: @gray;
    }
  }
}

.drawerClassify {
  height: 100%;
  position: relative;

  .drawerClassifies {
    padding: 32px;

    .drawerItem {
      margin-bottom: 72px;

      .drawerClassifyTitle {
        font-weight: bold;
        font-size: 26px;
      }

      .drawerClassifyOptions {
        display: flex;
        flex-wrap: wrap;

        .drawerClassifyOptionItem {
          // width: 25%;
          margin-top: 22px;
          padding-right: 25px;
          box-sizing: border-box;

          > div {
            min-width: 128px;
            padding: 10px;
            text-align: center;
            border-radius: 6px;
            border: 2px solid @gray;
            font-size: 24px;
          }
        }

        .blueDrawerClassifyOptionItem {
          .colorDrawerClassifyOptionItem('blue');
        }

        .greenDrawerClassifyOptionItem {
          .colorDrawerClassifyOptionItem('green');
        }

        .colorDrawerClassifyOptionItem(@value) {
          @color: 'color-@{value}';

          > div {
            border-radius: 50px;
          }
        }

        .isChecked {
          > div {
            color: purple;
            border: 2px solid purple;
          }
        }

        .blueIsChecked {
          .colorIsChecked('blue');
        }

        .greenIsChecked {
          .colorIsChecked('green');
        }

        .colorIsChecked(@value) {
          @color: 'color-@{value}';

          > div {
            color: @color-white;
            background-color: @@color;
            border: 2px solid @color-gold;
          }
        }
      }

      .drawerClassifyInputs {
        flex-wrap: nowrap;
        padding-top: 20px;
        align-items: center;

        input {
          background-color: #eeeeee;
          border-radius: 6px;
          min-width: 128px;
          padding: 10px;
          text-align: center;
          font-size: 24px;
        }

        span {
          margin: 0 5%;
        }
      }
    }
  }

  .drawerBtns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // position: absolute;
    position: fixed;
    background: #fff;
    bottom: 0;
    width: 100%;
    padding-right: 32px;
    box-sizing: border-box;
    padding-bottom: calc(40px + constant(safe-area-inset-bottom));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));

    .drawerBtnItem {
      min-width: 128px;
      margin-left: 22px;
      // margin: 0 30px;
      // padding: 10px 20px;
      border-radius: 6px;
      height: 64px;
      text-align: center;
      font-size: 26px;
      box-sizing: border-box;
    }

    .blueDrawerBtnItem {
      .colorDrawerBtnItem('blue');
    }

    .greenDrawerBtnItem {
      .colorDrawerBtnItem('green');
    }

    .colorDrawerBtnItem(@value) {
      @color: 'color-@{value}';
      border-radius: 50px;
      color: @@color;
      border: 4px solid @@color;
    }

    .drawerBtnCancle {
      color: #877dad;
      border: 4px solid #877dad;
      font-weight: 400;
      line-height: 56px;
    }

    .blueDrawerBtnCancle {
      .colorDrawerBtnItem('blue');
    }

    .greenDrawerBtnCancle {
      .colorDrawerBtnCancle('green');
    }

    .colorDrawerBtnCancle(@value) {
      @color: 'color-@{value}';
      color: @@color;
      border: 4px solid @@color;
    }

    .drawerBtnComfirm {
      color: #ffffff;
      line-height: 64px;
      background-image: linear-gradient(to right, #7e50ac, #423c7f);
    }

    .blueDrawerBtnComfirm {
      .colorDrawerBtnComfirm('blue');
    }

    .greenDrawerBtnComfirm {
      .colorDrawerBtnComfirm('green');
    }

    .colorDrawerBtnComfirm(@value) {
      @color: 'color-@{value}';
      color: #ffffff;
      background-color: @@color;
      line-height: 64px;
      border: none;
    }
  }
}

// 弹窗
.popup-like {
  width: 80vw;
  border-radius: 20px;
  background-color: #ffffff;

  .popup-like-body {
    padding: 0 20px;

    .title {
      color: #000000;
      font-weight: 500;
      font-size: 34px;
      border-bottom: 1px solid #fcfcfc;
      text-align: center;
      padding: 40px 0 20px;
    }

    .img-text {
      padding: 20px 0;
      text-align: center;

      .img {
        width: 100px;
      }

      .span {
        padding-top: 20px;
        color: #666666;
        font-size: 32px;
      }
    }
  }

  .popup-like-footer {
    border-top: 1px solid #fcfcfc;
    padding: 30px 0;
    text-align: center;
    font-size: 32px;
  }

  .popup-unlike-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #fcfcfc;
    font-size: 32px;

    .popup-unlike-footer-item {
      flex: 1;
      text-align: center;
      padding: 30px 0;
    }

    .popup-unlike-footer-item:nth-of-type(1) {
      border-right: 1px solid #fcfcfc;
    }
  }
}
</style>


