电子名片

xiaochengxu/pages/cardHolder/cardHolder.vue

@@ -1,90 +1,195 @@
 <template>
 	<view class="content">
-		<u-navbar title="电子名片" placeholder>
+		<u-navbar title="电子名片" placeholder bgColor="#112253" titleStyle="color:#fff">
 			<view class="u-nav-slot relative" slot="left">
-				<u-icon name="bell" size="26" @click="toNotice"></u-icon>
+				<u-icon name="bell" size="26" @click="toNotice" color="#fff"></u-icon>
 				<u-badge :isDot="unread>0?true:false" type="error" class="point"></u-badge>
 			</view>
 		</u-navbar>
 		<view class="content1 flex-row-center">
-			<view class="col flex">
-				<uni-icons type="scan" size="30" @click="scan"></uni-icons>
-			</view>
 			<view class="search flex flex-between" @click="search">
 				<view class="left flex">
-					<uni-icons type="search" size="24"></uni-icons>
+					<uni-icons type="search" size="24" color="#9199af"></uni-icons>
 					<text class="search-val"> {{searchVal?searchVal:'搜索名片'}}</text>
 					<uni-icons type="closeempty" size="24" @click.native.stop="delSearchVal"
 						v-if="searchVal"></uni-icons>
 				</view>
 				<view class="right">
-					<uni-icons type="mic" size="24" @click.native.stop="micOpen"></uni-icons>
+					<uni-icons type="mic" size="24" @click.native.stop="micOpen" color="#9199af"></uni-icons>
 				</view>
 			</view>
+			<view class="col flex">
+				<uni-icons type="scan" size="30" @click="scan" color="#fff"></uni-icons>
+			</view>
 		</view>
 
 		<view class="content2">
 			<view class="all-type flex" @click="selectType">
 				<text>{{typeName?typeName:'全部分类'}}</text>
-				<uni-icons type="bottom" size="20"></uni-icons>
+				<uni-icons type="bottom" size="18" color="#fff"></uni-icons>
 			</view>
 		</view>
-		<!-- <u-skeleton
-		:animate="true"
-			    rows="3"
-			    title
-				:loading='loading'
-			></u-skeleton> -->
-		<view v-if='islongPress'>
-			<view @click="del">删除</view>
-			<view @click='islongPress=false'>取消</view>
-			<u-checkbox-group placement="column" @change="checkboxChange($event,'')">
-				<u-checkbox :checked='checked' name='全部' :customStyle="{marginBottom: '8px'}">
-				</u-checkbox>
-			</u-checkbox-group>
-		</view>
+		<view class="content3">
 
