qzw_xcx/pages/index/shop.vue

<template>
	<view class="container">
		<van-skeleton :loading="loading">
			<scroll-view
				style="height: 100vh;"
				class="floor-list"
				:scroll-top="scrollTop"
				scroll-y="true"
				@scroll="scroll"
				:refresher-enabled="false">
				<view class="carousel">
					<swiper indicator-dots circular="true" duration="400">
						<swiper-item class="swiper-item" v-for="(item, index) in datalist.images" :key="index">
							<view @click="shoupicture(item)" class="image-wrapper">
								<image
									:src="pictureUrl + '/uploads/home/store/goods/' + item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url"
									class="loaded"
									mode="aspectFill"
								></image>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<view class="introduce-section">
					<view class="titleLayout">
						<view class="title">{{ datalist.goods_name }}</view>
						<view @tap="shopDetail" style="display: flex;flex-direction: row;">
							<view class="titleRight">
								<view style="font-size: 36upx;color: #D9332E;text-align: right;">{{ datalist.praise }}%</view>
								<view style="color: #606266;font-size: 28upx;">好评率</view>
							</view>
							<view style="display: flex;align-items: center;"><uni-icon size="18" type="arrowright"></uni-icon></view>
						</view>
					</view>
					<view style="color: #909399;padding: 10upx 0 15upx 0;" v-if="datalist.points > 0">现金购买得{{ datalist.points }}圈币</view>
					<view class="titleLayout price-box">
						<view>
							<text class="price-tip">¥</text>
							<text class="price" style="color: #D9332E;">{{ datalist.goods_price }}</text>
							<text class="m-price">¥{{ datalist.goods_marketprice }}</text>
							<text class="price-tip" style="color: #D9332E;" v-if="datalist.goods_storage == 0 || datalist.store_id != store_id || datalist.goods_state != 1">
								已售罄
							</text>
						</view>
						<view>
							<text style="color: #909399">月销售{{ datalist.sale_number }}</text>
						</view>
					</view>
				</view>

				<view class="c-list">
					<view style="display: flex;justify-content: space-between;" class="c-row b-b" @click="toggleSpec">
						<view style="font-size: 32upx;color: #303133;">规则数量选择</view>
						<view><uni-icon size="20" type="arrowright"></uni-icon></view>
					</view>
				</view>
				<!-- 评价 -->
				<view @tap="shopDetail" style="border-bottom: 20rpx solid #F5F5F5;" class="eva-section">
					<view style="display: flex;justify-content: space-between;" class="c-row b-b">
						<view style="font-size: 32upx;color: #303133;">评价</view>
						<view><uni-icon size="20" type="arrowright"></uni-icon></view>
					</view>
				</view>
				<view class="detail-desc">
					<van-tabs v-model="active" @click="onChange">
						<van-tab :name="0" title="详情">
							<view style="padding: 0 32upx;"><rich-text :nodes="datalist.goods_body"></rich-text></view>
						</van-tab>
						<van-tab :name="1" title="常见问题">
							<view style="padding: 0 32upx;">
								
								<rich-text v-if="datalist.issue" :nodes="datalist.issue"></rich-text>
								<view v-else class="noData">暂无相关内容</view>
							</view>
						</van-tab>
					</van-tabs>
				</view>
			</scroll-view>

			<!-- 规格-模态层弹窗 -->
			<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
				<!-- 遮罩层 -->
				<view class="mask"></view>
				<view class="layer attr-content" @click.stop="stopPrevent">
					<view class="a-t">
						<image :src="nuberImg == '' ? firstImg : nuberImg"></image>
						<view class="right">
							<text class="price" style="font-size: 36upx;color: #303133">￥{{ totalprice == 0 ? datalist.goods_price : totalprice }}</text>
							<view v-if="datalist.spec_list.length > 0">
								<view class="selected" v-if="chosename.length > 0">
									<text class="selected-text" v-for="(sItem, sIndex) in chosename" :key="sIndex">
										{{ sItem.value_name }}
									</text>
									X {{ shopnumber }}
								</view>
								<view class="selected" v-else><text class="selected-text">请选择规格数量</text></view>
							</view>
							<view v-else>X {{ shopnumber }}</view>
						</view>
						<view @click="closeCar" style="position: absolute;right: 10%;font-size: 40upx;">x</view>
					</view>
					<view v-for="(item, index) in datalist.spec_list" :key="index" class="attr-list">
						<text>{{ item.spec_name }}</text>
						<view class="item-list">
							<text v-for="(childItem, childIndex) in item.value_list"
								:key="childIndex"
								class="tit"
								:class="{ selected: childItem.selected, disabled: childItem.disabled }"
								@click="selectSpec(index, childItem.value_id, childItem, item, childItem.goods_storage)">
								{{ childItem.value_name }}
							</text>
						</view>
					</view>
					<view class="numberchange">
						<span>数量</span>
						<uninumberbox :max="goods_storage" :value="shopnumber" :min="1" @change="changestorage" />
					</view>
				</view>
			</view>
			
			<View class="page-bottom">
				<van-goods-action>
					<van-goods-action-icon @click="goIndex">
						<template slot="icon" style="width: 40upx;height: 40upx;">
							<image style="width: 100%;height: 100%;" src="/static/bottombtn0101.png"></image>
						</template>
					</van-goods-action-icon>
					<van-goods-action-icon icon="cart-o" @click="openCar"  v-if="cartnumber=='0'"/>
					<van-goods-action-icon icon="cart-o" @click="openCar" :info="cartnumber" v-else/>
					<van-goods-action-icon icon="star-o" v-if="has_collected == 0" @click="toFavorite" />
					<van-goods-action-icon icon="star" v-if="has_collected == 1" icon-class="colored" @click="toFavorite" />
					<van-goods-action-button color="#fff" class="font-text" @click="dianAddCar()" text="加入购物车"/>
					<van-goods-action-button color="#E72028" text="立即购买" @click="dianBuynow()"/>
				</van-goods-action>
			</View>
			<Gobacktop @getop="getop" :bottomtop="2" v-if="isTop" />
			<!-- <unipopup :images="images" :show="ishow"/> -->
		</van-skeleton>
		<view class="home" v-if="isfx" @click="openHome()"><image src="../../static/bottombtn0101.png"></image></view>
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
// import logionDialog from '@/component/loginDialog.vue'
import Gobacktop from '@/component/Gobacktop.vue';
import uninumberbox from '@/component/uinNumber.vue';
import assess from '@/component/assess.vue'; // 评价列表
import uniIcon from '@/component/uni-icon/uni-icon.vue';
import unipopup from '@/component/openpictrue.vue';
export default {
	components: {
		uniIcon,
		assess,
		uninumberbox,
		Gobacktop,
		unipopup
	},
	data() {
		return {
			ishow: false,
			images: '',
			loading: true,
			firstloading: 0,
			isTop: false,
			chosename: [],
			arrayId: [],
			bottomtop: '55upx',
			scopemapId: 0,
			showdialog: false,
			has_collected: false, // 是否收藏
			cartnumber: 0, // 购物车数量
			changnumber: 100,
			ismax: false, // 输入狂禁止数量
			goods_storage: '', // 规格商品参数
			nuberImg: '',
			firstImg: '',
			shopnumber: 1,
			pictureUrl: this.pictureUrl,
			datalist: {},
			store_id: 0, // 酒店id
			goodId: 0, // 商品公共id
			goods_id: 0, // 商品规格id
			windowHeight: 0, // 窗口高度
			iScrolltop: 1,
			active: 0,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			specClass: 'none',
			specSelected: [],
			totalprice: 0,
			firstprice: 0,
			favorite: true,
			shareList: [],
			imgList: [],
			desc: '',
			specList: [],
			onlystoreId: 0, // 总酒店id
			isfx: false
		};
	},
	onLaunch: function() {
		this.active = 1;
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'successlogion'])
	},
	onShow: function() {
		let _this = this;
		this.getshopdetail(); // 获取商品详情
		// this.getNum();
		uni.getSystemInfo({
			success: function(res) {
				_this.windowHeight = res.screenHeight;
				// console.log("屏幕宽度："+res.screenWidth);
				// console.log("屏幕高度："+res.screenHeight);
				// console.log("可使用窗口宽度："+res.windowWidth);
				// console.log("可使用窗口高度："+res.windowHeight);
			}
		});
	},
	async onLoad(options) {
		if (options.isfx) {
			this.isfx = true;
		} else {
			this.isfx = false;
		}
		this.goodId = options.id; // 商品公共id
		this.store_id = options.store_id; // 酒店id
		this.onlystoreId = options.goodId;
		// this.getshopdetail(); // 获取商品详情
		uni.$on('changshow', e => {
			this.changeshow();
		});
	},
	onShareAppMessage(res) {
		uni.showShareMenu({
			withShareTicket: true
		});
		let that = this;
		let id = this.goodId; // 商品Id
		let store_id = this.store_id;
		if (res.from === 'button') {
			// 来自页面内分享按钮
		}
		return {
			title: that.datalist.goods_name,
			path: `/pages/index/shop?id=${id}&store_id=${store_id}`,
			imageUrl: that.nuberImg
		};
	},
	onReady: function() {},
	methods: {
		openHome() {
			uni.switchTab({
				url: `/pages/index/index`
			});
		},
		shoupicture(item) {
			   // 预览图片
			this.images = this.pictureUrl + '/uploads/home/store/goods/' + item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url;   
			uni.previewImage({
				urls: [this.images],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
	
			// this.ishow = true;
		},
		changeshow() {
			this.ishow = false;
		},
		getop() {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(function() {
				this.scrollTop = 0;
			});
			this.isTop = false;
		},

		// 跳转到首页
		goIndex() {
			let id = this.store_id;
			uni.redirectTo({
				url: `/pages/index/hotel?id=${id}`
			});
		},
		// 更改商品数量
		changestorage(e) {
			if (e == this.goods_storage) {
				this.$msg('您选择的数量已超过最大库存数');
				return;
			}
			this.shopnumber = e;
			let firstprice = this.firstprice;
			this.totalprice = firstprice * this.shopnumber;
		},
		// 获取商品详情
		getshopdetail() {
			let params = {};
			params.goods_commonid = this.goodId;
			params.store_id = this.store_id;
			this.request({
				url: '/v2/goods/detail',
				method: 'POST',
				data: params,
				success: res => {
					console.log(res.data.code);
					let { data } = res.data;
					if(res.data.code == 1001){
						this.$msg(res.data.cod);
						setTimeout(function(){uni.navigateBack({delta: 1});},1000)
					}else {
						this.cartnumber = data.cart;
						// this.getNum();
						this.has_collected = data.has_collected;
						let array = data;
						if(array.images){
							array.images.forEach(item => {
								this.firstImg =this.pictureUrl + '/uploads/home/store/goods/' + item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url;
							});
						}
						if (array.spec_list.length == 0) {
							this.datalist = data;
							this.goods_id = data.goods_list[0].goods_id;
							this.goods_storage = data.goods_storage;
						} else {
							array.spec_list[0].value_list.forEach((item, idx) => {
								item.goods_storage = data.goods_list[idx].goods_storage;
							});
							this.datalist = array;
						}
						const regex1 = new RegExp('stlye="" ', 'gi');
						this.datalist.goods_body = this.datalist.goods_body.replace(/\(<img\)/gi, '');
						const regex = new RegExp('<img', 'gi');
						this.datalist.goods_body = this.datalist.goods_body.replace(regex, `<img class="changeimg"`);
						if (this.firstloading == 0) {
							this.loading = false;
						}
						this.firstloading = 1;
					}
				}
			});
		},
		shopDetail() {
			let goodId = this.goodId; // 商品Id
			let store_id = this.store_id;
			uni.navigateTo({
				url: `/pages/index/commemt?goodId=${goodId}&store_id=${store_id}`
			});
		},
		onChange(event) {
			this.active = event.detail.name;
		},
		//规格弹窗开关
		toggleSpec() {
			if (this.hasLogin && this.successlogion) {
				if (this.datalist.store_id != this.store_id || this.datalist.goods_state != 1 || this.datalist.goods_storage < 1) {
					this.$msg('商品已售罄');
					return;
				}
				this.specClass = 'show';
			} else {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				});
			}	
		},
		getNum() {
			this.request({
				url: '/v2/order/cart',
				method: 'post',
				data: {
					store_id: this.store_id,
					page: 1
				},
				success: res => {
					let { data } = res.data;
					var sum = 0;
					data.cart_list.forEach(item => {
						sum = sum + item.goods_num;
					});
					this.cartnumber = sum;
				}
			});
		},
		openCar() {
			if (this.hasLogin && this.successlogion) {
				let store_id = this.store_id;
				uni.navigateTo({
					url: `/pages/index/cart?store_id=${store_id}`
				});
			} else {
				//this.showdialog = true;
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				});
			}
		},
		// 立即购买
		buynow() {
				// if (this.specSelected.length == 0 && this.datalist.spec_list.length == 0) {
				// 	this.specClass = 'show';
				// 	this.specSelected = this.datalist.goods_list;
				// 	return;
				// }
				if (this.specSelected.length == 0 && this.datalist.spec_list.length != 0) {
					this.$msg('请选择规格数量');
				}else{
					let goods = [];
					goods.push({});
					goods[0].goods_id = this.goods_id;
					goods[0].buy_num = this.shopnumber;
					this.request({
						url: '/v1/order/save_og',
						method: 'post',
						data: {
							store_id: this.store_id,
							goods: JSON.stringify(goods)
						},
						success: res => {
							let store = this.store_id;
							let order_id = res.data.data.order_id;
							this.specClass = 'none';
							// this.specSelected = [];
							this.chosename = [];
							uni.navigateTo({
								url: `/pages/index/sureBuy?store=${store}&order_id=${order_id}`
							});
						}
					});
				}
		},
		dianBuynow(){
			if(this.specClass=='show'){
				this.buynow();
			}else{
				this.toggleSpec();
			}
		},
		dianAddCar(){
			if(this.specClass=='show'){
				this.addCar();
			}else{
				this.toggleSpec();
			}
		},
		// 加入购物车
		addCar() {
				// if (this.specSelected.length == 0 && this.datalist.spec_list.length == 0) {
				// 	this.specSelected = this.datalist.goods_list;
				// 	return;
				// }
			if (this.specSelected.length == 0 && this.datalist.spec_list.length != 0) {
				this.$msg('请选择商品规格');
			} else {
				this.request({
					url: '/v2/order/add_cart',
					method: 'POST',
					data: {
						goods_id: this.goods_id,
						goods_num: this.shopnumber
					},
					success: () => {
						this.$msg('商品添加成功');
						this.totalprice=0;//金额清空
						this.specSelected = [];//选择的规格清空
						this.chosename = [];//选择的规格样式清空
						this.shopnumber = 1;//选择的数量清空
						this.getshopdetail();
						this.closeCar();
					}
				});
			}
		},
		
		closeCar() {
			this.specClass = 'none';
		},
		//选择规格
		selectSpec(index, pid, chose, first, goods_storage) {
			let obj = {};

			obj.spec_id = first.spec_id;

			obj.value_name = chose.value_name;

			if (this.datalist.spec_list.length != this.chosename.length) {
				this.chosename.push(obj);
			}

			this.specSelected = [];

			let list = this.datalist.spec_list[index].value_list;
			//设置选中状态
			this.datalist.spec_list[index].value_list.forEach(item => {
				if (item.value_id === pid) {
					this.$set(item, 'selected', true);
				} else {
					this.$set(item, 'selected', false);
				}
			});
			//设置名字
			this.chosename.forEach(items => {
				if (items.spec_id == first.spec_id) {
					items.value_name = chose.value_name;
				}
			});
			let array = [];
			for (let i = 0; i < this.datalist.spec_list.length; i++) {
				for (let j = 0; j < this.datalist.spec_list[i].value_list.length; j++) {
					if (this.datalist.spec_list[i].value_list[j].selected) {
						array.push(this.datalist.spec_list[i].value_list[j].value_id);
					}
				}
			}
			this.arrayId = array;

			if (this.arrayId.length == this.datalist.spec_list.length) {
				this.scopemapId = array.join('_');
				let goodId = this.datalist.spec_map[this.scopemapId]; //
				let items = this.datalist.goods_list[goodId];
				if (items.goods_storage == 0) {
					this.$msg('商品没库存啦');
					this.datalist.spec_list[index].value_list.forEach(item => {
						if (item.value_id === pid) {
							this.$set(item, 'selected', false);
						}
					});
					return;
				}

				items.value_name = chose.value_name;
				this.nuberImg = items.spec_img;
				this.specSelected.push(items);
				this.goods_storage = items.goods_storage;
				this.goods_id = items.goods_id;
				this.firstprice = items.goods_price;
				this.totalprice = items.goods_price * this.shopnumber;
			}
		},
		// 滚动时触发
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop;
			if (e.detail.scrollTop > this.windowHeight) {
				this.iScrolltop = 2;
			} else {
				this.iScrolltop = 1;
			}
			if (e.detail.scrollTop > 250) {
				this.isTop = true;
			} else {
				//当距离小于500时显示回到顶部按钮
				this.isTop = false;
			}
		},

		//收藏
		toFavorite() {
			if (this.hasLogin && this.successlogion) {
				if (this.datalist.store_id != this.store_id || this.datalist.goods_state != 1 || this.datalist.goods_storage < 1) {
					this.$msg('商品已售罄');
					return;
				}
				this.request({
					url: '/v1/favorites/collect',
					method: 'post',
					data: {
						type: 'goods',
						fav_id: this.goodId
					},
					success: res => {
						if (res.data.data.action == 'add') {
							this.$msg('收藏成功');
						} else {
							this.$msg('取消收藏');
						}
						this.getshopdetail();
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				});
			}
		},
		buy() {
			uni.navigateTo({
				url: './sureBuy'
			});
		},
		stopPrevent(){}
	}
};
</script>
<style>
	.noData {
		margin: 15% 0;
		text-align: center;
		color: #999;
	}
	.font-text .van-button__text{
		color: #222 !important;
	}
