商城详情页相关功能

pages/shop/index.vue

@@ -3,7 +3,8 @@
 		<tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
 		<view class="C1b1b1b pb-40">
 			<view class="sousuo">
-				<tm-pickersCity class="dingwei fl" btn-color="bg-gradient-blue-accent" @confirm="okCity" :default-value="addr">
+				<tm-pickersCity class="dingwei fl" btn-color="bg-gradient-blue-accent" @confirm="okCity"
+					:default-value="addr">
 					<view>
 						<text class="text-size-n">{{addr[1]}}</text>
 						<tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
@@ -15,17 +16,20 @@
 		</view>
 		<view class="lunbo">
 			<tm-swiper :previmage="false" @change="lunboFun" :list="list" :height="400" :current="current"></tm-swiper>
-			<tm-translate class="anniu1 fl" :auto="true" ref="a_1" :duration="80"  animation-name="zoomIn">
-				<image v-if="current!=0" @click="xia()" class="qiehuan" src="/static/img/68.png" mode="widthFix"></image>
+			<tm-translate class="anniu1 fl" :auto="true" ref="a_1" :duration="80" animation-name="zoomIn">
+				<image v-if="current!=0" @click="xia()" class="qiehuan" src="/static/img/68.png" mode="widthFix">
+				</image>
 			</tm-translate>
-			<tm-translate class="anniu2 fr" :auto="true" ref="a_5" :duration="80"  animation-name="zoomIn">
-				<image v-if="current<(list.length-1)" @click="shang()" class="qiehuan" src="/static/img/67.png" mode="widthFix"></image>
+			<tm-translate class="anniu2 fr" :auto="true" ref="a_5" :duration="80" animation-name="zoomIn">
+				<image v-if="current<(list.length-1)" @click="shang()" class="qiehuan" src="/static/img/67.png"
+					mode="widthFix"></image>
 			</tm-translate>
 		</view>
-		
+
 		<view class="zhuti">
 			<tm-sheet :shadow="24" class="jiaoxi">
-				<tm-grid @change="zhonglei" class="mt-20 mb-20" :grid="5" :list="list3" :icon-size="120" font-color="white"></tm-grid>
+				<tm-grid @change="zhonglei" class="mt-20 mb-20" :grid="5" :list="list3" :icon-size="120"
+					font-color="white"></tm-grid>
 			</tm-sheet>
 			<!-- <tm-sheet :shadow="24" class="jiaoxi xiao">
 				<view class="yifu1 fl">
@@ -41,10 +45,12 @@
 				<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" @change="changeTab(activeIndex)"></tm-tabs>
+				<tm-tabs align="center" class="qiehuan1" v-model="activeIndex" :list="list2" range-key="title"
+					@change="changeTab(activeIndex)"></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" v-if="list1.length!=0">  
+				<tm-dragGrid :list="list1" :col="3" disabled="false" class="mt-40 mb-40 remen" :icon-size="160"
+					v-if="list1.length!=0">
 					<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>
@@ -65,7 +71,7 @@
 		<view style="height:160px;" class="mt-40 jiage pt-40">
 			<tm-dragGrid :list="list4" :col="3" disabled="false" class="remen" :icon-size="160" v-if="list4.length!=0">
 				<template v-slot:default="{item}">
-					<view class="flex-center flex-col" @click="xiangqing">
+					<view class="flex-center flex-col" @click.stop="goXiangQing(item)">
 						<tm-icons :size="200" :name="item.icon" :color="item.color"></tm-icons>
 						<text class="text-size-m text-white pt-10">{{item.text}}</text>
 						<text class="text-size-m text-white pt-10">{{item.jie}}</text>
@@ -79,360 +85,568 @@
 		<!-- 单品 -->
 		<view class="zhuti shangpin">
 			<tm-sheet :padding="[0, 0]" class="jiaoxi xiao">
-				<tm-cartCellListFood  v-on:jiaruFun="jiarufuFun" v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy"></tm-cartCellListFood>
+				<tm-cartCellListFood v-on:jiaruFun="jiarufuFun" v-on:goXiangQing="goXiangQing(item)"
+					v-for="item in test" :typeclick="typeclick" :mdata="item" :cart-num.sync="item.buy">
+				</tm-cartCellListFood>
+				<view class="" v-if="isBottom"
+					style="width: 100%;display: flex;justify-content: center;align-items: center;">
+					没有更多了~
+				</view>
 			</tm-sheet>
+
 		</view>
 		<view v-if="gouwuche.length!=0" class="fudong" @click="qugowuche">
 			<image src="../../static/img/87.png" mode="widthFix"></image>
 			<view class="shuzigwc">{{gouwuche.length}}</view>
 		</view>
-		<view style="width:100%;height:60px;"></view>
+		<!-- <view style="width:100%;height:60px;"></view> -->
 		<!-- 弹出层消息 -->
 		<tm-message ref="toast"></tm-message>
 	</view>
-</template>	
+</template>
 <script>
