utel_h5/src/views/Address/index.vue

<script setup>

import { showToast,showSuccessToast , showLoadingToast } from 'vant';

import { getUserFaviList, getUserCateList, updateUserCate } from '@/api'

import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'

/* ============ page ============ */

const setShowPicker = ref(false);

const selectVal1 = ref(0);
const selectVal2 = ref('a');
const selectOpt1 = [
  { text: '未分類', value: 0 },
  { text: '分類一', value: 1 },
  { text: '分類二', value: 2 },
  { text: '分類三', value: 3 }
];
const selectOpt2 = [
  { text: '重要', value: 'important' },
  { text: '普通', value: 'normal' }
];

const addressList = ref([
  {
    avatar:"https://fakeimg.pl/250x100/",
    real_name:"樹林李敏鎬",
    introduction:"test",
  },
  {
    avatar:"https://fakeimg.pl/250x100/",
    real_name:"樹林李敏鎬",
    introduction:"test",
  },
  {
    avatar:"https://fakeimg.pl/250x100/",
    real_name:"樹林李敏鎬",
    introduction:"test",
  },
]);

// let res = await getUserFaviList();
// if (res.code === 200) {
//   addressList.value.data = res.data;

//   console.log(addressList)
// }



/* ============ modal ============ */

const modalForm = ref({
  page: 1,
  sort:[
    {
      "id": 1,
      "name": "第一類",
      "children": [
        {
          "id": 4,
          "name": "普通"
        },
        {
          "id": 5,
          "name": "重要"
        }
      ]
    },
    {
      "id": 2,
      "name": "第二類",
      "children": [
        {
          "id": 6,
          "name": "普通"
        },
        {
          "id": 7,
          "name": "重要"
        }
      ]
    },
    {
      "id": 3,
      "name": "第三類",
      "children": [
        {
          "id": 8,
          "name": "普通"
        },
        {
          "id": 9,
          "name": "重要"
        },
        {
          "name": "特殊"
        }
      ]
    }
  ]
});

// onMounted(async() => {
//   let res = await getUserCateList()
//   if (res.code === 200) {
//     modalForm.value.sort = res.data  
//     console.log("res:",res)  
//   }
// });

// watch(() => form.value.name,
//   (newVal) => {
//     form.value.json5.altText = newVal;
//   }
// );

const addCard = () => {
  modalForm.value.sort.push(
    {
      "name": "",
      "children": [
        {
          "name": "普通"
        }
      ]
    }
  );
  modalForm.value.page = modalForm.value.sort.length;
};

const delCard = (page) => {
  if (page > 1) {
    modalForm.value.page = page - 1;
  }
  modalForm.value.sort.splice(page - 1, 1);
};

const addBtn = (page) => {
  if (!modalForm.value.sort[page - 1].children) {
    modalForm.value.sort[page - 1].children = [];
  }

  modalForm.value.sort[page - 1].children.push({
    "id": '',
    "name": ""
  });
};

const moveCard = (type, page) => {
  if (type === 0) {
    if (page !== 1) {
      [modalForm.value.sort[page - 1], modalForm.value.sort[page - 2]] = [
        modalForm.value.sort[page - 2],
        modalForm.value.sort[page - 1],
      ];
      modalForm.value.page = page - 1;
    }
  } else {
    if (page !== modalForm.value.sort.length) {
      [modalForm.value.sort[page], modalForm.value.sort[page - 1]] = [
        modalForm.value.sort[page - 1],
        modalForm.value.sort[page],
      ];
      modalForm.value.page = page + 1;
    }
  }
};

const delBtn = (index) => {
  modalForm.value.sort[modalForm.value.page - 1].children.splice(index, 1);
  if (modalForm.value.sort[modalForm.value.page - 1].children.length === 0) {
    delete modalForm.value.sort[modalForm.value.page - 1].children;
  }
};

const moveBtn = (type, index) => {
  if (type === 0) {
    if (index !== 0) {
      [
        modalForm.value.sort[modalForm.value.page - 1].children[index],
        modalForm.value.sort[modalForm.value.page - 1].children[index - 1],
      ] = [
        modalForm.value.sort[modalForm.value.page - 1].children[index - 1],
        modalForm.value.sort[modalForm.value.page - 1].children[index],
      ];
    }
  } else {
    if (index + 1 !== modalForm.value.sort[modalForm.value.page - 1].children.length) {
      [
        modalForm.value.sort[modalForm.value.page - 1].children[index + 1],
        modalForm.value.sort[modalForm.value.page - 1].children[index],
      ] = [
        modalForm.value.sort[modalForm.value.page - 1].children[index],
        modalForm.value.sort[modalForm.value.page - 1].children[index + 1],
      ];
    }
  }
};

const onSubmit = async () => {
  let res = await updateUserCate(modalForm.value.sort)
  if (res.code === 200) {
    showSuccessToast('更新成功')
    // router.push('/member')
  } else {
    console.log(res.code);
    showToast('更新失敗')
  }
};

</script>

