初始化代码
This commit is contained in:
202
uniapp/uni-app/land/pages/seed/list.vue
Normal file
202
uniapp/uni-app/land/pages/seed/list.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<view class="land-seed-list">
|
||||
|
||||
<fixed>
|
||||
<view class="flex-between fill-base pd-lg">
|
||||
<view style="width: 440rpx">
|
||||
<uni-segmented-control :current="activeIndex" :values="tabList"
|
||||
@clickItem="handerTabChange($event,'activeIndex')" style-type="button"
|
||||
:active-color="primaryColor">
|
||||
</uni-segmented-control>
|
||||
</view>
|
||||
|
||||
<view @tap.stop="handerTabChange($event,'season')" class="season-item flex-center f-desc c-base radius"
|
||||
:class="[{'c-title':!param.season}]" :style="{background:param.season?primaryColor:'#eddbba'}">
|
||||
当前季节
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</fixed>
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="item-child rel mt-md ml-md mr-md pd-lg fill-base radius-24 box-shadow"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-center">
|
||||
<image mode="aspectFill" lazy-load class="goods-img radius-24" :src="item.imgs[0]"></image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="goods-title f-title c-title text-bold ellipsis">{{item.title}}</view>
|
||||
<view class="f-title c-warning mt-sm"> ¥{{item.seed_price}} </view>
|
||||
<view class="goods-title f-caption c-caption ellipsis">
|
||||
预估产量:{{item.output_value}}kg/㎡
|
||||
<text class="ml-md">播种面积:{{item.area}}㎡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-btn abs flex-center c-warning">
|
||||
<view class="flex-y-baseline">
|
||||
<view>查看更多</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
import uniSegmentedControl from "@/components/uni-segmented-control.vue"
|
||||
export default {
|
||||
components: {
|
||||
uniSegmentedControl
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
tabList: [{
|
||||
id: 1,
|
||||
title: '综合排序'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '种植最多'
|
||||
}],
|
||||
activeIndex: 0,
|
||||
param: {
|
||||
page: 1,
|
||||
season: 0
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false,
|
||||
popupInfo: {}
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad(options) {
|
||||
this.$util.showLoading()
|
||||
this.options = options
|
||||
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()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['updateUserItem']),
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index, key) {
|
||||
if (key == 'season') {
|
||||
this.param[key] = this.param[key] == 1 ? 0 : 1
|
||||
} else {
|
||||
this[key] = index
|
||||
}
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
activeIndex,
|
||||
tabList,
|
||||
} = this
|
||||
let {
|
||||
id: land_id
|
||||
} = this.options
|
||||
let {
|
||||
id: sort
|
||||
} = tabList[activeIndex]
|
||||
let param = Object.assign({}, this.param, {
|
||||
land_id,
|
||||
sort
|
||||
});
|
||||
let newList = await this.$api.land.seedList(param)
|
||||
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()
|
||||
},
|
||||
goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let {
|
||||
id: land_id
|
||||
} = this.options
|
||||
let url = `/land/pages/seed/detail?id=${id}&land_id=${land_id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.land-seed-list {
|
||||
.season-item {
|
||||
width: 220rpx;
|
||||
height: 54rpx;
|
||||
}
|
||||
|
||||
.item-child {
|
||||
.goods-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
max-width: 470rpx;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 122rpx;
|
||||
height: 46rpx;
|
||||
font-size: 20rpx;
|
||||
background: #FDEDE0;
|
||||
border-radius: 0 25rpx 0 15rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user