caimei-applets-mcare/pages/goods/product.vue

<template>
	<view
		class="product "
		:style="{
			paddingBottom: userIdentity == 1 && userIdentity == 3 ? '0rpx' : '188rpx',
			paddingTop: CustomBar + 'px'
		}"
	>
		<custom-p
			v-if="isHeaderPoduct"
			:systeminfo="systeminfo"
			:navbar-data="nvabarData"
			:headerBtnPosi="headerBtnPosi"
			:headerColor="headerColor"
			:type="isShareType"
			:page="backPage"
		>
		</custom-p>
		<tui-skeleton
			v-if="!skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template v-else>
			<view class="container-product tui-skeleton">
				<view class="container-product-main">
					<view class="product-top">
						<view class="banner-section">
							<!-- </view> -->
							<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode">
								<swiper
									class="banner tui-banner tui-skeleton-rect"
									@change="swiperChange"
									:duration="800"
									:autoplay="false"
									:circular="true"
								>
									<swiper-item v-for="(item, index) in productImage" :key="index" class="banner-item">
										<image :src="item" @click="previewImg(index)" class="product-img" />
									</swiper-item>
								</swiper>
								<view class="swiper__dots-box">
									<tui-tag
										padding="12rpx 24rpx"
										type="translucent"
										shape="circleLeft"
										size="32rpx"
										:scaleMultiple="0.82"
										originRight
									>
										{{ current + 1 }}/{{ productImage && productImage.length }}
									</tui-tag>
								</view>
							</uni-swiper-dot>
						</view>
						<view class="product-wrap clearfix">
							<view class="wrap-top">
								<view class="wrap-top-price"> <cm-price v-if="skeletonShow" :product="product" /> </view>
								<view class="p-title tui-skeleton-fillet">
									<view class="p-title-name">
										{{ product.name == undefined ? '' : product.name }}
									</view>
									<button open-type="share" class="p-title-share tui-share-position" @tap="onShare">
										<view class=""><text class="iconfont icon-fenxiang1"></text></view>
										<view class="">分享</view>
									</button>
								</view>
								<view class="wrap-label" v-if="product.tagsList && product.tagsList.length > 0">
									<view
										class="label-a tui-skeleton-fillet"
										v-for="(label, index) in product.tagsList"
										:key="index"
										>{{ label }}</view
									>
								</view>
								<view class="product-seve" v-if="hasLogin">
									<text class="iconfont icon-dui tui-skeleton-rect"
										><text class="text">无忧退货</text></text
									>
									<text class="iconfont icon-dui tui-skeleton-rect"
										><text class="text">快速退款</text></text
									>
									<text class="iconfont icon-dui tui-skeleton-rect"
										><text class="text">正品保证</text></text
									>
								</view>
							</view>
						</view>
					</view>
					<view class="product-item-none" v-if="goodsData.disabled">
						<image class="none-image" :src="staticUrl + 'icon_product_none@2x.png'" mode=""></image>
					</view>
					<!-- 选择规格 -->
					<view class="product-parameter" @click="showPopup(3)">
						<text class="title">选择：</text> <text class="name">共{{ skusCount }}种规格可选</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
					<!-- 参数 -->
					<view class="product-parameter" @click="showPopup(0)">
						<text class="title">参数：</text> <text class="name">品牌 分类...</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<!-- 商品详情 -->
				<view>
					<view class="product-details product-details0">
						<view class="title"> <view class="title-tab">商品详情</view> </view>
						<view class="content tui-banner product-rich-text tui-skeleton-rect">
							<template v-if="product.productDetail.detailInfo">
								<mp-html :content="html" :tag-style="tagStyle" />
							</template>
							<view class="product-rich-text-none" v-else>暂无商品信息</view>
						</view>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="menu">
					<view class="bottom-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
						<view class="bottom-le">
							<view class="item-bt" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">
								<image :src="staticUrl + 'icon_product_home@2x.png'"></image> <text>首页</text>
							</view>
							<view class="item-bt" @click="handleCollection">
								<image
									:src="
										collectionType
											? staticUrl + 'icon_collection@2x.png'
											: staticUrl + 'icon_collection_none@2x.png'
									"
								></image>
								<text>{{ collectionType ? '已收藏' : '收藏' }}</text>
							</view>
							<view class="item-bt" @click="buyProductCart">
								<image :src="staticUrl + 'icon_product_cart@2x.png'"></image> <text>购物车</text>
								<text
									v-if="hasLogin && bottomCartNumber > 0"
									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
									:class="[bottomCartNumber < 10 ? 'goleft' : '']"
								>
									{{ bottomCartNumber >= 100 ? '99+' : bottomCartNumber }}
								</text>
								<view class="animation-num" :class="isAnimation ? 'animation' : 'restion'">+1</view>
							</view>
						</view>
						<view class="bottom-ri">
							<button
								:disabled="goodsData.disabled"
								class="btn btn-cart"
								:class="[goodsData.disabled ? 'disabled' : '']"
								@tap.stop="btnGetConfirm('add')"
							>
								加入购物车
							</button>
							<button
								:disabled="goodsData.disabled"
								class="btn btn-bay"
								:class="[goodsData.disabled ? 'disabled' : '']"
								@tap.stop="btnGetConfirm('buy')"
							>
								立即购买
							</button>
						</view>
					</view>
				</view>
				<!-- 侧边 -->
				<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
			</view>
		</template>
		<!-- 商品参数 -->
		<cm-prams-popup v-if="popupShow0" :popupShow="popupShow0" :product="product"></cm-prams-popup>
		<!-- 选择规格弹窗 -->
		<cm-unit-popup
			v-if="popupShow3"
			:popupShow="popupShow3"
			:skuProduct="skuProduct"
			:productCoupon="productCoupon"
			:type="unitPopupType"
			:btnType="btnType"
			:goodsData="goodsData"
			@buyConfirm="handleBuyConfirm"
			@skuClick="handleSkuClick"
		></cm-unit-popup>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import customP from './components/cm-header.vue' //自定义导航
