QianNiaoShop/pagesT/customer/CommunicationLogsAdd.vue

<template>
	<view class="detail-view">
		<u-form label-width="140" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="拜访对象">
					<u-input class="dis-input" disabled placeholder="请选择" v-model="keyword" @click="goPage('/pagesT/customer/selCustomer')" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label=" " label-position="top">
					<view style="width: 100%;">
						<u-input height="150" maxlength="1000" v-model="content" type="textarea" />
						<upload :sourceType="['camera']" :images="extend.license ? [extend.license] : []" @handleRemove="imgRemove" @uploadSuccess="uploadSuccess" />
					</view>
				</u-form-item>
			</view>
			<view class="address-view">
				<u-icon name="map-fill" color="#6c6c6c" size="26"></u-icon>
				<text class="text">{{ location || '获取位置' }}</text>
				<u-icon @click="locationRegion" name="reload" color="#2979ff" size="28"></u-icon>
			</view>
			<view class="submit-btn"><button :loading="sub_loading" class="add-btn" @click="addCustomerCommunication">保存提交</button></view>
		</u-form>
	</view>
</template>

<script>
import upload from '@/components/qiniu/QiniuUpload.vue';
import amap from '@/common/amap-wx.js';
import config from '@/common/config.js';
export default {
	components: {
		upload
	},
	data() {
		return {
			content: '',
			id: '',
			customerId: '',
			time: '',
			customerData: '',
			keyword: '',
			location: '',
			picture: '',
			staff_id: '',
			extend: {
				license: ''
			},
			amapPlugin: null,
			sub_loading: false
		};
	},
	onLoad(options) {
		this.amapPlugin = new amap.AMapWX({
			key: config.gdKey
		});
		if (options.id) {
			(this.id = options.id),
				uni.setNavigationBarTitle({
					title: '编辑客户拜访'
				});
			this.getCustomerCommunication(this.id);
		} else {
			this.locationRegion();
		}
	},
	watch: {
		customerData(val) {
			if (val) {
				this.keyword = val.name;
				this.customerId = val.id;
			}
		}
	},
	computed: {
		staffId() {
			return this.$store.state.userInfo.staffId;
		}
	},
	methods: {
		// 获取详情
		getCustomerCommunication(id) {
			this.$u.api.getCustomerCommunication(id).then(res => {
				this.content = res.data.content;
				this.customerId = res.data.customerId;
				this.staff_id = res.data.staffId;
				this.time = res.data.createTime;
				this.extend.license = res.data.picture;
				this.location = res.data.location;
				this.keyword = res.data.customerName;
			});
		},
		// 新增
		addCustomerCommunication() {
			if (!this.keyword) {
				this.$u.toast('请选择客户');
				return;
			}
			if (!this.content) {
				this.$u.toast('请输入内容');
				return;
			}
			// if (!this.extend.license) {
			// 	this.$u.toast('请上传拜访凭证');
			// 	return;
			// }
			this.sub_loading = true;
			if (this.id) {
				this.$u.api
					.updateCustomerCommunication(this.id, {
						customerId: this.customerId,
						staffId: this.staff_id,
						content: this.content,
						time: this.time,
						location: this.location,
						picture: this.extend.license
					})
					.then(res => {
						this.sub_loading = false;
						this.$u.toast('编辑成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					})
					.catch(res => {
						this.sub_loading = false;
					});
			} else {
				this.$u.api
					.addCustomerCommunication({
						customerId: this.customerId,
						staffId: this.staffId,
						content: this.content,
						time: this.time,
						location: this.location,
						picture: this.extend.license
					})
					.then(res => {
						this.sub_loading = false;
						this.$u.toast('提交成功');
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					})
					.catch(res => {
						this.sub_loading = false;
					});
			}
		},
		locationRegion() {
			uni.showLoading({
				title: '获取信息中'
			});
			this.amapPlugin.getRegeo({
				success: data => {
					console.log(data);
					this.location = data[0].name;
					uni.hideLoading();
				},
				fail: err => {
					console.log('获取位置失败：：', err);
				}
			});
		},
		// 图片上传成功
		uploadSuccess(imgUrl) {
			this.extend.license = imgUrl;
		},
		//移除图片
		imgRemove(arr) {
			this.extend.license = '';
		}
	}
};
</script>
<style scoped lang="scss">
.need-submit {
	padding: 30rpx;
	padding-top: 50rpx;
}

.add-btn {
	width: 690upx;
	height: 80upx;
	font-size: 32upx;
	color: #fff;
	border-radius: 10upx;
	margin: 0 auto;
	background-color: $uni-color-primary;
}

.add-btn:after {
	border: 0 none;
}

.address-view {
	font-size: 24rpx;
	background-color: #ffffff;
	line-height: 50rpx;
	height: 50rpx;
	border-radius: 40rpx;
	display: inline-block;
	margin: 0 20rpx;
	padding: 0 20rpx;
	.text {
		margin: 0 16rpx 0 8rpx;
	}
}
</style>