Просмотр исходного кода

✨ feat:用户卡片转列表形式

zbb 2 часов назад
Родитель
Сommit
edc598ec18

+ 1 - 0
App.vue

@@ -21,6 +21,7 @@
 		box-sizing: border-box;
 	}
 
+
 	/*每个页面公共 css */
 	@import '@/uni_modules/uni-scss/index.scss';
 	@import 'animate.css';

+ 1 - 26
api/card.js

@@ -1,6 +1,5 @@
 /**
  * 名片管理 API 接口
- * 根据 D:\下载与安装\crm 名片管理.md 文档定义
  */
 import request from '@/utils/request.js'
 
@@ -15,30 +14,6 @@ export const getCardInfo = (params = {}) => {
 	return request.get('/crm/card/info', params)
 }
 
-/**
- * 获取名片二维码
- * GET /crm/card/qrcode
- * @param {Object} params - 请求参数
- * @param {number} params.userId - 用户 ID
- * @returns {Promise}
- */
-export const getCardQrcode = (params = {}) => {
-	return request.get('/crm/card/wxacode', params)
-}
-
-/**
- * 获取公司信息
- * GET /crm/card/companyInfo
- * @param {Object} params - 请求参数
- * @param {number} params.userId - 用户 ID
- * @returns {Promise}
- */
-export const getCompanyInfo = (params = {}) => {
-	return request.get('/crm/card/companyInfo', params)
-}
-
 export default {
-	getCardInfo,
-	getCardQrcode,
-	getCompanyInfo
+	getCardInfo
 }

+ 13 - 6
components/companyIntroduce/index.vue

@@ -2,9 +2,9 @@
 	<view class="company-section">
 		<view class="company-title">
 			<image class="img" src="/static/image/public/qyjj-icon.png" mode=""></image>
-			<text class="name">{{companyInfo.name || cardInfo.companyName}}</text>
+			<text class="name">{{cardInfo.companyDTO?.name || cardInfo.companyName}}</text>
 		</view>
-		<rich-text class="company-text" :nodes="companyInfo.introduce" v-if="companyInfo.introduce"></rich-text>
+		<rich-text class="company-text" :nodes="companyIntroduce" v-if="companyIntroduce"></rich-text>
 		<EmptyState
 			v-else
 			text=""
@@ -17,8 +17,11 @@
 <script setup>
 	import EmptyState from '@/components/empty-state/index.vue'
 	import {
-		onShareAppMessage
-	} from '@dcloudio/uni-app';
+		formatRichText
+	} from '@/utils/index.js'
+	import {
+		computed
+	} from 'vue'
 	import {
 		useUserStore
 	} from '@/store/modules/user.js'
@@ -27,9 +30,13 @@
 	} from 'pinia'
 	const userStore = useUserStore()
 	const {
-		companyInfo,
 		cardInfo
 	} = storeToRefs(userStore)
+
+	const companyIntroduce = computed(() => {
+		const intro = cardInfo.value.companyDTO?.introduce || ''
+		return intro ? formatRichText(intro) : ''
+	})
 </script>
 <style lang="scss" scoped>
 	// 企业简介
@@ -71,4 +78,4 @@
 			}
 		}
 	}
-</style>
+</style>

+ 5 - 3
components/shareButton/index.vue

@@ -1,10 +1,11 @@
 <template>
 	<view class="control-card">
-		<button class="item" open-type="share"> 发名片 </button>
+		<button class="item" open-type="share" :loading="loading"> 发名片 </button>
 	</view>
 </template>
 
 <script setup>
+	const props = defineProps(['loading'])
 	import {
 		onShareAppMessage
 	} from '@dcloudio/uni-app';
@@ -17,12 +18,13 @@
 	const userStore = useUserStore()
 	const {
 		cardInfo,
-		cardImage
+		cardImage,
+		currentIndex
 	} = storeToRefs(userStore)
 	onShareAppMessage(() => {
 		return {
+			path: `pages/splash/splash?userId=${cardInfo.value.userId}&currentIndex=${currentIndex.value}`,
 			userName: '小程序',
-			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
 			imageUrl: cardImage.value
 		};
 	});

+ 1 - 1
components/user-card/index.vue

@@ -7,7 +7,7 @@
 		<view class="user-header">
 			<view class="name-row">
 				<text class="user-name">{{ info.nickName || '用户' }}</text>
