|
@@ -5,10 +5,12 @@
|
|
|
<view class="title-name">
|
|
|
{{item.cardBusiness}}
|
|
|
</view>
|
|
|
- <view class="card-list-item" :style="item.currentBackground?'background:url('+item.currentBackground+');background-size:100% 100%':''">
|
|
|
- <view class="card-content style1" v-if="item.cuttentTemplate==0">
|
|
|
+ <view class="card-list-item"
|
|
|
+ :style="item.currentBackground?'background:url('+item.currentBackground+');background-size:100% 100%':''">
|
|
|
+ <view class="card-content style1" v-if="item.cuttentTemplate==1">
|
|
|
<view class="left">
|
|
|
- <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle"></u--image>
|
|
|
+ <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
|
|
|
+ shape="circle"></u--image>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="row1">
|
|
@@ -19,17 +21,23 @@
|
|
|
{{item.companyName}}
|
|
|
</view>
|
|
|
<view class="row3 flex">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px"
|
|
|
+ height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
</view>
|
|
|
<view class="row4 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px"
|
|
|
+ height="13px"></u--image>{{ item.phone }}
|
|
|
+ </view>
|
|
|
+ <view class="row4 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px"
|
|
|
+ height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
|
|
|
</view>
|
|
|
<!-- <view class="">
|
|
|
备注
|
|
|
</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="card-content style1 flex-between" v-if="item.cuttentTemplate==1">
|
|
|
+ <view class="card-content style1 flex-between" v-if="item.cuttentTemplate==2">
|
|
|
<view class="right">
|
|
|
<view class="row1">
|
|
|
<text class="name">{{item.name}}</text>
|
|
@@ -39,47 +47,37 @@
|
|
|
{{item.companyName}}
|
|
|
</view>
|
|
|
<view class="row3 flex">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address3.png" width="13px"
|
|
|
+ height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ </view>
|
|
|
+ <view class="row4 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone3.png" width="12px"
|
|
|
+ height="13px"></u--image>{{ item.phone }}
|
|
|
</view>
|
|
|
<view class="row4 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark3.png" width="10px"
|
|
|
+ height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
|
|
|
</view>
|
|
|
<!-- <view class="">
|
|
|
备注
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<view class="left">
|
|
|
- <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle" v-if="item.headSculpture"></u--image>
|
|
|
- <u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
|
|
|
+ <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
|
|
|
+ shape="circle" v-if="item.headSculpture"></u--image>
|
|
|
+ <u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px"
|
|
|
+ height="66px" shape="circle" v-else></u--image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="card-content style2" v-if="item.cuttentTemplate==2">
|
|
|
- <view class="top">
|
|
|
- <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle" v-if="item.headSculpture"></u--image>
|
|
|
- <u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
|
|
|
- </view>
|
|
|
- <view class="bottom flex">
|
|
|
- <view class="left">
|
|
|
- <view class="row1">
|
|
|
- <text class="name">{{item.name}}</text>
|
|
|
- <text class="post">{{item.post}}</text>
|
|
|
- </view>
|
|
|
- <view class="row2">
|
|
|
- {{item.companyName}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <view class="row1 flex">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
- </view>
|
|
|
- <view class="row2 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
<view class="card-content style2" v-if="item.cuttentTemplate==3">
|
|
|
- <view class="top">
|
|
|
+ <view class="top">
|
|
|
+ <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
|
|
|
+ shape="circle" v-if="item.headSculpture"></u--image>
|
|
|
+ <u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px"
|
|
|
+ height="66px" shape="circle" v-else></u--image>
|
|
|
+ </view>
|
|
|
+ <view class="bottom flex">
|
|
|
+ <view class="left">
|
|
|
<view class="row1">
|
|
|
<text class="name">{{item.name}}</text>
|
|
|
<text class="post">{{item.post}}</text>
|
|
@@ -87,28 +85,65 @@
|
|
|
<view class="row2">
|
|
|
{{item.companyName}}
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
- <view class="bottom flex">
|
|
|
- <view class="left">
|
|
|
- <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle" v-if="item.headSculpture"></u--image>
|
|
|
- <u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
|
|
|
+ <view class="right">
|
|
|
+ <view class="row3 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px"
|
|
|
+ height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ </view>
|
|
|
+ <view class="row4 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px"
|
|
|
+ height="13px"></u--image>{{ item.phone }}
|
|
|
+ </view>
|
|
|
+ <view class="row4 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px"
|
|
|
+ height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-content style2" v-if="item.cuttentTemplate==4">
|
|
|
+ <view class="top">
|
|
|
+ <view class="row1">
|
|
|
+ <text class="name">{{item.name}}</text>
|
|
|
+ <text class="post">{{item.post}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="row2">
|
|
|
+ {{item.companyName}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="bottom flex">
|
|
|
+ <view class="left">
|
|
|
+ <u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
|
|
|
+ shape="circle" v-if="item.headSculpture"></u--image>
|
|
|
+ <u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px"
|
|
|
+ height="66px" shape="circle" v-else></u--image>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="row3 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/address2.png" width="13px"
|
|
|
+ height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
+ </view>
|
|
|
+ <view class="row4 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/phone2.png" width="12px"
|
|
|
+ height="13px"></u--image>{{ item.phone }}
|
|
|
</view>
|
|
|
- <view class="right">
|
|
|
- <view class="row1 flex">
|
|
|
- <uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
|
|
|
- </view>
|
|
|
- <view class="row2 flex">
|
|
|
- <uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
|
|
|
- </view>
|
|
|
+ <view class="row4 flex">
|
|
|
+ <u--image :showLoading="true" src="/static/imgs/card/remark2.png" width="10px"
|
|
|
+ height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="car-bottom flex">
|
|
|
<view class="left">
|
|
|
- <image src="../../static/imgs/card/home.png" mode="widthFix" style="width: 32rpx;" @click="toHome(item)"></image>
|
|
|
- <image src="../../static/imgs/card/share.png" mode="widthFix" style="width: 35rpx;" @click="share(item)"></image>
|
|
|
- <image src="../../static/imgs/card/ewm.png" mode="widthFix" style="width: 32rpx;" @click="showCode(item)"></image>
|
|
|
+ <image src="../../static/imgs/card/home.png" mode="widthFix" style="width: 32rpx;"
|
|
|
+ @click="toHome(item)"></image>
|
|
|
+ <image src="../../static/imgs/card/share.png" mode="widthFix" style="width: 35rpx;"
|
|
|
+ @click="share(item)"></image>
|
|
|
+ <image src="../../static/imgs/card/ewm.png" mode="widthFix" style="width: 32rpx;"
|
|
|
+ @click="showCode(item)"></image>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<text class="text" @click="topMarking(item)">置顶</text>
|
|
@@ -122,7 +157,7 @@
|
|
|
<!-- <button @click="toEditCard(item)">编辑</button> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="upload flex flex-all-center" @click="addCard">
|
|
@@ -151,19 +186,50 @@
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
|
|
|
- <image :src="selectCode" mode="widthFix"></image>
|
|
|
- </u-popup>
|
|
|
+ <image style='margin:10px;' :src="selectCode" mode="widthFix"></image>
|
|
|
+ </u-popup>
|
|
|
+ <u-popup :show="popupshow" :closeOnClickOverlay='true' :overlayOpacity='0.4' @close='handleHiddenShare'
|
|
|
+ :round="10" mode="bottom">
|
|
|
+ <view>
|
|
|
+ <view class="share-content">
|
|
|
+ <view class="block" @click="toUrl()">
|
|
|
+ <button class="moment">
|
|
|
+ <view class="iconfont icon-pengyouquan"></view>
|
|
|
+ <view>分享朋友圈</view>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="block">
|
|
|
+ <button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
|
|
|
+ <view class="iconfont icon-weixin"></view>
|
|
|
+ <view>分享微信好友</view>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <!-- 生成图片 -->
|
|
|
+ <poster :data="canvasData" background-color="#FFF" :width='750' :height='420' @on-success="posterSuccess"
|
|
|
+ ref="poster" @on-error="posterError"></poster>
|
|
|
+ <point-share @close='showShare=false' :show='showShare'></point-share>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import Poster from '../../components/zhangyuhao-poster/Poster.vue';
|
|
|
+ import PointShare from '../../components/point-share/index.vue';
|
|
|
var that;
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ Poster,
|
|
|
+ PointShare
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- isShowCode:false,
|
|
|
- selectCode:'',
|
|
|
+ isShowCode: false,
|
|
|
+ selectCode: '',
|
|
|
id: '',
|
|
|
+ showShare:false,
|
|
|
+ popupshow:false,
|
|
|
radiovalue: '仅从自己名片列表删除',
|
|
|
radiolist: [{
|
|
|
name: '仅从自己名片列表删除',
|
|
@@ -175,7 +241,10 @@
|
|
|
}
|
|
|
],
|
|
|
isShowDel: false,
|
|
|
- cardList: []
|
|
|
+ cardList: [],
|
|
|
+ canvasData:{},
|
|
|
+ clicknum:0,
|
|
|
+ poster:''
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
@@ -185,18 +254,367 @@
|
|
|
onShow() {
|
|
|
this.init()
|
|
|
},
|
|
|
+ onShareAppMessage(res) {
|
|
|
+
|
|
|
+ console.log(res, this.popupshow)
|
|
|
+ let that = this;
|
|
|
+ //生成名片图片
|
|
|
+ let imageUrl = this.poster
|
|
|
+ console.log("imageUrl", imageUrl)
|
|
|
+ if (res.from === 'button') {
|
|
|
+ let path = `/pages/cardHolder/scanCodeAddCard?id=${that.currectData.id}`
|
|
|
+ return {
|
|
|
+ title: this.popupshow ? `${that.currectData.name}分享的名片~` : '电子名片',
|
|
|
+ path: path,
|
|
|
+ imageUrl: this.popupshow ? imageUrl : '',
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (res.from === 'menu') {
|
|
|
+ return {
|
|
|
+ title: '我的名片',
|
|
|
+ path: '/pages/tabBarPro/index/index',
|
|
|
+ imageUrl: this.popupshow ? imageUrl : ''
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
- showCode(val){
|
|
|
+ toUrl(){
|
|
|
+ this.popupshow=false
|
|
|
+ this.showShare=true
|
|
|
+ },
|
|
|
+ handleHiddenShare() {
|
|
|
+ this.popupshow = false
|
|
|
+ },
|
|
|
+ posterError(err) {
|
|
|
+ console.log(err)
|
|
|
+ uni.hideLoading()
|
|
|
+ },
|
|
|
+ posterSuccess(url) {
|
|
|
+ console.log("hahahah", url)
|
|
|
+ // 生成成功,会把临时路径在这里返回
|
|
|
+ this.poster = url;
|
|
|
+ uni.hideLoading()
|
|
|
+ this.popupshow = true
|
|
|
+ console.log(url)
|
|
|
+
|
|
|
+ },
|
|
|
+ showCode(val) {
|
|
|
this.selectCode = val.qrCodeMyself
|
|
|
this.isShowCode = true
|
|
|
},
|
|
|
- share(){
|
|
|
-
|
|
|
+ share(item) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ this.currectData = item
|
|
|
+ var data = [{
|
|
|
+ type: 'image',
|
|
|
+ path: this.currectData.currentBackground,
|
|
|
+ use: 'bg',
|
|
|
+ x: -10,
|
|
|
+ y: 0,
|
|
|
+ width: 530,
|
|
|
+ height: 325
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: this.currectData.headSculpture,
|
|
|
+ shape: 'circle',
|
|
|
+ use: 'head',
|
|
|
+ x: 30,
|
|
|
+ y: 30,
|
|
|
+ width: 100,
|
|
|
+ height: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: this.currectData.name,
|
|
|
+ use: 'name',
|
|
|
+ x: 150,
|
|
|
+ y: 50,
|
|
|
+ size: 24,
|
|
|
+ color: '#000'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: this.currectData.post,
|
|
|
+ use: 'post',
|
|
|
+ x: 240,
|
|
|
+ y: 55,
|
|
|
+ size: 18,
|
|
|
+ color: '#666666'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: this.currectData.companyName,
|
|
|
+ use: 'companyName',
|
|
|
+ x: 150,
|
|
|
+ y: 95,
|
|
|
+ size: 18,
|
|
|
+ color: '#000'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/address1.png',
|
|
|
+ use: 'address-icon',
|
|
|
+ x: 145,
|
|
|
+ y: 130,
|
|
|
+ width: 15,
|
|
|
+ height: 20
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'textarea',
|
|
|
+ text: this.currectData.province + this.currectData.city + this.currectData.area + this
|
|
|
+ .currectData.detailedAddress,
|
|
|
+ lineSpace: 1,
|
|
|
+ width: 320,
|
|
|
+ use: 'address',
|
|
|
+ x: 175,
|
|
|
+ y: 135,
|
|
|
+ size: 14,
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/phone1.png',
|
|
|
+ use: 'phone-icon',
|
|
|
+ x: 145,
|
|
|
+ y: 163,
|
|
|
+ width: 16,
|
|
|
+ height: 16
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: this.currectData.phone,
|
|
|
+ use: 'phone',
|
|
|
+ x: 175,
|
|
|
+ y: 167,
|
|
|
+ size: 14,
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/remark1.png',
|
|
|
+ use: 'remark-icon',
|
|
|
+ x: 145,
|
|
|
+ y: 197,
|
|
|
+ width: 13,
|
|
|
+ height: 16
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'textarea',
|
|
|
+ text: this.currectData.remark ? this.currectData.remark : '单击添加备注',
|
|
|
+ use: 'remark',
|
|
|
+ lineSpace: 2,
|
|
|
+ width: 200,
|
|
|
+ x: 175,
|
|
|
+ y: 200,
|
|
|
+ size: 13,
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/bgc1.png',
|
|
|
+ use: 'bg1',
|
|
|
+ x: 3,
|
|
|
+ y: 243,
|
|
|
+ width: 240,
|
|
|
+ height: 67
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/bgc2.png',
|
|
|
+ use: 'bg2',
|
|
|
+ x: 225,
|
|
|
+ y: 243,
|
|
|
+ width: 278,
|
|
|
+ height: 67
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/home.png',
|
|
|
+ use: 'home',
|
|
|
+ x: 30,
|
|
|
+ y: 260,
|
|
|
+ width: 33,
|
|
|
+ height: 33
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/share.png',
|
|
|
+ use: 'share',
|
|
|
+ x: 90,
|
|
|
+ y: 263,
|
|
|
+ width: 33,
|
|
|
+ height: 28
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image',
|
|
|
+ path: '../../static/imgs/card/ewm.png',
|
|
|
+ use: 'code',
|
|
|
+ x: 150,
|
|
|
+ y: 263,
|
|
|
+ width: 32,
|
|
|
+ height: 32
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: '置顶',
|
|
|
+ use: 'top',
|
|
|
+ x: 280,
|
|
|
+ y: 265,
|
|
|
+ size: 24,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: '删除',
|
|
|
+ use: 'del',
|
|
|
+ x: 350,
|
|
|
+ y: 265,
|
|
|
+ size: 24,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ text: '编辑',
|
|
|
+ use: 'edit',
|
|
|
+ x: 420,
|
|
|
+ y: 265,
|
|
|
+ size: 24,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ console.log(this.currectData.cuttentTemplate, 111111)
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ switch (this.currectData.cuttentTemplate) {
|
|
|
+ case '2':
|
|
|
+ if (data[i].use === 'name' ||
|
|
|
+ data[i].use === 'companyName' ||
|
|
|
+ data[i].use === 'address-icon' ||
|
|
|
+ data[i].use === 'phone-icon' ||
|
|
|
+ data[i].use === 'remark-icon') {
|
|
|
+ data[i].x = 30
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address-icon') {
|
|
|
+ data[i].path = '../../static/imgs/card/address3.png'
|
|
|
+ }
|
|
|
+ if (data[i].use === 'phone-icon') {
|
|
|
+ data[i].path = '../../static/imgs/card/phone3.png'
|
|
|
+ }
|
|
|
+ if (data[i].use === 'remark-icon') {
|
|
|
+ data[i].path = '../../static/imgs/card/remark3.png'
|
|
|
+ }
|
|
|
+ if (data[i].use === 'post') {
|
|
|
+ data[i].x = 100
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address' ||
|
|
|
+ data[i].use === 'phone' ||
|
|
|
+ data[i].use === 'remark') {
|
|
|
+ data[i].x = 60
|
|
|
+ }
|
|
|
+ if (data[i].use == 'head') {
|
|
|
+ data[i].x = 370
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case '3':
|
|
|
+ if (data[i].use === 'name') {
|
|
|
+ data[i].x = 30
|
|
|
+ data[i].y = 150
|
|
|
+ }
|
|
|
+ if (data[i].use === 'companyName') {
|
|
|
+ data[i].x = 30
|
|
|
+ data[i].y = 180
|
|
|
+ }
|
|
|
+ if (data[i].use === 'post') {
|
|
|
+ data[i].x = 100
|
|
|
+ data[i].y = 153
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address-icon' ||
|
|
|
+ data[i].use === 'phone-icon' ||
|
|
|
+ data[i].use === 'remark-icon') {
|
|
|
+ data[i].x = 170
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address-icon') {
|
|
|
+ data[i].y = 150
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address') {
|
|
|
+ data[i].y = 155;
|
|
|
+ data[i].width = 300
|
|
|
+ }
|
|
|
+ if (data[i].use === 'phone-icon') {
|
|
|
+ data[i].y = 180
|
|
|
+ }
|
|
|
+ if (data[i].use === 'phone') {
|
|
|
+ data[i].y = 183
|
|
|
+ }
|
|
|
+ if (data[i].use === 'remark-icon') {
|
|
|
+ data[i].y = 210
|
|
|
+ }
|
|
|
+ if (data[i].use === 'remark') {
|
|
|
+ data[i].y = 212
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address' ||
|
|
|
+ data[i].use === 'phone' ||
|
|
|
+ data[i].use === 'remark') {
|
|
|
+ data[i].x = 190
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case '4':
|
|
|
+ if (data[i].use === 'name' ||
|
|
|
+ data[i].use === 'companyName') {
|
|
|
+ data[i].x = 30
|
|
|
+ }
|
|
|
+ if (data[i].use === 'companyName') {
|
|
|
+ data[i].y = 90
|
|
|
+ }
|
|
|
+ if (data[i].use === 'post') {
|
|
|
+ data[i].x = 100
|
|
|
+ }
|
|
|
+ if (data[i].use == 'head') {
|
|
|
+ data[i].x = 25
|
|
|
+ data[i].y = 120
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address-icon') {
|
|
|
+ data[i].path = '../../static/imgs/card/address2.png'
|
|
|
+ }
|
|
|
+ if (data[i].use === 'phone-icon') {
|
|
|
+ data[i].path = '../../static/imgs/card/phone2.png'
|
|
|
+ }
|
|
|
+ if (data[i].use === 'remark-icon') {
|
|
|
+ data[i].path = '../../static/imgs/card/remark2.png'
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address-icon' ||
|
|
|
+ data[i].use === 'phone-icon' ||
|
|
|
+ data[i].use === 'remark-icon') {
|
|
|
+ data[i].x = 170
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address') {
|
|
|
+ data[i].width = 300
|
|
|
+ }
|
|
|
+ if (data[i].use === 'address' ||
|
|
|
+ data[i].use === 'phone' ||
|
|
|
+ data[i].use === 'remark') {
|
|
|
+ data[i].x = 190
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.canvasData = {
|
|
|
+ clicknum: this.clicknum++,
|
|
|
+ list: data,
|
|
|
+ page:'myInfo'
|
|
|
+ }
|
|
|
+ console.log(1111111)
|
|
|
},
|
|
|
- toHome(item){
|
|
|
+ toHome(item) {
|
|
|
uni.navigateTo({
|
|
|
- url: "/pages/mySet/myHome?id="+item.personalHomeId
|
|
|
+ url: "/pages/mySet/myHome?id=" + item.personalHomeId
|
|
|
})
|
|
|
},
|
|
|
radioChange(n) {
|
|
@@ -217,7 +635,7 @@
|
|
|
},
|
|
|
toEditCard(val) {
|
|
|
uni.navigateTo({
|
|
|
- url: "/pages/mySet/editCard?itemVal="+JSON.stringify(val)
|
|
|
+ url: "/pages/mySet/editCard?itemVal=" + JSON.stringify(val)
|
|
|
})
|
|
|
},
|
|
|
delCard() {
|
|
@@ -281,136 +699,162 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .content{
|
|
|
+ .content {
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
- .card-content{
|
|
|
+
|
|
|
+ .card-content {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .content1{
|
|
|
- .style1{
|
|
|
+
|
|
|
+ .content1 {
|
|
|
+ .style1 {
|
|
|
display: flex;
|
|
|
padding: 20rpx 30rpx;
|
|
|
width: 85%;
|
|
|
margin-bottom: 90rpx;
|
|
|
- .left{
|
|
|
+
|
|
|
+ .left {
|
|
|
width: 132rpx;
|
|
|
height: 132rpx;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
- .right{
|
|
|
+
|
|
|
+ .right {
|
|
|
margin-left: 40rpx;
|
|
|
- .row1{
|
|
|
- .name{
|
|
|
+
|
|
|
+ .row1 {
|
|
|
+ .name {
|
|
|
font-size: 38rpx;
|
|
|
font-weight: bold;
|
|
|
color: #040000;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
- .post{
|
|
|
+
|
|
|
+ .post {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
- .row2{
|
|
|
+
|
|
|
+ .row2 {
|
|
|
margin-top: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: bold;
|
|
|
color: #323333;
|
|
|
}
|
|
|
- .row3{
|
|
|
+
|
|
|
+ .row3 {
|
|
|
margin-top: 30rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 500;
|
|
|
color: #323333;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .style2{
|
|
|
- padding:30rpx;
|
|
|
- margin-bottom: 100rpx;
|
|
|
- .top{
|
|
|
- .row1{
|
|
|
- .name{
|
|
|
+
|
|
|
+ .style2 {
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-bottom: 100rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ .row1 {
|
|
|
+ .name {
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #040000;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .post {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row2 {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #323333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ margin-top: 48rpx;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ margin-right: 40rpx;
|
|
|
+
|
|
|
+ .row1 {
|
|
|
+ .name {
|
|
|
font-size: 38rpx;
|
|
|
font-weight: bold;
|
|
|
color: #040000;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
- .post{
|
|
|
+
|
|
|
+ .post {
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
- .row2{
|
|
|
+
|
|
|
+ .row2 {
|
|
|
margin-top: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: bold;
|
|
|
color: #323333;
|
|
|
}
|
|
|
}
|
|
|
- .bottom{
|
|
|
- margin-top: 48rpx;
|
|
|
- .left{
|
|
|
- margin-right: 40rpx;
|
|
|
- .row1{
|
|
|
- .name{
|
|
|
- font-size: 38rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #040000;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- .post{
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- .row2{
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #323333;
|
|
|
- }
|
|
|
+
|
|
|
+ .right {
|
|
|
+
|
|
|
+ .row1,
|
|
|
+ .row2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #323333;
|
|
|
}
|
|
|
- .right{
|
|
|
- .row1,.row2{
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #323333;
|
|
|
- }
|
|
|
- .row2{
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ .row2 {
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- .card-list{
|
|
|
- padding:0 20rpx;
|
|
|
- .title-name{
|
|
|
+
|
|
|
+ .card-list {
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .title-name {
|
|
|
font-weight: bold;
|
|
|
color: #19191A;
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card-list-item {
|
|
|
width: calc(100% + 40rpx);
|
|
|
- left:-20rpx;
|
|
|
+ left: -20rpx;
|
|
|
position: relative;
|
|
|
border-radius: 30rpx;
|
|
|
padding: 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
- .car-bottom{
|
|
|
+
|
|
|
+ .car-bottom {
|
|
|
position: absolute;
|
|
|
bottom: 20rpx;
|
|
|
- left:20rpx;
|
|
|
+ left: 20rpx;
|
|
|
width: calc(100% - 40rpx);
|
|
|
- .left{
|
|
|
+
|
|
|
+ .left {
|
|
|
position: absolute;
|
|
|
padding: 20rpx 0;
|
|
|
width: 310rpx;
|
|
@@ -420,7 +864,8 @@
|
|
|
background: url("../../static/imgs/card/bgc1.png") no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
- .right{
|
|
|
+
|
|
|
+ .right {
|
|
|
font-size: 26rpx;
|
|
|
padding: 20rpx 0;
|
|
|
position: relative;
|
|
@@ -431,11 +876,13 @@
|
|
|
justify-content: space-evenly;
|
|
|
background: url("../../static/imgs/card/bgc2.png") no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- .text{
|
|
|
+
|
|
|
+ .text {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.left {
|
|
|
width: 30%;
|
|
|
|
|
@@ -462,20 +909,42 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .upload{
|
|
|
+
|
|
|
+ .upload {
|
|
|
background-color: #fff;
|
|
|
margin: 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 76rpx;
|
|
|
- .solids{
|
|
|
+
|
|
|
+ .solids {
|
|
|
flex-direction: column;
|
|
|
- .text{
|
|
|
+
|
|
|
+ .text {
|
|
|
margin-top: 20rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #666666;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ }
|
|
|
+ .share-content {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ button {
|
|
|
+ background: transparent;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-pengyouquan,.icon-weixin{
|
|
|
+ font-size:50px;
|
|
|
+ color:#33CC00;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|