cbz/page_shop/pages/good/shop.vue

<template>
	<view class="content">
		<view class="top">
			<u-navbar title=" " @leftClick="leftClick" height="44px" bgColor="rgb(255,255,255,0)" :placeholder="true">
				<view class="u-nav-slot" slot="center"> 
					<u-search placeholder="店铺热搜" v-model="keyword" :showAction="false" @search="search"></u-search>
				</view>
			</u-navbar>
		</view>
		<view class="box vflex">
			<view class="box_top hflex acenter" @click="toDetail">
				<image :src="shop.head_img" mode="aspectFill" class="avatar"></image>
				<view class="top_name">{{shop.company}}</view>
			</view>
			<view class="addr hflex acenter jbetween">
				<view class="addr_text text_hide">{{shop.address}}</view>
				<image src="/static/images/shop/map_icon.png" class="addr_icon"></image>
			</view>
			<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 cateList" :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 class="bottom hflex acenter jbetween">
				<view class="vflex acenter" @click="tellPhone">
					<u-icon name="phone-fill" color="#506dff" size="20"></u-icon>
					<view class="text_style1">打电话</view>	
				</view>	
				<view class="hflex acenter jcenter btn" @click="contact">
					<image class="btn_icon" src="/static/images/shop/consulting.png"></image>
					<view class="btn_text">咨询客服</view>
				</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[good_index].items[norm_active].price_selling?pageList[good_index].items[norm_active].price_selling:pageList[good_index].price_selling}}</view>
						<view class="popu_norm text_hide">{{normStr?normStr:'选择规格'}}</view>
					</view>
				</view>
				<view class="" v-for="(item,index) in pageList[good_index].specs" :key="index">
					<view class="popu_title text_hide">{{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 text_hide">数量</view>
					<u-number-box v-model="pageList[good_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 {
				keyword: '',
				shop: {
				},
				tabs: [
					{
						index: 0,
						name: '全部',
					},
					{
						index: 1,
						name: '销量',
					},
					{
						index: 2,
						name: '价格',
					}
				],
				tab_active: 0,
				color: '#7D7D7D',
				color2: '#7D7D7D',
				cateids: '',
				normStr: '',
				norm: '',
				norm_active: -1,
				id: '',
				left_active: -1,
				admin_id: '',
				pageList: [],
				type1: true,
				type2: true,
				left_active: -1,
				cateList: [],
				good_index: 0,
				norm_show: false,
				num: 1,
			}
		},
		onLoad(options) {
			that = this
			that.admin_id = options.id
			that.getCate()
			that.getData()
			that.getList()
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			getData() {
				$api.req({
					url: '/data/api.Goods/user_info',
					method: 'POST',
					data: {
						admin_id: that.admin_id
					}
				}, function(res) {
					if(res.code == 1) {
						that.shop = res.data
					}
				})
			},
			getCate() {
				$api.req({
					url: '/data/api.Goods/getCate',
				}, function(res) {
					if(res.code == 1) {
						that.cateList = res.data
					}
				})
			},
			getList() {
				$api.req({
					url: '/data/api.Goods/getGoods',
					data: {
						cateids: that.left_active == -1 ? '' : that.cateList[that.left_active].id,
						admin_id: that.admin_id,
						name: that.keyword,
						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.pageList = res.data.list
						for(var i=0;i<that.pageList.length;i++) {
							that.pageList[i].cover = that.pageList[i].cover.split('|')
						}
					}
				})
			},
			search() {
				that.getList()
			},
			toDetail2(id) {
				$api.jump('/page_shop/pages/good/detail?id=' + id)
			},
			// 店铺详情
			toDetail() {
				$api.jump('/page_shop/pages/good/shopDetail?admin_id=' + that.admin_id)
			},
			addCart(index) {
				that.norm_show = true
				that.good_index = index
			},
			close() {
				that.norm_show = false
				that.num = 1
			},
			// 切换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.getList()
			},
			
			clickTab1(e) {
				that.left_active = e
				that.getList()
			},
			// 打电话
			tellPhone() {
				var value = that.shop.contact_phone
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			},
			contact() {
				var my = uni.getStorageSync("myUsername");
				var nameList = {
				  myName: my,
				  your: that.shop.huanxinID,
				};
				uni.navigateTo({
				  url: "/pages/chatroom/chatroom?username=" + JSON.stringify(nameList),
				});
			},
			// 选择规格
			selectNorm(index,index2) {
				for(var i=0;i<that.pageList[that.good_index].specs[index].list.length;i++) {
					if(i == index2) {
						that.$set(that.pageList[that.good_index].specs[index].list[i],'select',true)
					} else {
						that.$set(that.pageList[that.good_index].specs[index].list[i],'select',false)
					}
				}
				that.normStr = ''
				that.item_id = ''
				for(var i=0;i<that.pageList[that.good_index].specs.length;i++) {
					for(var j=0;j<that.pageList[that.good_index].specs[i].list.length;j++) {
						if(that.pageList[that.good_index].specs[i].list[j].select) {
							that.normStr += that.pageList[that.good_index].specs[i].name+'::'+that.pageList[that.good_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.good_index].items.length;i++) {
					if(that.pageList[that.good_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.good_index].admin_id,
						goods_id: that.pageList[that.good_index].id,
						item_id: that.pageList[that.good_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 {
		position: relative;
		.top {
			background: url('https://ship.shipcc.cn/common/nav_bg.png') no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			height: 540rpx;
			.u-nav-slot {
				position: absolute;
				top: 8rpx;
				left: 134rpx;
			}
		}
		.box {
			position: absolute;
			left: 0;
			top: 240rpx;
			width: 100%;
			min-height: calc(100vh - 240rpx);
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0  0;
			.box_top {
				position: relative;
				.avatar {
					position: absolute;
					left: 30rpx;
					top: -52rpx;
					width: 148rpx;
					height: 148rpx;
					border-radius: 50%;
					border: 4rpx solid #FFFFFF;
				}
				.top_name {
					font-size: 40rpx;
					font-weight: 500;
					color: #222222;
					line-height: 56rpx;
					padding: 20rpx 0 0 218rpx;
				}
			}
			.addr {
				padding: 44rpx 30rpx 28rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F4F4F4;
				width: 100%;
				.addr_text {
					max-width: 550rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
					line-height: 36rpx ;
				}
				.addr_icon {
					width: 36rpx;
					height: 36rpx;
				}
			}
			.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%;
				min-height: 700rpx;
				margin-bottom: 180rpx;
				overflow: auto;
				.menu_left {
					width: 200rpx;
					height: 100%;
					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: 100%;
					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;
							}
						}
					}
				}
			}
			.bottom {
				width: 100%;
				z-index: 9;
				position: fixed;
				bottom: 0;
				height: 166rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 8rpx 50rpx 74rpx;
				.text_style1 {
					font-size: 20rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 28rpx;
					padding-top: 6rpx;
				}
				.btn {
					width: 550rpx;
					height: 84rpx;
					background: #506DFF;
					border-radius: 42rpx;
				}
				.btn_icon {
					width: 40rpx;
					height: 40rpx;
				}
				.btn_text {
					padding-left: 4rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}
		.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>