571 lines
14 KiB
Vue
571 lines
14 KiB
Vue
<template>
|
|
<view class="">
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList" default-page-size="5">
|
|
<view class="home-search" slot="top">
|
|
<view class="home-header">
|
|
<image class="home-bj" src="@/static/images/home/home_bj.png" mode=""></image>
|
|
</view>
|
|
<view :style="`height: ${$u.sys().statusBarHeight}px;`" />
|
|
<view class="flex align-center" style="padding:0 32rpx;position: relative;">
|
|
<view style="height: 68rpx;margin-top: 16rpx;">
|
|
<image style="width: 113rpx;height: 51rpx;margin-top: 8rpx;"
|
|
src="@/static/images/home/home_logo.png" mode=""></image>
|
|
</view>
|
|
<view class="search-box " @click="$tab.navigateTo('/pages/search/search')">
|
|
<image class="search-bj" src="@/static/images/home/home_search.png" mode=""></image>
|
|
<view class="search-box-c flex align-center">
|
|
<image class="search-box-image" src="@/static/images/app/icon/search.png" mode="">
|
|
</image>
|
|
<view class="search-box-search align-center flex">搜索</view>
|
|
</view>
|
|
</view>
|
|
<view class="brand-name flex align-center justify-between"
|
|
@click="$tab.navigateTo('/pages/driver/serve/repair/re_create/select_city')">
|
|
<view class="brand-name-tit">
|
|
{{citySave?citySave:'杭州'}}
|
|
</view>
|
|
<u-icon name="arrow-down-fill" size="10" color="#000"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="home-income">
|
|
<image style="width: 725rpx;height: 261rpx;" src="@/static/images/home/home_number.png" mode=""></image>
|
|
<view class="home-income-top-left f-26 c666">
|
|
本月预估收益
|
|
</view>
|
|
<view class="home-income-top-right f-28"
|
|
@click="$tab.navigateTo('/pages/driver/welfare/invite/invite_commission')">
|
|
我的收益
|
|
</view>
|
|
<view class="home-income-center flex justify-center align-center">
|
|
<view v-if="incomeData.isJoin"
|
|
@click="$tab.navigateTo('/pages/driver/welfare/invite/invite_commission')">
|
|
<text class="home-income-center-text">+</text>
|
|
{{incomeData.toDay}}
|
|
</view>
|
|
<view class="home-income-center-button" v-else
|
|
@click="$tab.navigateTo('/pages/driver/rebate/rebate')">
|
|
点击加入流水返佣
|
|
</view>
|
|
</view>
|
|
<view class="home-income-bottom-left f-26 c666">昨日预估收益
|
|
<text class="f-30 c333">￥{{incomeData.withdrawal}}</text>
|
|
</view>
|
|
<view class="home-income-bottom-right f-26 c666">预估总收益
|
|
<text class="f-30 c333">￥{{incomeData.totalRevenue}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="function-list flex justify-around flex-wrap">
|
|
<view class="function-list-cont" v-for="(item,index) in functionList" :key="index"
|
|
@click="navigatorFn(item)">
|
|
<text v-if="index==5&&subscriptNum>0" class="subscript">{{subscriptNum}}</text>
|
|
<image style="width: 68rpx;height: 68rpx;" :src="item.imgae" mode=""></image>
|
|
<view class="f-24 c333">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="swiper-box">
|
|
<u-swiper keyName="image" :list="brannerList" height="240rpx" @change="brannerChange"
|
|
@click="brannerClick"></u-swiper>
|
|
</view>
|
|
<view class="home-information">
|
|
<u-tabs :list="tabList" @click="tabClick" :scrollable="true" lineColor="#13AFA8"
|
|
:activeStyle="{color: '#303133',fontWeight: 600,transform: 'scale(1.05)',fontSize: '31rpx'}"
|
|
:inactiveStyle="{color: '#606266',fontWeight:500,transform: 'scale(1)',fontSize: '31rpx'}"
|
|
itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 80rpx;"></u-tabs>
|
|
<view class="list-box">
|
|
<view v-for="(item,index) in dataList" :key="index" @click="toDetailPages(item,index)">
|
|
<block>
|
|
<view class="consult" @click.stop="toDetailPages(item,index)">
|
|
<view class="consult-list" v-if="item.image.length==1">
|
|
<view class="flex align-center">
|
|
<view class="consult-list-left flex flex-column justify-between">
|
|
<view class="consult-list-left-title">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="flex justify-between c999">
|
|
<text>{{item.authorName}}</text>
|
|
<text>{{item.createTime}}</text>
|
|
</view>
|
|
</view>
|
|
<image class="consult-image-one" @click.stop="examineFn(item.image,imageIndex)"
|
|
v-for="(itemImage,imageIndex) in item.image" :key="imageIndex"
|
|
:src="itemImage" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="consult-list" v-else>
|
|
<view class="consult-list-left-title">
|
|
{{item.title}}
|
|
</view>
|
|
<view v-if="item.image.length==2" class="flex justify-between flex-wrap">
|
|
<image class="consult-image-two" @click.stop="examineFn(item.image,imageIndex)"
|
|
v-for="(itemImage,imageIndex) in item.image" :key="imageIndex"
|
|
:src="itemImage" mode=""></image>
|
|
</view>
|
|
<view v-else class="flex justify-between flex-wrap">
|
|
<block v-for="(itemImage,imageIndex) in item.image" :key="imageIndex">
|
|
<image v-if="imageIndex<3" class="consult-image-three"
|
|
@click.stop="examineFn(item.image,imageIndex)" :src="itemImage" mode="">
|
|
</image>
|
|
</block>
|
|
</view>
|
|
<view class="consult-list-name flex justify-between c999">
|
|
<text>{{item.authorName}}</text>
|
|
<text>{{item.createTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view slot='bottom'>
|
|
<!-- <tabbar-driver current="/pages/driver/home/home"></tabbar-driver> -->
|
|
</view>
|
|
</z-paging>
|
|
<yk-authpup ref="authpup" type="top" @changeAuth="getLocationFn2"
|
|
permissionID="ACCESS_FINE_LOCATION"></yk-authpup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
|
|
import {
|
|
categoryTypeList,
|
|
getReturnIncome
|
|
} from "@/api/home/home.js"
|
|
import {
|
|
getPlazaList,
|
|
} from "@/api/discover/discover.js"
|
|
import {
|
|
functionList
|
|
} from "@/data/homeData.js"
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
import {
|
|
brannerList,
|
|
getJoinNum
|
|
} from '@/api/system/config'
|
|
import {
|
|
getLocationFn
|
|
} from "@/utils/index.js"
|
|
export default {
|
|
computed: {
|
|
...mapGetters(['citySave'])
|
|
},
|
|
data() {
|
|
return {
|
|
//数据统计
|
|
incomeData: {},
|
|
dataList: [],
|
|
functionList,
|
|
//轮播图
|
|
brannerList: [],
|
|
tabList: [{
|
|
name: '推荐',
|
|
type: 1
|
|
}, {
|
|
name: '玩转滴友',
|
|
type: 2
|
|
}],
|
|
mobileType: {},
|
|
//角标数
|
|
subscriptNum: 0
|
|
};
|
|
},
|
|
methods: {
|
|
//查看
|
|
examineFn(urlList, index) {
|
|
uni.previewImage({
|
|
urls: urlList,
|
|
current: index,
|
|
loop: true
|
|
})
|
|
},
|
|
btnAClick() {
|
|
console.log('btnClick');
|
|
},
|
|
toDetailPages(item, index) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/index/consult_detail?id=${item.id}`
|
|
})
|
|
},
|
|
// 一级tab
|
|
tabClick(e) {
|
|
console.log(e);
|
|
this.ticketType = e.id
|
|
this.$refs.paging.refresh();
|
|
},
|
|
//nav
|
|
navigatorFn(item) {
|
|
if (item.type == 1) {
|
|
uni.switchTab({
|
|
url: item.url
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: item.url
|
|
})
|
|
}
|
|
},
|
|
//列表
|
|
queryList(page, limit) {
|
|
let obj = {
|
|
categoryId: this.ticketType,
|
|
page,
|
|
limit
|
|
}
|
|
getPlazaList(obj).then(res => {
|
|
// console.log('咨询', res.data.list);
|
|
res.data.list.forEach((item, index) => {
|
|
item.createTime = item.createTime.split(' ')[0];
|
|
if (item.image != '') {
|
|
item.image = item.image.split(",")
|
|
} else {
|
|
item.image = []
|
|
}
|
|
if (Number(item.wide) > Number(item.high)) {
|
|
let num = 686 / uni.$u.getPx(`${item.wide}rpx`)
|
|
item.wide = uni.$u.getPx(`${item.wide}rpx`) * num + 'rpx'
|
|
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
|
|
} else {
|
|
let num = 302 / uni.$u.getPx(`${item.wide}rpx`)
|
|
item.wide = uni.$u.getPx(`${item.wide}rpx`) * num + 'rpx'
|
|
item.high = uni.$u.getPx(`${item.high}rpx`) * num + 'rpx'
|
|
}
|
|
})
|
|
// console.log(res.data.list);
|
|
this.$refs.paging.complete(res.data.list);
|
|
}).catch(err => {
|
|
this.$refs.paging.complete(false)
|
|
})
|
|
},
|
|
// 获取轮播图
|
|
getBrannerList() {
|
|
brannerList({
|
|
type: 6
|
|
}).then(res => {
|
|
this.brannerList = res.data.list
|
|
})
|
|
},
|
|
//获取未参加任务
|
|
getJoinNumFn() {
|
|
getJoinNum().then(res => {
|
|
this.subscriptNum = res.data
|
|
console.log(res);
|
|
})
|
|
},
|
|
// 点击轮播图
|
|
brannerClick(e) {
|
|
if (this.brannerList[e].linkType == 0 || this.brannerList[e].linkType == 2 || this.brannerList[e]
|
|
.linkType == 3) {
|
|
let linkObj = this.brannerList[e].linkUrl
|
|
uni.navigateTo({
|
|
url: linkObj
|
|
})
|
|
} else if (this.brannerList[e].linkType == 1) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/rebate/rebate_web?contract=${this.brannerList[e].linkUrl}`
|
|
})
|
|
}
|
|
},
|
|
brannerChange() {},
|
|
//获取社区分类
|
|
categoryTypeListFn() {
|
|
categoryTypeList().then(res => {
|
|
// console.log(res.data);
|
|
this.tabList = res.data
|
|
this.ticketType = this.tabList[0].id
|
|
this.$refs.paging.refresh();
|
|
})
|
|
},
|
|
//统计数据
|
|
getReturnIncomeFn() {
|
|
getReturnIncome().then(res => {
|
|
// console.log('首页统计', res);
|
|
this.incomeData = res.data
|
|
})
|
|
},
|
|
getLocationFn2() {
|
|
getLocationFn()
|
|
},
|
|
//获取定位
|
|
async getAddressFn() {
|
|
if (this.mobileType.platform != 'ios') {
|
|
this.$refs.authpup.open()
|
|
} else {
|
|
this.getLocationFn2()
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
let deviceBrand = uni.getSystemInfoSync().deviceBrand
|
|
if (deviceBrand != 'huawei') {
|
|
this.getAddressFn()
|
|
}
|
|
},
|
|
onLoad() {
|
|
// uni.hideTabBar();
|
|
//统计
|
|
this.getReturnIncomeFn()
|
|
//轮播图
|
|
this.getBrannerList()
|
|
//获取社区分类
|
|
this.categoryTypeListFn()
|
|
//获取位置
|
|
this.mobileType = uni.getStorageSync('appDetail')
|
|
},
|
|
onShow() {
|
|
//角标
|
|
this.getJoinNumFn()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.list-box {
|
|
width: 690rpx;
|
|
padding: 0 32rpx 30rpx 32rpx;
|
|
background: #ffffff;
|
|
|
|
.consult {
|
|
width: 100%;
|
|
padding-bottom: 29rpx;
|
|
border-bottom: 1rpx solid #EDEDED;
|
|
padding-top: 24rpx;
|
|
|
|
.consult-list {
|
|
|
|
.consult-list-left-title {
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #111111;
|
|
line-height: 38rpx;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.consult-list-left {
|
|
min-height: 150rpx;
|
|
width: calc(100% - 234rpx);
|
|
margin-right: 16rpx;
|
|
|
|
|
|
|
|
.consult-list-name {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.consult-image-one {
|
|
width: 218rpx;
|
|
height: 150rpx;
|
|
border-radius: 8rpx;
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.consult-image-two {
|
|
width: 310rpx;
|
|
height: 230rpx;
|
|
// box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
|
border-radius: 8rpx;
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.consult-image-three {
|
|
width: 200rpx;
|
|
height: 160rpx;
|
|
// box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
|
border-radius: 8rpx;
|
|
margin: 24rpx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-information {
|
|
background: #ffffff;
|
|
width: 690rpx;
|
|
margin-left: 30rpx;
|
|
border-radius: 20rpx;
|
|
padding-top: 16rpx;
|
|
}
|
|
|
|
.swiper-box {
|
|
padding: 30rpx;
|
|
|
|
}
|
|
|
|
.function-list {
|
|
width: 690rpx;
|
|
margin-left: 30rpx;
|
|
text-align: center;
|
|
background: #ffffff;
|
|
height: 289rpx;
|
|
border-radius: 20rpx;
|
|
padding-top: 26rpx;
|
|
|
|
.function-list-cont {
|
|
width: 170rpx;
|
|
margin-bottom: 34rpx;
|
|
position: relative;
|
|
|
|
.subscript {
|
|
min-width: 32rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
position: absolute;
|
|
top: -16rpx;
|
|
right: 32rpx;
|
|
padding: 4rpx;
|
|
background-color: red;
|
|
border-radius: 15px;
|
|
color: #ffffff;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-header {
|
|
position: relative;
|
|
height: 1rpx;
|
|
|
|
.home-bj {
|
|
width: 750rpx;
|
|
height: 555rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.home-search {
|
|
position: relative;
|
|
top: 0rpx;
|
|
width: 750rpx;
|
|
|
|
.brand-name {
|
|
height: 68rpx;
|
|
max-width: 260rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
|
|
.brand-name-tit {
|
|
min-width: 120rpx;
|
|
text-align: center;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 控制显示的行数 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-income {
|
|
position: relative;
|
|
left: 13rpx;
|
|
margin-top: 29rpx;
|
|
|
|
.home-income-center {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 81rpx;
|
|
color: #00A473;
|
|
font-size: 68rpx;
|
|
font-weight: 700;
|
|
|
|
.home-income-center-button {
|
|
width: 291rpx;
|
|
height: 66rpx;
|
|
background: #00CE90;
|
|
border-radius: 10rpx;
|
|
line-height: 66rpx;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.home-income-center-text {
|
|
color: #00A473;
|
|
font-size: 54rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.home-income-top-left {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
left: 38rpx;
|
|
}
|
|
|
|
.home-income-top-right {
|
|
position: absolute;
|
|
top: 22rpx;
|
|
left: 569rpx;
|
|
color: #018D63;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.home-income-bottom-left {
|
|
position: absolute;
|
|
bottom: 52rpx;
|
|
left: 42rpx;
|
|
}
|
|
|
|
.home-income-bottom-right {
|
|
position: absolute;
|
|
bottom: 52rpx;
|
|
right: 61rpx;
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
margin: 0 20rpx;
|
|
margin-top: 16rpx;
|
|
// padding: 0 24rpx;
|
|
width: 100%;
|
|
// width: 447rpx;
|
|
height: 68rpx;
|
|
// background: #F5F5F5;
|
|
border-radius: 32rpx;
|
|
position: relative;
|
|
|
|
.search-bj {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.search-box-c {
|
|
height: 64rpx;
|
|
padding: 0;
|
|
padding-left: 18rpx;
|
|
|
|
.search-box-search {
|
|
height: 84rpx;
|
|
// background: red;
|
|
width: 120rpx;
|
|
// text-align: center;
|
|
line-height: 78rpx;
|
|
}
|
|
|
|
.search-box-image {
|
|
margin: 0 12rpx;
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |