fix(tcb-shop): fix cloudbase init guide

miniprogram/tcb-shop/components/cloud-template-checker/index.js

@@ -0,0 +1,33 @@
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false,
+    },
+    text: {
+      type: String,
+      value: ""
+    },
+    url: {
+      type: String,
+      value: ""
+    }
+  },
+
+  methods: {
+    check() {
+      this.triggerEvent("check");
+    },
+    copy() {
+      wx.setClipboardData({
+        data: this.data.url,
+      });
+    },
+  },
+
+  lifetimes: {
+    attached: function () {
+      this.check();
+    },
+  },
+});

miniprogram/tcb-shop/components/cloud-template-dialog/index.json → miniprogram/tcb-shop/components/cloud-template-checker/index.json

@@ -2,8 +2,7 @@
   "component": true,
   "styleIsolation": "shared",
   "usingComponents": {
-    "t-dialog": "tdesign-miniprogram/dialog/dialog",
     "t-button": "tdesign-miniprogram/button/button",
-    "t-radio": "tdesign-miniprogram/radio/radio"
+    "t-icon": "tdesign-miniprogram/icon/icon"
   }
 }

miniprogram/tcb-shop/components/cloud-template-checker/index.wxml

@@ -0,0 +1,21 @@
+<view wx:if="{{show}}" class="cloud-checker-container">
+  <view class="card">
+    <view class="icon-text">
+      <t-icon name="error-circle" size="40rpx" />
+      <view>加载数据失败</view>
+    </view>
+    <view class="text">
+      {{text}}
+    </view>
+
+    <text class="url">{{url}}</text>
+    <view class="btns">
+      <t-button theme="light" bind:tap="copy">复制链接</t-button>
+      <t-button theme="primary" bind:tap="check">再试一次</t-button>
+    </view>
+
+  </view>
+</view>
+<view wx:else>
+  <slot />
+</view>

miniprogram/tcb-shop/components/cloud-template-checker/index.wxss

@@ -0,0 +1,37 @@
+.cloud-checker-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cloud-checker-container .card {
+  padding: 60rpx;
+}
+
+.cloud-checker-container .text {
+  text-align: center;
+  margin: 20rpx;
+}
+.cloud-checker-container .url {
+  word-break: break-all;
+  font-size: small;
+  color: #3f3f3f;
+}
+
+.cloud-checker-container .icon-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cloud-checker-container .t-icon {
+  color: red;
+  margin-right: 5rpx;
+}
+
+.cloud-checker-container .btns {
+  margin-top: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

miniprogram/tcb-shop/pages/home/home.js

@@ -17,6 +17,7 @@ Page({
     interval: 5000,
     navigation: { type: 'dots' },
     swiperImageProps: { mode: 'scaleToFill' },
+    cloudCheckerShow: false
   },
 
   goodListPagination: {
@@ -128,4 +129,14 @@ Page({
       url: `/pages/promotion-detail/index?promotion_id=${promotionID}`,
     });
   },
+
+  async onCloudCheck() {
+    try {
+      await getHomeSwiper();
+      this.setData({ cloudCheckerShow: false })
+    } catch (e) {
+      console.log(e);
+      this.setData({ cloudCheckerShow: true })
+    }
+  },
 });

miniprogram/tcb-shop/pages/home/home.json

@@ -15,6 +15,6 @@
     "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
     "goods-list": "/components/goods-list/index",
     "load-more": "/components/load-more/index",
-    "cloud-template-dialog": "/components/cloud-template-dialog/index"
+    "cloud-template-checker": "/components/cloud-template-checker/index"
   }
 }

miniprogram/tcb-shop/pages/home/home.wxml

@@ -1,19 +1,20 @@
-<view style="text-align: center; color: #b9b9b9" wx:if="{{pageLoading}}">
-  <t-loading theme="circular" size="40rpx" text="加载中..." inherit-color />
-</view>
-<view class="home-page-header">
-  <view class="search" bind:tap="navToSearchPage">
-    <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" leftIcon="" disabled>
-      <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
-    </t-search>
+<cloud-template-checker bindcheck="onCloudCheck" show="{{cloudCheckerShow}}" text="原因可能是模板未完成初始化，请参考 README.md 或打开下方使用文档。" url="https://tcb.cloud.tencent.com/cloud-admin#/cloud-template/detail?tplId=tpl-1sm7qkwQcbBUpZ&appName=electronic-business">
+  <view style="text-align: center; color: #b9b9b9" wx:if="{{pageLoading}}">
+    <t-loading theme="circular" size="40rpx" text="加载中..." inherit-color />
   </view>
-  <view class="swiper-wrap">
-    <t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" list="{{imgSrcs}}" />
+  <view class="home-page-header">
+    <view class="search" bind:tap="navToSearchPage">
+      <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" leftIcon="" disabled>
+        <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
+      </t-search>
+    </view>
+    <view class="swiper-wrap">
+      <t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" list="{{imgSrcs}}" />
+    </view>
   </view>
-</view>
-<view class="home-page-container">
-  <goods-list wr-class="goods-list-container" goodsList="{{goodsList}}" bind:click="goodListClickHandle" bind:addcart="goodListAddCartHandle" />
-  <load-more list-is-empty="{{!goodsList.length}}" status="{{goodsListLoadStatus}}" bind:retry="onReTry" />
-  <t-toast id="t-toast" />
-  <cloud-template-dialog url="https://tcb.cloud.tencent.com/cloud-admin#/cloud-template/detail?tplId=tpl-1sm7qkwQcbBUpZ&appName=electronic-business" />
-</view>
+  <view class="home-page-container">
+    <goods-list wr-class="goods-list-container" goodsList="{{goodsList}}" bind:click="goodListClickHandle" bind:addcart="goodListAddCartHandle" />
+    <load-more list-is-empty="{{!goodsList.length}}" status="{{goodsListLoadStatus}}" bind:retry="onReTry" />
+    <t-toast id="t-toast" />
+  </view>
+</cloud-template-checker>