273 lines
18 KiB
HTML
273 lines
18 KiB
HTML
{extend name="app/shop/view/base.html" /}
|
||
{block name="resources"}
|
||
<link rel="stylesheet" href="WECHAT_CSS/wx_menu.css">
|
||
<script src="WECHAT_JS/common.js"></script>
|
||
{/block}
|
||
{block name="main"}
|
||
<div class='wx-menu' id='menu'>
|
||
<div class='wx-menu-preview'>
|
||
<div class='mobile-preview'>
|
||
<div class='mobile-hd'>
|
||
<span></span>
|
||
</div>
|
||
<div class='mobile-bd'>
|
||
<div class='wx-menu-list'>
|
||
<template v-for="(item, index) in button">
|
||
<div class="wx-menu-item-box" :class="['wx-menu-item-box-' + index]">
|
||
<div class='wx-menu-item' :class="[index==menuIndex[0]&&-1==menuIndex[1] ? 'active' : '']" @click.stop='chooseMenu(index, -1)'>
|
||
<template v-if="item.name == ''">
|
||
<span>菜单名称</span>
|
||
</template>
|
||
<template v-else>
|
||
<span>{{item.name}}</span>
|
||
</template>
|
||
</div>
|
||
<template v-if="index==menuIndex[0]">
|
||
<div class='wx-sub-menu-list' v-if="item"
|
||
:class="[button.length != undefined && button.length == 2 ? 'two' : '', button.length != undefined && button.length == 3 ? 'three' : '']">
|
||
<div class='wx-sub-menu-item' :data="[second_index]" :class="[second_index==menuIndex[1] ? 'active' : '', 'wx-sub-menu-item-' + second_index]" v-for="(item2, second_index) in item.sub_button" @click.stop='chooseMenu(index, second_index)'>
|
||
<template v-if="item2.name == ''">
|
||
<span>子菜单名称</span>
|
||
</template>
|
||
<template v-else>
|
||
<span>{{item2.name}}</span>
|
||
</template>
|
||
</div>
|
||
<template v-if="subMenuPlusShow">
|
||
<div class='wx-sub-menu-item' @click.stop="addSubMenu(index)">+</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
<template v-if="button.length < 3">
|
||
<div class='wx-menu-item-box add-menu' @click="addMenu()">+</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='wx-menu-form'>
|
||
<div class='button-list-null' v-if='menuIndex[0] == -1'>点击左侧按钮 + 添加菜单</div>
|
||
<template v-if="menuIndex[0] != -1">
|
||
<div class='form-editor'>
|
||
<div class='form-hd'>
|
||
<div class='form-hd-name'>{{name}}</div>
|
||
<div class='form-hd-del'><a href="javascript:void(0);" class='layui-btn layui-btn-primary layui-btn-xs' @click='deleteMenu()'>删除菜单</a></div>
|
||
</div>
|
||
<div class='form-bd'>
|
||
<div class='form-bd-list'>
|
||
<div class='form-bd-item'>
|
||
<label class='layui-form-label sm'>菜单名称</label>
|
||
<div class='item-group'>
|
||
<template v-if="menuIndex[1] == -1">
|
||
<input type='text' class='input layui-input' :class="error_hint == 'name' ? 'error' : ''" value='' @keyup="checkName($event)" v-model='name' placeholder="请输入菜单名称">
|
||
<p class="tip" :class="error_hint == 'name' ? 'error' : ''">字数不超过4个汉字或8个字母</p>
|
||
</template>
|
||
<template v-else>
|
||
<input type='text' class='input layui-input' :class="error_hint == 'name' ? 'error' : ''" value='' @keyup="checkName($event, 'sub_button')" v-model='name' placeholder="请输入子菜单名称">
|
||
<p class='tip' :class="error_hint == 'name' ? 'error' : ''">字数不超过8个汉字或16个字母</p>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class='form-bd-item' v-if="(menuIndex[0] > -1 && (button[menuIndex[0]] == undefined || button[menuIndex[0]].sub_button == undefined || button[menuIndex[0]].sub_button[0] == undefined)) || (menuIndex[1] > -1)">
|
||
<label class='layui-form-label sm'>菜单内容</label>
|
||
<div class='item-group menu-type'>
|
||
<label class='radio-label'>
|
||
<i class='layui-icon' :class="type == 'media' ? 'layui-icon-radio' : 'layui-icon-circle'"></i>
|
||
<input type='radio' name='type' id='type1' value='media' v-model='type'>
|
||
<span>发送素材内容</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<i class='layui-icon' :class="type == 'view' ? 'layui-icon-radio' : 'layui-icon-circle'"></i>
|
||
<input type='radio' name='type' id='type2' value='view' v-model='type'>
|
||
<span>跳转到网页</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<i class='layui-icon' :class="type == 'miniprogram' ? 'layui-icon-radio' : 'layui-icon-circle'"></i>
|
||
<input type='radio' name='type' id='type3' value='miniprogram' v-model='type'>
|
||
<span>跳转小程序</span>
|
||
</label>
|
||
<label class='radio-label hide'>
|
||
<i class='layui-icon' :class="type == 'custom_event' ? 'layui-icon-radio' : 'layui-icon-circle'"></i>
|
||
<input type='radio' name='type' id='type4' value='custom_event' v-model='type'>
|
||
<span>自定义事件</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='form-bd-content'>
|
||
<div class='menu-content' v-if='type == "media"'>
|
||
<div class="layui-tab layui-tab-brief">
|
||
<ul class="layui-tab-title wechat-media">
|
||
<li :class="media_type == 'text' ? 'layui-this' : ''" @click="chooseMediaType(5)"><i class='layui-icon layui-icon-form'></i>文本消息</li>
|
||
<li :class="media_type == 'graphic_message' ? 'layui-this' : ''" @click="chooseMediaType(1)"><i class='layui-icon layui-icon-tabs'></i>图文消息</li>
|
||
</ul>
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item" :class="media_type == 'text' ? 'layui-show' : ''">
|
||
<template v-if="text == '' || text == undefined">
|
||
<div class='material-library' @click="material(5)">
|
||
<i></i>
|
||
<span>从素材库选择</span>
|
||
</div>
|
||
<div class='add-material' @click="addMaterial(5)">
|
||
<i></i>
|
||
<span>添加文本素材</span>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class='text-message'>
|
||
<div class='text-message-content'>
|
||
<div class="material-type">
|
||
<span>文本</span>
|
||
</div>
|
||
<div class="title">
|
||
<a href="javascript:void(0);" @click="previewTexts(text)">{{text}}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class='del' @click="deleteMaterial(5)">删除</span>
|
||
</template>
|
||
</div>
|
||
<div class="layui-tab-item" :class="media_type == 'graphic_message' ? 'layui-show' : ''">
|
||
<template v-if="graphic_message[0] == undefined">
|
||
<div class='material-library' @click="material(1)">
|
||
<i></i>
|
||
<span>从素材库选择</span>
|
||
</div>
|
||
<div class='add-material' @click="addMaterial(1)">
|
||
<i></i>
|
||
<span>新建图文素材</span>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class='graphic-message-list'>
|
||
<template v-for="(value, index) in graphic_message">
|
||
<div class='graphic-message-content'>
|
||
<div class="material-type">
|
||
<span>图文</span>
|
||
</div>
|
||
<div class="title">
|
||
<a href="javascript:void(0);" @click="preview(value.id, index)">{{value.title}}</a>
|
||
</div>
|
||
</div>
|
||
<template v-if="graphic_message.length == 1">
|
||
<div class='read-all' @click="preview(value.id)">
|
||
<div>阅读全文</div>
|
||
<i> > </i>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
<span class='del' @click="deleteMaterial(1)">删除</span>
|
||
</template>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='menu-content view' v-if='type == "view"'>
|
||
<p class='tip' style="margin: 10px 0 20px 0;padding-left: 5px;">订阅者点击该子菜单会跳转到一下链接</p>
|
||
<div class='form-bd-item'>
|
||
<label class='layui-form-label sm'>页面地址</label>
|
||
<div class='layui-input-inline'>
|
||
<input type='text' class="input layui-input" value='' v-model='url' placeholder='例：http://example.com'>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='menu-content menu' v-if='type == "miniprogram"'>
|
||
<p class='tip' style="margin: 10px 0 20px 0;padding-left: 5px;">订阅者点击该子菜单会跳到以下小程序</p>
|
||
<div class='layui-form-item'>
|
||
<label class='layui-form-label'>备用网页</label>
|
||
<div class='layui-input-block'>
|
||
<input type='text' id='miniprogram_url' class="layui-input" value='' v-model='url' placeholder='例：http://example.com'>
|
||
<p class='layui-form-mid layui-word-aux'>旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
|
||
</div>
|
||
</div>
|
||
<div class='layui-form-item'>
|
||
<label class='layui-form-label'>小程序APPID</label>
|
||
<div class='layui-input-block'>
|
||
<input type='text' class="layui-input" value='' v-model='appid'>
|
||
<p class='layui-form-mid layui-word-aux'>小程序需要绑定当前公众号。</p>
|
||
</div>
|
||
</div>
|
||
<div class='layui-form-item'>
|
||
<label class='layui-form-label'>小程序页面路径</label>
|
||
<div class='layui-input-inline'>
|
||
<input type='text' class="layui-input" value='' v-model='pagepath'>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='menu-content' v-if='type == "event"'>
|
||
<label class='radio-label'>
|
||
<input type='radio' name='eventType' value='click' v-model='eventType'>
|
||
<span>点击事件</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<input type='radio' name='eventType' value='scancode_push' v-model='eventType'>
|
||
<span>扫码推事件</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<input type='radio' name='eventType' value='scancode_waitmsg' v-model='eventType'>
|
||
<span>扫码推事件带提示</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<input type='radio' name='eventType' value='pic_sysphoto' v-model='eventType'>
|
||
<span>弹出系统拍照发图</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<input type='radio' name='eventType' value='pic_photo_or_album' v-model='eventType'>
|
||
<span>弹出拍照或者相册发图</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<input type='radio' name='eventType' value='pic_wechat' v-model='eventType'>
|
||
<span>弹出微信相册发图器</span>
|
||
</label>
|
||
<label class='radio-label'>
|
||
<input type='radio' name='eventType' value='location_select' v-model='eventType'>
|
||
<span>弹出地理位置选择器</span>
|
||
</label>
|
||
<div class='form-bd-item'>
|
||
<label class='item-label'>菜单KEY值</label>
|
||
<div class='item-group'>
|
||
<input type='text' class='input' value='' v-model='key'>
|
||
<p class='tip'>旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class='form-ft'>
|
||
<button class='layui-btn' @click="saveMenu()">保存并发布</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加文本消息 -->
|
||
<div class="layui-tab layui-tab-brief" id="add_material_text" style="display:none;">
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this">添加文本消息</li>
|
||
</ul>
|
||
<div class="layui-form" style="margin-top: 20px;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label sm">内容</label>
|
||
<div class="layui-input-block">
|
||
<textarea name="content" placeholder="请输入内容" id="material_text_content" class="layui-textarea" maxlength="300" lay-verify='material_text_content'></textarea>
|
||
<span class='input-text-hint'>剩余300字</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-row sm">
|
||
<button class="layui-btn" lay-submit lay-filter="addText">保存</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary" onclick="back()">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/block}
|
||
{block name="script"}
|
||
<script src="STATIC_JS/vue.js"></script>
|
||
<script type="text/javascript" src="WECHAT_JS/wx_menu.js"></script>
|
||
<script type="text/javascript" src="WECHAT_JS/wx_material_mannager.js"></script>
|
||
{/block} |