tk-mini-program/pages/Mine/minecomponents/contact.vue

<template>
  <view class="contact">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">联系客服</view>
    <view class="content">
      <view class="contactContent">
        <view class="Title">长按下方复制客服邮箱，即可直接发送邮件给客服，我们将竭诚为您服务！</view>
        <text class="copy-text" @longpress="handleCopy">{{ content }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      content:"PK@TikTok0.xyz"
    };
  },
  onLoad() {
    // 页面加载时执行
  },
  onShareAppMessage(res) {
    if (res.from === "menu") {
      return {
        title: "分享",
        path: "/pages/Home/Home",
      };
    }
  },
  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,
      });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: absolute;
  top: 110rpx;
  left: 35rpx;
  width: 46rpx;
  height: 46rpx;
}
.title {
  position: absolute;
  top: 120rpx;
  left: 325rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
/* 建设中 */
.content {
  position: absolute;
  top: 250rpx;
  left: 0rpx;
  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%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.buildingTitle {
  font-size: 40rpx;
  color: #999999;
  font-weight: bold;
  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>