457 lines
12 KiB
Vue
457 lines
12 KiB
Vue
<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>
|
||
</template>
|
||
|
||
<script>
|
||
import { entrustList, entrustInfo, entrustSon } from '@/apis/interfaces/synthesis'
|
||
export default {
|
||
data() {
|
||
return {
|
||
type : '', // 案件类型
|
||
entrustId : '',
|
||
sonArr : [], // 民事子分类
|
||
entrustData: '', // 案件委托详情
|
||
entrustArr : [], // 案件委托列表
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取-案件委托-列表
|
||
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() {
|
||
if(this.type === 0) {
|
||
this.$Router.push({name: 'EntrustCivil', params: { entrustId: this.entrustId, title: '民事诉讼'}})
|
||
return
|
||
}
|
||
this.$Router.push({name: 'EntrustWrite', params: {entrustId: this.entrustId, title: this.type == 1 ? '刑事辩护': '行政诉讼'}})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background-color: #171c54;
|
||
}
|
||
|
||
.orderTab {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 9;
|
||
height: 100rpx;
|
||
background-color: white;
|
||
display: flex;
|
||
.orderTab-item {
|
||
flex: 3;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
text {
|
||
display: inline-block;
|
||
color: #000;
|
||
background-image: white;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
border-radius: 80rpx;
|
||
padding: 0 30rpx;
|
||
}
|
||
&.active text {
|
||
color: #ffffff;
|
||
background-color: $main-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
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%;
|
||
}
|
||
</style> |