newyqg/pages/store/store.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 class="carousel-item">
					<!-- #ifndef APP-PLUS -->
					<image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/f8564202304061452591511.png"
						mode="aspectFill"></image>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<image src="http://yiqugo.oss-cn-hangzhou.aliyuncs.com/f8564202304061452591511.png"
						mode="aspectFill"></image>
					<!-- #endif -->
				</swiper-item>
			</swiper>
			<!-- <view class="search flex">
				<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>
					<view class="p-box">
						<text :class="{ active: PXType == 0 && numberOrder === 1 }" class="iconfont iconfold"></text>
						<text :class="{ active: PXType == 0 && numberOrder === 2 }"
							class="iconfont iconfold xia"></text>
					</view>
				</view>
				<view class="shop-item" @click="changePx(1)">
					<view class="sitem-font" :class="{ choose: PXType == 1 }">位置距离</view>
					<view class="p-box">
						<text :class="{ active: PXType == 1 && distance === 1 }" class="iconfont iconfold"></text>
						<text :class="{ active: PXType == 1 && distance === 2 }" class="iconfont iconfold xia"></text>
					</view>
				</view>
				<view class="shop-item" @click="changePx(2)">
					<view class="sitem-font" :class="{ choose: PXType == 2 }">趣豆赠送</view>
					<view class="p-box">
						<text :class="{ active: PXType == 2 && qudou === 1 }" class="iconfont iconfold"></text>
						<text :class="{ active: PXType == 2 && qudou === 2 }" class="iconfont iconfold xia"></text>
					</view>
				</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).toFixed(2) * 1 }}KM
					</view>
				</view>
				<view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
					<view class="djq-dz-box">
						<view class="djq-dz clamp2">{{ storeitem.detailed_address }}</view>
						<view class="djq-dz">每100元赠送趣豆{{ storeitem.gift_integral * 1 }}</view>
					</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 {
		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-》趣豆多少排序
				numberOrder: 1, //销量排序1升2降
				distance: 1, //距离排序1升2降
				qudou: 1, //趣豆多少排序1升2降
				storeList: [],
				current: 0,
				carouselList: [], //轮播列表
				page: 1,
				limit: 5,
				shopList: [],
				period: 1,
				order: ''
			};
		},
		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
		},
		watch: {
			PXType(val, old) {
				console.log('切换显示');
				this.getStoreList();
			}
			// chooseDistrict(val,old) {
			// 	this.reGetStoreList()
			// }
		},
		onShow: function() {
			this.getStoreCate();
			this.getStoreList();
			// 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;
				if (index === 0) {
					this.order = this.numberOrder === 1 ? 'asc' : 'desc';
					this.numberOrder = this.numberOrder === 1 ? 2 : 1;
				}
				if (index === 1) {
					this.order = this.distance === 1 ? 'asc' : 'desc';
					this.distance = this.distance === 1 ? 2 : 1;
				}
				// 判断是否为价格优先
				if (index === 2) {
					this.order = this.qudou === 1 ? 'asc' : 'desc';
					this.qudou = this.qudou === 1 ? 2 : 1;
				}
				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) {
				console.log(phone, '123456');
				uni.makePhoneCall({
					phoneNumber: phone, //仅为示例
					fail(err) {
						console.log(err, 'fail');
					},
					success(res) {
						console.log(res, 'success');
					}
				});
			},
			// 导航
			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,
					sort: obj.PXType == 0 ? 'achievement' : obj.PXType == 1 ? 'distance' : 'gift_integral',
					order: obj.order
				};
				getStoreList(data)
					.then(res => {
						console.log(res, '1111');
						if (type == 'reload') {
							obj.storeList = [];
						}
						console.log(type);
						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');
					}
				});
			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						});
					}
				});
			},
			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]);
						console.log(wz, '经纬度');
						this.getStoreList();
						// obj.getCity();
					},
					fail: err => {
						// uni.showModal({
						// 	title: '失败',
						// 	content: JSON.stringify(err)
						// });
						this.getStoreList();
						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'
				});
			},
			// 监听图片加载完成
			onImageError(key, index) {
				this[key][index].image = '/static/error/errorImage.jpg';
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						this.carouselList = data.info.storebanner;
						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;
				}

				.p-box {
					display: flex;
					flex-direction: column;

					.iconfont {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 14rpx;
						line-height: 1;
						margin-left: 4rpx;
						font-size: 26rpx;
						color: #888;

						&.active {
							color: $base-color;
						}
					}

					.xia {
						transform: scaleY(-1);
					}
				}
			}
		}
	}

	.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: 10rpx;
			width: 500rpx;

			.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-box {
				width: 60%;
			}

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

			.djq-hd {
				width: 30%;
				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>