JP-ChargeTeam51/pages/store/commodityDetails.vue

<template>
	<view>
		<ujp-navbar :title="info.mallProduct.name"></ujp-navbar>
		<!--轮播图 -->
		
<!-- 		<u-image width="750"  :src="info.mallProduct.pic"></u-image -->
		<img  :src="info.mallProduct.pic" style="width: 100%;" alt="">
		 
		<!-- 详情 -->
		<view class="main">
			<!-- 价格 已售 -->
			<view class="price-sold" >
				<view class="price" v-if="info.mallProductPrice">
					<text>￥</text>{{info.mallProductPrice}}<text style="margin-left: 4rpx;">起</text>
				</view>
				<view class="sold"  v-if="info.mallProduct.sale">
					已售 {{info.mallProduct.sale}}
				</view>
			</view>
			<!-- 标题 -->
			<view class="title">
				<view class="tag" v-if="info.mallProduct.own">
					<img src="../../assets/img/commodityTag.png" alt="">
				</view>{{info.mallProduct.name}}
			</view>
			<!-- 详细信息 -->
			<view class="infos" @click="show=true" v-if="mallProductAttributeListShow.length">
				<view class="item" v-for="(item, i) in mallProductAttributeListShow"  :key="i">
					<view class="item-title">
						{{i}}
					</view>
					<view class="item-value">
						{{item}}
					</view>
				</view>
				
				<view class="item">
					<u-icon name="arrow-right" color="#333333"></u-icon>
				</view>
			</view>

		</view>
		<u-divider color="#aaaaaa">商品详情</u-divider>
		<!-- 商品详情图片 -->
		<view class="details-picture" v-html="info.mallProduct.detailHtml">
			
		</view>
		<!-- 底部 -->
		<view class="bottom" v-if="personInfo.id" >
			<view class="service"  @click="gotoUrl('pages/service/service')">
				<view class="icon">
					<img src="../../assets/img/riLine-customer-service-2-line@3x.png" alt="">
				</view>
				<view class="text">
					联系客服
				</view>
			</view>
			<view class="order" @click="gotoUrl('pages/store/myOrder')">
				<view class="icon">
					<img src="../../assets/img/riLine-todo-line@3x.png" alt="">
				</view>
				<view class="text">
					我的订单
				</view>
			</view>
			<view class="buy-btn" @click="show2=true" v-if="mallProductPrice">
				<view class="buy">
					立即购买
				</view>
				<view class="price">
					{{personInfo.memberLevelStr}}价 ￥{{mallProductPrice}}
				</view>
			</view>
			<view class="buy-btn" @click="openModalBl=true" v-else>
				<view class="buy">
					<u-icon name="phone"></u-icon>
