Uniapp数据渲染原型

在开发模板的时候参考原型去调用数据有一定的参考性

<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 == '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>
        </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" @click="chooseVideo(html.model, html.maxSize, html.maxDuration)">
                            <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>