前端

xiaochengxu/pages/cardHolder/cardHolder.vue

@@ -229,27 +229,26 @@
 			</view>
 
 		</view>
-		<u-popup :show="popupshow" mode="bottom">
+		<u-popup :show="popupshow" :closeOnClickOverlay='true' :overlayOpacity='0.4' @close='handleHiddenShare' :round="10" mode="bottom">
 			<view>
-				<view class="share-to">
+				<!-- <view class="share-to">
 					<text>分享到</text>
-				</view>
-				<view class="content">
+				</view> -->
+				<view class="share-content">
 
 					<view class="block" @click="toUrl()">
 						<button class="moment">
-							<text class="iconfont icon-weixin"></text>
-							<!-- <image src="/static/img/moment.png" mode="aspectFill"></image>					 -->
-							<text>扫码分享</text>
+							<image style='width:108rpx;height:108rpx;' src="@/static/imgs/scancode.png" mode="aspectFill"></image>					
+							<view>扫码分享</view>
 						</button>
 					</view>
 					<view class="block">
-						<button class="shareBtn" type="default" data-name="shareBtn" open-type="share"> 分享</button>
+						<button class="shareBtn" type="default" data-name="shareBtn" open-type="share"> 
+						<image style='width:108rpx;height:108rpx;' src="@/static/imgs/shade.png" mode="aspectFill"></image>	
+						<view>分享微信好友</view>
+						</button>
 					</view>
 				</view>
-				<view class="cancel" @click.stop="handleHiddenShare">
-					<text>取消</text>
-				</view>
 			</view>
 		</u-popup>
 		<!-- <image :src="poster" style="width: 750rpx;height: 1334rpx;"></image> -->
@@ -335,7 +334,7 @@
 				return {
 					title: '商通线上商城',
 					path: '/pages/tabBarPro/index/index',
-					imageUrl: imageUrl
+					imageUrl: this.popupshow?imageUrl:''
 				};
 			}
 		},
