rhwy-sj/pages/index/index.vue

<template>
	<view class="content">
		<u-navbar title=" " height="88rpx" bgColor="#EE8529" :autoBack="true" :placeholder="true">
			<view class="u-nav-slot" slot="left">
				<view class="left_text">{{communityName}}</view>
			</view>
		</u-navbar>
		<view class="tabs hflex acenter jaround">
			<view class="tabs_item" :class="tab_active == 1 ? 'tab_active' : ''" @click="changeTab(1)">上架商品</view>
			<view class="tabs_item" :class="tab_active == 2 ? 'tab_active' : ''" @click="changeTab(2)">下架商品</view>
		</view>
		<view class="goods hflex">
			<scroll-view class="goods_left" :scroll-y="true">
				<block v-for="(item,index) in leftList" :key="index">
					<view class="left_item" :class="left_active === index ? 'left_active' : ''" @click="selectType(index)">{{item.name}}</view>
				</block>
			</scroll-view>
			<scroll-view class="goods_right" :scroll-y="true" @scrolltolower="scrollBottom">
				<block v-for="(item,index) in pageList" :key="index">
					<view class="hflex acenter jbetween right_item" @click="toDetail(index)">
						<image :src="imgUrl + item.image" mode="aspectFill" class="item_img" v-if="item.image.indexOf('://') == -1"></image>
						<image :src="item.image" mode="aspectFill" class="item_img" v-else></image>
						<view class="vflex" style="width: calc(100% - 154rpx);">
							<view class="item_name text_hide">{{item.name}}</view>
							<view class="item_price" v-if="item.pay_type == 1 || identity == 2 || identity == 3">￥{{item.user_price}}<span class="old_price" v-if="item.original_price">￥{{item.original_price}}</span></view>
							<view class="info" v-if="identity == 4">
								<view class="info_text" v-if="item.pay_type == 1">先付款后服务</view>
								<view class="info_text" v-else>先预约后付款</view>
							</view>
							<view class="hflex acenter jbetween">
								<view class="item_text">总销量：{{identity == 2 ? item.actual_sale + item.sale : item.actual_sale}}</view>
								<image src="@/static/images/inventory.png" v-if="tab_active == 1" mode="aspectFill" class="item_icon"></image>
								<image src="@/static/images/Listing.png" v-if="tab_active == 2" mode="aspectFill" class="item_icon"></image>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>