<template>
  <div class="address page">
    <van-nav-bar
      class="bg-skyBlue py-1"
      left-arrow
      right-arrow
      @click-left="$router.push('/')"
      @click-right="setShowPicker = true"
    >
      <template #title>
        <h5 class="text-white mb-1"><strong>通訊錄</strong></h5>
      </template>
      <template #left>
        <h4><i class="fa-solid fa-angle-left text-white" :style="{opacity:0.5}"></i></h4>
      </template>
      
      <template #right>
        <h4><i class="fa-solid fa-gear text-white" :style="{opacity:0.5}"></i></h4>
      </template>
    </van-nav-bar>

    <div class="content">
      <van-cell-group inset>        
        <van-dropdown-menu>
          <van-dropdown-item v-model="selectVal1" :options="selectOpt1" />
          <van-dropdown-item v-model="selectVal2" :options="selectOpt2" />
        </van-dropdown-menu>
      </van-cell-group>

      <van-cell-group inset>
        <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="tab2ListonLoad" -->
        <van-list class="accordion" id="accordion">

          <div class="list-item" v-for="(item, index) in addressList" :key="index">
            <div class="left">
              <div class="avatar"><img :src="item.avatar"></div>
              <div class="text">
                <h5 class="name ellipsis">{{ item.real_name }}</h5>
                <div class="desc ellipsis">@{{ item.introduction }}</div>
              </div>
            </div>
            <div class="right">
              <van-button size="small" class="border-0">
                <h5><i class="fa-solid fa-share-nodes text-darkBlue"></i></h5>
              </van-button>
            </div>
          </div>

        </van-list>

      </van-cell-group>
    </div>

    <van-dialog
      v-model:show="setShowPicker"
      width="400"
      showCancelButton
      confirm-button-text="確認修改"
      @confirm="onSubmit"
    >
      <van-form @submit="onSubmit">
        <keep-alive>
          <div id="app">

            <div class="bg-lightPink px-2 pt-3">
              <ul class="nav nav-tabs">
                <li
                  class="nav-item"
                  v-for="(card, index) in modalForm.sort"
                  :key="index"
                  @click="modalForm.page = index + 1"
                >
                  <button
                    type="button"
                    class="nav-link"
                    :class="{ active: modalForm.page === index + 1 }"
                  >
                    {{ index + 1 }}
                  </button>
                </li>
                <li
                  class="nav-item"
                  @click="addCard"
                  v-if="modalForm.sort.length < 10"
                >
                  <button type="button" class="nav-link">
                    <i class="fa fa-plus-circle"></i>
                  </button>
                </li>
              </ul>
            </div>
            
            <van-cell-group class="pt-2">
              <van-field
                label="調整卡片順序"
                :border="false"
                v-if="modalForm.sort.length > 1"                
              >
                <template #button>
                  <van-button
                    size="small"
                    class="ml-1 btn-skyBlue"
                    icon="arrow-left"
                    @click="moveCard(0, modalForm.page)"
                    >前移</van-button
                  >
                  <van-button
                    size="small"
                    class="ml-1 btn-skyBlue"
                    icon="arrow"
                    @click="moveCard(1, modalForm.page)"
                    >後移</van-button
                  >
                  <van-button
                    size="small"
                    class="ml-1 btn-tomatoRed"
                    icon="delete-o"
                    @click="delCard(modalForm.page)"
                  ></van-button>
                </template>
              </van-field>

              <van-field
                v-model="modalForm.sort[modalForm.page - 1].name"
                label="分類名稱"
                id="vcard-title"
                input-align="right"
                placeholder="請輸入分類名稱"
              />     

              <div class="listCnt">
                <div
                  class="item"
                  v-for="(btn, index) in modalForm.sort[modalForm.page - 1].children"
                  :key="index"
                >
                  <van-field
                    v-model="btn.name"
                    id="cardbtn-text-0"
                    placeholder="請輸入子項目名稱"
                    class="bg-transparent"
                  >
                    <template #button>
                      <van-button
                        size="small"
                        class="bg-transparent border-0"
                        icon="arrow-up"
                        @click="moveBtn(0, index)"
                        v-if="modalForm.sort[modalForm.page - 1].children.length > 1"
                      ></van-button>
                      <van-button
                        size="small"
                        class="bg-transparent border-0"
                        icon="arrow-down"
                        @click="moveBtn(1, index)"
                        v-if="modalForm.sort[modalForm.page - 1].children.length > 1"
                      ></van-button>
                      <van-button
                        size="small"
                        class="bg-transparent border-0"
                        icon="delete-o"
                        @click="delBtn(index)"
                      ></van-button>
                    </template>
                  </van-field>
                </div>
                <van-button
                  block
                  class="btn-tomatoRed"
                  icon="add-o"
                  @click="addBtn(modalForm.page)"
                >
                  <h6>新增按鈕</h6>
                </van-button>
              </div>

            </van-cell-group>
          </div>
        </keep-alive>
      </van-form>
        
    </van-dialog>
  </div>
</template>

<style lang="less" scoped>

.address{
  .content{
    min-height: calc(100vh - 54px);
  }
  .van-list {
    .list-item {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 15px 0;
      margin: 0 15px;
      border-bottom: 1px #e3e3e3 solid;

      .left {
        flex: 1 0 0%;
        display: flex;
        align-items: center;

        .avatar {
          width: 55px;
          min-width: 55px;
          aspect-ratio: 1/1;
          border-radius: 50%;
          margin-right: 10px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .name {
          font-weight: bold;
        }
      }

      .right {
        flex: 0 0 auto;
      }

      .bottom {
        flex: 1 0 100%;
        border: 1px #e3e3e3 solid;
        border-radius: 10px;
        padding: 0 10px;
        margin: 0;
        transition: all .2s;

        &.show {
          padding: 10px;
          margin: 5px 0;
        }
      }
    }
  }
  .nav-tabs{
    .nav-link{
      color: #4a677d;
      background-color: #fff;
      border-color: transparent;
      margin-right: 4px;
    }
    .nav-item.show .nav-link,
    .nav-link.active { 
        color: #fff;
        background-color: #4a677d;
        border-color: #4a677d #4a677d #4a677d;
    }
  }

  .listCnt{
    padding: 15px;
    .item{
        margin-bottom: 15px;
        border: 1px #ddd solid;
        border-radius: 5px;
    }
  }
}

</style>