上传文件至 'pages/index'

pages/index/chakanyyzz.vue

@@ -0,0 +1,202 @@
+<template>
+	<view class="app-container">
+		<view class="code-container" v-if="isShowCode">
+			<view class="title">请完成安全验证</view>
+			<pt-images-verification ref="verification" :top="codeObj.yHeight" :bgImg="codeObj.bigImage" :maskImg="codeObj.smallImage" :isSuccess="codeObj.isSuccess" :isFail="codeObj.isFail" @refresh="refresh" @finish="finish"></pt-images-verification>
+		</view>
+		<image v-else :src="imagesUrl" style="width:100%" mode="widthFix"></image>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				imagesUrl:'',
+				code: '',
+				isShowCode: true,
+				codeObj: {
+					bigImage: '',
+					smallImage: '',
+					key: '',
+					yHeight: '',
+					isSuccess: false,
+					isFail: false,
+				}
+			}
+		},
+		computed: {
+			...mapState(['userInfo', 'isLogin', 'userId', 'websitData']),
+		},
+		onLoad() {
+			this.init();
+		},
+		methods: {
+			// 获取图片验证码
+			init(){
+				this.$axios({
+					url: '/common/getVerifi',
+					method: 'get',
+					params: {},
+					isLoading: 1
+				}).then(res => {
+					this.codeObj = res.data;
+				})
+			},
+			
+			// 刷新验证码
+			refresh(){
+				this.isShowCode = true
+				this.init()
+			},
+			
+			// 验证结束
+			finish(value){
+				this.$axios({
+					url: '/user/user/detail',
+					method: 'get',
+					params: {
+						userId: this.userId,
+					},
+				}).then((res) => {
+					this.$axios({
+						url: '/user/websitUrl',
+						params: {
+							websitId: res?.data?.adminWebsit?.websitId,
+							key: this.codeObj.key,
+							vrifyCode: Math.round(value)
+						},
+						isLoading: 1
+					}).then(res => {
+						this.imagesUrl = res.data
+						this.isShowCode = false
+					}).catch(err => {
+						
+					})
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		box-sizing: border-box;
+	}
+	.banner {
+		image {
+			width: 100%;
+		}
+	}
+	.code-container {
+		position: fixed;
+		top: calc(50vh - 150px);
+		left: calc(50vw - 170px);
+		z-index: 999;
+		background: #FFFFFF;
+		padding: 20px;
+		border-radius: 10rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		.title {
+			font-size: 28rpx;
+			color: #333333;
+			width: 100%;
+			text-align: left;
+			margin-bottom: 10px;
+		}
+		.button {
+			margin-top: 20px;
+			color: #666666;
+			width: 200rpx;
+			line-height: 60rpx;
+			border: 1px solid #eaeaea;
+			border-radius: 10rpx;
+			text-align: center;
+		}
+	}
+	.main {
+		padding: 50rpx;
+		.title {
+			font-size: 32rpx;
+			color: #333333;
+			text-align: center;
+		}
+		.button {
+			margin-top: 120rpx;
+			width: 100%;
+			text-align: center;
+			line-height: 88rpx;
+			border-radius: 88rpx;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			background: linear-gradient(-90deg,#ff3f42 0%, #fe781f 100%);
+			&.disabled {
+				background: #C1C1C1;
+			}
+		}
+		.tips {
+			font-size: 24rpx;
+			color: #FE781F;
+			line-height: 24rpx;
+			margin-top: 20rpx;
+			height: 24rpx;
+			margin-left: 10rpx;
+		}
+		.form {
+			margin-top: 60rpx;
+			.row {
+				&:last-child {
+					margin-top: 40rpx;
+					display: flex;
+					align-items: flex-end;
+					.btn {
+						width: 180rpx;
+						height: 50rpx;
+						border-radius: 50rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						background: linear-gradient(-90deg,#ff3f42 0%, #fe781f 100%);
+						margin-left: 30rpx;
+						&.disabled {
+							background: #C1C1C1;
+						}
+					}
+				}
+				.row-c {
+					height: 60rpx;
+					display: flex;
+					align-items: center;
+					border-bottom: 1px solid #D1D1D1;
+					.left {
+						width: 140rpx;
+						height: 28rpx;
+						border-right: 1px solid #D1D1D1;
+						font-size: 30rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-shrink: 0;
+					}
+					.input {
+						width: 100%;
+						input {
+							font-size: 30rpx;
+							width: 100%;
+							padding: 0 25rpx;
+							box-sizing: border-box;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/index/coupon.vue

@@ -0,0 +1,235 @@
+<template>
+	<view class="app-container">
+		<view class="list-container">
+			<block v-for="(item, index) in couponList" :key='index'>
+				<view class="item">
+					<view class="bg">
+						<image src="@/static/mine/coupon/bg_1.png"></image>
+					</view>
+					<view class="content">
+						<view class="left">
+							<view class="price">{{item.couponValue}}<text>元</text></view>
+							<view class="text" v-if="item.couponType == 'SATISFY'">满{{item.orderAmount}}可用</view>
+						</view>
+						<view class="right">
+							<view class="main">
+								<view class="row1 ellipsis-2">{{item.couponName}}</view>
+								<view class="row2">
+									<!-- <view class="date">
+										<view>领取时间：</view>
+										<view>
+											{{item.obtainStartTime | dateToYYmmdd2}}-{{item.obtainEndTime | dateToYYmmdd2}}
+										</view>
+									</view> -->
+									<view class="date">
+										<view>使用时间：</view>
+										<view>
+											{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}
+										</view>
+									</view>
+									<view class="button red" @tap="handleCoupon(item)">立即领取</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<view  v-if="couponList.length" style="position: fixed;bottom: 0;left: 0;right: 0;box-sizing: border-box;padding: 30rpx;background: #ffffff;">
+			<button type="primary" @tap="handleCouponAll">
+				一键领取
+			</button>
+		</view>
+		<no-data v-if="!couponList.length" :showText="'暂无可领取优惠券'"></no-data>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+
+	export default {
+		data() {
+			return {
+				couponList: [],
+			}
+		},
+
+		computed: {
+			...mapState(['userInfo', 'isLogin', 'userId'])
+		},
+
+		onLoad() {
+			this.getCouponList();
+		},
+
+		methods: {
+			getCouponList() {
+				this.$axios({
+					url: '/couponNew/list/all',
+					method: 'get',
+					params: {
+						userId: this.userId
+					},
+					isLoading: 1
+				}).then(res => {
+					this.couponList = res.data;
+				})
+			},
+
+			// 处理优惠券
+			handleCoupon(item) {
+				this.$axios({
+					url: '/couponNew/obtain',
+					method: 'get',
+					params: {
+						userId: this.userId,
+						couponIds: item.couponId
+					}
+				}).then(res => {
+					this.$successToast('领取成功');
+					this.getCouponList();
+				})
+			},
+
+			handleCouponAll() {
+				this.$axios({
+					url: '/couponNew/obtain',
+					method: 'get',
+					params: {
+						userId: this.userId,
+						couponIds: this.couponList.map(item => item.couponId).join(",")
+					}
+				}).then(res => {
+					this.$successToast('领取成功');
+					this.getCouponList();
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		padding: 20rpx;
+		box-sizing: border-box;
+	}
+
+	.list-container {
+		box-sizing: border-box;
+		padding-bottom: 160rpx;
+		.item {
+			position: relative;
+			margin-bottom: 20rpx;
+
+			.bg {
+				image {
+					width: 710rpx;
+					height: 160rpx;
+					display: block;
+				}
+			}
+
+			.content {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 710rpx;
+				height: 160rpx;
+				display: flex;
+				align-items: center;
+
+				.left {
+					width: 240rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+
+					.price {
+						font-size: 60rpx;
+						color: #FFFFFF;
+
+						text {
+							font-size: 28rpx;
+							margin-top: 20rpx;
+						}
+					}
+
+					.text {
+						color: #FFFFFF;
+						font-size: 28rpx;
+					}
+				}
+
+				.right {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 0 20rpx;
+					width: 470rpx;
+					height: 160rpx;
+					box-sizing: border-box;
+
+					.main {
+						width: 430rpx;
+						height: 160rpx;
+						padding: 16rpx 0;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.row1 {
+							font-size: 28rpx;
+							line-height: 32rpx;
+						}
+
+						.row2 {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+
+							.date {
+								font-size: 24rpx;
+								color: #999999;
+								line-height: 28rpx;
+							}
+
+							.button {
+								width: 120rpx;
+								height: 40rpx;
+								border-radius: 40rpx;
+								font-size: 24rpx;
+								flex-shrink: 0;
+								box-sizing: border-box;
+								display: flex;
+								justify-content: center;
+								align-items: center;
+
+								&.gary {
+									background: #AAAAAA;
+									color: #FFFFFF;
+									border: 1px solid #AAAAAA;
+								}
+
+								&.red {
+									background: #C434FF;
+									color: #FFFFFF;
+									border: 1px solid #C434FF;
+								}
+
+								&.white {
+									color: #FF3F42;
+									border: 1px solid #FF3F42;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -0,0 +1,2270 @@
+<template>
+	<view class="app-container">
+		<view class="home-container">
+			<block>
+				<view class="top-container">
+					<image src="@/static/home/top_bg.png" mode="widthFix" class="bg"></image>
+					<view class="content">
+						<view class="title" :style="cuStyle">广佛格力商城</view>
+						<view class="header-container">
+							<view class="left" @tap="getLocation">
+								<image src="@/static/home/dingweitus.png"></image>
+								<text style="color: #ffffff;">{{currentPosition||''}}</text>
+							</view>
+						</view>
+						<view class="search">
+							<image src="@/static/icon/search.png" class=""></image>
+							<input v-model="keyword" @confirm="searchSubmit" type="text" confirm-type="search"
+								placeholder="搜索商品名称或型号">
+						</view>
+						<view class="shangjiakapian">
+							<view class="shangjiatupiand">
+								<image style="width: 100%;height: 310rpx;" src="@/static/home/shangjiabeijing.png"
+									class=""></image>
+								<view class="nirongdd">
+									<view style="color:#ffffff;font-size: 36rpx;margin-bottom: 16rpx;">
+										{{websitData.name||''}}
+									</view>
+									<view
+										style="margin-bottom: 16rpx;display: flex;justify-content: flex-start;align-items: center;">
+										<view
+											style="color:#ffffff;font-size: 24rpx;box-sizing: border-box;padding: 8rpx 18rpx;border-radius: 20rpx;background: rgba(245, 245,245,0.2);margin-right: 20rpx;">
+											{{websitData.type||''}}
+										</view>
+										<view style="color:#ffffff;font-size: 24rpx;">
+											{{websitData.websitNumber||''}}
+										</view>
+									</view>
+									<view style="color:#ffffff;font-size: 24rpx;">地址：{{websitData.address||''}}</view>
+								</view>
+								<view
+									style="display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100rpx;position: absolute;left: 0;bottom: 0;right: 0;background: rgba(245, 245,245,0.3);">
+									<view style="width: 50%;display: flex;justify-content: center;align-items: center;"
+										@click="dakaidaoh">
+										<image style="width: 40rpx;height: 40rpx;" src="@/static/home/juliduoyuan.png"
+											class=""></image>
+										<view style="font-size: 28rpx;color: #ffffff;margin-left: 20rpx;">
+											距您{{distancess||''}}KM
+										</view>
+									</view>
+									<view
+										style="width: 6rpx;height: 50rpx;border-radius: 3rpx;background:rgba(245, 245,245,0.6);">
+									</view>
+									<view style="width: 50%;display: flex;justify-content: center;align-items: center;"
+										@click="bodasjdh(websitData.mobile||'')">
+										<image style="width: 40rpx;height: 40rpx;" src="@/static/home/dianhuaaa.png"
+											class=""></image>
+										<view style="font-size: 28rpx;color: #ffffff;margin-left: 20rpx;">电话</view>
+									</view>
+								</view>
+								<image @click="chakanyyzz" style="width: 50rpx;height: 50rpx;position: absolute; top: 30%; right: 40rpx;"
+									src="@/static/home/yinyangzhiz.png"></image>
+							</view>
+							<view class="shangjiakapiandibubiaos">
+								<view class="shangjiakapiandibuItem">
+									<view>官方直营</view>
+								</view>
+								<view class="shangjiakapiandibuItem">
+									<view>急速发货</view>
+								</view>
+								<view class="shangjiakapiandibuItem">
+									<view>全场包邮</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="swiper-container" v-if=" bannerList.length > 0">
+					<swiper @change="changeBanner" :autoplay="true">
+						<block v-for="(item, index) in bannerList" :key='index'>
+							<swiper-item>
+								<image :src="item.imgSrc" mode="aspectFill"
+									@tap="toMiniProgram(item.appId, item.linkUrl)" v-if="item.type === 2"></image>
+								<image :src="item.imgSrc" mode="aspectFill" @tap="toActivityList(item.goodsId)"
+									v-if="item.type === 3"></image>
+								<image :src="item.imgSrc" mode="aspectFill" @tap="toGoodsDetail(item.goodsId)" v-else>
+								</image>
+							</swiper-item>
+						</block>
+					</swiper>
+					<view class="dots-conatiner">
+						<view class="con" :style="'width:'+(bannerList.length * 20)+'rpx;'">
+							<view class="dot" :style=" 'transform:translateX('+ (bannerCurrent * 100) +'%)' "></view>
+						</view>
+					</view>
+				</view>
+			</block>
+			<!-- --------------------------------- -->
+			<view class="caidanrukou">
+				<view class="dangecaidanrukou" @click="goodsClassify">
+					<view>
+						<image class="tupiancaidan" src="@/static/home/fenlei.png"></image>
+					</view>
+					<view class="dangecaidanrukouTitle">商品分类</view>
+				</view>
+				<view class="dangecaidanrukou" @click="couponList">
+					<view>
+						<image class="tupiancaidan" src="@/static/home/youhuiquan.png"></image>
+					</view>
+					<view class="dangecaidanrukouTitle">优惠卡券</view>
+				</view>
+				<view class="dangecaidanrukou" @click="orderListPage">
+					<view>
+						<image class="tupiancaidan" src="@/static/home/dingdan.png"></image>
+					</view>
+					<view class="dangecaidanrukouTitle">我的订单</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="sptjyangshi">
+			商品推荐
+		</view>
+		<view class="top-container2">
+			<view class="tab">
+				<view class="item" :class="screenType === 0 ? 'current':''" @tap="changeScreen(0)">综合</view>
+				<view class="item" :class="screenType === 1 ? 'current':''" @tap="changeScreen(1)">销量</view>
+				<view class="item" :class="screenType === 2 || screenType === 3 ? 'current':''" @tap="changeScreen(2)">
+					价格
+					<image src="@/static/icon/price_1.png" v-if="screenType === 2"></image>
+					<image src="@/static/icon/price_2.png" v-if="screenType === 3"></image>
+					<image src="@/static/icon/price_0.png" v-if="screenType != 2 && screenType != 3"></image>
+				</view>
+				<view class="item" :class="screenType === 4 ? 'current':''" @tap="changeScreen(4)">上架时间</view>
+			</view>
+			<!-- 切换商品卡片样式 -->
+			<!-- <view class="icon">
+				<image src="@/static/icon/show_1.png" v-if="showType == 1" @tap="showType = 2"></image>
+				<image src="@/static/icon/show_2.png" v-if="showType == 2" @tap="showType = 1"></image>
+			</view> -->
+		</view>
+
+		<view class="goods-waterfall-list" v-show="showType == 1">
+			<view class="left">
+				<block v-for="(item, index) in goodsList" :key='index'>
+					<view class="item" v-if="index%2==0" @tap="toGoodsDetail(item.goodsId)">
+						<view class="image">
+							<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+							<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+						</view>
+						<view class="content">
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+							<view class="price">
+								<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+								<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+							</view>
+							<view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{it}}</view>
+							</view>
+							<view class="text">销量：{{item.soldNum}}</view>
+						</view>
+					</view>
+				</block>
+			</view>
+			<view class="right">
+				<block v-for="(item, index) in goodsList" :key='index'>
+					<view class="item" v-if="index%2==1" @tap="toGoodsDetail(item.goodsId)">
+						<view class="image">
+							<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+							<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+						</view>
+						<view class="content">
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+							<view class="price">
+								<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+								<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+							</view>
+							<view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{it}}</view>
+							</view>
+							<view class="text">销量：{{item.soldNum}}</view>
+						</view>
+					</view>
+				</block>
+			</view>
+		</view>
+
+		<view class="goods-row-list" v-show="showType == 2">
+			<block v-for="(item, index) in goodsList" :key='index'>
+				<view class="item" @tap="toGoodsDetail(item.goodsId)">
+					<view class="image">
+						<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+						<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+					</view>
+					<view class="right">
+						<view>
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+						</view>
+						<view>
+							<view class="bottom">
+								<view class="price">
+									<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+									<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+								</view>
+								<view class="text">销量：{{item.soldNum}}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!goodsList.length" :showText="'暂无商品'"></no-data>
+		<loading-text v-if="goodsList.length" :loading="loading" :noMore="noMore"></loading-text>
+
+		<!-- <drag-button :isDock="true" :customBar="true" ref="dragButton"></drag-button> -->
+
+
+		<!-- <HomePageA :homePage="homePage" :templateInfo="templateInfo"  /> -->
+		<!-- <HomePageB :homePage="homePage" :templateInfo="templateInfo"  /> -->
+		<!-- <HomePageC :homePage="homePage" :templateInfo="templateInfo"  /> -->
+
+		<view v-if="isSharePyq">
+			<image
+				src="https://zfire-train.oss-cn-guangzhou.aliyuncs.com/train/pic/1657090568346be106ca9-dd33-48d2-b06b-e4a02b06f2a2.png"
+				mode="widthFix" style="width: 100%" @tap="clickPyq"></image>
+		</view>
+
+		<!-- 购买弹窗 -->
+		<view class="global-mask" v-show="isBuyDialog"></view>
+		<view class="buyDialog" v-show="isBuyDialog">
+			<view class="close">
+				<image src="@/static/icon/close.png" @tap="isBuyDialog = false"></image>
+			</view>
+			<view class="goods" v-if="orderDetail.orderDetails && orderDetail.orderDetails.length == 1">
+				<image :src="orderDetail.orderDetails[0].imgUrl" mode="aspectFill"></image>
+				<view class="name ellipsis-2">{{orderDetail.orderDetails[0].goodsName}}</view>
+				<view class="des ellipsis">{{orderDetail.orderDetails[0].goodsSpecValue}}</view>
+			</view>
+			<view class="goodsList" v-if="orderDetail.orderDetails && orderDetail.orderDetails.length > 1">
+				<block v-for="(item, index) in orderDetail.orderDetails" :key='index'>
+					<view class="item">
+						<image :src="item.imgUrl" mode="aspectFill"></image>
+						<view class="right">
+							<view class="name ellipsis-2">{{item.goodsName}}</view>
+							<view class="des ellipsis">{{item.goodsSpecValue}}</view>
+						</view>
+					</view>
+				</block>
+			</view>
+			<view class="num">共<text>{{orderDetail.totalNum}}</text>件商品</view>
+			<view class="price">需支付金额：<text>¥{{orderDetail.payAmount}}</text></view>
+			<view class="button" @tap="payment">立即支付</view>
+		</view>
+
+		<!-- 优惠券提醒 -->
+		<view class="global-mask" v-show="isCouponDialog"></view>
+		<view class="couponDialog" v-show="isCouponDialog">
+			<image src="@/static/home/cp_dialog.png" mode="widthFix"></image>
+			<view class="bottom">
+				<view class="text">你有优惠券即将到期，请尽快使用！</view>
+				<view class="btn-group">
+					<view class="button left" @tap="isCouponDialog = false">关闭</view>
+					<view class="button right" @tap="toMyCoupon">去看看</view>
+				</view>
+			</view>
+		</view>
+		<!-- 领取优惠券弹窗 -->
+		<view class="global-mask" v-show="isReceiveDialog"></view>
+		<view class="couponDialog" v-show="isReceiveDialog">
+			<image src="@/static/home/cp_dialog.png" mode="widthFix"></image>
+			<view class="bottom">
+				<view class="text">你有一张优惠券可领取！</view>
+				<view class="btn-group onlyOne">
+					<view class="button right" @tap="receiveCoupon">立即领取</view>
+				</view>
+			</view>
+		</view>
+
+		<modal-dialog showTitle="提示" showText="领取成功" :isShowDialog="isReceiveCouponDialog && isReceiveSuccess"
+			@cancel="isReceiveCouponDialog = false" @confirm="toMyCoupon()" confirmText="去看看"></modal-dialog>
+
+		<modal-dialog showTitle="提示" :showText="'领取失败：'+failMessage"
+			:isShowDialog="isReceiveCouponDialog && !isReceiveSuccess" @cancel="isReceiveCouponDialog = false"
+			:isShowConfirm="false" cancelText="关闭"></modal-dialog>
+
+	</view>
+</template>
+
+<script>
+	import HomePageA from "@/pages/index/components/home-page-a";
+	import HomePageB from "@/pages/index/components/home-page-b";
+	import HomePageC from "@/pages/index/components/home-page-c";
+	import {
+		mapState
+	} from 'vuex';
+	import {
+		appId
+	} from '@/utils/config.js';
+	import modalDialog from '@/components/modalDialog.vue';
+	export default {
+		components: {
+			HomePageA,
+			HomePageB,
+			HomePageC,
+			modalDialog,
+		},
+		data() {
+			return {
+				configInfo: uni.getStorageSync('configInfo'),
+				templateInfo: uni.getStorageSync('templateInfo'),
+				isBuyDialog: false, // 是否显示购买弹窗（业务员代客下单时产生）
+				orderDetail: {}, // 订单详情（购买弹窗需要）
+				scene: { // 页面参数（扫码进入小程序时产生）
+					type: '',
+					goodsId: '',
+					orderId: '',
+					serviceId: '',
+					couponId: '',
+				},
+				isCouponDialog: false, // 是否显示过期优惠券弹窗
+				isReceiveCouponDialog: false,
+				isReceiveSuccess: true,
+				failMessage: '',
+				isReceiveDialog: false,
+				isSmsReceive: false,
+				homePage: 0,
+				isSharePyq: false,
+				keyword: "",
+
+				screenType: '',
+				goodsList: [],
+				pageNum: 1,
+				pageSize: 8,
+				noMore: false,
+				loading: false,
+				showType: 2,
+				bannerList: [], // 轮播图列表
+				bannerCurrent: 0, // 轮播图当前值
+				distancess: "",
+				currentPosition: ''
+			}
+		},
+		computed: {
+			...mapState(['userInfo', 'isLogin', 'userId', 'websitData']),
+			cuStyle() {
+				return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
+			},
+		},
+		watch: {
+			nowDate() {
+				let hh = this.nowDate.getHours(),
+					mm = this.nowDate.getMinutes(),
+					ss = this.nowDate.getSeconds();
+				let hs = [10, 12, 15, 18, 20];
+				if (mm == 0 && ss == 0 && hs.indexOf(hh) >= 0) {
+					setTimeout(() => {
+						this.getSeckillTimeList();
+					}, 1000)
+				}
+			},
+			websitData() {
+
+			}
+		},
+
+		// 页面滚动
+		onPageScroll(res) {
+			uni.$emit('onPageScroll', res.scrollTop);
+		},
+
+		// // 下拉刷新
+		// onPullDownRefresh() {
+		// 	if (this.isSharePyq) {
+		// 		return false;
+		// 	}
+		// 	uni.$emit('onPullDownRefresh');
+		// 	// this.getHomePage();
+		// },
+
+		// // 上拉加载
+		// onReachBottom() {
+		// 	uni.$emit('onReachBottom');
+		// },
+
+
+		// 下拉刷新
+		onPullDownRefresh() {
+			if (this.isSharePyq) {
+				return false;
+			}
+			uni.$emit('onPullDownRefresh');
+			this.pageNum = 1;
+			this.getGoodsList();
+			this.getBannerList();
+			this.chishuhuade();
+		},
+
+		// 上拉加载
+		onReachBottom() {
+			this.getGoodsList(1);
+			uni.$emit('onReachBottom');
+		},
+
+
+		// 页面隐藏
+		onHide() {
+			uni.$emit('onHide');
+		},
+
+		// 页面显示
+		async onShow() {
+			this.chishuhuade()
+			var obj = wx.getLaunchOptionsSync()
+			if (obj.scene == 1154) {
+				return this.isSharePyq = true;
+			}
+			await this.$onLaunched;
+		},
+
+		// 页面加载
+		async onLoad({
+			scene,
+			goodsId,
+			serviceId,
+			mobile,
+			smsServiceId,
+			otherType,
+			appOrderId
+		}) {
+			await this.$onLaunched;
+
+			// uni.showLoading({
+			//     title: '加载中'
+			// });
+
+			this.getConfig();
+
+			this.checkCoupon();
+
+			this.getBannerList();
+
+			// // 点击短信链接进入小程序
+			// if (smsServiceId) {
+			// 	this.bindUser(smsServiceId);
+			// 	if (this.userInfo.type !== "SERVICE") {
+			// 		this.isSmsReceive = true;
+			// 		this.isReceiveDialog = true;
+			// 	}
+			// }
+
+			// // 从师傅端app跳转进入小程序
+			// if (appOrderId) {
+			// 	this.appOrderPay(appOrderId);
+			// }
+
+			// if (otherType) {
+			// 	if (otherType === 'groupbuyList') {
+			// 		uni.navigateTo({
+			// 			url: '/pages/mine/groupbuy/list'
+			// 		})
+			// 	}
+			// }
+
+			if (serviceId) {
+				this.bindUser(serviceId);
+			}
+
+			// 点击商品链接进入小程序
+			if (goodsId) {
+				this.toGoodsDetail(goodsId);
+			}
+
+			// 扫码进入小程序
+			if (scene) {
+				// 拿scene的id去获取
+				this.$axios({
+					url: '/common/scene',
+					method: 'get',
+					params: {
+						scene: scene,
+					}
+				}).then(res => {
+					let newScene = res.data.split("&");
+					this.scene.type = newScene[0];
+					this.scene.serviceId = newScene[2];
+					// 如果是商品
+					if (newScene[0] == 'goods') {
+						this.scene.goodsId = newScene[1];
+						this.toGoodsDetail(this.scene.goodsId);
+					}
+
+					// 如果是商城分享码
+					else if (newScene[0] == 'bind') {
+
+					}
+
+					// // 如果是订单
+					// else if (newScene[0] == 'order') {
+					// 	this.scene.orderId = newScene[1];
+					// 	this.getOrderInfo();
+					// }
+					// 如果是优惠券
+					else if (newScene[0] == 'coupon') {
+						this.scene.couponId = newScene[1];
+						this.isReceiveDialog = true;
+						// this.receiveCoupon(this.scene.couponId);
+					}
+					// // 如果是团购分享码
+					// else if (newScene[0] == 'promotion_group') {
+					// 	uni.navigateTo({
+					// 		url: '/pages/mine/groupbuy/list'
+					// 	})
+					// }
+
+					if (this.scene.serviceId) {
+						this.bindUser(this.scene.serviceId);
+					}
+				})
+			}
+
+			this.getGoodsList();
+
+		},
+
+		// 分享
+		onShareAppMessage(options) {
+			if (options && options.from == 'button') {
+				// 来自页面内的转发按钮
+			} else {
+				// 点击微信右上角的分享按钮
+			}
+			return {
+				title: `${this.userInfo.nickName}向你推荐了「${this.configInfo.minAppName}」小程序`,
+				path: '/pages/index/index?serviceId=' + this.userId,
+				query: {},
+				success: function(res) {
+					if (res.errMsg == 'shareAppMessage:ok') {
+						this.$successToast('分享完成');
+					}
+				}
+			}
+		},
+
+		onShareTimeline() {
+			return {
+				title: `${this.userInfo.nickName}向你推荐了「${this.configInfo.minAppName}」小程序`,
+				query: 'serviceId=' + this.userId,
+				success: function(res) {
+					if (res.errMsg == 'shareAppMessage:ok') {
+						this.$successToast('分享完成');
+					}
+				}
+			}
+		},
+
+		methods: {
+			
+			chakanyyzz(){
+				uni.navigateTo({
+					url: '/pages/index/chakanyyzz'
+				})
+			},
+			
+			chishuhuade(){
+				uni.getLocation({
+					type: 'gcj02',
+					isHighAccuracy: true,
+					geocode: true,
+					success: res => {
+						this.$axios({
+							url: '/user/user/detail',
+							method: 'get',
+							params: {
+								userId: this.userId,
+								lat: res.latitude,
+								lng: res.longitude,
+							},
+						}).then((res) => {
+							this.distancess = res.data.distance
+						});
+						this.$axios({
+							url: '/user/address',
+							method: 'post',
+							params: {
+								lat: res.latitude,
+								lng: res.longitude,
+							},
+						}).then((res) => {
+							var {
+								provinceName,
+								cityName,
+								areaName,
+								name
+							} = res.data
+							this.currentPosition = `${provinceName}${cityName}${areaName}${name}`
+						});
+					},
+					fail: err => {
+				
+					}
+				})
+			},
+
+			goodsClassify() {
+				uni.switchTab({
+					url: '/pages/goods/classify'
+				});
+			},
+			couponList() {
+				uni.navigateTo({
+					url: '/pages/mine/coupon/list'
+				})
+			},
+			orderListPage() {
+				uni.navigateTo({
+					url: '/pages/mine/order/list'
+				})
+			},
+			// 打开导航
+			dakaidaoh() {
+				console.log(1111)
+				uni.openLocation({
+					latitude: this.websitData.lat,
+					longitude: this.websitData.lng,
+					success: function() {
+						console.log('success');
+					}
+				});
+			},
+			// 拨打商家电话
+			bodasjdh(phoneNumber) {
+				console.log(2222)
+				if (phoneNumber) {
+					uni.makePhoneCall({
+						phoneNumber: phoneNumber
+					});
+				} else {
+					uni.showModal({
+						title: '提示',
+						content: '商家没有手机号码！',
+						success: (res) => {
+							if (res.confirm) {} else if (res.cancel) {}
+						}
+					});
+				}
+			},
+			// 获取轮播图列表
+			getBannerList() {
+				this.$axios({
+					url: '/common/list/page',
+					method: 'get',
+					params: {
+						pageNum: 1,
+						pageSize: 10,
+						state: true
+					}
+				}).then(res => {
+					this.bannerList = res.data.records;
+				}).finally(res => {})
+			},
+			// 切换广告图
+			changeBanner(e) {
+				this.bannerCurrent = e.detail.current;
+			},
+			// 跳转小程序
+			toMiniProgram(appId, path) {
+				wx.navigateToMiniProgram({
+					appId,
+					path,
+					extraData: {},
+					envVersion: 'release',
+					success(res) {}
+				});
+			},
+			// 进入活动列表
+			toActivityList(type) {
+				if (type == 2) {
+					this.closeDialog();
+				}
+				uni.navigateTo({
+					url: '/packageGoods/pages/activity?type=' + type
+				})
+			},
+
+			getLocation() {
+				if (!this.userInfo?.serviceWorkerBean?.websitId) {
+					uni.navigateTo({
+						url: '/pages/address/list'
+					})
+				}
+			},
+
+			searchSubmit() {
+				if (this.keyword) {
+					this.pageNum = 1;
+					this.getGoodsList();
+				}
+			},
+			// 获取页面模版
+			async getHomePage() {
+				const result = await new Promise((resolve, reject) => {
+					this.$axios({
+						url: '/renovation/detail',
+						method: 'get',
+					}).then(res => {
+						if (res.data) {
+							uni.setStorageSync('templateInfo', res.data);
+							this.templateInfo = res.data;
+							this.homePage = res.data.templateType;
+							resolve(res.data.templateType);
+						}
+					}).catch(res => {
+						this.homePage = 1;
+						resolve(1);
+					})
+				})
+				return result;
+			},
+
+			// 获取配置信息
+			getConfig() {
+				this.$axios({
+					url: '/common/config/get',
+					method: 'get',
+				}).then(res => {
+					if (res.data) {
+						uni.setStorageSync('configInfo', res.data);
+					}
+				})
+			},
+
+			// 绑定用户关系
+			bindUser(serviceId) {
+				if (this.userInfo?.userId) {
+					if (!this.userInfo?.serviceWorkerBean) {
+						this.$axios({
+							url: '/user/bind',
+							params: {
+								serviceId: serviceId,
+								userId: this.userId,
+							}
+						}).then(res => {
+							console.log('绑定成功：' + res.message);
+						})
+					}
+				} else {
+					setTimeout(() => {
+						this.bindUser(serviceId)
+					}, 100)
+				}
+			},
+
+			// 点击分享朋友圈的图
+			clickPyq() {
+				this.$toast('请前往小程序使用完整服务');
+			},
+
+			// app订单支付
+			appOrderPay(appOrderId) {
+				let that = this;
+				this.$axios({
+					url: '/common/online/pay',
+					method: 'post',
+					params: {
+						key: appOrderId,
+						openId: uni.getStorageSync('userInfo').openId,
+					}
+				}).then(res => {
+					if (!res.data) return false;
+					let data = JSON.parse(res.data.codeUrl);
+					wx.requestPayment({
+						timeStamp: data.timeStamp,
+						nonceStr: data.nonceStr,
+						package: data.package,
+						signType: 'RSA',
+						paySign: data.paySign,
+						success: (res) => {
+							that.$successToast('支付成功');
+						},
+						fail: (err) => {
+							that.$toast('支付失败');
+						}
+					})
+				})
+			},
+
+			// 进入商品详情
+			toGoodsDetail(id) {
+				if (!id) {
+					return false;
+				}
+
+				this.$axios({
+						url: '/goods/detail',
+						method: 'get',
+						params: {
+							goodsId: id,
+							userId: this.userId,
+						},
+					})
+					.then((res) => {
+						uni.navigateTo({
+							url: '/packageGoods/pages/detail?id=' + id
+						})
+					})
+					.catch((res) => {
+						uni.switchTab({
+							url: '/pages/goods/all'
+						});
+					})
+					.finally((res) => {});
+			},
+
+			// 检查是否有优惠券过期
+			checkCoupon() {
+				this.$axios({
+					url: '/coupon/timeout',
+					method: 'get',
+					params: {},
+				}).then(res => {
+					if (res.data) {
+						this.isCouponDialog = true;
+					}
+				})
+			},
+
+			// 进入我的优惠券
+			toMyCoupon() {
+				this.isCouponDialog = false;
+				this.isReceiveCouponDialog = false;
+				uni.navigateTo({
+					url: '/pages/mine/coupon/list'
+				})
+			},
+
+			// 领取优惠券
+			receiveCoupon(id) {
+				if (!this.isLogin) {
+					return uni.navigateTo({
+						url: '/pages/login/index'
+					})
+				}
+				if (this.isSmsReceive) {
+					this.$axios({
+						url: '/coupon/obtain',
+						method: 'get',
+						params: {
+							userId: '',
+							couponId: ''
+						}
+					}).then(res => {
+						this.isReceiveDialog = false;
+						this.isReceiveSuccess = true;
+						this.isReceiveCouponDialog = true;
+					}).catch(res => {
+						this.failMessage = res.message;
+						this.isReceiveDialog = false;
+						this.isReceiveSuccess = false;
+						this.isReceiveCouponDialog = true;
+					})
+				} else {
+					this.$axios({
+						url: '/coupon/transfer/coupon',
+						method: 'get',
+						params: {
+							userCouponId: this.scene.couponId
+						}
+					}).then(res => {
+						this.isReceiveDialog = false;
+						this.isReceiveSuccess = true;
+						this.isReceiveCouponDialog = true;
+					}).catch(res => {
+						this.failMessage = res.message;
+						this.isReceiveDialog = false;
+						this.isReceiveSuccess = false;
+						this.isReceiveCouponDialog = true;
+					})
+				}
+			},
+
+			// 获取订单信息
+			getOrderInfo() {
+				this.$axios({
+					url: '/order/detail',
+					method: 'get',
+					params: {
+						orderId: this.scene.orderId
+					}
+				}).then(res => {
+					if (res.data && res.data.orderStatus === 'NOPAY') {
+						this.orderDetail = res.data;
+						this.isBuyDialog = true;
+					} else {
+						return this.$toast('二维码已失效，请重新生成');
+					}
+				})
+			},
+
+			// 支付
+			payment() {
+				let that = this;
+				if (!this.isLogin) {
+					uni.navigateTo({
+						url: '/pages/login/index'
+					})
+				} else {
+					this.$axios({
+						url: '/order/wait/pay',
+						params: {
+							userId: this.userId,
+							orderId: this.scene.orderId,
+						},
+						isLoading: 1,
+					}).then(res => {
+						uni.getProvider({
+							service: 'payment',
+							success: (e) => {
+								uni.requestPayment({
+									provider: e.provider[0],
+									orderInfo: res.data,
+									timeStamp: res.data.timeStamp,
+									nonceStr: res.data.nonceStr,
+									package: res.data.payPackage,
+									signType: 'MD5',
+									paySign: res.data.paySign,
+									success: (res) => {
+										that.$successToast('支付成功');
+										that.isBuyDialog = false;
+										that.requestMessage();
+									},
+									fail: (err) => {
+										that.$toast('支付失败');
+									}
+								})
+							}
+						})
+					})
+				}
+			},
+
+			// 消息推送
+			requestMessage() {
+				let that = this;
+				uni.showModal({
+					title: '温馨提示',
+					content: '为更好的促进您与买家的交流，需要在您的订单成交时向您发送消息',
+					confirmText: "同意",
+					cancelText: "拒绝",
+					success: function(res) {
+						if (res.confirm) {
+							let tmplIds = [that.configInfo.template];
+							uni.requestSubscribeMessage({
+								tmplIds: tmplIds,
+								success(res) {
+									let status = null;
+									tmplIds.map((item, index) => {
+										if (res[item] == 'accept') {
+											status = 'accept';
+										}
+									})
+									if (status == 'accept') {
+										that.$successToast('订阅成功');
+									} else {
+										that.$toast('订阅取消');
+									}
+								},
+								fail(res) {
+									console.log(res);
+									that.$toast('订阅失败');
+								}
+							})
+						} else if (res.cancel) {
+							uni.showModal({
+								title: '温馨提示',
+								content: '拒绝后您将无法获取实时的与卖家（买家）的交易消息',
+								confirmText: "知道了",
+								showCancel: false,
+								success: function(res) {
+
+								}
+							});
+						}
+					}
+				});
+			},
+
+			// ------------------------------------
+			// 切换筛选类型
+			changeScreen(type) {
+				if (type != 2) {
+					if (this.screenType !== type) {
+						this.screenType = type;
+					} else {
+						this.screenType = '';
+					}
+				} else {
+					if (this.screenType != 2 && this.screenType != 3) {
+						this.screenType = 2;
+					} else if (this.screenType == 2) {
+						this.screenType = 3;
+					} else {
+						this.screenType = '';
+					}
+				}
+				this.pageNum = 1;
+				this.getGoodsList();
+			},
+
+			// 获取商品列表
+			getGoodsList(loadMore) {
+				if (this.noMore && loadMore) return;
+				this.noMore = false
+				if (!loadMore) {
+					this.pageNum = 1;
+				} else {
+					this.loading = true;
+				}
+				this.$axios({
+					url: '/goods/list/sort/page',
+					method: 'get',
+					params: {
+						pageNum: this.pageNum,
+						pageSize: this.pageSize,
+						categoryId: '',
+						sort: this.screenType,
+						keyword: this.keyword
+					},
+					isLoading: !loadMore
+				}).then(res => {
+					res.data.records.forEach(item => {
+						if (item.logo && item.logoStartTime) {
+							item.isShowWater = this.$compareTime(item.logoStartTime, item.logoEndTime);
+						} else {
+							item.isShowWater = false;
+						}
+					})
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if (this.pageNum >= pageTotal) {
+						this.noMore = true;
+					}
+					if (_list.length) {
+						this.pageNum += 1
+					}
+					if (loadMore) {
+						this.goodsList = this.goodsList.concat(_list);
+						this.loading = false;
+					} else {
+						this.goodsList = _list;
+					}
+
+					uni.stopPullDownRefresh();
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.shangjiakapian {
+		width: 100%;
+		height: auto;
+		border-radius: 30rpx;
+		overflow: hidden;
+		background: #ffffff;
+		margin-top: 30rpx;
+
+		.shangjiatupiand {
+			position: relative;
+
+			.nirongdd {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				box-sizing: border-box;
+				padding: 26rpx;
+			}
+		}
+
+		.shangjiakapiandibubiaos {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.shangjiakapiandibuItem {
+				width: 33.33%;
+				height: auto;
+				box-sizing: border-box;
+				padding: 16rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 20rpx;
+				color: red;
+			}
+		}
+
+	}
+
+	.header-container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 10rpx 10rpx;
+
+		.left {
+			display: flex;
+			align-items: center;
+
+			image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+		}
+	}
+
+	.top-container {
+		position: relative;
+
+		.bg {
+			display: block;
+			width: 750rpx;
+			position: absolute;
+			top: 0;
+			z-index: 0;
+		}
+
+		.content {
+			width: 710rpx;
+			padding: 0 20rpx;
+			position: relative;
+			z-index: 1;
+		}
+
+		.title {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FFFFFF;
+			font-size: 36rpx;
+		}
+
+		.search {
+			background: #FFFFFF;
+			height: 64rpx;
+			display: flex;
+			align-items: center;
+			border-radius: 64rpx;
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+
+			image {
+				width: 28rpx;
+				height: 28rpx;
+			}
+
+			input {
+				width: 100%;
+				padding-left: 15rpx;
+			}
+		}
+	}
+
+	.classify-container {
+		margin-top: 40rpx;
+		position: relative;
+		z-index: 1;
+		padding: 0 20rpx;
+
+		.content {
+			border-radius: 20rpx;
+			padding-top: 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+			background: #FFFFFF;
+
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 142rpx;
+				margin-bottom: 30rpx;
+
+				image {
+					width: 78rpx;
+					height: 78rpx;
+					display: block;
+					border-radius: 50%;
+					overflow: hidden;
+				}
+
+				text {
+					font-size: 24rpx;
+					color: #666666;
+					margin-top: 10rpx;
+					width: 150rpx;
+					text-align: center;
+				}
+			}
+		}
+	}
+
+
+
+	.notice-container {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+
+		.content {
+			display: flex;
+			align-items: center;
+			height: 100rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+		}
+
+		.left {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 96rpx;
+			height: 48rpx;
+			margin-right: 20rpx;
+			border-right: 2rpx solid #E5E5E5;
+
+			image {
+				width: 60rpx;
+				height: 30rpx;
+				display: block;
+			}
+		}
+
+		.swiper {
+			height: 100rpx;
+			flex: 1;
+			padding-right: 20rpx;
+
+			::v-deep swiper-item {
+				display: block;
+				height: 100rpx;
+				width: 100%;
+				line-height: 100rpx;
+			}
+		}
+	}
+
+	.coupon-container {
+		position: relative;
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+
+		.bg {
+			display: block;
+			width: 100%;
+		}
+
+		.list {
+			position: absolute;
+			top: 80rpx;
+			z-index: 1;
+		}
+
+		.list1 {
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+				margin-left: 16rpx;
+
+				.cp {
+					width: 688rpx;
+					height: 178rpx;
+					display: block;
+				}
+
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 710rpx;
+					height: 160rpx;
+					display: flex;
+					align-items: center;
+
+					.left {
+						width: 210rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+						}
+
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+						}
+					}
+
+					.right {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						padding: 0 20rpx;
+						width: 470rpx;
+						height: 150rpx;
+						box-sizing: border-box;
+
+						.main {
+							width: 430rpx;
+							height: 150rpx;
+							padding: 16rpx 0 8rpx;
+							box-sizing: border-box;
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+
+							.row1 {
+								font-size: 28rpx;
+								line-height: 32rpx;
+								height: 64rpx;
+							}
+
+							.row2 {
+								font-size: 24rpx;
+								line-height: 28rpx;
+								color: #999999;
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.list2 {
+			display: flex;
+
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+
+				&:first-child {
+					margin-left: 16rpx;
+				}
+
+				.cp {
+					width: 342rpx;
+					height: 308rpx;
+					display: block;
+				}
+
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 342rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+
+					.top {
+						width: 324rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+
+					.bottom {
+						width: 324rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.list3 {
+			display: flex;
+			align-items: center;
+
+			.left {
+				display: flex;
+				width: 630rpx;
+				overflow-x: scroll;
+			}
+
+			.right {
+				width: 80rpx;
+				display: flex;
+				justify-content: center;
+
+				.text {
+					width: 48rpx;
+					height: 200rpx;
+					border-radius: 48rpx;
+					background: #FFFFFF;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+
+					text {
+						font-size: 28rpx;
+						color: #FF3F42;
+						line-height: 32rpx;
+					}
+
+					image {
+						width: 32rpx;
+						height: 32rpx;
+						display: block;
+						flex-shrink: 0;
+						margin-top: 10rpx;
+					}
+				}
+			}
+
+			.item {
+				position: relative;
+				margin-bottom: 20rpx;
+
+				&:first-child {
+					margin-left: 16rpx;
+				}
+
+				.cp {
+					width: 278rpx;
+					height: 308rpx;
+					display: block;
+				}
+
+				.content {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 278rpx;
+					height: 328rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+
+					.top {
+						width: 260rpx;
+						height: 130rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						flex-direction: column;
+
+						.price {
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							margin-top: 16rpx;
+						}
+
+						.text {
+							color: #FFFFFF;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							margin-top: 10rpx;
+						}
+					}
+
+					.bottom {
+						width: 260rpx;
+						height: 160rpx;
+						padding: 16rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						align-items: center;
+
+						.name {
+							font-size: 28rpx;
+							text-align: left;
+							line-height: 32rpx;
+							width: 100%;
+						}
+
+						.date {
+							font-size: 24rpx;
+							color: #999999;
+							text-align: left;
+							width: 100%;
+							line-height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.button {
+			width: 120rpx;
+			height: 40rpx;
+			border-radius: 40rpx;
+			font-size: 24rpx;
+			flex-shrink: 0;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			&.gary {
+				background: #AAAAAA;
+				color: #FFFFFF;
+				border: 1px solid #AAAAAA;
+			}
+
+			&.red {
+				background: #C434FF;
+				color: #FFFFFF;
+				border: 1px solid #C434FF;
+			}
+
+			&.white {
+				color: #FF3F42;
+				border: 1px solid #FF3F42;
+			}
+		}
+	}
+
+	.myManager-container {
+		padding: 0 20rpx;
+
+		.content {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 20rpx;
+
+			.left {
+				display: flex;
+				align-items: center;
+
+				image {
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 50%;
+				}
+
+				.main {
+					font-size: 28rpx;
+					line-height: 48rpx;
+					margin-left: 20rpx;
+				}
+			}
+
+			.right {
+				width: 160rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				border-radius: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				color: #E43B38;
+				border: 1px solid #E43B38;
+			}
+		}
+	}
+
+	.seckill-container {
+		position: relative;
+		margin-top: 20rpx;
+		min-height: 340rpx;
+
+		.bg {
+			display: block;
+			width: 750rpx;
+			position: absolute;
+			top: 0;
+			z-index: 0;
+		}
+
+		.content {
+			width: 710rpx;
+			padding: 0 20rpx;
+			position: relative;
+			z-index: 1;
+		}
+
+		.time-list {
+			display: flex;
+			overflow-x: scroll;
+			padding-top: 90rpx;
+			padding-bottom: 40rpx;
+
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				flex-shrink: 0;
+				width: 140rpx;
+				margin-right: 48rpx;
+
+				.time {
+					font-size: 32rpx;
+					color: #FFFFFF;
+				}
+
+				.tag {
+					width: 140rpx;
+					height: 44rpx;
+					border-radius: 44rpx;
+					border: 1px solid #FFFFFF;
+					font-size: 24rpx;
+					color: #FFFFFF;
+					box-sizing: border-box;
+					margin-top: 12rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
+				&.current {
+					.tag {
+						background: #FFFFFF;
+						color: #FF3F42;
+					}
+				}
+			}
+		}
+
+		.product-list {
+			.item {
+				background: #FFFFFF;
+				border-radius: 10rpx;
+				display: flex;
+				padding: 20rpx;
+				margin-bottom: 20rpx;
+
+				image {
+					display: block;
+					width: 180rpx;
+					height: 180rpx;
+					flex-shrink: 0;
+				}
+
+				.right {
+					width: 490rpx;
+					box-sizing: border-box;
+					padding-left: 20rpx;
+
+					.title {
+						font-size: 30rpx;
+						color: #333333;
+						line-height: 36rpx;
+						font-weight: 600;
+					}
+
+					.des {
+						font-size: 24rpx;
+						line-height: 30rpx;
+						color: #999999;
+						margin-top: 6rpx;
+					}
+
+					.stock-sales {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-top: 10rpx;
+						font-size: 24rpx;
+						color: #666666;
+
+						.stock {
+							display: flex;
+							align-items: center;
+
+							text {
+								font-size: 24rpx;
+								color: #666666;
+							}
+
+							.progress-box {
+								width: 140rpx;
+								border-radius: 6px;
+								overflow: hidden;
+								margin-left: 10rpx;
+							}
+						}
+					}
+
+					.bottom {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-top: 10rpx;
+
+						.price {
+							display: flex;
+							flex-direction: column;
+						}
+
+						.price-1 {
+							font-size: 32rpx;
+							color: #FF3F42;
+							line-height: 36rpx;
+						}
+
+						.price-2 {
+							font-size: 26rpx;
+							color: #666666;
+							line-height: 30rpx;
+							text-decoration: line-through;
+						}
+
+						.btn {
+							width: 110rpx;
+							height: 44rpx;
+							background: #FF3F42;
+							border-radius: 5rpx;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							text-align: center;
+							line-height: 44rpx;
+						}
+
+						.btn2 {
+							width: 110rpx;
+							height: 44rpx;
+							background: #AAAAAA;
+							border-radius: 5rpx;
+							font-size: 28rpx;
+							color: #FFFFFF;
+							text-align: center;
+							line-height: 44rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.loadmore {
+			background: #FFFFFF;
+			border-radius: 10rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 88rpx;
+		}
+	}
+
+	.recom-container {
+		margin-top: 30rpx;
+
+		.top {
+			background: #FFFFFF;
+			padding: 30rpx 0 0;
+
+			.title {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				margin-bottom: 10rpx;
+
+				image {
+					width: 300rpx;
+					height: 40rpx;
+					display: block;
+				}
+			}
+
+			.tab {
+				display: flex;
+				margin-left: -10rpx;
+
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					flex-shrink: 0;
+					font-size: 28rpx;
+					color: #666666;
+					height: 80rpx;
+					line-height: 80rpx;
+					position: relative;
+					padding: 0 30rpx;
+
+					&.current {
+						color: #FF3F42;
+						font-weight: 600;
+
+						&::after {
+							content: '';
+							display: block;
+							width: 50rpx;
+							height: 6rpx;
+							background: #FF3F42;
+							position: absolute;
+							bottom: 0;
+							left: 50%;
+							margin-left: -25rpx;
+						}
+					}
+				}
+			}
+		}
+
+		.list {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 20rpx;
+
+			.item {
+				width: 348rpx;
+				background: #FFFFFF;
+				margin-right: 14rpx;
+				margin-bottom: 20rpx;
+				border-radius: 20rpx;
+				overflow: hidden;
+
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+
+				.image {
+					width: 348rpx;
+					height: 348rpx;
+					flex-shrink: 0;
+					position: relative;
+
+					.img {
+						width: 348rpx;
+						height: 348rpx;
+						display: block;
+					}
+
+					.water {
+						width: 348rpx;
+						height: 348rpx;
+						display: block;
+						position: absolute;
+						left: 0;
+						top: 0;
+						z-index: 1;
+					}
+				}
+
+				.content {
+					padding: 15rpx 20rpx;
+
+					.title {
+						font-size: 30rpx;
+						color: #333333;
+						line-height: 36rpx;
+						font-weight: 600;
+						height: 72rpx;
+					}
+
+					.bottom {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-top: 10rpx;
+
+						.price {
+							display: flex;
+							flex-direction: column;
+						}
+
+						.price-1 {
+							font-size: 32rpx;
+							color: #FF3F42;
+							line-height: 36rpx;
+						}
+
+						.price-2 {
+							font-size: 26rpx;
+							color: #666666;
+							line-height: 30rpx;
+							text-decoration: line-through;
+						}
+
+						.btn {
+							width: 60rpx;
+							height: 60rpx;
+							background: #FE781F;
+							border-radius: 50%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+
+							image {
+								width: 41rpx;
+								height: 36rpx;
+								display: block;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.app-container {
+		background: #F4F2F2;
+		box-sizing: border-box;
+	}
+
+	.couponDialog {
+		position: fixed;
+		top: 30%;
+		left: 75rpx;
+		z-index: 999;
+		width: 600rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+
+		image {
+			width: 600rpx;
+		}
+
+		.bottom {
+			padding: 0 40rpx 50rpx;
+
+			.text {
+				font-size: 32rpx;
+				line-height: 48rpx;
+				text-align: center;
+			}
+
+			.btn-group {
+				display: flex;
+				justify-content: space-between;
+				margin-top: 50rpx;
+
+				.button {
+					width: 240rpx;
+					height: 72rpx;
+					border-radius: 72rpx;
+					border: 1px solid #FF3F42;
+					font-size: 32rpx;
+					line-height: 72rpx;
+					text-align: center;
+
+					&.left {
+						color: #FF3F42;
+					}
+
+					&.right {
+						color: #FFFFFF;
+						background: #FF3F42;
+					}
+				}
+
+				&.onlyOne {
+					justify-content: center;
+
+					.button {
+						width: 300rpx;
+					}
+				}
+			}
+		}
+	}
+
+	.buyDialog {
+		position: fixed;
+		top: 30%;
+		left: 100rpx;
+		z-index: 999;
+		width: 550rpx;
+		background: #FFFFFF;
+		border-radius: 10rpx;
+		box-sizing: border-box;
+		padding: 20rpx 20rpx 30rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		.close {
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+
+			image {
+				width: 32rpx;
+				height: 32rpx;
+				display: block;
+			}
+		}
+
+		.goods {
+			margin-top: 10rpx;
+
+			image {
+				width: 410rpx;
+				height: 300rpx;
+				display: block;
+			}
+
+			.name {
+				font-size: 28rpx;
+				line-height: 34rpx;
+				margin-top: 16rpx;
+			}
+
+			.des {
+				font-size: 26rpx;
+				color: #666666;
+				line-height: 30rpx;
+				margin-top: 10rpx;
+			}
+		}
+
+		.goodsList {
+			max-height: 400rpx;
+			overflow-y: scroll;
+			margin-top: 10rpx;
+
+			.item {
+				display: flex;
+				padding: 10rpx 20rpx;
+
+				image {
+					width: 120rpx;
+					height: 120rpx;
+					display: block;
+					flex-shrink: 0;
+				}
+
+				.right {
+					width: 334rpx;
+					margin-left: 16rpx;
+
+					.name {
+						font-size: 28rpx;
+						line-height: 34rpx;
+						margin-top: 8rpx;
+					}
+
+					.des {
+						font-size: 26rpx;
+						color: #666666;
+						line-height: 30rpx;
+						margin-top: 10rpx;
+					}
+				}
+			}
+		}
+
+		.num {
+			margin-top: 10rpx;
+			line-height: 40rpx;
+
+			text {
+				color: #FF3F42;
+				font-size: 32rpx;
+				font-weight: 600;
+				margin: 0 10rpx;
+			}
+		}
+
+		.price {
+			margin-top: 8rpx;
+			line-height: 40rpx;
+
+			text {
+				color: #FF3F42;
+				font-size: 32rpx;
+				font-weight: 600;
+			}
+		}
+
+		.button {
+			width: 300rpx;
+			height: 64rpx;
+			line-height: 64rpx;
+			text-align: center;
+			background: #FF3F42;
+			border-radius: 64rpx;
+			font-size: 28rpx;
+			color: #FFFFFF;
+			margin-top: 20rpx;
+		}
+	}
+
+	// ---------------------------------------------
+
+	.swiper-container {
+		position: relative;
+		margin-top: 20rpx;
+
+		swiper {
+			height: 350rpx;
+		}
+
+		image {
+			height: 350rpx;
+			width: 710rpx;
+			display: block;
+			margin: 0 auto 0;
+			border-radius: 15rpx;
+			overflow: hidden;
+		}
+
+		.dots-conatiner {
+			position: absolute;
+			width: 100%;
+			bottom: 40rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.con {
+				border-radius: 4rpx;
+				overflow: hidden;
+				height: 4rpx;
+				background-color: rgba($color: #FFFFFF, $alpha: 0.3);
+			}
+
+			.dot {
+				width: 20rpx;
+				height: 4rpx;
+				background-color: #FFFFFF;
+				transition: all .3s;
+			}
+		}
+	}
+
+	// ---------------------------------------------
+
+	.caidanrukou {
+		width: 95%;
+		height: auto;
+		border-radius: 30rpx;
+		overflow: hidden;
+		background: #ffffff;
+		margin: 30rpx auto;
+		padding: 30rpx;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.dangecaidanrukou {
+			width: 33.33%;
+			height: auto;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: column;
+
+			.tupiancaidan {
+				width: 80rpx;
+				height: 80rpx;
+			}
+
+			.dangecaidanrukouTitle {
+				font-size: 28rpx;
+				font-weight: 500;
+			}
+		}
+	}
+
+	// ---------------------------------------------
+
+	.sptjyangshi {
+		width: 100%;
+		font-size: 34rpx;
+		font-weight: bold;
+		box-sizing: border-box;
+		padding: 30rpx 20rpx;
+	}
+
+	.top-container2 {
+		background: #FFFFFF;
+		display: flex;
+		padding: 0 20rpx;
+		align-items: center;
+		box-sizing: border-box;
+
+		.tab {
+			flex: 1;
+			display: flex;
+			// padding: 0 80rpx 0 30rpx;
+			padding: 0 30rpx 0 30rpx;
+			box-sizing: border-box;
+			justify-content: space-between;
+
+			.item {
+				height: 88rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 30rpx;
+				color: #666666;
+
+				&.current {
+					color: #FF3F42;
+				}
+
+				image {
+					width: 18rpx;
+					height: 30rpx;
+					display: block;
+					margin-left: 10rpx;
+				}
+			}
+		}
+
+		.icon {
+			padding-right: 10rpx;
+
+			image {
+				width: 36rpx;
+				height: 36rpx;
+				display: block;
+			}
+		}
+	}
+</style>

pages/index/webview.vue

@@ -0,0 +1,37 @@
+<template>
+	<view class="app-container">
+		<web-view :webview-styles="webviewStyles" :src="link"></web-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				webviewStyles: {
+					progress: {
+						color: '#FF3333'
+					}
+				},
+				link: '',
+			}
+		},
+		
+		onLoad({link}) {
+			this.link = link;
+		},
+		
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		padding: 0 30rpx;
+		padding-top: 20rpx;
+		box-sizing: border-box;
+	}
+</style>