feiniao-farm-h5/src/views/old_mini/create_farm/index.vue

<template>
    <div class="create-farm">
        <custom-header :name="isClient ? '新增用户' : '创建农场'"></custom-header>
        <!-- 地图 -->
        <div class="map-container" ref="mapContainer"></div>
        <div class="farm-content">
            <div class="top-mask"></div>
            <div class="farm-filter">
                <el-select
                    v-model="locationVal"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="搜索位置"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    @change="handleSearchRes"
                    popper-class="location-search-popper"
                >
                    <el-option
                        v-for="(item, index) in locationOptions.list"
                        :key="index"
                        :label="item.title"
                        :value="{ value: item.point, item }"
                    >
                        <span>{{ item.title }}</span>
                        <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
                    </el-option>
                </el-select>
            </div>

            <!-- 创建 -->
            <div class="create-wrap">
                <div class="create-box">
                    <div class="box-content">
                        <div class="create-title">
                            <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
                            {{ isClient ? '新增用户' : '创建农场' }}
                        </div>
                        <div class="create-content">
                            <div class="create-from">
                                <el-form
                                    ref="ruleFormRef"
                                    :model="ruleForm"
                                    :rules="rules"
                                    label-width="auto"
                                    class="demo-ruleForm"
                                >
                                    <el-form-item label="农场位置" prop="position">
                                        <div class="position-wrap">
                                            <el-input
                                                placeholder="农场位置"
                                                readonly
                                                v-model="ruleForm.position"
                                                autocomplete="off"
                                            />
                                            <div class="draw-btn" @click="toSubPage">点击勾选地块</div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="农场面积" prop="area">
                                        <div class="area-box">
                                            <el-input
                                                placeholder="勾选地块获得农场面积"
                                                v-model="ruleForm.area"
                                                autocomplete="off"
                                                style="width: fit-content;"
                                            />
                                            <div class="unit">亩</div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="种植作物" prop="period">
                                        <div class="select-wrap">
                                            <el-select class="select-item" v-model="ruleForm.type" placeholder="作物类型">
                                                <el-option label="荔枝" value="lichi" />
                                                <el-option label="龙眼" value="ly" />
                                            </el-select>
                                            <el-select
                                                v-model="ruleForm.period"
                                                placeholder="物候期"
                                                class="period-select select-item"
                                            >
                                                <el-option label="秋梢期" value="秋梢期" />
                                                <el-option label="开花期" value="开花期" />
                                                <el-option label="膨果期" value="膨果期" />
                                                <el-option label="成熟期" value="成熟期" />
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="农场名称" prop="name">
                                        <el-input
                                            placeholder="请输入您的农场名称"
                                            v-model="ruleForm.name"
                                            autocomplete="off"
                                        />
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="create-btn">
                                <div class="btn-item sencond-btn" @click="resetForm(ruleFormRef)">取消</div>
                                <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">{{ isClient ? '添加' : '立即创建' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import IndexMap from "./map/index.js";
import { useRoute, useRouter } from "vue-router";
import { mapLocation } from "./map/index.js"
import { onMounted, ref, reactive, watch, onActivated } from "vue";
import { useStore } from "vuex";
import { convertPointToArray } from "@/utils/index";
const route = useRoute();
const router = useRouter();
const store = useStore();

const indexMap = new IndexMap();
const mapContainer = ref(null);
onMounted(() => {
    centerPoint.value = store.state.home.miniUserLocationPoint
    indexMap.initMap(centerPoint.value, mapContainer.value);
    const arr = convertPointToArray(centerPoint.value)
    getLocationName(`${arr[1]},${arr[0]}`)
});

const polygonArr = ref(null)
const isClient = ref(false);
onActivated(() => {
    if (route.query.type) {
        isClient.value = true;
    }
    // 绘制勾画范围
    const polygonData = store.state.home.polygonData
    if (polygonData) {
        indexMap.setAreaGeometry(polygonData?.geometryArr)
        polygonArr.value = polygonData.geometryArr
        ruleForm.area = polygonData.area
    }
})

// 搜索
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";

