认养
This commit is contained in:
457
uniapp/uni-app/pages/claim - 副本 (2).vue
Normal file
457
uniapp/uni-app/pages/claim - 副本 (2).vue
Normal file
@@ -0,0 +1,457 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user