<!-- 商品管理 -->
<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				communityName: '',
				tab_active: 1,
				leftList: [],
				pageList: [],
				page: 1,
				pageSize: 10,
				is_bottom: false,
				left_active: 0,
				identity: '',
				imgUrl: $api.config.imgUrl,
			}
		},
		onLoad() {
			that = this
			if(!uni.getStorageSync('token')) {
				$api.modal('您还未登录，请先登录！',function() {
					$api.jump('/pages/login/index')
				})
			}
			that.identity = uni.getStorageSync('identity')
		},
		onShow() {
			that.getTypeList()
			that.communityName = uni.getStorageSync('community')
		},
		methods: {
			// 获取分类列表
			getTypeList() {
				that.identity = uni.getStorageSync('identity')
				if(that.identity == 2) {
					$api.req({
						url: '/api/merchant.community.goods/get_cate'
					}, function(res) {
						if(res.code == 1) {
							that.leftList = res.data
							that.page = 1
							that.getList()
						}
					})
				} else if(that.identity == 3) {
					$api.req({
						url: '/api/merchant.appliance.goods/get_cate'
					}, function(res) {
						if(res.code == 1) {
							that.leftList = res.data
							that.page = 1
							that.getList()
						}
					})
				} else if(that.identity == 4) {
					$api.req({
						url: '/api/merchant_service_goods/get_goods_cate'
					}, function(res) {
						if(res.code == 1) {
							that.leftList = res.data
							that.page = 1
							that.getList()
						}
					})
				} else if(that.identity == 5) {
					$api.req({
						url: '/api/merchant.sport.goods/get_cate'
					}, function(res) {
						if(res.code == 1) {
							that.leftList = res.data
							that.page = 1
							that.getList()
						}
					})
				} else {
					return 
				} 
			},
			// 获取列表数据
			getList() {
				let url = ''
				let data = {}
				if(that.identity == 4) {
					url = '/api/merchant_service_goods/get_goods_list',
					data = {
						page: that.page,
						status: that.tab_active == 1 ? 'up' : 'down',
						cate_id: that.leftList[that.left_active].id
					}
				} else if(that.identity == 2) {
					url = '/api/merchant.community.goods/get_list',
					data = {
						// page: that.page,
						status: that.tab_active == 1 ? 'up' : 'down',
						category_id: that.leftList[that.left_active].id
					}
				} else if(that.identity == 3) {
					url = '/api/merchant.appliance.goods/get_list',
					data = {
						// page: that.page,
						status: that.tab_active == 1 ? 'up' : 'down',
						category_id: that.leftList[that.left_active].id
					}
				} else if(that.identity == 5) {
					url = '/api/merchant.sport.goods/get_list',
					data = {
						// page: that.page,
						status: that.tab_active == 1 ? 'up' : 'down',
						category_id: that.leftList[that.left_active].id
					}
				} else {
					return
				}
				
				$api.req({
					url: url,
					data: data
				}, function(res) {
					if(res.code == 1) {
						uni.stopPullDownRefresh();
						if(that.identity == 2 || that.identity == 3 || that.identity == 5) {
							that.is_bottom = true
						} else if(that.identity == 4) {
							if(res.data.length == 0) {
								that.is_bottom = true
							} else {
								that.is_bottom = false
							}
						}
						if(that.page == 1) {
							that.pageList = res.data
						} else {
							that.pageList = that.pageList.concat(res.data)
						}
					}
				})
			},
			// 切换tabs 1是上架，2是下架
			changeTab(index) {
				that.tab_active = index
				that.page = 1
				that.pageList = []
				that.getList()
			},
			// 选择分类
			selectType(index) {
				that.left_active = index
				that.page = 1
				that.pageList = []
				that.getList()
			},
			// 查看详情
			toDetail(index) {
				$api.jump('/pages/index/detail?id=' + that.pageList[index].id)
			},
			// 监听滚动到底部
			scrollBottom() {
				if (that.is_bottom) {
					$api.info("没有更多了")
				} else {
					that.page++
					that.getList()
				}
			}
		},
		onPullDownRefresh() {
			that.page = 1
			that.pageList = []
			that.getList()
		},
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		.left_text {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 44rpx;
		}
		.tabs {
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(204,204,204,0.5);
			box-sizing: border-box;
			.tabs_item {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 40rpx;
				text-align: center;
			}
			.tab_active {
				position: relative;
				color: #333333;
			}
			.tab_active::before {
				content: "";
				position: absolute;
				left: 0;
				top: 60%;
				width: 100%;
				height: 10rpx;
				background: linear-gradient(270deg, #EE8529 0%, #FFFFFF 100%);
				border-radius: 6rpx;
				opacity: 0.5;
			}
		}
		.goods {
			width: 100%;
			margin: 26rpx 0 0;
			height: 78vh;
			background: #FFFFFF;
			.goods_left {
				width: 218rpx;
				height: 100%;
				background: rgba(238, 133, 41,0.06);
				border-radius: 0rpx 20rpx 0rpx 0rpx;
				margin-right: 20rpx;
				.left_item {
					width: 100%;
					box-sizing: border-box;
					padding: 34rpx 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 40rpx;
				}
				.left_active {
					color: #EE8529;
					background: #FFFFFF;
					position: relative;
				}
				.left_active::before {
					content: "";
					position: absolute;
					left: 0;
					top: 30rpx;
					width: 20rpx;
					height: 60rpx;
					background: #EE8529;
					border-radius: 0rpx 14rpx 14rpx 0rpx;
				}
			}
			.goods_right {
				width: calc(100% - 238rpx);
				height: 100%;
				min-height: 1rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding-right: 24rpx;
				.right_item {
					margin: 0 0 40rpx;
					padding: 26rpx 0;
					width: 100%;
					.item_img {
						width: 134rpx;
						height: 134rpx;
						margin-right: 20rpx;
					}
					.item_name {
						max-width: 300rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
						line-height: 36rpx;
						padding-bottom: 10rpx;
					}
					.item_price {
						font-size: 36rpx;
						font-weight: 400;
						color: #FF2828;
						line-height: 32rpx;
						.old_price {
							font-size: 26rpx;
							font-family: AppleSystemUIFont;
							color: #888888;
							line-height: 32rpx;
							text-decoration: line-through;
						}
					}
					.info {
						padding: 8rpx 0;
						.info_text {
							width: 152rpx;
							font-size: 20rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 28rpx;
							border-radius: 16rpx;
							border: 2rpx solid #999999;
							padding: 2rpx 0;
							text-align: center;
							box-sizing: border-box;
						}
					}
					.item_text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;
						line-height: 34rpx;
					}
					.item_icon {
						width: 52rpx;
						height: 52rpx;
					}
				}
				
			}
		}
	}

</style>