|
|
@@ -30,13 +30,59 @@
|
|
|
|
|
|
<!-- 创建 -->
|
|
|
<div class="create-box">
|
|
|
- <div class="create-title">
|
|
|
- <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
|
|
|
- 创建农场
|
|
|
- </div>
|
|
|
- <div class="create-content">
|
|
|
- <div class="create-from">
|
|
|
-
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="create-title">
|
|
|
+ <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
|
|
|
+ 创建农场
|
|
|
+ </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">点击勾选地块</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场面积" prop="area">
|
|
|
+ <el-input placeholder="勾选地块获得农场面积" v-model="ruleForm.area" autocomplete="off" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="种植作物" prop="period">
|
|
|
+ <div class="select-wrap">
|
|
|
+ <el-select
|
|
|
+ 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"
|
|
|
+ >
|
|
|
+ <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)">立即创建</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -68,16 +114,11 @@ const loading = ref(false);
|
|
|
const remoteMethod = async (keyword) => {
|
|
|
if (keyword) {
|
|
|
locationOptions.list = [];
|
|
|
- // setTimeout(() => {
|
|
|
loading.value = true;
|
|
|
const params = {
|
|
|
key: MAP_KEY,
|
|
|
keyword,
|
|
|
location: route.query.userLocation || "113.61702297075017,23.584863449735067",
|
|
|
- // region: "广东",
|
|
|
- // region_fix: 1
|
|
|
- // filter: 'category<>271013',
|
|
|
- // filter:'category=261400,111100,160000,220000,261400'
|
|
|
};
|
|
|
await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
|
|
|
if (data && data.length) {
|
|
|
@@ -94,15 +135,48 @@ const remoteMethod = async (keyword) => {
|
|
|
locationOptions.list.push(item);
|
|
|
});
|
|
|
});
|
|
|
- // }, 1000);
|
|
|
} else {
|
|
|
locationOptions.list = [];
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleSearchRes = (v) => {
|
|
|
- console.log("resssss", v);
|
|
|
- indexMap.setMapPosition([113.32446, 23.10647])
|
|
|
+ const parts = v.split(",");
|
|
|
+ const coordinateArray = [parseFloat(parts[1]), parseFloat(parts[0])];
|
|
|
+ indexMap.setMapPosition(coordinateArray);
|
|
|
+};
|
|
|
+
|
|
|
+// 表单
|
|
|
+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) {
|
|
|
+ console.log("submit!");
|
|
|
+ } else {
|
|
|
+ console.log("error submit!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const resetForm = (formEl) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -185,21 +259,148 @@ const handleSearchRes = (v) => {
|
|
|
}
|
|
|
|
|
|
.create-box {
|
|
|
+ pointer-events: all;
|
|
|
position: absolute;
|
|
|
bottom: 10px;
|
|
|
left: 12px;
|
|
|
width: calc(100% - 24px);
|
|
|
- background: #E0F1FE;
|
|
|
+ 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: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ // border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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%;
|
|
|
+ .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>
|
