hyshop/pages/store/index.vue

<template>
	<view class="container">
		<view class="carousel-section">
			<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
				:indicator-dots="true" indicator-active-color="#FFFFFF">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.img" mode="aspectFill" @click="bannerNavToUrl(item)"></image>
				</swiper-item>
			</swiper>
			<view class="search flex">
				<view class="shop-name clamp">{{chooseDistrict||'定位'}}</view>
				<image src="../../static/icon/dingwei.png" mode="widthFix" style="width: 11rpx;"></image>
				<view class="input-box flex" @click.stop="clickSearch">
					<view class=" input-content flex">
						<view class="iconfont iconsearch"></view>
						<view class="input"><input type="text" disabled value="搜索附近门店" /></view>
					</view>
				</view>
			</view>
		</view>
		<swiper :interval="3000" :duration="1000" style="height: 300rpx;background: #fff;">
			<swiper-item v-for=" (shopitem,shopindex) in shopList" :key="shopindex">
				<view class="shop-list flex" style="padding-top: 40rpx;">
					<view class="shop-item flex" v-for="(item,index) in shopitem"
						@click="navto('/pages/store/shopList?id=' + item.id)">
						<image :src="item.pic" mode="" class="shop-img"></image>
						<view class="shop-name">
							{{item.cate_name}}
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 门店列表 -->
		<view class="" style="height: 20rpx;"></view>
		<view class="shop">
			<view class="shop-title">
				<view class="shop-item" @click="changePx(0)">
					<view class="sitem-font" :class="{'choose': PXType == 0}">智能排序</view>
					<image class="jt-down" src="https://hy.liuniu946.com/app/index/index06.png" mode=""></image>
				</view>
				<view class="shop-item" @click="changePx(1)">
					<view class="sitem-font" :class="{'choose': PXType == 1}">位置距离</view>
					<image class="jt-down" src="https://hy.liuniu946.com/app/index/index06.png" mode=""></image>
				</view>
				<view class="shop-item" @click="changePx(2)">
					<view class="sitem-font" :class="{'choose': PXType == 2}">折扣优惠</view>
					<image class="jt-down" src="https://hy.liuniu946.com/app/index/index06.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" style="height: 20rpx;"></view>
		<view class="djq-wrap flex f-ai-s" v-for="storeitem in storeList"
			@click="navto('/pages/store/shopDetail?id=' + storeitem.id )">
			<image :src="storeitem.image" mode="" class="djq-img"></image>
			<view class="djq-right pl20">
				<view class="djq-tit flex f-j-sb f-ai-s">
					<view class="djq-name clamp">
						{{storeitem.name}}
					</view>
					<view class="djq-dis">
						<image src="https://hy.liuniu946.com/app/index/index10.png" mode=""></image>
						距离{{storeitem.range*1}}KM
					</view>
				</view>
				<view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
					<view class="djq-dz clamp">
						{{storeitem.detailed_address}}
					</view>
					<view class="djq-hd flex f-j-sb">
						<view class="buy-info">
							{{storeitem.count}}人已领取
						</view>
						<view class="hd-btn">
							<image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;"
								@click.stop="makeCall(storeitem.phone)"></image>
								<!-- #ifdef H5 -->
								<image src="../../static/icon/dh.png" mode=""
									@click.stop="toGaodeMap(storeitem.latitude,storeitem.longitude,storeitem.name)">
								</image>
								<!-- #endif -->
							<!-- #ifdef MP -->
							<image src="../../static/icon/dh.png" mode=""
								@click.stop="dh(storeitem)">
							</image>
							<!-- #endif -->
						</view>
					</view>
				</view>
				<view class="" style="padding: 10rpx 0 0 0;" v-if="storeitem.cou && storeitem.cou.length > 0">
					<view class="left-btm flex f-j-s" v-for="qitem in storeitem.cou">
						<view class="j-logo">
							券
						</view>
						<view class="j-price">
							<text>￥</text>{{qitem.coupon_price}}
						</view>
						<view class="j-zk">
							满{{qitem.use_min_price}}￥可用
						</view>
						<view class="j-name">
							{{qitem.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	// 地区选择
	import LeeSelectCity from '@/components/lee-select-city/lee-select-city.vue'
	
	import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
	import {
		store_cate,
		getStoreList,
		getCity
	} from '@/api/shop.js'
	import {
		lookSubpoints,
		lookOneself
	} from '../../api/user.js';
	import seckill from '../../components/seckill/seckill.vue';
	import {
		loadIndexs,
		getVip
	} from '@/api/index.js';
	import {
		getUserInfo,
		spread
	} from '@/api/user.js';
	import {
		setCoupons
	} from '@/api/functionalUnit.js';
	import {
		getBargainList,
		getProducts
	} from '@/api/product.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		openMap
	} from '@/utils/rocessor';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		tabbar
	} from '@/utils/tabbar.js';
	// #ifdef H5
	import {
		weixindata,
		shareLoad
	} from '@/utils/wxAuthorized';
	// #endif
	export default {
		components: {
			seckill,
			LeeSelectCity
		},
		data() {
			return {
				page:1,
				limitt:20,
				loadingType:'more',
				district: '定位中',
				PXType: 0, //店铺排序规则 0-》智能排序 1-》距离排序 2-》销量排序
				storeList: [],
				tabbar: tabbar,
				current: 0,
				shareShow: false, //分享海报
				pageProportion: 0, //保存页面基于750宽度的比例
				swiperHeight: 0,
				checkid: 0,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [], //轮播列表
				bastList: [], //会员礼包
				page: 1,
				limit: 5,
				firstList: [],
				goodList: [],
				shopList: [],
				period: 1,
			};
		},
		computed: {
			...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude', 'weichatObj','chooseDistrict']),
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onReachBottom() {
		    this.getStoreList()
		},
		onLoad: function(option) {
			this.getaddress();
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
			// #ifdef H5
			this.IndexShare();
			//#endif
		},
		watch: {
			// PXType(val, old) {
			// 	console.log('切换显示')
			// 	this.getStoreList()
			// },
			// chooseDistrict(val,old) {
			// 	this.reGetStoreList()
			// }
		},
		onShow: function() {
			this.getStoreCate()
			this.getGoodList()
			this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		// #ifndef MP
		// 监听导航栏输入框点击事件
		onNavigationBarSearchInputClicked(e) {
			//跳转到搜索页面
			this.clickSearch();
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg('点击了扫描');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/user/page/notice'
				});
			}
		},

		// #endif
		methods: {
			...mapMutations(['setLat', 'setLon','setChoose']),
			// 切换排序
			changePx(index) {
				let obj = this
				obj.PXType = index
				
				console.log('切换显示')
				this.page = 1
				this.loadingType = 'more'
				this.getStoreList('reload')
			},
			// 刷新门店列表
			reGetStoreList() {
				this.page = 1
				this.loadingType = 'more'
				this.storeList = []
				console.log('地址刷新')
				this.getStoreList()
			},
			// 计算距离
			space(lat1, lng1, lat2, lng2) {
				console.log(lat1, lng1, lat2, lng2);
				var radLat1 = (lat1 * Math.PI) / 180.0;
				var radLat2 = (lat2 * Math.PI) / 180.0;
				var a = radLat1 - radLat2;
				var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
					.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				// return s * 1000; // 单位米
				return s //单位km
			},
			// 获取店铺分类
			getStoreCate() {
				let obj = this
				store_cate().then(res => {
					console.log(res)
					obj.shopList = obj.chunkArr(res.data, 10)
					console.log(obj.shopList, 'this.shopList+++++++++++++')
			
				})
			},
			// 拨打电话
			makeCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 导航
			dh(item) {
				wx.openLocation({
					latitude: item.latitude * 1,
					longitude: item.longitude * 1,
					name: item.name,
					address: item.detailed_address
				})
			},
			// 获取商店列表
			getStoreList(type) {
				let obj = this
				if(obj.loadingType=='loading' || obj.loadingType == 'noMore'){
					return
				}
				obj.loadingType= 'loading'				
				getStoreList({
					page:obj.page,
					latitude: obj.latitude,
					longitude: obj.longitude,
					limit:obj.limitt,
					// address: obj.$store.state.chooseProvince,
					address:  obj.PXType == 0? '': obj.$store.state.chooseDistrict,
					sales: obj.PXType == 2 ? 1 : 0,
					period: obj.PXType == 0 ? 1 : 0,
				}).then(res => {
					if(type == 'reload') {
						obj.storeList = []
					}
					if(res.data.list.length>0){
						obj.storeList = obj.storeList.concat( res.data.list)
						obj.page++
						console.log('数据加载完毕');
					}
					
					if(obj.limitt==res.data.list.length){
						//说明数据已经加载完毕了
						obj.loadingType= "more"
						console.log('加载完毕1111111');
					}else{
						console.log('加载完毕1222222222211');
						obj.loadingType ="noMore"
						
					}
					//说明还有数据
					uni.hideLoading()
					this.$set(obj.storeList,'loaded',true)
					
				})
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success(e) {
						console.log(e, 'dingwei')
					}
				})

			},
			getGoodList() {
				let obj = this
				getProducts({
					page: 1,
					limit: 50,
					cid: 1
				}).then(res => {
					console.log(res, 'libao')
					obj.goodList = res.data.filter(item => {
						return item.price != 2999
					})
				})
			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			// #ifdef H5
			IndexShare() {
				let obj = this;
				let pages = getCurrentPages();
				// 获取当前页面
				let page = pages[pages.length - 1];
				let path = '#/' + page.route + '?';
				// 保存传值
				for (let i in page.options) {
					path += i + '=' + page.options[i] + '&';
				}
				console.log(obj.Path);
				// 保存邀请人
				path += 'spread=' + this.userInfo.uid;
				let data = {
					link: this.baseURL + '/index/#/pages/store/index/' + path,
					title: this.userInfo.nickname + '邀请您进入玲卿加',
					desc: '欢迎加入玲卿加',
					imgUrl: 'https://hy.liuniu946.com/index/https://hy.liuniu946.com/app/img/logo.jpg'
				};
				console.log(data, '分享数据');
				shareLoad(data);
			},
			// #endif
			getaddress() {
				console.log('dizhi+++++++++++');
				let obj = this;
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res, 123456);
						obj.setLat(res.latitude);
						obj.setLon(res.longitude);
						
						obj.getCity()
					},
					fail: err => {
						console.log(err, 'shi+++++++++++++++');
						openMap().then(e => {
							this.getaddress();
						});
					}
				});

			},
			navTo(url) {
				if (url == '') {
					this.$api.msg('暂未开通，敬请期待');
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/store/shopList?id=0'
				});
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						let goods = data.info;
						console.log(goods, '商品信息');
						this.carouselList = data.info.storebanner;
						this.swiperLength = this.carouselList.length;
						this.bastList = data.giftInfo; //会员礼包
						data.info.firstList.forEach(e => {
							e.isVip = e.store_type ? "3" : "0"
						})
						this.firstList = data.info.firstList //首页商品
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				console.log(item.wap_url.indexOf('http'), 'banner');
				if (item.wap_url.indexOf('http') >= 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			},
			// 根据指定个数分割数组
			chunkArr(arr, size) {
				console.log(arr, 'arr+++++')
				//判断如果不是数组(就没有length)，或者size没有传值，size小于1，就返回空数组
				if (!arr.length || !size || size < 1) return []
				let [start, end, result] = [null, null, []]
				for (let i = 0; i < Math.ceil(arr.length / size); i++) {
					start = i * size
					end = start + size
					result.push(arr.slice(start, end))
				}
				return result
			},
			getCity() {
				let obj = this
				getCity({
					lat: obj.latitude,
					lng: obj.longitude
				}).then(res => {
					console.log(res, '逆解析结果')
					obj.chooseDistrict = res.data.district
					if(!obj.chooseDistrict) {
						obj.setChoose({
							chooseProvince:  res.data.province,
							chooseCity:  res.data.city,
							chooseDistrict: res.data.district
						})
					}
					
					obj.getStoreList()
				})
			},
			// 调用高德
			toGaodeMap(latitude, longitude, address) {
				window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f6f9;
	}

	.carousel-section {
		position: relative;
		// padding-top: 10px;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 378rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.titleNview-placing {
			height: var(--status-bar-height);
			box-sizing: content-box;
		}

		.search {
			justify-content: space-between;
			padding: 30rpx 32rpx 20rpx;
			align-items: center;
			background-color: #fff;

			.address {
				width: 32rpx;
				height: 38rpx;
			}

			.shop-name {
				height: 38rpx;
				position: relative;
				top: -4rpx;
				z-index: 100;
				width: 120rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding-left: 10rpx;
			}

			.shop-jt {
				margin-left: 8rpx;
				width: 16rpx;
				height: 10rpx;
			}

			.input-box {
				margin-left: 10rpx;
				position: relative;
				z-index: 99;
				width: 650rpx;
				height: 60rpx;
				background: #EEEEEE;
				border-radius: 30rpx;

				.input-content {
					position: relative;
					z-index: 11;
					border-radius: 99rpx;
					flex-grow: 1;
					padding: 5rpx 30rpx;
					background: #EEEEEE;

					.iconsearch {
						font-size: 50rpx;
						color: #CBCBCB;
					}

					.input {
						margin-left: 19rpx;
						flex-grow: 1;
						color: #CBCBCB;

						input {
							font-size: 28rpx;

							color: #CBCBCB;
						}
					}
				}

				.input-button {
					padding-left: 20rpx;
					font-size: $font-base;
					height: 100%;
				}
			}
		}
	}

	.carousel {
		position: relative;
		z-index: 3;
		width: 100%;
		height: 360rpx;
		background-color: #fff;

		.carousel-item {
			width: 100%;
			height: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.navbar {
		position: relative;
		z-index: 2;
		padding: 0 50rpx;
		margin-top: -200rpx;
		width: 750rpx;
		height: 420rpx;
		background: #ffffff;
		border-radius: 40rpx;

		.navbar-box {
			padding-top: 250rpx;

			.navbar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;

				.nitem-image {
					width: 90rpx;
					height: 90rpx;
				}

				.nitem-font {
					margin-top: 22rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
			}
		}


	}

	.jx {
		background: #fff;
		width: 750rpx;
	}

	.jx-box {
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;

		.jx-box-title {
			margin: 50rpx 0;
			width: 610rpx;
			height: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.jx-box-img {
			width: 750rpx;
			height: 220rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.cai {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.jx-box-content {
		display: flex;

		.content-left {
			margin: 20rpx 15rpx;
			width: 236rpx;
			height: 236rpx;
			background: #E2E2E2;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


		.content-right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.shop-name {
				width: 382rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;

				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.shop-content {
				width: 455rpx;
				display: flex;
				justify-content: space-between;

				.shop-content-left {
					display: flex;
					flex-direction: column;



					.price-box {
						display: flex;
						align-items: center;

						.yuan-price {
							font-size: 26rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: #999999;
						}

						image {
							margin: 0 10rpx;
							width: 16rpx;
							height: 18rpx;
						}

						.j-price {
							font-size: 24rpx;
							font-weight: bold;
							color: #B59467;
						}
					}

					.price-x {
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4C4C;
					}
				}

				.shop-content-right {
					margin-top: 20rpx;
					align-items: center;
					text-align: center;
					width: 137rpx;
					height: 52rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #fff;
					background: #f75022;
					border-radius: 26rpx;
					line-height: 52rpx;
				}
			}
		}
	}



	.shop {
		margin-top: 20rpx;
		background: #ffffff;
		padding: 0 12rpx;

		.shop-title {
			padding: 30rpx 0 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e3e6e7;

			.shop-item {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;

				.sitem-font {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.choose {
					color: #ff4c4c;
				}


				.jt-down {
					width: 10rpx;
					height: 8rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	.shop-main {
		padding: 32rpx 18rpx 0 12rpx;
		align-items: flex-start;
		justify-content: flex-start;

		.main-left {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
		}

		.main-right {
			width: 500rpx;
			justify-content: space-between;
			align-items: flex-start;
			margin-left: 20rpx;
			padding: 13rpx 0 35rpx;
			border-bottom: 1px solid #eaeced;

			.shopm-info {
				max-width: 60%;
				line-height: 1;

				.shopm-title {
					display: flex;
					justify-content: flex-start;

					.shopmt-font {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.shopmt-good {
						margin-left: 6rpx;
						width: 30rpx;
						height: 30rpx;
						border: 1px solid #ff4c4c;
						border-radius: 5rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ff4c4c;
						text-align: center;
						line-height: 30rpx;
					}
				}

				.address {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.shopmt-tip {
					position: relative;
					display: inline-block;
					flex-grow: 0;
					margin-top: 52rpx;
					padding: 8rpx;
					background: #fcf3f0;
					border-radius: 16rpx 16rpx 16rpx 0px;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ff440d;
				}
			}

			.right {
				height: 100%;
				margin-top: 5rpx;
				display: flex;
				flex-direction: column;

				.mright-top {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.mrt-image {
						width: 20rpx;
						height: 28rpx;
					}

					.mrt-font {
						margin-left: 8rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}

				.mright-bottom {
					margin-top: 80rpx;
					display: flex;
					justify-content: flex-end;

					.mrb-item {
						width: 46rpx;
						height: 46rpx;
						margin-left: 14rpx;
					}
				}
			}
		}
	}

	.good-list {
		width: 750rpx;
		background: linear-gradient(0deg, #FFFFFF, #F8F8F8);
		padding: 0 30rpx 30rpx;

		.good {
			width: 690rpx;
			height: 276rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
			border-radius: 10rpx;
			margin: auto;
			padding: 20rpx 15rpx;
			margin-bottom: 20rpx;

			&:last-of-type {
				margin-bottom: 0rpx;
			}

			.good-img {
				flex-shrink: 0;
				width: 236rpx;
				height: 236rpx;
				border-radius: 10rpx;
				margin-right: 22rpx;

				image {
					width: 236rpx;
					height: 236rpx;
					border-radius: 10rpx;
				}
			}

			.good-info {
				flex-grow: 1;
				height: 100%;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.good-name {
					font-size: 32rpx;
					font-weight: bold;
					padding-top: 10rpx;
					color: #333333;
				}

				.good-price {
					width: 100%;

					image {
						width: 14rpx;
						margin: 0 6rpx 0 10rpx;
					}

					.old-price {
						.old-left {
							font-size: 26rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: #999999;
						}

						.old-right {
							font-size: 24rpx;
							font-weight: bold;
							color: #B59467;
						}
					}

					.new-price {
						width: 100%;
						font-size: 36rpx;
						font-weight: bold;
						color: #FF4C4C;
						justify-content: space-between;

						.good-tip {
							display: inline-block;
							padding: 0 20rpx 0 17rpx;
							min-width: 160rpx;
							text-align: center;
							line-height: 40rpx;
							background: #f75022;
							font-size: 24rpx;
							font-weight: 500;
							color: #fff;
							border-radius: 10rpx;
							position: relative;

							&::before {
								content: '';
								display: inline-block;
								height: 17rpx;
								width: 17rpx;
								background-color: #fff;
								border-radius: 50%;
								position: absolute;
								top: 0;
								bottom: 0;
								left: -9rpx;
								margin: auto;
							}

							&::after {
								content: '';
								display: inline-block;
								height: 17rpx;
								width: 17rpx;
								background-color: #fff;
								border-radius: 50%;
								position: absolute;
								top: 0;
								bottom: 0;
								right: -9rpx;
								margin: auto;
							}
						}
					}
				}
			}
		}

	}

	.title-wrapper {
		padding-left: 20rpx;
		justify-content: flex-start;
		align-items: center;
		height: 86rpx;
		line-height: 86rpx;
		width: 690rpx;
		margin: auto;

		image {
			width: 36rpx;
			height: 36rpx;
			background: linear-gradient(43deg, #ffc063, #ffa163);
			border-radius: 50%;
		}

		view {
			padding-left: 10rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #242424;
		}

		.title-b {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8b8b8b;
		}
	}

	.shop-list {
		padding-top: 20rpx;
		flex-wrap: wrap;
		background-color: #fff;
		justify-content: flex-start;

		.shop-item {
			margin-bottom: 20rpx;
			flex-direction: column;
			width: 20%;
			height: 100rpx;

			image {
				width: 60rpx;
				height: 58rpx;
			}
		}
	}

	.gift-info {
		width: 690rpx;
		height: 155rpx;
		background: linear-gradient(43deg, #FFB242, #FF944D);
		border-radius: 12rpx 12rpx 0px 0px;
		margin: auto;
		color: #fff;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;

		view {
			padding-left: 28rpx;
		}
	}

	.gift-good-list {
		width: 690rpx;
		height: 243rpx;
		background: #f4f4f4;
		border-radius: 12rpx;
		margin: auto;

		.gift-list {
			width: 670rpx;
			height: 286rpx;

			background: #fff;
			border-radius: 12px;
			// margin: -54rpx auto 0;
			top: -54rpx;
			left: 0;
			right: 0;
			margin: auto;

			.gift-item {
				background-color: #fff;
				width: 223rpx;
				height: 100%;
				border-right: 1rpx solid #D6D7DC;

				&:first-of-type {
					border-radius: 12rpx 0 0 12rpx;
				}

				&:last-of-type {
					margin-right: 0;
				}

				image {
					width: 160rpx;
					height: 160rpx;
				}

				.gift-name {
					font-size: 22rpx;
					font-weight: bold;
					color: #3F3F3F;
					line-height: 34px;
				}

				.gift-price {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF4C4C;
				}
			}
		}
	}

	.djq-wrap {
		width: 701rpx;
		// height: 255rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 27rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 23rpx 22rpx;

		&:last-of-type {
			margin-bottom: 0;
		}

		.djq-img {
			flex-shrink: 0;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.djq-right {
			padding-left: 20rpx;
			flex-grow: 1;

			.djq-tit {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				line-height: 52rpx;

				.djq-name {
					max-width: 300rpx;
				}

				.djq-dis {
					flex-shrink: 0;

					image {
						width: 20rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}

					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.djq-dz {
				width: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.djq-hd {
				width: 100%;
				// border-bottom: 1rpx solid #EAECED;

				.buy-info {
					display: inline-block;
					height: 32rpx;
					border-radius: 16rpx 16rpx 16rpx 0px;
					line-height: 32rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #FF440D;
					padding: 0 15rpx;
					background-color: #fff;
				}

				.hd-btn {
					image {
						width: 46rpx;
						height: 46rpx;
					}
				}
			}
		}
	}

	.left-btm {
		height: 66rpx;

		.j-logo {
			width: 32rpx;
			line-height: 33rpx;
			background: linear-gradient(-48deg, #FFA30B, #FFD158);
			border-radius: 13rpx;
			font-size: 21rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}

		.j-price {
			font-size: 27rpx;
			font-weight: bold;
			color: #FF4C4C;
			margin: 0 10rpx 0 5rpx;
		}

		.j-zk {
			height: 31rpx;
			border: 1rpx solid #FF4C4C;
			border-radius: 7rpx;
			line-height: 31rpx;
			padding: 0 8rpx;
			font-size: 20rpx;
			font-weight: bold;
			color: #FF4C4C;
			margin-right: 5rpx;
		}

		.j-name {
			font-size: 23rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.hotgoods {
		// margin-top: 38rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 30rpx;

		.hotgoods-item {
			width: 48%;
			background-color: #ffffff;
			border-radius: 12rpx;

			&:nth-child(2n + 1) {
				margin-right: 24rpx;
			}

			.image-wrapper {
				width: 100%;
				height: 330rpx;
				border-radius: 3px;
				overflow: hidden;
				position: relative;

				.image-bg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					opacity: 1;
					border-radius: 12rpx 12rpx 0 0;
					z-index: 2;
				}

				.image {
					width: 100%;
					height: 100%;
					opacity: 1;
					border-radius: 12rpx 12rpx 0 0;
				}
			}

			.title {
				margin-top: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.hot-price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 14rpx 10rpx 30rpx;

				.hotPrice-box {
					width: 70rpx;
					height: 28rpx;
					background: linear-gradient(90deg, #c79a4c, #f9df7f);
					border-radius: 5rpx;
					text-align: center;
					line-height: 28rpx;
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}

				.price {
					// margin-left: 10rpx;
					font-size: 40rpx;
					color: #ff0000;
					font-weight: 500;
				}

				.yuanPrice {
					margin-left: 10rpx;
					font-size: 20rpx;
					font-weight: 500;
					// text-decoration: line-through;
					color: #999999;
				}

				.cart-icon {
					image {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}

	.product-box {
		// margin-top: 20rpx;
		background: #ffffff;
		padding: 0rpx 30rpx 20rpx;
	}
</style>