-				<text class="user-role">{{ info.postName || '职位' }}</text>
+				<text class="user-role">{{ info.jobTitle || '职位' }}</text>
 			</view>
 			<text class="company-name">{{ info.companyName || '公司名称' }}</text>
 		</view>

+ 1 - 1
config/index.js

@@ -4,7 +4,7 @@
  */
 
 // 手动修改此处切换环境:development | test | production
-const CURRENT_ENV = 'production'
+const CURRENT_ENV = 'development'
 
 // 同步导入所有环境配置
 import developmentConfig from './env.development.js'

+ 1 - 1
pages/index/index - 副本.vue

@@ -17,7 +17,7 @@
 					<view class="user-header">
 						<view class="name-row">
 							<text class="user-name">{{ cardInfo.nickName || '用户' }}</text>
-							<text class="user-role">{{ cardInfo.postName || '职位' }}</text>
+							<text class="user-role">{{ cardInfo.jobTitle || '职位' }}</text>
 						</view>
 						<text class="company-name">{{ cardInfo.companyName || '公司名称' }}</text>
 					</view>

+ 53 - 7
pages/index/index.vue

@@ -10,11 +10,20 @@
 			</template>
 		</NavBar>
 		<image class="top-bg" src="/static/image/home/top-bg.png" />
-		<!-- 名片卡片:果冻弹入 -->
+
+		<!-- 名片轮播 -->
 		<view class="page-top" :class="{activeCard:pageIn}">
-			<UserCard :info="cardInfo" @call="makeCall" />
+			<swiper class="card-swiper" :current="currentIndex" @change="onSwiperChange" circular
+				:indicator-dots="false" :autoplay="false">
+				<swiper-item v-for="(card, idx) in cardList" :key="card.userId || idx">
+					<view class="swiper-item-wrapper">
+						<UserCard :info="card" @call="makeCall" />
+					</view>
+				</swiper-item>
+			</swiper>
 			<ShareButton />
 		</view>
+
 		<view class="card-content" :class="{activeCard:pageIn}">
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
@@ -56,8 +65,10 @@
 	const userStore = useUserStore()
 	const {
 		cardInfo,
-		companyInfo,
-		cardImage
+		cardList,
+		currentIndex,
+		cardImage,
+		queryCardPoster
 	} = storeToRefs(userStore)
 	let appName = ref('')
 
@@ -67,10 +78,15 @@
 	onMounted(() => {
 		pageIn.value = true
 	})
+	const loading = ref(false)
+
+	const onSwiperChange =  (e) => {
+		userStore.setCurrentIndex(e.detail.current)
+	}
 
 	onShareAppMessage(() => {
 		return {
-			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
+			path: `pages/splash/splash?userId=${cardInfo.value.userId}&currentIndex=${currentIndex.value}`,
 			imageUrl: cardImage.value,
 			title: `${cardInfo.value.nickName} 向你分享了名片`
 		};
@@ -183,10 +199,40 @@
 		margin: 0 24rpx 24rpx;
 		position: relative;
 		z-index: 2;
-		transform: scale(0.78);
+		transform: scale(0.85);
+	}
+
+	// 名片轮播
+	.card-swiper {
+		height: 392rpx;
+		position: relative;
+		z-index: 2;
 	}
 
 
+	// 轮播索引指示器
+	.swiper-indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 12rpx;
+		margin-top: 16rpx;
+		padding-bottom: 8rpx;
+
+		.indicator-dot {
+			width: 14rpx;
+			height: 14rpx;
+			border-radius: 50%;
+			background: rgba(0, 0, 0, 0.15);
+			transition: all 0.3s ease;
+
+			&.active {
+				width: 32rpx;
+				border-radius: 8rpx;
+				background: rgba(64, 128, 255, 0.8);
+			}
+		}
+	}
 
 	// 名片内容区域
 	.card-content {
@@ -198,7 +244,7 @@
 		position: relative;
 		bottom: 24rpx;
 		z-index: 2;
-		transform:translateY(150rpx);
+		transform: translateY(150rpx);
 	}
 
 

+ 2 - 5
pages/login/login.vue

@@ -248,8 +248,7 @@
 				// 调用 store 里的函数获取名片和公司信息
 				saveToekn(token)
 				let cardInfo = await userStore.queryCardInfo()
