#私藏项目实操分享#
old find/index.vue代码
<template>
<view>
<scroll-view scroll-y="true" :scroll-y="getStoreListLength" @scrolltolower="getStoreList" :style="'height: ' + svHeight + 'px;'" class="store">
<view class="item" v-for="(item,index) in storeList" :key="index">
<view class="imageBox">
<image :src="getImage.filePath + item.storeIcon + '?x-oss-process=image/resize,h_800'" class="storeImage"
mode="widthFix" @click="btnStoreDetail(item)"></image>
</view>
<view class="info">
<text class="storeName" @click="btnStoreDetail(item)">
{{item.storeName}}
</text>
<view class="inner" @click="btnStoreAddress(item)" v-if="item.storeAddress!==null&&item.storeAddress!==''">
<text class="iconfont icon-location-fill icon"></text>
<text class="storeAddress">{{item.storeAddress}}</text>
<view class="position">
<text class="iconfont icon-daohang-Navigation"></text>
</view>
</view>
<!-- <view class="storeTag" v-if="item.storeAddress!==null&&item.storeAddress!==''">
<text class="txt">4.6km</text>
</view>-->
<view class="storeTag" v-if="item.storeAddress!==null&item.storeAddress!==''">
<text class="txt"> {{ item.distance > 1000 ? (item.distance / 1000).toFixed(2) + "km" : item.distance + "m" }}</text>
</view>
<view class="rebate">让利{{item.yieldInterest}}%</view>
<div class="shopSet" @click="btnJump('/shop/pages/shopSet/index?id='+item.id)" v-if="accountId===item.accountId">
<text class="iconfont icon-dianpu3"></text>
店铺设置
</div>
</view>
</view>
<!-- 无数据 -->
<no-records v-if="storeList.length === 0" :pic="getImage.noOrder"
desc="暂无记录"></no-records>
<!-- 下拉加载 -->
<!--<uni-load-more v-if="storeList.length>0" :status="loadingType"></uni-load-more>-->
</scroll-view>
</view>
</template>
<script>
import noRecords from '../../common/components/noRecords/noRecords.vue';
import UniLoadMore from "../../components/uni-load-more/uni-load-more";//暂无记录
//import noStore from "../../common/components/noStore";
//import noLogin from "../../common/components/noLogin";
//暂无记录
export default {
components: {
noRecords,
UniLoadMore
//noStore,
//noLogin,
},
data() {
return {
svHeight: 0,
isLoading: false,//是否正在请求数据
storeList: [],//商品详情
pageNumber: 1,
total: 0,
loadingType: 'more',
loaded: '',
//isLoadMore: false, //是否加载中
// loadStatus: 'loading',
pageSize: 10,
accountId: '',
}
},
computed: {
getImage() {
let images = {
orderFinished: this.$commonImage.orderFinished,
filePath: this.$commonImage.filePath,
noOrder: this.$commonImage.noOrder
}
return images;
},
getStoreListLength() {
return this.storeList.length !== 0;
},
},
onReady() {
console.log("onReady(｡･∀･)ﾉﾞ嗨：");
let that = this;
// #ifdef H5 || APP-PLUS || MP-ALIPAY
uni.getSystemInfo({
success: function (res) {
const query = uni.createSelectorQuery().in(that)
query.select('.store')
.boundingClientRect(data => {
that.svHeight = (res.windowHeight - data.top);
})
.exec();
}
});
// #endif
// h5 app mp-alipay不支持微信的方法
// #ifndef H5 || APP-PLUS || MP-ALIPAY
// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
uni.getSystemInfo({
success: function (res) {
console.log("res==", res);
uni.createSelectorQuery().select(".store")
.boundingClientRect(function (data) {
that.svHeight = (res.windowHeight - data.top);
console.log("data==", data)
}).exec();
}
});
// #endif
},
onLoad() {
console.log("onLoad(｡･∀･)ﾉﾞ嗨：");
this.getStoreList();
},
async onShow() {
//进首页的时候刷新基本开关
//this.$utils.getBaseConfig();
let isLogin = await this.$utils.isLogin();
this.isLogin = isLogin;
if (this.isLogin) {
//this.getStoreList();//获取问题列表
this.accountId = uni.getStorageSync('accountId')
}
},
/*onReachBottom() {
if (!this.loaded) {
this.loaded = true;
this.pageNumber += 1;
this.getStoreList();
}
},*/
/*onPullDownRefresh(){
this.pageScrollTop = e.scrollTop;
this.storeList=[];
this.pageNumber=1;
this.total=0;
this.loadingType='more';
this.loaded=''
this.getStoreList();
},
onPageScroll(e) {
console.log("下拉刷新");
},*/
//下拉加载
onPullDownRefresh() {
console.log("下拉刷新(●ˇ∀ˇ●)")
this.pageNumber = 1;
this.total = 0;
this.isLoading = false;
this.storeList = [];
this.getStoreList();
//uni.showNavigationBarLoading;//在导航条进行显示加载动画
//uni.stopPullDownRefresh({});//停止下拉刷新
//uni.hideNavigationBarLoading({});//隐藏导航条加载动画
},
//触底
onReachBottom() {
console.log("我到底了(●'◡'●)");
if (this.pageNumber * this.pageSize >= this.total) {
uni.showMsg('数据加载完毕');
}
if (this.isLoading) {
return;
}
this.pageNumber += 1;
this.getStoreList();
},
methods: {
ah() {
console.log("ahahah!");
},
//获取商品列表
getStoreList: function () {
console.log("getStoreList,我胡汉三来了");
this.isLoading = true;//打开节流阀
let data = {
pageNumber: this.pageNumber,
pageSize: this.pageSize,
sortName: 'createTime',
sortOrder: 'desc',
currentLatitude: uni.getStorageSync('latitude'),
currentLongitude:uni.getStorageSync('longitude')
};
this.$Request.get('storeApi', data).then(res => {
console.log("res===", res);
if (res.data.code === 1) {
console.log("getStoreList,我胡汉在这1");
this.storeList = [...this.storeList,...res.data.data.rows];
this.total = res.data.data.total;
this.pageNumber += 1;
if (this.pageNumber * this.pageSize >= this.total) {
console.log("getStoreList,我胡汉在这1");
uni.showToast({title: '数据加载完毕'});
}
}
this.isLoading = false;//关闭节流阀
uni.hideNavigationBarLoading({});//隐藏导航条加载动画
uni.stopPullDownRefresh({});//停止下拉刷新
data && this.ah();
}, err => {
console.log("err: ", JSON.stringify(err));
})
},
/*getStoreList:function () {
if (this.loadingType === 'loading') {
return;
}
if (this.loadingType !== 'noMore') {
this.loadingType = 'loading';
uni.showNavigationBarLoading(); //显示加载动画
let data = {
pageNumber: this.pageNumber,
pageSize: this.pageSize,
sortName: 'createTime',
sortOrder: 'desc',
currentLatitude: uni.getStorageSync('latitude'),
currentLongitude:uni.getStorageSync('longitude')
/!* currentLatitude:113.693047,
currentLongitude:34.721485,*!/
};
this.$Request.get('storeApi', data).then(res=>{
this.total = res.data.data.total;
this.pageNumber += 1;
uni.hideNavigationBarLoading();
uni.stopPullDownRefresh();
this.loaded = true;
//if (res.data.data.rows) {
this.storeList = this.storeList.concat(res.data.data.rows);
if (this.storeList.length === this.total) {
this.loadingType = 'noMore';
} else {
this.loadingType = 'more';
}
// }
}).catch((err)=>{
console.log("err: ", JSON.stringify(err));
});
}
},*/
//跳转进详情
btnStoreDetail(item) {
this.$utils.jump('/shop/pages/detail/index?id=' + item.id, 'navigateTo');
},
btnStoreAddress: function (item) {
var url = '';
console.log("item:", item);
const address = item.storeAddress;
const latitude = item.storeLatitude;
const longitude = item.storeLongitude;
var hasBaiduMap = plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap', action: 'baidumap://'});
var hasAmap = plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap', action: 'androidamap://'});
var urlBaiduMap = 'baidumap://map/marker?location=' + latitude + ',' + longitude + '&title=' + encodeURIComponent(address) + '&src=com.bailb.hbb';
var urlAmap = 'androidamap://viewMap?sourceApplication=com.bailb.hbb&poiname=' + encodeURIComponent(address) + '&lat=' + latitude + '&lon=' + longitude + '&dev=0';
if (hasAmap && hasBaiduMap) {
plus.nativeUI.actionSheet({
title: '选择地图应用',
cancel: '取消',
buttons: [{title: '百度地图'}, {title: '高德地图'}]
}, function (e) {
switch (e.index) {
case 1:
plus.runtime.openURL(urlBaiduMap);
break;
case 2:
plus.runtime.openURL(urlAmap);
break;
}
});
} else if (hasAmap) {
//if (uni.getSystemInfoSync().platform == 'android') {
uni.showModal({
title: '温馨提示',
content: '是否打开“高德地图”进行导航？',
delCancel: false
})
.then(res => {
plus.runtime.openURL(urlAmap);
})
.catch(res => {
});
/* } else {
uni.showModal({
title: '温馨提示',
content: '是否打开“高德地图”进行导航？',
success: res => {
if (res.confirm) {
plus.runtime.openURL(urlAmap);
}
}
});
}*/
} else if (hasBaiduMap) {
//if (uni.getSystemInfoSync().platform == 'android') {
uni.showModal({
title: '温馨提示',
content: '是否打开“百度地图”进行导航？',
delCancel: false
})
.then(res => {
plus.runtime.openURL(urlBaiduMap);
})
.catch(res => {
});
/* } else {
uni.showModal({
title: '温馨提示',
content: '是否打开“百度地图”进行导航？',
success: res => {
if (res.confirm) {
plus.runtime.openURL(urlBaiduMaps);
}
}
});
}*/
} else {
//如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
url = 'geo:' + latitude + ',' + longitude + '?q=' + encodeURIComponent(address);
// if (uni.getSystemInfoSync().platform == 'android') {
uni.showModal({
title: '温馨提示',
content: '是否打开“GoogleMap”进行导航？',
delCancel: false
})
.then(res => {
plus.runtime.openURL(url);
})
.catch(res => {
});
/* } else {
uni.showModal({
title: '温馨提示',
content: '是否打开“GoogleMap”进行导航？',
success: res => {
if (res.confirm) {
plus.runtime.openURL(url);
}
}
});
}*/
}
},
btnJump(url) {
this.$utils.jump(url, 'navigateTo');
}
}
};
</script>
<style scoped lang="scss">
@import 'index';
/deep/ .select-box {
padding: $uni-padding-base $uni-padding-lg !important;
}
/deep/ .navbar .nav-item.current {
color: $uni-color-black1;
}
/deep/ .navbar .active .txt {
color: $uni-color-black1;
}
/deep/ .store-order .good .imageBox .onShelf {
z-index: 9;
}
/deep/ .navbar {
/*position: static;*/
margin-bottom: $uni-margin-base;
}
</style>分页上拉加载下拉刷新
<template> <view> <view class="list"> <view class="item" v-for="(item,index) in list" :key="index"> <image class="img" :src="'https://cdn.uploadstimebank.xianguosuyuan.com/' + item.articleImage" mode="aspectFill" alt=""></image>
<view class="info"> <view class="txt">{{item.articleTitle}}</view> </view> </view>
<view class="loading" v-if="isLoadAll">{{loadingTxt}}</view> </view>
</view>
</template><script>
export default {
data() {
return {
filePath: uni.getStorageSync('imageServer'),//图片前缀
list: [], pageNumber: 1, pageSize: 10, total: 0,
isNoMoreData: false,
isLoadAll: false,//加载更多是否显示 loadingTxt: '加载中...',//加载更多的状态 }
}, onLoad(params) {
this.getList();
}, onShow() {
}, onReachBottom(){
console.log("onReachBottom："); this.getList(); }, onPullDownRefresh() {
console.log("onPullDownRefresh："); this.list = []; this.pageNumber = 1; this.getList();
setTimeout(function () {
uni.stopPullDownRefresh(); })
},
methods: {
getList() {
console.log("getList：")
if (this.isNoMoreData) return false; //如果没得下一页了，则不再执行代码
console.log("data：")
let data = {
pageNumber: this.pageNumber, pageSize: this.pageSize, articleTypeCode: '006001', articleState: 1, sortOrder: 'asc', orderBySort: true, }; this.$Request.get(this.$api.page.articleApi, data).then(res => {
console.log("res===", res); if (res.data.code === 1) {
this.list = this.list.concat(res.data.data.rows); this.total = res.data.data.total;
if (this.pageNumber * this.pageSize >= this.total) {
this.isNoMoreData = true;
this.isLoadAll = true; this.loadingTxt = '没有更多数据啦~'; } else {
this.isNoMoreData = false; this.pageNumber++;
this.isLoadAll = true; this.loadingTxt = '加载中...'; }
/*if (this.pageNumber * this.pageSize < this.total) { this.isNoMoreData = false; this.pageNumber++; } else { this.isNoMoreData = true; }*/ //this.isNoMoreData = data.length == this.pageSize ? false : true; //如果当前的数组10条和分页的10相等，表示有下一页 //this.page = data.length == this.pageSize ? ++page : page; //如果有下一页，page+1，否则就是当前页 } else {
this.isNoMoreData = true; this.isLoadAll = true; this.loadingTxt = '没有更多数据啦~'; }
}, err => {
console.log("err: ", err); })
}
}
}
</script><style scoped lang="scss"> @import 'index';
.item {
display: flex; align-items: center; margin: 10px;
.img {
flex: none; width: 100px; height: 100px; border-radius: 8px; }
.info {
flex: 1; margin-left: 10px;
.txt {
font-size: 14px; color: #101010; }
}
}
.loading {
text-align: center; }
</style>