add

assets/css/commonTheme.css

@@ -2,10 +2,11 @@
 	height: 100%;
 	box-sizing: border-box;
 }
-	
+
 .hidden {
 	overflow: hidden;
 }
+
 .w100 {
 	width: 100%;
 }
@@ -13,6 +14,7 @@
 .h100 {
 	height: 100%;
 }
+
 .row {
 	display: flex;
 	flex-direction: row;
@@ -42,6 +44,7 @@
 	display: flex;
 	justify-content: space-around;
 }
+
 .justify-evenly {
 	display: flex;
 	justify-content: space-evenly;
@@ -87,6 +90,7 @@
 .flex-1 {
 	flex: 1;
 }
+
 .ellipsis {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -96,13 +100,20 @@
 	width: 100%;
 	-webkit-line-clamp: 1;
 }
+
 .text-ellipsis {
-  display: -webkit-box;          /* 关键属性 */
-  -webkit-box-orient: vertical;  /* 排列方向 */
-  -webkit-line-clamp: 2;         /* 显示行数 */
-  overflow: hidden;              /* 超出隐藏 */
-  text-overflow: ellipsis;       /* 超出显示省略号 */
-  word-break: break-all;         /* 允许单词断行 */
+	display: -webkit-box;
+	/* 关键属性 */
+	-webkit-box-orient: vertical;
+	/* 排列方向 */
+	-webkit-line-clamp: 2;
+	/* 显示行数 */
+	overflow: hidden;
+	/* 超出隐藏 */
+	text-overflow: ellipsis;
+	/* 超出显示省略号 */
+	word-break: break-all;
+	/* 允许单词断行 */
 }
 
 .lines-2 {
@@ -133,45 +144,66 @@
 	overflow-y: scroll;
 }
 
-.color-price{
+.color-price {
 	color: #FF5030;
 }
-.color-orange{
+.color-white {
+	color: #fff;
+}
+
+.color-orange {
 	color: #FC581C;
 }
-.color-red{
+
+.color-red {
 	color: #F22513;
 }
-.color-yellow{
+
+.color-yellow {
 	color: #FE9000;
 }
-.color-pink{
+
+.color-pink {
 	color: #FF4545;
 }
-.color-text{
+
+.color-text {
 	color: #222426;
 }
-.color-text1{
+
+.color-text1 {
 	color: #626468;
 }
-.color-text2{
+
+.color-text2 {
 	color: #898E91;
 }
-.color-text3{
+
+.color-text3 {
 	color: #B2B2B2;
 }
-.bg-color{
+
+.bg-color {
 	background-color: #008FD3;
 }
-.bg-price{
+
+.bg-price {
 	background-color: #FF5030;
 }
-.bg-yellow{
+
+.bg-yellow {
 	background-color: #F5A623;
 }
-.bg-gree{
+
+.bg-gree {
 	background-color: #2CAE5C;
 }
-.bg-purple{
-	background-color:#7A73E0;
+
+.bg-purple {
+	background-color: #7A73E0;
 }
+
+
+.bg-white {
+	background-color: #fff;
+}

assets/css/theme.scss

@@ -1,34 +0,0 @@
-// 这一套作为默认
-/*自定义主题色 */
-$--base-color:#018c39;
-$--base-color-text:#626468;
-$--base-color2:#e7f1fe;
-$--base-color3:#425034;
-$--base-color-a:#FF5C03;
-$--base-color-price:#FF1212;
-$--base-color-gray:#DEDFE4;
-$--base-color-dark:#313131;
-$--base-color-red:#ef4c50;
-$--base-color-dark2:#3E3E3E;
-$--base-color-success:#a3db42;
-$--base-color-false:#f93e3e;
-$--base-color-0:#000;
-$--base-color-1:#111;
-$--base-color-3:#333;
-$--base-color-6:#666;
-$--base-color-9:#999;
-$--base-color-f8:#f8f8f8;
-$--base-color-f5:#f5f5f5;
-$--base-bg: #1773ff;
-$--base-bg2:#e7f1fe;
-$--base-bor-red:#f7a1a1;
-$--base-bor-blue:#c9e1fb;
-$--base-cont-bg:#F3F5F9;
-$--base-false-bg:#fae7e7;
-$--base-sure-bg:#e7f2fe;
-$--base-bg-f:#fff;
-$--base-bg-red:#ee0a25;
-$--base-bg-blue:#1677ff;
-$--base-bg-orange:#FF7F00;
-
-

manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx458108907312bc35",
+        "appid" : "wx9ea36eecd281bcd3",
         "lazyCodeLoading" : "requiredComponents",
         "setting" : {
             "urlCheck" : false,

package-lock.json

@@ -11,7 +11,7 @@
         },
         "dayjs": {
             "version": "1.11.13",
-            "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
             "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
         },
         "uview-ui": {

pages/common/launch.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="content">
+		[[]]
 		<view class="loadding" v-if="loadding==true">
 			<image src="/static/images/logo.png"></image>
 			<text class="text">壹柒玖康养集团</text>

pages/healthy/index.vue

@@ -8,36 +8,43 @@
 			<view class="search-cont">
 				<view class="inner">
 					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
-					<input type="text" v-model="searchValue" placeholder="输入关键字搜索" confirm-type="search" @confirm="doSearch" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+					<input type="text" v-model="searchValue" placeholder="输入关键字搜索" confirm-type="search"
+						@confirm="doSearch"
+						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
 				</view>
 			</view>
 			<view class="keyword-list">
-			<!-- 关键字列表 -->
-			<scroll-view   scroll-x="true" >
+				<!-- 关键字列表 -->
+				<!-- <scroll-view   scroll-x="true" >
 				<view class="inner">
 					<view v-for="(item,index) in cates" :key="index" :class="choseCateId == item.cateId?'item active':'item'" @click="choseCate(item)">
 						{{ item.cateName }}
 					</view>
 				</view>
-			</scroll-view>
+			</scroll-view> -->
+				<u-tabs :list="cates" :activeStyle="{fontWeight: '600',color: '#222426',fontSize: '34rpx'}"
+					:inactiveStyle="{color: '#222426',fontSize: '32rpx'}" @click="choseCate(item)"
+					scrollable="false"></u-tabs>
 			</view>
 		</view>
+
 		<!-- 知识列表 -->
-		<mescroll-body  :top="top"  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+		<mescroll-body :top="top" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+			:down="downOption" :up="upOption">
 			<view class="know-list">
 				<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
 					<view class="left">
 						<view class="title ellipsis2">{{ item.title }}</view>
 						<view class="info-box">
 							<view class="readers">
-								<view class="head-box" v-if="item.viewsList!=null&&item.viewsList.length>0">
+								<!-- <view class="head-box" v-if="item.viewsList!=null&&item.viewsList.length>0">
 									<view class="head" v-for="(subitem,j) in item.viewsList" :key="j" v-if="subitem!=null">
 										<image  :src="subitem.avatar==null?'../../static/images/detault_head.jpg':subitem.avatar" mode=""></image>
 									</view>
-								</view>
+								</view> -->
 								<view class="readings">
-									<image class="eye" src="../../static/images/eye.png" ></image>
-									<text class="num">{{item.views}}</text>
+									<!-- <image class="eye" src="../../static/images/eye.png" ></image> -->
+									<text class="num mr24">阅读 {{item.views}}</text>
 								</view>
 							</view>
 							<view class="time">{{item.publishTime}}</view>
@@ -49,30 +56,33 @@
 				</view>
 			</view>
 		</mescroll-body>
-		
+
 	</view>
 </template>
 
 <script>
-	import {getArticleCate,getArticleList} from '@/api/article'
+	import {
+		getArticleCate,
+		getArticleList
+	} from '@/api/article'
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
-		mixins: [MescrollMixin], 
+		mixins: [MescrollMixin],
 		data() {
 			return {
-				top:'0px',
-				cates:[],
-				choseCateId:0,
+				top: '0px',
+				cates: [],
+				choseCateId: 0,
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 				searchValue: '',
-				mescroll:null,
+				mescroll: null,
 				// 上拉加载的配置
-				downOption:{
-					
+				downOption: {
+
 				},
 				upOption: {
-					onScroll:true,
+					onScroll: true,
 					use: true, // 是否启用上拉加载; 默认true
 					page: {
 						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
@@ -80,10 +90,10 @@
 					},
 					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
 					empty: {
-						icon:'/static/images/no_data.png',
+						icon: '/static/images/no_data.png',
 						tip: '暂无数据'
 					},
-					textNoMore:'已经到底了'
+					textNoMore: '已经到底了'
 				},
 				// 列表数据
 				dataList: [],
@@ -91,38 +101,39 @@
 		},
 		onShow() {
 			this.getArticleCate();
-			var that=this;
-			setTimeout(function(){
+			var that = this;
+			setTimeout(function() {
 				let query = uni.createSelectorQuery().select(".top-content");
-		　　　   query.boundingClientRect(function(data) { //data - 各种参数
-		　　　  　 	console.log(data.height)  // 获取元素宽度
-					that.top=data.height+"px";
-		　　    }).exec()
-			},500);
-			
-	// 		let info1 = uni.createSelectorQuery().select(".keyword-list");
-	// 　　　  info1.boundingClientRect(function(data) { //data - 各种参数
-	// 　　　  　 	console.log(data.height)  // 获取元素宽度
-				 
-	// 　　    }).exec()
-			
+				query.boundingClientRect(function(data) { //data - 各种参数
+					console.log(data.height) // 获取元素宽度
+					that.top = data.height + "px";
+				}).exec()
+			}, 500);
+
+			// 		let info1 = uni.createSelectorQuery().select(".keyword-list");
+			// 　　　  info1.boundingClientRect(function(data) { //data - 各种参数
+			// 　　　  　 	console.log(data.height)  // 获取元素宽度
+
+			// 　　    }).exec()
+
 		},
-		methods:{
-			doSearch(){
+		methods: {
+			doSearch() {
 				this.mescroll.resetUpScroll()
 			},
-			getArticleCate(){
-				var that=this;
+			getArticleCate() {
+				var that = this;
 				let data = {};
 				getArticleCate(data).then(
 					res => {
-						if(res.code==200){
-							this.cates=res.data;
-						 
-							
-						}else{
+						if (res.code == 200) {
+							this.cates = res.data.map(person => ({
+								name: person.cateName
+							}));
+
+						} else {
 							uni.showToast({
-								icon:'none',
+								icon: 'none',
 								title: "请求失败",
 							});
 						}
@@ -141,26 +152,26 @@
 				//联网加载数据
 				var that = this;
 				var data = {
-					keyword:this.searchValue,
-					cateId:this.choseCateId,
+					keyword: this.searchValue,
+					cateId: this.choseCateId,
 					page: page.num,
 					pageSize: page.size
 				};
 				getArticleList(data).then(res => {
-					if(res.code==200){
+					if (res.code == 200) {
 						//设置列表数据
 						if (page.num == 1) {
-							that.dataList = res.data.list; 
-							
+							that.dataList = res.data.list;
+
 						} else {
 							that.dataList = that.dataList.concat(res.data.list);
-							 
+
 						}
 						that.mescroll.endBySize(res.data.list.length, res.data.total);
-						
-					}else{
+
+					} else {
 						uni.showToast({
-							icon:'none',
+							icon: 'none',
 							title: "请求失败",
 						});
 						that.dataList = null;
@@ -184,18 +195,24 @@
 </script>
 
 <style lang="scss">
+	page {
+		background: #EFF3F7;
+	}
+
 	.status_bar {
 		width: 100%;
-		background-color: #FFFFFF;
+
 	}
-	.top-content{
+
+	.top-content {
 		width: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;
 		z-index: 10;
 	}
-	.top-title{
+
+	.top-title {
 		height: 88upx;
 		line-height: 88upx;
 		font-size: 42upx;
@@ -203,12 +220,12 @@
 		font-weight: bold;
 		color: #222222;
 		padding-left: 41upx;
-		background-color: #FFFFFF;
 	}
-	.search-cont{
+
+	.search-cont {
 		padding: 16upx 30upx;
-		background-color: #FFFFFF;
-		.inner{
+
+		.inner {
 			box-sizing: border-box;
 			width: 100%;
 			height: 72upx;
@@ -217,27 +234,31 @@
 			display: flex;
 			align-items: center;
 			padding: 0 30upx;
-			.icon-search{
+
+			.icon-search {
 				width: 28upx;
 				height: 28upx;
 				margin-right: 20upx;
 			}
-			input{
+
+			input {
 				height: 60upx;
 				line-height: 60upx;
 				flex: 1;
 			}
 		}
 	}
-	.keyword-list{
+
+	.keyword-list {
 		box-sizing: border-box;
-		background: #fff;
 		padding: 10upx 27upx;
 		height: 100upx;
-		.inner{
+
+		.inner {
 			display: flex;
 		}
-		.item{
+
+		.item {
 			flex-shrink: 0;
 			padding: 0 24upx;
 			height: 64upx;
@@ -250,74 +271,89 @@
 			border: 1px solid #0bb3f2;
 			border-radius: 32upx;
 			margin: 0 20upx 20upx 0;
-			&.active{
+
+			&.active {
 				color: #FFFFFF;
 				background: #0bb3f2;
 				border: 1px solid #0bb3f2;
 			}
 		}
 	}
-	.know-list{
+
+	.know-list {
 		margin-top: 20upx;
-		padding: 0 10upx;
-		.item{
+		padding: 0 24upx;
+		
+
+		.item {
 			box-sizing: border-box;
-			height: 271upx;
+			height: 208rpx;
 			background: #FFFFFF;
 			border-radius: 16upx;
-			padding: 40upx 30upx;
+			padding: 32upx;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			margin-bottom: 20upx;
-			.left{
+
+			.left {
 				flex: 1;
 				padding-right: 40upx;
-				height: 190upx;
+
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
-				.title{
-					font-size: 32upx;
-					font-family: PingFang SC;
+
+				.title {
+					font-family: PingFang SC, PingFang SC;
 					font-weight: 500;
-					color: #111111;
-					line-height: 48upx;
+					font-size: 32rpx;
+					color: #222426;
+					line-height: 44rpx;
 				}
-				.info-box{
+
+				.info-box {
 					width: 100%;
 					display: flex;
 					align-items: center;
-					justify-content: space-between;
-					.readers{
+					margin-top: 12rpx;
+
+					// justify-content: space-between;
+					.readers {
 						display: flex;
 						align-items: center;
-						.head-box{
+
+						.head-box {
 							margin-right: 27upx;
 							display: flex;
 							align-items: center;
-							.head{
+
+							.head {
 								width: 48upx;
 								height: 48upx;
 								border-radius: 50%;
 								overflow: hidden;
 								box-shadow: 0 0 0 1px #fff;
 								margin-right: -10upx;
-								image{
+
+								image {
 									width: 100%;
 									height: 100%;
 								}
 							}
 						}
-						.readings{
+
+						.readings {
 							display: flex;
 							align-items: center;
-							.eye{
+
+							.eye {
 								width: 26upx;
 								height: 20upx;
 								margin-right: 9upx;
 							}
-							.num{
+
+							.num {
 								font-size: 24upx;
 								font-family: PingFang SC;
 								font-weight: 500;
@@ -326,7 +362,8 @@
 							}
 						}
 					}
-					.time{
+
+					.time {
 						font-size: 24upx;
 						line-height: 1;
 						font-family: PingFang SC;
@@ -335,16 +372,18 @@
 					}
 				}
 			}
-			.right{
+
+			.right {
 				width: 250upx;
-				height: 190upx;
+				height: 144rpx;
 				border-radius: 8upx;
 				overflow: hidden;
-				image{
+
+				image {
 					width: 100%;
 					height: 100%;
 				}
 			}
 		}
 	}
-</style>
+</style>

pages/home/components/HotProduct.vue

@@ -1,279 +1,291 @@
 <template>
-    <view class="group-goods" v-if="detail.length>0">
-        <view class="title-box x-bc"  >
-            <text class="title">热门榜单</text>
-            <view class="group-people x-f" @tap="navTo('/pages/home/productList')">
-                <text class="tip">更多</text>
-                <text class="cuIcon-right"></text>
-            </view>
-        </view>
-        <view class="goods-box swiper-box x-f">
-            <swiper class="carousel" circular @change="swiperChange" :autoplay="true" interval="10000" duration="2000">
-                <swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
-                    <view class="goods-list-box x-f" style="align-items: flex-start;">
-                        <block v-for="mgoods in goods" :key="mgoods.productId" >
-                            <view class="min-goods"  @tap="showProduct(mgoods)"  >
-                                <view class="img-box">
-                                    <view class="tag">hot</view>
-                                    <image class="img" :src="mgoods.image" mode="widthFix"></image>
-                                </view>
-                                <view class="price-box">
-                                    <view class="y-f">
-                                        <text class="seckill-current">￥{{  mgoods.price  }}</text>
-                                        <text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
-                                    </view>
-                                </view>
-                                <view class="title">
-                                    <slot name="titleText"></slot>
-                                </view>
-                            </view>
-                        </block>
-                    </view>
-                </swiper-item>
-            </swiper>
-            <view class="swiper-dots" v-if="goodsList.length > 1">
-                <text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
-                    :key="index"></text>
-            </view>
-        </view>
-    </view>
+	<view class="group-goods" v-if="detail.length>0">
+		<view class="title-box x-bc">
+			<view class="row">
+				<image class="w40 h40 mr4" src="/static/images/hot.png"></image><text class="title"><text
+						class="color-red">热门</text>榜单</text>
+			</view>
+			<view class="group-people x-f row" @tap="navTo('/pages/home/productList')">
+				<text class="tip ">更多</text>
+				<image class='w48 h48' src="/static/images/right.png"></image>
+				<!-- <text class="cuIcon-right"></text> -->
+			</view>
+		</view>
+		<view class="goods-box swiper-box x-f">
+			<swiper class="carousel" circular @change="swiperChange" :autoplay="true" interval="10000" duration="2000">
+				<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
+					<view class="goods-list-box x-f" style="align-items: flex-start;">
+						<block v-for="mgoods in goods" :key="mgoods.productId">
+							<view class="min-goods" @tap="showProduct(mgoods)">
+								<view class="img-box">
+									<!-- <view class="tag">hot</view> -->
+									<image class="img" :src="mgoods.image" mode="widthFix"></image>
+								</view>
+								<view class="price-box">
+									<view class="y-f">
+										<text class="seckill-current">{{ mgoods.price  }}</text>
+										<!-- <text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> -->
+									</view>
+								</view>
+								<view class="title">
+									<slot name="titleText"></slot>
+								</view>
+							</view>
+						</block>
+					</view>
+				</swiper-item>
+			</swiper>
+			<view class="swiper-dots" v-if="goodsList.length > 1">
+				<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
+					:key="index"></text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-    export default {
-        name: "HotProduct",
-         
-        data() {
-            return {
-                goodsList: [],
-                swiperCurrent: 0
-            };
-        },
-        props: {
-            detail: Array
-        },
-        computed: {},
-        created() {},
-        watch: {
-            detail(next) {
-                this.goodsList = this.sortData(next, 4);
-            }
-        },
-        methods: {
-            swiperChange(e) {
-                this.swiperCurrent = e.detail.current;
-            },
-            // 数据分层
-            sortData(oArr, length) {
-                let arr = [];
-                let minArr = [];
-                oArr.forEach(c => {
-                    if (minArr.length === length) {
-                        minArr = [];
-                    }
-                    if (minArr.length === 0) {
-                        arr.push(minArr);
-                    }
-                    minArr.push(c);
-                });
-
-                return arr;
-            },
-			navTo(url){
+	export default {
+		name: "HotProduct",
+
+		data() {
+			return {
+				goodsList: [],
+				swiperCurrent: 0
+			};
+		},
+		props: {
+			detail: Array
+		},
+		computed: {},
+		created() {},
+		watch: {
+			detail(next) {
+				this.goodsList = this.sortData(next, 4);
+			}
+		},
+		methods: {
+			swiperChange(e) {
+				this.swiperCurrent = e.detail.current;
+			},
+			// 数据分层
+			sortData(oArr, length) {
+				let arr = [];
+				let minArr = [];
+				oArr.forEach(c => {
+					if (minArr.length === length) {
+						minArr = [];
+					}
+					if (minArr.length === 0) {
+						arr.push(minArr);
+					}
+					minArr.push(c);
+				});
+
+				return arr;
+			},
+			navTo(url) {
 				uni.navigateTo({
 					url: url
 				})
 			},
-			showProduct(item){
+			showProduct(item) {
 				uni.navigateTo({
-					url: '/pages/shopping/productDetails?productId='+item.productId
+					url: '/pages/shopping/productDetails?productId=' + item.productId
 				})
 			},
-            
-        }
-    }
+
+		}
+	}
 </script>
 
 
 <style lang="scss" scoped>
-    .group-goods {
-        position: relative;
-        z-index: 1;
+	.group-goods {
+		position: relative;
+		z-index: 1;
 		background: #FFFFFF;
 		border-radius: 16upx;
 		margin-bottom: 20upx;
 		margin-top: 20upx;
-		padding: 20upx;
-    }
-
-    .swiper-box,
-    .carousel {
-        width: 700rpx;
-        height: 240upx;
-        position: relative;
-        border-radius: 20rpx;
-
-        .carousel-item {
-            width: 100%;
-            height: 100%;
-            // padding: 0 28upx;
-            overflow: hidden;
-        }
-
-        .swiper-image {
-            width: 100%;
-            height: 100%;
-            // border-radius: 10upx;
-            background: #ccc;
-        }
-    }
-
-    .swiper-dots {
-        display: flex;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 0rpx;
-        z-index: 66;
-
-        .dot {
-            width: 45rpx;
-            height: 3rpx;
-            background: #eee;
-            border-radius: 50%;
-            margin-right: 10rpx;
-        }
-
-        .dot-active {
-            width: 45rpx;
-            height: 3rpx;
-            background: #a8700d;
-            border-radius: 50%;
-            margin-right: 10rpx;
-        }
-    }
-
-    // 今日必拼+限时抢购
-    .group-goods {
-        background: #fff;
-        border-radius: 20rpx;
-        overflow: hidden;
-
-        .title-box {
-            padding-bottom: 20rpx;
-
-            .title {
-                font-size: 32rpx;
-                font-weight: bold;
-            }
-
-            .group-people {
-                .time-box {
-                    font-size: 26rpx;
-                    color: #edbf62;
-
-                    .count-text-box {
-                        width: 30rpx;
-                        height: 34rpx;
-                        background: #edbf62;
-                        text-align: center;
-                        line-height: 34rpx;
-                        font-size: 24rpx;
-                        border-radius: 6rpx;
-                        color: rgba(#fff, 0.9);
-                        margin: 0 8rpx;
-                    }
-                }
-
-                .head-box {
-                    .head-img {
-                        width: 40rpx;
-                        height: 40rpx;
-                        border-radius: 50%;
-                        background: #ccc;
-                    }
-                }
-
-                .tip {
-                    font-size: 24rpx;
-                    padding-left: 30rpx;
-                    color: #999999;
-                }
-
-                .cuIcon-right {
-                    font-size: 30rpx;
-                    line-height: 28rpx;
-                    color: #666;
-                }
-            }
-        }
-
-        .goods-box {
-            .goods-item {
-                margin-right: 22rpx;
-
-                &:nth-child(4n) {
-                    margin-right: 0;
-                }
-            }
-        }
-        .min-goods{
-            margin-right: 22rpx;
-
-        }
-    }
+		// padding: 20upx;
+	}
+
+	.swiper-box,
+	.carousel {
+		width: 700rpx;
+		height: 240upx;
+		position: relative;
+		border-radius: 20rpx;
+
+		.carousel-item {
+			width: 100%;
+			height: 100%;
+			// padding: 0 28upx;
+			overflow: hidden;
+		}
+
+		.swiper-image {
+			width: 100%;
+			height: 100%;
+			// border-radius: 10upx;
+			background: #ccc;
+		}
+	}
+
+	.swiper-dots {
+		display: flex;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 0rpx;
+		z-index: 66;
+
+		.dot {
+			width: 45rpx;
+			height: 3rpx;
+			background: #eee;
+			border-radius: 50%;
+			margin-right: 10rpx;
+		}
+
+		.dot-active {
+			width: 45rpx;
+			height: 3rpx;
+			background: #a8700d;
+			border-radius: 50%;
+			margin-right: 10rpx;
+		}
+	}
+
+	// 今日必拼+限时抢购
+	.group-goods {
+		background: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+
+		.title-box {
+			padding-bottom: 20rpx;
+			padding: 34rpx 32rpx;
+			background: linear-gradient(180deg, #FFDCDC 0%, #FFFFFF 100%);
+
+
+			.title {
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+
+			.group-people {
+				.time-box {
+					font-size: 26rpx;
+					color: #edbf62;
+
+					.count-text-box {
+						width: 30rpx;
+						height: 34rpx;
+						background: #edbf62;
+						text-align: center;
+						line-height: 34rpx;
+						font-size: 24rpx;
+						border-radius: 6rpx;
+						color: rgba(#fff, 0.9);
+						margin: 0 8rpx;
+					}
+				}
+
+				.head-box {
+					.head-img {
+						width: 40rpx;
+						height: 40rpx;
+						border-radius: 50%;
+						background: #ccc;
+					}
+				}
+
+				.tip {
+					font-size: 24rpx;
+					padding-left: 30rpx;
+					color: #999999;
+				}
+
+				.cuIcon-right {
+					font-size: 30rpx;
+					line-height: 28rpx;
+					color: #666;
+				}
+			}
+		}
+
+		.goods-box {
+			padding: 0 32rpx;
+
+			.goods-item {
+				margin-right: 22rpx;
+
+				&:nth-child(4n) {
+					margin-right: 0;
+				}
+			}
+		}
+
+		.min-goods {
+			margin-right: 22rpx;
+
+		}
+	}
+
 	.min-goods {
-	  width: 152rpx;
-	  background: #fff;
-	  .img-box {
-	    width: 152rpx;
-	    height: 152rpx;
-	    overflow: hidden;
-	    position: relative;
-	
-	    .tag {
-	      position: absolute;
-	      left: 0;
-	      bottom: 0rpx;
-	      z-index: 2;
-	      line-height: 35rpx;
-	      background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
-	      border-radius: 0px 18rpx 18rpx 0px;
-	      padding: 0 10rpx;
-	      font-size: 24rpx;
-	      font-family: PingFang SC;
-	      font-weight: bold;
-	      color: rgba(120, 79, 6, 1);
-	    }
-	
-	    .img {
-	      width: 100%;
-	      background-color: #ccc;
-	    }
-	  }
-	
-	  .price-box {
-	    width: 100%;
-	    margin-top: 10rpx;
-	
-	    .seckill-current {
-	      font-size: 30rpx;
-	      font-weight: 500;
-	      color: rgba(225, 33, 43, 1);
-	    }
-	
-	    .original {
-	      font-size: 20rpx;
-	      font-weight: 400;
-	      // text-decoration: line-through;
-	      color: rgba(153, 153, 153, 1);
-	      margin-left: 14rpx;
-	    }
-	  }
-	
-	  .title {
-	    font-size: 26rpx;
-	  }
+		width: 152rpx;
+		background: #fff;
+
+		.img-box {
+			width: 152rpx;
+			height: 152rpx;
+			overflow: hidden;
+			position: relative;
+
+			.tag {
+				position: absolute;
+				left: 0;
+				bottom: 0rpx;
+				z-index: 2;
+				line-height: 35rpx;
+				background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
+				border-radius: 0px 18rpx 18rpx 0px;
+				padding: 0 10rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: rgba(120, 79, 6, 1);
+			}
+
+			.img {
+				width: 100%;
+				background-color: #ccc;
+			}
+		}
+
+		.price-box {
+			width: 100%;
+			margin-top: 24rpx;
+
+			.seckill-current {
+				font-weight: 600;
+				font-size: 26rpx;
+				color: #FF5030;
+			}
+
+			.original {
+				font-size: 20rpx;
+				font-weight: 400;
+				// text-decoration: line-through;
+				color: rgba(153, 153, 153, 1);
+				margin-left: 14rpx;
+			}
+		}
+
+		.title {
+			font-size: 26rpx;
+		}
 	}
-	
-</style>
+</style>

pages/home/components/NewProduct.vue

@@ -1,270 +1,306 @@
 <template>
-    <view class="group-goods" v-if="detail.length>0">
-        <view class="title-box x-bc"  >
-            <text class="title">新品首发</text>
-            <view class="group-people x-f" @tap="navTo('/pages/home/productList')">
-                <text class="tip">更多</text>
-                <text class="cuIcon-right"></text>
-            </view>
-        </view>
-        <view class="goods-box swiper-box x-f">
-            <swiper class="carousel" circular @change="swiperChange" :autoplay="true" interval="10000" duration="2000">
-                <swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
-                    <view class="goods-list-box x-f" style="align-items: flex-start;">
-                        <block v-for="mgoods in goods" :key="mgoods.productId"  >
-                            <view class="min-goods" @tap="showProduct(mgoods)"  >
-                                <view class="img-box">
-                                    <view class="tag">new</view>
-                                    <image class="img" :src="mgoods.image" mode="widthFix"></image>
-                                </view>
-                                <view class="price-box">
-                                    <view class="y-f">
-                                        <text class="seckill-current">￥{{  mgoods.price  }}</text>
-                                        <text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
-                                    </view>
-                                </view>
-                                <view class="title">
-                                    <slot name="titleText"></slot>
-                                </view>
-                            </view>
-                        </block>
-                    </view>
-                </swiper-item>
-            </swiper>
-            <view class="swiper-dots" v-if="goodsList.length > 1">
-                <text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
-                    :key="index"></text>
-            </view>
-        </view>
-    </view>
+	<view class="group-goods" v-if="detail.length>0">
+		<view class="title-box x-bc">
+			<text class="title"><text class="color-orange">新品</text>首发</text>
+			<view class="group-people x-f  row" @tap="navTo('/pages/home/productList')">
+				<text class="tip">更多</text>
+				<image class='w48 h48' src="/static/images/right.png"></image>
+				<!-- <text class="cuIcon-right"></text> -->
+			</view>
+		</view>
+		<view class="goods-box swiper-box x-f">
+			<swiper class="carousel" circular @change="swiperChange" :autoplay="true" interval="10000" duration="2000">
+				<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
+					<view class="goods-list-box x-f" style="align-items: flex-start;">
+						<block v-for="mgoods in goods" :key="mgoods.productId">
+							<view class="min-goods" @tap="showProduct(mgoods)">
+								<view class="img-box">
+									<!-- <view class="tag">new</view> -->
+									<view class="tag">新品首发</view>
+									<image class="img" :src="mgoods.image" mode="widthFix"></image>
+								</view>
+								<view class="price-box">
+									<view class="y-f">
+										<text class="seckill-current">{{ mgoods.price  }}</text>
+										<!-- <text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text> -->
+									</view>
+								</view>
+								<view class="title">
+									<slot name="titleText"></slot>
+								</view>
+							</view>
+						</block>
+					</view>
+				</swiper-item>
+			</swiper>
+			<view class="swiper-dots" v-if="goodsList.length > 1">
+				<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
+					:key="index"></text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-    export default {
-        name: "NewProduct",
-         
-        data() {
-            return {
-                goodsList: [],
-                swiperCurrent: 0
-            };
-        },
-        props: {
-            detail: Array
-        },
-        computed: {},
-        created() {},
-        watch: {
-            detail(next) {
-                this.goodsList = this.sortData(next, 4);
-            }
-        },
-        methods: {
-            swiperChange(e) {
-                this.swiperCurrent = e.detail.current;
-            },
-            // 数据分层
-            sortData(oArr, length) {
-                let arr = [];
-                let minArr = [];
-                oArr.forEach(c => {
-                    if (minArr.length === length) {
-                        minArr = [];
-                    }
-                    if (minArr.length === 0) {
-                        arr.push(minArr);
-                    }
-                    minArr.push(c);
-                });
-
-                return arr;
-            },
-			navTo(url){
+	export default {
+		name: "NewProduct",
+
+		data() {
+			return {
+				goodsList: [],
+				swiperCurrent: 0
+			};
+		},
+		props: {
+			detail: Array
+		},
+		computed: {},
+		created() {},
+		watch: {
+			detail(next) {
+				this.goodsList = this.sortData(next, 4);
+			}
+		},
+		methods: {
+			swiperChange(e) {
+				this.swiperCurrent = e.detail.current;
+			},
+			// 数据分层
+			sortData(oArr, length) {
+				let arr = [];
+				let minArr = [];
+				oArr.forEach(c => {
+					if (minArr.length === length) {
+						minArr = [];
+					}
+					if (minArr.length === 0) {
+						arr.push(minArr);
+					}
+					minArr.push(c);
+				});
+
+				return arr;
+			},
+			navTo(url) {
 				uni.navigateTo({
 					url: url
 				})
 			},
-			showProduct(item){
+			showProduct(item) {
 				uni.navigateTo({
-					url: '/pages/shopping/productDetails?productId='+item.productId
+					url: '/pages/shopping/productDetails?productId=' + item.productId
 				})
 			}
-        }
-    }
+		}
+	}
 </script>
 
 
 <style lang="scss" scoped>
-    .group-goods {
-        position: relative;
-        z-index: 1;
+	.group-goods {
+		position: relative;
+		z-index: 1;
 		background: #FFFFFF;
 		border-radius: 16upx;
 		margin-bottom: 20upx;
 		margin-top: 20upx;
-		padding: 20upx;
-    }
-    .swiper-box,.carousel {
-        width: 700rpx;
-        height: 240rpx;
-        position: relative;
-        border-radius: 20rpx;
-        .carousel-item {
-            width: 100%;
-            height: 100%;
-            // padding: 0 28upx;
-            overflow: hidden;
-        }
-        .swiper-image {
-            width: 100%;
-            height: 100%;
-            // border-radius: 10upx;
-            background: #ccc;
-        }
-    }
-    .swiper-dots {
-        display: flex;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 0rpx;
-        z-index: 66;
-        .dot {
-            width: 45rpx;
-            height: 3rpx;
-            background: #eee;
-            border-radius: 50%;
-            margin-right: 10rpx;
-        }
-        .dot-active {
-            width: 45rpx;
-            height: 3rpx;
-            background: #a8700d;
-            border-radius: 50%;
-            margin-right: 10rpx;
-        }
-    }
-
-    // 今日必拼+限时抢购
-    .group-goods {
-        background: #fff;
-        border-radius: 20rpx;
-        overflow: hidden;
-
-        .title-box {
-            padding-bottom: 20rpx;
-
-            .title {
-                font-size: 32rpx;
-                font-weight: bold;
-            }
-
-            .group-people {
-                .time-box {
-                    font-size: 26rpx;
-                    color: #edbf62;
-
-                    .count-text-box {
-                        width: 30rpx;
-                        height: 34rpx;
-                        background: #edbf62;
-                        text-align: center;
-                        line-height: 34rpx;
-                        font-size: 24rpx;
-                        border-radius: 6rpx;
-                        color: rgba(#fff, 0.9);
-                        margin: 0 8rpx;
-                    }
-                }
-
-                .head-box {
-                    .head-img {
-                        width: 40rpx;
-                        height: 40rpx;
-                        border-radius: 50%;
-                        background: #ccc;
-                    }
-                }
-
-                .tip {
-                    font-size: 24rpx;
-                    padding-left: 30rpx;
-                    color: #999999;
-                }
-
-                .cuIcon-right {
-                    font-size: 30rpx;
-                    line-height: 28rpx;
-                    color: #666;
-                }
-            }
-        }
-
-        .goods-box {
-            .goods-item {
-                margin-right: 22rpx;
-                &:nth-child(4n) {
-                    margin-right: 0;
-                }
-            }
-        }
-        .min-goods{
-            margin-right: 22rpx;
-
-        }
-    }
+	}
+
+	.swiper-box,
+	.carousel {
+		width: 700rpx;
+		height: 240rpx;
+		position: relative;
+		border-radius: 20rpx;
+
+		.carousel-item {
+			width: 100%;
+			height: 100%;
+			// padding: 0 28upx;
+			overflow: hidden;
+		}
+
+		.swiper-image {
+			width: 100%;
+			height: 100%;
+			// border-radius: 10upx;
+			background: #ccc;
+		}
+	}
+
+	.swiper-dots {
+		display: flex;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 0rpx;
+		z-index: 66;
+
+		.dot {
+			width: 45rpx;
+			height: 3rpx;
+			background: #eee;
+			border-radius: 50%;
+			margin-right: 10rpx;
+		}
+
+		.dot-active {
+			width: 45rpx;
+			height: 3rpx;
+			background: #a8700d;
+			border-radius: 50%;
+			margin-right: 10rpx;
+		}
+	}
+
+	// 今日必拼+限时抢购
+	.group-goods {
+
+		background: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+
+		.title-box {
+			padding-bottom: 20rpx;
+			padding: 34rpx 32rpx;
+			background: linear-gradient(180deg, #FFEBD7 0%, #FFFFFF 100%);
+
+			.title {
+				font-size: 34rpx;
+				font-weight: bold;
+			}
+
+			.group-people {
+				.time-box {
+					font-size: 26rpx;
+					color: #edbf62;
+
+					.count-text-box {
+						width: 30rpx;
+						height: 34rpx;
+						background: #edbf62;
+						text-align: center;
+						line-height: 34rpx;
+						font-size: 24rpx;
+						border-radius: 6rpx;
+						color: rgba(#fff, 0.9);
+						margin: 0 8rpx;
+					}
+				}
+
+				.head-box {
+					.head-img {
+						width: 40rpx;
+						height: 40rpx;
+						border-radius: 50%;
+						background: #ccc;
+					}
+				}
+
+				.tip {
+					font-size: 24rpx;
+					padding-left: 30rpx;
+					color: #999999;
+				}
+
+				.cuIcon-right {
+					font-size: 30rpx;
+					line-height: 28rpx;
+					color: #666;
+				}
+			}
+		}
+
+		.goods-box {
+			padding: 0 32rpx;
+
+			.goods-item {
+				margin-right: 22rpx;
+
+				&:nth-child(4n) {
+					margin-right: 0;
+				}
+			}
+		}
+
+		.min-goods {
+			margin-right: 22rpx;
+
+		}
+	}
+
 	.min-goods {
-	  width: 152rpx;
-	  background: #fff;
-	  .img-box {
-	    width: 152rpx;
-	    height: 152rpx;
-	    overflow: hidden;
-	    position: relative;
-	
-	    .tag {
-	      position: absolute;
-	      left: 0;
-	      bottom: 0rpx;
-	      z-index: 2;
-	      line-height: 35rpx;
-	      background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
-	      border-radius: 0px 18rpx 18rpx 0px;
-	      padding: 0 10rpx;
-	      font-size: 24rpx;
-	      font-family: PingFang SC;
-	      font-weight: bold;
-	      color: rgba(120, 79, 6, 1);
-	    }
-	
-	    .img {
-	      width: 100%;
-	      background-color: #ccc;
-	    }
-	  }
-	
-	  .price-box {
-	    width: 100%;
-	    margin-top: 10rpx;
-	
-	    .seckill-current {
-	      font-size: 30rpx;
-	      font-weight: 500;
-	      color: rgba(225, 33, 43, 1);
-	    }
-	
-	    .original {
-	      font-size: 20rpx;
-	      font-weight: 400;
-	      // text-decoration: line-through;
-	      color: rgba(153, 153, 153, 1);
-	      margin-left: 14rpx;
-	    }
-	  }
-	
-	  .title {
-	    font-size: 26rpx;
-	  }
+		width: 152rpx;
+		background: #fff;
+
+		.img-box {
+			width: 140rpx;
+			height: 140rpx;
+			border-radius: 16rpx 16rpx 16rpx 16rpx;
+			overflow: hidden;
+			position: relative;
+
+			// .tag {
+			//   position: absolute;
+			//   left: 0;
+			//   bottom: 0rpx;
+			//   z-index: 2;
+			//   line-height: 35rpx;
+			//   background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
+			//   border-radius: 0px 18rpx 18rpx 0px;
+			//   padding: 0 10rpx;
+			//   font-size: 24rpx;
+			//   font-family: PingFang SC;
+			//   font-weight: bold;
+			//   color: rgba(120, 79, 6, 1);
+			// }
+			.tag {
+				position: absolute;
+				right: 0;
+				top: 0rpx;
+				z-index: 2;
+				line-height: 18rpx;
+				background: linear-gradient(120deg, #FF7F4E 0%, #FA531C 100%);
+				// border-radius: 0px 18rpx 18rpx 0px;
+				width: 48rpx;
+				height: 56rpx;
+
+				padding: 18rpx 20rpx;
+				font-size: 14rpx;
+				font-family: PingFang SC;
+				font-weight: Semibold;
+				color: #FFFFFF;
+			}
+
+			.img {
+				width: 100%;
+				background-color: #FFFFFF;
+
+			}
+		}
+
+		.price-box {
+			width: 100%;
+			margin-top: 24rpx;
+
+			.seckill-current {
+				font-weight: 600;
+				font-size: 26rpx;
+				color: #FF5030;
+			}
+
+			.original {
+				font-size: 20rpx;
+				font-weight: 400;
+				// text-decoration: line-through;
+				color: rgba(153, 153, 153, 1);
+				margin-left: 14rpx;
+			}
+		}
+
+		.title {
+			font-size: 26rpx;
+		}
 	}
-	
-</style>
+</style>

pages/shopping/index.vue

@@ -3,71 +3,93 @@
 		<view class="top-content">
 			<view class="status_bar" :style="{height: statusBarHeight}"></view>
 			<!-- 这里是状态栏 -->
-			<view class="top-title">健康商城</view>
+			<!-- <view class="top-title">健康商城</view> -->
 			<!-- 搜索框 -->
 			<view class="search-cont">
 				<view class="inner">
 					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
-					<input type="text" disabled   confirm-type="搜索" @click="toSearch" placeholder="输入药品名称" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+					<input type="text" disabled confirm-type="搜索" @click="toSearch" placeholder="输入药品名称"
+						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
 				</view>
 			</view>
 		</view>
-		<view  :style="{height: divHeight}"   class="medic-box">
+		<view :style="{height: divHeight}" class="medic-box">
 			<view class="cate-list">
-				<view 
-					v-for="(item,index) in cates" 
-					:key="index" 
-					:class="cateSelect == item.cateId?'item active':'item'" 
-					@click="choseCate(item)"
-				>{{item.cateName }}</view>
+				<view v-for="(item,index) in cates" :key="index" :class="cateSelect == item.cateId?'item active':'item'"
+					@click="choseCate(item)">{{item.cateName }}</view>
 			</view>
 			<view class="medic">
 				<!-- 轮播图 -->
 				<view class="banner-box">
-					<swiper
-						class="swiper" 
-						:indicator-dots="true" 
-						:circular="true" 
-						:autoplay="true" 
-						:interval="3000" 
-						:duration="1000"
-						indicator-color="rgba(255, 255, 255, 0.6)"
-						indicator-active-color="#ffffff"
-					>
-						<swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index" @click="handleAdvClick(item)">
+					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
+						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
+						<swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index"
+							@click="handleAdvClick(item)">
 							<image :src="item.imageUrl" mode=""></image>
 						</swiper-item>
 					</swiper>
 				</view>
 				<!-- 药品列表 -->
 				<view class="medic-list">
-						<!-- <view class="item" v-for="(item,index) in subCates" :key="index">
+					<!-- <view class="item" v-for="(item,index) in subCates" :key="index">
 							<view class="title">{{item.cateName}}</view> -->
-							<view class="inner-list">
-								<view class="definite"v-for="(subItem,index) in subCates"   @click="showProductList(subItem)">
+					<view class="inner-list">
+						<!-- 	<view class="definite"v-for="(subItem,index) in subCates"   @click="showProductList(subItem)">
 									<view class="img-box">
 										<image :src="subItem.pic" mode="aspectFit"></image>
 									</view>
 									<view class="name ellipsis">{{subItem.cateName}}</view>
+								</view> -->
+						<view class="definite" v-for="(subItem,index) in subCates"
+							@click="showProductList(subItem, index)">
+							<view class="name ellipsis" :class="{ 'select-name': activeIndex === index }">
+								{{subItem.cateName}}
+							</view>
+						</view>
+					</view>
+					<view class="line"></view>
+					<view class="product-list">
+						<text class="product-title"> {{ activeIndex >= 0 ? subCates[activeIndex].cateName : '' }}</text>
+					<view class="">
+						<view class="">
+							<image src=""></image>
+							<view class="">
+								<text>云南白药气雾剂每瓶重50g保险液每瓶...</text>
+								<view class="">
+									<view class="">9.5折</view>
+									<view class="">限购1份</view>
+								</view>
+								<view class="">
+									<text><text>57</text>.48</text>
+									<text>￥60.50</text>
 								</view>
 							</view>
+						</view>
+					</view>
+					</view>
 					<!-- 	</view> -->
 				</view>
+
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import {getProductCate} from '@/api/product'
-	import {getAdv} from '@/api/adv'
+	import {
+		getProductCate
+	} from '@/api/product'
+	import {
+		getAdv
+	} from '@/api/adv'
 	export default {
 		data() {
 			return {
-				divHeight:'0px',
-				allCates:[],
-				cates:[],
-				subCates:[],
+				activeIndex: 0,
+				divHeight: '0px',
+				allCates: [],
+				cates: [],
+				subCates: [],
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 				// 选中药品分类
@@ -78,25 +100,25 @@
 		},
 		onLoad() {
 			uni.showShareMenu({
-				withShareTicket:true,
+				withShareTicket: true,
 				//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
-				menus:["shareAppMessage","shareTimeline"] //不设置默认发送给朋友
+				menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
 			})
 			this.getProductCate();
 		},
 		onShow() {
-			var that=this;
-			setTimeout(function(){
+			var that = this;
+			setTimeout(function() {
 				let info = uni.createSelectorQuery().select(".top-content");
-		　　　  info.boundingClientRect(function(data) { //data - 各种参数
-		　　　  　 	console.log(data.height)  // 获取元素宽度
+				info.boundingClientRect(function(data) { //data - 各种参数
+					console.log(data.height) // 获取元素宽度
 					// console.log(uni.upx2px(10)) 
-					that.divHeight="calc(100% - "+data.height+"px)"
-		　　    }).exec()
-			},500);
+					that.divHeight = "calc(100% - " + data.height + "px)"
+				}).exec()
+			}, 500);
 			this.getAdv();
 		},
-		methods:{
+		methods: {
 			// divHeight(){
 			//    return 'height:calc(100% - ${this.top}px);'
 			// },
@@ -105,54 +127,54 @@
 					url: '../home/productSearch'
 				})
 			},
-			handleAdvClick(item){
+			handleAdvClick(item) {
 				console.log(item);
-				if(item.showType==1){
-					uni.setStorageSync('url',item.advUrl);
+				if (item.showType == 1) {
+					uni.setStorageSync('url', item.advUrl);
 					uni.navigateTo({
-						url:"../home/h5"
+						url: "../home/h5"
+					})
+				} else if (item.showType == 2) {
+					uni.navigateTo({
+						url: item.advUrl
+					})
+				} else if (item.showType == 3) {
+					uni.setStorageSync('content', item.content);
+					uni.navigateTo({
+						url: "../home/content"
 					})
 				}
-				else if(item.showType==2){
-					 uni.navigateTo({
-					 	url:item.advUrl
-					 })
-				}
-				else if(item.showType==3){
-					 uni.setStorageSync('content',item.content);
-					 uni.navigateTo({
-					 	url:"../home/content"
-					 })
-				}
-				
+
 			},
-			getAdv(){
-				let data = {advType:2};
+			getAdv() {
+				let data = {
+					advType: 2
+				};
 				getAdv(data).then(
 					res => {
-						if(res.code==200){
-							this.advs=res.data;
+						if (res.code == 200) {
+							this.advs = res.data;
 						}
 					},
 					rej => {}
 				);
 			},
-			getProductCate(){
+			getProductCate() {
 				let data = {};
 				getProductCate(data).then(
 					res => {
-						if(res.code==200){
-							this.allCates=res.data;
-							this.cates = this.allCates.filter(function (item) {
-							     return item.pid==0
+						if (res.code == 200) {
+							this.allCates = res.data;
+							this.cates = this.allCates.filter(function(item) {
+								return item.pid == 0
 							});
-							if(this.cates!=null&&this.cates.length>0){
-								this.cateSelect=this.cates[0].cateId;
+							if (this.cates != null && this.cates.length > 0) {
+								this.cateSelect = this.cates[0].cateId;
 								this.getSubCate()
 							}
-						}else{
+						} else {
 							uni.showToast({
-								icon:'none',
+								icon: 'none',
 								title: "请求失败",
 							});
 						}
@@ -164,29 +186,32 @@
 			choseCate(item) {
 				this.cateSelect = item.cateId;
 				this.getSubCate()
-				
+
 			},
-			getSubCate(){
-				var that=this;
-				this.subCates = this.allCates.filter(function (item) {
+			getSubCate() {
+				var that = this;
+				this.subCates = this.allCates.filter(function(item) {
 					// let subList = that.allCates.filter(child => {
 					// 	//返回每一项的子级数组
 					// 	return child.pid === item.cateId
 					// });
 					// subList.length > 0 ? item.children = subList : [];
-				    return item.pid==that.cateSelect
+					return item.pid == that.cateSelect
 				});
-				 
+
 				console.log(this.subCates);
 			},
 			// 查看药品详情
-			showProductList(item) {
-				uni.navigateTo({
-					url: './productList?cateId='+item.cateId+"&pid="+item.pid
-				})
+			showProductList(item, index) {
+				// console.log("item>>>>>", item)
+				this.activeIndex = index;
+
+				// uni.navigateTo({
+				// 	url: './productList?cateId='+item.cateId+"&pid="+item.pid
+				// })
 			},
 			goSearch(e) {
-				if(e.detail.value!=null&&e.detail.value!=""){
+				if (e.detail.value != null && e.detail.value != "") {
 					this.utils.addHisSearch(e.detail.value);
 				}
 				uni.navigateTo({
@@ -198,19 +223,21 @@
 </script>
 
 <style lang="scss">
-	page{
+	page {
 		height: 100%;
 		background-color: #fff;
 	}
-	
-	.content{
+
+	.content {
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		.top-content{
+
+		.top-content {
 			width: 100%;
 			z-index: 10;
-			.top-title{
+
+			.top-title {
 				height: 88upx;
 				line-height: 88upx;
 				font-size: 42upx;
@@ -220,10 +247,12 @@
 				padding-left: 41upx;
 				background-color: #FFFFFF;
 			}
-			.search-cont{
+
+			.search-cont {
 				padding: 16upx 30upx;
 				background-color: #FFFFFF;
-				.inner{
+
+				.inner {
 					box-sizing: border-box;
 					width: 100%;
 					height: 72upx;
@@ -232,12 +261,14 @@
 					display: flex;
 					align-items: center;
 					padding: 0 30upx;
-					.icon-search{
+
+					.icon-search {
 						width: 28upx;
 						height: 28upx;
 						margin-right: 20upx;
 					}
-					input{
+
+					input {
 						height: 60upx;
 						line-height: 60upx;
 						flex: 1;
@@ -245,9 +276,11 @@
 				}
 			}
 		}
-		.medic-box{
+
+		.medic-box {
 			display: flex;
-			.cate-list{
+
+			.cate-list {
 				box-sizing: border-box;
 				width: 200upx;
 				background: #F2F5F9;
@@ -255,7 +288,8 @@
 				flex-direction: column;
 				padding: 20upx 0;
 				overflow-y: scroll;
-				.item{
+
+				.item {
 					height: 100upx;
 					line-height: 100upx;
 					padding-left: 30upx;
@@ -264,39 +298,47 @@
 					font-weight: 500;
 					color: #333333;
 					position: relative;
-					&.active{
-						color: #0bb3f2;
-						&::after{
+
+					&.active {
+						background: #FFFFFF;
+						font-weight: 600;
+
+						&::after {
 							content: "";
-							width: 8upx;
-							height: 50upx;
+							width: 6upx;
+							height: 28upx;
 							background: #0bb3f2;
 							position: absolute;
-							top: 25upx;
+							top: 50%;
 							left: 0;
+							transform: translateY(-50%);
 						}
 					}
 				}
 			}
-			.medic{
+
+			.medic {
 				box-sizing: border-box;
 				width: calc(100% - 200upx);
 				height: 100%;
 				padding: 0 30upx;
-				.banner-box{
+
+				.banner-box {
 					margin-top: 30rpx;
 					width: 100%;
 					height: 160upx;
 					border-radius: 10upx;
 					overflow: hidden;
+
 					.swiper,
 					.swiper-item,
-					.swiper-item image{
+					.swiper-item image {
 						width: 100%;
 						height: 100%;
 					}
 				}
-				.medic-list{
+
+				.medic-list {
 					box-sizing: border-box;
 					padding: 30upx 0;
 					overflow-y: auto;
@@ -311,16 +353,18 @@
 					// 		padding-top: 20upx;
 					// 		margin-bottom: 30upx;
 					// 	}
-						
+
 					// }
-					.inner-list{
+					.inner-list {
 						display: flex;
 						flex-wrap: wrap;
-						.definite{
+
+						.definite {
 							width: calc(33% - 20upx);
 							margin-right: 30upx;
 							margin-bottom: 30upx;
-							.img-box{
+
+							.img-box {
 								width: 100%;
 								height: 144upx;
 								background: #F5F5F5;
@@ -328,11 +372,13 @@
 								overflow: hidden;
 								display: flex;
 								align-items: center;
-								image{	
+
+								image {
 									max-width: 100%;
 								}
 							}
-							.name{
+
+							.name {
 								width: 100%;
 								margin-top: 20upx;
 								font-size: 24upx;
@@ -340,16 +386,37 @@
 								font-weight: 500;
 								color: #666666;
 								text-align: center;
+								padding: 6rpx 16rpx;
+							}
+
+							.select-name {
+								background: #EFF3F7;
+								color: #222426;
 							}
+
 							&:nth-child(3n) {
 								margin-right: 0;
 							}
 						}
 					}
+
+					.line {
+						width: 100%;
+						height: 0rpx;
+						border: 1rpx solid #ECECEC;
+					}
+
+					.product-list {
+						padding: 32rpx 0 0;
+						.product-title {
+							font-weight: 500;
+							font-size: 28rpx;
+							color: #222426;
+						}
+					}
 				}
 			}
 		}
-		
+
 	}
-	
-</style>
+</style>

pages/shopping/productDetails.vue

@@ -1,5 +1,9 @@
 <template>
 	<view class="content">
+			<view class="share-box centerV ">
+				<image class="w48 h48 " src="/static/images/weixin.png" mode=""></image>
+				<text class="color-text mt8 weight-500 fs20">微信分享</text>
+			</view>
 		<!-- 商品轮播图片 -->
 		<view class="shop-banner" @click="showImg()">
 			<swiper
@@ -23,7 +27,7 @@
 			<!-- 底部遮罩 -->
 			<view class="banner-mask"></view>
 			<!-- 数量 -->
-			<view class="num-box">{{ activeBanner }}/{{ banner.length }}</view>
+			<view class="num-box"><text class="weight-500">{{ activeBanner }}</text>/{{ banner.length }}</view>
 		</view>
 		<!-- 详细信息 -->
 		<view class="det-info">
@@ -32,14 +36,15 @@
 					<text class="label">会员价</text>
 					<text class="unit">￥</text>
 					<text class="num" >{{product.price}}</text>
-					<text class="label">零售价</text>
+					<text class="fs22 color-text2 ">零售价</text>
 					<text class="old" >¥{{product.otPrice}}</text>
 				</view>
-				<view class="share-box">
+			<!-- 	<view class="share-box">
 					<text class="text">分享</text>
 					<image src="../../static/images/share1.png" mode=""></image>
 					<button  class="share" data-name="shareBtn" open-type="share">分享</button>
-				</view>
+				</view> -->
+					<text class="fs22 color-text2">月售2456件</text>
 			</view>
 			<view class="name-box">
 				<view class="tag">{{utils.getDictLabelName("storeProductType",product.productType)}}</view>{{product.productName}}
@@ -733,6 +738,17 @@
 </script>
 
 <style lang="scss">
+	.share-box{
+		position: absolute;
+		right: 32rpx;
+		top: 70%;
+		z-index: 99;
+		width: 112rpx;
+		height: 112rpx;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+		border: 1rpx solid #EFF3F7;
+		background-color: #FFFFFF;
+	}
 	.shop-banner{
 		height: 756upx;
 		background-color: #FFFFFF;
@@ -762,18 +778,18 @@
 		}
 		.num-box{
 			width: 80upx;
-			height: 44upx;
-			line-height: 44upx;
+			height: 40upx;
+			line-height: 40upx;
 			text-align: center;
 			font-size: 24upx;
 			font-family: PingFang SC;
-			font-weight: 500;
+			// font-weight: 500;
 			color: #FFFFFF;
-			background: rgba(0, 0, 0, .3);
-			border-radius: 22upx;
+			background: rgba(0, 0, 0, .7);
+			border-radius: 20upx;
 			position: absolute;
-			right: 30upx;
-			bottom: 30upx;
+			right: 40upx;
+			bottom: 34upx;
 			z-index: 10;
 		}
 	    .cf-box{
@@ -815,66 +831,69 @@
 				display: flex;
 				align-items: flex-end;
 				.label{
-					color: #333;
-					font-size: 28upx;
+					font-weight: 500;
+					font-size: 24rpx;
+					color: #FF5030;
 					font-family: PingFang SC;
 					line-height: 1.3;
-					margin-right: 5upx;
+					margin-right: 10upx;
 				}
 				.unit{
-					font-size: 28upx;
+					font-size: 26upx;
 					font-family: PingFang SC;
 					font-weight: bold;
 					color: #FF6633;
 					line-height: 1.3;
 				}
 				.num{
-					font-size: 40upx;
+					font-size: 48upx;
 					font-family: PingFang SC;
 					font-weight: bold;
-					color: #FF6633;
+					color: #FF5030;
 					margin: 0 20upx 0 10upx;
 					line-height: 1;
 				}
+				
 				.old{
-					font-size: 28upx;
+					font-size: 24upx;
 					font-family: PingFang SC;
-					font-weight: 500;
+					font-weight: 400;
 					text-decoration: line-through;
-					color: #BBBBBB;
-					line-height: 1.3;
-				}
-			}
-			.share-box{
-				width: 120upx;
-				height: 46upx;
-				border: 1px solid #0bb3f2;
-				border-radius: 23upx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				position: relative;
-				.text{
-					font-size: 26upx;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: #0bb3f2;
-				}
-				image{
-					margin-left: 2rpx;
-					width: 25upx;
-					height: 24upx;
-				}
-				.share{
-					display: inline-block;
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					opacity: 0;
+					color: #898E91;
+					// line-height: 1.3;
 				}
 			}
+			// .share-box{
+			// 	width: 120upx;
+			// 	height: 46upx;
+			// 	border: 1px solid #0bb3f2;
+			// 	border-radius: 23upx;
+			// 	display: flex;
+			// 	align-items: center;
+			// 	justify-content: center;
+			// 	position: relative;
+			// 	.text{
+			// 		font-size: 26upx;
+			// 		font-family: PingFang SC;
+			// 		font-weight: 500;
+			// 		color: #0bb3f2;
+			// 	}
+			// 	image{
+			// 		margin-left: 2rpx;
+			// 		width: 25upx;
+			// 		height: 24upx;
+			// 	}
+			// 	.share{
+			// 		display: inline-block;
+			// 		position: absolute;
+			// 		top: 0;
+			// 		left: 0;
+			// 		width: 100%;
+			// 		height: 100%;
+			// 		opacity: 0;
+			// 	}
+			// }
+			
 			.spec{
 				font-size: 24upx;
 				font-family: PingFang SC;
@@ -892,14 +911,13 @@
 			margin-top: 32upx;
 			.tag{
 				display: inline-block;
-				padding: 0 6upx;
-				height: 30upx;
-				background: linear-gradient(90deg, #66b2ef 0%, #0bb3f2 100%);
+				padding: 2upx 8upx;
+				height: 32upx;
+				background: #F5A623;
 				border-radius: 4upx;
 				margin-right: 10upx;
-				font-size: 22upx;
-				font-family: PingFang SC;
-				font-weight: bold;
+				font-weight: 400;
+				font-size: 20rpx;
 				color: #FFFFFF;
 				line-height: 30upx;
 				float: left;