From 66d122942023d8e6c1c485afdd6252576fd137f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E6=9C=89=E6=B8=85=E9=A6=99=E6=9C=88=E6=9C=89?=
 =?UTF-8?q?=E9=98=B4?= <185154740@qq.com>
Date: Fri, 17 Dec 2021 15:21:35 +0800
Subject: [PATCH] AiTreePicker

---
 src/apps/AppGoodDeeds/AppGoodDeeds.vue |   8 +-
 src/apps/AppGoodDeeds/Detail.vue       |  77 ++++++++-
 src/components/AiTreePicker.vue        | 210 +++++++++++++++++++++++++
 3 files changed, 291 insertions(+), 4 deletions(-)
 create mode 100644 src/components/AiTreePicker.vue

diff --git a/src/apps/AppGoodDeeds/AppGoodDeeds.vue b/src/apps/AppGoodDeeds/AppGoodDeeds.vue
index 196a2c67..8b81e645 100644
--- a/src/apps/AppGoodDeeds/AppGoodDeeds.vue
+++ b/src/apps/AppGoodDeeds/AppGoodDeeds.vue
@@ -20,7 +20,7 @@
                 <span class="hint">24</span>
               </div>
 
-              <div class="right-right">
+              <div class="right-right" @click.stop="toChange">
                 <u-icon name="thumb-up" color="red"></u-icon>
                 <span class="hint">4</span>
               </div>
@@ -43,7 +43,7 @@
       <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
     </AiFixedBtn>
 
-    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+    <u-modal v-model="deletShow" content="您确认要结束议题公示？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
   </div>
 </template>
 
@@ -122,6 +122,10 @@ export default {
         }
       })
     },
