SmartParks_uniapp/pages/sys/user/myVisitor/creatVisitor.vue

<template>
	<view class="cv-container">

		<!-- 可滚动内容区 -->
		<view class="cv-scroll-content">
			<!-- 访客信息 -->
			<view class="info">
				<view class="cv-section-title">访客信息</view>
<!--				<view class="cv-avatar-upload" @click="chooseAvatar">-->
<!--					<view v-if="!header" class="cv-avatar-placeholder">上传正脸照</view>-->
<!--					<image v-else :src="header" class="cv-avatar-img" />-->
<!--				</view>-->
<!--				<input class="cv-input-name" placeholder="请输入姓名" v-model="form.visitorName" />-->
<!--				<input class="cv-input-phone" placeholder="请输入来访人电话" v-model="form.visitorPhone" />-->
<!--				<input class="cv-input" placeholder="请输入来访人身份证/军官证" v-model="form.idCard" />-->
        <view class="cv-section-tag">姓名</view>
        <input class="cv-input" placeholder="请输入姓名" v-model="form.visitorName" />
        <view class="cv-section-tag">电话</view>
        <input class="cv-input" placeholder="请输入联系电话" v-model="form.visitorPhone" />
			</view>
      <!-- 选择来访目的 -->
      <view class="cv-section">
        <view class="cv-section-title">来访目的</view>
        <view class="cv-form-group">
          <view class="cv-select">
            <view class="cv-select-header" @click="togglePurposeDropdown"  :class="{'dropdown-open': purposeDropdownOpen}">
              <span>{{ form.visitingReason || '请选择来访目的' }}</span>
              <view class="cv-select-arrow" :class="{open: purposeDropdownOpen}"></view>
            </view>
            <view class="cv-select-options" :class="{open: purposeDropdownOpen}">
              <view v-for="(purpose, index) in purposes"
                   :key="index"
                   class="cv-option"
                   :class="{selected: form.visitingReason === purpose}"
                   @click="selectPurpose(purpose)">
                {{ purpose }}
              </view>
            </view>
          </view>
        </view>
      </view>
			<!-- 来访时间 -->
			<view class="cv-section">
				<view class="cv-section-title">来访时间</view>
          <view class="datetime-row">
            <uni-datetime-picker class="datetime-picker" type="datetime" hide-second="true" v-model="startTime" @change="changeLog" />
            <view class="separator-line"></view>
            <uni-datetime-picker class="datetime-picker" type="datetime" hide-second="true" v-model="endTime" @change="changeLog" />
          </view>

			</view>
			<!-- 是否预约车位 -->
<!--			<view class="cv-section">-->
<!--				<view class="cv-parking-row">-->
<!--					<view class="cv-section-title">是否预约车位</view>-->
<!--					<view class="cv-radio-label" @click="form.bookingParkingSpace = true">-->
<!--						<view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === true}]" />-->
<!--						<text>是</text>-->
<!--					</view>-->
<!--					<view class="cv-radio-label" @click="form.bookingParkingSpace = false">-->
<!--						<view :class="['cv-radio-custom', {checked: form.bookingParkingSpace === false}]" />-->
<!--						<text>否</text>-->
<!--					</view>-->
<!--					<text class="cv-parking-count">-->
<!--						<text class="cv-parking-num">50</text><text class="cv-parking-total">/100</text>-->
<!--					</text>-->
<!--				</view>-->
<!--				<view class="cv-room-select" @click="chooseCarNumber">-->
<!--					<text>{{ form.licensePlate || '请选择车牌号' }}</text>-->
<!--					<image class="cv-arrow" src="/static/ic_right_arrow_g.png" />-->
<!--				</view>-->
<!--			</view>-->
			<!-- 提交按钮 -->
			<button class="cv-submit-btn" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import MediaSelector, {
		MediaType
	} from '@/utils/mediaSelector';
	import {
		uploadFiles
	} from '@/common/upload.js';
	export default {
		data() {
			return {
				header: '',
				form: {
					visitorName: '',
					visitorPhone: '',
					// idCard: '',
					facePictures: '',
					visitingReason: '',
					// room: '',
					visitingBeginTime: '2025-07-29',
					bookingParkingSpace: false,
					licensePlate: ''
				},
				purposes: ['商务合作', '园区参观', '面试签到', '装修放行', '家政服务', '送货上门'],
				times: ['今天(2025-07-04)', '明天(2025-07-04)'],
        purposeDropdownOpen: false,
        single: '',
        range: ['2021-02-1', '2021-3-28'],
        startTime: '',
        endTime: '',
        start: Date.now() - 1000000000,
        end: Date.now() + 1000000000
			}
		},
		onShow() {
			uni.$once('selectPlate', plate => {
				this.form.licensePlate = plate;
			});
		},
		methods: {
      togglePurposeDropdown() {
        this.purposeDropdownOpen = !this.purposeDropdownOpen;
      },
      selectPurpose(purpose) {
        this.form.visitingReason = purpose;
        this.purposeDropdownOpen = false;
      },
			// 新增：处理图片上传
			async chooseAvatar() {
				try {
					// 调用MediaSelector选择图片，最多选择3张
					const images = await MediaSelector.choose({
						type: MediaType.IMAGE,
						count: 1 // 根据剩余数量选择
					});
					// 将选择的图片添加到selectedImages数组
					this.header = images[0].path

				} catch (error) {

				}
			},
			async submit() {
				let images = [''];
				let filePath = this.header.replace('file://', '');
				images[0] = filePath;
				const result = await uploadFiles({
					files: images,
					url: this.vuex_config.baseUrl + '/resource/oss/upload',
					name: 'file',
					vm: this // 关键：用于注入 token 等
				});

				if (result.code == '200') {
					data = result.data.url
				}

				this.form.facePictures = result.url
			},
			chooseRoom() {
				// 这里可弹出选择房间号
				uni.navigateTo({
					url: '/pages/sys/user/myVisitor/selectRoom'
				});
			},
			chooseCarNumber() {
				// 这里可弹出选择车牌号
				uni.navigateTo({
					url: '/pages/sys/user/myPayment/myCarCode'
				});
			}
		}
	}
