提交代码

package.json

@@ -27,6 +27,7 @@
     "flyio": "^0.6.14",
     "mayi-analytics": "^1.1.14",
     "mpvue": "^2.0.0",
+    "mpvue-wxparse": "^0.6.5",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/content/imgText.vue

+<template>
+  <div class="img-text">
+    <!-- 顶部文字 -->
+    <div v-if="datas.componentData.initcharSite=='outer_top'">
+      <div
+        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
+        :class="datas.componentData.titles.length > 0 ? 'textH' : ''"
+      >{{datas.componentData.titles}}</div>
+      <div
+        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
+        :class="datas.componentData.abstract.length > 0 ? 'textC' : ''"
+      >{{datas.componentData.abstract}}</div>
+    </div>
+    <!-- 图片区域 -->
+    <div class="imgcontent" @click="itemClick()">
+      <image :src="datas.componentData.imageUrl" alt lazy-load="true" mode="widthFix" :style="{'width':'100%','display':'block'}" ></image>
+      <!-- 内部文字 -->
+      <div
+        v-if="datas.componentData.initcharSite==='inner_top' || datas.componentData.initcharSite==='inner_center' || datas.componentData.initcharSite==='inner_bottom'"
+        class="text-class"
+        :style="[datas.componentData.initcharSite=='inner_bottom'?{'justify-content': 'flex-end'}:datas.componentData.initcharSite=='inner_top'?{'justify-content': 'flex-start'}:{'justify-content': 'center'}]"
+      >
+        <div
+          :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
+          :class="datas.componentData.titles.length > 0 ? 'textH' : ''"
+        >{{datas.componentData.titles}}</div>
+        <div
+          :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
+          :class="datas.componentData.abstract.length > 0 ? 'textC' : ''"
+        >{{datas.componentData.abstract}}</div>
+      </div>
+    </div>
+    <!-- 底部文字 -->
+    <div v-if="datas.componentData.initcharSite=='outer_bottom'">
+      <div
+        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
+        :class="datas.componentData.titles.length > 0 ? 'textH' : ''"
+      >{{datas.componentData.titles}}</div>
+      <div
+        :style="{'font-size':datas.componentData.initcharSize+'em','text-align':datas.componentData.initcharAlign,'color':datas.componentData.fontColor}"
+        :class="datas.componentData.abstract.length > 0 ? 'textC' : ''"
+      >{{datas.componentData.abstract}}</div>
+    </div>
+  </div>
+</template>
+<script>
+const app = getApp()
+export default {
+  name : "img-text",
+  props: {
+    datas: {
+      type: Object,
+      default: () => {
+        return {
+          id: "",
+          pageCode: 0,
+          pageType: 0,
+          queueNumber: 0,
+          componentName: "图文",
+          componentCode: "img-text",
+          code: 1,
+          componentData: {
+            titles: "这是标题",
+            abstract:
+              "摘要文字 这是一个图文组件,可以上传图片和编辑文字，并且对图片大小、文字大小以及位置进行自定义编辑,快使用它!",
+            imageUrl:
+              "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2546973851,4267148231&fm=26&gp=0.jpg",
+            link: {
+              name: "",
+              link: ""
+            },
+            initimgSize: "80%", //图片默认尺寸
+            initcharSize: 1,
+            initcharAlign: "left",
+            initcharSite: "left"
+          }
+        };
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {
+    itemClick() {
+      app.$themeToLink(this.datas.componentData.link);
+    }
+  },
+  mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+.img-text {
+  font-size: 16px;
+  .imgcontent {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    text-align: center;
+    .text-class {
+      // vertical-align: middle;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    image{
+      vertical-align: top/middle/bottom;
+    }
+  }
+  .textH {
+    font-weight: bold;
+    margin: 16px 16px;
+  }
+  .textC {
+    padding: 16px 16px;
+  }
+}
+</style>

src/components/content/text.vue

+<!-- 文本
+ -->
+<template>
+  <div class="text-text">
+    <p
+      :style="{
+                    'word-breakword-break':'break-all',
+                    'color':getfontsizeColor,
+                    'background-color':getbackgroundColor,
+                    'padding-top':getPaddingList[0]['value']+'px',
+                    'padding-bottom':getPaddingList[1]['value']+'px',
+                    'padding-left':getPaddingList[2]['value']+'px',
+                    'padding-right':getPaddingList[3]['value']+'px',
+                    'textAlign':getAlign,
+                    'fontSize':getFontSize}"
+      @click="itemClick()"
+    >{{getContent}}</p>
+  </div>
+</template>
+
+<script>
+const app = getApp()
+export default {
+  name: "text-text",
+  props: {
+     datas: {
+      type: Object,
+      default: function() {
+        return {
+          id: "",
+          pageCode: 0,
+          pageType: 0,
+          queueNumber: 0,
+          componentName: "文本",
+          componentCode: "text-text",
+          code: 1,
+          componentData: {
+            content:
+              "这里是内容 可以编写需要的内容 测试测试测试测试测试测试测试测试测试",
+            link: {
+              name:'',
+              link:''
+            },
+            fontColor: "#000000",
+            backgroundColor: "",
+            initcharAlign: "center",
+            initcharSize: 1, //文字默认
+            paddingList: [
+              {
+                name: "上",
+                value: 20
+              },
+              {
+                name: "下",
+                value: 20
+              },
+              {
+                name: "左",
+                value: 50
+              },
+              {
+                name: "右",
+                value: 50
+              }
+            ]
+          }
+        };
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {
+
+  },
+  onLoad(){
+    console.log(this.datas,'iu')
+  },
+  computed: {
+    getPaddingList() {
+      return this.datas.componentData.paddingList;
+    },
+    getfontsizeColor() {
+      if (this.datas.componentData) {
+        return this.datas.componentData.fontColor;
+      }
+    },
+    getAlign() {
+      if (this.datas.componentData) {
+        return this.datas.componentData.initcharAlign;
+      }
+    },
+    getContent() {
+      if (this.datas.componentData) {
+        return this.datas.componentData.content;
+      }
+    },
+    getbackgroundColor() {
+      if (this.datas.componentData) {
+        return this.datas.componentData.backgroundColor;
+      }
+    },
+    getFontSize() {
+      if (this.datas.componentData) {
+        return this.datas.componentData.initcharSize + "em";
+      }
+    }
+  },
+  methods: {
+    itemClick() {
+      app.$themeToLink(this.datas.componentData.link);
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style lang="scss" scoped>
+.text-text {
+  font-size: 16px;
+}
+</style>
+

src/components/content/videoPlayer.vue

+<template>
+  <!-- 视频组件 -->
+  <div class="video-player">
+    <div class="title" v-if="datas.componentData['title']">
+      <p>{{datas.componentData['title']}}</p>
+    </div>
+    <div class="main">
+      <!-- url展示 -->
+      <div class="isVideo" v-show="datas.componentData['type']<3">
+        <video
+          @click="pauseVideo"
+          @ended="videoEnd"
+          ref="videoPlayer"
+          type="video/mp4"
+          width="100%"
+          :src="videoUrl"
+          autoplay
+          :loop="datas.componentData['loopPlay']"
+          :controls="datas.componentData['nativeControl']"
+          :webkit-playsinline="true"
+          :x5-video-player-type="'h5-page'"
+          :x5-video-player-fullscreen="true"
+          :playsinline="true"
+          :poster="videoPoster"
+        ></video>
+        <!-- :webkit-playsinline="datas.componentData['fullScreenPlay']"
+          :x5-video-player-type="datas.componentData['fullScreenPlay']?'h5-page':''"
+          :x5-video-player-fullscreen="datas.componentData['fullScreenPlay']"
+          :playsinline="datas.componentData['fullScreenPlay']" -->
+        <div class="playerBtn" @click="playVideo" v-if="isPlay&&!datas.componentData['nativeControl']">
+          <img
+            src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/06420e41-cd0b-4913-a1ef-9056ceebcc95.png"
+            alt
+          />
+        </div>
+      </div>
+      <!-- 代码片段展示 -->
+      <div
+        class="isCodeSnippets"
+        v-show="datas.componentData['type']==3&&datas.componentData['codeSnippet']!=''"
+      >
+      <wxParse :content="datas.componentData['codeSnippet']" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import wxParse from 'mpvue-wxparse'
+export default {
+  name: "video-player",
+  props: {
+    render: {
+      type: Boolean,
+      default: false
+    },
+    datas: {
+      type: Object,
+      default: function() {
+        return {
+          id: "",
+          pageCode: 0,
+          pageType: 0,
+          queueNumber: 0,
+          componentName: "视频",
+          componentCode: "video-player",
+          code: 1,
+          componentData: {
+            // 1:手动上传 2：网络地址 3：代码片段
+            type: 1,
+            //  是否展示原生控件
+            nativeControl: false,
+            // 是否循环播放
+            loopPlay: false,
+            // 是否全屏播放
+            fullScreenPlay: false,
+            title: "视频",
+            videoUrl: "",
+            codeSnippet: ""
+          }
+        };
+      }
+    }
+  },
+  components: {
+    wxParse
+  },
+  data() {
+    return {
+      isPlay: true
+    };
+  },
+  watch: {
+    videoUrl() {
+      this.$refs.videoPlayer.src = this.videoUrl;
+    },
+    videoPoster(){
+      this.$refs.videoPlayer.poster = this.videoPoster;
+      this.$refs.videoPlayer.src = this.videoUrl;
+    }
+  },
+  computed: {
+    videoUrl() {
+      return this.datas.componentData["videoUrl"];
+    },
+    videoPoster() {
+      return this.datas.componentData["poster"];
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    // 播放暂停
+    pauseVideo() {
+      if(this.datas.componentData['nativeControl'])return;
+      this.$refs.videoPlayer.pause();
+      this.isPlay = true;
+    },
+    // 播放开始
+    playVideo() {
+      if(!this.render)return;
+      this.$refs.videoPlayer.play();
+      this.isPlay = false;
+    },
+    // 播放结束
+    videoEnd(){
+      if(!this.datas.componentData['nativeControl']){
+        this.isPlay=true;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url("~mpvue-wxparse/src/wxParse.css");
+.video-player {
+  .title {
+    font-size: 18px;
+    padding: 10px 20px;
+    color: #333;
+    font-weight: bold;
+  }
+  .main {
+    width: 100%;
+    .isVideo {
+      width: 100%;
+      position: relative;
+      .playerBtn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 60px;
+        height: 60px;
+        margin-top: -30px;
+        margin-left: -30px;
+        border-radius: 50%;
+        overflow: hidden;
+        img {
+          width: 60px;
+          height: 60px;
+        }
+      }
+      video{
+        width:100%;
+      }
+    }
+    .isCodeSnippets {
+      width: 100%;
+      video{
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/pages/home/index.vue

@@ -36,6 +36,15 @@
           <div v-if="item.componentCode == 'float-button'">
             <float-button :datas="item"></float-button>
           </div>
+          <div v-if="item.componentCode == 'text-text'">
+            <text-text :datas="item"></text-text>
+          </div>
+          <div v-if="item.componentCode == 'img-text'">
+            <img-text :datas="item"></img-text>
+          </div>
+          <div v-if="item.componentCode == 'video-player'">
+            <videoPlayer :datas="item"></videoPlayer>
+          </div>
         </div>
       </div>
       <bottomCont></bottomCont>
@@ -65,6 +74,9 @@ import links from '@/components/basicTool/link/index.vue'
 import interval from '@/components/basicTool/interval/index.vue'
 import partition from '@/components/basicTool/partition/index.vue'
 import shopPopup from '@/components/basicTool/shop-popup/index.vue'
+import text from '@/components/content/text'
+import imgText from '@/components/content/imgText'
+import videoPlayer from '@/components/content/videoPlayer'
 import { setTabBarActive, checkTabbarPage } from "../../utils/mayi.js";
 const app = getApp();
 
@@ -81,7 +93,10 @@ export default {
     partition,
     shopPopup,
     bottomCont,
-    ThemeDataPlant
+    ThemeDataPlant,
+    'text-text':text,
+    'img-text':imgText,
+    videoPlayer
   },
   onShareAppMessage(res) {
     let shareVal={};