@@ -349,6 +348,7 @@
 		},
 		methods: {
 			handleHiddenShare(){
+				console.log(11111)
 				this.popupshow=false
 			},
 			posterError(err) {
@@ -1206,4 +1206,18 @@
 		transform: translateY(-50%);
 		text-align: center;
 	}
+	.share-content{
+		display:flex;
+		padding:20rpx;
+		justify-content: center;
+		button{
+			background:transparent;
+			line-height:1;
+		}
+		button:after{
+			border:none;
+		}
+		font-size:24rpx;
+	}
+	
 </style>

xiaochengxu/pages/mySet/mySet.vue

@@ -8,8 +8,8 @@
 				</view>
 			</view>
 			<view class="position">
-				<image src="../../static/imgs/mySet/share.png" mode="widthFix" class="right-img"></image>
-				<image src="../../static/imgs/mySet/ewm.png" mode="widthFix" class="right-img"></image>
+				<image @click='selectCard' src="../../static/imgs/mySet/share.png" mode="widthFix" class="right-img"></image>
+				<image @click='selectCard1' src="../../static/imgs/mySet/ewm.png" mode="widthFix" class="right-img"></image>
 			</view>
 		</view>
 		<view class="content2">
@@ -23,14 +23,37 @@
 				<span class="right"><image src="../../static/imgs/mySet/yjt.png" mode="widthFix" class="row-right-img"></image></span>
 			</view>
 		</view>
+		<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
+		    <image :src="selectCode" mode="widthFix"></image>
+		</u-popup>
+		<u-picker keyName="cardBusiness" :confirmType='"share"' :confirmText='"分享"' title="选择名片" 
+			@cancel="show=false" closeOnClickOverlay @change="cardChange" :show="show" :columns="cardList"></u-picker>
+		<u-picker keyName="cardBusiness" confirmText='确定' title="选择名片"
+			@cancel="show1=false" closeOnClickOverlay @confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
+			<poster :data="canvasData" background-color="#FFF"
+			:width='750' :height='420'
+				@on-success="posterSuccess" ref="poster" @on-error="posterError"></poster>
 	</view>
 </template>
 
 <script>
+	import Poster from '../../components/zhangyuhao-poster/Poster.vue'
 	export default {
+		components: {
+			Poster
+		},
 		data() {
 			return {
 				userInfo: {},
+				cardList:[],
+				canvasData:{},
+				currectData:{},
+				selectCode:'',
+				show:false,
+				clicknum:0,
+				popupshow:false,
+				show1:false,
+				isShowCode:false,
 				menuList: [{
 						name: "我的名片",
 						type: 'myInfo',
@@ -72,8 +95,324 @@
 		onShow() {
 			this.userInfo = uni.getStorageSync("userInfo")
 			console.log(this.userInfo)
+			this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
+				commonId: uni.getStorageSync("userInfo").id
+			}, failres => {
+				this.$refs.uToast.show({
+					type: 'error',
+					message: failres.errmsg,
+				})
+				uni.hideLoading()
+			}).then(res => {
+				this.cardList = [res.data.items]
+				this.cardChange({value:this.cardList[[0]]})
+			})
+		},
+		onShareAppMessage(res) {
+			this.popupshow=false
+			console.log(res,this.popupshow)
+			let that = this;
+			//生成名片图片
+			let imageUrl = this.poster
+			console.log("imageUrl", imageUrl)
+			if (res.from === 'button') {
+				let path = `/pages/mySet/lookCard?id=${that.currectData.id}`
+				return {
+					title: `${that.currectData.name}分享的名片~`,
+					path: path,
+					imageUrl: imageUrl,
+				};
+			}
+			if (res.from === 'menu') {
+				return {
+					title: '商通线上商城',
+					path: '/pages/tabBarPro/index/index',
+					imageUrl: this.popupshow?imageUrl:''
+				};
+			}
+		},
+		// 分享到朋友圈
+		onShareTimeline() {
+			return {
+				title: '商通线上商城',
+				path: '/pages/index/index',
+				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
+			};
 		},
 		methods: {
+			handleHiddenShare(){
+				this.popupshow=false
+			},
+			selectCard(){
+				this.show=true
+			},
+			selectCard1(){
+				this.show1=true
+			},
+			cardConfirm(e){
+				console.log(e)
+				this.currectData=e.value[0]
+				this.selectCode=e.value[0].qrCodeMyself
+				this.show1=false
+				this.isShowCode=true
+			},
+			cardChange(e){
+				
+				this.currectData=e.value[0]
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
+				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/bg3.png',
+						use:'bg1',
+						x: 0,
+						y: 243,
+						width: 370,
+						height: 67
+					},
+					{
+						type: 'image',
+						path: '../../static/imgs/card/bg4.png',
+						use:'bg2',
+						x: 355,
+						y: 243,
+						width: 150,
+						height: 67
+					},
+					{
+						type: 'image',
+						path: '../../static/imgs/card/home.png',
+						use:'home',
+						x: 65,
+						y: 260,
+						width: 33,
+						height: 33
+					},
+					{
+						type: 'text',
+						text:this.currectData.classifyName?this.currectData.classifyName:'默',
+						use:'classify',
+						x: 145,
+						y: 263,
+						size:34,
+						color:'#fff'
+					},
+					{
+						type: 'image',
+						path: '../../static/imgs/card/share.png',
+						use:'share',
+						x: 235,
+						y: 263,
+						width: 33,
+						height: 28
+					},
+				]
+				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==='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].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}
+			},
+			posterError(err) {
+			    console.log(err)
+				uni.hideLoading()
+			},
+			posterSuccess(url) {
+				console.log("hahahah",url)
+			    // 生成成功，会把临时路径在这里返回
+			    this.poster = url;
+			    console.log(url)
+				// this.show=false
+				uni.hideLoading()
+			},
 			menuClick(typeName) {
 				let _url = '/pages/mySet/' + typeName
 				console.log(_url)
@@ -146,4 +485,6 @@
 			border: none!important;
 		}
 	}
+
+	
 </style>

xiaochengxu/pages/mySet/newCard.vue

@@ -256,7 +256,6 @@
 		},
 		methods: {
 			changeTemplate(index) {
-				console.log(this.imgList[index].dictSort)
 				this.selectIndex = index
 				this.cardInfo.currentBackground = this.imgList[index].dictLabel
 				this.cardInfo.cuttentTemplate = this.imgList[index].dictSort

xiaochengxu/uni_modules/uview-ui/components/u-picker/props.js

@@ -40,6 +40,11 @@ export default {
             type: String,
             default: uni.$u.props.picker.confirmText
         },
+		// 确认按钮的类型
+		confirmType: {
+		    type: String,
+		    default: uni.$u.props.picker.confirmType
+		},
         // 取消按钮的颜色
         cancelColor: {
             type: String,

xiaochengxu/uni_modules/uview-ui/components/u-picker/u-picker.vue

@@ -9,6 +9,7 @@
 				:cancelColor="cancelColor"
 				:confirmColor="confirmColor"
 				:cancelText="cancelText"
+				:confirmType="confirmType"
 				:confirmText="confirmText"
 				:title="title"
 				@cancel="cancel"

xiaochengxu/uni_modules/uview-ui/components/u-toolbar/props.js

@@ -29,6 +29,11 @@ export default {
         title: {
             type: String,
             default: uni.$u.props.toolbar.title
-        }
+        },
+		// 确认按钮的类型
+		confirmType: {
+		    type: String,
+		    default: uni.$u.props.toolbar.confirmType
+		},
     }
 }

xiaochengxu/uni_modules/uview-ui/components/u-toolbar/u-toolbar.vue

@@ -25,12 +25,18 @@
 			hover-class="u-hover-class"
 		>
 			<text
+			v-if='!confirmType'
 				class="u-toolbar__wrapper__confirm"
 				@tap="confirm"
 				:style="{
 				color: confirmColor
 			}"
 			>{{ confirmText }}</text>
+			<button v-if='confirmType=="share"' :style="{
+				color: confirmColor
+			}" class="shareBtn u-toolbar__wrapper__confirm" type="default" data-name="shareBtn" open-type="share">
+				{{ confirmText }}
+			</button>
 		</view>
 	</view>
 </template>
@@ -99,4 +105,12 @@
 			}
 		}
 	}
+	.shareBtn{
+		background:transparent;
+		line-height:1;
+		font-size:30rpx;
+	}
+	.shareBtn:after{
+		border:none;
+	}
 </style>