2024.02.25

- 完善名片标签表单页、名片表单页、首页

another-tf/another-serve/bindPhone/index.vue

@@ -31,7 +31,7 @@
 					<tui-icon :size="50" color="#cccccc" name="shield" unit="rpx" margin="0 30rpx 0 0"></tui-icon>
 					<tui-input
 						v-model="code" padding="26rpx 20rpx 26rpx 0" background-color="transparent" label-color="#ffffff"
-						placeholder="请输入验证码" style="flex: 1;border-bottom: 2rpx solid #ffffff;"
+						placeholder="请输入验证码"
 					>
 						<template #right>
 							<tui-countdown-verify
@@ -55,26 +55,27 @@
 		</view>
 		<view v-else-if="verifyType === 2" class="mpVerify">
 			<button
-				v-if="[ 4 ].includes($store.state.app.terminal)" class="verifyPhone" open-type="getAuthorize"
-				scope="phoneNumber" @getAuthorize="onGetAuthorize" @error="() => { }"
+				v-if="[ 4 ].includes(terminal)" class="verifyPhone" open-type="getAuthorize" scope="phoneNumber"
+				@getAuthorize="onGetAuthorize" @error="() => { }"
 			>
 				授权手机号验证
 			</button>
 
 			<button
-				v-if="[ 2 ].includes($store.state.app.terminal)" class="verifyPhone fs28 mar-top-100"
-				open-type="getPhoneNumber" @getphonenumber="getWxPhoneNumber"
+				v-if="[ 2 ].includes(terminal)" class="verifyPhone fs28 mar-top-100" open-type="getPhoneNumber"
+				@getphonenumber="getWxPhoneNumber"
 			>
 				微信手机号授权
 			</button>
 		</view>
