Commit 940d5bba authored by 李晓兵's avatar 李晓兵

'登录注册'

parent afae2c13
<template> <template>
<h-view class="contract-signing"> <h-view class="contract-signing">
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>合同签约</span> <span>合同签约</span>
</div> </div>
</h-header> </h-header>
<div class="tab-style"> <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 === 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 :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;"><img :src="num === 2?check2:uncheck2"><span>已签约</span></div>
</div> </div>
<div class="hinput"> <div class="hinput">
<div class="search-box"> <div class="search-box">
<input type="text" placeholder="请输入进件号/承租人名称"> <input type="text" placeholder="请输入进件号/承租人名称">
<img src="@/assets/constractSigning/search.png" alt="" style="width:18px"> <img src="@/assets/constractSigning/search.png" alt="" style="width:18px">
</div> </div>
</div> </div>
<h-content> <h-content>
<div v-for="(item,index) in contractMsg" :key="index" class="contract-list"> <div v-for="(item,index) in contractMsg" :key="index" class="contract-list">
<div class="item"> <div class="item">
<img src="@/assets/constractSigning/Incoming.png" alt="" style="height:18px"> <img src="@/assets/constractSigning/Incoming.png" alt="" style="height:18px">
<p class="incoming-num">进件号</p> <p class="incoming-num">进件号</p>
<p class="code">{{ item.code }}</p> <p class="code">{{ item.code }}</p>
</div> </div>
<div class="details"> <div class="details">
<div class="option"> <div class="option">
<p class="name">承租人</p> <p class="name">承租人</p>
<p class="full-name normal">{{ item.name }}</p> <p class="full-name normal">{{ item.name }}</p>
</div> </div>
<div class="option" @click="goDetails(index)"> <div class="option" @click="goDetails(index)">
<p class="name">合同租金</p> <p class="name">合同租金</p>
<p class="normal money">{{ item.money | currency }}</p> <p class="normal money">{{ item.money | currency }}</p>
<img src="@/assets/distributorSign/goDetails.png" alt=""> <img src="@/assets/distributorSign/goDetails.png" alt="">
</div> </div>
<div class="option"> <div class="option">
<p class="name">申请时间</p> <p class="name">申请时间</p>
<p class="normal">{{ item.date }}</p> <p class="normal">{{ item.date }}</p>
</div> </div>
</div> </div>
</div> </div>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
import Check1 from '@/assets/constractSigning/no-done.png' import Check1 from '@/assets/constractSigning/no-done.png'
import Check2 from '@/assets/constractSigning/yes-done.png' import Check2 from '@/assets/constractSigning/yes-done.png'
import unCheck1 from '@/assets/constractSigning/no-undone.png' import unCheck1 from '@/assets/constractSigning/no-undone.png'
import unCheck2 from '@/assets/constractSigning/yes-undone.png' import unCheck2 from '@/assets/constractSigning/yes-undone.png'
export default { export default {
data () { data () {
return { return {
num: 1, num: 1,
check1: Check1, check1: Check1,
check2: Check2, check2: Check2,
uncheck1: unCheck1, uncheck1: unCheck1,
uncheck2: unCheck2, uncheck2: unCheck2,
contractMsg: [ contractMsg: [
{name: '张三', money: 90000, date: '2019-03-1', code: '201903022001'}, {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: '201903022002'},
{name: '王五', money: 90000, date: '2019-03-1', code: '201903022003'}, {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: '201903022004'},
{name: '张三', money: 90000, date: '2019-03-1', code: '201903022001'}, {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: '201903022002'},
{name: '王五', money: 90000, date: '2019-03-1', code: '201903022003'}, {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: '201903022004'},
], ],
} }
}, },
activated () { activated () {
}, },
methods: { methods: {
goDetails (index) { goDetails (index) {
this.$router.push({ this.$router.push({
name: 'ContractDetail', name: 'ContractDetail',
}) })
}, },
}, },
} }
</script> </script>
<style lang="less" type="text/less"> <style lang="less" type="text/less">
.contract-signing{ .contract-signing{
.h-header-btn { .h-header-btn {
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 4px; margin-left: 4px;
} }
span { span {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
margin-left: 16px; margin-left: 16px;
font-size: 17px; font-size: 17px;
letter-spacing: 0.61px; letter-spacing: 0.61px;
line-height: 24px; line-height: 24px;
} }
} }
.tab-style{ .tab-style{
display:flex; display:flex;
justify-content: center; justify-content: center;
padding-top:12px; padding-top:12px;
padding-bottom: 8px; padding-bottom: 8px;
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
box-shadow:0 2px 3px 0 rgba(220,220,221,0.50); box-shadow:0 2px 3px 0 rgba(220,220,221,0.50);
div{ div{
position: relative; position: relative;
height: 32px; height: 32px;
width: 172px; width: 172px;
border-radius:16px; border-radius:16px;
border-radius: 16px; border-radius: 16px;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 14px; font-size: 14px;
letter-spacing: 0.43px; letter-spacing: 0.43px;
margin: 0 4px; margin: 0 4px;
line-height: 32px; line-height: 32px;
} }
.undone{ .undone{
background: rgba(220,220,221,0.26); background: rgba(220,220,221,0.26);
color: #383F45; color: #383F45;
} }
.done{ .done{
background: rgba(0,70,156,0.10); background: rgba(0,70,156,0.10);
color: #00469C; color: #00469C;
} }
img{ img{
height: 20px; height: 20px;
display: block; display: block;
float: left; float: left;
margin: 6px 0 0 43px; margin: 6px 0 0 43px;
} }
span{ span{
position: absolute; position: absolute;
left:70px; left:70px;
} }
} }
.hinput { .hinput {
width: 100%; width: 100%;
height: 68px; height: 68px;
border-bottom:1px solid #ccc; border-bottom:1px solid #ccc;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 3px; margin-top: 3px;
background: #fff; background: #fff;
.search-box { .search-box {
width: 93.6%; width: 93.6%;
height: 36px; height: 36px;
font-size: 14px; font-size: 14px;
color: #B4B4B5; color: #B4B4B5;
letter-spacing: 0; letter-spacing: 0;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
border: 1px solid rgba(56,63,69,0.60); border: 1px solid rgba(56,63,69,0.60);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
input { input {
width: 90%;height: 100%; width: 90%;height: 100%;
opacity: 0.4; opacity: 0.4;
border: none border: none
} }
} }
} }
.contract-list { .content{
width: 100%; padding-bottom: 14px;
height: 120px; }
// border: 1px solid #ccc; .contract-list {
background: #fff; width: 100%;
margin-top: 8px; height: 120px;
// border: 1px solid #ccc;
.item { background: #fff;
width: 100%; margin-top: 8px;
height: 34px;
background: rgba(00, 70, 156, 0.1); .item {
display: flex; width: 100%;
flex-direction: row; height: 34px;
align-items: center; background: rgba(00, 70, 156, 0.1);
display: flex;
img { flex-direction: row;
margin-left: 16.6px; align-items: center;
}
img {
.incoming-num { margin-left: 16.6px;
font-family: PingFangSC-Semibold; }
// width: 42px;
height: 20px; .incoming-num {
font-weight: bolder; font-family: PingFangSC-Semibold;
line-height: 20px; // width: 42px;
font-size: 14px; height: 20px;
color: #00469C; font-weight: bolder;
letter-spacing: 0; line-height: 20px;
margin-left: 8.8px; font-size: 14px;
} color: #00469C;
letter-spacing: 0;
.code { margin-left: 8.8px;
font-family: PingFangSC-Semibold; }
font-size: 14px;
color: #00469C; .code {
margin-left: 8px; font-family: PingFangSC-Semibold;
font-weight: 700; font-size: 14px;
} color: #00469C;
} margin-left: 8px;
font-weight: 700;
.details { }
width: 100%; }
height: 86px;
display: flex; .details {
flex-direction: column; width: 100%;
justify-content: space-around; height: 86px;
display: flex;
.option { flex-direction: column;
width: 100%; justify-content: space-around;
// flex: 1;
display: flex; .option {
flex-basis: row; width: 100%;
// flex: 1;
.name { display: flex;
font-family: PingFangSC-Regular; flex-basis: row;
font-size: 13px;
color: rgba(56,63,69,0.60); .name {
width: 80px; font-family: PingFangSC-Regular;
height: 18px; font-size: 13px;
line-height: 18px; color: rgba(56,63,69,0.60);
text-align: right width: 80px;
} height: 18px;
line-height: 18px;
.normal { text-align: right
font-family: PingFangSC-Regular; }
font-size: 13px;
color: #383F45; .normal {
height: 18px; font-family: PingFangSC-Regular;
line-height: 18px; font-size: 13px;
margin-left: 8px; color: #383F45;
} height: 18px;
line-height: 18px;
.money { margin-left: 8px;
color: #FCC800; }
}
.money {
img { color: #FCC800;
margin-left: 55% }
}
} img {
} margin-left: 55%
} }
} }
</style> }
}
}
</style>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<span>合同签约</span> <span>合同签约</span>
</div> </div>
</h-header> </h-header>
<Tab @getTabNum="getTabNum" /> <Tab @getTabNum="getTabNum"/>
<div class="hinput"> <div class="hinput">
<div class="search-box"> <div class="search-box">
<input type="text" placeholder="请输入进件号/承租人名称"> <input type="text" placeholder="请输入进件号/承租人名称">
...@@ -44,54 +44,57 @@ ...@@ -44,54 +44,57 @@
</div> </div>
</h-content> </h-content>
</h-view></template> </h-view>
</template>
<script> <script>
import Tab from '@/pages/distributorSign/tab' import Tab from '@/pages/distributorSign/tab'
export default {
name: 'ContractList', export default {
components: { name: 'ContractList',
Tab, components: {
}, Tab,
data () { },
return { data() {
tabNum: 0, return {
lists: [], tabNum: 0,
} lists: [],
},
created () {
let vm = this
let url = $config.basePath + 'prj_confirm_list_query'
let param = {
user_phone: '18507155349',
}
vm.hlsHttp.post(url, param).then(function (res) {
console.log(res.result)
if (res.result === 'S') {
vm.lists = res.lists
} }
})
},
methods: {
getTabNum (i) {
this.tabNum = i
}, },
goDetails () { created() {
this.$router.push({ let vm = this
name: 'ContractDetails', let url = $config.basePath + 'prj_confirm_list_query'
let param = {
user_phone: '18507155349',
}
vm.hlsHttp.post(url, param).then(function (res) {
console.log(res.result)
if (res.result === 'S') {
vm.lists = res.lists
}
}) })
}, },
}, methods: {
} getTabNum(i) {
this.tabNum = i
},
goDetails() {
this.$router.push({
name: 'ContractDetails',
})
},
},
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
#sign { #sign {
.h-header-btn { .h-header-btn {
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 4px; margin-left: 4px;
} }
span { span {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
margin-left: 16px; margin-left: 16px;
...@@ -99,115 +102,129 @@ export default { ...@@ -99,115 +102,129 @@ export default {
letter-spacing: 0.61px; letter-spacing: 0.61px;
line-height: 24px; line-height: 24px;
} }
} }
.hinput { .hinput {
width: 100%; width: 100%;
height: 68px; height: 68px;
border-bottom:1px solid #cccccc70; border-bottom: 1px solid #cccccc70;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 3px; margin-top: 3px;
background: #fff; background: #fff;
margin-bottom: 9px; margin-bottom: 9px;
.search-box {
.search-box {
width: 93.6%; width: 93.6%;
height: 36px; height: 36px;
font-size: 14px; font-size: 14px;
color: #B4B4B5; color: #B4B4B5;
letter-spacing: 0; letter-spacing: 0;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
border: 1px solid rgba(56,63,69,0.60); border: 1px solid rgba(56, 63, 69, 0.60);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
input { input {
width: 90%;height: 100%; width: 90%;
opacity: 0.4; height: 100%;
border: none opacity: 0.4;
border: none
} }
}
} }
}
.content{ .content {
padding-bottom: 14px; padding-bottom: 14px;
} }
.contract-list {
width: 100%; .contract-list {
height: 120px; width: 100%;
// border: 1px solid #ccc; height: 120px;
background: #fff; // border: 1px solid #ccc;
//margin-bottom: 8px; background: #fff;
.item { //margin-bottom: 8px;
.item {
width: 100%; width: 100%;
height: 34px; height: 34px;
background: rgba(00, 70, 156, 0.1); background: rgba(00, 70, 156, 0.1);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
img { img {
margin-left: 16.6px; margin-left: 16.6px;
} }
.incoming-num { .incoming-num {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
// width: 42px; // width: 42px;
height: 20px; height: 20px;
font-weight: bolder; font-weight: bolder;
line-height: 20px; line-height: 20px;
font-size: 14px; font-size: 14px;
color: #00469C; color: #00469C;
letter-spacing: 0; letter-spacing: 0;
margin-left: 8.8px; margin-left: 8.8px;
} }
.code { .code {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 14px; font-size: 14px;
color: #00469C; color: #00469C;
margin-left: 8px; margin-left: 8px;
font-weight: bolder font-weight: bolder
} }
} }
.details {
.details {
width: 100%; width: 100%;
height: 86px; height: 86px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
padding: 6px 0; padding: 6px 0;
.option { .option {
width: 100%; width: 100%;
height: 18px;
display: flex;
flex-direction: row;
.name {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56, 63, 69, 0.60);
width: 80px;
height: 18px; height: 18px;
display: flex; line-height: 18px;
flex-direction: row; text-align: right
.name { }
font-family: PingFangSC-Regular;
font-size: 13px; .normal {
color: rgba(56,63,69,0.60); font-family: PingFangSC-Regular;
width: 80px; font-size: 13px;
height: 18px; color: #383F45;
line-height: 18px; height: 18px;
text-align: right line-height: 18px;
} margin-left: 8px;
.normal { }
font-family: PingFangSC-Regular;
font-size: 13px; .money {
color: #383F45; color: #FCC800;
height: 18px; }
line-height: 18px;
margin-left: 8px; img {
} margin-left: 55%
.money { }
color: #FCC800;
} }
img { }
margin-left: 55%
}
}
}
} }
} }
</style> </style>
...@@ -179,11 +179,11 @@ export default { ...@@ -179,11 +179,11 @@ export default {
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
margin: 0 0 0 23%; margin: 0 0 0 23%;
.register { .register {
color: #5D98F6; color: #FDFDFD;
font-size: 15px; font-size: 15px;
} }
.pwd-forgotten { .pwd-forgotten {
color: #5D98F6; color: #FDFDFD;
font-size: 15px; font-size: 15px;
} }
} }
......
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