拨打电话
					
				</view>
				
			</view>

		</view>
		<view class="bottom" v-else >
			<view class="service"  @click="gotoUrl('pages/service/service')">
				<view class="icon">
					<img src="../../assets/img/riLine-customer-service-2-line@3x.png" alt="">
				</view>
				<view class="text">
					联系客服
				</view>
			</view>
			
			<view class="buy-btn" @click="gotoUrl('pages/login/login')"  v-if="mallProductPrice">
				<view class="buy">
					立即登录
				</view>
				<view class="price">
					登录后购买商品
				</view>
			</view>
			<view class="buy-btn" @click="openModalBl=true" v-else>
				<view class="buy">
					<u-icon name="phone"></u-icon>拨打电话
				
				</view>
				
			</view>
		
		</view>
		<!-- 产品参数 -->
		<u-popup v-model="show" mode="bottom"  height="80%" >
			<view class="product-parameter">
				<view class="headline">
					产品参数
				</view>
				<view class="infos">
					<view class="item" v-for="(item,i) in info.mallProductAttributeList" :key="i">
						<view class="title">
							{{i}}
						</view>
						<view class="value">
							{{item}}
						</view>
					</view>
					 
				</view>
				<view class="btn" @click="show=false">
					<button class="finish">完成</button>
				</view>
			</view>
		</u-popup>

		<!-- 选择规格 -->
      
       	<u-popup v-model="show2" mode="bottom" :closeable="true"  height="80%" >
				<view class="product-parameter">
					<view class="headline">
						<view class="specification-head">
							<view class="specification-infos">
								<view class="picture">
									<img v-if="info.mallProduct.pic" :src="info.mallProduct.pic" alt="">
									<img v-else src="@/assets/img/chargesite_default.png"  ></img>
									
								</view>
								<view class="else-infos">
									<view class="name">
										{{info.mallProduct.name}}
									</view>
									<view class="price">
										{{info.mallProductPrice}}元 起
									</view>
									<view class="choose">
										请先选择商品规格
									</view>
								</view>
							</view>
						</view>
					</view>
						<view >
							<view class="specification">
							
									
									<!-- 选项 -->
									<view class="optopns-content">
										
										<view class="options" v-for="(item,i) in info.mallProductOptionList"
										 :key="i"  >
											<view class="options-name">
												<span v-if="item.required" style="color: red;">*</span>{{item.name}}
												<span class="tag" v-if="item.selectType==2">多选</span>
											</view>
											<view class="options-item">
												<view class="item "
												
												 v-for="(it,index) in item.mallProductOpinionPriceDTOList"
												 @click="itemChosenBtn(it,item)"
												:class="{
													'item-chosen' : (ckMallProductOptionList[item.id]?ckMallProductOptionList[item.id]:[]).indexOf(it.value)>-1
												}"
												
												:key="index+'_'+i" >
													{{it.name}} <span style="margin-left: 8px;" v-if="it.price">{{it.price}}元</span>
												</view>
												
												
											</view>
										</view>
									
									</view>
									<view class="bottom">
										<view class="service"  @click="gotoUrl('pages/service/service')">
											<view class="icon">
												<img src="../../assets/img/riLine-customer-service-2-line@3x.png" alt="">
											</view>
											<view class="text">
												联系客服
											</view>
										</view>
										<view class="order"  @click="gotoUrl('pages/store/myOrder')" >
											<view class="icon">
												<img src="../../assets/img/riLine-todo-line@3x.png" alt="">
											</view>
											<view class="text">
												我的订单
											</view>
										</view>
										<view class="buy-btn" @click="submit">
											<view class="buy">
												立即购买
											</view>
											<view class="price">
												{{personInfo.memberLevelStr}}价 ￥{{mallProductPrice}}
											</view>
										</view>
									
									</view>
								</view>
						</view>	
				</view>
				
       	</u-popup>
		<u-modal v-model="openModalBl" @confirm="confirmPhoneBl" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>

	</view>



</template>

