|
@@ -20,7 +20,7 @@
|
|
|
type="tel"
|
|
type="tel"
|
|
|
name="tel"
|
|
name="tel"
|
|
|
label="联系电话"
|
|
label="联系电话"
|
|
|
- :rules="[{ required: true,validator: validatorTel, message: '请输入电话号码'}]"
|
|
|
|
|
|
|
+ :rules="[{ required: true, validator: validatorTel, message: '请输入电话号码' }]"
|
|
|
placeholder="请输入电话号码"
|
|
placeholder="请输入电话号码"
|
|
|
/>
|
|
/>
|
|
|
<field
|
|
<field
|
|
@@ -90,12 +90,7 @@
|
|
|
</field>
|
|
</field>
|
|
|
</template>
|
|
</template>
|
|
|
<div class="flex" v-else>
|
|
<div class="flex" v-else>
|
|
|
- <field
|
|
|
|
|
- v-model="formData.address"
|
|
|
|
|
- label="服务区域"
|
|
|
|
|
- readonly
|
|
|
|
|
- placeholder="默认位置"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <field v-model="formData.address" label="服务区域" readonly placeholder="默认位置" />
|
|
|
<el-dropdown trigger="click">
|
|
<el-dropdown trigger="click">
|
|
|
<div class="el-dropdown-link">
|
|
<div class="el-dropdown-link">
|
|
|
{{ dropdownName }}
|
|
{{ dropdownName }}
|
|
@@ -116,6 +111,11 @@
|
|
|
</template>
|
|
</template>
|
|
|
</el-dropdown>
|
|
</el-dropdown>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <upload v-show="pageType === 'NZ'" exampleImg :maxCount="1" class="upload-wrap" @handleUpload="handleUploadSuccess">
|
|
|
|
|
+ <div class="upload-btn">
|
|
|
|
|
+ 点击上传营业执照
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </upload>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="card" v-if="pageType == 'EXPERT'">
|
|
<div class="card" v-if="pageType == 'EXPERT'">
|
|
@@ -127,51 +127,14 @@
|
|
|
<el-input v-model="input" :rows="5" type="textarea" placeholder="描述:" />
|
|
<el-input v-model="input" :rows="5" type="textarea" placeholder="描述:" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="card" v-else>
|
|
|
|
|
- <div class="card-title">
|
|
|
|
|
- <img src="@/assets/img/mine/label-icon.png" alt="" />
|
|
|
|
|
- <span>服务信息</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="checkbox-group">
|
|
|
|
|
- <div class="name">服务作物</div>
|
|
|
|
|
- <el-checkbox-group v-model="checkboxGroup" size="large">
|
|
|
|
|
- <el-checkbox-button
|
|
|
|
|
- @change="(e) => changeCheckBox(e, index)"
|
|
|
|
|
- v-for="(item, index) in cities"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :value="item.name"
|
|
|
|
|
- >
|
|
|
|
|
- {{ item.name }}
|
|
|
|
|
- </el-checkbox-button>
|
|
|
|
|
- </el-checkbox-group>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="checkbox-group">
|
|
|
|
|
- <div class="name">服务类型</div>
|
|
|
|
|
- <el-checkbox-group v-model="checkboxGroup1" size="large">
|
|
|
|
|
- <el-checkbox-button
|
|
|
|
|
- @change="(e) => changeCheckBox1(e, index)"
|
|
|
|
|
- v-for="(item, index) in cities1"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :value="item.name"
|
|
|
|
|
- >
|
|
|
|
|
- {{ item.name }}
|
|
|
|
|
- </el-checkbox-button>
|
|
|
|
|
- </el-checkbox-group>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="checkbox-group">
|
|
|
|
|
- <div class="name">农机设备</div>
|
|
|
|
|
- <el-checkbox-group v-model="checkboxGroup2" size="large">
|
|
|
|
|
- <el-checkbox-button
|
|
|
|
|
- @change="(e) => changeCheckBox2(e, index)"
|
|
|
|
|
- v-for="(item, index) in cities2"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :value="item.name"
|
|
|
|
|
- >
|
|
|
|
|
- {{ item.name }}
|
|
|
|
|
- </el-checkbox-button>
|
|
|
|
|
- </el-checkbox-group>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <ServiceInfo
|
|
|
|
|
+ v-model:crops="crops"
|
|
|
|
|
+ v-model:serviceTypes="serviceTypes"
|
|
|
|
|
+ v-model:machines="machines"
|
|
|
|
|
+ v-model:isEdit="isEdit"
|
|
|
|
|
+ />
|
|
|
|
|
+ </template>
|
|
|
<Button class="button" round block type="primary" native-type="submit"> 提交 </Button>
|
|
<Button class="button" round block type="primary" native-type="submit"> 提交 </Button>
|
|
|
</Form>
|
|
</Form>
|
|
|
</div>
|
|
</div>
|
|
@@ -182,28 +145,35 @@
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
import { Field, Form, Button } from "vant";
|
|
import { Field, Form, Button } from "vant";
|
|
|
import { onActivated, ref } from "vue";
|
|
import { onActivated, ref } from "vue";
|
|
|
-import { useRoute ,useRouter} from "vue-router";
|
|
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
|
|
|
|
+import { useRoute, useRouter } from "vue-router";
|
|
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
|
|
+import upload from "@/components/upload";
|
|
|
|
|
+import ServiceInfo from "@/components/pageComponents/ServiceInfo.vue";
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
-const formRef = ref(null)
|
|
|
|
|
|
|
+const formRef = ref(null);
|
|
|
const formData = ref({
|
|
const formData = ref({
|
|
|
name: "",
|
|
name: "",
|
|
|
tel: "",
|
|
tel: "",
|
|
|
- subjectName:'',
|
|
|
|
|
|
|
+ subjectName: "",
|
|
|
point: "",
|
|
point: "",
|
|
|
- serviceCropsJson:[],
|
|
|
|
|
- agriculturalEquipmentJson:[]
|
|
|
|
|
|
|
+ serviceCropsJson: [],
|
|
|
|
|
+ agriculturalEquipmentJson: [],
|
|
|
|
|
+ licenseImg: [],
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-const validatorTel = (val) =>{
|
|
|
|
|
|
|
+const validatorTel = (val) => {
|
|
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
|
|
- if(!phoneRegex.test(val)) return '请输入正确的电话号码'
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ if (!phoneRegex.test(val)) return "请输入正确的电话号码";
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const onSubmit = () => {
|
|
const onSubmit = () => {
|
|
|
- formData.value.point = "POINT(113.1093017627431 22.574540836684672)"
|
|
|
|
|
|
|
+ formData.value.point = "POINT(113.1093017627431 22.574540836684672)";
|
|
|
|
|
+ if (pageType.value === "NZ" && !formData.value.licenseImg) {
|
|
|
|
|
+ ElMessage.warning("请上传营业执照");
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
VE_API.mine.register(formData.value).then(res =>{
|
|
VE_API.mine.register(formData.value).then(res =>{
|
|
|
if(res.code===0){
|
|
if(res.code===0){
|
|
|
ElMessage.success('注册成功,待审核')
|
|
ElMessage.success('注册成功,待审核')
|
|
@@ -214,9 +184,9 @@ const onSubmit = () => {
|
|
|
})
|
|
})
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const resetForm = () =>{
|
|
|
|
|
- formRef.value.resetValidation()
|
|
|
|
|
-}
|
|
|
|
|
|
|
+const resetForm = () => {
|
|
|
|
|
+ formRef.value.resetValidation();
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const number = ref("请选择");
|
|
const number = ref("请选择");
|
|
|
const numberList = ["请选择", "10", "20", "30", "40"];
|
|
const numberList = ["请选择", "10", "20", "30", "40"];
|
|
@@ -242,7 +212,6 @@ const handleDropdown = (item, index) => {
|
|
|
active.value = index;
|
|
active.value = index;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const value = ref("");
|
|
|
|
|
const input = ref("");
|
|
const input = ref("");
|
|
|
|
|
|
|
|
const pageName = ref("");
|
|
const pageName = ref("");
|
|
@@ -253,36 +222,31 @@ const identityTyepe = {
|
|
|
};
|
|
};
|
|
|
// NF: "农服",
|
|
// NF: "农服",
|
|
|
|
|
|
|
|
-const checkboxGroup = ref(["荔枝", "龙眼"]);
|
|
|
|
|
-const cities = ref([{ name: "荔枝" }, { name: "龙眼" }]);
|
|
|
|
|
-const changeCheckBox = (e, i) => {
|
|
|
|
|
- console.log("e", i, e);
|
|
|
|
|
- if (e === false) {
|
|
|
|
|
- cities.value.splice(i, 1);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
|
|
+// 服务信息数据,转换为 ServiceInfo 组件需要的格式
|
|
|
|
|
+const isEdit = ref(true); // 默认编辑状态
|
|
|
|
|
+const crops = ref([
|
|
|
|
|
+ { name: "荔枝", isSelf: 0 },
|
|
|
|
|
+ { name: "龙眼", isSelf: 1 }
|
|
|
|
|
+]);
|
|
|
|
|
+const serviceTypes = ref([
|
|
|
|
|
+ { name: "播种", isSelf: 1 },
|
|
|
|
|
+ { name: "收获", isSelf: 0 }
|
|
|
|
|
+]);
|
|
|
|
|
+const machines = ref([
|
|
|
|
|
+ { name: "收割机", isSelf: 1 },
|
|
|
|
|
+ { name: "灌溉机", isSelf: 0 }
|
|
|
|
|
+]);
|
|
|
|
|
|
|
|
-const checkboxGroup1 = ref(["播种"]);
|
|
|
|
|
-const cities1 = ref([{ name: "播种" }, { name: "收获" }]);
|
|
|
|
|
-const changeCheckBox1 = (e, i) => {
|
|
|
|
|
- if (e === false) {
|
|
|
|
|
- cities.value.splice(i, 1);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+const handleUploadSuccess = (data) => {
|
|
|
|
|
+ formData.value.licenseImg = data.imgArr[0];
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const checkboxGroup2 = ref(["收割机"]);
|
|
|
|
|
-const cities2 = ref([{ name: "收割机" }, { name: "灌溉机" }]);
|
|
|
|
|
-const changeCheckBox2 = (e, i) => {
|
|
|
|
|
- if (e === false) {
|
|
|
|
|
- cities.value.splice(i, 1);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
|
|
|
|
|
onActivated(() => {
|
|
onActivated(() => {
|
|
|
pageName.value = identityTyepe[route.query.identity];
|
|
pageName.value = identityTyepe[route.query.identity];
|
|
|
pageType.value = route.query.identity;
|
|
pageType.value = route.query.identity;
|
|
|
- formData.value = {}
|
|
|
|
|
- resetForm()
|
|
|
|
|
|
|
+ formData.value = {};
|
|
|
|
|
+ resetForm();
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
@@ -291,6 +255,11 @@ onActivated(() => {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
background-color: #f5f7fb;
|
|
background-color: #f5f7fb;
|
|
|
|
|
+ ::v-deep{
|
|
|
|
|
+ .main-content {
|
|
|
|
|
+ margin: 12px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
.content {
|
|
.content {
|
|
|
height: calc(100% - 40px);
|
|
height: calc(100% - 40px);
|
|
|
padding: 12px;
|
|
padding: 12px;
|
|
@@ -358,14 +327,27 @@ onActivated(() => {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
padding: 14px 0;
|
|
padding: 14px 0;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
- border: 1px solid #2199f8;
|
|
|
|
|
- background: #f5f5f5;
|
|
|
|
|
|
|
+ border: 1px solid rgba(33, 153, 248, 0.2);
|
|
|
|
|
+ background: #fff;
|
|
|
margin-left: 5px;
|
|
margin-left: 5px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.el-icon--right {
|
|
.el-icon--right {
|
|
|
margin-left: 4px;
|
|
margin-left: 4px;
|
|
|
}
|
|
}
|
|
|
|
|
+ .upload-btn {
|
|
|
|
|
+ color: #2199f8;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ padding: 12px 0;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ width: 170px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ border: 1px solid #2199f8;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ .upload-wrap{
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.card + .card {
|
|
.card + .card {
|
|
@@ -396,63 +378,6 @@ onActivated(() => {
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .checkbox-group {
|
|
|
|
|
- .name {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- color: rgba(0, 0, 0, 0.9);
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- }
|
|
|
|
|
- ::v-deep {
|
|
|
|
|
- .el-checkbox-group {
|
|
|
|
|
- .el-checkbox-button {
|
|
|
|
|
- margin-right: 12px;
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- .el-checkbox-button__inner {
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- color: #000;
|
|
|
|
|
- border: 1px solid #999999;
|
|
|
|
|
- box-shadow: none;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- padding: 15px;
|
|
|
|
|
- width: 101px;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .is-checked {
|
|
|
|
|
- .el-checkbox-button__inner {
|
|
|
|
|
- background: #e8f5ff;
|
|
|
|
|
- color: #2199f8;
|
|
|
|
|
- border: 1px solid #2199f8;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- &::before {
|
|
|
|
|
- content: "x";
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: -10px;
|
|
|
|
|
- right: -10px;
|
|
|
|
|
- width: 20px;
|
|
|
|
|
- height: 20px;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 16px;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- background: #2199f8;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .btn {
|
|
|
|
|
- background: #2199f8;
|
|
|
|
|
- border-radius: 20px;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- padding: 0 10px;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- height: 24px;
|
|
|
|
|
- line-height: 24px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
.button {
|
|
.button {
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
@@ -474,4 +399,23 @@ onActivated(() => {
|
|
|
color: #2199f8;
|
|
color: #2199f8;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.image-preview {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ z-index: 1000;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.image-preview img {
|
|
|
|
|
+ max-width: 90%;
|
|
|
|
|
+ max-height: 90%;
|
|
|
|
|
+ object-fit: contain;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|