dvcp_v2_wxcp_app/src/pages/whereabouts/whereabouts.vue

<template>
  <div class="whereabouts">
    <div class="topPane">
      <div class="userCard" flex>
        <u-avatar :src="user.avatar"/>
        <b class="fill">{{ mine.name }}</b>
        <ai-select :value="mine.direction" dict="villageCadresDirectionChoice"
                   @data="v=>mine=v"/>
      </div>
    </div>
    <div class="work-wrapper">
      <div class="header">
        <span class="firstCol">姓名</span>
        <div flex ref="movableArea" class="fill">
          <span class="fill" v-for="(item, index) in keys" :key="index">{{ item.dictName }}</span>
        </div>
      </div>
      <div class="body">
        <div class="item" v-for="(item, index) in others" :key="index">
          <span class="firstCol">{{ item.name }}</span>
          <movable-area class="flexRow">
            <movable-view direction="horizontal" :x="item.offset" disabled>
              <span class="drag"/>
            </movable-view>
          </movable-area>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import AiImage from "../../components/AiImage";
import UAvatar from "../../uview/components/u-avatar/u-avatar";
import AiSelect from "../../components/AiSelect";

export default {
  name: "whereabouts",
  components: {AiSelect, UAvatar, AiImage},
  computed: {
    ...mapState(['user']),
    keys() {
      return this.$dict.getDict("villageCadresDirectionChoice")
    },
    mine: {
      get() {
        return this.list.find(e => e.phone == this.user.phone) || {}
      },
      set(v) {
        v?.[0]?.value && this.submitWhereabouts(v[0].value)
      }
    },
    others() {
      return this.list?.filter(e => e.phone != this.user.phone).map(e => ({
        ...e,
        offset: (e.direction * this.movableAreaWidth / 4)
      }))
    }
  },
  data() {
    return {
      list: [],
      current: 0,
      isMore: false,
      movableAreaWidth: 0
    }
  },
  onLoad() {
    this.getUserList()
  },
  created() {
    this.$dict.load('villageCadresDirectionChoice')
  },
  mounted() {
    this.$nextTick(() => {
      this.movableAreaWidth = (this.$refs?.movableArea?.clientWidth) || 0
    })
  },
  methods: {
    getUserList() {
      if (this.isMore) return
      this.$http.post(`/app/appvillagecadresdirection/listForWx`, null, {
        params: {current: this.current + 1, size: 20}
      }).then(res => {
        if (res?.data) {
          if (!res.data.records.length) {
            this.isMore = true
            return false
          }

          this.list = [...this.list, ...res.data.records]
          this.current++
        }
      })
    },
    submitWhereabouts(direction) {
      this.$http.post(`/app/appvillagecadresdirection/updateStatus`, {
        direction, id: this.mine.id
      }).then(res => {
        if (res?.code == 0) {
          this.$u.toast('修改成功')
          this.getUserList()
        }
      })
    }
  },
  onReachBottom() {
    this.getUserList()
  }
}
</script>

<style lang="scss" scoped>
.whereabouts {
  padding: 0 0 60px;

  .topPane {
    height: 232px;
    margin-bottom: 32px;
    background-image: url("https://cdn.cunwuyun.cn/dvcp/h5/whereaboutsBg.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 96px;
    padding: 16px 32px 0;

    ::v-deep .userCard {
      height: 216px;
      background: #FFFFFF;
      box-shadow: 0 10px 24px 0 rgba(220, 220, 220, 0.5);
      border-radius: 20px;
      padding: 0 32px;

      & > b {
        margin-left: 18px;
        font-size: 44px;
      }

      .selectedLabel {
        font-size: 36px;
        color: #408CFF;
      }
    }
  }

  .work-wrapper {
    width: 706px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #F2F4FC;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(233, 233, 234, 1);

    uni-movable-view {
      display: flex;
      height: 100%;
      width: 25%;
      align-items: center;

      .drag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        &:before {
          content: " ";
          width: 0;
          height: 0;
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          border-bottom: 40px solid #B53430;
        }
      }
    }


    .body {
      .item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 96px;
        border: 1px solid #F2F4FC;

        .mine {
          color: #26f;
        }

        &:nth-of-type(2n) {
          background: #F2F4FC;
        }

        .flexRow {
          position: relative;
          flex: 1;
          min-width: 0;
          height: 100%;
        }
      }
    }

    ::v-deep .firstCol {
      width: 170px;
      padding-left: 30px;
      flex: inherit;
      text-align: left;
      box-sizing: border-box;
    }

    .header {
      display: flex;
      align-items: center;
      height: 96px;
      text-align: center;
      background: #4E8EEE;
      box-shadow: 0 4px 8px 0 rgba(233, 233, 234, 1), 0 8px 24px 2px rgba(201, 216, 250, 1), 0 0 0 transparent;
      border-radius: 10px 10px 0 0;

      span {
        color: #fff;
        font-size: 30px;
        font-weight: 800;
      }
    }
  }
}
</style>