wx-qhb/pageD/homepage/homepage.vue

<template>
	<view class="page">
		<!-- 页面渐变色背景 -->
		<view class="shadow"> </view>
		<!-- 页面渐变色背景 -->
		<view class="content">
			<view class="top-information">
				<image class="user-header" :src="userInfo.image" mode=""> </image>
				<view class="btn-list">
					<!--v-if="show"  -->
					<button class="btn-1" @click="tochat">
						<u-icon color="#f83224" size="14" name="kefu-ermai"></u-icon>客服
					</button>
					<button v-if="isShow != '1' && userInfo.is_interest == 1" class="btn-1" @click="followTeam(0)">
						<u-icon color="#f83224" size="14" name="plus"></u-icon>关注
					</button>
					<button class="btn-1" v-if="userInfo.is_interest == 0" @click="followTeam(1)">
						已关注
					</button>
				</view>
				<view class="name"> {{ userInfo.merchant_name }} </view>

				<view class="score">
					<u-rate count="5" disabled :allowHalf="true" :gutter="1" inactiveColor="#ffacab"
						activeColor="#FF1515" v-model="userInfo.score" :size="12"></u-rate>
					<text class="num">{{ userInfo.score }}</text>
				</view>
				<view class="sale">
					<view class="">
						销售量
						<text space="nbsp">{{ "&nbsp;" }} {{ userInfo.sales_num }}</text>
					</view>
					<text space="nbsp" class="shu">{{ "&nbsp;&nbsp;" }} | {{ "&nbsp;&nbsp;" }}</text>
					<view class="">
						评价总数
						<text space="nbsp">{{ "&nbsp;" }} {{ userInfo.comment_num }}</text>
					</view>
				</view>
			</view>

			<view class="goods-list">
				<view class="tab-list">
					<view :class="{ tab: selectTab == 1 }" @click="switchTab(1)">
						默认
					</view>
					<view :class="{ tab: selectTab == 2 }" @click="switchTab(2)">新品</view>
					<view :class="{ tab: selectTab == 3 }" @click="switchTab(3)">销量</view>
					<view class="price" :class="{ tab: selectTab == 4 }" @click="switchTab(4)">价格
						<view style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 6rpx;
                margin-top: 4rpx;
              ">
							<u-icon name="arrow-up-fill" size="6"
								:color="iconUp == 1 ? '#f83224' : '#303133'"></u-icon><u-icon
								:color="iconUp == 2 ? '#f83224' : '#303133'" size="6" name="arrow-down-fill"></u-icon>
						</view>
					</view>
				</view>
				<view class="goods">
					<GoodsCard v-for="item in goodsList" :key="item.id" :itemInfo="item" @toDetail="toDetail" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsCard from "./component/goodsCard.vue";
	export default {
		components: {
			GoodsCard,
		},
		data() {
			return {
				value: 4,
				selectTab: 0,
				iconUp: 0,
				isShow: "2", //是否可关注
				userId: "",
				userInfo: {}, //用户信息
				goodsList: [],
				user_other: {},
				user_other_no: "",
				show: "",
				page: 1,
				last_page: 1
			};
		},
		onLoad(option) {
			if (option.page) {
				this.isShow = option.page;
			}
			if (option.user_other) {
				this.user_other = JSON.parse(decodeURIComponent(option.user_other));
			}
			this.show = option.show;
			this.userId = option.merchant_id;
			this.user_other_no = option.user_other_no;
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getCommodityList()
			} else {
				this.$u.toast('已无更多数据')
			}
		},
		methods: {
			tochat() {
				uni.navigateTo({
					url: "/pageA/chat/chat?user_other=" +
						encodeURIComponent(JSON.stringify(this.user_other)) +
						"&user_other_no=" +
						this.user_other_no,
				});
			},
			switchTab(num) {
				this.selectTab = num;
				if (num == 4) {
					// this.iconUp = this.iconUp == 0 ? 1:2
					// if(this.iconUp == 2){
					// 	this.iconUp =1
					// }
					switch (this.iconUp) {
						case 1:
							this.iconUp = 2;
							break;
						case 0:
							this.iconUp = 1;
							break;
						case 2:
							this.iconUp = 1;
							break;
					}
				} else {
					this.iconUp = 0;
				}
			},
			toDetail(item) {
				console.log(item);
				// return;
				uni.navigateTo({
					url: `/pageA/productdetails?id=${item.id}`,
				});
			},

			//关注 or 取消关注 店铺
			followTeam(num) {
				uni.$u.http
					.post(`/api/interest/follow`, {
						interest_type: 1,
						interest_id: this.userInfo.id,
					})
					.then((res) => {
						this.userInfo.is_interest = num;
						uni.showToast({
							title: !num ? "关注成功" : "取消关注",
							icon: "none",
						});
					});
			},
			getCommodityList(status = "") {
				//获取用户信息
				uni.$u.http
					.get(`/api/merchant/info?merchant_id=${this.userId}`)
					.then((res) => {
						this.userInfo = res;
					});

				//获取店铺商品
				uni.$u.http
					.post(`/api/goods/merchant_goods`, {
						page: this.page,
						limit: 10,
						merchant_id: this.userId,
						status: status,
						keywords: this.keywords,
						source: this.source,
					})
					.then((res) => {
						this.last_page = res.last_page
						if(this.page==1){
							this.goodsList = res.data;
						}else{
							this.goodsList = this.goodsList.concat(res.data)
						}
					});
			},
		},
		mounted() {
			this.getCommodityList();
			//设置顶部导航栏颜色
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#f74639",
			});
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.shadow {
			position: absolute;
			top: 0;
			height: 300px;
			width: 100%;
			background: linear-gradient(#f74639, #f4f4f4);
			z-index: -1;
		}

		.content {
			padding: 20rpx 24rpx;
			margin-top: 76rpx;

			.top-information {
				position: relative;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 28rpx 24rpx;

				::v-deep .u-icon__icon {
					color: #f83224 !important;
				}

				.user-header {
					width: 164rpx;
					height: 164rpx;
					border-radius: 50%;
					border: 2rpx solid #fff;
					position: absolute;
					top: -80rpx;
					left: 28rpx;
				}

				.btn-list {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 100rpx;

					.btn-1 {
						border: 2rpx solid #f83224;
						background-color: #fff;
						color: #f83224;
						padding: 0;
						margin: 0;
						display: flex;
						justify-content: space-around;
						align-items: center;
						height: 52rpx;
						border-radius: 24rpx;
						line-height: 52rpx;
						font-size: 26rpx;
						padding: 0 28rpx;
						margin-left: 20rpx;
					}
				}

				.name {
					margin-top: 28rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}

				.score {
					width: 30%;
					height: 28rpx;
					background-color: rgba(255, 27, 0, 0.1);
					display: flex;
					border-radius: 12rpx;
					margin-top: 16rpx;
					justify-content: space-around;

					.num {
						font-size: 22rpx;
						color: #ff1515;
						font-weight: 600;
					}
				}

				.sale {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #777;
					margin-top: 20rpx;

					.shu {
						font-size: 16rpx;
						color: #979797;
						opacity: 0.2;
					}
				}
			}
		}

		.goods-list {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 0 20rpx;
			margin-top: 20rpx;

			.tab-list {
				height: 96rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 26rpx;
				color: #333333;
				border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
				margin-bottom: 20rpx;

				.tab {
					color: #000;
					font-weight: 600;
				}

				.price {
					display: flex;
					align-items: center;
				}
			}

			.goods {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}
	}
</style>