tjqPhone/pages/store_cate/store_cate_index.vue

<template>
	<view class="one">
		<!-- 顶部搜索框 -->
		<view class="header">
			<image :src="imgHost+'/statics/images/store-header.png'" mode="" class="header-img"></image>
			<navigator url="/pages/goods/goods_search/index" class="input acea-row row-center-wrapper"
				hover-class="none">
				<!-- #ifndef MP  -->
				<view class="search">
					<!-- #endif -->
					<!-- #ifdef MP  -->
					<view class="search on acea-row row-middle" style="height: 43px;"
						:style="'top:'+statusBarHeight+'px;'">
						<view class="search_Back">
							<view class="iconfont icon-fanhui2" @tap.stop="returns"></view>
						</view>
						<view class="searchCon">
							<!-- #endif -->
							<text class="iconfont icon-xiazai5"></text>
							搜索店内商品
						</view>
						<!-- #ifdef MP  -->
					</view>
					<!-- #endif -->
			</navigator>
			<!-- 门店地址 -->
			<view class="address">
				<view class="left">
					<view class="left-title" @click="goMap">
						<text class="iconfont icon-mendian"></text>
						<text class="text line1">{{info.name || '暂无门店'}}</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
					<!-- 营业时间 -->
					<view class="time">
						营业时间：{{info.day_time || '-'}}
					</view>
					<view class="distance">
						<text class="iconfont icon-chakanditu"></text>
						距您<text>{{info.range||0}}km</text>
						<text class="distance-name">{{info.detailed_address}}</text>
					</view>

				</view>
				<!-- 客服 -->
				<view class="right">
					<view class="kefu" @click="goKefu()">
						<text class="iconfont icon-kefu-mendian" />
						<text>客服</text>
					</view>
					<view class="goods" @click="shoppCart">
						<view class="cartNum" v-if="cartNum>0">
							{{cartNum}}
						</view>
						<text class="iconfont icon-gouwuche-mendian" />
						<text>购物车</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品排序条件 -->
		<view class="content">
			<view class="nav">
				<view @click="set_where(1)" :class="{'activeColor':active == 1}">
					综合排序
				</view>
				<view @click='set_where(2)' :class="{'activeColor':active == 2}">
					价格
					<image v-if="price==1" src="../../static/images/up.png" alt="" class="nav-img"></image>
					<image v-else-if="price==2" src='../../static/images/down.png' class="nav-img"></image>
					<image v-else src='../../static/images/horn.png' class="nav-img"></image>
				</view>
				<view @click='set_where(3)' :class="{'activeColor':active == 3}">
					销量
					<image v-if="stock==1" src="../../static/images/up.png" alt="" class="nav-img"></image>
					<image v-else-if="stock==2" src='../../static/images/down.png' class="nav-img"></image>
					<image v-else src='../../static/images/horn.png' class="nav-img"></image>
				</view>
				<view @click="set_where(4)">
					<text class="iconfont icon-shaixuan"></text>
					筛选
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="list waterList">
			<waterfallsFlow ref="waterfallsFlow" :list="productList" @wapper-lick="godDetail">
				<!--  #ifdef  MP-WEIXIN -->
				<view v-for="(item, index) of productList" :key="index" slot="slot{{index}}">
					<view class="waterfalls">
						<view class='name line2'>{{item.store_name}}</view>
						<span class="label"
							v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
						<span class="label"
							v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
						<span class="label"
							v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
						<text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
						<view class="vip acea-row row-middle">
							<view class='money font-color'>
								￥<text class='num'>{{item.price.toString().split(".")[0]}}</text>
								<text class='nums'
									v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
							</view>
							<view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
								<view>￥{{item.vip_price}}</view>
								<!-- 	<image src='../../static/images/vip.png' v-if="item.price_type == 'member'"></image> -->
								<view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
										class="iconfont icon-huangguan4"></text>SVIP</view>
								<view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
										class="iconfont icon-dengjitubiao"></text>{{item.level_name}}</view>
							</view>
						</view>
						<view class='vip acea-row row-between-wrapper'>
							<view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
							<view>评分 {{item.star}}</view>
						</view>
					</view>
				</view>
				<!--  #endif -->

				<!-- #ifndef  MP-WEIXIN -->
				<template v-slot:default="item">
					<view class="waterfalls">
						<view class='name line2'>{{item.store_name}}</view>
						<span class="label"
							v-if="item.activity && item.activity.type === '1' && !promotions_type">秒杀</span>
						<span class="label"
							v-if="item.activity && item.activity.type === '2' && !promotions_type">砍价</span>
						<span class="label"
							v-if="item.activity && item.activity.type === '3' && !promotions_type">拼团</span>
						<text class="label" v-if="item.promotions.title">{{item.promotions.title}}</text>
						<view class="vip acea-row row-middle">
							<view class='money font-color'>
								￥<text class='num'>{{item.price.toString().split(".")[0]}}</text>
								<text class='nums'
									v-if="item.price.toString().split('.').length>1">.{{item.price.toString().split(".")[1]}}</text>
							</view>
							<block v-if="(userInfo.is_ever_level||userInfo.is_money_level)">
							<view class='vip-money acea-row row-middle' v-if="item.vip_price && item.vip_price > 0">
								<view>￥{{item.vip_price}}</view>
								<view class="icon on" v-if="item.price_type && item.price_type == 'member'"><text
										class="iconfont icon-huangguan4"></text>SVIP</view>
								<view class="icon" v-if="item.price_type && item.price_type == 'level'"><text
										class="iconfont icon-v"></text>{{item.level_name}}</view>
							</view>
							</block>
						</view>
						<view class='vip acea-row row-between-wrapper'>
							<view>已售{{item.sales}}{{item.unit_name || '件'}}</view>
							<view>评分 {{item.star}}</view>
						</view>
					</view>
				</template>
				<!-- #endif -->
			</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">
			<image :src="imgHost+'/statics/images/no-thing.png'" mode="" class="img"></image>
			<view class="text">
				暂无商品，去添加点什么吧
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<filterPopup ref="popup" :storeCategory="storeCategory" :storeBrand="storeBrand" @brandChange="brandChange"
			@categoryChange="categoryChange" @submitFn="submitFn"></filterPopup>
		<!-- 客服弹窗 -->
		<Kefu ref="kefu" @closeKefu="closeKefu" :customerList="customerList" :customerType="customerType"></Kefu>
	</view>