import cmPrice from './components/cm-price.vue' //价格显示
import cmPramsPopup from './components/cm-prams-popup.vue'
import cmUnitPopup from './components/cm-unit-popup.vue'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import proMixins from './mixins/proMixins.js'
var isPreviewImg
export default {
	mixins: [proMixins],
	components: {
		customP,
		cmPrice,
		cmPramsPopup,
		cmUnitPopup
	},
	data() {
		return {
			staticUrl:this.global.staticUrl,
			html: '',
			mode: 'round',
			iconClass: 'icon-aixin',
			iconColor: '#ff9100',
			specClass: '', // 规格弹窗css类，控制开关动画
			isScrollTop: false,
			current: 0,
			isShareType: '',
			isHeaderPoduct: false,
			navbarFiexd: 'none',
			isAnimation: false,
			skeletonShow: false,
			disabled: false,
			userId: 0,
			productId: 0,
			skusCount: 0, // 规格种类
			userIdentity: 0, // 用户类型
			goodsData: {}, // 自定义数据
			product: {}, //采美
			productImage: [],
			number: 0,
			headerBtnPosi: this.setHeaderBtnPosi(), // 获取设备顶部胶囊高度
			systeminfo: this.setSysteminfo(), // 获取设备信息
			windowHeight: '',
			headerColor: false,
			backPage: 1,
			nvabarData: {
				// 顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
				title: '商品详情' // 导航栏 中间的标题
			},
			CustomBar: this.CustomBar, // 顶部导航栏高度
			popupShow0: false, // 参数弹窗
			popupShow3: false, // 购买弹窗
			winHeight: '',
			currentTab: 0,
			bottomCartNumber: 0,
			isPreviewImage: false,
			opentype: '',
			collectionType: false,
			contentModalText: '', //操作文字提示语句
			modal: false,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '去升级',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
					},
					plain: false
				}
			],
			showModal: false,
			unitPopupType: 0 // 选择类型 1 点击加入购物车  立即购买  2：点击规格选择
		}
	},
	computed: {
		...mapState(['hasLogin', 'clubType', 'identity', 'isIphoneX'])
	},
	filters: {},
	onLoad(option) {
		this.productId = this.addParams.productId = option.id //获取商品ID
		this.opentype = option.open
		this.isShareType = option.type
		this.isHeaderPoduct = true
		if (option.page == 2) {
			this.backPage = option.page
		}
		this.getWinHeight()
	},
	onReady() {
		if (this.opentype == 'caimei') {
			// 跳转到资料详情
			uni.showLoading({
				title: '加载中'
			})
		}
		console.log('是iPhoneX', this.isIphoneX)
	},
	methods: {
		async initGetStotage() {
			// 初始化
			const userInfo = await this.$api.getStorage()
			this.userId = this.addParams.userId = userInfo.userId ? userInfo.userId : 0
			// this.userIdentity = userInfo.userIdentity ? userInfo.userIdentity : 0
			if (isPreviewImg) {
				isPreviewImg = false
				return
			} else {
				this.getProductDetils()
			}
		},
		async getProductDetils() {
			// 初始化商品详情查询
			try{
				const res = await this.ProductService.getProductDetils({productId: this.productId ,userId:this.userId})
				const data = res.data
				const dataStr = JSON.stringify(data)
				this.product = JSON.parse(dataStr)
				this.skuProduct = JSON.parse(dataStr)
				this.skusCount = this.product.organizeSkus.length
				this.addParams.skuId = this.product.skuId
				// 判断是否显示已收藏
				if (this.product.userLike && this.product.userLike == 1) {
					this.collectionType = true
				} else {
					this.collectionType = false
				}
				this.html = this.adaptRichTextImg(this.product)
				//处理商品图片列表
				this.product.imageList.forEach(item => {
					this.productImage.push(item.image)
				})
				//处理下架商品和售罄商品
				if (this.product.validFlag == 3) {
					this.goodsData.disabledText = '下架'
					this.goodsData.disabled = true
				}
				if (this.hasLogin) {
					this.ProductCartNumber()
				}
				this.skeletonShow = true
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		adaptRichTextImg(product) {
			// 商品详情
			let defaulHtml = '<div style="text-align: center;color:#333333;">暂无内容</div>'
			let html = product.productDetail ? this.$api.adaptRichTextImg(product.productDetail.detailInfo) : defaulHtml
			return html
		},
		handleCollection() {
			// 收藏
			if (this.hasLogin) {
				this.ProductService.getProductUserLike({
					userId: this.userId,
					productId: this.product.productId
				})
					.then(response => {
						this.collectionType = !this.collectionType
						this.$util.msg(response.data, 1500, true, 'success')
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			} else {
				this.$api.navigateTo('/pages/login/login')
			}
		},
		showPopup(index) {
			switch (index) {
				case 0:
					this.popupShow0 = true
					break
				case 3:
					this.popupShow3 = true
					this.unitPopupType = 2
					break
			}
		},
		hidePopup(index) {
			switch (index) {
				case 0:
					this.popupShow0 = false
					break
				case 3:
					this.popupShow3 = false
					break
			}
		},
		async ProductCartNumber() {
			// 获取用户购物车储量
			try {
			    const res = await this.OrderService.ShoppingCartCount({ userId: this.userId })
			    this.bottomCartNumber = res.data
			} catch (error) {
			    console.log('获取购物车数量异常')
			}
		},
		hideMobel() {
			this.modal = false
		},
		handleClick(e) {
			//个人机构跳转升级页面
			if (e.index == 1) {
				this.$api.navigateTo('/pages/login/apply')
			}
			this.modal = false
		},
		swiperChange(e) {
			//顶部商品图片切换
			const index = e.detail.current
			this.current = index
		},
		previewImg1(url) {
			let mentuzArray = []
			mentuzArray.push(url)
			uni.previewImage({
				urls: mentuzArray,
				current: 0
			})
		},
		previewImg(index) {
			//顶部商品图片预览
			isPreviewImg = true
			let previewUrls = this.productImage
			uni.previewImage({
				current: index, //图片索引
				urls: previewUrls, //必须是http图片，本地图片无效
				longPressActions: ''
			})
		},
		handleContact(e) {
			//跳转小程序客服
			console.log(e.detail.path)
			console.log(e.detail.query)
		},
		buyProductCart() {
			//底部购物车按钮点击
			if (this.hasLogin) {
				this.$api.navigateTo('/pages/goods/cart')
			} else {
				this.$api.navigateTo('/pages/login/login?type=1')
			}
		},
		btnGetConfirm(type) {
			//加入购物车&&立即购买点击
			if (this.hasLogin) {
				this.btnType = type
				this.popupShow3 = true
				this.unitPopupType = 1
			} else {
				this.$api.navigateTo('/pages/login/login?type=1')
			}
		},
		setHeaderBtnPosi() {
			// 获得胶囊按钮位置信息
			let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
			return headerBtnPosi
		},
		setSysteminfo() {
			let systeminfo
			uni.getSystemInfo({
				// 获取设备信息
				success: res => {
					systeminfo = res
				}
			})
			return systeminfo
		},
		goIndex() {
			//商城首页
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			})
		},
		discard() {
			//丢弃
		},
		onShare(res) {
			//分享转发
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}
			return {
				title: `${this.product.name}`,
				path: `pages/goods/product?type=share&id=${this.productId}`,
				imageUrl: `${this.productImage[0]}`
			}
		},
		getWinHeight() {
			this.winHeight = wx.getSystemInfoSync().windowHeight
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		const { scrollTop } = e
		if (e.scrollTop > 60) {
			this.headerColor = true
			this.navbarFiexd = 'fixed'
			this.nvabarData = {
				showCapsule: 1,
				title: '商品详情'
			}
		} else {
			this.headerColor = false
			this.navbarFiexd = 'none'
			this.nvabarData = {
				showCapsule: 1,
				title: '商品详情'
			}
		}
		if (e.scrollTop > 700) {
			this.isScrollTop = true
		} else {
			this.isScrollTop = false
		}
	},
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: `${this.product.name}`,
			path: `pages/goods/product?type=share&id=${this.productId}`,
			imageUrl: `${this.productImage[0]}`
		}
	},
	onShow() {
		wxLogin.wxLoginAuthorize()
		// 是否开启图片预览 true 不刷新调用接口 false刷新调用接口
		if (!this.isPreviewImage) {
			this.initGetStotage()
		}
		this.isPreviewImage = false
	}
}
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.banner-section {
	width: 100%;
	height: 750rpx;
	position: relative;
}
.banner {
	width: 100%;
	height: 750rpx;
	.product-img {
		width: 750rpx;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.banner-item {
		position: relative;
	}
}
.swiper__dots-box {
	position: absolute;
	color: #fff;
	bottom: 30rpx;
	right: 0;
}
.product-wrap {
	width: 100%;
	height: auto;
	padding: 24rpx 0 0 0;
	background-color: #ffffff;
	border-bottom: 20rpx solid #f7f7f7;
	.wrap-top {
		width: 702rpx;
		padding: 0 24rpx;
		height: auto;
		float: left;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f8f8f8;
		&.none {
			.p-title {
				color: #999999;
			}
		}
		.p-title {
			width: 100%;
			height: auto;
			float: left;
			position: relative;
			.p-title-name {
				width: 602rpx;
				height: auto;
				float: left;
				line-height: 48rpx;
				font-size: $font-size-28;
				color: $text-color;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				&.indent {
					text-indent: 95rpx;
				}
			}
			.p-title-share {
				width: 96rpx;
				height: 96rpx;
				position: absolute;
				right: 0;
				text-align: center;
				color: #999999;
				font-size: $font-size-24;
				box-sizing: border-box;
				display: block;
				background: transparent;
				border-radius: 0;
				border: 0;
				margin: 0;
				padding: 8rpx 0;
				z-index: 20;
				.icon-fenxiang1 {
					font-size: $font-size-34;
				}
			}
			.tui-share-btn::after {
				border: 0;
			}
		}
		.wrap-main-text {
			line-height: 56rpx;
			color: #ff2a2a;
			font-size: $font-size-26;
			display: block;
			float: left;
			font-weight: normal;
		}
		.wrap-main-none {
			display: block;
			width: 256rpx;
			height: 44rpx;
			padding-left: 20rpx;
			border-radius: 11rpx;
			background: $btn-confirm;
			float: right;
			line-height: 44rpx;
			color: #ffffff;
			text-align: center;
			font-size: $font-size-24;
		}

		.p-price-none {
			height: 44rpx;
			line-height: 44rpx;
			float: left;
			font-size: $font-size-24;
			color: #666;
			text-decoration: line-through;
			margin-left: 8rpx;
		}
		.p-minBuy {
			height: 44rpx;
			line-height: 44rpx;
			float: right;
			padding: 0 18rpx;
			border-radius: 22rpx;
			background-color: #f7f7f7;
			color: #7f7f7f;
			font-size: 24rpx;
			text-align: center;
			.min-text {
				margin: 0 6rpx;
			}
		}
		.p-login {
			height: 56rpx;
			line-height: 56rpx;
			color: $color-system;
			font-size: $font-size-24;
			&.grade {
				.price-left {
					float: left;
					.none {
						display: block;
						font-size: $font-size-20;
						line-height: 48rpx;
						color: #4a4b54;
						float: left;
						font-weight: bold;
						margin-left: 5rpx;
						text {
							letter-spacing: 4rpx;
							font-size: $font-size-32;
						}
					}
				}
			}
			.p-no {
				float: left;
				margin-right: 5rpx;
				font-size: $font-size-28;
				color: $text-color;
			}
			.p-login-btn {
				display: block;
				height: 44rpx;
				padding: 0 10rpx 0 20rpx;
				border-radius: 11rpx;
				background: $btn-confirm;
				float: right;
				line-height: 44rpx;
				color: #ffffff;
				text-align: center;
				font-size: $font-size-24;
			}
		}
	}
	.wrap-label {
		float: left;
		width: 85%;
		box-sizing: border-box;
		.label-a {
			padding: 0 18rpx;
			line-height: 32rpx;
			font-size: $font-size-20;
			color: $color-system;
			text-align: center;
			border-radius: 6rpx;
			background: #fff8ef;
			margin: 0 20rpx 15rpx 0;
			display: inline-block;
		}
	}
	.wrap-top-price {
		float: left;
		width: 100%;
		box-sizing: border-box;
		.wrap-main-item {
			width: 100%;
			height: 56rpx;
			.p-price {
				height: 56rpx;
				line-height: 56rpx;
				float: left;
				color: #ff2a2a;
				font-weight: bold;
				&.none {
					text-decoration: line-through;
					color: #999999;
					font-weight: normal;
				}
				.txt {
					margin: 0 2rpx;
				}
				.txt.sm {
					font-size: $font-size-26;
				}
				.txt.big {
					font-size: $font-size-34;
				}
			}
		}
		.floor-item-btn {
			float: right;
			height: 40rpx;
			margin-top: 8rpx;
			margin-left: 10rpx;
			.btn {
				line-height: 40rpx;
				padding: 0 20rpx;
				height: 40rpx;
				background: $btn-confirm;
				color: #ffffff;
				font-size: $font-size-20;
				border-radius: 4rpx;
			}
		}
	}
	.wrap-info {
		float: left;
		width: 702rpx;
		padding: 24rpx 24rpx 0 24rpx;
		border-bottom: 1px solid #f8f8f8;
		.info-viewT {
			width: 100%;
			min-height: 40rpx;
			font-size: $font-size-28;
			color: $text-color;
			line-height: 40rpx;
			text-align: left;
			&.none {
				color: #999999;
			}
			.info-viewL {
				min-width: 350rpx;
				float: left;
				margin-bottom: 24rpx;
			}
			.info-viewR {
				min-width: 352rpx;
				float: left;
				margin-bottom: 24rpx;
			}
		}
		.info-viewB {
			width: 100%;
			height: auto;
		}
		.info-f {
			width: 50%;
			float: left;
			font-size: $font-size-28;
			color: $text-color;
			line-height: 40rpx;
			margin-bottom: 24rpx;
			text-align: left;
		}
	}
}
.product-seve {
	width: 100%;
	height: 60rpx;
	background-color: #ffffff;
	position: relative;
	display: flex;
	line-height: 60rpx;
	.label {
		font-size: $font-size-28;
		color: #333333;
	}
	.iconfont {
		color: #f3b574;
		margin-right: 20rpx;
		font-size: $font-size-22;
	}
	.text {
		font-size: $font-size-22;
		color: #f3b574;
		margin-left: 10rpx;
	}
}
.product-item-none {
	min-height: 348rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 20rpx solid #f7f7f7;
	box-sizing: border-box;
	padding: 40rpx 0;
	.none-image {
		width: 386rpx;
		height: 286rpx;
	}
}
.product-supporting {
	width: 100%;
	height: 274rpx;
	box-sizing: border-box;
	padding: 30rpx 24rpx;
	background-color: #ffffff;
	border-bottom: 20rpx solid #f7f7f7;
	.product-supporting-title {
		width: 100%;
		height: 40rpx;
		text-align: left;
		line-height: 40rpx;
		font-size: $font-size-28;
		color: #333333;
	}
	.product-supporting-list {
		width: 100%;
		height: 154rpx;
		box-sizing: border-box;
		padding: 13rpx 0;
		position: relative;
		.icon-xiangyou {
			line-height: 154rpx;
			display: inline-block;
			position: absolute;
			width: 80rpx;
			top: 0;
			right: 0;
			color: #b2b2b2;
			text-align: right;
		}
		.list {
			width: 128rpx;
			height: 128rpx;
			margin-right: 24rpx;
			float: left;
			border: 1px solid #e1e1e1;
			border-radius: 8rpx;
			.list-image {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 8rpx;
			}
		}
	}
}
.product-parameter {
	width: 702rpx;
	height: 90rpx;
	padding: 0 24rpx;
	background-color: #ffffff;
	position: relative;
	border-bottom: 20rpx solid #f7f7f7;
	&.coupon {
		.title {
			color: #f94b4b;
		}
		.icon-xiangyou {
			color: #f94b4b;
		}
		.coupon {
			float: right;
			box-sizing: border-box;
			padding: 29rpx 0;
			padding-right: 35rpx;
			.tags {
				height: 32rpx;
				box-sizing: border-box;
				border-radius: 8rpx;
				background-color: #fff1eb;
				line-height: 28rpx;
				color: #f94b4b;
				text-align: center;
				display: inline-block;
				padding: 0 10rpx;
				font-size: $font-size-20;
				border: 1px solid #f94b4b;
				float: right;
				margin: 0 6rpx;
			}
		}
	}
	.title {
		line-height: 90rpx;
		display: inline-block;
		float: left;
		font-size: $font-size-28;
		color: #666666;
	}
	.name {
		line-height: 90rpx;
		display: inline-block;
		float: left;
		font-size: $font-size-28;
		color: $text-color;
		padding-right: 48rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;
	}
	.icon-xiangyou {
		line-height: 90rpx;
		display: inline-block;
		position: absolute;
		width: 48rpx;
		top: 0;
		right: 0;
		color: #b2b2b2;
	}
}
.product-details {
	width: 100%;
	background: #ffffff;
	border-bottom: 20rpx solid #f7f7f7;
	&.recommend {
		background-color: #f7f7f7;
		border-bottom: none;
		.title {
			.title-tab {
				background-color: #f7f7f7;
				color: $text-color;
			}
		}
	}
	.product-details-image {
		width: 100%;
		min-height: 856rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		.product-details-table {
			width: 100%;
			min-height: 160rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			.ladder-tr {
				display: flex;
				width: 100%;
				justify-content: center;
				height: 80rpx;
				align-items: center;
				border-bottom: 1px solid #e1e1e1;
				&:last-child {
					border-bottom: none;
				}
				.ladder-item-td {
					height: 80rpx;
					justify-content: center;
					text-align: center;
					box-sizing: border-box;
					padding: 10rpx;
					float: left;
					.te-text {
						line-height: 28rpx;
						font-size: $font-size-24;
						text-overflow: ellipsis;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						color: #999999;
						&.last {
							width: 60%;
							float: left;
						}
					}
					.te-copy {
						width: 40%;
						float: right;
						font-size: $font-size-24;
						padding-top: 10rpx;
						.clipboard {
							width: 84rpx;
							height: 36rpx;
							background: #4688fa;
							text-align: center;
							font-size: $font-size-24;
							color: #ffffff;
							border-radius: 18rpx;
							line-height: 36rpx;
							display: inline-block;
						}
					}
					&.th {
						display: flex;
						height: 80rpx;
						align-items: center;
						line-height: 80rpx;
						font-size: 26rpx;
						color: #666;
					}
					&:nth-child(1) {
						width: 25%;
						border-right: 1px solid #e1e1e1;
					}
					&:nth-child(2) {
						width: 35%;
						border-right: 1px solid #e1e1e1;
					}
					&:nth-child(3) {
						width: 40%;
					}
				}
			}
		}
		.qualificationImg-image {
			width: 100%;
			height: 856rpx;
			display: block;
		}
	}
	.product-rich-text-none {
		box-sizing: border-box;
		padding: 0 24rpx;
		text-align: left;
		font-size: 24rpx;
		color: #999999;
		line-height: 60rpx;
		&.bold {
			font-weight: bold;
			color: #333333;
		}
	}
	.content-none {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: left;
		font-size: $font-size-26;
		color: #999999;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.title {
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
		.title-tab {
			width: 100%;
			height: 100rpx;
			background: #fff;
			z-index: 10;
			font-size: $font-size-30;
			text-align: left;
			color: $text-color;
			line-height: 100rpx;
			font-weight: 600;
		}
		.title-msg {
			width: 100%;
			height: 236rpx;
			padding: 18rpx;
			background-color: rgba(225, 86, 22, 0.1);
			color: $color-system;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.tit {
				line-height: 46rpx;
				font-size: $font-size-24;
				text-align: left;
			}
			.txt {
				line-height: 38rpx;
				font-size: $font-size-20;
				text-align: justify;
			}
		}
	}
	.content {
		width: 100%;
		background-color: #ffffff;
	}
}
.isLower {
	width: 100%;
	height: 116rpx;
	line-height: 116rpx;
	text-align: center;
	color: #000000;
	font-size: $font-size-32;
	font-weight: bold;
}
.bottom-btn {
	width: 100%;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #ffffff;
	z-index: 99;
	.bottom-le {
		width: 300rpx;
		height: 100rpx;
		padding: 10rpx 20rpx 10rpx 0;
		float: left;
		box-sizing: border-box;
		.item-bt {
			width: 80rpx;
			height: 100%;
			margin-right: 15rpx;
			display: flex;
			float: left;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-size-22;
			color: $text-color;
			line-height: 34rpx;
			position: relative;
			.animation-num {
				font-size: $font-size-32;
				color: #ff2a2a;
				position: absolute;
				top: -12rpx;
				right: 4rpx;
				font-weight: bold;
			}
			.animation {
				animation: showAmnation 2.2s ease-in-out both;
			}
			.restion {
				animation: hideAmnation 1s ease-in-out both;
			}
			.icon-num {
				position: absolute;
				right: -12rpx;
				top: -5rpx;
			}
			.icon-num.goleft {
				right: 2rpx;
			}
			&:last-child {
				margin-right: 0;
			}
			image {
				width: 44rpx;
				height: 44rpx;
			}
			button.contact-btn {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				font-size: $font-size-24;
				text-align: center;
				text-decoration: none;
				line-height: 34rpx;
				border-radius: 0;
				-webkit-tap-highlight-color: transparent;
				overflow: hidden;
				color: $text-color;
				background-color: #ffffff;
			}
		}
	}
	.bottom-ri {
		width: 450rpx;
		height: 100%;
		float: right;
		display: flex;
		box-sizing: border-box;
		padding: 13rpx 20rpx 13rpx 0;
		.btn {
			flex: 1;
			width: 200rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: $font-size-24;
			color: #ffffff;
		}
		.btn-cart {
			background-color: #fff4e6;
			color: $color-system;
			border-radius: 42rpx 0 0 42rpx;
		}
		.btn-cart.disabled {
			background: rgba(255, 244, 230, 0.5);
			color: #ffffff;
		}
		.btn-bay {
			background: #f3b574;
			border-radius: 0 42rpx 42rpx 0;
		}
		.btn-bay.disabled {
			background: rgba(243, 181, 116, 0.5);
		}
	}
}
.uni-badge--small {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
}
.uni-badge {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1;
	display: inline-block;
	padding: 3px 6px;
	color: #333;
	border-radius: 100px;
	background-color: #f1f1f1;
}
.uni-badge-error {
	color: #fff;
	background-color: #dd524d;
}
@keyframes showFixedColor {
	0% {
		background: rgba(255, 255, 255, 0);
	}
	50% {
		background: rgba(255, 255, 255, 0.5);
	}
	100% {
		background: rgba(255, 255, 255, 1);
	}
}
@keyframes hideFixedColor {
	0% {
		background: rgba(255, 255, 255, 1);
	}
	50% {
		background: rgba(255, 255, 255, 0.5);
	}
	100% {
		background: rgba(255, 255, 255, 0);
	}
}
/* 加入购物模态层*/
@keyframes showPopup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hidePopup {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes showLayer {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes showAmnation {
	0% {
		top: -12rpx;
		opacity: 0;
	}
	50% {
		top: -60rpx;
		opacity: 1;
	}
	100% {
		top: -100rpx;
		opacity: 0;
	}
}
@keyframes hideAmnation {
	0% {
		top: -100rpx;
		opacity: 0;
	}
	100% {
		top: -12rpx;
		opacity: 0;
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 40rpx 24rpx 0 24rpx;
	.tui-popup-close {
		width: 90rpx;
		height: 90rpx;
		position: absolute;
		right: 0;
		top: 24rpx;
		line-height: 90rpx;
		text-align: center;
		color: #b2b2b2;
		.icon-iconfontguanbi {
			font-size: $font-size-40;
		}
	}
	.title {
		font-size: $font-size-34;
		color: $text-color;
		line-height: 88rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 88rpx;
		font-weight: bold;
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		&.coupon {
			padding-bottom: 40rpx;
			.coupon-empty {
				width: 100%;
				height: 600rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: fixed;
				background: $bg-color;
				.empty-container-image {
					width: 150rpx;
					height: 150rpx;
					margin-bottom: 0;
					margin-top: 0;
				}
				.error-text {
					font-size: $font-size-28;
					color: #999999;
					line-height: 88rpx;
				}
			}
		}
		.tui-popup-scroll {
			width: 100%;
			height: 600rpx;
			.coupon-list {
				width: 100%;
				height: 200rpx;
				margin-top: 24rpx;
				box-sizing: border-box;
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
				background-size: cover;
				&:last-child {
					margin-bottom: 24rpx;
				}
				.list-cell-le {
					width: 224rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 37rpx 0;
					float: left;
					.coupon-maxMoney {
						width: 100%;
						height: 78rpx;
						line-height: 78rpx;
						font-size: 56rpx;
						color: #ffffff;
						text-align: center;
						.small {
							font-size: $font-size-24;
						}
					}
					.coupon-minMoney {
						width: 100%;
						height: 33rpx;
						line-height: 33rpx;
						font-size: $font-size-24;
						color: #ffffff;
						text-align: center;
					}
				}
				.list-cell-ri {
					width: 478rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 20rpx 24rpx 0 24rpx;
					float: right;
					.list-cell-top {
						width: 100%;
						height: 121rpx;
						float: left;
						border-bottom: 1px solid #e1e1e1;
						.list-cell-type {
							width: 286rpx;
							height: 100%;
							float: left;
							.list-cell-tags {
								width: 100%;
								height: 32rpx;
								margin-bottom: 7rpx;
								.tags {
									display: inline-block;
									padding: 0 10rpx;
									height: 32rpx;
									line-height: 32rpx;
									background-color: #ffdcce;
									color: #f94b4b;
									font-size: $font-size-20;
									border-radius: 8rpx;
									text-align: center;
									float: left;
								}
							}
							.list-cell-texts {
								width: 100%;
								height: auto;
								line-height: 35rpx;
								text-overflow: ellipsis;
								display: -webkit-box;
								word-break: break-all;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								font-size: 26rpx;
								color: #333333;
							}
						}
						.list-cell-btn {
							width: 128rpx;
							height: 100%;
							float: right;
							.icon-used {
								width: 100%;
								height: 100%;
								box-sizing: border-box;
								padding-top: 28rpx;
								.icon-used-text {
									width: 100%;
									text-align: center;
									line-height: 26rpx;
									font-size: $font-size-20;
									color: #f94b4b;
								}
								.icon-used-btn {
									width: 128rpx;
									height: 48rpx;
									border-radius: 28rpx;
									line-height: 48rpx;
									font-size: $font-size-26;
									text-align: center;
									&.receive {
										background-image: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
										color: #ffffff;
									}
									&.make {
										border: solid 1px #f94b4b;
										color: #f94b4b;
									}
								}
							}
						}
					}
					.list-cell-time {
						width: 100%;
						height: 58rpx;
						line-height: 58rpx;
						text-align: left;
						font-size: $font-size-20;
						color: #999999;
					}
				}
			}
			&.train {
				height: 240rpx;
			}
			.content-tr {
				width: 100%;
				min-height: 58rpx;
				line-height: 58rpx;
				display: flex;
				.content-td {
					display: flex;
					flex: 3;
					font-size: $font-size-26;
					color: #999999;
					line-height: 58rpx;
					text-align: left;
				}
				.content-th {
					display: flex;
					flex: 7;
					font-size: $font-size-26;
					color: #333333;
					line-height: 58rpx;
					text-align: left;
					padding-left: 10rpx;
				}
			}
		}
	}
	.tui-shopping-main {
		width: 100%;
		.layer-smimg {
			width: 114rpx;
			height: 114rpx;
			float: left;
			border-radius: 10rpx;
			margin-right: 24rpx;
			image {
				width: 114rpx;
				height: 114rpx;
				border-radius: 10rpx;
			}
		}
		.layer-nunbox {
			justify-content: space-between;
			align-items: center;
			width: 536rpx;
			height: auto;
			float: left;
			.layer-nunbox-t {
				width: 100%;
				height: 44rpx;
				position: relative;
				display: flex;
				margin-bottom: 10rpx;
				.text {
					font-size: $font-size-24;
					line-height: 48rpx;
					color: #999999;
				}
				.layer-nunbox-text {
					line-height: 44rpx;
					font-size: $font-size-28;
				}
				.number-box {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2rpx solid #ffe6dc;
					border-radius: 30rpx;
					height: 48rpx;
					margin-left: 20rpx;
					.iconfont {
						font-size: $font-size-24;
						padding: 0 18rpx;
						color: #999999;
						text-align: center;
						line-height: 48rpx;
						font-weight: bold;
						background: #fef6f3;
						&.icon-jianhao {
							border-radius: 30rpx 0 0 30rpx;
						}
						&.icon-jiahao {
							border-radius: 0 30rpx 30rpx 0;
						}
					}
					.btn-input {
						width: 62rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: #ffffff;
						border-radius: 4rpx;
						text-align: center;
						font-size: $font-size-28;
					}
				}
				.product-step {
					position: absolute;
					left: 45rpx;
					bottom: 0;
					height: 44rpx;
					background: #ffffff;
				}
			}
			.layer-nunbox-b {
				width: 100%;
				height: 44rpx;
				margin-top: 13rpx;
			}
			.text {
				line-height: 44rpx;
				font-size: $font-size-28;
				.p {
					color: #ff2a2a;
				}
				.p:first-child {
					margin-left: 30rpx;
				}
				.p.sm {
					font-size: $font-size-24;
				}
			}
		}
	}
}
.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	margin-top: 24rpx;
	.tui-button {
		width: 100%;
		height: 88rpx;
		background: $btn-confirm;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
	}
}
/*富文本样式*/
rich-text.p {
	width: 702rpx !important;
	padding: 0 24rpx;
	text-align: justify;
}
rich-text.img {
	width: 100%;
	height: auto;
}
</style>