rrys121/pages/store/home/store_cate2.vue

<template>
	<view class="container">
		<view class="headerBg">
			<image :src="info.background_image" mode="aspectFill" class="image"></image>
			<view class="shade"></view>
			<!-- #ifdef MP || APP -->
			<view :style="{height: getHeight.barTop+'px'}"></view>
			<view :style="{height: getHeight.barHeight+'px'}"></view>
			<!-- #endif -->
			<view style="height: 224rpx;"></view>
		</view>
		<view class="page">
			<view class="search-box" :style="{height: headerHeight ? (headerHeight+'px') : 'auto'}">
				<view class="input-box" id="input-box" :class="{fixed: scrollTop > 0}">
					<!-- #ifdef MP || APP -->
					<view :style="{height: getHeight.barTop+'px'}"></view>
					<!-- #endif -->
					<!-- 顶部搜索框 -->
					<!-- #ifdef MP -->
					<view class="input-wrapper acea-row row-middle" :style="{height: getHeight.barHeight+'px'}">
						<view class="menu_box flex-center" @tap="moreNav">
							<text class="iconfont icon-a-icon_menu1x"></text>
						</view>
						<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle" hover-class="none">
							<text class="iconfont icon-ic_search"></text>搜索商品
						</navigator>
						<view v-if="info.store_splicing_switch" class="group-btn" @click="onCollage">
							<image :src="imgHost+'/statics/images/group-btn.png'" mode="aspectFit" class="img"></image>
						</view>
						<view :style="{width: getHeight.barWidth+'px'}"></view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<view class="input-wrapper acea-row row-middle">
						<view class="menu_box flex-center" @tap="moreNav">
							<text class="iconfont icon-a-icon_menu1x"></text>
						</view>
						<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle" hover-class="none">
							<text class="iconfont icon-ic_search"></text>搜索商品
						</navigator>
						<!-- #ifdef H5 -->
						<view v-if="info.store_splicing_switch && $wechat.isWeixin()" class="group-btn" @click="onCollage">
							<image :src="imgHost+'/statics/images/group-btn.png'" mode="aspectFit" class="img"></image>
						</view>
						<!-- #endif -->
					</view>
					<!-- #endif -->
				</view>
			</view>
			<!-- <scroll-view scroll-y="true" class="scroll-view" @scroll="goodsListScroll" @scrolltolower="getProducts"> -->
			<!-- 门店地址 -->
			<view class="store-section">
				<view class="panel">
					<view class="acea-row row-middle store-name">
						<view class="name-wrap">
							<navigator :url="'/pages/store/info/index?store_id='+info.id" hover-class="none" class="acea-row row-middle name-inner">
								<text class="iconfont icon-ic_mall"></text>
								<view class="name line1">{{info.name}}</view>
								<text class="iconfont icon-ic_rightarrow"></text>
							</navigator>
						</view>
						<!-- <view class="tips">门店支持自提</view> -->
						<view class="switch acea-row" v-if="deliveryList.length > 1">
							<view v-for="(item, index) in deliveryList" :key="item.key" :class="{ on: switchNum == item.key }" class="btn" @click="swithFn(item.key)">{{item.name}}</view>
						</view>
						<view class="tips" v-else-if="deliveryList.length == 1">门店支持{{deliveryList[0].name}}</view>
					</view>
					<view class="acea-row row-bottom address-wrap">
						<view class="address-box">
							<view class="time">营业时间：{{info.day_time}}</view>
							<view class="address-info">
								<text class="distance">距您{{info.range}}km</text>
								{{info.address}}{{info.detailed_address}}
							</view>
						</view>
						<view class="acea-row btn-box">
							<view class="btn" @click="showMaoLocation">
								<text class="iconfont icon-ic_location5"></text>
								<view class="">地图</view>
							</view>
							<view class="btn" @click="goKefu">
								<text class="iconfont icon-ic_customerservice"></text>
								<view class="">客服</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品排序条件 -->
			<view class="nav-box" id="nav-box">
				<view class="nav acea-row row-middle" :class="{ fixed: scrollTop && conterTop <= headerHeight }" :style="{ top: headerHeight+'px' }">
					<view class="flex-1 acea-row row-around row-middle">
						<view @click="set_where(1)" :class="{'activeColor':active == 1}">
							默认排序
						</view>
						<view @click='set_where(2)' :class="{'activeColor':active == 2}">
							价格
							<text v-if="price==2" class="iconfont icon-ic_down2"></text>
							<text v-else class="iconfont icon-ic_up2"></text>
						</view>
						<view @click='set_where(3)' :class="{'activeColor':active == 3}">
							销量
							<text v-if="stock==2" class="iconfont icon-ic_down2"></text>
							<text v-else class="iconfont icon-ic_up2"></text>
						</view>
					</view>
					<view @click="set_where(4)" class="filter-btn">
						<view class="line-left"></view>
						筛选
						<text class="iconfont icon-ic_sort"></text>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="list waterList">
				<WaterfallsFlow ref="waterfallsFlow" :wfList="productList" @itemTap="godDetail"></WaterfallsFlow>
				<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="default" v-if="productList.length==0 && where.page > 1">
				<emptyPage title="暂无商品，去看点别的吧～"></emptyPage>
			</view>
			<!-- </scroll-view> -->
			<view class="footer">
				<view class="inner-box" :class="{ open: footerOpen }">
					<view class="inner acea-row row-between row-middle">
						<view class="acea-row row-bottom" style="flex-wrap: nowrap;">
							<BaseMoney :money="totalPrice" symbolSize="32" integerSize="48" decimalSize="32" color="#FFFFFF"></BaseMoney>
							<view class="detail-btn" style="white-space: nowrap;" @click="getCartLists">查看明细<text class="iconfont icon-ic_uparrow"></text></view>
						</view>
						<view class="btn" @click="subOrder">去结算({{cartNum}})</view>
					</view>
				</view>
				<view class="cartIcon" @click="getCartLists">
					<uni-badge :text="cartNum" absolute="rightTop" :offset="[6, 4]" :custom-style="{background: 'var(--view-theme)'}">
						<view class="image-wrap">
							<image src="@/static/img/cart_pic.png" class="image"></image>
						</view>
					</uni-badge>
				</view>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<filterPopup ref="popup" :level="level" :storeCategory="storeCategory" :storeBrand="storeBrand" @brandChange="brandChange" @categoryChange="categoryChange" @submitFn="submitFn"></filterPopup>
		<!-- 客服弹窗 -->
		<Kefu ref="kefu" @closeKefu="closeKefu" :customerList="customerList" :customerType="customerType"></Kefu>
		<!-- #ifdef H5 || MP -->
		<tuiDrawer :visible="collageVisible" :zIndex="970" :maskZIndex="960" mode="bottom" backgroundColor="transparent" @close="onCollageClose">
			<view class="dialog">
				<view class="dialog-head acea-row row-between row-middle">
					<view>发起「一起拼」</view>
					<view class="btn" @click="onCollageClose">
						<text class="iconfont icon-ic_close"></text>
					</view>
				</view>
				<view class="dialog-body">
					<view class="navbar">
						<view class="navbar-bg"></view>
						<view class="active-bg acea-row row-bottom" :class="{'row-right':collageDelivery==1}">
							<image v-if="collageDelivery==1" class="image2" src="../static/navbar-right-2.png"></image>
							<image class="image1" src="../static/navbar-left-1.png"></image>
							<image v-if="collageDelivery==2" class="image2" src="../static/navbar-left-2.png"></image>
						</view>
						<view class="inner acea-row">
							<view v-for="(item, index) in  deliveryList" :key="item.key" :class="{ on: collageDelivery == item.key }" class="item acea-row row-center-wrapper"
								@click="collageDeliveryChange(item, index)">
								<text :class="'iconfont '+item.icon"></text>
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="dialog-content" :class="{
								btl:collageIndex==deliveryList.length-1,
								btr:!collageIndex
							}">
						<scroll-view v-if="collageDelivery == 1 && addressList.length" scroll-y="true" class="address-box">
							<view class="list">
								<view v-for="(item, index) in  addressList" :key="item.id" :class="{ on: item.id == addressId }" class="item acea-row row-middle" @click="onAddressChange(item)">
									<view class="text">
										<view class="info">{{item.province}}{{item.city}}{{item.district}}{{item.street}}{{item.detail}}</view>
										<view class="name">{{item.real_name}} {{item.phone}}</view>
									</view>
									<text class="iconfont icon-ic_complete"></text>
								</view>
							</view>
						</scroll-view>
						<navigator v-if="collageDelivery == 1 && !addressList.length" class="link" url="/pages/users/user_address/index?fromType=1" hover-class="none">
							<view class="title acea-row row-between-wrapper">
								<view>添加配送地址</view>
								<text class="iconfont icon-ic_rightarrow"></text>
							</view>
							<view>您还未添加配送地址，先去添加地址再下单吧~</view>
						</navigator>
						<view v-if="collageDelivery == 2" class="store-box acea-row">
							<view class="text">
								<view class="name">{{collageStore.name}}</view>
								<view class="info acea-row">
									<text class="iconfont icon-ic_location51"></text>
									<view class="value">{{collageStore.address}}{{collageStore.detailed_address}}</view>
								</view>
								<view class="info acea-row">
									<text class="iconfont icon-icon_clock"></text>
									<view class="value">营业时间：{{collageStore.day_time}}</view>
								</view>
							</view>
							<view class="map-box">
								<image src="../static/map2.png" class="map"></image>
								<view class="img-box">
									<image :src="collageStore.image" class="img"></image>
									<view class="range">距您{{collageStore.range}}km</view>
									<view class="dot"></view>
								</view>
							</view>
						</view>
						<view class="btn-box acea-row row-center-wrapper" v-if="collageDelivery == 1 && addressList.length">
							<navigator url="/pages/users/user_address/index?fromType=1" hover-class="none">
								添加地址
								<text class="iconfont icon-ic_rightarrow"></text>
							</navigator>
						</view>
					</view>
				</view>
				<view class="dialog-foot">
					<view class="btn" @click="initCollage">发起拼单</view>
				</view>
			</view>
		</tuiDrawer>
		<!-- 商品属性弹窗 -->
		<productWindow :attr="attr" :isShow="1" :iSplus="1" :iScart="1" :type="2" @myevent="onMyEvent" @attrVal="attrVal" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo"
			@iptCartNum="iptCartNum" @goCat="goCatNum">
		</productWindow>
		<!-- #endif -->
		<homeList :currentPage="currentPage" :navH="getHeight.barTop+40" :openNavList="diyProduct.navList"></homeList>
		<cartList :marginBottom="74" :cartData="cartData" @closeList="closeList" @ChangeCartNumDan="ChangeCartList" @ChangeSubDel="ChangeSubDel" @ChangeOneDel="ChangeOneDel"></cartList>
	</view>
