2023-5-16

api/water.js

@@ -14,4 +14,12 @@ export function waterDetail(data) {
 		method: 'get',
 		data
 	});
-}
+}
+// 获取商品二级分类
+export function category_layer(data) {
+	return request({
+		url: '/api/category_layer',
+		method: 'get',
+		data
+	});
+}

pages.json

@@ -516,8 +516,8 @@
 		"backgroundColor": "#f8f8f8"
 	},
 	"tabBar": {
-		"color": "#666666",
-		"selectedColor": "#F65486",
+		"color": "#999999",
+		"selectedColor": "#323C5B",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{

pages/home/cart.vue

@@ -1,368 +1,588 @@
 <template>
 	<view class="container">
 		<!-- 空白页 -->
-		<view v-if="!hasLogin || empty === true" class="empty">
+		<view v-if="!hasLogin" class="empty">
 			<image src="/static/error/emptyCart.png" class="emptyImg" mode="aspectFit"></image>
-			<view v-if="hasLogin" class="empty-tips">
-				空空如也
-				<navigator class="navigator" v-if="hasLogin" url="../home/index" open-type="switchTab">随便逛逛>
-				</navigator>
-			</view>
-			<view v-else class="empty-tips">
+			<view class="empty-tips">
 				空空如也
 				<view class="navigator" @click="navToLogin">去登陆></view>
 			</view>
 		</view>
-		<view v-else>
+		<view v-if="hasLogin">
 			<!-- 列表 -->
+			<view class="coupon flex" @click="Getcoupon" v-if="showCart == true">
+				<view class="tip red">优惠券</view>
+				<view class="tip">优惠券详情见活动页面</view>
+				<view class="tip green flex">
+					<view>更多优惠</view>
+					<view class="iconfont iconenter"></view>
+				</view>
+			</view>
+			<view class="emptyCart" v-if="showCart == false">
+				<view class="empty-img"><image src="/static/error/emptyCart.png"></image></view>
+				<view class="empty-text">
+					空空如也，
+					<text @click="ToCategory">随便逛逛</text>
+				</view>
+			</view>
 			<view class="cart-list">
-				<block v-for="(item, index) in cartList" :key="item.id">
-					<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
-						<view class="flex padding-r-20" @click="item.checked=!item.checked">
-							<image v-if='item.checked' class="checkedGoods" src="../../static/icon/addressIconXz.png"
-								mode="scaleToFill">
-							</image>
-							<view v-else class="icon-checked-box">
-
-							</view>
+				<view v-for="(item, index) in cartList" :key="index" class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
+					<view class="image-wrapper">
+						<image
+							:src="item.productInfo.image"
+							:class="[item.loaded]"
+							mode="aspectFill"
+							lazy-load
+							@load="onImageLoad('cartList', index)"
+							@error="onImageError('cartList', index)"
+						></image>
+						<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }" @click="check('item', index)"></view>
+					</view>
+					<view class="item-right">
+						<view class="flex">
+							<text class="clamp title">{{ item.productInfo.store_name }}</text>
+							<text class="del-btn iconfont iconclose" @click="deleteCartItem(item, 1)"></text>
+						</view>
+						<text class="attr">{{ item.attr_val }}</text>
+						<view class="flex">
+							<view class="price">¥{{ item.productInfo.price }}</view>
+							<uni-number-box
+								class="step"
+								:min="1"
+								:max="item.productInfo.stock"
+								:value="item.cart_num > item.productInfo.stock ? item.productInfo.stock : item.cart_num"
+								:isMax="item.cart_num >= item.productInfo.stock ? true : false"
+								:isMin="item.cart_num === 1"
+								:index="index"
+								:key="item.id"
+								:disabled="true"
+								@eventChange="numberChange"
+							></uni-number-box>
 						</view>
-						<image class="image-wrapper" :src="item.productInfo.image" :class="[item.loaded]"
-							mode="aspectFill" lazy-load @load="onImageLoad('cartList', index)"
-							@error="onImageError('cartList', index)"></image>
-						<view class="item-right">
-							<view class="clamp title">{{ item.productInfo.store_name }}</view>
-							<view class="attr">{{ item.productInfo.attrInfo.suk }}</view>
-							<view class="flex">
-								<text class="price">¥{{ item.productInfo.price }}</text>
-								<uni-number-box class="step" :min="1" :max="item.productInfo.stock"
-									:value="item.cart_num > item.productInfo.stock ? item.productInfo.stock : item.cart_num"
-									:isMax="item.cart_num >= item.productInfo.stock ? true : false"
-									:isMin="item.cart_num === 1" :index="index" @eventChange="numberChange">
-								</uni-number-box>
+					</view>
+				</view>
+			</view>
+			<view class="guess-name" v-if="invalList.length > 0">
+				<view class="img"><image src="../../static/image/img13.png"></image></view>
+				<view class="name">失效商品</view>
+			</view>
+			<view class="cart-list">
+				<view v-for="(item, ind) in invalList" :key="item.id" class="cart-item" :class="{ 'b-b': ind !== invalList.length - 1 }">
+					<view class="image-wrapper"><image :src="item.productInfo.image" mode="aspectFill"></image></view>
+					<view class="meng">已失效</view>
+					<view class="item-right">
+						<view class="flex">
+							<text class="clamp title">{{ item.productInfo.store_name }}</text>
+							<text class="del-btn iconfont iconclose" @click="deleteCartItem(item, 2)"></text>
+						</view>
+						<text class="attr">{{ item.attr_val }}</text>
+						<view class="flex">
+							<view class="price">¥{{ item.productInfo.price }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view v-if="Guesslist.length > 0">
+				<view class="guess-name">
+					<view class="img"><image src="../../static/image/img13.png"></image></view>
+					<view class="name">猜你喜欢</view>
+				</view>
+				<view id="list-box" class="list-box" :style="{ height: swiperHeight + 'px' }">
+					<view class="guess-section">
+						<view v-for="(item, index) in Guesslist" :key="index" class="guess-item" @click="ToDetail(item)">
+							<view class="imagewrapper"><image :src="item.image"></image></view>
+							<view class="guess-list">
+								<text class="title clamp margin-c-20">{{ item.store_name }}</text>
+								<view class="info clamp margin-c-20">{{ item.store_info }}</view>
+								<view class="tipBox margin-c-20">
+									<view class="tipsl" v-if="item.keyword != ''">
+										<text v-for="lss in item.keyword">{{ lss }}</text>
+									</view>
+								</view>
 							</view>
-							<view class="server" v-if="item.day>0">
-								(服务费：{{item.day_deducted}} 服务天数：{{item.day}})
+							<view class="price margin-c-20 flex">
+								<view class="price_list">
+									<view class="price-red">
+										￥{{ item.price }}
+										<text>/份</text>
+									</view>
+									<view class="price-green">
+										￥{{ item.ot_price }}
+										<text>市场价</text>
+									</view>
+								</view>
+								<view class="img position-relative" @click.stop="Addcar(item)">
+									<image src="/static/img/img21.png"></image>
+									<view class="corner" v-if="item.cart_num > 0">
+										<text>{{ item.cart_num }}</text>
+									</view>
+								</view>
 							</view>
 						</view>
-						<image class="del-btn" src="../../static/icon/goodsExit.png" @click="deleteCartItem(index)"
-							mode="scaleToFill"></image>
 					</view>
-				</block>
+				</view>
 			</view>
 			<!-- 底部菜单栏 -->
-			<view class="action-section">
-				<view class="flex leftBox">
-					<view class="checkbox" @click="check('all')">
-						<image class="icon-checked-box icon-checked" v-if='allChecked'
-							src="../../static/icon/addressIconXz.png" mode="scaleToFill"></image>
-						<view v-else class="icon-checked-box"></view>
-					</view>
-					<view class="margin-l-20">
-						全选
-					</view>
+			<view class="action-section" v-show="showCart">
+				<view class="checkbox">
+					<view class="iconfont iconroundcheckfill icon-checked-box" @click="check('all')" :class="{ 'icon-checked': allChecked }"></view>
+					<view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view>
 				</view>
 				<view class="total-box">
-					<view class="font-size-base">
-						<text>合计：</text>
-						<text class="price">¥{{ total }}</text>
-
-					</view>
-					<view class="coupon">
-						共{{checkedNum}}件商品
-					</view>
+					<text class="price">合计：¥{{ total }}</text>
 				</view>
-				<button type="primary" class="no-border confirm-btn" @click="createOrder">立即购买</button>
+				<button type="primary" class="no-border confirm-btn" @click="createOrder">结算</button>
 			</view>
 		</view>
 	</view>
 </template>
-
 <script>
-	import {
-		getCartList,
-		getCartNum,
-		cartDel
-	} from '@/api/user.js';
-	import {
-		mapState
-	} from 'vuex';
-	import {
-		saveUrl,
-		interceptor
-	} from '@/utils/loginUtils.js';
-	export default {
-		data() {
-			return {
-				total: 0, //总价格
-				allChecked: false, //全选状态  true|false
-				empty: false, //空白页现实  true|false
-				cartList: []
-			};
-		},
-		onShow() {
-			uni.setTabBarStyle({
-				backgroundColor: '#FFFFFF'
-			})
-			// 只有登录时才加载数据
-			if (this.hasLogin) {
-				this.loadData();
+import { getCartList, getCartNum, cartDel } from '@/api/user.js';
+import { getProducts,cartAdd } from '@/api/product.js';
+import { mapState } from 'vuex';
+import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+export default {
+	data() {
+		return {
+			total: 0, //总价格
+			allChecked: false, //全选状态  true|false
+			showCart: false, //隐藏购物车数据
+			empty: false, //空白页现实  true|false
+			cartList: [], //购物车商品
+			swiperHeight: 0,
+			Guesslist: '', //猜你喜欢
+			invalList: '' //失效商品
+		};
+	},
+	onShow() {
+		// 只有登录时才加载数据
+		if (this.hasLogin) {
+			this.loadData();
+			this.Guess();
+		}
+	},
+	onLoad(option){
+		if (option.spread) {
+			uni.setStorageSync('spread', option.spread);
+		}
+		saveUrl();
+	},
+	watch: {
+		//显示空白页
+		cartList(e) {
+			let empty = e.length === 0 ? true : false;
+			if (this.empty !== empty) {
+				this.empty = empty;
 			}
-		},
-		watch: {
-			//显示空白页
-			cartList(e) {
-				let empty = e.length === 0 ? true : false;
-				if (this.empty !== empty) {
-					this.empty = empty;
-				}
+			if (e.length > 0) {
+				this.showCart = true;
+			}
+			if (e.length == 0) {
+				this.showCart = false;
 			}
 		},
-		computed: {
-			...mapState('user', ['hasLogin']),
-			...mapState('shop', ['shopDetail']),
-			checkedNum() {
-				let num = 0;
-				for (var i = 0; i < this.cartList.length; i++) {
-					if (this.cartList[i].checked) {
-						num++
-					}
-				}
-				return num
-			},
-		},
-		methods: {
-			//请求数据
-			async loadData() {
-				let obj = this;
-				getCartList({
-					store_id:obj.shopDetail.id
-				})
-					.then(function(e) {
-						// 获取当前购物车物品增加数量
-						let nub = obj.cartList.length;
-						// 获取之前对象数组
-						let aArray = obj.cartList.reverse();
-						// 获取返回数据对象数组
-						let bArray = e.data.valid.reverse();
-						obj.cartList = bArray
-							.map((item, ind) => {
-								// 设置返回数据默认为勾选状态
-								item.checked = true;
-								// 获取相同数组之前对象的数据
-								let carlist = aArray[ind];
-								// 判断之前是否已经加载完毕
-								if (carlist && carlist.loaded == 'loaded') {
-									item.loaded = 'loaded';
-								}
-								return item;
-							})
-							.reverse();
+		// 初次加载页面高度时修改页面高度
+		Guesslist(newValue, oldValue) {
+			let obj = this;
+			let bHeight = Math.ceil(newValue.length / 2);
+			obj.$nextTick(function() {
+				uni.createSelectorQuery()
+					.select('#list-box')
+					.fields(
+						{
+							size: true
+						},
+						function(data) {
+							obj.pageProportion = data.width / 750;
+							obj.swiperHeight = Math.ceil(obj.pageProportion * 620 * bHeight);
+						}
+					)
+					.exec();
+			});
+		}
+	},
+	computed: {
+		...mapState('user', ['hasLogin'])
+	},
+	//下拉刷新
+	onPullDownRefresh() {
+		let obj = this;
+		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
+		setTimeout(function() {
+			obj.loadData();
+			uni.stopPullDownRefresh(); //停止下拉刷新动画
+		}, 1000);
+	},
+	methods: {
+		//请求数据
+		async loadData() {
+			let obj = this;
+			getCartList({})
+				.then(function(e) {
+					obj.invalList = e.data.invalid;
+					// 获取当前购物车物品增加数量
+					let nub = obj.cartList.length;
+					// 获取之前对象数组
+					let aArray = obj.cartList.reverse();
+					// 获取返回数据对象数组
+					let bArray = e.data.valid.reverse();
+					// 处理数据缓存
+					let arr = bArray
+						.map((item, ind) => {
+							// 设置返回数据默认为勾选状态
+							item.checked = true;
+							// 获取相同数组之前对象的数据
+							let carlist = aArray[ind];
+							// 判断之前是否已经加载完毕
+							if (carlist && carlist.loaded == 'loaded') {
+								item.loaded = 'loaded';
+							}
+							return item;
+						})
+						.reverse();
+
+					obj.$set(obj, 'cartList', []);
+					obj.$nextTick(e => {
+						obj.$set(obj, 'cartList', arr);
 						obj.calcTotal(); //计算总价
-					})
-					.catch(function(e) {
-						console.log(e);
-					});
-			},
-			//监听image加载完成
-			onImageLoad(key, index) {
-				// 修改载入完成后图片class样式
-				this.$set(this[key][index], 'loaded', 'loaded');
-			},
-			//监听image加载失败
-			onImageError(key, index) {
-				this[key][index].image = '/static/error/errorImage.jpg';
-			},
-			// 跳转到登录页
-			navToLogin() {
-				// 保存地址
-				saveUrl();
-				// 登录拦截
-				interceptor();
-			},
-			//选中状态处理
-			check(type, index) {
-				if (type === 'item') {
-					this.cartList[index].checked = !this.cartList[index].checked;
-				} else {
-					const checked = !this.allChecked;
-					const list = this.cartList;
-					list.forEach(item => {
-						item.checked = checked;
 					});
-					this.allChecked = checked;
-				}
-				this.calcTotal(type);
-			},
-			//数量
-			numberChange(data) {
-				let arr = this.cartList[data.index];
-				arr.cart_num = data.number;
-				getCartNum({
-						id: arr.id,
-						number: data.number
-					})
-					.then(e => {
-						console.log(e);
-					})
-					.catch(function(e) {
-						console.log(e);
+				})
+				.catch(function(e) {
+					console.log(e);
+				});
+		},
+		// #ifdef MP
+		onShareAppMessage: function(res) {
+			let userInfo = uni.getStorageSync('userInfo');
+			let GetInfo = uni.getStorageSync('GetInfo');
+			// 来自页面内分享按钮
+			let pages = getCurrentPages();
+			// 获取当前页面
+			let page = pages[pages.length - 1];
+			let path = '/pages/index/index?';
+			// 保存邀请人
+			path += 'spread=' + userInfo.uid;
+			let data = {
+				path: path,
+				imageUrl: GetInfo.img,
+				title: GetInfo.title
+			};
+			console.log(data)
+			return data;
+		},
+		// #endif
+		// 猜你喜欢
+		Guess() {
+			let obj = this;
+			getProducts({
+				page: 1,
+				limit: 10,
+				type: 1,
+				sid: 97 //分类id
+			})
+				.then(({ data }) => {
+					obj.Guesslist = data;
+				})
+				.catch(err => {
+					console.log(err);
+				});
+		},
+		//加入购物车
+		Addcar(item) {
+			let obj = this;
+			cartAdd({
+				cartNum: '1', //商品数量
+				uniqueId: '', //商品标签
+				new: 0, //商品是否新增加到购物车1为不加入0为加入
+				mer_id: '',
+				productId: item.id //商品编号
+			})
+				.then(function(e) {
+					uni.showToast({
+						title: '成功加入购物车',
+						type: 'top',
+						duration: 500,
+						icon: 'none'
 					});
-				this.calcTotal();
-			},
-			//删除
-			deleteCartItem(index) {
-				let list = this.cartList;
-				let row = list[index];
-				let id = row.id;
-				uni.showModal({
-					title: '提示',
-					content: '是否删除'+row.productInfo.store_name,
-					success: res => {
-						if(res.confirm){
-							cartDel({
-								ids: id
-							});
-							this.cartList.splice(index, 1);
-							uni.hideLoading();
-							this.calcTotal();
-						}
-					}
+					obj.Guess();
+					obj.loadData();
+				})
+				.catch(e => {});
+		},
+		// 商品详情页
+		ToDetail(item) {
+			if (item.stock < 1) {
+				this.$api.msg('该商品已售罄');
+			} else {
+				uni.navigateTo({
+					url: `/pages/product/product?id=` + item.id
 				});
-				
-			},
-			//清空
-			// clearCart() {
-			// 	uni.showModal({
-			// 		content: '清空购物车？',
-			// 		success: e => {
-			// 			if (e.confirm) {
-			// 				let st = this.cartList.map(e => {
-			// 					return e.id;
-			// 				});
-			// 				cartDel({
-			// 					ids: st.join(',')
-			// 				}).then(e => {
-			// 					console.log(e);
-			// 				});
-			// 				this.cartList = [];
-			// 			}
-			// 		}
-			// 	});
-			// },
-			//计算总价
-			calcTotal() {
-				let list = this.cartList;
-				if (list.length === 0) {
-					this.empty = true;
-					return;
-				}
-				let total = 0;
-				let checked = true;
+			}
+		},
+		ToCategory() {
+			uni.switchTab({
+				url: `/pages/category/category`
+			});
+		},
+		//领取优惠券
+		Getcoupon() {
+			uni.navigateTo({
+				url: '/pages/coupon/getcoupon'
+			});
+		},
+		//监听image加载完成
+		onImageLoad(key, index) {
+			// 修改载入完成后图片class样式
+			this.$set(this[key][index], 'loaded', 'loaded');
+		},
+		//监听image加载失败
+		onImageError(key, index) {
+			this[key][index].image = '/static/error/errorImage.jpg';
+		},
+		// 跳转到登录页
+		navToLogin() {
+			// 保存地址
+			saveUrl();
+			// 登录拦截
+			interceptor();
+		},
+		//选中状态处理
+		check(type, index) {
+			if (type === 'item') {
+				this.cartList[index].checked = !this.cartList[index].checked;
+			} else {
+				const checked = !this.allChecked;
+				const list = this.cartList;
 				list.forEach(item => {
-					if (item.checked === true) {
-						total += item.productInfo.price * item.cart_num;
-					} else if (checked === true) {
-						checked = false;
-					}
+					item.checked = checked;
 				});
 				this.allChecked = checked;
-				this.total = Number(total.toFixed(2));
-			},
-			//创建订单
-			createOrder() {
-				let list = this.cartList;
-				let goodsData = [];
-				list.forEach(item => {
-					if (item.checked) {
-						goodsData.push(item.id);
-					}
+			}
+			this.calcTotal(type);
+		},
+		//数量
+		numberChange(data) {
+			console.log(data);
+			let arr = this.cartList[data.index];
+			arr.cart_num = data.number;
+			getCartNum({ id: arr.id, number: data.number })
+				.then(e => {})
+				.catch(function(e) {
+					console.log(e);
 				});
-
-				uni.navigateTo({
-					url: '/pages/order/createOrder?id=' + goodsData.join(',')
+			this.calcTotal();
+			this.Guess();
+		},
+		//删除
+		deleteCartItem(index, type) {
+			uni.showLoading({
+				title: '加载中'
+			});
+			let id = index.id;
+			let obj = this;
+			// if(type == 1){
+			// 	let list = this.cartList;
+			// 	let row = list[index];
+			// 	id = row.id;
+			// }else{
+			// 	let list = this.invalList;
+			// 	let row = list[index];
+			// 	id = row.id;
+			// }
+			// if(type == 1){
+			// 	this.cartList.splice(index, 1);
+			// 	this.calcTotal();
+			// }else{
+			// 	this.invalList.splice(index, 1);
+			// }
+			cartDel({
+				ids: id
+			})
+				.then(function(e) {
+					uni.hideLoading();
+					obj.loadData();
+					obj.calcTotal();
+					obj.Guess();
+				})
+				.catch(e => {
+					uni.hideLoading();
+					console.log(e.message);
 				});
+		},
+		//清空
+		clearCart() {
+			uni.showModal({
+				content: '清空购物车？',
+				success: e => {
+					if (e.confirm) {
+						let st = this.cartList.map(e => {
+							return e.id;
+						});
+						cartDel({
+							ids: st.join(',')
+						}).then(e => {
+							console.log(e);
+						});
+						this.cartList = [];
+						this.Guess();
+					}
+				}
+			});
+		},
+		//计算总价
+		calcTotal() {
+			let list = this.cartList;
+			console.log(list, 7);
+			if (list.length === 0) {
+				this.empty = true;
+				return;
 			}
+			let total = 0;
+			let checked = true;
+			list.forEach(item => {
+				if (item.checked === true) {
+					total += item.productInfo.price * item.cart_num;
+				} else if (checked === true) {
+					checked = false;
+				}
+			});
+			this.allChecked = checked;
+			this.total = Number(total.toFixed(2));
+		},
+		//创建订单
+		createOrder() {
+			let list = this.cartList;
+			let goodsData = [];
+			list.forEach(item => {
+				if (item.checked) {
+					goodsData.push(item.id);
+				}
+			});
+
+			uni.navigateTo({
+				url: '/pages/order/createOrder?id=' + goodsData.join(',')
+			});
+		},
+		//随便逛逛
+		Toindex() {
+			uni.switchTab({
+				url: '/pages/category/category'
+			});
 		}
-	};
+	}
+};
 </script>
 
 <style lang="scss">
-	.container {
-		padding-bottom: 134rpx;
-		background-color: $page-color-base;
-		/* #ifdef MP-WEIXIN || H5 */
-		padding-top: 30rpx;
-		/* #endif */
-		/* #ifdef APP */
-		padding-top: var(--status-bar-height);
-		/* #endif */
-		/* 空白页 */
-		.empty {
-			position: fixed;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100vh;
-			padding-bottom: 100rpx;
-			display: flex;
-			justify-content: center;
-			flex-direction: column;
-			align-items: center;
-			background: #fff;
-
-			.emptyImg {
-				width: 300rpx;
-				height: 250rpx;
-				margin-bottom: 30rpx;
+.container {
+	padding-bottom: 134rpx;
+	background-color: $page-color-base;
+	.emptyCart {
+		position: relative;
+		width: 100%;
+		padding-top: 150rpx;
+		.empty-img {
+			width: 385rpx;
+			height: 300rpx;
+			margin: 0rpx auto;
+			image {
+				width: 100%;
+				height: 100%;
 			}
-
-			.empty-tips {
-				display: flex;
-				font-size: $font-sm + 2rpx;
-				color: $font-color-disabled;
-
-				.navigator {
-					color: $uni-color-primary;
-					margin-left: 16rpx;
-				}
+		}
+		.empty-text {
+			text-align: center;
+			font-size: $font-sm + 2rpx;
+			color: $font-color-disabled;
+			margin-bottom: 100rpx;
+			text {
+				color: $uni-color-primary;
 			}
 		}
 	}
-
-	/* 购物车列表项 */
-	.cart-list {
-		padding: 0 30rpx;
+	/* 空白页 */
+	.empty {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100vh;
+		padding-bottom: 100rpx;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
+		background: #fff;
+		.emptyImg {
+			width: 300rpx;
+			height: 250rpx;
+			margin-bottom: 30rpx;
+		}
+		.empty-tips {
+			display: flex;
+			font-size: $font-sm + 2rpx;
+			color: $font-color-disabled;
+			.navigator {
+				color: $uni-color-primary;
+				margin-left: 16rpx;
+			}
+		}
+		.empty {
+			width: 100%;
+			height: 500rpx;
+		}
 	}
-
+}
+/* 购物车列表项 */
+.coupon {
+	width: 92%;
+	margin: 25rpx auto;
+	border-radius: 25rpx;
+	background: #ffffff;
+	font-size: 20rpx !important;
+	padding: 25rpx 15rpx;
+	.red {
+		background-color: #fe1212;
+		color: #ffffff;
+		line-height: 35rpx;
+		padding: 0rpx 20rpx;
+		border-radius: 25rpx;
+	}
+	.green {
+		color: #2dbd59;
+	}
+	.tip.green {
+		height: 30rpx;
+	}
+}
+.cart-list {
+	background: #ffffff;
+	width: 92%;
+	margin: 25rpx auto;
+	border-radius: 25rpx;
 	.cart-item {
 		display: flex;
 		position: relative;
-		padding: 20rpx;
-		background-color: #FFFFFF;
-		margin-bottom: 20rpx;
-		border-radius: 20rpx;
-
-		.icon-checked-box {
-			width: 37rpx;
-			height: 37rpx;
-			z-index: 5;
-			border: 1px solid $font-color-light;
-			border-radius: 99rpx;
-		}
-
-		.checkedGoods {
-			width: 37rpx;
-			height: 37rpx;
-		}
-
+		padding: 30rpx 40rpx;
 		.image-wrapper {
-			width: 170rpx;
-			height: 170rpx;
+			width: 160rpx;
+			height: 160rpx;
 			flex-shrink: 0;
 			position: relative;
-			border-radius: 20rpx;
+			image {
+				border-radius: 8rpx;
+			}
+		}
+		.meng {
+			width: 160rpx;
+			height: 160rpx;
+			position: absolute;
+			background-color: rgba(0, 0, 0, 0.6);
+			color: #ffffff;
+			font-size: 22rpx;
+			line-height: 160rpx;
+			text-align: center;
 		}
-
 		.checkbox {
 			position: absolute;
 			left: -16rpx;
@@ -375,136 +595,269 @@
 			background: #fff;
 			border-radius: 50px;
 		}
-
 		.item-right {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
 			overflow: hidden;
 			position: relative;
 			padding-left: 30rpx;
-			flex-grow: 1;
-
-			.title,
-			.price {
-				font-size: $font-base;
+			.title {
+				font-size: $font-base + 2rpx;
 				color: $font-color-dark;
+				height: 40rpx;
+				line-height: 40rpx;
 			}
-
-			.attr {
-				font-size: 24rpx;
-				color: $font-color-light;
+			.price {
+				font-size: $font-base + 2rpx;
+				color: #ff1a27;
+				font-weight: bold;
 				height: 40rpx;
 				line-height: 40rpx;
 			}
-
-			.server {
-				font-size: 24rpx;
+			.attr {
+				font-size: $font-sm + 2rpx;
 				color: $font-color-light;
-				margin-top: 10rpx;
+				height: 50rpx;
+				line-height: 50rpx;
 			}
-
 			.price {
-				font-size: 30rpx;
-				color: $color-green;
+				height: 50rpx;
+				line-height: 50rpx;
 			}
 		}
-
 		.del-btn {
-			flex-shrink: 0;
-			height: 40rpx;
-			width: 40rpx;
+			padding: 4rpx 10rpx;
+			font-size: 34rpx;
+			height: 50rpx;
+			color: $font-color-light;
 		}
 	}
-
-	/* 底部栏 */
-	.action-section {
-		/* #ifdef H5 */
-		margin-bottom: 100rpx;
-		/* #endif */
-		position: fixed;
-		left: 0rpx;
-		bottom: 0rpx;
-		z-index: 95;
+}
+.guess-name {
+	padding: 25rpx 25rpx;
+	font-size: 32rpx;
+	text-align: center;
+	.img {
+		width: 80%;
+		margin: 0rpx auto;
+		height: 4rpx;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+/* 猜你喜欢 */
+.guess-section {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0 20rpx;
+	.guess-item {
+		// height: 558rpx;
+		position: relative;
+		overflow: hidden;
 		display: flex;
-		align-items: center;
-		width: 750rpx;
-		height: 100rpx;
-		padding: 0 30rpx;
-		background: rgba(255, 255, 255, 0.9);
-
-		.leftBox {
-			padding-right: 30rpx;
-			border-right: 1px solid $font-color-disabled;
+		flex-direction: column;
+		border: 2rpx solid #eeeeee;
+		width: 343rpx;
+		margin-bottom: 4%;
+		border-radius: $border-radius-sm;
+		background-color: white;
+		padding-bottom: 30rpx;
+		&:nth-child(2n + 1) {
+			margin-right: 24rpx;
 		}
-
-		.checkbox {
-			line-height: 1;
-			font-size: 30rpx;
-
-			.icon-checked-box {
-				width: 37rpx;
-				height: 37rpx;
-				z-index: 5;
-				border: 1px solid $font-color-light;
-				border-radius: 99rpx;
+	}
+	.imagewrapper {
+		width: 100%;
+		height: 330rpx;
+		border-radius: 3px;
+		margin-bottom: 15rpx;
+		image {
+			width: 100%;
+			height: 100%;
+			// opacity: 1;
+		}
+	}
+	.guess-list {
+		height: 130rpx;
+		.title {
+			font-size: 28rpx;
+			color: $font-color-dark;
+		}
+		.info {
+			color: #999999;
+			font-size: 24rpx;
+		}
+		.tipBox {
+			// padding-bottom: 8rpx;
+			.tipsl {
+				text {
+					border: 2rpx solid #ff1a27;
+					color: #ff1a27;
+					border-radius: 5rpx;
+					font-size: 18rpx;
+					padding: 2rpx 5rpx;
+					margin-right: 15rpx;
+				}
 			}
-
-			.icon-checked {
-				border: none;
-				color: $base-color;
+		}
+	}
+	.price {
+		font-size: 28rpx;
+		width: 303rpx;
+		// padding-top: 25rpx;
+		position: relative;
+		.price_list {
+			.price-red {
+				font-weight: bold;
+				font-size: 32rpx !important;
+				color: #ff1a27;
+				text {
+					color: #9699a0;
+					font-size: 24rpx !important;
+					font-weight: normal;
+					padding: 0rpx 10rpx;
+				}
+			}
+			.price-green {
+				color: #2dbd59;
+				font-size: 24rpx !important;
+				text {
+					background: #2dbd59;
+					color: #ffffff;
+					padding: 0rpx 8 rpx;
+					border-radius: 7rpx;
+					font-size: 20rpx !important;
+					margin-left: 8rpx;
+				}
 			}
 		}
-
-		.clear-btn {
+		.img {
 			position: absolute;
-			left: 26rpx;
-			top: 0;
-			z-index: 4;
-			width: 0;
-			height: 52rpx;
-			line-height: 52rpx;
-			padding-left: 38rpx;
-			font-size: $font-base;
-			color: #fff;
-			background: $font-color-disabled;
-			border-radius: 0 50px 50px 0;
-			opacity: 0;
-			transition: 0.2s;
-
-			&.show {
-				opacity: 1;
-				width: 120rpx;
+			bottom: 0;
+			right: 0;
+			width: 50rpx;
+			height: 50rpx;
+			image {
+				width: 100%;
+				height: 100%;
 			}
 		}
+	}
 
-		.total-box {
-			flex-grow: 1;
-			padding-left: 30rpx;
-			font-size: 30rpx;
-
-			.price {
-				color: $color-green;
-			}
+	.icon {
+		@extend %icon;
+	}
 
-			.coupon {
-				font-size: 24rpx;
-				color: $font-color-light;
-			}
+	.detail {
+		line-height: 1;
+	}
+	.tip {
+		color: white;
+		background-color: $color-yellow;
+		line-height: 1.5;
+		font-size: $font-sm;
+		padding-left: 20rpx;
+	}
+}
+/*公用边框样式*/
+%icon {
+	margin-right: 10rpx;
+	display: inline-block;
+	padding: 2rpx 10rpx;
+	border: 1rpx solid $color-yellow;
+	color: $color-yellow;
+	line-height: 1;
+	font-size: $font-base;
+	border-radius: 10rpx;
+}
+/* 底部栏 */
+.action-section {
+	/* #ifdef H5 */
+	margin-bottom: 100rpx;
+	/* #endif */
+	position: fixed;
+	// left: 30rpx;
+	bottom: 0rpx;
+	z-index: 95;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 120rpx;
+	padding: 0 30rpx;
+	background: #ffffff;
+	// box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
+	.checkbox {
+		height: 52rpx;
+		position: relative;
+		.icon-checked-box {
+			border-radius: 50rpx;
+			background-color: #ffffff;
+			width: 52rpx;
+			height: 100%;
+			position: relative;
+			z-index: 5;
+			font-size: 53rpx;
+			line-height: 1;
+			color: $font-color-light;
 		}
-
-		.confirm-btn {
-			padding: 0 70rpx;
-			margin: 0;
-			border-radius: 100px;
-			height: 70rpx;
-			line-height: 70rpx;
-			font-size: 24rpx;
-			background: $color-yellow;
-			color: #714D01;
+		.icon-checked {
+			color: $base-color;
 		}
 	}
-
-	/* 复选框选中状态 */
-	.action-section .checkbox.checked,
-	.cart-item .checkbox.checked {
-		color: $base-color;
+	.clear-btn {
+		position: absolute;
+		left: 26rpx;
+		top: 0;
+		z-index: 4;
+		width: 0;
+		height: 52rpx;
+		line-height: 52rpx;
+		padding-left: 38rpx;
+		font-size: $font-base;
+		color: #fff;
+		background: $font-color-disabled;
+		border-radius: 0 50px 50px 0;
+		opacity: 0;
+		transition: 0.2s;
+		&.show {
+			opacity: 1;
+			width: 120rpx;
+		}
+	}
+	.total-box {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		text-align: right;
+		padding-right: 40rpx;
+		.price {
+			font-size: $font-lg;
+			color: #ff383e;
+		}
+		.coupon {
+			font-size: $font-sm;
+			color: $font-color-light;
+			text {
+				color: $font-color-dark;
+			}
+		}
+	}
+	.confirm-btn {
+		padding: 0 45rpx;
+		margin: 0;
+		border-radius: 100px;
+		height: 70rpx;
+		line-height: 70rpx;
+		font-size: $font-base + 2rpx;
+		background: #ff1a27;
 	}
+}
+/* 复选框选中状态 */
+.action-section .checkbox.checked,
+.cart-item .checkbox.checked {
+	color: $base-color;
+}
 </style>

pages/home/category.vue

@@ -1,68 +1,365 @@
 <template>
 	<view class="content">
-		<scroll-view scroll-y class="left-aside">
-			<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">{{ item.cate_name }}</view>
-		</scroll-view>
-		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
-			<view v-for="item in flist" :key="item.id" class="s-list" :id="'main-' + item.id">
-				<text class="s-item">{{ item.cate_name }}</text>
-				<view class="t-list ">
-					<view @click="navToList(item.id, titem.id)" class="t-item" v-for="titem in item.children" :key="titem.id">
-						<image :src="titem.pic"></image>
-						<text>{{ titem.cate_name }}</text>
-					</view>
+		<view class="scroll-top flex_item">
+			<scroll-view class="scroll-list" scroll-x>
+				<view class="scoll-box" v-for="ls in flist" :class="{ active: ls.id === currentId }" @click="tabtap(ls.id)">
+					<view class="scoll-img"><image :src="ls.pic"></image></view>
+					<view class="scoll-name">{{ ls.cate_name }}</view>
 				</view>
+			</scroll-view>
+			<view class="search-box" @click="Toseach">
+				<view class="search"><image src="/static/img/img22.png" mode="scaleToFill"></image></view>
+				<view>搜索</view>
 			</view>
-		</scroll-view>
+		</view>
+		<view class="scroll-view flex-tpl" :style="{ height: pageHeight + 'px' }">
+			<scroll-view scroll-y class="left-aside">
+				<view v-for="item in slist"  class="f-item" :class="{ active_top: item.id === erjiid }" @click="changeSlist(item)">{{ item.name }}</view>
+			</scroll-view>
+			<scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
+				<view class="image" id="topImg" @click="Tomember">
+					<image mode="scaleToFill" class="imageLV" src="http://shicai.liuniu946.com/static/img/bpbx.jpg"></image>
+				</view>
+				<view class="tlist-box" v-for="ls in slist" :id="'main-' + ls.id">
+					<view class="tlistname" v-if="ls.list">{{ ls.name }}</view>
+					<view class="tlist-list flex_item" v-if="ls.list" v-for="item in ls.list" @click="ToDetail(item)">
+						<view class="tlist-img">
+							<view class="img"><image :src="item.image" :lazy-load="true" mode="scaleToFill"></image></view>
+							<view class="stock flex_item" v-if="item.stock > 0">
+								<image class="img" src="/static/img/img01.png" mode="scaleToFill"></image>
+								<view class="stock-num clamp">库存剩{{ item.percent | parseIntTo }}%</view>
+							</view>
+						</view>
+						<view class="sell-out" v-if="item.stock == 0"><text>已售罄</text></view>
+						<view class="tlist-info">
+							<view class="name clamp">{{ item.store_name }}</view>
+							<view class="info clamp">{{ item.store_info }}</view>
+							<view class="tipBox">
+								<view class="tip clamp" v-if="item.keyword != ''">
+									<text v-for="lss in item.keyword">{{ lss }}</text>
+								</view>
+							</view>
+							<view class="tlist-price flex">
+								<view class="price-box">
+									<view class="price">
+										¥
+										<text class="blod">{{ item.price }}</text>
+										<text class="fen">/份</text>
+									</view>
+									<view class="vip_price">
+										¥{{ item.ot_price }}
+										<text>市场价</text>
+									</view>
+								</view>
+								<view class="gocar position-relative" @click.stop="Addcar(item)">
+									<image src="/static/img/img21.png" mode="scaleToFill"></image>
+									<view class="corner" v-if="item.cart_num > 0">
+										<text>{{ item.cart_num }}</text>
+									</view>
+								</view>
+							</view>
+							<view class="bottom_border"></view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
-
 <script>
-import { getCategoryList } from '@/api/product.js';
+import { mapState, mapMutations } from 'vuex';
+import { category_layer } from '@/api/water.js';
+import { getProducts,cartAdd } from '@/api/product.js';
+import { getUserInfo } from '@/api/login.js';
+import { saveUrl } from '@/utils/loginUtils';
 export default {
 	data() {
 		return {
 			sizeCalcState: false,
 			tabScrollTop: 0,
-			currentId: 9,
-			flist: [],
+			currentId: '', //一级选择id，
+			erjiid: '', //二级选择id
+			flist: [], //一级分类列表
+			slist: [], //二级分类列表
+			yijishow: true, //一级界面显示
+			sanjishow: false, //三级界面隐藏
+			bili: 1, //设置页面比例
+			pageHeight: 0, //保存滚轮页面高度
+			CategoryID: '',
+			userInfo: '',
+			onload: true, //保存数据判断是否是第一次打开页面
+			scrollAnimation: true //是否开启动画
 		};
 	},
-	onLoad() {
+	onLoad(option) {
+		if (option.spread) {
+			uni.setStorageSync('spread', option.spread);
+		}
+		saveUrl();
+		uni.showLoading({
+			title: '加载中'
+		});
 		this.loadData();
 	},
+	onShow() {
+		let obj = this;
+		const categoryId = uni.getStorageSync('categoryId') || '';
+		if (obj.currentId != categoryId && categoryId != '' && !obj.onload) {
+			obj.tabtap(categoryId);
+		}
+		// 初次数据加载完毕
+		obj.onload = false;
+	},
+	onReady() {
+		// 初始化获取页面宽度
+		uni.createSelectorQuery()
+			.select('.content')
+			.fields(
+				{
+					size: true
+				},
+				data => {
+					// 获取页面百分比
+					this.bili = data.width / 750;
+					console.log(data, 2);
+					this.pageHeight = data.height - 185 * this.bili;
+					console.log(this.pageHeight, 33);
+				}
+			)
+			.exec();
+	},
+	// #ifndef MP
 	// 监听导航栏输入框点击事件
 	onNavigationBarSearchInputClicked(e) {
 		uni.navigateTo({
 			url: '/pages/product/search'
 		});
 	},
+	// #endif
+	//下拉刷新
+	onPullDownRefresh() {
+		let obj = this;
+		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
+		setTimeout(function() {
+			obj.loadData();
+			uni.stopPullDownRefresh(); //停止下拉刷新动画
+		}, 1000);
+	},
+	filters: {
+		parseIntTo(percent) {
+			percent = +percent * 100;
+			if (percent % 1 === 0) {
+				return percent;
+			} else {
+				percent = percent.toFixed(1);
+				return percent;
+			}
+		}
+	},
+	computed: {
+		...mapState(['GetInfo']),
+	},
 	methods: {
 		// 载入数据
 		async loadData() {
 			let obj = this;
-			getCategoryList({})
+			obj.loading = true;
+			category_layer({})
+				.then(({ data }) => {
+					obj.flist = data.list;
+					obj.currentId = data.first;
+					obj.erji();
+				})
+				.catch(err => {
+					console.log(err);
+				});
+		},
+		// 二级数据加载
+		erji() {
+			let obj = this;
+			getProducts({
+				cid: obj.currentId,
+				flag: 1,
+				type: 1
+			})
 				.then(({ data }) => {
-					obj.flist = data.map(function(s) {
+					// let newArr = [];
+					// let arr = [];
+					obj.slist = data.map(function(s) {
+						// if(s.list){
+						// 	arr = s.list;
+						// 	newArr.push(...arr);
+						// }
+						// if (s.list) {
+						// 	s.list = s.list.map(function(e) {
+						// 		e.percent = +e.percent*100;
+						// 		console.log(e.percent )
+						// 		if (e.percent % 1 === 0) {
+						// 			return e;
+						// 		} else {
+						// 			e.percent = e.percent.toFixed(1);
+						// 			console.log(e.percent )
+						// 			return e;
+						// 		}
+						// 	});
+						// }
 						return s;
 					});
+					obj.erjiid = obj.slist[0].id;
+					obj.$nextTick(e => {
+						// 重新开启动画效果
+						uni.hideLoading();
+						// 数据加载完成后重新计算高度
+						obj.calcSize()
+						obj.scrollAnimation = true;
+					});
+					// obj.erjiid = newArr[0].id;
+					// data.forEach(function(e) {
+					// 	if (e.list) {
+					// 		obj.tlist = obj.tlist.concat(e.list);
+					// 	}
+					// });
 				})
 				.catch(err => {
+					uni.hideLoading();
 					console.log(err);
 				});
 		},
+		//分享
+		// #ifdef MP
+		onShareAppMessage: function(res) {
+			let userInfo = uni.getStorageSync('userInfo');
+			// 来自页面内分享按钮
+			let pages = getCurrentPages();
+			// 获取当前页面
+			let page = pages[pages.length - 1];
+			let path = '/pages/category/category?';
+			// 保存邀请人
+			path += 'spread=' + userInfo.uid;
+			let data = {
+				path: path,
+				imageUrl: this.GetInfo.img,
+				title: this.GetInfo.title
+			};
+			console.log(data)
+			return data;
+		},
+		// #endif
+		// 加载三级数据
+		// sanji() {
+		// 	let obj = this;
+		// 	getProducts({
+		// 		sid: obj.erjiid
+		// 	})
+		// 		.then(({ data }) => {
+		// 			obj.tlist = data;
+		// 		})
+		// 		.catch(err => {
+		// 			console.log(err);
+		// 		});
+		// },
+		//加入购物车
+		Addcar(item) {
+			let obj = this;
+			cartAdd({
+				cartNum: '1', //商品数量
+				uniqueId: '', //商品标签
+				new: 0, //商品是否新增加到购物车1为不加入0为加入
+				mer_id: '',
+				productId: item.id //商品编号
+			})
+				.then(function(e) {
+					uni.showToast({
+						title: '成功加入购物车',
+						type: 'top',
+						duration: 500,
+						icon: 'none'
+					});
+					obj.erji();
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
 		//一级分类点击
 		tabtap(item) {
-			console.log(item);
+			uni.showLoading({
+				title: '加载中'
+			});
+			let obj = this;
+			// 关闭动画效果
+			obj.scrollAnimation = false;
+			// 设置顶部高度为0
+			obj.$nextTick(function(){
+				// 等待渲染完毕在执行高度修改否则动画效果依然存在
+				obj.tabScrollTop = 0;
+			})
+			// 获取当前点击的id
+			obj.currentId = item;
+			// 二级分类分类保存id
+			obj.erjiid = item;
+			uni.setStorageSync('categoryId', item);
+			// 重置分类滚轮绑定高度
+			obj.sizeCalcState = false;
+			// 加载二级方法
+			setTimeout(function() {
+				obj.erji();
+			});
+		},
+		//二级点击
+		changeSlist(item) {
+			let obj = this;
 			// 判断有没有初始化页面高度对象数据
-			if (!this.sizeCalcState) {
-				this.calcSize();
+			console.log(obj.sizeCalcState)
+			if (!obj.sizeCalcState) {
+				obj.calcSize();
 			}
 			// 获取当前点击的id
-			this.currentId = item.id;
-			console.log(item.top);
-			this.tabScrollTop = item.top;
-			console.log(this.tabScrollTop);
+			obj.erjiid = item.id;
+			let index = obj.slist.findIndex(sitem => sitem.id === item.id);
+			setTimeout(function() {
+				obj.tabScrollTop = obj.slist[index].top;
+			}, 10);
+		},
+		// 商品详情页
+		ToDetail(item) {
+			if (item.stock < 1) {
+				this.$api.msg('该商品已售罄');
+			} else {
+				uni.navigateTo({
+					url: `/pages/product/product?id=` + item.id
+				});
+			}
+		},
+		Tomember() {
+			uni.navigateTo({
+						url: '/pages/groupBooking/index'
+					});
+			// this.$api.msg('暂未开通！');
+			//  this.userInfo = uni.getStorageSync('userInfo');
+			// if(this.userInfo == ''){
+			// 	userinfo({})
+			// 		.then(({ data }) => {
+			// 			this.userInfo = data;
+			// 		})
+			// 		.catch(e => {});
+			// }else{
+			// 	if (this.userInfo.level_info.grade > 99) {
+			// 		uni.navigateTo({
+			// 			url: '/pages/user/renew'
+			// 		});
+			// 	}
+			// 	if (this.userInfo.level_info.grade < 100) {
+			// 		uni.navigateTo({
+			// 			url: '/pages/user/card'
+			// 		});
+			// 	}
+			// }
+		},
+		Toseach() {
+			uni.navigateTo({
+				url: `/pages/product/search`
+			});
 		},
 		//右侧栏滚动
 		asideScroll(e) {
@@ -74,7 +371,7 @@ export default {
 			let box = 0; //列表包裹框高度初始化
 			let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
 			// 查询当前页面对象
-			let view = uni.createSelectorQuery().select('.content');
+			let view = uni.createSelectorQuery().select('.right-aside');
 			view.fields(
 				{
 					id: true,
@@ -89,72 +386,126 @@ export default {
 				}
 			).exec();
 			// 获取所有距离顶部大于滚轮距离页面高度的所有分类
-			let tabs = this.flist.filter(item =>( item.top-10) <= scrollTop).reverse();
+			let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
 			if (tabs.length > 0) {
 				// 判断是否已经到达滚轮底部
 				if (box + scrollTop + bottom >= e.detail.scrollHeight) {
-					this.currentId = this.flist[this.flist.length - 1].id;
+					this.erjiid = this.slist[this.slist.length - 1].id;
 				} else {
-					this.currentId = tabs[0].id;
+					this.erjiid = tabs[0].id;
 				}
 			}
 		},
 		//计算右侧栏每个tab的高度等信息
 		calcSize() {
-			let h = 0;
-			this.flist.forEach(item => {
+			let h = this.bili * 215;
+			this.slist.forEach(item => {
 				let view = uni.createSelectorQuery().select('#main-' + item.id);
 				view.fields(
 					{
 						size: true
 					},
 					data => {
-						item.top = h;
+						item.top = Math.ceil(h);
 						h += data.height;
-						item.bottom = h;
+						item.bottom = Math.ceil(h);
 					}
 				).exec();
 			});
 			this.sizeCalcState = true;
-		},
-		navToList(sid, tid) {
-			// 点击导航跳转到详细页面
-			uni.navigateTo({
-				url: '/pages/product/list?fid='+this.currentId+'&sid='+sid+'&tid='+tid
-			});
 		}
 	}
 };
 </script>
 
 <style lang="scss">
-page,
-.content {
+page {
+	background-color: #ffffff;
 	height: 100%;
-	background-color: #f8f8f8;
+	.content {
+		background-color: #ffffff;
+		height: 100%;
+	}
 }
-
-.content {
+//顶部分类
+.scroll-top {
+	width: 100%;
+	font-size: 24rpx;
+	height: 170rpx;
+	padding: 0px 25rpx;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+	.scroll-list {
+		width: 80%;
+		overflow: hidden;
+		white-space: nowrap;
+		.scoll-box {
+			margin-right: 15rpx;
+			text-align: center;
+			display: inline-block;
+			.scoll-img {
+				width: 130rpx;
+				height: 85rpx;
+				border-radius: 100%;
+				image {
+					width: 85rpx;
+					height: 100%;
+					border-radius: 100%;
+				}
+			}
+			.scoll-name {
+				padding-top: 15rpx;
+			}
+			&.active {
+				color: $base-color;
+			}
+		}
+	}
+	.search-box {
+		text-align: center;
+		margin-left: 25rpx;
+		.search {
+			width: 85rpx;
+			height: 85rpx;
+			border-radius: 100%;
+			margin-bottom: 15rpx;
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 100%;
+			}
+		}
+	}
+}
+.flex-tpl {
 	display: flex;
+	justify-content: space-between;
 }
-.left-aside {
-	flex-shrink: 0;
-	width: 200rpx;
-	height: 100%;
-	background-color: #fff;
+.scroll-view {
+	margin-top: 15rpx;
+	.left-aside {
+		width: 190rpx;
+		background-color: rgba(245, 246, 248, 1);
+		overflow: hidden;
+		height: 100%;
+		display: block;
+		overflow-y: scroll;
+	}
 }
+
 .f-item {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 100%;
 	height: 100rpx;
-	font-size: 28rpx;
+	font-size: 24rpx;
 	color: $font-color-base;
 	position: relative;
-	&.active {
-		color: $base-color;
-		background: #f8f8f8;
+	&.active_top {
+		background: #ffffff;
+		font-size: 26rpx;
+		font-weight: 500;
+		color: rgba(51, 51, 51, 1);
 		&:before {
 			content: '';
 			position: absolute;
@@ -171,10 +522,180 @@ page,
 }
 
 .right-aside {
-	flex: 1;
 	overflow: hidden;
-	padding-left: 20rpx;
-	padding-right: 20rpx;
+	padding: 0rpx 20rpx;
+	height: 100%;
+	display: block;
+	overflow-y: scroll;
+	width: 100%;
+	.image {
+		width: 100%;
+		padding-bottom: 15rpx;
+		.imageLV {
+			width: 100%;
+			height: 200rpx;
+		}
+	}
+	.tlist-box {
+		.tlistname {
+			font-size: 24rpx;
+			padding: 25rpx 25rpx;
+			border-top: 2rpx solid rgba(238, 238, 238, 1);
+			border-bottom: 2rpx solid rgba(238, 238, 238, 1);
+		}
+		.tlist-list.flex_item {
+			height: 0;
+			min-height: 280rpx;
+			align-items: stretch;
+		}
+		.tlist-list {
+			padding: 25rpx 0rpx;
+			position: relative;
+			.tlist-img {
+				width: 169rpx;
+				position: relative;
+				.img {
+					width: 169rpx;
+					height: 169rpx;
+					image {
+						width: 169rpx;
+						height: 169rpx;
+					}
+				}
+				.stock {
+					margin-top: 13rpx;
+					font-size: 26rpx;
+					background: #fff1ee;
+					width: 100%;
+					color: #fb4912;
+					padding: 6rpx 0;
+					border-radius: 5rpx;
+					justify-content: center;
+					align-items: center;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					.img {
+						width: 20rpx;
+						height: 20rpx;
+						flex-shrink: 0;
+					}
+					.stock-num {
+						padding-left: 7rpx;
+						font-size: 22rpx;
+						border-radius: 5rpx;
+						height: 32rpx;
+						line-height: 32rpx;
+					}
+				}
+			}
+			.sell-out {
+				position: absolute;
+				width: 169rpx;
+				height: 190rpx;
+				background: rgba(255, 255, 255, 0.4);
+				text-align: center;
+				text {
+					line-height: 190rpx;
+					background: rgba(0, 0, 0, 0.5);
+					color: #ffffff;
+					padding: 10rpx 25rpx;
+					border-radius: 25rpx;
+					font-size: 20rpx;
+				}
+			}
+			.tlist-info {
+				font-size: 24rpx;
+				width: 61%;
+				padding-left: 25rpx;
+				padding-right: 25rpx;
+				height: 100%;
+				position: relative;
+				line-height: 1;
+				.bottom_border {
+					position: absolute;
+					border-bottom: 1px solid #eeeeee;
+					left: 25rpx;
+					bottom: 0;
+					height: 2rpx;
+					width: 100%;
+				}
+				.name {
+					height: 28rpx;
+					color: #141821;
+					font-weight: 500;
+					font-size: 26rpx;
+				}
+				.info {
+					margin: 10rpx 0rpx;
+					height: 30rpx;
+					color: #979797;
+					font-size: 24rpx;
+				}
+				.tipBox {
+					height: 50rpx;
+				}
+				.tip {
+					padding: 10rpx 0rpx;
+					text {
+						border: 2rpx solid #ff1a27;
+						color: #ff1a27;
+						border-radius: 5rpx;
+						font-size: 18rpx;
+						padding: 5rpx 10rpx;
+						margin-right: 15rpx;
+					}
+				}
+				.tlist-price {
+					position: absolute;
+					left: 25rpx;
+					bottom: 27rpx;
+					width: 100%;
+					.price-box {
+						.price {
+							padding-bottom: 15rpx;
+							color: #ff1a27;
+							.blod {
+								font-size: 35rpx;
+								font-weight: bold;
+							}
+							.fen {
+								color: #838691;
+							}
+						}
+						.vip_price {
+							color: #2dbd59;
+							font-size: 26rpx !important;
+							text {
+								background: linear-gradient(45deg, rgba(21, 197, 52, 1), rgba(21, 197, 52, 1));
+								border-radius: 5rpx;
+								color: #ffffff;
+								padding: 0rpx 10rpx;
+								margin-left: 10rpx;
+								font-size: 20rpx !important;
+							}
+						}
+					}
+					.gocar {
+						width: 50rpx;
+						height: 50rpx;
+						align-self: flex-end;
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+			}
+		}
+	}
+	.tlist {
+		.cate {
+			padding: 25rpx 0rpx;
+			color: #666666;
+			font-size: 24rpx;
+		}
+	}
 }
 .s-item {
 	display: flex;

pages/home/index.vue

@@ -29,7 +29,7 @@
 				</view>
 				<view class="item-title">一键叫水</view>
 			</view>
-			<view class="cate-item flex" @click="navto('/pages/index/artDetail?id=1')">
+			<view class="cate-item flex" @click="navto('/pages/order/shopList?type=2')">
 				<view class="img-wrapper flex">
 					<image src="../../static/icon/index2.png" mode=""></image>
 				</view>

pages/order/createOrder.vue

@@ -33,7 +33,7 @@
 				</view>
 			</view>
 		</navigator>
-		<navigator v-if="tabCurrentIndex == 2" url="/pages/order/shopList" class="address-section">
+		<navigator v-if="tabCurrentIndex == 2" url="/pages/order/shopList?type=1" class="address-section">
 			<view class="shop-box" v-if="shopAddress.name">
 				<view class="shop-top flex">
 					<view class="flex shop-title">
@@ -265,7 +265,9 @@
 			loadData() {
 				let obj = this;
 				confirm({
-					cartId: obj.cartId + ''
+					cartId: obj.cartId + '',
+					longitude: uni.getStorageSync('CACHE_LONGITUDE'),
+					latitude:uni.getStorageSync('CACHE_LATITUDE'),
 				}).then(({
 					data
 				}) => {

pages/order/shopList.vue

@@ -50,13 +50,13 @@
 	export default {
 		data() {
 			return {
-				source: 0,
 				addressList: [], //显示的地址数据
 				value: '', //保存查询值
 				addressListAll: [], //保存地址数据
 				longitude: '', //经度
 				latitude: '', //未读
-				time:''//保存定时获取对象
+				time:'',//保存定时获取对象
+				type:1//1为创建订单进入2为首页进入
 			};
 		},
 		// #ifdef APP-PLUS || H5
@@ -78,6 +78,7 @@
 			const that = this;
 			that.longitude = uni.getStorageSync('CACHE_LONGITUDE');
 			that.latitude = uni.getStorageSync('CACHE_LATITUDE');
+			that.type = option.type;
 			if (!that.longitude) {
 				uni.showModal({
 					title: '获取定位',
@@ -136,9 +137,23 @@
 			},
 			//选择地址
 			checkAddress(item) {
-				// 设置商品页面地址
-				this.$api.prePage().shopAddress = item;
-				uni.navigateBack();
+				if (this.type==1) {
+					// 设置商品页面地址
+					this.$api.prePage().shopAddress = item;
+					uni.navigateBack();
+					return
+				} 
+				if(this.type==2){
+					uni.openLocation({
+						longitude:+item.longitude,
+						latitude:+item.latitude,
+						fail(res){
+							console.log(res,'定位获取失败');
+						}
+					})
+					return
+				}
+				
 			}
 		}
 	};

pages/public/forget.vue

@@ -195,7 +195,7 @@
 				flex-grow: 1;
 
 				.code {
-					color: #5dbc7c;
+					color: $base-color;
 					font-size: 23rpx;
 					border-left: 1px solid #eeeeee;
 					width: 150rpx;
@@ -246,10 +246,10 @@
 
 		.uni-button-green {
 			color: #ffffff;
-			background-color: #5dbc7c;
+			background-color:  $base-color;
 			margin: 40rpx 10rpx;
 			border-radius: 50rpx;
-			box-shadow: 0px 8px 10px 0px rgba(166, 203, 184, 0.75);
+			box-shadow: 0px 8px 10px 0px rgba( $base-color, 0.3);
 		}
 
 		.uni-button-green-plain {

pages/public/login.vue

@@ -5,7 +5,6 @@
 				<image class="banner-img" src="../../static/image/logo.png" mode="scaleToFill"></image>
 			</view>
 			<view class="logName">
-				
 			</view>
 		</view>
 		<view class="login_text">
@@ -234,6 +233,7 @@
 			height: 170rpx;
 			margin: 0 auto;
 			border-radius: 20rpx;
+			// border: 1px solid $border-color-light;
 		}
 	}
 
@@ -283,10 +283,10 @@
 
 		.uni-button-green {
 			color: #ffffff;
-			background-color: #5dbc7c;
+			background-color: $base-color;
 			margin: 40rpx 10rpx;
 			border-radius: 50rpx;
-			box-shadow: 0px 8px 10px 0px rgba(166, 203, 184, 0.75);
+			box-shadow: 0px 8px 10px 0px rgba( $base-color, 0.3);
 		}
 
 		.uni-button-green-plain {
@@ -311,7 +311,7 @@
 		border-radius: 20rpx;
 		margin: 0 $page-row-spacing;
 		margin-bottom: 30rpx;
-		color: $color-green;
+		color: $font-color-dark;
 		background-color: #FFFFFF;
 		overflow: hidden;
 

pages/public/phoneLogin.vue

@@ -268,7 +268,7 @@
 				flex-grow: 1;
 
 				.code {
-					color: #5dbc7c;
+					color: $base-color;
 					font-size: 23rpx;
 					border-left: 1px solid #eeeeee;
 					width: 150rpx;
@@ -287,10 +287,10 @@
 
 		.uni-button-green {
 			color: #ffffff;
-			background-color: #5dbc7c;
+			background-color: $base-color;
 			margin: 40rpx 10rpx;
 			border-radius: 50rpx;
-			box-shadow: 0px 8px 10px 0px rgba(166, 203, 184, 0.75);
+			box-shadow: 0px 8px 10px 0px rgba($base-color, 0.3);
 		}
 
 		.uni-button-green-plain {
@@ -314,7 +314,7 @@
 		border-radius: 20rpx;
 		margin: 0 $page-row-spacing;
 		margin-bottom: 30rpx;
-		color: $color-green;
+		color: $font-color-dark;
 		background-color: #FFFFFF;
 		overflow: hidden;
 

pages/public/privacyAgreement.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="content">
 		<view class="title">
-			母婴界严选隐私协议
+			隐私协议
 		</view>
 		<view class="lineSt margin-t-40">
 			为母婴界严选提供相应服务之必须，您以自愿填写的方式提供注册所需的姓名、性别、电话以及其他类似的个人信息，则表示您已经了解并接受您个人信息的用途，同意母婴界严选为实现该特定目的使用您的个人信息。除此个人信息之外，其他任何您发送或提供给母婴界严选的材料、信息或文本（以下统称信息）均将被视为非保密和非专有的。<strong>母婴界严选</strong>对这些信息不承担任何义务。同时如果您提交时没有特别声明的，可视为同意母婴界严选及其授权人可以因商业或非商业的目的复制、透露、分发、合并和以其他方式利用这些信息和所有数据、图像、声音、文本及其他内容。您可阅读下面的隐私规则以了解更加详细的内容。