|
@@ -1,603 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="content">
|
|
|
- <view class="content-box">
|
|
|
- <view class="top-main-box">
|
|
|
- <view class="zzbg">
|
|
|
- <image class="mpimg" src="/static/images/mpbg1.jpg" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- <view class="topmain">
|
|
|
- <view class="leftimg">
|
|
|
- <u-avatar size="60" :src="cardObj.head_img" shape="square"></u-avatar>
|
|
|
- </view>
|
|
|
- <view class="rightcont">
|
|
|
- <view class="name">{{cardObj.name}}</view>
|
|
|
- <view class="tip">{{cardObj.job}}</view>
|
|
|
- <view class="tipa">{{cardObj.company}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="btnmain">
|
|
|
- <u-icon name="map-fill"></u-icon><text>{{cardObj.address}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <view class="top-mainb">
|
|
|
- <view class="conta">
|
|
|
- <view class="cont" v-if="cardObj.phone" @click="onPhone()">
|
|
|
- <view class="box">
|
|
|
- <u-icon name="phone-fill" color="#007AFF" size="40"> </u-icon>
|
|
|
- <view class="right">
|
|
|
- <text class="tit">拨打电话</text>
|
|
|
- <text>{{cardObj.phone}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cont" v-if="cardObj.wechat" @click="onCopy(cardObj.wechat)">
|
|
|
- <view class="box">
|
|
|
- <u-icon name="weixin-fill" color="#007AFF" size="40"> </u-icon>
|
|
|
- <view class="right">
|
|
|
- <text class="tit">加微信</text>
|
|
|
- <text>{{cardObj.wechat}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cont" v-if="cardObj.qq" @click="onCopy(cardObj.qq)">
|
|
|
- <view class="box">
|
|
|
- <u-icon name="qq-fill" color="#007AFF" size="40"> </u-icon>
|
|
|
- <view class="right">
|
|
|
- <text class="tit">QQ</text>
|
|
|
- <text>{{cardObj.qq}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cont" v-if="cardObj.email" @click="onCopy(cardObj.email)">
|
|
|
- <view class="box">
|
|
|
- <u-icon name="email-fill" color="#007AFF" size="40"> </u-icon>
|
|
|
- <view class="right">
|
|
|
- <text class="tit">邮箱</text>
|
|
|
- <text>{{cardObj.email}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="top-maina">
|
|
|
- <button class="left" @click="onAdd()">
|
|
|
- 同步到通讯录
|
|
|
- </button>
|
|
|
- <button class="right" open-type="share">
|
|
|
- 分享名片
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <view class="top-mainc">
|
|
|
- <view class="left">
|
|
|
- <u-avatar-group :urls="headerList" size="35" gap="0.4" :default-url="headerImg" randomBgColor>
|
|
|
- </u-avatar-group>
|
|
|
- <text>{{visitorCount}}人浏览</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="top-main-tit">
|
|
|
- <u-icon name="file-text-fill" color="#007AFF" size="40"> </u-icon>
|
|
|
- <text>业务介绍</text>
|
|
|
- </view>
|
|
|
- <view class="top-maind">
|
|
|
- <view class="topmain">
|
|
|
- <view class="leftimg">
|
|
|
- <u-avatar size="60" :src="cardObj.head_img" shape="square"></u-avatar>
|
|
|
- </view>
|
|
|
- <view class="rightcont">
|
|
|
- <view class="name" v-if="!cardObj.intro">Hi~欢迎访问我的名片,了解更多内容请直接咨询我。</view>
|
|
|
- <view class="name" v-if="cardObj.intro">{{cardObj.intro}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="bottom-block"></view>
|
|
|
- <view class="bottombtn" type="primary" @click="gotoEdit">编辑我的名片</view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- request
|
|
|
- } from '@/common/js/request'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id: "",
|
|
|
- headerImg: "/static/images/userimg.png",
|
|
|
- cardObj: {},
|
|
|
- visitorList: [],
|
|
|
- visitorCount: 0,
|
|
|
- headerList: []
|
|
|
- }
|
|
|
- },
|
|
|
- async onShow(options) {
|
|
|
- console.log("onLoad options", options);
|
|
|
- const logged = uni.getStorageSync('logged');
|
|
|
- if (logged) {
|
|
|
- var id = uni.getStorageSync('id');
|
|
|
- var user = uni.getStorageSync('userInfo');
|
|
|
- if (id != null && id != "") {
|
|
|
- this.id = id;
|
|
|
- const card = await request('uni-card', 'getCard', {
|
|
|
- id: id,
|
|
|
- uid: user.id
|
|
|
- }, {
|
|
|
- showloading: true
|
|
|
- });
|
|
|
- if (card._id == "") {
|
|
|
- this.getDefault();
|
|
|
- } else {
|
|
|
- const visitorList = await request('uni-card', 'getVisitorList', {
|
|
|
- card_id: id,
|
|
|
- skip: 0,
|
|
|
- limit: 8
|
|
|
- }, {
|
|
|
- showloading: true
|
|
|
- });
|
|
|
- this.cardObj = card;
|
|
|
- this.visitorCount = visitorList.total;
|
|
|
- visitorList.items.forEach((arr, index) => {
|
|
|
- if (arr.head_img)
|
|
|
- this.headerList.push(arr.head_img)
|
|
|
- else
|
|
|
- this.headerList.push("/static/images/userimg.png")
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- const mycard = await request('uni-card', 'getMyCard', {
|
|
|
- uid: user.id
|
|
|
- }, {
|
|
|
- showloading: true
|
|
|
- });
|
|
|
- if (mycard._id == "") {
|
|
|
- this.getDefault();
|
|
|
- } else {
|
|
|
- const myVisitorList = await request('uni-card', 'getMyVisitorList', {
|
|
|
- uid: user.id,
|
|
|
- skip: 0,
|
|
|
- limit: 8
|
|
|
- }, {
|
|
|
- showloading: true
|
|
|
- });
|
|
|
- this.cardObj = mycard;
|
|
|
- this.visitorCount = myVisitorList.total;
|
|
|
- myVisitorList.items.forEach((arr, index) => {
|
|
|
- if (arr.head_img)
|
|
|
- this.headerList.push(arr.head_img)
|
|
|
- else
|
|
|
- this.headerList.push("/static/images/userimg.png")
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onShareAppMessage(res) {
|
|
|
- if (this.id == "" || this.id == null) {
|
|
|
- this.id = "61b30b8091a7500001dea375"
|
|
|
- }
|
|
|
- return {
|
|
|
- title: '您好,这是我的名片,望惠存',
|
|
|
- path: '/pages/index?id=' + this.id
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async getDefault() {
|
|
|
- const card = await request('uni-card', 'getCard', {
|
|
|
- id: "61b30b8091a7500001dea375",
|
|
|
- uid: "61b30b4e7964120001e32f41"
|
|
|
- }, {
|
|
|
- showloading: true
|
|
|
- });
|
|
|
- if (card._id == "") {
|
|
|
- this.gotoEdit();
|
|
|
- }
|
|
|
- const visitorList = await request('uni-card', 'getVisitorList', {
|
|
|
- card_id: "61b30b8091a7500001dea375",
|
|
|
- skip: 0,
|
|
|
- limit: 8
|
|
|
- }, {
|
|
|
- showloading: true
|
|
|
- });
|
|
|
- this.cardObj = card;
|
|
|
- this.visitorCount = visitorList.total;
|
|
|
- visitorList.items.forEach((arr, index) => {
|
|
|
- if (arr.head_img)
|
|
|
- this.headerList.push(arr.head_img)
|
|
|
- else
|
|
|
- this.headerList.push("/static/images/userimg.png")
|
|
|
- })
|
|
|
- },
|
|
|
- onAdd() {
|
|
|
- uni.addPhoneContact({
|
|
|
- organization: this.cardObj.company,
|
|
|
- firstName: this.cardObj.name,
|
|
|
- title: this.cardObj.job,
|
|
|
- email: this.cardObj.email,
|
|
|
- mobilePhoneNumber: this.cardObj.phone,
|
|
|
- weChatNumber: this.cardObj.wechat,
|
|
|
- remark: this.cardObj.address,
|
|
|
- success: function() {
|
|
|
- console.log('success');
|
|
|
- },
|
|
|
- fail: function() {
|
|
|
- console.log('fail');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- onPhone() {
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: this.cardObj.phone,
|
|
|
- success: (res) => {
|
|
|
- console.log('调用成功!')
|
|
|
- },
|
|
|
- fail: (res) => {
|
|
|
- console.log('调用失败!')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- onCopy(data) {
|
|
|
- uni.setClipboardData({
|
|
|
- data: data, //要被复制的内容
|
|
|
- success: function() {
|
|
|
- //重点~做笔记
|
|
|
- //在success中加入uni.hideToast()可以解决
|
|
|
- uni.showToast({
|
|
|
- title: '复制成功',
|
|
|
- duration: 2000,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- //以下就可自定义操作了~
|
|
|
- },
|
|
|
- fail: function(err) {
|
|
|
- uni.showToast({
|
|
|
- title: '复制失败',
|
|
|
- duration: 2000,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- gotoEdit() {
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages/edit"
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
- page {
|
|
|
- background: #f7f7f7;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 5%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 15rpx;
|
|
|
- height: 52vw;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- box-shadow: 0px 0px 10px #cccccc;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .zzbg {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background: rgba(139, 139, 139, 0.5);
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .mpimg {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .topmain {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40rpx 5%;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- position: relative;
|
|
|
- z-index: 4;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .topmain .leftimg {
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .topmain .leftimg .tximg {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .topmain .rightcont {
|
|
|
- color: #fff;
|
|
|
- flex: 1;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 25rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .topmain .rightcont .name {
|
|
|
- font-size: 42rpx;
|
|
|
- padding-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .topmain .rightcont .tip,
|
|
|
- .content-box .top-main-box .topmain .rightcont .tipa {
|
|
|
- font-size: 34rpx;
|
|
|
- text-shadow: 1px 1px 1px #000;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .btnmain {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0px;
|
|
|
- z-index: 5;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 25rpx 5%;
|
|
|
- background: #fff;
|
|
|
- display: inline;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .btnmain view {
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-box .btnmain text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
- padding-left: 10rpx;
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maina {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 20rpx auto;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maina view {
|
|
|
- width: 48%;
|
|
|
- border-radius: 15rpx;
|
|
|
- text-align: center;
|
|
|
- padding: 25rpx 0;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maina .left {
|
|
|
- border: 1px solid #007AFF;
|
|
|
- color: #007AFF;
|
|
|
- width: 48%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maina .right {
|
|
|
- background: #007AFF;
|
|
|
- border: 1px solid #007AFF;
|
|
|
- color: #fff;
|
|
|
- width: 48%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb {
|
|
|
- width: 100%;
|
|
|
- overflow: scroll;
|
|
|
- padding: 15rpx 0;
|
|
|
- overflow-x: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb .conta {
|
|
|
- width: 100%;
|
|
|
- overflow-x: auto;
|
|
|
- word-break: keep-all;
|
|
|
- /* 不换行 */
|
|
|
- white-space: nowrap;
|
|
|
- /* 不换行 */
|
|
|
- padding-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb .conta .cont {
|
|
|
- display: inline-block;
|
|
|
- margin-right: 20rpx;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 0px 8px #cccccc;
|
|
|
- border-radius: 10rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb .conta .cont .box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 15rpx 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb .conta .cont .box image {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb .conta .cont .box .right {
|
|
|
- flex: 1;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb .conta .cont .box .right text {
|
|
|
- display: block;
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainb .conta .cont .box .right .tit {
|
|
|
- font-size: 34rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainc {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 10rpx auto;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainc .left {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainc .left text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #555555;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainc .left image {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- margin-right: 5rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainc .right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainc .right text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #555555;
|
|
|
- padding-right: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-mainc .right image {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-tit {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-tit image {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-main-tit text {
|
|
|
- color: #333;
|
|
|
- font-size: 18px;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40rpx 5%;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 0px 8px #cccccc;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .topmain {
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .topmain .leftimg {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .topmain .leftimg .tximg {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .topmain .rightcont {
|
|
|
- color: #555;
|
|
|
- flex: 1;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 25rpx;
|
|
|
- line-height: 42rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .toptip {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .toptip .box {
|
|
|
- display: inline-block;
|
|
|
- margin-top: 25rpx;
|
|
|
- padding: 10rpx 15rpx;
|
|
|
- background: #e6e6e6;
|
|
|
- border-radius: 10rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .toptip .box image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .content-box .top-maind .toptip .box text {
|
|
|
- font-size: 28rpx;
|
|
|
- padding-left: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .bottombtn {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- background: #007AFF;
|
|
|
- color: #fff;
|
|
|
- line-height: 60px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-block {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
-</style>
|