</style>
<style lang="scss">
page {
	/* background: $page-color-base; */
	/* padding-bottom: 160upx; */
	position: relative;
}
.home {
	position: absolute;
	width: 60upx;
	height: 60upx;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 0 3upx #333333;
	text-align: center;
	top: 100upx;
	z-index: 999;
	left: 0;
}
.home image {
	width: 40upx;
	height: 40upx;
	padding-top: 8rpx;
}
.icon-you {
	font-size: 28upx + 2upx;
	color: #888;
}
.carousel {
	height: 722upx;
	position: relative;
	swiper {
		height: 100%;
	}
	.image-wrapper {
		width: 100%;
		height: 100%;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.titleLayout {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20upx;
}
/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 20upx 30upx;

	.title {
		font-size: 36upx;
		color: #303133;
		height: 50upx;
		line-height: 50upx;
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.titleRight {
		border-left: 1px solid #f5f5f5;
		padding-left: 32upx;
	}
	.price-box {
		display: flex;
		align-items: baseline;
		height: 64upx;
		padding: 10upx 0;
		font-size: 26upx;
		color: #fa436a;
	}
	.price {
		font-size: $font-lg + 2upx;
	}
	.m-price {
		margin: 0 12upx;
		color: #909399;
		text-decoration: line-through;
	}
	.coupon-tip {
		align-items: center;
		padding: 4upx 10upx;
		background: #fa436a;
		font-size: 24upx;
		color: #fff;
		border-radius: 6upx;
		line-height: 1;
		transform: translateY(-4upx);
	}
	.bot-row {
		display: flex;
		align-items: center;
		height: 50upx;
		font-size: 24upx;
		color: #909399;
		text {
			flex: 1;
		}
	}
}
/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: #606266;
	background: linear-gradient(left, #fdf5f6, #fbebf6);
	padding: 12upx 30upx;
	.share-icon {
		display: flex;
		align-items: center;
		width: 70upx;
		height: 30upx;
		line-height: 1;
		border: 1px solid #fa436a;
		border-radius: 4upx;
		position: relative;
		overflow: hidden;
		font-size: 22upx;
		color: #fa436a;
		&:after {
			content: '';
			width: 50upx;
			height: 50upx;
			border-radius: 50%;
			left: -20upx;
			top: -12upx;
			position: absolute;
			background: #fa436a;
		}
	}
	.icon-xingxing {
		position: relative;
		z-index: 1;
		font-size: 24upx;
		margin-left: 2upx;
		margin-right: 10upx;
		color: #fff;
		line-height: 1;
	}
	.tit {
		font-size: 28upx;
		margin-left: 10upx;
	}
	.icon-bangzhu1 {
		padding: 10upx;
		font-size: 30upx;
		line-height: 1;
	}
	.share-btn {
		flex: 1;
		text-align: right;
		font-size: 24upx;
		color: #fa436a;
	}
	.icon-you {
		font-size: 24upx;
		margin-left: 4upx;
		color: #fa436a;
	}
}

.c-list {
	font-size: 24upx + 2upx;
	color: #606266;
	background: #fff;
	border-top: 20upx solid #f5f5f5;
	border-bottom: 20upx solid #f5f5f5;
	.c-row {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		position: relative;
	}
	.tit {
		width: 140upx;
	}
	.con {
		flex: 1;
		color: #303133;
		.selected-text {
			margin-right: 10upx;
		}
	}
	.bz-list {
		height: 40upx;
		font-size: 24upx+2upx;
		color: #303133;
		text {
			display: inline-block;
			margin-right: 30upx;
		}
	}
	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #303133;
		line-height: 40upx;
	}
	.red {
		color: #fa436a;
	}
}

/* 评价 */
.eva-section {
	display: flex;
	flex-direction: column;
	padding: 20upx 30upx;
	background: #fff;
	/* margin-top: 16upx; */
	.e-header {
		display: flex;
		align-items: center;
		height: 70upx;
		font-size: 24upx + 2upx;
		color: #909399;
		.tit {
			font-size: 28upx + 2upx;
			color: #303133;
			margin-right: 4upx;
		}
		.tip {
			flex: 1;
			text-align: right;
		}
		.icon-you {
			margin-left: 10upx;
		}
	}
}
.eva-box {
	display: flex;
	padding: 20upx 0;
	.portrait {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		border-radius: 100px;
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 28upx;
		color: #606266;
		padding-left: 26upx;
		.con {
			font-size: 28upx;
			color: #303133;
			padding: 20upx 0;
		}
		.bot {
			display: flex;
			justify-content: space-between;
			font-size: 24upx;
			color: #909399;
		}
	}
}
/*  详情 */
.detail-desc {
	background: #fff;
	margin-top: 16upx;
	margin-bottom: 135rpx;
	width: 100%;
	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: 28upx + 2upx;
		color: #303133;
		position: relative;

		text {
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}
		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
}

/* 规格选择弹窗 */
.attr-content {
	padding: 10upx 30upx;
	.a-t {
		display: flex;
		image {
			width: 170upx;
			height: 170upx;
			flex-shrink: 0;
			margin-top: -40upx;
			border-radius: 8upx;
		}
		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24upx;
			font-size: 24upx + 2upx;
			color: #606266;
			line-height: 42upx;
			justify-content: space-around;
			.price {
				font-size: $font-lg;
				color: #d9332e;
				margin-bottom: 10upx;
			}
			.selected-text {
				margin-right: 10upx;
			}
		}
	}
	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: 28upx + 2upx;
		color: #606266;
		padding-top: 30upx;
		padding-left: 10upx;
	}
	.item-list {
		padding: 20upx 0 0;
		display: flex;
		flex-wrap: wrap;
		text {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			margin-right: 20upx;
			margin-bottom: 20upx;
			border-radius: 5upx;
			border:1px solid #f1f1f1;
			min-width: 60upx;
			height: 60upx;
			padding: 0 20upx;
			font-size: 28upx;
			color: #303133;
		}
		.selected {
			border:1px solid #d9251c;
			color: #d9251c;
		}

		.disabled {
			color: #999;
			background: rgba(245, 245, 245, 0.5);
		}
	}
}

