new-greemall-wxapp/pages/index/index.vue

<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>