</script>

<style scoped>
	.cv-container {
		background: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.cv-scroll-content {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 120rpx;
	}

	.cv-section {
		margin: 36rpx 56rpx 0 56rpx;
	}

	.info {
		position: relative;
		margin: 36rpx 56rpx 0 56rpx;
	}

	.cv-section-title {
		font-size: 32rpx;
		color: #000;
		font-weight: 600;
	}

  .cv-section-tag {
    font-size: 28rpx;
    color: #000;
    font-weight: 500;
    margin: 36rpx 0 16rpx 0;
  }

  /* 下拉框样式 */
  .cv-select {
    position: relative;
    width: 100%;
  }
  .cv-form-group {
    margin: 36rpx 0 16rpx 0;
  }
  .cv-select-header {
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    cursor: pointer;
    z-index: 2; /* 确保选择框在下拉框上方 */
    position: relative; /* 添加定位 */
  }

  .cv-select-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #777;
    transition: transform 0.3s;
  }

  .cv-select-arrow.open {
    transform: rotate(180deg);
  }

  .cv-select-options {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    /* 修复隐藏时的黑线问题 */
    opacity: 0;
    visibility: hidden;
  }

  .cv-select-options.open {
    max-height: 300px;
    overflow-y: auto;
    /* 显示时恢复可见性 */
    opacity: 1;
    visibility: visible;
  }

  .cv-option {
    padding: 14px 16px;
    font-size: 28rpx;
    cursor: pointer;
    transition: background 0.2s;
  }

  .cv-option:hover {
    background: #f0f7ff;
  }
  /* 下拉框打开时持续显示阴影 */
  .cv-select-header.dropdown-open {
    border-color: #007cff;
    border-radius: 10px 10px 0 0; /* 打开时上圆角下直角 */
    border-bottom: 1px solid #007cff; /* 添加底部边框与下拉框衔接 */
  }

  .cv-option.selected {
    background: #007cff;
    color: white;
  }
  .datetime-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15rpx;
    margin: 36rpx 0 0 0;
  }
  .datetime-picker {
    flex: 1;
    max-width: 500rpx;
    position: relative;
  }
  ::v-deep .uni-date__x-input {
     font-size: 11px;
    font-weight: 600;
   }
  .separator-line {
    width: 10rpx;
    height: 2px;
    background: #bdc3c7;
    border-radius: 1px;
  }
	.cv-inputs {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 18rpx;
	}

	.cv-input-name {
		width: 233rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		margin-top: 23rpx;
		border: none;
		outline: none;
	}

	.cv-input-phone {
		width: 363rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		border: none;
		outline: none;
	}

	.cv-input {
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #222;
		padding: 0 24rpx;
		margin-bottom: 29rpx;
		border: none;
		outline: none;
	}

	.cv-avatar-upload {
		position: absolute;
		width: 163rpx;
		height: 183rpx;
		top: 50rpx;
		right: 0rpx;
		background: #F7F8FA;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 24rpx;
	}

	.cv-avatar-placeholder {
		color: #bbb;
		font-size: 24rpx;
		text-align: center;
	}

	.cv-avatar-img {
		width: 163rpx;
		height: 183rpx;
		border-radius: 12rpx;
	}



	.cv-room-select {
		width: 435rpx;
		height: 73rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #808080;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: 12rpx;
	}

	.cv-arrow {
		width: 11rpx;
		height: 21rpx;
	}

	.cv-parking-row {
		display: flex;
		align-items: center;
		gap: 24rpx;
		margin-bottom: 18rpx;
	}

	.cv-radio-label {
		font-size: 24rpx;
		color: #0B0B0B;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		cursor: pointer;
	}

	.cv-radio-label2 {
		font-size: 24rpx;
		color: #0B0B0B;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		cursor: pointer;
	}

	.cv-radio-custom {
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		border: 1rpx solid #007CFF;
		background: #fff;
		margin-right: 12rpx;
		box-sizing: border-box;
		transition: background 0.2s, border 0.2s;
	}

	.cv-radio-custom.checked {
		background: #007CFF;
		border: 1rpx solid #007CFF;
	}

	.cv-parking-count {
		margin-left: 24rpx;
		font-size: 24rpx;
		background: #EBF5FF;
		border-radius: 8rpx;
		padding: 0 18rpx;
		height: 54rpx;
		display: flex;
		align-items: center;
	}

	.cv-parking-num {
		color: #007CFF;
	}

	.cv-parking-total {
		color: #0B0B0B;
	}

	.cv-submit-btn {
		width: 90vw;
		height: 90rpx;
		background: #0090FF;
		color: #fff;
		font-size: 36rpx;
		border: none;
		border-radius: 45rpx;
		margin: 80rpx auto 0 auto;
		display: block;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
	}
</style>