dl/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="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 -->
							<!-- #ifdef APP-PLUS -->
							<image src="../../static/icon/dh.png" mode="" @click.stop="gomapApp(storeitem.latitude, storeitem.longitude, storeitem.name)"></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-price">
							<text>￥</text>
							{{ qitem.coupon_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 '@/components/uni-load-more/uni-load-more.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';
// #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: [],
			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';
			let data = {
				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
			};
			console.log(data, '参数');
			getStoreList(data)
				.then(res => {
					console.log(res, '1111');
					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);
				})
				.catch(err => {
					console.log(err, '报错');
				});
		},
		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: 'wgs84',
				success: res => {
					// uni.showModal({
					// 	title: '成功',
					// 	content: JSON.stringify(res)
					// });
					let wz = obj.wgs84Togcj02(res.longitude, res.latitude);
					obj.setLat(wz[1]);
					obj.setLon(wz[0]);
					obj.getCity();
				},
				fail: err => {
					// uni.showModal({
					// 	title: '失败',
					// 	content: JSON.stringify(err)
					// });
					openMap().then(e => {
						this.getaddress();
					});
				}
			});
		},
		wgs84Togcj02(lng, lat) {
			if (this.out_of_china(lng, lat)) {
				return [lng, lat];
			}
			//定义一些常量
			//GCJ02 转换为 WGS84
			var that = this;
			const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
			const PI = 3.1415926535897932384626;
			const a = 6378245.0;
			const ee = 0.00669342162296594323;
			let dlat = that.transformlat(lng - 105.0, lat - 35.0);
			let dlng = that.transformlng(lng - 105.0, lat - 35.0);
			let radlat = (lat / 180.0) * PI;
			let magic = Math.sin(radlat);
			magic = 1 - ee * magic * magic;
			let sqrtmagic = Math.sqrt(magic);
			dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
			dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
			var mglat = lat + dlat;
			var mglng = lng + dlng;
			return [mglng, mglat];
		},

		out_of_china(lng, lat) {
			return lng < 72.004 || lng > 137.8347 || (lat < 0.8293 || lat > 55.8271 || false);
		},

		transformlat(lng, lat) {
			const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
			const PI = 3.1415926535897932384626;
			const a = 6378245.0;
			const ee = 0.00669342162296594323;
			let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
			ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
			ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
			ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
			return ret;
		},
		transformlng(lng, lat) {
			const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
			const PI = 3.1415926535897932384626;
			const a = 6378245.0;
			const ee = 0.00669342162296594323;
			let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
			ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
			ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0;
			ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0;
			return ret;
		},
		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;
		},
		gomapApp(latitude, longitude, name) {
			let url = '';
			if (plus.os.name == 'Android') {
				//判断是安卓端
				plus.nativeUI.actionSheet(
					{
						//选择菜单
						title: '选择地图应用',
						cancel: '取消',
						buttons: [{ title: '腾讯地图' }, { title: '百度地图' }, { title: '高德地图' }]
					},
					function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != '') {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert('本机未安装指定的地图应用');
							});
						}
					}
				);
			} else {
				// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
				// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
				//（如urlschemewhitelist:["iosamap","baidumap"]）
				plus.nativeUI.actionSheet(
					{
						title: '选择地图应用',
						cancel: '取消',
						buttons: [{ title: '腾讯地图' }, { title: '百度地图' }, { title: '高德地图' }]
					},
					function(e) {
						switch (e.index) {
							case 1:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != '') {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert('本机未安装指定的地图应用');
							});
						}
					}
				);
			}
		},
		getCity() {
			let obj = this;
			console.log('进入city');
			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();
				})
				.catch(err => {
					console.log(err, 'shibai');
				});
		},
		// 调用高德
		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;
				display: flex;
				align-items: center;
				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%;
			display: flex;
			justify-content: flex-end;

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