</template>

<script>
	import filterPopup from "@/components/filterPopup/index.vue";
	import Kefu from "@/components/kefu/index.vue";
	import WaterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
	import productWindow from "@/components/productWindow/index.vue";
	import emptyPage from "@/components/emptyPage.vue";
	import homeList from "@/components/homeList/index.vue";
	import cartList from "@/components/cartList/index.vue";
	import tuiDrawer from "@/components/tui-drawer/tui-drawer.vue";
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import {
		vcartList,
		getCartCounts,
		cartDel
	} from '@/api/order.js';
	import {
		getProducts,
		getCustomerList,
		getStoreCategory,
		getStoreBrand
	} from '@/api/new_store.js';
	import {
		goShopDetail
	} from '@/libs/order.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		// #ifdef MP || H5
		hasCollage,
		// #endif
		getAttr,
		initCollage,
		isWithin,
	} from '@/api/store.js';
	// #ifdef H5 || MP
	import {
		getAddressList,
	} from '@/api/user.js';
	// #endif
	// #ifdef H5
	import {
		toLogin
	} from '@/libs/login.js';
	// #endif
	import skuSelect from '@/mixins/skuSelect.js';
	export default {
		components: {
			filterPopup,
			Kefu,
			WaterfallsFlow,
			productWindow,
			emptyPage,
			homeList,
			cartList,
			tuiDrawer,
		},
		props: {
			info: {
				type: Object,
				default: {}
			},
			customerType: {
				type: Number,
				default: 1
			},
			cart_num: {
				type: Number,
				default: 0
			},
		},
		mixins: [skuSelect],
		computed: {
			...mapState({
				// cartNum: state => state.indexData.cartNum
			}),
			...mapGetters(['isLogin', 'uid', 'cartNum', 'diyProduct', 'diyCategory']),
			level() {
				return this.diyCategory.level
			},
		},
		provide: {
			parent: {}
		},
		data() {
			return {
				id: 0,
				getHeight: this.$util.getWXStatusHeight(),
				imgHost: HTTP_REQUEST_URL,
				price: 0,
				stock: 0,
				productList: [], // 商品数据
				customerList: [], // 客服数据
				storeCategory: [], // 分类数据
				storeBrand: [], // 品牌数据
				show: false,
				active: 1,
				where: {
					cid: 0,
					sid: 0,
					tid: 0,
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 5,
					store_id: 0,
					brand_id: '',
				},
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				deliveryList: [{
						name: '自提',
						key: 2,
						icon: 'icon-icon_shop1'
					},
					{
						name: '配送',
						key: 1,
						icon: 'icon-icon_electromobile'
					},
				],
				switchNum: 1,
				// #ifdef H5 || MP
				collageVisible: false,
				collageDelivery: 2,
				collageIndex: 0,
				collageAddress: {},
				collageStore: {},
				// #endif
				// #ifdef MP
				isSplicingPlatform: true,
				// #endif
				// #ifndef MP
				isSplicingPlatform: false,
				// #endif
				drawervisible: true,
				footerOpen: false,
				totalPrice: 0,
				cartData: {
					cartList: [],
					iScart: false
				},
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
					deliveryType: [],
				},
				is_vip: 0, //是否是会员
				storeInfo: {},
				attrValue: '', //已选属性
				currentPage: false,
				tempArr: [],
				headerHeight: 0,
				conterTop: 0,
				scrollTop: 0, //已滚动的距离
				addressId: 0, // 配送地址id
				addressList: [], // 配送地址列表
			}
		},
		mounted() {
			let default_delivery = this.info.default_delivery;
			for (let i = 0; i < this.deliveryList.length; i++) {
				if (this.deliveryList[i].key == 2 && (!this.info.store_self_mention || !this.info.is_store)) {
					this.deliveryList.splice(i, 1);
					i--;
				}
			}
			if (this.deliveryList.length == 1) {
				default_delivery = this.deliveryList[0].key;
			}
			this.collageStore = this.info;
			this.where.store_id = this.info.id;
			this.switchNumFun(default_delivery);
			// #ifdef H5
			this.isSplicingPlatform = this.$wechat.isWeixin();
			// #endif
			// #ifdef H5 || MP
			if (this.isSplicingPlatform && this.info.store_splicing_switch) {
				this.collageDelivery = this.info.is_store ? 2 : 1;
				uni.$on('activeFn', data => {
					this.collageStore = data;
				});
			}
			// #endif
			this.$eventHub.$on('onCartAddChange', (data) => {
				let index = -1;
				for (let i = 0; i < this.productList.length; i++) {
					if (this.productList[i].id == data.id) {
						index = i;
						break;
					}
				}
				if (data.spec_type) {
					this.goCartDuo(data);
				} else {
					this.goCartDan(data, index);
				}
			});
			let view = uni.createSelectorQuery().in(this).select("#nav-box");
			// 页面滚动
			uni.$on('onPageScroll', ({
				scrollTop
			}) => {
				this.scrollTop = scrollTop;
				this.footerOpen = false;
				view
					.boundingClientRect((data) => {
						this.conterTop = data.top;
					})
					.exec();
			});
			// 页面滚动到底部
			uni.$on('onReachBottom', () => {
				this.getProducts();
			});
			uni.$on('activeAddress', () => {
				this.getAddressList();
			});
			this.getProducts(true);
			this.getCartNum();
			this.getCartList(1);
			this.getAddressList();
		},
		methods: {
			productslist() {
				this.getProducts(true);
			},
			// #ifdef H5 || MP
			showMaoLocation() {
				let data = {
					latitude: Number(this.collageStore.latitude),
					longitude: Number(this.collageStore.longitude),
					name: this.collageStore.name,
					address: `${this.collageStore.address}`,
				};
				// #ifdef H5
				if (this.$wechat.isWeixin()) {
					data.scale = 13;
					return this.$wechat.seeLocation(data);
				}
				// #endif
				uni.openLocation(data);
			},
			// #endif
			// 选择品牌
			brandChange(val) {
				this.where.brand_id = val
			},
			// 选择分类
			categoryChange(val) {
				this.where.cid = val.cid
				this.where.sid = val.sid
				this.where.tid = val.tid
			},
			// 确认提交
			submitFn(val) {
				if (val == 1) {
					this.getProducts(true)
					this.$refs.popup.visible = false
				} else if (val == 2) {
					this.where.brand_id = ""
					this.where.cid = ""
					this.where.sid = ""
					this.getProducts(true)
					this.$refs.popup.visible = false
				}
			},
			// 打开附近门店
			goMap(val = 0) {
				uni.navigateTo({
					url: `/pages/store/store_list/index?storeFrom=1&type=1&storeId=${val ? this.collageStore.id : this.info.id}&isCollage=${val}`
				});
			},
			// 打开客服
			goKefu() {
				this.getCustomerList()
				this.$refs.kefu.show = true
			},
			// 购物车
			shoppCart() {
				uni.switchTab({
					url: "/pages/order_addcart/order_addcart"
				})
			},
			// 关闭客服
			closeKefu() {
				this.$refs.kefu.show = false
			},
			// 获取客服列表数据
			getCustomerList() {
				getCustomerList(this.where.store_id).then(res => {
					this.customerList = res.data
				})
			},
			// 去详情页
			godDetail(item) {
				this.currentPage = false
				if (this.promotions_type) {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					})
				} else {
					goShopDetail(item, this.uid).catch(res => {
						uni.navigateTo({
							url: `/pages/goods_details/index?id=${item.id}`
						})
					})
				}
			},
			// 操作
			set_where: function(e) {
				switch (e) {
					case 1:
						this.active = 1
						this.where.priceOrder = ""
						this.where.salesOrder = ""
						this.where.brand_id = ""
						this.price = 0
						break;
					case 2:
						if (this.price == 0) this.price = 1;
						else if (this.price == 1) this.price = 2;
						else if (this.price == 2) this.price = 0;
						if (this.price == 1) {
							this.where.priceOrder = "asc"
						} else if (this.price == 2) {
							this.where.priceOrder = "desc"
						} else {
							this.where.priceOrder = ""
						}
						this.active = 2
						this.stock = 0;

						break;
					case 3:
						if (this.stock == 0) this.stock = 1;
						else if (this.stock == 1) this.stock = 2;
						else if (this.stock == 2) this.stock = 0;

						if (this.stock == 1) {
							this.where.priceOrder = ""
							this.where.salesOrder = "asc"
						} else if (this.stock == 2) {
							this.where.priceOrder = ""
							this.where.salesOrder = "desc"
						} else {
							this.where.salesOrder = ""
						}
						this.active = 3
						this.price = 0
						break;
					case 4:
						this.getStoreCategory()
						this.getStoreBrand()
						this.$refs.popup.visible = true
						this.loadend = false;
						this.loading = false;
						break;
				}
				if (e < 4) {
					this.loadend = false;
					this.$set(this.where, 'page', 1);
					this.getProducts(true)
				}
			},
			// 商品列表
			getProducts(isPage) {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				if (isPage === true) {
					// that.$refs.waterfallsFlow.refresh();
					that.where.page = 1;
					that.$set(that, 'productList', []);
				}
				that.loading = true;
				that.loadTitle = '';
				that.where.delivery_type = that.delivery_type;
				getProducts(this.where).then(res => {
					let list = res.data;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
					that.$set(that, 'tempArr', productList);
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query
							.select("#input-box")
							.boundingClientRect((data) => {
								this.headerHeight = data.height;
							})
							.exec();
						// query
						// 	.select("#nav-box")
						// 	.boundingClientRect((data) => {
						// 		this.conterTop = data.top;
						// 	})
						// 	.exec();
					})

				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多'
				});
			},
			// 切换自提方式
			swithFn(num) {
				this.switchNumFun(num);
				this.page = 1;
				this.loadend = false;
				this.tempArr = []
				this.getProducts(true)
			},
			switchNumFun(num) {
				switch (num) {
					case 1:
						this.switchNum = 1
						this.delivery_type = '3'
						break;
					case 2:
						this.switchNum = 2
						this.delivery_type = '2'
						break;
				}
			},
			// 筛选-分类数据
			getStoreCategory() {
				let data = {
					pid: 0
				}
				getStoreCategory(data).then(res => {
					res.data.map(item => {
						this.$set(item, 'disabled', false)
						this.$set(item, 'current', 0)
						// item.children.unshift({
						// 	'id': 0,
						// 	'cate_name': '全部'
						// })
						item.children.map(items => {
							this.$set(items, 'disabled', false)
							this.$set(items, 'current', 0)
							// item.children.unshift({
							// 	'id': 0,
							// 	'cate_name': '全部'
							// })
						})
					})

					this.storeCategory = res.data
				})
			},
			// 筛选-品牌数据
			getStoreBrand() {
				getStoreBrand(this.where).then(res => {
					this.storeBrand = res.data
				})
			},
			// #ifdef H5 || MP
			onCollage() {
				if (!this.isLogin) {
					return toLogin();
				}
				hasCollage().then(res => {
					const collageId = res.data.collageId;
					if (collageId) {
						uni.navigateTo({
							url: `/pages/store/group_buy/index?collage_id=${collageId}`
						});
					} else {
						this.collageVisible = true;
					}
				});
			},
			onCollageClose() {
				this.collageVisible = false;
			},
			initCollage() {
				let data = {
					store_id: this.collageStore.id,
					address_id: this.collageAddress.id || 0,
					shipping_type: this.collageDelivery == 1 ? 3 : 2
				};
				initCollage(data).then(res => {
					this.collageVisible = false;
					uni.navigateTo({
						url: `/pages/store/group_buy/index?collage_id=${res.data.collageId}`
					});
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				});
			},
			collageDeliveryChange(item, index) {
				if (item.key != 2 || this.info.is_store) {
					this.collageDelivery = item.key;
					this.collageIndex = index;
				}
			},
			onAddressChange(data) {
				isWithin({
					store_id: this.collageStore.id,
					address_id: data.id
				}).then(() => {
					this.addressId = data.id;
				}).catch(() => {
					this.$util.Tips({
						title: '您选择的地址超出门店配送范围，请重新选择'
					});
				});
			},
			// #endif
			// 生成订单；
			subOrder: function() {
				let that = this,
					list = that.cartData.cartList,
					ids = [];
				if (list.length) {
					list.forEach(item => {
						if (item.attrStatus && item.status) {
							ids.push(item.id)
						}
					});
					uni.navigateTo({
						url: '/pages/goods/order_confirm/index?is_store=1&cartId=' + ids.join(',') + '&delivery_type=' + that.delivery_type + '&store_id=' + that.info.id
					});
					that.cartData.iScart = false;
				} else {
					return that.$util.Tips({
						title: '请选择产品'
					});
				}
			},
			// 计算总价；
			getTotalPrice: function() {
				let that = this,
					list = that.cartData.cartList,
					totalPrice = 0.00;
				list.forEach(item => {
					if (item.attrStatus && item.status) {
						totalPrice = that.$util.$h.Add(totalPrice, that.$util.$h.Mul(item.cart_num, item
							.truePrice));
					}
				})
				// if(num){
				// 	data.forEach(item => {
				// 		totalPrice = that.$util.$h.Sub(totalPrice, that.$util.$h.Mul(item.cart_num, item.sum_price));
				// 	})
				// }
				that.$set(that, 'totalPrice', totalPrice);
			},
			getCartLists(iSshow) {
				if (this.footerOpen) {
					this.getCartList();
				} else {
					this.footerOpen = true;
				}
			},
			getCartList(iSshow) {
				let that = this;
				let data = {
					store_id: that.info.id
				};
				vcartList(data).then(res => {
					that.$set(that.cartData, 'cartList', res.data);
					if (res.data.length) {
						that.$set(that.cartData, 'iScart', iSshow ? false : !that.cartData.iScart);
					} else {
						that.$set(that.cartData, 'iScart', false);
					}
					that.getTotalPrice();
				})
			},
			// 商品详情接口；
			getAttrs(id) {
				let that = this;
				getAttr(id, 0).then(res => {
					// uni.hideLoading();
					that.$set(that.attr, 'productAttr', res.data.productAttr);
					that.$set(that, 'productValue', res.data.productValue);
					that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
					that.$set(that, 'storeInfo', res.data.storeInfo);
					that.DefaultSelect();
				})
			},
			moreNav() {
				this.currentPage = !this.currentPage;
			},
			goodsListScroll() {
				this.footerOpen = false;
				this.currentPage = false;
			},
			getCartNum: function() {
				let that = this;
				getCartCounts(0, that.info.id).then(res => {
					this.$store.commit('indexData/setCartNum', res.data.count)
				});
			},
			closeList(e) {
				this.$set(this.cartData, 'iScart', e);
			},
			getAddressList() {
				getAddressList({
					page: 1,
					limit: 100
				}).then(res => {
					let addressList = res.data;
					this.addressList = addressList;
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {}

	.activeColor {
		color: var(--view-theme) !important;
	}

	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		.image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.shade {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.4047) 0%, #F5F5F5 100%);
		}
	}

	.nav-box {
		height: 98rpx;
	}

	.nav {
		top: 0;
		right: 0;
		left: 0;
		z-index: 10;
		height: 98rpx;
		font-size: 30rpx;
		color: #666666;
		background: #F5F5F5;

		&.fixed {
			background: #FFFFFF;
		}

		.iconfont {
			margin-left: 6rpx;
			vertical-align: middle;
			font-size: 14rpx;
		}

		.icon-ic_sort {
			margin-left: 8rpx;
			font-size: 28rpx;
		}
	}

	.list {
		padding: 0 20rpx;
		background: #F5F5F5;
	}

	.list .waterList {
		margin-bottom: 60rpx;
	}

	.default {
		padding: 0 20rpx;
	}

	.input-wrapper {
		position: relative;
		height: 78rpx;
		padding: 0 24rpx;

		.input {
			flex: 1;
			min-width: 0;
			height: 58rpx;
			padding-left: 24rpx;
			border-radius: 29rpx;
			background: rgba(255, 255, 255, 0.2);
			font-size: 24rpx;
			color: #FFFFFF;

			.iconfont {
				margin-right: 16rpx;
				font-size: 32rpx;
			}
		}

		.group-btn {
			width: 80rpx;
			height: 64rpx;
			border-radius: 50%;
			margin-left: 16rpx;

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

	/* #ifdef H5 || MP */
	.dialog {
		padding: 44rpx 20rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 40rpx 40rpx 0 0;
		background: linear-gradient(180deg, #F5F5F5 0%, #F5F5F5 0%, #FFFFFF 100%);
	}

	.dialog-head {
		padding: 0 24rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;

		.btn {
			width: 40rpx;
			height: 40rpx;
			cursor: pointer;

			.iconfont {
				font-size: 40rpx;
				color: #BBBBBB;
			}
		}
	}

	.dialog-body {
		margin-top: 48rpx;

		.navbar {
			flex-shrink: 0;
			position: relative;
			height: 82rpx;

			.navbar-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 190rpx;
				border-radius: 16rpx 16rpx 0 0;
				background: #EEEEEE;
			}

			.active-bg {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 96rpx;

				.image1 {
					width: 50%;
					height: 100%;
				}

				.image2 {
					width: 48rpx;
					height: 78rpx;
				}
			}

			.inner {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.item {
					flex: 1;
					min-width: 0;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #666666;

					.iconfont {
						display: none;
						margin-right: 8rpx;
						font-size: 36rpx;
					}

					&.on {
						font-weight: 500;
						font-size: 32rpx;
						color: var(--view-theme);

						.iconfont {
							display: inline-block;
						}
					}
				}
			}
		}

		.dialog-content {
			position: relative;
			border-radius: 0 0 16rpx 16rpx;
			background: #FFFFFF;

			&.btl {
				border-top-left-radius: 24rpx;
			}

			&.btr {
				border-top-right-radius: 24rpx;
			}

			.link {
				padding: 40rpx 32rpx;
				font-size: 22rpx;
				line-height: 30rpx;
				color: #999999;

				.title {
					margin-bottom: 16rpx;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #333333;
				}

				.iconfont {
					font-size: 32rpx;
				}
			}
		}

		.address-box {
			height: 388rpx;

			.list {
				padding: 36rpx 32rpx;
				background-color: transparent;
			}

			.item {
				margin-top: 32rpx;
				color: #333333;

				&:first-child {
					margin-top: 0;
				}

				.text {
					flex: 1;
				}

				.info {
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.name {
					margin-top: 8rpx;
					font-size: 22rpx;
					line-height: 30rpx;
					color: #999999;
				}

				.iconfont {
					visibility: hidden;
					font-size: 36rpx;
				}

				&.on {
					color: var(--view-theme);

					.name {
						color: var(--view-theme);
					}

					.iconfont {
						visibility: visible;
					}
				}
			}
		}

		.btn-box {
			height: 88rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #666666;

			.iconfont {
				margin-left: 4rpx;
				font-size: 24rpx;
			}
		}

		.store-box {
			padding: 40rpx 28rpx 40rpx 32rpx;

			.text {
				flex: 1;
			}

			.name {
				font-weight: 500;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #333333;
			}

			.info {
				margin-top: 16rpx;
				font-size: 22rpx;
				line-height: 30rpx;
				color: #999999;
			}

			.value {
				flex: 1;
			}

			.iconfont {
				margin-right: 12rpx;
				font-size: 22rpx;
			}

			.map-box {
				position: relative;
				width: 188rpx;
				height: 104rpx;
				margin-left: 32rpx;

				.map {
					width: 100%;
					height: 100%;
				}

				.img-box {
					position: absolute;
					bottom: 16rpx;
					left: 50%;
					width: 52rpx;
					height: 52rpx;
					padding: 6rpx;
					border-radius: 6rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.0784);
					transform: translateX(-50%);
				}

				.img {
					width: 100%;
					height: 100%;
					border-radius: 6rpx;
				}

				.range {
					position: absolute;
					top: -40rpx;
					left: 50%;
					height: 36rpx;
					padding: 0 16rpx;
					border-radius: 6rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.0784);
					transform: translateX(-50%);
					white-space: nowrap;
					font-size: 20rpx;
					line-height: 36rpx;
					color: #333333;

					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 50%;
						width: 0;
						height: 0;
						border-width: 5rpx 9rpx;
						border-style: solid;
						border-color: #FFFFFF transparent transparent;
						transform: translate(-50%, 100%);
					}
				}

				.dot {
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
					background: var(--view-theme);
					transform: translateX(-50%);
				}
			}
		}
	}

	.dialog-foot {
		padding: 20rpx 0;

		.btn {
			height: 72rpx;
			border-radius: 36rpx;
			background: var(--view-theme);
			text-align: center;
			font-weight: 500;
			font-size: 26rpx;
			line-height: 72rpx;
			color: #FFFFFF;
		}
	}

	/* #endif */
	.page {
		position: relative;
	}

	.store-section {
		padding: 20rpx;

		.panel {
			padding: 0 32rpx 32rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
		}

		.store-name {
			height: 92rpx;

			.name-wrap {
				flex: 1;
				min-width: 0;
			}

			.name-inner {
				display: inline-flex;
				max-width: 100%;
			}

			.name {
				flex: 1;
				min-width: 0;
				margin: 0 8rpx 0 10rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}

			.iconfont {
				font-size: 32rpx;
				color: #333333;
			}

			.tips {
				font-size: 24rpx;
				color: var(--view-theme);
			}
		}

		.address-wrap {
			.address-box {
				flex: 1;
				min-width: 0;
				font-size: 22rpx;
				color: #666666;
			}

			.address-info {
				margin-top: 20rpx;
				line-height: 34rpx;
			}

			.distance {
				position: relative;
				padding-right: 12rpx;
				margin-right: 12rpx;

				&::after {
					content: "";
					position: absolute;
					top: 50%;
					right: 0;
					width: 1rpx;
					height: 18rpx;
					background: #CCCCCC;
					transform: translateY(-50%);
				}
			}

			.btn {
				position: relative;
				padding-left: 24rpx;
				margin-left: 24rpx;
				text-align: center;
				font-size: 20rpx;
				color: #333333;

				&::before {
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					width: 2rpx;
					height: 24rpx;
					background: #EEEEEE;
					transform: translateY(-50%);
				}

				&:first-child::before {
					display: none;
				}

				.iconfont {
					display: inline-block;
					margin-bottom: 8rpx;
					font-size: 40rpx;
				}
			}
		}

		.switch {
			width: 192rpx;
			height: 48rpx;
			background: #F5F5F5;
			border-radius: 24rpx;

			.btn {
				width: 96rpx;
				height: 48rpx;
				border-radius: 24rpx;
				text-align: center;
				font-size: 24rpx;
				line-height: 48rpx;
				color: #999999;

				&.on {
					background: var(--view-theme);
					color: #FFFFFF;
				}
			}
		}
	}

	.line-left {
		position: absolute;
		top: 50%;
		left: 0;
		width: 1rpx;
		height: 26rpx;
		background: #CCCCCC;
		transform: translateY(-50%);
	}

	.filter-btn {
		position: relative;
		padding: 0 32rpx;
	}
</style>