-import{myRequest} from '@/api/request.js'
-import qqmapsdk from '../../js_sdk/qqmap-wx-jssdk.js'
-const QQMapWX = new qqmapsdk({
-	key: 'KNABZ-OAVCJ-O5IFJ-KBNST-SVIIZ-2EB3G'
-});
-export default {
-	data() {
-		return {
-			current:1,
-			activeIndex:0,
-			soso:'',
-			addr:['江西省','南昌市','西湖区'],
-			value:'',
-			list:[],
-			list1:[],
-			list2:[ '热门','折扣'],
-			list3:[],
-			list4:[],
-			list5:[ '推荐单品'],
-			test: [],
-			typeclick:1,//1加入购物车，2购物车
-			gouwuche:[],
-		};
-	},
-	onLoad() {
-		
-	},
-	onShow() {
-		this.getGwc()
-	},
-	created() {
-		this.sys = uni.getSystemInfoSync();
-		this.getSort()
-		this.getBanner()
-		this.changeTab(1);
-		this.getHot();
-		this.getRecommend()
-		this.getGwc()
-		this.getCity()
-	},
-	methods: {
-		getCity(){
-			var that=this;
-			uni.getLocation({
-				type: 'wgs84',
-				geocode: true,
-				success: (res) => {
-					console.log("获取经纬度成功");
-					this.latitude = res.latitude;
-					this.longitude = res.longitude;
-				},
-				fail: () => {
-					console.log("获取经纬度失败");
-				},
-				complete: () => {
-					// 解析地址
-					QQMapWX.reverseGeocoder({
-						location: {
-							latitude: this.latitude,
-							longitude: this.longitude
-						},
-						success: function(res) {
-							console.log("解析地址成功");
-							console.log(res);
-							// 省
-							let province = res.result.ad_info.province;
-							// 市
-							let city = res.result.ad_info.city;
-							//区
-							let district=res.result.ad_info.district;
-							that.addr=[province,city,district];
-							console.log(province);
-							console.log(city);
-							console.log(district);
-						},
-						fail: function(res) {
-							uni.showToast({
-								title: '定位失败',
-								duration: 2000,
-								icon: "none"
-							})
-							console.log(res);
-						},
-						complete: function(res) {
-							console.log(res);
-						}
-					})
-				}
-			})
+	import {
+		myRequest
+	} from '@/api/request.js'
+	import qqmapsdk from '../../js_sdk/qqmap-wx-jssdk.js'
+	const QQMapWX = new qqmapsdk({
+		key: 'KNABZ-OAVCJ-O5IFJ-KBNST-SVIIZ-2EB3G'
+	});
+	export default {
+		data() {
+			return {
+				isBottom: false,
+				current: 1,
+				activeIndex: 0,
+				soso: '',
+				addr: ['江西省', '南昌市', '西湖区'],
+				value: '',
+				list: [],
+				list1: [],
+				list2: ['热门', '折扣'],
+				list3: [],
+				list4: [],
+				list5: ['推荐单品'],
+				test: [],
+				typeclick: 1, //1加入购物车，2购物车
+				gouwuche: [],
+				page: 1,
+			};
 		},
-		getGwc(){
-			let that = this;
-			myRequest({
-				url: "/api/ShopCart/shopCartList",
-				method: 'get',
-				data: that.reqData
-			}).then(res => {
-				if (res.data.code == 200) {
-					that.gouwuche=res.data.data;
-				} else {
-					that.gouwuche=[]
-				}
-			})
+		onLoad() {
+
 		},
-		getBanner(){
-			let that = this;
-			myRequest({
-				url: "/api/Banner/bannerList",
-				method: 'get',
-				data: that.reqData
-			}).then(res => {
-				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
-					})
-				}
-			})
+		onShow() {
+			this.getGwc()
+		},
+		created() {
+			this.sys = uni.getSystemInfoSync();
+			this.getSort()
+			this.getBanner()
+			this.changeTab(1);
+			this.getHot();
+			this.getRecommend()
+			this.getGwc()
+			this.getCity()
 		},
-		//获取分类
-		getSort(){
-			let that = this;
-			myRequest({
-				url: "/api/ShopGoods/getMallClassification",
-				method: 'get',
-				data: that.reqData
-			}).then(res => {
-				if (res.data.code == 200) {
-					res.data.data.forEach(item => {
-						that.list3.push({
-							icon: item.image,
-							text: item.category_name
+		onReachBottom() {
+			this.loadMore()
+		},
+		methods: {
+			getCity() {
+				var that = this;
+				uni.getLocation({
+					type: 'wgs84',
+					geocode: true,
+					success: (res) => {
+						console.log("获取经纬度成功");
+						this.latitude = res.latitude;
+						this.longitude = res.longitude;
+					},
+					fail: () => {
+						console.log("获取经纬度失败");
+					},
+					complete: () => {
+						// 解析地址
+						QQMapWX.reverseGeocoder({
+							location: {
+								latitude: this.latitude,
+								longitude: this.longitude
+							},
+							success: function(res) {
+								console.log("解析地址成功");
+								console.log(res);
+								// 省
+								let province = res.result.ad_info.province;
+								// 市
+								let city = res.result.ad_info.city;
+								//区
+								let district = res.result.ad_info.district;
+								that.addr = [province, city, district];
+								console.log(province);
+								console.log(city);
+								console.log(district);
+							},
+							fail: function(res) {
+								uni.showToast({
+									title: '定位失败',
+									duration: 2000,
+									icon: "none"
+								})
+								console.log(res);
+							},
+							complete: function(res) {
+								console.log(res);
+							}
 						})
-					})
-				} else {
-					that.$refs.toast.show({
-						model: 'error',
-						label: res.data.msg
-					})
-				}
-			})
-		},		
-		// 热门、折扣
-		changeTab(activeIndex){
-			let that = this;
-			myRequest({
-				url: "/api/ShopGoods/thenBuckle",
-				method: 'post',
-				data: {
-					'type':that.activeIndex+1
-				}
-			}).then(res => {
-				if (res.data.code == 200) {
-					that.list1=[];
-					res.data.data.forEach(item => {
-						that.list1.push({
-							icon: item.image,
-							text:item.category_name
+					}
+				})
+			},
+			getGwc() {
+				let that = this;
+				myRequest({
+					url: "/api/ShopCart/shopCartList",
+					method: 'get',
+					data: that.reqData
+				}).then(res => {
+					if (res.data.code == 200) {
+						that.gouwuche = res.data.data;
+					} else {
+						that.gouwuche = []
+					}
+				})
+			},
+			getBanner() {
+				let that = this;
+				myRequest({
+					url: "/api/Banner/bannerList",
+					method: 'get',
+					data: that.reqData
+				}).then(res => {
+					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
-					})
-				}
-			})
-		},	
-		getHot(){
-			let that = this;
-			myRequest({
-				url: "/api/ShopGoods/popularGoods",
-				method: 'get',
-			}).then(res => {
-				if (res.data.code == 200) {
-					res.data.data.forEach(item => {
-						that.list4.push({
-							icon: item.image,
-							text:item.goods_name,
-							// jie:item.sale_price
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
 						})
-					})
-				} else {
-					that.$refs.toast.show({
-						model: 'error',
-						label: res.data.msg
-					})
-				}
-			})
-		},
-		getRecommend(){
-			let that = this;
-			myRequest({
-				url: "/api/ShopGoods/recommend",
-				method: 'get',
-			}).then(res => {
-				if (res.data.code == 200) {
-					res.data.data.forEach(item => {
-						that.test.push({
-							img: item.image,
-							title:item.goods_name,
-							price:item.sale_price,
-							itemId:item.id
+					}
+				})
+			},
+			//获取分类
+			getSort() {
+				let that = this;
+				myRequest({
+					url: "/api/ShopGoods/getMallClassification",
+					method: 'get',
+					data: that.reqData
+				}).then(res => {
+					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
-					})
-				}
-			})
-		},
-		tiaozhuan(){
-			uni.navigateTo({
-				url: "/pages/gengduo/index",
-			})
-		},
-		xiangqing(e){
-			uni.navigateTo({
-				url: "/pages/shopdetail/index",
-			})
-		},
-		lunboFun(e){
-			this.current=e;
-		},
-		okCity(e){
-			console.log(e);
-			this.addr = e;
-		},
-		qugowuche(){
-			uni.navigateTo({
-				url: "/pages/gouwuche/index",
-			})
-		},
-		sosoFun(){
-			uni.navigateTo({
-				url: "/pages/shopsoso/index",
-			})
-		},
-		shang(){
-			this.$refs.a_5.play()
-			this.current=this.current+1;
-		},
-		xia(){
-			this.$refs.a_1.play()
-			this.current=this.current-1;
-		},
-		jiarufuFun(data){
-			var that=this;
-			console.log(data)
-			if(data.type==2){
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+			},
+			// 热门、折扣
+			changeTab(activeIndex) {
+				let that = this;
 				myRequest({
-					url: "/api/ShopCart/addShopCart",
-					method:'post',
-					data:{
-						goods_id:data.data.itemId,
-						goods_name:data.data.title,
-						goods_image:data.data.img,
-						goods_price:data.data.price,
-						goods_num:1
+					url: "/api/ShopGoods/thenBuckle",
+					method: 'post',
+					data: {
+						'type': that.activeIndex + 1
 					}
 				}).then(res => {
 					if (res.data.code == 200) {
-						that.$refs.toast.show({model:'success',label:res.data.msg})
-						that.getGwc()
-					}else{
-						that.$refs.toast.show({model:'error',label:res.data.msg})
+						that.list1 = [];
+						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
+						})
 					}
 				})
-			}else{
+			},
+			// 获取热门下商品
+			getHot() {
+				let that = this;
+				myRequest({
+					url: "/api/ShopGoods/popularGoods",
+					method: 'get',
+				}).then(res => {
+					if (res.data.code == 200) {
+						console.log(res.data.data, '22');
+						res.data.data.forEach(item => {
+							that.list4.push({
+								icon: item.image,
+								text: item.goods_name,
+								id: item.id,
+								category_id: item.category_id,
+								jie: item.sale_price,
+								sale_num: item.sale_num,
+								stock_num: item.stock_num
+							})
+						})
+						that.list4 = that.list4.slice(0, 3);
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+			},
+			// 获取推荐单品列表
+			getRecommend() {
+				this.page = 1;
+				let that = this;
+				that.test = [];
+				myRequest({
+					url: "/api/ShopGoods/recommend",
+					method: 'get',
+					data: {
+						page: that.page
+					}
+				}).then(res => {
+					console.log(res.data.data);
+					if (res.data.code == 200) {
+						res.data.data.list.forEach(item => {
+							that.test.push({
+								img: item.image,
+								title: item.goods_name,
+								price: item.sale_price,
+								id: item.id,
+								category_id: item.category_id,
+								sale_num: item.sale_num,
+								stock_num: item.stock_num,
+								is_recommend: item.is_recommend,
+							})
+						})
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+			},
+			// 加载更多
+			loadMore() {
+				if (this.isBottom) return;
+				this.page++;
+				let that = this;
+				myRequest({
+					url: "/api/ShopGoods/recommend",
+					method: 'get',
+					data: {
+						page: that.page
+					}
+				}).then(res => {
+					console.log(res.data.data);
+					if (res.data.code == 200) {
+						if (that.test.length < res.data.data.count) {
+							res.data.data.list.forEach(item => {
+								that.test.push({
+									img: item.image,
+									title: item.goods_name,
+									price: item.sale_price,
+									id: item.id,
+									category_id: item.category_id,
+									sale_num: item.sale_num,
+									stock_num: item.stock_num,
+									is_recommend: item.is_recommend,
+								})
+							})
+							console.log(that.test, '下拉架子啊');
+						} else {
+							that.isBottom = true;
+							that.page--;
+						}
+					} else {
+						that.page--;
+						that.isBottom = false;
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+			},
+
+			tiaozhuan() {
+				uni.navigateTo({
+					url: "/pages/gengduo/index",
+				})
+			},
+			// 广告详情
+			xiangqing() {
 				uni.navigateTo({
 					url: "/pages/shopdetail/index",
 				})
+			},
+			// 去商品详情页
+			goXiangQing(data) {
+				console.log(data);
+				uni.navigateTo({
+					url: "/pages/shopdetail/index?id=" + data.id + '&classId=' + data.category_id,
+				})
+			},
+			lunboFun(e) {
+				this.current = e;
+			},
+			okCity(e) {
+				console.log(e);
+				this.addr = e;
+			},
+			qugowuche() {
+				uni.navigateTo({
+					url: "/pages/gouwuche/index",
+				})
+			},
+			sosoFun() {
+				uni.navigateTo({
+					url: "/pages/shopsoso/index",
+				})
+			},
+			shang() {
+				this.$refs.a_5.play()
+				this.current = this.current + 1;
+			},
+			xia() {
+				this.$refs.a_1.play()
+				this.current = this.current - 1;
+			},
+			jiarufuFun(data) {
+				var that = this;
+				console.log(data)
+				if (data.type == 2) {
+					myRequest({
+						url: "/api/ShopCart/addShopCart",
+						method: 'post',
+						data: {
+							goods_id: data.data.id,
+							goods_name: data.data.title,
+							goods_image: data.data.img,
+							goods_price: data.data.price,
+							goods_num: 1
+						}
+					}).then(res => {
+						if (res.data.code == 200) {
+							that.$refs.toast.show({
+								model: 'success',
+								label: res.data.msg
+							})
+							that.getGwc()
+						} else {
+							that.$refs.toast.show({
+								model: 'error',
+								label: res.data.msg
+							})
+						}
+					})
+				}
+				// else {
+				// 	uni.navigateTo({
+				// 		url: "/pages/shopdetail/index",
+				// 	})
+				// }
+			},
+			zhonglei(e) {
+				uni.navigateTo({
+					url: "/pages/gengduo/index",
+				})
 			}
 		},
-		zhonglei(e){
-			uni.navigateTo({
-				url: "/pages/gengduo/index",
-			})
-		}
-	},
-}
+	}
 </script>
 
 <style lang="scss">
-	/deep/ .tm-menubars .body{
+	/deep/ .tm-menubars .body {
 		background-color: #1b1b1b !important;
 	}
-	/deep/ .icon-search{
+
+	/deep/ .icon-search {
 		font-size: 23px !important;
 		color: #8E8E93 !important;
 	}
-	/deep/ .tm-search{
+
+	/deep/ .tm-search {
 		width: 80%;
 		background-color: #414141 !important;
 		border-radius: 10px;
 	}
-	/deep/ .tm-search .grey-darken-5{
+
+	/deep/ .tm-search .grey-darken-5 {
 		background-color: #414141 !important;
 	}
-	.dingwei{width: 21%;margin-top:3%;}
-	.shuruk{width: 77%;}
-	.sousuo{width:94%;margin:0 auto;}
-	.qiehuan{width:40px;height:40px;}
-	.lunbo{position: relative;}
-	.anniu1{position: absolute;top:0px;z-index: 9999;top:43%;left:0;}
-	.anniu2{position: absolute;top:0px;z-index: 9999;top:43%;right:0;}
-	/deep/ .jiaoxi{margin:0 !important;padding: 8px !important;}
-	/deep/ .tm-col{width: 20% !important;}
-	.yifu1{width: 40%;}
-	.yifu2{width: 58%;}
-	.yifu1 image,.yifu21{width: 100%;}
-	.xiao{margin-top:15px !important;}
-	/deep/ .qiehuan1 .text-primary{color: white !important;}
-	.guanggao{position: relative;}
-	.wenzi{position: absolute;bottom:1px;right:0px;background: #000000;
-	    width: 140px;
-	    height: 55px;
-	    font-size: 14px;
-	    text-align: center;
-	}
-	/deep/ .jiage{background: #1b1b1b;}
-	/deep/ .shangpin .white.bk{background-color:#1b1b1b!important;}
-	/deep/ .shangpin .tm-cartCellListFood{    padding: 0px 0px 15px 0px !important;
-    margin-top: 5px !important;margin-bottom: 20px !important;
-    border-bottom: 1px solid #303030;}
-	/deep/ .shangpin .border-t-1.bk{border-top:1px solid #1b1b1b!important;}
-	/deep/ .shangpin .round-3{width:90px !important;height:90px !important;}
-	/deep/ .shangpin .tm-cartCellListFood-img{width:90px !important;height:90px !important;}
-	.fudong{position: fixed;right:30px;bottom:80px;background: #0DABF2;width: 60px;height:60px;
-	border-radius: 30px;text-align: center;}
-	.fudong image{width:40px;margin-top: 6px;}
-	.shuzigwc{color: white;font-weight: 700;position: absolute;right:5px;background: red;
-	padding:2px;border-radius: 30px;top:2px;width:15px;height:15px;font-size: 12px;}
-	/deep/ .shangpin .title{color: white !important;}
-	/deep/ .shangpin .text-red{color: white !important;}
+
+	.dingwei {
+		width: 21%;
+		margin-top: 3%;
+	}
+
+	.shuruk {
+		width: 77%;
+	}
+
+	.sousuo {
+		width: 94%;
+		margin: 0 auto;
+	}
+
+	.qiehuan {
+		width: 40px;
+		height: 40px;
+	}
+
+	.lunbo {
+		position: relative;
+	}
+
+	.anniu1 {
+		position: absolute;
+		top: 0px;
+		z-index: 9999;
+		top: 43%;
+		left: 0;
+	}
+
+	.anniu2 {
+		position: absolute;
+		top: 0px;
+		z-index: 9999;
+		top: 43%;
+		right: 0;
+	}
+
+	/deep/ .jiaoxi {
+		margin: 0 !important;
+		padding: 8px !important;
+	}
+
+	/deep/ .tm-col {
+		width: 20% !important;
+	}
+
+	.yifu1 {
+		width: 40%;
+	}
+
+	.yifu2 {
+		width: 58%;
+	}
+
+	.yifu1 image,
+	.yifu21 {
+		width: 100%;
+	}
+
+	.xiao {
+		margin-top: 15px !important;
+	}
+
+	/deep/ .qiehuan1 .text-primary {
+		color: white !important;
+	}
+
+	.guanggao {
+		position: relative;
+	}
+
+	.wenzi {
+		position: absolute;
+		bottom: 1px;
+		right: 0px;
+		background: #000000;
+		width: 140px;
+		height: 55px;
+		font-size: 14px;
+		text-align: center;
+	}
+
+	/deep/ .jiage {
+		background: #1b1b1b;
+	}
+
+	/deep/ .shangpin .white.bk {
+		background-color: #1b1b1b !important;
+	}
+
+	/deep/ .shangpin .tm-cartCellListFood {
+		padding: 0px 0px 15px 0px !important;
+		margin-top: 5px !important;
+		margin-bottom: 20px !important;
+		border-bottom: 1px solid #303030;
+	}
+
+	/deep/ .shangpin .border-t-1.bk {
+		border-top: 1px solid #1b1b1b !important;
+	}
+
+	/deep/ .shangpin .round-3 {
+		width: 90px !important;
+		height: 90px !important;
+	}
+
+	/deep/ .shangpin .tm-cartCellListFood-img {
+		width: 90px !important;
+		height: 90px !important;
+	}
+
+	.fudong {
+		position: fixed;
+		right: 30px;
+		bottom: 80px;
+		background: #0DABF2;
+		width: 60px;
+		height: 60px;
+		border-radius: 30px;
+		text-align: center;
+	}
+
+	.fudong image {
+		width: 40px;
+		margin-top: 6px;
+	}
+
+	.shuzigwc {
+		color: white;
+		font-weight: 700;
+		position: absolute;
+		right: 5px;
+		background: red;
+		padding: 2px;
+		border-radius: 30px;
+		top: 2px;
+		width: 15px;
+		height: 15px;
+		font-size: 12px;
+	}
+
+	/deep/ .shangpin .title {
+		color: white !important;
+	}
+
+	/deep/ .shangpin .text-red {
+		color: white !important;
+	}
 </style>

pages/shopdetail/index.vue

@@ -5,15 +5,15 @@
 			<tm-swiper :list="swipList" :autoplay="true" :indicator-dots="true" height="288px" circular></tm-swiper>
 			<view style="padding: 10px 20px;">
 				<view class="del_title">
-					<view>黑色手提包</view>
+					<view>{{details.goods_name}}</view>
 					<view class="de_tag">运动休闲</view>
 				</view>
 				<view style="display: flex;justify-content: space-between;">
 					<view>
-						<text class="sale_price">￥1299.00</text>
-						<text class="original_price">原价：2088</text>
+						<text class="sale_price">￥{{details.sale_price}}</text>
+						<text class="original_price" v-if="details.market_price">原价：{{details.market_price}}</text>
 					</view>
-					<view style="font-size: 14px;color:#ababab;">销量：42</view>
+					<view style="font-size: 14px;color:#ababab;">销量：{{details.sale_num}}</view>
 				</view>
 			</view>
 		</view>
@@ -24,9 +24,9 @@
 						<view class="line_bottom" style="font-size: 15px;">商品参数：</view>
 						<view class="line_bottom">
 							<view class="" v-for="(item,index) in showList" :key="index">
-								<view class="line_my text-white" >
+								<view class="line_my text-white">
 									<view style="width: 100px;">{{item}}:</view>
-									<view >
+									<view>
 										{{index==0?paramList.name:''}}
 										{{index==1?paramList.style:''}}
 										{{index==2?paramList.goodNo:''}}
@@ -47,28 +47,31 @@
 			</view>
 			<view style="width: 94%;margin:0 auto;" class="remen">
 				<view v-for="(item,index) in listdata" class="round-5 contone  mt-20" :class="index%2==0?'fl':'fr'"
-					@click="goDetail(item.id)" style="background-color: #1B1B1B;">
+					@click.stop="goDetail(item)" style="background-color: #1B1B1B;">
 					<image class="logo" :src="item.image" mode="widthFix"></image>
 					<view class="pa-15 text-size-s">
 						<view class="fr biaoqian">运动休闲</view>
 						<view class="">
-							<text class="text-size-lg">{{item.text}}</text>
+							<text class="text-size-lg" style="box-sizing: border-box;">{{item.text}}</text>
 							<view class="text-gray mt-6">销量：{{item.xiaol}}</view>
-							
+
 						</view>
 						<view class="mt-2 flex-between flex-center">
 							<view class="touxiang mt-30">
 								<text class="text-white text-size-m text-weight-b">{{item.jiage}}</text>
 							</view>
 							<view>
-								<image @click="jiarufuFun(item)" class="remenzan" src="/static/img/86.png"
+								<image @click.stop="jiarufuFun(item)" class="remenzan" src="/static/img/86.png"
 									mode="widthFix"></image>
 							</view>
 						</view>
 					</view>
 				</view>
 				<view style="clear: both;"></view>
-				<view style="clear: both;" class="more ma-40 pt-40" @click="gengmore()">
+
+				<view class="bottom-end" v-if="isEnd || listdata.length==0">
+					没有更多~</view>
+				<view v-else style="clear: both;" class="more ma-40 pt-40" @click="gengmore()">
 					<image src="/static/img/30.png" mode="widthFix"></image>
 					<text class="text-size-s">下拉加载更多~</text>
 				</view>
@@ -79,7 +82,7 @@
 				<image style="width: 18px;height: 16px;" src="/static/img/98.png" mode="widthFix"></image>
 				<text style="margin-left: 10px;">收藏</text>
 			</view>
-			<view class="btn_gouwu" style="background:#303030;" @click="goBar">
+			<view class="btn_gouwu" style="background:#303030;" @click="jiarufuFun()">
 				<image src="/static/img/97.png" mode="widthFix" style="width: 15px;height: 16px;"></image>
 				<text style="margin-left: 10px;">添加购物车</text>
 			</view>
@@ -96,17 +99,17 @@
 	export default {
 		data() {
 			return {
+				isEnd: false,
+				// 商品的id
+				ids: '',
+				// 分类id
+				cartId: '',
+				page: 1,
 				showList: ['名称', '款式', '商品编号', '尺寸', '货号'],
 				xianshi: true,
-				swipList: [{
-						src: '../../static/img/99.png'
-					}, {
-						src: '../../static/img/99.png'
-					},
-					{
-						src: '../../static/img/99.png'
-					}
-				],
+				swipList: [],
+				// 商品数据详情
+				details: {},
 				// 参数列表
 				paramList: {
 					name: '黑色公文包',
@@ -120,53 +123,223 @@
 				listdata: []
 			};
 		},
-		onLoad() {},
+		onLoad(ops) {
+			console.log(ops);
+			this.ids = ops.id;
+			this.cartId = ops.classId;
+		},
 		created() {
 			this.sys = uni.getSystemInfoSync();
-			this.randouh()
+			// this.randouh()
+			// 获取详情数据
+			this.getDetail()
+			// 获取猜你喜欢数据
+			this.getLike()
+
 		},
 		methods: {
-			jiarufuFun(){
-				
+			// 详情数据
+			getDetail() {
+				let that = this;
+				myRequest({
+					url: "/api/ShopGoods/getShopGoodsDetail",
+					method: 'get',
+					data: {
+						id: that.ids,
+					}
+				}).then(res => {
+					if (res.data.code == 200) {
+						console.log(res.data.data, '详情');
+						that.details = res.data.data[0];
+						that.swipList = that.swipList.concat(res.data.data[0].atlas_thumb)
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
 			},
-			goDetail(){
-				
+			// 猜你喜欢
+			getLike() {
+				this.page = 1;
+				let that = this;
+				that.listdata = [];
+				myRequest({
+					url: "/api/ShopGoods/getRecommendGoods",
+					method: 'get',
+					data: {
+						goods_id: that.ids,
+						category_id: that.cartId,
+						page: that.page
+					}
+				}).then(res => {
+					if (res.data.code == 200) {
+						console.log(res.data.data, '喜欢');
+						res.data.data.list.forEach(item => {
+							that.listdata.push({
+								image: item.image,
+								text: item.goods_name,
+								xiaol: item.sale_num,
+								jiage: item.sale_price,
+								id: item.id,
+								category_id: item.category_id
+
+							})
+						})
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
 			},
-			randouh() {
-				let list2 = [],
-					that = this;
-				for (let i = 0; i < 8; i++) {
-					list2.push({
-						image: '../../static/img/90.png',
-						text: '帽子',
-						jiage: '¥ 359.00',
-						xiaol: '128'
-					})
-				}
-				this.listdata = this.listdata.concat(list2)
-				console.log(this.listdata)
+
+			// 点击加载更多
+			gengmore() {
+				if (this.isEnd) return;
+				this.page++;
+				let that = this;
+				myRequest({
+					url: "/api/ShopGoods/getRecommendGoods",
+					method: 'get',
+					data: {
+						goods_id: that.ids,
+						category_id: that.cartId,
+						page: that.page
+					}
+				}).then(res => {
+					if (res.data.code == 200) {
+						console.log(res.data.data, '更多');
+						console.log(that.listdata, '33');
+						if (that.listdata.length < res.data.data.count) {
+							res.data.data.list.forEach(item => {
+								that.listdata.push({
+									image: item.image,
+									text: item.goods_name,
+									xiaol: item.sale_num,
+									jiage: item.sale_price,
+									id: item.id,
+									category_id: item.category_id
+								})
+							})
+						} else {
+							that.page--;
+							that.isEnd = true;
+						}
+
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
 			},
+
+			// 喜欢的详情
+			goDetail(data) {
+				console.log(data);
+				uni.navigateTo({
+					url: "/pages/shopdetail/index?id=" + data.id + '&classId=' + data.category_id,
+				})
+			},
+
 			xiugaiFun() {
 				this.xianshi = false;
 			},
-			gengmore() {
-				this.randouh()
-			},
+
+			// 收藏
 			goCollect() {
 				console.log('收藏');
 			},
+
+			// 加入购物车
+			jiarufuFun(item) {
+				console.log(item);
+				var that = this;
+				myRequest({
+					url: "/api/ShopCart/addShopCart",
+					method: 'post',
+					data: {
+						goods_id: item ? item.id : that.details.id,
+						goods_name: item ? item.text : that.details.goods_name,
+						goods_image: item ? item.image : that.details.image,
+						goods_price: item ? item.jiage : that.details.sale_price,
+						goods_num: 1
+					}
+				}).then(res => {
+					if (res.data.code == 200) {
+						that.$refs.toast.show({
+							model: 'success',
+							label: res.data.msg
+						})
+						// that.getGwc()
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+			},
+
+			//加入购物车
 			goBar() {
-				console.log('购物车');
+				var that = this;
+				// console.log(data)
+				// if (data.type == 2) {
+				myRequest({
+					url: "/api/ShopCart/addShopCart",
+					method: 'post',
+					data: {
+						goods_id: that.details.id,
+						goods_name: that.details.title,
+						goods_image: that.details.img,
+						goods_price: that.details.price,
+						goods_num: 1
+					}
+				}).then(res => {
+					if (res.data.code == 200) {
+						that.$refs.toast.show({
+							model: 'success',
+							label: res.data.msg
+						})
+						that.getGwc()
+					} else {
+						that.$refs.toast.show({
+							model: 'error',
+							label: res.data.msg
+						})
+					}
+				})
+				// } 
+				// else {
+				// 	uni.navigateTo({
+				// 		url: "/pages/shopdetail/index?id=" + data.id,
+				// 	})
+				// }
 			},
+
+			// 立即购买
 			goBuy() {
 				console.log('购买');
 			}
-
 		},
 	}
 </script>
 
 <style lang="scss">
+	.bottom-end {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 12px;
+		padding: 25px 0px;
+	}
+
 	/deep/ .tm-menubars .body {
 		background-color: #1b1b1b !important;
 	}
@@ -354,7 +527,8 @@
 		vertical-align: middle;
 		width: 30px;
 	}
-	.biaoqian{
+
+	.biaoqian {
 		background: #303440;
 		padding: 4px 15px;
 		border-radius: 30px;

tm-vuetify/components/tm-cartCellListFood/tm-cartCellListFood.vue

@@ -5,7 +5,7 @@
 		black_tmeme ? 'bk' : '',
 		border === 'top' ? 'border-t-1' : '',
 		border === 'bottom' ? 'border-b-1' : '',
-	]">
+	]" @click.stop="goXiangQing(mdata)">
 		<view v-if="mdata[keyMap['img']]" class="tm-cartCellListFood-img" :style="{
 			width:imgWidth+'rpx',
 			height:imgWidth+'rpx'
@@ -15,9 +15,9 @@
 		<view class="tm-cartCellListFood-r fulled ">
 			<view class="pl-15">
 				<view class="title  text-size-s text-weight-b text-overflow-2" style="line-height: 32rpx;"
-					:class="[black_tmeme ? 'bk' : '',]">
+					:class="[black_tmeme ? 'bk' : '',]" >
 					{{mdata[keyMap['title']]}}
-					<image v-if="typeclick==4" class="shanchu" src="/static/img/94.png" @click="shanchu(mdata)" ></image>
+					<image v-if="typeclick==4" class="shanchu" src="/static/img/94.png" @click="shanchu(mdata)"  ></image>
 				</view>
 				<view style="min-height: 64rpx;">
 					<view v-if="!dense&&mdata[keyMap['label']]"
@@ -35,14 +35,14 @@
 				<view class="tm-cartCellListFood-price flex-between">
 					<view>
 						<text class="text-size-xs text-red" v-if="typeclick!=7 && typeclick!=6  && typeclick!=8">￥</text>
-						<text v-if="typeclick!=7 && typeclick!=6  && typeclick!=8"
+						<text v-if="typeclick!=7 && typeclick!=6 && typeclick!=8"
 							class="text-size-n text-red text-weight-b px-5">{{mdata[keyMap['price']]}}</text>
 						<text v-if="mdata[keyMap['unit']]"
 							class="text-size-xs text-grey pr-10">/{{mdata[keyMap['unit']]}}</text>
 						<text v-if="mdata[keyMap['salePrice']]"
 							class="text-delete text-size-xxs text-grey">￥{{mdata[keyMap['salePrice']]}}</text>
 					</view>
-					<view class="flex jiarugouwuche" v-if="typeclick==1" @click="jiaru(mdata)">
+					<view class="flex jiarugouwuche" v-if="typeclick==1" @click.stop="jiaru(mdata)">
 						<image class="" src="/static/img/86.png"></image>
 					</view>
 					<view class="flex" v-if="typeclick==2">
@@ -79,10 +79,6 @@
 							<!-- <view class="fukuan" @click="goEvalList(mdata,2)"
 								v-if="mdata[keyMap['orderStatus']]==2 && mdata[keyMap['isEval']]== 1 ">我的评价</view> -->
 						</view>
-						<!-- <view class="flex" v-if="mdata[keyMap['orderStatus']]==-2">
-							<view class="fukuan mr-10">再次购买</view>
-							<view class="fukuan">确认收货</view>
-						</view> -->
 					</view>
 					<view style="position: absolute;right: 20px;" v-if="typeclick==5">
 						<view class="genghuan mr-10">出库</view>
@@ -95,8 +91,7 @@
 					<view style="position: absolute;right: 20px;" v-if="typeclick==7">
 						<view class="genghuan mr-10" @click="genghuan(mdata,1)">更换</view>
 					</view>
-					<view style="position: absolute;right: 20px;" v-if="typeclick==8">
-						
+					<view style="position: absolute;right: 20px;" v-if="typeclick==8">				
 					</view>
 				</view>
 			</view>
@@ -246,6 +241,13 @@
 			this.cNum = this.mdata.buy;
 		},
 		methods: {
+			// 点击详情
+			goXiangQing(data){
+				console.log(data,'详情数据');
+				this.$emit('goXiangQing', {
+					data: data
+				});
+			},
 			// 删除订单
 			shanchu(data){
 				console.log(data,'3');