feat: finish home and product page

api/product.js

@@ -21,3 +21,10 @@ export function fetchProductDetail(id) {
 		url: '/product/detail/'+id
 	})
 }
+
+export function fetchProductLuooDetail(id) {
+	return request({
+		method: 'GET',
+		url: '/product/luoo/detail/'+id
+	})
+}

pages.json

@@ -48,8 +48,10 @@
 					"titleNView": {
 						"type": "transparent"
 					}
-				}
+				},
+				"navigationStyle": "custom"
 			}
+			
 		}, {
 			"path": "pages/set/set",
 			"style": {

pages/address/addressManage.vue

@@ -1,17 +1,17 @@
 <template>
 	<view class="content">
 		<view class="row b-b">
-			<text class="tit">姓名</text>
+			<text class="tit">收货姓名</text>
 			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
 		</view>
 		<view class="row b-b">
 			<text class="tit">手机号码</text>
 			<input class="input" type="number" v-model="addressData.phoneNumber" placeholder="收货人手机号码" placeholder-class="placeholder" />
 		</view>
-		<view class="row b-b">
+	<!-- 	<view class="row b-b">
 			<text class="tit">邮政编码</text>
 			<input class="input" type="number" v-model="addressData.postCode" placeholder="收货人邮政编码" placeholder-class="placeholder" />
-		</view>
+		</view> -->
 <!-- 		<view class="row b-b">
 			<text class="tit">所在区域</text>
 			<text @click="chooseLocation" class="input">
@@ -20,19 +20,19 @@
 			<text class="yticon icon-shouhuodizhi" @click="chooseLocation"></text>
 		</view> -->
 		<view class="row b-b">
-			<text class="tit">所在区域</text>
+			<text class="tit">收货地区</text>
-			<input class="input" type="text" v-model="addressData.prefixAddress" placeholder="所在区域" placeholder-class="placeholder" />
+			<input class="input" type="text" v-model="addressData.prefixAddress" placeholder="省市区县 乡镇" placeholder-class="placeholder" />
 		</view>
 		<view class="row b-b">
 			<text class="tit">详细地址</text>
-			<input class="input" type="text" v-model="addressData.detailAddress" placeholder="详细地址" placeholder-class="placeholder" />
+			<input class="input" type="text" v-model="addressData.detailAddress" placeholder="街道 楼牌号" placeholder-class="placeholder" />
 		</view>
 
 		<view class="row default-row">
 			<text class="tit">设为默认</text>
 			<switch :checked="addressData.defaultStatus==1" color="#fa436a" @change="switchChange" />
 		</view>
-		<button class="add-btn" @click="confirm">提交</button>
+		<button class="add-btn" @click="confirm">保存</button>
 	</view>
 </template>
 
@@ -60,9 +60,9 @@
 			}
 		},
 		onLoad(option) {
-			let title = '新增收货地址';
+			let title = '新增地址';
 			if (option.type === 'edit') {
-				title = '编辑收货地址'
+				title = '编辑地址'
 				fetchAddressDetail(option.id).then(response=>{
 					this.addressData = response.data;
 					this.addressData.prefixAddress = this.addressData.province+this.addressData.city+this.addressData.region;

pages/index/index.vue

@@ -2,8 +2,8 @@
 	<view class="container">
 		<!-- 搜索框 -->
 		<view class="search-box" customStyle="background-color: #ffffff;padding: 24upx;">
-			<u-search class="search" v-model="keyword" :clearabled="true" :showAction="false"
+			<u-search class="search" v-model="keyword" :clearabled="true" :showAction="false" bgColor="#ffffff"
-				bgColor="#ffffff"></u-search>
+				@search="search" @clear="search"></u-search>
 
 			<navigator url="/pages/cart/cart" open-type="switchTab" class="icon-box">
 				<image class="cart-icon" src="../../static/index/cart.svg" mode=""></image>
@@ -106,7 +106,9 @@
 				hotProductList: [],
 				recommendParams: {
 					pageNum: 1,
-					pageSize: 4
+					pageSize: 4,
+					categoryId: '',
+					searchStr: '',
 				},
 				loadingType: 'more',
 				tagCurrent: 0,
@@ -124,7 +126,14 @@
 		},
 		//下拉刷新
 		onPullDownRefresh() {
-			this.recommendParams.pageNum = 1;
+			this.recommendParams = {
+				pageNum: 1,
+				pageSize: 4,
+				searchStr: '',
+				categoryId: ''
+			};
+			this.tagCurrent = 0
+			this.keyword = ''			
 			this.loadData();
 		},
 		//加载更多
@@ -167,7 +176,7 @@
 				});
 				fetchContentV2().then(response => {
 					this.categoryList = [{
-						id: 0,
+						id: '',
 						name: "全部"
 					}].concat(response.data.categoryList)
 				});
@@ -220,8 +229,31 @@
 				}
 			},
 			changeTag(index) {
-				console.log('index', index)
+				console.log('index', index, this.categoryList[index])
 				this.tagCurrent = index
+				const currentTag = this.categoryList[index]
+				this.recommendParams.pageNum = 1
+				this.recommendParams.pageSize = 4
+				this.recommendParams.categoryId = currentTag.id
+				this.getProductList()
+			},
+			search() {
+				this.recommendParams.searchStr = this.keyword
+				this.recommendParams.pageNum = 1
+				this.recommendParams.pageSize = 4
+				this.getProductList()
+			},
+			getProductList() {
+				fetchRecommendProductList(this.recommendParams).then(response => {
+					this.recommendProductList = response.data;
+					if (response.data.length === 0) {
+						this.loadingType = 'nomore';
+					} else {
+						this.loadingType = 'more';
+					}
+					uni.stopPullDownRefresh();
+				})
+				
 			}
 		},
 	}
