分享页面&&处理埋点

src/app.config.js

@@ -14,7 +14,8 @@ export default defineAppConfig({
         "seckillIndex/index",
         "searchList/index",
         "highCommission/index",
-        "activity/index"
+        "activity/index",
+        "sharePage/index"
       ]
     },
     {

src/common/track.js

@@ -0,0 +1,25 @@
+import Taro from "@tarojs/taro";
+import { formatDate } from "./time";
+import { addLog } from "../service/index";
+import { isDebounce } from "./debounce";
+// 统计埋点
+export const handleLog = (data) => {
+  if (!isDebounce(500)) return; // 如果在500ms内重复触发，直接返回
+  const dayid = formatDate(new Date(), "YYYY-MM-DD");
+  const userId = Taro.getStorageSync("loginInfo")?.id || 0;
+  const ext = data.shareUserId ? JSON.stringify({ share_users_id: data.shareUserId }) : '';
+  const event_type = data.event_type;
+  const event_type_title = data.event_type_title;
+  const goods_id = data.goods_id || 0;
+  const params = {
+    dayid,
+    users_id:userId,
+    goods_id,
+    event_type,
+    event_type_title,
+    ext,
+  };
+  addLog(params);
+};
+
+

src/components/Modal/index.jsx

@@ -1,15 +1,12 @@
 import { AtModal, AtModalContent } from "taro-ui";
 import { View, Image, Text } from "@tarojs/components";
-import { addLog } from "../../service";
-import { formatDate } from "../../common/time";
-import { isDebounce } from "../../common/debounce";
+import { handleLog } from "../../common/track";
 import "./index.less";
 import Taro from "@tarojs/taro";
 export default function Modal(props) {
   const { productPromotion, isOpened, title, linkText, id, shareUserId,isSeckill } =
     props;
   const handleCopyLink = () => {
-    if (!isDebounce(500)) return; // 如果在300ms内重复触发，直接返回
     Taro.setClipboardData({
       data: productPromotion.short_tpwd,
     }).then(() => {
@@ -18,24 +15,11 @@ export default function Modal(props) {
         icon: "success",
       });
       if (isSeckill) {
-        const dayid = formatDate(new Date(), "YYYY-MM-DD");
-        let userId = "";
-        if (Taro.getStorageSync("loginInfo")) {
-          userId = Taro.getStorageSync("loginInfo").id;
-        }
-        let ext = "";
-        if (shareUserId) {
-          ext = JSON.stringify({
-            share_users_id: shareUserId,
-          });
-        }
-        addLog({
+        handleLog({
+          shareUserId:shareUserId,
           event_type: "buy_product_link",
           event_type_title: "点击购买",
           goods_id: Number(id),
-          ext,
-          dayid,
-          users_id: userId||0,
         });
       }
     });

src/components/index/ProductList/index.jsx

@@ -7,8 +7,8 @@ import React, {
 import { View, Text, Image, Button } from "@tarojs/components";
 import { AtCheckbox, AtActivityIndicator } from "taro-ui";
 import { setShareContent } from "../../../common/share";
-import { formatDate } from "../../../common/time";
-import { getShareJump, addLog } from "../../../service";
+import { getShareJump } from "../../../service";
+import { handleLog } from "../../../common/track";
 import Taro from "@tarojs/taro";
 import "./index.less";
 import ShareModal from "../../shareModal";
@@ -19,7 +19,6 @@ import buy from "../../../images/index/buy.png";
 import shareBuy from "../../../images/index/shareBuy.png";
 import shareEarnBg from "../../../images/index/share-earn.png";
 import seckillIcon from "../../../images/seckill/seckillIcon.png";
-import { isDebounce } from "../../../common/debounce";
 const ProductList = forwardRef((props, ref) => {
   const {
     productList, // 商品列表数据
@@ -116,23 +115,6 @@ const ProductList = forwardRef((props, ref) => {
       });
     }
   }, [shareTitle]);
-  // 埋点
-  const handleLog = (id) => {
-    if (!isDebounce(500)) return; // 如果在300ms内重复触发，直接返回
-    const dayid = formatDate(new Date(), "YYYY-MM-DD");
-    let userId = "";
-    if (Taro.getStorageSync("loginInfo")) {
-      userId = Taro.getStorageSync("loginInfo").id;
-    }
-    addLog({
-      event_type: "share_product_link",
-      event_type_title: "点击分享赚",
-      goods_id: Number(id),
-      ext: "",
-      dayid,
-      users_id: userId,
-    });
-  };
   // 分享商品
   const shareProduct = (product, e) => {
     e.stopPropagation(); // 防止事件穿透
@@ -157,8 +139,13 @@ const ProductList = forwardRef((props, ref) => {
       });
       setShareLink(res.share_unique_value);
       setShareModalOpened(true);
+      // 埋点
       if (isSeckill) {
-        handleLog(product.id);
+        handleLog({
+          event_type: "share_product_link",
+          event_type_title: "点击分享赚",
+          goods_id: product.id,
+        });
       }
     });
   };

src/pages/indexSub/activity/index.jsx

@@ -7,8 +7,7 @@ import {
   getNewYearTab,
   getNewYearProductList,
 } from "../../../service/activity";
-import { addLog } from "../../../service/index";
-import { formatDate } from "../../../common/time";
+import { handleLog } from "../../../common/track";
 export default class Index extends Component {
   state = {
     current: 0,
@@ -21,16 +20,28 @@ export default class Index extends Component {
     isShowBack: false, // 是否显示返回按钮
   };
   componentDidMount() {
-    const { isShare, isShowBack,shareUserId } =
+    const { isShare, isShowBack, shareUserId } =
       Taro.getCurrentInstance().router.params || "";
     this.setState(
-      { isShare: isShare || false, isShowBack: isShowBack || false,shareUserId:shareUserId||'' },
+      {
+        isShare: isShare || false,
+        isShowBack: isShowBack || false,
+        shareUserId: shareUserId || "",
+      },
       () => {
         if (isShare) {
           Taro.hideHomeButton(); //隐藏返回首页
         }
         this.getTab(); //获取tab
-        this.handleLog(); //埋点
+        handleLog({
+          event_type: this.state.isShare
+            ? "share_to_activity"
+            : "click_to_activity",
+          event_type_title: this.state.isShare
+            ? "从分享链接进入春节活动页"
+            : "直接点击进入春节活动页",
+          goods_id: 0,
+        }); //埋点
       }
     );
   }
@@ -64,29 +75,6 @@ export default class Index extends Component {
       loading: false,
     }));
   };
-  // 埋点
-  handleLog = () => {
-    const dayid = formatDate(new Date(), "YYYY-MM-DD");
-    let userId = "";
-    if (Taro.getStorageSync("loginInfo")) {
-      userId = Taro.getStorageSync("loginInfo").id;
-    }
-    // 构建ext对象，包含share_id
-    let ext = "";
-    if (this.state.shareUserId) {
-      ext = JSON.stringify({
-        share_users_id: this.state.shareUserId,
-      });
-    }
-    addLog({
-      users_id: userId || 0,
-      goods_id: 0,
-      event_type: this.state.isShare ? "share_to_activity" : "click_to_activity",
-      event_type_title: this.state.isShare ? "从分享链接进入春节活动页" : "直接点击进入春节活动页",
-      dayid,
-      ext,
-    });
-  };
   // 返回
   handleBack = () => {
     Taro.navigateBack();
@@ -145,13 +133,12 @@ export default class Index extends Component {
     return (
       <View className="index">
         {/* 返回按钮 */}
-        {
-          !this.state.isShare && (
-            <Image
-              onClick={this.handleBack}
-              style={{ top: Taro.navigationBarHeight + "px" }}
-              className="top-back"
-              src="https://yushi.tos-cn-beijing.volces.com/activity/back.png"
+        {!this.state.isShare && (
+          <Image
+            onClick={this.handleBack}
+            style={{ top: Taro.navigationBarHeight + "px" }}
+            className="top-back"
+            src="https://yushi.tos-cn-beijing.volces.com/activity/back.png"
             mode="widthFix"
           />
         )}
@@ -286,7 +273,11 @@ export default class Index extends Component {
           >
             <View className="product-list-container">
               {this.state.productList.map((product) => (
-                <View onClick={() => this.handleProductDetail(product)} key={product.id} className="product-list-item">
+                <View
+                  onClick={() => this.handleProductDetail(product)}
+                  key={product.id}
+                  className="product-list-item"
+                >
                   <Image
                     className="product-img"
                     src={product.image_url}

src/pages/indexSub/productDetail/index.jsx

@@ -7,10 +7,8 @@ import {
   getProductPromotion,
   getShareJump,
   bindShareJump,
-  addLog,
 } from "../../../service";
-import { formatDate } from "../../../common/time";
-import { isDebounce } from "../../../common/debounce";
+import { handleLog } from "../../../common/track";
 import "./index.less";
 import Taro from "@tarojs/taro";
 import productDetailIcon from "../../../images/productDetail/productDetailIcon.png";
@@ -108,8 +106,14 @@ export default class Index extends Component {
         if (session_key && shareJump) {
           this.bindShareJump(); //绑定分享跳转标识
         }
+        // 埋点
         if (this.state.isSeckill) {
-          this.handleLog("direct_to_product"); //埋点
+          handleLog({
+            event_type:"direct_to_product",
+            event_type_title:'进入商品详情页',
+            goods_id: Number(this.state.id),
+            shareUserId:this.state.shareUserId
+          }); //埋点
         }
         // 判断是否显示签约弹窗
         if (
@@ -155,40 +159,14 @@ export default class Index extends Component {
       isOpened: "self",
     });
   };
-  // 埋点
-  handleLog = (event_type) => {
-    if (!isDebounce(500)) return; // 如果在300ms内重复触发，直接返回
-    if (this.state.isSeckill) {
-      const dayid = formatDate(new Date(), "YYYY-MM-DD");
-      const event_type_title =
-        event_type == "share_product_link"
-          ? "点击分享赚"
-          : event_type == "direct_to_product"
-          ? "进入商品详情页"
-          : "进入商品详情页";
-      let userId = "";
-      if (Taro.getStorageSync("loginInfo")) {
-        userId = Taro.getStorageSync("loginInfo").id;
-      }
-      // 构建ext对象，包含share_id
-      let ext = "";
-      if (this.state.shareUserId) {
-        ext = JSON.stringify({
-          share_users_id: this.state.shareUserId,
-        });
-      }
-      addLog({
-        users_id: userId || 0,
-        goods_id: Number(this.state.id),
-        event_type_title,
-        event_type,
-        dayid,
-        ext,
-      });
-    }
-  };
   // 分享
   openSharePopup = async () => {
+    // 使用 encodeURIComponent 编码商品详情数据
+    // const encodedProductDetail = encodeURIComponent(JSON.stringify(this.state.productDetail));
+    // Taro.navigateTo({
+    //   url: `/pages/indexSub/sharePage/index?isSeckill=${this.state.isSeckill}&shareJump=${this.state.shareJump}&tagTitle=${this.state.tagTitle}&productDetail=${encodedProductDetail}`,
+    // });
+    // return
     const res = await getShareJump({
       share_type: 1,
       share_id: this.state.id,
@@ -197,7 +175,15 @@ export default class Index extends Component {
       shareJump: res.share_unique_value,
       isOpened: "share",
     });
-    this.handleLog("share_product_link"); //埋点
+    // 埋点
+    if (this.state.isSeckill) {
+      handleLog({
+        event_type: "share_product_link",
+        event_type_title: "点击分享赚",
+        goods_id: Number(this.state.id),
+        shareUserId:this.state.shareUserId
+      }); //埋点
+    }
   };
   // 绑定分享跳转标识
   bindShareJump = async () => {
@@ -308,7 +294,7 @@ export default class Index extends Component {
             </Text>
             <Text
               className="copy-btn"
-              onClick={() => this.handleCopy("123456")}
+              onClick={() => this.handleCopy(productDetail.goods_number)}
             >
               复制
             </Text>

src/pages/indexSub/seckillIndex/index.jsx

@@ -5,11 +5,10 @@ import Taro from "@tarojs/taro";
 import ProductList from "../../../components/index/ProductList";
 import {
   getRecommendProductList,
-  addLog,
   getShareJump,
   bindShareJump,
 } from "../../../service";
-import { formatDate } from "../../../common/time";
+import { handleLog } from "../../../common/track";
 import { getShareContent } from "../../../common/share";
 export default class Index extends Component {
   state = {
@@ -49,15 +48,24 @@ export default class Index extends Component {
         if (isShare) {
           Taro.hideHomeButton();//隐藏返回首页
         }
-        this.handleLog(
-          isDirect
+        handleLog({
+          event_type: isDirect
             ? `direct_to_${this.state.id}_${this.state.title}`
             : isBanner
             ? `banner_to_${this.state.id}_${this.state.title}`
             : isShare
             ? `share_to_${this.state.id}_${this.state.title}`
-            : `direct_to_${this.state.id}_${this.state.title}`
-        );
+            : `direct_to_${this.state.id}_${this.state.title}`,
+          event_type_title: isDirect
+            ? `直接点击进入${this.state.title}`
+            : isBanner
+            ? `从banner 跳转到${this.state.title}`
+            : isShare
+            ? `从分享链接跳转到${this.state.title}`
+            : `直接点击进入${this.state.title}`,
+          goods_id: 0,
+          shareUserId: this.state.shareUserId,
+        });
         this.getRecommendProductList();
         // 获取分享跳转标识
         shareJump &&
@@ -105,37 +113,6 @@ export default class Index extends Component {
     Taro.removeStorageSync("shareJump");
     Taro.removeStorageSync("shareType");
   };
-  // 埋点
-  handleLog = (event_type) => {
-    const dayid = formatDate(new Date(), "YYYY-MM-DD");
-    const event_type_title =
-      event_type == `banner_to_${this.state.id}_${this.state.title}`
-        ? `从banner 跳转到${this.state.title}`
-        : event_type == `share_to_${this.state.id}_${this.state.title}`
-        ? `从分享链接跳转到${this.state.title}`
-        : event_type == `direct_to_${this.state.id}_${this.state.title}`
-        ? `直接点击进入${this.state.title}`
-        : `直接点击进入${this.state.title}`;
-    let userId = "";
-    if (Taro.getStorageSync("loginInfo")) {
-      userId = Taro.getStorageSync("loginInfo").id;
-    }
-    // 构建ext对象，包含share_id
-    let ext = "";
-    if (this.state.shareUserId) {
-      ext = JSON.stringify({
-        share_users_id: this.state.shareUserId,
-      });
-    }
-    addLog({
-      users_id: userId || 0,
-      goods_id: 0,
-      event_type_title,
-      event_type,
-      dayid,
-      ext,
-    });
-  };
   // 配置分享内容
   onShareAppMessage(res) {
     let shareUserId = "";

src/pages/indexSub/sharePage/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '编辑分享内容',
+})

src/pages/indexSub/sharePage/index.jsx

@@ -0,0 +1,178 @@
+import { Component } from "react";
+import { View, Image, Text, Button, Input } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import "./index.less";
+
+export default class Index extends Component {
+  state = {
+    shareTitle: "", //分享标题
+    productDetail: {}, //商品详情
+    isSeckill: false, //是否是秒杀商品
+    shareJump: "", //分享链接
+    tagTitle: "", //标签标题
+  };
+  componentDidMount() {
+    const { isSeckill, shareJump, tagTitle, productDetail } =
+      Taro.getCurrentInstance().router.params;
+
+    this.setState({
+      isSeckill: isSeckill === "true",
+      shareJump,
+      tagTitle,
+      productDetail: JSON.parse(decodeURIComponent(productDetail)),
+      shareTitle: JSON.parse(decodeURIComponent(productDetail)).item_title,
+    });
+  }
+  // 设置分享标题
+  handleShareTitleChange = (newTitle) => {
+    this.setState({
+      shareTitle: newTitle,
+    });
+  };
+  // 保存图片到手机
+  handleSaveImage = () => {
+    Taro.getSetting({
+      success: (res) => {
+        if (!res.authSetting["scope.writePhotosAlbum"]) {
+          Taro.authorize({
+            scope: "scope.writePhotosAlbum",
+            success: () => {
+              this.saveImage();
+            },
+            fail: () => {
+              Taro.showModal({
+                title: "提示",
+                content: "需要您授权保存图片到相册",
+                success: (modalRes) => {
+                  if (modalRes.confirm) {
+                    Taro.openSetting();
+                  }
+                },
+              });
+            },
+          });
+        } else {
+          this.saveImage();
+        }
+      },
+    });
+  };
+
+  saveImage = () => {
+    Taro.downloadFile({
+      url: this.state.productDetail.images[0].img,
+      success: (res) => {
+        console.log(res);
+
+        Taro.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: () => {
+            Taro.showToast({
+              title: "保存成功",
+              icon: "success",
+            });
+          },
+          fail: () => {
+            Taro.showToast({
+              title: "保存失败",
+              icon: "none",
+            });
+          },
+        });
+      },
+      fail: () => {
+        Taro.showToast({
+          title: "图片下载失败",
+          icon: "none",
+        });
+      },
+    });
+  };
+  // 配置分享内容
+  onShareAppMessage() {
+    return {
+      title: this.state.shareTitle || this.state.productDetail.item_title,
+      path: `/pages/indexSub/productDetail/index?id=${this.state.productDetail.id}&&isShare=true&&isSeckill=${this.state.isSeckill}&&shareJump=${this.state.shareJump}&&tagTitle=${this.state.tagTitle}&&shareType=1`,
+      imageUrl: this.state.productDetail.images[0].img,
+    };
+  }
+  render() {
+    const { productDetail } = this.state;
+    return (
+      <View className="index">
+        {/* 图片素材盒子 */}
+        <View className="image-box">
+          <View className="image-box-top">
+            <View className="image-box-title">图片素材</View>
+            <View className="image-box-save" onClick={this.handleSaveImage}>
+              保存图片
+            </View>
+          </View>
+          {productDetail.images && (
+            <View className="image-box-content">
+              {this.state.productDetail.images.map((item, index) => (
+                <Image
+                  className="image-box-content-item"
+                  key={index}
+                  src={item.img}
+                  mode="aspectFill"
+                />
+              ))}
+            </View>
+          )}
+        </View>
+        {/* 文案素材盒子 */}
+        <View className="text-box">
+          <View className="text-box-top">
+            <View className="text-box-title">文案素材</View>
+            <View className="text-box-save">复制全部内容</View>
+          </View>
+          <View className="text-box-content">
+            {/* 商品标题盒子 */}
+            <View className="text-box-content-title">
+              <View className="text-box-content-title-top">
+                <View className="text-box-content-title-top-title">
+                  商品标题
+                </View>
+                <View className="text-box-content-title-top-copy">
+                  复制标题
+                </View>
+              </View>
+              {/* 分享标题输入框 */}
+              <Input
+                onInput={this.handleShareTitleChange}
+                className="input"
+                value={this.state.shareTitle}
+              />
+            </View>
+            {/* 商品链接盒子 */}
+            <View className="text-box-content-link">
+              <View className="text-box-content-link-top">
+                <View className="text-box-content-link-top-title">
+                  商品链接
+                </View>
+              </View>
+              {/* 商品链接 */}
+              <View className="text-box-content-link-bottom">
+                <Input
+                  onInput={this.handleShareTitleChange}
+                  className="linkInput"
+                  value={this.state.shareTitle}
+                  disabled
+                />
+                <View className="copy-box">
+                  <View className="copy-box-line"></View>
+                  <Image className="copy-box-icon" src='https://yushi.tos-cn-beijing.volces.com/productDetail/copy.png' />
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* 分享按钮 */}
+        <Button className="share-button" openType="share" onClick={this.handleShare}>
+          直接分享商品卡片到聊天框
+        </Button>
+      </View>
+    );
+  }
+}

src/pages/indexSub/sharePage/index.less

@@ -0,0 +1,219 @@
+.index {
+    // background: linear-gradient(180deg, #faeb5d 0%, rgba(250, 238, 116, 0) 573px);
+    background-color: #f9f9f9;
+    min-height: 100vh;
+    padding: 30px 16px 0 16px;
+    box-sizing: border-box;
+
+    // 图片素材盒子
+    .image-box {
+        padding: 21px 0 43px 20px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 34px;
+
+        // 图片素材盒子顶部
+        .image-box-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+            padding-right: 20px;
+
+            .image-box-title {
+                font-weight: 700;
+                font-size: 32px;
+                color: #000000;
+            }
+
+            .image-box-save {
+                width: 156px;
+                height: 60px;
+                border-radius: 70px;
+                background-color: #FFECCA;
+                color: #F48106;
+                font-size: 24px;
+                line-height: 60px;
+                text-align: center;
+            }
+        }
+
+        // 图片素材盒子内容
+        .image-box-content {
+            display: flex;
+            flex-wrap: nowrap;
+            overflow-x: auto;
+
+            .image-box-content-item {
+                width: 240px;
+                height: 240px;
+                border-radius: 40px;
+                margin-right: 20px;
+            }
+        }
+    }
+
+    // 文案素材盒子
+    .text-box {
+        margin-top: 40px;
+
+        .text-box-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+            padding: 0 20px;
+
+            .text-box-title {
+                font-weight: 700;
+                font-size: 32px;
+                color: #000000;
+            }
+
+            .text-box-save {
+                width: 198px;
+                height: 60px;
+                line-height: 60px;
+                text-align: center;
+                border-radius: 70px;
+                background-color: #FFECCA;
+                color: #FF8400;
+                font-size: 26px;
+            }
+        }
+
+        // 文案素材盒子内容
+        .text-box-content {
+            padding: 31px 20px;
+            box-sizing: border-box;
+            background-color: #fff;
+            border-radius: 34px;
+
+            // 商品标题
+            .text-box-content-title {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                margin-bottom: 24px;
+
+                .text-box-content-title-top {
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 0 22px 0 10px;
+                    box-sizing: border-box;
+
+                    .text-box-content-title-top-title {
+                        font-size: 30px;
+                        color: #333;
+                    }
+
+                    .text-box-content-title-top-copy {
+                        font-size: 24px;
+                        color: #F48106;
+                    }
+                }
+
+                .input {
+                    margin-top: 30px;
+                    width: 100%;
+                    height: 94px;
+                    border-radius: 34px;
+                    border: 4px solid #F6C71A;
+                    padding-left: 24px; 
+                    padding-right: 24px;
+                    font-size: 28px;
+                    color: #999999;
+                    box-sizing: border-box;
+                }
+            }
+
+            // 商品链接
+            .text-box-content-link {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                .text-box-content-link-top {
+                    padding-left: 10px;
+
+                    .text-box-content-link-top-title {
+                        font-size: 30px;
+                        color: #333;
+                    }
+                }
+                .text-box-content-link-bottom {
+                    position: relative;
+                    margin-top: 30px;
+                    .copy-box {
+                        position: absolute;
+                        right: 19px;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        display: flex;
+                        align-items: center;
+                        .copy-box-line {
+                            width: 1px;
+                            height: 54px;
+                            background-color: #FF8119;
+                            margin-right: 39px;
+                        }
+                        .copy-box-icon {
+                            width: 34px;
+                            height: 34px;
+                        }
+                    }
+                }
+                .linkInput {
+                    width:100%;
+                    height: 94px;
+                    border-radius: 34px;
+                    border: none;
+                    padding-left: 24px;
+                    padding-right: 110px;
+                    font-size: 28px;
+                    box-sizing: border-box;
+                    color: #999999;
+                    background-color: #f7f8fa;
+                }
+            }
+        }
+    }
+
+    // 清除Button默认样式
+    Button {
+        padding: 0;
+        margin: 0;
+        background: none;
+        border: none;
+        line-height: normal;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+        color: #FFFFFF;
+
+        &::after {
+            border: none;
+        }
+    }
+    .share-button {
+        position: fixed;
+        bottom: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% - 44px);
+        height: 88px;
+        border-radius: 160px;
+        background-color: #F6C71A;
+        font-weight: 700;
+        font-size: 30px;
+        color: #3D3D3D;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/pages/mine/index.jsx

@@ -1,6 +1,6 @@
 import { Component } from "react";
 import Taro from "@tarojs/taro";
-import { View, Text, Image } from "@tarojs/components";
+import { View, Text, Image, Button } from "@tarojs/components";
 import { AtList, AtListItem } from "taro-ui";
 import { getUserInfo, getMineData } from "../../service";
 import "./index.less";
@@ -148,6 +148,9 @@ export default class Index extends Component {
             ></Image>
           </View>
         </View>
+        <Button onClick={() => Taro.navigateTo({ url: '/pages/indexSub/activity/index' })}>
+          活动页面
+        </Button>
         {/* 我的推荐人 */}
         {mineData.user_relations?.id && (
           <View className="recommend-box">