|
|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <view class="pages producttype-wrap">
|
|
|
+ <view class="producttype">
|
|
|
+ <view class="producttype-nav">
|
|
|
+ <view v-for="(item,index) in navitem" :key="index" @click="typeclick(index)" :class="{active:index==ins}" class="producttype-nav-item">{{ item.typeName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="producttype-con">
|
|
|
+ <view class="search">
|
|
|
+ <view class="searchTxt">
|
|
|
+ <uni-search-bar :placeholder="searchtxt" @confirm="search" v-model="searchtxt" @input="search" ></uni-search-bar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 搜索 结束 -->
|
|
|
+ <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :bottom="0" :down="downOption" :up="upOption">
|
|
|
+ <!-- <view class="product-wrap"> -->
|
|
|
+ <view v-for="(item,index) in productlist" :key="index" @click="productclick(item.guid)" class="product-item">
|
|
|
+ <image class="product-item-img" :src="$onlineImg+item.goodsImages | firstImg" mode="scaleToFill"></image>
|
|
|
+ <view class="product-item-info">
|
|
|
+ <view class="product-item-til">{{item.goodsName}}</view>
|
|
|
+ <view class="product-item-code">编号:{{item.goodsCode}}</view>
|
|
|
+ <view class="product-item-price"><text class="rmb">¥</text> <text class="price">{{item.price}}</text> / KG</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- </view> -->
|
|
|
+ </mescroll-body>
|
|
|
+ </view>
|
|
|
+ <!-- producttype-con end -->
|
|
|
+ </view>
|
|
|
+ <!-- fix-content end -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // 引入mescroll-mixins.js
|
|
|
+ import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
|
|
+ // 引入mescroll-body组件 (如已在main.js注册全局组件,则省略此步骤)
|
|
|
+ import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 注意.vue后缀不能省
|
|
|
+
|
|
|
+ import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
|
|
|
+ export default {
|
|
|
+ mixins: [MescrollMixin], // 使用mixin
|
|
|
+ components: {
|
|
|
+ MescrollBody,
|
|
|
+ uniSearchBar,
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ $onlineImg:this.$onlineImg,
|
|
|
+ useoption:true,
|
|
|
+ token:'',
|
|
|
+ params:{
|
|
|
+ queryStr:'',
|
|
|
+ productTypeGuid:''
|
|
|
+ },
|
|
|
+ searchtxt:'产品名称',
|
|
|
+ mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
|
|
|
+ // 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
|
|
+ downOption: {
|
|
|
+ // ...
|
|
|
+ },
|
|
|
+ // 上拉加载的配置(可选, 绝大部分情况无需配置)
|
|
|
+ upOption: {
|
|
|
+ page: {
|
|
|
+ size: 10 // 每页数据的数量,默认10
|
|
|
+ },
|
|
|
+ noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
|
|
|
+ empty: {
|
|
|
+ tip: '暂无相关数据'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //nav active
|
|
|
+ ins:0,
|
|
|
+ //菜单类别
|
|
|
+ navitem:[],
|
|
|
+ //热门列表
|
|
|
+ // hotlist:[
|
|
|
+ // ],
|
|
|
+ //productlist
|
|
|
+ productlist:[],
|
|
|
+ //显示的分类标题
|
|
|
+ nowtype:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ console.log('option',option);
|
|
|
+ this.token = this.$store.state.token;
|
|
|
+ this.nowtype = this.navitem[this.ins];
|
|
|
+ this.params.queryStr = this.nowtype;
|
|
|
+ if(option.search){
|
|
|
+ this.nowtype = option.search;
|
|
|
+ this.searchtxt = option.search;
|
|
|
+ }
|
|
|
+ //获取产品分类
|
|
|
+ this.$api.http.post(this.config.apiBaseurl + '/carbon-h5/wap/goods/getGoodsTypeList',{},{
|
|
|
+ header: {
|
|
|
+ Accept:'application/json',
|
|
|
+ Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ // console.log('产品分类',res);
|
|
|
+ this.navitem = res.data.retBody;
|
|
|
+ // console.log('this.navitem',this.navitem);
|
|
|
+ this.nowtype = this.navitem[this.ins].typeName;
|
|
|
+ this.params.productTypeGuid = this.navitem[this.ins].guid;
|
|
|
+ // this.searchtxt = this.navitem[this.ins].typeName;
|
|
|
+ if(this.useoption&&option.search){
|
|
|
+ this.params.productTypeGuid = '';
|
|
|
+ this.params.queryStr = option.search;
|
|
|
+ this.searchtxt = option.search;
|
|
|
+ this.ins = null;
|
|
|
+ }
|
|
|
+ this.downCallback();
|
|
|
+ }).then(()=>{
|
|
|
+ this.useoption = false;
|
|
|
+ this.params.queryStr = '';
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //搜索
|
|
|
+ search(e) {
|
|
|
+ this.params.queryStr = e.value;
|
|
|
+ this.params.productTypeGuid = '';
|
|
|
+ this.downCallback();
|
|
|
+ this.searchtxt = this.params.queryStr||'产品名称';
|
|
|
+ this.ins = null;
|
|
|
+ // this.poorList = [];
|
|
|
+ // this.params.farmerName = e.value;
|
|
|
+ // this.pagination = Object.assign(this.pagination,{"farmerName":e.value});
|
|
|
+ // this.pagination.pageNo = 1;
|
|
|
+ // this.getPoorList(this.pagination)
|
|
|
+ },
|
|
|
+
|
|
|
+ /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
|
|
|
+ mescrollInit(mescroll) {
|
|
|
+ this.mescroll = mescroll;
|
|
|
+ },
|
|
|
+ downCallback(){
|
|
|
+ this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
|
|
|
+ },
|
|
|
+ /*上拉加载的回调*/
|
|
|
+ upCallback(page) {
|
|
|
+ let pageNum = page.num; // 页码, 默认从1开始
|
|
|
+ let pageSize = page.size; // 页长, 默认每页10条
|
|
|
+ this.params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});
|
|
|
+ // console.log('this.params',this.params);
|
|
|
+ this.$api.http.post(this.config.apiBaseurl + '/carbon-h5/wap/goodsManage/searchByPage',this.params,{
|
|
|
+ header: {
|
|
|
+ Accept:'application/json',
|
|
|
+ Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
|
|
|
+ },
|
|
|
+ }).then(data => {
|
|
|
+ if(data.data.code=='1001'){
|
|
|
+ // uni.redirectTo({
|
|
|
+ // url:'/pages/login/login?backpage=/pages/index/index'+'&backtype='+2,
|
|
|
+ // });
|
|
|
+ };
|
|
|
+ // console.log(data);
|
|
|
+ // 接口返回的当前页数据列表 (数组)
|
|
|
+ let curPageData = data.data.retBody;
|
|
|
+ // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
+ let curPageLen = curPageData.length;
|
|
|
+ this.productlist = curPageData;
|
|
|
+ console.log('this.productlist',this.productlist);
|
|
|
+ // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
+ // let totalPage = data.xxx;
|
|
|
+ // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
+ let totalSize = data.data.retHead.total;
|
|
|
+ // 接口返回的是否有下一页 (true/false)
|
|
|
+ // let hasNext = data.xxx;
|
|
|
+
|
|
|
+ //设置列表数据
|
|
|
+ if(page.num == 1) this.productlist = []; //如果是第一页需手动置空列表
|
|
|
+ this.productlist = this.productlist.concat(curPageData); //追加新数据
|
|
|
+
|
|
|
+ //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
|
|
+ this.mescroll.endBySize(curPageLen, totalSize);
|
|
|
+
|
|
|
+ // setTimeout(()=>{
|
|
|
+ // this.mescroll.endSuccess(curPageLen)
|
|
|
+ // },20)
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ this.mescroll.endErr()
|
|
|
+ console.log(err)
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //左侧导航点击
|
|
|
+ typeclick(num){
|
|
|
+ this.ins=num;
|
|
|
+ this.nowtype = this.navitem[num].typeName;
|
|
|
+ // this.params.queryStr = this.nowtype;
|
|
|
+ this.params.productTypeGuid = this.navitem[this.ins].guid;
|
|
|
+ // console.table({'this.nowtype':this.nowtype,'this.params.queryStr':this.params.queryStr})
|
|
|
+ this.downCallback();
|
|
|
+ // this.searchtxt = this.navitem[num].typeName;
|
|
|
+ },
|
|
|
+ //产品点击
|
|
|
+ productclick(id){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:`/pages/product/product?guid=${id}`,
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ @import url("./productList.css");
|
|
|
+</style>
|
