积分申请

src/project/fengdu/AppNewFarmerBank/integralAdd.vue

@@ -2,13 +2,38 @@
   <div class="integralAdd">
     <div class="item">
       <div class="left">事件类型</div>
-      <AiSelect class="right" dict="clapEventStatus" v-model="form.type"></AiSelect>
+      <AiSelect class="right" :list="dictList" v-model="form.applyItemId"></AiSelect>
     </div>
     <div class="items">
       <p>详情描述</p>
       <textarea v-model="form.content" :maxlength="300" placeholder="请输入详细描述..."></textarea>
       <div class="tips">{{ form.content.length }}/300</div>
     </div>
+    <div class="items">
+      <p>上传图片</p>
+      <div class="upload">
+        <AiUploader v-model="form.files" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
+      </div>
+      <div class="tips left">可上传图片，最多上传9张。</div>
+    </div>
+    <div class="items">
+      <p>上传视频</p>
+      <div class="upload">
+        <AiUploader v-model="form.files" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
+      </div>
+      <div class="tips left">可上传视频，最大30M。</div>
+    </div>
+
+    <div class="item">
+      <div class="left">所属网格</div>
+      <AiPagePicker type="gird" v-model="form.girdId" :params="{ formType: 2 }" @select="handleSelectGrid" nodeKey="id">
+        <AiMore v-model="form.girdName"/>
+      </AiPagePicker>
+    </div>
+
+    <div class="btn-wrapper">
+      <div class="btn" hover-class="text-hover" @click="submit">提交申请</div>
+    </div>
   </div>
 </template>
 
@@ -19,19 +44,66 @@ export default {
   data() {
     return {
       form: {
-        type: 0,
+        applyItemId: 0,
+        applyIntegral: '',
+        applyItemName: '',
         content: '',
-      }
+        files: [],
+        girdId: '',
+        girdName: '',
+      },
+      list: [],
+      dictList: [],
     }
   },
   onLoad(o) {
     this.$dict.load(['clapEventStatus'])
+    this.getType()
+  },
+  watch: {
+    'form.applyItemId'(v) {
+      if(v) {
+        this.form.applyItemName = this.list.filter(e=> (e.id==v))[0].ruleName
+        this.form.applyIntegral = this.list.filter(e => (e.id == v))[0].integral
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$instance.post(`/app/appintegraluserapply/addOrUpdate`,{
+        ...this.form
+      }).then(res=> {
+        if(res?.data) {
+          console.log(res);
+        }
+      })
+    },
+    // 事件类型
+    getType() {
+      this.$instance.post(`/app/appintegralrule/listByFD`).then(res=> {
+        if(res?.data) {
+          this.list = res.data
+          this.dictList = res.data.map(v => {
+            return {
+              value: v.id,
+              label: v.ruleName
+            }
+          })
+        }
+      })
+    },
+    handleSelectGrid(v) {
+      this.form.girdName = v.girdName
+      this.form.girdId = v.girdId
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .integralAdd {
+  padding-bottom: 140px;
+  box-sizing: border-box;
   .item {
     width: 100%;
     display: flex;
@@ -73,6 +145,40 @@ export default {
       font-size: 24px;
       font-weight: 400;
     }
+    .left {
+      text-align: left;
+    }
+    .upload {
+      padding: 24px 32px;
+      box-sizing: border-box;
+
+      // .fodder_alls {
+      //   display: flex;
+      //   margin-top: 16px;
+      //   align-items: center;
+      //   .fodder_add {
+      //     border: 2px solid #DBDCDF;
+      //     padding: 20px 24px;
+      //     box-sizing: border-box;
+      //     border-radius: 8px;
+      //   }
+      //   .fodder_title {
+      //     color: #8E8F91;
+      //     margin-left: 20px;
+      //   }
+      // }
+    }
   }
+
+  ::v-deep .btn-wrapper {
+    background: #FFF;
+  }
+
+  ::v-deep .btn-wrapper .btn {
+    height: 80px;
+    line-height: 80px;
+    border-radius: 40px;
+  }
+
 }
 </style>