shop-applet/pages/home/index.vue

377 lines
8.0 KiB
Vue

<template>
<view class="Circle_friends">
<view class="circle_friends_wrapper">
<zbpSwiper></zbpSwiper>
<view class="tabs_wrapper">
<u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"></u-tabs>
</view>
<view class="goods">
<block v-for="(item,index) in cateGoods" :key="index">
<view class="goods_item" @click="gogogo(item)">
<image class="goods_img" :src="item.image[0]" mode="aspectFit"></image>
<view class="botm">
<view class="title">{{item.title}}</view>
<view class="goods_info flex_a_c">
<view class="l_info flex_a_c">
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'"
mode="aspectFit" class="g_img"></image>
<view class="g_name">{{item.author && item.author.nickname}}</view>
</view>
<view class="nice_box" @click.stop="giveStart(item)">
<text class="iconfont"
:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
<text class="collect">{{item.count_start}}</text>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="empty_wrapper" v-if="emptyShow">
<u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
</view>
</view>
<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
<!-- <view class="bg_color"></view> -->
<!-- <m-tabbar native>
<template v-slot:tabbar_index_2>
<view class="custom_style">
<view class="custom_style_icon"></view>
</view>
</template>
</m-tabbar> -->
</view>
</template>
<script>
import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
import zbpSwiper from '@/components/zbpSwiper'
import {
getSlideAPI
} from '@/api/lihai.js'
import {
graphicLstApi,
getTopicList,
graphicStartApi
} from '@/api/community.js'
import {
getIndexData,
getDiy
} from '@/api/api.js'
import {
getGeocoder,
merClassifly
} from '@/api/store.js';
import {
getArea,
getStreet
} from '@/api/article.js';
import {
Toast
} from '@/libs/uniApi'
export default {
components: {
mTabbar,
zbpSwiper
},
data() {
return {
bgColor: '',
showPicker: false,
columnData: [],
show: false,
swiper: {
url: [{
img: ''
}],
indicatorDots: true, // 显示面板指示点
vertical: false, // 滑动方向是否为纵向
autoplay: true, // 是否自动切换
interval: 2000, // 自动切换时间间隔
duration: 500 // 滑动动画时长
},
tabsData: {
list: [],
tabsActive: 0
},
where: {
category_id: 0,
page: 1,
limit: 30
},
currentItemId: 69, // 默认获取 社区的数据 0 表示推荐 || 69 社区
keyword: '',
location: '',
emptyShow: false,
street: '',
cateGoods: []
}
},
onPullDownRefresh() {
this.getCateList()
this.getGoods()
this.selfLocation()
this.Area()
uni.stopPullDownRefresh()
},
onLoad() {
this.getCateList()
this.getGoods()
this.selfLocation()
this.Area()
},
onShow() {},
methods: {
confirm(e) {
this.where.street_id = e.value[1].code
this.showPicker = false
},
changeHandler(e) {
const {
columnIndex,
value,
values,
index,
picker = this.$refs.uPicker
} = e;
if (columnIndex === 0) {
getStreet({
area_code: value[0]['code']
}).then(res => {
this.$refs.uPicker.setColumnValues(1, res.data);
});
}
},
Area() {
getArea({
city_code: 510500
}).then(res => {
this.$refs.uPicker.setColumnValues(0, res.data);
this.Street(res.data[0]['code']);
});
},
Street(code) {
getStreet({
area_code: code
}).then(res => {
this.$refs.uPicker.setColumnValues(1, res.data);
});
},
gogogo(item) {
if (this.tabsData.tabsActive == 1) {
uni.navigateTo({
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
})
} else {
uni.navigateTo({
url: '/pages/plantGrass/plant_detail/index?id=' + item.community_id
})
}
},
giveStart(item) {
let status = item.relevance_id ? 0 : 1
graphicStartApi(item.community_id, {
status: status
}).then(res => {
Toast(res.message)
this.getGoods()
})
},
dianji() {
this.show = !this.show
},
// 获取发现商品
getGoods: function() {
// 数据写死:默认社区数据 category_id=69&page=1&limit=30
graphicLstApi(this.where).then(res => {
this.cateGoods = res.data.list
res.data.list.length <= 0 ? this.emptyShow = true : this.emptyShow = false
})
},
/*获取分类列表*/
async getCateList() {
const {
data
} = await getTopicList()
this.tabsData.list = [{
cate_name: "推荐",
category_id: 0
}, {
cate_name: "视频",
category_id: -1,
children: []
}, ...data]
},
tabsChange(item) {
this.where.category_id = item.category_id
this.getGoods()
this.street_id = item.id
this.tabsData.tabsActive = item.index
if (item.index == 1) {
uni.navigateTo({
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
})
}
},
selfLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
getGeocoder({
lat: latitude,
long: longitude
}).then(res => {
this.$store.commit('setLocation', res.data)
this.street = res.data.address_component.street
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
fail: (err) => {
uni.showToast({
title: err.errMsg,
icon: 'none',
duration: 1000
});
}
});
},
}
}
</script>
<style lang="scss">
page {
// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
}
.Circle_friends {
position: relative;
padding: 0 0 87.72rpx 0;
background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
}
.circle_friends_wrapper {
position: relative;
z-index: 2;
}
.search_wrapper {
width: 694.74rpx;
margin: 0 auto;
}
.tabs_wrapper {
width: 694.74rpx;
margin: 0 auto;
margin-bottom: 21.05rpx;
}
.empty_wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.goods {
margin: 0 auto;
width: 694.74rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.goods_item {
width: 342.11rpx;
height: 491.23rpx;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
margin-bottom: 10.53rpx;
.goods_img {
width: 100%;
height: 294.74rpx;
}
.botm {
flex: 1;
padding: 0 14.04rpx;
padding-bottom: 21.05rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
margin: 12px 0;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.goods_info {
justify-content: space-between;
.g_img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.g_name {
margin-left: 8.77rpx;
width: 100.63rpx;
text-overflow: ellipsis;
/* 溢出显示省略号 */
overflow: hidden;
/* 溢出隐藏 */
white-space: nowrap;
/* 强制不换行 */
}
.nice_box {
display: flex;
align-items: center;
.isshow {
color: #FE3530 !important;
}
.iconfont {
font-size: 30rpx;
}
.icon-shoucang1 {
color: #F84221;
}
.collect {
font-size: 24rpx;
margin-left: 5rpx;
}
}
}
}
}
}
</style>