458 lines
9.4 KiB
Vue
458 lines
9.4 KiB
Vue
<template>
|
||
<view class="pages-claim" v-if="isLoad">
|
||
<uni-nav-bar :fixed="true" :title="scrollTop>40?'':'认植认养'" backgroundColor="none" color="#FFFFFF"></uni-nav-bar>
|
||
<view class="banner-wrap">
|
||
<image class="banner" mode="aspectFill" src="@/static/image/imgicon/banner_bg.png"></image>
|
||
</view>
|
||
<scroll-view class="tab-scroll" scroll-x enable-flex>
|
||
<view class="tab-list-box">
|
||
<view class="tab-item on" v-for="i in 9">
|
||
<view class="name">优质果蔬</view>
|
||
<image class="icon-bg" mode="aspectFit" src="@/static/image/imgicon/tab_icon.png"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="list-wrap">
|
||
<view class="list-item" v-for="i in 3">
|
||
<view class="img-box">
|
||
<image class="img" mode="aspectFill" src="@/static/image/imgicon/banner_bg.png"></image>
|
||
<view class="hot">最热</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="name-row">
|
||
<view class="name">橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树</view>
|
||
<view class="money">
|
||
<text>￥</text>
|
||
280.
|
||
<text>00</text>
|
||
</view>
|
||
</view>
|
||
<view class="address-row">
|
||
<view class="address">产地：河源-牛营山牛营山牛营山牛营山牛营山牛营山牛营山</view>
|
||
<view class="count">已认种：10</view>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<view class="count">10</view>
|
||
<view class="label">品种</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="count">1890</view>
|
||
<view class="label">预产量(kg)</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<view class="count">10天</view>
|
||
<view class="label">周期</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="but">我要认种</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapActions, mapMutations } from 'vuex';
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
isLoad: false,
|
||
options: {},
|
||
rankInd: 0,
|
||
rankList: [
|
||
{
|
||
id: 1,
|
||
title: '综合排序'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '销量优先'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '距离优先'
|
||
}
|
||
],
|
||
tabList: [],
|
||
activeIndex: 0,
|
||
cate_id: 0,
|
||
banner: [],
|
||
param: {
|
||
page: 1
|
||
},
|
||
list: {
|
||
data: []
|
||
},
|
||
loading: true,
|
||
lockTap: false,
|
||
show_rank_item: false,
|
||
refresh: false,
|
||
|
||
scrollTop: 0
|
||
};
|
||
},
|
||
computed: mapState({
|
||
primaryColor: (state) => state.config.configInfo.primaryColor,
|
||
subColor: (state) => state.config.configInfo.subColor,
|
||
configInfo: (state) => state.config.configInfo,
|
||
userInfo: (state) => state.user.userInfo,
|
||
location: (state) => state.user.location,
|
||
loginType: (state) => state.user.loginType
|
||
}),
|
||
async onLoad() {
|
||
if (this.isLoad) return;
|
||
this.$util.showLoading();
|
||
this.initIndex();
|
||
},
|
||
async onShow() {
|
||
if (!this.isLoad || (this.location.lat && this.rankInd != 2)) return;
|
||
let [err, result] = await uni.getSetting();
|
||
if (err || !result.authSetting[`scope.userLocation`]) return;
|
||
this.initIndex();
|
||
},
|
||
onPullDownRefresh() {
|
||
// #ifndef APP-PLUS
|
||
uni.showNavigationBarLoading();
|
||
// #endif
|
||
this.initRefresh();
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
onReachBottom() {
|
||
if (this.list.current_page >= this.list.last_page || this.loading) return;
|
||
this.param.page = this.param.page + 1;
|
||
this.loading = true;
|
||
this.getList();
|
||
},
|
||
onShareAppMessage(e) {
|
||
let { id: pid } = this.userInfo;
|
||
let path = `/pages/claim?pid=${pid}`;
|
||
this.$util.log(path);
|
||
return {
|
||
title: '',
|
||
imageUrl: '',
|
||
path
|
||
};
|
||
},
|
||
onPageScroll(e){
|
||
this.scrollTop = e.scrollTop
|
||
},
|
||
methods: {
|
||
...mapActions(['getConfigInfo']),
|
||
...mapMutations(['updateUserItem']),
|
||
async initIndex(refresh = false) {
|
||
if (!this.configInfo.id || refresh) {
|
||
await this.getConfigInfo();
|
||
if (this.loginType == 'apple') {
|
||
this.updateUserItem({
|
||
key: 'isShowLogin',
|
||
val: false
|
||
});
|
||
}
|
||
}
|
||
await this.getLocation();
|
||
let [banner, cate] = await Promise.all([
|
||
this.$api.claim.claimBanner({
|
||
type: 3
|
||
}),
|
||
this.$api.claim.claimCateList({
|
||
type: 2
|
||
})
|
||
]);
|
||
cate.unshift({
|
||
id: 0,
|
||
title: '全部'
|
||
});
|
||
this.banner = banner;
|
||
this.tabList = cate;
|
||
this.isLoad = true;
|
||
this.refresh = false;
|
||
this.param.page = 1;
|
||
this.getList();
|
||
},
|
||
initRefresh() {
|
||
this.refresh = true;
|
||
this.$refs.rank_item.close();
|
||
this.initIndex(true);
|
||
},
|
||
async getLocation() {
|
||
let { location } = this;
|
||
if (!location.lat) {
|
||
location = await this.$util.getBmapLocation();
|
||
this.updateUserItem({
|
||
key: 'location',
|
||
val: location
|
||
});
|
||
}
|
||
},
|
||
handerTabChange(index, type) {
|
||
this[type] = index;
|
||
this.$refs.rank_item.close();
|
||
if (type == 'activeIndex') {
|
||
this.cate_id = this.tabList[index].id;
|
||
}
|
||
this.$util.showLoading();
|
||
this.param.page = 1;
|
||
this.list.data = [];
|
||
this.getList();
|
||
},
|
||
toShowRank() {
|
||
let { show_rank_item } = this;
|
||
if (this.lockTap) return;
|
||
this.lockTap = true;
|
||
setTimeout(() => {
|
||
let methodModel = show_rank_item ? 'close' : 'open';
|
||
this.$refs.rank_item[methodModel]();
|
||
}, 500);
|
||
},
|
||
popupChange(e) {
|
||
let { show } = e;
|
||
this.show_rank_item = show;
|
||
setTimeout(() => {
|
||
this.lockTap = false;
|
||
}, 200);
|
||
},
|
||
async getList() {
|
||
let { list: oldList, param, tabList, activeIndex, rankList, rankInd, cate_id } = this;
|
||
let ind = tabList.findIndex((item) => {
|
||
return item.id == cate_id;
|
||
});
|
||
cate_id = ind == -1 ? 0 : cate_id;
|
||
activeIndex = ind == -1 ? 0 : ind;
|
||
this.cate_id = cate_id;
|
||
this.activeIndex = activeIndex;
|
||
let { id: sort } = rankList[rankInd];
|
||
if (sort == 3 && !this.location.lat) {
|
||
this.$util.hideAll();
|
||
await this.getLocation();
|
||
return;
|
||
}
|
||
let { lng = 0, lat = 0 } = this.location;
|
||
param = Object.assign({}, param, {
|
||
cate_id,
|
||
sort
|
||
});
|
||
if (sort === 3) {
|
||
param.lat = lat;
|
||
param.lng = lng;
|
||
}
|
||
let newList = await this.$api.claim.claimList(param);
|
||
newList.data.map((item) => {
|
||
let { stock, sale_num } = item;
|
||
item.precent = ((sale_num / (stock + sale_num)) * 100).toFixed(2) + '%';
|
||
});
|
||
|
||
if (this.param.page == 1) {
|
||
this.list = newList;
|
||
} else {
|
||
newList.data = oldList.data.concat(newList.data);
|
||
this.list = newList;
|
||
}
|
||
this.loading = false;
|
||
this.$util.hideAll();
|
||
},
|
||
async goDetail(index) {
|
||
let { id } = this.list.data[index];
|
||
let url = `/claim/pages/detail?id=${id}`;
|
||
this.$util.toCheckLogin({
|
||
url
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.pages-claim {
|
||
min-height: 100vh;
|
||
background: #f8feff;
|
||
}
|
||
.banner-wrap {
|
||
width: 100%;
|
||
height: 596rpx;
|
||
|
||
.banner {
|
||
display: block;
|
||
width: 100%;
|
||
height: 596rpx;
|
||
}
|
||
}
|
||
|
||
.tab-scroll {
|
||
height: 88rpx;
|
||
overflow: auto;
|
||
display: flex;
|
||
background: #ffffff;
|
||
|
||
.tab-list-box {
|
||
padding: 0 28rpx;
|
||
height: 88rpx;
|
||
width: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab-item {
|
||
font-size: 28rpx;
|
||
color: #777777;
|
||
line-height: 88rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
display: inline-block;
|
||
|
||
& + .tab-item {
|
||
margin-left: 70rpx;
|
||
}
|
||
|
||
&.on {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
.name {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.icon-bg {
|
||
width: 62rpx;
|
||
height: 20rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, 10rpx);
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-wrap {
|
||
padding: 28rpx 28rpx 200rpx;
|
||
|
||
.list-item {
|
||
background: #ffffff;
|
||
box-shadow: 0 6rpx 6rpx #f5f5f5;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 28rpx;
|
||
overflow: hidden;
|
||
|
||
.img-box {
|
||
position: relative;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 390rpx;
|
||
display: block;
|
||
}
|
||
|
||
.hot{
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 28rpx;
|
||
background: linear-gradient( 133deg, #FFCC49 0%, #FF8744 100%);
|
||
border-radius: 0 0 12rpx 0;
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 28rpx 16rpx;
|
||
}
|
||
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 22rpx;
|
||
|
||
.name {
|
||
flex: 1;
|
||
line-height: 44rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.money {
|
||
line-height: 50rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #dd3e3e;
|
||
margin-left: 20rpx;
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.address-row {
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 2rpx dashed #e4eaeb;
|
||
|
||
.address {
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
padding: 35rpx 0;
|
||
|
||
.info-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.count {
|
||
line-height: 44rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #dd3e3e;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.label {
|
||
line-height: 34rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.but {
|
||
margin: 0 auto;
|
||
width: 568rpx;
|
||
height: 72rpx;
|
||
background: #1FD3EA;
|
||
// background: linear-gradient(to right, #43c5fe, #358ffd);
|
||
border-radius: 72rpx;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|