Merge branch 'vue3_tmp' of https://gitee.com/huizhizao/yudao-mall-uniapp into vue3_tmp

pages/index/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<view v-if="template">
-		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.style?.background"
+		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page"
 			:navbarStyle="template.style?.navbar" onShareAppMessage>
-			<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
-				<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
+			<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
+				<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
 			</s-block>
 			<!-- 广告模块 -->
 			<s-popup-image />
@@ -22,12 +22,10 @@
 	} from '@dcloudio/uni-app';
 	import sheep from '@/sheep';
 	import $share from '@/sheep/platform/share';
-	import index2Api from '@/sheep/api/index2';
 	// 隐藏原生tabBar
 	uni.hideTabBar();
 
 	const template = computed(() => sheep.$store('app').template?.home);
-
 	// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
 	(async function() {
 		console.log('原代码首页定制化数据',template)
@@ -50,6 +48,7 @@
 		})
 	}())
 
+
 	onLoad((options) => {
 		// #ifdef MP
 		// 小程序识别二维码
@@ -89,4 +88,4 @@
 	onPageScroll(() => {});
 </script>
 
-<style></style>
+<style></style>

sheep/api/promotion/diy/template.js

@@ -0,0 +1,10 @@
+import request from '@/sheep/request';
+
+export default {
+  // TODO 芋艿：测试
+  getUsedDiyTemplate: () =>
+    request({
+      url: '/app-api/promotion/diy-template/used',
+      method: 'GET',
+    }),
+};

sheep/components/s-block-item/s-block-item.vue

@@ -1,34 +1,57 @@
 <template>
   <view>
-    <s-image-block v-if="type === 'imageBlock'" :data="data" :styles="styles" />
-    <s-image-banner v-if="type === 'imageBanner'" :data="data" :styles="styles" />
-    <s-video-block v-if="type === 'videoPlayer'" :data="data" :styles="styles" />
-    <s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
+    <!-- 基础组件：搜索框 -->
+    <s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" />
+    <!-- 基础组件：公告栏 -->
+    <s-notice-block v-if="type === 'NoticeBar'" :data="data" />
+    <!-- 基础组件：菜单导航 -->
+    <s-menu-button v-if="type === 'MenuSwiper'" :data="data" :styles="styles" />
+    <!-- 基础组件：列表导航 -->
+    <s-menu-list v-if="type === 'MenuList'" :data="data" />
+    <!-- 基础组件：宫格导航 -->
+    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" />
 
-    <s-notice-block v-if="type === 'noticeBlock'" :data="data" />
-    <s-search-block v-if="type === 'searchBlock'" :data="data" :navbar="false" />
+    <!-- 图文组件：图片展示 -->
+    <s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />
+    <!-- 图文组件：图片轮播 -->
+    <s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" />
+    <!-- 基础组件：标题栏 -->
     <s-title-block v-if="type === 'titleBlock'" :data="data" :styles="styles" />
+    <!-- 图文组件：广告魔方 -->
+    <s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
+    <!-- 图文组件：视频播放 -->
+    <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
+    <!-- 基础组件：辅助线 -->
     <s-line-block v-if="type === 'lineBlock'" :data="data" />
+    <!-- 图文组件：富文字 -->
+    <s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles" />
+    <!-- 图文组件：热区 -->
+    <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" />
 
-    <s-menu-button v-if="type === 'menuButton'" :data="data" :styles="styles" />
-    <s-menu-list v-if="type === 'menuList'" :data="data" />
-    <s-menu-grid v-if="type === 'menuGrid'" :data="data" />
+    <!-- 商品组件：商品卡片 -->
+    <s-goods-card v-if="type === 'goodsCard'" :data="data" :styles="styles" />
+    <!-- 商品组件：商品栏 -->
+    <s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
 
+    <!-- 营销组件：拼团 -->
+    <s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" />
+    <!-- 营销组件：秒杀 -->
+    <s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles" />
+    <!-- 营销组件：积分商城 -->
+    <s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
+    <!-- 营销组件：小程序直播 -->
+    <s-live-block v-if="type === 'mplive'" :data="data" :styles="styles" />
+    <!-- 营销组件：优惠券 -->
+    <s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles" />
+
+    <!-- 会员组件：会员卡片 -->
     <s-user-card v-if="type === 'userCard'" />
-    <s-wallet-card v-if="type === 'walletCard'" />
+    <!-- 会员组件：订单卡片 -->
     <s-order-card v-if="type === 'orderCard'" :data="data" />
-
+    <!-- 会员组件：资产卡片 -->
+    <s-wallet-card v-if="type === 'walletCard'" />
+    <!-- 会员组件：卡券卡片 -->
     <s-coupon-card v-if="type === 'couponCard'" />
-    <s-goods-card v-if="type === 'goodsCard'" :data="data" :styles="styles" />
-    <s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
-    <s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
-    <s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles"></s-coupon-block>
-    <s-live-block v-if="type === 'mplive'" :data="data" :styles="styles"></s-live-block>
-    <s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles"></s-seckill-block>
-    <s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles"></s-groupon-block>
-    <s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles"></s-richtext-block>
-    <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles"></s-hotzone-block>
-
   </view>
 </template>
 

sheep/components/s-block/s-block.vue

@@ -20,12 +20,12 @@
 
   const elBackground = computed(() => {
     if (props.styles) {
-      if (props.styles.background.type == 'color')
-        return { background: props.styles.background.bgColor };
-      if (props.styles.background.type == 'image')
+      if (props.styles.bgType === 'color')
+        return { background: props.styles.bgColor };
+      if (props.styles.bgType === 'img')
         return {
           background: `url(${sheep.$url.cdn(
-            props.styles.background.bgImage,
+            props.styles.bgImage,
           )}) no-repeat top center / 100% auto`,
         };
     }
@@ -34,15 +34,18 @@
   const elStyles = computed(() => {
     if (props.styles) {
       return {
-        marginTop: `${props.styles.marginTop}px`,
-        marginBottom: props.styles.marginBottom + 'px',
-        marginLeft: `${props.styles.marginLeft}px`,
-        marginRight: props.styles.marginRight + 'px',
-        'border-top-left-radius': props.styles.borderRadiusTop + 'px',
-        'border-top-right-radius': props.styles.borderRadiusTop + 'px',
-        'border-bottom-left-radius': props.styles.borderRadiusBottom + 'px',
-        'border-bottom-right-radius': props.styles.borderRadiusBottom + 'px',
-        padding: props.styles.padding + 'px',
+        marginTop: `${props.styles.marginTop || 0}px`,
+        marginBottom: `${props.styles.marginBottom || 0}px`,
+        marginLeft: `${props.styles.marginLeft || 0}px`,
+        marginRight: `${props.styles.marginRight || 0}px`,
+        paddingTop: `${props.styles.paddingTop || 0}px`,
+        paddingRight: `${props.styles.paddingRight || 0}px`,
+        paddingBottom: `${props.styles.paddingBottom || 0}px`,
+        paddingLeft: `${props.styles.paddingLeft || 0}px`,
+        borderTopLeftRadius: `${props.styles.borderTopLeftRadius || 0}px`,
+        borderTopRightRadius: `${props.styles.borderTopRightRadius || 0}px`,
+        borderBottomRightRadius: `${props.styles.borderBottomRightRadius || 0}px`,
+        borderBottomLeftRadius: `${props.styles.borderBottomLeftRadius || 0}px`,
         overflow: 'hidden',
       };
     }

sheep/components/s-image-banner/s-image-banner.vue

@@ -1,12 +1,13 @@
 <template>
   <su-swiper
     :list="imgList"
-    :dotStyle="dotMap[data.indicator]"
-    imageMode="widthFix"
+    :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
+    imageMode="scaleToFill"
     dotCur="bg-mask-40"
     :seizeHeight="300"
     :autoplay="data.autoplay"
-    :interval="Number(data.interval)"
+    :interval="data.interval * 1000"
+    :mode="data.type"
   />
 </template>
 
@@ -14,10 +15,7 @@
   import { computed } from 'vue';
   import sheep from '@/sheep';
 
-  const dotMap = {
-    1: 'long',
-    2: 'tag',
-  };
+  // 轮播图
   const props = defineProps({
     data: {
       type: Object,
@@ -30,11 +28,15 @@
   });
 
   const imgList = computed(() =>
-    props.data.list.map((item) => ({
-      ...item,
-      src: sheep.$url.cdn(item.src),
-      poster: sheep.$url.cdn(item.poster),
-    })),
+      props.data.items.map((item) => {
+        const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
+        return {
+          ...item,
+          type: item.type === 'img' ? 'image' : 'video',
+          src: sheep.$url.cdn(src),
+          poster: sheep.$url.cdn(item.imgUrl),
+        };
+      }),
   );
 </script>
 

sheep/components/s-image-block/s-image-block.vue

@@ -1,6 +1,6 @@
 <template>
   <view @tap="sheep.$router.go(data?.url)">
-    <su-image :src="sheep.$url.cdn(data.src)" mode="widthFix"></su-image>
+    <su-image :src="sheep.$url.cdn(data.imgUrl)" mode="widthFix"></su-image>
   </view>
 </template>
 

sheep/components/s-layout/s-layout.vue

@@ -161,8 +161,8 @@
   const bgMain = computed(() => {
     if (navbarMode.value === 'inner') {
       return {
-        background: `${props.bgStyle.color} url(${sheep.$url.cdn(
-          props.bgStyle.src,
+        background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
+          props.bgStyle.backgroundImage,
         )}) no-repeat top center / 100% auto`,
       };
     }
@@ -173,8 +173,8 @@
   const bgBody = computed(() => {
     if (navbarMode.value === 'normal') {
       return {
-        background: `${props.bgStyle.color} url(${sheep.$url.cdn(
-          props.bgStyle.src,
+        background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
+          props.bgStyle.backgroundImage,
         )}) no-repeat top center / 100% auto`,
       };
     }

sheep/components/s-menu-button/s-menu-button.vue

@@ -21,12 +21,12 @@
         :class="{ cur: state.cur == index }"
       >
         <!-- 宫格 -->
-        <view class="grid-wrap" :col="data.rowNum">
+        <view class="grid-wrap">
           <view
             v-for="(item, index) in arr"
             :key="index"
             class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
-            :style="[{ width: clWidth + 'px', height: '200rpx' }]"
+            :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
             hover-class="ss-hover-btn"
             @tap="sheep.$router.go(item.url)"
           >
@@ -34,12 +34,12 @@
               <view
                 v-if="item.badge.show"
                 class="tag-box"
-                :style="[{ background: item.badge.bgColor, color: item.badge.color }]"
+                :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
               >
                 {{ item.badge.text }}
               </view>
               <image
-                v-if="item.src"
+                v-if="item.iconUrl"
                 class="menu-icon"
                 :style="[
                   {
@@ -47,15 +47,15 @@
                     height: props.iconSize + 'rpx',
                   },
                 ]"
-                :src="sheep.$url.cdn(item.src)"
+                :src="sheep.$url.cdn(item.iconUrl)"
                 mode="aspectFill"
               ></image>
               <view
-                v-if="data.layout == 1"
+                v-if="data.layout === 'iconText'"
                 class="menu-title"
-                :style="[{ color: item.title.color }]"
+                :style="[{ color: item.titleColor }]"
               >
-                {{ item.title.text }}
+                {{ item.title }}
               </view>
             </view>
           </view>
@@ -206,15 +206,9 @@
   });
 
   // 生成数据
-  const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.col));
-  const swiperHeight = computed(() => props.data.row * (props.data.layout == 1 ? 200 : 180));
+  const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
+  const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
   const windowWidth = sheep.$platform.device.windowWidth;
-  const clWidth = computed(
-    () =>
-      (windowWidth -
-        (props.styles.marginLeft + props.styles.marginRight + props.styles.padding * 2)) /
-      props.data.col,
-  );
 
   // current 改变时会触发 change 事件
   const swiperChange = (e) => {

sheep/components/s-menu-grid/s-menu-grid.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-grid :showBorder="Boolean(data.border)" :column="data.col">
+  <uni-grid :showBorder="Boolean(data.border)" :column="data.column">
     <uni-grid-item
       v-for="(item, index) in data.list"
       :key="index"
@@ -10,19 +10,19 @@
           <view
             class="tag-box"
             v-if="item.badge.show"
-            :style="[{ background: item.badge.bgColor, color: item.badge.color }]"
+            :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
           >
             {{ item.badge.text }}
           </view>
-          <image class="menu-image" :src="sheep.$url.cdn(item.src)"></image>
+          <image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
         </view>
 
         <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
-          <view class="grid-text" :style="[{ color: item.title.color }]">
-            {{ item.title.text }}
+          <view class="grid-text" :style="[{ color: item.titleColor }]">
+            {{ item.title }}
           </view>
-          <view class="grid-tip" :style="[{ color: item.tip.color }]">
-            {{ item.tip.text }}
+          <view class="grid-tip" :style="[{ color: item.subtitleColor }]">
+            {{ item.subtitle }}
           </view>
         </view>
       </view>

sheep/components/s-menu-list/s-menu-list.vue

@@ -11,25 +11,25 @@
         <template v-slot:header>
           <view class="ss-flex ss-col-center">
             <image
-              v-if="item.src"
+              v-if="item.iconUrl"
               class="list-icon"
-              :src="sheep.$url.cdn(item.src)"
+              :src="sheep.$url.cdn(item.iconUrl)"
               mode="aspectFit"
             ></image>
             <view
               class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20"
-              :style="[{ color: item.title.color }]"
+              :style="[{ color: item.titleColor }]"
             >
-              {{ item.title.text }}
+              {{ item.title }}
             </view>
           </view>
         </template>
         <template v-slot:footer>
           <view
             class="notice-text ss-flex ss-row-center ss-col-center"
-            :style="[{ color: item.tip.color }]"
+            :style="[{ color: item.subtitleColor }]"
           >
-            {{ item.tip.text }}
+            {{ item.subtitle }}
           </view>
         </template>
       </uni-list-item>

sheep/components/s-notice-block/s-notice-block.vue

@@ -1,15 +1,16 @@
 <template>
   <view class="ss-flex ss-col-center notice-wrap">
-    <image class="icon-img" :src="sheep.$url.cdn(data.src)" mode="heightFix"></image>
+    <image class="icon-img" :src="sheep.$url.cdn(data.iconUrl)" mode="heightFix"></image>
+    <!-- todo：@owen 暂时只支持一个公告   -->
     <su-notice-bar
       style="flex: 1"
       :showIcon="false"
       scrollable
       single
-      :text="data.title.text"
+      :text="data.contents[0].text"
       :speed="50"
-      :color="data.title.color"
-      @tap="sheep.$router.go(data.url)"
+      :color="data.textColor"
+      @tap="sheep.$router.go(data.contents[0].url)"
     ></su-notice-bar>
   </view>
 </template>

sheep/components/s-search-block/s-search-block.vue

@@ -29,24 +29,23 @@
       v-model="state.searchVal"
     />
     <view class="keyword-link ss-flex">
-      <view v-for="(item, index) in data.keywords" :key="index">
+      <view v-for="(item, index) in data.hotKeywords" :key="index">
         <view
           class="ss-m-r-16"
-          :style="[{ color: item.color }]"
-          @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item.text })"
-          >{{ item.text }}</view
+          :style="[{ color: data.textColor }]"
+          @tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item })"
+          >{{ item }}</view
         >
       </view>
     </view>
-
-    <view v-if="data.keywords && data.keywords.length && navbar" class="ss-flex">
+    <view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
       <button
         class="ss-reset-button keyword-btn"
-        v-for="(item, index) in data.keywords"
+        v-for="(item, index) in data.hotKeywords"
         :key="index"
-        :style="[{ color: item.color, marginRight: '10rpx' }]"
+        :style="[{ color: data.textColor, marginRight: '10rpx' }]"
       >
-        {{ item.text }}
+        {{ item }}
       </button>
     </view>
   </view>

sheep/components/s-tabbar/s-tabbar.vue

@@ -1,29 +1,29 @@
 <template>
-  <view class="u-page__item" v-if="tabbar?.list.length > 0">
+  <view class="u-page__item" v-if="tabbar?.items.length > 0">
     <su-tabbar
       :value="path"
       :fixed="true"
       :placeholder="true"
       :safeAreaInsetBottom="true"
-      :inactiveColor="tabbar.inactiveColor"
-      :activeColor="tabbar.activeColor"
+      :inactiveColor="tabbar.style.color"
+      :activeColor="tabbar.style.activeColor"
       :midTabBar="tabbar.mode === 2"
       :customStyle="tabbarStyle"
     >
       <su-tabbar-item
-        v-for="(item, index) in tabbar.list"
+        v-for="(item, index) in tabbar.items"
         :key="item.text"
         :text="item.text"
         :name="item.url"
         :isCenter="getTabbarCenter(index)"
-        :centerImage="sheep.$url.cdn(item.inactiveIcon)"
+        :centerImage="sheep.$url.cdn(item.iconUrl)"
         @tap="sheep.$router.go(item.url)"
       >
         <template v-slot:active-icon>
-          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIcon)"></image>
+          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
         </template>
         <template v-slot:inactive-icon>
-          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.inactiveIcon)"></image>
+          <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
         </template>
       </su-tabbar-item>
     </su-tabbar>
@@ -39,20 +39,22 @@
   });
 
   const tabbarStyle = computed(() => {
-    const backgroundStyle = tabbar.value.background;
-    if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
-    if (backgroundStyle.type == 'image')
+    const backgroundStyle = tabbar.value.style;
+    if (backgroundStyle.bgType === 'color') {
+      return { background: backgroundStyle.bgColor };
+    }
+    if (backgroundStyle.bgType === 'img')
       return {
         background: `url(${sheep.$url.cdn(
-          backgroundStyle.bgImage,
+          backgroundStyle.bgImg,
         )}) no-repeat top center / 100% auto`,
       };
   });
 
   const getTabbarCenter = (index) => {
     if (unref(tabbar).mode !== 2) return false;
-    return unref(tabbar).list % 2 > 0
-      ? Math.ceil(unref(tabbar).list.length / 2) === index + 1
+    return unref(tabbar).items % 2 > 0
+      ? Math.ceil(unref(tabbar).items.length / 2) === index + 1
       : false;
   };
 

