cbz/page_shop/pages/base/base.vue

<template>
	<view class="content">
		<view class="box">
			<view class="tabs hflex acenter">
				<block v-for="(item,index) in tabs" :key="index">
					<view class="hflex acenter" style="padding-right: 68rpx;">
						<view class="tab_item" :class="tab_active == index ? 'tab_active': ''" @click="changeTab(index)">{{item.name}}</view>
						<view class="vflex acenter jcenter" v-if="index == 2">
							<u-icon name="arrow-up-fill" :color="color" size="10"></u-icon>
							<u-icon name="arrow-down-fill" :color="color2" size="10"></u-icon>
						</view>
					</view>
				</block>
			</view>
			<view class="menuList hflex jbetween">
				<scroll-view scroll-y="true" class="menu_left">
					<view class="vflex">
						<block v-for="(item,index) in titleList" :key="index">
							<view class="left_item text_hide hflex acenter" :class="index == left_active? 'left_active':''" @click="clickTab1(index)">
								<text class="text_hide" style="width:100%; text-align: center;">{{item.name}}</text>
							</view>
						</block>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="menu_right">
					<view class="vflex">
						<block v-for="(item,index) in pageList" :key="index">
							<view class="right_item hflex acenter" @click="toDetail2(item.id)">
								<image :src="item.cover[0]" class="item_cover" mode="aspectFill"></image>
								<view class="goodsDesc">
									<text class="item_title">{{item.name}}</text>
									<view class="hflex acenter jbetween">
										<view class="item_price">￥{{item.price_selling}}</view>
										<image src="/static/images/shop/add-cart.png" style="width: 44rpx;height: 44rpx;" @tap.stop="addCart(index)"></image>
									</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-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="pageList[good_index].items[norm_active].show_image?pageList[good_index].items[norm_active].show_image:pageList[good_index].cover" class="popu_img" mode="aspectFill"></image>
					<view class="vflex jbetween popu_right">
						<view class="popu_price">￥{{pageList[index].items[norm_active].price_selling?pageList[index].items[norm_active].price_selling:pageList[index].price_selling}}</view>
						<view class="popu_norm text_hide">{{normStr?normStr:'选择规格'}}</view>
					</view>
				</view>
				<view class="" v-for="(item,index) in pageList[index].specs" :key="index">
					<view class="popu_title">{{item.name}}</view>
					<view class="hflex acenter fwrap">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<view class="popu_box" @click="selectNorm(index,index2)" :class="item2.select?'sele_active':''" v-if="item2.show && item2.check">{{item2.name}}</view>
							<view class="popu_box popu_box2" v-else @click="selectNorm2">{{item2.name}}</view>
						</block>
					</view>
				</view>
				<view class="hflex acenter jbetween">
					<view class="popu_title">数量</view>
					<u-number-box v-model="pageList[index].num" @change="changeNum"></u-number-box>
				</view>
				<view class="sure_btn" @click="sure">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				titleList: [],
				pageList: [],
				tabs: [
					{
						index: 0,
						name: '全部',
					},
					{
						index: 1,
						name: '销量',
					},
					{
						index: 2,
						name: '价格',
					}
				],
				tab_active: 0,
				color: '#7D7D7D',
				color2: '#7D7D7D',
				cateids: '',
				bartitle: '',
				norm_show: false,
				normStr: '',
				norm: '',
				color: '',
				delivery: '',
				num: 1,
				norm_active: -1,
				color_active:-1,
				index: 0,
				page:1,
				limit: 10,
				total: 10,
				type1: false,
				type2: false,
				id: '',
				left_active: -1,
			}
		},
	 	onLoad(options) {
			that = this
			console.log('options===',options);
			if(options.data) {
				var option = JSON.parse(options.data)
				that.titleList = option
				// that.id = option[0].id
				// that.getDate()
			}
			that.id = options.id
			that.pageList = []
			that.getDate()
			that.bartitle = options.name
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: that.bartitle
			});
		},
		onReachBottom() {
			if (Number(that.page) * Number(that.limit) >= Number(that.total)) {
				$api.info("没有更多了")
			} else {
				that.page++
				that.getDate()
			} 
		},
		methods: {
			// 获取产品数据
			getDate() {
				$api.req({
					url: '/data/api.Goods/getGoods',
					data: {
						page: that.page,
						cateids: that.left_active != -1? that.titleList[that.left_active].id : that.id,
						admin_id: '',
						name: '',
						sales_order: that.tab_active == 1 ? !that.type1 ? 'asc' : 'desc' : '',
						price_order: that.tab_active != 2 ? '' : !that.type2 ? 'asc' : 'desc',
					}
				}, function(res) {
					if(res.code == 1) {
						// that.$set(that.pageList[index],'goods',res.data.list)
						// that.pageList[index].goods = res.data
						that.total = res.data.page.total
						that.pageList = that.pageList.concat(res.data.list)
						for(var i=0;i<that.pageList.length;i++) {
							that.pageList[i].cover = that.pageList[i].cover.split('|')
						}
					}
				})
			},
			/* // 点击产品列表
			myEvent(e) {
				console.log(e);
				
			},
			// 点击菜单列表
			myMenu(e) {
				console.log('menu',e);
				that.id = e.id
				that.getDate()
			}, */
			addCart(e) {
				that.norm_show = true
				that.index = e
				
			},
			// 切换tabs
			changeTab(e) {
				console.log(e);
				that.tab_active = e
				if(that.tab_active == 0) {
					that.left_active = -1
				}
				if(that.tab_active == 1) {
					that.type1 = !that.type1
				}
				if(that.tab_active == 2) {
					that.type2 = !that.type2
					if(that.type2) {
						that.color = '#506dff'
						that.color2 = '#7D7D7D'
					} else {
						that.color = '#7D7D7D'
						that.color2 = '#506dff'
					}
				}
				that.page = 1
				that.pageList = []
				that.getDate()
			},
			clickTab1(e) {
				that.left_active = e
				that.page = 1
				that.pageList = []
				that.getDate()
			},
			close() {
				that.norm_show = false
				that.num = 1
			},
			toDetail2(id) {
				$api.jump('/page_shop/pages/good/detail?id=' + id)
			},
			// 选择规格
			selectNorm(index,index2) {
				for(var i=0;i<that.pageList[that.index].specs[index].list.length;i++) {
					if(i == index2) {
						that.$set(that.pageList[that.index].specs[index].list[i],'select',true)
					} else {
						that.$set(that.pageList[that.index].specs[index].list[i],'select',false)
					}
				}
				that.normStr = ''
				that.item_id = ''
				for(var i=0;i<that.pageList[that.index].specs.length;i++) {
					for(var j=0;j<that.pageList[that.index].specs[i].list.length;j++) {
						if(that.pageList[that.index].specs[i].list[j].select) {
							that.normStr += that.pageList[that.index].specs[i].name+'::'+that.pageList[that.index].specs[i].list[j].name+';;'
							// that.item_id += 
						}
					}
				}
				that.normStr = that.normStr.substring(0, that.normStr.length-2)
				for(var i=0;i<that.pageList[that.index].items.length;i++) {
					if(that.pageList[that.index].items[i].goods_spec == that.normStr) {
						that.norm_active = i
					}
				}
				that.normStr = $api.resetspec(that.normStr)
				// that.norm_active = index2
				// that.normStr = that.pageData.items[index].goods_spec
				// that.normStr = that.norm + ' ' + that.color + ' ' + 'X' + that.pageData.norm.num
			},
			selectNorm2() {
				$api.info('该规格已下架，请重新选择')
			},
			// 选择数量
			changeNum(e) {
				that.num = e.value
				// that.normStr = that.norm + ' ' + that.color + ' ' + 'X' + that.num
			},
			sure() {
				
				$api.req({
					url: '/data/api.Goods/cart_add',
					method: 'POST',
					data: {
						admin_id: that.pageList[that.index].admin_id,
						goods_id: that.pageList[that.index].id,
						item_id: that.pageList[that.index].items[that.norm_active].id,
						num: that.num
					}
				}, function(res) {
					if(res.code == 1) {
						console.log(res);
						$api.info(res.info)
						that.num = 1
						that.close()
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F4F4F4;
		padding-top: 24rpx;
		.box {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			.tabs {
				width: 100%;
				box-sizing: border-box;
				padding: 34rpx 30rpx 40rpx;
				.tab_item {
					font-size: 32rpx;
					font-weight: 500;
					color: #7D7D7D;
					line-height: 44rpx;
					padding-right: 10rpx;
				}
				.tab_active {
					font-size: 36rpx;
					font-weight: 500;
					color: #222222;
					line-height: 50rpx;
					position: relative;
				}
				.tab_active::after {
					content: "";
					position: absolute;
					left: 18rpx;
					bottom: -5rpx;
					width: 40rpx;
					height: 8rpx;
					background: #506DFF;
					border-radius: 4rpx;
				}
			}
			.menuList {
				width: 100%;
				height: calc(100vh - 150rpx);
				margin-bottom: 20rpx;
				.menu_left {
					width: 200rpx;
					height: calc(100vh - 150rpx);
					background: #F5F5F5;
					border-radius: 0px 28rpx 0px 0px;
					.left_item {
						width: 180rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						line-height: 40rpx;
						padding: 30rpx 20rpx;
					}
					.left_active {
						color: #506DFF;
						background: #fff;
					}
				}
				.menu_right {
					width: 550rpx;
					height: calc(100vh - 150rpx);
					background: #FFFFFF;
					position: relative;
					.right_tab {
						background: #F3F3F7;
						border-radius: 24rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #393939;
						line-height: 48rpx;
						padding: 0 24rpx;
						height: 48rpx;
						margin-right: 20rpx;
						
					}
					.right_tab:nth-last-child(1) {
						margin-right: 80rpx;
					}
					.right_tab_active {
						background: #E7EBFF;
						border: 1rpx solid #5471FF;
						color: #5B77FF;
					}
					.cate_bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: rgba(0,0,0,0.4);
						z-index: 9;
						.cate_top {
							width: 100%;
							box-sizing: border-box;
							padding: 24rpx 20rpx;
							background: #FFFFFF;
							.top_left {
								font-size: 26rpx;
								font-weight: 500;
								color: #393939;
								line-height: 32rpx;
							}
							.top_text {
								font-size: 16rpx;
								font-weight: 400;
								color: #393939;
								line-height: 22rpx;
							}
							.cate {
								height: 48rpx;
								background: #F3F3F7;
								border-radius: 24rpx;
								padding: 0 24rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: #393939;
								line-height: 32rpx;
								margin: 24rpx 20rpx 0 0;
							}
							.cate_active {
								background: #E7EBFF;
								border: 1px solid #5471FF;
								color: #5B77FF;
							}
						}
					}
					.tabs_text {
						position: absolute;
						z-index: 99;
						right: 0;
						top: 0;
						width: 80rpx;
						height: 56rpx;
						background: #FFFFFF;
						font-size: 20rpx;
						font-weight: 400;
						color: #393939;
						line-height: 48rpx;
					}
					.right_item {
						width: 100%;
						box-sizing: border-box;
						padding: 10rpx 20rpx;
						.item_cover {
							width: 144rpx;
							height: 144rpx;
							border-radius: 16rpx;
						}
						.goodsDesc {
							width: calc(100% - 164rpx);
							margin-left: 20rpx;
						}
						.item_left {
							position: relative;
							.item_cover {
								width: 144rpx;
								height: 144rpx;
								border-radius: 16rpx;
								margin-right: 20rpx;
							}
							.bq1 {
								position: absolute;
								top: 0;
								right: 20rpx;
								width: 60rpx;
								height: 60rpx;
							}
						}
						.item_title {
							font-size: 28rpx;
							font-weight: 500;
							color: #222222;
							line-height: 40rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							box-orient: vertical;
							line-clamp: 2;
							-webkit-line-clamp: 2;
						}
						.item_price {
							margin-top: 22rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #FF2626;
							line-height: 32rpx;
						}
						.item_bottom {
							width: 100%;
							padding: 20rpx;
							.btn1 {
								width: 120rpx;
								height: 48rpx;
								border-radius: 4rpx;
								border: 1rpx solid #708AFF;
								margin-left: 32rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #5B77FF;
								line-height: 40rpx;
							}
							.btn2 {
								border: 1px solid #979797;
								color: #222222;
							}
						}
					}
				}
			}
		}
		.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 {
					max-width: 450rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #A7A7A7;
					line-height: 34rpx;
				}
			}
			.popu_title {
				font-size: 28rpx;
				font-weight: 600;
				color: #222222;
				line-height: 40rpx;
				margin: 15rpx 0;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
			}
			.address {
				.address_img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					margin-bottom: 20rpx;
				}
				.address_text {
					text-align: center;
					font-size: 28rpx;
					color: #222222;
					line-height: 40rpx;
				}
			}
			.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: 7rpx 36rpx;
				margin: 0 22rpx 28rpx 0;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
			}
			.popu_box2 {
				background-color: #5b5b5b;
			}
			// .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>