test_service d3170b4d1c 1
2023-12-01 15:43:29 +08:00

422 lines
21 KiB
HTML

<div class="diy-phone" v-cloak>
<!-- 手机顶部标题 -->
<div id="diy-page11" class="phone-top optional" @click.stop="onEditer('page')"
:class="{selected: 'page' === selectedIndex}"
:style="{background: diyData.page.style.titleBackgroundColor + ' url(/addons/food/img/diy/phone-top-' + diyData.page.style.titleTextColor + '.png) no-repeat center / contain'}">
<h4 :style="{color: diyData.page.style.titleTextColor}">{{ diyData.page.params.title }}</h4>
</div>
<!-- 小程序内容区域 -->
<div id="phone-main" class="phone-main" v-cloak style="position: relative;">
<draggable :list="diyData.items" class="dragArea" @update="onDragItemEnd" :options="{animation: 120, filter: '.drag__nomove' }">
<template v-for="(item, index) in diyData.items">
<!-- diy元素: 图片轮播 -->
<template v-if="item.type == 'banner'">
<div class="drag optional bg-f7" @click.stop="onEditer(index)"
:class="{selected: index === selectedIndex}">
<div class="diy-banner" :style="{padding:'0px ' + item.style.marginLr/2 + 'px'}">
<img v-for="(banner, index) in item.data" :style="{borderRadius:item.style.radius + 'px'}" v-if="index <= 1"
:src="banner.type == 'image'?banner.image:banner.poster">
<div class="dots center" :class="item.style.btnShape">
<span v-for="banner in item.data"
:style="{background:item.style.btnColor}"></span>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</template>
<!-- diy元素: 单图组 -->
<template v-else-if="item.type == 'imageSingle'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-imageSingle"
:style="{background: item.style.bgColor}">
<div class="item-image" v-for="imageSingle in item.data"
:style="{padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px'}">
<img :src="imageSingle.image" :style="{borderRadius: item.style.radius + 'px'}">
</div>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 图片橱窗 -->
<template v-else-if="item.type == 'window'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-window"
:style="{ background: item.style.bgColor, padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px'}">
<ul class="data-list" v-if="item.style.layout > -1"
:class="'am-avg-sm-' + item.style.layout">
<li v-for="window in item.data"
:style="{ padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px' }">
<div class="item-image">
<img :src="window.image" :style="{borderRadius: item.style.radius + 'px',height:item.style.height + 'px'}">
</div>
</li>
</ul>
<div :style="{padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px',height:item.style.height + 'px'}" class="display" v-else>
<div class="display-left">
<img :src="item.data[0].image" :style="{borderRadius: item.style.radius + 'px',height:item.style.height + 'px'}">
</div>
<div class="display-right">
<div v-if="item.data.length >= 2" class="display-right1"
:style="{ padding:item.style.paddingTb+'px '+item.style.paddingLr +'px' }">
<img :src="item.data[1].image" :style="{borderRadius: item.style.radius + 'px'}">
</div>
<div class="display-right2">
<div v-if="item.data.length >= 3" class="left"
:style="{ padding:item.style.paddingTb + 'px ' + item.style.paddingLr + 'px' }">
<img :src="item.data[2].image" :style="{borderRadius: item.style.radius + 'px'}">
</div>
<div v-if="item.data.length >= 4" class="right"
:style="{ padding:item.style.paddingTb + 'px ' + item.style.paddingLr + 'px' }">
<img :src="item.data[3].image" :style="{borderRadius: item.style.radius + 'px'}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 视频组 -->
<template v-else-if="item.type == 'video'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div class="diy-video" :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<video
:style="{height:item.style.height + 'px'}" :src="item.params.src"
:poster="item.params.poster" :autoplay="item.params.autoplay == 'true'" controls>
您的浏览器不支持 video 标签
</video>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 点单组 -->
<template v-else-if="item.type == 'order'">
<div @click.stop="onEditer(index)" class="bg-f7" :style="{zIndex:9999,marginTop:'-' + item.style.marginTop/2 + 'px'}">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr/2 + 'px'}">
<div class="diy-order" :style="{background:item.style.bgColor,borderRadius:item.style.radius + 'px'}">
<div v-if="item.params.number == 1" class="food-box">
<div class="icon">
<img :src="item.data[0].image">
</div>
<div class="right">
<div class="title">{{item.data[0].title}}</div>
<div class="text">{{item.data[0].text}}</div>
</div>
</div>
<div v-if="item.params.number == 2 && index < item.params.number" :class="index == 0 ? 'item num2':'item num2 b-l'" v-for="(order,index) in item.data">
<div class="item-image">
<img :src="order.image" :style="{width:item.style.width/2 + 'px',height:item.style.height/2 + 'px'}">
</div>
<div class="item-title">
{{order.title}}</div>
<div class="item-text">
{{order.text}}</div>
</div>
<div v-if="item.params.number == 3" :class="index == 0 ? 'item num3':'item num3 b-l'" v-for="(order,index) in item.data">
<div class="item-image">
<img :src="order.image" :style="{width:item.style.width/2 + 'px',height:item.style.height/2 + 'px'}">
</div>
<div class="item-title">
{{order.title}}</div>
<div class="item-text">
{{order.text}}</div>
</div>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 公告组 -->
<template v-else-if="item.type == 'notice'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-notice dis-flex"
:style="{padding: + '10px',background: item.style.bgColor,color: item.style.color}">
<div class="notice__icon">
<img src="/addons/food/img/diy/notice.png">
</div>
<div class="notice__text flex-box am-text-truncate">
<span :style="{color: item.style.textColor}">{{item.data[0].text}}</span>
</div>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 导航组 -->
<template v-else-if="item.type == 'navBar'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-navBar" :style="{background:item.style.bgColor}">
<ul :class="item.style.rowsNum === '4'?'am-avg-sm-4':(item.style.rowsNum ==='3'?'am-avg-sm-3':'am-avg-sm-5')">
<li v-for="(navBar,index) in item.data">
<div class="item-image">
<img :src="navBar.image">
</div>
<p class="item-text am-text-truncate" :style="{color:navBar.color}">
{{navBar.text}}</p>
</li>
</ul>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 商品组 -->
<template v-else-if="item.type == 'goods'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected: index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-goods" v-if="item.style.display == 'list'" :style="{background:item.style.bgColor}">
<ul class="goods-list am-cf"
:class="['display__' + item.style.display, 'column__' + item.style.column]">
<li class="goods-item"
v-for="goods in (item.params.source == 'choice' ? item.data : item.defaultData)">
<!-- 单列商品 -->
<template v-if="item.style.column == 1">
<div class="dis-flex">
<!-- 商品图片 -->
<div class="goods-item_left"> <img :src="goods.image"> </div>
<div class="goods-item_right">
<!-- 商品名称 -->
<div v-if="item.style.show.goodsName"
class="goods-item_title twolist-hidden">
<span>{{ goods.goods_name }}</span>
</div>
<div class="goods-item_desc">
<!-- 商品卖点 -->
<div v-if="item.style.show.sellingPoint"
class="desc-selling_point am-text-truncate">
<span>{{ goods.selling_point }}</span>
</div>
<!-- 商品销量 -->
<div v-if="item.style.show.goodsSales"
class="desc-goods_sales am-text-truncate">
<span>已售{{ goods.goods_sales }}件</span>
</div>
<!-- 商品价格 -->
<div class="desc_footer">
<span v-if="item.style.show.goodsPrice"
class="price_x">¥{{ goods.goods_price }}</span>
<span class="price_y x-color-999"
v-if="item.style.show.linePrice && goods.line_price > 0">
¥{{ goods.line_price }}
</span>
</div>
</div>
</div>
</div>
</template>
<!-- 两列三列 -->
<template v-else>
<div class="goods-image"> <img :src="goods.image"> </div>
<div class="detail">
<p v-if="item.style.show.goodsName" class="goods-name twolist-hidden">
{{goods.goods_name}}
</p>
<p class="detail-price">
<span v-if="item.style.show.goodsPrice" class="goods-price x-color-red">
{{ goods.goods_price }}
</span>
<span v-if="item.style.show.linePrice && goods.line_price > 0"
class="line-price">
{{ goods.line_price }}
</span>
</p>
</div>
</template>
</li>
</ul>
</div>
<div class="diy-goods" v-else :style="{background:item.style.bgColor}">
<ul class="goods-list am-cf"
:class="['display__' + item.style.display, 'column__3']">
<li class="goods-item"
v-for="goods in (item.params.source == 'choice' ? item.data : item.defaultData)">
<!-- 三列 -->
<template>
<div class="goods-image"> <img :src="goods.image"> </div>
<div class="detail">
<p v-if="item.style.show.goodsName" class="goods-name twolist-hidden">
{{goods.goods_name}}
</p>
<p class="detail-price">
<span v-if="item.style.show.goodsPrice" class="goods-price x-color-red">
{{ goods.goods_price }}
</span>
<span v-if="item.style.show.linePrice && goods.line_price > 0"
class="line-price">
{{ goods.line_price }}
</span>
</p>
</div>
</template>
</li>
</ul>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 在线客服 -->
<template v-else-if="item.type == 'service'">
<div class="diy-service drag optional drag__nomove" @click.stop="onEditer(index)"
:class="{selected: index === selectedIndex}"
:style="{ right: item.style.right + 'px', bottom: item.style.bottom + 'px', opacity: item.style.opacity / 100 }">
<div class="service-icon"> <img :src="item.params.image" alt=""> </div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</template>
<!-- diy元素: 关注公众号 -->
<template v-else-if="item.type == 'officialAccount'">
<div @click.stop="onEditer(index)">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-officialAccount">
<div class="item-top">
<span>关联的公众号</span>
</div>
<div class="item-content am-cf">
<div class="item-cont-avatar am-fl">
<img src="/addons/food/img/diy/circular.png" alt="">
</div>
<div class="item-cont-public am-fl">
<div class="public-name">
<span>公众号名称</span>
</div>
<div class="public-describe">
<span>公众号简介公众号简介</span>
</div>
</div>
<div class="item-cont-active am-fr">
<div class="active-btn">
<span>关注</span>
</div>
</div>
</div>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 富文本 -->
<template v-else-if="item.type == 'richText'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected: index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-richText"
:style="{background: item.style.bgColor, padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px'}"
v-html="item.params.content">
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 辅助空白 -->
<template v-else-if="item.type == 'blank'">
<div @click.stop="onEditer(index)">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-blank"
:style="{height: item.style.height +'px', background:item.style.bgColor }">
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
<!-- diy元素: 辅助线 -->
<template v-else-if="item.type == 'guide'">
<div @click.stop="onEditer(index)" class="drag optional"
:class="{selected: index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="diy-guide"
:style="{padding: item.style.paddingTb +'px '+'0', background:item.style.bgColor }">
<p class="line"
:style="{borderTopWidth: item.style.height +'px',borderTopColor:item.style.color,borderTopStyle: item.style.style }">
</p>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</template>
<!-- diy元素: 栏目标题 -->
<template v-else-if="item.type == 'columnTitle'">
<div @click.stop="onEditer(index)" class="bg-f7">
<div class="drag optional" :class="{selected:index === selectedIndex}">
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
<div class="column-title" :style="{background:item.style.bgColor, padding: item.style.paddingTb + 'px 0px'}">
<div v-if="item.params.showLine=='true'" class="line" :style="{background:item.style.lineColor}"></div>
<div class="title" :style="{color:item.style.color,fontWeight:item.style.bold}">{{item.params.title}}</div>
<div v-if="item.params.right=='true'" class="sub" :style="{color:item.style.subColor}">
{{item.params.subTitle}}
<i v-if="item.params.arrow=='true'" class="iconfont icongengduo"></i>
</div>
</div>
</div>
<div class="btn-edit-del">
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
</div>
</div>
</div>
</template>
</template>
</draggable>
</div>
<!-- 手机底部标题 -->
<div id="diy-page11" class="phone-bottom optional box-border-top" @click.stop="onEditer('tabbar')" :class="{selected: 'tabbar' === selectedIndex}" :style="{background: diyData.tabbar.style.bgColor}">
<div class="tabbar" v-for="(item,index) in diyData.tabbar.list">
<div>
<img :src="index ? item.inactiveIcon : item.activeIcon" />
</div>
<div class="text" :style="'color:'+ index ? diyData.tabbar.style.inactiveColor : diyData.tabbar.style.activeColor +';'">
{{item.text}}
</div>
</div>
</div>
</div>