-				await userStore.queryCompanyInfo()
-				await userStore.queryCardQrcode()
+				await userStore.queryCardPoster()
 				console.log(cardInfo, "cardInfocardInfocardInfo");
 
 				uni.showToast({
@@ -327,13 +326,11 @@
 			if (token) {
 				saveToekn(token)
 				await userStore.queryCardInfo()
-				await userStore.queryCompanyInfo()
+				await userStore.queryCardPoster()
 				uni.showToast({
 					title: '登录成功',
 					icon: 'success'
 				})
-				await userStore.queryCardPoster()
-				// await userStore.queryCardQrcode()
 				uni.reLaunch({
 					url: '/pages/index/index'
 				})

+ 62 - 11
pages/mine/card.vue

@@ -8,12 +8,25 @@
 				<!-- <view class="left-title">{{appName}}</view> -->
 			</template>
 		</NavBar>
-		<!-- 名片卡片 -->
-		<view class="page-top">
-			<UserCard :info="cardInfo" @call="makeCall" />
-			<ShareButton />
+		<!-- 名片轮播 -->
+		<view class="page-top" :class="{activeCard:pageIn}">
+			<swiper
+				class="card-swiper"
+				:current="currentIndex"
+				@change="onSwiperChange"
+				circular
+				:indicator-dots="false"
+				:autoplay="false"
+			>
+				<swiper-item v-for="(card, idx) in cardList" :key="card.userId || idx">
+					<view class="swiper-item-wrapper">
+						<UserCard :info="card" @call="makeCall" />
+						<ShareButton />
+					</view>
+				</swiper-item>
+			</swiper>
 		</view>
-		<view class="card-content" >
+		<view class="card-content" :class="{activeCard:pageIn}">
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
 		</view>
@@ -29,7 +42,7 @@
 	import UserAvatar from '@/components/user-avatar/index.vue'
 	import EmptyState from '@/components/empty-state/index.vue'
 	import ShareButton from '@/components/shareButton/index.vue'
-		import CompanyIntroduce from '@/components/companyIntroduce/index.vue'
+	import CompanyIntroduce from '@/components/companyIntroduce/index.vue'
 	import UserCard from '@/components/user-card/index.vue'
 	import {
 		useUserStore
@@ -44,13 +57,14 @@
 	const userStore = useUserStore()
 	const {
 		cardInfo,
-		companyInfo,
+		cardList,
+		currentIndex,
 		cardImage
 	} = storeToRefs(userStore)
 
 	onShareAppMessage(() => {
 		return {
-			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
+			path: `pages/splash/splash?userId=${cardInfo.value.userId}&currentIndex=${currentIndex.value}`,
 			imageUrl: cardImage.value,
 			title:`${cardInfo.value.nickName} 向你分享了名片`
 		};
@@ -65,6 +79,10 @@
 		pageIn.value = true
 	})
 
+	const onSwiperChange = (e) => {
+		userStore.setCurrentIndex(e.detail.current)
+	}
+
 	const makeCall = () => {
 		if (cardInfo.value.phonenumber) {
 			uni.makePhoneCall({
@@ -83,7 +101,6 @@
 	.card-container {
 		background: #f5f6f8;
 	}
-
 	.left-title {
 		font-size: 44rpx;
 		font-weight: bold;
@@ -167,6 +184,36 @@
 		margin: 0 24rpx 24rpx;
 		position: relative;
 		z-index: 2;
+		transform: scale(0.85);
+	}
+
+	// 名片轮播
+	.card-swiper {
+		height: 550rpx;
+	}
+
+	// 轮播索引指示器
+	.swiper-indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 12rpx;
+		margin-top: 16rpx;
+		padding-bottom: 8rpx;
+
+		.indicator-dot {
+			width: 14rpx;
+			height: 14rpx;
+			border-radius: 50%;
+			background: rgba(0, 0, 0, 0.15);
+			transition: all 0.3s ease;
+
+			&.active {
+				width: 32rpx;
+				border-radius: 8rpx;
+				background: rgba(64, 128, 255, 0.8);
+			}
+		}
 	}
 
 	// 名片内容区域
@@ -179,7 +226,11 @@
 		position: relative;
 		bottom: 24rpx;
 		z-index: 2;
+		transform: translateY(150rpx);
 	}
 
-
-</style>
+	.activeCard {
+		transform: none !important;
+		transition: all 0.3s cubic-bezier(.68, -0.55, .265, 1.55);
+	}
+</style>

+ 2 - 7
pages/mine/index.vue

@@ -17,7 +17,7 @@
 				<view class="user-details">
 					<view class="name-row">
 						<text class="user-name">{{ cardInfo.nickName || '用户' }}</text>
-						<text class="user-role">{{ cardInfo.postName || '职位' }}</text>
+						<text class="user-role">{{ cardInfo.jobTitle || '职位' }}</text>
 					</view>
 					<text class="company-name">{{ cardInfo.companyName || '公司名称' }}</text>
 				</view>
@@ -157,8 +157,7 @@ import { clearUserInfo } from '@/utils/userCache.js'
 // 使用 Pinia 管理用户状态
 const userStore = useUserStore()
 const {
-	cardInfo,
-	companyInfo
+ cardInfo
 } = storeToRefs(userStore)
 
 // 统计数据
@@ -179,10 +178,6 @@ onMounted(async () => {
 	if (!cardInfo.value.nickName) {
 		await userStore.queryCardInfo()
 	}
-	if (!companyInfo.value.name) {
-		await userStore.queryCompanyInfo()
-	}
-
 	// 加载统计数据
 	loadStatisticsData()
 })

+ 10 - 6
pages/mine/userCard.vue

@@ -51,8 +51,8 @@
 	const userStore = useUserStore()
 	const {
 		cardInfo,
-		companyInfo,
-		cardImage
+		cardImage,
+		currentIndex
 	} = storeToRefs(userStore)
 	let appName = ref('')
 
@@ -66,7 +66,7 @@
 	onShareAppMessage(() => {
 		return {
 			userName: '小程序',
-			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
+			path: `pages/splash/splash?userId=${cardInfo.value.userId}&currentIndex=${currentIndex.value}`,
 			imageUrl: cardImage.value
 		};
 	});
@@ -169,8 +169,9 @@
 		margin: 0 24rpx 24rpx;
 		position: relative;
 		z-index: 2;
-		transform: scale(0.78);
+		transform: scale(0.85);
 	}
+
 	// 名片内容区域
 	.card-content {
 		margin: 0 24rpx;
@@ -180,9 +181,12 @@
 		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
 		position: relative;
 		z-index: 2;
-		transform: translateY(150rpx);
 	}
 
+	.activeCard {
+		transform: none !important;
+		transition: all 0.3s cubic-bezier(.68, -0.55, .265, 1.55);
+	}
 
 	// 隐藏的 canvas 容器
 	.hidden-canvas-box {
@@ -193,4 +197,4 @@
 		height: 1px;
 		overflow: hidden;
 	}
-</style>
+</style>

+ 32 - 27
pages/splash/splash.vue

@@ -8,14 +8,14 @@
 			</view>
 			<text class="app-name">{{appName}}</text>
 		</view>
-	<!-- 隐藏的 Canvas 用于生成名片快照 -->
-	<canvas id="posterCanvas" type="2d"
-		style="position: fixed; left: -9999px; top: -9999px; width: 750px; height: 780px;"></canvas>
-	
-	<!-- 隐藏的 Canvas 用于生成二维码海报 -->
-	<view class="hidden-canvas-box">
-		<canvas id="qrPosterCanvas" type="2d" style="width: 600px; height: 700px;"></canvas>
-	</view>
+		<!-- 隐藏的 Canvas 用于生成名片快照 -->
+		<canvas id="posterCanvas" type="2d"
+			style="position: fixed; left: -9999px; top: -9999px; width: 750px; height: 780px;"></canvas>
+
+		<!-- 隐藏的 Canvas 用于生成二维码海报 -->
+		<view class="hidden-canvas-box">
+			<canvas id="qrPosterCanvas" type="2d" style="width: 600px; height: 700px;"></canvas>
+		</view>
 	</view>
 </template>
 
@@ -39,20 +39,21 @@
 		getCurrentConfig
 	} from '@/config/index.js'
 	let appName = ref('')
-	// 页面加载
 
+	// 页面加载
 	onMounted(async () => {
 		const config = await getCurrentConfig()
 		appName.value = config.appName
 	})
+
 	onLoad((options) => {
-		initApp(options?.userId)
+		initApp(options?.userId, options?.currentIndex)
 	})
 
 	/**
 	 * 初始化应用
 	 */
-	const initApp = async (userId = null) => {
+	const initApp = async (userId = null, currentIndex=0) => {
 		try {
 			const loginToggle = isLogin() || !!userId
 			if (!loginToggle) {
@@ -64,10 +65,11 @@
 			}
 			if (loginToggle) {
 				await userStore.queryCardInfo(userId)
-				await userStore.queryCompanyInfo(userId)
-				// #ifdef MP-WEIXIN
+				// 如果有 currentIndex 参数,在数据加载完成后设置索引
+				if (currentIndex !== undefined) {
+					userStore.setCurrentIndex(Number(currentIndex))
+				}
 				await userStore.queryCardPoster()
-				// #ifdef
 				uni.reLaunch({
 					url: !!userId ? '/pages/mine/userCard' : '/pages/index/index'
 				})
@@ -120,6 +122,7 @@
 			align-items: center;
 			justify-content: center;
 			border: 1px solid #F1F1F1;
+
 			&::after {
 				content: '';
 				position: absolute;
@@ -129,10 +132,10 @@
 				bottom: -6rpx;
 				border-radius: 50%;
 				background: linear-gradient(135deg,
-					rgba(255, 255, 255, 0.6) 0%,
-					rgba(255, 255, 255, 0) 40%,
-					rgba(255, 255, 255, 0) 60%,
-					rgba(255, 255, 255, 0.2) 100%);
+						rgba(255, 255, 255, 0.6) 0%,
+						rgba(255, 255, 255, 0) 40%,
+						rgba(255, 255, 255, 0) 60%,
+						rgba(255, 255, 255, 0.2) 100%);
 				pointer-events: none;
 				z-index: 2;
 			}
@@ -156,14 +159,12 @@
 					left: -50%;
 					width: 200%;
 					height: 200%;
-					background: linear-gradient(
-						135deg,
-						transparent 0%,
-						transparent 35%,
-						rgba(255, 255, 255, 0.5) 45%,
-						transparent 55%,
-						transparent 100%
-					);
+					background: linear-gradient(135deg,
+							transparent 0%,
+							transparent 35%,
+							rgba(255, 255, 255, 0.5) 45%,
+							transparent 55%,
+							transparent 100%);
 					animation: shineSweep 2s ease-in-out infinite;
 				}
 			}
@@ -215,6 +216,7 @@
 		0% {
 			transform: rotate(0deg);
 		}
+
 		100% {
 			transform: rotate(360deg);
 		}
@@ -224,12 +226,15 @@
 		0% {
 			transform: translateX(-100%) translateY(-100%) rotate(-20deg);
 		}
+
 		20% {
 			transform: translateX(0%) translateY(0%) rotate(-20deg);
 		}
+
 		40% {
 			transform: translateX(100%) translateY(100%) rotate(-20deg);
 		}
+
 		100% {
 			transform: translateX(100%) translateY(100%) rotate(-20deg);
 		}
@@ -244,4 +249,4 @@
 		height: 1px;
 		overflow: hidden;
 	}
-</style>
+</style>

+ 65 - 61
store/modules/user.js

@@ -5,9 +5,7 @@ import {
 	defineStore
 } from 'pinia'
 import {
-	getCardInfo,
-	getCardQrcode,
-	getCompanyInfo
+	getCardInfo
 } from '@/api/card.js'
 import {
 	formatRichText
@@ -15,31 +13,55 @@ import {
 import {
 	generateCardPoster,
 } from '@/utils/poster.js'
+
+// 空名片模板
+const createEmptyCard = () => ({
+	"userId": "",
+	"nickName": "",
+	"phonenumber": "",
+	"jobTitle": "",
+	"companyName": "",
+	"companyAddress": "",
+	"email": "",
+	"sex": null,
+	"avatar": "",
+	"companyDTO": {
+		"id": "",
+		"name": "",
+		"email": "",
+		"address": "",
+		"introduce": ""
+	}
+})
+
 export const useUserStore = defineStore('user', {
 	state: () => ({
-		cardInfo: {
-			"userId": "",
-			"nickName": "",
-			"phonenumber": "",
-			"postName": "",
-			"companyName": "",
-			"companyAddress": "",
-			"email": "",
-			"sex": null,
-			"avatar": ""
-		},
-		companyInfo: {
-			"name": "",
-			"email": "",
-			"address": "",
-			"introduce": ""
+		cardList: [], // 名片数组(接口返回)
+		currentIndex: 0, // 当前选中的名片索引(全局统一)
+		cardImages: [],
+	}),
+	getters: {
+		// 当前展示的名片对象
+		cardInfo(state) {
+			console.log(state.currentIndex,"state.cardList[state.currentIndex]state.cardList[state.currentIndex]state.cardList[state.currentIndex]");
+			return state.cardList.length > 0 && state.cardList[state.currentIndex] ?
+				state.cardList[state.currentIndex] :
+				createEmptyCard()
 		},
-		qrInfo: {
-
+		cardImage(state) {
+			return state.cardImages[state.currentIndex] || ''
 		},
-		cardImage: "",
-	}),
+		// 名片总数
+		cardCount(state) {
+			return state.cardList.length
+		}
+	},
 	actions: {
+		// 设置当前名片索引
+		setCurrentIndex(index) {
+			console.log("indexindexindexindexindexindexindex", index);
+			this.currentIndex = index
+		},
 		// 获取用户卡片信息
 		queryCardInfo(userId = null) {
 			return new Promise(async (resolve, reject) => {
@@ -49,57 +71,39 @@ export const useUserStore = defineStore('user', {
 				let res = await getCardInfo(parmas)
 				console.log(res, "resresresresresres");
 				if (res.code == 200) {
-					this.cardInfo = res.data
-					this.cardInfo.avatar = res.data.avatar.replace("http","https")
-					
-				} else if (res.code == 401) {
-					// token 失效,清除登录态并跳转登录页
-					uni.removeStorageSync('token')
-					this.$reset()
-					uni.reLaunch({ url: '/pages/login/login' })
-				}
-				resolve(res.data)
-			})
-		},
-		queryCompanyInfo(userId = null) {
-			return new Promise(async (resolve, reject) => {
-				let parmas = userId ? {
-					userId
-				} : {}
-				let res = await getCompanyInfo(parmas)
-				if (res.code == 200) {
-					this.companyInfo = res.data
-					this.companyInfo.introduce = formatRichText(res.data.introduce)
+					let dataList = Array.isArray(res.data) ? res.data : [res.data]
+					// 处理每个数据的头像 https
+					this.cardList = dataList.map(item => {
+						if (item.avatar) {
+							item.avatar = item.avatar.replace("http", "https")
+						}
+						return item
+					})
+					this.currentIndex = 0
 				} else if (res.code == 401) {
 					// token 失效,清除登录态并跳转登录页
 					uni.removeStorageSync('token')
 					this.$reset()
-					uni.reLaunch({ url: '/pages/login/login' })
+					uni.reLaunch({
+						url: '/pages/login/login'
+					})
 				}
-				resolve(this.companyInfo)
-			})
-		},
-		queryCardQrcode(userId = null) {
-			return new Promise(async (resolve, reject) => {
-				let parmas = userId ? {
-					userId
-				} : {
-					userId: this.cardInfo.userId
-				}
-				let res = await getCardQrcode(parmas)
-				this.qrInfo = res.data || {}
 				resolve(res.data)
 			})
 		},
 		queryCardPoster() {
 			return new Promise(async (resolve, reject) => {
-				const cardImage = await generateCardPoster(this.cardInfo)
-				this.cardImage = cardImage || ''
-				resolve(cardImage)
+				let cardImages = []
+				for (let i = 0; i < this.cardList.length; i++) {
+					let item = this.cardList[i];
+					let cardImage = await generateCardPoster(item)
+					cardImages.push(cardImage)
+				}
+				this.cardImages = cardImages || ''
+				resolve(cardImages)
 			})
 		},
 
-
 		// 退出登录,重置状态
 		logout() {
 			this.$reset()

+ 2 - 2
utils/poster.js

@@ -292,12 +292,12 @@ export const generateCardPoster = async (cardInfo = {}, qrInfo = {}) => {
 				ctx.fillText(name, nameX, nameY)
 				const nameW = ctx.measureText(name).width
 
-				if (cardInfo.postName) {
+				if (cardInfo.jobTitle) {
 					ctx.font = '22px sans-serif'
 					ctx.fillStyle = '#202020'
 					ctx.textAlign = 'left'
 					ctx.textBaseline = 'top'
-					ctx.fillText(cardInfo.postName, nameX + nameW + 14, nameY + 11)
+					ctx.fillText(cardInfo.jobTitle, nameX + nameW + 14, nameY + 11)
 				}
 
 				// 公司名称