-		<view v-if="(verifyType !== 0) && [2, 4].includes($store.state.app.terminal)" class="backBtn" @click="verifyType = 0">
+		<view v-if="(verifyType !== 0) && [2, 4].includes(terminal)" class="backBtn" @click="verifyType = 0">
 			返回
 		</view>
 	</view>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { getVerifyCodeApi, updateAliPhoneAppApi, getSessionKeyAppApi, updateSetWxPhoneAppApi, updateWxPhoneAppApi } from '../../../api/anotherTFInterface'
 export default {
 	name: 'BindPhone',
@@ -96,6 +97,9 @@ export default {
 		this.buyerUserId = options.buyerUserId
 		if (![2, 4].includes(this.$store.state.app.terminal)) this.verifyType = 1
 	},
+	computed: {
+		...mapGetters([ 'terminal' ])
+	},
 	methods: {
 		// 获取验证码
 		handleSendVerify() {
@@ -248,6 +252,11 @@ export default {
 			flex-direction: row;
 			justify-content: space-between;
 			align-items: center;
+
+			/deep/ .tui-input__wrap {
+				flex: 1;
+				border-bottom: 2rpx solid #ffffff;
+			}
 		}
 
 		.registerBut {

another-tf/another-user/calling-card-management/calling-card-form.vue

@@ -0,0 +1,373 @@
+<template>
+	<view class="calling-card-form-container">
+		<JHeader width="50" height="50" title="名片表单"></JHeader>
+		<FieldPaneCCF v-model="form.basicInfo" :fields="applyOne" title="基本信息"></FieldPaneCCF>
+
+		<FieldPaneCCF v-model="form.relatesInfo" :fields="applyTow" title="企业信息"></FieldPaneCCF>
+
+		<ATFUpload
+			:title="uploadFields[0].label" :img-url="form.imgs[uploadFields[0].field]"
+			@upload="handleSaveImg(uploadFields[0].field, $event)" @delete="handleDeleteImg(uploadFields[0].field)"
+		></ATFUpload>
+
+		<ATFMoreUpload
+			:title="uploadFields[1].label" :imgs="form.imgs[uploadFields[1].field]"
+			@upload="handleSaveImg(uploadFields[1].field, $event)" @delete="handleDeleteImg(uploadFields[1].field, $event)"
+		></ATFMoreUpload>
+
+		<ATFUpload
+			v-if="Number(form.relatesInfo.isEnterprise) === 1"
+			:title="uploadFields[2].label" :img-url="form.imgs[uploadFields[2].field]"
+			@upload="handleSaveImg(uploadFields[2].field, $event)" @delete="handleDeleteImg(uploadFields[2].field)"
+		></ATFUpload>
+		<view class="buts">
+			<button class="btn" @click="submit()">
+				提交
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+import FieldPaneCCF from './components/field-pane-ccf.vue'
+import { addEnterpriseUserSaveApi, updateByIdEnterpriseUserApi } from '../../../api/anotherTFInterface'
+
+export default {
+	name: 'CallingCardForm',
+	components: {
+		FieldPaneCCF
+	},
+	onLoad(options) {
+		if (Number(options.id)) {
+			this.form.basicInfo.buyerId = options.id
+			this.form.basicInfo.isEnterprise = '0'
+			this.getElectronicCard(options.id)
+		}
+	},
+	data() {
+		return {
+			applyOne: [
+				{
+					label: 'ID：',
+					field: 'enterpriseUserId',
+					type: 'input',
+					placeholder: '请输入名片ID'
+				},
+				{
+					label: '用户ID：',
+					field: 'buyerId',
+					type: 'input',
+					placeholder: '请输入用户D'
+				},
+				{
+					label: '关联标签：',
+					field: 'label',
+					type: 'input',
+					placeholder: '请输入关联标签'
+				},
+				{
+					label: '昵称：',
+					field: 'name',
+					type: 'input',
+					placeholder: '请输入昵称'
+				},
+				{
+					label: '性别：',
+					field: 'sex',
+					type: 'radio',
+					placeholder: '请选择性别'
+				},
+				{
+					label: '生日：',
+					field: 'birthday',
+					type: 'time',
+					placeholder: '请选择生日时间'
+				},
+				{
+					label: '手机号：',
+					field: 'phone',
+					type: 'input',
+					placeholder: '请输入手机号'
+				},
+				{
+					label: '座机：',
+					field: 'landline',
+					type: 'input',
+					placeholder: '请输入座机'
+				},
+				{
+					label: '邮箱：',
+					field: 'mailbox',
+					type: 'input',
+					placeholder: '请输入邮箱'
+				},
+				{
+					label: '微信号：',
+					field: 'weChatSignal',
+					type: 'input',
+					placeholder: '请输入微信号'
+				},
+				{
+					label: '个人简介',
+					type: 'textarea',
+					field: 'personalProfile',
+					placeholder: '请填写个人简介'
+				},
+				{
+					label: '地址',
+					type: 'textarea',
+					field: 'address',
+					placeholder: '请填写地址'
+				},
+				// {
+				// 	label: '是否启用：',
+				// 	field: 'state',
+				// 	type: 'radio',
+				// 	placeholder: '是否启用'
+				// },
+				// {
+				// 	label: '是否加入黑名单：',
+				// 	field: 'ifBlack',
+				// 	type: 'radio',
+				// 	placeholder: '是否加入黑名单'
+				// },
+				{
+					label: '样式：',
+					field: 'styleId',
+					type: 'select',
+					placeholder: '请选择样式'
+				}
+			],
+			applyTow: [
+				{
+					label: '是否企业：',
+					field: 'isEnterprise',
+					type: 'radio',
+					placeholder: '是否企业'
+				},
+				{
+					label: '企业名称：',
+					field: 'enterpriseName',
+					type: 'input',
+					placeholder: '请输入企业名称'
+				},
+				{
+					label: '担任职务：',
+					field: 'enterpriseDuties',
+					type: 'input',
+					placeholder: '请输入担任职务'
+				},
+				{
+					label: '部门：',
+					field: 'enterpriseDepartment',
+					type: 'input',
+					placeholder: '请输入部门'
+				}
+			],
+			uploadFields: [
+				{
+					label: '用户名片头像',
+					field: 'headImage'
+				},
+				{
+					label: '图片介绍',
+					field: 'pictureIntroduction'
+				},
+				{
+					label: '企业头像',
+					field: 'enterpriseHeadImage'
+				}
+			],
+			form: {
+				basicInfo: {
+					buyerId: '',
+					enterpriseUserId: '',
+					label: '',
+					name: '',
+					sex: '',
+					birthday: '',
+					phone: '',
+					landline: '',
+					mailbox: '',
+					weChatSignal: '',
+					personalProfile: '',
+					address: '',
+					// state: '',
+					// ifBlack: '',
+					styleId: ''
+				},
+				relatesInfo: {
+					isEnterprise: '',
+					enterpriseName: '',
+					enterpriseDuties: '',
+					enterpriseDepartment: ''
+				},
+				imgs: {
+					headImage: '',
+					pictureIntroduction: [],
+					enterpriseHeadImage: ''
+				}
+			}
+		}
+	},
+
+	methods: {
+		// 获取名片详情
+		async getElectronicCard(id) {
+			uni.showLoading()
+			try {
+				const data = await this.$store.dispatch('user/getElectronicCardAction')
+				uni.hideLoading()
+				this.form.basicInfo.buyerId = data.buyerId || ''
+				this.form.basicInfo.enterpriseUserId = data.enterpriseUserId || ''
+				this.form.basicInfo.label = data.label || ''
+				this.form.basicInfo.name = data.name || ''
+				this.form.basicInfo.sex = String(data.sex) || ''
+				this.form.basicInfo.birthday = data.birthday || ''
+				this.form.basicInfo.phone = data.phone || ''
+				this.form.basicInfo.landline = data.landline || ''
+				this.form.basicInfo.mailbox = data.mailbox || ''
+				this.form.basicInfo.weChatSignal = data.weChatSignal || ''
+				this.form.basicInfo.personalProfile = data.personalProfile || ''
+				this.form.basicInfo.address = data.address || ''
+				// this.form.basicInfo.state = String(data.state) || ''
+				// this.form.basicInfo.ifBlack = String(data.ifBlack) || ''
+				this.form.basicInfo.styleId = data.styleId || ''
+				this.form.imgs.headImage = data.headImage || ''
+				this.form.imgs.pictureIntroduction = data.pictureIntroduction || ''
+				this.form.relatesInfo.isEnterprise = String(data.isEnterprise) || ''
+				this.form.relatesInfo.enterpriseName = data.enterpriseName || ''
+				this.form.relatesInfo.enterpriseDuties = data.enterpriseDuties || ''
+				this.form.relatesInfo.enterpriseDepartment = data.enterpriseDepartment || ''
+				this.form.imgs.enterpriseHeadImage = data.enterpriseHeadImage || ''
+			} catch (err) {
+				console.log(err)
+				uni.hideLoading()
+			}
+		},
+
+		handleSaveImg(field, imgUrl) {
+			console.log(field, imgUrl)
+			if ((field === 'headImage') || (field === 'enterpriseHeadImage')) {
+				this.form.imgs[field] = imgUrl
+			} else if (field === 'pictureIntroduction') {
+				this.form.imgs[field].push(imgUrl)
+			}
+			this.$forceUpdate()
+			console.log(this.form.imgs[this.uploadFields[0].field])
+		},
+
+		// 点击提交按钮
+		submit() {
+			const data = {
+				...this.form.basicInfo,
+				// ifBlack: this.form.basicInfo.ifBlack ? Number(this.form.basicInfo.ifBlack) : '',
+				...this.form.relatesInfo,
+				isEnterprise: this.form.basicInfo.isEnterprise ? Number(this.form.basicInfo.isEnterprise) : '',
+				...this.form.imgs,
+				pictureIntroduction: this.form.imgs.pictureIntroduction.join(',')
+			}
+			console.log(data)
+			if (!data.name) {
+				this.$showToast('缺少昵称')
+				return
+			}
+			if (!data.sex) {
+				this.$showToast('缺少性别')
+				return
+			}
+			if (!data.styleId) {
+				this.$showToast('缺少样式')
+				return
+			}
+			if (typeof data.timeType !== 'number') {
+				this.$showToast('请选择是否企业')
+				return
+			}
+			if ((typeof data.isEnterprise === 'number') && (data.isEnterprise === 1) && !data.enterpriseName) {
+				this.$showToast('缺少企业名称')
+				return
+			}
+			uni.showModal({
+				title: '提示',
+				content: '确认提交名片表单？',
+				success: (res) => {
+					if (res.confirm) {
+						if (data.goods.id) {
+							updateByIdEnterpriseUserApi(data).then((res) => {
+								this.$showToast('修改名片成功')
+								setTimeout(() => {
+									uni.navigateBack()
+								}, 2000)
+							})
+						} else {
+							addEnterpriseUserSaveApi(data).then((res) => {
+								this.$showToast('添加名片成功')
+								setTimeout(() => {
+									uni.navigateBack()
+								}, 2000)
+							})
+						}
+					}
+				}
+			})
+		},
+
+		// 删除当前图片
+		handleDeleteImg(field, imgUrl) {
+			if ((field === 'headImage') || (field === 'enterpriseHeadImage')) {
+				this.form.imgs[field] = ''
+			} else if (field === 'pictureIntroduction') {
+				this.form.imgs[field].splice(this.form.imgs[field].findIndex((item) => item === imgUrl), 1)
+			}
+			this.$forceUpdate()
+			console.log(this.form.imgs[field])
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.calling-card-form-container {
+	padding: 40upx 40upx 140upx 40upx;
+	box-sizing: border-box;
+
+	.buts {
+		position: fixed;
+		bottom: -1px;
+		z-index: 2;
+		padding: 20upx 40upx;
+		left: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #fff;
+		width: 100%;
+		box-sizing: border-box;
+		margin-top: 272upx;
+	}
+
+	.btn {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 72upx;
+		width: 306upx;
+		font-size: 32upx;
+		color: #fff;
+		margin: 0;
+		background-color: #07b9b9;
+		border-radius: 100px;
+
+		&:last-child {
+			background-color: #fa5151;
+		}
+
+		&.withdraw {
+			width: 100%;
+			background: #999;
+			letter-spacing: 10upx;
+		}
+	}
+}
+</style>

another-tf/another-user/calling-card-management/card-label-form.vue

@@ -0,0 +1,164 @@
+<template>
+	<view class="card-label-form-container">
+		<JHeader width="50" height="50" title="名片标签表单"></JHeader>
+		<FieldPaneCLF v-model="form.basicInfo" :fields="applyOne" title="标签信息"></FieldPaneCLF>
+		<view class="buts">
+			<button class="btn" @click="submit()">
+				提交
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+import FieldPaneCLF from './components/field-pane-clf.vue'
+import { getEnterpriseUserLabelDetailApi, updateByIdEnterpriseUserApi, addEnterpriseUserSaveApi } from '../../../api/anotherTFInterface'
+
+export default {
+	name: 'CardLabelForm',
+	components: {
+		FieldPaneCLF
+	},
+	onLoad(options) {
+		this.form.basicInfo.enterpriseUserId = this.$store.getters.electronicCardInfo.enterpriseUserId
+		if (Number(options.id)) {
+			this.form.basicInfo.labelId = options.id
+			this.getElectronicLabel(options.id)
+		}
+	},
+	data() {
+		return {
+			applyOne: [
+				{
+					label: '标签ID：',
+					field: 'labelId',
+					type: 'input',
+					placeholder: '标签ID'
+				},
+				{
+					label: '创建时间：',
+					field: 'createTime',
+					type: 'input',
+					placeholder: '创建时间'
+				},
+				{
+					label: '关联名片ID：',
+					field: 'enterpriseUserId',
+					type: 'input',
+					placeholder: '关联名片ID'
+				},
+				{
+					label: '标签名称：',
+					field: 'labelName',
+					type: 'input',
+					placeholder: '请填写标签名称'
+				}
+			],
+			form: {
+				basicInfo: {
+					labelId: '',
+					createTime: '',
+					enterpriseUserId: '',
+					labelName: ''
+				}
+			}
+		}
+	},
+
+	methods: {
+		// 获取标签信息
+		async getElectronicLabel(id) {
+			uni.showLoading()
+			try {
+				const data = await getEnterpriseUserLabelDetailApi({ labelId: id })
+				uni.hideLoading()
+				// this.form.basicInfo.labelId = data.labelId || ''
+				this.form.basicInfo.createTime = data.createTime || ''
+				this.form.basicInfo.enterpriseUserId = data.enterpriseUserId || ''
+				this.form.basicInfo.labelName = data.labelName || ''
+			} catch (err) {
+				console.log(err)
+				uni.hideLoading()
+			}
+		},
+
+		// 点击提交按钮
+		submit() {
+			const data = {
+				...this.form.basicInfo
+			}
+			console.log(data)
+			if (!data.labelName) {
+				this.$showToast('缺少标签名称')
+				return
+			}
+			if (!data.enterpriseUserId) {
+				this.$showToast('缺少关联名片ID')
+				return
+			}
+			uni.showModal({
+				title: '提示',
+				content: '确认提交名片标签表单？',
+				success: (res) => {
+					if (res.confirm) {
+						if (data.id) {
+							updateByIdEnterpriseUserApi(data).then((res) => {
+								this.$showToast('提交成功')
+								setTimeout(() => {
+									uni.navigateBack()
+								}, 2000)
+							})
+						} else {
+							addEnterpriseUserSaveApi(data).then((res) => {
+								this.$showToast('提交成功')
+								setTimeout(() => {
+									uni.navigateBack()
+								}, 2000)
+							})
+						}
+					}
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.card-label-form-container {
+	padding: 40upx 40upx 140upx 40upx;
+	box-sizing: border-box;
+
+	.buts {
+		position: fixed;
+		bottom: -1px;
+		z-index: 2;
+		padding: 20upx 40upx;
+		left: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #fff;
+		width: 100%;
+		box-sizing: border-box;
+		margin-top: 272upx;
+	}
+
+	.btn {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 72upx;
+		width: 306upx;
+		font-size: 32upx;
+		color: #fff;
+		margin: 0;
+		background-color: #07b9b9;
+		border-radius: 100px;
+
+		&:last-child {
+			background-color: #fa5151;
+		}
+	}
+}
+</style>

another-tf/another-user/calling-card-management/components/field-pane-ccf.vue

@@ -0,0 +1,265 @@
+<template>
+	<view class="field-pane-container">
+		<view class="title">{{ title }}</view>
+		<view v-for="item in fields" :key="item.label">
+			<view
+				v-if="(item.field === 'id') || (item.field === 'label') || (item.field === 'enterpriseUserId') || (item.field === 'buyerId')"
+			>
+			</view>
+			<view v-else-if="item.field === 'birthday'" class="item">
+				<template>
+					<view
+						class="input-wrapper" :style="{
+							'flex-direction': item.type === 'textarea' ? 'column' : '',
+							'align-items': item.type === 'textarea' ? 'flex-start' : ''
+						}"
+					>
+						<view class="sub-title">{{ item.label }}</view>
+
+						<view v-if="item.type === 'time' && item.field === 'birthday'" class="input">
+							<input
+								:value="form[item.field]" :disabled="true" type="text"
+								:placeholder="item.placeholder"
+								@click="$refs.dateTimeTradeB[0].show()"
+							/>
+							<tui-datetime
+								ref="dateTimeTradeB" :type="2" radius
+								@confirm="handleInput(item.field, $event)"
+							></tui-datetime>
+						</view>
+
+					</view>
+				</template>
+			</view>
+			<view v-else-if="item.field === 'styleId'">
+				<view class="item">
+					<view
+						class="input-wrapper" :style="{
+							'flex-direction': item.type === 'textarea' ? 'column' : '',
+							'align-items': item.type === 'textarea' ? 'flex-start' : ''
+						}"
+					>
+						<view class="sub-title">{{ item.label }}</view>
+						<view
+							v-if="item.type === 'select' && item.field === 'styleId'" style="flex: 1" :style="{
+								color: form.styleId ? '' : '#999'
+							}" @click="isShowStyleListSelect = true"
+						>
+							{{ styleName || (form.styleId ? `已选样式：${form.styleId}` : "请选择样式") }}
+						</view>
+					</view>
+				</view>
+			</view>
+			<view
+				v-else-if="(item.field === 'enterpriseName') || (item.field === 'enterpriseDuties') || (item.field === 'enterpriseDepartment')"
+			>
+				<view v-if="form.isEnterprise === '1'" class="item">
+					<template>
+						<view
+							class="input-wrapper" :style="{
+								'flex-direction': item.type === 'textarea' ? 'column' : '',
+								'align-items': item.type === 'textarea' ? 'flex-start' : ''
+							}"
+						>
+							<view class="sub-title">{{ item.label }}</view>
+							<input
+								v-if="item.type === 'input'" :value="form[item.field]" class="input" :disabled="false"
+								:type="item.field === 'phone' ? 'number' : 'text'" :placeholder="item.placeholder"
+								@input="handleInput(item.field, $event)"
+							/>
+						</view>
+					</template>
+				</view>
+				<view v-else></view>
+			</view>
+			<view v-else class="item">
+				<template>
+					<view
+						class="input-wrapper" :style="{
+							'flex-direction': item.type === 'textarea' ? 'column' : '',
+							'align-items': item.type === 'textarea' ? 'flex-start' : ''
+						}"
+					>
+						<view class="sub-title">{{ item.label }}</view>
+						<input
+							v-if="item.type === 'input'" :value="form[item.field]" class="input" :disabled="false"
+							:type="item.field === 'phone' ? 'number' : 'text'" :placeholder="item.placeholder"
+							@input="handleInput(item.field, $event)"
+						/>
+
+						<textarea
+							v-if="item.type === 'textarea'" :value="form[item.field]" class="textarea"
+							:placeholder="item.placeholder" @input="handleInput(item.field, $event)"
+						></textarea>
+
+						<tui-radio-group
+							v-if="(item.type === 'radio') && (item.field === 'sex')" v-model="form[item.field]"
+							@change="handleInput(item.field, $event)"
+						>
+							<view style="display: flex;">
+								<tui-label v-for="(part, index) in [{ name: '男', value: '1' }, { name: '女', value: '2' }]" :key="index">
+									<tui-list-cell padding="16rpx">
+										<view>
+											<tui-radio :checked="false" :value="part.value" color="#07c160" border-color="#999">
+											</tui-radio>
+											<text>{{ part.name }}</text>
+										</view>
+									</tui-list-cell>
+								</tui-label>
+							</view>
+						</tui-radio-group>
+						<tui-radio-group
+							v-else-if="item.type === 'radio'" v-model="form[item.field]" style="display: flex;"
+							@change="(e) => { }"
+						>
+							<view style="display: flex;">
+								<tui-label v-for="(part, index) in [{ name: '是', value: '1' }, { name: '否', value: '0' }]" :key="index">
+									<tui-list-cell padding="16rpx">
+										<view>
+											<tui-radio :checked="false" :value="part.value" color="#07c160" border-color="#999">
+											</tui-radio>
+											<text>{{ part.name }}</text>
+										</view>
+									</tui-list-cell>
+								</tui-label>
+							</view>
+						</tui-radio-group>
+
+					</view>
+				</template>
+			</view>
+		</view>
+		<!-- 样式 -->
+		<tui-select
+			:list="styleList" reverse :show="isShowStyleListSelect" @confirm="handleSelectStyleList"
+			@close="isShowStyleListSelect = false"
+		></tui-select>
+
+	</view>
+</template>
+
+<script>
+
+export default {
+	name: 'FieldPaneCCF',
+	props: {
+		fields: {
+			type: Array,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: true
+		},
+		title: String
+	},
+
+	data() {
+		return {
+			form: {},
+			styleList: [],
+			isShowStyleListSelect: false,
+			styleName: ''
+		}
+	},
+
+	watch: {
+		fields: {
+			handler(value) {
+				if (value) {
+					const form = {}
+					for (const item of value) {
+						form[item.field] = this.value[item.field]
+						if (item.type === 'select' && item.field === 'styleId') this.getStyleList()
+					}
+					this.form = form
+				}
+			},
+			immediate: true,
+			deep: true
+		},
+
+		form: {
+			handler(value) {
+				this.$emit('input', value)
+			},
+			immediate: true,
+			deep: true
+		}
+	},
+
+	methods: {
+		getStyleList() {
+			// getxxxApi({})
+			// 	.then((res) => {
+			this.styleList = [{ styleId: 1, value: 1, text: '样式一' }, { styleId: 2, value: 2, text: '样式二' }, { styleId: 3, value: 3, text: '样式三' }]
+			// })
+			// .catch(() => {
+			// 	this.$showToast('样式列表获取失败')
+			// })
+		},
+		handleSelectStyleList(e) {
+			this.isShowStyleListSelect = false
+			this.styleName = e.options.text
+			this.form.styleId = e.options.styleId
+		},
+
+		handleInput(field, e) {
+			console.log(field, e)
+			if (field === 'birthday') {
+				this.form[field] = e.result
+			} else {
+				this.form[field] = e.detail.value
+			}
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.field-pane-container {
+	margin-top: 30rpx;
+
+	.title {
+		font-size: 28rpx;
+		color: #fa5151;
+		font-weight: bold;
+	}
+
+	.item {
+		padding: 20rpx 0;
+		border-bottom: 1rpx solid #d8d8d8;
+		margin-top: 20rpx;
+
+		.input-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 24rpx;
+			color: #3d3d3d;
+
+			.sub-title {
+				margin-right: 20rpx;
+			}
+
+			/deep/ .uni-input-placeholder,
+			/deep/ .uni-textarea-placeholder {
+				font-size: 24rpx;
+				color: #999;
+			}
+
+			.input {
+				flex: 1;
+				font-size: 24rpx;
+			}
+
+			.textarea {
+				margin-top: 20rpx;
+				width: 100%;
+				height: 100px;
+				font-size: 24rpx;
+			}
+		}
+	}
+}
+</style>

another-tf/another-user/calling-card-management/components/field-pane-clf.vue

@@ -0,0 +1,154 @@
+<template>
+	<view class="field-pane-container">
+		<view class="title">{{ title }}</view>
+		<view v-for="item in fields" :key="item.label">
+			<view v-if="item.field === 'id'"></view>
+			<view v-else-if="(item.field === 'labelId') || (item.field === 'createTime')">
+				<template v-if="form[item.field]">
+					<view
+						class="input-wrapper" :style="{
+							'flex-direction': item.type === 'textarea' ? 'column' : '',
+							'align-items': item.type === 'textarea' ? 'flex-start' : ''
+						}"
+					>
+						<view class="sub-title">{{ item.label }}</view>
+						<input
+							v-if="item.type === 'input'" :value="form[item.field]" class="input" disabled
+							type="text" :placeholder="item.placeholder"
+						/>
+					</view>
+				</template>
+			</view>
+			<view v-else class="item">
+				<template>
+					<view
+						class="input-wrapper" :style="{
+							'flex-direction': item.type === 'textarea' ? 'column' : '',
+							'align-items': item.type === 'textarea' ? 'flex-start' : ''
+						}"
+					>
+						<view class="sub-title">{{ item.label }}</view>
+						<input
+							v-if="item.type === 'input'" :value="form[item.field]" class="input"
+							:disabled="item.field === 'enterpriseUserId'"
+							:type="item.field === 'enterpriseUserId' ? 'number' : 'text'"
+							:placeholder="item.placeholder" @input="handleInput(item.field, $event)"
+						/>
+					</view>
+				</template>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+
+export default {
+	name: 'FieldPaneCLF',
+	props: {
+		fields: {
+			type: Array,
+			required: true
+		},
+		value: {
+			type: Object,
+			required: true
+		},
+		title: String
+	},
+
+	data() {
+		return {
+			form: {}
+		}
+	},
+
+	watch: {
+		fields: {
+			handler(value) {
+				if (value) {
+					const form = {}
+					for (const item of value) {
+						form[item.field] = this.value[item.field]
+					}
+					this.form = form
+				}
+			},
+			immediate: true,
+			deep: true
+		},
+
+		form: {
+			handler(value) {
+				this.$emit('input', value)
+			},
+			immediate: true,
+			deep: true
+		}
+	},
+	created() {
+	},
+
+	mounted() {
+		// console.log(this.$refs)
+	},
+
+	methods: {
+		handleInput(field, e) {
+			console.log(field, e)
+			if (field === 'labelName') {
+				this.form[field] = e.detail.value
+			}
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.field-pane-container {
+	margin-top: 30rpx;
+
+	.title {
+		font-size: 28rpx;
+		color: #fa5151;
+		font-weight: bold;
+	}
+
+	.item {
+		padding: 20rpx 0;
+		border-bottom: 1rpx solid #d8d8d8;
+		margin-top: 20rpx;
+
+		.input-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 24rpx;
+			color: #3d3d3d;
+
+			.sub-title {
+				margin-right: 20rpx;
+			}
+
+			/deep/ .uni-input-placeholder,
+			/deep/ .uni-textarea-placeholder {
+				font-size: 24rpx;
+				color: #999;
+			}
+
+			.input {
+				flex: 1;
+				font-size: 24rpx;
+			}
+
+			.textarea {
+				margin-top: 20rpx;
+				width: 100%;
+				height: 100px;
+				font-size: 24rpx;
+			}
+		}
+	}
+}
+</style>

another-tf/another-user/calling-card-management/label-list.vue

@@ -0,0 +1,122 @@
+<template>
+	<view class="label-list-container">
+		<!-- <TuanAppShim bg="transparent"></TuanAppShim> -->
+		<JHeader title="名片标签列表" width="50" height="50"></JHeader>
+		<view style="width: 70%; margin: 14rpx auto 14rpx">
+			<tui-button
+				type="blue" bold shape="circle" width="100%"
+				@click="go(`/another-tf/another-user/calling-card-management/card-label-form`)"
+			>
+				新增标签
+			</tui-button>
+		</view>
+		<view v-if="electronicLabelInfo && electronicLabelInfo.length" style="padding: 12rpx 0;">
+			<view v-for="(item, index) in electronicLabelInfo" :key="index" style="margin-top: 20rpx;">
+				<tui-card :title="{ text: item.labelName }" :tag="{ text: `ID：${item.labelId}` }">
+					<template #body>
+						<view style="padding: 10rpx 32rpx;">
+							<view>关联名片ID：{{ item.enterpriseUserId }}</view>
+							<view>创建时间：{{ item.createTime }}</view>
+							<view>更新时间：{{ item.updateTime }}</view>
+						</view>
+					</template>
+					<template #footer>
+						<view class="label-btn" style="padding: 0 20rpx 20rpx;text-align: right;">
+							<tui-button
+								type="warning" width="120rpx" height="50rpx" margin="0 20rpx 0"
+								@click="go(`/another-tf/another-user/calling-card-management/card-label-form?id=${item.labelId}`)"
+							>
+								编辑
+							</tui-button>
+							<tui-button type="danger" width="120rpx" height="50rpx" @click="handleLabelDelete(item)">
+								删除
+							</tui-button>
+						</view>
+					</template>
+				</tui-card>
+			</view>
+		</view>
+		<view style="padding-bottom: 45rpx;">
+			<LoadingMore :status="isLoading ? 'loading' : ''"></LoadingMore>
+			<view v-if="!isLoading && !electronicLabelInfo.length">
+				<tui-no-data :fixed="false">您还没有设置名片标签哦～</tui-no-data>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+import { deleteByIdEnterpriseUserLabelApi } from '../../../api/anotherTFInterface'
+export default {
+	name: 'LabelList',
+	components: {
+	},
+	data() {
+		return {
+			electronicLabelInfo: [],
+			isLoading: true
+		}
+	},
+	onShow() {
+		this.getLabelList()
+	},
+
+	methods: {
+		async getLabelList() {
+			if (this.$store.getters.electronicCardInfo.enterpriseUserId) {
+				uni.showLoading()
+				this.isLoading = true
+				try {
+					this.electronicLabelInfo = await this.$store.dispatch('user/getElectronicLabelAction', { id: this.$store.getters.electronicCardInfo.enterpriseUserId })
+					uni.hideLoading()
+					this.isLoading = false
+				} catch (err) {
+					uni.hideLoading()
+					this.isLoading = false
+				}
+			} else {
+				this.$showToast('缺少名片信息')
+			}
+		},
+		handleLabelDelete(item) {
+			uni.showModal({
+				title: '提示',
+				content: '确定要删除当前名片标签？',
+				success: (res) => {
+					if (res.confirm) {
+						deleteByIdEnterpriseUserLabelApi({
+							labelId: item.labelId
+						}).then((res) => {
+							this.$showToast('删除成功', 'success')
+							this.getLabelList()
+						})
+					}
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.label-list-container {
+	width: 100%;
+	min-height: 100vh;
+	background-color: #f5f4f9;
+	/deep/ .j-header-container{
+		padding: 24rpx 0 0;
+	}
+
+	/deep/ .tui-nodata-box {
+		padding-top: 60rpx;
+	}
+
+	.label-btn {
+		/deep/ .tui-btn {
+			display: inline-block;
+			border-radius: 50rpx;
+		}
+	}
+}
+</style>

another-tf/another-user/calling-card/edit.vue

@@ -1,199 +0,0 @@
-<template>
-	<view>
-		<view class="wrap">
-			<tui-form ref="refLoginForm" :show-message="false">
-				<view>
-					<tui-input
-						v-model="cardObj.name" label="姓名" type="number" padding="26rpx 20rpx 26rpx 0"
-						placeholder-style="color: #f3c1c4;font-size: 32rpx;" label-color="#ffffff" border-color="#EA5B1D"
-						placeholder="请输入姓名" background-color="transparent" :border-top="false" color="#ffffff"
-						style="border-bottom: 2rpx solid #ffffff;"
-					></tui-input>
-				</view>
-				<view>
-					<tui-input
-						v-model="cardObj.phone" label="+ 86" type="number" padding="26rpx 20rpx 26rpx 0"
-						placeholder-style="color: #f3c1c4;font-size: 32rpx;" label-color="#ffffff" border-color="#EA5B1D"
-						placeholder="请输入电话" background-color="transparent" :border-top="false" color="#ffffff"
-						style="border-bottom: 2rpx solid #ffffff;"
-					></tui-input>
-				</view>
-				<view>
-					<JUpload
-						title="头像" :img-url="common.seamingImgUrl(cardObj.head_img)" @upload="handleSaveHeadImg"
-						@delete="cardObj.head_img = '' || $forceUpdate()"
-					></JUpload>
-				</view>
-			</tui-form>
-			<view class="wrap">
-				<view style="float:left;width: 40px;">
-					<tui-icon
-						v-if="checked" name="circle-fill" :size="34" unit="rpx"
-						color="#c5aa7b" margin="0 15rpx 0 0" @click="checked = false"
-					></tui-icon>
-					<tui-icon
-						v-else name="circle" :size="34" unit="rpx"
-						color="#cccccc" margin="0 15rpx 0 0" @click="checked = true"
-					></tui-icon>
-				</view>
-				<text style="float:left;color:#04498c" @click="goAgree()">同意用户服务协议&隐私政策</text>
-			</view>
-		</view>
-		<view class="bottom-block"></view>
-		<view class="bottombtn" type="primary" @click="onSave">立即保存</view>
-	</view>
-</template>
-
-<script>
-import { USER_INFO } from '../../../constant'
-export default {
-	name: 'Edit',
-	components: {},
-	data() {
-		return {
-			checked: false,
-			cardObj: {},
-			fileList1: [],
-			isAdd: true,
-			rules: {
-				'cardObj.name': {
-					type: 'string',
-					required: true,
-					message: '必填',
-					trigger: ['blur', 'change']
-				},
-				'cardObj.phone': {
-					type: 'string',
-					required: true,
-					message: '必填',
-					trigger: ['blur', 'change']
-				}
-			}
-		}
-	},
-	mounted() { },
-	async onLoad(options) {
-		if (uni.getStorageSync(USER_INFO)) {
-			var user = uni.getStorageSync(USER_INFO)
-			const res = await request('uni-card', 'getMyCard', {
-				uid: user.id
-			}, {
-				showloading: true
-			})
-			if (res.uid == null) { this.isAdd = true } else {
-				if (res.uid != user.id) {
-					uni.navigateTo({
-						url: '/pages/index'
-					})
-				}
-				this.cardObj = res
-				this.isAdd = false
-				this.fileList1.push({
-					url: res.head_img
-				})
-			}
-		}
-	},
-	methods: {
-		handleSaveHeadImg() {
-			this.cardObj.head_img = e
-			this.$forceUpdate()
-		},
-		goAgree() {
-			uni.navigateTo({
-				url: '/pages/agree'
-			})
-		},
-		changeClick() {
-			console.log('this.checked', this.checked)
-		},
-		async onSave() {
-			if (!this.checked) {
-				this.$showToast('请点击同意用户服务协议&隐私政策')
-				return
-			}
-			if (!this.cardObj.name) {
-				this.$showToast('请填写姓名')
-				return
-			}
-			if (!this.cardObj.phone) {
-				this.$showToast('请填写电话')
-				return
-			}
-			var user = uni.getStorageSync(USER_INFO)
-			this.cardObj.uid = user.id
-			const res = await request('uni-card', 'saveCard', this.cardObj, {
-				showloading: true
-			})
-			console.log('res', res)
-			this.$showToast('保存成功')
-			uni.navigateTo({
-				url: '/pages/index'
-			})
-		},
-		deletePic(event) {
-			this.fileList1 = []
-			this.cardObj.head_img = ''
-		},
-		async afterRead(event) {
-			console.log('event', event)
-			const result = await this.uploadFilePromise(event.file.url)
-		},
-		uploadFilePromise(url) {
-			return new Promise((resolve, reject) => {
-				var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
-				var maxLen = $chars.length
-				var noncestr = ''
-				for (var i = 0; i < 32; i++) {
-					noncestr += $chars.charAt(Math.floor(Math.random() * maxLen))
-				}
-				var that = this
-				uniCloud.uploadFile({
-					filePath: url,
-					cloudPath: noncestr + '.jpg',
-					onUploadProgress(progressEvent) {
-						console.log('上传进度', progressEvent)
-						var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-					},
-					success(e) {
-						console.log('uploadFile', e)
-						that.fileList1.push({
-							url: e.fileID
-						})
-						that.cardObj.head_img = e.fileID
-					},
-					fail() { },
-					complete() { }
-				})
-			})
-		}
-	}
-}
-</script>
-
-<style lang="less">
-/deep/.u-scroll-bar {
-	background: red !important;
-}
-
-.wrap {
-	padding: 20px;
-}
-
-.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>

api/anotherTFInterface/index.js

@@ -18,6 +18,9 @@ export const addEnterpriseUserLabelSaveApi = (data) => AnotherTFRequest('/dtsEnt
 // 修改用户标签
 export const updateByIdEnterpriseUserLabelApi = (data) => AnotherTFRequest('/dtsEnterpriseUserLabel/updateById', data, 'POST')
 
+// 查询标签详情
+export const getEnterpriseUserLabelDetailApi = (data) => AnotherTFRequest('/dtsEnterpriseUserLabel/xxx', data)
+
 // 删除用户标签
 export const deleteByIdEnterpriseUserLabelApi = (data) => AnotherTFRequest('/dtsEnterpriseUserLabel/deleteById', data, 'POST')
 

components/JHeader/JHeader.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="j-header-container">
+		<!-- #ifdef H5 || APP -->
 		<JBack :width="$attrs.width" :height="$attrs.height" :tabbar="$attrs.tabbar" :dark="dark"></JBack>
 		<view
 			class="title" :style="{
@@ -11,6 +12,7 @@
 		<view class="footerFn">
 			<slot name="ftFn"></slot>
 		</view>
+		<!-- #endif -->
 	</view>
 </template>
 

components/LoadingMore/LoadingMore.vue

@@ -3,13 +3,13 @@
     class="loading-more-container"
     v-show="['loading', 'no-more'].includes(status)"
   >
-    <div id="loading-wrapper" v-show="status === 'loading'">
-      <div class="dot"></div>
-      <div class="dot"></div>
-      <div class="dot"></div>
-      <div class="dot"></div>
-      <div class="dot"></div>
-    </div>
+    <view id="loading-wrapper" v-show="status === 'loading'">
+      <view class="dot"></view>
+      <view class="dot"></view>
+      <view class="dot"></view>
+      <view class="dot"></view>
+      <view class="dot"></view>
+    </view>
 
     <view class="no-more" v-show="status === 'no-more'">{{ text }}</view>
   </view>

pages.json

@@ -41,12 +41,38 @@
 					"path": "another-user/calling-card/agree",
 					"style": {
 						"navigationBarTitleText": "用户协议"
+						// 对于APP，单独设置uniapp自带的头部导航栏，则有头部导航栏，否则没有；当然也可以不设置，而使用页面头部栏。
+						// "app-plus": {
+						// 	// #ifdef APP
+						// 	"titleNView": {
+						// 		"type": "default"
+						// 	}
+						// 	// #endif
+						// }
+						// 相当于全局设置的。对于小程序，如果设置导航栏自定义，则没有了小程序自身的头部导航栏，否则依然存在。
+						// "navigationStyle": "custom",
+						// 相当于全局设置的。
+						// "app-plus": {
+						// 	"titleNView": false
+						// } //去掉
 					}
 				},
 				{
-					"path": "another-user/calling-card/edit",
+					"path": "another-user/calling-card-management/calling-card-form",
 					"style": {
-						"navigationBarTitleText": "编辑名片"
+						"navigationBarTitleText": "名片表单"
+					}
+				},
+				{
+					"path": "another-user/calling-card-management/label-list",
+					"style": {
+						"navigationBarTitleText": "名片标签列表"
+					}
+				},
+				{
+					"path": "another-user/calling-card-management/card-label-form",
+					"style": {
+						"navigationBarTitleText": "名片标签表单"
 					}
 				}
 			]
@@ -79,10 +105,18 @@
 		"navigationBarBackgroundColor": "#FFFFFF",
 		"navigationBarTitleText": "uni-card",
 		"navigationBarTextStyle": "black",
+		// "navigationStyle": "custom",
+		// 对于小程序、APP、H5，设置了，则没有了uniapp自带的头部导航栏。
 		"titleNView": false,
 		"app-plus": {
 			"animationType": "slide-in-right",
 			"animationDuration": 300
 		}
+		// 无用：
+		// "mp-weixin": {
+		// 	"usingComponents": {
+		// 		"tui-no-data": "/components/thorui/tui-no-data/tui-no-data" // /pages/index/index
+		// 	}
+		// }
 	}
 }

pages/index/index.vue

@@ -1,107 +1,356 @@
 <template>
 	<view class="index-container">
 		<TuanAppShim bg="transparent"></TuanAppShim>
-		<view class="content-box">
-			<view class="top-main-box">
-				<view class="zzbg">
-					<image class="mpimg" src="../../static/images/userimg.png" mode="widthFix"></image>
-				</view>
-				<view class="topmain">
-					<view class="leftimg">
-						<image style="width: 60rpx;height: 60rpx;" :src="cardObj.head_img"></image>
-					</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">
-					<text>{{ cardObj.address }}</text>
-				</view>
-			</view>
-
-			<view class="top-mainb">
-				<view class="conta">
-					<view v-if="cardObj.phone" class="cont" @click="onPhone()">
-						<view class="box">
-							<view class="right">
-								<text class="tit">拨打电话</text>
-								<text>{{ cardObj.phone }}</text>
+		<view style="padding-top: 30rpx;font-size: 28rpx;">
+			<view v-if="electronicCardInfo.buyerId">
+
+				<view style="padding: 20rpx;background-color: #476088;color: #ffffff;border-radius: 14rpx;">
+					<view
+						v-if="(electronicCardInfo.styleId === 1) || (electronicCardInfo.styleId === 2) || (electronicCardInfo.styleId === 3)"
+					>
+						<view style="display: flex;align-items: center;">
+							<view style="flex: 1;display: flex;align-items: center;">
+								<view style="text-align: center;">
+									<image
+										:src="common.seamingImgUrl(electronicCardInfo.headImage)"
+										style="width: 102rpx;height: 102rpx;border-radius: 50%;"
+									></image>
+								</view>
+								<view style="margin-left: 28rpx;">
+									<view style="display: flex;align-items: center;">
+										<view>{{ electronicCardInfo.name }}</view>
+										<view style="margin-left: 20rpx;">
+											<text v-if="electronicCardInfo.sex == 1">男</text>
+											<text v-else-if="electronicCardInfo.sex == 2">女</text>
+											<text v-else>未知</text>
+										</view>
+									</view>
+									<view style="font-size: 26rpx;">{{ electronicCardInfo.birthday }}</view>
+								</view>
 							</view>
+							<view v-if="electronicCardInfo.ifBlack" style="margin-left: 20rpx;font-weight: bold;">已加入黑名单</view>
 						</view>
-					</view>
-					<view v-if="cardObj.wechat" class="cont" @click="onCopy(cardObj.wechat)">
-						<view class="box">
-							<view class="right">
-								<text class="tit">加微信</text>
-								<text>{{ cardObj.wechat }}</text>
+						<view style="margin-top: 12rpx;">
+							<view style="display: flex;justify-content: space-between;align-items: center;">
+								<view style="flex: 2;display: flex;align-items: flex-start;padding-top: 8rpx;">
+									<tui-icon :size="28" color="#dedcdc" name="mobile" unit="rpx" margin="0 18rpx 0 0"></tui-icon>
+									<view>{{ electronicCardInfo.phone }}</view>
+								</view>
+								<view
+									v-if="electronicCardInfo.landline"
+									style="flex: 3;display: flex;align-items: flex-start;padding-top: 8rpx;"
+								>
+									<tui-icon :size="28" color="#dedcdc" name="voipphone" unit="rpx" margin="0 18rpx 0 0"></tui-icon>
+									<view>{{ electronicCardInfo.landline }}</view>
+								</view>
 							</view>
-						</view>
-					</view>
-					<view v-if="cardObj.qq" class="cont" @click="onCopy(cardObj.qq)">
-						<view class="box">
-							<view class="right">
-								<text class="tit">QQ</text>
-								<text>{{ cardObj.qq }}</text>
+							<view style="display: flex;justify-content: space-between;align-items: center;">
+								<view
+									v-if="electronicCardInfo.mailbox"
+									style="flex: 2;display: flex;align-items: flex-start;padding-top: 8rpx;"
+								>
+									<tui-icon :size="28" color="#dedcdc" name="mail" unit="rpx" margin="0 18rpx 0 0"></tui-icon>
+									<view>{{ electronicCardInfo.mailbox }}</view>
+								</view>
+								<view
+									v-if="electronicCardInfo.weChatSignal"
+									style="flex: 3;display: flex;align-items: flex-start;padding-top: 8rpx;"
+								>
+									<tui-icon :size="28" color="#dedcdc" name="wechat" unit="rpx" margin="0 18rpx 0 0"></tui-icon>
+									<view>{{ electronicCardInfo.weChatSignal }}</view>
+								</view>
+							</view>
+							<view
+								v-if="electronicCardInfo.personalProfile"
+								style="display: flex;align-items: flex-start;padding-top: 8rpx;"
+							>
+								<tui-icon :size="28" color="#dedcdc" name="message" unit="rpx" margin="0 18rpx 0 0"></tui-icon>
+								<view>{{ electronicCardInfo.personalProfile }}</view>
+							</view>
+							<view style="display: flex;align-items: flex-start;padding-top: 8rpx;">
+								<tui-icon :size="28" color="#dedcdc" name="position" unit="rpx" margin="0 18rpx 0 0"></tui-icon>
+								<view>{{ electronicCardInfo.address }}</view>
 							</view>
 						</view>
 					</view>
-					<view v-if="cardObj.email" class="cont" @click="onCopy(cardObj.email)">
-						<view class="box">
-							<view class="right">
-								<text class="tit">邮箱</text>
-								<text>{{ cardObj.email }}</text>
-							</view>
+					<view v-else style="padding-bottom: 45rpx;">
+						<tui-no-data :fixed="false">您还未设置名片样式～</tui-no-data>
+					</view>
+					<view
+						v-if="electronicLabelInfo && electronicLabelInfo.length"
+						style="display: flex;flex-wrap: wrap;padding: 8rpx 0;"
+					>
+						<view
+							v-for="item in electronicLabelInfo" :key="item.labelId"
+							style="margin: 8rpx 0 0 12rpx;padding: 6rpx 16rpx;border: 2rpx solid #d8d3d3;background-color: #292d3c;border-radius: 6rpx;"
+						>
+							{{ item.labelName }}
 						</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">
-					<tui-image-group
-						:image-list="headerList.map((item, index) => ({ id: index, src: item || headerImg }))"
-						width="35rpx" height="35rpx" radius="0"
-					></tui-image-group>
-					<text>{{ visitorCount }}人浏览</text>
+				<view style="margin: 14rpx -30rpx 0;padding: 16rpx 16rpx 0;background-color: #e8e8e8;">
+					<view style="margin-left: 30rpx;font-size: 30rpx;font-weight: bold;">图片介绍</view>
+					<view style="margin-top: 18rpx;">
+						<swiper
+							autoplay :interval="3000" circular :previous-margin="previousMargin"
+							:next-margin="nextMargin"
+							:duration="1000" style="height: 328rpx;" @change="handleSwiperChange"
+						>
+							<swiper-item v-for="(item, index) in electronicCardInfo.pictureIntroduction.split(',')" :key="index">
+								<tui-lazyload-img
+									mode="scaleToFill" width="600rpx" height="100%" radius="20rpx"
+									:src="common.seamingImgUrl(item)"
+								></tui-lazyload-img>
+							</swiper-item>
+						</swiper>
+					</view>
 				</view>
-			</view>
-			<view class="top-main-tit">
-				<text>业务介绍</text>
-			</view>
-			<view class="top-maind">
-				<view class="topmain">
-					<view class="leftimg">
-						<image style="width: 60rpx;height: 60rpx;" :src="cardObj.head_img"></image>
+				<view
+					v-if="electronicCardInfo.isEnterprise"
+					style="padding: 20rpx;margin-top: 30rpx;background-color: #2d3d5a;color: #ffffff;border-radius: 14rpx;"
+				>
+					<view>企业信息</view>
+					<view style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;">
+						<view style="text-align: center;">
+							<image
+								:src="common.seamingImgUrl(electronicCardInfo.enterpriseHeadImage)"
+								style="width: 102rpx;height: 102rpx;border-radius: 50%;"
+							></image>
+						</view>
+						<view style="flex: 1;margin-left: 28rpx;">
+							<view>企业名称：{{ electronicCardInfo.enterpriseName }}</view>
+							<view>职务：{{ electronicCardInfo.enterpriseDuties || '--' }}</view>
+						</view>
 					</view>
-					<view class="rightcont">
-						<view v-if="!cardObj.intro" class="name">Hi~欢迎访问我的名片，了解更多内容请直接咨询我。</view>
-						<view v-if="cardObj.intro" class="name">{{ cardObj.intro }}</view>
+				</view>
+
+				<view>
+					<view
+						style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 20rpx;border-bottom: 2rpx solid #cccccc;"
+					>
+						<tui-button type="blue" width="220rpx" height="68rpx" margin="20rpx auto 0" open-type="share">
+							分享名片
+						</tui-button>
+						<tui-button type="blue" width="220rpx" height="68rpx" margin="20rpx auto 0" @click="onAdd()">
+							同步到通讯录
+						</tui-button>
+						<tui-button
+							type="blue" width="220rpx" height="68rpx" margin="20rpx auto 0"
+							@click="go(`/another-tf/another-user/calling-card-management/calling-card-form?id=${electronicCardInfo.buyerId}`)"
+						>
+							编辑名片
+						</tui-button>
 					</view>
+					<tui-list-view>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<view>
+									<view v-if="electronicLabelInfo && electronicLabelInfo.length">标签</view>
+									<view v-else>您还没设置名片标签</view>
+								</view>
+								<view style="flex: 1;text-align: right;">
+									<view
+										v-if="electronicLabelInfo && electronicLabelInfo.length"
+										style="display: inline-block;width: fit-content;"
+									>
+										<tui-button
+											type="blue" width="220rpx" height="68rpx" margin="20rpx 0 0"
+											@click="go(`/another-tf/another-user/calling-card-management/label-list`)"
+										>
+											管理标签
+										</tui-button>
+									</view>
+									<view v-else style="display: inline-block;width: fit-content;">
+										<tui-button
+											type="blue" width="220rpx" height="68rpx" margin="20rpx 0 0"
+											@click="go(`/another-tf/another-user/calling-card-management/card-label-form`)"
+										>
+											新建标签
+										</tui-button>
+									</view>
+								</view>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>是否启用：</text>
+								<view style="flex: 1;text-align: right;">
+									<text v-if="electronicCardInfo.state">是</text>
+									<text v-else>否</text>
+								</view>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>是否加入黑名单：</text>
+								<view style="flex: 1;text-align: right;">
+									<text v-if="electronicCardInfo.ifBlack">是</text>
+									<text v-else>否</text>
+								</view>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>名片头像：</text>
+								<view style="flex: 1;text-align: right;">
+									<image
+										:src="common.seamingImgUrl(electronicCardInfo.headImage)"
+										style="width: 102rpx;height: 102rpx;border-radius: 50%;"
+									></image>
+								</view>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>用户ID：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.buyerId }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>昵称：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.name }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>性别：</text>
+								<view style="flex: 1;text-align: right;">
+									<text v-if="electronicCardInfo.sex == 1">男</text>
+									<text v-else-if="electronicCardInfo.sex == 2">女</text>
+									<text v-else>未知</text>
+								</view>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>生日：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.birthday }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>手机号：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.phone }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>地址：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.address }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>邮箱：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.mailbox }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>微信号：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.weChatSignal }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>座机：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.landline }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>个人简介：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.personalProfile }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>创建时间：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.createTime }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>更新时间：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.updateTime }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>样式ID：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.styleId }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>用户标签ID：</text>
+								<text style="flex: 1;text-align: right;">{{ electronicCardInfo.label }}</text>
+							</view>
+						</tui-list-cell>
+						<tui-list-cell background-color="transparent" padding="20rpx 0">
+							<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+								<text>是否企业：</text>
+								<view style="flex: 1;text-align: right;">
+									<text v-if="electronicCardInfo.isEnterprise">是</text>
+									<text v-else>否</text>
+								</view>
+							</view>
+						</tui-list-cell>
+						<view v-if="electronicCardInfo.isEnterprise">
+							<tui-list-cell background-color="transparent" padding="20rpx 0">
+								<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+									<text>企业头像：</text>
+									<view style="flex: 1;text-align: right;">
+										<image
+											:src="common.seamingImgUrl(electronicCardInfo.enterpriseHeadImage)"
+											style="width: 102rpx;height: 102rpx;border-radius: 50%;"
+										></image>
+									</view>
+								</view>
+							</tui-list-cell>
+							<tui-list-cell background-color="transparent" padding="20rpx 0">
+								<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+									<text>企业名称：</text>
+									<text style="flex: 1;text-align: right;">{{ electronicCardInfo.enterpriseName }}</text>
+								</view>
+							</tui-list-cell>
+							<tui-list-cell background-color="transparent" padding="20rpx 0">
+								<view style="display: flex;justify-content: space-between;align-items: center;padding-left: 4rpx;">
+									<text>担任职务：</text>
+									<text style="flex: 1;text-align: right;">{{ electronicCardInfo.enterpriseDuties }}</text>
+								</view>
+							</tui-list-cell>
+						</view>
+					</tui-list-view>
 				</view>
 			</view>
+			<view v-else style="padding-bottom: 45rpx;">
+				<tui-no-data :fixed="false">您还未设置名片～</tui-no-data>
+				<tui-button
+					type="blue" width="220rpx" height="68rpx" margin="20rpx auto 0"
+					@click="go(`/another-tf/another-user/calling-card-management/calling-card-form`)"
+				>
+					新建名片
+				</tui-button>
+			</view>
 
+			<view>
+			</view>
 		</view>
-		<view class="bottom-block"></view>
-		<view class="bottombtn" type="primary" @click="gotoEdit">编辑我的名片</view>
 	</view>
 </template>
 
 <script>
-import { USER_INFO } from '../../constant'
+import { mapGetters } from 'vuex'
 
 export default {
 	name: 'Index',
 	data() {
 		return {
+			previousMargin: '0',
+			nextMargin: '80rpx',
+
 			id: '',
 			headerImg: require('../../static/images/userimg.png'),
 			cardObj: {},
@@ -172,7 +421,23 @@ export default {
 			path: '/pages/index?id=' + this.id
 		}
 	},
+	computed: {
+		...mapGetters(['electronicCardInfo', 'electronicLabelInfo'])
+	},
 	methods: {
+		handleSwiperChange(e) {
+			if (this.$store.getters.electronicCardInfo.pictureIntroduction && this.$store.getters.electronicCardInfo.pictureIntroduction.split(',').length === 1) {
+				console.log(e)
+				if (e.detail.current === 1) {
+					this.nextMargin = '0'
+					this.previousMargin = '80rpx'
+				} else {
+					this.nextMargin = '80rpx'
+					this.previousMargin = '0'
+				}
+			}
+		},
+
 		async getDefault() {
 			const card = await request('uni-card', 'getCard', {
 				id: '61b30b8091a7500001dea375',
@@ -223,33 +488,6 @@ export default {
 					console.log('调用失败!')
 				}
 			})
-		},
-		onCopy(data) {
-			uni.setClipboardData({
-				data, // 要被复制的内容
-				success() {
-					// 重点~做笔记
-					// 在success中加入uni.hideToast()可以解决
-					uni.showToast({
-						title: '复制成功',
-						duration: 2000,
-						icon: 'none'
-					})
-					// 以下就可自定义操作了~
-				},
-				fail(err) {
-					uni.showToast({
-						title: '复制失败',
-						duration: 2000,
-						icon: 'none'
-					})
-				}
-			})
-		},
-		gotoEdit() {
-			uni.navigateTo({
-				url: '/pages/edit/edit'
-			})
 		}
 	}
 }
@@ -258,327 +496,20 @@ export default {
 <style lang="less" scoped>
 .index-container {
 	min-height: 100vh;
-	padding: 0 0 120rpx;
+	padding: 0 30rpx 120rpx;
 	background-color: #fefefe;
 	box-sizing: border-box;
 
-	.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;
-	}
+	/deep/ .tui-nodata-box {
+		padding-top: 60rpx;
 
-	.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;
+		.tui-tips-content {
+			color: #ffffff;
+		}
 	}
 
-	.bottom-block {
-		display: block;
-		width: 100%;
-		height: 80px;
+	/deep/ .tui-list-cell {
+		border-bottom: 2rpx solid #cccccc;
 	}
 }
 </style>

pages/login/login.vue

@@ -19,7 +19,6 @@
 						v-model="loginQuery.phone" label="+ 86" type="number" padding="26rpx 20rpx 26rpx 0"
 						placeholder-style="color: #f3c1c4;font-size: 32rpx;" label-color="#ffffff" border-color="#EA5B1D"
 						placeholder="请输入手机号码" background-color="transparent" :border-top="false" color="#ffffff"
-						style="border-bottom: 2rpx solid #ffffff;"
 					></tui-input>
 				</view>
 				<view v-if="loginType === 'password'">
@@ -27,7 +26,6 @@
 						v-model="loginQuery.password" type="password" padding="26rpx 20rpx 26rpx 0"
 						placeholder-style="color: #f3c1c4;font-size: 32rpx;" background-color="transparent" :border-top="false"
 						border-color="#EA5B1D" label-color="#ffffff" placeholder="请输入密码" color="#ffffff"
-						style="border-bottom: 2rpx solid #ffffff;"
 					>
 						<template #right>
 							<text style="font-size: 30rpx;color: #dddddd;" @click="isShowResettingPasswordDialog = true">忘记密码</text>
@@ -39,7 +37,6 @@
 						v-model="loginQuery.verificationCode" padding="26rpx 20rpx 26rpx 0"
 						placeholder-style="color: #f3c1c4;font-size: 32rpx;" background-color="transparent" :border-top="false"
 						border-color="#EA5B1D" label-color="#ffffff" placeholder="请输入验证码" color="#ffffff"
-						style="border-bottom: 2rpx solid #ffffff;"
 					>
 						<template #right>
 							<tui-countdown-verify
@@ -54,11 +51,11 @@
 			</tui-form>
 		</view>
 		<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 80rpx;">
-			<view style="text-align: center;">
+			<view style="text-align: center;" class="login-btn">
 				<tui-button
 					type="white" width="640rpx" height="82rpx" :size="38"
 					margin="40rpx 0 0" shape="circle"
-					style="font-weight: bold;color: #ea5b1d!important;" @click="handleLogin"
+					@click="handleLogin"
 				>
 					登录
 				</tui-button>
@@ -349,6 +346,17 @@ export default {
 	.login-form {
 		margin-top: 20rpx;
 		padding: 146rpx 48rpx 10rpx 48rpx;
+
+		/deep/ .tui-input__wrap {
+			border-bottom: 2rpx solid #ffffff;
+		}
+	}
+
+	.login-btn {
+		/deep/ .tui-btn {
+			font-weight: bold;
+			color: #ea5b1d !important;
+		}
 	}
 }
 </style>

pages/login/register.vue

@@ -9,7 +9,7 @@
 			<tui-form ref="form" :show-message="false">
 				<view class="formItem">
 					<tui-input
-						v-model="registerQuery.phone" placeholder-class="inputs" label="" border-color="#EA5B1D"
+						v-model="registerQuery.phone" placeholder-class="inputs" border-color="#EA5B1D"
 						placeholder="请输入电话号码" :border-top="false" color="#222229" clearable
 						size="34"
 					></tui-input>
@@ -19,7 +19,6 @@
 						v-model="registerQuery.verificationCode" padding="26rpx 20rpx 26rpx 0"
 						placeholder-style="color: #f3c1c4;font-size: 32rpx;" background-color="transparent" :border-top="false"
 						border-color="#EA5B1D" label-color="#ffffff" placeholder="请输入验证码" color="#222229"
-						style="border-bottom: 2rpx solid #ffffff;"
 					>
 						<template #right>
 							<tui-countdown-verify
@@ -32,7 +31,7 @@
 				</view>
 				<view class="formItem">
 					<tui-input
-						v-model="registerQuery.password" placeholder-class="inputs" type="password" label=""
+						v-model="registerQuery.password" placeholder-class="inputs" type="password"
 						border-color="#EA5B1D" placeholder="请输入密码" :border-top="false" color="#222229"
 						clearable
 						size="34"
@@ -40,7 +39,7 @@
 				</view>
 				<view class="formItem">
 					<tui-input
-						v-model="registerQuery.passwordAgain" placeholder-class="inputs" type="password" label=""
+						v-model="registerQuery.passwordAgain" placeholder-class="inputs" type="password"
 						border-color="#EA5B1D" placeholder="请再次确认密码" :border-top="false" color="#222229"
 						clearable
 						size="34"

store/getters.js

@@ -1,11 +1,12 @@
 export default {
-  userInfo: (state) => state.auth.userInfo,
-  userToken: (state) => state.auth.userToken,
+	userInfo: (state) => state.auth.userInfo,
+	userToken: (state) => state.auth.userToken,
 
-  // 个人中心
-  electronicCardInfo: (state) => state.user.electronicCardInfo,
+	// 个人中心
+	electronicCardInfo: (state) => state.user.electronicCardInfo,
+	electronicLabelInfo: (state) => state.user.electronicLabelInfo,
 
-  // app
-  systermInfo: (state) => state.app.systermInfo,
-  terminal: (state) => state.app.terminal
-};
+	// app
+	systermInfo: (state) => state.app.systermInfo,
+	terminal: (state) => state.app.terminal
+}

store/modules/auth.js

@@ -403,7 +403,8 @@ export default {
 				// 			}
 				// 			resolve(res.data)
 				try {
-					await store.dispatch('user/getElectronicCardAction')
+					const cardInfo = await store.dispatch('user/getElectronicCardAction')
+					await store.dispatch('user/getElectronicLabelAction', { id: cardInfo.enterpriseUserId })
 					resolve()
 				} catch (err) {
 					reject(err)

store/modules/type.js

@@ -4,6 +4,7 @@ export const CHNAGE_USER_IDENTITY = 'CHNAGE_USER_IDENTITY'
 
 // 个人中心
 export const CHNAGE_ELECTRONIC_CARD_INFO = 'CHNAGE_ELECTRONIC_CARD_INFO'
+export const CHNAGE_ELECTRONIC_LABEL_INFO = 'CHNAGE_ELECTRONIC_LABEL_INFO'
 
 // app
 export const CHANGE_IS_IN_MINIPROGRAM = 'CHANGE_IS_IN_MINIPROGRAM'

store/modules/user.js

@@ -1,20 +1,86 @@
 import {
-	CHNAGE_ELECTRONIC_CARD_INFO
+	CHNAGE_ELECTRONIC_CARD_INFO,
+	CHNAGE_ELECTRONIC_LABEL_INFO
 } from './type'
 import { getStorageKeyToken, getStorageUserId } from '../../utils'
-import { getIdEnterpriseUserApi } from '../../api/anotherTFInterface'
+import { getIdEnterpriseUserApi, getUserIdEnterpriseUserLabelApi } from '../../api/anotherTFInterface'
 
 export default {
 	namespaced: true,
 	state() {
 		return {
-			electronicCardInfo: {}
+			electronicCardInfo: {
+				enterpriseUserId: 1, // 名片ID
+				buyerId: 999, // 用户ID
+				name: '昵称', // 昵称
+				sex: '1', // 1男2女
+				birthday: '2024-09-03', // 生日
+				phone: '13288888888', // 注册手机号
+				headImage: 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/微信图片_20231102095245.jpg', // 头像图片
+				state: 1, // 是否启用1-是,0-否
+				ifBlack: 1, // 是否加入黑名单 1-是0-否
+				isEnterprise: 1, // 是否企业 1-是 0-否
+				enterpriseName: '企业名称', // 企业名称
+				enterpriseDuties: '职务', // 职务
+				enterpriseDepartment: '部门', // 部门
+				address: '地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址', // 地址
+				enterpriseHeadImage: 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/微信图片_20231102095245.jpg', // 企业头像
+				mailbox: '邮箱', // 邮箱
+				weChatSignal: '微信号', // 微信号
+				landline: '座机', // 座机
+				personalProfile: '个人简介', // 个人简介
+				label: '1,2,3,4,5,6', // 用户标签ID (1,2,3,4,5,6)
+				pictureIntroduction: 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1705998424162-22(1)(1).png,https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1704700771949-79b9dbdacaa2a34efa5d1f62f02b614.png,https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1705540309535-124.jpg', // 图片介绍
+				styleId: 1, // 样式ID
+				createTime: '创建时间',
+				updateTime: '更新时间'
+			},
+			electronicLabelInfo: [
+				{
+					labelId: '标签Id',
+					labelName: '标签名称',
+					enterpriseUserId: '关联名片ID',
+					createTime: '创建时间',
+					updateTime: '更新时间'
+				},
+				{
+					labelId: '标签Id',
+					labelName: '标签名称',
+					enterpriseUserId: '关联名片ID',
+					createTime: '创建时间',
+					updateTime: '更新时间'
+				},
+				{
+					labelId: '标签Id',
+					labelName: '标签名称',
+					enterpriseUserId: '关联名片ID',
+					createTime: '创建时间',
+					updateTime: '更新时间'
+				},
+				{
+					labelId: '标签Id',
+					labelName: '标签名称',
+					enterpriseUserId: '关联名片ID',
+					createTime: '创建时间',
+					updateTime: '更新时间'
+				},
+				{
+					labelId: '标签Id',
+					labelName: '标签名称',
+					enterpriseUserId: '关联名片ID',
+					createTime: '创建时间',
+					updateTime: '更新时间'
+				}
+			]
 		}
 	},
 
 	mutations: {
 		[CHNAGE_ELECTRONIC_CARD_INFO](state, electronicCardInfo) {
 			state.electronicCardInfo = electronicCardInfo
+		},
+		[CHNAGE_ELECTRONIC_LABEL_INFO](state, electronicLabelInfo) {
+			state.electronicLabelInfo = electronicLabelInfo
 		}
 	},
 
@@ -31,6 +97,19 @@ export default {
 						reject(err)
 					})
 			})
+		},
+		getElectronicLabelAction({ state, dispatch, commit }, { id }) {
+			return new Promise((resolve, reject) => {
+				if (!getStorageKeyToken()) return reject('缺少个人信息')
+				getUserIdEnterpriseUserLabelApi({ enterpriseUserId: id })
+					.then((res) => {
+						commit(CHNAGE_ELECTRONIC_LABEL_INFO, res.data || [])
+						resolve(res.data || [])
+					})
+					.catch((err) => {
+						reject(err)
+					})
+			})
 		}
 	}
 }

