zhangjing/douhuo-h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[抖火客户端]

Browse Source
This commit is contained in:
张慢慢
2023-05-15 13:18:38 +08:00
commit d61dde8bd8
818 changed files with 142329 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

890
pages/index/index-老版.vue Normal file
View File

@@ -0,0 +1,890 @@
<template>
<view class="content">
<!-- top -->
<view class="top">
<view class="topBack"></view>
<view class="topCont">
<!-- logo -->
<view class="topCont-logo">
<image class="topCont-logo-img" src="@/static/imgs/logo_title.png" mode="widthFix"></image>
<view class="topCont-logo-go" @click="seekClick">
立即咨询
</view>
</view>
<!-- 专业优质在线法律平台 -->
<view class="topCont-text">
<view class="topCont-text-name">
专业优质在线法律平台
</view>
<view class="topCont-text-tips">
<text v-if="homeData.attorney">
{{homeData.attorney.value}}+{{homeData.attorney.name}}
</text>
<block v-if="homeData.use_count">{{homeData.use_count.value}}+{{homeData.use_count.name}}</block>
</view>
</view>
<!-- 平台公告 -->
<view class="topCont-notice">
<view class="topCont-notice-name"><image src="@/static/imgs/noticeArrow.png" mode="widthFix"></image>平台公告</view>
<view class="topCont-notice-cont">
<view class="topCont-notice-title">今日</view>
<swiper class="topCont-notice-swiper" circular :autoplay="autoplay" :interval="interval"
:duration="duration" vertical="y">
<block v-for="(item, index) in noticesArr" :key="index">
<swiper-item>
<view class="topCont-swiper-item">
<view class="topCont-swiper-name nowrap" v-if="item.user">
{{item.user.name}} {{item.user.text}}
</view>
<view class="topCont-swiper-name nowrap" v-else>
今日暂无信息
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<!-- 按钮链接 -->
<view class="topCont-tool">
<view class="topCont-tool-left">
<view class="topCont-tool-cont" @click="seekClick('other', 1)">
<!-- @click="$Router.push({name: 'sheetLoan', params: {type: 1}}) -->
<view class="topCont-whole-name">
经济纠纷
</view>
<view class="topCont-whole-tips">
咨询服务 抖火法律
</view>
<image class="topCont-whole-img" src="@/static/imgs/toolImg_00.png" mode="widthFix"></image>
</view>
</view>
<view class="topCont-tool-right">
<view class="topCont-tool-label" @click="seekClick('other', 2)">
<view class="topCont-tool-cont">
<view class="topCont-tool-name">
刑事辩护
</view>
<view class="topCont-tool-tips">
咨询服务 抖火法律
</view>
<image class="topCont-tool-img" src="@/static/imgs/toolImg_03.png" alt=""></image>
</view>
</view>
<view class="topCont-tool-label" @click="seekClick('other', 3)">
<view class="topCont-tool-cont">
<view class="topCont-tool-name">
合同纠纷
</view>
<view class="topCont-tool-tips">
咨询服务 抖火法律
</view>
<image class="topCont-tool-img" src="@/static/imgs/toolImg_02.png" alt=""></image>
</view>
</view>
</view>
</view>
<!-- 数据展示 -->
<view class="topCont-data">
<view class="topCont-data-label" v-if="homeData.consult">
{{homeData.consult.name}}<text>{{homeData.consult.value}}</text>人
</view>
<view class="topCont-data-label" v-if="homeData.sucess_count">
{{homeData.sucess_count.name}}<text>{{homeData.sucess_count.value}}</text>单
</view>
<view class="topCont-data-label" v-if="homeData.success_rate">
{{homeData.success_rate.name}}<text>{{homeData.success_rate.value}}</text>
</view>
</view>
</view>
</view>
<!-- 工具 -->
<!-- <view class="tool">
<scroll-view class="tool-lable" scroll-x="true" show-scrollbar="false">
<view class="tool-lable-item" v-for="(item, index) in lawyersWork" :key="index" @click="$Router.push({name: 'indexSort', params: {id: item.lawyer_business_id}})">
<image :src="item.cover" class="tool-lable-img"></image>
<view class="tool-lable-name">
{{item.title}}
</view>
</view>
</scroll-view>
</view> -->
<!-- 金牌律师 -->
<view class="list">
<view class="list-title">
金牌律师
</view>
<view class="lawyer">
<view class="lawyer-item" v-for="(item, index) in lawyersArr" :key="index" @click="$Router.push({name: 'lawyerDetails', params: {id: item.lawyer_id}})">
<view class="lawyer-item-img">
<!-- 5:6 -->
<image :src="item.cover" mode="aspectFill"></image>
<view class="nowrap lawyer-item-name">
{{item.name}}
</view>
</view>
<view class="lawyer-item-cont">
<view class="nowrap lawyer-item-tips">
擅长：
<block v-for="(items, itemsIndex) in item.tags" :key="itemsIndex">
{{items.name}},
</block>
</view>
<view class="lawyer-item-price">
<!-- <view class="lawyer-item-number">￥{{item.price}}</view> -->
<!-- <text>{{item.years}}+人咨询</text> -->
</view>
</view>
</view>
</view>
</view>
<!-- 法律常识 -->
<view class="list">
<view class="list-title">
法律常识
</view>
<view class="list-tabs">
<scroll-view class="list-classify" scroll-x="true" show-scrollbar="false">
<view v-for="(item, index) in articleArr" :key="index" class="list-tabs-item" :class="{show : categoryId == item.category_id}" @click="onTabs(item.category_id)">{{item.title}}</view>
</scroll-view>
</view>
<view class="list-item">
<view class="list-item-label" v-for="(item, index) in listArr" :key="index" @click="$Router.push({name: 'indexDetails', params: {id: item.article_id}})">
<view class="list-item-img">
<!-- 5:6 -->
<image :src="item.cover" mode="widthFix"></image>
</view>
<view class="list-item-cont">
<view class="nowrap list-item-name">
{{item.title}}
</view>
<view class="list-item-see">
<image class="list-item-icon" src="@/static/imgs/indexSee.png" mode="widthFix"></image>{{item .clicks}} 游览
</view>
<view class="list-item-tips" v-for="(items, itemsIndex) in item.categories" :key="itemsIndex">
{{items.title}}
</view>
</view>
</view>
</view>
</view>
<!-- 是否有上级 -->
<view class="tipsBack" v-if="generalShow"></view>
<view class="tipsCont" v-if="generalShow">
<view class="tipsWhite">
<image class="tipsCont-img" src="@/static/imgs/seek_back.jpg" mode="widthFix"></image>
<view class="tipsWhite-top">
<view class="tipsWhite-name">
抱歉，您还没有业务员
</view>
<view class="tipsWhite-text">
绑定后，可立即咨询
</view>
</view>
<view class="tipsWhite-btn">
<view class="tipsWhite-btn-go" @click="generalShow = false">
暂不绑定
</view>
<view class="tipsWhite-btn-go" @click="judgeGeneral">
立即绑定
</view>
</view>
</view>
</view>
<!-- 弹出 -->
<view class="haveBack" v-if="haveimg"></view>
<view class="haveCont" v-if="haveimg">
<image class="haveCont-img" :src="layadImg" mode="widthFix"></image>
<image class="haveCont-close" src="@/static/imgs/close.png" mode="widthFix" @click="haveHIde"></image>
</view>
</view>
</template>
<script>
import { home, articleSort, articleList } from '@/apis/interfaces/index'
import { userIndex } from '@/apis/interfaces/user'
export default {
data() {
return {
autoplay : true,
interval : 3000,
duration : 500,
homeData : {}, // 首页数据
homeList : '', // 首页分类
lawyersArr : [], // 精选律师
noticesArr : [], // 公告列表
articleArr : [], // 文章分类
categoryId : 1, // 文章分类id
listArr : [], // 文章列表
page : {}, // 分页信息
lodingStats : false, // 加载状态
generalShow : false, // 是否有上级弹出
parentData : '',
first : 1,
layadState : '',
layadImg : '',
haveimg : ''
}
},
onShow() {
// 获取首页数据
this.homeInfo();
// 获取文章分类
this.articleInfo();
// 获取文章列表
this.articleItem();
if(this.$store.getters.getToken) {
userIndex().then(res => {
this.parentData = res.parent
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
}
},
methods: {
// 首页数据
homeInfo() {
home().then(res => {
if(res.layad.is_lay_ad) {
this.layadImg = res.layad.lay_ad_img
}
let times = Number(res.layad.times.padEnd(4, 0))
if(this.first === 1 && res.layad.is_lay_ad) {
this.haveimg = true
// 定时器
let timer = setInterval(() => {
clearInterval(timer)
this.haveimg = false
},times);
}
this.homeList = res.categories
this.lawyersArr = res.lawyers
this.noticesArr = res.notices
let newObj = {}
res.configs.map(item => newObj[item.slug] = {name: item.name, value: item.value})
this.homeData = newObj
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 文章分类
articleInfo() {
articleSort().then(res => {
this.articleArr = res
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 文章分类筛选
onTabs(e) {
this.categoryId = e
// 获取文章列表
this.articleItem();
},
// 文章列表
articleItem(page) {
articleList({
category_id: this.categoryId,
page : page || 1
}).then(res => {
let list = this.listArr,
newData = []
if(page == 1 || page == undefined) list = []
newData = list.concat(res.data)
this.listArr = newData
this.page = res.page
this.lodingStats = false
uni.stopPullDownRefresh()
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 立即咨询判断
seekClick(e, type) {
if(this.$store.getters.getToken) {
if(this.parentData) {
if(e != 'other') {
// 跳到立即咨询
this.$Router.push({name: 'indexIntroduce'})
} else {
// 跳到其他立即咨询
this.$Router.push({name: 'sheetLoan', params: {type: type}})
}
return
}
// 业务员弹出
this.generalShow = true
return
}
// 去登录
this.$Router.push({name: 'Login'})
},
// 状态
judgeGeneral(){
// 跳到业务员搜索
this.$Router.push({name: 'indexWork'})
// 关闭业务员弹出
this.generalShow = false
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
// 获取文章列表
this.articleItem()
},
// 上拉加载
onReachBottom(){
this.lodingStats = true
let pageNumber = this.page.current
if(this.page.has_more){
pageNumber++
// 获取文章列表
this.articleItem(pageNumber)
}
},
// 关闭弹出
haveHIde() {
this.first = 0
this.haveimg = false
}
}
}
</script>
<style lang="scss" scoped>
body {
background-color: #f2f6f8;
}
.top {
position: relative;
.topBack {
width: 100%;
position: absolute;
padding-top: 37%;
background-image: linear-gradient(to right, #d51a59, #ed7646);
border-radius: 0 0 $radius*4 $radius*4;
}
.topCont {
width: 100%;
position: inherit;
top: 0;
left: 0;
padding: $padding;
box-sizing: border-box;
position: relative;
.topCont-logo {
display: flex;
line-height: 58rpx;
.topCont-logo-img {
margin-right: 15rpx;
width: 190rpx;
}
.topCont-logo-name {
font-weight: 600;
}
.topCont-logo-go {
background-color: #ffffff;
border-radius: $radius*5;
text-align: center;
color: $mian-color;
font-size: $title-size;
line-height: 72rpx;
font-weight: 600;
display: inline-block;
position: absolute;
right: $margin;
top: $margin + 10;
padding: 0 $padding + 10;
}
}
.topCont-text {
margin-top: $margin;
color: #ffffff;
.topCont-text-name {
font-size: $title-size + 6;
font-weight: 600;
}
.topCont-text-tips {
font-size: $title-size-sm;
margin: $margin - 10 0 $margin;
text {
padding-right: $padding * 2;
display: inline-block;
position: relative;
}
}
}
.topCont-notice {
width: 100%;
height: 74rpx;
overflow: hidden;
display: flex;
background-color: #ffffff;
border-radius: $radius - 5;
padding: 0 $padding;
box-sizing: border-box;
margin-bottom: $margin;
.topCont-notice-name {
color: $mian-color;
font-size: $title-size-lg;
font-weight: 600;
width: 190rpx;
line-height: 74rpx;
display: flex;
image {
width: 38rpx;
height: 38rpx;
margin-top: 19rpx;
margin-right: 10rpx;
vertical-align: middle;
}
}
.topCont-notice-cont {
height: 74rpx;
width: calc(100% - 190rpx);
display: flex;
.topCont-notice-title {
font-size: $title-size-sm - 4;
display: inline-block;
border: 2rpx solid $mian-color;
color: $mian-color;
height: 34rpx;
line-height: 32rpx;
margin-top: 20rpx;
width: 60rpx;
text-align: center;
border-radius: $radius - 10;
margin-right: $margin - 10;
}
.topCont-notice-swiper {
height: 74rpx;
width: calc(100% - 60rpx);
.topCont-swiper-item {
display: flex;
font-size: $title-size-sm - 2;
line-height: 74rpx;
.topCont-swiper-name {
color: $text-color;
}
}
}
}
}
.topCont-tool {
display: flex;
.topCont-tool-left {
width: calc(50% - 20rpx);
position: relative;
background-color: #554ca7;
background-image: linear-gradient(to bottom right, #544df1, #8283ff);
padding-top: calc(50% - 20rpx);
margin-right: $margin - 10;
border-radius: $radius;
overflow: hidden;
.topCont-whole-name {
margin: 15rpx 0;
font-size: $title-size + 6;
}
.topCont-whole-tips {
line-height: 35rpx;
font-size: $title-size-sm - 2;
opacity: .9;
}
.topCont-whole-img {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
}
}
.topCont-tool-right {
width: 50%;
}
.topCont-tool-label {
position: relative;
padding-top: calc(50% - 20rpx);
border-radius: $radius;
overflow: hidden;
&:nth-child(1) {
margin-bottom: 20rpx;
background-image: linear-gradient(to bottom right, #f46049, #fe8479);
}
&:nth-child(2) {
margin-top: 20rpx;
background-image: linear-gradient(to bottom right, #32c4c2, #50ecc7);
}
}
.topCont-tool-cont {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
padding: $padding - 10 $padding;
box-sizing: border-box;
color: #ffffff;
.topCont-tool-name {
margin-bottom: $margin - 15;
}
.topCont-tool-tips {
font-size: $title-size-sm - 4;
opacity: .7;
}
.topCont-tool-img {
width: 80rpx;
height: 80rpx;
position: absolute;
right: 25rpx;
top: calc(50% - 40rpx);
}
}
}
.topCont-data {
background-color: #f6f6f8;
line-height: 70rpx;
display: flex;
margin-top: 30rpx;
border-radius: $radius - 10;
font-size: $title-size-sm - 2;
.topCont-data-label {
flex: 3;
text-align: center;
text {
color: $mian-color;
padding: 0 5rpx;
}
}
}
}
}
// 法律常识
.list {
padding:0 $padding;
box-sizing: border-box;
.list-title {
font-weight: 600;
margin-bottom: 10rpx;
color: $text-color;
}
.lawyer {
overflow: hidden;
margin: 20rpx -15rpx 0;
.lawyer-item {
width: calc(50% - 30rpx);
float: left;
margin: 0 15rpx $margin;
border: 2rpx solid #f1f1f1;
box-sizing: border-box;
border-radius: $radius-m;
overflow: hidden;
.lawyer-item-img {
position: relative;
width: 100%;
padding-top: 55%;
overflow: hidden;
background-color: #515151;
image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.lawyer-item-name {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .1);
line-height: 54rpx;
color: #ffffff;
padding: 0 $padding - 10;
box-sizing: border-box;
font-size: $title-size-lg;
}
}
.lawyer-item-cont {
padding: $padding - 10;
box-sizing: border-box;
.lawyer-item-tips {
font-size: $title-size-m;
color: $text-color;
}
.lawyer-item-price {
display: flex;
margin-top: 10rpx;
line-height: 44rpx;
.lawyer-item-number {
flex: 1;
color: $mian-color;
font-weight: 600;
font-size: $title-size;
}
text {
font-size: $title-size-sm;
color: #9d9d9d;
}
}
}
}
}
.list-tabs {
background-color: #f0f0f0;
border-radius: $radius-m;
padding: 5rpx $padding 15rpx;
box-sizing: border-box;
margin-top: $margin - 10;
}
.list-classify {
white-space: nowrap;
.list-tabs-item {
display: inline-block;
font-size: $title-size-m;
color: $text-color;
padding-right: 50rpx;
line-height: 54rpx;
position: relative;
border-bottom: 6rpx solid #e5e5e5;
&::after {
position: absolute;
content: '';
left: 0;
bottom: -6rpx;
background-color: transparent;
border-radius: $radius*3;
width: calc(100% - 50rpx);
height: 6rpx;
z-index: 9;
}
&:last-child {
padding-right: 0;
}
&.show {
color: #000000;
}
&.show::after {
background-color: $mian-color;
}
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
}
.list-item {
margin-top: $margin;
.list-item-label {
margin-bottom: $margin;
position: relative;
.list-item-img {
width: 200rpx;
height: 150rpx;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d2d2d2;
border-radius: $radius - 10;
overflow: hidden;
box-sizing: border-box;
image {
width: 100%;
vertical-align:middle;
}
}
.list-item-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-left: 220rpx;
box-sizing: border-box;
box-sizing: border-box;
.list-item-name {
color: $text-color;
line-height: 44rpx;
font-size: $title-size-m;
}
.list-item-see {
font-size: $title-size-sm - 4;
margin-top: 30rpx;
display: flex;
line-height: 30rpx;
.list-item-icon {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.list-item-tips {
font-size: $title-size-sm - 4;
display: inline-block;
color: #a1a1a1;
padding-left: 40rpx;
}
}
}
}
}
// 是否有上级
.tipsBack {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 9;
background-color: rgba(0, 0, 0, .8);
}
.tipsCont {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
padding: 0 10%;
box-sizing: border-box;
}
.tipsWhite {
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
}
.tipsWhite-top {
padding: $padding;
box-sizing: border-box;
text-align: center;
}
.tipsCont-img {
width: 100%;
}
.tipsWhite-name {
text-align: center;
color: #111111;
font-size: 34rpx;
font-weight: 600;
margin-bottom: 15rpx;
}
.tipsWhite-text {
font-size: 30rpx;
color: #666666;
line-height: 48rpx;
}
.tipsWhite-btn {
display: flex;
padding: $padding 10rpx;
box-sizing: border-box;
.tipsWhite-btn-go {
flex: 2;
color: #fff;
margin: 0 15rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border: 2rpx solid #F6F6F6;
background-color: #007df5;
border-radius: $radius-m;
&:first-child {
color: #333333;
background-color: #ffffff;
border: 2rpx solid #cccccc;
}
}
}
// 图片弹出
.haveBack {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 9;
background-color: rgba(0, 0, 0, .7);
}
.haveCont {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
padding: 0 10%;
box-sizing: border-box;
text-align: center;
}
.haveCont-img {
width: 75%;
border-radius: 20rpx;
overflow: hidden;
display: block;
margin: 0 auto;
}
.haveCont-close {
width: 52rpx;
height: 52rpx;
margin-top: 10px;
opacity: .8;
}
</style>