crmcard/subpages/pages/card/addCard.vue

<template>
	<view class="addCard">
		<!-- 		<tm-sheet :margin="[0,0]" color="bg-gradient-blue-accent">
			<view style="height: 110rpx;"></view>
		</tm-sheet> -->
		<uni-menubar :title="`编辑名片`" />
		<view class="">
			<tm-form ref="formData">
				<tm-sheet :padding="[0,32]">
					<view class="flex-between list pl-20 pr-20 white">
						<view class="left">
							头像
						</view>
						<view class="right">
							<view class="upload">
								<tm-upload ref="upload" :code="200" :max="1" :tips="false"
									url="https://cardoa.platomix.net/api/upload" url-key="data" :auto-upload="true"
									:header="header" :filelist.sync="filelist"></tm-upload>
							</view>
						</view>
					</view>
					<tm-input name="name" required title="姓名" adjust-position v-model="form.name">
						<template v-slot:rightBtn>
							<tm-button open-type="getUserInfo" @getUserInfo='getUserInfo' plan :font-size="20" :height="60" block
								:width="120" theme="bg-gradient-blue-accent">微信授权</tm-button>
						</template>
					</tm-input>
					<view class="gray-100 text-size-s pa-20">微信授权用于快速获取您的微信昵称和头像，填充名片姓名和头像</view>
					<tm-input name="mobile" required title="手机号" v-model="form.mobile">
						<template v-slot:rightBtn>
							<tm-button open-type="getPhoneNumber" @getphonenumber="getNumber"
								theme="bg-gradient-blue-accent" plan :font-size="20" :height="60" block
								:width="120">
								快速获取
							</tm-button>
						</template>
					</tm-input>
					<tm-input name="wx" required title="微信" v-model="form.wx"></tm-input>
					<tm-input name="email	" required title="电子邮箱" v-model="form.email"></tm-input>
				</tm-sheet>
				<tm-sheet :padding="[0,32]">
					<tm-input name="company" required title="公司" adjust-position v-model="form.company"></tm-input>
					<tm-input name="title" required title="职务" adjust-position v-model="form.title"></tm-input>
					<tm-input v-model="form.industry" @click="show = true" placeholder="请选择行业" required title="行业"
						disabled :value="type" right-icon="icon-angle-right"></tm-input>
					<tm-input @click="getAddress" required disabled title="选择位置" v-model="form.cityAdress">
						<template v-slot:rightBtn>
							点击选择
						</template>
					</tm-input>
					<tm-input :vertical="true" name="address" :height="120" adjust-position title="详细地址"
						v-model="form.address" :maxlength="512" :border-bottom="false" :required="true"
						placeholder="请输入详细楼号,门牌号等" input-type="textarea" bg-color="grey-lighten-5" clear></tm-input>
				</tm-sheet>
				<!-- 				<tm-sheet :padding="[40,32]">
					<view class="mt-20">
						<view style="height: 60rpx;line-height: 60rpx;font-size: 24rpx;" class="white pl-20 pr-20 list">
							是否公开此名片供大众看?
						</view>
						<view style="height: 80rpx;" class="white  pl-20 pr-20 list">
							<tm-groupradio name="shiguche" @change="shiguchechange">
								<tm-radio :size="25" color="blue" v-model="checked" label="公开"></tm-radio>
								<tm-radio :size="25" color="blue" v-model="checked" label="部分公开"></tm-radio>
								<tm-radio :size="25" color="blue" v-model="checked" label="不公开"></tm-radio>
							</tm-groupradio>
						</view>
					</view>
					<view class="mt-20">
						<view style="height: 60rpx;line-height: 60rpx;font-size: 24rpx;" class="white pl-20 pr-20 list">
							是否允许他人转发您的名片?
						</view>
						<view style="height: 80rpx;" class="white  pl-20 pr-20 list">
							<tm-groupradio name="shiguche" @change="shiguchechange">
								<tm-radio :size="25" color="blue" v-model="checked" label="允许"></tm-radio>
								<tm-radio :size="25" color="blue" v-model="checked" label="不允许"></tm-radio>
							</tm-groupradio>
						</view>
					</view>
					<view class="mt-20">
						<view style="height: 60rpx;line-height: 60rpx;font-size: 24rpx;" class="white pl-20 pr-20 list">
							是否允许他人克隆您的名片?
						</view>
						<view style="height: 80rpx;" class="white  pl-20 pr-20 list">
							<tm-groupradio name="shiguche" @change="shiguchechange">
								<tm-radio :size="25" color="blue" v-model="checked" label="允许"></tm-radio>
								<tm-radio :size="25" color="blue" v-model="checked" label="不允许"></tm-radio>
							</tm-groupradio>
						</view>
					</view>
				</tm-sheet> -->
				<view class="mt-50 mb-50 pl-30 pr-30 ">
					<tm-button @click="postUp" theme="bg-gradient-blue-accent" block>提交数据</tm-button>
				</view>
			</tm-form>
			<tm-maskFlow v-model="show">
				<view class="maskShow pl-20 pr-20">
					<view class="text-align-center pt-20 pb-20">
						请选择1~3个行业
					</view>
					<view class="maskContent">
						<tm-button size="s" @click="checked1 = !checked1"
							:theme="checked1?'bg-gradient-blue-accent':'grey-lighten-4'" :shadow="0">家装
						</tm-button>
						<tm-button size="s" @click="checked2 = !checked2"
							:theme="checked2?'bg-gradient-blue-accent':'grey-lighten-4'" :shadow="0">环保装饰
						</tm-button>
						<tm-button size="s" @click="checked3 = !checked3"
							:theme="checked3?'bg-gradient-blue-accent':'grey-lighten-4'" :shadow="0">全屋整装
						</tm-button>
					</view>
					<view class="maskFoot">
						<tm-row>
							<tm-col :grid="6">
								<tm-button @click="show=false" size="m" theme="grey-lighten-4" :shadow="0">取消
								</tm-button>
							</tm-col>
							<tm-col :grid="6">
								<tm-button @click="sureClick" size="m" theme="bg-gradient-blue-accent" :shadow="0">确定
								</tm-button>
							</tm-col>
						</tm-row>
					</view>
				</view>
			</tm-maskFlow>

		</view>
		<tm-dialog v-model="dialogShow" content="您还没有开通权限,请联系管理员开通!" confirmColor="blue" :showCancel="true"
			:over-close="false" disabled></tm-dialog>
		<tm-dialog v-model="registerShow" content="必填项不能为空" confirmColor="blue"></tm-dialog>
		<uni-suspension v-if='userInfo.card_id' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: '',
					name: "", //姓名
					picture: "", //头像
					mobile_type: 2, //绑定手机类型：1，微信绑定手机号；2，手动输入手机号
					mobile: "", //手机号码
					wx: "", //微信号
					email: "", //电子邮箱
					company: "", //公司
					title: "", //职位
					industry: "", //行业
					address: "", //详细地址,
					cityAdress: "", //详细地址,
					latitude: "", //维度
					longitude: "", //经度
				},
				cityAdress: "",
				defaultCity: [],
				show: false,
				checked1: false,
				checked2: false,
				checked3: false,
				filelist: [],
				header: {
					'Authorization': uni.getStorageSync('token'),
					'Content-Type': 'multipart/form-data'
				},
				dialogVal: "",
				dialog: false,
				edit: "",
				dialogShow: false,
				registerShow: false
			}
		},
		onLoad(option) {
			this.$tm.request.get('card/read').then(res => {
				this.form = res.data
				this.filelist = [res.data.picture]
			})
		},
		mounted() {
			this.$tm.request.get('user/read').then(res => {
				if (res.data.vip < 1) {
					this.dialogShow = true
				}
			})
		},
		methods: {
			getUserInfo(res) {
				if (res.userInfo.avatarUrl !== '') {
					this.filelist = [res.userInfo.avatarUrl]
					this.$refs.upload.pushFile(this.filelist)
				}
				this.form.name = res.userInfo.nickName
			},
			getNumber(res) {
				this.$tm.request.post('card/getphone', {
					code: res.detail.code
				}).then(result => {
					this.form.mobile_type = 1
					this.form.mobile = result.data.phone_info.phoneNumber
				})
			},
			postUp() {
				this.form.picture = this.filelist[0]
				if (this.form.name == '' || this.form.picture == '' || this.form.mobile == '' || this.form.wx == '' || this
					.form.email == '' || this.form.industry == '' || this.form.company == '' || this.form.title == '' ||
					this.form.address == '' || this.form.cityAdress == '') {
					this.registerShow = true
					return false
				}
				console.log(this.form);
				if (!this.form.id) {
					this.$tm.request.post('card/create', this.form).then(async res => {
						if (res.code == 200) {
							await this.$tm.request.post('user/update', {
								nickname: this.form.name,
								avatar: this.form.picture
							})
							uni.showToast({
								title: "创建成功",
								icon: "success",
								duration: 1000
							})
							this.$tm.request.get('card/read').then(res => {
								if (res.data.card_id) {
									this.$tm.vx.commit('user/setUserInfo', res.data)
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/index/index'
										})
									}, 1000)
								}
							})

						} else {
							uni.showToast({
								title: "创建失败",
								icon: "none",
								duration: 1000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}, 1000)
						}

					})
				} else {
					this.$tm.request.post('card/update', this.form).then(async res => {
						if (res.code == 200) {
							await this.$tm.request.post('user/update', {
								nickname: this.form.name,
								avatar: this.form.picture
							})
							uni.showToast({
								title: "编辑成功",
								icon: "success",
								duration: 1000
							})
							this.$tm.request.get('card/read').then(res => {
								if (res.data.card_id) {
									this.$tm.vx.commit('user/setUserInfo', res.data)
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/index/index'
										})
									}, 1000)
								}
							})

						}
					})
				}

			},
			vehicle() {
				this.show = true
			},
			sureClick() {
				let arr = []
				if (this.checked1 === true) {
					arr.push('家装')
				}
				if (this.checked2 === true) {
					arr.push('环保装饰')
				}
				if (this.checked3 === true) {
					arr.push('全屋装饰')
				}
				this.form.industry = arr.join(',')
				this.show = false
			},
			getAddress() {
				let that = this
				uni.chooseLocation({
					latitude: that.form.latitude * 1,
					longitude: that.form.longitude * 1,
					success: function(res) {
						that.form.cityAdress = res.address
						that.form.latitude = res.latitude
						that.form.longitude = res.longitude
					}
				});

			}

		}
	}
</script>

<style lang="scss" scoped>
	.list {
		border-bottom: 1px solid #E0E0E0;
	}

	.left {
		width: 100rpx;
		height: 150rpx;
		margin-right: 40rpx;
		line-height: 150rpx;
		text-align: center;
	}

	.right {
		flex: 1;
		position: relative;
	}

	.maskShow {
		width: 80vw;
		height: 60vh;
		background-color: #fff;
		border-radius: 50rpx;
		position: relative;

		.maskFoot {
			width: 100%;
			position: absolute;
			bottom: 20rpx;
		}
	}
</style>