-		<mescroll-body v-if='cardHolderList' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback"
-			@down="downCallback">
-			<view v-for='(item,index) in cardHolderList' @longpress="longpress" class="content3 flex">
-				<view class="left">
-					<view class="top flex-row-center">
-						<image :src="item.headSculpture" mode="widthFix" class="img"></image>
-					</view>
-					<view class="bottom flex flex-evenly">
-						<uni-icons @click="toHome(item)" type="home" size="20"></uni-icons>
-						<text @click='switchType(item)'>{{item.classify?item.classifyName:'默'}}</text>
-						<uni-icons @click='share(item)' type="redo" size="20" color=''></uni-icons>
-					</view>
-				</view>
-				<view class="right">
-					<view class="row1 flex">
-						<text>{{item.name}}</text>
-						<text class="line"></text>
-						<text>{{item.post}}</text>
-						<u-checkbox-group v-if='islongPress' placement="column" @change="checkboxChange($event,index)">
-							<u-checkbox :name='index+1' :checked='item.checked' :customStyle="{marginBottom: '8px'}">
-							</u-checkbox>
-						</u-checkbox-group>
-					</view>
-					<view class="row2">
-						{{item.companyName}}
-					</view>
-					<view class="row3" @click="toMap(item)">
-						<uni-icons type="redo" size="20"></uni-icons>
-						<text>{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</text>
-					</view>
-					<view class="row3">
-						<uni-icons type="redo" size="20"></uni-icons>
-						<text>{{item.phone}}</text>
+			<mescroll-body v-if='cardHolderList' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback"
+				@down="downCallback">
+				<view v-for='(item,index) in cardHolderList' @longpress="longpress" class="item flex">
+					<!-- <view class="card-list-item" style="background:red"> -->
+					<view class="card-list-item" :style="'background:url('+item.currentBackground+');background-size:100% 100%'">
+						<view class="card-content style1" v-if="item.cuttentTemplate==0">
+							<view class="left">
+								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle"></u--image>
+							</view>
+							<view class="right">
+								<view class="row1">
+									<text class="name">{{item.name}}</text>
+									<text class="post">{{item.post}}</text>
+								</view>
+								<view class="row2">
+									{{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 }}
+								</view>
+								<view class="row4 flex">
+									<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
+								</view>
+								<!-- <view class="">
+									备注
+								</view> -->
+							</view>
+						</view>
+						<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==1">
+							<view class="right">
+								<view class="row1">
+									<text class="name">{{item.name}}</text>
+									<text class="post">{{item.post}}</text>
+								</view>
+								<view class="row2">
+									{{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 }}
+								</view>
+								<view class="row4 flex">
+									<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
+								</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>
+							</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="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="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="car-bottom flex">
+							<view class="left">
+								<image src="../../static/imgs/card/home.png" mode="widthFix" style="width: 32rpx;" @click="toHome(item)"></image>
+								<text @click='switchType(item)' style="color: #fff;">{{item.classify?item.classifyName:'默'}}</text>
+								<image src="../../static/imgs/card/share.png" mode="widthFix" style="width: 35rpx;" @click="share(item)"></image>
+							</view>
+							<view class="right">
+								
+							</view>
+						</view>
 					</view>
-					<view @click='remarkEdit(item)' class="row3">
-						<uni-icons type="redo" size="20"></uni-icons>
-						<text>{{item.remark?item.remark:'单击添加备注'}}</text>
+					
+					
+					
+					<!-- <view class="left">
+						<view class="top flex-row-center">
+							<image :src="item.headSculpture" mode="widthFix" class="img"></image>
+						</view>
+						<view class="bottom flex flex-evenly">
+							<uni-icons @click="toHome(item)" type="home" size="20"></uni-icons>
+							<text @click='switchType(item)'>{{item.classify?item.classifyName:'默'}}</text>
+							<uni-icons @click='share(item)' type="redo" size="20" color=''></uni-icons>
+						</view>
 					</view>
+					<view class="right">
+						<view class="row1 flex">
+							<text>{{item.name}}</text>
+							<text class="line"></text>
+							<text>{{item.post}}</text>
+							<u-checkbox-group v-if='islongPress' placement="column"
+								@change="checkboxChange($event,index)">
+								<u-checkbox :name='index+1' :checked='item.checked'
+									:customStyle="{marginBottom: '8px'}">
+								</u-checkbox>
+							</u-checkbox-group>
+						</view>
+						<view class="row2">
+							{{item.companyName}}
+						</view>
+						<view class="row3" @click="toMap(item)">
+							<uni-icons type="redo" size="20"></uni-icons>
+							<text>{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</text>
+						</view>
+						<view class="row3">
+							<uni-icons type="redo" size="20"></uni-icons>
+							<text>{{item.phone}}</text>
+						</view>
+						<view @click='remarkEdit(item)' class="row3">
+							<uni-icons type="redo" size="20"></uni-icons>
+							<text>{{item.remark?item.remark:'单击添加备注'}}</text>
+						</view>
+					</view> -->
 				</view>
-			</view>
-		</mescroll-body>
+			</mescroll-body>
+		</view>
+
 		<u-picker :show="isShowType" :columns="typeColumns" keyName="circleName" title="选择分类" @close="isShowType=false"
 			@cancel="isShowType=false" closeOnClickOverlay @confirm="typeConfirm"></u-picker>
 		<u-toast ref="uToast"></u-toast>
@@ -130,8 +235,8 @@
 		</u-popup>
 		<!-- <image :src="poster" style="width: 750rpx;height: 1334rpx;"></image> -->
 		<!-- 生成图片 -->
-		<poster :list="canvasData" background-color="#FFF"
-			@on-success="posterSuccess" ref="poster" @on-error="posterError"></poster>
+		<poster :list="canvasData" background-color="#FFF" @on-success="posterSuccess" ref="poster"
+			@on-error="posterError"></poster>
 	</view>
 </template>
 
@@ -177,7 +282,7 @@
 			this.searchVal = uni.getStorageSync("search_val") ? uni.getStorageSync("search_val") : ''
 		},
 		mounted() {
-			
+
 		},
 		onLoad: function() {
 			wx.showShareMenu({
@@ -190,7 +295,7 @@
 			let that = this;
 			//生成名片图片
 			let imageUrl = this.poster
-			console.log("imageUrl",imageUrl)
+			console.log("imageUrl", imageUrl)
 			if (res.from === 'button') {
 				let path = `/pages/cardHolder/scanCodeAddCard?id=${that.currectData.id}`
 				return {
@@ -217,14 +322,14 @@
 		},
 		methods: {
 			posterError(err) {
-			                console.log(err)
-			            },
-			            posterSuccess(url) {
-							console.log("hahahah",url)
-			                // 生成成功，会把临时路径在这里返回
-			                this.poster = url;
-			                console.log(url)
-			            },
+				console.log(err)
+			},
+			posterSuccess(url) {
+				console.log("hahahah", url)
+				// 生成成功，会把临时路径在这里返回
+				this.poster = url;
+				console.log(url)
+			},
 			toHome(item) {
 				uni.navigateTo({
 					url: "/pages/mySet/myHome?id=" + item.personalHomeId
@@ -239,7 +344,8 @@
 				this.popupshow = false
 				this.qrcodeShow = true
 			},
-			share(item) {debugger
+			share(item) {
+				debugger
 				this.currectData = item
 				this.canvasData = [{
 						type: 'image',
@@ -256,7 +362,7 @@
 					// 	y: 0,
 					// 	size:13
 					// },
-					
+
 				]
 				// this.popupshow = true
 			},
@@ -629,7 +735,7 @@
 
 <style lang="scss" scoped>
 	.content {
-		padding: 0 20rpx;
+		// padding: 0 20rpx;
 	}
 
 	.u-nav-slot {
@@ -641,49 +747,182 @@
 	}
 
 	.content1 {
-		margin-top: 20rpx;
+		padding: 20rpx;
+		background-color: #112253;
 
 		.search {
-			margin-left: 20rpx;
-			border: 1px solid #ccc;
+			color: #9199af;
+			background: #22325f;
 			border-radius: 50rpx;
 			width: 100%;
 			padding: 10rpx 30rpx;
 			box-sizing: border-box;
-
-			.left {
-				.search-val {
-					margin-left: 30rpx;
-				}
-			}
+			margin-right: 20rpx;
 		}
 	}
 
 	.content2 {
-		.all-type {}
+		background: #112253;
+		color: #fff;
+		padding: 20rpx 20rpx 200rpx 20rpx;
+		border-radius: 0px 0px 20px 20px;
+
 	}
 
 	.content3 {
-		border: 1px solid #ccc;
+		// padding:0 20rpx;
+		position: relative;
+		top: -170rpx;
+		.style1{
+			display: flex;
+			padding: 20rpx 30rpx;
+			width: 85%;
+			margin-bottom: 90rpx;
+			.left{
+				width: 132rpx;
+				height: 132rpx;
+				border-radius: 50%;
+			}
+			.right{
+				margin-left: 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;
+				}
+				.row3{
+					margin-top: 30rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #323333;
+					
+				}
+			}
+		}
+		.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{
+								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;
+						}
+						.row2{
+							margin-top: 20rpx;
+						}
+					}
+				}
+				
+		}
+	.card-list-item {
+		width: calc(100%);
+		// left:-20rpx;
+		position: relative;
 		border-radius: 30rpx;
 		padding: 40rpx;
 		box-sizing: border-box;
-
+		.car-bottom{
+			position: absolute;
+			bottom: 63rpx;
+			left:20rpx;
+			// width: calc(100% - 40rpx);
+			.left{
+				// top: -40rpx;
+				position: absolute;
+				padding: 20rpx 0;
+				width: 70vw;
+				height: 80rpx;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				justify-content: space-evenly;
+				background: url("../../static/imgs/card/bgc1.png") no-repeat center;
+				background-size: 100% 100%;
+			}
+			.right{
+				position: absolute;
+				left: 65vw;
+				height: 80rpx;
+				width: 30vw;
+				background: url("../../static/imgs/card/right-bgc.png") no-repeat center;
+				background-size: 100% 100%;
+			}
+		}
 		.left {
 			width: 30%;
-
+	
 			.top {
-
+	
 				margin-bottom: 20rpx;
 			}
-
+	
 			.img {
 				width: 80%;
 			}
-
+	
 			.bottom {}
 		}
-
+	
 		.right {
 			.row1 {
 				.line {
@@ -695,6 +934,8 @@
 			}
 		}
 	}
+		
+	}
 
 	.slot-content {
 		width: 100%;

xiaochengxu/pages/cardHolder/search.vue

@@ -97,7 +97,7 @@
 			touchendBtn() {
 				console.log("录音结束")
 				let that = this
-				this.longPress = '1';
+				this.longPress = '1'; 
 				recorderManager.onStop((res) => {
 					this.tempFilePath = res.tempFilePath
 					let _file = ''