const locationVal = ref(null);
const locationOptions = reactive({
    list: [],
});
const loading = ref(false);
const remoteMethod = async (keyword) => {
    if (keyword) {
        locationOptions.list = [];
        loading.value = true;
        const params = {
            key: MAP_KEY,
            keyword,
            location: route.query.userLocation || "113.61702297075017,23.584863449735067",
        };
        await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
            if (data && data.length) {
                data.forEach((item) => {
                    item.point = item.location.lat + "," + item.location.lng;
                    locationOptions.list.push(item);
                });
            }
        });
        VE_API.old_mini_map.search(params).then(({ data }) => {
            loading.value = false;
            data.forEach((item) => {
                item.point = item.location.lat + "," + item.location.lng;
                locationOptions.list.push(item);
            });
        });
    } else {
        locationOptions.list = [];
    }
};

const handleSearchRes = (v) => {
    const parts = v.value.split(",");
    const coordinateArray = [parseFloat(parts[1]), parseFloat(parts[0])];
    indexMap.setMapPosition(coordinateArray);
    centerPoint.value = `POINT (${coordinateArray[0]} ${coordinateArray[1]})`
    ruleForm.position = v.item?.title || v.item?.address;
    pointAddress.value = v.item?.province + v.item?.city + v.item?.district
};

// 表单
const ruleFormRef = ref(null);
const ruleForm = reactive({
    position: "",
    area: "",
    type: "",
    period: "",
    name: "",
});
const rules = reactive({
    position: [{ required: true, message: "请选择农场位置", trigger: "blur" }],
    area: [{ required: true, message: "请勾选地块获得农场面积", trigger: "blur" }],
    type: [{ required: true, message: "请选择品类", trigger: "blur" }],
    period: [{ required: true, message: "请选择物候期", trigger: "blur" }],
    name: [{ required: true, message: "请输入您的农场名称", trigger: "blur" }],
});

const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            const params = {
                ...ruleForm,
                gemo: polygonArr.value
            }
            console.log("submit!", params);
        } else {
            console.log("error submit!");
        }
    });
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    router.go(-1);
};

const centerPoint = ref(null)

function toSubPage() {
    router.push(`/edit_map?mapCenter=${centerPoint.value}&pointName=${ruleForm.position}&pointAddress=${pointAddress.value}`);
}

const pointAddress = ref(null)
function getLocationName(location) {
    const params = {
            key: MAP_KEY,
            location,
        };
        VE_API.old_mini_map.location(params).then(({ result }) => {
            // locationVal.value = result.formatted_addresses.recommend;
            const add = result.formatted_addresses?.recommend
                ? result.formatted_addresses.recommend
                : result.address + "";
            ruleForm.position = add
            pointAddress.value = result.address
        });
}

watch(() => mapLocation.data,(newValue, oldValue) => {
    if (newValue) {
        centerPoint.value = `POINT (${newValue[0]} ${newValue[1]})`
        getLocationName(`${newValue[1]},${newValue[0]}`)
    }
})
</script>

