cbz/page_shop/pages/good/detail.vue

<template>
	<view class="content">
		<u-navbar title=" " @leftClick="leftClick" height="44px" bgColor="#F5F5F5" :placeholder="true">
			<view class="hflex acenter" slot="center">
				<view class="nav_item" @click="changeNav(1)" :class="nav_active == 1?'nav_active': '' ">商品</view>
				<view class="nav_item" @click="changeNav(2)" :class="nav_active == 2?'nav_active': '' ">详情</view>
			</view>
		</u-navbar>
		<view class="swiper">
			<u-swiper :list="pageData.imgList" height="300" @change="e => currentNum = e.current" :autoplay="false" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ pageData.imgList.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="box">
			<view class="hflex acenter jbetween">
				<view class="price">￥{{pageData.price}}</view>
				<view class="hflex acenter">
					<view class="vflex acenter" @click="collect">
						<u-icon name="star" color="#444444" size="20" v-if="pageData.is_collect == 0"></u-icon>
						<u-icon name="star-fill" color="#506DFF" size="20" v-else></u-icon>
						<view class="text_style1">收藏</view>	
					</view>	
					<view class="vflex acenter" style="margin-left: 42rpx;">
						<image src="/static/images/comment/share.png" class="bottom_img"></image>	
						<view class="text_style1">分享</view>	
					</view>	
				</view>
			</view>
			<view class="name">{{pageData.name}}</view>
		</view>
		<view class="box">
			<view class="hflex acenter jbetween" @click="openNorm">
				<view class="hflex acenter">
					<view class="label">选择</view>
					<view class="text_style2">{{normStr?normStr:'选择规格'}}</view>
				</view>
				<u-icon name="arrow-right" color="#000" size="14"></u-icon>
			</view>
			<view class="hflex acenter jbetween pad-20" @click="openAddr">
				<view class="hflex acenter">
					<view class="label">配送</view>
					<view class="text_style2">{{delivery?delivery:'选择配送地址'}}</view>
				</view>
				<u-icon name="arrow-right" color="#000" size="14"></u-icon>
			</view>
		</view>
		<view class="box1">
			<view class="title">商品图文详情</view>
			<block v-for="(item,index) in pageData.detail" :key="index">
				<image :src="item" mode="widthFix" class="detail_img"></image>
			</block>
		</view>
		<view class="bottom hflex acenter jbetween">
			<view class="vflex acenter" @click="toShop">
				<image src="/static/images/shop/shop_icon.png" class="bottom_img"></image>
				<view class="text_style1">店铺</view>	
			</view>	
			<view class="vflex acenter">
				<image src="/static/images/shop/customer_icon.png" class="bottom_img"></image>	
				<view class="text_style1">客服</view>	
			</view>	
			<view class="vflex acenter" @click="toCart">
				<image src="/static/images/shop/cart_icon.png" class="bottom_img"></image>	
				<view class="text_style1">购物车</view>	
			</view>	
			<view class="hflex acenter">
				<view class="btn1" @click="addCart">加入购物车</view>
				<view class="btn2" @click="buy">立即购买</view>
			</view>
		</view>
		<u-popup :show="norm_show" @close="close" mode="bottom" :round="20" :closeable="true">
			<view class="popu">
				<view class="hflex acenter">
					<image :src="pageData.imgList[0]" class="popu_img" mode="aspectFill"></image>
					<view class="vflex jbetween popu_right">
						<view class="popu_price">￥{{pageData.price}}</view>
						<view class="popu_norm">{{normStr?normStr:'选择规格'}}</view>
					</view>
				</view>
				<view class="popu_title">规格</view>
				<view class="hflex acenter fwrap">
					<block v-for="(item,index) in pageData.norm.normList" :key="index">
						<view class="popu_box" @click="selectNorm(item.index)" :class="norm_active == item.index?'sele_active':''">{{item.name}}</view>
					</block>
				</view>
				<view class="popu_title">颜色</view>
				<view class="hflex acenter fwrap">
					<block v-for="(item,index) in pageData.norm.colorList" :key="index">
						<view class="popu_box" @click="selectColor(item.index)" :class="color_active == item.index?'sele_active':''">{{item.name}}</view>
					</block>
				</view>
				<view class="hflex acenter jbetween">
					<view class="popu_title">数量</view>
					<u-number-box v-model="pageData.norm.num" @change="changeNum"></u-number-box>
				</view>
				<view class="sure_btn" @click="sure">确定</view>
			</view>
		</u-popup>
		<u-popup :show="addr_show" @close="close" mode="bottom" :round="20" :closeable="true">
			<view class="popu">
				<view class="hflex acenter jcenter popu_title">配送地址</view>
				<view>
					<block v-for="(item,index) in pageData.delivery" :key="index">
						<view class="box_bg hflex acenter" @click="selectAddr(item.index)">
							<image v-if="item.checked == 1" src="/static/images/shop/checked.png" class="check_img"></image>
							<u-icon v-else name="map-fill" color="#b2b2b2" size="12"></u-icon>
							<view class="popu_right2">
								<view class="hflex acenter">
									<view class="popu_name">{{item.name}}</view>
									<view class="popu_phone">{{item.phone}}</view>
								</view>
								<view class="popu_addr">{{item.address}}</view>
							</view>
						</view>
					</block>
				</view>
				<view class="sure_btn" @click="select">选择其他收货地址</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				nav_active: 1,
				currentNum: 0,
				pageData: {
					imgList: [
						'/static/images/index/class_img1.png',
						'/static/images/index/class_img1.png',
						'/static/images/index/class_img1.png',
					],
					price: '699.33',
					name: 'TCL 电视 55英寸 4K超清护眼防蓝光超薄金属全面屏 远程语音',
					norm: {
						normList: [
							{
								index: 0,
								name: '3kw单相手启动'
							},
							{
								index: 1,
								name: '3kw单相手启动'
							},
							{
								index: 2,
								name: '3kw单相手启动'
							},
							{
								index: 3,
								name: '3kw单相手启动'
							},
							{
								index: 4,
								name: '3kw单相手启动'
							},
							{
								index: 5,
								name: '3kw单相手启动'
							}
						],
						colorList: [
							{
								index: 0,
								name: '褐色'
							},
							{
								index: 1,
								name: '白色'
							},
							{
								index: 2,
								name: '黑色'
							},
							{
								index: 3,
								name: '粉色'
							},
							{
								index: 4,
								name: '午夜色'
							},
							{
								index: 5,
								name: '红色'
							}
						],
						num: 1
					},
					delivery: [
						{
							index: 0,
							name: '张大成',
							phone: '198****2345',
							address: '河北省 保定市 莲池区 未来石4号楼20221室',
							delivery: '河北省 保定市 莲池区',
							is_default: 1
						},
						{
							index: 1,
							name: '张大成',
							phone: '198****2345',
							address: '河北省 保定市 莲池区 未来石4号楼20221室',
							delivery: '河北省 保定市 莲池区',
							is_default: 0
						},
						{
							index: 2,
							name: '张大成',
							phone: '198****2345',
							address: '河北省 保定市 莲池区 未来石4号楼20221室',
							delivery: '河北省 保定市 莲池区',
							is_default: 0
						}
					],
					detail: ['/static/images/index/class_img1.png','/static/images/index/class_img2.png','/static/images/index/class_img1.png','/static/images/index/class_img2.png',],
					is_collect: 0,
				},
				normStr: '',
				norm: '',
				color: '',
				delivery: '',
				norm_show: false,
				addr_show: false,
				norm_active: -1,
				color_active:-1,
				is_buy: 0,
			}
		},
		onLoad() {
			that = this
			that.delivery = that.pageData.delivery[0].delivery
			that.pageData.delivery[0].checked = true
		},
		onPageScroll(e) {
			if(e.scrollTop < 530) {
				that.nav_active = 1
			} else {
				that.nav_active = 2
			}
		},
		methods: {
			// 返回
			leftClick() {
				$api.jump(-1)
			},
			// 切换导航栏
			changeNav(index) {
				that.nav_active = index
				if(index == 1) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				} else {
					uni.pageScrollTo({
						scrollTop: 530,
						duration: 300
					});
				}
			},
			// 收藏
			collect() {
				if(that.pageData.is_collect == 0) {
					that.pageData.is_collect = 1
					$api.req({
						url: '/data/api.Goods/collection',
						data: {
							goods_id: '4',
						}
					}, function(res) {
						if(res.code == 1) {
							console.log(res);
						}
					})
					// $api.info('收藏成功')
				} else {
					that.pageData.is_collect = 0
					$api.info('取消收藏')
				}
			},
			// 打开规格
			openNorm() {
				that.norm_show = true
			},
			// 打开配送
			openAddr() {
				that.addr_show = true
			},
			// 选择规格
			selectNorm(index) {
				that.norm_active = index
				that.norm = that.pageData.norm.normList[index].name
				that.normStr = that.norm + ' ' + that.color + ' ' + 'X' + that.pageData.norm.num
			},
			// 选择颜色
			selectColor(index) {
				that.color_active = index
				that.color = that.pageData.norm.colorList[index].name
				that.normStr = that.norm + ' ' + that.color + ' ' + 'X' + that.pageData.norm.num
			},
			// 选择数量
			changeNum(e) {
				that.pageData.norm.num = e.value
				that.normStr = that.norm + ' ' + that.color + ' ' + 'X' + that.pageData.norm.num
			},
			// 选择地址
			selectAddr(index) {
				for(var i=0;i<that.pageData.delivery.length;i++) {
					if(i == index) {
						console.log(i);
						that.$set(that.pageData.delivery[i],'checked',1)
						that.delivery = that.pageData.delivery[i].delivery
					} else {
						that.$set(that.pageData.delivery[i],'checked',0)
					}
				}
			},
			// 加入购物车
			addCart() {
				if(that.norm == '' && that.color == '') {
					that.openNorm()
				} else {
					$api.info('加入购物车成功')
					that.close()
				}
			},
			// 立即购买
			buy() {
				
				if(that.norm == '' && that.color == '') {
					that.is_buy = 1
					that.openNorm()
				} else {
					$api.jump('/page_shop/pages/good/submit')
					that.close()
				}
			},
			// 确定选择规格
			sure() {
				console.log(that.norm);
				console.log(that.color);
				if(that.norm == '' || that.color == '') {
					$api.info('请选择规格')
					return
				}
				if(that.is_buy == 1) {
					that.buy()
				} else {
					that.addCart()
				}
				
			},
			// 关闭弹窗
			close() {
				that.norm_show = false
				that.addr_show = false
			},
			// 选择其他收货地址
			select() {
				$api.jump('/page_shop/pages/address/list')
				that.close()
			},
			// 店铺
			toShop() {
				$api.jump('/page_shop/pages/good/shop')
			},
			// 购物车
			toCart() {
				$api.jump('/page_shop/pages/mine/cart')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F5F5F5;
		.nav_item {
			font-size: 32rpx;
			font-weight: 500;
			color: #999999;
			line-height: 50rpx;
			margin-right: 88rpx;
		}
		.nav_active {
			color: #222222;
			position: relative;
		}
		.nav_active::after {
			content: "";
			position: absolute;
			bottom: -8rpx;
			left: 11rpx;
			width: 40rpx;
			height: 8rpx;
			background: #506DFF;
			border-radius: 6rpx;
		}
		.swiper {
			width: 100%;
			margin: 0 0 10rpx;
			.indicator {
				@include flex(row);
				justify-content: center;
		
			}
		
			.indicator-num {
				padding: 4rpx 0;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 20rpx;
				width: 72rpx;
				@include flex;
				justify-content: center;
		
				&__text {
					 color: #FFFFFF;
					 font-size: 24rpx;
					 font-weight: 400;
					 line-height: 30rpx;
				 }
			}	
		}
		.box {
			margin: 10rpx auto;
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 26rpx 20rpx;
			
			.price {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF5959;
				line-height: 38rpx;
			}
			.name {
				margin-top: 20rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
			}
			.bottom_img {
				width: 40rpx;
				height: 40rpx;
			}
			.pad-20 {
				padding: 40rpx 0 0;
			} 
			.label {
				font-size: 26rpx;
				font-weight: 400;
				color: #979797;
				line-height: 36rpx;
				padding-right: 32rpx;
			}
			.text_style2 {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}
			
		}
		.box1 {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 10rpx auto 186rpx;
			box-sizing: border-box;
			padding: 26rpx 0;
			.title {
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
				line-height: 42rpx;
				width: 100%;
				text-align: center;
				padding: 30rpx 0;
			}
			.detail_img {
				width: 100%;
				padding-bottom: 20rpx;
			}
		}
		.text_style1 {
			font-size: 20rpx;
			font-weight: 400;
			color: #444444;
			margin-top: 6rpx;
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 74rpx;
			
			.btn1 {
				width: 220rpx;
				height: 72rpx;
				background: #FFCA43;
				border-radius: 38rpx 0px 0px 38rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
			.btn2 {
				width: 220rpx;
				height: 72rpx;
				background: #506DFF;
				border-radius: 0px 38rpx 38rpx 0px;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
			.bottom_img {
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		.popu {
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 48rpx 30rpx;
			.popu_img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
			}
			.popu_right {
				height: 124rpx;
				margin: 20rpx 0 16rpx;
				.popu_price {
					font-size: 28rpx;
					font-weight: 400;
					color: #FF4747;
					line-height: 34rpx;
				}
				.popu_norm {
					font-size: 24rpx;
					font-weight: 400;
					color: #A7A7A7;
					line-height: 34rpx;
				}
			}
			.popu_title {
				font-size: 28rpx;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				padding: 20rpx 0;
			}
			.box_bg {
				background: #F5F5F5;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 24rpx 20rpx;
				margin: 10rpx 0;
				.check_img {
					width: 24rpx;
					height: 24rpx;
				}
				.popu_right2 {
					padding-left: 30rpx;
					
					.popu_name {
						font-size: 28rpx;
						font-weight: 500;
						color: #222222;
						line-height: 40rpx;
					}
					.popu_phone {
						padding-left: 16rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 16px;
					}
					.popu_addr {
						padding: 16rpx 0 0;
						font-size: 24rpx;
						font-weight: 400;
						color: #444444;
						line-height: 34rpx;
					}
				}
			}
			
			.popu_box {
				background: #F4F4F4;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				line-height: 36rpx;
				padding: 14rpx 36rpx;
				margin: 0 22rpx 28rpx 0;
			}
			// .popu_box:nth-child(4n+4) {
			// 	margin: 0 0 28rpx 0;
			// }
			.sele_active {
				background: #F1F4FF;
				border: 1px solid #5471FF;
				color: #506DFF;
			}
			.sure_btn {
				width: 100%;
				height: 84rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
				margin-top: 94rpx;
			}
			
		}
	}
</style>