sheep/components/s-video-block/s-video-block.vue

@@ -4,8 +4,9 @@
     class="sss"
     :uid="guid()"
     :src="sheep.$url.cdn(data.videoUrl)"
-    :poster="sheep.$url.cdn(data.src)"
+    :poster="sheep.$url.cdn(data.posterUrl)"
     :height="styles.height * 2"
+    :autoplay="data.autoplay"
   ></su-video>
 </template>
 

sheep/store/app.js

@@ -1,4 +1,5 @@
 import appApi from '@/sheep/api/app';
+import diyTemplateApi from '@/sheep/api/promotion/diy/template';
 import { defineStore } from 'pinia';
 import $platform from '@/sheep/platform';
 import $router from '@/sheep/router';
@@ -71,6 +72,8 @@ const app = defineStore({
         }
         this.chat = res.data.chat;
 
+        await adaptTemplate(this.template);
+
         // 加载主题
         const sysStore = sys();
         sysStore.setTheme();
@@ -96,4 +99,18 @@ const app = defineStore({
   },
 });
 
+// todo: @owen 先做数据适配，后期重构
+const adaptTemplate = async (appTemplate) => {
+  const diyTemplate = await diyTemplateApi.getUsedDiyTemplate();
+  const tabBar = diyTemplate?.data?.property?.tabBar;
+  if (tabBar) {
+    appTemplate.basic.tabbar = tabBar
+    if (tabBar?.theme) {
+      appTemplate.basic.theme = tabBar?.theme;
+    }
+  }
+  appTemplate.home = diyTemplate?.data?.home;
+  // appTemplate.user = diyTemplate?.data?.user;
+}
+
 export default app;

sheep/ui/su-tabbar-item/su-tabbar-item.vue

@@ -8,7 +8,7 @@
         <image
           v-if="icon"
           :name="icon"
-          :color="isActive ? parentData.activeColor : parentData.inactiveColor"
+          :color="isActive ? parentData.activeColor : parentData.color"
           :size="20"
         ></image>
         <block v-else>
@@ -29,7 +29,7 @@
         <text
           class="u-tabbar-item__text"
           :style="{
-            color: isActive ? parentData.activeColor : parentData.inactiveColor,
+            color: isActive ? parentData.activeColor : parentData.color,
           }"
         >
           {{ text }}
@@ -120,7 +120,7 @@
         parentData: {
           value: null,
           activeColor: '',
-          inactiveColor: '',
+          color: '',
         },
         parent: {},
       };

sheep/ui/su-video/su-video.vue

@@ -18,6 +18,7 @@
       @pause="pause"
       @ended="end"
       :poster="poster"
+      :autoplay="autoplay"
     >
       <!-- #ifdef APP-PLUS -->
       <cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
@@ -90,6 +91,10 @@
       type: String,
       default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
     },
+    autoplay: {
+      type: Boolean,
+      default: false,
+    }
   });
 
   // 事件