businessCard/xiaochengxu/pages/cardHolder/scanCodeAddCard.vue

<template>
	<view>
		<view class="card-wrap">
			<card :obj="cardInfo" :styleList="bottomStyle" page="scanCodeAddCard"></card>
			<view class="row-text">
				<text>默</text>
			</view>
		</view>

		<!-- 		<view class="content1">
			
			<view class="left">
			</view>
			<view class="right">
				<view class="row1">
					{{cardInfo.name}}|{{cardInfo.post}}
				</view>
				<view class="">
					{{cardInfo.companyName}}
				</view>
				<view class="">
					地址{{cardInfo.province}}{{cardInfo.city}}{{cardInfo.area}}{{cardInfo.detailedAddress}}
				</view>
				<view class="">
					联系电话{{cardInfo.phone}}
				</view>
				<view class="">
					备注{{cardInfo.remark?cardInfo.remark:''}}
				</view>
			</view>
		</view> -->
		<view class="title">
			名片信息
		</view>
		<view class="form-style">
			<view class="row" style="border-bottom: 1px solid #E6E5E5;padding-bottom: 20rpx;">
				<view class="left">
					名片分类
				</view>
				<view class="right" @click="show = true">
					{{cardInfo.classify?cardInfo.classify:'默认分类'}}
				</view>
			</view>
			<view class="" style="padding: 20rpx 0;">
				<view class="left" style="margin-bottom: 20rpx;">
					备注（选填）
				</view>
				<view class="right">
					<u--textarea v-model="cardInfo.remark" placeholder="输入备注，不超过150个字 "></u--textarea>
				</view>
			</view>
			<view class="flex flex-between" style="border-bottom: 1px solid #E6E5E5;padding: 20rpx 0;">
				<view class="left">
					我的名片
				</view>
				<view class="right" @click="show1 = true">
					{{cardInfo.cardBusiness?cardInfo.cardBusiness:'无名片'}}
				</view>
			</view>
		</view>
		<u-picker keyName="cardBusiness" title="选择名片" @close="show1=false" @cancel="show1=false" closeOnClickOverlay
			@confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
		<u-picker keyName="circleName" title="选择分类" @close="show=false" @cancel="show=false" closeOnClickOverlay
			@confirm="typeConfirm" :show="show" :columns="columns"></u-picker>
			<view class="bottom-btn">
				<u-button @click='cancel' text="取消" type="primary" :plain="true" color="#18254C" :customStyle="btnStyle"></u-button>
				<u-button @click='$u.debounce(save, 500)' text="保存" type="primary" color="#18254C" :customStyle="btnStyle"></u-button>
			</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import Card from '../../components/Card/Card.vue'
	export default {
		components: {
			Card
		},
		data() {
			return {
				btnStyle:{
					// width:'calc(50% - 80rpx)'
				},
				bottomStyle: [
					"position:absolute;left: 0;width:24vw;height:0;border-bottom:80rpx solid red;border-right:80rpx solid transparent;border-radius:0 0 0 20rpx",
					"position: absolute;right: -40rpx;width: 58vw;height: 0;border-top: 80rpx solid green;border-left: 80rpx solid transparent;border-radius: 0 0 10px 0"
				],
				id: '',
				cardInfo: {},
				show: false,
				show1: false,
				columns: [],
				cardList: [],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(options) {
			this.id = options.id.indexOf(",") ? options.id.split(",")[0] : options.id
			this.getList()
		},
		onShow() {

		},
		methods: {
			save() {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				this.$request.baseRequest('admin.unimall.cardHolderInfo', 'add', {
					cardHolderInfo: JSON.stringify({
						cardId: this.cardInfo.id,
						remark: this.cardInfo.remark,
						cardCommonId: this.cardInfo.cardCommonId,
						myCardId: this.cardInfo.myCardId,
						commonId: uni.getStorageSync("userInfo").id,
						classify: this.cardInfo.classify
					})
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: '保存成功！',
					})
					uni.switchTab({
						url: "/pages/cardHolder/cardHolder"

					})
				})
			},
			cancel() {
				uni.switchTab({
					url: "/pages/cardHolder/cardHolder"

				})
			},
			cardConfirm(e) {
				console.log(e)
				this.cardInfo.cardBusiness = e.value[0].cardBusiness
				this.cardInfo.myCardId = e.value[0].id
				this.show1 = false
			},
			typeConfirm(e) {
				console.log(e)
				this.cardInfo.classify = e.value[0].circleName
				this.show = false
			},
			getList() {
				this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
					commonId: uni.getStorageSync("userInfo").id
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.cardList = [res.data.items]
				})
				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list', {
					page: 1,
					limit: 9999,
					commonId: uni.getStorageSync("userInfo").id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
				}).then(res => {
					this.columns = [res.data.items]
					console.log(this.columns)
				})
				this.$request.baseRequest('admin.unimall.cardManagementInfo', 'get', {
					id: this.id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.cardInfo = res.data
					this.cardInfo.cardCommonId = res.data.commonId
					console.log(res)
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.card-wrap {
		position: relative;

		.row-text {
			position: absolute;
			bottom: 20px;
			left: 110rpx;
		}
	}
	.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #19191A;
		margin-left: 20rpx;
	}
	.form-style{
		background: #fff;
		padding: 20rpx;
		margin: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.row{
			display: flex;
			justify-content: space-between;
		}
	}
	.bottom-btn{
		position: fixed;
		bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		// padding: 20rpx;
		width: 100vw;
	}
</style>