askbot-dragon 1.5.17 → 1.5.18-beta

package/src/components/message/TicketMessage.vue

@@ -1,178 +1,206 @@
-<template>
-  <div class="media-body">
-    <div class="ticketMessage">
-      <ticket-swiper ref="swiper" :content="content" :type="type" @touchEnd="touchEnd">
-        <template>
-          <ticket-swiper-item
-              v-for="(item,_index) in content.cards"
-              :key="_index"
-              :content="content"
-          >
-            <template>
-              <div class="ticketMessageContain">
-                <div :class="{isPhoneClass:isPhone===true,isCompayClass:isCompany===true}">
-                  <div :class="{isIosClass:isIos===true,isAndroidClass:isAndroid===true}">
-                    <div class="htmlClass">
-                      <div v-for="(items,ind) in item.content.htmlList"
-                           :key="ind"
-                           class="html-item"
-                      >
-                        <div class="img" v-if="items.type==='IMAGE'">
-                          <img :src="items.src">
-                        </div>
-                        <div class="singleClass" v-else-if="items.type==='SINGLE'">
-                          <div v-html="itemss" class="singleItem"  v-for="(itemss,inde) in items.list" :key="inde"></div>
-                        </div>
-                        <div class="doubleClass" v-else-if="items.type==='DOUBLE'">
-                          <div  class="doubleItem" v-for="(itemss,index) in items.list" :key="'__'+index" v-html="itemss">
-                          </div>
-                        </div>
-                        <div class="tripleClass" v-else-if="items.type==='TRIPLE'">
-                          <div v-html="itemss" class="tripleItem" v-for="(itemss,index) in items.list" :key="'___'+index"></div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="button-list">
-                      <div v-for="(items,index) in item.content.buttonList" :key="'____'+index" class="button-item">
-                        <div @click="btnClick(items)" class="buttonClassItem">
-                          <span class="btn-name">{{items.name}}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </ticket-swiper-item>
-        </template>
-      </ticket-swiper>
-    </div>
-  </div>
-</template>
-<script>
-    import ticketSwiper from "./swiper/ticketSwiper";
-    import ticketSwiperItem from "./swiper/ticketSwiperItem";
-    export default {
-        name: "TicketMessage",
-        props:{
-            content: {
-                type: Object,
-                default() {
-                    return {}
-                }
-            },
-            type:{
-                type:String,
-                default:''
-            }
-        },
-        components:{
-          ticketSwiperItem,
-          ticketSwiper
-        },
-        data(){
-           return{
-               contents:{
-                   multiple:true,
-                   cards:[
-                       {content:{
-                           htmlList:[{type:'IMAGE',src:'https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-office-website/images/09-4.png'},{type:'SINGLE',list:['<p>aaaaaaaaaa</p>']},{type:'DOUBLE',list:['<p>北京首都国际机场</p>','<div>bbbbb</div>']},{type:'TRIPLE',list:['<p>北京首都国际机场啦啦啦啦</p>','<div>CA5689</div>','<p>上海虹桥国际机场</p>']},{type:'TRIPLE',list:['<p>7:00</p>','<div>SSS</div>','<p>12:00</p>']}],
-                           buttonList:[{name:'我是标签1',scope:'',test:''},{name:'我是标签2'}]
-                           }},
-                       {content:{
-                               htmlList:[{type:'SINGLE',list:['<p>aaaaa</p>','<a>我是链接</a>']},{type:'DOUBLE',list:['<p>aaaaa</p>','<div>bbbbb</div>']},{type:'TRIPLE',list:['<p>7:00</p>','<div></div>','<p>ccccc</p>']},{type:'TRIPLE',list:['<p>7:00</p>','<div>bbbbb</div>','<p>12:00</p>']}],
-                               buttonList:[{name:'我是标签1',scope:'',test:''}]
-                           }},
-                       {content:{
-                               htmlList:[{type:'SINGLE',list:['<p>邓伦李沁的背景图片</p>']},{type:'SINGLE',list:['<p>男生藏快递向求婚被他人错拆</p>']},{type:'SINGLE',list:['<p>aaaaa</p>']},{type:'SINGLE',list:['<p>aaaaa</p>']}],
-                               buttonList:[{name:'我是标签1'}]
-                           }}
-
-                   ]
-               },
-               device:'PC',
-               slideWidth:'',
-               swiperStyle: {},
-               currIndex: 1,
-               distance:0,
-               isAndroid:false,
-               isIos:false,
-               isPhone:false,
-               isCompany:false,
-               swiper:false,
-               text:[],
-               textarea:[],
-              onoff:true
-           }
-        },
-        created() {
-            this.isIosOrIsAndroid()
-            this.isMobile()
-        },
-        mounted() {
-
-        },
-        methods:{
-            SwiperImgLoad() {
-                if (!this.loadCheck) {
-                    this.$emit("SwiperImgLoadEvent");
-                    this.loadCheck = true;
-                }
-            },
-            slideLoadOn() {
-                this.$refs.swiper.slideOn();
-            },
-            btnClick(items){
-              items.apiKey=this.content.apiKey
-              let that = this;
-              if (that.onoff) {
-                that.onoff = false;
-                console.debug('card_template',items)
-                this.$emit('btnClick',items,this.content.apiKey)
-                setTimeout(function () {
-                  that.onoff = true;
-                }, 600)
-              } else {
-                //如果一直走else分支可能是你没有在页面的data下面挂载onoff:true,不然一直都会走else
-                console.debug("请稍后点击")
-              }
-            },
-
-            isIosOrIsAndroid(){
-                var u = navigator.userAgent;
-                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
-                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
-                if(isAndroid){
-                    this.isAndroid=true
-                }
-                if(isiOS){
-                    this.isIos=true
-                }
-            },
-            isMobile() {
-                let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
-                if (flag) {
-                    this.isPhone=true
-                }
-                else
-                {
-                    this.isCompany=true
-                }
-            },
-          touchMove(){
-
-          },
-          touchEnd(index){
-            this.$emit('touchEnd',index)
-          }
-
-        },
-    }
-</script>
-
-<style  lang="less">
-    @import "../../assets/less/ticketMessage";
-a{
-    text-decoration: none;
-}
+<template>
+  <div class="media-body">
+    <div class="ticketMessage">
+      <ticket-swiper ref="swiper" :content="content" :type="type" @touchEnd="touchEnd">
+        <template>
+          <ticket-swiper-item v-for="(item, _index) in content.cards" :key="_index" :content="content">
+            <template>
+              <div class="ticketMessageContain">
+                <div :class="{ isPhoneClass: isPhone === true, isCompayClass: isCompany === true }">
+                  <div :class="{ isIosClass: isIos === true, isAndroidClass: isAndroid === true }">
+                    <div class="htmlClass">
+                      <div v-for="(items, ind) in item.content.htmlList" :key="ind" class="html-item">
+                        <div class="img" v-if="items.type === 'IMAGE'">
+                          <img :src="items.src">
+                        </div>
+                        <div class="singleClass" v-else-if="items.type === 'SINGLE'">
+                          <div v-html="itemss" class="singleItem" v-for="(itemss, inde) in items.list" :key="inde"></div>
+                        </div>
+                        <div class="doubleClass" v-else-if="items.type === 'DOUBLE' && item.version != 1">
+                          <div class="doubleItem" v-for="(itemss, index) in items.list" :key="'__' + index"
+                            v-html="itemss">
+                          </div>
+                        </div>
+                        <div class="updateDoubleClass" v-else-if="items.type === 'DOUBLE' && item.version == 1">
+                          <div class="doubleItem" :style="{ 'width': itemss.style.col / itemss.style.colums * 100 + '%' }"
+                            v-for="(itemss, index) in items.tampList" :key="'__' + index" v-html="itemss.html">
+                          </div>
+                          <!-- <div class="doubleItem" v-for="(itemss,index) in items.tampList" :key="'__'+index">
+                            {{itemss.style.col/itemss.style.colums*100}}{{itemss.html}}
+                          </div> -->
+                        </div>
+                        <div class="tripleClass" v-else-if="items.type === 'TRIPLE'">
+                          <div v-html="itemss" class="tripleItem" v-for="(itemss, index) in items.list"
+                            :key="'___' + index">
+                          </div>
+                        </div>
+                        <div class="quadrupleClass" v-else-if="items.type === 'QUADRUPLE'">
+                          <div v-html="itemss" class="quadrupleItem" v-for="(itemss, index) in items.list"
+                            :key="'___' + index"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="button-list">
+                      <div v-for="(items, index) in item.content.buttonList" :key="'____' + index" class="button-item">
+                        <div @click="btnClick(items)" class="buttonClassItem">
+                          <span class="btn-name">{{ items.name }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </ticket-swiper-item>
+        </template>
+      </ticket-swiper>
+    </div>
+  </div>
+</template>
+<script>
+import ticketSwiper from "./swiper/ticketSwiper";
+import ticketSwiperItem from "./swiper/ticketSwiperItem";
+export default {
+  name: "TicketMessage",
+  props: {
+    content: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    ticketSwiperItem,
+    ticketSwiper
+  },
+  data() {
+    return {
+      contents: {
+        multiple: true,
+        cards: [
+          {
+            content: {
+              htmlList: [{ type: 'IMAGE', src: 'https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-office-website/images/09-4.png' }, { type: 'SINGLE', list: ['<p>aaaaaaaaaa</p>'] }, { type: 'DOUBLE', list: ['<p>北京首都国际机场</p>', '<div>bbbbb</div>'] }, { type: 'TRIPLE', list: ['<p>北京首都国际机场啦啦啦啦</p>', '<div>CA5689</div>', '<p>上海虹桥国际机场</p>'] }, { type: 'TRIPLE', list: ['<p>7:00</p>', '<div>SSS</div>', '<p>12:00</p>'] }],
+              buttonList: [{ name: '我是标签1', scope: '', test: '' }, { name: '我是标签2' }]
+            }
+          },
+          {
+            content: {
+              htmlList: [{ type: 'SINGLE', list: ['<p>aaaaa</p>', '<a>我是链接</a>'] }, { type: 'DOUBLE', list: ['<p>aaaaa</p>', '<div>bbbbb</div>'] }, { type: 'TRIPLE', list: ['<p>7:00</p>', '<div></div>', '<p>ccccc</p>'] }, { type: 'TRIPLE', list: ['<p>7:00</p>', '<div>bbbbb</div>', '<p>12:00</p>'] }],
+              buttonList: [{ name: '我是标签1', scope: '', test: '' }]
+            }
+          },
+          {
+            content: {
+              htmlList: [{ type: 'SINGLE', list: ['<p>邓伦李沁的背景图片</p>'] }, { type: 'SINGLE', list: ['<p>男生藏快递向求婚被他人错拆</p>'] }, { type: 'SINGLE', list: ['<p>aaaaa</p>'] }, { type: 'SINGLE', list: ['<p>aaaaa</p>'] }],
+              buttonList: [{ name: '我是标签1' }]
+            }
+          }
+
+        ]
+      },
+      device: 'PC',
+      slideWidth: '',
+      swiperStyle: {},
+      currIndex: 1,
+      distance: 0,
+      isAndroid: false,
+      isIos: false,
+      isPhone: false,
+      isCompany: false,
+      swiper: false,
+      text: [],
+      textarea: [],
+      onoff: true
+    }
+  },
+  created() {
+    this.isIosOrIsAndroid()
+    this.isMobile()
+  },
+  mounted() {
+    this.content.cards.forEach(element => {
+      if (element.version == 1) {
+        element.content.htmlList.forEach((item) => {
+          item.tampList = [];
+          item.list.forEach((cell, cellIndex) => {
+            let tampCell = {
+              html: cell,
+              style: item.style[cellIndex]
+            }
+            item.tampList.push(tampCell);
+          })
+        })
+      }
+    });
+    this.content.cards = [...this.content.cards];
+  },
+  methods: {
+    SwiperImgLoad() {
+      if (!this.loadCheck) {
+        this.$emit("SwiperImgLoadEvent");
+        this.loadCheck = true;
+      }
+    },
+    slideLoadOn() {
+      this.$refs.swiper.slideOn();
+    },
+    btnClick(items) {
+      items.apiKey = this.content.apiKey
+      let that = this;
+      if (that.onoff) {
+        that.onoff = false;
+        console.debug('card_template', items)
+        this.$emit('btnClick', items, this.content.apiKey)
+        setTimeout(function () {
+          that.onoff = true;
+        }, 600)
+      } else {
+        //如果一直走else分支可能是你没有在页面的data下面挂载onoff:true,不然一直都会走else
+        console.debug("请稍后点击")
+      }
+    },
+
+    isIosOrIsAndroid() {
+      var u = navigator.userAgent;
+      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isAndroid) {
+        this.isAndroid = true
+      }
+      if (isiOS) {
+        this.isIos = true
+      }
+    },
+    isMobile() {
+      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+      if (flag) {
+        this.isPhone = true
+      }
+      else {
+        this.isCompany = true
+      }
+    },
+    touchMove() {
+
+    },
+    touchEnd(index) {
+      this.$emit('touchEnd', index)
+    }
+
+  },
+}
+</script>
+
+<style  lang="less">
+@import "../../assets/less/ticketMessage";
+
+a {
+  text-decoration: none;
+}
 </style>

package/src/components/message/swiper/index.js

@@ -1,4 +1,4 @@
-import Swiper from "./ticketSwiper";
-import SwiperItem from "./ticketSwiperItem";
-
-export { Swiper, SwiperItem };
+import Swiper from "./ticketSwiper";
+import SwiperItem from "./ticketSwiperItem";
+
+export { Swiper, SwiperItem };