上传代码

pages/Mine/minecomponents/contact.vue

@@ -16,15 +16,9 @@
     </view>
     <view class="title">联系客服</view>
     <view class="content">
-      <view class="building">
-        <view>
-          <image
-            style="width: 500rpx"
-            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/building.png"
-            mode="scaleToFill"
-          />
-        </view>
-        <view class="buildingTitle">建设中~</view>
+      <view class="contactContent">
+        <view class="Title">长按下方复制客服邮箱，即可直接发送邮件给客服，我们将竭诚为您服务！</view>
+        <text class="copy-text" @longpress="handleCopy">{{ content }}</text>
       </view>
     </view>
   </view>
@@ -35,6 +29,7 @@ export default {
   data() {
     return {
       title: "Hello",
+      content:"PK@TikTok0.xyz"
     };
   },
   onLoad() {
@@ -49,8 +44,26 @@ export default {
     }
   },
   methods: {
+    //长按复制邮箱
+    handleCopy() {
+      // 复制到剪贴板
+      uni.setClipboardData({
+        data: this.content,
+        success: () => {
+          // 显示成功提示
+          uni.showToast({
+            title: '复制成功',
+            icon: 'success',
+            duration: 1500
+          });
+        },
+        fail: (err) => {
+          console.error('复制失败:', err);
+        }
+      });
+    },
+  // 返回上一页
     onBack() {
-      // 返回上一页
       wx.navigateBack({
         delta: 1,
       });
@@ -82,7 +95,7 @@ export default {
 .title {
   position: absolute;
   top: 120rpx;
-  left: 335rpx;
+  left: 325rpx;
   font-size: 34rpx;
   color: #100e0f;
   font-weight: bold;
@@ -99,6 +112,14 @@ export default {
   right: 0rpx;
   bottom: 100rpx;
 }
+.contactContent{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 .building {
   width: 100%;
   height: 90%;
@@ -114,4 +135,27 @@ export default {
   text-align: center;
   margin-top: 50rpx;
 }
+.Title{
+  width: 80%;
+  font-size: 30rpx;
+  color: #4fcacd;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 50rpx;
+  line-height: 50rpx;
+}
+.copy-text{
+  width: 60%;
+  height: 200rpx;
+  font-size: 28rpx;
+  color: #ffffff;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 100rpx;
+  line-height: 200rpx;
+  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
+  border-radius:20rpx;
+  padding: 20rpx;
+  
+}
 </style>