init
This commit is contained in:
王鹏
216
pages/mine/guanzhu.vue
Normal file
216
pages/mine/guanzhu.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="app-page">
|
||||
<!-- 个人信息部分 -->
|
||||
<div class="profile">
|
||||
<!-- 头像 -->
|
||||
<div class="avatar">
|
||||
<img src="https://img.yidaima.cn/%E5%A4%B4%E5%83%8F/9b889964f97e4d0c8f52f7b9ec0d04da.jpg" alt="Avatar" class="avatar-img">
|
||||
</div>
|
||||
<!-- 昵称 -->
|
||||
<div class="nickname">Nan Yin</div>
|
||||
<!-- 个人简介 -->
|
||||
<div class="bio">如果爱意难平，那就把它藏在心底吧！</div>
|
||||
</div>
|
||||
<!-- 联系人部分 -->
|
||||
<div class="contact">
|
||||
<!-- 循环渲染联系人列表 -->
|
||||
<div class="item" v-for="item in contacts" :key="item.id"
|
||||
@click="copyInfo(item.info, item.name, item.name1, item.id)">
|
||||
<!-- 联系人条目 -->
|
||||
<div class="icon-info">
|
||||
<!-- 自定义图标 -->
|
||||
<img :src="item.icon" alt="Custom Icon" class="custom-icon">
|
||||
<!-- 联系人名称 -->
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<!-- 联系人名称 -->
|
||||
<div class="name1">{{ item.name1 }}</div>
|
||||
<!-- 联系人信息 -->
|
||||
<div class="info">{{ item.info }}</div>
|
||||
<div v-if="item.id ==1 || item.id ==2" class="copy"><text class="cuIcon-qrcode"></text></div>
|
||||
<div v-if="item.id ==3 || item.id ==4" class="copy"><text class="cuIcon-copy"></text></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--弹窗-->
|
||||
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
|
||||
<view style="border-radius: 30rpx; background-color: white;" class="cu-dialog">
|
||||
<view class="cu-bar bg-white justify-end">
|
||||
<view style="color: black;font-size: 38rpx;margin-top: 40rpx;" class="content">{{modelTip}}</view>
|
||||
<view class="action" @tap="modalName = null">
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class=" bg-white">
|
||||
<image style="width: 75%;" mode="widthFix" show-menu-by-longpress="true"
|
||||
:src="modelSrc"></image>
|
||||
<view class="tipinfo">Tip：长按图片识别 / 保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
modelSrc:"",
|
||||
modelTip:"",
|
||||
contacts: [{
|
||||
id: 1,
|
||||
icon: "http://cun.mywl.top/mybk/xtb/qq.png",
|
||||
name: "企鹅",
|
||||
name1: ":",
|
||||
info: "594458910"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "http://cun.mywl.top/mybk/xtb/wechat.png",
|
||||
name: "微信",
|
||||
name1: ":",
|
||||
info: "forfeastcoding"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "http://cun.mywl.top/mybk/xtb/email.png",
|
||||
name: "邮箱",
|
||||
name1: ":",
|
||||
info: "594458910@qq.com"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "http://cun.mywl.top/mybk/xtb/blog.png",
|
||||
name: "博客",
|
||||
name1: ":",
|
||||
info: "http://www.yidaima.cn/"
|
||||
},
|
||||
],
|
||||
modalName: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
copyInfo(info, name, name1, id) {
|
||||
if(id == 1){
|
||||
this.modelTip = "我的企鹅码"
|
||||
this.modelSrc = "https://img.yidaima.cn/feast/qq_qrcode.jpg"
|
||||
this.modalName = "Modal"
|
||||
}else if(id == 2){
|
||||
this.modelTip = "我的微信码"
|
||||
this.modelSrc = "https://img.yidaima.cn/feast/wx_qrcode.jpg"
|
||||
this.modalName = "Modal"
|
||||
}
|
||||
uni.setClipboardData({
|
||||
data: info,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: `${name}已复制`,
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tipinfo {
|
||||
width: 60%;
|
||||
height: 80rpx;
|
||||
border-radius: 60rpx;
|
||||
text-align: center;
|
||||
/* border: 3rpx solid #ae67d6; */
|
||||
margin-left: 20%;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 40rpx;
|
||||
color: #ae67d6;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-page {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0rpx;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-image: url('https://v2.api-m.com/api/wallpaper?return=302');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 33vh;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 2px 24px rgba(0, 0, 0, 0.07);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 55px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.bio {
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
top: 62px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.contact {
|
||||
border-top: 2px solid #f2f2f2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-radius: 12px;
|
||||
background-color: #fafafa;
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.icon-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.name,
|
||||
.name1,
|
||||
.info {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.copy {
|
||||
margin-left: auto;
|
||||
color: #1E90FF;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user