hytc-customer/pages/serviceMall/index.vue

<template>
	<view class="warpbox">
		<!-- 搜索 -->
		<view class="censear">
			<image src="/static/img/search.png" class="searimg" mode=""></image>
			<input type="text" :placeholder="i18n['请输入关键词搜索']" @input="queryData" class="lself">
		</view>
		<view class="conbox">
			<scroll-view scroll-x style="width:642rpx">
				<view class="tablist_new" style="justify-content: flex-start;padding:0">
					<view 
						class="tabtn" 
						@click="changeProduct(index)" 
						:class="{'tabtn_active':index == productIndex}" 
						v-for="(item,index) in product_list" 
						:key="index"
					>{{item.name}}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y style="height:calc(100vh - 320rpx);padding-top:24rpx;box-sizing: border-box;" @scrolltolower="loadMorePart">
				<view class="pro_box">
					<view class="pro_item" v-for="(item,index) in part_list" :key="index" @click="selectPart(index)">
						<image :src="item.img" class="productimg"></image>
						<view class="product_name">{{item.name}}</view>
						<view class="se_box">
							<image src="/static/img/dui.png" v-if="item.select" class="duiimg"></image>
						</view>
					</view>
				</view>
				<view class="noData" v-if="part_list.length == 0">{{i18n['暂无更多']}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { netProductList, netPartList, netCartListnum, netAddCart } from '@/api/api.js'
	
	export default{
		data() {
			return{
				name:'',
				product_list:[{id:0,name:'全部'}],
				productIndex:0,
				part_list:[],
				partPage:1,
				partTotalpage:1,
				cartNum:0
			}
		},
		computed:{
			i18n() {
				return this.$t("shopmall")
			}
		},
		onLoad() {
			//设备  列表
			this.getProductList()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.i18n['服务商城']
			})
			
			//购物车 数量
			this.getCartNum()
		},
		methods:{
			getCartNum() {
				netCartListnum().then(res=>{
					this.cartNum = res.data.total
				})
			},
			getProductList() {
				netProductList().then(res=>{
					res = res.data
					this.product_list.push(...res)
					//备件列表
					this.part_list = []
					this.partPage = 1
					setTimeout(()=>{
						this.getPartlist(this.product_list[0].id)
					},200)
				})
			},
			changeProduct(index) {
				this.productIndex = index
				this.part_list = []
				this.partPage = 1
				//备件列表
				setTimeout(()=>{
					this.getPartlist(this.product_list[index].id)
				},200)
			},
			loadMorePart() {
				if(this.partPage >= this.partTotalpage) {
					return
				}
				this.partPage ++
				this.getPartlist()
			},
			getPartlist(id) {
				let params = {
					product_id:id,
					name: this.name
				}
				netPartList(params).then(res=>{
					let data = res.data.data
					data.forEach(ele=>{
						ele.select = false
					})
					this.part_list = this.part_list.concat(data)
					this.partTotalpage = res.data.last_page
				})
			},
			selectPart(index) {
				let obj = this.part_list[index]
				obj.select = !obj.select
				this.$set(this.part_list,index,obj)
			},
			queryData(e) {
				this.name = e.detail.value
				this.part_list = []
				setTimeout(()=>{
					this.getPartlist(this.product_list[this.productIndex].id)
				},200)
			},
			//加入购物车
			addCart() {
				let data = this.part_list
				let arr = []
				data.forEach(ele=>{
					if(ele.select){
						arr.push(ele.id)
					}
				})
				if(arr.length <= 0) {
					uni.showToast({
						title:'请选择要加入的配件',
						icon:'none'
					})
					return
				}
				netAddCart({parts_id:arr.join(',')}).then(res=>{
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
					this.getCartNum()
				})
			},
			toCart() {
				uni.navigateTo({
					url:'/pages/serviceMall/cart'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.censear{
		display: flex;
		justify-content: center;
		align-items: center;
		padding:0 24rpx;
		border-radius: 34rpx;
		background:#FFFFFF;
		width:584rpx;
		height:68rpx;
		border:1rpx solid #7FC2FF;
		margin:0 auto;
		.searimg{
			width:34rpx;
			height:34rpx;
		}
		.lself{
			width:450rpx;
			font-size:26rpx;
		}
	}
	.conbox{
		width:690rpx;
		background:#fff;
		margin:24rpx auto;
		border-radius: 20rpx;
		padding:24rpx;
	}
	.pro_box{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.pro_item{
			width:160rpx;
			flex-shrink: 0;
			text-align: center;
			margin-right:80rpx;
			margin-bottom:24rpx;
			position: relative;
			&:nth-child(3n){
				margin-right:0;
			}
			.se_box{
				width:32rpx;
				height:32rpx;
				position: absolute;
				right:10rpx;
				top:10rpx;
				border:1rpx solid #C8C8C8;
				border-radius: 8rpx;
				.duiimg{
					width:32rpx;
					height:32rpx;
				}
			}
			.productimg{
				width:157rpx;
				height:157rpx;
				background:#F6F6F6;
				border-radius: 20rpx;
				margin-bottom:10rpx;
				border:1rpx solid #C8C8C8;
			}
			.product_name{
				font-size:26rpx;
				color:#999999;
			}
		}
	}
	.botbox{
		width:690rpx;
		background:#fff;
		margin:24rpx auto;
		border-radius: 20rpx;
		padding:24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.botleft{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.carimg{
				width:48rpx;
				height:41rpx;
				margin-right:15rpx;
			}
			.left_te{
				.num{
					font-size:24rpx;
					color:#999;
				}
			}
		}
		.botright{
			width:360rpx;
			height:88rpx;
			border-radius: 45rpx;
			background:#7FC2FF;
			font-size:30rpx;
			color:#fff;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>