<template>
<view class="pages">
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
<view class="product-wrap">
<uni-swipe-action>
<view v-for="(item,index) in productlist" :key="index" class="product-item">
<!-- <uni-swipe-action-item :right-options="swipeOptions" @click="delItem(item.id)" @change="changeSwipe"> -->
<view class="product-item-img-wrap" @click="productclick(item.pmsProduct.id)">
<image class="product-item-img" :src="$getimg+item.pmsProduct.pic|miniImg(50)" mode="aspectFit"></image>
</view>
<view class="product-item-info" @click="productclick(item.pmsProduct.id)">
<view class="product-item-til">{{item.productName}}</view>
<view class="product-item-brand">{{item.productBrand}} <text class="postage" v-if="item.postage">包邮</text></view>
<view class="product-item-addr">{{item.addr}}</view>
<view class="product-item-company">{{item.companyName}}</view>
<view class="product-item-price">
<text class="rmb" v-if="item.pmsProduct.price">¥</text>
<text class="price" :class="!item.price?'noprice':''">{{item.pmsProduct.price||"暂无价格"}}</text>
<text v-if="item.pmsProduct.unit">/ {{item.pmsProduct.unit}}</text>
</view>
</view>
<!-- </uni-swipe-action-item> -->
</view>
</uni-swipe-action>
</view>
</mescroll-body>
</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 uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
export default {
mixins: [MescrollMixin], // 使用mixin
components: {
MescrollBody,
uniSwipeAction,
uniSwipeActionItem
},
data() {
return {
mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
downOption: {
// ...
},
// 上拉加载的配置(可选, 绝大部分情况无需配置)
upOption: {
page: {
size: 10 // 每页数据的数量,默认10
},
noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: '暂无相关数据'
}
},
params:{
tokenhead:'',
token:'',
},
productlist:[
// {
// img:"http://placekitten.com/160/160",
// title:'红球源500ml*2瓶装传统精炼纯正山茶油',
// brand:'红球源',
// postage:true,
// addr:'贵州大亨油茶科技有限公司',
// price:'258',
// unit:'盒'
// },
// {
// img:"http://placekitten.com/160/160",
// title:'红球源500ml*2瓶装传统精炼纯正山茶油',
// brand:'红球源',
// postage:true,
// addr:'贵州大亨油茶科技有限公司',
// price:'258',
// unit:'盒'
// }
],
swipeOptions:[
{
text: '删除',
style: {
backgroundColor: '#dd524d'
}
}
],
}
},
onShow() {
let serf = this;
// //检查登录,获取token
// let loginRes = this.checkLogin('/pages/index/index', '2');
// if(!loginRes){return false;}
// serf.params.token=loginRes[0];
},
onLoad() {
let self = this;
uni.getStorage({
key:'token',
success: function (res) {
self.params.token = res.data;
// console.log(res.data);
}
});
uni.getStorage({
key:'tokenhead',
success: function (res) {
self.params.tokenhead = res.data;
// console.log(res.data);
}
});
},
methods: {
/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
/*下拉刷新的回调, 有三种处理方式:*/
downCallback(){
// 第2种: 下拉刷新和上拉加载调同样的接口, 那么不用第1种方式, 直接mescroll.resetUpScroll()即可
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,{pageNO:pageNum,pageSize:pageSize});
let thetoken = this.params.tokenhead + this.params.token;
console.log('thetoken',thetoken);
this.$api.http.get(this.config.apiBaseurl+'/pre/other',{params:this.params,header: {Authorization:thetoken}}).then(data => {
console.log('1111111111',data);
if(data.data.code=='1001'){
// uni.redirectTo({
// url:'/pages/login/login?backpage=/pages/index/index'+'&backtype='+2,
// });
};
console.log('data',JSON.parse(JSON.stringify(data)));
// 接口返回的当前页数据列表 (数组)
let curPageData = data.data.data.list;
// console.log('curPageData',curPageData);
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
let curPageLen = curPageData.length;
// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
let totalPage =data.data.data.totalPage;
// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
let totalSize = data.data.data.total;
// this.productlist = curPageData;
// 接口返回的是否有下一页 (true/false)
// let hasNext = data.xxx;
//设置列表数据
if(page.num == 1) this.productlist = []; //如果是第一页需手动置空列表
this.productlist = this.productlist.concat(curPageData); //追加新数据
// console.log('page.num',page.num);
console.log('this.productlist',JSON.parse(JSON.stringify(this.productlist)));
// 请求成功,隐藏加载状态
//方法一(推荐): 后台接口有返回列表的总页数 totalPage
this.mescroll.endByPage(curPageLen, totalPage);
//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// this.mescroll.endBySize(curPageLen, totalSize);
// setTimeout(()=>{
// this.mescroll.endSuccess(curPageLen)
// },20)
}).catch(err => {
this.mescroll.endErr()
console.log(err)
});
},
//产品点击
productclick(id){
uni.navigateTo({
url:`/pages/product/product?id=${id}`,
})
},
//滑动change事件
changeSwipe(e){
console.log(e)
},
delItem(id){
console.log(id);
}
}
}
</script>
<style scoped>
/* @import url("./mypublish.css"); */
/* .product-item{display: block;} */
</style>