商城首页

pages/gengduo/index.vue

@@ -1,10 +1,11 @@
 <template>
-	<view :style="{ minHeight: sys.windowHeight + 'px' }"
-		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']" class="bodycont">
+	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']"
+		class="bodycont">
 		<tm-menubars ref="fenleig" title="分类" :shadow="0" :showback="true"></tm-menubars>
 		<div class="cont" :style="{ height: (sys.windowHeight-80) + 'px' }">
 			<tm-sheet black>
-				<tm-sliderNav :style="{ height: (sys.windowHeight-80) + 'px' }" class="zuo fl" @change="change" :list="list" text color="red" ></tm-sliderNav>
+				<tm-sliderNav :style="{ height: (sys.windowHeight-80) + 'px' }" class="zuo fl" @change="change"
+					:list="list" text color="red"></tm-sliderNav>
 				<view class="fr you" :style="{ height: (sys.windowHeight-80) + 'px' }">
 					<view class="huadong">
 						<view class="py-10 text-size-g dianz mingri text-align-center mt-40">
@@ -24,111 +25,214 @@
 		<!-- 弹出层消息 -->
 		<tm-message ref="toast"></tm-message>
 	</view>
-</template>	
+</template>
 <script>
-import{myRequest} from '@/api/request.js'
-export default {
-	data() {
-		return {
-			list:[
-				{title:'配饰'},
-				{title:'精选'},
-				{title:'热门',},
-				{title:'虚拟商品'},
-				{title:'包袋'},
-				{title:'彩妆',},
-				{title:'护肤'},
-				{title:'陪玩',}
-			],
-			quanbuList:[{
-				src:'/static/img/45.png',
-				text:'NEO CITY 涂鸦',
-				type:'手提包'
-			},{
-				src:'/static/img/46.png',
-				text:'满印迷你标识',
-				type:'围巾'
-			},{
-				src:'/static/img/47.png',
-				text:'大号版型夹克',
-				type:'新品'
-			},{
-				src:'/static/img/45.png',
-				text:'NEO CITY 涂鸦',
-				type:'手提包'
-			},{
-				src:'/static/img/46.png',
-				text:'满印迷你标识',
-				type:'围巾'
-			},{
-				src:'/static/img/47.png',
-				text:'大号版型夹克',
-				type:'新品'
-			},{
-				src:'/static/img/46.png',
-				text:'满印迷你标识',
-				type:'围巾'
-			},{
-				src:'/static/img/47.png',
-				text:'大号版型夹克',
-				type:'新品'
-			},{
-				src:'/static/img/45.png',
-				text:'NEO CITY 涂鸦',
-				type:'手提包'
-			},{
-				src:'/static/img/46.png',
-				text:'满印迷你标识',
-				type:'围巾'
-			},{
-				src:'/static/img/47.png',
-				text:'大号版型夹克',
-				type:'新品'
-			},{
-				src:'/static/img/46.png',
-				text:'满印迷你标识',
-				type:'围巾'
-			},{
-				src:'/static/img/47.png',
-				text:'大号版型夹克',
-				type:'新品'
-			}]
-		};
-	},
-	onLoad() {
-		
-	},
-	created() {
-		this.sys = uni.getSystemInfoSync();
-	},
-	methods: {
-		change(e){
-			uni.$tm.toast(`您选中了:${e}`)
-		}
-	},
-}
+	import {
+		myRequest
+	} from '@/api/request.js'
+	export default {
+		data() {
+			return {
+				list: [],
+				quanbuList: [{
+					src: '/static/img/45.png',
+					text: 'NEO CITY 涂鸦',
+					type: '手提包'
+				}, {
+					src: '/static/img/46.png',
+					text: '满印迷你标识',
+					type: '围巾'
+				}, {
+					src: '/static/img/47.png',
+					text: '大号版型夹克',
+					type: '新品'
+				}, {
+					src: '/static/img/45.png',
+					text: 'NEO CITY 涂鸦',
+					type: '手提包'
+				}, {
+					src: '/static/img/46.png',
+					text: '满印迷你标识',
+					type: '围巾'
+				}, {
+					src: '/static/img/47.png',
+					text: '大号版型夹克',
+					type: '新品'
+				}, {
+					src: '/static/img/46.png',
+					text: '满印迷你标识',
+					type: '围巾'
+				}, {
+					src: '/static/img/47.png',
+					text: '大号版型夹克',
+					type: '新品'
+				}, {
+					src: '/static/img/45.png',
+					text: 'NEO CITY 涂鸦',
+					type: '手提包'
+				}, {
+					src: '/static/img/46.png',
+					text: '满印迷你标识',
+					type: '围巾'
+				}, {
+					src: '/static/img/47.png',
+					text: '大号版型夹克',
+					type: '新品'
+				}, {
+					src: '/static/img/46.png',
+					text: '满印迷你标识',
+					type: '围巾'
+				}, {
+					src: '/static/img/47.png',
+					text: '大号版型夹克',
+					type: '新品'
+				}]
+			};
+		},
+		onLoad() {
+
+		},
+		created() {
+			this.sys = uni.getSystemInfoSync();
+			this.getTop();
+		},
+		methods: {
+			// 获取一级分类
+			getTop() {
+				let that = this;
+				myRequest({
+					url: '/api/ShopGoods/getMallClassification',
+					method: 'get',
+					data: that.reqData
+				}).then(res => {
+					console.log(res.data);
+					if (res.data.code == 200) {
+						res.data.data.forEach(item => {
+							that.list.push({
+								img: item.image,
+								title: item.category_name
+							})
+						})
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+			},
+			// 二级分类
+			getMiddle() {
+				myRequest({
+					url: "/api/ShopGoods/getMallClassification",
+					method: 'get',
+					data: that.reqData
+				}).then(res => {
+					console.log(res.data);
+					if (res.data.code == 200) {
+						res.data.data.forEach(item => {
+							that.list3.push({
+								icon: item.image,
+								text: item.category_name
+							})
+						})
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+			},
+
+
+			change(e) {
+				uni.$tm.toast(`您选中了:${e}`)
+			}
+		},
+	}
 </script>
 
 <style lang="scss">
-	/deep/ .tm-menubars .body{
+	/deep/ .tm-menubars .body {
 		background-color: #1b1b1b !important;
 	}
+
 	// /deep/ .zhuti{padding: 10px 10px;}
 	// page,.bodycont{height:100%;}
-	/deep/ .cont{overflow: hidden;}
-	/deep/ .kuang{margin:0 !important;padding: 0px !important;}
-	/deep/ .zuo .grey-darken-4.bk{background-color:#0D0D0D !important;}
-	/deep/ .zuo .uni-scroll-view-content{background-color:#0D0D0D !important;}
-	/deep/ .cont .shadow-white-5{padding:0px !important;margin:0px !important}
-	/deep/ .zuo .border-red-l-2.bk{border-left-color:#0178FD !important;}
-	/deep/ .zuo .text-red,/deep/ .zuo .text-grey-darken-1{color: white !important;}
-	.yiguicla image{width: 100%;display: block;margin: 0 auto;margin-top: 5px;border-radius: 10px;}
-	.yiguicla{width: 45%;border-radius: 10px;position: relative;padding:0px !important;}
-	.wenzi{position: absolute;bottom: 0px;background: #BCC2C7;color: white;width: 100%;
-	height: 25px;border-radius: 0px 0px 10px 10px;}
+	/deep/ .cont {
+		overflow: hidden;
+	}
+
+	/deep/ .kuang {
+		margin: 0 !important;
+		padding: 0px !important;
+	}
+
+	/deep/ .zuo .grey-darken-4.bk {
+		background-color: #0D0D0D !important;
+	}
+
+	/deep/ .zuo .uni-scroll-view-content {
+		background-color: #0D0D0D !important;
+	}
+
+	/deep/ .cont .shadow-white-5 {
+		padding: 0px !important;
+		margin: 0px !important
+	}
+
+	/deep/ .zuo .border-red-l-2.bk {
+		border-left-color: #0178FD !important;
+	}
+
+	/deep/ .zuo .text-red,
+	/deep/ .zuo .text-grey-darken-1 {
+		color: white !important;
+	}
+
+	.yiguicla image {
+		width: 100%;
+		display: block;
+		margin: 0 auto;
+		margin-top: 5px;
+		border-radius: 10px;
+	}
+
+	.yiguicla {
+		width: 45%;
+		border-radius: 10px;
+		position: relative;
+		padding: 0px !important;
+	}
+
+	.wenzi {
+		position: absolute;
+		bottom: 0px;
+		background: #BCC2C7;
+		color: white;
+		width: 100%;
+		height: 25px;
+		border-radius: 0px 0px 10px 10px;
+	}
+
 	// /deep/ .zuo uni-scroll-view{height: calc(100% - 45px) !important;}
-	.mingri image{width: 25px;margin-right: 12px;vertical-align: middle;}
-	.mingri text{vertical-align: middle;}
-	.you{width: calc(100% - 100px);overflow: auto;}
-	.zuo{overflow: hidden;}
+	.mingri image {
+		width: 25px;
+		margin-right: 12px;
+		vertical-align: middle;
+	}
+
+	.mingri text {
+		vertical-align: middle;
+	}
+
+	.you {
+		width: calc(100% - 100px);
+		overflow: auto;
+	}
+
+	.zuo {
+		overflow: hidden;
+	}
 </style>

pages/shop/index.vue

@@ -41,14 +41,14 @@
 				<view style="clear: both;"></view>
 			</tm-sheet> -->
 			<tm-sheet :shadow="24" class="jiaoxi xiao">
-				<tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list2" range-key="title"></tm-tabs>
+				<tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list2" range-key="title" @change="changeTab"></tm-tabs>
 			</tm-sheet>
 			<tm-sheet :shadow="24" class="jiaoxi xiao" style="height:160px;">
 				<tm-dragGrid  :list="list1" :col="3" disabled="false" class="mt-40 mb-40 remen" :icon-size="160">
 					<template v-slot:default="{item}">
 						<view class="flex-center flex-col" @click="tiaozhuan()">
-							<tm-icons :size="160" :name="item.icon" :color="item.color"></tm-icons>
-							<text class="text-size-m text-white pt-10">{{item.text}}</text>
+							<tm-icons :size="160" :name="item.image" :color="item.color"></tm-icons>
+							<text class="text-size-m text-white pt-10">{{item.category_name}}</text>
 							<text class="text-size-m text-white pt-10">{{item.jie}}</text>
 						</view>
 					</template>
@@ -99,24 +99,15 @@ export default {
 			soso:'',
 			addr:['江西省','南昌市','西湖区'],
 			value:'',
-			list:[
-				'/static/img/66.png',
-				'/static/img/66.png',
-				'/static/img/66.png',
-				'/static/img/66.png'
-			],
-			list1:[
-				{icon:'/static/img/79.png',text:'服装',jie:'Accessories'},
-				{icon:'/static/img/80.png',text:'家具',jie:'Sunglasses'},
-				{icon:'/static/img/81.png',text:'箱包',jie:'Suitcases'},
-			],
+			list:[],
+			list1:[],
 			list2:[ '热门','折扣'],
 			list3:[
-				{icon:'/static/img/69.png',text:'服装'},
-				{icon:'/static/img/70.png',text:'家具'},
-				{icon:'/static/img/71.png',text:'箱包'},
-				{icon:'/static/img/72.png',text:'配饰'},
-				{icon:'/static/img/74.png',text:'更多'},
+				// {icon:'/static/img/69.png',text:'服装'},
+				// {icon:'/static/img/70.png',text:'家具'},
+				// {icon:'/static/img/71.png',text:'箱包'},
+				// {icon:'/static/img/72.png',text:'配饰'},
+				// {icon:'/static/img/74.png',text:'更多'},
 			],
 			list4:[
 				{icon:'/static/img/83.png',text:'双面穿千鸟格风衣',jie:'¥ 899.00'},
@@ -158,8 +149,85 @@ export default {
 	},
 	created() {
 		this.sys = uni.getSystemInfoSync();
+		this.getSort()
+		this.getBanner()
+		this.changeTab();
 	},
 	methods: {
+		getBanner(){
+			let that = this;
+			myRequest({
+				url: "/api/Banner/bannerList",
+				method: 'get',
+				data: that.reqData
+			}).then(res => {
+				console.log(res.data);
+				if (res.data.code == 200) {
+					res.data.data.forEach(item => {
+						that.list.push({
+							src: item.image,
+						})
+					})
+				} else {
+					that.$refs.toast.show({
+						model: 'error',
+						label: res.data.msg
+					})
+				}
+			})
+		},
+		//获取分类
+		getSort(){
+			let that = this;
+			myRequest({
+				url: "/api/ShopGoods/getMallClassification",
+				method: 'get',
+				data: that.reqData
+			}).then(res => {
+				console.log(res.data);
+				if (res.data.code == 200) {
+					res.data.data.forEach(item => {
+						that.list3.push({
+							icon: item.image,
+							text: item.category_name
+						})
+					})
+				} else {
+					that.$refs.toast.show({
+						model: 'error',
+						label: res.data.msg
+					})
+				}
+			})
+		},
+		
+		// 热门、折扣
+		changeTab(){
+				let that = this;
+						myRequest({
+							url: "/api/ShopGoods/thenBuckle",
+							method: 'post',
+							data: {
+								'type':that.activeIndex+1
+							}
+						}).then(res => {
+							console.log(res.data);
+							if (res.data.code == 200) {
+								res.data.data.forEach(item => {
+									that.list1.push({
+										icon: item.image,
+										text:item.category_name
+									})
+								})
+							} else {
+								that.$refs.toast.show({
+									model: 'error',
+									label: res.data.msg
+								})
+							}
+						})
+		},
+		
 		tiaozhuan(){
 			uni.navigateTo({
 				url: "/pages/gengduo/index",