style/mixin.less

@@ -5,15 +5,15 @@
   flex-direction: @direction;
 }
 
-.border(@color: #000, @line: 1upx, @style: solid) {
+.border(@color: #000, @line: 1rpx, @style: solid) {
   border: @line @style @color;
 }
 
-.border-bottom(@color: #000, @line: 1upx, @style: solid) {
+.border-bottom(@color: #000, @line: 1rpx, @style: solid) {
   border-bottom: @line @style @color;
 }
 
-.img(@size: 200upx, @radius: 0) {
+.img(@size: 200rpx, @radius: 0) {
   width: @size;
   height: @size;
   object-fit: cover;

style/var.less

@@ -1,7 +1,7 @@
-@f14:28upx;
-@f12:24upx;
-@f16:32upx;
-@f10:20upx;
+@f14:28rpx;
+@f12:24rpx;
+@f16:32rpx;
+@f10:20rpx;
 
 @c3d:#3d3d3d;
 @c9:#999;
@@ -9,8 +9,8 @@
 @cd8:#D8D8D8;
 @cw:#fff;
 
-@r5:10upx;
-@r10:20upx;
-@r20:40upx;
-@r30:60upx;
-@hw24:48upx;
+@r5:10rpx;
+@r10:20rpx;
+@r20:40rpx;
+@r30:60rpx;
+@hw24:48rpx;