<template>
	<view style="height: 100vh" class="o-h">
		<!-- 	<view v-if="cid == 21" class="form-top-nav d-b-c">
			<view class="form-top-nav-item" :class="{ active: qdtype == 1 }" @click="changeRegistType(0)">云仓
			</view>
			<view class="form-top-nav-item" :class="{ active: qdtype == 17 }" @click="changeRegistType(17)">精选
			</view>
		</view> -->
		<template v-if="cid == -1">
			<image crossorigin="anonymous" data-etype="image" :data-enode="haifx" class="share-bg Poster1" :src="haifx"
				mode=""></image>
			<view class="Poster1 share-text d-c-c f30 mb20 pr gray3" style="z-index: 2">
				<view class="Poster1" :data-enode="userinfo.memberCode || ''">{{
          userinfo.memberCode || ""
        }}</view>
			</view>
			<image crossorigin="anonymous" data-etype="image" :data-enode="qrcode" class="share-codeimg Poster1"
				:src="qrcode" mode=""></image>
			<image class="btnShare" src="/static/bg/btnShare.png" @click="downImage('Poster1')" mode=""></image>
			<!-- <button class="domation-sharebtn" @click="startDownload(qrcode)">保存</button> -->
		</template>
		<!-- 新海粉分享 -->
		<template v-if="cid == 7 && showPop">
			<image @click="showPop = false" style="
          width: 60rpx;
          height: 60rpx;
          position: absolute;
          left: 40rpx;
          top: 60rpx;
          z-index: 120;
        " src="/static/icon/back.png" mode=""></image>
			<image crossorigin="anonymous" data-etype="image" :data-enode="haifxnews" class="share-bg Poster2"
				:src="haifxnews" mode=""></image>
			<view class="Poster2 share-text d-c-c f30 mb20 pr gray3" style="z-index: 2">
				<view class="Poster2" :data-enode="userinfo.memberCode || ''">{{
          userinfo.memberCode || ""
        }}</view>
			</view>
			<image crossorigin="anonymous" data-etype="image" :data-enode="qrcode" class="share-codeimg Poster2"
				:src="qrcode" mode=""></image>
			<image class="btnShare Poster3" src="/static/bg/btnShare.png" @click="downImage('Poster2')" mode=""></image>
			<!-- <button class="domation-sharebtn" @click="startDownload(qrcode)">保存</button> -->
		</template>
		<!-- 	<view class="share-pop" v-if="showPop">
			<view class="d-e-c mb10" @click="showPop = false"><u-icon name="close" size="32rpx" bold color="#999"></u-icon></view>
			<view class="d-c-c f30 fb gray3">{{ $t('w_0009') }}</view>
			<view class="share-box">
				<image crossorigin="anonymous" data-etype="image" data-enode="/static/bg/share-code.png" class="share-code Poster2" src="/static/bg/share-code.png"></image>
				<image crossorigin="anonymous" data-etype="image" :data-enode="qrcode" class="share-image Poster2" :src="qrcode"></image>
			</view>
			<view class="d-c-c">
				<button class="domation-btn" @click="downImage('Poster2')">{{ $t('PER_DA_12') }}</button>
			</view>
		</view> -->
		<template v-else>
			<view class="zone">
				<view class="pop-tips" v-if="isMaxGrade && cid == 201">
					<u-icon name="info-circle-fill" color="#fff" size="32rpx" style="margin-right: 10rpx"></u-icon>
					{{ $t("fn_013") }}
					<text class="tips-num">{{ formatNum(nextText) }}PV</text>
					{{ $t("MN_F_T_953") }}
				</view>
				<view class="pop-tips" v-if="!isMaxGrade && cid == 201">{{
          $t("fn_058")
        }}</view>
				<view class="pop-tips" v-if="cid == 30">
					{{ $t("fn_012") }}:{{ currencyIcon() }}
					<text class="tips-num">{{ formatNum(resaleIncomeBonus) }}</text>
				</view>
				<view class="d-b-s">
					<view class="category-left">
						<template v-if="cid == 21">
							<view v-for="(item, index) in category1" :key="index" class="hf-leftmenu">
								<view class="category-left-item" @click="changeCategory1(item.pkId)"
									:class="{ active: category1_id == item.pkId }">
									<text>{{ item.title }}</text>
								</view>
								<template v-if="category1_id == item.pkId">
									<view class="left-item-child" @click="changeCategory2(0)"
										:class="{ active: category2_id == 0 }">
										<text>{{ $t("ENU_GIFT_T_1") }}</text>
									</view>
									<view @click="changeCategory2(sitem.pkId)" v-for="(sitem, sindex) in category2"
										:key="sindex" class="left-item-child"
										:class="{ active: category2_id == sitem.pkId }">
										<text>{{ sitem.title }}</text>
									</view>
								</template>
							</view>
						</template>
						<template v-else>
							<view class="category-left-item" @click="changeCategory1(0)"
								:class="{ active: category1_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
							<view class="category-left-item" @click="changeCategory1(item.pkId)"
								:class="{ active: category1_id == item.pkId }" v-for="(item, index) in category1"
								:key="index">
								<text>{{ item.classifyName }}</text>
							</view>
						</template>
					</view>
					<view class="right-box">
						<template v-if="cid == 21">
							<view class="category-right-top21">
								<view class="category-right-top hftop">
									<view class="flex-1 lefttopbox">
										<view class="category-right-top-item" @click="changeCategory3(0)"
											:class="{ active: category3_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
										<view class="category-right-top-item" @click="changeCategory3(item.pkId)"
											:class="{ active: item.pkId == category3_id }"
											v-for="(item, index) in category3" :key="index">
											{{ item.title }}
										</view>
									</view>
									<view @click="openTop" class="open-top-btn mr20"><u-icon name="arrow-down"
											size="26rpx" bold color="#333"></u-icon></view>
								</view>
								<view class="d-b-c border-t p-20-0">
									<view class="f24 gray6 flex-1 tc" @click="changeType(1)"
										:class="{ activeColor: activeType == 1 }">{{ $t("w_0326") }}</view>
									<view class="f24 gray6 d-c-c flex-1 tc" @click="changeType(2)">
										<text class="mr10"
											:class="{ activeColor: activeType == 2 }">{{ $t("w_0149") }}</text>
										<u-icon :name="
                        priceSorting == 1 ? 'arrow-down-fill' : 'arrow-up-fill'
                      " size="22rpx" :color="activeType == 2 ? '#E03030' : '#999999'"></u-icon>
									</view>
									<view class="f24 gray6 d-c-c flex-1 tc" @click="changeType(3)"
										:class="{ activeColor: activeType == 3 }">
										<text class="mr10">{{ $t("CK_KS_102") }}</text>
										<u-icon :name="
                        salesSorting == 1 ? 'arrow-down-fill' : 'arrow-up-fill'
                      " size="22rpx" :color="activeType == 3 ? '#E03030' : '#999999'"></u-icon>
									</view>
									<view @click="isRight = true" class="icon iconfont icon-shaixuan p-0-20"
										style="color: #fff; font-size: 32rpx"></view>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="d-b-c">
								<view class="category-right-top flex-1">
									<view class="category-right-top-item" @click="changeCategory2(0)"
										:class="{ active: category2_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
									<view class="category-right-top-item" @click="changeCategory2(item.pkId)"
										:class="{ active: item.pkId == category2_id }"
										v-for="(item, index) in category2" :key="index">
										{{ item.classifyName }}
									</view>
								</view>
								<view class="d-c-c pr20" v-if="cid == 101 || cid == 102 || cid == 201 || cid == 202"
									@click.stop="openCPop('pkCountry')">
									<image class="queryimg mr10" mode="heightFix" :src="
                      pkCountryIndex >= 0 && countryList[pkCountryIndex]
                        ? countryList[pkCountryIndex].nationalFlag2
                        : ''
                    ">
									</image>
									<u-icon name="arrow-down" size="28rpx" color="#999"></u-icon>
								</view>
							</view>
						</template>

						<scroll-view scroll-y="true" class="scroll-Y scroll-3"
							:style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50"
							@scrolltolower="scrolltolowerFunc">
							<view class="product-list">
								<view class="product-item" v-for="(item, index) in listData" :key="index" @click.stop="
                    gotoPage(
                      '/pages/product/detail?pkCountry=' +
                        pkCountry +
                        '&cid=' +
                        cid +
                        '&' +
                        (cid != 21
                          ? 'waresCode=' + item.waresCode
                          : 'pkId=' + item.pkId)
                    )
                  ">
									<view class="pr">
										<!-- <view class="pop-stock-null">已售罄</view> -->
										<image class="product-img" :src="item.cover1" mode=""></image>
									</view>

									<view class="product-info">
										<view class="ww100">
											<view class="f24 gray3 line-h-15 text-ellipsis mb10">{{ item.waresName }}
											</view>
											<view class="f22 gray9 line-h-15"
												v-if="cid != 10 && cid != 13 && cid != 30">
												{{ $t("ENU_TOTAL_V_1") }}：{{
                          formatNum(item.waresAchieve)
                        }}
											</view>
											<view class="f22 gray9 line-h-15" v-if="cid == 10">
												{{ $t("w_0118") }}：{{ formatNum(item.deductMoney) }}
											</view>
											<view class="f22 gray9 line-h-15" v-if="cid == 13">
												{{ $t("BV") }}：{{ formatNum(item.assAchieve) }}
											</view>
											<!-- <view class="f22 gray9 line-h-15">
												{{ $t('fn_105') }}：{{item.inventoryNum*1>999?'999+':item.inventoryNum*1}}
											</view> -->
										</view>
										<view class="ww100 d-b-c">
											<view class="price-color f24 fb">
												<view class="prices" v-if="
                            (cid == 101 ||
                              cid == 102 ||
                              cid == 201 ||
                              cid == 202) &&
                            userinfo.pkSettleCountry != pkCountry
                          ">
													{{ item.borderUnit }}{{ formatNum(item.borderPrice) }}
													<text>({{ currencyIcon()
                            }}{{ formatNum(item.waresPrice) }})</text>
												</view>
												<view v-else>
													{{ currencyIcon() }}
													<text class="f30">{{
                            formatNum(item.waresPrice)
                          }}</text>
												</view>
											</view>
											<image @click.stop="addProduct(item)" class="icon iconfont icon-cart"
												src="/static/icon/cart-icon.png" mode=""></image>
											<!-- <image class="icon iconfont icon-cart" src="/static/icon/share-icon.png" mode=""></image> -->
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="pop-icons">
					<image @click="getCode" v-if="cid == 7" class="pop-icon" src="/static/icon/product/pop-share.png"
						mode=""></image>
					<!-- <image class="pop-icon" src="/static/icon/product/pop-service.png" mode=""></image> -->
					<view class="pop-icon" v-if="!showPop">
						<image @click="getShopping" src="/static/icon/product/pop-cart.png" mode=""></image>
						<view v-if="sCount > 0" class="scount-pop">{{ sCount }}</view>
					</view>
				</view>
				<template v-if="showCart">
					<view class="pop-cart">
						<view class="d-e-c" style="padding: 0 24rpx"><u-icon name="close" size="32rpx" color="#999"
								@click="showCart = false"></u-icon></view>
						<view class="f32 gray3 d-c-c">{{ $t("N_I_194") }}</view>
						<view class="cart-list">
							<view class="cart-item" v-for="(item, index) in cartData" :key="index">
								<view class="radio-check checked d-c-c"><u-icon name="checkbox-mark" color="#fff"
										size="26rpx"></u-icon></view>
								<view class="order-product">
									<view class="product-item">
										<view class="d-b-s mb20">
											<image class="product-img" :src="item.cover1" mode=""></image>
											<view class="product-info d-c d-b-s flex-1">
												<view class="text-ellipsis-2 f28 gray3">{{
                          item.waresName
                        }}</view>
												<view class="price-color f24">
													<view v-if="
                              (cid == 101 ||
                                cid == 102 ||
                                cid == 201 ||
                                cid == 202) &&
                              userinfo.pkSettleCountry != pkCountry
                            ">
														{{
                              item.productParams[0].waresItemsParamsList[0]
                                .borderUnit
                            }}
														<text class="f32 fb">{{
                              formatNum(
                                item.productParams[0].waresItemsParamsList[0]
                                  .borderPrice
                              )
                            }}</text>
														({{ currencyIcon() }}
														<text class="f32 fb">{{
                              formatNum(item.waresPrice)
                            }}</text>)
													</view>
													<view v-else>
														{{ currencyIcon() }}
														<text class="f32 fb">{{
                              formatNum(item.waresPrice)
                            }}</text>
													</view>
												</view>
											</view>
										</view>
										<view class="secend-product">
											<template v-if="cid != 21">
												<view class="d-b-s mb20" v-for="(pitem, pindex) in item.productParams"
													:key="pindex">
													<view class="d-s-c">
														<image :src="pitem.waresItemsParamsList[0].specCover" mode=""
															class="s-product-img"></image>
														<view class="f28">
															{{ pitem.productName }}
															<text class="ml20">{{
                                pitem.waresItemsParamsList[0].specsName
                              }}</text>
														</view>
													</view>
													<view class="f24 gray9 ml20">
														X{{ pitem.waresItemsParamsList[0].quantity }}
													</view>
												</view>
											</template>
											<template v-else>
												<view class="d-b-s mb20" v-for="(pitem, pindex) in item.waresSkuList"
													:key="pindex">
													<view class="d-s-c">
														<view class="f28">{{ pitem.specValueNames }}</view>
													</view>
												</view>
											</template>
										</view>
										<view class="d-b-c mt20">
											<view class="counter-box">
												<view class="d-c-c counter-add"
													@click="plusReduceShopping(item, 'reduce')">
													<u-icon name="minus" size="26rpx" color="#666"></u-icon>
												</view>
												<view class="counter-num">{{ item.number }}</view>
												<view class="d-c-c counter-add"
													@click="plusReduceShopping(item, 'add')">
													<u-icon name="plus" size="26rpx" color="#666"></u-icon>
												</view>
											</view>
											<u-icon @click="deleteCart(item)" width="34rpx" height="36rpx"
												name="/static/icon/product/cart-delete.png"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!--底部按钮-->
					<view class="bottom-btns d-e-c f28">
						<view class="total d-s-c flex-1 mr20">
							<view class="cart-img">
								<image src="/static/icon/cart-cart.png" mode=""></image>
								<!-- <view class="cart-num">10</view> -->
							</view>
							<view>
								<view class="price f32">
									<view v-if="
                      (cid == 101 || cid == 102 || cid == 201 || cid == 202) &&
                      userinfo.pkSettleCountry != pkCountry
                    ">
										{{ borderUnits
                    }}<text class="num f38 fb">{{
                      formatNum(cartMoney1)
                    }}</text>
										({{ currencyIcon()
                    }}<text class="num f38 fb">{{ formatNum(cartMoney) }}</text>)
									</view>
									<view v-else>
										{{ currencyIcon() }}
										<text class="num f38 fb">{{ formatNum(cartMoney) }}</text>
									</view>
								</view>
								<view class="f24 gray3" v-if="cid != 30">
									{{ $t("ENU_TOTAL_V_1") }}:{{ formatNum(cartAchieve) }}
								</view>
							</view>
						</view>
						<button :disabled="payClock()" type="primary" class="buy-btn theme-btn" @click="toPay">
							{{ $t("w_0312") }}
						</button>
					</view>
					<view class="pop-bg" @click.stop="showCart = false"></view>
				</template>
			</view>
		</template>
		<u-popup :show="showTop" mode="top" @close="closeTop" round="25rpx">
			<view class="zone" style="padding: 40rpx 20rpx">
				<view class="f28 gray3">{{ getC2Name() }}</view>
				<view class="category-right-top hftop h-at" style="padding-left: 0">
					<view class="flex-1 lefttopbox fw">
						<view class="category-right-top-item mt20" @click="changeCategory3(0)"
							:class="{ active: category3_id == 0 }">{{ $t("ENU_GIFT_T_1") }}</view>
						<view class="category-right-top-item mt20" @click="changeCategory3(item.pkId)"
							:class="{ active: item.pkId == category3_id }" v-for="(item, index) in category3"
							:key="index">
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 筛选 -->
		<u-popup :show="isRight" mode="right" @close="closeRight()">
			<view class="pop-content rightpop" style="padding-top: 0">
				<view class="pop-title d-b-c">
					<view class="f28 gray3">{{ $t("MY_ORD_50") }}</view>
					<view class="f28 domation" @click="isRight = false">{{
            $t("N_I_241")
          }}</view>
				</view>
				<view class="right-item-title">{{ $t("w_0078") }}</view>
				<view style="padding: 0 24rpx">
					<view class="search-box">
						<u-icon name="search" size="36rpx" color="#999"></u-icon>
						<input v-model="form.waresName" class="search-input" type="text" value=""
							:placeholder="$t('w_0253')" />
					</view>
				</view>
				<view class="right-item-title">{{ $t("w_0254") }}</view>
				<view class="d-c-c" style="padding-left: 20rpx">
					<view class="search-box"><input v-model="form.startPrice" class="search-input" type="text" value=""
							:placeholder="$t('w_0255')" /></view>
					<view style="
              width: 30rpx;
              height: 1rpx;
              background-color: #333;
              margin: 0 24rpx;
            "></view>
					<view class="search-box"><input v-model="form.endPrice" class="search-input" type="text" value=""
							:placeholder="$t('w_0256')" /></view>
				</view>
				<view class="pop-btns">
					<view class="pop-left-btn" @click="resetSubmit()">{{
            $t("w_0257")
          }}</view>
					<view class="pop-right-btn" @click="searchSubmit()">{{
            $t("w_0035")
          }}</view>
				</view>
			</view>
		</u-popup>
		<view v-if="isQuery" @touchmove.stop.prevent="moveHandle">
			<view class="pop-up-bg" @click="isQuery = false"></view>
			<view class="pop-up">
				<view class="d-e-c p20">
					<view class="blue f28" @click="closeQuery">{{
            $t("MY_ORD_57")
          }}</view>
				</view>
				<picker-view :indicator-style="'height: 80px;'" @change="changeQuery" class="picker-view">
					<picker-view-column>
						<view class="item d-c d-c-c" v-for="(item, index) in countryList" :key="index">
							<image style="height: 50px" mode="heightFix" :src="item.nationalFlag2"></image>
							<view class="f28 gray9 mt10">{{ item.name }}</view>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
		<Store v-if="isStore" :isPop="isStore" @close="closeStore"></Store>
		<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
			@on-error="onErrorFunc" ref="Eposter"></Eposter>
	</view>
