medicine-xcx/pages/home/home.vue

<template>
	<view class="home">
		<u-sticky>
			<view class="theme-bg">
				<status-bar></status-bar>
				<view class="home-address flex align-center p-l-28 p-r-28" :style="[addressStyle]" @click="toReceiving">
					<view class="m-r-14"><u-icon size="40" name="map-fill" color="#fff"></u-icon></view>
					<view class="home-address-name text-ellipsis">{{location.type === 'shop' ? `站点：${location.name}` : location.shippingAddress}}</view>
					<view class="home-address-switch flex align-center text-white font-28">
						<text class="p-l-10 p-r-10">|</text>
						<text>切换</text>
						<u-icon size="40" name="arrow-right" color="#fff"></u-icon>
					</view>
				</view>
				<view class="home-search"><u-search disabled placeholder="请输入要搜索的商品" height="70" :show-action="false" @click="handleSearch" /></view>
			</view>
		</u-sticky>

		<view class="home-banner position-relative p-l-28 p-r-28">
			<u-swiper height="270" :list="bannerList" @click="bannerClick"></u-swiper>
			<view class="home-banner-bg position-absolute top-0 theme-bg"></view>
		</view>
		<!-- 排排 -->
		<view class="home-notice flex align-center m-t-20 " v-for="(item_no,index) in noticeList" @click="todetail(index)">
			<view class="home-notice-image"><image :src="IMG_URL + 'notice.png'" mode="widthFix"></image></view>
			<u-notice-bar 
				@click="todetail"
				class="flex-1" 
				:volume-icon="false" 
				type="primary" 
				color="#01AEEA" 
				bg-color="#e0ffff" 
				mode="horizontal"
				:list="item_no"
			/>
		</view>
		<view class="home-grid m-t-60 flex align-center flex-wrap">
			<view class="home-grid-item flex flex-column align-center justify-between m-b-30" v-for="(item,index) in gridList" :key="item.id" @click="toPage(item.url,item.id,item)">
				<view class="home-grid-img flex align-center justify-center">
					<image style="max-width: 80rpx; max-height: 80rpx;" :src="item.image" mode="widthFix"></image>
				</view>
				
				<text class="font-30 text-black" style="font-weight: 500;" v-show="item.alt">{{ item.alt }}</text>
				
				<text class="font-30 text-black" style="font-weight: 500;">{{ item.title }}</text>
				<text class="font-30 text-black" style="font-weight: 500;">{{ item.concert }}</text>
				<u-badge :offset="[-20,10]" type="error" :count="item.icon"></u-badge>
			</view>
		</view>

		<view class="home-goods m-t-10">
			<view class="home-goods-header m-b-20" v-if="imgAbout"><image :src="imgAbout" mode="widthFix"></image></view>
			<view v-for="(item,index) in goodsList" :key="index">
				<goods-item :goods="item" thereTo='home'></goods-item>
			</view>
		</view>
		<!--  @click="showTabber" -->
		<view class="bg" v-if="show && Object.keys(userInfo).length > 0" catchtouchmove="return">
			<!-- 开通会员 -->
			<view class="merber_pass" v-if="showBtn && userInfo.level == 0">
				<view class="img_merber_pass" :style="'background-image: url('+IMG_URL+'menberPass.png);'">
					<text class="btn_click_pass" @click="toPageMenber">立即开通</text>
				</view>
				<u-icon name="close" color="#fff" size="50rpx" @click="closeBtn"></u-icon>
			</view>
			<!-- 礼包 -->
			<view  v-for="(item,index) in packet_list" :key="item.id">
				<view class="gift_box"  v-if="select_index == index && !showBtn" >
					<view class="gift" :style="'background-image: url('+IMG_URL+'gift.png);'">
						<text class="one" v-if="item.type == 0">新人大礼包（限X日内领取）</text>
						<text class="two" v-if="item.type == 0">优惠券X张</text>
						<text class="top_one" v-if="item.type !== 0">恭喜您获得</text>
						<text class="three" v-if="item.type == 0">(满100减50）</text>
						<!-- item.type == 0 ||  item.type == 0 || -->
						<text :class="item.type ==2?'four1':'four'" v-if="item.type == 2">兑换金{{item.intger}}元</text>
						<text :class="item.type ==3?'four1':'five'" v-if="item.type == 3">消费金{{item.consumption}}元</text>
						<view class="six flex flex-column" v-if="item.type !== 0">
							<text>活动时间</text>
							<text class="font-32" >从{{item.startTime.substr(0,10)}}</text>
							<text class="font-32">至{{item.endTime.substr(0,10)}}</text>
						</view>
						<text class="getRedPacketBtn" @click="getRedPacketIndex(item)">{{item.type ==0? '领取新人大礼包': '领取'}}</text>
					</view>
					
					<u-icon name="close" color="#fff" size="50rpx" @click="close" class="m-t-40"></u-icon>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
	import QQMapWX from '@/plugin/map/qqmap-wx-jssdk.min.js'
	import { MAP_KEY } from '@/config/settings.js'
export default {
	data() {
		return {
			IMG_URL,
			// config,
			imgAbout: '',
			bannerList: [],
			noticeList: [],
			gridList: [],
			goodsList: [],
			show: true,
			showBtn: true,
			select_index: 0,
			packet_list: [],
			isLock: true,
			// userInfo: {},
			qqmapsdk: '',
			//分页
			pageNo: 1,
			pageSize: 10,
			total: null,
			isLock: true,
			userLocation: true,
			noticeListOld: [],
			isFrist: 0,  // 为0 第一次进入 1 第一次登录是进入 2 切换
		};
	},
	onPullDownRefresh() {
		this.orderList = [];
		this.pageNo = 1;
		this.total = null;
		this.isLock = true;
		this.getGoodsList()
	},
	onReachBottom() {
		if(this.isLock){
			this.isLock = false;
			console.log(this.total !== null,this.pageNo * this.pageSize >= this.total, this.total)
			if(this.total !== null && this.pageNo * this.pageSize >= this.total){
				this.$Toast('没有更多数据了哦！');
				
				setTimeout(()=>{
					this.isLock = true;
				},3000)
				return
			}
			this.pageNo+=1;
			this.getGoodsList();
		}
	},
	onLoad() {	
		this.qqmapsdk = new QQMapWX({
				key: MAP_KEY // 必填
		})
		// this.getAddress()
		uni.showLoading()
		
		// 调用 getUserInfo  原因 第一进来获取不到用户的缓存 所以只能调用接口   来确定是否要展示 立即开通会员
 		Promise.all([ this.getBanner(), this.getNotice(), this.getHomeButton(), this.getGoodsList()])
		.then(() => {  
			uni.hideLoading()
		})
		.catch(err => {
			uni.hideLoading()
			this.$Toast(err)
		})
		this.imageOne();
		// 关闭uploadAddress
		uni.$off('uploadAddress');
		// 禁止获取站点 ，影响用户体验 
		// uni.$once('uploadAddress', () => {
		// 	uni.showLoading()
		// 	this.getAddressList()
		// })
	},
	onShow() {
		this.userToken && this.getUserInfo()
	},
	computed: {
		location () {
			return this.$store.state.location
		},
		userInfo () {
			return this.$store.state.userInfo
		},
		userToken () {
			return this.$store.state.userToken
		},
		isLogin () {
			return this.$store.state.userToken
		},
		addressStyle () {
			// #ifdef H5
			let menuButtonInfo = {}
			// #endif
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// #endif
			let systemInfo = uni.getSystemInfoSync()
			let { height, left, top } = menuButtonInfo
			let marginTop = top - systemInfo.statusBarHeight
			return {
				height: `${height}px`,
				marginTop: `${marginTop}px`,
				width: `${left}px`,
			}
		}
	},

	methods: {
		// 开通会员关闭按钮
		closeBtn(){
			this.showBtn = false;
			if(this.packet_list.length == 0){
				this.show = false;
				wx.showTabBar();
			}
		},
		close(){
			this.show = false;
			wx.showTabBar();
		},
		// 有token才获取地址  在调取用户信息的时候调取保证有token
		getAddressInfo () {
			uni.getSetting({
			   success: settingInfo => {
					 console.log(settingInfo)
					 if (!settingInfo.authSetting.hasOwnProperty('scope.userLocation')) return
					 if (!settingInfo.authSetting['scope.userLocation'] && !this.userLocation) {
							uni.showModal({
								title: '获取位置失败',
								content: '请允许使用您的位置，否则无法获取附件站点',
								confirmText: '去设置',
								success: res => {
									if (res.confirm) {
										uni.openSetting({
											success: openSttingInfo => {
												if (openSttingInfo.authSetting['scope.userLocation']) {
													this.getAddress()
													this.userLocation = true
												} else {
													this.userLocation = false
												}
											}
										})
									} else {
										// this.isLogin && this.getAddressList()
									}
								},
								fail: () => {
									// this.isLogin && this.getAddressList()
								}
							})
					 } else {
						 this.userLocation = true
					 }
			   }
			})
		},
		// 点击公告 跳入详情页
		todetail(index){
			console.log(index)
			this.$tools.navigateTo({
				url: `/pagesC/noticeDetail/noticeDetail?id=${this.noticeListOld[index].id}`
			})
		},
		// 相关图片
		imageOne() {
			this.$api('imageOne',{url: 'pages/home/home'}).then(res => {
				let {code, result, message} = res;
				if(code == 200) {
					this.imgAbout = result.image;
				}else {
					this.$Toast(message);
				}
			}).catch(err => {
				this.$Toast(err.message);
			})
		},
		// 获取用户信息  是否展示 立即开通会员 
		getUserInfo () {
			return new Promise((resolve, reject) => {
				this.$api('getUserInfo').then(res => {
					let { code, result, message} = res;
					if(code == 200){
						let userInfo = {...result.account, ...result.userInfo }
						this.userInfo = userInfo
						// 更新用户信息缓存
						this.$storage.setStorage("__user_info", userInfo)
						// this.getAddressInfo();
						!this.$store.state.location.name && this.getAddress()
						this.isFrist++
						console.log(this.isFrist)
						if(this.isFrist == 1){
							this.toPassMerber();
							this.getRedPacket();
						}
						resolve()
					}else {
						reject(message)
					}
				}).catch(err => {
					reject(err.message)
				})
			})
		},
		// 获取地址
		getAddress() {
			uni.authorize({
				scope: 'scope.userLocation',
				success: () => {
					uni.getLocation({
						type: 'wgs84',
						success: res => {
							
							this.qqmapsdk.reverseGeocoder({
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								},
								success: (location) => {
									this.userLocation = true
									let {result} = location
									let userInfo = { ...this.$store.state.userInfo, address: result.formatted_addresses.recommend, longitude: res.longitude, latitude: res.latitude, }
									this.$store.commit('set_userInfo', userInfo)
									this.getStationmasterList(res.longitude, res.latitude);
								},
							})
						},
						fail: () => {
							this.userLocation = false
						}
					});
				},
				fail: () => {
					uni.showModal({
						title: '位置授权失败',
						content: '请允许使用您的位置，否则无法获取附件站点',
						confirmText: '去设置',
						success: res => {
							if (res.confirm) {
								uni.openSetting({
									success: openSttingInfo => {
										if (openSttingInfo.authSetting['scope.userLocation']) {
											this.getAddress()
											this.userLocation = true
										} else {
											this.userLocation = false
										}
									}
								})
							} else {
								this.userLocation = false
								// this.isLogin &&　this.getAddressList()
							}
						},
						fail: () => {
							this.userLocation = false
							// this.isLogin && this.getAddressList()
						}
					})
				}
			})
		},
		// 立即开通
		toPageMenber () {
			this.$tools.navigateTo({
				url: '/pagesC/member/index',
			})
		},
		getStationmasterList(longitude,latitude){
			const params = {
				longitude,
				latitude
			}
			this.$api('getStationmasterList',params).then( res => {
				let { code, result, message } = res;
				if( code == 200) {
					if(!result.length) {
						// this.isLogin && this.getAddressList();
					} else {
						let item =  result[0]
						let params = {
							name: item.shopName,
							id: item.id,
							shippingAddress: item.address,
							addressDetail: '',
							phone: item.phone,
							type: 'shop'
						}
						this.$store.commit('set_location', params)
					}
				} else {
					// if (code === 9001) return this.getAddressList();
					// this.$Toast(message)
				}
			}).catch(err => {
				this.$Toast(err.message)
			})
		},
		// 获取用户的收获地址
		getAddressList(){
			this.$api('getAddressList',{pageNo:1,pageSize: 1}).then(res => {
				let { code, result, message} = res;
					uni.hideLoading()
				if(code == 200) {
					if(result.records && result.records.length == 0 ){
						uni.showModal({
							title: '附近无站点',
							content: '您还未设置收货地点，否则无法进行购买',
							showCancel: false,
							confirmText: '去填写',
							success: (res) => {
								if (res.confirm) {
									// 去填写收获地址
									this.$tools.redirectTo({
										url: '/pages/my/address/addressEdit?type=setting&title=新增地址'
									})
								}
							}
						})
					} else {
						if (this.isLogin) {
							console.log(this.userInfo.level,'123456')
							if(this.userInfo.level == 0){
								this.show = true
							}
							this.getRedPacket()
						}
						let params = {
							...result.records[0],
							type: 'user'
						}
						this.$store.commit('set_location', params)
					}
				}else{
					this.$Toast(message)
				}
			}).catch(err => {
				this.$Toast(err.message)
			})
		},
		// 关闭会员
		toPassMerber() {
			// 关闭会员  调用红包
			
			// 0 没开通会员  展示立即开通会员    不管有没有都关闭tabber
			wx.hideTabBar();
			if(this.userInfo.level == 0){
				this.showBtn = true;
			}else{
				// 开通过来 取消展示 立即开通会员   
				this.showBtn = false;
			}
			if(!this.show || !this.showBtn){
				wx.showTabBar()
			}
		},
		// 轮播图点击
		bannerClick (idx) {
			let item = this.bannerList[idx]
			if (item.type === 1) {
				this.$tools.navigateTo({
					url: `/pagesC/goodsInfo/goodsInfo?id=${item.url}&type=home`
				})
			}else if(item.type == 0) {
				// 跳页面
				this.$tools.navigateTo({
					url: `${item.url}?type=home`
				})
			}
		},
		// 获取礼包信息
		getRedPacket() {
			const that = this
			this.$api('getGift').then(res => {
				let { code, result, message} = res ;
				if(code == 200) {
					result = result ==null? []: result;
					that.packet_list = result
					console.log(that.packet_list )
					// 没有送的礼包 并且确定是已经开通会员的 关闭遮罩层  打开tabber
					if (!result.length) {
						if(that.userInfo.level !== 0 ) {
							that.show= false;
							wx.showTabBar();
						} else if(that.showBtn == false ){ //  关闭了开通会员 并且也没有 礼包
							that.show= false;
							wx.showTabBar();
						}
					} else {
						that.show= true;
						uni.hideTabBar()
					}
				}else {
					that.$Toast(message);
					that.show= false;
					wx.showTabBar();
				}
			}).catch(err => {
				that.show= false;
				wx.showTabBar();
				that.$Toast(err.message);
			})
		},
		getRedPacketIndex(data){
			if(this.isLock){
				this.isLock = false;
				if(this.packet_list.length-1 == this.select_index) {
					this.$api('getGiftSave',{id: data.id}).then(res => {
						let { code, result, message} = res;
						if(code == 200) {
							this.$Toast(result)
							this.select_index++;
						}else{
							this.$Toast(message);
						}
						this.show = false;
						this.isLock = true
						wx.showTabBar();
					}).catch(err => {
						this.$Toast(err.message)
						this.show = false;
						this.isLock = true
						wx.showTabBar();
					})
				}else {
					this.$api('getGiftSave',{id: data.id}).then(res => {
						let { code, result, message} = res;
						if(code == 200) {
							this.$Toast(result)
							this.select_index++;
						}else{
							this.$Toast(message);
						}
						this.isLock = true
					}).catch(err => {
						this.isLock = true
						this.$Toast(err.message)
					})
				}
			}else{
				return
			}
		},
		// 获取配置按钮
		getHomeButton () {
			return new Promise((resolve, reject) => {
				this.$api('getHomeButton')
				.then(res => {
					let { code, result, message } = res
					if (code === 200) {
						this.gridList = result
						this.$store.commit('set_gridData', result)
						resolve()
					} else {
						reject(message)
					}
				})
				.catch(err => {
					reject(err.message)
				})
			})
		},
		// 获取滚动公告
		getNotice () {
			return new Promise((resolve, reject) => {
				this.$api('getNotice')
				.then(res => {
					let { code, result, message } = res
					if (code === 200) {
						this.noticeListOld = result;
						result.map(item => this.noticeList.push([item.title]))
						// this.noticeList = result.map(item => item.title)
						resolve()
					} else {
						reject(message)
					}
				})
				.catch(err => {
					reject(err.message)
				})
			}) 
		},
		// 获取轮播图
		getBanner () {
				return new Promise((resolve, reject) => {
					this.$api('getBanner', { type: 0 })
					.then(res => {
						let { code, result, message } = res
						if (code === 200) {
							this.bannerList = result
							resolve()
						} else {
							reject(message)
						}
					})
					.catch(err => {
						reject(err.message)
					})
				}) 
		},
		// 获取商品信息
		getGoodsList() {
			const params = {
				isHot: 1,
				type: 1,
				pageNo :this.pageNo,
				pageSize: this.pageSize
			}
			
			return new Promise((resolve, reject) => {
				if(this.pageNo>1){
					uni.showLoading({})
				}
				this.$api('getGoodsList',params).then(res => {
					let { code, result, message } = res;
					if(code == 200) {
						if(this.total== null) {
							this.total = result.total
						}
						result.records.forEach(item => {
							// const picArray= item.pic.split(',')
							// item.pic= picArray[0]
							
							
							if(item.pic!==null){
								const picArray=item.pic.split(',')
								item.pic= picArray[0]
							}else{
								item.pic=  []
							}
						})
						if(this.pageNo>1){
							uni.hideLoading();
						}
						this.goodsList = this.goodsList.concat(result.records)
						this.isLock = true;
						resolve()
					}else {
						if(this.pageNo>1){
							uni.hideLoading();
						}
						reject(message)
						this.isLock = true;
					}
				}).catch(err => {
					if(this.pageNo>1){
						uni.hideLoading();
					}
					reject(err.message)
					this.isLock = true;
				})
			})
		},
		handleSearch () {
			this.$tools.navigateTo({
				url: '/pagesC/search/search'
			})
		},
		toReceiving () {
			if (!this.userLocation) {
				uni.showModal({
					title: '获取位置失败',
					content: '请允许使用您的位置，否则无法获取附件站点',
					confirmText: '去设置',
					success: res => {
						if (res.confirm) {
							uni.openSetting({
								success: openSttingInfo => {
									if (openSttingInfo.authSetting['scope.userLocation']) {
										this.getAddress()
										this.userLocation = true
									} else {
										this.userLocation = false
									}
								}
							})
						}
					}
				})
			} else {
				if (this.isLogin) {
					this.$tools.navigateTo({
						url: '/pagesC/receiving/receiving'
					})
				} else {
					this.$util.loginModal('您还未登录，请去登录！')
				}
			}
		},
		toPage(url,id,item) {
			const that = this
			if(url == '/pagesB/homeGridList/todayAllReturn/index'  && this.userInfo.level !== 4){
				const text = this.userInfo.level== 0? '欢迎您开通！':'你是否去升级会员';
				const url_text= this.userInfo.level== 0? "/pagesC/member/index": "/pagesC/member/upgrades_renewals/index"
				uni.showModal({
					title: '提示',
					content: `钻石卡会员尊享，`+ text ,
					confirmText: '好的',
					success: function (res) {
							if (res.confirm) {
								that.$tools.navigateTo({
									url: url_text
								});
							}
						}
				})
				return
			}
			if(url == '/pagesB/homeGridList/scienceIsTie-in/index'  && this.userInfo.level !== 4){
				const text = this.userInfo.level== 0? '欢迎您开通！':'你是否去升级会员';
				const url_text= this.userInfo.level== 0? "/pagesC/member/index": "/pagesC/member/upgrades_renewals/index"
				uni.showModal({
					title: '提示',
					content: `钻石卡会员尊享，`+ text ,
					confirmText: '好的',
					success: function (res) {
							if (res.confirm) {
								that.$tools.navigateTo({
									url: url_text
								});
							}
						}
				})
				return
			}
			// 开通会员做处理
			if(url == '/pagesC/member/index'){
				if(this.userInfo.level>0){
					this.$tools.navigateTo({
						url: '/pagesC/member/upgrades_renewals/index'
					});
				}else{
					this.$tools.navigateTo({
						url: '/pagesC/member/index'
					});
				}
			}else{
				// 传递标题
				uni.navigateTo({ 
					url: url+'?id='+id + `&title=${item.title}&concert=${item.concert}&pageImage=${item.pageImage}`
				})
			}
		},
	}
};
</script>

