dl_uniapp/pages/mine/card/card-detail.vue

<template>
	<view class="my-card-box">
		<navigation-bar-vue title="名片详情" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="card-detail">
			<view class="title">名片信息</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>平台
				</view>
				<view class="item-value">
					<uni-data-select v-model="dataObj.platformCode" :localdata="range"
						@change="change($event,'platformCode')" :clear="false"
						:imgCode="dataObj.platformCode"></uni-data-select>
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>平台账号
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.accountNumber" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>平台昵称
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.accountName" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>粉丝数
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.fansNum" type="number" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>联系电话
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.tel" type="number" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>主页链接
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.indexUrl" type="tel" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>微信号
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.wxNum" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>收货地址
				</view>
				<view class="item-value">
					<uni-data-select v-model="dataObj.addrId" :localdata="addressList" @change="change($event,'addrId')"
						:clear="false" :imgCode="dataObj.addrId"></uni-data-select>
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable">
					商单自报价（选填）
				</view>
				<view class="item-value">
					<input class="uni-input" v-model="dataObj.price" type="decimal" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable">
					所在领域/合作方式（选填）
				</view>
				<view class="item-value">
					<textarea v-model="dataObj.content" placeholder="请输入" />
				</view>
			</view>
			<view class="item-field">
				<view class="item-lable is-required">
					<image src="@/static/mine/required.png" mode="aspectFit"></image>证明材料
				</view>
				<view class="item-value">
					<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile"
						limit="9"></uni-file-picker>
				</view>
			</view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog cancelText="取消" confirmText="创建" iconPath="/static/detail/card.png"
					content="没有可选择的收货地址，请先创建" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
			<view class="item-field" style="align-items: center;">
				<view class="submit-box" @click="submitForm">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import config from '@/config'
	import upload from '@/utils/upload'
	import {
		toast
	} from '@/utils/common.js'
	import {
		getBusiCardById,
		applyBusiCard,
		uniSelectList
	} from '@/api/business/member.js'
	import {
		uniListByParentCode
	} from '@/api/system/config.js'
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
				uploadUrl: '' + '/common/upload',
				headers: {},
				//所有可选的平台
				range: [],
				sizeType: ['compressed'],
				//图片数组
				fileList: [],
				imageUrl: [],
				//地址集合
				addressList: [],
				//名片数据对象
				dataObj: {
					platformCode: "xiaohongshu",
					accountName: null,
					accountNumber: null,
					fansNum: null,
					tel: null,
					addrId: null,
					price: null,
					content: null,
					wxNum: null,
					indexUrl: null,
				}
			}
		},

		onLoad(options) {
			this.initData(options.id)
		},
		onShow() {
			this.initAddress()
			this.initPlatForm()
		},

		methods: {
			dialogConfirm() {
				this.$tab.navigateTo('/pages/mine/addr/addr-list')
			},

			dialogClose() {

			},

			/**初始化数据*/
			initData(id) {
				this.fileList = []
				this.imageUrl = []
				if (id) {
					getBusiCardById({
						id: id
					}).then(res => {
						console.log(res.data, 133)
						this.dataObj = res.data
						if (this.dataObj.image != null && this.dataObj.image != '') {
							console.log(this.dataObj.image, 'this.dataObj.image')
							this.imageUrl = this.dataObj.image.split(',')
							this.imageUrl.map((item) => {
								this.fileList.push({
									url: item
								})
							})
						}
					}).catch((e) => {
						uni.showToast({
							icon: 'error',
							duration: 2000,
							title: e
						});
					})
				} else {
					this.dataObj = {
						platformCode: "xiaohongshu",
						accountName: null,
						accountNumber: null,
						fansNum: null,
						tel: null,
						addrId: null,
						price: null,
						content: null,
					}
				}
			},

			/**初始化分类*/
			initPlatForm() {
				uniListByParentCode({
					code: "dl_platform"
				}).then(res => {
					this.range = res.data
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},

			/**查询当前登录用户的地址*/
			initAddress() {
				uniSelectList().then(res => {
					this.addressList = res.data
					if (this.addressList.length == 0) {
						this.$refs.alertDialog.open()
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},

			//改变选中值
			change(e, type) {},

			/**选择收货地址*/
			chooseAddr() {

			},

			/**提交*/
			submitForm() {
				if (this.dataObj.platformCode == null || this.dataObj.platformCode == "") {
					toast("平台不能为空")
					return
				}
				if (this.dataObj.accountNumber == null || this.dataObj.accountNumber == "") {
					toast("平台账号不能为空")
					return
				}
				if (this.dataObj.accountName == null || this.dataObj.accountName == "") {
					toast("平台昵称不能为空")
					return
				}
				if (this.dataObj.fansNum == null || this.dataObj.fansNum == "") {
					toast("粉丝数不能为空")
					return
				}
				if (this.dataObj.indexUrl == null || this.dataObj.indexUrl == "") {
					toast("主页链接不能为空")
					return
				}
				if (this.dataObj.wxNum == null || this.dataObj.wxNum == "") {
					toast("微信号不能为空")
					return
				}
				if (this.dataObj.tel == null || this.dataObj.tel == "") {
					toast("电话不能为空")
					return
				}
				if (this.dataObj.addrId == null || this.dataObj.addrId == "") {
					toast("收货地址不能为空")
					return
				}
				if (!this.imageUrl || this.imageUrl.length == 0) {
					toast("证明材料不能为空")
					return
				}
				this.dataObj.image = this.imageUrl.join(',');
				applyBusiCard(this.dataObj).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							duration: 2000,
							title: '保存成功'
						});
						uni.navigateBack()
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},

			afterRead(file) {
				for (let i = 0; i < file.tempFilePaths.length; i++) {
					upload({
						url: '',
						filePath: file.tempFilePaths[i]
					}).then((res) => {
						console.log('上传图片', res);
						this.fileList.push({
							url: res.url
						})
						this.imageUrl.push(res.fileName)
					})
				}
			},
			deleteFile(file, index) {
				console.log('删除文件');
				this.fileList.splice(index, 1);
				this.imageUrl.splice(index, 1);
			},
			uploadSuccess(res, file) {
				console.log('上传成功', res);
			},
			uploadFail(error, file) {
				console.log('上传失败', error);
			},
		}
	}
</script>

<style lang="scss">
	.my-card-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: start;
		position: relative;

		.card-detail {
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
			overflow-y: scroll;
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.title {
				font-size: 33rpx;
				width: 100%;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #F4F4F4;
			}

			.item-field {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: center;

				.is-required {
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}

				.item-lable {
					padding: 15rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.item-value {
					width: 100%;

					input {
						padding-left: 20rpx;
						line-height: 1;
						height: 70rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					.choose-add {
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}

					textarea {
						width: 100%;
						height: 150rpx;
						color: #686868;
						padding: 10rpx 0 10rpx 20rpx;
						border: 1rpx solid #dcdfe6;
						border-radius: 8rpx;
					}
				}

				.submit-box {
					padding: 15rpx 0;
					background-color: #FC1F3E;
					color: white;
					width: 70%;
					border-radius: 10rpx;
					margin-top: 80rpx;
					text-align: center;
				}
			}


		}
	}
</style>