+
+    toChange() {
+      console.log('点赞')
+    },
   },
   onReachBottom() {
     this.current = this.current + 1
diff --git a/src/apps/AppGoodDeeds/Detail.vue b/src/apps/AppGoodDeeds/Detail.vue
index 7daab313..1f998662 100644
--- a/src/apps/AppGoodDeeds/Detail.vue
+++ b/src/apps/AppGoodDeeds/Detail.vue
@@ -1,5 +1,34 @@
 <template>
-  <div class="Detail">Detail</div>
+  <div class="Detail">
+    <div class="header-top">
+      <div class="titles">闲置电脑转让，有意请联系，非诚闲置电脑转让，有意请联系，非诚勿扰，需要闲置电脑转让，有意请联系，非诚勿扰，需要勿扰，需要</div>
+
+      <div class="imgBottom">
+        <div>2021_12_17_13_23</div>
+        <div class="right">
+          <div class="right-left">
+            <u-icon name="eye"></u-icon>
+            <span class="hint">24</span>
+          </div>
+
+          <div class="right-right" @click.stop="toChange">
+            <u-icon name="thumb-up" color="red"></u-icon>
+            <span class="hint">4</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="header-middle">
+      <div class="contents">戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高戴尔高配超薄本，超薄系列，超窄边框14.1寸全屏高</div>
+    </div>
+
+    <div class="">
+      <div>图片</div>
+
+      <img src="./yan.jpg" alt="" v-for="(item, i) in 7" :key="i" />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -19,7 +48,51 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.Detail {
+uni-page-body {
   height: 100%;
 }
+.Detail {
+  height: 100%;
+  padding: 0 32px;
+  background: #fff;
+  .header-top {
+    padding: 40px 0 32px 0;
+    .titles {
+      font-size: 48px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .imgBottom {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 24px;
+      font-size: 30px;
+      color: #999999;
+      .right {
+        display: flex;
+        justify-content: space-between;
+
+        .right-right,
+        .right-left {
+          margin-left: 48px;
+          .hint {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  .header-middle {
+    .contents {
+      padding: 32px 0 48px 0;
+      line-height: 1.5;
+      word-break: break-all;
+    }
+  }
+}
 </style>
diff --git a/src/components/AiTreePicker.vue b/src/components/AiTreePicker.vue
new file mode 100644
index 00000000..bc818028
--- /dev/null
+++ b/src/components/AiTreePicker.vue
@@ -0,0 +1,210 @@
+<template>
+  <section class="AiTreePicker">
+    <AiSearchPopup mode="bottom" ref="areaSelector">
+      <div slot="btn" @tap="handleInit">
+        <slot v-if="$slots.default" />
+        <div v-else class="areaSelector">
+          <u-input v-model="currentSelected.name" disabled class="noEvents" />
+        </div>
+      </div>
+      <div class="areaSelector">
+        <div class="fixedTop">
+          <span v-text="'全部'" :class="{ current: !index }" @click="selectNode({}, -1)" />
+          <span v-for="(area, i) in fullSelected" :key="area.id" v-text="area.name" :class="{ current: area.id == index }" @click="selectNode(area, i)" />
+        </div>
+        <span class="placeholder" v-text="currentSelected.name" />
+      </div>
+      <div class="pendingItem flexRow" flex v-for="op in list" :key="op.id">
+        <div class="fill" :class="{ self: index == op.id }" v-html="op.name" @tap="handleSelect(op)" />
+        <u-icon v-if="showArrow(op)" name="arrow-right" color="#ddd" @click="getChild(op)" />
+      </div>
+    </AiSearchPopup>
+  </section>
+</template>
+
+<script>
+// import AiCell from './AiCell'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AiTreePicker',
+  components: {
+    // AiCell
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: { default: '' },
+    name: { default: '' },
+    ops: { default: () => [] },
+  },
+  computed: {
+    ...mapState(['user']),
+    currentSelected() {
+      return this.fullSelected?.slice(-1)?.[0] || {}
+    },
+    origin() {
+      let meta = JSON.parse(JSON.stringify(this.ops)),
+        origin = []
+      while (meta.length > 0) {
+        let p = meta.shift()
+        origin.push(p)
+        if (p.children?.length > 0) {
+          meta.push(p.children.map((c) => ({ ...c, parent: p.id })))
+        }
+      }
+      return origin.flat()
+    },
+  },
+  data() {
+    return {
+      fullSelected: [],
+      index: '',
+      list: [],
+    }
+  },
+  watch: {
+    value(v) {
+      v && this.getFull()
+    },
+  },
+  methods: {
+    getFull() {
+      if (this.value) {
+        let current = this.origin.find((e) => e.id == this.value),
+          pend = [current]
+        while (!!current.parent) {
+          current = this.origin.find((e) => e.id == current.parent)
+          pend.push(current)
+        }
+        this.fullSelected = pend.reverse()
+      }
+    },
+    getChildren(id) {
+      if (id) this.list = this.origin?.find((e) => e.id == id)?.children || []
+      else this.list = this.ops
+    },
+    handleSelect(op) {
+      if (op.children?.length > 0) {
+        this.getChild(op)
+      } else {
+        if (op.id != this.index) {
+          this.fullSelected.push(op)
+          this.index = op.id
+        }
+        this.$emit('select', op)
+        this.$emit('update:name', this.currentSelected.name)
+        this.$refs.areaSelector?.handleSelect()
+      }
+    },
+    getChild(op) {
+      this.fullSelected.push(op)
+      this.index = op.id
+      this.getChildren(op.id)
+    },
+    selectNode(item, i) {
+      this.fullSelected.splice(i + 1, this.fullSelected.length - i)
+      if (item.children?.length <= 0) {
+        this.index = item.id
+      }
+      this.getChildren(item.id)
+    },
+    handleInit() {
+      this.index = this.currentSelected.id
+      this.getChildren(this.currentSelected.id)
+    },
+    showArrow(op) {
+      return this.index != op.id && op.children?.length > 0
+    },
+  },
+  created() {
+    this.index = this.value
+    this.getFull()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTreePicker {
+  ::v-deep .areaSelector {
+    display: flex;
+    align-items: center;
+
+    span {
+      cursor: pointer;
+      color: #333;
+      height: 120px;
+      display: flex;
+      align-items: center;
+
+      &:first-of-type:before {
+        content: '';
+        padding: 0;
+      }
+
+      &:before {
+        color: #333;
+        content: '/';
+        padding: 0 16px;
+      }
+    }
+
+    .placeholder {
+      height: 120px;
+      width: 100%;
+    }
+
+    .current {
+      color: #3f8df5;
+    }
+
+    .fixedTop {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      left: 0;
+      background: #fff;
+      border-bottom: 4px solid #f5f5f5;
+      z-index: 1;
+      text-align: start;
+      padding: 0 32px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+  }
+
+  ::v-deep.u-drawer-content {
+    position: fixed;
+
+    .areaSelector {
+      padding: 0 16px;
+      box-sizing: border-box;
+      border-bottom: 16px solid #f5f5f5;
+
+      span {
+        line-height: 100px;
+      }
+    }
+  }
+
+  ::v-deep.pendingItem {
+    color: #333;
+    margin-left: 32px;
+    padding-right: 32px;
+    height: 104px;
+    border-bottom: 1px solid #ddd;
+    text-align: start;
+
+    .self {
+      font-weight: bold;
+    }
+  }
+
+  ::v-deep.noEvents {
+    pointer-events: none;
+  }
+}
+</style>