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

506
pages/user/index.vue Normal file
View File

@@ -0,0 +1,506 @@
<template>
<view class="content">
<!-- 临时 style="padding-top: 22%;" -->
<view class="userTop" :class="{active : !userLogin}">
<img class="userTop-back" src="@/static/imgs/userTop.png">
<view class="userTop-cont">
<view class="userTop-height" v-if="userLogin">
<view class="userTop-head">
<image :src="userData.avatar ? userData.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
</view>
<view class="userTop-text">
<view class="userTop-name">
{{userData.nickname}} <image v-if="userData.certification" class="userTop-icon" src="@/static/imgs/user_attestation.png"></image>
</view>
<view class="userTop-identity-tips">
普通用户 <image class="userTop-arrow" src="@/static/imgs/use_arrow.png"></image>
</view>
</view>
</view>
<view class="userTop-height" v-else @click="$Router.push({name: 'Login'})">
<view class="userTop-head">
<image src="@/static/imgs/default_myHead.png" mode="aspectFill"></image>
</view>
<view class="userTop-text">
<view class="userTop-login">
请先登录
</view>
</view>
</view>
<!-- 临时 style="display: none;" -->
<view class="userTop-see" v-if="userLogin">
<view class="userTop-label" @click="$Router.push({name: 'sheetIndex'})">
<view class="userSee-name">
金法咨询单
</view>
<view class="userSee-number" v-if="userData.business_orders_count">
{{ userData.business_orders_count.all}}<text>单</text>
</view>
<view class="userSee-tips">
精选专业法规大全
</view>
<block v-if="userData.business_orders_count">
<view class="userSee-new" v-if="userData.business_orders_count.all">
新订单
</view>
</block>
<img class="userSee-icon" src="@/static/imgs/userIcon_01.png">
</view>
<!-- @click="$Router.push({name: 'synthesisOrder'})" -->
<view class="userTop-label" @click="$Router.push({name: 'synthesisOrder'})">
<view class="userSee-name">
综法咨询单
</view>
<!-- v-if="userData.business_orders_count" -->
<view class="userSee-number" v-if="userData.business_orders_count">
{{synthesisAll}}<text>单</text>
</view>
<view class="userSee-tips">
支持精准匹配索引
</view>
<img class="userSee-icon" src="@/static/imgs/userIcon_02.png">
</view>
</view>
</view>
</view>
<!-- 临时 style="display: none;" -->
<view class="board" v-if="userLogin">
<view class="board-title">
数据看板
</view>
<view class="board-item" v-if="userData.business_orders_count">
<view class="board-lable" :class="{active : userData.business_orders_count.confirm_count}" @click="$Router.push({name: 'OrderModify'})">
<img class="board-icon" src="@/static/imgs/userBoard_01.png">
<view class="board-name">待确认方案</view>
<view class="board-number">{{userData.business_orders_count.confirm_count}}</view>
</view>
<view class="board-lable" :class="{active : userData.business_orders_count.modify_count}" @click="$Router.push({name: 'OrderAffirm'})">
<img class="board-icon" src="@/static/imgs/userBoard_02.png">
<view class="board-name active">修改订单资料</view>
<view class="board-number active">{{userData.business_orders_count.modify_count}}</view>
</view>
<view class="board-lable" :class="{active : userData.business_orders_count.diff_count}" @click="$Router.push({name: 'OrderMake'})">
<img class="board-icon" src="@/static/imgs/userBoard_03.png">
<view class="board-name">补交服务费</view>
<view class="board-number">{{userData.business_orders_count.diff_count}}</view>
</view>
</view>
</view>
<view class="tool">
<view class="tool-title">
其他工具
</view>
<view class="tool-item">
<view class="tool-lable" @click="$Router.push({name: 'indexCollect'})">
<img class="tool-icon" src="@/static/imgs/userTool_01.png">
<view class="tool-name">我的收藏</view>
</view>
<!-- style="display: none;" -->
<view class="tool-lable" @click="$Router.push({name: 'Manage'})">
<img class="tool-icon" src="@/static/imgs/userTool_03.png">
<view class="tool-name">信息管理</view>
</view>
<view class="tool-lable" @click="$Router.push({name: 'Coupon'})">
<img class="tool-icon" src="@/static/imgs/userTool_02.png">
<view class="tool-name">优惠券</view>
</view>
<view class="tool-lable" @click="$Router.push({name: 'Setup'})">
<img class="tool-icon" src="@/static/imgs/userTool_04.png">
<view class="tool-name">其他功能</view>
</view>
<!-- <view class="tool-lable" @click="$Router.push({name: 'Modify'})">
<img class="tool-icon" src="@/static/imgs/userTool_03.png">
<view class="tool-name">修改密码</view>
</view>
<view class="tool-lable" @click="$Router.push({name: 'Modify'})">
<img class="tool-icon" src="@/static/imgs/userTool_05.png">
<view class="tool-name">基本信息</view>
</view>
<view class="tool-lable" @click="outLogin" v-if="userLogin">
<img class="tool-icon" src="@/static/imgs/userTool_04.png">
<view class="tool-name">退出登录</view>
</view> -->
</view>
</view>
<view class="tool" v-if="listArr.length > 0">
<view class="tool-title">
常识推荐
</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}})" v-if="index<4">
<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"></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>
</template>
<script>
import { articleList } from '@/apis/interfaces/index'
import { userIndex } from '@/apis/interfaces/user'
import { synthesisCount } from '@/apis/interfaces/synthesis'
export default {
data() {
return {
userLogin : '', //登录状态
userData : {}, //用户数据
synthesisAll : '', // 综法数量
listArr : [], // 文章列表
page : {}, // 分页信息
lodingStats : false, // 加载状态
};
},
onShow() {
if(this.$store.getters.getToken) {
this.userLogin = true
// 获取用户信息
this.userInfo();
// 获取综法订单数据数量
this.synthesisInfo();
}
// 获取文章列表
this.articleItem();
},
methods:{
// 用户信息
userInfo() {
userIndex().then(res => {
this.userData = res
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 综法订单数据数量
synthesisInfo() {
synthesisCount({channel: 'self'}).then(res => {
this.synthesisAll = res.all
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 文章列表
articleItem(page) {
articleList({
category_id: 1,
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"
})
})
},
}
}
</script>
<style lang="scss" scoped>
.userTop {
position: relative;
width: 100%;
padding-top: 50%;
&.active {
padding-top: 22%;
}
.userTop-back,
.userTop-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.userTop-cont {
z-index: 2;
padding: $padding;
box-sizing: border-box;
.userTop-height {
height: 110rpx;
.userTop-head {
width: 110rpx;
height: 110rpx;
float: left;
border-radius: 50%;
overflow: hidden;
background-color: #fdeff0;
padding: 10rpx;
box-sizing: border-box;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.userTop-text {
width: calc(100% - 150rpx);
float: left;
margin-left: 30rpx;
padding-top: $padding - 20;
box-sizing: border-box;
.userTop-login {
line-height: 90rpx;
font-weight: 600;
}
.userTop-name {
display: flex;
font-weight: 600;
margin-bottom: 8rpx;
.userTop-icon {
width: 38rpx;
height: 38rpx;
margin: 3rpx 0 0 10rpx;
}
}
.userTop-identity-tips {
font-size: $title-size-sm - 4;
display: inline-block;
box-sizing: border-box;
background-color: #fbe0e2;
border-radius: $radius-m;
padding: 0 10rpx;
line-height: 34rpx;
color: $mian-color;
.userTop-arrow {
width: 26rpx;
height: 26rpx;
vertical-align: -6rpx;
margin-left: 4rpx;
}
}
}
}
.userTop-see {
margin: $margin -15rpx;
display: flex;
.userTop-label {
flex: 2;
background-color: #ffffff;
border-radius: $radius-lg;
margin: 0 15rpx;
padding: $padding - 10 $padding - 10 $padding - 5;
box-sizing: border-box;
position: relative;
overflow: hidden;
.userSee-tips {
font-size: $title-size-sm - 4;
background-color: #fff6ea;
color: $yellow-color;
display: inline-block;
padding: 0 15rpx;
line-height: 40rpx;
border-radius: $radius-m - 4;
}
.userSee-number {
margin: 10rpx 0;
font-weight: 600;
text {
font-weight: normal;
font-size: $title-size-sm - 4;
padding-left: 5rpx;
}
}
&:last-child .userSee-tips {
background-color: #fff2f2;
color: $mian-color;
}
.userSee-icon {
width: 130rpx;
height: 130rpx;
position: absolute;
right: -20rpx;
bottom: -10rpx;
}
.userSee-new {
position: absolute;
top: -2rpx;
right: 20rpx;
font-size: $title-size-sm - 4;
transform: scale(.9);
background-color: $mian-color;
color: #ffffff;
padding: 0 10rpx;
line-height: 36rpx;
}
}
}
}
}
// 看板
.board {
padding: $padding $padding $padding - 15;
box-sizing: border-box;
.board-title {
font-weight: 600;
margin-bottom: 20rpx;
}
.board-item {
display: flex;
margin: 0 -15rpx;
.board-lable {
width: calc(33.33% - 30rpx);
box-shadow: 0 0 8rpx rgba(0, 0, 0, .05);
padding: $padding - 10 $padding - 5 $padding + 10;
box-sizing: border-box;
overflow: hidden;
border-radius: $radius-sm;
position: relative;
color: #969696;
margin: 0 15rpx;
&::after {
position: absolute;
content: '';
right: 15rpx;
top: 15rpx;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: transparent;
}
&.active::after {
background-color: $mian-color;
}
.board-name {
margin-bottom: 20rpx;
font-size: $title-size-sm;
&.active {
color: #000000;
}
}
.board-number {
font-weight: 600;
color: #000000;
font-size: $title-size + 4;
&.active {
color: $mian-color;
}
}
.board-icon {
width: 74rpx;
height: 74rpx;
position: absolute;
bottom: 0;
right: 0;
}
}
}
}
// 工具
.tool {
padding: $padding $padding $padding - 15;
box-sizing: border-box;
.tool-title {
font-weight: 600;
margin-bottom: 20rpx;
color: $text-color;
}
.tool-item {
padding: $padding 0;
border-radius: $radius-sm;
display: flex;
.tool-lable {
flex: 4;
text-align: center;
font-size: 24rpx;
.tool-icon {
width: 56rpx;
height: 56rpx;
margin-bottom: 5rpx;
}
}
}
}
// 常识推荐
.list-item {
margin-top: $margin;
.list-item-label {
margin-bottom: $margin;
position: relative;
.list-item-img {
width: 200rpx;
height: 150rpx;
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;
}
}
}
}
</style>