</template>

<script>
	import Eposter from "@/components/evils-el-poster/Poster.vue";
	import haifxnews from "@/static/bg/haifxnews.jpg";
	import haifx from "@/static/bg/haifx.jpg";
	import Store from "./popup/store.vue";
	export default {
		components: {
			Eposter,
			Store,
		},
		data() {
			return {
				haifx,
				haifxnews,
				list: [],
				showTop: false,
				showCart: false,
				cid: 0,
				showPop: false,
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				category1: [],
				category2: [],
				category3: [],
				category1_id: 0,
				category2_id: 0,
				category3_id: 0,
				isAll2: true,
				isAll3: true,
				listData: [],
				cartData: [],
				addLock: false,
				qrcode: "",
				downImg: "",
				sCount: 0,
				qdtype: 1,
				pageNum: 1,
				total: 0,
				no_more: false,
				priceSorting: 1,
				salesSorting: 1,
				comprehensive: 0,
				newProduct: 0,
				menu_id1: 0,
				menu_id2: 0,
				menu_id3: 0,
				loading: false,
				activeType: 1,
				isRight: false,
				borderPrice: "",
				borderUnits: "",
				form: {
					waresName: "",
					startPrice: "",
					endPrice: "",
				},
				userinfo: {},
				countryList: [],
				pkCountry: "",
				pkCountry1: "",
				pkCountryIndex: 0,
				queryValue: 0,
				isQuery: false,
				posterImg: "",
				isStore: false,
				storeProduct: null,
				isInit: true,
				nextText: "",
				resaleIncomeBonus: "",
				isMaxGrade: 1,
			};
		},
		computed: {
			cartMoney: function() {
				let self = this;
				let price = 0;
				self.cartData.forEach((item) => {
					price += item.waresPrice * 1 * item.number;
				});
				return price.toFixed(2);
			},
			cartMoney1: function() {
				let self = this;
				let price1 = 0;
				self.cartData.forEach((item) => {
					item.productParams.forEach((etem) => {
						price1 += etem.waresItemsParamsList[0].borderPrice * 1 * item.number;
					});
				});
				return price1.toFixed(2);
			},
			cartAchieve: function() {
				let self = this;
				let achieve = 0;
				self.cartData.forEach((item) => {
					achieve += item.achieve * 1 * item.number;
				});
				return achieve;
			},
		},
		onLoad(e) {
			this.pkCountry1 = uni.getStorageSync("currencyIcon");
			this.cid = e.cid;
			let title = this.$t("ENU_TRADE_T_121");
			switch (e.cid * 1) {
				case -1:
					title = this.$t("ENU_MENU_303");
					break;
				case 0:
					title = this.$t("ENU_TRADE_T_121");
					break;
				case 1:
					title = this.$t("ENU_MENU_311");
					break;
				case 2:
					title = this.$t("ENU_MENU_321");
					break;
				case 3:
					title = this.$t("ENU_TRADE_T_121");
					break;
				case 7:
					title = this.$t("N_I_2");
					break;
				case 10:
					title = this.$t("ENU_MENU_360");
					break;
				case 11:
					title = this.$t("ENU_MENU_350");
					break;
				case 12:
					title = this.$t("ENU_MENU_333");
					break;
				case 13:
					title = this.$t("ENU_MENU_340");
					break;
				case 14:
					title = this.$t("ENU_MENU_334");
					break;
				case 18:
					title = this.$t("ENU_SPECIAL_A_18");
					break;
				case 19:
					title = this.$t("ENU_SPECIAL_A_19");
					break;
				case 21:
					title = this.$t("N_I_4");
					break;
				case 22:
					title = this.$t("ENU_SPECIAL_A_22");
					break;
				case 23:
					title = this.$t("ENU_SPECIAL_A_8");
					break;
				case 24:
					// title = '乐学易考';
					title = this.$t("ENU_MENU_312");
					break;
				case 25:
					// title = '乐学易考';
					title = this.$t("ENU_MENU_322");
					break;
				case 26:
					// title = '乐学易考';
					title = this.$t("ENU_MENU_335");
					break;
				case 27:
					// title = '海粉升级';
					title = this.$t("ENU_ORDER_T_27");
					break;
				case 101:
					title = this.$t("fn_004");
					break;
				case 102:
					title = this.$t("fn_005");
					break;
				case 201:
					title = this.$t("fn_007");
					break;
				case 202:
					title = this.$t("fn_008");
					break;
				case 30:
					title = this.$t("fn_009");

					break;
				case 33:
					title = this.$t("APP_ADD_27");
					break;
			}
			uni.setNavigationBarTitle({
				title: title,
			});
		},
		onShow() {
			if (this.cid == 201) {
				this.getNextLevelPv();
			}
			if (this.cid == 30) {
				this.getMemberAnnuity();
			}
			this.getShoppingCount();
			this.borderUnits = uni.getStorageSync("borderUnit");
			console.log(this.borderUnits, "borderUnits");
		},
		mounted() {
			this.getInfo();

			if (this.cid == -1) {
				this.getCode();
			} else {
				this.getCategory1();
			}
		},
		methods: {
			getMemberAnnuity() {
				let self = this;
				self._get("/member/api/member/get-member-annuity-time", {}, (res) => {
					self.resaleIncomeBonus = res.data.resaleIncomeBonus;
				});
			},
			getNextLevelPv() {
				let self = this;
				self._get("/member/api/member/next-level-pv", {}, (res) => {
					self.nextText = res.data.gradeValue;
					self.isMaxGrade = res.data.isMaxGrade;
				});
			},
			payClock() {
				let self = this;
				if (self.cartData && self.cartData.length > 0) {
					return false;
				} else {
					return true;
				}
			},
			closeStore(e) {
				let self = this;
				if (e) {
					let params = {};
					let product = self.storeProduct;
					if (self.cid != 21) {
						params = {
							number: 1,
							pkCountry: self.userinfo.pkCountry,
							pkId: product.pkId,
							productGroup: product.productGroup,
							specialArea: self.cid * 1,
							waresCode: product.waresCode,
							pkCountry: self.pkCountry,
							pkMakerSpace: e,
						};
					} else {
						params = {
							number: 1, //数量
							pkId: product.pkId,
							productGroup: product.productGroup,
							source: 2,
							//所属专区
							specialArea: 21,
							pkMakerSpace: e,
						};
					}
					self._post("sale/api/shopping/addShopping", params, (res) => {
						self.getShoppingCount();
						uni.showToast({
							title: self.$t("fn_056"),
							icon: "none",
						});
					});
				}
				this.storeProduct = null;
				this.isStore = false;
			},
			getCountry() {
				let self = this;
				self._get("system/api/country/list", {}, (res) => {
					self.countryList = res.data;
					self.pkCountryIndex = 0;
					self.countryList.forEach((item, index) => {
						if (item.pkId == self.pkCountry) {
							self.pkCountryIndex = index;
						}
					});
				});
			},
			openCPop() {
				this.isQuery = true;
			},
			getInfo() {
				let self = this;
				self._get("member/api/member/get-info", {}, (res) => {
					self.userinfo = res.data;
					self.pkCountry = res.data.pkCountry;
					self.getCountry();
				});
			},
			resetSubmit: function() {
				this.form.waresName = "";
				this.form.startPrice = "";
				this.form.endPrice = "";
				this.searchSubmit();
			},
			searchSubmit: function() {
				this.isRight = false;
				/*获取数据*/
				this.listData = [];
				this.pageNum = 1;
				this.getData();
			},
			closeRight() {
				this.isRight = false;
			},
			changeType(e) {
				if (this.loading) {
					return;
				}
				this.loading = true;
				if (e == 2 && this.activeType == e) {
					if (this.priceSorting == 1) {
						this.priceSorting = 2;
					} else {
						this.priceSorting = 1;
					}
				}
				if (e == 3 && this.activeType == e) {
					if (this.salesSorting == 1) {
						this.salesSorting = 2;
					} else {
						this.salesSorting = 1;
					}
				}
				this.activeType = e;
				this.listData = [];
				this.pageNum = 1;
				this.getData();
			},
			getC2Name() {
				let list = this.category2;
				let id = this.category2_id;
				let name = "";
				if (id == 0) {
					return this.$t("ENU_GIFT_T_1");
				} else {
					list.forEach((item, index) => {
						if (item.pkId == id) {
							name = item.title;
						}
					});
					return name;
				}
			},
			closeTop() {
				this.showTop = false;
			},
			openTop() {
				this.showTop = true;
			},
			scrolltolowerFunc() {
				let self = this;
				if (self.cid != 21) {
					return;
				}
				if (self.pageNum * 50 < self.total) {
					self.pageNum++;
					self.getData();
				}
				self.no_more = true;
			},
			changeRegistType(e) {
				this.qdtype = e;
			},
			getShoppingCount() {
				let self = this;
				self._get(
					"sale/api/shopping/getShoppingCount", {
						specialArea: self.cid,
						pkCountry: self.pkCountry,
					},
					(res) => {
						self.sCount = res.data.smallCount;
					}
				);
			},
			downImage(elClass) {
				this.$refs.Eposter.createForElRect(elClass, false);
			},
			startDownload(img) {
				let self = this;
				let title = self.$t("S_C_63");
				uni.showLoading({
					title: title,
				});
				self.downImg = "";
				let n = 0;
				uni.downloadFile({
					//获得的临时地址
					url: img,
					success: (res) => {
						if (res.statusCode == 200) {
							self.downImg = res.tempFilePath;
							self.posterImg = res.tempFilePath;
							uni.hideLoading();
							self.downloadImg();
						} else {
							uni.hideLoading();
							uni.showModal({
								title: self.$t("w_0034"),
								content: self.$t("MY_ORD_64"),
								showCancel: false,
							});
						}
					},
					fail(err) {
						console.log(err);
						uni.hideLoading();
						uni.showModal({
							title: self.$t("w_0034"),
							content: self.$t("MY_ORD_64"),
							showCancel: false,
						});
					},
				});
			},

			downloadImg() {
				let self = this;
				let n = 0;
				uni.showLoading({
					title: self.$t("w_0413"),
				});
				self.downImg = [this.posterImg];
				self.downImg.forEach((item, index) => {
					console.log(item);
					// 图片保存到本地
					uni.saveImageToPhotosAlbum({
						filePath: item,
						success(data) {
							n++;
							if (n == self.downImg.length) {
								uni.showToast({
									icon: "none",
									title: self.$t("w_0311"),
									duration: 2000,
								});
								uni.hideLoading();
							}
						},
						fail(err) {
							console.log(err);
							if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
								uni.showToast({
									title: self.$t("w_0412"),
									icon: "none",
									duration: 1000,
								});
								setTimeout(() => {
									uni.openSetting();
								}, 1000);
							}
							uni.hideLoading();
							uni.showModal({
								title: self.$t("w_0414"),
							});
							return;
						},
						complete(res) {
							console.log("complete");
						},
					});
				});
			},
			getCode() {
				let self = this;
				let url = "member/api/share/fans-code";
				if (self.cid == -1) {
					url = "member/api/share/share-code-h5";
				}
				self._get(url, {}, (res) => {
					if (self.cid == -1) {
						self.qrcode = res.data.dataUrl;
					} else {
						self.qrcode = res.data;
					}
					self.showPop = true;
				});
			},
			deleteCart(e) {
				let self = this;
				if (self.addLock) {
					return;
				}
				self.addLock = true;
				self._post(
					"sale/api/shopping/batchDelShopping", {
						deleteList: [{
							shoppingId: e.shoppingId,
						}, ],
					},
					(res) => {
						uni.showToast({
							title: self.$t("fn_056"),
							icon: "none",
							success() {
								self.getShopping();
							},
						});
					},
					false,
					() => {
						self.addLock = false;
					}
				);
			},
			plusReduceShopping(e, type) {
				let self = this;
				if (self.addLock) {
					return;
				}
				self.addLock = true;
				let num = e.number;
				if (type == "add") {
					num++;
				}
				if (type == "reduce") {
					num--;
					if (num <= 0) {
						num = 1;
					}
				}
				self._post(
					"sale/api/shopping/plusReduceShopping", {
						number: num,
						shoppingId: e.shoppingId,
						specialArea: self.cid,
					},
					(res) => {
						uni.showToast({
							title: self.$t("fn_056"),
							icon: "none",
							success() {
								self.getShopping();
							},
						});
					},
					false,
					() => {
						self.addLock = false;
					}
				);
			},
			addProduct(e) {
				let self = this;
				let params = {};
				if (e.isMakerGift == 2) {
					this.storeProduct = e;
					this.isStore = true;
					return;
				}
				if (self.cid != 21) {
					params = {
						number: 1,
						pkCountry: self.userinfo.pkCountry,
						pkId: e.pkId,
						productGroup: e.productGroup,
						specialArea: self.cid * 1,
						waresCode: e.waresCode,
						pkCountry: self.pkCountry,
					};
				} else {
					params = {
						number: 1, //数量
						pkId: e.pkId,
						productGroup: e.productGroup,
						source: 2,
						specialArea: 21, //所属专区
					};
				}
				self._post("sale/api/shopping/addShopping", params, (res) => {
					self.getShoppingCount();
					uni.showToast({
						title: self.$t("fn_056"),
						icon: "none",
					});
				});
			},
			getShopping() {
				let self = this;
				self._get(
					"sale/api/shopping/getShopping", {
						specialArea: self.cid,
						pkCountry: self.pkCountry,
					},
					(res) => {
						if (res.data != "") {
							self.cartData = res.data[0].shoppingCartList;
						} else {
							self.cartData = [];
						}
						self.showCart = true;
					}
				);
				self.getShoppingCount();
			},
			getCategory3() {
				let self = this;
				if (self.cid == 21) {
					let ids = [];
					console.log("---");
					console.log(self.menu_id2);
					console.log(self.category2);
					if (self.menu_id2 == 0) {
						self.category2.forEach((item) => {
							ids.push(item.pkId);
						});
					} else {
						ids = [self.menu_id2];
					}
					console.log(ids);
					self._post(
						"sale/api/twares-category-category/option-list", {
							parentIds: ids,
						},
						(res) => {
							self.category3 = res.data;
							// self.category3_id = self.category3[0] ? self.category3[0].pkId : '';
							self.menu_id3 = self.category3[0] ? self.category3[0].pkId : 0;
							self.getData();
						}
					);
				} else {
					self._get(
						"sale/api/area-classify/list", {
							specialArea: self.cid,
							pkParent: "",
							hierarchy: 1,
							pkCountry: self.pkCountry,
						},
						(res) => {
							self.category2 = res.data;
							self.getData();
						}
					);
				}
			},
			getCategory2() {
				let self = this;
				console.log(2222);
				if (self.cid == 21) {
					self._post(
						"sale/api/twares-category-category/option-list", {
							parentIds: [self.menu_id1],
						},
						(res) => {
							self.category2 = res.data;
							// self.category2_id = self.category2[0] ? self.category2[0].pkId : '';
							self.category2_id = 0;
							self.menu_id2 = 0;
							self.getCategory3();
						}
					);
				} else {
					self._get(
						"sale/api/area-classify/list", {
							specialArea: self.cid,
							pkParent: "",
							hierarchy: 1,
							pkCountry: self.pkCountry,
						},
						(res) => {
							self.category2 = res.data;
							self.getData();
						}
					);
				}
			},
			getCategory1() {
				let self = this;
				console.log(1111);
				self.pageNum = 1;
				if (self.cid == 21) {
					self._post(
						"sale/api/twares-category-category/option-list", {
							parentIds: [0],
						},
						(res) => {
							self.category1 = res.data;
							self.category1_id = self.category1[0] ? self.category1[0].pkId : 0;
							self.menu_id1 = self.category1[0] ? self.category1[0].pkId : 0;
							self.getCategory2();
						}
					);
				} else {
					self._get(
						"sale/api/area-classify/list", {
							specialArea: self.cid,
							hierarchy: 0,
							pkCountry: self.pkCountry,
						},
						(res) => {
							self.category1 = res.data;
							self.getCategory2();
						}
					);
				}
			},
			changeCategory1(id) {
				if (this.loading) {
					return;
				}
				this.loading = true;
				this.menu_id1 = id;
				this.menu_id2 = 0;
				this.menu_id3 = 0;
				this.category1_id = id;
				this.category2_id = 0;
				this.category3_id = 0;
				this.listData = [];
				this.pageNum = 1;
				if (this.cid == 21) {
					this.getCategory2();
				} else {
					this.getData();
				}
			},
			changeCategory2(id) {
				if (this.loading) {
					return;
				}
				this.loading = true;
				this.menu_id2 = id;
				this.menu_id3 = 0;
				this.category2_id = id;
				this.category3_id = 0;
				this.listData = [];
				this.pageNum = 1;
				if (this.cid == 21) {
					this.getCategory3();
				} else {
					this.getData();
				}
			},
			changeCategory3(id) {
				if (this.loading) {
					return;
				}
				this.loading = true;
				this.menu_id3 = id;
				this.category3_id = id;
				this.listData = [];
				this.pageNum = 1;
				this.getData();
			},
			getData() {
				let self = this;
				let id = "";
				if (self.cid == 21) {
					if (self.category2_id) {
						id = self.category2_id;
					} else {
						id = self.category1_id || 0;
					}
					self._get(
						"sale/api/wares/sharing-zone-wares", {
							pageNum: self.pageNum,
							pkCategoryOne: self.category1_id || "",
							pkCategoryTwo: self.category2_id || "",
							pkCategoryThree: self.category3_id || "",
							priceSorting: self.priceSorting,
							salesSorting: self.salesSorting,
							waresName: self.form.waresName,
							startPrice: self.form.startPrice,
							endPrice: self.form.endPrice,
							pageSize: 50,
						},
						(res) => {
							self.listData = [...self.listData, ...res.rows];
							self.total = res.total;
							if (self.total < self.pageNum * 50) {
								self.no_more = true;
							}
							self.loading = false;
						},
						(err) => {
							self.loading = false;
						}
					);
				} else {
					if (self.category2_id) {
						id = self.category2_id;
					} else {
						id = self.category1_id || "";
					}
					self._post(
						"sale/api/wares/query-spe-wares", {
							pkAreaClassify: id,
							specialArea: self.cid,
							pkCountry: self.pkCountry,
						},
						(res) => {
							self.loading = false;
							self.listData = res.data;
							uni.setStorageSync("borderUnit", self.listData[0].borderUnit);
						},
						(err) => {
							self.loading = false;
						}
					);
				}
				if (self.isInit) {
					self.init();
				}
			},
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select(".category-right-top");
						if (self.cid == 21) {
							view = uni.createSelectorQuery().select(".category-right-top21");
						}
						view
							.boundingClientRect((data) => {
								let h = self.phoneHeight - data.height;
								self.scrollviewHigh = h;
							})
							.exec();
						self.isInit = false;
					},
				});
			},
			checkresorder(deleteList, callback) {
				let self = this;
				let params = {
					specialArea: self.cid,
					deleteList: deleteList,
				};
				callback();
				// self._post("/sale/api/order/valid-enough-shop", params, (res) => {
				//   if (res.code != 500) {
				//     callback();
				//   }
				// });
			},
			toPay() {
				let self = this;
				let arr = [];

				self.cartData.forEach((item) => {
					arr.push(item.shoppingId);
				});
				let callback = function() {
					self.showCart = false;
					uni.setStorageSync("cartinfo", arr);
					let id = self.cid;
					if (
						self.cid == 101 ||
						self.cid == 102 ||
						self.cid == 201 ||
						self.cid == 202
					) {
						id = self.cid + "&userCountry=" + self.pkCountry;
					}
					self.gotoPage("/pages/prefecture/confirm-order?specialArea=" + id);
				};
				if (self.cid == 101 || self.cid == 102 || self.cid == 2) {
					let deleteList = [];
					self.cartData.forEach((item) => {
						deleteList.push({
							shoppingId: item.shoppingId,
						});
					});
					self.checkresorder(deleteList, callback);
					return;
				}
				if (self.cid == 21) {
					arr = [];
					let arr2 = [];
					self.cartData.forEach((item) => {
						arr.push({
							pkTWares: item.waresSkuList[0].pkTWares,
							pkTWaresSku: item.waresSkuList[0].pkThWaresSku,
							quantity: item.number,
							source: 2,
							shoppingId: item.shoppingId,
						});
					});
				}
				callback();
			},
			changeQuery(e) {
				this.queryValue = e.detail.value[0];
			},
			closeQuery() {
				this.pkCountryIndex = this.queryValue;
				this.pkCountry = this.countryList[this.pkCountryIndex].pkId;
				this.isQuery = false;
				this.getCategory1();
			},
			moveHandle() {
				return false;
			},
			saveImage(e) {},
			onSuccess(val) {
				this.posterImg = val;
				this.downloadImg(this.posterImg);
			},
			onErrorFunc(err) {
				console.log(`err`, err);
			},
		},
	};
