design.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <nc-component :data="data[index]" class="follow-official-account-wrap">
  2. <!-- 预览 -->
  3. <template slot="preview">
  4. <div class="site-info-box" :style="{ borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0), borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
  5. borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0), borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }" data-disabled="1">
  6. <div class="site-info" data-disabled="1">
  7. <div class="img-box" data-disabled="1">
  8. <img :src="changeImgUrl('public/static/img/default_img/square.png')" />
  9. </div>
  10. <div class="info-box" :style="{ color: '#ffffff' }" data-disabled="1">
  11. <span class="font-size-base">店铺名称</span>
  12. <span>{{ nc.welcomeMsg }}</span>
  13. </div>
  14. </div>
  15. <button class="layui-btn layui-btn-primary text-color">关注公众号</button>
  16. </div>
  17. </template>
  18. <!-- 内容编辑 -->
  19. <template slot="edit-content">
  20. <template v-if="nc.lazyLoad">
  21. <follow-official-account-sources></follow-official-account-sources>
  22. </template>
  23. <div class="template-edit-title">
  24. <h3>内容设置</h3>
  25. <div class="layui-form-item">
  26. <label class="layui-form-label sm">欢迎语</label>
  27. <div class="layui-input-block">
  28. <input type="text" v-model="nc.welcomeMsg" placeholder="请输入欢迎语" class="layui-input" maxlength="20">
  29. </div>
  30. </div>
  31. <div class="layui-form-item checkbox-wrap">
  32. <label class="layui-form-label sm">展示开关</label>
  33. <div class="layui-input-block">
  34. <span v-if="nc.isShow == true">显示</span>
  35. <span v-else>隐藏</span>
  36. <div v-if="nc.isShow == true" @click="nc.isShow = false" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
  37. <i class="layui-icon layui-icon-ok"></i>
  38. </div>
  39. <div v-else @click="nc.isShow = true" class="layui-unselect layui-form-checkbox" lay-skin="primary">
  40. <i class="layui-icon layui-icon-ok"></i>
  41. </div>
  42. </div>
  43. <div class="word-aux diy-word-aux">该组件只会在微信内部展示,在普画浏览器或者小程序不展示,需要配置微信公众号,同时用户关注后会自动隐藏</div>
  44. </div>
  45. </div>
  46. </template>
  47. <!-- 样式编辑 -->
  48. <template slot="edit-style"></template>
  49. <!-- 资源 -->
  50. <template slot="resource">
  51. <css src="{$resource_path}/css/design.css"></css>
  52. <js src="{$resource_path}/js/design.js"></js>
  53. </template>
  54. </nc-component>