front-end/hdApp/src/admin/custom/selectCustom.vue

<!--
  客户选择页面，供开单、回填、红包及计算器等业务选择客户。
  在保留原单选跳转行为的基础上，为红包发送增加多选确认模式。
-->
<template>
    <view class="app-main app-content">
      <view class="input-wrap_box">
        <view>
          <AppSearchModule placeholder="输入拼音首字母搜索" @input="searchFn"/>
        </view>
      </view>
      <block v-if="!$util.isEmpty(list.data)">
        <block v-for="(item, index) in list.data" :key="index">
          <tui-list-cell :arrow="!isHbMulti" @click="selectCurrent(item)">
            <view class="tui-msg-box">
              <view v-if="isHbMulti" class="multi-checkbox" :class="{ checked: isSelected(item) }">
                <text v-if="isSelected(item)">✓</text>
              </view>
              <image :src="item.avatar" class="tui-msg-pic" mode="aspectFill"/>
              <view class="tui-msg-item" style="position:relative;">
                <view class="tui-msg-name">
                  <view class="tui-user-name">
                    {{ item.name }}
                  </view>
                </view>
                <view class="tui-msg-content">
                  <text>{{ item.visitTime.substr(5,11) }}</text>
  
                    <text v-if="Number(item.balance)!=0" class="balance-amount">
                      <text v-if="item.balance>0" class="amount_add">余额{{item.balance?parseFloat(item.balance):0}}</text>
                      <text v-else class="amount_sub">欠款{{item.balance?Math.abs(parseFloat(item.balance)):0}}</text>
                    </text>
  
                    <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 10000" style="font-size:24upx;margin-left:20upx;color:green;">没有下过单</text>
                    <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 7" style="font-size:24upx;margin-left:20upx;color:green;">超1周未下单</text>
                    <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 30" style="font-size:24upx;margin-left:20upx;color:green;">超1个月未下单</text>
                    <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 180" style="font-size:24upx;margin-left:20upx;color:green;">超半年未下单</text>
                    <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 365" style="font-size:24upx;margin-left:20upx;color:green;">超1年未下单</text>
  
                </view>
  
              </view>
            </view>
            <view class="tui-msg-right">
              <badge-module type="danger" :dot="item.level == 3 ? true : false" v-if="item.messageNum > 0" >{{ item.messageNum }}</badge-module >
            </view>
          </tui-list-cell>
        </block>
      </block>
      <block v-else>
        <app-wrapper-empty :is-empty="$util.isEmpty(list.data)" />
      </block>
      <view v-if="isHbMulti" class="multi-footer">
        <button class="confirm-multi-btn" @click="confirmMulti">确定（已选{{ selectedCount }}人）</button>
      </view>
    </view>
  </template>
  <script>
  import TuiListCell from "@/components/plugin/list-cell";
  import BadgeModule from "@/components/plugin/badge";
  import AppWrapperEmpty from "@/components/app-wrapper-empty";
  import appVipModule from "@/components/module/app-vip";
  import AppTag from "@/components/module/app-tag.vue";
  import AppSearchModule from "@/components/module/app-search";
  import { list } from "@/mixins";
  import { getList } from "@/api/member";
  import { mapGetters } from "vuex";
  export default {
    name: "selectCustom",
    components: {
      TuiListCell,
      BadgeModule,
      AppWrapperEmpty,
      appVipModule,
      AppTag,
      AppSearchModule
    },
    mixins: [list],
    data() {
      return {
        tabIndex: 0,
        selectStyle: 1,
        option: {},
        selectedMap: {},
        couldScan: false
      };
    },
    computed:{
      ...mapGetters(["getMyShopInfo"]),
      /**
       * 判断是否为红包客户多选模式，style=5 未带 multi 时继续走旧单选流程。
       */
      isHbMulti() {
        return String(this.option.style) === '5' && String(this.option.multi) === '1'
      },
      /**
       * 返回当前已选客户数量，供底部按钮实时展示。
       */
      selectedCount() {
        return Object.keys(this.selectedMap).length
      }
    },
    onPullDownRefresh() {
      this.resetList();
      this._list().then((res) => {
        uni.stopPullDownRefresh();
      });
    },
    onReachBottom() {
      if (!this.list.finished) {
        this._list().then((res) => {
          uni.stopPullDownRefresh();
        });
      } else {
        uni.stopPullDownRefresh();
      }
    },
    onLoad(option) {
      this.option = option || {}
      // #ifdef APP-PLUS
      if(plus.device.vendor == 'Newland'){
        this.couldScan = true
      }
      // #endif
    },
      onShow(){
          uni.removeStorageSync('newClient');
      },
    methods: {
      /**
       * 处理客户选择；红包多选只切换选中状态，其余场景保持原跳转或回填逻辑。
       */
      selectCurrent(item,scanEnv=0){
        let style = this.option.style != null && this.option.style !== '' ? this.option.style : 1
        this.selectStyle = style
        if (this.isHbMulti) {
          this.toggleSelected(item)
          return
        }
        if(style == 1){
          //花材开单
          this.$util.pageTo({url: '/admin/billing/index2?customId='+item.id+'&customName='+item.name,type:2})
        }else if(style == 3){
          //花束开单
          this.$util.pageTo({url: '/admin/billing/hs?customId='+item.id+'&customName='+item.name,type:2})
        }else if(style == 2){
          //用于选择客户并且需要返回的情况
          let pages = getCurrentPages();
          let prevPage = pages[ pages.length - 2 ];
          prevPage.$vm.form.customId = item.id;
          prevPage.$vm.form.customName = item.name;
          prevPage.$vm.form.selectCustomOk = 1;
          uni.navigateBack({})
        }else if(style == 5){
          // 发红包
          this.$util.pageTo({url: '/admin/hb/send?userId='+item.userId+'&customId='+item.id+'&customName='+item.name,type:2})
        }else if(Number(style) === 6){
          /** 工具-计算器选客回填，与 hdApp_calculator_pick_customer 一致（hdApp 零售：3 已用于花束开单，计算器单独用 6） */
          try {
            uni.setStorageSync('hdApp_calculator_pick_customer', JSON.stringify({ id: item.id, name: item.name }))
          } catch (e) {}
          uni.navigateBack({})
        }else{
          //无操作
        }
      },
      /**
       * 判断客户是否已在红包多选集合中。
       */
      isSelected(item) {
        return !!this.selectedMap[String(item.id)]
      },
      /**
       * 切换客户选中状态，保存接口提交所需的用户与客户标识。
       */
      toggleSelected(item) {
        const key = String(item.id)
        if (this.selectedMap[key]) {
          this.$delete(this.selectedMap, key)
          return
        }
        this.$set(this.selectedMap, key, {
          id: item.id,
          userId: item.userId,
          name: item.name,
          customId: item.id
        })
      },
      /**
       * 将红包多选结果暂存后返回发送页，空选择时提示用户继续选择。
       */
      confirmMulti() {
        const selected = Object.keys(this.selectedMap).map((key) => this.selectedMap[key])
        if (!selected.length) {
          this.$msg('请至少选择一位客户')
          return
        }
        uni.setStorageSync('hb_selected_customs', JSON.stringify(selected))
        uni.navigateBack()
      },
      init() {
        if(!this.no_shop_show_model) {
          this._list();
        }
      },
      searchFn(e) {
          this.resetList();
          this.seekVal = e;
          this._list();
      },
      _list() {
        return getList({
            search: "",
            type:this.tabIndex,
            page: this.list.page,
            name: this.seekVal,
          }).then((res) => {
            this.completes(res);
            if (this.$util.isEmpty(res.data)){
              return false;
            }
          });
      },
      change(e) {
        if (this.tabIndex == e.index) {
          return false;
        }
        this.tabIndex = e.index;
        this.resetList();
        this._list();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .app-content {
    padding-top: 100upx;
    padding-bottom: 130upx;
  }
  .tabs-wrap {
    position: fixed;
    .tabs-left {
      width: 80%;
    }
    .tabs-right {
      width: 19%;
      border-left: $borderColor;
      @include disFlex(center, center);
    }
  }
  .input-wrap_box {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 10;
    /* 手机mobile屏幕小于1000px */
    @media screen and (max-width: 1100px) {
      width: 100%;
    }
    /* 收银台cashier屏幕大于1000px */
    @media screen and (min-width:1100px) {
      width: 40%;
    }
    height: 100upx;
    display: flex;
    align-items: center;
    padding: 0 30upx;
    & > view:nth-child(1) {
      flex: 1;
    }
  }
  .tui-msg-box {
    display: flex;
    align-items: center;

    .multi-checkbox {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36upx;
      height: 36upx;
      margin-right: 18upx;
      border: 2upx solid #bbb;
      border-radius: 6upx;
      color: #fff;
      font-size: 24upx;
      box-sizing: border-box;

      &.checked {
        border-color: #09c567;
        background: #09c567;
      }
    }
  
    .tui-msg-pic {
      width: 80upx;
      height: 80upx;
      border-radius: 50%;
      margin-right: 20upx;
    }
  
    .tui-msg-item {
      max-width: 500upx;
      min-height: 80upx;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      & > div {
        @include disFlex(center, flex-start);
        & > div:first-child {
          margin-right: 8upx;
        }
      }
      .level-img {
        ::v-deep.vip-text {
          left: 70upx;
          top: 8upx;
        }
      }
      .normal-img {
        width: 70upx;
        padding: 2upx 6upx;
        color: #999;
        background-color: #f0f2f6;
        border-radius: 20upx;
        .vip-text {
          font-size: 24upx;
          transform: scale(0.6);
          position: relative;
          top: -2upx;
          left: -8upx;
        }
      }
      .member-img {
        width: 70upx;
        padding: 2upx 6upx;
        color: green;
        background-color: #f0f2f6;
        border-radius: 20upx;
        .vip-text {
          font-size: 24upx;
          transform: scale(0.6);
          position: relative;
          top: -2upx;
          left: -8upx;
        }
      }
      .iconfont {
        color: #00aaed;
      }
    }
  
    .tui-msg-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 30upx;
      line-height: 1;
      color: #262b3a;
      margin-bottom: 4upx;
      .tui-user-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 450upx;
        font-size: 34upx;
        .super-man{
          margin-left:30upx;
          color:red;
          font-size:24upx;
          display:inline-block;
          color:white;
          border:1upx solid green;
          padding:6upx 10upx;
          background-color: green;
          border-radius: 11upx;
        }
        .ls-man{
          margin-left:30upx;
          font-size:24upx;
          display:inline-block;
          color:white;
          border:1upx solid #a5b1a5;
          padding:6upx 10upx;
          background-color: #a5b1a5;
          border-radius: 11upx;
        }
      }
    }
  
    .tui-msg-content {
      width:550upx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 26upx;
      color: #9397a4;
      .balance-amount{
        margin-left:20upx;
        .amount_sub{
          color:red;
          margin-left:6upx;
        }
        .amount_add{
          color:#3385FF;
          margin-left:6upx;
        }
      }
    }
  }
  .tui-msg-right {
    max-width: 120upx;
    height: 80upx;
    margin-left: auto;
    margin-right: 24upx;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .user_tag {
    border: 1upx solid #cccccc;
    padding: 5upx 12upx 5upx 12upx;
    border-radius: 25upx;
    color: #bbbbbb;
    margin-right: 10upx;
    margin-bottom: 12upx;
    display: inline-block;
    font-size: 30upx;
  }
  .multi-footer {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20upx 30upx;
    background: #fff;
    box-shadow: 0 -2upx 12upx rgba(0, 0, 0, 0.08);

    .confirm-multi-btn {
      height: 80upx;
      line-height: 80upx;
      border-radius: 40upx;
      background: #09c567;
      color: #fff;
      font-size: 30upx;

      &::after {
        border: none;
      }
    }
  }
  </style>