</template>

<script>
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import filterPopup from "@/components/filterPopup/index.vue";
	import Kefu from "@/components/kefu/index.vue"

	import {
		getnearbyStore
	} from '@/api/new_store.js'
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import {
		getProducts,
		getCustomerList,
		getStoreCategory,
		getStoreBrand
	} from '@/api/new_store.js';
	import {
		goShopDetail
	} from '@/libs/order.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		components: {
			filterPopup,
			waterfallsFlow,
			Kefu
		},
		computed: {
			...mapState({
				cartNum: state => state.indexData.cartNum
			}),
			...mapGetters(['isLogin', 'uid', 'cartNum','userInfo']),
		},
		data() {
			return {
				storeShow: 2,
				customerType: 1,
				info: {},
				statusBarHeight: statusBarHeight,
				imgHost: HTTP_REQUEST_URL,
				price: 0,
				stock: 0,
				productList: [], // 商品数据
				customerList: [], // 客服数据
				storeCategory: [], // 分类数据
				storeBrand: [], // 品牌数据
				show: false,
				active: 1,
				where: {
					cid: 0,
					sid: 0,
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					news: 0,
					page: 1,
					limit: 5,
					store_id: 0,
					brand_id: '',
				},
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
			}
		},
		onLoad() {
			try {
				this.where.latitude = uni.getStorageSync('user_latitude');
				this.where.longitude = uni.getStorageSync('user_longitude');
			} catch (e) {
				console.log(e);
			}
			if (this.where.latitude && this.where.longitude) {
				this.getStore();
			} else {
				this.selfLocation();
			}
		},
		mounted() {},
		methods: {
			returns: function() {
				uni.navigateBack();
			},
			getStore() {
				this.where.latitude = uni.getStorageSync('user_latitude');
				this.where.longitude = uni.getStorageSync('user_longitude');
				getnearbyStore(this.where).then(res => {
					this.info = res.data.info
					this.id = this.info.id
					this.customerType = parseInt(res.data.info.customer_type)
					uni.setStorageSync('user_store_id', this.info.id);
					setTimeout(() => {
						this.where.store_id = this.id
						this.getProducts(true)
					})
				})
			},
			// 获取附近位置
			selfLocation() {
				let self = this
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.location().then(res => {
						this.where.latitude = res.latitude;
						this.where.longitude = res.longitude;
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
						self.getStore();
					})
				} else {
					// #endif	
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							try {
								this.where.latitude = res.latitude;
								this.where.longitude = res.longitude;
								uni.setStorageSync('user_latitude', res.latitude);
								uni.setStorageSync('user_longitude', res.longitude);
							} catch {}
							self.getStore();
						},
						complete: function() {
							self.getStore();
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			// 选择品牌
			brandChange(val) {
				this.where.brand_id = val
			},
			// 选择分类
			categoryChange(val) {
				this.where.cid = val.cid
				this.where.sid = val.sid
			},
			// 确认提交
			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() {
				uni.navigateTo({
					url: "/pages/store/map/index?type=1&storeId=" + this.info.id
				})
			},
			// 打开客服
			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).then(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:
						console.log('1111111111');
						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 = '';
				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);

				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多'
				});
			},
			// 筛选-分类数据
			getStoreCategory() {
				let data = {
					pid: 0
				}
				getStoreCategory(data).then(res => {
					res.data.map(item => {
						this.$set(item, 'disabled', false)
						this.$set(item, 'current', -1)
						item.children.unshift({
							'id': 0,
							'cate_name': '全部'
						})
					})

					this.storeCategory = res.data
				})
			},
			// 筛选-品牌数据
			getStoreBrand() {
				getStoreBrand(this.where).then(res => {
					this.storeBrand = res.data
				})
			},
			// 触底刷新
			onReachBottom() {

				this.getProducts()

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

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

	.header {
		margin-bottom: 40rpx;

		.header-img {
			width: 100%;
			height: 300rpx;
			display: block;
		}

		.search {
			display: flex;
			flex-wrap: nowrap;
			position: absolute;
			// #ifndef MP
			top: 56rpx;
			// #endif
			left: 20rpx;
			// #ifdef MP
			width: 520rpx;
			// #endif
			// #ifndef MP
			width: 710rpx;
			// #endif
			height: 64rpx;
			background: rgba(255, 255, 255, 0.2800);
			border-radius: 43rpx;
			font-weight: 400;
			color: #FFFFFF;
			font-size: 26rpx;
			line-height: 64rpx;

			.search_Back {
				width: 50rpx;
				height: 100%;
				flex-shrink: 0;
				display: flex;
				align-items: center;
			}

			&.on {
				background: unset;
			}

			.searchCon {
				width: 100%;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.2800);
				border-radius: 43rpx;
				flex-shrink: 1;
			}

			.icon-xiazai5 {
				margin-left: 32rpx;
				margin-right: 12rpx;
			}
		}

		.address {
			position: absolute;
			top: 160rpx;
			margin: 0 20rpx;
			width: 710rpx;
			height: 192rpx;
			background: #fff;
			border-radius: 14rpx;
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;

			.left {
				.left-title {
					height: 30rpx;
					line-height: 30rpx;
					display: flex;

					image {
						width: 30rpx;
						height: 28rpx;
					}

					.text {
						font-weight: 600;
						color: #333333;
						font-size: 30rpx;
						margin: 0 10rpx;
						max-width: 390rpx;
					}

					.icon-xiangyou {
						color: #333;
						font-size: 24rpx;
					}
				}

				.time {
					margin: 20rpx 0;
					font-size: 22rpx;
					font-weight: 400;
					color: #666666;
				}

				.distance {
					width: 500rpx;
					font-size: 22rpx;
					color: #666666;
					font-weight: 400;

					.icon-chakanditu {
						margin-right: 8rpx;
						font-size: 28rpx;
						color: #ccc;
					}

					.distance-name {
						display: inline-block;
						width: 286rpx;
						height: 22rpx;
						border-left: 1px solid #000;
						margin-left: 16rpx;
						line-height: 22rpx;
						text-align: left;
						padding-left: 16rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}
				}
			}

			.right {
				margin-top: 36rpx;
				display: flex;
				font-size: 20rpx;
				color: #333333;

				.kefu {
					margin-right: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon-kefu-mendian {
						font-size: 36rpx;
					}
				}
			}

			.goods {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon-gouwuche-mendian {
					font-size: 36rpx;

				}

				.cartNum {
					position: absolute;
					top: -8rpx;
					right: 2rpx;
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					font-weight: 500;
					color: #FFFFFF;
					border-radius: 50%;
					background: var(--view-theme);
					border: 1px solid #FFFFFF;
				}

			}
		}
	}

	.goods-list {
		padding: 0 30rpx;
		margin-bottom: 50rpx !important;

	}

	.content {
		height: 100%;

		// margin-bottom: 200rpx;
		.nav {
			padding: 40rpx 50rpx 40rpx 50rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;

			.nav-img {
				width: 15rpx;
				height: 18rpx;
				margin-left: 10rpx;
			}

			.icon-shaixuan {
				font-size: 24rpx;
				margin-right: 10rpx;
			}
		}
	}

	.vip {
		margin: 20rpx 0 10rpx 0;

		.price {
			font-size: 34rpx;
			font-weight: 600;
			color: var(--view-theme);
		}

		.sold {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.list {
		padding: 0 20rpx 90rpx 20rpx;
	}

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

	.default {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.img {
			width: 414rpx;
			height: 256rpx;
		}

		.text {
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.waterfalls {
		padding: 10rpx 16rpx 16rpx 16rpx;
		color: #222;

		.name {
			font-size: 28rpx;
		}

		.label {
			font-size: 20rpx;
			color: var(--view-theme);
			border-radius: 4rpx;
			border: 1px solid var(--view-theme);
			padding: 0 6rpx;
			display: inline-block;
			margin-top: 10rpx;
			margin-right: 10rpx;
		}

		.money {
			font-size: 26rpx;
			font-weight: 700;

			.num {
				font-size: 34rpx;
			}

			.nums {
				font-size: 28rpx;
			}
		}

		.vip {
			font-size: 22rpx;
			color: #aaa;
			margin-top: 6rpx;

			.vip-money {
				font-size: 24rpx;
				color: #282828;
				font-weight: bold;

				.icon {
					font-size: 15rpx;
					background: #FF9500;
					color: #fff;
					border-radius: 18rpx;
					padding: 1rpx 6rpx;
					margin-left: 10rpx;
					min-width: 60rpx;

					.iconfont {
						font-size: 15rpx;
						margin-right: 5rpx;
					}

					&.on {
						background: #333;
						color: #FDDAA4;
						min-width: unset;
					}
				}

				image {
					width: 46rpx;
					height: 21rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
</style>