From a8c02298a6ae2035b10743318f3ec1f9e3682c70 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Thu, 26 Dec 2024 19:34:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/base/tabbar.vue         |  34 ++++--
 components/product/productItem.vue |  21 +++-
 components/user/productList.vue    |  59 ++++++----
 pages/index/category.vue           |  13 ++-
 pages/index/index.vue              | 218 +++++++------------------------------
 pages/index/order.vue              |   3 +
 uni.scss                           |   2 +-
 7 files changed, 130 insertions(+), 220 deletions(-)

diff --git a/components/base/tabbar.vue b/components/base/tabbar.vue
index 724d6a0..89adc76 100644
--- a/components/base/tabbar.vue
+++ b/components/base/tabbar.vue
@@ -39,19 +39,33 @@
 						"title": "首页",
 						key : 'home',
 					},
+					// {
+					// 	"selectedIconPath": "/static/image/tabbar/member-a.png",
+					// 	"iconPath": "/static/image/tabbar/member.png",
+					// 	"pagePath": "/pages/index/member",
+					// 	"title": "会员",
+					// 	key : 'member',
+					// },
+					// {
+					// 	"selectedIconPath": "/static/image/tabbar/cart-a.png",
+					// 	"iconPath": "/static/image/tabbar/cart.png",
+					// 	"pagePath": "/pages/index/cart",
+					// 	"title": "购物车",
+					// 	key : 'cart',
+					// },
 					{
-						"selectedIconPath": "/static/image/tabbar/member-a.png",
-						"iconPath": "/static/image/tabbar/member.png",
-						"pagePath": "/pages/index/member",
-						"title": "会员",
-						key : 'member',
+						"selectedIconPath": "/static/image/tabbar/home-a.png",
+						"iconPath": "/static/image/tabbar/home.png",
+						"pagePath": "/pages/index/category",
+						"title": "分类",
+						key : 'category',
 					},
 					{
-						"selectedIconPath": "/static/image/tabbar/cart-a.png",
-						"iconPath": "/static/image/tabbar/cart.png",
-						"pagePath": "/pages/index/cart",
-						"title": "购物车",
-						key : 'cart',
+						"selectedIconPath": "/static/image/tabbar/home-a.png",
+						"iconPath": "/static/image/tabbar/home.png",
+						"pagePath": "/pages/index/order",
+						"title": "订单",
+						key : 'order',
 					},
 					{
 						"selectedIconPath": "/static/image/tabbar/center-a.png",
diff --git a/components/product/productItem.vue b/components/product/productItem.vue
index ccaef1a..c9755db 100644
--- a/components/product/productItem.vue
+++ b/components/product/productItem.vue
@@ -1,5 +1,6 @@
 <template>
-	<view class="item" @click="$emit('click')">
+	<view class="item" @click="$emit('click')"
+	:style="{width}">
 		<view class="item-image">
 			<image :src="item.image &&
 			item.image.split(',')[0]" mode="aspectFill">
@@ -7,7 +8,8 @@
 		</view>
 
 		<view class="info">
-			<view class="title">
+			<view class="title"
+			:style="{width : titleWidth}">
 				{{ item.title }}
 			</view>
 			<view class="desc">
@@ -41,7 +43,13 @@
 		props: {
 			item: {
 				default: {}
-			}
+			},
+			width : {
+				default : '100%',
+			},
+			titleWidth : {
+				default : '100px'
+			},
 		},
 		data() {
 			return {
@@ -60,7 +68,6 @@
 		align-items: center;
 		margin-bottom: 20rpx;
 		display: flex;
-		width: 100%;
 		box-sizing: border-box;
 		border-bottom: 1rpx solid #00000012;
 
@@ -80,10 +87,14 @@
 			padding: 20rpx;
 			color: #555;
 			flex: 1;
-
+			
 			.title {
+				width: 300rpx;
 				font-size: 28rpx;
 				font-weight: 900;
+				overflow:hidden; //超出的文本隐藏
+				text-overflow:ellipsis; //溢出用省略号显示
+				white-space:nowrap; //溢出不换行
 			}
 
 			.desc {
diff --git a/components/user/productList.vue b/components/user/productList.vue
index ad16f79..8e4358a 100644
--- a/components/user/productList.vue
+++ b/components/user/productList.vue
@@ -1,34 +1,41 @@
 <template>
 	<view class="list">
 		<view class="item"
-		v-for="(item, index) in 10"
-		@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
+		v-for="(item, index) in list"
+		@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
 		:key="index">
 			<image 
 			class="image"
-			src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
+			:src="item.image &&
+			item.image.split(',')[0]" mode=""></image>
 			<view class="info">
 				<view class="title">
-					桌布租赁
+					{{ item.title }}
 				</view>
-				<view class="price">
-					<text>￥58</text>元/起
+				<view style="display: flex;align-items: flex-end;">
+					<view class="price">
+						<text>￥{{ item.price }}</text>/件
+					</view>
+					<view class="oldPrice">
+						<text>￥{{ item.oldPrice }}</text>/件
+					</view>
 				</view>
-				<view class="favorable">
+				<!-- <view class="favorable">
 					<view class="t">
 						限时优惠
 					</view>
 					<view class="p">
 						￥48
 					</view>
-				</view>
+				</view> -->
 				<view class="num">
 					已售卖5000+件
 				</view>
 			</view>
 			<view class="btn">
-				<uv-icon name="shopping-cart"
-				color="#fff"></uv-icon>
+				购买
+				<!-- <uv-icon name="shopping-cart"
+				color="#fff"></uv-icon> -->
 			</view>
 		</view>
 	</view>
@@ -37,6 +44,11 @@
 <script>
 	export default {
 		name:"productList",
+		props : {
+			list : {
+				default : []
+			},
+		},
 		data() {
 			return {
 				
@@ -56,6 +68,7 @@
 		position: relative;
 		width: 300rpx;
 		padding: 20rpx;
+		// padding-bottom: 50rpx;
 		background-color: #fff;
 		border-radius: 20rpx;
 		margin-top: 20rpx;
@@ -68,18 +81,25 @@
 			border-radius: 20rpx;
 		}
 		.info{
-			font-size: 26rpx;
+			font-size: 24rpx;
 			.title{
-				font-size: 30rpx;
+				font-size: 28rpx;
+				overflow:hidden; //超出的文本隐藏
+				text-overflow:ellipsis; //溢出用省略号显示
+				white-space:nowrap; //溢出不换行
 			}
 			.price{
-				color: #D03F25;
+				color: $uni-color;
 				margin-top: 6rpx;
 				text{
-					font-size: 34rpx;
+					font-size: 30rpx;
 					font-weight: 900;
 				}
 			}
+			.oldPrice{
+				color: #888;
+				text-decoration: line-through;
+			}
 			.favorable{
 				display: flex;
 				background-image: url(/static/image/product/favorable.png);
@@ -100,11 +120,12 @@
 			}
 		}
 		.btn{
-			position: absolute;
-			right: 20rpx;
-			bottom: 20rpx;
-			padding: 10rpx;
-			border-radius: 50%;
+			padding: 10rpx 20rpx;
+			border-radius: 10rpx;
+			font-size: 24rpx;
+			color: #fff;
+			margin-left: auto;
+			width: fit-content;
 			background-color: $uni-color;
 		}
 	}
diff --git a/pages/index/category.vue b/pages/index/category.vue
index 7c065a1..c4677f6 100644
--- a/pages/index/category.vue
+++ b/pages/index/category.vue
@@ -23,12 +23,16 @@
 						v-for="(item, index) in list"
 						:key="index"
 						:item="item"
+						width="350rpx"
+						titleWidth="350rpx"
 						@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
 						/>
 					</view>
 				</uv-vtabs-item>
 			</uv-vtabs>
 		</view>
+		
+		<tabber select="category" />
 
 	</view>
 </template>
@@ -37,10 +41,12 @@
 	import productItem from '@/components/product/productItem.vue';
 	import mixinsList from '@/mixins/list.js'
 	import { mapState } from 'vuex'
+	import tabber from '@/components/base/tabbar.vue'
 	export default {
 		mixins : [mixinsList],
 		components: {
 			productItem,
+			tabber,
 		},
 		data() {
 			return {
@@ -71,13 +77,13 @@
 <style scoped lang="scss">
 	.page{
 		/deep/ .uv-vtabs{
-			height: calc(100vh - 220rpx) !important;
+			height: calc(100vh - 470rpx) !important;
 		}
 		/deep/ .uv-vtabs__bar{
-			height: calc(100vh - 220rpx) !important;
+			height: calc(100vh - 470rpx) !important;
 		}
 		/deep/ .uv-vtabs__content{
-			height: calc(100vh - 220rpx) !important;
+			height: calc(100vh - 470rpx) !important;
 		}
 
 		.search {
@@ -102,7 +108,6 @@
 		color: #333;
 		.list{
 			margin: 0 auto;
-			width: 100%;
 		}
 		
 	}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8f86e8d..a4f1439 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,9 +1,9 @@
 <template>
 	<view class="page">
 
-		<navbar bgColor="#88D259" />
+		<navbar />
 
-		<view class="bg-color"></view>
+		<!-- <view class="bg-color"></view> -->
 
 		<view class="page-title">
 			<!-- {{ configList.index_title }} -->
@@ -11,9 +11,9 @@
 			style="width: 240rpx;"
 			mode="widthFix"></image> -->
 			
-			<image :src="configList.index_img"
+			<!-- <image :src="configList.index_img"
 			style="width: 240rpx;"
-			mode="widthFix"></image>
+			mode="widthFix"></image> -->
 		</view>
 
 		<view class="search">
@@ -32,11 +32,11 @@
 			keyName="image"></uv-swiper>
 		</view>
 
-		<view class="notice">
+		<!-- <view class="notice">
 			<uv-notice-bar fontSize="32rpx" 
 			@click="$utils.navigateTo('/pages_order/home/notice')"
 			:text="notice"></uv-notice-bar>
-		</view>
+		</view> -->
 
 		<view class="menu">
 			<uv-grid :border="false" :col="4" >
@@ -53,108 +53,14 @@
 			<image :src="configList.qd_image" mode="widthFix" />
 		</view>
 
-		<view class="commodity"
-		@click="$utils.navigateTo('/pages/index/category')">
-			<view class="box">
-				<view class="top">
-					<view class="top-text">
-						<view>Experience the product</view>
-						<view>体验产品 ___ _</view>
-					</view>
-				</view>
-				<view class="centre">
-					<view class="boxs"
-					:key="index"
-					@click.stop="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
-					v-for="(item, index) in riceProductList">
-						<view class="box-text">
-							<view>{{ item.title }}</view>
-							<view>{{ item.sku }}</view>
-							<text class="text1">{{ item.price }}</text>
-							<text class="text2">原价{{ item.oldPrice }}</text>
-						</view>
-						<view class="box-img">
-							<image :src="item.image && 
-							item.image.split(',')[0]" mode="aspectFill"></image>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<view class="commodity"
-		@click="$utils.navigateTo('/pages/index/category')">
-			<view class="box">
-				<view class="top">
-					<view class="top-text">
-						<view>Conventional product</view>
-						<view>常规产品 ___ _</view>
-					</view>
-				</view>
-				<view class="centre">
-					<view class="boxs"
-					:key="index"
-					@click.stop="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
-					v-for="(item, index) in commonProductList">
-						<view class="box-text">
-							<view>{{ item.title }}</view>
-							<view>{{ item.sku }}</view>
-							<view class="text3">会员价 ￥<text>{{ item.vipPrice }}</text> </view>
-							<view class="text4">零售价￥{{ item.price }}</view>
-						</view>
-						<view class="box-img">
-							<image :src="item.image && 
-							item.image.split(',')[0]" mode="aspectFill"></image>
-						</view>
-					</view>
-				</view>
-			</view>
+		<view class="label">
+			<text>推荐宝贝</text>
 		</view>
 
-		<view class="commodity">
-			<view class="box">
-				<view class="top">
-					<view class="top-text">
-						<view>News trends</view>
-						<view>新闻动态 ___ _</view>
-					</view>
-					<view class="top1" 
-					@click="$utils.navigateTo('/pages_order/home/journalism')"
-					>
-						更多
-					</view>
-				</view>
-				<view class="centre">
-					<view class="boxs"
-					:key="index"
-					@click="$utils.navigateTo('/pages_order/home/newsDetail?id=' + item.id)"
-					v-for="(item, index) in newList"
-					>
-						<view class="images">
-							<image :src="item.image && 
-							item.image.split(',')[0]" mode="aspectFill"></image>
-						</view>
-						<view class="box-fone">
-							<view>{{ item.title }}</view>
-							<view>{{ item.title }}</view>
-						</view>
-					</view>
-				</view>
-			</view>
+		<view style="position: 20rpx;">
+			<productList :list="list"/>
 		</view>
-
-		<view class="qr">
-			<view class="scan">扫码关注公众号</view>
-			<view class="qr-scan">
-				<image :src="configList.down_image" mode="aspectFill"></image>
-			</view>
-			<view class="qr-bottom">
-				<view
-				@click="saveImage(configList.down_image)"
-				>保存公众号二维码图片</view>
-			</view>
-		</view>
-
+		
 		<PrivacyAgreementPoup />
 		
 		<customerServicePopup ref="customerServicePopup"/>
@@ -169,57 +75,28 @@
 	import tabber from '@/components/base/tabbar.vue'
 	import { mapState } from 'vuex'
 	import customerServicePopup from '@/components/config/customerServicePopup.vue'
+	import productList from '@/components/user/productList.vue'
+	import mixinsList from '@/mixins/list.js'
 	export default {
+		mixins : [mixinsList],
 		components: {
 			tabber,
 			PrivacyAgreementPoup,
 			customerServicePopup,
+			productList,
 		},
 		data() {
 			return {
 				notice: '',
 				bannerList: [],
 				baseList: [
-					// {
-					// 	image: '/static/image/home/0.png',
-					// 	title: '关于我们',
-					// 	path: '/pages_order/home/introduce',
-					// },
-					// {
-					// 	image: '/static/image/home/1.png',
-					// 	title: '产品介绍',
-					// },
-					// {
-					// 	image: '/static/image/home/2.png',
-					// 	title: '促销活动',
-					// },
-					// {
-					// 	image: '/static/image/home/3.png',
-					// 	title: '商城',
-					// },
-					// {
-					// 	image: '/static/image/home/4.png',
-					// 	title: '邀请好友',
-					// },
-					// {
-					// 	image: '/static/image/home/5.png',
-					// 	title: '新闻中心',
-					// 	path: '/pages_order/home/journalism',
-					// },
-					// {
-					// 	image: '/static/image/home/6.png',
-					// 	title: '企业合作',
-					// },
-					// {
-					// 	image: '/static/image/home/7.png',
-					// 	title: '联系我们',
-					// },
 				],
 				productList: [],
 				keyword: '',
 				commonProductList : [],//常规产品
 				riceProductList : [],//体验产品
 				newList : [],//新闻列表
+				mixinsListApi : 'getClassShopPageList',
 			}
 		},
 		computed: {},
@@ -231,17 +108,17 @@
 		onShow() {
 			this.getBanner()
 			this.getRiceNoticeList()
-			this.getRiceCommonProductList()
-			this.getRiceProductList()
-			this.getRiceNewsList()
+			// this.getRiceCommonProductList()
+			// this.getRiceProductList()
+			// this.getRiceNewsList()
 			this.getRiceIconList()
 		},
 		onPullDownRefresh() {
 			this.getBanner()
 			this.getRiceNoticeList()
-			this.getRiceCommonProductList()
-			this.getRiceProductList()
-			this.getRiceNewsList()
+			// this.getRiceCommonProductList()
+			// this.getRiceProductList()
+			// this.getRiceNewsList()
 		},
 		methods: {
 			// 搜素
@@ -352,7 +229,7 @@
 			top: 0;
 			left: 0;
 			height: 550rpx;
-			background: linear-gradient(to bottom, #88D259, #88D259, #fff);
+			background: linear-gradient(to bottom, #E3441A, #E3441A, #fff);
 		}
 
 		.page-title {
@@ -433,6 +310,20 @@
 				width: 100%;
 			}
 		}
+		
+		.label{
+			margin: 20rpx 0;
+			padding: 30rpx;
+			background-color: #fff;
+			display: flex;
+			justify-content: space-between;
+			text{
+				font-weight: 900;
+			}
+			.more{
+				color: $uni-color;
+			}
+		}
 
 		.commodity {
 			display: flex;
@@ -588,40 +479,5 @@
 			}
 		}
 
-		.qr {
-			margin-top: 40rpx;
-
-			.scan {
-				text-align: center;
-				font-size: 28rpx;
-				color: #A2A2A2;
-			}
-
-			.qr-scan {
-				margin: 20rpx auto;
-				width: 400rpx;
-				height: 400rpx;
-
-				image {
-					height: 100%;
-					width: 100%;
-				}
-			}
-
-			.qr-bottom {
-				display: flex;
-				font-size: 28rpx;
-				color: #A2A2A2;
-				justify-content: space-around;
-				padding-bottom: 20rpx;
-				view {
-					border: 2rpx solid #A2A2A2;
-					padding: 20rpx;
-					border-radius: 45rpx;
-				}
-			}
-
-
-		}
 	}
 </style>
\ No newline at end of file
diff --git a/pages/index/order.vue b/pages/index/order.vue
index 54f3052..bddc581 100644
--- a/pages/index/order.vue
+++ b/pages/index/order.vue
@@ -83,6 +83,7 @@
 			</view>
 		</view>
 		
+		<tabber select="order" />
 	</view>
 </template>
 
@@ -90,9 +91,11 @@
 	import { mapGetters } from 'vuex'
 	import mixinsList from '@/mixins/list.js'
 	import mixinsOrder from '@/mixins/order.js'
+	import tabber from '@/components/base/tabbar.vue'
 	export default {
 		mixins : [mixinsList, mixinsOrder],
 		components : {
+			tabber,
 		},
 		computed : {
 		},
diff --git a/uni.scss b/uni.scss
index 1b92e86..70bee97 100644
--- a/uni.scss
+++ b/uni.scss
@@ -12,7 +12,7 @@
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
 /* 颜色变量 */
-$uni-color: #A3D250;
+$uni-color: #E3441A;
 
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;