首页改版

components/cm-module/pageTemplate/template-product.vue

@@ -83,8 +83,8 @@ export default{
 		margin-right: 0;
 	}
 	.item-img {
-		width: 330rpx;
-		height: 330rpx;
+		width: 332rpx;
+		height: 332rpx;
 		border-radius: 16rpx 16rpx 0 0;
 		display: block;
 		margin-bottom: 8rpx;

pages.json

@@ -101,6 +101,13 @@
 						"navigationStyle": "custom"
 					}
 				},
+				{
+					"path": "good-floor-zone",
+					"style": {
+						"navigationBarTitleText": "",
+						"enablePullDownRefresh": true
+					}
+				},
 				{
 					"path": "goods-instrument",
 					"style": {

pages/goods/good-floor-zone.vue

@@ -0,0 +1,507 @@
+<template>
+	<view class="container floor clearfix">
+        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5" />
+		<template v-else>
+            <view class="container-home">
+                <view class="tui-floor-item" v-if="imageList.length>0">
+                    <swiper class="tui-floor-swiper" circular @change="swiperChange" :indicator-dots="false" :autoplay="true"
+                        :interval="5000" :duration="500">
+                        <swiper-item v-for="(item, index) in imageList" :key="item">
+                            <view class="tui-floor-swiper" @click="BannerNavigateTo(
+                                    item.linkType,
+                                    item.linkParam.id ? item.linkParam.id : '',
+                                    item.linkParam.crmLink,
+                                    item.linkParam.keyword ? item.linkParam.keyword : '')">
+                                <image class="floor-image" :src="item.crmImage" mode=""></image>
+                            </view>
+                        </swiper-item>
+                    </swiper>
+                    <view class="swiper__dots-box">
+                        <view v-for="(item, idx) in imageList" :key="idx"
+                            :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
+                            class="swiper__dots-item"></view>
+                    </view>
+                </view>
+                <view class="tui-floor-tabs">
+                    <view class="top-tabs-item" :class="tabsIndex === 0 ? 'active': '' " @click="handleClickTabS(0)">全部</view>
+                    <view class="top-tabs-item" :class="tabsIndex === 1 ? 'active': '' " @click="handleClickTabS(1)">产品</view>
+                    <view class="top-tabs-item" :class="tabsIndex === 2 ? 'active': '' " @click="handleClickTabS(2)">仪器</view>
+                    <view class="top-tabs-item" :class="tabsIndex === 3 ? 'active': '' " @click="handleClickTabS(3)">耗材配件</view>
+                </view>
+                <view class="floor-item-main" >
+                    <template v-if="productList.length > 0">
+                        <view class="floor-item clearfix"  v-for="(pros, idx) in productList" :key="idx"
+                            @click.stop="navToDetailPage(pros)">
+                            <image class="item-img tui-skeleton-fillet" :src="pros.mainImage" mode="aspectFill"></image>
+                            <template-Type :product="pros" />
+                            <view class="floor-item-content">
+                                <view class="title tui-skeleton-rect">
+                                    <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''">{{ pros.name }}
+                                    </text>
+                                </view>
+                                <view class="floor-item-price">
+                                    <template>
+                                        <template-Tags :product="pros" />
+                                    </template>
+                                    <view v-if="hasLogin">
+                                        <template v-if="pros.productCategory == 1">
+                                            <template-Price :product="pros" />
+                                        </template>
+                                        <template v-else>
+                                            <view class="price tui-skeleton-rect" v-if="pros.detailTalkFlag == '2'">
+                                                <text class="p sm">￥</text> <text class="p big">价格详聊</text>
+                                            </view>
+                                            <view class="price tui-skeleton-rect" v-else>
+                                                <text class="p sm">￥</text>
+                                                <text class="p big">{{ pros.price | NumFormat }}</text>
+                                            </view>
+                                        </template>
+                                    </view>
+                                    <view v-else class="no-price">
+                                        <template v-if="pros.productCategory == 1">
+                                            <view class="p-stars">
+                                                <text class="p-no">￥</text>
+                                                <uni-grader :grade="Number(pros.priceGrade)" :margin="14" />
+                                            </view>
+                                        </template>
+                                        <template v-else>
+                                            <view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
+                                        </template>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </template>
+                    <template v-else>
+                        <view class="floor-main-none">
+                            <image
+                                class="none-image"
+                                src="https://static.caimei365.com/app/img/bg/icon_echart_none@2x.png"
+                                mode=""
+                            ></image>
+                            <view class="none-text">暂无数据~</view>
+                        </view>
+                    </template>
+                </view>
+            </view>
+		</template>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import uniGrader from '@/components/uni-grade/uni-grade.vue'
+import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
+import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
+import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
+import wxLogin from '@/common/config/wxLogin.js'
+
+export default {
+    name:'GoodFloorZone',
+    components: {
+        uniGrader,
+        templateTags,
+        templatePrice,
+        templateType
+    },
+	data() {
+		return {
+			userId: 0,
+			userIdentity: 0,
+			skeletonShow: true,
+			isScrollTop: false,
+            current:0,
+            listQuery: {
+                userId:0, //  用户Id
+                zoneId:'', // 专区Id
+                typeSort:'', // 分类类型 1产品，2仪器，3耗材配件
+                pageNum:1,
+                pageSize:12,
+                source:1
+            },
+            imageList: [], //专区轮播
+            productList:[],//专区商品
+            nomoreText: '上拉显示更多',
+            hasNextPage: false,
+            loadding: false,
+            pullUpOn: true,
+            pullFlag: true,
+            tabsIndex: 0
+		}
+	},
+    filters: {
+        NumFormat(value) {
+            //处理金额
+            return Number(value).toFixed(2)
+        }
+    },
+	computed: {
+		...mapState(['hasLogin', 'userInfo','isWxAuthorize'])
+	},
+	onLoad(option) {
+		if (option.type == 'share') {
+			wxLogin.wxLoginAuthorize()
+		}
+		this.initGetUser(option)
+	},
+	methods: {
+        async initGetUser(option){
+            const user = await this.$api.getStorage()
+            this.listQuery.zoneId = option.zoneId
+            this.listQuery.typeSort = option.typeSort
+            this.tabsIndex = option.typeSort*1
+            this.listQuery.userId = user.userId ? user.userId : 0
+            this.userIdentity = user.userIdentity
+            this.getZoneSecond(this.listQuery)
+        },
+        // 切换分类查询
+        handleClickTabS(index){
+            this.tabsIndex = index
+            this.listQuery.typeSort = index
+            this.listQuery.pageNum = 1
+            this.getZoneSecond()
+        },
+        async getZoneSecond() {
+            //专区详情
+            try {
+                const res = await this.CommonService.getZoneSecond(this.listQuery)
+                const data = res.data
+                this.imageList = data.imageList
+                uni.setNavigationBarTitle({ title: `${data.zone.floorTitle}` })
+                this.productList = data.products.results
+                this.hasNextPage = data.products.hasNextPage
+                this.skeletonShow = false
+                if (this.hasNextPage) {
+                    this.pullUpOn = false
+                    this.nomoreText = '上拉显示更多'
+                } else {
+                    if (this.productList.length < 6) {
+                        this.pullUpOn = true
+                    } else {
+                        this.pullUpOn = false
+                        this.loadding = false
+                        this.nomoreText = '已至底部'
+                    }
+                }
+            } catch (error) {
+                console.log('error', error.msg)
+            }
+        },
+        async OnReachBottomData() {
+            // 上滑加载
+            try {
+                this.listQuery.pageNum += 1
+                const res = await this.CommonService.GetHomeNewFloorList(this.listQuery)
+                const data = res.data
+                this.productList = this.productList.concat(data.products.results)
+                this.hasNextPage = data.products.hasNextPage
+                if (this.hasNextPage) {
+                    this.pullUpOn = false
+                    this.nomoreText = '上拉显示更多'
+                } else {
+                    this.pullUpOn = false
+                    this.loadding = false
+                    this.nomoreText = '已至底部'
+                }
+            } catch (error) {
+                console.log('error', error.msg)
+            }
+        },
+        navToDetailPage(pros) {
+            //跳转商品详情
+            this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+        },
+        BannerNavigateTo(linkType, linkId, linkHref, keyword) {
+            //跳转
+            this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+        },
+        swiperChange(e) {//轮播图切换
+        	this.current = e.detail.current
+        }
+	},
+	onPageScroll(e) {
+		//实时获取到滚动的值
+		if (e.scrollTop > 400) {
+			this.isScrollTop = true
+		} else {
+			this.isScrollTop = false
+		}
+	},
+	onPullDownRefresh() {
+        setTimeout(() => {
+            this.listQuery.pageNum = 1
+            this.getZoneSecond()
+            uni.stopPullDownRefresh()
+        }, 200)
+	},
+    onReachBottom() {
+        if (this.hasNextPage) {
+            this.loadding = true
+            this.pullUpOn = true
+            this.OnReachBottomData()
+        }
+    },
+	onShareAppMessage(res) {
+		//分享转发
+		if (res.from === 'button') {
+			// 来自页面内转发按钮
+		}
+		return {
+			title: '采美-一站式生/医美采购服务平台',
+			path: `pages/goods/good-floor-zone?type=share&linkId=${this.pageId}`
+		}
+	},
+	onShow() {}
+}
+</script>
+
+<style lang="scss">
+page {
+	background-color: #f7f7f7;
+}
+.container-home {
+	width: 100%;
+	height: auto;
+    box-sizing: border-box;
+    padding: 24rpx 24rpx 0 24rpx;
+}
+.tui-floor-item{
+    width: 100%;
+    height: 240rpx;
+    border-radius: 16rpx;
+    box-sizing: border-box;
+    padding: 0;
+    position: relative;
+    margin-bottom: 24rpx;
+    .swiper__dots-box{
+        position: absolute;
+        bottom: 30rpx;
+        left: 0;
+        right: 0;
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex: 1;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        .swiper__dots-item{
+            width: 8rpx;
+            height: 8rpx;
+            border-radius: 100%;
+            margin-left: 6px;
+            background-color:rgba(255,255,255,.7);
+        }
+        .swiper__dots-long{
+            width: 35rpx;
+            height: 8rpx;
+            border-radius: 4rpx;
+            background-color: #ffff;
+            transition: all 0.4s;
+        }
+    }
+    .tui-floor-swiper{
+        width: 100%;
+        height: 240rpx;
+        text-align: center;
+        line-height: 240rpx;
+        float: left;
+        border-radius: 16rpx;
+        overflow: hidden;
+        .floor-image{
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+    }
+}
+.tui-floor-tabs{
+    width: 100%;
+    height: 88rpx;
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 24rpx;
+    .top-tabs-item{
+        padding: 0 24rpx;
+        line-height: 88rpx;
+        text-align: center;
+        font-size: 30rpx;
+        color: #333333;
+        cursor: pointer;
+        &.active{
+            color: #FF5B00;
+            font-weight: bold;
+            text-decoration: underline;
+        }
+    }
+}
+.floor-item-main{
+    width: 100%;
+    min-height: 600rpx;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    .floor-item {
+        width: 339rpx;
+        height: 524rpx;
+        font-size: $font-size-24;
+        color: $text-color;
+        background: #ffffff;
+        line-height: 36rpx;
+        border-radius: 16rpx;
+        box-sizing: border-box;
+        position: relative;
+        margin-right: 20rpx;
+        margin-bottom: 20rpx;
+        &:nth-child(2n){
+            margin-right: 0;
+        }
+        .item-img {
+            width: 339rpx;
+            height: 339rpx;
+            border-radius: 16rpx 16rpx 0 0;
+            display: block;
+            margin-bottom: 8rpx;
+        }
+    
+        .floor-item_tag {
+            width: 100%;
+            height: 32rpx;
+            float: left;
+            margin: 20rpx 0;
+            padding: 0 20rpx;
+            box-sizing: border-box;
+    
+            text {
+                display: inline-block;
+                padding: 0 8rpx;
+                border: 1px solid #e3ebf7;
+                border-radius: 8rpx;
+                color: #9aa5b5;
+                font-size: $font-size-22;
+                line-height: 32rpx;
+                text-align: center;
+                float: left;
+            }
+        }
+    
+        .floor-item-content {
+            width: 100%;
+            padding: 0 20rpx;
+            box-sizing: border-box;
+        }
+    
+        .floor-item-act {
+            display: block;
+            width: 100%;
+            height: 32rpx;
+            text-align: center;
+            box-sizing: border-box;
+        }
+    
+        .title-none {
+            font-size: $font-size-26;
+            color: #ff2a2a;
+            line-height: 54rpx;
+        }
+    
+        .title {
+            width: 100%;
+            height: 70rpx;
+            display: flex;
+            line-height: 35rpx;
+            flex-direction: column;
+            margin: 8rpx 0;
+            padding: 0;
+            position: relative;
+    
+            .mclap {
+                width: 100%;
+                line-height: 35rpx;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                word-break: break-all;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                font-size: 26rpx;
+    
+                &.indent {
+                    text-indent: 95rpx;
+                }
+            }
+    
+            .mclap-tag {
+                display: block;
+                width: 84rpx;
+                height: 32rpx;
+                background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+                border-radius: 4rpx 48rpx 4px 4px;
+                line-height: 32rpx;
+                font-size: $font-size-22;
+                color: #ffffff;
+                text-align: center;
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+        }
+    
+        .no-price {
+            height: 54rpx;
+            line-height: 54rpx;
+            display: flex;
+            box-sizing: border-box;
+    
+            .p-no {
+                font-size: $font-size-28;
+                color: $text-color;
+                display: block;
+                float: left;
+            }
+    
+            .p-stars {
+                float: left;
+            }
+        }
+    
+        .price {
+            color: #ff2a2a;
+            line-height: 54rpx;
+    
+            &.none {
+                text-decoration: line-through;
+                color: #999999;
+            }
+    
+            .sm {
+                font-size: $font-size-24;
+            }
+    
+            .big {
+                font-size: $font-size-28;
+            }
+        }
+    }
+    .floor-main-none{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        .none-image {
+            width: 220rpx;
+            height: 220rpx;
+        }
+        .none-text {
+            font-size: $font-size-28;
+            color: #999999;
+            line-height: 44rpx;
+        }
+    }
+}
+</style>

pages/goods/good-hot.vue

@@ -256,7 +256,7 @@
             }
         },
         computed: {
-            ...mapState(['hasLogin', 'userInfo', 'identity','clubType'])
+            ...mapState(['hasLogin', 'userInfo', 'identity', 'clubType'])
         },
         methods: {
             async initGetStotage() {
@@ -271,20 +271,20 @@
             },
             async getNewBrandNames() {
                 //新品商品品牌列表
-                try{
+                try {
                     const res = await this.CommonService.GetHomeNewBrandNames()
                     this.brandList = res.data
-                }catch(e){
-                      console.log('获取新品橱窗推荐模块信息异常')
+                } catch (e) {
+                    console.log('获取新品橱窗推荐模块信息异常')
                 }
             },
             async getRecommend() {
                 //新品橱窗顶部推荐
-                try{
+                try {
                     const res = await this.CommonService.GetHomeRecommend()
                     this.topGoodList = res.data
-                }catch(e){
-                     console.log('获取新品橱窗推荐模块信息异常')
+                } catch (e) {
+                    console.log('获取新品橱窗推荐模块信息异常')
                 }
             },
             async getNewFloorList() {
@@ -464,7 +464,7 @@
                 height: 80rpx;
                 line-height: 80rpx;
                 font-size: 38rpx;
-                color: #ffffff;
+                color: #666666;
                 font-weight: bold;
                 text-align: center;
                 position: relative;
@@ -473,7 +473,7 @@
                     position: fixed;
                     top: 0;
                     height: 80rpx;
-                    background: linear-gradient(90deg, #FF5B00 0%, #f28f31 100%);
+                    background: linear-gradient(90deg, #d3fd77 0%, #a4e8e4 100%);
                     z-index: 9999;
 
                 }

pages/goods/goods-shop-list.vue

@@ -1,113 +1,188 @@
-<template>
-	<view class="container clearfix" >
-		<tui-skeleton
-			v-if="skeletonShow"
-			backgroundColor="#fafafa"
-			borderRadius="10rpx"
-			:isLoading="true"
-			:loadingType="5"
-		/>
-		<template v-else>
-			<view class="shop-content clearfix">
-				<view class="shop-item" v-for="(item,index) in list" :key="index" @click="NavToDetailPage(item,index)">
-					<view class="icon">
-						<image class="icon-image" :src="item.image" mode="widthFix"></image>
-					</view>
-					<view class="name">{{ item.supplierName }}</view>
-				</view>
-			</view>
-		</template> 	
-	</view>
-</template> 
-
-<script>
-	import { mapState,mapMutations} from 'vuex'
-	export default{
-		data(){
-			return{ 
-				skeletonShow: true,
-				list:[]
-			} 
-		},
-		onLoad(option) {
-			
-		},
-		methods:{
-			async getHomeDataInfo() {
-				//初始化首页数据
-				try{
-                    const userInfo = await this.$api.getStorage()
-					const res = await this.CommonService.GetHomeDataInfo({ userId: userInfo.userId ? userInfo.userId : 0, source: 2 })
-					const data = res.data.supplierImage
-					this.list = data.qualitySupplierList || [] // 供应商列表
-					setTimeout(() => {
-						this.skeletonShow = false
-					}, 1000)
-				}catch(e){
-					//TODO handle the exception
-					this.$util.msg(error.msg, 2000)
-				}
-			},
-			// 链接跳转
-			NavToDetailPage(pros) {
-			   this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${pros.linkParam.id}`)
-			},
-		},
-		onShow() {
-			this.getHomeDataInfo()
-		}
-	}
-</script>
-
-<style lang="scss">
-	page{
-		background-color: #F7F7F7;
-	}
-	.shop-content{
-		width: 100%;
-		height: auto;
-		box-sizing: border-box;
-	    padding: 24rpx 24rpx;
-		.shop-item{
-			width: 220rpx;
-			height: 280rpx;
-			float: left;
-			margin-right: 21rpx;
-			margin-bottom: 21rpx;
-			background-color: #FFFFFF;
-			&:nth-child(3n) {
-			    margin-right: 0;
-			}
-			.icon{
-				width: 220rpx;
-				height: 220rpx;
-				margin: 0 auto;
-				position: relative;
-				.icon-image{
-					width: 220rpx;
-					height: 220rpx;
-					display: block;
-				}
-			}
-			.name{
-				width: 100%;
-				height: 60rpx;
-				line-height: 60rpx;
-				font-size: $font-size-24;
-				text-align: center;
-				color: #666666;
-				background-color: #f9f9f9;
-				float: left;
-				box-sizing: border-box;
-				padding: 0 20rpx;
-				white-space: normal;
-				word-break: break-all;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 1;
-			}
-		}
-	}
-</style>
+<template>
+    <view class="container clearfix">
+        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
+            :loadingType="5" />
+        <template v-else>
+            <view class="shop-content clearfix">
+                <view class="tui-supplier-item" v-for="(sup, supIndex) in list" :key="supIndex"
+                    @click.stop="NavToDetailPage(sup,index)">
+                    <view class="tui-shop-top">
+                        <view class="tui-top-logo">
+                            <image :src="sup.image" mode=""></image>
+                        </view>
+                        <view class="tui-top-name">
+                            <text>{{ sup.supplierName }}</text>
+                        </view>
+                    </view>
+                    <view class="tui-shop-mid">
+                        <view class="tui-mid-item" v-for="(pros, prIndex) in sup.products" :key="prIndex"
+                            @click.stop="navToDetailPage(pros)">
+                            <image :src="pros.mainImage" mode=""></image>
+                        </view>
+                    </view>
+                    <view class="tui-shop-bot">
+                        <view class="tui-bot-btn">
+                            进店<text class="iconfont icon-xiayibu"></text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script>
+    import { mapState, mapMutations } from 'vuex'
+    export default {
+        data() {
+            return {
+                skeletonShow: true,
+                list: []
+            }
+        },
+        onLoad(option) {
+
+        },
+        methods: {
+            async getHomeDataInfo() {
+                //初始化首页数据
+                try {
+                    const userInfo = await this.$api.getStorage()
+                    const res = await this.CommonService.GetHomeDataInfo({ userId: userInfo.userId ? userInfo
+                            .userId : 0, source: 2 })
+                    const data = res.data.supplierImage
+                    this.list = data || [] // 供应商列表
+                    setTimeout(() => {
+                        this.skeletonShow = false
+                    }, 1000)
+                } catch (e) {
+                    //TODO handle the exception
+                    this.$util.msg(error.msg, 2000)
+                }
+            },
+             //跳转商品详情
+            navToDetailPage(pros) {
+                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+            },
+            // 链接跳转
+            NavToDetailPage(pros) {
+                this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${pros.linkParam.id}`)
+            },
+        },
+        onShow() {
+            this.getHomeDataInfo()
+        }
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: #F7F7F7;
+    }
+
+    .shop-content {
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
+        padding: 24rpx 24rpx;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        .tui-supplier-item {
+            display: flex;
+            width: 339rpx;
+            height: 448rpx;
+            flex-direction: column;
+            align-items: center;
+            border-radius: 16rpx;
+            margin: 0 20rpx 20rpx 0;
+            box-sizing: border-box;
+            padding: 24rpx 0;
+            background-color: #FFFFFF;
+
+            &:nth-child(2n) {
+                margin-right: 0;
+            }
+
+            .tui-shop-top {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .tui-top-logo {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 219rpx;
+                    height: 96rpx;
+                    background-color: #ffffff;
+                    border-radius: 8rpx;
+
+                    image {
+                        width: 219rpx;
+                        height: 96rpx;
+                    }
+                }
+
+                .tui-top-name {
+                    justify-content: center;
+                    font-size: 30rpx;
+                    line-height: 80rpx;
+                    color: #1bc0de;
+                }
+            }
+
+            .tui-shop-mid {
+                width: 100%;
+                height: 95rpx;
+                display: flex; 
+                justify-content: flex-start;
+                align-items: center;
+                box-sizing: border-box;
+                margin: 20rpx 0;
+                padding: 0 10rpx;
+
+                .tui-mid-item {
+                    width: 95rpx;
+                    height: 95rpx;
+                    border-radius: 8rpx;
+                    overflow: hidden;
+                    margin: 0 5rpx;
+                    box-sizing: border-box;
+                    border: 1px solid #e1e1e1;
+
+                    image {
+                        width: 95rpx;
+                        height: 95rpx;
+                    }
+                }
+            }
+
+            .tui-shop-bot {
+                width: 100%;
+                height: 54rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: 20rpx;
+
+                .tui-bot-btn {
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 28rpx;
+                    line-height: 52rpx;
+                    color: #333333;
+                    padding: 0 30rpx;
+                    border: 1px solid #999999;
+                    border-radius: 30rpx;
+
+                    .iconfont {
+                        font-size: 24rpx;
+                    }
+                }
+            }
+        }
+    }
+</style>

pages/seller/components/home.vue

@@ -9,14 +9,16 @@
 			<!-- 金刚区菜单 -->
 			<navbars :list="shortcutList" v-if="isNavRequest" />
 			<!-- 直播 -->
-			<page-special :templateData="templateData" v-if="isLiveRequest" />
+			<!-- <page-special :templateData="templateData" v-if="isLiveRequest" /> -->
 			<!-- 新品橱窗 -->
 			<hot-floor :list="hotListPageFloor" :usserIdentity="userIdentity" v-if="isRequest" />
 		</view>	
 		<!-- 楼层 -->
-		<view class="container-section tui-skeleton" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
-			<page-floor :list="pageList" :userIdentity="userIdentity" :pageType='1' v-if="isRequest" />
-			<supplier-list :supplierObj="supplierObj" v-if="isRequest" />
+		<view class="container-section tui-skeleton" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
+			<!-- <page-floor :list="pageList" :userIdentity="userIdentity" :pageType='1' v-if="isRequest" /> -->
+            <zone-floor :list="pageList" :userIdentity="userIdentity" :pageType="1" v-if="isRequest" />
+            <supplier-list :supplierObj="supplierObj" v-if="isRequest" />
+            <recommend-floor :recommendProducts="recommendProducts" :userIdentity="userIdentity" v-if="isRequest" />
 		</view>
 		<!-- 活动弹窗 -->
 		<activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick" />
@@ -31,7 +33,9 @@
 	import banner from './homeIndex/banner.vue'
 	import navbars from './homeIndex/navbars.vue'
 	import hotFloor from './homeIndex/hotFloor.vue'
-	import pageFloor from './homeIndex/pageFloor.vue'
+	import pageFloor from './homeIndex/pageFloor.vue'
+    import zoneFloor from './homeIndex/zoneFloor.vue'
+    import recommendFloor from './homeIndex/recommendFloor.vue'
 	import pageSpecial from './homeIndex/pageSpecial.vue'
 	import supplierList from './homeIndex/supplierList.vue'
 	import { mapState,mapMutations} from 'vuex'
@@ -41,7 +45,9 @@
 			banner,
 			navbars,
 			hotFloor,
-			pageFloor,
+			pageFloor,
+            zoneFloor,
+            recommendFloor,
 			pageSpecial,
 			supplierList
 		},
@@ -73,7 +79,8 @@
 				templateData:{},
 				hotListPageFloor:[],					// 新品橱窗
 				pageList:[],//楼层
-				supplierObj:{},//供应商列表
+				supplierObj:{},//供应商列表
+                recommendProducts:[],//推荐商品
 				isScrollTop:false,
 				isRequest:false,
 				isNavRequest:false,
@@ -109,11 +116,11 @@
 			},
 			GetHomeFloorInfo(){//初始化首页楼层数据
 				this.CommonService.GetHomeDataInfo({userId:this.userID,source:2}).then(response =>{
-					let data = response.data
-					this.pageList = data.homePageFloor
-					this.hotListPageFloor =  data.pageFloorList
-					console.log('hotListPageFloor',this.hotListPageFloor)
-					this.supplierObj = data.supplierImage
+					let data = response.data
+					this.pageList = data.zones
+					this.hotListPageFloor = data.pageFloorList
+					this.supplierObj = data.supplierImage
+					this.recommendProducts = data.recommendProducts
 					this.isRequest = true
 				}).catch(error =>{
 					this.$util.msg(error.msg,2000)

pages/seller/components/homeIndex/hotFloor.vue

@@ -1,17 +1,11 @@
 <template>
 	<view>
-		<view class="section_hot clearfix" v-for="(page, index) in list" :key="index">
-			<view class="tui-group-name">
-				<view class="tui-group-title">
-					<view class="tui-group-l">{{ page.title }}</view>
-				</view>
-				<view class="tui-sub__desc">{{ page.detail }}</view>
-				<view
-					class="tui-group-r"
-					@click="NavtoHotPage"
-				>
-				</view>
-			</view>
+		<view class="section_hot clearfix" v-for="(page, index) in list" :key="index">
+            <view class="tui-group-title">
+                <view class="tui-group-name">{{ page.title }}</view>
+                <view class="tui-group-doc">{{ page.detail }}</view>
+                <view class="tui-group-r" @click="NavtoHotPage"></view>
+            </view>
 			<template>
 				<templateL :pageData="page" :userIdentity="userIdentity" :autoplay="autoplay"></templateL>
 			</template>
@@ -73,51 +67,52 @@ export default {
 <style lang="scss">
 .section_hot {
 	width: 100%;
-	height: 1290rpx;
-	background: url(https://static.caimei365.com/app/img/hot/hot-bg.png);
+	height: 1224rpx;
+	background: url(https://static.caimei365.com/app/img/hot/hot-bg@1x.png);
 	background-size: cover;
 	box-sizing: border-box;
 	padding: 0 24rpx;
 	float: left;
-	border-radius: 50rpx 50rpx 0 0;
-}
-.tui-group-name {
-	width: 100%;
-	height: 165rpx;
-	box-sizing: border-box;
-	padding: 40rpx 0 20rpx 0;
-	position: relative;
-	border-radius: 16rpx 16rpx 0 0;
-	.tui-group-r {
-		width: 144rpx;
-		height: 54rpx;
-		background: url(https://static.caimei365.com/app/img/hot/hot-bt@2x.png);
-		background-size: cover;
-		position: absolute;
-		right: 16rpx;
-		top: 69rpx;
-	}
-}
-.tui-group-title {
-	width: 100%;
-	height: 50rpx;
-	line-height: 50rpx;
-	float: left;
-	.tui-group-l {
-		float: left;
-		font-size: 38rpx;
-		font-weight: bold;
-		text-align: left;
-		color: #ffffff;
-	}
-}
-.tui-sub__desc {
-	width: 100%;
-	float: left;
-	line-height: 50rpx;
-	color: #ffffff;
-	font-size: $font-size-28;
+	border-radius: 16rpx 16rpx 0 0;
+    margin-top: 20rpx;
+}
+.tui-group-title {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100rpx;
+    box-sizing: border-box;
+    position: relative;
+
+    .tui-group-name {
+        font-size: $font-size-36;
+        font-weight: bold;
+        color: #333333;
+    }
+
+    .tui-group-doc {
+        height: 100rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 20rpx;
+        font-size: $font-size-24;
+        line-height: 100rpx;
+        color: #666666;
+    }
+
+    .tui-group-r {
+        width: 120rpx;
+        height: 45rpx;
+        background: url(https://static.caimei365.com/app/img/hot/hot-bt@2x.png);
+        background-size: cover;
+        position: absolute;
+        right: 16rpx;
+        top: 16px;
+    }
 }
+
 .section_page_main {
 	width: 100%;
 	height: auto;

pages/seller/components/homeIndex/recommendFloor.vue

@@ -0,0 +1,90 @@
+<template>
+	<view>
+		<view class="page-content clearfix">
+			<view class="tui-group-title">
+				<view class="tui-group-name">为您推荐</view>
+                <view class="tui-group-tabs">海量货源,实时推荐</view>
+			</view>
+            <templateR :list="recommendProducts" :userIdentity="userIdentity" />
+		</view>
+	</view>
+</template>
+
+<script>
+import templateR from './template-page/templateR.vue'
+export default {
+	name: 'recommendFloor',
+	components: {
+		templateR
+	},
+	props: {
+		recommendProducts: {
+			type: Array
+		},
+		pageType: {
+			type: Number
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+            
+		}
+	},
+	created() {},
+	watch: {
+		recommendProducts: {
+			handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.recommendProducts = el
+			},
+			deep: true
+		}
+	},
+	methods: {
+		NavToDetailPage(page) {
+			//跳转
+			this.$api.navigateTo(
+				`/pages/goods/good-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${
+					page.title
+				}`
+			)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.page-content {
+	background-color: #F7F7F7;
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 0 24rpx;
+}
+
+.tui-group-title {
+	width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100rpx;
+    box-sizing: border-box;
+    .tui-group-name {
+    	font-size: $font-size-36;
+        font-weight: bold;
+        color: #333333;
+    }
+    .tui-group-tabs{
+        height: 100rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 30rpx;
+        font-size: $font-size-24;
+        line-height: 100rpx;
+        color: #999999;
+    }
+}
+</style>

pages/seller/components/homeIndex/supplierList.vue

@@ -1,24 +1,45 @@
 <template>
     <view class="supplier-content clearfix">
-        <view class="tui-group-name">
-            <view class="tui-group-title">
-                <view class="tui-group-l">优质供应商</view>
-                <view class="tui-group-r" @click="handleMoreShop">
-                    <text>更多</text> <text class="iconfont icon-xiayibu"></text>
-                </view>
+        <view class="tui-group-title">
+            <view class="tui-group-name">优质供应商</view>
+            <view class="tui-group-tabs">采美正品联盟 质量保证</view>
+            <view class="tui-group-r" @click="handleMoreShop">
+                <text>更多</text> <text class="iconfont icon-xiayibu"></text>
             </view>
-            <view class="tui-sub__desc">采美正品联盟 质量保证</view>
-        </view>
-        <view class="supplier-banner">
-            <image :src="banner" mode=""
-                @click="BannerNavigateTo(supplierObj.linkType,supplierObj.linkParam.id,supplierObj.wwwLink,supplierObj.linkParam.keyword)">
-            </image>
         </view>
         <view class="swiper-goods-box">
-            <view class="goods-box-item" v-for="(item,index) in supplierList" :key="index"
-                @click="NavToDetailPage(item)">
-                <image :src="item.image" mode="" class="box-item-image"></image>
-                <view class="box-item-mask">{{ item.supplierName }}</view>
+            <swiper class="tui-shop-swiper" circular @change="swiperChange" :indicator-dots="false" :autoplay="true"
+                :interval="8000" :duration="500">
+                <swiper-item v-for="(supplier, index) in supplierList" :key="index">
+                    <view class="tui-supplier-list">
+                        <view class="tui-supplier-item" v-for="(sup, supIndex) in supplier" :key="supIndex"
+                            @click="NavToDetailPage(sup)">
+                            <view class="tui-shop-top">
+                                <view class="tui-top-logo">
+                                    <image :src="sup.image" mode=""></image>
+                                </view>
+                                <view class="tui-top-name">
+                                    <text>{{ sup.supplierName }}</text>
+                                </view>
+                            </view>
+                            <view class="tui-shop-mid">
+                                <view class="tui-mid-item" v-for="(pros, prIndex) in sup.products" :key="prIndex"  @click.stop="navToDetailPage(pros)">
+                                    <image :src="pros.mainImage" mode=""></image>
+                                </view>
+                            </view>
+                            <view class="tui-shop-bot">
+                                <view class="tui-bot-btn">
+                                    进店<text class="iconfont icon-xiayibu"></text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="swiper__dots-box">
+                <view v-for="(item, idx) in supplierList" :key="idx"
+                    :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
+                    class="swiper__dots-item"></view>
             </view>
         </view>
     </view>
@@ -26,15 +47,15 @@
 
 <script>
     export default {
-        name: "supplierList",
+        name: 'supplierList',
         props: {
             supplierObj: {
-                type: Object
+                type: Array
             }
         },
         data() {
             return {
-                banner: '',
+                current: 0,
                 supplierList: []
             }
         },
@@ -43,18 +64,41 @@
         },
         methods: {
             initData(data) {
-                this.banner = data.crmImage
-                this.supplierList = data.qualitySupplierList.slice(0, 12)
+                this.supplierList = this.handleCheckedList(data)
+                console.log('supplierList', this.supplierList)
             },
-            BannerNavigateTo(linkType, linkId, linkHref, keyword) { //跳转
-                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+            // 处理供应商列表
+            handleCheckedList(arr) {
+                if (!Array.isArray(arr)) return []
+                let newArr = [],
+                    a = []
+                let indexNum = 4
+                arr.map((item, index) => {
+                    if (index !== 0 && index % indexNum === 0) {
+                        newArr.push(a)
+                        a = []
+                        a.push(item)
+                    } else a.push(item)
+                    if (arr.length === (index + 1)) {
+                        newArr.push(a)
+                    }
+                })
+                return newArr
             },
-            NavToDetailPage(item) { //跳转
+            //跳转店铺
+            NavToDetailPage(item) { 
                 this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${item.linkParam.id}`)
             },
+            //跳转商品详情
+            navToDetailPage(pros) {
+                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+            },
             handleMoreShop() {
-            	this.$api.navigateTo('/pages/goods/goods-shop-list')
+                this.$api.navigateTo('/pages/goods/goods-shop-list')
             },
+            swiperChange(e) { //切换
+                this.current = e.detail.current
+            }
         }
     }
 </script>
@@ -68,100 +112,187 @@
         padding: 0 24rpx;
     }
 
-    .tui-group-name {
+    .tui-group-title {
         width: 100%;
-        height: 92rpx;
-        padding: 20rpx 0;
-    }
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 100rpx;
+        box-sizing: border-box;
+        position: relative;
 
-    .tui-group-title {
-    	width: 100%;
-    	float: left;
-    	.tui-group-l {
-    		float: left;
-    		font-size: 34rpx;
-    		font-weight: bold;
-    		text-align: left;
-    		line-height: 49rpx;
-    		color: #333;
-    	}
-    	.tui-group-r {
-    		float: right;
-    		font-size: $font-size-24;
-    		text-align: right;
-    		line-height: 49rpx;
-    		color: #999999;
-    		.icon-xiayibu {
-    			font-size: $font-size-30;
-    			color: #999999;
-    		}
-    	}
-    }
+        .tui-group-name {
+            font-size: $font-size-36;
+            font-weight: bold;
+            color: #333333;
+        }
 
-    .tui-sub__desc {
-        width: 100%;
-        float: left;
-        color: rgba(153, 153, 153, 0.9);
-        font-size: $font-size-26;
-    }
+        .tui-group-tabs {
+            height: 100rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-left: 20rpx;
+            font-size: $font-size-24;
+            line-height: 100rpx;
+            color: #999999;
+        }
 
-    .supplier-banner {
-        width: 100%;
-        height: 240rpx;
-        float: left;
-        margin-top: 24rpx;
-        border-radius: 16rpx;
-        overflow: hidden;
-        image {
-            width: 100%;
-            height: 240rpx;
-            display: block;
+        .tui-group-r {
+            width: 100rpx;
+            height: 100rpx;
+            line-height: 100rpx;
+            font-size: $font-size-24;
+            color: #999999;
+            text-align: right;
+            position: absolute;
+            right: 0;
+            top: 0;
         }
     }
 
     .swiper-goods-box {
         width: 100%;
-        height: auto;
-        float: left;
-        margin-top: 24rpx;
-
-        .goods-box-item {
-            width: 160rpx;
-            height: 200rpx;
-            float: left;
-            margin-right: 20rpx;
-            margin-bottom: 20rpx;
-            background-color: #FFFFFF;
-
-            &:nth-child(4n) {
-                margin-right: 0;
+        height: 960rpx;
+        position: relative;
+
+        .swiper__dots-box {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            /* #ifndef APP-NVUE */
+            display: flex;
+            /* #endif */
+            flex: 1;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+
+            .swiper__dots-item {
+                width: 10rpx;
+                height: 10rpx;
+                border-radius: 100%;
+                margin-left: 6px;
+                background-color: #FFFFFF;
             }
 
-            .box-item-image {
-                width: 160rpx;
-                height: 160rpx;
-                display: block;
-                float: left;
+            .swiper__dots-long {
+                width: 35rpx;
+                height: 10rpx;
+                border-radius: 6rpx;
+                background-color: #FF5B00;
+                transition: all 0.4s;
             }
+        }
 
-            .box-item-mask {
-                width: 100%;
-                height: 40rpx;
-                line-height: 40rpx;
-                font-size: $font-size-20;
-                text-align: center;
-                color: #666666;
-                background-color: #f9f9f9;
-                float: left;
+        .tui-shop-swiper {
+            width: 100%;
+            height: 920rpx;
+        }
+
+        .tui-supplier-list {
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+
+            .tui-supplier-item {
+                display: flex;
+                width: 339rpx;
+                height: 448rpx;
+                flex-direction: column;
+                align-items: center;
+                border-radius: 16rpx;
+                margin: 0 20rpx 20rpx 0;
                 box-sizing: border-box;
-                padding: 0 20rpx;
-                white-space: normal;
-                word-break: break-all;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 1;
+                padding: 24rpx 0;
+                background-color: #FFFFFF;
+
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+
+                .tui-shop-top {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+
+                    .tui-top-logo {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 219rpx;
+                        height: 96rpx;
+                        background-color: #ffffff;
+                        border-radius: 8rpx;
+
+                        image {
+                            width: 219rpx;
+                            height: 96rpx;
+                        }
+                    }
+
+                    .tui-top-name {
+                        justify-content: center;
+                        font-size: 30rpx;
+                        line-height: 80rpx;
+                        color: #1bc0de;
+                    }
+                }
+
+                .tui-shop-mid {
+                    width: 100%;
+                    height: 95rpx;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    box-sizing: border-box;
+                    margin: 20rpx 0;
+                    padding: 0 10rpx;
+
+                    .tui-mid-item {
+                        width: 95rpx;
+                        height: 95rpx;
+                        border-radius: 8rpx;
+                        overflow: hidden;
+                        margin: 0 5rpx;
+                        box-sizing: border-box;
+                        border: 1px solid #e1e1e1;
+
+                        image {
+                            width: 95rpx;
+                            height: 95rpx;
+                        }
+                    }
+                }
+
+                .tui-shop-bot {
+                    width: 100%;
+                    height: 54rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-top: 20rpx;
+
+                    .tui-bot-btn {
+                        justify-content: center;
+                        align-items: center;
+                        font-size: 28rpx;
+                        line-height: 52rpx;
+                        color: #333333;
+                        padding: 0 30rpx;
+                        border: 1px solid #999999;
+                        border-radius: 30rpx;
+
+                        .iconfont {
+                            font-size: 24rpx;
+                        }
+                    }
+                }
             }
         }
     }

pages/seller/components/homeIndex/template-page/templateR.vue

@@ -0,0 +1,321 @@
+<template>
+    <view class="section_page_main clearfix">
+        <view class="floor-item-main">
+            <view class="floor-item clearfix" v-for="(pros, idx) in list" :key="idx"
+                @click.stop="navToDetailPage(pros)">
+                <image class="item-img tui-skeleton-fillet" :src="pros.image" mode="aspectFill"></image>
+                <template-Type :product="pros"></template-Type>
+                <view class="floor-item-content">
+                    <view class="title tui-skeleton-rect">
+                        <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''">{{ pros.name }}
+                        </text>
+                    </view>
+                    <view class="floor-item-price">
+                        <template>
+                            <template-Tags :product="pros"></template-Tags>
+                        </template>
+                        <view v-if="hasLogin">
+                            <template v-if="pros.productCategory == 1">
+                                <template-Price :product="pros"></template-Price>
+                            </template>
+                            <template v-else>
+                                <view class="price tui-skeleton-rect" v-if="pros.detailTalkFlag == '2'">
+                                    <text class="p sm">￥</text> <text class="p big">价格详聊</text>
+                                </view>
+                                <view class="price tui-skeleton-rect" v-else>
+                                    <text class="p sm">￥</text>
+                                    <text class="p big">{{ pros.price | NumFormat }}</text>
+                                </view>
+                            </template>
+                        </view>
+                        <view v-else class="no-price">
+                            <template v-if="pros.productCategory == 1">
+                                <view class="p-stars">
+                                    <text class="p-no">￥</text>
+                                    <uni-grader :grade="Number(pros.priceGrade)" :margin="14"></uni-grader>
+                                </view>
+                            </template>
+                            <template v-else>
+                                <view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
+                            </template>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { mapState, mapMutations } from 'vuex'
+    import uniGrader from '@/components/uni-grade/uni-grade.vue'
+    import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
+    import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
+    import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
+    export default {
+        name: 'templateR',
+        components: {
+            uniGrader,
+            templateTags,
+            templatePrice,
+            templateType
+        },
+        props: {
+            list: {
+                type: Array
+            },
+            userIdentity: {
+                type: Number
+            }
+        },
+        data() {
+            return {
+                current:0,
+                listData:[]
+            }
+        },
+        filters: {
+            NumFormat(text) {
+                //处理金额
+                return Number(text).toFixed(2)
+            }
+        },
+        computed: {
+            ...mapState(['hasLogin', 'userInfo', 'isActivity'])
+        },
+        created() {
+            this.initData(this.list)
+        },
+        watch: {
+            list: {
+                handler(el) {
+                    //监听对象的变换使用 function，箭头函数容易出现this指向不正确
+                    this.list = el
+                },
+                deep: true
+            }
+        },
+        methods: {
+            initData(data){
+                this.listData = data
+                console.log('initData',this.listData)
+            },
+            navToDetailPage(pros) {
+                //跳转商品详情
+                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+            },
+            BannerNavigateTo(linkType, linkId, linkHref, keyword) {
+                //跳转
+                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .section_page_main {
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
+        .tui-floor-item{
+            width: 100%;
+            height: 240rpx;
+            border-radius: 16rpx;
+            box-sizing: border-box;
+            padding: 0;
+            position: relative;
+            margin-bottom: 24rpx;
+            .swiper__dots-box{
+            	position: absolute;
+            	bottom: 30rpx;
+            	left: 0;
+            	right: 0;
+            	/* #ifndef APP-NVUE */
+            	display: flex;
+            	/* #endif */
+            	flex: 1;
+            	flex-direction: row;
+            	justify-content: center;
+            	align-items: center;
+            	.swiper__dots-item{
+            		width: 8rpx;
+            		height: 8rpx;
+            		border-radius: 100%;
+            		margin-left: 6px;
+            		background-color:rgba(255,255,255,.7);
+            	}
+            	.swiper__dots-long{
+            		width: 35rpx;
+            		height: 8rpx;
+            		border-radius: 4rpx;
+            		background-color: #ffff;
+            		transition: all 0.4s;
+            	}
+            }
+            .tui-floor-swiper{
+                width: 100%;
+                height: 240rpx;
+                text-align: center;
+                line-height: 240rpx;
+                float: left;
+                border-radius: 16rpx;
+                overflow: hidden;
+                .floor-image{
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                }
+            }
+        }
+        .floor-item-main{
+            width: 100%;
+            height: auto;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            align-items: center;
+            .floor-item {
+                width: 339rpx;
+                height: 524rpx;
+                font-size: $font-size-24;
+                color: $text-color;
+                background: #ffffff;
+                line-height: 36rpx;
+                border-radius: 16rpx;
+                box-sizing: border-box;
+                position: relative;
+                margin-right: 20rpx;
+                margin-bottom: 20rpx;
+                &:nth-child(2n){
+                    margin-right: 0;
+                }
+                .item-img {
+                    width: 339rpx;
+                    height: 339rpx;
+                    border-radius: 16rpx 16rpx 0 0;
+                    display: block;
+                    margin-bottom: 8rpx;
+                }
+            
+                .floor-item_tag {
+                    width: 100%;
+                    height: 32rpx;
+                    float: left;
+                    margin: 20rpx 0;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+            
+                    text {
+                        display: inline-block;
+                        padding: 0 8rpx;
+                        border: 1px solid #e3ebf7;
+                        border-radius: 8rpx;
+                        color: #9aa5b5;
+                        font-size: $font-size-22;
+                        line-height: 32rpx;
+                        text-align: center;
+                        float: left;
+                    }
+                }
+            
+                .floor-item-content {
+                    width: 100%;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+                }
+            
+                .floor-item-act {
+                    display: block;
+                    width: 100%;
+                    height: 32rpx;
+                    text-align: center;
+                    box-sizing: border-box;
+                }
+            
+                .title-none {
+                    font-size: $font-size-26;
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+                }
+            
+                .title {
+                    width: 100%;
+                    height: 70rpx;
+                    display: flex;
+                    line-height: 35rpx;
+                    flex-direction: column;
+                    margin: 8rpx 0;
+                    padding: 0;
+                    position: relative;
+            
+                    .mclap {
+                        width: 100%;
+                        line-height: 35rpx;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        word-break: break-all;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        font-size: 26rpx;
+            
+                        &.indent {
+                            text-indent: 95rpx;
+                        }
+                    }
+            
+                    .mclap-tag {
+                        display: block;
+                        width: 84rpx;
+                        height: 32rpx;
+                        background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+                        border-radius: 4rpx 48rpx 4px 4px;
+                        line-height: 32rpx;
+                        font-size: $font-size-22;
+                        color: #ffffff;
+                        text-align: center;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
+                }
+            
+                .no-price {
+                    height: 54rpx;
+                    line-height: 54rpx;
+                    display: flex;
+                    box-sizing: border-box;
+            
+                    .p-no {
+                        font-size: $font-size-28;
+                        color: $text-color;
+                        display: block;
+                        float: left;
+                    }
+            
+                    .p-stars {
+                        float: left;
+                    }
+                }
+            
+                .price {
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+            
+                    &.none {
+                        text-decoration: line-through;
+                        color: #999999;
+                    }
+            
+                    .sm {
+                        font-size: $font-size-24;
+                    }
+            
+                    .big {
+                        font-size: $font-size-28;
+                    }
+                }
+            }
+        }
+    }
+</style>

pages/seller/components/homeIndex/template-page/templateZ.vue

@@ -0,0 +1,343 @@
+<template>
+    <view class="section_page_main clearfix">
+        <view class="tui-floor-item" v-if="floorData.imageList.length>0">
+            <swiper class="tui-floor-swiper" circular @change="swiperChange" :indicator-dots="false" :autoplay="true"
+                :interval="5000" :duration="500">
+                <swiper-item v-for="(item, index) in floorData.imageList" :key="item">
+                    <view class="tui-floor-swiper" @click="BannerNavigateTo(
+                            item.linkType,
+                            item.linkParam.id ? item.linkParam.id : '',
+                            item.linkParam.crmLink,
+                            item.linkParam.keyword ? item.linkParam.keyword : '')">
+                        <image class="floor-image" :src="item.crmImage" mode=""></image>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="swiper__dots-box">
+                <view v-for="(item, idx) in floorData.imageList" :key="idx"
+                    :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
+                    class="swiper__dots-item"></view>
+            </view>
+        </view>
+        <view class="floor-item-main">
+            <view class="floor-item clearfix" v-for="(pros, idx) in floorData.products" :key="idx"
+                @click.stop="navToDetailPage(pros)">
+                <image class="item-img tui-skeleton-fillet" :src="pros.mainImage" mode="aspectFill"></image>
+                <template-Type :product="pros"></template-Type>
+                <view class="floor-item-content">
+                    <view class="title tui-skeleton-rect">
+                        <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''">{{ pros.name }}
+                        </text>
+                    </view>
+                    <view class="floor-item-price">
+                        <template>
+                            <template-Tags :product="pros"></template-Tags>
+                        </template>
+                        <view v-if="hasLogin">
+                            <template v-if="pros.productCategory == 1">
+                                <template-Price :product="pros"></template-Price>
+                            </template>
+                            <template v-else>
+                                <view class="price tui-skeleton-rect" v-if="pros.detailTalkFlag == '2'">
+                                    <text class="p sm">￥</text> <text class="p big">价格详聊</text>
+                                </view>
+                                <view class="price tui-skeleton-rect" v-else>
+                                    <text class="p sm">￥</text>
+                                    <text class="p big">{{ pros.price | NumFormat }}</text>
+                                </view>
+                            </template>
+                        </view>
+                        <view v-else class="no-price">
+                            <template v-if="pros.productCategory == 1">
+                                <view class="p-stars">
+                                    <text class="p-no">￥</text>
+                                    <uni-grader :grade="Number(pros.priceGrade)" :margin="14"></uni-grader>
+                                </view>
+                            </template>
+                            <template v-else>
+                                <view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
+                            </template>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { mapState, mapMutations } from 'vuex'
+    import uniGrader from '@/components/uni-grade/uni-grade.vue'
+    import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
+    import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
+    import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
+    export default {
+        name: 'templateZ',
+        components: {
+            uniGrader,
+            templateTags,
+            templatePrice,
+            templateType
+        },
+        props: {
+            pageData: {
+                type: Object
+            },
+            userIdentity: {
+                type: Number
+            }
+        },
+        data() {
+            return {
+                current:0,
+                floorData: {}
+            }
+        },
+        filters: {
+            NumFormat: function(text) {
+                //处理金额
+                return Number(text).toFixed(2)
+            }
+        },
+        computed: {
+            ...mapState(['hasLogin', 'userInfo', 'isActivity'])
+        },
+        created() {
+            this.initData(this.pageData)
+        },
+        watch: {
+            pageData: {
+                handler: function(el) {
+                    //监听对象的变换使用 function，箭头函数容易出现this指向不正确
+                    this.pageData = el
+                    this.initData(this.pageData)
+                },
+                deep: true
+            }
+        },
+        methods: {
+            initData(data) {
+                this.floorData = data
+            },
+            navToDetailPage(pros) {
+                //跳转商品详情
+                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+            },
+            BannerNavigateTo(linkType, linkId, linkHref, keyword) {
+                //跳转
+                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+            },
+            swiperChange(e) {//轮播图切换
+            	this.current = e.detail.current
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .section_page_main {
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
+        .tui-floor-item{
+            width: 100%;
+            height: 240rpx;
+            border-radius: 16rpx;
+            box-sizing: border-box;
+            padding: 0;
+            position: relative;
+            margin-bottom: 24rpx;
+            .swiper__dots-box{
+            	position: absolute;
+            	bottom: 30rpx;
+            	left: 0;
+            	right: 0;
+            	/* #ifndef APP-NVUE */
+            	display: flex;
+            	/* #endif */
+            	flex: 1;
+            	flex-direction: row;
+            	justify-content: center;
+            	align-items: center;
+            	.swiper__dots-item{
+            		width: 8rpx;
+            		height: 8rpx;
+            		border-radius: 100%;
+            		margin-left: 6px;
+            		background-color:rgba(255,255,255,.7);
+            	}
+            	.swiper__dots-long{
+            		width: 35rpx;
+            		height: 8rpx;
+            		border-radius: 4rpx;
+            		background-color: #ffff;
+            		transition: all 0.4s;
+            	}
+            }
+            .tui-floor-swiper{
+                width: 100%;
+                height: 240rpx;
+                text-align: center;
+                line-height: 240rpx;
+                float: left;
+                border-radius: 16rpx;
+                overflow: hidden;
+                .floor-image{
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                }
+            }
+        }
+        .floor-item-main{
+            width: 100%;
+            height: auto;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            align-items: center;
+            .floor-item {
+                width: 339rpx;
+                height: 524rpx;
+                font-size: $font-size-24;
+                color: $text-color;
+                background: #ffffff;
+                line-height: 36rpx;
+                border-radius: 16rpx;
+                box-sizing: border-box;
+                position: relative;
+                margin-right: 20rpx;
+                margin-bottom: 20rpx;
+                &:nth-child(2n){
+                    margin-right: 0;
+                }
+                .item-img {
+                    width: 339rpx;
+                    height: 339rpx;
+                    border-radius: 16rpx 16rpx 0 0;
+                    display: block;
+                    margin-bottom: 8rpx;
+                }
+            
+                .floor-item_tag {
+                    width: 100%;
+                    height: 32rpx;
+                    float: left;
+                    margin: 20rpx 0;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+            
+                    text {
+                        display: inline-block;
+                        padding: 0 8rpx;
+                        border: 1px solid #e3ebf7;
+                        border-radius: 8rpx;
+                        color: #9aa5b5;
+                        font-size: $font-size-22;
+                        line-height: 32rpx;
+                        text-align: center;
+                        float: left;
+                    }
+                }
+            
+                .floor-item-content {
+                    width: 100%;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+                }
+            
+                .floor-item-act {
+                    display: block;
+                    width: 100%;
+                    height: 32rpx;
+                    text-align: center;
+                    box-sizing: border-box;
+                }
+            
+                .title-none {
+                    font-size: $font-size-26;
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+                }
+            
+                .title {
+                    width: 100%;
+                    height: 70rpx;
+                    display: flex;
+                    line-height: 35rpx;
+                    flex-direction: column;
+                    margin: 8rpx 0;
+                    padding: 0;
+                    position: relative;
+            
+                    .mclap {
+                        width: 100%;
+                        line-height: 35rpx;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        word-break: break-all;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        font-size: 26rpx;
+            
+                        &.indent {
+                            text-indent: 95rpx;
+                        }
+                    }
+            
+                    .mclap-tag {
+                        display: block;
+                        width: 84rpx;
+                        height: 32rpx;
+                        background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+                        border-radius: 4rpx 48rpx 4px 4px;
+                        line-height: 32rpx;
+                        font-size: $font-size-22;
+                        color: #ffffff;
+                        text-align: center;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
+                }
+            
+                .no-price {
+                    height: 54rpx;
+                    line-height: 54rpx;
+                    display: flex;
+                    box-sizing: border-box;
+            
+                    .p-no {
+                        font-size: $font-size-28;
+                        color: $text-color;
+                        display: block;
+                        float: left;
+                    }
+            
+                    .p-stars {
+                        float: left;
+                    }
+                }
+            
+                .price {
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+            
+                    &.none {
+                        text-decoration: line-through;
+                        color: #999999;
+                    }
+            
+                    .sm {
+                        font-size: $font-size-24;
+                    }
+            
+                    .big {
+                        font-size: $font-size-28;
+                    }
+                }
+            }
+        }
+    }
+</style>

pages/seller/components/homeIndex/zoneFloor.vue

@@ -0,0 +1,116 @@
+<template>
+	<view>
+		<view class="page-content clearfix" v-for="(page, index) in list" :key="index">
+			<view class="tui-group-title">
+				<view class="tui-group-name">{{ page.floorTitle }}</view>
+                <view class="tui-group-tabs">
+                    <view class="tui-group-tabs-left">
+                        <view class="tui-tabs-item" @click="handleNavTo(page,1)">产品</view>
+                        <view class="tui-tabs-item" @click="handleNavTo(page,2)">仪器</view>
+                        <view class="tui-tabs-item" @click="handleNavTo(page,3)">耗材配件</view>
+                    </view>
+                    <view class="tui-group-tabs-right" @click="handleNavTo(page,0)">
+                       <text>更多</text> 
+                       <text class="iconfont icon-xiayibu"></text>
+                    </view>
+                </view>
+			</view>
+            <templateZ :pageData="page" :userIdentity="userIdentity"></templateZ>
+		</view>
+	</view>
+</template>
+
+<script>
+import templateZ from './template-page/templateZ.vue'
+export default {
+	name: 'zoneFloor',
+	components: {
+		templateZ
+	},
+	props: {
+		list: {
+			type: Array
+		},
+		pageType: {
+			type: Number
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			pageFloorList: []
+		}
+	},
+	created() {
+		
+	},
+	watch: {
+		list: {
+			handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.list = el
+			},
+			deep: true
+		}
+	},
+	methods: {
+		handleNavTo(page,typeSort) {
+			//跳转
+			this.$api.navigateTo(`/pages/goods/good-floor-zone?zoneId=${page.id}&typeSort=${typeSort}&floorTitle=${page.floorTitle}`)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.page-content {
+	background-color: #F7F7F7;
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 0 24rpx;
+}
+
+.tui-group-title {
+	width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100rpx;
+    box-sizing: border-box;
+    .tui-group-name {
+    	font-size: $font-size-36;
+        font-weight: bold;
+        color: #333333;
+    }
+    .tui-group-tabs{
+        height: 100rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .tui-group-tabs-left{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-right: 20rpx;
+            .tui-tabs-item{
+                display: flex;
+                font-size: $font-size-28;
+                line-height: 100rpx;
+                color: #333;
+                margin: 0 15rpx;
+            }
+        }
+        .tui-group-tabs-right{
+            font-size: $font-size-24;
+            line-height: 100rpx;
+            color: #999999;
+            .icon-xiayibu {
+            	font-size: $font-size-30;
+            	color: #999999;
+            }
+        }
+    }
+}
+</style>

pages/seller/components/user.vue

@@ -13,7 +13,7 @@
                         <image src="https://static.caimei365.com/app/img/icon/default-head-new.png" mode=""></image>
                         <view class="user-tips">服务商</view>
                     </view>
-                   <view class="user-h1">{{ name }}</view>
+                   <view class="user-h1">【{{ name }}】</view>
                 </view>
                 <!-- 订单 -->
                 <view class="user-order">
@@ -140,7 +140,7 @@
                 },
                 CustomBar: this.CustomBar, // 顶部导航栏高度
                 StatusBar: this.StatusBar,
-                bgImgUrl: 'https://static.caimei365.com/app/img/bg/new_home_cumres@2x.png',
+                bgImgUrl: 'https://static.caimei365.com/app/img/bg/seller_cumres@2x.png',
                 name: '',
                 headpic: '',
                 userId: '',
@@ -346,8 +346,8 @@
             }
         }
         .user-h1 {
-            font-size: $font-size-30;
-            color: #ffffff;
+            font-size: $font-size-32;
+            color: #333333;
             text-align: center;
             -o-text-overflow: ellipsis;
             text-overflow: ellipsis;

pages/tabBar/home/components/hotFloor.vue

@@ -1,17 +1,11 @@
 <template>
 	<view>
-		<view class="section_hot clearfix" v-for="(page, index) in list" :key="index">
-			<view class="tui-group-name">
-				<view class="tui-group-title">
-					<view class="tui-group-l">{{ page.title }}</view>
-				</view>
-				<view class="tui-sub__desc">{{ page.detail }}</view>
-				<view
-					class="tui-group-r"
-					@click="NavtoHotPage"
-				>
-				</view>
-			</view>
+		<view class="section_hot clearfix" v-for="(page, index) in list" :key="index">
+            <view class="tui-group-title">
+                <view class="tui-group-name">{{ page.title }}</view>
+                <view class="tui-group-doc">{{ page.detail }}</view>
+                <view class="tui-group-r" @click="NavtoHotPage"></view>
+            </view>
 			<template>
 				<templateL :pageData="page" :userIdentity="userIdentity" :autoplay="autoplay"></templateL>
 			</template>
@@ -73,51 +67,52 @@ export default {
 <style lang="scss">
 .section_hot {
 	width: 100%;
-	height: 1290rpx;
-	background: url(https://static.caimei365.com/app/img/hot/hot-bg.png);
+	height: 1224rpx;
+	background: url(https://static.caimei365.com/app/img/hot/hot-bg@1x.png);
 	background-size: cover;
 	box-sizing: border-box;
 	padding: 0 24rpx;
 	float: left;
-	border-radius: 50rpx 50rpx 0 0;
-}
-.tui-group-name {
-	width: 100%;
-	height: 165rpx;
-	box-sizing: border-box;
-	padding: 40rpx 0 20rpx 0;
-	position: relative;
-	border-radius: 16rpx 16rpx 0 0;
-	.tui-group-r {
-		width: 144rpx;
-		height: 54rpx;
-		background: url(https://static.caimei365.com/app/img/hot/hot-bt@2x.png);
-		background-size: cover;
-		position: absolute;
-		right: 16rpx;
-		top: 69rpx;
-	}
-}
-.tui-group-title {
-	width: 100%;
-	height: 50rpx;
-	line-height: 50rpx;
-	float: left;
-	.tui-group-l {
-		float: left;
-		font-size: 38rpx;
-		font-weight: bold;
-		text-align: left;
-		color: #ffffff;
-	}
-}
-.tui-sub__desc {
-	width: 100%;
-	float: left;
-	line-height: 50rpx;
-	color: #ffffff;
-	font-size: $font-size-28;
+	border-radius: 16rpx 16rpx 0 0;
+    margin-top: 20rpx;
+}
+.tui-group-title {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100rpx;
+    box-sizing: border-box;
+    position: relative;
+
+    .tui-group-name {
+        font-size: $font-size-36;
+        font-weight: bold;
+        color: #333333;
+    }
+
+    .tui-group-doc {
+        height: 100rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 20rpx;
+        font-size: $font-size-24;
+        line-height: 100rpx;
+        color: #666666;
+    }
+
+    .tui-group-r {
+        width: 120rpx;
+        height: 45rpx;
+        background: url(https://static.caimei365.com/app/img/hot/hot-bt@2x.png);
+        background-size: cover;
+        position: absolute;
+        right: 16rpx;
+        top: 16px;
+    }
 }
+
 .section_page_main {
 	width: 100%;
 	height: auto;

pages/tabBar/home/components/recommendFloor.vue

@@ -0,0 +1,90 @@
+<template>
+	<view>
+		<view class="page-content clearfix">
+			<view class="tui-group-title">
+				<view class="tui-group-name">为您推荐</view>
+                <view class="tui-group-tabs">海量货源,实时推荐</view>
+			</view>
+            <templateR :list="recommendProducts" :userIdentity="userIdentity" />
+		</view>
+	</view>
+</template>
+
+<script>
+import templateR from './template-page/templateR.vue'
+export default {
+	name: 'recommendFloor',
+	components: {
+		templateR
+	},
+	props: {
+		recommendProducts: {
+			type: Array
+		},
+		pageType: {
+			type: Number
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+            
+		}
+	},
+	created() {},
+	watch: {
+		recommendProducts: {
+			handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.recommendProducts = el
+			},
+			deep: true
+		}
+	},
+	methods: {
+		NavToDetailPage(page) {
+			//跳转
+			this.$api.navigateTo(
+				`/pages/goods/good-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${
+					page.title
+				}`
+			)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.page-content {
+	background-color: #F7F7F7;
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 0 24rpx;
+}
+
+.tui-group-title {
+	width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100rpx;
+    box-sizing: border-box;
+    .tui-group-name {
+    	font-size: $font-size-36;
+        font-weight: bold;
+        color: #333333;
+    }
+    .tui-group-tabs{
+        height: 100rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-left: 20rpx;
+        font-size: $font-size-24;
+        line-height: 100rpx;
+        color: #999999;
+    }
+}
+</style>

pages/tabBar/home/components/supplierList.vue

@@ -1,24 +1,45 @@
 <template>
     <view class="supplier-content clearfix">
-        <view class="tui-group-name">
-            <view class="tui-group-title">
-                <view class="tui-group-l">优质供应商</view>
-                <view class="tui-group-r" @click="handleMoreShop">
-                    <text>更多</text> <text class="iconfont icon-xiayibu"></text>
-                </view>
+        <view class="tui-group-title">
+            <view class="tui-group-name">优质供应商</view>
+            <view class="tui-group-tabs">采美正品联盟 质量保证</view>
+            <view class="tui-group-r" @click="handleMoreShop">
+                <text>更多</text> <text class="iconfont icon-xiayibu"></text>
             </view>
-            <view class="tui-sub__desc">采美正品联盟 质量保证</view>
-        </view>
-        <view class="supplier-banner">
-            <image :src="banner" mode=""
-                @click="BannerNavigateTo(supplierObj.linkType,supplierObj.linkParam.id,supplierObj.wwwLink,supplierObj.linkParam.keyword)">
-            </image>
         </view>
         <view class="swiper-goods-box">
-            <view class="goods-box-item" v-for="(item,index) in supplierList" :key="index"
-                @click="NavToDetailPage(item)">
-                <image :src="item.image" mode="" class="box-item-image"></image>
-                <view class="box-item-mask">{{ item.supplierName }}</view>
+            <swiper class="tui-shop-swiper" circular @change="swiperChange" :indicator-dots="false" :autoplay="true"
+                :interval="8000" :duration="500">
+                <swiper-item v-for="(supplier, index) in supplierList" :key="index">
+                    <view class="tui-supplier-list">
+                        <view class="tui-supplier-item" v-for="(sup, supIndex) in supplier" :key="supIndex"
+                            @click="NavToDetailPage(sup)">
+                            <view class="tui-shop-top">
+                                <view class="tui-top-logo">
+                                    <image :src="sup.image" mode=""></image>
+                                </view>
+                                <view class="tui-top-name">
+                                    <text>{{ sup.supplierName }}</text>
+                                </view>
+                            </view>
+                            <view class="tui-shop-mid">
+                                <view class="tui-mid-item" v-for="(pros, prIndex) in sup.products" :key="prIndex"  @click.stop="navToDetailPage(pros)">
+                                    <image :src="pros.mainImage" mode=""></image>
+                                </view>
+                            </view>
+                            <view class="tui-shop-bot">
+                                <view class="tui-bot-btn">
+                                    进店<text class="iconfont icon-xiayibu"></text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="swiper__dots-box">
+                <view v-for="(item, idx) in supplierList" :key="idx"
+                    :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
+                    class="swiper__dots-item"></view>
             </view>
         </view>
     </view>
@@ -26,15 +47,15 @@
 
 <script>
     export default {
-        name: "supplierList",
+        name: 'supplierList',
         props: {
             supplierObj: {
-                type: Object
+                type: Array
             }
         },
         data() {
             return {
-                banner: '',
+                current: 0,
                 supplierList: []
             }
         },
@@ -43,18 +64,41 @@
         },
         methods: {
             initData(data) {
-                this.banner = data.crmImage
-                this.supplierList = data.qualitySupplierList.slice(0, 12)
+                this.supplierList = this.handleCheckedList(data)
+                console.log('supplierList', this.supplierList)
             },
-            BannerNavigateTo(linkType, linkId, linkHref, keyword) { //跳转
-                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+            // 处理供应商列表
+            handleCheckedList(arr) {
+                if (!Array.isArray(arr)) return []
+                let newArr = [],
+                    a = []
+                let indexNum = 4
+                arr.map((item, index) => {
+                    if (index !== 0 && index % indexNum === 0) {
+                        newArr.push(a)
+                        a = []
+                        a.push(item)
+                    } else a.push(item)
+                    if (arr.length === (index + 1)) {
+                        newArr.push(a)
+                    }
+                })
+                return newArr
             },
-            NavToDetailPage(item) { //跳转
+            //跳转店铺
+            NavToDetailPage(item) { 
                 this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${item.linkParam.id}`)
             },
+            //跳转商品详情
+            navToDetailPage(pros) {
+                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+            },
             handleMoreShop() {
-            	this.$api.navigateTo('/pages/goods/goods-shop-list')
+                this.$api.navigateTo('/pages/goods/goods-shop-list')
             },
+            swiperChange(e) { //切换
+                this.current = e.detail.current
+            }
         }
     }
 </script>
@@ -68,100 +112,187 @@
         padding: 0 24rpx;
     }
 
-    .tui-group-name {
+    .tui-group-title {
         width: 100%;
-        height: 92rpx;
-        padding: 20rpx 0;
-    }
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 100rpx;
+        box-sizing: border-box;
+        position: relative;
 
-    .tui-group-title {
-    	width: 100%;
-    	float: left;
-    	.tui-group-l {
-    		float: left;
-    		font-size: 34rpx;
-    		font-weight: bold;
-    		text-align: left;
-    		line-height: 49rpx;
-    		color: #333;
-    	}
-    	.tui-group-r {
-    		float: right;
-    		font-size: $font-size-24;
-    		text-align: right;
-    		line-height: 49rpx;
-    		color: #999999;
-    		.icon-xiayibu {
-    			font-size: $font-size-30;
-    			color: #999999;
-    		}
-    	}
-    }
+        .tui-group-name {
+            font-size: $font-size-36;
+            font-weight: bold;
+            color: #333333;
+        }
 
-    .tui-sub__desc {
-        width: 100%;
-        float: left;
-        color: rgba(153, 153, 153, 0.9);
-        font-size: $font-size-26;
-    }
+        .tui-group-tabs {
+            height: 100rpx;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-left: 20rpx;
+            font-size: $font-size-24;
+            line-height: 100rpx;
+            color: #999999;
+        }
 
-    .supplier-banner {
-        width: 100%;
-        height: 240rpx;
-        float: left;
-        margin-top: 24rpx;
-        border-radius: 16rpx;
-        overflow: hidden;
-        image {
-            width: 100%;
-            height: 240rpx;
-            display: block;
+        .tui-group-r {
+            width: 100rpx;
+            height: 100rpx;
+            line-height: 100rpx;
+            font-size: $font-size-24;
+            color: #999999;
+            text-align: right;
+            position: absolute;
+            right: 0;
+            top: 0;
         }
     }
 
     .swiper-goods-box {
         width: 100%;
-        height: auto;
-        float: left;
-        margin-top: 24rpx;
-
-        .goods-box-item {
-            width: 160rpx;
-            height: 200rpx;
-            float: left;
-            margin-right: 20rpx;
-            margin-bottom: 20rpx;
-            background-color: #FFFFFF;
-
-            &:nth-child(4n) {
-                margin-right: 0;
+        height: 960rpx;
+        position: relative;
+
+        .swiper__dots-box {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            /* #ifndef APP-NVUE */
+            display: flex;
+            /* #endif */
+            flex: 1;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+
+            .swiper__dots-item {
+                width: 10rpx;
+                height: 10rpx;
+                border-radius: 100%;
+                margin-left: 6px;
+                background-color: #FFFFFF;
             }
 
-            .box-item-image {
-                width: 160rpx;
-                height: 160rpx;
-                display: block;
-                float: left;
+            .swiper__dots-long {
+                width: 35rpx;
+                height: 10rpx;
+                border-radius: 6rpx;
+                background-color: #FF5B00;
+                transition: all 0.4s;
             }
+        }
 
-            .box-item-mask {
-                width: 100%;
-                height: 40rpx;
-                line-height: 40rpx;
-                font-size: $font-size-20;
-                text-align: center;
-                color: #666666;
-                background-color: #f9f9f9;
-                float: left;
+        .tui-shop-swiper {
+            width: 100%;
+            height: 920rpx;
+        }
+
+        .tui-supplier-list {
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+
+            .tui-supplier-item {
+                display: flex;
+                width: 339rpx;
+                height: 448rpx;
+                flex-direction: column;
+                align-items: center;
+                border-radius: 16rpx;
+                margin: 0 20rpx 20rpx 0;
                 box-sizing: border-box;
-                padding: 0 20rpx;
-                white-space: normal;
-                word-break: break-all;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 1;
+                padding: 24rpx 0;
+                background-color: #FFFFFF;
+
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+
+                .tui-shop-top {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+
+                    .tui-top-logo {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 219rpx;
+                        height: 96rpx;
+                        background-color: #ffffff;
+                        border-radius: 8rpx;
+
+                        image {
+                            width: 219rpx;
+                            height: 96rpx;
+                        }
+                    }
+
+                    .tui-top-name {
+                        justify-content: center;
+                        font-size: 30rpx;
+                        line-height: 80rpx;
+                        color: #1bc0de;
+                    }
+                }
+
+                .tui-shop-mid {
+                    width: 100%;
+                    height: 95rpx;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    box-sizing: border-box;
+                    margin: 20rpx 0;
+                    padding: 0 10rpx;
+
+                    .tui-mid-item {
+                        width: 95rpx;
+                        height: 95rpx;
+                        border-radius: 8rpx;
+                        overflow: hidden;
+                        margin: 0 5rpx;
+                        box-sizing: border-box;
+                        border: 1px solid #e1e1e1;
+
+                        image {
+                            width: 95rpx;
+                            height: 95rpx;
+                        }
+                    }
+                }
+
+                .tui-shop-bot {
+                    width: 100%;
+                    height: 54rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-top: 20rpx;
+
+                    .tui-bot-btn {
+                        justify-content: center;
+                        align-items: center;
+                        font-size: 28rpx;
+                        line-height: 52rpx;
+                        color: #333333;
+                        padding: 0 30rpx;
+                        border: 1px solid #999999;
+                        border-radius: 30rpx;
+
+                        .iconfont {
+                            font-size: 24rpx;
+                        }
+                    }
+                }
             }
         }
     }

pages/tabBar/home/components/template-page/templateR.vue

@@ -0,0 +1,321 @@
+<template>
+    <view class="section_page_main clearfix">
+        <view class="floor-item-main">
+            <view class="floor-item clearfix" v-for="(pros, idx) in list" :key="idx"
+                @click.stop="navToDetailPage(pros)">
+                <image class="item-img tui-skeleton-fillet" :src="pros.image" mode="aspectFill"></image>
+                <template-Type :product="pros"></template-Type>
+                <view class="floor-item-content">
+                    <view class="title tui-skeleton-rect">
+                        <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''">{{ pros.name }}
+                        </text>
+                    </view>
+                    <view class="floor-item-price">
+                        <template>
+                            <template-Tags :product="pros"></template-Tags>
+                        </template>
+                        <view v-if="hasLogin">
+                            <template v-if="pros.productCategory == 1">
+                                <template-Price :product="pros"></template-Price>
+                            </template>
+                            <template v-else>
+                                <view class="price tui-skeleton-rect" v-if="pros.detailTalkFlag == '2'">
+                                    <text class="p sm">￥</text> <text class="p big">价格详聊</text>
+                                </view>
+                                <view class="price tui-skeleton-rect" v-else>
+                                    <text class="p sm">￥</text>
+                                    <text class="p big">{{ pros.price | NumFormat }}</text>
+                                </view>
+                            </template>
+                        </view>
+                        <view v-else class="no-price">
+                            <template v-if="pros.productCategory == 1">
+                                <view class="p-stars">
+                                    <text class="p-no">￥</text>
+                                    <uni-grader :grade="Number(pros.priceGrade)" :margin="14"></uni-grader>
+                                </view>
+                            </template>
+                            <template v-else>
+                                <view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
+                            </template>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { mapState, mapMutations } from 'vuex'
+    import uniGrader from '@/components/uni-grade/uni-grade.vue'
+    import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
+    import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
+    import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
+    export default {
+        name: 'templateR',
+        components: {
+            uniGrader,
+            templateTags,
+            templatePrice,
+            templateType
+        },
+        props: {
+            list: {
+                type: Array
+            },
+            userIdentity: {
+                type: Number
+            }
+        },
+        data() {
+            return {
+                current:0,
+                listData:[]
+            }
+        },
+        filters: {
+            NumFormat(text) {
+                //处理金额
+                return Number(text).toFixed(2)
+            }
+        },
+        computed: {
+            ...mapState(['hasLogin', 'userInfo', 'isActivity'])
+        },
+        created() {
+            this.initData(this.list)
+        },
+        watch: {
+            list: {
+                handler(el) {
+                    //监听对象的变换使用 function，箭头函数容易出现this指向不正确
+                    this.list = el
+                },
+                deep: true
+            }
+        },
+        methods: {
+            initData(data){
+                this.listData = data
+                console.log('initData',this.listData)
+            },
+            navToDetailPage(pros) {
+                //跳转商品详情
+                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+            },
+            BannerNavigateTo(linkType, linkId, linkHref, keyword) {
+                //跳转
+                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .section_page_main {
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
+        .tui-floor-item{
+            width: 100%;
+            height: 240rpx;
+            border-radius: 16rpx;
+            box-sizing: border-box;
+            padding: 0;
+            position: relative;
+            margin-bottom: 24rpx;
+            .swiper__dots-box{
+            	position: absolute;
+            	bottom: 30rpx;
+            	left: 0;
+            	right: 0;
+            	/* #ifndef APP-NVUE */
+            	display: flex;
+            	/* #endif */
+            	flex: 1;
+            	flex-direction: row;
+            	justify-content: center;
+            	align-items: center;
+            	.swiper__dots-item{
+            		width: 8rpx;
+            		height: 8rpx;
+            		border-radius: 100%;
+            		margin-left: 6px;
+            		background-color:rgba(255,255,255,.7);
+            	}
+            	.swiper__dots-long{
+            		width: 35rpx;
+            		height: 8rpx;
+            		border-radius: 4rpx;
+            		background-color: #ffff;
+            		transition: all 0.4s;
+            	}
+            }
+            .tui-floor-swiper{
+                width: 100%;
+                height: 240rpx;
+                text-align: center;
+                line-height: 240rpx;
+                float: left;
+                border-radius: 16rpx;
+                overflow: hidden;
+                .floor-image{
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                }
+            }
+        }
+        .floor-item-main{
+            width: 100%;
+            height: auto;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            align-items: center;
+            .floor-item {
+                width: 339rpx;
+                height: 524rpx;
+                font-size: $font-size-24;
+                color: $text-color;
+                background: #ffffff;
+                line-height: 36rpx;
+                border-radius: 16rpx;
+                box-sizing: border-box;
+                position: relative;
+                margin-right: 20rpx;
+                margin-bottom: 20rpx;
+                &:nth-child(2n){
+                    margin-right: 0;
+                }
+                .item-img {
+                    width: 339rpx;
+                    height: 339rpx;
+                    border-radius: 16rpx 16rpx 0 0;
+                    display: block;
+                    margin-bottom: 8rpx;
+                }
+            
+                .floor-item_tag {
+                    width: 100%;
+                    height: 32rpx;
+                    float: left;
+                    margin: 20rpx 0;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+            
+                    text {
+                        display: inline-block;
+                        padding: 0 8rpx;
+                        border: 1px solid #e3ebf7;
+                        border-radius: 8rpx;
+                        color: #9aa5b5;
+                        font-size: $font-size-22;
+                        line-height: 32rpx;
+                        text-align: center;
+                        float: left;
+                    }
+                }
+            
+                .floor-item-content {
+                    width: 100%;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+                }
+            
+                .floor-item-act {
+                    display: block;
+                    width: 100%;
+                    height: 32rpx;
+                    text-align: center;
+                    box-sizing: border-box;
+                }
+            
+                .title-none {
+                    font-size: $font-size-26;
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+                }
+            
+                .title {
+                    width: 100%;
+                    height: 70rpx;
+                    display: flex;
+                    line-height: 35rpx;
+                    flex-direction: column;
+                    margin: 8rpx 0;
+                    padding: 0;
+                    position: relative;
+            
+                    .mclap {
+                        width: 100%;
+                        line-height: 35rpx;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        word-break: break-all;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        font-size: 26rpx;
+            
+                        &.indent {
+                            text-indent: 95rpx;
+                        }
+                    }
+            
+                    .mclap-tag {
+                        display: block;
+                        width: 84rpx;
+                        height: 32rpx;
+                        background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+                        border-radius: 4rpx 48rpx 4px 4px;
+                        line-height: 32rpx;
+                        font-size: $font-size-22;
+                        color: #ffffff;
+                        text-align: center;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
+                }
+            
+                .no-price {
+                    height: 54rpx;
+                    line-height: 54rpx;
+                    display: flex;
+                    box-sizing: border-box;
+            
+                    .p-no {
+                        font-size: $font-size-28;
+                        color: $text-color;
+                        display: block;
+                        float: left;
+                    }
+            
+                    .p-stars {
+                        float: left;
+                    }
+                }
+            
+                .price {
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+            
+                    &.none {
+                        text-decoration: line-through;
+                        color: #999999;
+                    }
+            
+                    .sm {
+                        font-size: $font-size-24;
+                    }
+            
+                    .big {
+                        font-size: $font-size-28;
+                    }
+                }
+            }
+        }
+    }
+</style>

pages/tabBar/home/components/template-page/templateZ.vue

@@ -0,0 +1,343 @@
+<template>
+    <view class="section_page_main clearfix">
+        <view class="tui-floor-item" v-if="floorData.imageList.length>0">
+            <swiper class="tui-floor-swiper" circular @change="swiperChange" :indicator-dots="false" :autoplay="true"
+                :interval="5000" :duration="500">
+                <swiper-item v-for="(item, index) in floorData.imageList" :key="item">
+                    <view class="tui-floor-swiper" @click="BannerNavigateTo(
+                            item.linkType,
+                            item.linkParam.id ? item.linkParam.id : '',
+                            item.linkParam.crmLink,
+                            item.linkParam.keyword ? item.linkParam.keyword : '')">
+                        <image class="floor-image" :src="item.crmImage" mode=""></image>
+                    </view>
+                </swiper-item>
+            </swiper>
+            <view class="swiper__dots-box">
+                <view v-for="(item, idx) in floorData.imageList" :key="idx"
+                    :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
+                    class="swiper__dots-item"></view>
+            </view>
+        </view>
+        <view class="floor-item-main">
+            <view class="floor-item clearfix" v-for="(pros, idx) in floorData.products" :key="idx"
+                @click.stop="navToDetailPage(pros)">
+                <image class="item-img tui-skeleton-fillet" :src="pros.mainImage" mode="aspectFill"></image>
+                <template-Type :product="pros"></template-Type>
+                <view class="floor-item-content">
+                    <view class="title tui-skeleton-rect">
+                        <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''">{{ pros.name }}
+                        </text>
+                    </view>
+                    <view class="floor-item-price">
+                        <template>
+                            <template-Tags :product="pros"></template-Tags>
+                        </template>
+                        <view v-if="hasLogin">
+                            <template v-if="pros.productCategory == 1">
+                                <template-Price :product="pros"></template-Price>
+                            </template>
+                            <template v-else>
+                                <view class="price tui-skeleton-rect" v-if="pros.detailTalkFlag == '2'">
+                                    <text class="p sm">￥</text> <text class="p big">价格详聊</text>
+                                </view>
+                                <view class="price tui-skeleton-rect" v-else>
+                                    <text class="p sm">￥</text>
+                                    <text class="p big">{{ pros.price | NumFormat }}</text>
+                                </view>
+                            </template>
+                        </view>
+                        <view v-else class="no-price">
+                            <template v-if="pros.productCategory == 1">
+                                <view class="p-stars">
+                                    <text class="p-no">￥</text>
+                                    <uni-grader :grade="Number(pros.priceGrade)" :margin="14"></uni-grader>
+                                </view>
+                            </template>
+                            <template v-else>
+                                <view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
+                            </template>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { mapState, mapMutations } from 'vuex'
+    import uniGrader from '@/components/uni-grade/uni-grade.vue'
+    import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
+    import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
+    import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
+    export default {
+        name: 'templateZ',
+        components: {
+            uniGrader,
+            templateTags,
+            templatePrice,
+            templateType
+        },
+        props: {
+            pageData: {
+                type: Object
+            },
+            userIdentity: {
+                type: Number
+            }
+        },
+        data() {
+            return {
+                current:0,
+                floorData: {}
+            }
+        },
+        filters: {
+            NumFormat: function(text) {
+                //处理金额
+                return Number(text).toFixed(2)
+            }
+        },
+        computed: {
+            ...mapState(['hasLogin', 'userInfo', 'isActivity'])
+        },
+        created() {
+            this.initData(this.pageData)
+        },
+        watch: {
+            pageData: {
+                handler: function(el) {
+                    //监听对象的变换使用 function，箭头函数容易出现this指向不正确
+                    this.pageData = el
+                    this.initData(this.pageData)
+                },
+                deep: true
+            }
+        },
+        methods: {
+            initData(data) {
+                this.floorData = data
+            },
+            navToDetailPage(pros) {
+                //跳转商品详情
+                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
+            },
+            BannerNavigateTo(linkType, linkId, linkHref, keyword) {
+                //跳转
+                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
+            },
+            swiperChange(e) {//轮播图切换
+            	this.current = e.detail.current
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .section_page_main {
+        width: 100%;
+        height: auto;
+        box-sizing: border-box;
+        .tui-floor-item{
+            width: 100%;
+            height: 240rpx;
+            border-radius: 16rpx;
+            box-sizing: border-box;
+            padding: 0;
+            position: relative;
+            margin-bottom: 24rpx;
+            .swiper__dots-box{
+            	position: absolute;
+            	bottom: 30rpx;
+            	left: 0;
+            	right: 0;
+            	/* #ifndef APP-NVUE */
+            	display: flex;
+            	/* #endif */
+            	flex: 1;
+            	flex-direction: row;
+            	justify-content: center;
+            	align-items: center;
+            	.swiper__dots-item{
+            		width: 8rpx;
+            		height: 8rpx;
+            		border-radius: 100%;
+            		margin-left: 6px;
+            		background-color:rgba(255,255,255,.7);
+            	}
+            	.swiper__dots-long{
+            		width: 35rpx;
+            		height: 8rpx;
+            		border-radius: 4rpx;
+            		background-color: #ffff;
+            		transition: all 0.4s;
+            	}
+            }
+            .tui-floor-swiper{
+                width: 100%;
+                height: 240rpx;
+                text-align: center;
+                line-height: 240rpx;
+                float: left;
+                border-radius: 16rpx;
+                overflow: hidden;
+                .floor-image{
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                }
+            }
+        }
+        .floor-item-main{
+            width: 100%;
+            height: auto;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            align-items: center;
+            .floor-item {
+                width: 339rpx;
+                height: 524rpx;
+                font-size: $font-size-24;
+                color: $text-color;
+                background: #ffffff;
+                line-height: 36rpx;
+                border-radius: 16rpx;
+                box-sizing: border-box;
+                position: relative;
+                margin-right: 20rpx;
+                margin-bottom: 20rpx;
+                &:nth-child(2n){
+                    margin-right: 0;
+                }
+                .item-img {
+                    width: 339rpx;
+                    height: 339rpx;
+                    border-radius: 16rpx 16rpx 0 0;
+                    display: block;
+                    margin-bottom: 8rpx;
+                }
+            
+                .floor-item_tag {
+                    width: 100%;
+                    height: 32rpx;
+                    float: left;
+                    margin: 20rpx 0;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+            
+                    text {
+                        display: inline-block;
+                        padding: 0 8rpx;
+                        border: 1px solid #e3ebf7;
+                        border-radius: 8rpx;
+                        color: #9aa5b5;
+                        font-size: $font-size-22;
+                        line-height: 32rpx;
+                        text-align: center;
+                        float: left;
+                    }
+                }
+            
+                .floor-item-content {
+                    width: 100%;
+                    padding: 0 20rpx;
+                    box-sizing: border-box;
+                }
+            
+                .floor-item-act {
+                    display: block;
+                    width: 100%;
+                    height: 32rpx;
+                    text-align: center;
+                    box-sizing: border-box;
+                }
+            
+                .title-none {
+                    font-size: $font-size-26;
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+                }
+            
+                .title {
+                    width: 100%;
+                    height: 70rpx;
+                    display: flex;
+                    line-height: 35rpx;
+                    flex-direction: column;
+                    margin: 8rpx 0;
+                    padding: 0;
+                    position: relative;
+            
+                    .mclap {
+                        width: 100%;
+                        line-height: 35rpx;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        word-break: break-all;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        font-size: 26rpx;
+            
+                        &.indent {
+                            text-indent: 95rpx;
+                        }
+                    }
+            
+                    .mclap-tag {
+                        display: block;
+                        width: 84rpx;
+                        height: 32rpx;
+                        background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
+                        border-radius: 4rpx 48rpx 4px 4px;
+                        line-height: 32rpx;
+                        font-size: $font-size-22;
+                        color: #ffffff;
+                        text-align: center;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
+                }
+            
+                .no-price {
+                    height: 54rpx;
+                    line-height: 54rpx;
+                    display: flex;
+                    box-sizing: border-box;
+            
+                    .p-no {
+                        font-size: $font-size-28;
+                        color: $text-color;
+                        display: block;
+                        float: left;
+                    }
+            
+                    .p-stars {
+                        float: left;
+                    }
+                }
+            
+                .price {
+                    color: #ff2a2a;
+                    line-height: 54rpx;
+            
+                    &.none {
+                        text-decoration: line-through;
+                        color: #999999;
+                    }
+            
+                    .sm {
+                        font-size: $font-size-24;
+                    }
+            
+                    .big {
+                        font-size: $font-size-28;
+                    }
+                }
+            }
+        }
+    }
+</style>

pages/tabBar/home/components/zoneFloor.vue

@@ -0,0 +1,116 @@
+<template>
+	<view>
+		<view class="page-content clearfix" v-for="(page, index) in list" :key="index">
+			<view class="tui-group-title">
+				<view class="tui-group-name">{{ page.floorTitle }}</view>
+                <view class="tui-group-tabs">
+                    <view class="tui-group-tabs-left">
+                        <view class="tui-tabs-item" @click="handleNavTo(page,1)">产品</view>
+                        <view class="tui-tabs-item" @click="handleNavTo(page,2)">仪器</view>
+                        <view class="tui-tabs-item" @click="handleNavTo(page,3)">耗材配件</view>
+                    </view>
+                    <view class="tui-group-tabs-right" @click="handleNavTo(page,0)">
+                       <text>更多</text> 
+                       <text class="iconfont icon-xiayibu"></text>
+                    </view>
+                </view>
+			</view>
+            <templateZ :pageData="page" :userIdentity="userIdentity"></templateZ>
+		</view>
+	</view>
+</template>
+
+<script>
+import templateZ from './template-page/templateZ.vue'
+export default {
+	name: 'zoneFloor',
+	components: {
+		templateZ
+	},
+	props: {
+		list: {
+			type: Array
+		},
+		pageType: {
+			type: Number
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			pageFloorList: []
+		}
+	},
+	created() {
+		
+	},
+	watch: {
+		list: {
+			handler: function (el) {//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.list = el
+			},
+			deep: true
+		}
+	},
+	methods: {
+		handleNavTo(page,typeSort) {
+			//跳转
+			this.$api.navigateTo(`/pages/goods/good-floor-zone?zoneId=${page.id}&typeSort=${typeSort}&floorTitle=${page.floorTitle}`)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.page-content {
+	background-color: #F7F7F7;
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 0 24rpx;
+}
+
+.tui-group-title {
+	width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100rpx;
+    box-sizing: border-box;
+    .tui-group-name {
+    	font-size: $font-size-36;
+        font-weight: bold;
+        color: #333333;
+    }
+    .tui-group-tabs{
+        height: 100rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .tui-group-tabs-left{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-right: 20rpx;
+            .tui-tabs-item{
+                display: flex;
+                font-size: $font-size-28;
+                line-height: 100rpx;
+                color: #333;
+                margin: 0 15rpx;
+            }
+        }
+        .tui-group-tabs-right{
+            font-size: $font-size-24;
+            line-height: 100rpx;
+            color: #999999;
+            .icon-xiayibu {
+            	font-size: $font-size-30;
+            	color: #999999;
+            }
+        }
+    }
+}
+</style>

pages/tabBar/home/index.js

@@ -34,7 +34,8 @@ const homeMiXins = {
             templateData: {},
             hotListPageFloor: [], // 新品橱窗
             pageList: [], // 楼层
-            supplierObj: {}, // 供应商列表
+            supplierObj: [], // 供应商列表
+            recommendProducts:[],//推荐商品列表
             centerImageShow:false,
         }
     },
@@ -95,9 +96,10 @@ const homeMiXins = {
         	this.CommonService.GetHomeDataInfo({ userId: this.userID, source: 2 })
         		.then(response => {
         			let data = response.data
-        			this.pageList = data.homePageFloor
+        			this.pageList = data.zones
         			this.hotListPageFloor = data.pageFloorList
-        			this.supplierObj = data.supplierImage
+        			this.supplierObj = data.supplierImage
+        			this.recommendProducts = data.recommendProducts
         			setTimeout(() => {
         				this.isRequest = true
         			}, 500)

pages/tabBar/home/index.vue

@@ -16,7 +16,7 @@
 			<!-- 优惠券入口 -->
 			<!-- <coupon v-if="isNavRequest" /> -->
 			<!-- 直播 -->
-			<page-special :templateData="templateData" v-if="isLiveRequest" />
+			<!-- <page-special :templateData="templateData" v-if="isLiveRequest" /> -->
 			<!-- 新品橱窗 -->
 			<hot-floor
 				:list="hotListPageFloor"
@@ -27,8 +27,10 @@
 		</view>
 		<!-- 楼层 -->
 		<view class="container-section tui-skeleton">
-			<page-floor :list="pageList" :userIdentity="userIdentity" :pageType="1" v-if="isRequest" />
-			<supplier-list :supplierObj="supplierObj" v-if="isRequest" />
+			<!-- <page-floor :list="pageList" :userIdentity="userIdentity" :pageType="1" v-if="isRequest" /> -->
+			<zone-floor :list="pageList" :userIdentity="userIdentity" :pageType="1" v-if="isRequest" />
+			<supplier-list :supplierObj="supplierObj" v-if="isRequest" />
+            <recommend-floor :recommendProducts="recommendProducts" :userIdentity="userIdentity" v-if="isRequest" />
 		</view>
 		<!-- 侧边 -->
 		<scroll-top :isScrollTop="isScrollTop" :isShowSupplier="true" :isShowKefu='false' :bottom="130" />
@@ -55,6 +57,8 @@ import navbars from './components/navbars.vue'
 import coupon from './components/coupon.vue'
 import pageFloor from './components/pageFloor.vue'
 import hotFloor from './components/hotFloor.vue'
+import zoneFloor from './components/zoneFloor.vue'
+import recommendFloor from './components/recommendFloor.vue'
 import pageSpecial from './components/pageSpecial.vue'
 import supplierList from './components/supplierList.vue'
 import activityAlert from '@/components/cm-module/activity/activities.vue'
@@ -68,7 +72,9 @@ export default {
 		banner,
 		navbars,
 		coupon,
-		pageFloor,
+		pageFloor,
+        zoneFloor,
+        recommendFloor,
 		hotFloor,
 		pageSpecial,
 		supplierList,

services/common.service.js

@@ -40,6 +40,22 @@ export default class CommonService {
 			  
         })
     }
+    /**
+     * @首页专区详情
+     * @param: Int zoneId 专区ID
+     * @param: Int userId 用户ID
+     * @param: Int typeSort 分类类型 1产品，2仪器，3耗材配件
+     * @param: Int source 来源 1 WWW 2小程序
+     * @param: Int pageNum 页码
+     * @param: Int pageSize 条数
+     */
+    getZoneSecond(data = {}) {
+        return this.AjaxService.get({
+            url: '/commodity/zone/second',
+            data,
+            isLoading: true,
+        })
+    }
     /* 二级页楼层查看更多数据 */
     GePageFloorContentDetails(data = {}) {
         return this.AjaxService.get({