Commit 372ece22 authored by 李晓兵's avatar 李晓兵

'home'

parent 7a7ed1d0
src/assets/homePage/contract-query.png

6.64 KB | W: | H:

src/assets/homePage/contract-query.png

9.86 KB | W: | H:

src/assets/homePage/contract-query.png
src/assets/homePage/contract-query.png
src/assets/homePage/contract-query.png
src/assets/homePage/contract-query.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/homePage/product-select.png

6.13 KB | W: | H:

src/assets/homePage/product-select.png

9.57 KB | W: | H:

src/assets/homePage/product-select.png
src/assets/homePage/product-select.png
src/assets/homePage/product-select.png
src/assets/homePage/product-select.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/homePage/product-trial.png

6.7 KB | W: | H:

src/assets/homePage/product-trial.png

8.54 KB | W: | H:

src/assets/homePage/product-trial.png
src/assets/homePage/product-trial.png
src/assets/homePage/product-trial.png
src/assets/homePage/product-trial.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/homePage/replay.png

5.26 KB | W: | H:

src/assets/homePage/replay.png

8.44 KB | W: | H:

src/assets/homePage/replay.png
src/assets/homePage/replay.png
src/assets/homePage/replay.png
src/assets/homePage/replay.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -16,6 +16,8 @@
<div slot="center" @click="getLocation">徐工租赁</div>
</h-header>
<h-content>
<div class="top-wrap"></div>
<div class="top-wrap-white"></div>
<swipe :interval="5000" class="hls-swipe">
<swipe-item class="hls-swipe">
<img src="@/assets/homePage/banner1.png" alt="">
......@@ -33,14 +35,14 @@
<div class="center-pic">
<div class="left-pic">
<img src="@/assets/homePage/1 copy@2x.png" alt="">
<img src="@/assets/homePage/copy1.png" alt="">
</div>
<div class="right-pic">
<img src="@/assets/homePage/2 copy@2x.png" alt="">
<img src="@/assets/homePage/3 copy@2x.png" alt="">
<img src="@/assets/homePage/copy2.png" alt="">
<img src="@/assets/homePage/copy3.png" alt="">
</div>
</div>
<div class="guessing">猜你喜欢</div>
<div class="guessing">猜你喜欢<span><img src="@/assets/homePage/intrest.png"></span></div>
<list-item :item-height="110">
<item>
<div slot="name" class="item-pic">
......@@ -48,9 +50,9 @@
</div>
<div slot="content" class="item-content">
<div class="top">***起重机 <span class="hot">热门</span></div>
<div class="center"> <span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
<div class="center"> <span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
<div class="center"> <span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
<div class="center"><span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
<div class="center"><span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
<div class="center"><span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
</div>
</item>
<item>
......@@ -59,9 +61,9 @@
</div>
<div slot="content" class="item-content">
<div class="top">***起重机 <span class="hot">热门</span></div>
<div class="center"> <span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
<div class="center"> <span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
<div class="center"> <span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
<div class="center"><span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
<div class="center"><span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
<div class="center"><span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
</div>
</item>
</list-item>
......@@ -70,10 +72,11 @@
</h-view>
</template>
<script>
import functionState from './functionState'
export default {
import functionState from './functionState'
export default {
name: 'HomePage',
data () {
data() {
return {
city: '',
province: '',
......@@ -81,36 +84,14 @@ export default {
user_bp_class: '',
bp_id: '',
moduleSeparateList: [],
functionList: [
{
functionIcon: require('@/assets/userBind/np.png'),
functionName: '用户绑定',
functionState: 'UserBind',
},
{
functionIcon: require('@/assets/intoApproval/introduce.png'),
functionName: '进件审批',
functionState: 'IntoList',
},
{
functionIcon: require('@/assets/intoApproval/introduce.png'),
functionName: '经销商签约',
functionState: 'ContractList',
},
{
functionIcon: require('@/assets/intoApproval/introduce.png'),
functionName: '合同签约',
functionState: 'ContractSigning',
},
],
}
},
computed: {},
watch: {},
created () {
created() {
this.getLocation()
},
beforeRouteEnter (to, from, next) {
beforeRouteEnter(to, from, next) {
next(vm => {
// if (from.name === 'Login') {
vm.moduleSeparateList = [...functionState.moduleSeparateList]
......@@ -121,7 +102,7 @@ export default {
methods:
{
// 定位
getLocation () {
getLocation() {
let vm = this
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function (res) {
......@@ -139,17 +120,17 @@ export default {
}
}, {enableHighAccuracy: true})
},
goFunctionHome (data) {
goFunctionHome(data) {
this.$router.push({
name: data.functionState,
})
},
goModuleFunction (data) {
goModuleFunction(data) {
this.$router.push({
name: data.moduleState,
})
},
location () {
location() {
this.$router.push({
name: 'Location',
params: {
......@@ -159,7 +140,7 @@ export default {
})
},
// 用户信息查询
userQuery () {
userQuery() {
let vm = this
let url = $config.basePath + 'user_query'
let param = {
......@@ -176,20 +157,41 @@ export default {
})
},
},
}
}
</script>
<style lang='less' scoped>
@import "../../styles/vue-1px";
#homePage {
@import "../../styles/vue-1px";
#homePage {
.top-wrap {
width: 100%;
height: 100px;
background-color: @headerColor;
border-bottom-right-radius: 30%;
border-bottom-left-radius: 30%;
position: absolute;
top: 0;
}
.top-wrap-white {
width: 100%;
height: 100px;
background-color: #FFF;
position: absolute;
top: 100px;
}
.home-city {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.h-header .h-header-left .h-header-btn:first-of-type {
padding-left: 0.2rem;
}
.functions {
}
.functions {
height: 82px;
width: 100%;
background: #fff;
......@@ -210,7 +212,8 @@ export default {
}
}
.middle-box {
.middle-box {
margin-top: 8px;
background: white;
......@@ -243,7 +246,8 @@ export default {
right: 15px;
}
}
.function{
.function {
display: flex;
flex-wrap: wrap;
......@@ -268,23 +272,25 @@ export default {
}
}
}
.h-header .h-header-center div{
text-align: left!important;
}
.h-header .h-header-center div {
text-align: left !important;
}
.locations {
height: 24px;
width: 24px;
}
.hls-swipe {
// height: 208px;
width: 100vw;
// overflow: hidden;
img {
width: 100vw;
// height: 100%;
}
}
.function{
.function {
display: flex;
flex-wrap: wrap;
......@@ -308,6 +314,7 @@ export default {
// }
}
}
.center-pic {
margin-top: 6px;
// position: relative;
......@@ -316,30 +323,37 @@ export default {
// overflow: hidden;
display: flex;
flex-direction: row;
.left-pic {
width: 41.6%;
margin-left: 4px;
img {
max-width: 100%;
height: auto;
}
}
.right-pic {
width: 55.2%;
display: flex;
flex-direction: column;
margin-left: 4px;
img {
max-width: 100%;
height: auto;
}
img:nth-of-type(2) {
margin-top: 4px;
}
}
}
.guessing {
// width: 67px;
display: flex;
align-items: center;
height: 22px;
font-family: PingFangSC-Semibold;
font-size: 16px;
......@@ -348,16 +362,26 @@ export default {
letter-spacing: 0.57px;
padding: 8px 0 8px 12px;
background: #fff;
box-sizing:content-box
span{
padding-top: 2px;
margin-left: 4px;
}
img{
width: 14px;
height: 14px;
}
}
.item-pic {
width: 110px;
height: 110px;
img {
width: 100%;
height: 100%;
}
}
.item-content {
// width: 90%;
height: 110px;
......@@ -369,6 +393,7 @@ export default {
letter-spacing: 0.57px;
font-weight: 600;
margin-top: 10px;
.hot {
display: inline-block;
height: 14px;
......@@ -383,16 +408,19 @@ export default {
margin-left: 6px;
}
}
.center {
margin-top: 6px;
font-family: PingFangSC-Semibold;
font-size: 13px;
color: rgba(56,63,69,0.60);
color: rgba(56, 63, 69, 0.60);
letter-spacing: 0.5px;
.firsts {
display: inline-block;
width: 44px;
}
.seconds {
margin-left: 16px;
font-weight: 600;
......@@ -403,5 +431,5 @@ export default {
}
}
}
}
}
</style>
......@@ -33,7 +33,7 @@
</div>
</list-item>
<div slot="buttons">
<option-button type="warn" text="删除" @click.native="deleteFun(parentIndex)"></option-button>
<option-button type="warn" text="删除" @click.native="deleteFun(parentIndex)"/>
</div>
</item-option>
</section>
......@@ -142,7 +142,7 @@ export default {
}
})
},
deleteFun(Index){
deleteFun (Index) {
let vm = this
hlsPopup.showConfirm({
title: '提示',
......
<template>
<h-view id="message-center">
<h-header class="bar-custom">
<div slot="center" class="top-word">消息通知</div>
</h-header>
<h-content class="content">
<section v-for="(item,parentIndex) in list" :key="parentIndex" class="msg-wrap">
<item-option>
<list-item>
<item :hasBorder="false" :proportion="[2,2]">
<div slot="left-icon" class="left-icon left-icon-box"><img src="@/assets/messageCenter/messageIcon.png"></div>
<div slot="name" class="font-color">{{ item.msg_title }}</div>
<div slot="content" class="time-color">{{ item.msg_time }}</div>
</item>
<div class="msg-content">
<div class="text">
<div
ref="textContainer" :class="{'retract': item.status}"
:style="{'max-height':item.status ? textHeight: ''}">
{{ item.msg_content }}
</div>
<div class="btn">
<p v-if="item.status" @click="item.status = false">展开</p>
<p v-if="item.status == false" @click="item.status = true">收起</p>
</div>
</div>
</div>
<div class="detail-wrap">
<div class="detail-wrap-content">
<span>查看详情</span>
<img src="@/assets/messageCenter/right-gray.png">
</div>
</div>
</list-item>
<div slot="buttons">
<option-button type="warn" text="删除" @click.native="deleteFun(parentIndex)"></option-button>
</div>
</item-option>
</section>
<!--逾期消息-->
<section v-for="(item,Index) in overList" class="msg-wrap">
<list-item>
<item :hasBorder="false" :proportion="[2,2]">
<div slot="left-icon" class="left-icon over-icon-box"><img src="@/assets/messageCenter/overIcon.png"></div>
<div slot="name" class="over-color">{{ item.msg_title }}</div>
<div slot="content" class="time-color">{{ item.msg_time }}</div>
</item>
<div class="msg-content">
<div class="text" style="padding-bottom: 10px;">
<div>{{ item.msg_content }}</div>
</div>
</div>
</list-item>
</section>
</h-content>
</h-view>
</template>
<script>
export default {
data () {
return {
textHeight: null,
isFold: true,
// list:[],
list: [
{
msg_title: '视频面签',
msg_content: '您有一条保证缴纳确认信息待您确认,请确认:2001于2019-08-29进行视频面签,届时请注意接收视频消息!',
msg_time: '2019-10-20',
},
{
msg_title: '保证金确认',
msg_content: '您有一条保证缴纳确认信息待您确认,请确认!',
msg_time: '2019-10-20',
},
{
msg_title: '进件确认',
msg_content: '进件号:201903022201待您确认,请确认!',
msg_time: '2019-10-20',
},
],
overList: [
{
msg_title: '逾期提醒',
msg_content: '您好,您的合同CON20190802001已逾期1期,请及时还款,谢谢!',
msg_time: '2019-10-20',
},
],
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
// vm.getInfo()
})
},
mounted () {
this.list.forEach((item, index) => {
this.$set(this.list, index, Object.assign({}, item, {status: null}))
})
// DOM 加载完执行
this.$nextTick(() => {
this.calculateText()
})
window.onresize = () => {
this.list.forEach((item, index) => {
this.$set(this.list, index, Object.assign({}, item, {status: null}))
})
setTimeout(() => {
this.calculateText()
}, 0)
}
},
methods: {
// 计算文字 显示展开 收起
calculateText () {
// 获取一行文字的height 计算当前文字比较列表文字
let twoHeight = 40
this.textHeight = `${twoHeight}px`
let txtDom = this.$refs.textContainer
for (let i = 0; i < txtDom.length; i++) {
let curHeight = txtDom[i].offsetHeight
if (curHeight > twoHeight) {
this.$set(this.list, i, Object.assign({}, this.list[i], {status: true}))
} else {
this.$set(this.list, i, Object.assign({}, this.list[i], {status: null}))
}
}
},
getInfo () {
let vm = this
let url = process.env.basePath + 'hls_app_notice_query'
let param = {
phone: window.localStorage.getItem('user_phone'),
}
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.list = res.lists
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
deleteFun(Index){
let vm = this
hlsPopup.showConfirm({
x === 1) {
22112123123123123231312312312312213213123 vm.list.sort()
}
},
gfdsaaswqwqweweqweqweqe },
},
}
</script>
<style lang="less">
@import "../../styles/mixin";
#message-center {
.content {
padding-top: 10px;
}
.swipeout-list{
height: auto;
padding: 0;
.function{
right: -22% !important;
}
}
.msg-wrap {
margin: 0 2% 10px 2%;
.msg-content {
margin-left: 14%;
margin-right: 4%;
line-height: 20px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #4B4A4B;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
}
.text {
position: relative;
font-size: 14px;
line-height: 20px;
letter-spacing: 2px;
color: #666666;
}
.retract {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.retract:after {
content: '...';
position: absolute;
bottom: 0;
right: 2px;
width: 84px;
padding-left: 30px;
background: linear-gradient(to right, transparent, #fff 45%);
}
.btn {
position: absolute;
right: 0;
bottom: 1px;
font-size: 14px;
line-height: 19px;
letter-spacing: 2px;
color: @headerColor;
cursor: pointer;
}
.more {
font-size: 14px;
line-height: 20px;
letter-spacing: 2px;
color: #666666;
visibility: hidden;
}
.left-icon-box{
position: relative;
width: 26px;
height: 26px;
background: #efefef;
border-radius: 8px;
img{
position: absolute;
left: 6px;
z-index: 100;
top: 6px;
}
}
.over-icon-box{
position: relative;
width: 26px;
height: 26px;
background: #FFFFE0;
border-radius: 8px;
img{
position: absolute;
left: 6px;
z-index: 100;
top: 6px;
}
}
.contents{
.add-name{
.font-color{
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #4B4A4B;
}
.over-color{
font-family: PingFangSC-Semibold;
font-size: 15px;
color: #FDB62F;
}
}
.add-content{
.time-color{
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56,63,69,0.60);
}
}
img{
width: 14px;
height: 14px;
}
}
.detail-wrap{
margin-top: 10px;
width: 100%;
height: 40px;
padding: 0 4% 0 14%;
display: flex;
justify-content: center;
align-items: center;
.detail-wrap-content{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.border-top;
span{
font-family: PingFangSC-Semibold;
font-size: 0.3rem;
color: #4B4A4B;
}
img{
width: 14px;
}
}
}
}
</style>
......@@ -80,8 +80,9 @@
<img slot="left-icon" src="@/assets/myInfo/exit.png" class="left-icon" >
<div slot="name">退出登录</div>
</item>
<button v-if="flag" @click="changePageHead">用户绑定</button>
<button v-if="!flag" @click="unBind">解除绑定</button>
<!-- <button v-if="flag" @click="changePageHead">用户绑定</button>
<button v-if="!flag" @click="unBind">解除绑定</button>-->
<button @click="unBind">{{ description }}</button>
</list-item>
</h-content>
</h-view>
......@@ -102,15 +103,27 @@ export default {
confirmCount: '0',
vedioCount: '0',
productCount: '0',
description: '',
}
},
watch: {
'user_bp_status' (newVal, oldVal) {
if (newVal === 'APPROVED') {
if (!this.bp_id && newVal === 'NEW') {
this.description = '用户绑定'
} else if (this.bp_id && newVal === 'NEW') {
this.description = '待提交'
} else if (this.bp_id && newVal === 'APPROVED') {
this.description = '解除绑定'
} else if ((this.bp_id && newVal === 'RETURN') || (this.bp_id && newVal === 'REJECT')) {
this.description = '审核未通过'
} else {
this.description = '审批中'
}
/* if (newVal === 'APPROVED') {
this.flag = false
} else {
this.flag = true
}
} */
},
'user_bp_type' (newVal, oldVal) {
if (newVal === 'AGENT') {
......@@ -276,7 +289,7 @@ export default {
changePageHead () {
let vm = this
if (vm.bp_id) {
if (vm.user_bp_status === 'NEW' || vm.user_bp_status === 'REJECT') {
if (vm.user_bp_status === 'NEW' || vm.user_bp_status === 'REJECT' || vm.user_bp_status === 'RETURN') {
vm.flag = true
if (vm.user_bp_class === 'NP') {
vm.$router.push({
......
......@@ -135,7 +135,7 @@
</item>
<item>
<div slot="name" class="required">手机号码</div>
<input slot="content" v-model="baseInfo.cell_phone" placeholder="请输入手机号码" >
<input slot="content" readonly v-model="baseInfo.cell_phone" placeholder="请输入手机号码" >
</item>
<item :showArrow="true">
<div slot="name" class="required">省份</div>
......
......@@ -245,7 +245,7 @@
</item>
<item>
<div slot="name" class="font-color required">手机号</div>
<input slot="content" v-model="legal_personMsg.cell_phone" placeholder="请输入手机号" @blur="phoneCheck(legal_personMsg.cell_phone)">
<input slot="content" v-model="legal_personMsg.cell_phone" placeholder="请输入手机号" readonly @blur="phoneCheck(legal_personMsg.cell_phone)">
</item>
<item>
<div slot="name" class="font-color required">联系地址</div>
......@@ -1895,7 +1895,7 @@ export default {
.content {
margin-top: 3px;
height: 76%;
padding-bottom: 20px;
padding-bottom: 40px;
.font-color {
color: #656464;
}
......
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