vant 列表+日期弹窗+tab

qq_25501109
已于 2024-03-12 20:51:43 修改
阅读量140
点赞数 1
文章标签：前端 javascript 开发语言
于 2024-03-12 20:50:18 首次发布
本文链接：https://blog.csdn.net/qq_25501109/article/details/136662855
版权
vant 列表+日期弹窗+tab的模板，可直接拉入代码使用对接
<template>
  <div class="normal-ui">
    <div class="search-header">
      <div class="topbar">
        <van-search v-model="value" maxlength="10" :clearable='false' show-action placeholder="请输入交易记录" shape="round">
          <template v-slot:left-icon>
            <img class="left-icon" src="@/assets/imgs/search.png">
          </template>
          <i slot="right-icon" class="van-icon van-icon-clear van-field__clear" v-show="value&&value.length>0" @click="value='',searchDone=false"></i>
          <div class="topbar-search" slot="action" @click="onSearch">{{'搜索'}}</div>
        </van-search>
        <!-- <i class="van-icon van-icon-clear van-field__clear" v-show="value&&value.length>0" @click="value='',searchDone=false"></i> -->
      </div>
      <div class="tag-wrap">
        <div :class="['tag',index+1== activeTag?'activeTag':'',index==0?'':'marginLeft10']"
             v-for="(item,index) in tagList" :key="index" @click="tagChange(index+1)">
          {{item}}
        </div>
      </div>
    </div>

    <div class="list">
      <div class='dateTotal'>
        <div class='date' @click='chooseDate'>
          <div v-if='searchDate' class='searchDate'>{{searchDate}}</div>
          <div v-else>{{nowMonth}}<span>月</span></div>
          <img class="down-icon" src="@/assets/imgs/down.png"></div>
        <div class='moneyTotal'>支出 ¥23.10 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          收入 ¥89.00</div>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="findMerchantService">
        <div class="item" v-for="(item,index) in list" :key="index" @click="gotoDetail(item)">
          <div class="org-info">
            <div class="org-name blod26">上门洗浴<span class='type chu'>支出</span></div>
            <div class="time">2024/01/02 14:08:25</div>
          </div>
          <div class="org-info">
            <div class="org-name blod13">订单金额：</div>
            <div class="time blod13">-40.0</div>
          </div>
          <div class="org-info">
            <div class="org-name blue">优惠金额：</div>
            <div class="time blue">-40.0</div>
          </div>
          <div class="org-info">
            <div class="org-name hui">实付金额：</div>
            <div class="time hui">0.2</div>
          </div>
        </div>
      </van-list>
    </div>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        class="timePicker"
        :formatter="formatter"
        :max-date="maxDate"
        @confirm="onDateConfirm"
        @cancel="showDate = false"
      />
    </van-popup>
  </div>
</template>

