baiyuchengpin/pages_company/order/productDetails.vue

<template>
	<view class="content">

		<!-- 商品轮播图片 -->
		<view class="shop-banner" @click="showImg()">
			<swiper class="swiper" :indicator-dots="false" :circular="true" :autoplay="true" :interval="3000"
				:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff"
				@change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in  banner" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 底部遮罩 -->
			<view class="banner-mask"></view>
			<!-- 数量 -->
			<view class="num-box">{{ activeBanner }}/{{ banner.length }}</view>
		</view>
		<!-- 详细信息 -->
		<view class="det-info">
			<view class="price-box">
				<view class="price">
					<text class="label">会员价</text>
					<text class="unit">￥</text>
					<text class="num">{{product.price}}</text>
					<text class="label">零售价</text>
					<text class="old">¥{{product.otPrice}}</text>
				</view>
			</view>
			
			<view class="name-box">
				<!-- <view class="tag">{{utils.getDictLabelName("storeProductType",product.productType)}}</view> -->
				{{product.productName}}
			</view>
			<view class="intro">
				{{product.productInfo||''}}
			</view>
			<!-- <view class="safe-box">
				<image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/safe.png" mode=""></image>
				<text class="text">免邮发货</text>
				<view class="line"></view>
				<text class="text">药师服务</text>
				<view class="line"></view>
				<text class="text">隐私保护</text>
			</view> -->
		</view>
		<!-- 购买人数、库存 -->
		<view class="inventor">
			<view class="left">
				<!-- <view class="head-box">
					<view class="head" v-for="(item,j) in 5" :key="j">
						<image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/head.jpg" mode=""></image>
					</view>
				</view> -->
				<view class="num-box">
					已有 <text class="text">{{product.sales}}</text> 人购买
				</view>
			</view>
			<!-- <view class="right">
				库存 <text class="text">{{product.stock}}{{product.unitName}}</text>
			</view> -->
			<!-- <view class="right">
				 <text class="text">库存{{product.stock>0?'充足':'售罄'}} </text>
			</view> -->
		</view>
		<!-- 功效 -->
		<!-- <view class="effect">
			<view class="label">产品说明书</view>
			<view class="label">查看</view>
			
		</view> -->
		<!-- 图文详情 -->
		<view class="det-box">
			<view class="title">图文详情</view>
			<view class="inner">
				<view v-html="product.description" style="font-size:0"></view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn-foot">
			<view class="menu-box">
				<view class="item" @click="goHome">
					<image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/back_home.png"
						mode=""></image>
					<text class="label">首页</text>
				</view>
				<view class="item" style="position: relative;">
					<image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/consult_small.png"
						mode=""></image>
					<text class="label">咨询</text>
					<button class="contact-btn" open-type="contact"></button>
				</view>
				<view class="item" @click="navgetTo('./cart')">
					<uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
						<image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/cart36.png"
							mode=""></image>
					</uni-badge>
					<text class="label">购物车</text>
				</view>
			</view>
			<view class="btn-box">
				<view class="btn cart" @click="addCart('cart')">加入购物车</view>
				<!-- <view class="btn buy" @click="addCart('buy')">{{buyText}}</view> -->
			</view>
		</view>
		<!-- 选择产品规格弹窗 -->
		<popupBottom ref="popup" :visible.sync="specVisible" title=" " radius="32" maxHeight="1024">
			<view class="product-spec">
				<!-- 商品信息 -->
				<view class="pro-info">
					<view class="img-box">
						<image
							:src="productValueSelect.image==null||productValueSelect.image==''?product.image:productValueSelect.image"
							mode="aspectFill"></image>
					</view>
					<view class="info-text">
						<view class="price">
							<text class="unit">¥</text>
							<text class="num">{{ productValueSelect.price.toFixed(2) }}</text>
						</view>
						<view class="desc-box">
							<text class="text">已选：{{ productValueSelect.sku }}</text>
							<text class="text">库存{{ productValueSelect.stock?'充足':'售罄' }}</text>
						</view>
					</view>
				</view>
				<!-- 规格 -->
				<view class="spec-box">
					<view v-for="(item,index) in attrs" :key="index">
						<view class="title">{{item.attrName}}</view>
						<view class="spec-list">
							<view v-for="(subItem,subindex) in item.values" :key="subindex"
								:class="subindex==item.index?'item active':'item'" @click="choseSpec(index,subindex)">
								{{ subItem }}
							</view>
						</view>
					</view>
				</view>
				<!-- 数量 -->
				<view class="price-num">
					<view class="label">数量</view>
					<view class="num-box">
						<view class="img-box" @click="lessNum()">
							<image v-if="specNum <= 1"
								src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/jian.png"
								mode=""></image>
							<image v-else
								src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/jian2.png"
								mode=""></image>
						</view>
						<input type="text" @change="changeNum" v-model="specNum" />
						<view class="img-box" @click="addNum()">
							<image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/add.png"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="sub-btn" @click="submit">确定</view>
			</view>
		</popupBottom>

		<view class="loadding" v-if="loadding==true">
			<image src="../../static/logo.png"></image>
			<text class="text">加载中...</text>
		</view>

	</view>