</script>

<style lang="scss">
	.prices {
		display: flex;
		flex-direction: column !important;
	}

	.zone {
		.category-left {
			height: 100vh;
			padding-bottom: 100rpx;
			width: 198rpx;
			background-color: #f2f2f2;
			box-sizing: border-box;
			overflow-y: auto;
			flex-shrink: 0;
		}

		.hf-leftmenu {
			.category-left-item {}

			.category-left-item.active {
				background: #ee252a;
				color: #fff;
			}

			.category-left-item.active::after {
				display: none;
			}

			.left-item-child {
				background: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 15rpx 0;

				text {
					font-size: 24rpx;
					colo: #666;
					display: inline-block;
					padding: 15rpx 26rpx;
					border-radius: 200rpx;
					background: #fff;
					width: 142rpx;
					box-sizing: border-box;
					text-align: center;
				}
			}

			.left-item-child.active {
				text {
					background: #ee252a;
					color: #fff;
				}
			}
		}

		.category-left-item {
			font-size: 26rpx;
			color: #666;
			width: 198rpx;
			padding: 36rpx 25rpx;
			box-sizing: border-box;
			word-break: break-all;
			line-height: 1.5;
			text-align: center;
		}

		.category-left-item.active {
			position: relative;
			color: #fb3024;
		}

		.category-left-item.active::after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			z-index: 1;
			margin: auto;
			width: 6rpx;
			height: 22rpx;
			background: #fb3024;
		}

		.category-right-top {
			height: 86rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			overflow-x: auto;
			padding-left: 22rpx;
		}

		.category-right-top.hftop {
			overflow-x: hidden;
		}

		.category-right-top.hftop.h-at {
			height: auto;
			overflow: hidden;
		}

		.category-right-top.hftop .lefttopbox {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			overflow-x: auto;
		}

		.category-right-top.hftop .lefttopbox.fw {
			flex-wrap: wrap;
		}

		.category-right-top-item {
			flex-shrink: 0;
			white-space: nowrap;
			padding: 0 20rpx;
			position: relative;
			color: #666;
			font-size: 26rpx;
			line-height: 86rpx;
		}

		.category-right-top-item.active {
			color: #fb3024;
		}

		.category-right-top-item.active::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 2rpx;
			width: 40%;
			height: 6rpx;
			margin: auto;
			background: #fb3024;
			border-radius: 4rpx;
		}

		.lefttopbox .category-right-top-item {
			padding: 0 20rpx;
			height: 58rpx;
			background: #f6f6f6;
			color: #666;
			font-size: 24rpx;
			border-radius: 58rpx;
			line-height: 1.5;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 14rpx;
		}

		.lefttopbox .category-right-top-item.active {
			background: #fb3024;
			color: #fff;
		}

		.lefttopbox .category-right-top-item.active::after {
			display: none;
		}

		.right-box {
			overflow: hidden;
			background-color: #ffffff;
			height: 100vh;
			flex: 1;

			.product-list {
				width: 100%;
				padding: 0 21rpx 100rpx 19rpx;
				box-sizing: border-box;

				.product-item {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding: 20rpx 0 16rpx 0;
					border-bottom: 1rpx solid #eee;

					.product-img {
						width: 152rpx;
						height: 152rpx;
						flex-shrink: 0;
						margin-right: 20rpx;
						border-radius: 10rpx;
					}

					.pop-stock-null {
						width: 120rpx;
						height: 120rpx;
						background-color: rgba(0, 0, 0, 0.55);
						text-align: center;
						line-height: 1.5;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						z-index: 2;
						border-radius: 50%;
					}

					.product-info {
						flex: 1;
						height: 152rpx;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-direction: column;

						.icon-cart {
							flex-shrink: 0;
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							box-shadow: 0rpx 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
						}
					}
				}
			}
		}
	}

	.pop-bg {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.65);
		z-index: 99;
	}

	.share-pop {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background-color: #fff;
		width: 665rpx;
		height: 704rpx;
		background: #ffffff;
		border-radius: 20rpx;
		z-index: 100;
		padding: 32rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}

	.share-box {
		width: 586rpx;
		height: 522rpx;
		position: relative;
		margin: 0 auto;
		margin-bottom: 68rpx;
		margin-top: 30rpx;
	}

	.share-code {
		width: 586rpx;
		height: 522rpx;
		z-index: 1;
	}

	.share-bg {
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.share-image {
		width: 180rpx;
		height: 180rpx;
		position: absolute;
		left: 202rpx;
		bottom: 44rpx;
		z-index: 2;
	}

	.share-codeimg {
		width: 320rpx;
		height: 320rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 35%;
		z-index: 2;
	}

	.share-codeimg.Poster2 {
		width: 280rpx;
		height: 280rpx;
		bottom: 220rpx;
	}

	.share-text.Poster2 {
		font-size: 32rpx;
		bottom: 170rpx;
	}

	.btnShare.Poster3 {
		bottom: 40rpx;
	}

	.share-text {
		// width: 320rpx;
		// height: 320rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 29%;
		z-index: 2;
		font-size: 40rpx;
		font-weight: bold;
	}

	.domation-btn {
		width: 264rpx;
		height: 76rpx;
		border-radius: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		word-break: break-all;
		font-size: 30rpx;
		line-height: 1;
		overflow: hidden;
		background: #fb3024;
		color: #fff;
		margin-right: 25rpx;
	}

	.btnShare {
		width: 270rpx;
		height: 89rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 20%;
		z-index: 1014;
	}

	@keyframes scale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 添加动画 */
	.btnShare {
		animation: scale 1s infinite;
	}

	.defaul-btn {
		width: 264rpx;
		height: 76rpx;
		border-radius: 38rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		word-break: break-all;
		font-size: 30rpx;
		line-height: 1;
		overflow: hidden;
		background: #cccccc;
		color: #fff;
	}

	.pop-icons {
		position: fixed;
		right: 10rpx;
		bottom: 42rpx;
		z-index: 90;
	}

	.pop-icon {
		position: relative;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.45);

		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}
	}

	.pop-cart {
		position: fixed;
		bottom: 96rpx;
		left: 0;
		width: 100%;
		z-index: 101;
		background-color: #fff;
		padding: 0 0;
		box-sizing: border-box;
		padding-top: 20rpx;
		border-radius: 25rpx 25rpx 0 0;
		min-height: 200rpx;
	}

	.bottom-btns {
		position: fixed;
		width: 100%;
		padding: 0 24rpx 0 27rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		// /* bottom: calc(var(--window-bottom); */
		bottom: 0;
		left: 0;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		background: #ffffff;
		z-index: 101;
	}

	.bottom-btns .buy-btn {
		margin: 0;
		padding: 0 24rpx;
		height: 67rpx;
		line-height: 67rpx;
		border-radius: 38rpx;
		// background: linear-gradient(90deg, #FF6B6B 4%, #F6220C 100%);
		font-size: 28rpx;
		flex-shrink: 0;
	}

	.bottom-btns .price {
		color: $dominant-color;
	}

	.pop-bg {
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.65);
	}

	.counter-box {
		width: 168rpx;
		height: 50rpx;
		border-radius: 30rpx;
		border: 1rpx solid #eeeeee;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #333;
		margin-top: 26rpx;
	}

	.counter-num {
		height: 50rpx;
		min-width: 56rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		border-left: 1rpx solid #eeeeee;
		border-right: 1rpx solid #eeeeee;
		line-height: 50rpx;
		text-align: center;
	}

	.counter-add {
		height: 50rpx;
		width: 56rpx;
		flex-shrink: 0;
		font-size: 26rpx;
		color: #666;
		font-weight: bold;
	}

	.cart-list {
		padding: 0 24rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.cart-list::-webkit-scrollbar {
		/*滚动条整体样式*/
		/*高宽分别对应横竖滚动条的尺寸*/
		display: block;
		width: 5rpx !important;
		height: 1rpx !important;
		-webkit-appearance: default-button;
	}

	.cart-list::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		background-color: #909399;
		// background-image: -webkit-linear-gradient(45deg,
		//     rgba(255, 255, 255, 0.2) 25%,
		//     transparent 25%,
		//     transparent 50%,
		//     rgba(255, 255, 255, 0.2) 50%,
		//     rgba(255, 255, 255, 0.2) 75%,
		//     transparent 75%,
		//     transparent);
	}

	.cart-list::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #ededed;
		border-radius: 10px;
	}

	.cart-img {
		width: 50rpx;
		height: 50rpx;
		position: relative;
		margin-right: 18rpx;

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

	.cart-num {
		width: 28rpx;
		height: 28rpx;
		background: #fb3024;
		box-shadow: 0px 3rpx 7rpx 0px rgba(0, 0, 0, 0.25);
		border-radius: 50%;
		font-size: 22rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -10rpx;
		right: -14rpx;
	}

	.scount-pop {
		background: #fb3024;
		color: #fff;
		font-size: 22rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
	}

	.form-top-nav {
		height: 94rpx;
		background: #fb3024;
	}

	.form-top-nav-item {
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		line-height: 1.5;
		word-break: break-all;
		flex: 1;
		padding: 0 20rpx;
		flex-shrink: 0;
		height: 94rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.form-top-nav-item.active::before {
		content: "";
		width: 52rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 12rpx;
		margin: auto;
		height: 6rpx;
		background: #ffffff;
		border-radius: 4rpx;
	}

	.open-top-btn {
		width: 58rpx;
		height: 58rpx;
		background: #f6f6f6;
		border-radius: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activeColor {
		color: #e03030;
	}

	.search-box {
		flex: 1;
		height: 65rpx;
		background: #f5f6f8;
		border-radius: 33rpx;
		padding: 0 52rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.search-input {
			font-size: 26rpx;
			color: #333;
			margin-left: 14rpx;
			flex: 1;
		}
	}

	.queryimg {
		height: 40rpx;
		flex-shrink: 0;
		margin: 0 10rpx;
	}

	.pop-up-bg {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 99;
	}

	.pop-up {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60vh;
		background-color: #ffffff;
		z-index: 100;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.icon.iconfont.icon-shaixuan {
		background-color: #fb3024;
		padding: 20rpx 40rpx;
		color: #fff;
	}

	button[disabled][type="primary"] {
		background-color: rgba(#fb3024, 0.6);
	}

	.pop-tips {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 84rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 25rpx;
		line-height: 1.5;
		background: #fb4633;
		color: #fff;
		font-size: 26rpx;
		box-sizing: border-box;
		z-index: 20;
	}
</style>