lhyt_shop_applet/XCX-Shop/pages/shopStore/detial.vue

<template>
	<view class="body" >
		<view class="content"> 
		<view>
			<uniSwiperDot :info="info" :current="current" field="content" mode="default" :dots-styles=dotsStyles>
				<swiper autoplay="true" circular="true" interval="4000" duration="500" class="swiper-box">
					<swiper-item v-for="(item ,index) in productDetial.Product_images" :key="index" @click="clickItem(item)">
						<image class="imagestyle" :src="item.url" mode=""></image>
					</swiper-item>
				</swiper>
			</uniSwiperDot>
		</view>
		<view class="title">
			<view class="titleCon">
				<p> <span style="font-size: 1.5rem; color: red; font-weight: 550; margin-left: 2vw; " >￥{{productDetial.price_f}}</span><!-- <span style="color: grey; margin-left: 2vw; text-decoration: line-through; ">￥85</span> --></p>
				<p style=" width: 44vw; background-color: #f7f7f7; font-size: 0.75rem; margin-top: 2vw;">{{productDetial.notes}} <!-- <span style="color: red; margin-left: 1vw;" >5%</span> --></p>
				<p style="font-size: 1.2rem; font-weight: 550; margin-top: 2vw;">{{productDetial.name}}</p>
		<!-- 		<p style="font-size: 0.75rem; color: grey; text-align: right; margin-top: 2vw;">已售: 59</p> -->
			</view>
		</view>
		<!-- 选项 -->
		<view class="option">
			<view class="optionCon">
			<view style="display: flex; font-size: 1rem; justify-content: space-around; margin-top: 2vw; ">
				<!-- <p style=" color: grey;">已选</p> <p > 五香味45g*7 </p> <p>x3</p> <p> <image style="width: 6vw; height: 6vw; " src="../../static/youjian.png" mode=""></image> </p> -->
				 	<u-popup v-model="show" mode="bottom" border-radius="30">
				 			<view class="contentName">
								<p style="position: absolute; right: 3vw; top: 3vw;"> <image style="width: 6vw; height: 6vw;" src="../../static/chahao.png"></image> </p>
								<view class="PicTile">
								<p> <image style="width: 25vw; height: 25vw;" src="../../static/latiao.png"></image> </p>
									<view style="margin-left: 3vw;">
										<p> <span style="color: red; font-size: 1.4rem; font-weight: 550;">￥78</span> <span style=" text-decoration: line-through; color: lightgrey; font-size: 0.75rem; ">￥78</span> </p>
										<p style="margin-top: 2vw;">库存50件</p>
										<p style="margin-top: 2vw;"> <span style="color: lightgray;">已选:</span> <span style="color: lightgray; margin-left: 2vw;">五香味45g*7</span> </p>
									</view>
								</view>
								<view class="guige">
									<view style="font-size: 1.2rem; font-weight: 550; margin-bottom: 3vw;" >规格</view>
									<view style="width: 100vw; display: flex; flex-wrap: wrap;">
										<p style="background-color: #fff5f5; padding: 2vw; color: red; border-radius: 20px; font-size: 0.9rem; ">五香味45g*7</p>
									</view>
									<view style="display: flex; justify-content: space-between;">
										<view style="font-size: 1.2rem; font-weight: 550; margin-top: 3vw;">数量</view>
										<view style=" width: 40vw; display: flex;  margin-left: 8vw;">
											<p class="minus_quantity" @click="decrease">-</p>
											<input class="input_quantity" type="number" v-model="quantity" @input="handleInput" />
											<p class="add_quantity" @click="increase">+</p>
										</view>
									</view>
								</view>
								<view class="button" style="margin-left: 5vw;"> 确定 </view>
							</view>
				 		</u-popup>
				</view>
			<view style="display: flex; font-size: 1rem;  margin-top: 2vw; ">
				<p style=" color: grey; margin-left: 6vw;"> 发货 </p>
				<p style="margin-left: 10vw;">快递</p>
			</view>
			<view style="font-size: 0.9rem; color: grey; margin-left: 24vw;">
				付款后2个工作日内发货
			</view>
			</view>
		</view>
		</view>
		<view class="foot">
				<view style="width: 20vw; height: 10vw; border-radius: 5px; text-align: center; line-height: 10vw; border: 1px solid lightgray;" @click="WeCom"> 咨询</view>
			<view class="button" @click="purchase">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				quantity: 1,
				show:false,
				storeID:'',
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					bottom: 2,
					selectedBackgroundColor: 'white',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				info: [{
					imgLink: '../../static/latiao.png'
				} ],
				productDetial:{}
			}
		},
		onLoad(option) {
			if(option.id){
				this.storeID=option.id
				this.ProductDetial(option.id)
			}
		},
		methods:{
			WeCom(){
				console.log('1211')
				uni.openCustomerServiceChat({
				  extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc3e7dfd18c794def3'},
				  corpId: 'wwb8fbacb965f0006c',
				  success(res) {
					  console.log(res)
				  },
				  fail(res){
					  console.log('错误',res)
				  }
				})
			},
			// 商品详情
			ProductDetial(id){
				this.$api.getProductDetial(id,res=>{
					if(res.code==0){
						this.productDetial=res.data
					}
				})
			},
			handleInput(event) {
				const value = parseInt(event.target.value);
				if (!isNaN(value) && value >= 1) {
					this.quantity = value;
				} else {
					this.quantity = 1;
				}
			},
			increase() {
				this.quantity++;
			},
			decrease() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			purchase(){
				uni.navigateTo({
					url:'/pages/shopStore/determineOrder?storeId='+this.storeID
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;
		overflow: hidden;
		.content{
			width: 100vw;
			height: 100vh;
			overflow-y: auto;
			
			background-color:#f8f8f8;
			.swiper-box {
				height: 80vw;
			}
			.imagestyle {
				width: 100%;
				height: 100%
			}
			.title{
				width: 100vw;
				height: 19vh;
				border-radius: 10px;
				background-color: #f8f8f8;
				display: flex;
				justify-content: center;
				margin-top: 2vw;
				.titleCon{
					box-sizing: border-box;
					width: 90vw;
					height: 19vh;
					padding: 4vw;
					border-radius: 10px;
					background-color: white;
				}
			}
			.option{
				width: 100vw;
				height: 14vh;
				margin-top: 2vw;
				display: flex;
				justify-content: center;
				.optionCon{
				box-sizing: border-box;
				width: 90vw;
				height: 11vh;
				border-radius: 10px;
				background-color: white;
				.contentName{
					width: 100vw;
					height: 70vh;
					border-radius: 10px 0 10px 0; 
					background-color: #f8f8f8;
					overflow: hidden;
					.PicTile{
						width: 100vw;
						height: 16vh;
						background-color: white;
						display: flex;
						box-sizing: border-box;
						padding: 3vw;
					}
					.guige{
						width: 100vw;
						height: 43vh;
						margin-top: 2vw;
						background-color: white;
						box-sizing: border-box;
						padding: 2vw;
						.minus_quantity {
							border: 1px solid #f8f8f8;
							text-align: center;
							width: 20%;
							background-color: #f8f8f8;
							margin-right: 2vw;
						
						}
						
						.input_quantity {
							// border-bottom: 1px solid #74bfe7;
							text-align: center;
							width: 20%;
							height: 8vw;
							background-color: #f8f8f8;
						}
						
						.add_quantity {
							border: 1px solid #f8f8f8;
							background-color: #f8f8f8;
							text-align: center;
							width: 20%;
							margin-left: 2vw;
						}
					}
					
				}
				}
			}
			
		}
		.foot{
			width: 100vw;
			height: 20vw;
			border-top: 1px solid lightgray;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		.button{
			width: 60vw;
			height: 12vw;
			text-align: center;
			line-height: 12vw;
			background-color: #f83036;
			color: white;
			border-radius: 10px;
		}
	}
</style>