四邻

project/sanjianxi/AppNeighborLinkage/addLinkage.vue

@@ -1,6 +1,33 @@
 <template>
   <div class="addLinkage">
 
+    <div class="item">
+      <div><span>*</span>四邻对象</div>
+      <AiSelect class="right" v-model="form.type" dict="agriculturalType"/>
+    </div>
+
+    <div class="item">
+      <div><span>*</span>事件日期</div>
+      <div @click="isShowDate = true">
+        <span v-if="form.checkTime" >{{ form.checkTime }}</span>
+        <span v-else style="color: #999;">请选择</span>
+        <u-icon name="arrow-right" color="#ddd"/>
+      </div>
+    </div>
+    <u-picker mode="time" :params="params" v-model="isShowDate" @confirm="onDateChange"></u-picker>
+
+    <div>
+      <div class="title"><span style="color: #FF4466">*</span>事件描述</div>
+      <div>
+        <u-input type="textarea" v-model="form.name" placeholder="请输入事件内容描述" height="200" maxlength="500"/>
+      </div>
+      <div class="tips">{{form.name.length}}/500</div>
+    </div>
+
+    <div class="btn">
+      <div class="addBtn" @click="confirm">提交</div>
+    </div>
+
   </div>
 </template>
 
@@ -9,13 +36,72 @@ export default {
   name: "addLinkage",
   appName: "添加联动记录",
   data() {
-    return {}
+    return {
+      params: {
+        year: true,
+        month: true,
+        day: true,
       },
-  onShow() {},
+      isShowDate: false,
-  methods: {}
+      form: {
+        type: '',
+        checkTime: '',
+        name: '',
+      }
+    }
+  },
+  onShow() {
+    this.$dict.load('agriculturalType')
+  },
+  methods: {
+    onDateChange(e) {
+      this.form.checkTime = `${e.year}-${e.month}-${e.day}`
+    },
+  }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-
+.addLinkage {
+  padding: 0 32px;
+  box-sizing: border-box;
+  background: #FFF;
+  .item {
+    display: flex;
+    justify-content: space-between;
+    padding: 32px 0;
+    border-bottom: 1px solid #DDDDDD;
+    div:first-child {
+      span {
+        color: #FF4466;
+      }
+    }
+  }
+  .title {
+    padding: 32px 0
+  }
+  .tips {
+    text-align: right;
+    color: #999;
+    padding: 15px 0;
+  }
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 120px;
+    padding: 16px 32px;
+    box-sizing: border-box;
+    .addBtn {
+      width: 100%;
+      height: 88px;
+      line-height: 88px;
+      text-align: center;
+      background: #4181FF;
+      border-radius: 16px;
+      color: #FFF;
+    }
+  }
+}
 </style>