<style lang="scss" scoped>
	.home-notice{
		width: 680rpx;
		overflow: hidden;
		position: relative;
		&-image{
			position: absolute;
			width: 60rpx;
			height: 60rpx;
		}
		::v-deep .u-notice-box{
			margin-left: 60rpx;
			width: 400rpx;
		}
		::v-deep .u-notice-bar{
			padding: 0 24rpx !important;
			width: 89%;
		}
		::v-deep .u-notice-text{
			margin-left: 30rpx;
			font-size: 36rpx !important;
		}
	}
	.overhide{
		overflow: hidden;
	}
.home {
	flex: 1;
	position: relative;
	.bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// overflow: hidden;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5) ;
		display: flex;
		justify-content: center;
		align-items: center;
		.merber_pass{
			// position: absolute;
			// top: 0;
			// bottom: 0;
			// left: 0;
			// right: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// z-index: 22;
			.img_merber_pass{
				width: 623rpx;
				height: 617rpx;
				background-size: 623rpx 617rpx;
				position: relative;
				display: flex;
				justify-content: center;
				.btn_click_pass{
					position: absolute;
					z-index: 23;
					width: 278rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					font-size: 30rpx;
					border-radius:30rpx;
					bottom: 58rpx;
				}
			}
		}
		.gift_box{
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: all 2s; 
			display: flex;
			flex-direction: column;
			align-items: center;
			.gift{
				width: 529rpx;
				height: 672rpx;
				background-size: 529rpx 672rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				color: #D70E08;
				font-weight: bold;
				font-size: 36rpx;
				.one{
					font-size: 27rpx;
					margin-top: 56rpx;
				}
				.top_one{
					margin-top: 75rpx;
				}
				.two{
					margin-top: 30rpx;
				}
				.three{
					margin-top: 10rpx;
				}
				.four{
					margin-top: 87rpx;
				}
				.four1{
					margin-top: 85rpx;
				}
				.five{
					margin-top: 10rpx;
				}
				.six{
					margin:  0 auto;
					margin-top: 60rpx;
					width: 72%;
					text-align: center;
				}
				.getRedPacketBtn{
					position: absolute;
					width: 420px;
					height: 81rpx;
					border-radius: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 23;
					font-size: 31rpx;
					color: #D70E08;
					bottom: 86rpx;
				}
			}
		}
	}
	padding-bottom: 40rpx;
	/* #ifdef H5 */
	padding-bottom: 140rpx;
	/* #endif */
	&-address {
		&-name {
			width: 60%;
			color: #fff;
			font-size: 28rpx;
		}

		&-switch {
			line-height: 1;
		}
	}
	&-search {
		padding: 28rpx;
	}

	&-banner {
		&-bg {
			width: 100%;
			left: -5%;
			height: 180rpx;
			border-bottom-left-radius: 100%;
			border-bottom-right-radius: 100%;
			z-index: -1;
		}
	}

	&-notice {
		margin: 0 20rpx;
		background-color: #e0ffff;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		&-image {
			width: 60rpx;
		}
	}

	&-grid {
		padding: 0 30rpx;
		&-item {
			width: 33%;
			height: 160rpx;
			position: relative;
		}
		&-img {
			width: 100rpx;
			height: 100rpx;
			max-width: 100rpx;
			max-height: 100rpx;
		}
	}

	&-goods {
		padding: 0 20rpx;
		&-header {
			width: 560rpx;
			margin: 0 auto;
		}

		&-items {
			padding: 30rpx 16rpx 20rpx;
			background: #ffffff;
			border-radius: 34rpx;
			box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.16);

			&-image {
				width: 100%;
				height: 300rpx;
			}

			&-play {
				left: 50%;
				bottom: 50%;
				transform: translate(-50%, 50%);
			}

			&-title {
				line-height: 50rpx;
			}

			&-add {
				margin-right: 20rpx;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: $u-type-primary;
			}

			&-tag {
				// width: 150rpx;
				// height: 110rpx;
				// transform: translateX(20rpx);
				// transform: translate(50%, 50%);
				transform: rotate(45deg);
				top: 0;
				right: 0;
				&-content {
					transform: translate(25%, -30%);
					width: 200rpx;
					height: 50rpx;
					background-color: #db0618;
					box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.1);
				}
			}
		}
	}

	&-segmented-control {
		width: 200rpx;
		height: 50rpx;
		background: #fff;
		border-radius: 40rpx;
		right: 20rpx;
		bottom: 20rpx;
		&-item {
			position: relative;
			z-index: 1;
			color: #000;
			font-size: 24rpx;
			transition: all 0.2s linear;
			&--active {
				color: #fff;
			}
		}

		&-bar {
			width: 50%;
			height: 100%;
			border-radius: 40rpx;
			position: absolute;
			background-color: $u-type-primary;
			z-index: 0;
			transition: all 0.2s linear;
		}
	}
}
</style>