ec.uniapp-master/pages/shop/shopdetail.vue

<template>
	<view>
		<lf-nav :spreadOut="false" :showIcon="true" bgColor="transparent!important"></lf-nav>
		<view class="shop-head">
			<image class="lf-w-100 lf-h-100" :src="detail.images[0].path" mode="aspectFill"></image>
		</view>
		<view class="shop-title">
			<view class="shop-flex">
				<view class="shop-img">
					<image class="shop-img" :src="detail.logo" mode="widthFix"></image>
				</view>
				<view>
					<view class="lf-color-black lf-font-36">{{ detail.name }}</view>
					<view class="lf-font-24 lf-color-black">
						<text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text>
						<text class="lf-m-l-10">{{ detail.floor }}</text>
					</view>
				</view>
			</view>
			<view class="function-total">
				<button class="lf-row-center lf-flex-column menu-btn" @click="call">
					<view><text class="lf-iconfont icon-pinglun shop-function"></text></view>
					<view class="lf-font-24 lf-color-33">客服</view>
				</button>
				<button class="lf-row-center lf-flex-column menu-btn" @click="switchCollect">
					<view>
						<text class="lf-iconfont icon-shoucang2 shop-function lf-color-price" v-if="is_collect"></text>
						<text class="lf-iconfont icon-shoucang11 shop-function" v-else></text>
					</view>
					<view class="lf-font-24 lf-color-333">{{ is_collect ? '已收藏' : '收藏' }}</view>
				</button>
				<button class="lf-row-center lf-flex-column menu-btn" open-type="share">
					<view><text class="lf-iconfont icon-fenxiang shop-function"></text></view>
					<view class="lf-font-24 lf-color-333">分享</view>
				</button>
			</view>
		</view>
		<view v-if="title_tab.length">
			<u-tabs :list="title_tab" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs>
		</view>
		<!-- 推荐 -->
		<view v-if="title_current==0">
			<view class="lf-row-between lf-p-l-32 lf-p-t-40 lf-p-r-32">
				<view class="lf-font-32 lf-color-black lf-font-bold">在售商品</view>
				<view class="lf-font-24 lf-color-555" @click="titletabChange(1)">
					<text>查看全部</text>
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
				</view>
			</view>
			<view class="recommend-box" >
				<view class="goods-rom" v-for="(item,index) of detail.goods" :key="index" v-if="detail.goods.length" @click="$url('/pages/shop/goodsdetail?id='+item.id)">
					<!-- <u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.img" :index="index">
					</u-lazy-load> -->
					<image :src="item.picture" mode="aspectFill" style="width: 332rpx;height: 332rpx;border-radius: 20rpx 20rpx 0 0;"></image>
					<view class="lf-p-20">
						<view class="list-title">
							{{item.img}}
						</view>
						<view class="list-price">
							<!-- <text>{{item.price}}元</text> -->
							<lf-price :price="item.min_price"></lf-price>
							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.min_market_price}}</text>
						</view>
					</view>
				</view>
				<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent>
			</view>
			
			<view class="introduct">
				<text class="lf-font-32 lf-color-black">品牌故事</text>
				<view class="lf-font-28 lf-color-333 lf-m-t-20">{{ detail.story }}</view>
			</view>
		</view>
		
		
		
		<view class="lf-p-t-30 lf-p-b-30" v-else>
			<view class="lf-m-b-30 lf-flex lf-w-100">
				<u-icon name="search" class="search-icon"></u-icon>
				<input class="rom-search" v-model="search_val" @confirm="search" type="text" placeholder="请输入商品名称" />
			</view>
			<view class="special_tab">
				<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
			</view>
			<swiper :style="{height: '800rpx', width: '750rpx'}" :current="current" @change="swiperChange">
				<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
					<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
						<view class="lf-m-t-20"></view>
						<lf-waterfall :ifsale="false" :list="tabItem.list" :listlength="tab_list.length" :tabindex='tabIndex' ref="uWaterfallFather"></lf-waterfall>
						<view class="loading-more lf-m-b-10">
							<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
							<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent>
						<!-- 	<view> 
								{{tabItem.list.length}}
							</view> -->
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
	export default {
		components: {
			lfWaterfall
		},
		data() {
			return {
				title_tab: [
					{name:'推荐'},
					{name:'商品'}
				],
				tab_list: [],
				current: 0,
				title_current:0,
				brand_id: 0,
				detail: {},
				search_val: '',
				is_collect: false
			}
		},
		onLoad(options){
			this.brand_id = options.id;
			this.getShopDetail();
		},
		methods: {
			// 切换商品收藏
			switchCollect(){
				let userInfo = this.$cookieStorage.get('user_token') || {};
				if(!userInfo){
					this.$url('/pages/login/index');
					return;
				}
				this.addCollcet()
			},
			addCollcet() {
				this.$http.post({
					api: 'api/collect/create',
					data: {
						type:'jc_brand',
						collect_id: this.brand_id,
					},
					header: {
					   Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					this.$msg(res.data.data);
					this.getShopDetail();
				}).catch(err => {
					console.log("====", err);
				})
			},
			getShopDetail(){
				this.$http.get({
					api: 'api/brand/detail',
					data: {
						brand_id: this.brand_id
					},
					header: {
					   Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					this.detail = res.data.data;
					this.is_collect = Boolean(res.data.data.is_collect) || false;
				})
			},
			tabChange(index){
				this.current = index;
				this.clearTabItem();
				this.getData();
			},
			titletabChange(index){
				this.title_current = index;
				if(this.tab_list.length <= 0){
					this.initGoodsTabs();
					this.getData();
				}
			},
			call(){
				uni.makePhoneCall({
					phoneNumber: String(this.detail.tel)
				})
			},
			initGoodsTabs(){
				let _public = {
					isRefresher: false,
					loadingClass: true,
					loadingText: '正在加载中',
					page: 1,
					isPage: true
				};
				this.tab_list = [{
					name: '综合',
					list: [],
					..._public
				},{
					name: '销量',
					list: [],
					..._public
				},{
					name: '上新',
					list: [],
					..._public
				},{
					name: '价格',
					list: [],
					..._public
				}]
			},
			getData() {
				let par = {
					brand_id: this.brand_id
				}
				let orderBy = ['','sale_count','updated_at','sell_price'][this.current];
				if(orderBy){
					par.orderBy = orderBy;
				}
				if(this.search_val){
					par.keyword = this.search_val;
				}
				this.$http.get({
					api: 'api/store/list',
					data: par
				}).then(res => {
					console.log("getDat", res);
					let tab_item = this.tab_list[this.current];
					let isPage = false; // TODO 默认没有下一页
					tab_item.isPage = isPage;
					if(!isPage){
						tab_item.loadingClass = false;
						tab_item.loadingText = '没有更多数据啦~';
					}
					tab_item.isRefresher = false;
					let data_list = res.data.data || [];
					let list = data_list.map(item => {
						return {
							id: item.id,
							original_price: item.market_price,
							picture: item.img,
							pictures: [item.img],
							price: item.min_price,
							product_id: item.brand_id,
							sale: item.sale_count,
							title: item.name
						}
					})
					if(tab_item.page == 1){
						tab_item.list = list;
					}else{
						tab_item.list.push(...list);
					}
				})
			},
			search(event){
				this.clearTabItem();
				this.getData();
			},
			// 滑块下标值变化
			swiperChange(event){
				this.current = event.detail.current;
				if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
				this.clearTabItem();
				this.getData();
			},
			// 页面触底，加载下一页
			onScrolltolower(){
				let tab_item = this.tab_list[this.current];
				if(tab_item.isPage){
					tab_item.page = tab_item.page + 1;
					this.getData();
				}
			},
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.$u.throttle(() => {
					this.clearTabItem();
					this.getData();
				}, 200);
			},
			clearTabItem(){
				let tab_item = this.tab_list[this.current];
				tab_item.page = 1;
				tab_item.isPage = true;
				tab_item.isRefresher = true;
				tab_item.loadingClass = true;
				tab_item.loadingText = '正在加载中';
				tab_item.list = [];
				this.$set(this.tab_list, this.current, tab_item);
				this.$refs.uWaterfallFather[this.current].clear();
			}
		},
		onShareAppMessage(){
			return {
				title: `给你分享一家店铺[${this.detail.name}]，我觉得很不错哦~`,
				path: '/pages/route/index?route=shop&id='+ this.brand_id
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.search-icon {
		position: relative;
		bottom: 0;
		left: 54rpx;
	}
	/deep/.input-placeholder{
		color: #777;
		font-size: 28rpx;
	}
	.rom-search {
		width: 686rpx;
		height: 60rpx;
		background: #F4F8F8;
		border-radius: 30rpx;
		padding-left: 74rpx;
		font-size: 28rpx;
	}
	.recommend-box{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 32rpx;
		flex-wrap: wrap;
	}
	.goods-rom {
		border-radius: 20rpx;
		width: 333rpx;
		height: max-content;
		background-color: white;
		box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
		&:nth-child(2n) {
			margin-right: 0;
		}
		&:nth-child(n + 3) {
			margin-top: 20rpx;
		}
	}
	.introduct {
		padding: 30rpx 32rpx;
	}
	.com{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0rpx 28rpx;
	}
	.shop-head {
		width: 100%;
		height: 400rpx;
		position: relative;
	}
	.shop-flex {
		display: flex;
		padding: 30rpx;
	}
	.shop-title {
		width: 686rpx;
		height: 274rpx;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		position: relative;
		top: -32rpx;
	}
	.shop-img {
		width: 90rpx;
		height: 90rpx;
		margin-right: 15rpx;
		border-radius: 5rpx;
	}
	.shop-function {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		font-size: 40rpx;
	}
	.function-total {
		display: flex;
		justify-content: space-between;
		padding: 0 65rpx 0 65rpx;
	}
	.menu-btn{
		margin: 0;
		padding: 0;
		background-color: transparent;
		line-height: 1.5;
	}
	
	/deep/.u-scroll-box {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	/deep/.u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 80rpx!important;
		position: absolute;
		left: 0;
		bottom: -12rpx;
	}
	
	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 56rpx!important;
		position: absolute;
		height: 5rpx!important;
		left: 8rpx;
		bottom: -4rpx;
	}
	
	/deep/ .u-tab-item {
		font-size: 28rpx!important;
	}
	
	
	//价格筛选伪类
	// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{
	// 	font-size: 48rpx!important;
	// 	content: '';
		
	// 	color: red;
	// }
	
	// loading加载
	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
	.loading-more-text::before {
		content: '';
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
		animation: weuiLoading 1s steps(12, end) infinite;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
		background-size: 100%;
	}
	@keyframes weuiLoading {
		0% {
			transform: rotate3d(0, 0, 1, 0deg);
		}
		100% {
			transform: rotate3d(0, 0, 1, 360deg);
		}
	}
	
	
	.list-warter {
		border-radius: 20rpx;
		margin: 10px 5px;
		margin-top: 0px;
		background-color: #ffffff;
		// padding: 8px;
		position: relative;
		overflow: hidden;
		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.list-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.list-title {
		font-size: 28rpx;
		font-weight: bold;
		color: $u-main-color;
	}
	
	.list-label{
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,0.5);
		width: 140rpx;
		height: 48rpx;
		border-radius: 20rpx 0rpx 0rpx 0rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}
	
	.list-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.list-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.list-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.list-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
		display: flex;
		align-items: center;
	}
</style>