From 8e4f1992f41ee162a93731f178fa95fef42d0cf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Tue, 6 Jul 2021 12:05:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                  |  14 +-
 pages/goodsDetail/index.vue | 391 ++++++++++++++++++++++++++++++++++++
 2 files changed, 401 insertions(+), 4 deletions(-)
 create mode 100644 pages/goodsDetail/index.vue

diff --git a/pages.json b/pages.json
index 0d59b10..7fca7cc 100644
--- a/pages.json
+++ b/pages.json
@@ -3,6 +3,14 @@
 		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+			}
+		},
 		{
 			"path": "pages/notice/notice",
 			"style": {
@@ -34,11 +42,9 @@
 			}
 		},
 		{
-			"path": "pages/index/index",
+			"path": "pages/goodsDetail/index",
 			"style": {
-				"navigationBarTitleText": "首页",
-				"navigationStyle": "custom",
-				"enablePullDownRefresh": true
+				"navigationBarTitleText": "商品详情"
 			}
 		}
 	],
diff --git a/pages/goodsDetail/index.vue b/pages/goodsDetail/index.vue
new file mode 100644
index 0000000..6258a08
--- /dev/null
+++ b/pages/goodsDetail/index.vue
@@ -0,0 +1,391 @@
+<template>
+	<view>
+		<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
+			<block v-if="$isRight(goods_detail)">
+				<!-- 商品图片轮播 -->
+				<swiper :current="current" :indicator-dots="goods_detail.banners.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
+					<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id">
+						<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
+					</swiper-item>
+				</swiper>
+				<!-- 商品主要信息 -->
+				<view class="head-info">
+					<view class="lf-font-32 lf-color-333 lf-font-bold">{{ goods_detail.name }}</view>
+					<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
+						<view class="lf-flex price">
+							<lf-price :price="goods_detail.specs[0].selling_price"></lf-price>
+							<view class="lf-m-l-20">¥{{ goods_detail.specs[0].original_price }}</view>
+							<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
+						</view>
+						<view class="lf-font-24 lf-text-right">
+							<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
+							<!-- <view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> -->
+						</view>
+					</view>
+					<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
+						<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view>
+					</view>
+				</view>
+				<!-- 地址信息 -->
+				<!-- <view class="address-box">
+					<view class="lf-font-32 lf-font-bold">适用门店</view>
+					<view class="lf-m-t-20 lf-row-between">
+						<view class="lf-flex">
+							<image mode="aspectFill" class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image>
+							<image mode="aspectFill" class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image>
+							<view class="lf-font-32 lf-m-l-20 lf-line-1" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
+						</view>
+						<view @click="makePhoneCall(goods_detail.store.tel)">
+							<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text>
+						</view>
+					</view>
+					<view class="lf-flex lf-m-t-20" @click="openMap">
+						<view style="width: 60rpx; height: 60rpx;" class="lf-row-center">
+							<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #555555;"></text>
+						</view>
+						<view class="lf-m-l-20 lf-font-28" style="color: #555555;">{{ goods_detail.store.address }}</view>
+					</view>
+				</view> -->
+				<!-- 商品详情 -->
+				<view class="goods-detail">
+					<view class="lf-font-32 lf-font-bold lf-m-b-20">旅游须知</view>
+					<rich-text :nodes="formatRichText(goods_detail.content)" v-if="goods_detail.content_type == 'rich_text'"></rich-text>
+					<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image>
+				</view>
+				<!-- 修饰专用 -->
+				<view class="extra"></view>
+				<!-- 吸底操作按钮 -->
+				<view class="lf-row-between fixed-bottom">
+					<view class="lf-flex lf-p-t-10 lf-p-b-10">
+						<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
+							<image class="icon-img" src="../../static/center/home.png"></image>
+							<view class="lf-m-t-1">首页</view>
+						</view>
+						<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
+							<image class="icon-img" src="../../static/center/service.png"></image>
+							<view class="lf-m-t-1">客服</view>
+						</view>
+						<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
+							<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image>
+							<image class="icon-img" src="../../static/center/collect.png" v-else></image>
+							<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
+						</view>
+						<button class="lf-flex-column lf-row-center icon-item" open-type="share">
+							<image class="icon-img" src="../../static/center/share.png"></image>
+							<view class="lf-m-t-1">分享</view>
+						</button>
+					</view>
+					<button class="btn" @click="toAddOrder">立即购买</button>
+				</view>
+				<!-- 回到顶部 -->
+				<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
+				<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
+			</block>
+		</skeleton>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				current: 0, // 轮播下标
+				goods_id: 0,
+				goods_detail: {},
+				is_collect: 0, // 1为当前收藏商品了，0为否
+				skeletonLoading: true
+			}
+		},
+		onLoad(options){
+			this.goods_id = options.id;
+			this.getGoodsDetail();
+		},
+		methods: {
+			getGoodsDetail(){
+				let that = this;
+				this.goods_detail = {
+					all_specs: null,
+					banners: [],
+					category_id: 2,
+					content: "<p><img src='http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/tinymce/images/156005c5baf40ff51a327f1c34f2975b60dd6a468cdbe.jpg' alt='' width='100%' /></p>",
+					content_type: "rich_text",
+					cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg!thumb_300x300_q90",
+					created_at: "1625123492",
+					deleted_at: null,
+					id: 1,
+					name: "肯德基精选午餐",
+					share_cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/d1c990182d6cfd6ebf1faf4077f22248.jpg",
+					specs: [{
+						cost: "",
+						created_at: "1625470217",
+						deleted_at: null,
+						goods_id: 1,
+						id: 8,
+						limit: 10,
+						name: "规格3",
+						original_price: "111.00",
+						original_price_text: "111.00",
+						selling_price: "1.00",
+						sold_percent: 50,
+						sold_percent_text: "已抢50%",
+						sold_stock: 110,
+						sold_stock_text: "110人购买",
+						specs: null,
+						state: 1,
+						stock: 110,
+						stock_text: "库存仅剩110份",
+						updated_at: "1625471139"
+					}],
+					store: {
+						address: "广西南宁市青秀区民族大道111号",
+						cover: "http://sky-applet-mall.oss-cn-shenzhen.aliyuncs.com/images/b4644c5226918153c0cb372e99e12bed.jpg!thumb_200x200_q90",
+						created_at: "1625122973",
+						deleted_at: null,
+						id: 1,
+						intro: null,
+						lat: "108.3745472970581",
+						lng: "22.813532837581967",
+						name: "肯德基连锁餐饮",
+						state: 2,
+						tel: "18888888888",
+						updated_at: "1625537146",
+						user_id: 7
+					},
+					store_id: 1,
+					tags: ["推荐"],
+					updated_at: "1625123492",
+					user: {is_collect: 1}
+				}
+				return;
+				this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
+					this.skeletonLoading = false;
+					this.goods_detail = res.data;
+					this.is_collect = Boolean(res.data.user.is_collect);
+				}).catch(err => {
+					this.skeletonLoading = false;
+					setTimeout(() => {
+						that.$toBack();
+					}, 1000);
+				})
+			},
+			// 切换商品收藏
+			switchCollect(){
+				let userInfo = uni.getStorageSync('userinfo') || {};
+				if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){
+					this.$url('/pages/login/index?type=userinfo');
+					return;
+				}
+				this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => {
+					this.$msg(res.msg);
+					this.is_collect = Boolean(res.data.user.is_collect);
+				})
+			},
+			// 拨打电话
+			makePhoneCall(phoneStr){
+				uni.makePhoneCall({
+					phoneNumber: String(phoneStr)
+				})
+			},
+			// 打开地图
+			openMap(){
+				let { address, lat, lng } = this.goods_detail?.store || {};
+				uni.openLocation({
+				  longitude: Number(lat),
+				  latitude: Number(lng),
+				  scale: 20,
+				  name: address
+			   });
+			},
+			// 跳转到确认下单页面
+			toAddOrder(){
+				let goods_id = this.goods_detail.id;
+				let goods_specs_id = this.goods_detail.specs[0].id
+				this.$url('/pages/order/confirm-order?goods_id='+ goods_id +'&goods_specs_id='+ goods_specs_id);
+			},
+			// 预览图片
+			lookImg(index){
+				this.$u.throttle(() => {
+					let goods_banner = this.goods_detail.banners || [];
+					let banners = goods_banner.map(item => item.cover);
+					uni.previewImage({
+						urls: banners,
+						current: index
+					})
+				}, 200);
+			},
+			// 富文本处理
+			formatRichText(richText){
+			  if(richText != null){
+					let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){
+						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+						return match;
+					});
+					newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
+						match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
+						return match;
+					});
+					newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
+					newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
+					return newRichText;
+				}else{
+					return null;
+				}
+			}
+		},
+		onShareAppMessage(){
+			let goods = this.goods_detail;
+			let title = goods.name;
+			let imageUrl = goods.share_cover || goods.cover;
+			let path = '/pages/route/index?route=goods_detail&id='+ goods.id;
+			
+			return {
+				title,
+				path,
+				imageUrl
+			}
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #f5f5f5;
+		overflow-x: hidden;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.swiper-box{
+		width: 750rpx;
+		height: 490rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.head-info{
+		width: 750rpx;
+		height: auto;
+		box-sizing: border-box;
+		padding: 0 32rpx;
+		padding-top: 20rpx;
+		background-color: #FFFFFF;
+		// .price>view:nth-of-type(1){
+		// 	color: #FF0000;
+		// 	margin-right: 22rpx;
+		// 	font-weight: bold;
+		// }
+		.price>view:nth-of-type(1){
+			text-decoration: line-through;
+			color: #777777;
+			margin-right: 22rpx;
+		}
+		.price>view:nth-of-type(2){
+			width: max-content;
+			padding: 0 18rpx;
+			height: 46rpx;
+			background-color: #1998FE;
+			border-radius: 10rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #FFFFFF;
+		}
+		.label-box{
+			min-height: 130rpx;
+			width: 100%;
+			border-top: 1rpx solid #E5E5E5;
+			display: flex;
+			flex-wrap: wrap;
+			padding: 30rpx 0 10rpx 0;
+			.label-item{
+				width: 156rpx;
+				height: 70rpx;
+				border-radius: 10rpx;
+				border: 2rpx solid #1998FE;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 28rpx;
+				color: #1998FE;
+				margin-right: 20rpx;
+				margin-bottom: 20rpx;
+			}
+		}
+	}
+	
+	.address-box{
+		width: 750rpx;
+		height: auto;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+		padding: 32rpx;
+		margin-top: 20rpx;
+		.shop-img{
+			width: 60rpx;
+			height: 60rpx;
+			border-radius: 50%;
+		}
+	}
+	
+	.goods-detail{
+		width: 750rpx;
+		height: auto;
+		background-color: #FFFFFF;
+		padding: 32rpx;
+		box-sizing: border-box;
+		margin-top: 20rpx;
+		.goods-img{
+			width: 100%;
+		}
+	}
+	
+	.extra{
+		width: 100%;
+		height: 120rpx;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		box-sizing: content-box;
+	}
+	
+	.fixed-bottom{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		background-color: #FFFFFF;
+		width: 100%;
+		height: auto;
+		padding: 0 32rpx;
+		border-top: 1rpx solid #e5e5e5;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		.icon-item{
+			margin-right: 16rpx;
+			background-color: transparent;
+			margin: 0;
+			line-height: initial;
+			font-size: 28rpx;
+			font-weight: inherit;
+			margin-right: 10rpx;
+			padding: 0;
+			width: 88rpx;
+			&:first-child{
+				padding-left: 0;
+			}
+			.icon-img{
+				height: 50rpx;
+				width: 50rpx;
+			}
+		}
+		.btn{
+			margin: 0;
+			padding: 0;
+			width: 208rpx;
+			height: 80rpx;
+			background-color: #1998FE;
+			color: #FFFFFF;
+			line-height: 80rpx;
+			font-size: 32rpx;
+			border-radius: 42rpx;
+		}
+	}
+</style>
\ No newline at end of file

From 8aa506b1493a8401159d0ed8a32d9f401fe356b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Tue, 6 Jul 2021 14:54:09 +0800
Subject: [PATCH 2/2] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E4=B8=93=E9=A2=98?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                   |   7 ++
 pages/activityList/index.vue | 131 +++++++++++++++++++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 pages/activityList/index.vue

diff --git a/pages.json b/pages.json
index 7fca7cc..4b81be7 100644
--- a/pages.json
+++ b/pages.json
@@ -46,6 +46,13 @@
 			"style": {
 				"navigationBarTitleText": "商品详情"
 			}
+		},
+		{
+			"path": "pages/activityList/index",
+			"style": {
+				"navigationBarTitleText": "专题活动",
+				"enablePullDownRefresh": true
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/activityList/index.vue b/pages/activityList/index.vue
new file mode 100644
index 0000000..e929343
--- /dev/null
+++ b/pages/activityList/index.vue
@@ -0,0 +1,131 @@
+<template>
+	<view>
+		<!-- 图片轮播 -->
+		<swiper :current="current" :indicator-dots="banners.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
+			<swiper-item v-for="(item, index) in banners" :key="item.id">
+				<image mode="aspectFill" :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
+			</swiper-item>
+		</swiper>
+		<!-- 活动列表 -->
+		<view class="content">
+			<view class="item" v-for="item in list" :key="item">
+				<view class="cover">
+					<image src="../../static/logo.png" class="lf-w-100 lf-h-100" mode="aspectFill"></image>
+				</view>
+				<view style="width: 420rpx;">
+					<view class="lf-font-28 lf-color-333 lf-m-b-20 lf-line-2" style="height: 78rpx;">南胜地 身处亚热带风情/玩转南澳转南澳转南澳转南澳转转南澳转南澳</view>
+					<view class="lf-font-24 lf-color-gray">本套票只包含两个成人不可带小孩</view>
+					<view class="lf-flex lf-m-t-25">
+						<lf-price price="3599.00"></lf-price>
+						<text class="lf-font-24 lf-color-gray lf-line-through lf-m-l-15">¥4599.00</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 加载 -->
+		<view class="loading-more">
+			<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
+			<lf-nocontent v-else></lf-nocontent>
+		</view>
+		<!-- 回到顶部 -->
+		<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				current: 0,
+				banners: [{id: 1, cover: 'https://picsum.photos/375/490'}],
+				list: [1,2,3,4,5],
+				loadingClass: false,
+				loadingText: '已加载全部数据~',
+				page: 1,
+				isPage: true,
+				pageSize: 20
+			}
+		},
+		onLoad(){
+			// this.getActivityList();
+		},
+		methods: {
+			lookImg(index){
+				this.$u.throttle(() => {
+					let goods_banner = this.banners || [];
+					let banners = goods_banner.map(item => item.cover);
+					uni.previewImage({
+						urls: banners,
+						current: index
+					})
+				}, 200);
+			},
+			getActivityList(){
+				return;
+				this.$http(this.API.a).then(res => {
+					this.isPage = res.data.has_more_page;
+					let list = res.data.items;
+					if(!res.data.has_more_page){
+						this.loadingClass = false;
+						this.loadingText = '已加载全部数据~';
+					}
+					if(this.page == 1){
+						this.list = list;
+					}else{
+						this.list.push(...list);
+					}
+				})
+			},
+			// 进入商品详情页
+			enterDetail(index){
+				let goods_id = this.list[index].goods_id;
+				this.$url('/pages/goodsDetail/index?id='+ goods_id);
+			}
+		},
+		onReachBottom(){
+			if(this.isPage){
+				this.page = this.page + 1;
+				this.getActivityList();
+			}
+		},
+		onPullDownRefresh(){
+			this.page = 1;
+			this.isPage = true;
+			this.loadingClass = true;
+			this.loadingText = '正在加载中';
+			this.getActivityList();
+			uni.stopPullDownRefresh();
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.swiper-box{
+		width: 750rpx;
+		height: 490rpx;
+		background-color: #FFFFFF;
+	}
+	.content{
+		padding: 0 32rpx;
+		box-sizing: border-box;
+		width: 750rpx;
+		height: max-content;
+		.item{
+			width: 100%;
+			height: auto;
+			border-bottom: 1rpx solid #E5E5E5;
+			padding: 30rpx 0;
+			display: flex;
+			&:last-child{
+				border-bottom: none;
+			}
+			.cover{
+				width: 250rpx;
+				height: 210rpx;
+				border-radius: 20rpx;
+				overflow: hidden;
+				margin-right: 15rpx;
+			}
+		}
+	}
+</style>