/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 100upx;
	z-index: 99;

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 90%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 140upx;
		width: 100%;
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;
		.btn {
			height: 66upx;
			line-height: 66upx;
			border-radius: 100upx;
			background: #fa436a;
			font-size: 28upx + 2upx;
			color: #fff;
			margin: 30upx auto 20upx;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		90% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
}
.colored {
	color: red;
}
.van-sticky {
	/* z-index: 0!important; */
}
/* 详情固定 */
.activeColor {
	/* background: #fff!important; */
	position: fixed;
	background-color: #fff;
	top: 0upx;
	z-index: 99;
	margin-top: 0;
}
.numberchange {
	padding-top: 48px;
	overflow: hidden;
	clear: both;
	padding-right: 59rpx;
	padding-bottom: 50rpx;
}
.uni-numbox {
	float: right;
}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 80upx;
	z-index: 99;
	background: rgba(255, 255, 255, 0.9);
	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #606266;
		width: 96upx;
		height: 80upx;
		.yticon {
			font-size: 40upx;
			line-height: 48upx;
			color: #909399;
		}
		&.active,
		&.active .yticon {
			color: #fa436a;
		}
		.icon-fenxiang2 {
			font-size: 42upx;
			transform: translateY(-2upx);
		}
		.icon-shoucang {
			font-size: 46upx;
		}
	}
	.action-btn-group {
		display: flex;
		height: 76upx;
		border-radius: 100px;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
		margin-left: 20upx;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28upx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 100%;
			font-size: 28upx;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
}
.van-goods-action-button--last {
	border-radius: none !important;
	--button-border-radius: none !important;
}
.van-goods-action-button--first {
	border-radius: none !important;
	--button-border-radius: none !important;
}
.changeimg {
	width: 100%;
	height: auto !important;
	display: block;
	text-align: center;
}
</style>