183 lines
4.1 KiB
Vue
183 lines
4.1 KiB
Vue
<template>
|
|
<view class="main-box">
|
|
<view class="search-box">
|
|
<u-search @custom="search" placeholder="可搜索达人名称/标签" bg-color="#fff" input-align="left" :action-style="actionStyle" v-model="keyword"></u-search>
|
|
</view>
|
|
|
|
<view class="notice-box">
|
|
<notice-bar></notice-bar>
|
|
</view>
|
|
|
|
<view class="blind-box">
|
|
<view class="blind-card">
|
|
<view class="icon">
|
|
<image style="width: 88rpx;height: 88rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/1d291d514fe8833f941924f273a5deb8f2cc8c06680fd49b6c08c58b16338c93.png"></image>
|
|
</view>
|
|
<view class="avatar-box">
|
|
<image style="width: 320rpx;height: 64rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/41888275859ee7d4663bfcbd322a55ac3da9bbfc3621ca8a1137f39b2fde47bd.png"></image>
|
|
<view @click="blindOrder" class="btn">随机下单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<rank-box :femaleWeekTopList="femaleWeekTopList" :maleWeekTopList="maleWeekTopList"></rank-box>
|
|
</view>
|
|
|
|
<view class="card-box">
|
|
<user-card :newList="newList" :hotList="hotList"></user-card>
|
|
</view>
|
|
|
|
<view class="category-box">
|
|
<category-card @tabClick="getCategory" :dataList="categoryList"></category-card>
|
|
</view>
|
|
|
|
<view>
|
|
<sticky-box @tabClick="tabClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></sticky-box>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import NoticeBar from '@/pages/tabbar/components/home/noticeBar.vue';
|
|
import StickyBox from '@/pages/tabbar/components/home/stickyBox.vue';
|
|
import RankBox from '@/pages/tabbar/components/home/rankBox.vue';
|
|
import UserCard from '@/pages/tabbar/components/home/userCard.vue';
|
|
import CategoryCard from '@/pages/tabbar/components/home/categoryCard.vue';
|
|
import ClerkApi from '@/sheep/api/worker/clerk';
|
|
import RewardApi from '@/sheep/api/worker/reward';
|
|
import sheep from '@/sheep';
|
|
export default {
|
|
components: {
|
|
NoticeBar,
|
|
RankBox,
|
|
StickyBox,
|
|
UserCard,
|
|
CategoryCard,
|
|
},
|
|
props: {
|
|
scrollTop: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
stickyTop: {
|
|
type: Number,
|
|
default: uni.upx2px(80),
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
actionStyle: {
|
|
backgroundColor: 'var(--ui-BG-Main)',
|
|
borderRadius: '40px',
|
|
padding: '7px',
|
|
color: '#fff',
|
|
fontSize: '28rpx',
|
|
width: '80px',
|
|
},
|
|
keyword: '',
|
|
categoryList: [],
|
|
newList: [],
|
|
hotList: [],
|
|
maleWeekTopList: [],
|
|
femaleWeekTopList: [],
|
|
}
|
|
},
|
|
created() {
|
|
this.getInitData();
|
|
},
|
|
methods: {
|
|
tabClick(e) {
|
|
this.$emit('tabClick', e);
|
|
},
|
|
getCategory(e) {
|
|
ClerkApi.getCategoryListByParentId(e.id).then(res => {
|
|
this.$emit('categoryClick', e);
|
|
if(res.data.length > 0){
|
|
sheep.$store('sys').setCategoryList(res.data);
|
|
}else{
|
|
sheep.$store('sys').setCategoryList(this.categoryList);
|
|
}
|
|
});
|
|
},
|
|
getInitData() {
|
|
ClerkApi.getHomeData().then(res => {
|
|
this.categoryList = res.data.categoryList;
|
|
this.newList = res.data.clerkNewList;
|
|
this.hotList = res.data.clerkHotList;
|
|
sheep.$store('sys').setCategoryList(this.categoryList);
|
|
});
|
|
|
|
ClerkApi.getWeekTopList().then(res => {
|
|
this.maleWeekTopList = res.data.maleWeekTopList;
|
|
this.femaleWeekTopList = res.data.femaleWeekTopList;
|
|
});
|
|
|
|
},
|
|
search() {
|
|
this.$emit('search', this.keyword);
|
|
},
|
|
blindOrder() {
|
|
sheep.$router.go('/pages/worker/blind/index');
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-box {
|
|
|
|
.search-box {
|
|
background-color: #fff;
|
|
border-radius: 40px;
|
|
padding: 3px;
|
|
margin: 15px;
|
|
}
|
|
|
|
.notice-box {
|
|
margin: 15px;
|
|
}
|
|
|
|
}
|
|
|
|
.card-box {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.category-box {
|
|
padding: 15px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.blind-box {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.blind-card {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
|
|
.icon {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.avatar-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
|
|
.btn {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
border-radius: 40px;
|
|
padding: 5px 10px;
|
|
background-color: var(--ui-BG-Main);
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |