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="true" @click="selectCurrent(item)">
            <view class="tui-msg-box">
              <img :src="item.avatar" class="tui-msg-pic" mode="widthFix"/>
              <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">
                  <span>{{ item.visitTime.substr(5,11) }}</span>
  
                    <span v-if="Number(item.balance)!=0" class="balance-amount">
                      <span v-if="item.balance>0" class="amount_add">余额{{item.balance?parseFloat(item.balance):0}}</span>
                      <span v-else class="amount_sub">欠款{{item.balance?Math.abs(parseFloat(item.balance)):0}}</span>
                    </span>
  
                    <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>
  </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,
      couldScan:false
    },
    mixins: [list],
    data() {
      return {
        tabIndex: 0,
        selectStyle:1
      };
    },
    computed:{
      ...mapGetters(["getMyShopInfo"]),
    },
    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) {
      // #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 ? this.option.style : 1
        this.selectStyle = style
        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{
          //无操作
        }
      },
      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: 20upx;
  }
  .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;
  
    .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:500upx;
      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;
  }
  </style>