parts_shop_ui_LT/pages/views/customerAnalysis/details.vue

<template>
	<view style="">
		<u-cell-group :border="false">
			<u-cell :border="false" center title="客户信息" arrow-direction="down">
				<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
			</u-cell>
		</u-cell-group>
		<view style="padding: 0 6px;">
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width='50'>行号</uni-th>
					<uni-th align="center" width='100'>联系人</uni-th>
					<uni-th align="center" width='160'>电话</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in  corpsAttnList" :key="index">
					<uni-td align="center">{{index+1}}</uni-td>
					<uni-td align="center">{{item.cname}}</uni-td>
					<uni-td align="center">{{item.tel}}</uni-td>
				</uni-tr>
			</uni-table>
			<u-cell-group :border="false">
				<u-cell :border="false" center title="拜访记录" arrow-direction="down">
					<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
				</u-cell>
			</u-cell-group>
			<view class="content" style="padding-bottom: 60px;">
				<view class="contentBox" v-for="(item,index) in corpsVisitList" :key="index">
					<view style="width: 100%;margin: 0 auto;">
						<u-cell-group :border="false" class="cellClass">
							<u-cell :border="false" center :title="item.visitPeopleName">
								<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
								<u-icon slot="right-icon" name="edit-pen" @click="inputDialogToggle(item)"></u-icon>
							</u-cell>
							<u-cell :border="false" center title="时间" :value="item.visitDate">
							</u-cell>
							<u-cell :border="false" center title="定位" :label="item.address">
							</u-cell>
							<u-cell :border="false" center title="内容" :label="item.content">
							</u-cell>
						</u-cell-group>
					</view>
				</view>
			</view>
			<u-button class="fixed-bottom-btn" type="primary" text="创建拜访记录" @click="inputDialogToggle"></u-button>
			<!-- <uni-popup ref="inputDialog" type="dialog" :mask-click="false">
				<uni-popup-dialog ref="inputClose" mode="input" title="请输入内容" :value="content" placeholder="请输入内容"
					@confirm="dialogInputConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup> -->
			<u-modal :show="showDialog" showCancelButton confirmText='保存' title='请输入内容' negativeTop='300'
				@confirm="dialogInputConfirm" @cancel="dialogClose">
				<view style="width: 100%;" slots='default'>
					<u--textarea v-model="content" placeholder="请输入内容"></u--textarea>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		getDetail,
		submit
	} from '@/api/views/customerAnalysis/index.js'
	export default {
		data() {
			return {
				showDialog: false,
				form: {},
				obj: {},
				content: null,
				dimension: null,
				longitude: null,
				address: null,
				corpsAttnList: [],
				corpsVisitList: [],
			}
		},
		onLoad(data) {
			this.getDetails(data.id)
			let _this = this
			uni.getLocation({
				type: 'gcj02',
				altitude: true,
				geocode: true,
				isHighAccuracy: true,
				success: function(res) {
					_this.longitude = res.longitude
					_this.dimension = res.latitude
					_this.getAddress()
				}
			});
		},
		onShow() {},
		methods: {
			async getAddress() {
				console.log('address')
				const AMAP_KEY = '639d6b93b11d15c8b7df707612d42b8e'; // 从高德开放平台申请Web服务Key
				const API_URL = 'https://restapi.amap.com/v3/geocode/regeo';
				uni.request({
					url: API_URL,
					data: {
						key: AMAP_KEY,
						location: `${this.longitude},${this.dimension}`, // 注意坐标顺序
						extensions: 'base' // 精简返回数据
					},
					success: (res) => {
						this.address = res.data.regeocode.formatted_address
					},
					fail: (err) => {
						console.error('请求失败：', err);
					}
				});

			},
			inputDialogToggle(row) {
				if (row) {
					this.obj = row
					this.content = row.content
				} else {
					this.obj = {}
					this.content = null
				}
				// this.$refs.inputDialog.open()
				this.showDialog = true
			},
			dialogClose() {
				this.content = null
				this.showDialog = false
			},
			dialogInputConfirm() {
				this.obj.customerId = this.form.id
				this.obj.customerName = this.form.cname
				this.obj.content =this.content
				this.obj.dimension = this.dimension
				this.obj.longitude = this.longitude
				this.obj.address = this.address
				this.submit(this.obj)
				this.showDialog=false
			},
			submit(obj) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				submit(obj).then(res => {
					console.log('保存', res)
					this.getDetails(this.form.id)
					uni.hideLoading();
				})
			},
			getDetails(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getDetail({
					id: id
				}).then(res => {
					this.form = res.data
					this.corpsAttnList = res.data.corpsAttnList
					this.corpsVisitList = res.data.corpsVisitList
					uni.hideLoading();
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.fixed-bottom-btn {
		position: fixed;
		bottom: 10px;
		width: 97%;
		/* 根据需要调整宽度 */
	}

	.contentBox {
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		/* box-shadow: 0 5rpx 14rpx 0 rgba(101, 176, 249, 0.42); */
		padding-top: 15rpx;
		padding-bottom: 10rpx;
	}

	.textBox {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin-bottom: 10rpx;
		// align-items: flex-end;
	}

	.textBox-width {
		max-width: 500rpx;
	}

	.cellClass :v-deep .u-cell {
		&__body {
			padding: 2px 10px;
		}
	}
</style>