数据页面渲染原型
在开发模板的时候参考原型去调用数据有一定的参考性
<template>
<view>
<view v-if="list.zhuti" :style="list.zhutiStyle"></view>
<view :style="list.style">
<!-- 跳转 -->
<view v-if="list.remaining_content && list.remaining" :style="list.remaining_style">
{{list.remaining}}{{list.remaining_content}}
</view>
<view v-for="(vo,i) in list.data" :style="list.dataStyle" >
<!-- 签名 -->
<view v-if="vo.type == 'pad'" :style="vo.style">
<signature-pad
@getImage="handleGetImage"
:width="vo.width"
:model="vo.model"
:height="vo.height"
:strokeColor="vo.color"
:strokeWidth="vo.strokeWidth"
></signature-pad>
</view>
<!-- 点击进入客服 -->
<view v-if="vo.type == 'kefu'">
<button
open-type="contact"
:style="vo.style"
:send-message-title="vo.title"
:show-message-card="vo.card"
>{{vo.name}}</button>
</view>
<!-- 自定义html -->
<view v-if="vo.type == 'html'" :style="vo.style">
<view :style="vo.listStyle">
<view v-if="vo.list" v-for="(html,index) in vo.list" :style="html.style">
<view v-if="html.itemclick" @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<rich-text @itemclick="itemclick" :nodes="html.content" :show-menu-by-longpress="html.longpress"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text @itemclick="itemclick" :nodes="html.contents" :show-menu-by-longpress="html.longpress"></rich-text>
</view>
</view>
<view v-else @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<rich-text :nodes="html.content" :show-menu-by-longpress="html.longpress"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text :nodes="html.contents" :show-menu-by-longpress="html.longpress"></rich-text>
</view>
</view>
<view v-if="html.img" :style="html.imgStyle" @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<view v-for="h in html.img" :style="html.imgListStyle">
<image
v-if="h.url"
:src="h.src"
:style="h.style"
:mode="h.mode"
:show-menu-by-longpress="h.longpress"
@click="route(h.url,h.type)"
@longpress="longpress(h.longpressUrl,h.longpressType)">
</image>
<image v-else
:src="h.src"
:style="h.style"
:mode="h.mode"
:show-menu-by-longpress="h.longpress"
@click="previewImage(h.src,html.img.map(item => item.src))">
</image>
</view>
</view>
<view :style="html.listsStyle">
<view v-if="html.lists" v-for="(htmls,i) in html.lists" :style="htmls.style" @click="route(htmls.url,htmls.type,index)" @longpress="longpress(htmls.longpressUrl,htmls.longpressType,index)">
<view v-if="htmls.itemclick">
<rich-text @itemclick="itemclick" :nodes="htmls.content"></rich-text>
<view @click="route(htmls.urls,htmls.types,index)" @longpress="longpress(htmls.longpressUrls,htmls.longpressTypes,index)">
<rich-text @itemclick="itemclick" :nodes="htmls.contents"></rich-text>
</view>
</view>
<view v-else>
<rich-text :nodes="htmls.content"></rich-text>
<view @click="route(htmls.urls,htmls.types,index)" @longpress="longpress(htmls.longpressUrls,htmls.longpressTypes,index)">
<rich-text :nodes="htmls.contents"></rich-text>
</view>
</view>
</view>
</view>
</view>
</view>
<view :style="vo.listsStyle">
<view v-if="vo.lists" v-for="(html,index) in vo.lists" :style="html.style">
<view v-if="html.itemclick" @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<rich-text @itemclick="itemclick" :nodes="html.content"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text @itemclick="itemclick" :nodes="html.contents"></rich-text>
</view>
</view>
<view v-else @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<rich-text :nodes="html.content"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text :nodes="html.contents"></rich-text>
</view>
</view>
<view v-if="html.img" :style="html.imgStyle" @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<view v-for="h in html.img" :style="html.imgListStyle">
<image
v-if="h.url"
:src="h.src"
:style="h.style"
:mode="h.mode"
:show-menu-by-longpress="h.longpress"
@click="route(h.url,h.type)"
@longpress="longpress(h.longpressUrl,h.longpressType)">
</image>
<image v-else
:src="h.src"
:style="h.style"
:mode="h.mode"
:show-menu-by-longpress="h.longpress"
@click="previewImage(h.src,html.img.map(item => item.src))">
</image>
</view>
</view>
<view :style="html.listsStyle">
<view v-if="html.lists" v-for="(htmls,i) in html.lists" :style="htmls.style" @click="route(htmls.url,htmls.type,index)" @longpress="longpress(htmls.longpressUrl,htmls.longpressType,index)">
<view v-if="htmls.itemclick">
<rich-text @itemclick="itemclick" :nodes="htmls.content"></rich-text>
<view @click="route(htmls.urls,htmls.types,index)" @longpress="longpress(htmls.longpressUrls,htmls.longpressTypes,index)">
<rich-text @itemclick="itemclick" :nodes="htmls.contents"></rich-text>
</view>
</view>
<view v-else>
<rich-text :nodes="htmls.content"></rich-text>
<view @click="route(htmls.urls,htmls.types,index)" @longpress="longpress(htmls.longpressUrls,htmls.longpressTypes,index)">
<rich-text :nodes="htmls.contents"></rich-text>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="vo.img" :style="vo.imgStyle">
<view v-for="html in vo.img" :style="vo.imgListStyle">
<image v-if="html.url" :show-menu-by-longpress="html.longpress" :src="html.src" :style="html.style" :mode="html.mode" @click="route(html.url,html.type)" @longpress="longpress(html.longpressUrl,html.longpressType)"></image>
<image v-else :src="html.src" :show-menu-by-longpress="html.longpress" :style="html.style" :mode="html.mode" @click="previewImage(html.src,vo.img.map(item => item.src))"></image>
</view>
</view>
</view>
<!-- 一张图片 -->
<view v-if="vo.type == 'image'">
<image :show-menu-by-longpress="vo.longpress" :src="vo.src" :style="vo.style" :mode="vo.mode"></image>
</view>
<!-- 弹出层 -->
<view v-show="list.layer" class="layer_modal" @click="layerClosed()"></view>
<view v-if="vo.type == 'layer'" :style="vo.style" class="layer" :class="'layer_'+vo.layer+' layers_'+list.layer">
<view v-if="vo.list" v-for="(html,index) in vo.list" :style="html.style" @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<view v-if="html.itemclick">
<rich-text @itemclick="itemclick" :nodes="html.content"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text @itemclick="itemclick" :nodes="html.contents"></rich-text>
</view>
</view>
<view v-else>
<rich-text :nodes="html.content"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text :nodes="html.contents"></rich-text>
</view>
</view>
<view v-if="html.img" :style="html.imgStyle">
<view v-for="h in html.img" :style="html.imgListStyle">
<image
v-if="h.url"
:src="h.src"
:style="h.style"
:mode="h.mode"
@click="route(h.url,h.type)"
@longpress="longpress(h.longpressUrl,h.longpressType)">
</image>
<image v-else
:src="h.src"
:style="h.style"
:mode="h.mode"
@click="previewImage(h.src,html.img.map(item => item.src))">
</image>
</view>
</view>
</view>
<!-- 表单开始input -->
<view v-if="vo.listInput" v-for="htmls in vo.listInput" :style="vo.listInputStyle">
<view v-if="htmls.list" v-for="html in htmls.list" :style="htmls.style">
<view v-if="html.content" :style="html.contentStyle" @click="route(html.contentUrl,html.contentType)">
<rich-text :nodes="html.content"></rich-text>
</view>
<view v-if="html.type">
<view v-if="html.type == 'textarea'">
<textarea
:style="html.style"
:disabled="html.disabled"
:placeholder="html.placeholder"
v-model="list.dataModel[html.model]"
:focus="html.focus"
:auto-focus="html.autoFocus"
:confirm-type="html.confirmType"
:adjust-position="html.adjustPosition"
:auto-height="html.autoHeight"
:confirm-hold="html.confirmHold"
:cursor="html.cursor"
:selection-start="html.selectionStart"
:selection-end="html.selectionEnd"
:maxlength="html.maxlength"></textarea>
</view>
<!-- 选择 -->
<view v-else-if="html.type == 'picker'" :style="html.style">
<picker
mode="selector"
range-key="name"
:value="html.list.indexOf(html.list.find(item => item.id === list.dataModel[html.model]))"
:range="html.list"
@change="changeSelector"
@click="clickData(html.list,html.model)">
<view
v-if="html.list[html.list.indexOf(html.list.find(item => item.id === list.dataModel[html.model]))]"
:style="html.tipsStyle">
{{html.list[html.list.indexOf(html.list.find(item => item.id === list.dataModel[html.model]))].name}}
</view>
<view v-else :style="html.tipsStyle">{{html.tips}}</view>
</picker>
</view>
<!-- 选择时间日期 -->
<view v-else-if="html.type == 'pickerTime'" :style="html.style">
<picker
:mode="html.mode"
:value="list.dataModel[html.model]"
:start="html.start"
:end="html.end"
:fields="html.fields"
@change="bindTimeChange"
@click="clickDataTime(html.model)">
<view
v-if="list.dataModel[html.model]"
:style="html.tipsStyle">
{{list.dataModel[html.model]}}
</view>
<view v-else :style="html.tipsStyle">{{html.tips}}</view>
</picker>
</view>
<!-- 图片 -->
<view class="head" v-else-if="html.type == 'head'" :style="html.style">
<image :src="list.dataModel[html.model]" class="h_head" @click="previewImage(list.dataModel[html.model],[list.dataModel[html.model]])"></image>
<view class="jia" @click="get_img(html.model,html.w,html.h)">+</view>
</view>
<!-- 自定义上传图片 -->
<view v-else-if="html.type == 'upimg'" :style="html.style">
<view v-if="list.dataModel[html.model]" class="upimg">
<image mode="aspectFill" :style="html.styleImg" :src="list.dataModel[html.model]" @click="previewImage(list.dataModel[html.model],[list.dataModel[html.model]])"></image>
<view class="delete-btn" @click="deleteUpimg(html.model)">×</view>
</view>
<view :style="html.btnStyle" @click="get_img(html.model,html.w,html.h)">
<rich-text :nodes="html.btn"></rich-text>
</view>
</view>
<!-- 多选 -->
<view v-else-if="html.type == 'checkbox'" :style="html.style">
<view v-if="html.list" v-for="(item, index) in html.list" :key="index" :style="html.itemStyle">
<view class="checkbox-item" @click="toggleCheckbox(item, index, html.model)">
<view class="checkbox-icon" :class="{ 'checked': isChecked(item.id, html.model) }">
<image v-if="isChecked(item.id, html.model)" src="/static/img/checked.png" mode="aspectFill"></image>
<image v-else src="/static/img/unChecked.png" mode="aspectFill"></image>
</view>
<view :style="html.labelStyle">{{item.name}}</view>
</view>
</view>
</view>
<!-- 视频上传 -->
<view v-else-if="html.type === 'video'" :style="html.style">
<!-- 已上传视频展示 -->
<view v-if="list.dataModel[html.model]" class="video-preview">
<video
:src="list.dataModel[html.model]"
:style="html.previewStyle"
controls
@error="handleVideoError"
></video>
<view class="delete-btn" @click="deleteVideo(html.model)">×</view>
</view>
<!-- 上传按钮 -->
<view class="upload-btn" :style="html.btnStyle" @click="chooseVideo(html.model, html.maxSize, html.maxDuration,html.compressed)">
<rich-text :nodes="html.btn || '<div>+ 上传视频</div>'"></rich-text>
</view>
<!-- 提示信息 -->
<view v-if="html.tips" :style="html.tipsStyle">
<rich-text :nodes="html.tips"></rich-text>
</view>
</view>
<!-- 在input类型判断部分添加二维Picker -->
<view v-else-if="html.type === 'pickerTwo'" :style="html.style">
<view v-if="pickerTwoRange.length == 0">
{{initTwoPicker(html)}}
</view>
<picker
mode="multiSelector"
:range="pickerTwoRange"
range-key="name"
:value="pickerTwoValue"
@change="bindMultiPickerChange"
@columnchange="bindMultiPickerColumnChange"
@click="initTwoPicker(html)"
>
<view v-if="list.dataModel[html.model] && list.dataModel[html.model].firstName" :style="html.tipsStyle">
{{list.dataModel[html.model].firstName}}
<template v-if="list.dataModel[html.model].secondName">
- {{list.dataModel[html.model].secondName}}
</template>
</view>
<view v-else :style="html.tipsStyle">
{{html.tips || '请选择'}}
</view>
</picker>
</view>
<!-- input -->
<view v-else>
<input
:style="html.style"
:type="html.type"
:focus="html.focus"
:auto-focus="html.autoFocus"
:confirm-type="html.confirmType"
:adjust-position="html.adjustPosition"
:disabled="html.disabled"
v-model="list.dataModel[html.model]"
:maxlength="html.maxlength"
:confirm-hold="html.confirmHold"
:cursor="html.cursor"
:selection-start="html.selectionStart"
:selection-end="html.selectionEnd"
:placeholder="html.placeholder"/>
</view>
</view>
</view>
</view>
<view v-if="vo.lists" v-for="(html,index) in vo.lists" :style="html.style" @click="route(html.url,html.type,index)" @longpress="longpress(html.longpressUrl,html.longpressType,index)">
<view v-if="html.itemclick">
<rich-text @itemclick="itemclick" :nodes="html.content"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text @itemclick="itemclick" :nodes="html.contents"></rich-text>
</view>
</view>
<view v-else>
<rich-text :nodes="html.content"></rich-text>
<view @click="route(html.urls,html.types,index)" @longpress="longpress(html.longpressUrls,html.longpressTypes,index)">
<rich-text :nodes="html.contents"></rich-text>
</view>
</view>
<view v-if="html.img" :style="html.imgStyle">
<view v-for="h in html.img" :style="html.imgListStyle">
<image
v-if="h.url"
:src="h.src"
:style="h.style"
:mode="h.mode"
@click="route(h.url,h.type)"
@longpress="longpress(h.longpressUrl,h.longpressType)">
</image>
<image v-else
:src="h.src"
:style="h.style"
:mode="h.mode"
@click="previewImage(h.src,html.img.map(item => item.src))">
</image>
</view>
</view>
</view>
</view>
<!-- 轮播图 -->
<view v-if="vo.type == 'swiper'" :style="vo.style">
<swiper
class="swiper"
indicator-dots="true"
autoplay="true"
interval="5000"
duration="500"
:style="vo.listStyle"
>
<swiper-item v-for="html in vo.list" @click="route(html.url,html.type)" @longpress="longpress(html.longpressUrl,html.longpressType)">
<image :src="html.pic" :mode="html.mode" :style="html.style"></image>
</swiper-item>
</swiper>
</view>
<!-- 表单开始input -->
<view v-if="vo.type == 'input'" :style="vo.style">
<view v-if="vo.list" v-for="html in vo.list" :style="vo.listStyle">
<view v-if="html.code" :style="html.contentStyle" @click="route(html.contentUrl,html.contentType)">
<view v-if="second == 0">
<rich-text :nodes="html.content"></rich-text>
</view>
<view v-else>
<view>倒计时:{{second}}</view>
</view>
</view>
<view v-else>
<view v-if="html.content" :style="html.contentStyle" @click="route(html.contentUrl,html.contentType)">
<rich-text :nodes="html.content"></rich-text>
</view>
</view>
<view v-if="html.type">
<view v-if="html.type == 'textarea'">
<textarea
:style="html.style"
:disabled="html.disabled"
:placeholder="html.placeholder"
v-model="list.dataModel[html.model]"
:focus="html.focus"
:auto-focus="html.autoFocus"
:confirm-type="html.confirmType"
:adjust-position="html.adjustPosition"
:auto-height="html.autoHeight"
:confirm-hold="html.confirmHold"
:cursor="html.cursor"
:selection-start="html.selectionStart"
:selection-end="html.selectionEnd"
:maxlength="html.maxlength"></textarea>
</view>
<!-- 选择 -->
<view v-else-if="html.type == 'picker'" :style="html.style">
<picker
mode="selector"
range-key="name"
:value="html.list.indexOf(html.list.find(item => item.id === list.dataModel[html.model]))"
:range="html.list"
@change="changeSelector"
@click="clickData(html.list,html.model)">
<view
v-if="html.list[html.list.indexOf(html.list.find(item => item.id === list.dataModel[html.model]))]"
:style="html.tipsStyle">
{{html.list[html.list.indexOf(html.list.find(item => item.id === list.dataModel[html.model]))].name}}
</view>
<view v-else :style="html.tipsStyle">{{html.tips}}</view>
</picker>
</view>
<!-- 选择时间日期 -->
<view v-else-if="html.type == 'pickerTime'" :style="html.style">
<picker
:mode="html.mode"
:value="list.dataModel[html.model]"
:start="html.start"
:end="html.end"
:fields="html.fields"
@change="bindTimeChange"
@click="clickDataTime(html.model)">
<view
v-if="list.dataModel[html.model]"
:style="html.tipsStyle">
{{list.dataModel[html.model]}}
</view>
<view v-else :style="html.tipsStyle">{{html.tips}}</view>
</picker>
</view>
<!-- 图片 -->
<view class="head" v-else-if="html.type == 'head'" :style="html.style">
<image :src="list.dataModel[html.model]" class="h_head" @click="previewImage(list.dataModel[html.model],[list.dataModel[html.model]])"></image>
<view class="jia" @click="get_img(html.model,html.w,html.h)">+</view>
</view>
<!-- 自定义上传图片 -->
<view v-else-if="html.type == 'upimg'" :style="html.style">
<view v-if="list.dataModel[html.model]" class="upimg">
<image mode="aspectFill" :style="html.styleImg" :src="list.dataModel[html.model]" @click="previewImage(list.dataModel[html.model],[list.dataModel[html.model]])"></image>
<view class="delete-btn" @click="deleteUpimg(html.model)">×</view>
</view>
<view :style="html.btnStyle" @click="get_img(html.model,html.w,html.h)">
<rich-text :nodes="html.btn"></rich-text>
</view>
</view>
<!-- 多选 -->
<view v-else-if="html.type == 'checkbox'" :style="html.style">
<view v-if="html.list" v-for="(item, index) in html.list" :key="index" :style="html.itemStyle">
<view class="checkbox-item" @click="toggleCheckbox(item, index, html.model)">
<view class="checkbox-icon" :class="{ 'checked': isChecked(item.id, html.model) }">
<image v-if="isChecked(item.id, html.model)" src="/static/img/checked.png" mode="aspectFill"></image>
<image v-else src="/static/img/unChecked.png" mode="aspectFill"></image>
</view>
<view :style="html.labelStyle">{{item.name}}</view>
</view>
</view>
</view>
<!-- 视频上传 -->
<view v-else-if="html.type === 'video'" :style="html.style">
<!-- 已上传视频展示 -->
<view v-if="list.dataModel[html.model]" class="video-preview">
<video
:src="list.dataModel[html.model]"
:style="html.previewStyle"
controls
@error="handleVideoError"
></video>
<view class="delete-btn" @click="deleteVideo(html.model)">×</view>
</view>
<!-- 上传按钮 -->
<view class="upload-btn" :style="html.btnStyle" @click="chooseVideo(html.model, html.maxSize, html.maxDuration,html.compressed)">
<rich-text :nodes="html.btn || '<div>+ 上传视频</div>'"></rich-text>
</view>
<!-- 提示信息 -->
<view v-if="html.tips" :style="html.tipsStyle">
<rich-text :nodes="html.tips"></rich-text>
</view>
</view>
<!-- 在input类型判断部分添加二维Picker -->
<view v-else-if="html.type === 'pickerTwo'" :style="html.style">
<view v-if="pickerTwoRange.length == 0">
{{initTwoPicker(html)}}
</view>
<picker
mode="multiSelector"
:range="pickerTwoRange"
range-key="name"
:value="pickerTwoValue"
@change="bindMultiPickerChange"
@columnchange="bindMultiPickerColumnChange"
@click="initTwoPicker(html)"
>
<view v-if="list.dataModel[html.model] && list.dataModel[html.model].firstName" :style="html.tipsStyle">
{{list.dataModel[html.model].firstName}}
<template v-if="list.dataModel[html.model].secondName">
- {{list.dataModel[html.model].secondName}}
</template>
</view>
<view v-else :style="html.tipsStyle">
{{html.tips || '请选择'}}
</view>
</picker>
</view>
<!-- input -->
<view v-else>
<input
:style="html.style"
:type="html.type"
:focus="html.focus"
:auto-focus="html.autoFocus"
:confirm-type="html.confirmType"
:adjust-position="html.adjustPosition"
:disabled="html.disabled"
v-model="list.dataModel[html.model]"
:maxlength="html.maxlength"
:confirm-hold="html.confirmHold"
:cursor="html.cursor"
:selection-start="html.selectionStart"
:selection-end="html.selectionEnd"
:placeholder="html.placeholder"/>
</view>
</view>
</view>
</view>
<!-- 图片上传 -->
<view class="form-item" v-if="vo.type == 'img'" :style="vo.style">
<view v-if="vo.content" :style="vo.contentStyle">
<rich-text :nodes="vo.content"></rich-text>
</view>
<view class="pic">
<view class="picbox" v-for="(v,i) in list.dataModel[vo.model]">
<image :src="v" class="img" @click="previewImage(v,list.dataModel[vo.model])"></image>
<view class="icon" @click="unImg(vo.model,i)">x</view>
</view>
<view class="up" @click="upImg(vo.model,vo.n)">+</view>
</view>
</view>
<!-- tab -->
<view v-if="vo.type == 'tab'">
<view class="tab" :style="vo.style">
<view class="tabH"></view>
<view class="tabBox" :style="vo.listStyle">
<view v-for="html in vo.list" class="li" :style="html.style" @click="route(html.url,html.type)" @longpress="longpress(html.longpressUrl,html.longpressType)" @touchend="handleTouchEnd" >
<image :src="html.pic" class="img" mode="aspectFill"></image>
<view v-if="html.color" class="title" :style="'color:'+html.color">{{html.name}}</view>
<view v-else class="title">{{html.name}}</view>
<view v-if="html.tips">
<view class="dot" :style="'background-color:'+html.color" v-if="html.tips == 'dot'"></view>
<view class="tips" :style="'background-color:'+html.color" v-else>{{html.tips}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<iframe :src="webviewStyles" style="display:none" frameborder="0"></iframe>
<CustomToast
ref="customToast"
:message="toastMessage"
:duration="toastDuration"
:showSuccessIcon="toastShowSuccessIcon"
@close="onToastClose"
/>
</view>
<quanxian ref="permissionRef"></quanxian>
</template>