<script>
	import * as API from '@/apis/mall.js'
	
	export default {
		data() {
			return {
				
				show: false,
				show2: false,
				info:{
					mallProduct:{},
					mallProductAttributeList:[],
					mallProductOptionList:[],
					mallProductPrice:0,
				},
				ckMallProductOptionList:{},
				mallProductPrice:0,
				personInfo:{},
				id:"",
				openModalBl:false,
					consumerPhone: "400-8899-619",
				// albumPics: [{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',

				// 	},
				// 	{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',

				// 	},
				// 	{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',

				// 	}
				// ],
			}
		},
		computed:{
				 
				mallProductAttributeListShow(){
					var sz=this.info.mallProductAttributeList;
					
					if(sz){
						var obj={}
						var k=0
						for(var i in sz){
							k++;
							obj[i]=sz[i]
							if(k==5){
								break
							}
						}
						return obj;
					}else{
						return []
					}
					
				},
				albumPics(){
					var list=[]
					if(this.info.mallProduct&&this.info.mallProduct.id){
						var plist=this.info.mallProduct.albumPics
						
						
						if(plist){
							var sz=plist.split(",").map(item=>{
								return {
									image:item
								}
							})
							list=sz
						}else if(this.info.mallProduct.pic){
							list.push({
								image:this.info.mallProduct.pic
							})
						}
						
					}
					return list
				}
		},
		onLoad(op) {
			this.personInfo = this.carhelp.getPersonInfo()
			
			if (op.id) {
				this.id = op.id;
				this.getDetail();
			}
		
		},
		methods: {
			confirmPhoneBl() {
				this.openModalBl = false;
			
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			
			},
			submit(){
				var opinions="";
				for(var i in this.ckMallProductOptionList){
					var item=this.ckMallProductOptionList[i]
					if(item.length==0){
						continue
					}
					var string=i+":"+item.join()+";"
					opinions+=string;
				}
				uni.navigateTo({
					url:"/pages/store/orderConfirm?id="+this.id+"&opinions="+opinions
				})
				
				
			},
			itemChosenBtn(it,item){
				var sz=this.ckMallProductOptionList[item.id]
				var ck=sz.indexOf(it.value)
				
				if(ck>-1){
					var bl=false
					//已选中， 要取消
					if(item.required==1||item.selectType==0){
						if(sz.length==1){
							//不能取消
						}else{
							//可以取消
							bl=true
						}
					}else{
						//可以取消
						bl=true
					}
					if(bl){
						sz.splice(ck, 1);  
					}
					
				}else{
					if(item.selectType==2){
						sz.push(it.value)
					}else{
						sz=[it.value]
					}
				}
				this.ckMallProductOptionList[item.id]=sz;
				this.setTotalAmount()
				
			},
			setTotalAmount(){
				this.mallProductPrice=0;
				if(this.info.mallProduct.id){
					this.mallProductPrice+=this.info.mallProductPrice
					
					for(var i in this.info.mallProductOptionList){
						var item=this.info.mallProductOptionList[i];
						//obj.selectType 0->唯一；1->单选；2->多选
						//obj.required
						var sz=this.ckMallProductOptionList[item.id]
						for(var j in item.mallProductOpinionPriceDTOList){
							var it=item.mallProductOpinionPriceDTOList[j]
							if(sz.indexOf(it.value)>-1){
								this.mallProductPrice+=it.price
							}
						}
						
					}
				}
				if(this.mallProductPrice){
					if(Number.isInteger(this.mallProductPrice)){
						
					}else{
						  this.mallProductPrice=this.mallProductPrice.toFixed(2);  
					}
				}else{
					this.mallProductPrice=0
				}
				
				
			},
			getDetail(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.mallDetails({
					id:this.id
				}).then((res) => {
					uni.hideLoading();
					this.info=res.data
					if(this.info.mallProductOptionList){
						var obj={}
						//this.ckMallProductOptionList;
						for(var i in this.info.mallProductOptionList){
							var item=this.info.mallProductOptionList[i];
							//obj.selectType 0->唯一；1->单选；2->多选
							//obj.required
							obj[item.id]=[]
							if(item.mallProductOpinionPriceDTOList&&item.mallProductOpinionPriceDTOList.length>0){
								if(item.required==1||item.selectType==0){
									obj[item.id].push(item.mallProductOpinionPriceDTOList[0].value)
								}
							}
							
						}
						
						this.ckMallProductOptionList=obj
						this.setTotalAmount()
						
					}
					// this.$nextTick(()=>{
					//     var list =document.getElementsByClassName("details-picture")[0].getElementsByTagName("img");
					//     for(var i=0;i<list.length;i++){
					//         list[i].style='width: 100%;height: 100%;'
					//     } 
					// })
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-back-wrap{
		background-color: #fff;
	}
	page {
		padding-bottom: 50px;
	}

	.main {
		background-color: #fff;
		padding: 32rpx 24rpx;

		// 价格 已售
		.price-sold {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price {
				color: rgba(255, 40, 0, 1);
				font-size: 48rpx;

				text {
					font-size: 24rpx
				}
			}

			.sold {
				color: rgba(119, 119, 119, 1);
			}
		}

		// 标题
		.title {
			color: rgba(16, 16, 16, 1);
			margin-top: 40rpx;
			font-size: 40rpx;
			font-weight: 600;

			.tag {
				display: inline-block;
				margin-right: 8rpx;

				img {
					width: 118rpx;
					height: 36rpx;
				}
			}
		}

		// 详细信息
		.infos {
			margin: 32rpx 0rpx;
			padding: 32rpx 16rpx;
			border-radius: 8px;
			background-color: rgba(244, 246, 248, 1);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				// margin-left: 16rpx;
				text-align: center;
				
				.item-title {
					color: rgba(119, 119, 119, 1);
				}

				.item-value {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					margin-top: 16rpx;
				}
			}

		}

	}

	// 商品详情图片
	.details-picture {
		background-color: #fff;
		    padding: 0 40rpx;
		padding-bottom: 100px;
		::v-deep img{
			//display: inline-block;
			width: 100% !important;
			height: 100% !important;
			vertical-align: middle
		}
	
	}

	// 底部
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0px -6px 6px 0px rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		.service,
		.order {
			text-align: center;
			margin-right: 32rpx;

			img {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				color: rgba(16, 16, 16, 1);
				font-size: 24rpx;
			}
		}

		.buy-btn{
			width: 400rpx;
			height: 96rpx;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 1);
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: auto;
			color: #fff;

			.buy {
				font-size: 32rpx
			}

			.price {
				font-size: 24rpx;
			}
		}
	}

	// 产品参数
	.product-parameter {
		padding:40rpx 32rpx 40rpx 32rpx ;
		border-radius: 8px;

		.headline {
			 border-radius: 12px 12px 0 0;
			font-size: 32rpx;
			color: #111111;
			text-align: center;
			height: 40rpx;
			position: fixed;
			top: 0px;
			left: 0;
			right: 0;
			    padding: 40rpx 0;
			background: #fff;
			
		}
	}

	::v-deep .u-drawer-content {
		border-radius: 12px 12px 0 0;

		.infos {
		
			margin: 44rpx 0;
			
			//height: 800rpx;
			
			overflow: auto;
			
			

			.item {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding: 28rpx 0;
				border-bottom: 1px solid #e6e6e6;

				.title {
					color: rgba(51, 51, 51, 1);
					width: 128rpx;
					text-align: left;

				}

				.value {
					color: rgba(51, 51, 51, 1);
					margin-left: 48rpx;
				}

			}
		}

		// 按钮
		.btn {
			padding: 16rpx 32rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: #fff;
			.finish {
				width: 100%;
				height: 80rpx;
				background-color: rgba(0, 185, 98, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 16px;
			}
		}
	}
	// 选择规格
	.specification-head{
		padding: 54rpx 48rpx ;
		background: #fff;
		.specification-infos{
			display: flex;
			justify-content: space-between;
			//position: fixed;
			top: 104rpx;
			left: 48rpx;
			right: 48rpx;
			height: 120rpx;
			z-index: 999;
			.picture{
				width: 152rpx;
				height: 152rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.else-infos{
				.name{
					color: rgba(51, 51, 51, 1);
					font-weight: bold;
					font-size: 40rpx;
				}
				.price{
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
					margin-top: 12rpx;
					font-weight: bold;
				}
				.choose{
					color: rgba(153, 153, 153, 1);
					margin-top: 12rpx;
				}
			}
		}
	}
// 选择规格
.specification{
	margin-top: 120rpx;
	padding: 54rpx 28rpx ;
	background: #fff;
	
	// 选项
	.optopns-content{
		margin: 100rpx 0 40rpx;
		height: 800rpx;
		overflow: auto;
	}
	.options{
		.options-name{
			color: rgba(119, 119, 119, 1);
			.tag{
			
				    background-color: #8D8072;
				    color: #fff;
				    padding: 2px 6px;
				    border-radius: 15px;
				    font-size: 10px;
			}
		}
		.options-item{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 24rpx;
			margin-bottom: 40rpx;
			.item{
				
				min-width: 312rpx;
				line-height: 64rpx;
				border: 1px solid rgba(221, 221, 221, 1);
				text-align: center;
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				border-radius: 50px;
				margin-bottom: 24rpx;
				padding: 0 20px;
			}
			// 被选中的
			.item-chosen{
				
				    border: 1px solid #53b56b;
				    background-color: #53b56b;
				    color: #fff;
			}
		}
		
	}
	.bottom{
		box-shadow: none;
	}
}


</style>