<style lang="scss" scoped>
.create-farm {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .map-container {
        width: 100%;
        height: calc(100% - 240px);
    }
    .farm-content {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: calc(100% - 40px);
        pointer-events: none;
        z-index: 2;
        .top-mask {
            height: 100px;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
        }
    }
    .farm-filter {
        pointer-events: all;
        margin: 12px;
        position: relative;
        z-index: 10;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        &::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 9px;
            width: 14px;
            height: 14px;
            background: url("@/assets/img/home/search.png") no-repeat center center / 100% 100%;
        }

        ::v-deep {
            .el-select__wrapper {
                background: none;
                box-shadow: none;
                padding-left: 34px;
                font-size: 12px;
                .el-select__selected-item,
                .el-select__placeholder,
                .el-select__input {
                    color: rgba(255, 255, 255, 0.6);
                    &.is-transparent {
                        color: #ccc;
                        font-size: 12px;
                    }
                }
            }
            .el-select {
                transition: all 0.3s;
                .el-input.is-focus .el-input__wrapper {
                    box-shadow: none !important;
                }
            }
            .el-input {
                .el-input__wrapper {
                    background: none;
                    box-shadow: none;
                    padding-left: 18px;
                    font-size: 11px;
                    .el-input__inner {
                        color: rgba(255, 255, 255, 0.6);
                    }
                    &.is-focus {
                        .el-input__inner {
                            color: #ccc;
                            font-size: 11px;
                        }
                    }
                }
            }
        }
    }

    .create-wrap {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, transparent 0%, #f5f7fb 20%);
    }

    .create-box {
        pointer-events: all;
        margin: 0 12px 10px 12px;
        width: calc(100% - 24px);
        background: #e0f1fe;
        border-radius: 14px;
        .box-content {
            position: relative;
            &::after {
                position: absolute;
                right: 10px;
                top: 2px;
                content: "";
                width: 79px;
                height: 72px;
                background: url("@/assets/img/home/creat-bg.png") no-repeat center / 100% 100%;
            }
        }
        .create-title {
            display: flex;
            align-items: center;
            padding: 12px 6px 12px 12px;
            color: #0089f5;
            font-size: 18px;
            font-weight: bold;
            .title-icon {
                width: 18px;
                padding-right: 10px;
            }
        }
        .create-content {
            background: #fff;
            border-radius: 14px;
            padding: 12px;
            position: relative;
            z-index: 2;

            .create-from {
                .select-wrap {
                    display: flex;
                    // width: 86%;
                    ::v-deep {
                        .el-input__wrapper {
                            background: none;
                            box-shadow: none;
                        }
                        .el-input__inner {
                            font-size: 14px;
                            color: rgba(0, 0, 0, 0.5);
                        }
                        .el-select__wrapper {
                            background: none;
                            box-shadow: none;
                            gap: 2px;
                            padding: 4px 2px;
                            justify-content: center;
                        }
                        .el-select__selection {
                            flex: none;
                            width: fit-content;
                        }
                        .el-select__placeholder {
                            color: #000;
                            position: static;
                            transform: none;
                            width: fit-content;
                        }
                    }
                    // .select-item {
                    //     width: fit-content;
                    // }
                    .period-select {
                        margin-left: 6px;
                    }
                    .select-item {
                        min-width: 76px;
                    }
                }
                ::v-deep {
                    .el-form-item__label {
                        color: #000;
                    }
                    .el-form-item__error {
                        top: 117%;
                    }
                    .el-form-item {
                        position: relative;
                        &::after {
                            content: "";
                            position: absolute;
                            left: 60px;
                            bottom: -5px;
                            width: calc(100% - 60px);
                            height: 1px;
                            background: rgba(0, 0, 0, 0.08);
                        }
                    }
                    .el-input__wrapper {
                        box-shadow: none;
                        padding: 1px 6px;
                        // border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                    }
                }
                .area-box {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    justify-content: space-between;
                    .unit {
                        padding-right: 10px;
                    }
                }
                .position-wrap {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .draw-btn {
                        flex: none;
                        padding: 0 12px;
                        height: 30px;
                        line-height: 30px;
                        box-sizing: border-box;
                        color: #2199f8;
                        border: 1px solid #2199f8;
                        background: rgba(33, 153, 248, 0.1);
                        border-radius: 20px;
                        font-size: 12px;
                    }
                }
            }
            .create-btn {
                display: flex;
                align-items: center;
                width: 100%;
                padding-top: 10px;
                .btn-item {
                    flex: 1;
                    text-align: center;
                    padding: 0 11px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 34px;
                    font-size: 16px;
                    box-sizing: border-box;
                    &.sencond-btn {
                        border: 1px solid rgba(153, 153, 153, 0.5);
                        color: #666666;
                    }
                    &.primary-btn {
                        background: linear-gradient(180deg, #76c3ff, #2199f8);
                        color: #fff;
                    }
                }
                .btn-item + .btn-item {
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>

<style lang="scss">
.location-search-popper {
    .el-select-dropdown__list {
        max-width: 96vw;
        overflow-x: auto;
    }
    .sub-title {
        padding-left: 6px;
        font-size: 12px;
        color: #ccc;
    }
}
</style>