小程序产品库完成

src/mods/AppPlease/add.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="page">
+    <div class="add-form">
+      <div class="form-item mar-b8">
+        <span class="item-tips">*</span>
+        <span class="label">提问类型</span>
+        <span :class="typeName ? 'value color-333' : 'value color-999'"
+              @click="leaveMessageTypeShow = true">{{ typeName || '请选择' }}</span>
+        <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon">
+      </div>
+      <div class="form-item mar-b8">
+        <span class="item-tips">*</span>
+        <span class="label">所在地区</span>
+        <span class="value color-999">
+          <AiAreaPicker v-model="areaId" class="picker" :name.sync="areaName">
+            <div :class="areaName == '请选择' ? 'text color-999' : 'text color-333' ">{{ areaName || "请选择" }}</div>
+          </AiAreaPicker>
+        </span>
+        <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon">
+      </div>
+      <div class="form-item title-line">
+        <span class="item-tips">*</span>
+        <span class="label">提问标题</span>
+        <div class="item-input">
+          <input type="text" placeholder="请输入标题（30字以内）" placeholder-style="color:#999;" maxlength="30" v-model="title">
+        </div>
+      </div>
+      <div class="form-item mar-b8">
+        <span class="item-tips">*</span>
+        <span class="label">提问内容</span>
+        <div class="item-input fs-32">
+          <u-input type="textarea" height="140" placeholder="请输入提问内容（500字以内）" placeholder-style="color:#999;"
+                   maxlength="500" v-model="content"/>
+        </div>
+      </div>
+      <div class="form-item">
+        <span class="item-tips"></span>
+        <span class="label">图片上传<span class="mini-label">（最多9张）</span></span>
+        <div class="upload">
+          <AiUploader :limit="9" v-model="files"></AiUploader>
+        </div>
+      </div>
+    </div>
+    <u-select v-model="leaveMessageTypeShow" :list="leaveMessageTypeList" @confirm="confirmMessageType"
+              confirm-color="#07c160"></u-select>
+    <div class="fixed-bottom confirm-btn" @click="confirm">提交</div>
+  </div>
+</template>
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "my",
+  computed: {
+    ...mapState(['global'])
+  },
+  data() {
+    return {
+      type: '',
+      typeName: '',
+      areaId: '',
+      areaName: "",
+      areaRange: "",
+      title: '',
+      content: '',
+      files: [],
+      flag: false,
+      leaveMessageTypeList: [],
+      leaveMessageTypeShow: false
+    }
+  },
+  onLoad() {
+    this.$dict.load('leaveMessageType').then((res) => {
+      this.$nextTick(() => {
+        this.$dict.getDict('leaveMessageType').map(i => {
+          var item = {
+            label: i.dictName,
+            value: i.dictValue
+          }
+          this.leaveMessageTypeList.push(item)
+        })
+      })
+    })
+  },
+  methods: {
+    confirm() {
+      if (this.flag) return
+      this.$loading()
+      var params = {
+        type: this.type,
+        areaId: this.areaId,
+        title: this.title,
+        content: this.content,
+        images: JSON.stringify(this.files),
+        status: 0
+      }
+      if (!params.type) {
+        return this.$toast('请选择留言类型')
+      }
+      if (!params.areaId) {
+        return this.$toast('请选择所在地区')
+      }
+      if (!params.title) {
+        return this.$toast('请输入提问标题')
+      }
+      if (!params.content) {
+        return this.$toast('请输入提问内容')
+      }
+      this.flag = true
+      this.$instance.post(`/app/appleavemessage/addOrUpdate-wx`, params).then(res => {
+        if (res && res.code == 0) {
+          this.$hideLoading()
+          uni.showModal({
+            title: '您已成功提交留言',
+            confirmText: "查看记录",
+            confirmColor: "#197DF0",
+            showCancel: false,
+            success: (res) => {
+              if (res.confirm) {
+                this.flag = false
+                uni.redirectTo({
+                  url: './questionList'
+                })
+              } else {
+                this.flag = false
+              }
+            }
+          })
+        } else {
+          this.flag = false
+        }
+      }).catch(err => {
+        console.log(err)
+        this.flag = false
+      })
+    },
+    confirmMessageType(e) {
+      this.typeName = e[0].label
+      this.type = e[0].value
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "../../common/common.scss";
+
+.page {
+  width: 100%;
+  background-color: #F3F6F9;
+
+  .add-form {
+    padding-bottom: 112px;
+  }
+
+  .form-item {
+    padding: 34px 32px 34px 12px;
+    line-height: 44px;
+    background-color: #fff;
+
+    .item-tips {
+      display: inline-block;
+      width: 12px;
+      font-size: 32px;
+      color: #FF4466;
+    }
+
+    .label {
+      display: inline-block;
+      min-width: 126px;
+      color: #333;
+      font-size: 32px;
+      margin-left: 8px;
+
+      .mini-label {
+        color: #999;
+        font-size: 28px;
+      }
+    }
+
+    .value {
+      display: inline-block;
+      width: 518px;
+      text-align: right;
+    }
+
+    .text {
+      display: inline-block;
+      width: 520px;
+      text-align: right;
+    }
+
+    .color-333 {
+      color: #333 !important;
+    }
+
+    .right-icon {
+      width: 32px;
+      height: 32px;
+      margin-left: 8px;
+      vertical-align: middle;
+    }
+
+    .item-input {
+      padding-bottom: 4px;
+      margin-left: 24px;
+      margin-top: 32px input {
+        line-height: 42px;
+        font-size: 32px;
+      }
+
+    }
+
+    .upload {
+      margin: 32px 0 024px;
+    }
+  }
+
+  .mar-b8 {
+    margin-bottom: 16px;
+  }
+}
+</style>