<script>
  import {findServiceItem,findMerchantService} from '@/api/assess.js'
  import moment from 'moment/moment'
  export default {
    data() {
      return {
        value: '',
        pageName: this.$route.query.pageName,
        nodePid: this.$route.query.nodePid || "",
        orgId: this.$route.query.orgId || "",
        activeTab: 0,
        activeTag: 1,
        tagList: ["全部", "支出", "收入"],
        service: [],
        list: [{id:1},{id:2},{id:2},{id:2},{id:2},{id:2},{id:2},{id:2}],
        merchantServiceList: [],
        loading: false,
        finished: false,
        pageNo: 0,
        sway: {
          0: "次",
          1: "小时"
        },
        showDate: false,
        currentDate: new Date(),
        searchDate: '',
        maxDate: new Date(),
        nowMonth: this.$moment().month()
      }
    },
    created() {
      document.title = this.pageName;

      this.findServiceItem();
      this.findMerchantService();
    },
    methods: {
      //tab change
      changeTab(e) {
        this.pageNo = 0;
        this.finished = false;
        this.merchantServiceList = [];
        this.findMerchantService();
      },
      //tag change
      tagChange(index) {
        this.activeTag = index;
        this.pageNo = 0;
        this.finished = false;
        this.merchantServiceList = [];
        this.findMerchantService();
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}年`;
        } else if (type === 'month') {
          return `${val}月`;
        }
        return val;
      },
      chooseDate() {
        this.showDate = true
      },
      onDateConfirm(time){
        console.log(time)
        this.showDate = false;
        this.searchDate = this.$moment(time).format('YYYY-MM')
        console.log(this.searchDate)
      },
      //获取分类列表
      findServiceItem() {
        findServiceItem({
          nodePid: this.nodePid,
          delFlag: 0
        })
          .then(res => {
            let list = res.data || [];
            list.unshift({
              nodePid: 0,
              nodeId: 0,
              sname: "全部分类"
            });
            this.service = list || [];
          })
          .catch(err => {
          })
      },
      //查询商家服务列表
      findMerchantService() {
        this.pageNo++;

        findMerchantService({
          nodeId: this.nodePid,
          fkItem: this.activeTab == 0 ? "" : this.service[this.activeTab].id,
          orderType: this.activeTag,
          lat: this.location.latitude,
          lng: this.location.longitude,
          orgId: this.orgId,
          delFlag: 0,
          pageNo: this.pageNo,
          pageSize: 10
        })
          .then(res => {
            if (res.data && res.data.records) {
              this.merchantServiceList = this.merchantServiceList.concat(res.data.records);
              this.loading = false;
              if (this.merchantServiceList.length >= res.data.total || res.data.records.length == 0) {
                this.finished = true;
              }
            }
          })
          .catch(err => {
            this.loading = false;
            this.finished = true;
          })
      },
      onSearch() {

      },
      gotoMap(data) {
        console.log("data", data);
        this.navProps = {
          name: data.sname,
          latitude: data.mlat,
          longitude: data.mlong,
          address: data.resideDetail
        };
        this.isShowNavSheet = true;
      },
      //跳转详情
      gotoDetail(data) {
        this.$router.push({
          path: "/service/detail",
          query: {
            id: data.id,
            fkMerchant: data.fkMerchant,
            pageName: data.mname
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .normal-ui {
    min-height: 100vh;
    background: #F3F5F9;
    overflow: hidden;
    .search-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      // height: 186px;
      z-index: 100;
      ::v-deep .van-tabs__line {
        height: 6px;
        width:94px;
        transform: translateX(94px) translateX(-50%);
        transition-duration: 0.3s;
      }
      ::v-deep .van-search__content {
        border-radius: 32px;
        padding-left: 15px;
        background-color: #F6F7F7;
      }
      .topbar {
        height: 55px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        overflow:hidden;
        z-index: 100;
        padding-left: 15px;
        >span {
          display: inline-block;
          white-space: nowrap; // flex-basis: 100px;
          font-size: 28px;
          color: #fff;
        }
        >i {
          position: absolute;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          left: 540px;
        }
        >div {
          flex: 1;
        }
        ::v-deep .van-search__action:active {
          background-color: #fff;
        }
        ::v-deep .van-search {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 8px 0;
          .van-field__left-icon .van-icon,
          .van-field__right-icon .van-icon {
            font-size: 20px;
            color: #999;
            margin-right: 60px;
          }
          .left-icon{
            width: 16px;
            margin-top: -2px;
            vertical-align: middle;
          }
          .topbar-search{
            position: absolute;
            right: 25px;
            top: 15px;
            width: 54px;
            height: 24px;
            background: #0366F1;
            border-radius: 13px;
            color: white;
            text-align: center;
            line-height: 24px;
            font-size: 13px;
          }
        }
        ::v-deep .van-field__control {
          padding-right: 30px;
        }
      }
      .tag-wrap {
        display: flex;
        align-items: center;
        padding: 10px 16px;

        .tag {
          text-align: center;
          line-height: 26px;
          width: 54px;
          height: 26px;
          background: #FFFFFF;
          border-radius: 13px;
          font-weight: 400;
          font-size: 13px;
          color: #363A44;
        }

        .activeTag {
          color: #0366F1;
          font-weight: 500;
          font-size: 13px;
        }

        .marginLeft10 {
          margin-left: 10px;
        }
      }
    }

    .list {
      height: calc(100vh - 131px);
      border-radius: 10px;
      background: #FFFFFF;
      padding: 0 0;
      margin: 100px 14px 0;
      overflow-y: auto;
      z-index: 1;
      .dateTotal{
        padding: 12px 0 10px 20px;
        border-bottom: 1px solid #E6E9EB;
        .date{
          display: flex;
          align-items: baseline;
          font-size: 26px;
          color: #363A44;
          font-weight: bold;
          .searchDate{
            font-size: 16px;
            color: #363A44;
          }
          span{
            font-size: 14px;
            color: #363A44;
            font-weight: normal;
          }
          .down-icon{
            width: 10px;
            height: 10px;
            margin-left: 7px;
          }
        }
        .moneyTotal{
          margin-top: 8px;
          font-weight: 400;
          font-size: 14px;
          color: #363A44;
        }

      }

      .item {
        border-bottom: 1px solid #EEEEEE;
        padding: 15px 20px;

        .org-info {
          display: flex;
          align-items: center;
          margin-top: 6px;
          &:first-child{
            margin-top: 0;
          }
          .org-name {
            flex: 1;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            margin-left: 2px;
            @include textoverflow;
            &.blod26{
              font-weight: 600;
              font-size: 16px;
            }
            &.blod13{
              font-weight: 600;
              font-size: 13px;
              margin-top: 4px;
            }
            &.blue{
              font-size: 13px;
              color: #0366F1;
            }
            &.hui{
              font-size: 13px;
              color: #686B73;
            }
            .type{
              width: 34px;
              height: 17px;
              line-height: 18px;
              border: 1px solid #FB5D65;
              font-size: 12px;
              display: inline-block;
              margin-top: -4px;
              vertical-align: middle;
              text-align: center;
              margin-left: 10px;
              border-radius: 4px;
              &.chu{
                border: 1px solid #FB5D65;
                color: #FB5D65;
              }
              &.shou{
                border: 1px solid #0CC27F;
                color: #0CC27F;
              }
            }
          }

          .time {
            font-size: 13px;
            color: #686B73;
            margin-left: 4px;
            &.blod13{
              color: #363A44;
              font-weight: 600;
              font-size: 13px;
            }
            &.blue{
              font-size: 13px;
              color: #0366F1;
            }
            &.hui{
              font-size: 13px;
              color: #686B73;
            }
          }
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .list::-webkit-scrollbar,
    .list::-webkit-scrollbar-thumb,
    .list::-webkit-scrollbar-track {
      display: none;
      margin-top: -1PX;
      width: 0;
      height: 0;
      background: transparent;
    }

  }
</style>