Skip to content

H
hls-easy-ui
Commit fd2ae777 authored by 李晓兵's avatar 李晓兵
Browse files
Options

'动态'

parent 5f7b05e2
Show whitespace changes
Inline Side-by-side
Showing with 315 additions and 0 deletions
src/common/layout.json 0 → 100644
View file @ fd2ae777
{
"layoutData": [
{
"code":"form",
"formName": "formOne",
"readOnly": false,
"dataName": "formOne",
"fileds": [
{
"filedName": "filedOne",
"type": "text",
"VModelName": "",
"filedType": "input",
"description": "第一个filed",
"iconPath": "http://hlsapp.hand-china.com/file/hel_dev/function/partner@2x.png",
"rightArrow": true,
"defaultValue": "",
"placeholder": "请输入第一个filed的值",
"proportion": [2,2],
"readOnly": false,
"request": true,
"selectList": [],
"moneyFormat": false
},
{
"filedName": "filedTwo",
"type": "text",
"VModelName": "",
"filedType": "select",
"description": "第二个filed",
"iconPath": "http://hlsapp.hand-china.com/file/hel_dev/function/partner@2x.png",
"rightArrow": true,
"defaultValue": "",
"placeholder": "请选择",
"proportion": [2,2],
"readOnly": true,
"request": true,
"selectList": [],
"moneyFormat": false
},
{
"filedName": "filedThree",
"type": "text",
"VModelName": "",
"filedType": "time",
"description": "第三个filed",
"iconPath": "",
"rightArrow": true,
"defaultValue": "",
"placeholder": "请选择时间",
"proportion": [2,2],
"readOnly": true,
"request": true,
"selectList": [],
"moneyFormat": false
},
{
"filedName": "filedFour",
"type": "number",
"VModelName": "",
"filedType": "div",
"description": "第四个filed",
"iconPath": "http://hlsapp.hand-china.com/file/hel_dev/function/partner@2x.png",
"rightArrow": false,
"defaultValue": "",
"placeholder": "",
"proportion": [2,2],
"readOnly": true,
"request": true,
"selectList": [],
"moneyFormat": true
}
]
},
{
"code": "button",
"btnName": "按钮",
"isBottom": false,
"btns": [
{
"btnCode": "btnOne",
"btnText": "按钮1"
},
{
"btnCode": "btnTwo",
"btnText": "按钮2"
},
{
"btnCode": "btnThree",
"btnText": "按钮3"
}
]
}
],
"bottomBtns": [
{
"code": "button",
"btnName": "按钮",
"isBottom": true,
"btns": [
{
"btnCode": "btnFour",
"btnText": "按钮4"
},
{
"btnCode": "btnFive",
"btnText": "按钮5"
}
]
}
]
}
src/pages/dynamicLayout.Vue 0 → 100644
View file @ fd2ae777
/**
* @Author Sean
* @Date 2019/7/29
*/
<template>
<h-view class="public-style" style="height: 100%">
<h-header>
<div slot="left" class="h-header-btn" @click="$routeGo(-1)">
<i class="ion-ios-arrow-back"/>
</div>
<div slot="center">动态页面</div>
</h-header>
<h-content>
<section v-for="(list,parentIndex) in layoutData" :key="parentIndex">
<div v-if="list.code === 'form'">
<list-item v-if="list.fileds">
<item v-for="(item,index) in list.fileds" :key="index" :proportion="item.proportion">
<img slot="left-icon" :src="item.iconPath" class="left-icon" v-if="item.iconPath">
<div slot="name" class="required">{{item.filedName}}</div>
<div slot="content" v-if="item.filedType != 'div'">
<input v-if="item.filedType === 'input'" type="item.type" :placeholder="item.placeholder" v-model="item.VModelName"
:required="item.request" :readOnly="item.readOnly" @click="commonFunc(item.filedName)">
<input v-else-if="item.filedType === 'select'" type="item.type" :placeholder="item.placeholder" v-model="object[list.dataName][item.VModelName + '_n']"
:required="item.request" :readOnly="item.readOnly" @click="showSelect(item.selectList,item.VModelName,list.dataName,parentIndex,index)">
<input v-else-if="item.filedType === 'time'" type="item.type" :placeholder="item.placeholder" v-model="object[list.dataName][item.VModelName]"
:required="item.request" :readOnly="item.readOnly" @click="showTime(list.dataName,'YYYY-MM-DD',item)">
</div>
<div slot="content" v-if="item.filedType === 'div'" @click="commonFunc(item.filedName)">{{money | currency}}</div>
<img slot="right-icon" src="../assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon" v-if="item.rightArrow">
</item>
</list-item>
</div>
<div v-else-if="list.code === 'button' && !list.isisBottom">
<div v-for="(btn,index) in list.btns" v-if="list.btns" class="content-btn" @click="btnCommon(btn)">
{{btn.btnText}}
</div>
</div>
</section>
</h-content>
<bottom-tab v-if="bottomBtns[0].btns && bottomBtns[0].isBottom" :show-divider="true">
<tab-button class="button-save" v-for="(item,index) in bottomBtns[0].btns" :key="index" @click.native="footerBtnCommon(item)" >{{item.btnText}}</tab-button>
</bottom-tab>
</h-view>
</template>
<script>
import layoutData from '../common/layout'
import ButtonTab from "vux/src/components/button-tab/button-tab";
export default {
components: {ButtonTab},
data() {
return {
layoutData: [],
bottomBtns: [],
selectList: [{
code: 'man',
code_name: '男',
}, {
code: 'woman',
code_name: '女',
}],
object:{},
money: 2345483,
}
},
created: function () {
let vm = this
vm.layoutData = layoutData.layoutData
vm.bottomBtns = layoutData.bottomBtns
vm.layoutData.forEach((list,index) => {
if(list.code === 'form'){
let obj = {}
if(list.fileds.length){
list.fileds.forEach((item,index) => {
obj[item.VModelName] = ''
if(item.filedType === 'select'){
obj[item.VModelName + '_n'] = ''
}
})
vm.$set(vm.object,list.dataName,obj)
}
}
})
},
mounted: function () {
},
updated: function () {
},
destroyed: function () {
},
methods: {
commonFunc(name){
switch (name) {
case 'filedOne':
this.filedOne()
break;
case 'filedFour':
this.filedFour()
break;
default :
console.log('default')
}
},
filedOne(){
console.log('filedOne')
},
filedFour(){
console.log('filedFour')
},
showSelect (list, code, dataName,parentIndex,index) {
let vm = this
vm.layoutData[parentIndex].fileds[index].selectList = [...vm.selectList]
vm.hlsPopup.selectList({
list: vm.selectList,
code: code,
object: {},
returnItem (index, obj) {
var temp = {}
temp[code] = vm.selectList[index].code
temp[code + '_n'] = vm.selectList[index].code_name
vm.$set(vm.object,dataName,temp)
},
})
},
showTime(dataName,format,item){
let vm = this
vm.hlsPopup.showTime({
format: format,
callback (value) {
vm.object[dataName][item.VModelName] = value
},
})
},
// 按钮公用函数
btnCommon(btn){
switch(btn.btnCode){
case 'btnOne':
this.btnOne()
break
case 'btnTwo':
this.btnTwo()
break
case 'btnThree':
this.btnThree()
break
default:
}
},
btnOne(){
console.log('按钮1')
},
btnTwo(){
console.log('按钮2')
},
btnThree(){
console.log('按钮3')
},
// 底部按钮公用方法
footerBtnCommon(btn){
switch(btn.btnCode){
case 'btnFour':
this.btnFour()
break
case 'btnFive':
this.btnFive()
break
default:
}
},
btnFour(){
console.log('按钮4')
},
btnFive(){
console.log('按钮5')
},
}
}
</script>
<style scoped lang="less" rel="stylesheet">
.public-style {
.content {
.content-btn{
margin: 20px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 14px;
background-color: #0c60ee;
}
}
.button-save{
background-color: #0c60ee;
color: #fff;
}
}
</style>
src/router/index.js
View file @ fd2ae777
......@@ -8,6 +8,7 @@ import HlsPopup from '@/pages/hlsPopup'
import Radio from '@/pages/radioTest'
import HFile from '@/pages/fileTest'
import Form from '@/pages/form'
import DynamicLayout from '@/pages/dynamicLayout'
Vue.use(Router)
......@@ -23,6 +24,7 @@ export default new Router({
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
{path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}},
{path: '/dynamic-layout', component: DynamicLayout, name: 'DynamicLayout', 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