</template>

<script>
	import {
		getDicts
	} from '@/api/index'
	import {
		getProductDetails,
		getCartCount,
		addCart
	} from '@/api/product'
	import popupBottom from '@/components/px-popup-bottom/px-popup-bottom.vue'
	export default {
		components: {
			item: {},
			popupBottom
		},
		data() {
			return {
				buyText: "立即购买",
				type: null,
				productValueSelect: {
					price: 0,
				},
				banner: [],
				productId: null,
				companyId:null,
				companyUserId:null,
				attrs: [],
				values: [],
				product: {
					price: 0,
					otPrice: 0,
				},

				// 当前轮播的图片
				activeBanner: 1,
				// 购物车数量
				cartCount: 0,
				// 规格弹窗
				specVisible: false,
				// 规格数量
				specNum: 1,
				loadding: true,
			};
		},
		onLoad(options) {
			console.log("options>>",options)
			this.getDicts();
			this.productId = options.productId||'';
			this.companyId = options.companyId||'';
			this.companyUserId = options.companyUserId||'';
			if (this.utils.checkToken()) {
				this.getCartCount();
			}
		},
		onShow() {
			this.getProductDetails();
		},//发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.product.productName,
				path: `/pages_company/order/productDetails?productId=${this.productId}`+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId,
				imageUrl: this.product.image //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.product.productName,
				query:'productId='+this.productId+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId,//页面参数
				imageUrl: this.product.image //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},

		methods: {
			getDicts: function() {
				getDicts().then(
					res => {
						if (res.code == 200) {
							uni.setStorageSync('dicts', JSON.stringify(res));
						}

					},
					rej => {}
				);
			},
			showImg() {
				//预览图片
				uni.previewImage({
					urls: this.banner,
					current: this.banner[0]
				});
			},
			doAddCart(type) {
				if (this.specNum == 0) {
					uni.showToast({
						icon: 'none',
						title: "库存不足",
					});
					return;
				}
				var isBuy = type == "buy" ? 1 : 0;
				let data = {
					isBuy: isBuy,
					cartNum: this.specNum,
					productId: this.productValueSelect.productId,
					attrValueId: this.productValueSelect.id
				};
				addCart(data).then(
					res => {
						if (res.code == 200) {
							if (type == "buy") {
								uni.navigateTo({
									url: '/pages/shopping/confirmOrder?type=' + this.type + "&cartIds=" + res
										.id
								})
							} else {
								this.getCartCount()
								uni.showToast({
									icon: 'success',
									title: "添加成功",
								});
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
							this.getProductDetails()
						}
					},
					rej => {}
				);
			},
			getProductDetails() {
				let data = {
					productId: this.productId
				};
				//uni.showLoading({title:""});
				getProductDetails(data).then(res => {
						this.loadding = false
						if (res.code == 200) {
							this.product = res.product;
							if (this.product.productType == 1) {
								this.buyText = "立即购买"
							} else if (this.product.productType == 2) {
								this.buyText = "提交需求"
							}
							this.product.otPrice = this.product.otPrice.toFixed(2);
							this.product.price = this.product.price.toFixed(2);
							if (this.product.sliderImage != null) {
								this.banner = this.product.sliderImage.split(',');
							} else {
								this.banner = []
							}
							this.attrs = res.productAttr;
							this.attrs.forEach((item, index, arr) => {
								item.values = item.attrValues.split(',');
								item.index = 0
							})
							this.values = res.productValues;
							this.choseSpec(0, 0)

						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/home/index',
								})
							}, 2000)

						}
					},
					rej => {}
				);
			},
			getCartCount() {
				let data = {
					productId: this.productId
				};
				getCartCount(data).then(
					cartRes => {
						if (cartRes.code == 200) {
							this.cartCount = cartRes.data;
						}
					},
					rej => {}
				);

			},
			// swiper变化事件
			swiperChange(event) {
				this.activeBanner = event.detail.current + 1
			},
			// 回到首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if (res) {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 加入购物车
			addCart(type) {
				this.utils.isLogin().then(res => {
					if (res) {
						this.type = type;
						this.specVisible = true
					}
				})
			},
			// 规格选择
			choseSpec(index, subIndex) {
				this.attrs[index].index = subIndex;
				this.$forceUpdate();
				let productAttr = this.attrs;
				let values = [];
				for (let i = 0; i < productAttr.length; i++) {
					for (let j = 0; j < productAttr[i].values.length; j++) {
						if (productAttr[i].index === j) {
							values.push(productAttr[i].values[j]);
						}
					}
				}
				var selectVal = values.sort().join(",");
				console.log(selectVal)
				var valueSelect = this.values.filter((item) => {
					return item.sku == selectVal;
				})
				if (valueSelect != null && valueSelect.length == 1) {
					this.productValueSelect = valueSelect[0];
				}

				this.updateSpecNum();

			},
			changeNum(e) {
				this.specNum = e.detail.value.replace(/\D/g, '')
				if (this.specNum < 1) {
					this.specNum = 1
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			//更新数量
			updateSpecNum() {
				if (this.productValueSelect.stock == 0) {
					this.specNum = 0;
				} else {
					this.specNum = 1;
				}
			},
			// 数量减法
			lessNum(index) {
				this.specNum--
				if (this.specNum < 1) {
					this.specNum = 1
				}
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			// 数量加法
			addNum(index) {
				this.specNum++
				if (this.specNum >= this.productValueSelect.stock) {
					this.specNum = this.productValueSelect.stock
				}
			},
			// 确定选择该规格
			submit() {
				this.specVisible = false
				this.doAddCart(this.type);

			}
		}
	}
</script>

<style lang="scss">
	.content {


		.shop-banner {
			height: 756upx;
			background-color: #FFFFFF;
			position: relative;

			.swiper-item {
				box-sizing: border-box;
			}

			.swiper,
			.swiper-item,
			.swiper-item image {
				width: 100%;
				height: 100%;
			}

			.banner-mask {
				width: 100%;
				height: 44upx;
				// background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
				// opacity: 0.8;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 9;
				background-image: url(https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/black_mask.png);
				background-size: 20upx 44upx;
				background-repeat: repeat-x;
			}

			.num-box {
				width: 80upx;
				height: 44upx;
				line-height: 44upx;
				text-align: center;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				background: rgba(0, 0, 0, .3);
				border-radius: 22upx;
				position: absolute;
				right: 30upx;
				bottom: 30upx;
				z-index: 10;
			}
		}

		.det-info {
			position: relative;
			background: #FFFFFF;
			padding: 36upx 30upx 25upx;

			

			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					display: flex;
					align-items: flex-end;

					.label {
						color: #333;
						font-size: 28upx;
						font-family: PingFang SC;
						line-height: 1.3;
						margin-right: 5upx;
					}

					.unit {
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6633;
						line-height: 1.3;
					}

					.num {
						font-size: 40upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF6633;
						margin: 0 20upx 0 10upx;
						line-height: 1;
					}

					.old {
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #BBBBBB;
						line-height: 1.3;
					}
				}

				.share-box {
					width: 120upx;
					height: 46upx;
					border: 1px solid #2BC7B9;
					border-radius: 23upx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.text {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2BC7B9;
					}

					image {
						margin-left: 2rpx;
						width: 25upx;
						height: 24upx;
					}

					.share {
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%rpx;
						opacity: 0;
					}
				}

				.spec {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 36upx;
				}
			}

			.name-box {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
				line-height: 44upx;
				margin-top: 32upx;

				.tag {
					display: inline-block;
					padding: 0 6upx;
					height: 30upx;
					background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
					border-radius: 4upx;
					margin-right: 10upx;
					font-size: 22upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 30upx;
					float: left;
					margin-top: 7upx;
				}
			}

			.intro {
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 36upx;
				padding: 18upx 0 23upx;
				border-bottom: 1px solid #f7f7f7;
			}

			.safe-box {
				display: flex;
				align-items: center;
				padding-top: 24upx;

				image {
					width: 20upx;
					height: 24upx;
					margin-right: 20upx;
				}

				.text {
					font-size: 22upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 1;
				}

				.line {
					width: 1px;
					height: 23upx;
					background: #EDEEEF;
					margin: 0 20upx;
				}
			}
		}

		.inventor {
			height: 88upx;
			padding: 0 39upx 0 30upx;
			margin-top: 10upx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.head-box {
					margin-right: 27upx;
					display: flex;
					align-items: center;

					.head {
						width: 48upx;
						height: 48upx;
						border-radius: 50%;
						overflow: hidden;
						box-shadow: 0 0 0 1px #fff;
						margin-right: -10upx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.num-box {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;

					.text {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.right {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				.text {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
		}

		.effect {
			box-sizing: border-box;
			padding: 20upx 30upx;
			background: #FFFFFF;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 1.8;
			margin-top: 10upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.label {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 1.8;
			}
		}

		.det-box {
			margin-top: 10upx;
			padding: 40upx 30upx 130upx 30upx;
			background-color: #FFFFFF;

			.title {
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 1;
				margin-bottom: 25upx;
			}

		}

		.btn-foot {
			box-sizing: border-box;
			width: 100%;
			height: 121upx;
			background: #FFFFFF;
			padding: 0 32upx 0 28upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;

			.menu-box {
				display: flex;
				align-items: center;

				.item {
					display: flex;
					align-items: center;
					flex-direction: column;
					margin-right: 48upx;

					&:last-child {
						margin-right: 0;
					}

					image {
						width: 36upx;
						height: 36upx;
						margin-bottom: 10upx;
					}

					.label {
						font-size: 20upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						text-align: center;
					}
				}

				:deep(.uni-badge--x) {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				:deep(.uni-badge) {
					border: none;
					background-color: #FF3636;
					font-family: Roboto;
				}
			}

			.btn-box {
				display: flex;
				align-items: center;

				.btn {
					width: 200upx;
					height: 88upx;
					line-height: 88upx;
					text-align: center;
					border-radius: 44upx;
					margin-left: 20upx;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;

					&:first-child {
						margin-left: 0;
					}

					&.cart {
						background: #FF6633;
					}

					&.buy {
						background: #2BC7B9;
					}
				}
			}
		}

		.product-spec {
			.pro-info {
				display: flex;
				align-items: center;

				.img-box {
					width: 200upx;
					height: 200upx;
					background: #FFFFFF;
					border-radius: 16upx;
					overflow: hidden;
					margin-right: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info-text {
					height: 200upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.price {
						display: flex;
						align-items: flex-end;

						.unit {
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF6633;
							line-height: 1.2;
							margin-right: 10upx;
						}

						.num {
							font-size: 50upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF6633;
							line-height: 1;
						}
					}

					.desc-box {
						display: flex;
						flex-direction: column;
						padding-bottom: 9upx;

						.text {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							margin-top: 27upx;
							line-height: 1;

							&:first-child {
								margin-top: 0;
							}
						}
					}
				}
			}

			.spec-box {
				padding-top: 50upx;

				.title {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
					line-height: 1;
				}

				.spec-list {
					display: flex;
					flex-wrap: wrap;
					margin-top: 30upx;

					.item {
						box-sizing: border-box;
						height: 64upx;
						padding: 0 30upx;
						line-height: 64upx;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						background: #F7F7F7;
						border: 1px solid #F7F7F7;
						border-radius: 32upx;
						margin-right: 20upx;
						margin-bottom: 30upx;

						&.active {
							background: #F1FFFE;
							border: 1px solid #8AD5CE;
							color: #2BC7B9;
						}
					}
				}
			}

			.price-num {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14upx;

				.label {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}

				.num-box {
					display: flex;
					align-items: center;

					.img-box {
						width: 60upx;
						height: 60upx;
						// border-radius: 4upx;
						border: 1px solid #dddddd;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 25rpx;
							height: 25rpx;
						}
					}

					input {
						width: 60upx;
						height: 60upx;
						line-height: 60upx;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						// border-radius: 4upx;
						border-top: 1px solid #dddddd;
						border-bottom: 1px solid #dddddd;
						text-align: center;
						// margin: 0 16upx;
					}
				}
			}

			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #2BC7B9;
				border-radius: 44upx;
				margin-top: 30upx;
				// margin-bottom: 30upx;

			}
		}

		.contact-btn {
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 9999;
		}

		.loadding {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;

			image {
				border-radius: 50%;
				animation: load linear 1s infinite;
				width: 120rpx;
				height: 120rpx;
			}

			.text {
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>