Skip to content

H
hls-xcmg-vue-app
Commit faf69d64 authored by 786817560's avatar 786817560
Browse files
Options

'[ADD]经销商签约页面'

parent e67aa708
Hide whitespace changes
Inline Side-by-side
Showing with 655 additions and 3 deletions
src/pages/signContract/contract-details.vue 0 → 100644
View file @ faf69d64
<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-25 15:38:21
* @LastEditTime: 2019-09-25 19:02:22
* @LastEditors: Please set LastEditors
-->
<template>
<h-view id="details" 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>
<Tab @getTabNum="getTabNum" />
<h-content v-show="tabNum === 0">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">商务政策</div>
<input slot="content" placeholder="零手续费产品" >
</item>
<item>
<div slot="name" class="font-color">设备总价</div>
<input slot="content" placeholder="150,000.00" >
</item>
<item>
<div slot="name" class="font-color">融资金额</div>
<input slot="content" placeholder="100,000.00" >
</item>
<item>
<div slot="name" class="font-color">首付款</div>
<input slot="content" placeholder="50,000.00" >
</item>
<item>
<div slot="name" class="font-color">保证金比例</div>
<input slot="content" placeholder="10%" >
</item>
<item>
<div slot="name" class="font-color">保证金</div>
<input slot="content" placeholder="150,000.00" >
</item>
<item>
<div slot="name" class="font-color">手续费比例</div>
<input slot="content" placeholder="5%" >
</item>
<item>
<div slot="name" class="font-color">手续费</div>
<input slot="content" placeholder="7,500.00" >
</item>
<item>
<div slot="name" class="font-color">预计付款日</div>
<input slot="content" placeholder="2019-08-01" >
</item>
<item>
<div slot="name" class="font-color">还款周期</div>
<input slot="content" placeholder="月" >
</item>
<item>
<div slot="name" class="font-color">租赁期数</div>
<input slot="content" placeholder="6" >
</item>
<item>
<div slot="name" class="font-color">年利率</div>
<input slot="content" placeholder="6.5%" >
</item>
</list-item>
<div class="repay-plan">
<p>查看还款计划</p>
</div>
<div class="equipment-list">设备清单</div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">参数项</div>
<input slot="content" placeholder="GTZ226" >
</item>
<item>
<div slot="name" class="font-color">产品线</div>
<input slot="content" placeholder="起重机" >
</item>
<item>
<div slot="name" class="font-color">产品数量</div>
<input slot="content" placeholder="10" >
</item>
</list-item>
<div class="bottom-call">
<div class="left">
<img src="@/assets/signContract/call.png" alt="">
</div>
<div class="center">
<p>业务经办：张三</p>
<p>联系电话：17890765336</p>
</div>
<div class="right">
<img src="@/assets/signContract/calls.png" alt="">
</div>
</div>
</h-content>
<h-content v-show="tabNum === 1">
<list-item :item-height="56">
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/signContract/agreement.png" alt="" class="pic">
<p class="second first">经销商担保协议</p>
</div>
<!-- <div slot="content">
<p>经销商担保协议</p>
</div> -->
<img slot="content" src="@/assets/signContract/into.png" alt="">
</item>
</list-item>
<list-item :item-height="56">
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/signContract/gray.png" alt="" class="pics">
<p class="second">经销商担保协议</p>
<img src="@/assets/signContract/read.png" alt="" class="read">
</div>
<img slot="content" src="@/assets/signContract/into.png" alt="">
<!-- <div slot="content">
<p>经销商担保协议</p>
</div> -->
</item>
</list-item>
<list-item :item-height="56">
<item :proportion="[4,1]">
<div slot="name" class="aguremrnt-list">
<img src="@/assets/signContract/gray.png" alt="" class="pics">
<p class="second">经销商担保协议</p>
<img src="@/assets/signContract/unread.png" alt="" class="read">
</div>
<img slot="content" src="@/assets/signContract/into.png" alt="">
<!-- <div slot="content">
<p>经销商担保协议</p>
</div> -->
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
import Tab from '@/pages/signContract/details-tab'
export default {
name: 'ContractDetails',
components: {
Tab,
},
data () {
return {
tabNum: 0,
}
},
computed: {},
watch: {},
methods:
{
getTabNum (i) {
console.log(i)
this.tabNum = i
},
},
}
</script>
<style lang='less' scoped>
#details {
.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;
}
}
.font-color {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
}
.repay-plan {
height: 44px;
width: 100%;
background: rgba(0,70,156,0.03);
p {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #00469C;
letter-spacing: 0;
height: 44px;
width: 84px;
line-height: 44px;
font-weight: bold;
text-decoration: underline;
margin-left: 16px;
}
}
.equipment-list {
height: 40px;
line-height: 40px;
background-color: #fafafa;
color: #00469c;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.equipment-list::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 10px;
}
// .left {
// width: 60px;
// height: 60px;
// background: rgba(0,70,156,0.03);
// margin-left: -15px;
// display: flex;
// justify-content: center;
// align-items: center
// }
.bottom-call {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
margin-bottom: 30px;
.left {
width: 16%;
height: 60px;
background: rgba(0,70,156,0.03);
display: flex;
justify-content: center;
align-items: center
}
.center {
height: 100%;
width: 66%;
margin-left: 2px;
background: rgba(0,70,156,0.03);
p {
height: 30px;
line-height: 30px;
margin-left: 10px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0.43px;
}
}
.right {
height: 100%;
width: 16%;
background: rgba(0,70,156,0.20);
display: flex;
justify-content: center;
align-items: center
}
}
.aguremrnt-list {
display: flex;
flex-direction: row;
.pic {
margin-left: -3px;
}
.pics {
// width: 21px;
height: 30px;
}
.read {
height: 16px;
margin-top: 8px;
margin-left: 12.5px;
}
.second {
height: 32px;
line-height: 32px;
font-family: PingFangSC-Regular;
font-size: 14px;
margin-left: 21px;
color: #383F45;
letter-spacing: 0.43px;
}
.first {
margin-left: 13px;
}
}
}
</style>
src/pages/signContract/contract-list.vue 0 → 100644
View file @ faf69d64
<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-25 10:30:46/>: your name
-->
<template>
<h-view id="sign" 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>
<Tab @getTabNum="getTabNum" />
<h-content>
<div class="hinput">
<div class="search-box">
<input type="text" placeholder="请输入进件号/承租人名称">
<img src="@/assets/signContract/search.png" alt="">
</div>
</div>
<div v-for="(item,index) in contractMsg" :key="index" class="contract-list">
<div class="item">
<img src="@/assets/signContract/icon-进件合同.png" alt="">
<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">
<p class="name">合同租金</p>
<p class="normal money">{{ item.money }}</p>
<img src="@/assets/signContract/goDetails.png" alt="" @click="goDetails(index)">
</div>
<div class="option">
<p class="name">申请时间</p>
<p class="normal">{{ item.date }}</p>
</div>
</div>
</div>
</h-content>
</h-view></template>
<script>
import Tab from '@/pages/signContract/tab'
export default {
name: 'ContractList',
components: {
Tab,
},
data () {
return {
tabNum: 0,
contractMsg: [
{name: '张三', money: 9000000, date: '2019-03-1', code: '201903022001'},
{name: '李四', money: 9000000, date: '2019-03-1', code: '201903022002'},
{name: '王五', money: 9000000, date: '2019-03-1', code: '201903022003'},
{name: '赵六', money: 9000000, date: '2019-03-1', code: '201903022004'},
{name: '张三', money: 9000000, date: '2019-03-1', code: '201903022001'},
{name: '李四', money: 9000000, date: '2019-03-1', code: '201903022002'},
{name: '王五', money: 9000000, date: '2019-03-1', code: '201903022003'},
{name: '赵六', money: 9000000, date: '2019-03-1', code: '201903022004'},
],
}
},
methods: {
getTabNum (i) {
this.tabNum = i
},
goDetails () {
this.$router.push({
name: 'ContractDetails',
})
},
},
}
</script>
<style lang="less" scoped>
#sign {
.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;
}
}
.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-bottom: 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: bolder
}
}
.details {
width: 100%;
height: 86px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.option {
width: 100%;
height: 18px;
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/signContract/details-tab.vue 0 → 100644
View file @ faf69d64
<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-25 11:10:34
* @LastEditTime: 2019-09-25 16:08:36
* @LastEditors: Please set LastEditors
-->
<template>
<div class="tab-style">
<span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
<span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
<!-- <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> -->
</div>
</template>
<script>
import check1 from '@/assets/signContract/conditionChecked.png'
import check2 from '@/assets/signContract/textChecked.png'
import uncheck1 from '@/assets/signContract/conditionUncheck.png'
import uncheck2 from '@/assets/signContract/textUncheck.png'
export default {
data () {
return {
tabNum: 0,
check1: check1,
check2: check2,
uncheck1: uncheck1,
uncheck2: uncheck2,
}
},
methods: {
sendTabNum () {
this.$emit('getTabNum', this.tabNum)
},
},
}
</script>
<style lang="less" scoped>
.tab-style{
display:flex;
// justify-content: center;
padding-top:12px;
padding-bottom: 8px;
align-items: center;
background: #fff;
box-shadow:0 2px 3px 0 rgba(220,220,221,0.50);
span{
display: block;
width:45.9%;
height: 32px;
border-radius:16px;
}
span:nth-of-type(1){
margin-left: 12px
}
img{
width:100%;
height: 32px;
// margin-right:5.7px;
}
span:nth-of-type(2){
margin-left:7px;
}
}
</style>
src/pages/signContract/tab.vue 0 → 100644
View file @ faf69d64
<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-25 11:10:34
* @LastEditTime: 2019-09-25 15:33:50
* @LastEditors: Please set LastEditors
-->
<template>
<div class="tab-style">
<span @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
<span @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
<!-- <span @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span> -->
</div>
</template>
<script>
import check1 from '@/assets/signContract/unsign.png'
import check2 from '@/assets/intoApproval/check2.png'
import uncheck1 from '@/assets/intoApproval/uncheck1.png'
import uncheck2 from '@/assets/signContract/signed.png'
export default {
data () {
return {
tabNum: 0,
check1: check1,
check2: check2,
uncheck1: uncheck1,
uncheck2: uncheck2,
}
},
methods: {
sendTabNum () {
this.$emit('getTabNum', this.tabNum)
},
},
}
</script>
<style lang="less" scoped>
.tab-style{
display:flex;
// justify-content: center;
padding-top:12px;
padding-bottom: 8px;
align-items: center;
background: #fff;
box-shadow:0 2px 3px 0 rgba(220,220,221,0.50);
span{
display: block;
width:45.9%;
height: 32px;
border-radius:16px;
}
span:nth-of-type(1){
margin-left: 12px
}
img{
width:100%;
height: 32px;
// margin-right:5.7px;
}
span:nth-of-type(2){
margin-left:7px;
}
}
</style>
src/pages/userBind/org/enterprise.vue
View file @ faf69d64
......@@ -2,7 +2,7 @@
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-19 09:31:19
* @LastEditTime: 2019-09-25 09:39:13
* @LastEditTime: 2019-09-25 11:01:21
* @LastEditors: Please set LastEditors
-->
<template>
......@@ -187,7 +187,7 @@
</div>
</div>
<div class="card2">
<span>其他资产证件</span>
<span @click="goContract">其他资产证件</span>
<div class="img-content">
<div class="card-upload">
<img src="@/assets/userBind/camera.png" >
......@@ -349,6 +349,11 @@ export default {
this.getBpType()
},
methods: {
goContract () {
this.$router.push({
name: 'ContractList',
})
},
handSubmit () {
let url = $config.basePath + 'bp_bind_submit'
let param = {
......@@ -564,6 +569,7 @@ export default {
}
span {
font-family: PingFangSC-Semibold;
color: #fff;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.6px;
......
src/router/index.js
View file @ faf69d64
/*
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-24 12:34:06
* @LastEditTime: 2019-09-25 15:43:05
* @LastEditors: Please set LastEditors
*/
import Vue from 'vue'
import Router from 'vue-router'
......@@ -22,6 +29,10 @@ import Enterprise from '@/pages/userBind/org/enterprise'
// 进件审批
import Base from '@/pages/intoApproval/intoApproval/base'
// 经销商签约
import ContractList from '@/pages/signContract/contract-list'
import ContractDetails from '@/pages/signContract/contract-details'
Vue.use(Router)
export default new Router({
......@@ -29,7 +40,7 @@ export default new Router({
{
path: '/',
redirect: to => {
if (!window.localStorage.needGuid || window.localStorage.needGuid == 'true') {
if (!window.localStorage.needGuid || window.localStorage.needGuid === 'true') {
return {name: 'Guide'}
} else {
if (window.localStorage.isOpenFingerLogin) {
......@@ -87,6 +98,9 @@ export default new Router({
{path: '/enterprise', component: Enterprise, name: 'Enterprise', meta: {keepAlive: false}},
// 进件审批
{path: '/base', component: Base, name: 'Base', meta: {keepAlive: true}},
// 经销商签约
{path: '/contract-list', component: ContractList, name: 'ContractList', meta: {keepAlive: true}},
{path: '/contract-details', component: ContractDetails, name: 'ContractDetails', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
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