@@ -330,6 +362,7 @@
 
 	/* 标签列表 */
 	.tag-list {
+
 		// padding: 0 36upx;
 		.u-scroll-box {
 			view {

pages/product/product.vue

@@ -1,33 +1,39 @@
 <template>
 	<view class="container">
+		
 		<view class="carousel">
-			<swiper indicator-dots circular=true duration="400">
+			<u-swiper :list="imgList" :autoplay="false" indicatorStyle="right: 20px" duration="400" mode="number"
-				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
+				height="750" indicator-pos="bottomRight" class="swiper">
-					<view class="image-wrapper">
+			</u-swiper>
-						<image :src="item.src" class="loaded" mode="aspectFill"></image>
+			<view class="btn-box">
-					</view>
+				<view class="goback" @click="goBack">
-				</swiper-item>
+					<image src="@/static/icons/icon_back.png" mode=""></image>
-			</swiper>
+				</view>
+				<view class="share" @click="share">
+					<image src="@/static/icons/icon_share.png" mode=""></image>
+				</view>
+			</view>
 		</view>
 
 		<view class="introduce-section">
-			<text class="title">{{product.name}}</text><br>
-			<text class="title2">{{product.subTitle}}</text>
 			<view class="price-box">
 				<text class="price-tip">¥</text>
 				<text class="price">{{product.price}}</text>
 				<text class="m-price">¥{{product.originalPrice}}</text>
 				<!-- <text class="coupon-tip">7折</text> -->
 			</view>
-			<view class="bot-row">
+			<text class="title">{{product.name}}</text><br>
+			<text class="title2">{{product.subTitle}}</text>
+			
+	<!-- 		<view class="bot-row">
 				<text>销量: {{product.sale}}</text>
 				<text>库存: {{product.stock}}</text>
 				<text>浏览量: 768</text>
-			</view>
+			</view> -->
 		</view>
 
 		<!--  分享 -->
-		<view class="share-section" @click="share">
+<!-- 		<view class="share-section" @click="share">
 			<view class="share-icon">
 				<text class="yticon icon-xingxing"></text>
 				返
@@ -39,7 +45,7 @@
 				<text class="yticon icon-you"></text>
 			</view>
 
-		</view>
+		</view> -->
 
 		<view class="c-list">
 			<view class="c-row b-b" @click="toggleSpec">
@@ -78,7 +84,7 @@
 		</view>
 
 		<!-- 评价 -->
-		<view class="eva-section">
+	<!-- 	<view class="eva-section">
 			<view class="e-header">
 				<text class="tit">评价</text>
 				<text>(86)</text>
@@ -86,7 +92,8 @@
 				<text class="yticon icon-you"></text>
 			</view>
 			<view class="eva-box">
-				<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
+				<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg"
+					mode="aspectFill"></image>
 				<view class="right">
 					<text class="name">Leo yo</text>
 					<text class="con">商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</text>
@@ -96,7 +103,7 @@
 					</view>
 				</view>
 			</view>
-		</view>
+		</view> -->
 
 		<!-- 品牌信息 -->
 		<view class="brand-info">
@@ -123,22 +130,29 @@
 
 		<!-- 底部操作菜单 -->
 		<view class="page-bottom">
-			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
-				<text class="yticon icon-xiatubiao--copy"></text>
-				<text>首页</text>
-			</navigator>
 			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
-				<text class="yticon icon-gouwuche"></text>
+				<!-- <text class="yticon icon-gouwuche"></text> -->
-				<text>购物车</text>
+				<!-- <text>购物车</text> -->
+				<image class="pdicon" src="@/static/index/cart.svg"></image>
+				<u-badge type="error" class="cart-badge" :overflow-count="9" :count="cartNum"></u-badge>
+				
+			</navigator>
+			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
+				<!-- <text class="yticon icon-xiatubiao--copy"></text> -->
+				<!-- <text>首页</text> -->
+				<image class="pdicon" src="@/static/index/serverCenter.svg"></image>
 			</navigator>
 			<view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
-				<text class="yticon icon-shoucang"></text>
+				<!-- <text class="yticon icon-shoucang"></text> -->
-				<text>收藏</text>
+				<!-- <text>收藏</text> -->
+				<image v-if="favorite" class="pdicon" src="@/static/index/collections-active.svg"></image>
+				<image v-else class="pdicon" src="@/static/index/collections.svg"></image>
+				
 			</view>
 
 			<view class="action-btn-group">
-				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
 				<button type="primary" class=" action-btn no-border add-cart-btn" @click="addToCart">加入购物车</button>
+				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
 			</view>
 		</view>
 
@@ -164,8 +178,9 @@
 				<view v-for="(item,index) in specList" :key="index" class="attr-list">
 					<text>{{item.name}}</text>
 					<view class="item-list">
-						<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id" :key="childIndex" class="tit"
+						<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id"
-						 :class="{selected: childItem.selected}" @click="selectSpec(childIndex, childItem.pid)">
+							:key="childIndex" class="tit" :class="{selected: childItem.selected}"
+							@click="selectSpec(childIndex, childItem.pid)">
 							{{childItem.name}}
 						</text>
 					</view>
@@ -218,7 +233,8 @@
 <script>
 	import share from '@/components/share.vue';
 	import {
-		fetchProductDetail
+		fetchProductDetail,
+		fetchProductLuooDetail
 	} from '@/api/product.js';
 	import {
 		addCartItem
@@ -235,6 +251,9 @@
 		deleteProductCollection,
 		productCollectionDetail
 	} from '@/api/memberProductCollection.js';
+	import {
+		fetchCartList
+	} from '@/api/cart.js';
 	import {
 		mapState
 	} from 'vuex';
@@ -294,7 +313,8 @@
 				attrList: [],
 				promotionTipList: [],
 				couponState: 0,
-				couponList: []
+				couponList: [],
+				cartNum: 0,
 			};
 		},
 		async onLoad(options) {
@@ -326,7 +346,11 @@
 		},
 		methods: {
 			async loadData(id) {
-				fetchProductDetail(id).then(response => {
+				// fetchProductLuooDetail(id).then(response => {
+				// 	console.log(response)
+				// 	this.product = response;
+				// });
+				await fetchProductDetail(id).then(async response => {
 					this.product = response.data.product;
 					this.skuStockList = response.data.skuStockList;
 					this.brand = response.data.brand;
@@ -336,9 +360,10 @@
 					this.initAttrList(response.data);
 					this.initPromotionTipList(response.data);
 					this.initProductDesc();
-					this.handleReadHistory();
+					await this.handleReadHistory();
 					this.initProductCollection();
 				});
+				this.getCartNum()
 			},
 			//规格弹窗开关
 			toggleSpec() {
@@ -366,10 +391,10 @@
 			toggleCoupon(type) {
 				fetchProductCouponList(this.product.id).then(response => {
 					this.couponList = response.data;
-					if(this.couponList==null||this.couponList.length==0){
+					if (this.couponList == null || this.couponList.length == 0) {
 						uni.showToast({
-							title:"暂无可领优惠券",
+							title: "暂无可领优惠券",
-							icon:"none"
+							icon: "none"
 						})
 						return;
 					}
@@ -468,7 +493,9 @@
 				for (let item of tempPics) {
 					if (item != null && item != '') {
 						this.imgList.push({
-							src: item
+							"src": item,
+							"image": item,
+							"type": 'image'
 						});
 					}
 				}
@@ -578,6 +605,7 @@
 			//初始化商品详情信息
 			initProductDesc() {
 				let rawhtml = this.product.detailMobileHtml;
+				if(!rawhtml){ return}
 				let tempNode = document.createElement('div');
 				tempNode.innerHTML = rawhtml;
 				let imgs = tempNode.getElementsByTagName('img');
@@ -590,6 +618,7 @@
 			},
 			//处理创建浏览记录
 			handleReadHistory() {
+				console.log('handleReadHistory')
 				if (this.hasLogin) {
 					let data = {
 						productId: this.product.id,
@@ -661,6 +690,7 @@
 						title: response.message,
 						duration: 1500
 					})
+					this.getCartNum()
 				});
 			},
 			//检查登录状态并弹出登录框
@@ -688,6 +718,7 @@
 			},
 			//初始化收藏状态
 			initProductCollection() {
+				console.log('this.hasLogin', this.hasLogin)
 				if (this.hasLogin) {
 					productCollectionDetail({
 						productId: this.product.id
@@ -697,12 +728,22 @@
 				}
 			},
 			//跳转到品牌详情页
-			navToBrandDetail(){
+			navToBrandDetail() {
 				let id = this.brand.id;
 				uni.navigateTo({
 					url: `/pages/brand/brandDetail?id=${id}`
 				})
 			},
+			// 返回
+			goBack() {
+				uni.navigateBack()
+			},
+			// 购物车数量
+			getCartNum() {
+				fetchCartList().then(response => {
+					this.cartNum = response.data.reduce((sum, item) => sum + item.quantity, 0);
+				})
+			}
 		},
 
 	}
@@ -712,6 +753,7 @@
 	page {
 		background: $page-color-base;
 		padding-bottom: 160upx;
+		padding-top: var(--status-bar-height);
 	}
 
 	.icon-you {
@@ -722,9 +764,26 @@
 	.carousel {
 		height: 722upx;
 		position: relative;
+		.btn-box {
+			width: 100vw;
+			position: absolute;
+			top: calc(var(--status-bar-height) + 38upx);
+			left: 0upx;
+			padding: 38upx;
+			@include flex(x, center, center);
+			justify-content: space-between;
+			/* align-self: ; */
+			view image {
+				width: 60upx;
+				height: 60upx;
+			}
+		}
 
-		swiper {
+		.swiper {
 			height: 100%;
+			.u-swiper-indicator {
+				bottom: 36upx!important;
+			}
 		}
 
 		.image-wrapper {
@@ -750,7 +809,7 @@
 	/* 标题简介 */
 	.introduce-section {
 		background: #fff;
-		padding: 20upx 30upx;
+		padding: 36upx;
 
 		.title {
 			font-size: 32upx;
@@ -996,6 +1055,9 @@
 	.detail-desc {
 		background: #fff;
 		margin-top: 16upx;
+		/* margin-bottom: 60upx; */
+		margin-bottom: constant(safe-area-inset-bottom);
+		margin-bottom: env(safe-area-inset-bottom);
 
 		.d-header {
 			display: flex;
@@ -1215,17 +1277,18 @@
 	/* 底部操作菜单 */
 	.page-bottom {
 		position: fixed;
-		left: 30upx;
+		left: 0;
-		bottom: 30upx;
+		bottom: 0;
 		z-index: 95;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		width: 690upx;
+		width: 100vw;
-		height: 100upx;
+		height: 144upx;
-		background: rgba(255, 255, 255, .9);
+		background: #ffffff;
-		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
+		box-sizing: content-box;
-		border-radius: 16upx;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
 
 		.p-b-btn {
 			display: flex;
@@ -1236,6 +1299,11 @@
 			color: $font-color-base;
 			width: 96upx;
 			height: 80upx;
+			position: relative;
+			.cart-badge>view {
+				top: 0upx !important;
+				right: 0upx !important;
+			}
 
 			.yticon {
 				font-size: 40upx;
@@ -1243,6 +1311,11 @@
 				color: $font-color-light;
 			}
 
+			.pdicon {
+				width: 48upx;
+				height: 48upx;				
+			}
+
 			&.active,
 			&.active .yticon {
 				color: $uni-color-primary;
@@ -1261,25 +1334,10 @@
 		.action-btn-group {
 			display: flex;
 			height: 76upx;
-			border-radius: 100px;
 			overflow: hidden;
-			box-shadow: 0 20upx 40upx -16upx #fa436a;
-			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
-			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
 			margin-left: 20upx;
 			position: relative;
 
-			&:after {
-				content: '';
-				position: absolute;
-				top: 50%;
-				right: 50%;
-				transform: translateY(-50%);
-				height: 28upx;
-				width: 0;
-				border-right: 1px solid rgba(255, 255, 255, .5);
-			}
-
 			.action-btn {
 				display: flex;
 				align-items: center;
@@ -1288,9 +1346,19 @@
 				height: 100%;
 				font-size: $font-base;
 				padding: 0;
-				border-radius: 0;
+				border-radius: 60upx;
-				background: transparent;
 			}
+
+			.action-btn.add-cart-btn {
+				background-color: rgba(0, 0, 0, 0.05);
+				color: rgba(0, 0, 0, 0.95);
+				margin-right: 10upx;
+			}
+
+			.action-btn.buy-now-btn {
+				background-color: #CC342D;
+			}
+
 		}
 	}
 

uni.scss

@@ -24,7 +24,7 @@ $border-color-light: #EBEEF5;
 /* 图片加载中颜色 */
 $image-bg-color: #eee;
 /* 行为相关颜色 */
-$uni-color-primary:#fa436a;
+$uni-color-primary:#CC342D;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;