From d2d931ed676406dbd9f6d4714591db586fe88d8d Mon Sep 17 00:00:00 2001
From: hu-qi <huqi1008301@163.com>
Date: Sat, 22 Jun 2024 07:08:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=9C=AA=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E6=97=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue     |  884 +++++------
 pages/product/product.vue | 3138 +++++++++++++++++++------------------
 pages/public/login.vue    |    2 +-
 utils/requestUtil.js      |    5 +-
 4 files changed, 2026 insertions(+), 2003 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4e7a33a..0428bb2 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,442 +1,444 @@
-<template>
-	<view class="container">
-		<!-- 搜索框 -->
-		<view class="search-box" customStyle="background-color: #ffffff;padding: 24upx;">
-			<u-search class="search" v-model="keyword" :clearabled="true" :showAction="false" bgColor="#ffffff"
-				@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>
-				<u-badge type="error" class="cart-badge" :overflow-count="9" :count="cartNum"></u-badge>
-			</navigator>
-		</view>
-
-		<!-- 服务列表 -->
-		<view class="server-list">
-			<view class="server-item" v-for="item in serverList" :key="item.code" @click="goto(item.code)">
-				<view class="server-icon">
-					<image :src="`../../static/index/${item.code}.svg`" mode=""></image>
-				</view>
-				<view class="server-text">{{item.title}}</view>
-			</view>
-
-		</view>
-
-		<!-- 头部轮播 -->
-		<view class="carousel-section">
-			<swiper autoplay class="carousel" circular>
-				<swiper-item v-for="(item, index) in newAdvertiseList" :key="index"
-					:class="['carousel-item',item.length == 1?'single':'']">
-					<image @click="navToAdvertisePage(subItem)" mode="aspectFill" :key="subItem.id"
-						v-for="subItem in item" :src="subItem.pic"></image>
-				</swiper-item>
-			</swiper>
-		</view>
-
-		<!-- 标签列表 -->
-		<u-sticky bgColor="#f5f5f5">
-			<u-tabs bgColor="#f5f5f5" class="tag-list" :list="categoryList" :current="tagCurrent" @change="changeTag"
-				:activeStyle="{
-            color: '#ffffff',
-            fontWeight: 'bold',
-            transform: 'scale(1.05)'
-        }" active-color="#ffffff" :bar-height="0" :active-item-style="{
-			backgroundColor: '#CC342D'
-		}"></u-tabs>
-		</u-sticky>
-		<!-- 商城列表 -->
-		<view class="product-section">
-			<view v-for="(item, index) in recommendProductList" :key="index" class="product-item"
-				@click="navToDetailPage(item)">
-				<view class="image-wrapper">
-					<image :src="item.pic" mode="aspectFill"></image>
-				</view>
-				<text class="title clamp">{{item.name}}</text>
-				<!-- <text class="title2 clamp">{{item.subTitle}}</text> -->
-				<text class="price">￥{{item.price}}</text>
-			</view>
-		</view>
-		<uni-load-more :status="loadingType"></uni-load-more>
-	</view>
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex';
-	import {
-		fetchContent,
-		fetchContentV2,
-		fetchRecommendProductList
-	} from '@/api/home.js';
-	import {
-		fetchCartList
-	} from '@/api/cart.js';
-	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
-	import {
-		groupData
-	} from '@/utils/index.js'
-	export default {
-		components: {
-			uniLoadMore
-		},
-		data() {
-			return {
-				keyword: '',
-				cartNum: 0,
-				serverList: [{
-						code: 'myOrders',
-						title: '我的订单',
-					},
-					{
-						code: 'collections',
-						title: '收藏',
-					},
-					{
-						code: 'records',
-						title: '足迹',
-					},
-					{
-						code: 'serverCenter',
-						title: '客服中心',
-					},
-				],
-				advertiseList: [],
-				recommendProductList: [],
-				hotProductList: [],
-				recommendParams: {
-					pageNum: 1,
-					pageSize: 4,
-					categoryId: '',
-					searchStr: '',
-				},
-				loadingType: 'more',
-				tagCurrent: 0,
-				categoryList: [{
-					id: '',
-					name: '全部',
-				}]
-			};
-		},
-		onLoad() {
-			// this.loadData();
-		},
-		onShow() {
-			this.loadData();
-		},
-		//下拉刷新
-		onPullDownRefresh() {
-			this.recommendParams = {
-				pageNum: 1,
-				pageSize: 4,
-				searchStr: '',
-				categoryId: ''
-			};
-			this.tagCurrent = 0
-			this.keyword = ''			
-			this.loadData();
-		},
-		//加载更多
-		onReachBottom() {
-			this.recommendParams.pageNum++;
-			this.loadingType = 'loading';
-			fetchRecommendProductList(this.recommendParams).then(response => {
-				let addProductList = response.data;
-				if (response.data.length === 0) {
-					//没有更多了
-					this.recommendParams.pageNum--;
-					this.loadingType = 'nomore';
-				} else {
-					this.recommendProductList = this.recommendProductList.concat(addProductList);
-					this.loadingType = 'more';
-				}
-			})
-		},
-		computed: {
-			...mapState(['hasLogin']),
-			newAdvertiseList() {
-				console.log(groupData(this.advertiseList, 2))
-				return groupData(this.advertiseList, 2)
-			}
-		},
-		filters: {},
-		methods: {
-			/**
-			 * 加载数据
-			 */
-			async loadData() {
-				fetchContent().then(response => {
-					console.log("onLoad", response.data);
-					this.advertiseList = response.data.advertiseList;
-					this.hotProductList = response.data.hotProductList;
-					fetchRecommendProductList(this.recommendParams).then(response => {
-						this.recommendProductList = response.data;
-						uni.stopPullDownRefresh();
-					})
-				});
-				fetchContentV2().then(response => {
-					this.categoryList = [{
-						id: '',
-						name: "全部"
-					}].concat(response.data.categoryList)
-				});
-				if (!this.hasLogin) {
-					return;
-				}
-				fetchCartList().then(response => {
-					this.cartNum = response.data.reduce((sum, item) => sum + item.quantity, 0);
-				})
-			},
-			//商品详情页
-			navToDetailPage(item) {
-				let id = item.id;
-				uni.navigateTo({
-					url: `/pages/product/product?id=${id}`
-				})
-			},
-			//广告详情页
-			navToAdvertisePage(item) {
-				let id = item.id;
-				console.log("navToAdvertisePage", item)
-			},
-			// 跳转
-			goto(code) {
-				switch (code) {
-					case 'myOrders':
-						uni.navigateTo({
-							url: '/pages/order/order?state=0'
-						})
-						break;
-					case 'collections':
-						uni.navigateTo({
-							url: '/pages/user/productCollection'
-						})
-						break;
-					case 'records':
-						uni.navigateTo({
-							url: '/pages/user/readHistory'
-						})
-						break;
-					case 'serverCenter':
-						uni.showToast({
-							title: '开发中，尽请期待!',
-							icon: 'none',
-							duration: 2000
-						});
-						break;
-					default:
-						break;
-				}
-			},
-			changeTag(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();
-				})
-				
-			}
-		},
-	}
-</script>
-
-<style lang="scss">
-	page {
-		background: #f5f5f5;
-	}
-
-	.m-t {
-		margin-top: 16upx;
-	}
-
-	/* 搜索 */
-	.search-box {
-		padding: 8upx 12upx 32upx 36upx;
-
-		@include flex(x, center, center);
-
-		.search {
-			@include flex(x, center, center);
-			flex: 1;
-		}
-
-		.icon-box {
-			position: relative;
-			@include flex(x, center, center);
-			width: 56upx;
-			height: 56upx;
-		}
-
-		.cart-icon {
-			width: 48upx;
-			height: 48upx;
-		}
-
-		.cart-badge>view {
-			top: 0upx !important;
-			right: -12upx !important;
-		}
-	}
-
-	/* 服务列表 */
-	.server-list {
-		width: 100vw;
-		min-height: 120upx;
-		padding: 0 36upx;
-		display: flex;
-		flex-wrap: wrap;
-
-		.server-item {
-			width: 25%;
-			height: 120upx;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-
-			.server-icon {
-				image {
-					width: 48upx;
-					height: 48upx;
-				}
-			}
-
-			.server-text {
-				color: rgba(0, 0, 0, 0.7);
-			}
-		}
-
-	}
-
-
-	/* 头部 轮播图 */
-	.carousel-section {
-		position: relative;
-
-		.carousel {
-			height: 180upx;
-			padding: 36rpx;
-			box-sizing: content-box;
-
-			.carousel-item {
-				width: 100%;
-				height: 100%;
-				padding: 0 28upx;
-				overflow: hidden;
-				@include flex(x, center, center);
-
-				image {
-					height: 180upx;
-					width: 328upx;
-					margin: 0upx 10upx;
-				}
-			}
-
-			.carousel-item.single {
-				image {
-					width: 656upx;
-				}
-			}
-		}
-
-	}
-
-	/* 标签列表 */
-	.tag-list {
-
-		// padding: 0 36upx;
-		.u-scroll-box {
-			view {
-				background-color: #ffffff;
-				border-radius: 60upx;
-				margin: 9upx;
-			}
-		}
-	}
-
-	/* 商品列表 */
-	.product-section {
-		display: flex;
-		flex-wrap: wrap;
-		padding: 0 36upx;
-
-		.product-item {
-			display: flex;
-			flex-direction: column;
-			width: 48%;
-			background-color: #ffffff;
-			margin-bottom: 36upx;
-			border-radius: 12upx;
-
-			&:nth-child(2n+1) {
-				margin-right: 4%;
-			}
-		}
-
-		.image-wrapper {
-			width: 100%;
-			height: 324upx;
-			border-radius: 3px;
-			overflow: hidden;
-
-			image {
-				width: 100%;
-				height: 100%;
-				opacity: 1;
-			}
-		}
-
-		.image-wrapper-brand {
-			width: 100%;
-			height: 150upx;
-			border-radius: 3px;
-			overflow: hidden;
-
-			image {
-				width: 100%;
-				height: 100%;
-				opacity: 1;
-			}
-		}
-
-		.title {
-			padding: 0 36upx;
-			font-size: $font-base;
-			color: $font-color-dark;
-			line-height: 80upx;
-		}
-
-		.title2 {
-			font-size: $font-sm;
-			color: $font-color-light;
-			line-height: 40upx;
-		}
-
-		.price {
-			padding: 0 36upx 36upx 36upx;
-			font-size: $font-lg;
-			color: #000000;
-			line-height: 1;
-			font-weight: 500;
-		}
-	}
+<template>
+	<view class="container">
+		<!-- 搜索框 -->
+		<view class="search-box" customStyle="background-color: #ffffff;padding: 24upx;">
+			<u-search class="search" v-model="keyword" :clearabled="true" :showAction="false" bgColor="#ffffff"
+				@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>
+				<u-badge type="error" class="cart-badge" :overflow-count="9" :count="cartNum"></u-badge>
+			</navigator>
+		</view>
+
+		<!-- 服务列表 -->
+		<view class="server-list">
+			<view class="server-item" v-for="item in serverList" :key="item.code" @click="goto(item.code)">
+				<view class="server-icon">
+					<image :src="`../../static/index/${item.code}.svg`" mode=""></image>
+				</view>
+				<view class="server-text">{{item.title}}</view>
+			</view>
+
+		</view>
+
+		<!-- 头部轮播 -->
+		<view class="carousel-section">
+			<swiper autoplay class="carousel" circular>
+				<swiper-item v-for="(item, index) in newAdvertiseList" :key="index"
+					:class="['carousel-item',item.length == 1?'single':'']">
+					<image @click="navToAdvertisePage(subItem)" mode="aspectFill" :key="subItem.id"
+						v-for="subItem in item" :src="subItem.pic"></image>
+				</swiper-item>
+			</swiper>
+		</view>
+
+		<!-- 标签列表 -->
+		<u-sticky bgColor="#f5f5f5">
+			<u-tabs bgColor="#f5f5f5" class="tag-list" :height="56" :list="categoryList" :current="tagCurrent" @change="changeTag"
+				:activeStyle="{
+            color: '#ffffff',
+            fontWeight: 'bold',
+            transform: 'scale(1.05)'
+        }" active-color="#ffffff" :bar-height="0" :active-item-style="{
+			backgroundColor: '#CC342D'
+		}"></u-tabs>
+		</u-sticky>
+		<!-- 商城列表 -->
+		<view class="product-section">
+			<view v-for="(item, index) in recommendProductList" :key="index" class="product-item"
+				@click="navToDetailPage(item)">
+				<view class="image-wrapper">
+					<image :src="item.pic" mode="aspectFill"></image>
+				</view>
+				<text class="title clamp">{{item.name}}</text>
+				<!-- <text class="title2 clamp">{{item.subTitle}}</text> -->
+				<text class="price">￥{{item.price}}</text>
+			</view>
+		</view>
+		<uni-load-more :status="loadingType"></uni-load-more>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	import {
+		fetchContent,
+		fetchContentV2,
+		fetchRecommendProductList
+	} from '@/api/home.js';
+	import {
+		fetchCartList
+	} from '@/api/cart.js';
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import {
+		groupData
+	} from '@/utils/index.js'
+	export default {
+		components: {
+			uniLoadMore
+		},
+		data() {
+			return {
+				keyword: '',
+				cartNum: 0,
+				serverList: [{
+						code: 'myOrders',
+						title: '我的订单',
+					},
+					{
+						code: 'collections',
+						title: '收藏',
+					},
+					{
+						code: 'records',
+						title: '足迹',
+					},
+					{
+						code: 'serverCenter',
+						title: '客服中心',
+					},
+				],
+				advertiseList: [],
+				recommendProductList: [],
+				hotProductList: [],
+				recommendParams: {
+					pageNum: 1,
+					pageSize: 4,
+					categoryId: '',
+					searchStr: '',
+				},
+				loadingType: 'more',
+				tagCurrent: 0,
+				categoryList: [{
+					id: '',
+					name: '全部',
+				}]
+			};
+		},
+		onLoad() {
+			// this.loadData();
+		},
+		onShow() {
+			this.loadData();
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			this.recommendParams = {
+				pageNum: 1,
+				pageSize: 4,
+				searchStr: '',
+				categoryId: ''
+			};
+			this.tagCurrent = 0
+			this.keyword = ''
+			this.loadData();
+		},
+		//加载更多
+		onReachBottom() {
+			this.recommendParams.pageNum++;
+			this.loadingType = 'loading';
+			fetchRecommendProductList(this.recommendParams).then(response => {
+				let addProductList = response.data;
+				if (response.data.length === 0) {
+					//没有更多了
+					this.recommendParams.pageNum--;
+					this.loadingType = 'nomore';
+				} else {
+					this.recommendProductList = this.recommendProductList.concat(addProductList);
+					this.loadingType = 'more';
+				}
+			})
+		},
+		computed: {
+			...mapState(['hasLogin']),
+			newAdvertiseList() {
+				console.log(groupData(this.advertiseList, 2))
+				return groupData(this.advertiseList, 2)
+			}
+		},
+		filters: {},
+		methods: {
+			/**
+			 * 加载数据
+			 */
+			async loadData() {
+				fetchContent().then(response => {
+					console.log("onLoad", response.data);
+					this.advertiseList = response.data.advertiseList;
+					this.hotProductList = response.data.hotProductList;
+					fetchRecommendProductList(this.recommendParams).then(response => {
+						this.recommendProductList = response.data;
+						uni.stopPullDownRefresh();
+					})
+				});
+				fetchContentV2().then(response => {
+					this.categoryList = [{
+						id: '',
+						name: "全部"
+					}].concat(response.data.categoryList)
+				});
+				console.log('this.hasLogin', this.hasLogin)
+				if (!this.hasLogin) {
+					return;
+				}
+
+				fetchCartList().then(response => {
+					this.cartNum = response.data.reduce((sum, item) => sum + item.quantity, 0);
+				})
+			},
+			//商品详情页
+			navToDetailPage(item) {
+				let id = item.id;
+				uni.navigateTo({
+					url: `/pages/product/product?id=${id}`
+				})
+			},
+			//广告详情页
+			navToAdvertisePage(item) {
+				let id = item.id;
+				console.log("navToAdvertisePage", item)
+			},
+			// 跳转
+			goto(code) {
+				switch (code) {
+					case 'myOrders':
+						uni.navigateTo({
+							url: '/pages/order/order?state=0'
+						})
+						break;
+					case 'collections':
+						uni.navigateTo({
+							url: '/pages/user/productCollection'
+						})
+						break;
+					case 'records':
+						uni.navigateTo({
+							url: '/pages/user/readHistory'
+						})
+						break;
+					case 'serverCenter':
+						uni.showToast({
+							title: '开发中，尽请期待!',
+							icon: 'none',
+							duration: 2000
+						});
+						break;
+					default:
+						break;
+				}
+			},
+			changeTag(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();
+				})
+
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #f5f5f5;
+	}
+
+	.m-t {
+		margin-top: 16upx;
+	}
+
+	/* 搜索 */
+	.search-box {
+		padding: 8upx 12upx 32upx 36upx;
+
+		@include flex(x, center, center);
+
+		.search {
+			@include flex(x, center, center);
+			flex: 1;
+		}
+
+		.icon-box {
+			position: relative;
+			@include flex(x, center, center);
+			width: 56upx;
+			height: 56upx;
+		}
+
+		.cart-icon {
+			width: 48upx;
+			height: 48upx;
+		}
+
+		.cart-badge>view {
+			top: 0upx !important;
+			right: -12upx !important;
+		}
+	}
+
+	/* 服务列表 */
+	.server-list {
+		width: 100vw;
+		min-height: 120upx;
+		padding: 0 36upx;
+		display: flex;
+		flex-wrap: wrap;
+
+		.server-item {
+			width: 25%;
+			height: 120upx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			.server-icon {
+				image {
+					width: 48upx;
+					height: 48upx;
+				}
+			}
+
+			.server-text {
+				color: rgba(0, 0, 0, 0.7);
+			}
+		}
+
+	}
+
+
+	/* 头部 轮播图 */
+	.carousel-section {
+		position: relative;
+
+		.carousel {
+			height: 180upx;
+			padding: 36rpx;
+			box-sizing: content-box;
+
+			.carousel-item {
+				width: 100%;
+				height: 100%;
+				padding: 0 28upx;
+				overflow: hidden;
+				@include flex(x, center, center);
+
+				image {
+					height: 180upx;
+					width: 328upx;
+					margin: 0upx 10upx;
+				}
+			}
+
+			.carousel-item.single {
+				image {
+					width: 656upx;
+				}
+			}
+		}
+
+	}
+
+	/* 标签列表 */
+	.tag-list {
+
+		// padding: 0 36upx;
+		.u-scroll-box {
+			view {
+				background-color: #ffffff;
+				border-radius: 60upx;
+				margin: 9upx;
+			}
+		}
+	}
+
+	/* 商品列表 */
+	.product-section {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 36upx;
+
+		.product-item {
+			display: flex;
+			flex-direction: column;
+			width: 48%;
+			background-color: #ffffff;
+			margin-bottom: 36upx;
+			border-radius: 12upx;
+
+			&:nth-child(2n+1) {
+				margin-right: 4%;
+			}
+		}
+
+		.image-wrapper {
+			width: 100%;
+			height: 324upx;
+			border-radius: 3px;
+			overflow: hidden;
+
+			image {
+				width: 100%;
+				height: 100%;
+				opacity: 1;
+			}
+		}
+
+		.image-wrapper-brand {
+			width: 100%;
+			height: 150upx;
+			border-radius: 3px;
+			overflow: hidden;
+
+			image {
+				width: 100%;
+				height: 100%;
+				opacity: 1;
+			}
+		}
+
+		.title {
+			padding: 0 36upx;
+			font-size: $font-base;
+			color: $font-color-dark;
+			line-height: 80upx;
+		}
+
+		.title2 {
+			font-size: $font-sm;
+			color: $font-color-light;
+			line-height: 40upx;
+		}
+
+		.price {
+			padding: 0 36upx 36upx 36upx;
+			font-size: $font-lg;
+			color: #000000;
+			line-height: 1;
+			font-weight: 500;
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/product/product.vue b/pages/product/product.vue
index 272abb3..9201975 100644
--- a/pages/product/product.vue
+++ b/pages/product/product.vue
@@ -1,1560 +1,1580 @@
-<template>
-	<view class="container">
-		
-		<view class="carousel">
-			<u-swiper :list="imgList" :autoplay="false" indicatorStyle="right: 20px" duration="400" mode="number"
-				height="750" indicator-pos="bottomRight" class="swiper">
-			</u-swiper>
-			<view class="btn-box">
-				<view class="goback" @click="goBack">
-					<image src="@/static/icons/icon_back.png" mode=""></image>
-				</view>
-				<view class="share" @click="share">
-					<image src="@/static/icons/icon_share.png" mode=""></image>
-				</view>
-			</view>
-		</view>
-
-		<view class="introduce-section">
-			<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>
-			<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 class="share-section" @click="share">
-			<view class="share-icon">
-				<text class="yticon icon-xingxing"></text>
-				返
-			</view>
-			<text class="tit">该商品分享可领49减10红包</text>
-			<text class="yticon icon-bangzhu1"></text>
-			<view class="share-btn">
-				立即分享
-				<text class="yticon icon-you"></text>
-			</view>
-
-		</view> -->
-
-		<view class="c-list">
-			<view class="c-row b-b" @click="toggleSpec">
-				<text class="tit">购买类型</text>
-				<view class="con">
-					<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
-						{{sItem.name}}
-					</text>
-				</view>
-				<text class="yticon icon-you"></text>
-			</view>
-			<view class="c-row b-b" @click="toggleAttr">
-				<text class="tit">商品参数</text>
-				<view class="con">
-					<text class="con t-r">查看</text>
-				</view>
-				<text class="yticon icon-you"></text>
-			</view>
-			<view class="c-row b-b" @click="toggleCoupon('show')">
-				<text class="tit">优惠券</text>
-				<text class="con t-r red">领取优惠券</text>
-				<text class="yticon icon-you"></text>
-			</view>
-			<view class="c-row b-b">
-				<text class="tit">促销活动</text>
-				<view class="con-list">
-					<text v-for="item in promotionTipList" :key="item">{{item}}</text>
-				</view>
-			</view>
-			<view class="c-row b-b">
-				<text class="tit">服务</text>
-				<view class="bz-list con">
-					<text v-for="item in serviceList" :key="item">{{item}} ·</text>
-				</view>
-			</view>
-		</view>
-
-		<!-- 评价 -->
-	<!-- 	<view class="eva-section">
-			<view class="e-header">
-				<text class="tit">评价</text>
-				<text>(86)</text>
-				<text class="tip">好评率 100%</text>
-				<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>
-				<view class="right">
-					<text class="name">Leo yo</text>
-					<text class="con">商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</text>
-					<view class="bot">
-						<text class="attr">购买类型：XL 红色</text>
-						<text class="time">2019-04-01 19:21</text>
-					</view>
-				</view>
-			</view>
-		</view> -->
-
-		<!-- 品牌信息 -->
-		<view class="brand-info">
-			<view class="d-header">
-				<text>品牌信息</text>
-			</view>
-			<view class="brand-box" @click="navToBrandDetail()">
-				<view class="image-wrapper">
-					<image :src="brand.logo" class="loaded" mode="aspectFit"></image>
-				</view>
-				<view class="title">
-					<text>{{brand.name}}</text>
-					<text>品牌首字母：{{brand.firstLetter}}</text>
-				</view>
-			</view>
-		</view>
-
-		<view class="detail-desc">
-			<view class="d-header">
-				<text>图文详情</text>
-			</view>
-			<rich-text :nodes="desc"></rich-text>
-		</view>
-
-		<!-- 底部操作菜单 -->
-		<view class="page-bottom">
-			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
-				<!-- <text class="yticon icon-gouwuche"></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>收藏</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 add-cart-btn" @click="addToCart">加入购物车</button>
-				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
-			</view>
-		</view>
-
-
-		<!-- 规格-模态层弹窗 -->
-		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
-			<!-- 遮罩层 -->
-			<view class="mask"></view>
-			<view class="layer attr-content" @click.stop="stopPrevent">
-				<view class="a-t">
-					<image :src="product.pic"></image>
-					<view class="right">
-						<text class="price">¥{{product.price}}</text>
-						<text class="stock">库存：{{product.stock}}件</text>
-						<view class="selected">
-							已选：
-							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
-								{{sItem.name}}
-							</text>
-						</view>
-					</view>
-				</view>
-				<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" :class="{selected: childItem.selected}"
-							@click="selectSpec(childIndex, childItem.pid)">
-							{{childItem.name}}
-						</text>
-					</view>
-				</view>
-				<button class="btn" @click="toggleSpec">完成</button>
-			</view>
-		</view>
-		<!-- 属性-模态层弹窗 -->
-		<view class="popup spec" :class="attrClass" @touchmove.stop.prevent="stopPrevent" @click="toggleAttr">
-			<!-- 遮罩层 -->
-			<view class="mask"></view>
-			<view class="layer attr-content no-padding" @click.stop="stopPrevent">
-				<view class="c-list">
-					<view v-for="item in attrList" class="c-row b-b" :key="item.key">
-						<text class="tit">{{item.key}}</text>
-						<view class="con">
-							<text class="con t-r">{{item.value}}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 优惠券面板 -->
-		<view class="mask" :class="couponState===0 ? 'none' : couponState===1 ? 'show' : ''" @click="toggleCoupon">
-			<view class="mask-content" @click.stop.prevent="stopPrevent">
-				<!-- 优惠券页面，仿mt -->
-				<view class="coupon-item" v-for="(item,index) in couponList" :key="index" @click="addCoupon(item)">
-					<view class="con">
-						<view class="left">
-							<text class="title">{{item.name}}</text>
-							<text class="time">有效期至{{item.endTime | formatDateTime}}</text>
-						</view>
-						<view class="right">
-							<text class="price">{{item.amount}}</text>
-							<text>满{{item.minPoint}}可用</text>
-						</view>
-
-						<view class="circle l"></view>
-						<view class="circle r"></view>
-					</view>
-					<text class="tips">{{item.useType | formatCouponUseType}}</text>
-				</view>
-			</view>
-		</view>
-		<!-- 分享 -->
-		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
-	</view>
-</template>
-
-<script>
-	import share from '@/components/share.vue';
-	import {
-		fetchProductDetail,
-		fetchProductLuooDetail
-	} from '@/api/product.js';
-	import {
-		addCartItem
-	} from '@/api/cart.js';
-	import {
-		fetchProductCouponList,
-		addMemberCoupon
-	} from '@/api/coupon.js';
-	import {
-		createReadHistory
-	} from '@/api/memberReadHistory.js';
-	import {
-		createProductCollection,
-		deleteProductCollection,
-		productCollectionDetail
-	} from '@/api/memberProductCollection.js';
-	import {
-		fetchCartList
-	} from '@/api/cart.js';
-	import {
-		mapState
-	} from 'vuex';
-	import {
-		formatDate
-	} from '@/utils/date';
-	const defaultServiceList = [{
-		id: 1,
-		name: "无忧退货"
-	}, {
-		id: 2,
-		name: "快速退款"
-	}, {
-		id: 3,
-		name: "免费包邮"
-	}];
-	const defaultShareList = [{
-			type: 1,
-			icon: '/static/temp/share_wechat.png',
-			text: '微信好友'
-		},
-		{
-			type: 2,
-			icon: '/static/temp/share_moment.png',
-			text: '朋友圈'
-		},
-		{
-			type: 3,
-			icon: '/static/temp/share_qq.png',
-			text: 'QQ好友'
-		},
-		{
-			type: 4,
-			icon: '/static/temp/share_qqzone.png',
-			text: 'QQ空间'
-		}
-	]
-	export default {
-		components: {
-			share
-		},
-		data() {
-			return {
-				specClass: 'none',
-				attrClass: 'none',
-				specSelected: [],
-				favorite: false,
-				shareList: [],
-				imgList: [],
-				desc: '',
-				specList: [],
-				specChildList: [],
-				product: {},
-				brand: {},
-				serviceList: [],
-				skuStockList: [],
-				attrList: [],
-				promotionTipList: [],
-				couponState: 0,
-				couponList: [],
-				cartNum: 0,
-			};
-		},
-		async onLoad(options) {
-			let id = options.id;
-			this.shareList = defaultShareList;
-			this.loadData(id);
-		},
-		computed: {
-			...mapState(['hasLogin'])
-		},
-		filters: {
-			formatDateTime(time) {
-				if (time == null || time === '') {
-					return 'N/A';
-				}
-				let date = new Date(time);
-				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-			},
-			formatCouponUseType(useType) {
-				if (useType == 0) {
-					return "全场通用";
-				} else if (useType == 1) {
-					return "指定分类商品可用";
-				} else if (useType == 2) {
-					return "指定商品可用";
-				}
-				return null;
-			},
-		},
-		methods: {
-			async loadData(id) {
-				// 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;
-					this.initImgList();
-					this.initServiceList();
-					this.initSpecList(response.data);
-					this.initAttrList(response.data);
-					this.initPromotionTipList(response.data);
-					this.initProductDesc();
-					await this.handleReadHistory();
-					this.initProductCollection();
-				});
-				await this.getCartNum()
-			},
-			//规格弹窗开关
-			toggleSpec() {
-				if (this.specClass === 'show') {
-					this.specClass = 'hide';
-					setTimeout(() => {
-						this.specClass = 'none';
-					}, 250);
-				} else if (this.specClass === 'none') {
-					this.specClass = 'show';
-				}
-			},
-			//属性弹窗开关
-			toggleAttr() {
-				if (this.attrClass === 'show') {
-					this.attrClass = 'hide';
-					setTimeout(() => {
-						this.attrClass = 'none';
-					}, 250);
-				} else if (this.attrClass === 'none') {
-					this.attrClass = 'show';
-				}
-			},
-			//优惠券弹窗开关
-			toggleCoupon(type) {
-				fetchProductCouponList(this.product.id).then(response => {
-					this.couponList = response.data;
-					if (this.couponList == null || this.couponList.length == 0) {
-						uni.showToast({
-							title: "暂无可领优惠券",
-							icon: "none"
-						})
-						return;
-					}
-					let timer = type === 'show' ? 10 : 300;
-					let state = type === 'show' ? 1 : 0;
-					this.couponState = 2;
-					setTimeout(() => {
-						this.couponState = state;
-					}, timer)
-				});
-			},
-			//选择规格
-			selectSpec(index, pid) {
-				let list = this.specChildList;
-				list.forEach(item => {
-					if (item.pid === pid) {
-						this.$set(item, 'selected', false);
-					}
-				})
-
-				this.$set(list[index], 'selected', true);
-				//存储已选择
-				/**
-				 * 修复选择规格存储错误
-				 * 将这几行代码替换即可
-				 * 选择的规格存放在specSelected中
-				 */
-				this.specSelected = [];
-				list.forEach(item => {
-					if (item.selected === true) {
-						this.specSelected.push(item);
-					}
-				})
-				this.changeSpecInfo();
-
-			},
-			//领取优惠券
-			addCoupon(coupon) {
-				this.toggleCoupon();
-				addMemberCoupon(coupon.id).then(response => {
-					uni.showToast({
-						title: '领取优惠券成功！',
-						duration: 2000
-					});
-				});
-			},
-			//分享
-			share() {
-				this.$refs.share.toggleMask();
-			},
-			//收藏
-			toFavorite() {
-				if (!this.checkForLogin()) {
-					return;
-				}
-				if (this.favorite) {
-					//取消收藏
-					deleteProductCollection({
-						productId: this.product.id
-					}).then(response => {
-						uni.showToast({
-							title: "取消收藏成功！",
-							icon: 'none'
-						});
-						this.favorite = !this.favorite;
-					});
-				} else {
-					//收藏
-					let productCollection = {
-						productId: this.product.id,
-						productName: this.product.name,
-						productPic: this.product.pic,
-						productPrice: this.product.price,
-						productSubTitle: this.product.subTitle
-					}
-					createProductCollection(productCollection).then(response => {
-						uni.showToast({
-							title: "收藏成功！",
-							icon: 'none'
-						});
-						this.favorite = !this.favorite;
-					});
-				}
-			},
-			buy() {
-				uni.showToast({
-					title: "暂时只支持从购物车下单！",
-					icon: 'none'
-				});
-			},
-			stopPrevent() {},
-			//设置头图信息
-			initImgList() {
-				let tempPics = this.product.albumPics.split(',');
-				tempPics.unshift(this.product.pic);
-				for (let item of tempPics) {
-					if (item != null && item != '') {
-						this.imgList.push({
-							"src": item,
-							"image": item,
-							"type": 'image'
-						});
-					}
-				}
-			},
-			//设置服务信息
-			initServiceList() {
-				for (let item of defaultServiceList) {
-					if (this.product.serviceIds.indexOf(item.id) != -1) {
-						this.serviceList.push(item.name);
-					}
-				}
-			},
-			//设置商品规格
-			initSpecList(data) {
-				for (let i = 0; i < data.productAttributeList.length; i++) {
-					let item = data.productAttributeList[i];
-					if (item.type == 0) {
-						this.specList.push({
-							id: item.id,
-							name: item.name
-						});
-						if (item.handAddStatus == 1) {
-							//支持手动新增的
-							let valueList = data.productAttributeValueList;
-							let filterValueList = valueList.filter(value => value.productAttributeId == item.id);
-							let inputList = filterValueList[0].value.split(',');
-							for (let j = 0; j < inputList.length; j++) {
-								this.specChildList.push({
-									pid: item.id,
-									pname: item.name,
-									name: inputList[j]
-								});
-							}
-						} else if (item.handAddStatus == 0) {
-							//不支持手动新增的
-							let inputList = item.inputList.split(',');
-							for (let j = 0; j < inputList.length; j++) {
-								this.specChildList.push({
-									pid: item.id,
-									pname: item.name,
-									name: inputList[j]
-								});
-							}
-						}
-					}
-				}
-				let availAbleSpecSet = new Set();
-				for (let i = 0; i < this.skuStockList.length; i++) {
-					let spDataArr = JSON.parse(this.skuStockList[i].spData);
-					for (let j = 0; j < spDataArr.length; j++) {
-						availAbleSpecSet.add(spDataArr[j].value);
-					}
-				}
-				// 根据商品sku筛选出可用规格
-				this.specChildList = this.specChildList.filter(item => {
-					return availAbleSpecSet.has(item.name)
-				});
-				// 规格 默认选中第一条
-				this.specList.forEach(item => {
-					for (let cItem of this.specChildList) {
-						if (cItem.pid === item.id) {
-							this.$set(cItem, 'selected', true);
-							this.specSelected.push(cItem);
-							this.changeSpecInfo();
-							break;
-						}
-					}
-				})
-			},
-			//设置商品参数
-			initAttrList(data) {
-				for (let item of data.productAttributeList) {
-					if (item.type == 1) {
-						let valueList = data.productAttributeValueList;
-						let filterValueList = valueList.filter(value => value.productAttributeId == item.id);
-						let value = filterValueList[0].value;
-						this.attrList.push({
-							key: item.name,
-							value: value
-						});
-					}
-				}
-			},
-			//设置促销活动信息
-			initPromotionTipList(data) {
-				let promotionType = this.product.promotionType;
-				if (promotionType == 0) {
-					this.promotionTipList.push("暂无优惠");
-				} else if (promotionType == 1) {
-					this.promotionTipList.push("单品优惠");
-				} else if (promotionType == 2) {
-					this.promotionTipList.push("会员优惠");
-				} else if (promotionType == 3) {
-					this.promotionTipList.push("多买优惠");
-					for (let item of data.productLadderList) {
-						this.promotionTipList.push("满" + item.count + "件打" + item.discount * 10 + "折");
-					}
-				} else if (promotionType == 4) {
-					this.promotionTipList.push("满减优惠");
-					for (let item of data.productFullReductionList) {
-						this.promotionTipList.push("满" + item.fullPrice + "元减" + item.reducePrice + "元");
-					}
-				} else if (promotionType == 5) {
-					this.promotionTipList.push("限时优惠");
-				}
-			},
-			//初始化商品详情信息
-			initProductDesc() {
-				let rawhtml = this.product.detailMobileHtml;
-				if(!rawhtml){ return}
-				let tempNode = document.createElement('div');
-				tempNode.innerHTML = rawhtml;
-				let imgs = tempNode.getElementsByTagName('img');
-				for (let i = 0; i < imgs.length; i++) {
-					imgs[i].style.width = '100%';
-					imgs[i].style.height = 'auto';
-					imgs[i].style.display = 'block';
-				}
-				this.desc = tempNode.innerHTML;
-			},
-			//处理创建浏览记录
-			handleReadHistory() {
-				console.log('handleReadHistory')
-				if (this.hasLogin) {
-					let data = {
-						productId: this.product.id,
-						productName: this.product.name,
-						productPic: this.product.pic,
-						productPrice: this.product.price,
-						productSubTitle: this.product.subTitle,
-					}
-					createReadHistory(data);
-				}
-			},
-			//当商品规格改变时，修改商品信息
-			changeSpecInfo() {
-				let skuStock = this.getSkuStock();
-				if (skuStock != null) {
-					this.product.originalPrice = skuStock.price;
-					if (this.product.promotionType == 1) {
-						//单品优惠使用促销价
-						this.product.price = skuStock.promotionPrice;
-					} else {
-						this.product.price = skuStock.price;
-					}
-					this.product.stock = skuStock.stock;
-				}
-			},
-			//获取当前选中商品的SKU
-			getSkuStock() {
-				for (let i = 0; i < this.skuStockList.length; i++) {
-					let spDataArr = JSON.parse(this.skuStockList[i].spData);
-					let availAbleSpecSet = new Map();
-					for (let j = 0; j < spDataArr.length; j++) {
-						availAbleSpecSet.set(spDataArr[j].key, spDataArr[j].value);
-					}
-					let correctCount = 0;
-					for (let item of this.specSelected) {
-						let value = availAbleSpecSet.get(item.pname);
-						if (value != null && value == item.name) {
-							correctCount++;
-						}
-					}
-					if (correctCount == this.specSelected.length) {
-						return this.skuStockList[i];
-					}
-				}
-				return null;
-			},
-			//将商品加入到购物车
-			addToCart() {
-				if (!this.checkForLogin()) {
-					return;
-				}
-				let productSkuStock = this.getSkuStock();
-				let cartItem = {
-					price: this.product.price,
-					productAttr: productSkuStock.spData,
-					productBrand: this.product.brandName,
-					productCategoryId: this.product.productCategoryId,
-					productId: this.product.id,
-					productName: this.product.name,
-					productPic: this.product.pic,
-					productSkuCode: productSkuStock.skuCode,
-					productSkuId: productSkuStock.id,
-					productSn: this.product.productSn,
-					productSubTitle: this.product.subTitle,
-					quantity: 1
-				};
-				addCartItem(cartItem).then(response => {
-					uni.showToast({
-						title: response.message,
-						duration: 1500
-					})
-					this.getCartNum()
-				});
-			},
-			//检查登录状态并弹出登录框
-			checkForLogin() {
-				if (!this.hasLogin) {
-					uni.showModal({
-						title: '提示',
-						content: '你还没登录，是否要登录？',
-						confirmText: '去登录',
-						cancelText: '取消',
-						success: function(res) {
-							if (res.confirm) {
-								uni.navigateTo({
-									url: '/pages/public/login'
-								})
-							} else if (res.cancel) {
-								console.log('用户点击取消');
-							}
-						}
-					});
-					return false;
-				} else {
-					return true;
-				}
-			},
-			//初始化收藏状态
-			initProductCollection() {
-				console.log('this.hasLogin', this.hasLogin)
-				if (this.hasLogin) {
-					productCollectionDetail({
-						productId: this.product.id
-					}).then(response => {
-						this.favorite = response.data != null;
-					});
-				}
-			},
-			//跳转到品牌详情页
-			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);
-				})
-			}
-		},
-
-	}
-</script>
-
-<style lang='scss'>
-	page {
-		background: $page-color-base;
-		padding-bottom: 160upx;
-		padding-top: var(--status-bar-height);
-	}
-
-	.icon-you {
-		font-size: $font-base + 2upx;
-		color: #888;
-	}
-
-	.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 {
-			height: 100%;
-			.u-swiper-indicator {
-				bottom: 36upx!important;
-			}
-		}
-
-		.image-wrapper {
-			width: 100%;
-			height: 100%;
-		}
-
-		.swiper-item {
-			display: flex;
-			justify-content: center;
-			align-content: center;
-			height: 750upx;
-			overflow: hidden;
-
-			image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-
-	}
-
-	/* 标题简介 */
-	.introduce-section {
-		background: #fff;
-		padding: 36upx;
-
-		.title {
-			font-size: 32upx;
-			color: $font-color-dark;
-			height: 50upx;
-			line-height: 50upx;
-		}
-
-		.title2 {
-			font-size: 28upx;
-			color: $font-color-light;
-			height: 46upx;
-			line-height: 46upx;
-		}
-
-		.price-box {
-			display: flex;
-			align-items: baseline;
-			height: 64upx;
-			padding: 10upx 0;
-			font-size: 26upx;
-			color: $uni-color-primary;
-		}
-
-		.price {
-			font-size: $font-lg + 2upx;
-		}
-
-		.m-price {
-			margin: 0 12upx;
-			color: $font-color-light;
-			text-decoration: line-through;
-		}
-
-		.coupon-tip {
-			align-items: center;
-			padding: 4upx 10upx;
-			background: $uni-color-primary;
-			font-size: $font-sm;
-			color: #fff;
-			border-radius: 6upx;
-			line-height: 1;
-			transform: translateY(-4upx);
-		}
-
-		.bot-row {
-			display: flex;
-			align-items: center;
-			height: 50upx;
-			font-size: $font-sm;
-			color: $font-color-light;
-
-			text {
-				flex: 1;
-			}
-		}
-	}
-
-	/* 分享 */
-	.share-section {
-		display: flex;
-		align-items: center;
-		color: $font-color-base;
-		background: linear-gradient(left, #fdf5f6, #fbebf6);
-		padding: 12upx 30upx;
-
-		.share-icon {
-			display: flex;
-			align-items: center;
-			width: 70upx;
-			height: 30upx;
-			line-height: 1;
-			border: 1px solid $uni-color-primary;
-			border-radius: 4upx;
-			position: relative;
-			overflow: hidden;
-			font-size: 22upx;
-			color: $uni-color-primary;
-
-			&:after {
-				content: '';
-				width: 50upx;
-				height: 50upx;
-				border-radius: 50%;
-				left: -20upx;
-				top: -12upx;
-				position: absolute;
-				background: $uni-color-primary;
-			}
-		}
-
-		.icon-xingxing {
-			position: relative;
-			z-index: 1;
-			font-size: 24upx;
-			margin-left: 2upx;
-			margin-right: 10upx;
-			color: #fff;
-			line-height: 1;
-		}
-
-		.tit {
-			font-size: $font-base;
-			margin-left: 10upx;
-		}
-
-		.icon-bangzhu1 {
-			padding: 10upx;
-			font-size: 30upx;
-			line-height: 1;
-		}
-
-		.share-btn {
-			flex: 1;
-			text-align: right;
-			font-size: $font-sm;
-			color: $uni-color-primary;
-		}
-
-		.icon-you {
-			font-size: $font-sm;
-			margin-left: 4upx;
-			color: $uni-color-primary;
-		}
-	}
-
-	.c-list {
-		font-size: $font-sm + 2upx;
-		color: $font-color-base;
-		background: #fff;
-
-		.c-row {
-			display: flex;
-			align-items: center;
-			padding: 20upx 30upx;
-			position: relative;
-		}
-
-		.tit {
-			width: 140upx;
-		}
-
-		.con {
-			flex: 1;
-			color: $font-color-dark;
-
-			.selected-text {
-				margin-right: 10upx;
-			}
-		}
-
-		.bz-list {
-			height: 40upx;
-			font-size: $font-sm+2upx;
-			color: $font-color-dark;
-
-			text {
-				display: inline-block;
-				margin-right: 30upx;
-			}
-		}
-
-		.con-list {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			color: $font-color-dark;
-			line-height: 40upx;
-		}
-
-		.red {
-			color: $uni-color-primary;
-		}
-	}
-
-	/* 评价 */
-	.eva-section {
-		display: flex;
-		flex-direction: column;
-		padding: 20upx 30upx;
-		background: #fff;
-		margin-top: 16upx;
-
-		.e-header {
-			display: flex;
-			align-items: center;
-			height: 70upx;
-			font-size: $font-sm + 2upx;
-			color: $font-color-light;
-
-			.tit {
-				font-size: $font-base + 2upx;
-				color: $font-color-dark;
-				margin-right: 4upx;
-			}
-
-			.tip {
-				flex: 1;
-				text-align: right;
-			}
-
-			.icon-you {
-				margin-left: 10upx;
-			}
-		}
-	}
-
-	.eva-box {
-		display: flex;
-		padding: 20upx 0;
-
-		.portrait {
-			flex-shrink: 0;
-			width: 80upx;
-			height: 80upx;
-			border-radius: 100px;
-		}
-
-		.right {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			font-size: $font-base;
-			color: $font-color-base;
-			padding-left: 26upx;
-
-			.con {
-				font-size: $font-base;
-				color: $font-color-dark;
-				padding: 20upx 0;
-			}
-
-			.bot {
-				display: flex;
-				justify-content: space-between;
-				font-size: $font-sm;
-				color: $font-color-light;
-			}
-		}
-	}
-
-	/*  详情 */
-	.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;
-			justify-content: center;
-			align-items: center;
-			height: 80upx;
-			font-size: $font-base + 2upx;
-			color: $font-color-dark;
-			position: relative;
-
-			text {
-				padding: 0 20upx;
-				background: #fff;
-				position: relative;
-				z-index: 1;
-			}
-
-			&:after {
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translateX(-50%);
-				width: 300upx;
-				height: 0;
-				content: '';
-				border-bottom: 1px solid #ccc;
-			}
-		}
-	}
-
-	.detail-desc img {
-		width: 100%;
-		height: auto;
-	}
-
-	/* 规格选择弹窗 */
-	.attr-content {
-		padding: 10upx 30upx;
-
-		.a-t {
-			display: flex;
-
-			image {
-				width: 170upx;
-				height: 170upx;
-				flex-shrink: 0;
-				margin-top: -40upx;
-				border-radius: 8upx;
-				;
-			}
-
-			.right {
-				display: flex;
-				flex-direction: column;
-				padding-left: 24upx;
-				font-size: $font-sm + 2upx;
-				color: $font-color-base;
-				line-height: 42upx;
-
-				.price {
-					font-size: $font-lg;
-					color: $uni-color-primary;
-					margin-bottom: 10upx;
-				}
-
-				.selected-text {
-					margin-right: 10upx;
-				}
-			}
-		}
-
-		.attr-list {
-			display: flex;
-			flex-direction: column;
-			font-size: $font-base + 2upx;
-			color: $font-color-base;
-			padding-top: 30upx;
-			padding-left: 10upx;
-		}
-
-		.item-list {
-			padding: 20upx 0 0;
-			display: flex;
-			flex-wrap: wrap;
-
-			text {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				background: #eee;
-				margin-right: 20upx;
-				margin-bottom: 20upx;
-				border-radius: 100upx;
-				min-width: 60upx;
-				height: 60upx;
-				padding: 0 20upx;
-				font-size: $font-base;
-				color: $font-color-dark;
-			}
-
-			.selected {
-				background: #fbebee;
-				color: $uni-color-primary;
-			}
-		}
-	}
-
-	.no-padding {
-		padding: 0upx 0upx;
-	}
-
-	/*  弹出层 */
-	.popup {
-		position: fixed;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 99;
-
-		&.show {
-			display: block;
-
-			.mask {
-				animation: showPopup 0.2s linear both;
-			}
-
-			.layer {
-				animation: showLayer 0.2s linear both;
-			}
-		}
-
-		&.hide {
-			.mask {
-				animation: hidePopup 0.2s linear both;
-			}
-
-			.layer {
-				animation: hideLayer 0.2s linear both;
-			}
-		}
-
-		&.none {
-			display: none;
-		}
-
-		.mask {
-			position: fixed;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			z-index: 1;
-			background-color: rgba(0, 0, 0, 0.4);
-		}
-
-		.layer {
-			position: fixed;
-			z-index: 99;
-			bottom: 0;
-			width: 100%;
-			min-height: 40vh;
-			border-radius: 10upx 10upx 0 0;
-			background-color: #fff;
-
-			.btn {
-				height: 66upx;
-				line-height: 66upx;
-				border-radius: 100upx;
-				background: $uni-color-primary;
-				font-size: $font-base + 2upx;
-				color: #fff;
-				margin: 30upx auto 20upx;
-			}
-		}
-
-		@keyframes showPopup {
-			0% {
-				opacity: 0;
-			}
-
-			100% {
-				opacity: 1;
-			}
-		}
-
-		@keyframes hidePopup {
-			0% {
-				opacity: 1;
-			}
-
-			100% {
-				opacity: 0;
-			}
-		}
-
-		@keyframes showLayer {
-			0% {
-				transform: translateY(120%);
-			}
-
-			100% {
-				transform: translateY(0%);
-			}
-		}
-
-		@keyframes hideLayer {
-			0% {
-				transform: translateY(0);
-			}
-
-			100% {
-				transform: translateY(120%);
-			}
-		}
-	}
-
-	/* 底部操作菜单 */
-	.page-bottom {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		z-index: 95;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100vw;
-		height: 144upx;
-		background: #ffffff;
-		box-sizing: content-box;
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-
-		.p-b-btn {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			font-size: $font-sm;
-			color: $font-color-base;
-			width: 96upx;
-			height: 80upx;
-			position: relative;
-			.cart-badge>view {
-				top: 0upx !important;
-				right: 0upx !important;
-			}
-
-			.yticon {
-				font-size: 40upx;
-				line-height: 48upx;
-				color: $font-color-light;
-			}
-
-			.pdicon {
-				width: 48upx;
-				height: 48upx;				
-			}
-
-			&.active,
-			&.active .yticon {
-				color: $uni-color-primary;
-			}
-
-			.icon-fenxiang2 {
-				font-size: 42upx;
-				transform: translateY(-2upx);
-			}
-
-			.icon-shoucang {
-				font-size: 46upx;
-			}
-		}
-
-		.action-btn-group {
-			display: flex;
-			height: 76upx;
-			overflow: hidden;
-			margin-left: 20upx;
-			position: relative;
-
-			.action-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 180upx;
-				height: 100%;
-				font-size: $font-base;
-				padding: 0;
-				border-radius: 60upx;
-			}
-
-			.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;
-			}
-
-		}
-	}
-
-	/* 优惠券面板 */
-	.mask {
-		display: flex;
-		align-items: flex-end;
-		position: fixed;
-		left: 0;
-		top: var(--window-top);
-		bottom: 0;
-		width: 100%;
-		background: rgba(0, 0, 0, 0);
-		z-index: 9995;
-		transition: .3s;
-
-		.mask-content {
-			width: 100%;
-			min-height: 30vh;
-			max-height: 70vh;
-			background: #f3f3f3;
-			transform: translateY(100%);
-			transition: .3s;
-			overflow-y: scroll;
-		}
-
-		&.none {
-			display: none;
-		}
-
-		&.show {
-			background: rgba(0, 0, 0, .4);
-
-			.mask-content {
-				transform: translateY(0);
-			}
-		}
-	}
-
-	/* 优惠券列表 */
-	.coupon-item {
-		display: flex;
-		flex-direction: column;
-		margin: 20upx 24upx;
-		background: #fff;
-
-		.con {
-			display: flex;
-			align-items: center;
-			position: relative;
-			height: 120upx;
-			padding: 0 30upx;
-
-			&:after {
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				content: '';
-				width: 100%;
-				height: 0;
-				border-bottom: 1px dashed #f3f3f3;
-				transform: scaleY(50%);
-			}
-		}
-
-		.left {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			flex: 1;
-			overflow: hidden;
-			height: 100upx;
-		}
-
-		.title {
-			font-size: 32upx;
-			color: $font-color-dark;
-			margin-bottom: 10upx;
-		}
-
-		.time {
-			font-size: 24upx;
-			color: $font-color-light;
-		}
-
-		.right {
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			font-size: 26upx;
-			color: $font-color-base;
-			height: 100upx;
-		}
-
-		.price {
-			font-size: 44upx;
-			color: $base-color;
-
-			&:before {
-				content: '￥';
-				font-size: 34upx;
-			}
-		}
-
-		.tips {
-			font-size: 24upx;
-			color: $font-color-light;
-			line-height: 60upx;
-			padding-left: 30upx;
-		}
-
-		.circle {
-			position: absolute;
-			left: -6upx;
-			bottom: -10upx;
-			z-index: 10;
-			width: 20upx;
-			height: 20upx;
-			background: #f3f3f3;
-			border-radius: 100px;
-
-			&.r {
-				left: auto;
-				right: -6upx;
-			}
-		}
-	}
-
-	.brand-info {
-		margin-top: 16upx;
-		background-color: #fff;
-		display: flex;
-		flex-direction: column;
-
-		.brand-box {
-			display: flex;
-			align-items: center;
-			padding: 30upx 50upx;
-
-			.image-wrapper {
-				width: 210upx;
-				height: 70upx;
-
-				image {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			.title {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				font-size: $font-lg+4upx;
-				margin-left: 30upx;
-				color: $font-color-dark;
-
-				text:last-child {
-					font-size: $font-sm;
-					color: $font-color-light;
-					margin-top: 8upx;
-
-					&.Skeleton {
-						width: 220upx;
-					}
-				}
-			}
-		}
-
-		.d-header {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 80upx;
-			font-size: $font-base + 2upx;
-			color: $font-color-dark;
-			position: relative;
-
-			text {
-				padding: 0 20upx;
-				background: #fff;
-				position: relative;
-				z-index: 1;
-			}
-
-			&:after {
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translateX(-50%);
-				width: 300upx;
-				height: 0;
-				content: '';
-				border-bottom: 1px solid #ccc;
-			}
-		}
-	}
+<template>
+	<view class="container">
+
+		<view class="carousel">
+			<u-swiper :list="imgList" :autoplay="false" indicatorStyle="right: 20px" duration="400" mode="number"
+				height="750" indicator-pos="bottomRight" class="swiper">
+			</u-swiper>
+
+		</view>
+
+		<view class="btn-box" :style="{top:statusBarHeight+'px'}">
+			<view class="goback" @click="goBack">
+				<image src="@/static/icons/icon_back.png" mode=""></image>
+			</view>
+			<view class="share" @click="share">
+				<image src="@/static/icons/icon_share.png" mode=""></image>
+			</view>
+		</view>
+
+		<view class="introduce-section">
+			<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>
+			<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 class="share-section" @click="share">
+			<view class="share-icon">
+				<text class="yticon icon-xingxing"></text>
+				返
+			</view>
+			<text class="tit">该商品分享可领49减10红包</text>
+			<text class="yticon icon-bangzhu1"></text>
+			<view class="share-btn">
+				立即分享
+				<text class="yticon icon-you"></text>
+			</view>
+
+		</view> -->
+
+		<view class="c-list">
+			<view class="c-row b-b" @click="toggleSpec">
+				<text class="tit">购买类型</text>
+				<view class="con">
+					<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
+						{{sItem.name}}
+					</text>
+				</view>
+				<text class="yticon icon-you"></text>
+			</view>
+			<view class="c-row b-b" @click="toggleAttr">
+				<text class="tit">商品参数</text>
+				<view class="con">
+					<text class="con t-r">查看</text>
+				</view>
+				<text class="yticon icon-you"></text>
+			</view>
+			<view class="c-row b-b" @click="toggleCoupon('show')">
+				<text class="tit">优惠券</text>
+				<text class="con t-r red">领取优惠券</text>
+				<text class="yticon icon-you"></text>
+			</view>
+			<view class="c-row b-b">
+				<text class="tit">促销活动</text>
+				<view class="con-list">
+					<text v-for="item in promotionTipList" :key="item">{{item}}</text>
+				</view>
+			</view>
+			<view class="c-row b-b">
+				<text class="tit">服务</text>
+				<view class="bz-list con">
+					<text v-for="item in serviceList" :key="item">{{item}} ·</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 评价 -->
+		<!-- 	<view class="eva-section">
+			<view class="e-header">
+				<text class="tit">评价</text>
+				<text>(86)</text>
+				<text class="tip">好评率 100%</text>
+				<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>
+				<view class="right">
+					<text class="name">Leo yo</text>
+					<text class="con">商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</text>
+					<view class="bot">
+						<text class="attr">购买类型：XL 红色</text>
+						<text class="time">2019-04-01 19:21</text>
+					</view>
+				</view>
+			</view>
+		</view> -->
+
+		<!-- 品牌信息 -->
+		<view class="brand-info">
+			<view class="d-header">
+				<text>品牌信息</text>
+			</view>
+			<view class="brand-box" @click="navToBrandDetail()">
+				<view class="image-wrapper">
+					<image :src="brand.logo" class="loaded" mode="aspectFit"></image>
+				</view>
+				<view class="title">
+					<text>{{brand.name}}</text>
+					<text>品牌首字母：{{brand.firstLetter}}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="detail-desc">
+			<view class="d-header">
+				<text>图文详情</text>
+			</view>
+			<rich-text :nodes="desc"></rich-text>
+		</view>
+
+		<!-- 底部操作菜单 -->
+		<view class="page-bottom">
+			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
+				<!-- <text class="yticon icon-gouwuche"></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>收藏</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 add-cart-btn" @click="addToCart">加入购物车</button>
+				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
+			</view>
+		</view>
+
+
+		<!-- 规格-模态层弹窗 -->
+		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
+			<!-- 遮罩层 -->
+			<view class="mask"></view>
+			<view class="layer attr-content" @click.stop="stopPrevent">
+				<view class="a-t">
+					<image :src="product.pic"></image>
+					<view class="right">
+						<text class="price">¥{{product.price}}</text>
+						<text class="stock">库存：{{product.stock}}件</text>
+						<view class="selected">
+							已选：
+							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
+								{{sItem.name}}
+							</text>
+						</view>
+					</view>
+				</view>
+				<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" :class="{selected: childItem.selected}"
+							@click="selectSpec(childIndex, childItem.pid)">
+							{{childItem.name}}
+						</text>
+					</view>
+				</view>
+				<button class="btn" @click="toggleSpec">完成</button>
+			</view>
+		</view>
+		<!-- 属性-模态层弹窗 -->
+		<view class="popup spec" :class="attrClass" @touchmove.stop.prevent="stopPrevent" @click="toggleAttr">
+			<!-- 遮罩层 -->
+			<view class="mask"></view>
+			<view class="layer attr-content no-padding" @click.stop="stopPrevent">
+				<view class="c-list">
+					<view v-for="item in attrList" class="c-row b-b" :key="item.key">
+						<text class="tit">{{item.key}}</text>
+						<view class="con">
+							<text class="con t-r">{{item.value}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 优惠券面板 -->
+		<view class="mask" :class="couponState===0 ? 'none' : couponState===1 ? 'show' : ''" @click="toggleCoupon">
+			<view class="mask-content" @click.stop.prevent="stopPrevent">
+				<!-- 优惠券页面，仿mt -->
+				<view class="coupon-item" v-for="(item,index) in couponList" :key="index" @click="addCoupon(item)">
+					<view class="con">
+						<view class="left">
+							<text class="title">{{item.name}}</text>
+							<text class="time">有效期至{{item.endTime | formatDateTime}}</text>
+						</view>
+						<view class="right">
+							<text class="price">{{item.amount}}</text>
+							<text>满{{item.minPoint}}可用</text>
+						</view>
+
+						<view class="circle l"></view>
+						<view class="circle r"></view>
+					</view>
+					<text class="tips">{{item.useType | formatCouponUseType}}</text>
+				</view>
+			</view>
+		</view>
+		<!-- 分享 -->
+		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
+	</view>
+</template>
+
+<script>
+	import share from '@/components/share.vue';
+	import {
+		fetchProductDetail,
+		fetchProductLuooDetail
+	} from '@/api/product.js';
+	import {
+		addCartItem
+	} from '@/api/cart.js';
+	import {
+		fetchProductCouponList,
+		addMemberCoupon
+	} from '@/api/coupon.js';
+	import {
+		createReadHistory
+	} from '@/api/memberReadHistory.js';
+	import {
+		createProductCollection,
+		deleteProductCollection,
+		productCollectionDetail
+	} from '@/api/memberProductCollection.js';
+	import {
+		fetchCartList
+	} from '@/api/cart.js';
+	import {
+		mapState
+	} from 'vuex';
+	import {
+		formatDate
+	} from '@/utils/date';
+	const defaultServiceList = [{
+		id: 1,
+		name: "无忧退货"
+	}, {
+		id: 2,
+		name: "快速退款"
+	}, {
+		id: 3,
+		name: "免费包邮"
+	}];
+	const defaultShareList = [{
+			type: 1,
+			icon: '/static/temp/share_wechat.png',
+			text: '微信好友'
+		},
+		{
+			type: 2,
+			icon: '/static/temp/share_moment.png',
+			text: '朋友圈'
+		},
+		{
+			type: 3,
+			icon: '/static/temp/share_qq.png',
+			text: 'QQ好友'
+		},
+		{
+			type: 4,
+			icon: '/static/temp/share_qqzone.png',
+			text: 'QQ空间'
+		}
+	]
+	export default {
+		components: {
+			share
+		},
+		data() {
+			return {
+				// 状态栏+胶囊的高度
+				statusBarHeight: 0,
+				specClass: 'none',
+				attrClass: 'none',
+				specSelected: [],
+				favorite: false,
+				shareList: [],
+				imgList: [],
+				desc: '',
+				specList: [],
+				specChildList: [],
+				product: {},
+				brand: {},
+				serviceList: [],
+				skuStockList: [],
+				attrList: [],
+				promotionTipList: [],
+				couponState: 0,
+				couponList: [],
+				cartNum: 0,
+			};
+		},
+		async onLoad(options) {
+			let id = options.id;
+			this.shareList = defaultShareList;
+			this.loadData(id);
+			
+			let systemInfo = uni.getSystemInfoSync()
+			this.statusBarHeight = systemInfo.statusBarHeight
+			console.log("N", systemInfo.statusBarHeight)
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+			this.statusBarHeight = (menuButtonInfo.top - this.statusBarHeight) + menuButtonInfo.height + systemInfo.statusBarHeight
+			console.log("S", menuButtonInfo.top, menuButtonInfo.height)
+			console.log('M', this.statusBarHeight)
+
+
+		},
+		computed: {
+			...mapState(['hasLogin'])
+		},
+		filters: {
+			formatDateTime(time) {
+				if (time == null || time === '') {
+					return 'N/A';
+				}
+				let date = new Date(time);
+				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+			},
+			formatCouponUseType(useType) {
+				if (useType == 0) {
+					return "全场通用";
+				} else if (useType == 1) {
+					return "指定分类商品可用";
+				} else if (useType == 2) {
+					return "指定商品可用";
+				}
+				return null;
+			},
+		},
+		methods: {
+			async loadData(id) {
+				// 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;
+					this.initImgList();
+					this.initServiceList();
+					this.initSpecList(response.data);
+					this.initAttrList(response.data);
+					this.initPromotionTipList(response.data);
+					this.initProductDesc();
+					await this.handleReadHistory();
+					this.initProductCollection();
+				});
+				await this.getCartNum()
+			},
+			//规格弹窗开关
+			toggleSpec() {
+				if (this.specClass === 'show') {
+					this.specClass = 'hide';
+					setTimeout(() => {
+						this.specClass = 'none';
+					}, 250);
+				} else if (this.specClass === 'none') {
+					this.specClass = 'show';
+				}
+			},
+			//属性弹窗开关
+			toggleAttr() {
+				if (this.attrClass === 'show') {
+					this.attrClass = 'hide';
+					setTimeout(() => {
+						this.attrClass = 'none';
+					}, 250);
+				} else if (this.attrClass === 'none') {
+					this.attrClass = 'show';
+				}
+			},
+			//优惠券弹窗开关
+			toggleCoupon(type) {
+				fetchProductCouponList(this.product.id).then(response => {
+					this.couponList = response.data;
+					if (this.couponList == null || this.couponList.length == 0) {
+						uni.showToast({
+							title: "暂无可领优惠券",
+							icon: "none"
+						})
+						return;
+					}
+					let timer = type === 'show' ? 10 : 300;
+					let state = type === 'show' ? 1 : 0;
+					this.couponState = 2;
+					setTimeout(() => {
+						this.couponState = state;
+					}, timer)
+				});
+			},
+			//选择规格
+			selectSpec(index, pid) {
+				let list = this.specChildList;
+				list.forEach(item => {
+					if (item.pid === pid) {
+						this.$set(item, 'selected', false);
+					}
+				})
+
+				this.$set(list[index], 'selected', true);
+				//存储已选择
+				/**
+				 * 修复选择规格存储错误
+				 * 将这几行代码替换即可
+				 * 选择的规格存放在specSelected中
+				 */
+				this.specSelected = [];
+				list.forEach(item => {
+					if (item.selected === true) {
+						this.specSelected.push(item);
+					}
+				})
+				this.changeSpecInfo();
+
+			},
+			//领取优惠券
+			addCoupon(coupon) {
+				this.toggleCoupon();
+				addMemberCoupon(coupon.id).then(response => {
+					uni.showToast({
+						title: '领取优惠券成功！',
+						duration: 2000
+					});
+				});
+			},
+			//分享
+			share() {
+				this.$refs.share.toggleMask();
+			},
+			//收藏
+			toFavorite() {
+				if (!this.checkForLogin()) {
+					return;
+				}
+				if (this.favorite) {
+					//取消收藏
+					deleteProductCollection({
+						productId: this.product.id
+					}).then(response => {
+						uni.showToast({
+							title: "取消收藏成功！",
+							icon: 'none'
+						});
+						this.favorite = !this.favorite;
+					});
+				} else {
+					//收藏
+					let productCollection = {
+						productId: this.product.id,
+						productName: this.product.name,
+						productPic: this.product.pic,
+						productPrice: this.product.price,
+						productSubTitle: this.product.subTitle
+					}
+					createProductCollection(productCollection).then(response => {
+						uni.showToast({
+							title: "收藏成功！",
+							icon: 'none'
+						});
+						this.favorite = !this.favorite;
+					});
+				}
+			},
+			buy() {
+				uni.showToast({
+					title: "暂时只支持从购物车下单！",
+					icon: 'none'
+				});
+			},
+			stopPrevent() {},
+			//设置头图信息
+			initImgList() {
+				let tempPics = this.product.albumPics.split(',');
+				tempPics.unshift(this.product.pic);
+				for (let item of tempPics) {
+					if (item != null && item != '') {
+						this.imgList.push({
+							"src": item,
+							"image": item,
+							"type": 'image'
+						});
+					}
+				}
+			},
+			//设置服务信息
+			initServiceList() {
+				for (let item of defaultServiceList) {
+					if (this.product.serviceIds.indexOf(item.id) != -1) {
+						this.serviceList.push(item.name);
+					}
+				}
+			},
+			//设置商品规格
+			initSpecList(data) {
+				for (let i = 0; i < data.productAttributeList.length; i++) {
+					let item = data.productAttributeList[i];
+					if (item.type == 0) {
+						this.specList.push({
+							id: item.id,
+							name: item.name
+						});
+						if (item.handAddStatus == 1) {
+							//支持手动新增的
+							let valueList = data.productAttributeValueList;
+							let filterValueList = valueList.filter(value => value.productAttributeId == item.id);
+							let inputList = filterValueList[0].value.split(',');
+							for (let j = 0; j < inputList.length; j++) {
+								this.specChildList.push({
+									pid: item.id,
+									pname: item.name,
+									name: inputList[j]
+								});
+							}
+						} else if (item.handAddStatus == 0) {
+							//不支持手动新增的
+							let inputList = item.inputList.split(',');
+							for (let j = 0; j < inputList.length; j++) {
+								this.specChildList.push({
+									pid: item.id,
+									pname: item.name,
+									name: inputList[j]
+								});
+							}
+						}
+					}
+				}
+				let availAbleSpecSet = new Set();
+				for (let i = 0; i < this.skuStockList.length; i++) {
+					let spDataArr = JSON.parse(this.skuStockList[i].spData);
+					for (let j = 0; j < spDataArr.length; j++) {
+						availAbleSpecSet.add(spDataArr[j].value);
+					}
+				}
+				// 根据商品sku筛选出可用规格
+				this.specChildList = this.specChildList.filter(item => {
+					return availAbleSpecSet.has(item.name)
+				});
+				// 规格 默认选中第一条
+				this.specList.forEach(item => {
+					for (let cItem of this.specChildList) {
+						if (cItem.pid === item.id) {
+							this.$set(cItem, 'selected', true);
+							this.specSelected.push(cItem);
+							this.changeSpecInfo();
+							break;
+						}
+					}
+				})
+			},
+			//设置商品参数
+			initAttrList(data) {
+				for (let item of data.productAttributeList) {
+					if (item.type == 1) {
+						let valueList = data.productAttributeValueList;
+						let filterValueList = valueList.filter(value => value.productAttributeId == item.id);
+						let value = filterValueList[0].value;
+						this.attrList.push({
+							key: item.name,
+							value: value
+						});
+					}
+				}
+			},
+			//设置促销活动信息
+			initPromotionTipList(data) {
+				let promotionType = this.product.promotionType;
+				if (promotionType == 0) {
+					this.promotionTipList.push("暂无优惠");
+				} else if (promotionType == 1) {
+					this.promotionTipList.push("单品优惠");
+				} else if (promotionType == 2) {
+					this.promotionTipList.push("会员优惠");
+				} else if (promotionType == 3) {
+					this.promotionTipList.push("多买优惠");
+					for (let item of data.productLadderList) {
+						this.promotionTipList.push("满" + item.count + "件打" + item.discount * 10 + "折");
+					}
+				} else if (promotionType == 4) {
+					this.promotionTipList.push("满减优惠");
+					for (let item of data.productFullReductionList) {
+						this.promotionTipList.push("满" + item.fullPrice + "元减" + item.reducePrice + "元");
+					}
+				} else if (promotionType == 5) {
+					this.promotionTipList.push("限时优惠");
+				}
+			},
+			//初始化商品详情信息
+			initProductDesc() {
+				let rawhtml = this.product.detailMobileHtml;
+				if (!rawhtml) {
+					return
+				}
+				let tempNode = document.createElement('div');
+				tempNode.innerHTML = rawhtml;
+				let imgs = tempNode.getElementsByTagName('img');
+				for (let i = 0; i < imgs.length; i++) {
+					imgs[i].style.width = '100%';
+					imgs[i].style.height = 'auto';
+					imgs[i].style.display = 'block';
+				}
+				this.desc = tempNode.innerHTML;
+			},
+			//处理创建浏览记录
+			handleReadHistory() {
+				console.log('handleReadHistory')
+				if (this.hasLogin) {
+					let data = {
+						productId: this.product.id,
+						productName: this.product.name,
+						productPic: this.product.pic,
+						productPrice: this.product.price,
+						productSubTitle: this.product.subTitle,
+					}
+					createReadHistory(data);
+				}
+			},
+			//当商品规格改变时，修改商品信息
+			changeSpecInfo() {
+				let skuStock = this.getSkuStock();
+				if (skuStock != null) {
+					this.product.originalPrice = skuStock.price;
+					if (this.product.promotionType == 1) {
+						//单品优惠使用促销价
+						this.product.price = skuStock.promotionPrice;
+					} else {
+						this.product.price = skuStock.price;
+					}
+					this.product.stock = skuStock.stock;
+				}
+			},
+			//获取当前选中商品的SKU
+			getSkuStock() {
+				for (let i = 0; i < this.skuStockList.length; i++) {
+					let spDataArr = JSON.parse(this.skuStockList[i].spData);
+					let availAbleSpecSet = new Map();
+					for (let j = 0; j < spDataArr.length; j++) {
+						availAbleSpecSet.set(spDataArr[j].key, spDataArr[j].value);
+					}
+					let correctCount = 0;
+					for (let item of this.specSelected) {
+						let value = availAbleSpecSet.get(item.pname);
+						if (value != null && value == item.name) {
+							correctCount++;
+						}
+					}
+					if (correctCount == this.specSelected.length) {
+						return this.skuStockList[i];
+					}
+				}
+				return null;
+			},
+			//将商品加入到购物车
+			addToCart() {
+				if (!this.checkForLogin()) {
+					return;
+				}
+				let productSkuStock = this.getSkuStock();
+				let cartItem = {
+					price: this.product.price,
+					productAttr: productSkuStock.spData,
+					productBrand: this.product.brandName,
+					productCategoryId: this.product.productCategoryId,
+					productId: this.product.id,
+					productName: this.product.name,
+					productPic: this.product.pic,
+					productSkuCode: productSkuStock.skuCode,
+					productSkuId: productSkuStock.id,
+					productSn: this.product.productSn,
+					productSubTitle: this.product.subTitle,
+					quantity: 1
+				};
+				addCartItem(cartItem).then(response => {
+					uni.showToast({
+						title: response.message,
+						duration: 1500
+					})
+					this.getCartNum()
+				});
+			},
+			//检查登录状态并弹出登录框
+			checkForLogin() {
+				if (!this.hasLogin) {
+					uni.showModal({
+						title: '提示',
+						content: '你还没登录，是否要登录？',
+						confirmText: '去登录',
+						cancelText: '取消',
+						success: function(res) {
+							if (res.confirm) {
+								uni.navigateTo({
+									url: '/pages/public/login'
+								})
+							} else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+						}
+					});
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//初始化收藏状态
+			initProductCollection() {
+				console.log('this.hasLogin', this.hasLogin)
+				if (this.hasLogin) {
+					productCollectionDetail({
+						productId: this.product.id
+					}).then(response => {
+						this.favorite = response.data != null;
+					});
+				}
+			},
+			//跳转到品牌详情页
+			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);
+				})
+			}
+		},
+
+	}
+</script>
+
+<style lang='scss'>
+	page {
+		background: $page-color-base;
+		padding-bottom: 160upx;
+		padding-top: var(--status-bar-height);
+	}
+
+	.icon-you {
+		font-size: $font-base + 2upx;
+		color: #888;
+	}
+
+	.carousel {
+		height: 722upx;
+		position: relative;
+
+		.swiper {
+			height: 100%;
+
+			.u-swiper-indicator {
+				bottom: 36upx !important;
+			}
+		}
+
+		.image-wrapper {
+			width: 100%;
+			height: 100%;
+		}
+
+		.swiper-item {
+			display: flex;
+			justify-content: center;
+			align-content: center;
+			height: 750upx;
+			overflow: hidden;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+	}
+
+	.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;
+		}
+	}
+
+	/* 标题简介 */
+	.introduce-section {
+		background: #fff;
+		padding: 36upx;
+
+		.title {
+			font-size: 32upx;
+			color: $font-color-dark;
+			height: 50upx;
+			line-height: 50upx;
+		}
+
+		.title2 {
+			font-size: 28upx;
+			color: $font-color-light;
+			height: 46upx;
+			line-height: 46upx;
+		}
+
+		.price-box {
+			display: flex;
+			align-items: baseline;
+			height: 64upx;
+			padding: 10upx 0;
+			font-size: 26upx;
+			color: $uni-color-primary;
+		}
+
+		.price {
+			font-size: $font-lg + 2upx;
+		}
+
+		.m-price {
+			margin: 0 12upx;
+			color: $font-color-light;
+			text-decoration: line-through;
+		}
+
+		.coupon-tip {
+			align-items: center;
+			padding: 4upx 10upx;
+			background: $uni-color-primary;
+			font-size: $font-sm;
+			color: #fff;
+			border-radius: 6upx;
+			line-height: 1;
+			transform: translateY(-4upx);
+		}
+
+		.bot-row {
+			display: flex;
+			align-items: center;
+			height: 50upx;
+			font-size: $font-sm;
+			color: $font-color-light;
+
+			text {
+				flex: 1;
+			}
+		}
+	}
+
+	/* 分享 */
+	.share-section {
+		display: flex;
+		align-items: center;
+		color: $font-color-base;
+		background: linear-gradient(left, #fdf5f6, #fbebf6);
+		padding: 12upx 30upx;
+
+		.share-icon {
+			display: flex;
+			align-items: center;
+			width: 70upx;
+			height: 30upx;
+			line-height: 1;
+			border: 1px solid $uni-color-primary;
+			border-radius: 4upx;
+			position: relative;
+			overflow: hidden;
+			font-size: 22upx;
+			color: $uni-color-primary;
+
+			&:after {
+				content: '';
+				width: 50upx;
+				height: 50upx;
+				border-radius: 50%;
+				left: -20upx;
+				top: -12upx;
+				position: absolute;
+				background: $uni-color-primary;
+			}
+		}
+
+		.icon-xingxing {
+			position: relative;
+			z-index: 1;
+			font-size: 24upx;
+			margin-left: 2upx;
+			margin-right: 10upx;
+			color: #fff;
+			line-height: 1;
+		}
+
+		.tit {
+			font-size: $font-base;
+			margin-left: 10upx;
+		}
+
+		.icon-bangzhu1 {
+			padding: 10upx;
+			font-size: 30upx;
+			line-height: 1;
+		}
+
+		.share-btn {
+			flex: 1;
+			text-align: right;
+			font-size: $font-sm;
+			color: $uni-color-primary;
+		}
+
+		.icon-you {
+			font-size: $font-sm;
+			margin-left: 4upx;
+			color: $uni-color-primary;
+		}
+	}
+
+	.c-list {
+		font-size: $font-sm + 2upx;
+		color: $font-color-base;
+		background: #fff;
+
+		.c-row {
+			display: flex;
+			align-items: center;
+			padding: 20upx 30upx;
+			position: relative;
+		}
+
+		.tit {
+			width: 140upx;
+		}
+
+		.con {
+			flex: 1;
+			color: $font-color-dark;
+
+			.selected-text {
+				margin-right: 10upx;
+			}
+		}
+
+		.bz-list {
+			height: 40upx;
+			font-size: $font-sm+2upx;
+			color: $font-color-dark;
+
+			text {
+				display: inline-block;
+				margin-right: 30upx;
+			}
+		}
+
+		.con-list {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			color: $font-color-dark;
+			line-height: 40upx;
+		}
+
+		.red {
+			color: $uni-color-primary;
+		}
+	}
+
+	/* 评价 */
+	.eva-section {
+		display: flex;
+		flex-direction: column;
+		padding: 20upx 30upx;
+		background: #fff;
+		margin-top: 16upx;
+
+		.e-header {
+			display: flex;
+			align-items: center;
+			height: 70upx;
+			font-size: $font-sm + 2upx;
+			color: $font-color-light;
+
+			.tit {
+				font-size: $font-base + 2upx;
+				color: $font-color-dark;
+				margin-right: 4upx;
+			}
+
+			.tip {
+				flex: 1;
+				text-align: right;
+			}
+
+			.icon-you {
+				margin-left: 10upx;
+			}
+		}
+	}
+
+	.eva-box {
+		display: flex;
+		padding: 20upx 0;
+
+		.portrait {
+			flex-shrink: 0;
+			width: 80upx;
+			height: 80upx;
+			border-radius: 100px;
+		}
+
+		.right {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			font-size: $font-base;
+			color: $font-color-base;
+			padding-left: 26upx;
+
+			.con {
+				font-size: $font-base;
+				color: $font-color-dark;
+				padding: 20upx 0;
+			}
+
+			.bot {
+				display: flex;
+				justify-content: space-between;
+				font-size: $font-sm;
+				color: $font-color-light;
+			}
+		}
+	}
+
+	/*  详情 */
+	.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;
+			justify-content: center;
+			align-items: center;
+			height: 80upx;
+			font-size: $font-base + 2upx;
+			color: $font-color-dark;
+			position: relative;
+
+			text {
+				padding: 0 20upx;
+				background: #fff;
+				position: relative;
+				z-index: 1;
+			}
+
+			&:after {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translateX(-50%);
+				width: 300upx;
+				height: 0;
+				content: '';
+				border-bottom: 1px solid #ccc;
+			}
+		}
+	}
+
+	.detail-desc img {
+		width: 100%;
+		height: auto;
+	}
+
+	/* 规格选择弹窗 */
+	.attr-content {
+		padding: 10upx 30upx;
+
+		.a-t {
+			display: flex;
+
+			image {
+				width: 170upx;
+				height: 170upx;
+				flex-shrink: 0;
+				margin-top: -40upx;
+				border-radius: 8upx;
+				;
+			}
+
+			.right {
+				display: flex;
+				flex-direction: column;
+				padding-left: 24upx;
+				font-size: $font-sm + 2upx;
+				color: $font-color-base;
+				line-height: 42upx;
+
+				.price {
+					font-size: $font-lg;
+					color: $uni-color-primary;
+					margin-bottom: 10upx;
+				}
+
+				.selected-text {
+					margin-right: 10upx;
+				}
+			}
+		}
+
+		.attr-list {
+			display: flex;
+			flex-direction: column;
+			font-size: $font-base + 2upx;
+			color: $font-color-base;
+			padding-top: 30upx;
+			padding-left: 10upx;
+		}
+
+		.item-list {
+			padding: 20upx 0 0;
+			display: flex;
+			flex-wrap: wrap;
+
+			text {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: #eee;
+				margin-right: 20upx;
+				margin-bottom: 20upx;
+				border-radius: 100upx;
+				min-width: 60upx;
+				height: 60upx;
+				padding: 0 20upx;
+				font-size: $font-base;
+				color: $font-color-dark;
+			}
+
+			.selected {
+				background: #fbebee;
+				color: $uni-color-primary;
+			}
+		}
+	}
+
+	.no-padding {
+		padding: 0upx 0upx;
+	}
+
+	/*  弹出层 */
+	.popup {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 99;
+
+		&.show {
+			display: block;
+
+			.mask {
+				animation: showPopup 0.2s linear both;
+			}
+
+			.layer {
+				animation: showLayer 0.2s linear both;
+			}
+		}
+
+		&.hide {
+			.mask {
+				animation: hidePopup 0.2s linear both;
+			}
+
+			.layer {
+				animation: hideLayer 0.2s linear both;
+			}
+		}
+
+		&.none {
+			display: none;
+		}
+
+		.mask {
+			position: fixed;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+			background-color: rgba(0, 0, 0, 0.4);
+		}
+
+		.layer {
+			position: fixed;
+			z-index: 99;
+			bottom: 0;
+			width: 100%;
+			min-height: 40vh;
+			border-radius: 10upx 10upx 0 0;
+			background-color: #fff;
+
+			.btn {
+				height: 66upx;
+				line-height: 66upx;
+				border-radius: 100upx;
+				background: $uni-color-primary;
+				font-size: $font-base + 2upx;
+				color: #fff;
+				margin: 30upx auto 20upx;
+			}
+		}
+
+		@keyframes showPopup {
+			0% {
+				opacity: 0;
+			}
+
+			100% {
+				opacity: 1;
+			}
+		}
+
+		@keyframes hidePopup {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0;
+			}
+		}
+
+		@keyframes showLayer {
+			0% {
+				transform: translateY(120%);
+			}
+
+			100% {
+				transform: translateY(0%);
+			}
+		}
+
+		@keyframes hideLayer {
+			0% {
+				transform: translateY(0);
+			}
+
+			100% {
+				transform: translateY(120%);
+			}
+		}
+	}
+
+	/* 底部操作菜单 */
+	.page-bottom {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		z-index: 95;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100vw;
+		height: 144upx;
+		background: #ffffff;
+		box-sizing: content-box;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		.p-b-btn {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			font-size: $font-sm;
+			color: $font-color-base;
+			width: 96upx;
+			height: 80upx;
+			position: relative;
+
+			.cart-badge>view {
+				top: 0upx !important;
+				right: 0upx !important;
+			}
+
+			.yticon {
+				font-size: 40upx;
+				line-height: 48upx;
+				color: $font-color-light;
+			}
+
+			.pdicon {
+				width: 48upx;
+				height: 48upx;
+			}
+
+			&.active,
+			&.active .yticon {
+				color: $uni-color-primary;
+			}
+
+			.icon-fenxiang2 {
+				font-size: 42upx;
+				transform: translateY(-2upx);
+			}
+
+			.icon-shoucang {
+				font-size: 46upx;
+			}
+		}
+
+		.action-btn-group {
+			display: flex;
+			height: 76upx;
+			overflow: hidden;
+			margin-left: 20upx;
+			position: relative;
+
+			.action-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 180upx;
+				height: 100%;
+				font-size: $font-base;
+				padding: 0;
+				border-radius: 60upx;
+			}
+
+			.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;
+			}
+
+		}
+	}
+
+	/* 优惠券面板 */
+	.mask {
+		display: flex;
+		align-items: flex-end;
+		position: fixed;
+		left: 0;
+		top: var(--window-top);
+		bottom: 0;
+		width: 100%;
+		background: rgba(0, 0, 0, 0);
+		z-index: 9995;
+		transition: .3s;
+
+		.mask-content {
+			width: 100%;
+			min-height: 30vh;
+			max-height: 70vh;
+			background: #f3f3f3;
+			transform: translateY(100%);
+			transition: .3s;
+			overflow-y: scroll;
+		}
+
+		&.none {
+			display: none;
+		}
+
+		&.show {
+			background: rgba(0, 0, 0, .4);
+
+			.mask-content {
+				transform: translateY(0);
+			}
+		}
+	}
+
+	/* 优惠券列表 */
+	.coupon-item {
+		display: flex;
+		flex-direction: column;
+		margin: 20upx 24upx;
+		background: #fff;
+
+		.con {
+			display: flex;
+			align-items: center;
+			position: relative;
+			height: 120upx;
+			padding: 0 30upx;
+
+			&:after {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				content: '';
+				width: 100%;
+				height: 0;
+				border-bottom: 1px dashed #f3f3f3;
+				transform: scaleY(50%);
+			}
+		}
+
+		.left {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			flex: 1;
+			overflow: hidden;
+			height: 100upx;
+		}
+
+		.title {
+			font-size: 32upx;
+			color: $font-color-dark;
+			margin-bottom: 10upx;
+		}
+
+		.time {
+			font-size: 24upx;
+			color: $font-color-light;
+		}
+
+		.right {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			font-size: 26upx;
+			color: $font-color-base;
+			height: 100upx;
+		}
+
+		.price {
+			font-size: 44upx;
+			color: $base-color;
+
+			&:before {
+				content: '￥';
+				font-size: 34upx;
+			}
+		}
+
+		.tips {
+			font-size: 24upx;
+			color: $font-color-light;
+			line-height: 60upx;
+			padding-left: 30upx;
+		}
+
+		.circle {
+			position: absolute;
+			left: -6upx;
+			bottom: -10upx;
+			z-index: 10;
+			width: 20upx;
+			height: 20upx;
+			background: #f3f3f3;
+			border-radius: 100px;
+
+			&.r {
+				left: auto;
+				right: -6upx;
+			}
+		}
+	}
+
+	.brand-info {
+		margin-top: 16upx;
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+
+		.brand-box {
+			display: flex;
+			align-items: center;
+			padding: 30upx 50upx;
+
+			.image-wrapper {
+				width: 210upx;
+				height: 70upx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.title {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				font-size: $font-lg+4upx;
+				margin-left: 30upx;
+				color: $font-color-dark;
+
+				text:last-child {
+					font-size: $font-sm;
+					color: $font-color-light;
+					margin-top: 8upx;
+
+					&.Skeleton {
+						width: 220upx;
+					}
+				}
+			}
+		}
+
+		.d-header {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 80upx;
+			font-size: $font-base + 2upx;
+			color: $font-color-dark;
+			position: relative;
+
+			text {
+				padding: 0 20upx;
+				background: #fff;
+				position: relative;
+				z-index: 1;
+			}
+
+			&:after {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translateX(-50%);
+				width: 300upx;
+				height: 0;
+				content: '';
+				border-bottom: 1px solid #ccc;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/public/login.vue b/pages/public/login.vue
index cf2050c..1526fbc 100644
--- a/pages/public/login.vue
+++ b/pages/public/login.vue
@@ -72,7 +72,7 @@
 				// 是否同意隐私策略
 				isRead: false,
 				// 是否显示验证码输入
-				isShowCode: true,
+				isShowCode: false,
 				// 登录中禁用按钮
 				isLogining: false,
 				// 传给验证码输入组件
diff --git a/utils/requestUtil.js b/utils/requestUtil.js
index 5b60bfd..9b1ae31 100644
--- a/utils/requestUtil.js
+++ b/utils/requestUtil.js
@@ -3,6 +3,7 @@ import {
 	API_BASE_URL,
 	API_USER_URL,
 } from '@/utils/appConfig.js';
+import store from '@/store/index.js';
 
 const http = new Request()
 
@@ -58,7 +59,7 @@ http.interceptor.response((response) => {
 		uni.showToast({
 			title: res.message,
 			duration: 1500,
-			icon: 'error'
+			icon: 'none'
 		})
 		//401未登录处理
 		if (res.code === 401) {
@@ -77,7 +78,7 @@ http.interceptor.response((response) => {
 					}
 				}
 			});
-			uni.setStorageSync('token', '')
+			store.commit('logout')
 		}
 		return Promise.reject(response);
 	} else {