Files
douhuo-h5/pages/synthesis/entrustBrief.vue
2023-05-23 16:47:13 +08:00

607 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<view class="orderTab">
<view class="orderTab-item" :class="{active : entrustId == item.entrust_id}" @click="tabClick(item.entrust_id, item.type.value)" v-for="(item, index) in entrustArr" :key="index">
<text>{{item.title}}</text>
</view>
</view>
<view class="module">
<view class="entrustTop">
<image class="entrustTop-img" :src="entrustData.cover" mode="widthFix"></image>
<view class="entrustTop-btn" @click="seekClick">立即购买 ></view>
</view>
<view class="entrustCont">
<block v-if="type == 0">
<view class="entrustCivil">
<view class="entrustCivil-top">
<view class="entrustCivil-top-name">民事诉讼阶段</view>
<view class="entrustCivil-top-text">一审二审再审劳动争议案件存在劳动仲裁阶段)</view>
</view>
<view class="entrustCivil-list" v-for="(item, index) in sonArr" :key="index">
<view class="entrustCivil-list-title">
<view class="entrustCivil-list-number">0{{index + 1}}</view>
<view class="entrustCivil-list-name">{{item.text}}</view>
<view class="entrustCivil-list-trim"></view>
</view>
<view class="entrustCivil-list-item">
<view class="entrustCivil-list-label" v-for="(items, sonIndex) in item.children" :key="sonIndex">{{items.text}}</view>
</view>
</view>
</view>
</block>
<block v-else-if="type == 1">
<view class="entrustBrief">
<view class="entrustBrief-title">
<image class="entrustBrief-title-img" src="https://cdn.douhuofalv.com/images/2023/04/18/4d57907913a7d9ca5f3c7417421c894d.png" mode="aspectFill"></image>
<view class="entrustBrief-title-name">{{entrustData.title}}</view>
</view>
<view class="entrustBrief-list">
<view class="entrustBrief-list-item">
<text>1</text><view class="entrustBrief-list-text">代理受害人代写报案材料提供法律咨询代理刑事附带民事诉讼代理提出法律意见代理参加庭审活动一审二审</view>
</view>
<view class="entrustBrief-list-item">
<text>2</text><view class="entrustBrief-list-text">代理犯罪嫌疑人/被告人侦查阶段审查起诉阶段一审阶段二审阶段再审阶段</view>
</view> </view>
<image class="entrustBrief-logo" src="https://cdn.douhuofalv.com/images/2023/04/18/5037800b0abd01d828890a2b6386c38a.png" mode="widthFix"></image>
</view>
<image class="entrustBrief-text" src="https://cdn.douhuofalv.com/images/2023/04/18/e0dbc0ce562b479b9ff3ad3820971612.png" mode="widthFix"></image>
</block>
<block v-else-if="type == 2">
<view class="entrustPolitics">
<view class="entrustPolitics-item">
<view class="entrustPolitics-back">
<view class="entrustPolitics-item-tips">stage</view>
<view class="entrustPolitics-item-name">诉讼阶段</view>
<view class="entrustPolitics-item-label">
<view class="entrustPolitics-item-list">
<text>1</text>一审
</view>
<view class="entrustPolitics-item-list">
<text>2</text>二审
</view>
<view class="entrustPolitics-item-list">
<text>3</text>再审
</view>
</view>
<image class="entrustPolitics-item-logo" src="https://cdn.douhuofalv.com/images/2023/04/18/f7804d7c91c2389dd62ce10c19e26bec.png" mode="widthFix"></image>
</view>
</view>
<view class="entrustPolitics-item">
<view class="entrustPolitics-back">
<view class="entrustPolitics-item-tips">type</view>
<view class="entrustPolitics-item-name">常见类型</view>
<view class="entrustPolitics-item-label">
<view class="entrustPolitics-item-list">
<text>1</text>强制拆迁
</view>
<view class="entrustPolitics-item-list">
<text>2</text>行政不作为
</view>
<view class="entrustPolitics-item-list">
<text>3</text>征收补偿
</view>
</view>
<image class="entrustPolitics-item-logo" src="https://cdn.douhuofalv.com/images/2023/04/18/f7804d7c91c2389dd62ce10c19e26bec.png" mode="widthFix"></image>
</view>
</view>
</view>
</block>
</view>
<image class="entrustBottom" src="https://cdn.douhuofalv.com/images/2023/04/18/f08e45875d7dba6c3116690978a8a999.png" mode="widthFix"></image>
</view>
<!-- 关注公众号 -->
<view class="tipsBack" v-if="generalShow"></view>
<view class="tipsCont" v-if="generalShow">
<view class="tipsWhite">
<image class="tipsCont-img" src="@/static/imgs/general_back.png" 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>
</template>
<script>
import { judgeReal } from '@/apis/interfaces/user'
import { authFollow } from '@/apis/interfaces/index'
import { entrustList, entrustInfo, entrustSon } from '@/apis/interfaces/synthesis'
export default {
data() {
return {
type : '',
entrustId : '',
sonArr : [], // 民事子分类
entrustData: '', // 案件委托详情
entrustArr : [], // 案件委托列表
generalShow : false // 公众号
}
},
created() {
// 获取-案件委托-列表
this.yearServe();
},
methods: {
// 案件委托-列表
yearServe(){
entrustList().then(res => {
this.entrustArr = res
if(this.entrustId == '') {
this.entrustId = res[0].entrust_id
this.type = res[0].type.value
}
// 获取-案件委托-详情
this.yearInfo();
if(this.type == 0) {
// 获取-案件委托子分类
this.yearSon();
}
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 案件委托-详情
yearInfo(){
entrustInfo(this.entrustId).then(res => {
this.entrustData = res
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 获取-案件委托子分类
yearSon(){
entrustSon({parent_id: this.entrustId}).then(res => {
this.sonArr = res
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 顶级
tabClick(id, type) {
this.entrustId = id
this.type = type
if(type == 0) {
// 获取-案件委托子分类
this.yearSon();
}
// 获取-案件委托-详情
this.yearInfo();
},
// 立即咨询
seekClick() {
// 判断是否认证
judgeReal().then(res => {
if(res.has_sign) {
if(!res.has_subscribe) {
// 弹出公众号
this.generalShow = true
} else {
if(this.type == 0) {
this.$Router.push({name: 'EntrustCivil', params: {entrustId: this.entrustId}})
return
}
this.$Router.push({name: 'EntrustWrite', params: {entrustId: this.entrustId}})
}
return
}
// 跳到认证页面
this.$Router.replace({name: 'sheetIdcard'})
}).catch( err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 状态
judgeGeneral(){
// 获取微信授权信息
authFollow({
// url: 'https://web.douhuofalv.com/webview/webCode'
url: 'https://web.douhuotest.douhuofalv.com/webview/webCode'
}).then(res => {
window.location.href = res
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
// 关闭公众号
this.generalShow = false
}
}
}
</script>
<style lang="scss" scoped>
.content {
background-color: #171c54;
}
.orderTab {
position: fixed;
top: 44px;
left: 0;
width: 100%;
z-index: 9;
height: 100rpx;
background-color: white;
display: flex;
.orderTab-item {
flex: 3;
text-align: center;
margin-top: 20rpx;
text {
display: inline-block;
color: #000000;
background-image: linear-gradient(to right, #ffffff, #ffffff);
height: 64rpx;
line-height: 64rpx;
border-radius: 80rpx;
padding: 0 30rpx;
}
&.active text {
color: #ffffff;
background-image: linear-gradient(to right, #f8a53d, #dd3554);
}
}
}
.module {
padding-top: 100rpx;
}
.entrustCont {
background-color: #171c54;
padding: 30rpx 30rpx 0;
box-sizing: border-box;
width: 100%;
.entrustCivil {
.entrustCivil-top {
background-color: #111f6e;
border-radius: 15rpx;
padding: 30rpx 10rpx;
box-sizing: border-box;
color: #ffebbf;
text-align: center;
.entrustCivil-top-name {
margin-bottom: 10rpx;
font-size: 34rpx;
}
.entrustCivil-top-text {
font-size: 26rpx;
}
}
.entrustCivil-list {
margin-top: 30rpx;
color: #ffffff;
.entrustCivil-list-title {
font-size: 36rpx;
margin-bottom: 40rpx;
.entrustCivil-list-trim {
position: relative;
left: 290rpx;
bottom: 20rpx;
background-color: #2f3aae;
width: 35%;
height: 4rpx;
padding-left: 40rpx;
box-sizing: border-box;
&::after {
position: absolute;
content: '';
left: -50rpx;
top: -10rpx;
width: 20rpx;
height: 20rpx;
transform:rotate(45deg);
background-color: #2f3aae;
}
}
.entrustCivil-list-number {
font-weight: 600;
font-size: 68rpx;
background-image: -webkit-linear-gradient(top,#ffffff 40%, transparent 70%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-transform: uppercase;
}
.entrustCivil-list-name {
margin-top: -20rpx;
width: 280rpx;
}
}
.entrustCivil-list-item {
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 -20rpx;
.entrustCivil-list-label {
text-align: center;
flex: 1;
min-width: calc((100% - 64rpx) / 2);
margin: 0 15rpx 30rpx;
background-image: linear-gradient(to right, #3653cf, #1922a0);
border-radius: 10rpx;
line-height: 84rpx;
font-size: 26rpx;
}
}
}
}
.entrustPolitics {
margin-bottom: 40rpx;
display: flex;
.entrustPolitics-item {
flex: 2;
margin: 0 15rpx;
background-color: #0e1e58;
border-radius: 40rpx 15rpx 15rpx 15rpx;
padding: 20rpx;
overflow: hidden;
box-sizing: border-box;
.entrustPolitics-back {
padding: 30rpx 30rpx 80rpx;
box-sizing: border-box;
overflow: hidden;
border-radius: 40rpx 15rpx 15rpx 15rpx;
background-color: #002087;
position: relative;
.entrustPolitics-item-logo {
position: absolute;
bottom: 0;
right: 0;
width: 120rpx;
}
.entrustPolitics-item-name {
background-image: -webkit-linear-gradient(top,#fdf7ce, #e29c68);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight: 600;
font-size: 36rpx;
margin-bottom: 30rpx;
}
.entrustPolitics-item-tips {
font-size: 38rpx;
font-weight: 600;
background-image: -webkit-linear-gradient(top,#8090c3, transparent 85%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-transform: uppercase;
}
.entrustPolitics-item-label {
color: #ffffff;
font-size: 28rpx;
line-height: 80rpx;
.entrustPolitics-item-list {
display: flex;
text {
font-size: 22rpx;
display: block;
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
border: 2rpx solid #ffffff;
text-align: center;
border-radius: 50%;
margin-right: 20rpx;
margin-top: 26rpx;
}
}
}
}
}
}
.entrustBrief {
background-color: #09216e;
border-radius: 20rpx;
padding: 0 30rpx 30rpx;
box-sizing: border-box;
color: #ffffff;
position: relative;
.entrustBrief-title {
position: relative;
width: 100%;
text-align: center;
.entrustBrief-title-img,
.entrustBrief-title-name {
position: absolute;
top: -16rpx;
height: 80rpx;
line-height: 80rpx;
}
.entrustBrief-title-img {
width: 400rpx;
left: calc(50% - 200rpx);
display: block;
}
.entrustBrief-title-name {
width: 100%;
z-index: 9;
left: 0;
font-weight: 600;
}
}
.entrustBrief-list {
padding: 90rpx 10rpx 20rpx;
line-height: 48rpx;
font-size: 28rpx;
.entrustBrief-list-item {
margin-bottom: 30rpx;
display: flex;
text {
font-size: 22rpx;
display: block;
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
border: 2rpx solid #ffffff;
text-align: center;
border-radius: 50%;
margin-right: 20rpx;
margin-top: 10rpx;
}
.entrustBrief-list-text {
width: calc(100% - 48rpx);
text-align: justify;
}
}
}
.entrustBrief-logo {
position: absolute;
bottom: -30rpx;
right: 30rpx;
width: 240rpx;
z-index: 5;
}
}
.entrustBrief-text {
width: 100%;
margin-top: 60rpx;
}
}
.entrustTop {
position: relative;
width: 100%;
padding-top: 60%;
.entrustTop-img,.entrustTop-btn {
position: absolute;
left: 0;
}
.entrustTop-img {
width: 100%;
height: 100%;
top: 0;
}
.entrustTop-btn {
z-index: 4;
bottom: 15%;
left: 45rpx;
background-image: -webkit-linear-gradient(40deg,#f1c593, #fef9f2);
color: #12053d;
display: inline-block;
line-height: 74rpx;
padding: 0 40rpx;
font-size: 34rpx;
border-radius: 10rpx;
}
}
.entrustBottom {
width: 100%;
}
// 关注
.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;
}
}
}
</style>