From 677c12fd6fa6d5acd69bfbda193857a48c66093d Mon Sep 17 00:00:00 2001
From: yangjie <812952667@qq.com>
Date: Wed, 9 Jun 2021 15:07:51 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/zc-grid-item/zc-grid-item.vue | 145 ----------------
 components/zc-grid-wrap/zc-grid-wrap.vue | 129 --------------
 components/zc-grid/zc-grid.vue           | 205 -----------------------
 main.js                                  |   2 -
 pages/tabBar/home/home.vue               | 183 ++++++++++++--------
 5 files changed, 116 insertions(+), 548 deletions(-)
 delete mode 100644 components/zc-grid-item/zc-grid-item.vue
 delete mode 100644 components/zc-grid-wrap/zc-grid-wrap.vue
 delete mode 100644 components/zc-grid/zc-grid.vue

diff --git a/components/zc-grid-item/zc-grid-item.vue b/components/zc-grid-item/zc-grid-item.vue
deleted file mode 100644
index 1180be7..0000000
--- a/components/zc-grid-item/zc-grid-item.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-	<view v-if="width" class="uni-grid-item">
-		<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item__box-square': square, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
-		 :style="{  'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
-		 class="uni-grid-item__box" @click="_onClick">
-			<view class="uni-grid-item__box-item" :class="{'uni-grid-item__box-item-square': square}">
-				<slot />
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: 'UniGridItem',
-		inject: ['grid'],
-		data() {
-			return {
-				column: 0,
-				showBorder: true,
-				square: true,
-				highlight: true,
-				left: 0,
-				top: 0,
-				index: 0,
-				openNum: 2,
-				width: 0,
-				borderColor: '#e5e5e5'
-			}
-		},
-		created() {
-			this.column = this.grid.column
-			this.showBorder = this.grid.showBorder
-			this.square = this.grid.square
-			this.highlight = this.grid.highlight
-			this.top = this.hor === 0 ? this.grid.hor : this.hor
-			this.left = this.ver === 0 ? this.grid.ver : this.ver
-			this.borderColor = this.grid.borderColor
-			this.index = this.grid.index++
-			this.grid.children.push(this)
-		},
-		methods: {
-			_onClick() {
-				// console.log('点击', this.index);
-				this.grid.change({
-					detail: {
-						index: this.index
-					}
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-grid-item {
-		/* #ifndef APP-NVUE */
-		height: 100%;
-		/* #endif */
-		width: 168rpx;
-	}
-
-	.uni-grid-item__box {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		position: relative;
-		flex-direction: row;
-		align-items: center;
-/* 		margin-top: 9rpx;
-		margin-right: 17rpx;
-		margin-bottom: 9rpx;
-		margin-left: 17rpx; */
-		/* #ifdef APP-NVUE */
-		justify-content: center;
-
-		/* #endif */
-	}
-
-	.uni-grid-item__box-item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		width: 100%;
-		/* #endif */
-		position: relative;
-		flex: 1;
-		justify-content: center;
-		flex-direction: column;
-		align-items: center;
-		width: 152rpx;
-		height: 146rpx;
-/* 		padding-top: 10rpx;
-		padding-right: 23rpx;
-		padding-bottom: 10rpx;
-		padding-left: 23rpx; */
-		border-radius: 1rpx;
-		/* padding: 15px 0; */
-	}
-
-	.uni-grid-item__box-item-square {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-	}
-
-	.uni-grid-item--image {
-		width: 25px;
-		height: 25px;
-	}
-
-	.uni-grid-item--text {
-		font-size: 24px;
-		margin-top: 5px;
-	}
-
-	.uni-grid-item__box-square {
-		height: 0;
-		padding-top: 100%;
-	}
-
-	.uni-grid-item--border {
-		position: relative;
-		border-bottom-color: #e5e5e5;
-		border-bottom-style: solid;
-		border-bottom-width: 1px;
-		border-right-color: #e5e5e5;
-		border-right-style: solid;
-		border-right-width: 1px;
-	}
-
-	.uni-grid-item--border-top {
-		border-top-color: #e5e5e5;
-		border-top-style: solid;
-		border-top-width: 1px;
-		/* #ifndef APP-NVUE */
-		height: 100%;
-		box-sizing: border-box;
-		/* #endif */
-	}
-
-	.uni-highlight:active {
-		background-color: #f1f1f1;
-	}
-</style>
diff --git a/components/zc-grid-wrap/zc-grid-wrap.vue b/components/zc-grid-wrap/zc-grid-wrap.vue
deleted file mode 100644
index 39dd864..0000000
--- a/components/zc-grid-wrap/zc-grid-wrap.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-	<view class="uni-grid-wrap">
-		<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-style':'solid','border-left-color':borderColor, 'border-left-width':showBorder?'1px':0 }">
-			<slot />
-		</view>
-	</view>
-</template>
-
-<script>
-	// #ifdef APP-NVUE
-	const dom = weex.requireModule('dom');
-	// #endif
-	export default {
-		name: 'UniGrid',
-		props: {
-			// 每列显示个数
-			column: {
-				type: Number,
-				default: 3
-			},
-			// 是否显示边框
-			showBorder: {
-				type: Boolean,
-				default: true
-			},
-			// 边框颜色
-			borderColor: {
-				type: String,
-				default: '#e5e5e5'
-			},
-			// 全局标记水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动
-			hor: {
-				type: Number,
-				default: 0
-			},
-			// 全局标记垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动
-			ver: {
-				type: Number,
-				default: 0
-			},
-			// 是否正方形显示,默认为 true
-			square: {
-				type: Boolean,
-				default: true
-			},
-			highlight: {
-				type: Boolean,
-				default: true
-			}
-		},
-		provide() {
-			return {
-				grid: this
-			}
-		},
-		data() {
-			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
-			return {
-				index: 0,
-				elId,
-				width: 0
-			}
-		},
-		created() {
-			this.children = []
-			this.index = 0
-		},
-		mounted() {
-			setTimeout(() => {
-				this._getSize((width) => {
-					this.children.forEach((item, index) => {
-						item.width = width
-					})
-				})
-			}, 50)
-		},
-		methods: {
-			change(e) {
-				this.$emit('change', e)
-			},
-			_getSize(fn) {
-				// #ifndef APP-NVUE
-				uni.createSelectorQuery()
-					.in(this)
-					.select(`#${this.elId}`)
-					.boundingClientRect()
-					.exec(ret => {
-						this.width = parseInt(ret[0].width / this.column) - 1 + 'px'
-						fn(this.width)
-					})
-				// #endif
-				// #ifdef APP-NVUE
-				dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
-					this.width = parseInt(ret.size.width / this.column) - 1 + 'px'
-					fn(this.width)
-				})
-				// #endif
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-grid-wrap {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: column;
-		/* #ifdef H5 */
-		width: 100%;
-		/* #endif */
-	}
-
-	.uni-grid {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
-
-	.uni-grid--border {
-		border-left-color: #e5e5e5;
-		border-left-style: solid;
-		border-left-width: 1px;
-	}
-</style>
\ No newline at end of file
diff --git a/components/zc-grid/zc-grid.vue b/components/zc-grid/zc-grid.vue
deleted file mode 100644
index 74e6100..0000000
--- a/components/zc-grid/zc-grid.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<template>
-	<view class="warp">
-		<view class="example-body">
-			<uni-grid  :show-border="false" :square="false" :highlight="false" @change="change">
-				<uni-grid-item :hor="0" :ver="0" marker="badge" type="error" style="width: 25%;text-align: center;" text="12" v-for="item in list" :key="item.id">
-					<image class="image" :src="item.url" mode="aspectFill" @click="webTo" />
-					<text class="text">{{item.text}}</text>
-				</uni-grid-item>
-			</uni-grid>
-		</view>
-	</view>
-</template>
-
-<script>
-	import uniGrid from '@/components/zc-grid-wrap/zc-grid-wrap.vue'
-	import uniGridItem from '@/components/zc-grid-item/zc-grid-item.vue'
-	export default {
-		components: {
-			uniGrid,
-			uniGridItem
-		},
-		props:{
-			list:{
-				type:Array,
-				default:function () {
-					return []
-				}
-			}
-		},
-		data() {
-			return {
-				// list: [{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
-				// 		text: 'Grid 1'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
-				// 		text: 'Grid 2'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
-				// 		text: 'Grid 3'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
-				// 		text: 'Grid 4'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
-				// 		text: 'Grid 5'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
-				// 		text: 'Grid 6'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
-				// 		text: 'Grid 7'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
-				// 		text: 'Grid 8'
-				// 	},
-				// 	{
-				// 		url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
-				// 		text: 'Grid 9'
-				// 	}
-				// ]
-			}
-		},
-		methods: {
-			change(e) {
-				let {
-					index
-				} = e.detail
-				console.log(index)
-			},
-			webTo() {
-				this.$emit('goTo')
-			}
-		}
-	}
-</script>
-
-<style>
-	/* 头条小程序组件内不能引入字体 */
-	/* #ifdef MP-TOUTIAO */
-	@font-face {
-		font-family: uniicons;
-		font-weight: normal;
-		font-style: normal;
-		src: url('~@/static/uni.ttf') format('truetype');
-	}
-
-	/* #endif */
-
-	/* #ifndef APP-NVUE */
-	page {
-		display: flex;
-		flex-direction: column;
-		box-sizing: border-box;
-		background-color: #efeff4;
-		min-height: 100%;
-		height: auto;
-	}
-
-	view {
-		font-size: 28rpx;
-		line-height: inherit;
-	}
-
-	.example {
-		padding: 0 30rpx 30rpx;
-	}
-
-	.example-info {
-		padding: 30rpx;
-		color: #3b4144;
-		background: #ffffff;
-	}
-
-	.example-body {
-		text-align: center;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: center;
-		padding: 0;
-		font-size: 14rpx;
-		background-color: #ffffff;
-	}
-
-	/* #endif */
-	.example {
-		padding: 0 30rpx;
-	}
-
-	.example-info {
-		/* #ifndef APP-NVUE */
-		display: block;
-		/* #endif */
-		padding: 30rpx;
-		color: #3b4144;
-		background-color: #ffffff;
-		font-size: 30rpx;
-	}
-
-	.example-info-text {
-		font-size: 28rpx;
-		line-height: 36rpx;
-	}
-
-
-	.example-body {
-		flex-direction: column;
-		padding: 0rpx;
-		padding-bottom: 10px;
-		background-color: #ffffff;
-	}
-
-	.word-btn-white {
-		font-size: 18px;
-		color: #FFFFFF;
-	}
-
-	.word-btn {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		border-radius: 6px;
-		height: 48px;
-		margin: 15px;
-		background-color: #007AFF;
-	}
-
-	.word-btn--hover {
-		background-color: #4ca2ff;
-	}
-
-
-	.image {
-		width: 80rpx;
-		height: 80rpx;
-		margin-bottom: 20rpx;
-		border-radius: 10rpx;
-	}
-
-	.text {
-		font-size: 26rpx;
-		line-height: 26rpx;
-		width: 104rpx;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		color: #3A3C40;
-	}
-
-	.example-body {
-		/* #ifndef APP-NVUE */
-		display: block;
-		/* #endif */
-	}
-</style>
diff --git a/main.js b/main.js
index 5266c88..77ee1e2 100644
--- a/main.js
+++ b/main.js
@@ -2,12 +2,10 @@ import Vue from 'vue'
 import App from './App'
 import {VueJsonp} from 'vue-jsonp'
 import share from 'common/share.js'
-import imgGrid from './components/zc-grid/zc-grid.vue'
 Vue.config.productionTip = false
 Vue.use(VueJsonp)
 App.mpType = 'app'
 Vue.mixin(share)
- Vue.component('imgGrid',imgGrid)
 const app = new Vue({
     ...App
 })
diff --git a/pages/tabBar/home/home.vue b/pages/tabBar/home/home.vue
index e3d3322..31f19be 100644
--- a/pages/tabBar/home/home.vue
+++ b/pages/tabBar/home/home.vue
@@ -45,8 +45,14 @@
 		</view>
 		<!-- /菜单 -->
 		<view class="height60 backcorfff"></view>
-		<imgGrid :list="imgList"></imgGrid>
-
+		<view class="category-list">
+			<view class="category" v-for="(row, index) in categoryList" :key="index" @tap="toCategory(row)">
+				<view class="img">
+					<image :src="row.img"></image>
+				</view>
+				<view class="text">{{ row.name }}</view>
+			</view>
+		</view>
 		<!-- 赠券 -->
 		<view style="width: 91%;margin-left: 5%;">
 			<image class="mart30 width100" mode="widthFix" src="../../../static/img/headzq.png"></image>
@@ -98,10 +104,14 @@
 		</view> -->
 		<!-- 商品列表 -->
 		<view class="goods-list">
-			<view class="title">
-				<image src="/static/img/hua.png"></image>
-				赠券专区
-				<image src="/static/img/hua.png"></image>
+			<view :class="[cpStuats == 1?'active_tie':'title']" @click="eheckStu(1)">
+				猜你喜欢
+			</view>
+			<view :class="[cpStuats == 2?'active_tie':'title']" @click="eheckStu(2)">
+				今日特价
+			</view>
+			<view :class="[cpStuats == 3?'active_tie':'title']" @click="eheckStu(3)">
+				发现好店
 			</view>
 			<view v-if="productList == '' || productList == null" class="mart60 fotct font14 fcor666">
 				<image style="width: 100px;height: 100px;"
@@ -122,7 +132,7 @@
 			</view>
 		</view>
 
-		<view class="goods-list">
+		<!-- 	<view class="goods-list">
 			<view class="title">
 				<image src="/static/img/hua.png"></image>
 				金币专区
@@ -152,7 +162,7 @@
 					</view>
 				</view>
 			</view>
-		</view>
+		</view> -->
 
 	</view>
 </template>
@@ -198,23 +208,50 @@
 				loadingText: '正在加载...',
 				pageNum: 1,
 				pageSize: 6,
-				imgList: [{
-						url: '/static/img/wxpay.png',
-						text: '美食'
+				// 分类菜单
+				categoryList: [{
+						id: 1,
+						name: '办公',
+						img: '/static/img/wxpay.png'
 					},
 					{
-						url: '/static/img/wxpay.png',
-						text: '加油'
+						id: 2,
+						name: '家电',
+						img: '/static/img/wxpay.png'
+					},
+					{
+						id: 3,
+						name: '服饰',
+						img: '/static/img/wxpay.png'
+					},
+					{
+						id: 4,
+						name: '日用',
+						img: '/static/img/wxpay.png'
+					},
+					{
+						id: 5,
+						name: '蔬果',
+						img: '/static/img/wxpay.png'
 					},
 					{
-						url: '/static/img/wxpay.png',
-						text: '美食'
+						id: 6,
+						name: '运动',
+						img: '/static/img/wxpay.png'
 					},
 					{
-						url: '/static/img/wxpay.png',
-						text: '美食'
+						id: 7,
+						name: '书籍',
+						img: '/static/img/wxpay.png'
+					},
+					{
+						id: 8,
+						name: '文具',
+						img: '/static/img/wxpay.png'
 					}
 				],
+				//切换状态
+				cpStuats: 1
 			};
 		},
 
@@ -467,6 +504,9 @@
 			//轮播图指示器
 			swiperChange(event) {
 				this.currentSwiper = event.detail.current;
+			},
+			eheckStu(item){
+				this.cpStuats = item;
 			}
 		}
 	};
@@ -474,7 +514,7 @@
 <style lang="scss">
 	page {
 		position: relative;
-		background-color: #FFFFFF;
+		background-color: #F5F5F5;
 	}
 
 	@font-face {
@@ -662,43 +702,6 @@
 		}
 	}
 
-	.category-list {
-		width: 92%;
-		margin: 0 4%;
-		padding: 0 0 30upx 0;
-		border-bottom: solid 2upx #f6f6f6;
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-
-		.category {
-			width: 25%;
-			margin-top: 50upx;
-			display: flex;
-			flex-wrap: wrap;
-
-			.img {
-				width: 100%;
-				display: flex;
-				justify-content: center;
-
-				image {
-					width: 9vw;
-					height: 9vw;
-				}
-			}
-
-			.text {
-				margin-top: 16upx;
-				width: 100%;
-				display: flex;
-				justify-content: center;
-				font-size: 24upx;
-				color: #3c3c3c;
-			}
-		}
-	}
-
 	.banner {
 		width: 92%;
 		margin: 40upx 4%;
@@ -805,24 +808,70 @@
 		}
 	}
 
+	.category-list {
+		width: 100%;
+		padding: 0 0 30upx 0;
+		background-color: #FFFFFF;
+		border-bottom: solid 2upx #f6f6f6;
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+
+		.category {
+			width: 20%;
+			margin-top: 50upx;
+			display: flex;
+			flex-wrap: wrap;
+
+			.img {
+				width: 100%;
+				display: flex;
+				justify-content: center;
+
+				image {
+					width: 9vw;
+					height: 9vw;
+				}
+			}
+
+			.text {
+				margin-top: 16upx;
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				font-size: 24upx;
+				color: #3c3c3c;
+			}
+		}
+	}
+
 	.goods-list {
 		background-color: #FFFFFF;
+		margin-top: 40px;
 
 		.title {
-			width: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 80upx;
-			color: #f47825;
-			font-size: 40rpx;
-			margin-top: 20rpx;
+			height: 80rpx;
+			color: #333333;
+			text-align: center;
+			 margin-top: 10px;
+			font-size: 30rpx;
+			width: 100px;
+			line-height: 80rpx;
 			margin-bottom: 10px;
+			float: left;
+		}
 
-			image {
-				width: 30upx;
-				height: 30upx;
-			}
+		.active_tie {
+			font-size: 42rpx;
+			font-weight: bold;
+			height: 80rpx;
+			color: #333333;
+			 margin-top: 10px;
+			text-align: center;
+			width: 100px;
+			line-height: 80rpx;
+			margin-bottom: 10px;
+			float: left;
 		}
 
 		.loading-text {