Skip to content

H
hls-xcmg-vue-app
Commit 4e20c395 authored by 24776's avatar 24776
Browse files
Options

合同签约

parent dda81058
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2892 additions and 8527 deletions
src/pages/contractSigning/contract-content.vue 0 → 100644
View file @ 4e20c395
<template>
<h-view id="contract-content" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>合同详情</span>
</div>
</h-header>
<h-content class="dealer-guarantee">
<div class="dealer">
<img v-show="name ==='农行代扣授权书'" src="@/assets/constractSigning/twill.png" alt="">
<img v-show="name === '租赁主合同'" src="@/assets/constractSigning/contract-icon.png" alt="">
<h1>{{ name }}</h1>
<div class="dealer-content">
<div class="contract-header">
<div>甲方：<span>徐工租赁</span></div>
<div>乙方：<span>******</span></div>
<div>统一社会信用代码/身份证号：<span>******</span></div>
</div>
<div class="contract-content">
<p>甲乙双方基于平等互利的原则，经友好协商，就乙方经销甲方产品达成如下协议：</p>
<div v-for="(item,index) in 5" :key="index" class="part">
<h3>第一条　授权经销</h3>
<p>1、甲方在此授权乙方于本协议有效期内在甲方指定的行政区域（以下称销售区域）内销售甲方的产品，成为甲方产品的经销商</p>
</div>
</div>
<div class="contract-footer">
<p>甲方（盖章）：</p>
<p>代表（签字）：</p>
<p>_________年____月____日</p>
<p>乙方（盖章）</p>
<p>代表（签字）：</p>
<p>_________年____月____日</p>
</div>
</div>
</div>
</h-content>
</h-view>
</template>
<script>
import Check1 from '@/assets/distributorSign/conditionChecked.png'
import Check2 from '@/assets/distributorSign/textChecked.png'
import unCheck1 from '@/assets/distributorSign/conditionUncheck.png'
import unCheck2 from '@/assets/distributorSign/textUncheck.png'
export default {
name: 'ContractDetail',
components: {
},
data () {
return {
num: 1,
check1: Check1,
check2: Check2,
uncheck1: unCheck1,
uncheck2: unCheck2,
res: '',
name: '',
}
},
computed: {},
watch: {},
activated () {
this.name = this.$route.params.name
},
methods:
{
getTabNum (i) {
console.log(i)
this.tabNum = i
},
},
}
</script>
<style lang='less' >
#contract-content {
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
.dealer-guarantee{
padding: 10px;
.dealer{
background-color: #fff;
box-shadow: 0 1px 2px 1px rgba(128,128,128,0.10);
border-radius: 4px;
position: relative;
img:first-child{
width: 100%;
}
img:nth-child(2){
position: absolute;
top: 0px;
left: 25px;
height: 40px;
}
h1{
font-family: PingFangSC-Semibold;
font-weight:700;
font-size: 16px;
color: #00469C;
text-align: center;
padding-top: 16px;
margin: 0px;
}
.dealer-content{
padding: 14px 25px;
.contract-header{
margin-bottom: 16px;
div{
font-family: PingFangSC-Semibold;
font-weight:700;
font-size: 12px;
color: #00469C;
line-height: 17px;
span{
font-family: PingFangSC-Semibold;
font-weight:700;
font-size: 12px;
color: #383F45;
line-height: 17px;
}
}
}
.contract-content{
margin-bottom: 16px;
font-size: 12px;
p:first-child{
text-indent: 2em;
color: #383F45;
line-height: 17px;
}
.part{
margin-top: 16px;
h3{
color: #00469C;
font-size: 12px;
line-height: 17px;
margin: 0;
}
p{
color: #383F45;
line-height: 17px;
}
}
}
.contract-footer{
font-size: 12px;
color: #383F45;
line-height: 17px;
}
}
}
}
}
</style>
src/pages/contractSigning/contract-detail.vue 0 → 100644
View file @ 4e20c395
This diff is collapsed.
src/pages/contractSigning/contract-signing.vue 0 → 100644
View file @ 4e20c395
<template>
<h-view class="contract-signing">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>合同签约</span>
</div>
</h-header>
<div class="tab-style">
<div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check1:uncheck1"><span>待签约</span></div>
<div :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;"><img :src="num === 2?check2:uncheck2"><span>已签约</span></div>
</div>
<div class="hinput">
<div class="search-box">
<input type="text" placeholder="请输入进件号/承租人名称">
<img src="@/assets/constractSigning/search.png" alt="" style="width:18px">
</div>
</div>
<h-content>
<div v-for="(item,index) in contractMsg" :key="index" class="contract-list">
<div class="item">
<img src="@/assets/constractSigning/Incoming.png" alt="" style="height:18px">
<p class="incoming-num">进件号</p>
<p class="code">{{ item.code }}</p>
</div>
<div class="details">
<div class="option">
<p class="name">承租人</p>
<p class="full-name normal">{{ item.name }}</p>
</div>
<div class="option" @click="goDetails(index)">
<p class="name">合同租金</p>
<p class="normal money">{{ item.money | currency }}</p>
<img src="@/assets/distributorSign/goDetails.png" alt="">
</div>
<div class="option">
<p class="name">申请时间</p>
<p class="normal">{{ item.date }}</p>
</div>
</div>
</div>
</h-content>
</h-view>
</template>
<script>
import Check1 from '@/assets/constractSigning/no-done.png'
import Check2 from '@/assets/constractSigning/yes-done.png'
import unCheck1 from '@/assets/constractSigning/no-undone.png'
import unCheck2 from '@/assets/constractSigning/yes-undone.png'
export default {
data () {
return {
num: 1,
check1: Check1,
check2: Check2,
uncheck1: unCheck1,
uncheck2: unCheck2,
contractMsg: [
{name: '张三', money: 90000, date: '2019-03-1', code: '201903022001'},
{name: '李四', money: 90000, date: '2019-03-1', code: '201903022002'},
{name: '王五', money: 90000, date: '2019-03-1', code: '201903022003'},
{name: '赵六', money: 90000, date: '2019-03-1', code: '201903022004'},
{name: '张三', money: 90000, date: '2019-03-1', code: '201903022001'},
{name: '李四', money: 90000, date: '2019-03-1', code: '201903022002'},
{name: '王五', money: 90000, date: '2019-03-1', code: '201903022003'},
{name: '赵六', money: 90000, date: '2019-03-1', code: '201903022004'},
],
}
},
activated () {
},
methods: {
goDetails (index) {
this.$router.push({
name: 'ContractDetail',
})
},
},
}
</script>
<style lang="less" type="text/less">
.contract-signing{
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
.tab-style{
display:flex;
justify-content: center;
padding-top:12px;
padding-bottom: 8px;
align-items: center;
background-color: #fff;
box-shadow:0 2px 3px 0 rgba(220,220,221,0.50);
div{
position: relative;
height: 32px;
width: 172px;
border-radius:16px;
border-radius: 16px;
font-family: PingFangSC-Semibold;
font-size: 14px;
letter-spacing: 0.43px;
margin: 0 4px;
line-height: 32px;
}
.undone{
background: rgba(220,220,221,0.26);
color: #383F45;
}
.done{
background: rgba(0,70,156,0.10);
color: #00469C;
}
img{
height: 20px;
display: block;
float: left;
margin: 6px 0 0 43px;
}
span{
position: absolute;
left:70px;
}
}
.hinput {
width: 100%;
height: 68px;
border-bottom:1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
margin-top: 3px;
background: #fff;
.search-box {
width: 93.6%;
height: 36px;
font-size: 14px;
color: #B4B4B5;
letter-spacing: 0;
font-family: PingFangSC-Regular;
border: 1px solid rgba(56,63,69,0.60);
border-radius: 4px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
input {
width: 90%;height: 100%;
opacity: 0.4;
border: none
}
}
}
.contract-list {
width: 100%;
height: 120px;
// border: 1px solid #ccc;
background: #fff;
margin-top: 8px;
.item {
width: 100%;
height: 34px;
background: rgba(00, 70, 156, 0.1);
display: flex;
flex-direction: row;
align-items: center;
img {
margin-left: 16.6px;
}
.incoming-num {
font-family: PingFangSC-Semibold;
// width: 42px;
height: 20px;
font-weight: bolder;
line-height: 20px;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
margin-left: 8.8px;
}
.code {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
margin-left: 8px;
font-weight: 700;
}
}
.details {
width: 100%;
height: 86px;
display: flex;
flex-direction: column;
justify-content: space-around;
.option {
width: 100%;
// flex: 1;
display: flex;
flex-basis: row;
.name {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56,63,69,0.60);
width: 80px;
height: 18px;
line-height: 18px;
text-align: right
}
.normal {
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
height: 18px;
line-height: 18px;
margin-left: 8px;
}
.money {
color: #FCC800;
}
img {
margin-left: 55%
}
}
}
}
}
</style>
src/pages/contractSigning/entry-info.vue 0 → 100644
View file @ 4e20c395
<template>
<h-view id="entry-info" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>银行卡信息录入</span>
</div>
</h-header>
<h-content>
<div class="info">
<div class="info-header">
<p>请上传银行卡照片</p>
<div class="bank-pic">
<img src="@/assets/constractSigning/bank.png" alt="">
</div>
</div>
<list-item :item-height="44" class="info-center">
<item>
<div slot="name" >银行卡卡号</div>
<section slot="content">上传银行卡自动填充</section>
</item>
<item>
<div slot="name" >账户名称</div>
<input slot="content" type="number" placeholder="请输入账户名称">
</item>
<item>
<div slot="name" >银行名称</div>
<input slot="content" type="number" placeholder="请输入银行名称">
</item>
<item>
<div slot="name" >支行名称</div>
<input slot="content" type="number" placeholder="请输入支行名称">
</item>
</list-item>
</div>
</h-content>
<bottom-tab>
<tab-button class="footer">
保存
</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
import Check1 from '@/assets/distributorSign/conditionChecked.png'
import Check2 from '@/assets/distributorSign/textChecked.png'
import unCheck1 from '@/assets/distributorSign/conditionUncheck.png'
import unCheck2 from '@/assets/distributorSign/textUncheck.png'
export default {
name: 'ContractDetail',
components: {
},
data () {
return {
num: 1,
check1: Check1,
check2: Check2,
uncheck1: unCheck1,
uncheck2: unCheck2,
res: '',
name: '',
}
},
computed: {},
watch: {},
activated () {
this.name = this.$route.params.name
},
methods: {
},
}
</script>
<style lang='less' >
#entry-info {
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
.info{
background-color: #fff;
.info-header {
padding: 12px 16px;
border-bottom: 1px solid #D9DBDF;
p{
font-family: PingFangSC-Regular;
font-size: 13px;
color: #656464;
letter-spacing: 0;
}
div{
border: 1px dashed #DCDCDD;
border-radius: 2px;
width: 172px;
height: 120px;
text-align: center;
margin: 14px auto 0;
line-height: 145px;
}
img{
height: 45px;
}
}
.info-center{
div{
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
line-height: 18px;
}
section{
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(180,180,181,0.60);
letter-spacing: 0;
line-height: 18px;
}
input::placeholder{
font-family: PingFangSC-Regular;
font-size: 14px;
color: #B4B4B5;
letter-spacing: 0;
line-height: 18px;
}
input{
font-size: 14px;
color: #383F45;
line-height: 18px;
}
}
}
.bottom-tab-button{
background: #00469C;
border-radius: 4px;
color:white;
height: 40px;
margin: 4px 2% 0 2%;
}
}
</style>
src/pages/home.vue
View file @ 4e20c395
......@@ -64,6 +64,11 @@ export default {
functionName: '经销商签约',
functionState: 'ContractList',
},
{
functionIcon: require('@/assets/intoApproval/introduce.png'),
functionName: '合同签约',
functionState: 'ContractSigning',
},
], // 全部应用
messageList: [
{
......
src/router/index.js
View file @ 4e20c395
......@@ -36,6 +36,13 @@ import ContractList from '@/pages/distributorSign/contract-list'
import ContractDetails from '@/pages/distributorSign/contract-details'
import FinancDetails from '@/pages/distributorSign/financ-details'
// 合同签约
import ContractSigning from '../pages/contractSigning/contract-signing'
import ContractDetail from '@/pages/ContractSigning/contract-detail'
import ContractContent from '@/pages/ContractSigning/contract-content'
import EntryInfo from '@/pages/ContractSigning/entry-info'
Vue.use(Router)
export default new Router({
......@@ -107,6 +114,11 @@ export default new Router({
{path: '/contract-list', component: ContractList, name: 'ContractList', meta: {keepAlive: true}},
{path: '/contract-details', component: ContractDetails, name: 'ContractDetails', meta: {keepAlive: true}},
{path: '/financ-details', component: FinancDetails, name: 'FinancDetails', meta: {keepAlive: true}},
// 合同签约
{path: '/contract-signing', component: ContractSigning, name: 'ContractSigning', meta: {keepAlive: true}},
{path: '/contract-detail', component: ContractDetail, name: 'ContractDetail', meta: {keepAlive: true}},
{path: '/contract-content', component: ContractContent, name: 'ContractContent', meta: {keepAlive: true}},
{path: '/entry-info', component: EntryInfo, name: 'EntryInfo', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
yarn.lock
View file @ 4e20c395
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment