客户需求:客户产品品类较高,需要左侧通过文字的形式显示所有分类信息,点击分类不需要重新加载当前界面,直接更新加载产品列表页。
实现思路:
1、后台需要一个获取产品分类webservice接口、一个获取产品信息接口(都是通过产品分类找查)。
2、uniapp前台分两块,一块左侧列表,一块产口信息。
3、用户选择产品分类后,前台动态加载更新右侧产品信息。
显示效果:
获取产品分类代码如下:
//获取当前产品分类
let requestUrl=this.websiteUrl +"/WebService.asmx/GetProductAllTypeList";
//当前用户已登录,获取详情
if(this.hasLogin){
requestUrl=this.websiteUrl +"/LoginWebService.asmx/GetProductAllTypeList?customerId="+this.userInfo.UserId;
}
uni.request({
url: requestUrl,
data: {},
method: 'GET',
header: {
'Content-Type': 'text/xml; charset=utf-8',
},
success: (res) => {
const doc = new DOMParser().parseFromString(res.data, 'text/xml');
var proList = JSON.parse(doc.getElementsByTagName("string")[0].childNodes[0].nodeValue);
list = proList || [];
this.currentId = list[0].PRODUCT_TYPE_ID;
list.forEach(item => {
if (item.PARENT_TYPE_ID == 1) {
this.flist.push(item); //一级分类
}
});
list.forEach(item => {
var cf = false;
this.flist.forEach(ff => {
if (ff.PRODUCT_TYPE_ID == item.PRODUCT_TYPE_ID) {
cf = true;
}
})
if (!cf) {
this.slist.push(item); //二级分类
}
});
list.forEach(item => {
var cf = false;
this.flist.forEach(ff => {
if (ff.PRODUCT_TYPE_ID == item.PRODUCT_TYPE_ID) {
cf = true;
}
});
this.tlist.forEach(tt => {
if (tt.PRODUCT_TYPE_ID == item.PRODUCT_TYPE_ID) {
cf = true;
}
});
if (!cf) {
this.tlist.push(item); //三级分类
}
});
this.flist.forEach(ff => {
if (ff.PRODUCT_TYPE_ID != list[0].PRODUCT_TYPE_ID) {
this.vlist[ff.PRODUCT_TYPE_ID] = false;
} else {
this.vlist[ff.PRODUCT_TYPE_ID] = true;
}
});
},
页面代码如下:
<scroll-view scroll-y class="left-aside">
<view v-for="item in flist" :key="item.PRODUCT_TYPE_ID" class="f-item b-b" :class="{active: item.PRODUCT_TYPE_ID === currentId}"
@click="tabtap(item)">
{{item.TYPE_NAME}}
</view>
</scroll-view>
<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
<view v-for="ii in flist" :key="ii.PRODUCT_TYPE_ID" class="s-list" :id="'main-'+ii.id" v-show="vlist[ii.PRODUCT_TYPE_ID]">
<!--<text class="s-item">{{ii.TYPE_NAME}}</text>-->
<view class="i-item" @click="navToList(ii)">
<image :src="siteUrl + '/UpLoadFile/'+ii.TYPE_BIG_IMG"></image>
</view>
<view class="t-list">
<view @click="navToList(titem)" v-if="titem.PARENT_TYPE_ID === ii.PRODUCT_TYPE_ID"
class="t-item" v-for="titem in slist" :key="titem.PRODUCT_TYPE_ID">
<image :src="siteUrl + '/UpLoadFile/'+titem.TYPE_MIN_IMG"></image>
<text>{{titem.TYPE_NAME}}</text>
</view>
</view>
</view>
</scroll-view>