bxs-tools-ui 3.1.1-alpha.2 → 3.1.2

package/lib/index.js

@@ -47856,9 +47856,18 @@
           });
         }
         return options;
+      },
+      actionTypeLength: function actionTypeLength() {
+        return [this.shareOptions, this.actionOptions].filter(function (e) {
+          return e.length;
+        }).length;
+      }
+    },
+    created: function created() {
+      if (this.explainData) {
+        this.onClickCopy(this.explainData);
       }
     },
-    created: function created() {},
     mounted: function mounted() {},
     methods: {
       textOverflowEllipsis: textOverflowEllipsis,
@@ -47876,8 +47885,8 @@
       onClickExpire: function onClickExpire(o) {
         this.$emit('expire', o);
       },
-      onClickExplain: function onClickExplain(item) {
-        if (item.copy) {
+      onClickCopy: function onClickCopy(item) {
+        if (item.text && item.copy) {
           appBridge.copyString(item.text);
         }
       },
@@ -47948,7 +47957,23 @@
           $event.stopPropagation();
         }
       }
-    }, [_vm.expireData ? _c('section', {
+    }, [_vm.explainData && (_vm.explainData.title || _vm.explainData.text) ? _c('section', {
+      staticClass: "bxt-explain"
+    }, [_vm.explainData.title ? _c('div', {
+      staticClass: "bxt-explain-text bxt-bottom-border"
+    }, [_vm._v("\n          " + _vm._s(_vm.explainData.title) + "\n        ")]) : _vm._e(), _vm.explainData.text ? _c('div', {
+      staticClass: "bxt-explain-text bxt-bottom-border",
+      class: [_vm.explainData.copy ? 'bxt-explain-text--copy' : ''],
+      on: {
+        "click": function click($event) {
+          return _vm.onClickCopy(_vm.explainData);
+        }
+      }
+    }, [_c('div', {
+      staticClass: "bxt-explain-text-wrapper"
+    }, [_c('div', {
+      staticClass: "bxt-explain-text-content"
+    }, [_vm._v("\n              " + _vm._s(_vm.explainData.text) + "\n            ")])])]) : _vm._e()]) : _vm._e(), _vm.expireData ? _c('section', {
       staticClass: "bxt-expire bxt-bottom-border"
     }, [_c('div', {
       staticClass: "bxt-title"
@@ -47986,21 +48011,11 @@
           }
         }
       }, [_vm._v(_vm._s(o.name))]);
-    }), 1)], 1) : _vm._e(), _vm.explainData && _vm.explainData.text ? _c('section', {
-      staticClass: "bxt-explain bxt-bottom-border",
-      class: [_vm.explainData.copy ? 'copy' : '']
-    }, [_c('div', {
-      staticClass: "bxt-explain-text",
-      on: {
-        "click": function click($event) {
-          return _vm.onClickExplain(_vm.explainData);
-        }
-      }
-    }, [_vm._v("\n          " + _vm._s(_vm.explainData.text) + "\n        ")])]) : _vm._e(), _vm._t("header"), _vm.shareOptions.length ? _c('section', {
+    }), 1)], 1) : _vm._e(), _vm._t("header"), _vm.shareOptions.length ? _c('section', {
       staticClass: "bxt-share bxt-bottom-border"
     }, [_c('div', {
       staticClass: "bxt-share-wrapper",
-      class: [_vm.shareOptions.length > 4 ? 'more' : '']
+      class: [_vm.shareOptions.length > 4 || _vm.actionTypeLength > 1 ? 'more' : '']
     }, _vm._l(_vm.shareOptions, function (o) {
       return _c('figure', {
         key: o.action,
@@ -48021,7 +48036,7 @@
       staticClass: "bxt-share bxt-bottom-border"
     }, [_c('div', {
       staticClass: "bxt-share-wrapper",
-      class: [_vm.actionOptions.length > 4 ? 'more' : '']
+      class: [_vm.actionOptions.length > 4 || _vm.actionTypeLength > 1 ? 'more' : '']
     }, _vm._l(_vm.actionOptions, function (o) {
       return _c('figure', {
         key: o.action,
@@ -48094,7 +48109,7 @@
     install(window.Vue);
   }
   var index = {
-    version: '3.1.1-alpha.2',
+    version: '3.1.2',
     install: install
   };
 

package/lib/share-sheet/index.css

@@ -1 +1 @@
-*{margin:0;padding:0}body{color:#333}dl,ul{list-style:none}img{max-width:100%}a{color:#333;display:block;text-decoration:none}em{font-style:normal}article,aside,footer,header,nav,section{display:block}.bxt-share-sheet{background-color:transparent;color:#333}.bxt-share-sheet .bxt-share-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-box-pack:end;-moz-box-pack:end;-ms-flex-pack:end;bottom:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-justify-content:flex-end;justify-content:flex-end;left:0;overflow:hidden;position:absolute;width:100%}.bxt-share-sheet .bxt-share-image{padding:30px 40px}.bxt-share-sheet .bxt-share-image img{width:100%}.bxt-share-sheet .bxt-share-content{background:#fff}.bxt-share-sheet .bxt-expire{padding:15px 15px 15px 21px}.bxt-share-sheet .bxt-expire .bxt-title{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.bxt-share-sheet .bxt-expire .bxt-title .bxt-tx{font-size:14px;font-weight:700;font-weight:500;line-height:17px}.bxt-share-sheet .bxt-expire .bxt-title .bxt-description{color:#666;font-size:13px;line-height:16px;margin-left:18px}.bxt-share-sheet .bxt-expire .bxt-title .bxt-description .van-icon{color:#b5b5b5;font-size:15px;vertical-align:middle}.bxt-share-sheet .bxt-expire .bxt-title .bxt-description span{margin-left:3px;vertical-align:middle}.bxt-share-sheet .bxt-expire .van-radio-group{margin-top:6px}.bxt-share-sheet .bxt-expire .van-radio-group .van-radio{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 32%;-ms-flex:0 0 32%;flex:0 0 32%;margin-right:0;margin-top:12px}.bxt-share-sheet .bxt-expire .van-radio-group .van-radio .van-radio__icon{color:#0a64fe;font-size:15px;line-height:20px;vertical-align:middle}.bxt-share-sheet .bxt-expire .van-radio-group .van-radio .van-radio__label{margin-left:6px;vertical-align:middle}.bxt-share-sheet .bxt-explain{color:#666;font-size:13px;line-height:19px;padding:15px 21px}.bxt-share-sheet .bxt-explain.copy{padding:12px 15px}.bxt-share-sheet .bxt-explain.copy .bxt-explain-text{background:#f5f5f5;border-radius:6px;padding:12px 15px}.bxt-share-sheet .bxt-share .bxt-share-wrapper{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;overflow:auto;padding:20px 15px}.bxt-share-sheet .bxt-share .bxt-share-wrapper::-webkit-scrollbar{display:none}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure,.bxt-share-sheet .bxt-share .bxt-share-wrapper figure .bxt-empty-image{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure .bxt-empty-image{background:#f3f7f9;border-radius:50px;height:50px;overflow:hidden;width:50px}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure .bxt-empty-image img{display:block;margin:0 auto;width:100%}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure figcaption{color:#666;font-size:12px;height:15px;line-height:15px;margin-top:5px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}.bxt-share-sheet .bxt-share .bxt-share-wrapper.more{-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start}.bxt-share-sheet .bxt-share .bxt-share-wrapper.more figure{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 23%;-ms-flex:0 0 23%;flex:0 0 23%}.bxt-share-sheet .bxt-fooer:after{content:"";display:block;height:constant(safe-area-inset-bottom);height:env(safe-area-inset-bottom)}.bxt-share-sheet .bxt-fooer{font-size:15px;line-height:18px;padding:16px 15px;text-align:center}.bxt-share-sheet .bxt-bottom-border{overflow:hidden;position:relative}.bxt-share-sheet .bxt-bottom-border:before{border-bottom:1px solid #e5e5e5;bottom:0;content:"";left:15px;position:absolute;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:left center;transform-origin:left center;width:200%}
+*{margin:0;padding:0}body{color:#333}dl,ul{list-style:none}img{max-width:100%}a{color:#333;display:block;text-decoration:none}em{font-style:normal}article,aside,footer,header,nav,section{display:block}.bxt-share-sheet{background-color:transparent;color:#333}.bxt-share-sheet .bxt-share-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-box-pack:end;-moz-box-pack:end;-ms-flex-pack:end;bottom:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;-webkit-justify-content:flex-end;justify-content:flex-end;left:0;overflow:hidden;position:absolute;width:100%}.bxt-share-sheet .bxt-share-image{padding:30px 40px}.bxt-share-sheet .bxt-share-image img{width:100%}.bxt-share-sheet .bxt-share-content{background:#fff}.bxt-share-sheet .bxt-expire{padding:15px 15px 15px 21px}.bxt-share-sheet .bxt-expire .bxt-title{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.bxt-share-sheet .bxt-expire .bxt-title .bxt-tx{font-size:14px;font-weight:700;font-weight:500;line-height:17px}.bxt-share-sheet .bxt-expire .bxt-title .bxt-description{color:#666;font-size:13px;line-height:16px;margin-left:18px}.bxt-share-sheet .bxt-expire .bxt-title .bxt-description .van-icon{color:#b5b5b5;font-size:15px;vertical-align:middle}.bxt-share-sheet .bxt-expire .bxt-title .bxt-description span{margin-left:3px;vertical-align:middle}.bxt-share-sheet .bxt-expire .van-radio-group{margin-top:6px}.bxt-share-sheet .bxt-expire .van-radio-group .van-radio{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 32%;-ms-flex:0 0 32%;flex:0 0 32%;margin-right:0;margin-top:12px}.bxt-share-sheet .bxt-expire .van-radio-group .van-radio .van-radio__icon{color:#0a64fe;font-size:15px;line-height:20px;vertical-align:middle}.bxt-share-sheet .bxt-expire .van-radio-group .van-radio .van-radio__label{margin-left:6px;vertical-align:middle}.bxt-share-sheet .bxt-explain{color:#666;font-size:13px;line-height:19px}.bxt-share-sheet .bxt-explain-title{padding:15px 21px}.bxt-share-sheet .bxt-explain-text{padding:12px 15px}.bxt-share-sheet .bxt-explain-text .bxt-explain-text-content{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;width:100%}.bxt-share-sheet .bxt-explain-text--copy{padding:12px 15px}.bxt-share-sheet .bxt-explain-text--copy .bxt-explain-text-wrapper{background:#f5f5f5;border-radius:6px;padding:12px 15px}.bxt-share-sheet .bxt-share .bxt-share-wrapper{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;overflow:auto;padding:20px 15px}.bxt-share-sheet .bxt-share .bxt-share-wrapper::-webkit-scrollbar{display:none}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure,.bxt-share-sheet .bxt-share .bxt-share-wrapper figure .bxt-empty-image{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure .bxt-empty-image{background:#f3f7f9;border-radius:50px;height:50px;overflow:hidden;width:50px}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure .bxt-empty-image img{display:block;margin:0 auto;width:100%}.bxt-share-sheet .bxt-share .bxt-share-wrapper figure figcaption{color:#666;font-size:12px;height:15px;line-height:15px;margin-top:5px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}.bxt-share-sheet .bxt-share .bxt-share-wrapper.more{-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start}.bxt-share-sheet .bxt-share .bxt-share-wrapper.more figure{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 23%;-ms-flex:0 0 23%;flex:0 0 23%}.bxt-share-sheet .bxt-fooer:after{content:"";display:block;height:constant(safe-area-inset-bottom);height:env(safe-area-inset-bottom)}.bxt-share-sheet .bxt-fooer{font-size:15px;line-height:18px;padding:16px 15px;text-align:center}.bxt-share-sheet .bxt-bottom-border{overflow:hidden;position:relative}.bxt-share-sheet .bxt-bottom-border:before{border-bottom:1px solid #e5e5e5;bottom:0;content:"";left:15px;position:absolute;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:left center;transform-origin:left center;width:200%}

package/lib/share-sheet/index.js

@@ -8762,9 +8762,18 @@
           });
         }
         return options;
+      },
+      actionTypeLength: function actionTypeLength() {
+        return [this.shareOptions, this.actionOptions].filter(function (e) {
+          return e.length;
+        }).length;
+      }
+    },
+    created: function created() {
+      if (this.explainData) {
+        this.onClickCopy(this.explainData);
       }
     },
-    created: function created() {},
     mounted: function mounted() {},
     methods: {
       textOverflowEllipsis: textOverflowEllipsis,
@@ -8782,8 +8791,8 @@
       onClickExpire: function onClickExpire(o) {
         this.$emit('expire', o);
       },
-      onClickExplain: function onClickExplain(item) {
-        if (item.copy) {
+      onClickCopy: function onClickCopy(item) {
+        if (item.text && item.copy) {
           appBridge.copyString(item.text);
         }
       },
@@ -8866,7 +8875,23 @@
           $event.stopPropagation();
         }
       }
-    }, [_vm.expireData ? _c('section', {
+    }, [_vm.explainData && (_vm.explainData.title || _vm.explainData.text) ? _c('section', {
+      staticClass: "bxt-explain"
+    }, [_vm.explainData.title ? _c('div', {
+      staticClass: "bxt-explain-text bxt-bottom-border"
+    }, [_vm._v("\n          " + _vm._s(_vm.explainData.title) + "\n        ")]) : _vm._e(), _vm.explainData.text ? _c('div', {
+      staticClass: "bxt-explain-text bxt-bottom-border",
+      class: [_vm.explainData.copy ? 'bxt-explain-text--copy' : ''],
+      on: {
+        "click": function click($event) {
+          return _vm.onClickCopy(_vm.explainData);
+        }
+      }
+    }, [_c('div', {
+      staticClass: "bxt-explain-text-wrapper"
+    }, [_c('div', {
+      staticClass: "bxt-explain-text-content"
+    }, [_vm._v("\n              " + _vm._s(_vm.explainData.text) + "\n            ")])])]) : _vm._e()]) : _vm._e(), _vm.expireData ? _c('section', {
       staticClass: "bxt-expire bxt-bottom-border"
     }, [_c('div', {
       staticClass: "bxt-title"
@@ -8904,21 +8929,11 @@
           }
         }
       }, [_vm._v(_vm._s(o.name))]);
-    }), 1)], 1) : _vm._e(), _vm.explainData && _vm.explainData.text ? _c('section', {
-      staticClass: "bxt-explain bxt-bottom-border",
-      class: [_vm.explainData.copy ? 'copy' : '']
-    }, [_c('div', {
-      staticClass: "bxt-explain-text",
-      on: {
-        "click": function click($event) {
-          return _vm.onClickExplain(_vm.explainData);
-        }
-      }
-    }, [_vm._v("\n          " + _vm._s(_vm.explainData.text) + "\n        ")])]) : _vm._e(), _vm._t("header"), _vm.shareOptions.length ? _c('section', {
+    }), 1)], 1) : _vm._e(), _vm._t("header"), _vm.shareOptions.length ? _c('section', {
       staticClass: "bxt-share bxt-bottom-border"
     }, [_c('div', {
       staticClass: "bxt-share-wrapper",
-      class: [_vm.shareOptions.length > 4 ? 'more' : '']
+      class: [_vm.shareOptions.length > 4 || _vm.actionTypeLength > 1 ? 'more' : '']
     }, _vm._l(_vm.shareOptions, function (o) {
       return _c('figure', {
         key: o.action,
@@ -8939,7 +8954,7 @@
       staticClass: "bxt-share bxt-bottom-border"
     }, [_c('div', {
       staticClass: "bxt-share-wrapper",
-      class: [_vm.actionOptions.length > 4 ? 'more' : '']
+      class: [_vm.actionOptions.length > 4 || _vm.actionTypeLength > 1 ? 'more' : '']
     }, _vm._l(_vm.actionOptions, function (o) {
       return _c('figure', {
         key: o.action,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bxs-tools-ui",
-  "version": "3.1.1-alpha.2",
+  "version": "3.1.2",
   "description": "微易前端业务组件",
   "main": "lib/index.js",
   "module": "es/index.js",

package/packages/index.ts

@@ -50,6 +50,6 @@ export {
 }
 
 export default {
-  version: '3.1.1-alpha.2',
+  version: '3.1.2',
   install
 }

package/packages/share-sheet/demo/index.vue

@@ -12,8 +12,8 @@
       @action="onAction"
     >
       <template v-slot:header>
-        <h4 class="bxt-bottom-border" style="height: 15px; padding: 15px;">
-          这是 slot 内容
+        <h4 class="bxt-bottom-border" style="padding: 15px;">
+          <van-checkbox v-model="checked">自定义 slot</van-checkbox>
         </h4>
       </template>
     </ShareSheet>
@@ -39,14 +39,17 @@ export default {
   data() {
     return {
       visible: true,
+      checked: false,
       introduceImage: 'https://media.winbaoxian.com/assets-uploader/%E7%BC%96%E7%BB%84%202%402x-1774348527831.png',
       expireData: {
         value: 'NEVER',
         urlAfterExpire: 'https://pbf.winbaoxian.cn/planBook/projectGroup/feedback/index.html'
       },
       explainData: {
-        text: '分享后推广费及奖励将不可见，请放心分享，用户投保成功，推广费及奖励可拿。',
-        copy: false
+        title: '分享说明',
+        text:
+          '分享后推广费及奖励将不可见，请放心分享，用户投保成功，推广费及奖励可拿。分享后推广费及奖励将不可见，请放心分享，用户投保成功，推广费及奖励可拿。分享后推广费及奖励将不可见，请放心分享，用户投保成功，推广费及奖励可拿。',
+        copy: true
       },
       shareActions: [
         {
@@ -58,24 +61,24 @@ export default {
         {
           action: 'wechat_timeline',
           ...shareInfo()
-        },
-        {
-          action: 'qq_friends',
-          ...shareInfo()
-        },
-        {
-          action: 'shareMiniProgram',
-          webPageUrl: 'https://www.winbaoxian.com/', // 兼容低版本的网页链接
-          userName: 'gh_db166d39960f', // 小程序原始id
-          path: '/pages/result/index?uuid=e21d73a0c20d4900a765237a4907a82b&theme=theme_pbhzczdlw&t=1', // 小程序页面路径
-          title: '买保险优选服务', // 小程序消息title
-          description: '小程序消息描述信息', // 小程序消息desc
-          imageUrl: 'https://img.winbaoxian.com/static/app-zx-rule-pdf/allrule/20250325182134792.png' // 小程序消息封面图片，小于128k
-        },
-        {
-          action: 'system_share',
-          ...shareInfo()
         }
+        // {
+        //   action: 'qq_friends',
+        //   ...shareInfo()
+        // },
+        // {
+        //   action: 'shareMiniProgram',
+        //   webPageUrl: 'https://www.winbaoxian.com/', // 兼容低版本的网页链接
+        //   userName: 'gh_db166d39960f', // 小程序原始id
+        //   path: '/pages/result/index?uuid=e21d73a0c20d4900a765237a4907a82b&theme=theme_pbhzczdlw&t=1', // 小程序页面路径
+        //   title: '买保险优选服务', // 小程序消息title
+        //   description: '小程序消息描述信息', // 小程序消息desc
+        //   imageUrl: 'https://img.winbaoxian.com/static/app-zx-rule-pdf/allrule/20250325182134792.png' // 小程序消息封面图片，小于128k
+        // },
+        // {
+        //   action: 'system_share',
+        //   ...shareInfo()
+        // }
       ],
       featureActions: [
         {

package/packages/share-sheet/index.css

@@ -86,16 +86,33 @@
 	}
 
 	& .bxt-explain {
-		padding: 15px 21px;
 		font-size: 13px;
 		line-height: 19px;
 		color: #666;
 	}
 
-	& .bxt-explain.copy {
+
+	& .bxt-explain-title {
+		padding: 15px 21px;
+	}
+
+	& .bxt-explain-text {
+		padding: 12px 15px;
+
+		& .bxt-explain-text-content {
+			width: 100%;
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	& .bxt-explain-text--copy {
 		padding: 12px 15px;
 
-		& .bxt-explain-text {
+		& .bxt-explain-text-wrapper {
 			padding: 12px 15px;
 			background: #f5f5f5;
 			border-radius: 6px;

package/packages/share-sheet/index.vue

@@ -5,6 +5,23 @@
         <img :src="introduceImage" alt="introduce" />
       </section>
       <section class="bxt-share-content" @click.stop>
+        <section v-if="explainData && (explainData.title || explainData.text)" class="bxt-explain">
+          <div v-if="explainData.title" class="bxt-explain-text bxt-bottom-border">
+            {{ explainData.title }}
+          </div>
+          <div
+            v-if="explainData.text"
+            class="bxt-explain-text bxt-bottom-border"
+            :class="[explainData.copy ? 'bxt-explain-text--copy' : '']"
+            @click="onClickCopy(explainData)"
+          >
+            <div class="bxt-explain-text-wrapper">
+              <div class="bxt-explain-text-content">
+                {{ explainData.text }}
+              </div>
+            </div>
+          </div>
+        </section>
         <section v-if="expireData" class="bxt-expire bxt-bottom-border">
           <div class="bxt-title">
             <div class="bxt-tx">分享有效期</div>
@@ -17,14 +34,9 @@
             <van-radio v-for="o in expireOptions" :key="o.value" :name="o.value" @click="onClickExpire(o)">{{ o.name }}</van-radio>
           </van-radio-group>
         </section>
-        <section v-if="explainData && explainData.text" class="bxt-explain bxt-bottom-border" :class="[explainData.copy ? 'copy' : '']">
-          <div class="bxt-explain-text" @click="onClickExplain(explainData)">
-            {{ explainData.text }}
-          </div>
-        </section>
         <slot name="header"></slot>
         <section v-if="shareOptions.length" class="bxt-share bxt-bottom-border">
-          <div class="bxt-share-wrapper" :class="[shareOptions.length > 4 ? 'more' : '']">
+          <div class="bxt-share-wrapper" :class="[shareOptions.length > 4 || actionTypeLength > 1 ? 'more' : '']">
             <figure v-for="o in shareOptions" :key="o.action" @click="onClickShare(o)">
               <div class="bxt-empty-image">
                 <img v-if="o.actionIcon" :src="o.actionIcon" alt="icon" />
@@ -34,7 +46,7 @@
           </div>
         </section>
         <section v-if="actionOptions.length" class="bxt-share bxt-bottom-border">
-          <div class="bxt-share-wrapper" :class="[actionOptions.length > 4 ? 'more' : '']">
+          <div class="bxt-share-wrapper" :class="[actionOptions.length > 4 || actionTypeLength > 1 ? 'more' : '']">
             <figure v-for="o in actionOptions" :key="o.action" @click="onClickAction(o)">
               <div class="bxt-empty-image">
                 <img v-if="o.actionIcon" :src="o.actionIcon" alt="icon" />
@@ -120,9 +132,16 @@ export default {
         });
       }
       return options;
+    },
+    actionTypeLength() {
+      return [this.shareOptions, this.actionOptions].filter(e => e.length).length;
+    }
+  },
+  created() {
+    if (this.explainData) {
+      this.onClickCopy(this.explainData);
     }
   },
-  created() {},
   mounted() {},
   methods: {
     textOverflowEllipsis,
@@ -140,8 +159,8 @@ export default {
     onClickExpire(o) {
       this.$emit('expire', o);
     },
-    onClickExplain(item) {
-      if (item.copy) {
+    onClickCopy(item) {
+      if (item.text && item.copy) {
         appBridge.copyString(item.text);
       }
     },