rrys121/pages/store/home/index.vue

<template>
	<!-- 商品分类 -->
	<view :style="colorStyle">
		<!-- 门店的两种样式布局 -->
		<storeCate1 v-if="home_style==1" :info="info" :customerType="customer_type" ref="refresh2">
		</storeCate1>
		<storeCate2 v-else-if="home_style==2" :cart_num="cart_num" :info="info" :customerType="customer_type" ref="refresh">
		</storeCate2>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import colors from "@/mixins/color";
	import storeCate1 from './store_cate1.vue'
	import storeCate2 from './store_cate2.vue'
	import {
		getnearbyStore
	} from '@/api/new_store.js'
	import {
		colorChange
	} from '@/api/api.js';
	import {
		getCartCounts
	} from '@/api/order.js';
	// #ifdef MP
	import util from '@/utils/util.js';
	// #endif
	export default {
		computed: {
			...mapState({
				nearbyStore: state => state.app.nearbyStore
			}),
			...mapGetters(['isLogin', 'uid'])
		},
		components: {
			storeCate1,
			storeCate2,
		},
		mixins: [colors],
		data() {
			return {
				info: {},
				id: 0,
				category: '',
				home_style: 0,
				customer_type: 1,
				where: {
					latitude: 0,
					longitude: 0,
					store_id: 0
				},
				cart_num: 0,
				mapFrom: 0,
			}
		},
		watch: {
			nearbyStore(value) {
				this.where.store_id = value;
				this.getStore();
			}
		},
		onLoad(options) {
			// #ifdef MP
			if (options.scene) {
				options = util.getUrlParams(decodeURIComponent(options.scene));
			}
			// #endif
			this.where.store_id = this.nearbyStore;
			if (options.mapFrom) {
				this.mapFrom = options.mapFrom;
			}
			if (options.id) {
				this.where.store_id = options.id;
				uni.setStorageSync('user_store_id', options.id);
			}
			// this.mapFrom = options.mapFrom || 0;
			// this.where.store_id = options.id;
			// uni.setStorageSync('user_store_id', options.id);
			try {
				this.where.latitude = uni.getStorageSync('user_latitude');
				this.where.longitude = uni.getStorageSync('user_longitude');
				if (options.mapFrom == 1) {
					this.getStore();
					//this.getCartNum(options.id);
				} else {
					this.selfLocation();
					if (!this.$util.checkOpenGPSServiceByAndroidIOS()) {
						this.getStore();
					}
				}
			} catch (e) {
				this.getStore();
			}
		},
		onUnload() {
			this.mapFrom = 0;
			uni.$off('newAttrNum')
		},
		onHide() {
			this.mapFrom = 0;
		},
		onShow() {
			// if(uni.getStorageSync('form_type_cart')){
			// 	this.getStore();
			// }
			if (this.mapFrom == 0) {
				if (this.home_style == 1) {
					setTimeout(() => {
						this.$refs.refresh2.getNoCart();
					}, 10)
				}
			}
		},
		onPageScroll(e) {
			uni.$emit('onPageScroll', e);
			uni.$emit('scroll');
		},
		onReachBottom: function() {
			uni.$emit('onReachBottom');
		},
		methods: {
			otherFun(object) {
				if (!!object) {
					if (this.home_style == 1) {
						this.$refs.refresh2.updateFun(object);
					}
				}
			},
			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();
					}).catch(err => {
						self.getStore();
					})
				} else {
					// #endif
					uni.getLocation({
						type: 'gcj02',
						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();
						},
						fail: (err) => {
							// return self.$util.Tips({
							// 	title: err.errMsg
							// });
						},
						complete: function() {
							self.getStore();
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			// 获取接口附近门店
			getStore() {
				// this.where.latitude = uni.getStorageSync('user_latitude');
				// this.where.longitude = uni.getStorageSync('user_longitude');
				getnearbyStore(this.where).then(res => {
					let data = res.data;
					let info = data.info;
					if (Object.prototype.toString.call(info) === '[object Array]') {
						info = {};
					}
					this.info = {
						// #ifdef H5 || MP
						store_splicing_switch: data.store_splicing_switch,
						// #endif
						store_self_mention: parseInt(data.store_self_mention),
						...info,
					};
					this.cart_num = data.cart_num;
					this.customer_type = parseInt(info.customer_type);
					this.home_style = info.home_style || 0;
					this.id = info.id || 0;
					uni.setStorageSync('user_store_id', this.id);
					if (this.home_style === 1) {
						setTimeout(() => {
							// this.$refs.refresh2.getAllCategory();
							if (this.isLogin) {
								this.$refs.refresh2.getCartList(1);
							}
						}, 10)
					} else if (this.home_style === 2) {
						setTimeout(() => {
							// this.$refs.refresh.where.store_id = this.id
							// this.$refs.refresh.loadend = false
							// this.$refs.refresh.getProducts(true)
						})
					}
				})
			},
		},
	}
</script>
<style lang="scss">
	page {
		background: #F5F5F5;
	}

	/deep/.footer {
		position: fixed;
		right: 20rpx;
		left: 20rpx;
		bottom: 36rpx;
		bottom: calc(36rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		bottom: calc(36rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		z-index: 101;

		.cartIcon {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 96rpx;
			height: 96rpx;
			border-radius: 48rpx;
			background: linear-gradient(-90deg, var(--view-gradient), var(--view-theme));
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

			.image-wrap {
				width: 96rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.image {
				width: 54rpx;
				height: 54rpx;
				vertical-align: middle;
			}
		}

		.inner-box {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 96rpx;
			height: 96rpx;
			border-radius: 48rpx;
			overflow: hidden;
			transition: 0.3s;

			&.open {
				width: 100%;
			}
		}

		.inner {
			flex-wrap: nowrap;
			height: 96rpx;
			padding: 0 12rpx 0 128rpx;
			border-radius: 48rpx;
			background: #333333;
		}

		.btn {
			width: 186rpx;
			height: 72rpx;
			padding: 0 32rpx;
			background: linear-gradient(-90deg, var(--view-gradient) 0%, var(--view-theme) 100%);
			border-radius: 36rpx;
			text-align: center;
			font-weight: 500;
			font-size: 26rpx;
			line-height: 72rpx;
			color: #FFFFFF;
		}

		.detail-btn {
			margin-left: 16rpx;
			font-size: 24rpx;
			color: #FFFFFF;

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

	/deep/.goodCate .uni-badge-left-margin .uni-badge--error {
		background-color: #fff !important;
		color: var(--view-theme);
		border-color: var(--view-theme);
		z-index: 8;
	}

	/deep/.goodCate .footer .cartIcon .uni-badge-left-margin .uni-badge--error {
		right: 0 !important;
		top: 10px !important;
	}

	/deep/.one .uni-badge-left-margin .uni-badge--error {
		background-color: var(--view-theme) !important;
		color: #fff;
		border-color: #fff;
		z-index: 8;
	}

	/deep/.mask {
		z-index: 99;
	}

	/deep/.good-cate {
		padding: 80rpx;
	}

	/deep/.address-window {
		/* #ifdef H5 */
		bottom: 94rpx !important;
		bottom: calc(94rpx+ constant(safe-area-inset-bottom)) !important; ///兼容 IOS<11.2/
		bottom: calc(94rpx + env(safe-area-inset-bottom)) !important; ///兼容 IOS>11.2/
		/* #endif */
		/* #ifndef H5 */
		bottom: 98rpx;
		bottom: calc(98rpx + constant(safe-area-inset-bottom)) !important; ///兼容 IOS<11.2/
		bottom: calc(98rpx + env(safe-area-inset-bottom)) !important; ///兼容 IOS>11.2/

		/* #endif */
		&.ons {
			bottom: 0 !important;
			bottom: constant(safe-area-inset-bottom) !important; ///兼容 IOS<11.2/
			bottom: env(safe-area-inset-bottom) !important; ///兼容 IOS>11.2/
		}
	}

	/deep/.dialog_nav::before {
		margin: 0;
	}

	/deep/.dialog_nav {
		&.dialogIndex {
			&::before {
				left: -172rpx !important;
			}
		}
	}

	/deep/.menu_box {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;

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

	/deep/.tui-drawer-container_right {
		left: 80rpx !important;
		border-radius: 50rpx 0 0 50rpx;
	}

	/deep/.tui-header {
		.tui-list-cell {
			padding: 24rpx 10rpx !important;
			font-size: 24rpx !important;
			color: #333333 !important;

			&::after {
				display: none;
			}
		}

		.open {
			font-size: 20rpx;
			color: #999999;
		}
	}

	.brand-box {
		/deep/.tui-header {
			.tui-list-cell {
				padding: 24rpx 0 !important;
				font-weight: 500;
				font-size: 28rpx !important;
			}
		}
	}

	/deep/.input-box.fixed {
		background: #FFFFFF;
		top: 0;
		right: 0;
		left: 0;
		z-index: 10;

		.input {
			background: #F5F5F5;
			color: #999999;
		}

		.menu_box .iconfont {
			color: #333333;
		}
	}

	/* #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;
			}

			.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 */
</style>