front-end/ghsApp/src/admin/custom/distCustom.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="false">
          <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 }}
                  <text v-if="item.level == 2" class="super-man">大客</text>
                  <text v-if="item.level == 9" class="cost-man">成本</text>
                  <text v-if="item.level == 0" class="ls-man">零售</text>
                </view>
              </view>
              <view class="tui-msg-content">
                <span>{{ item.visitTime.substr(5,11) }}</span>

                <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 10000" style="font-size:24upx;margin-left:20upx;color:green;font-weight:bold;">没有下过</text>
                <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 7" style="font-size:24upx;margin-left:20upx;color:green;font-weight:bold;">1周未下</text>
                <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 30" style="font-size:24upx;margin-left:20upx;color:green;font-weight:bold;">1个月未下</text>
                <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 180" style="font-size:24upx;margin-left:20upx;color:green;font-weight:bold;">半年未下</text>
                <text v-if="item.overTimeUnExpend && item.overTimeUnExpend == 365" style="font-size:24upx;margin-left:20upx;color:green;font-weight:bold;">1年未下</text>

                <text v-if="item.distName!=''" style="margin-left:30upx;font-size:30upx;font-weight:bold;color:#3385FF;">{{ item.distName }}</text>
              </view>

              <button class="admin-button-com middle" @click="openDistSelect(item)" style="position: absolute;right:80upx;top:-15upx;">重选</button>
              <button class="admin-button-com middle blue" @click="confirmDist(item)" style="position: absolute;right:-50upx;top:-15upx;">确认</button>

            </view>
          </view>
        </tui-list-cell>
      </block>
    </block>
    <block v-else>
      <app-wrapper-empty :is-empty="$util.isEmpty(list.data)" />
    </block>

    <!-- 配送区域选择弹框 -->
    <uni-popup ref="distSelectRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
      <view style="max-height:90vh;overflow: scroll;">
        <view style="margin-left:30upx;margin-top:19upx;font-size:27upx;font-weight:bold;">请选择片区</view>
        <view style="display:flex;padding:20upx;height:auto;justify-content: flex-start;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
          <view v-for="(item, index) in allDist" :key="index" style="margin-bottom:20upx;margin-left:3upx;">
            <button
              class="admin-button-com staff-btn"
              @click.stop="selectDist(item)"
              :class="{'selected': currentDist.id === item.id}"
            >
              {{ item.name }}
            </button>
          </view>
        </view>
        <view style="text-align:center;padding:10upx 0 10upx 0;">
          <button class="admin-button-com big blue" style="width:210upx;" @click="cancelDistSelect()">取消</button>
        </view>
      </view>
    </uni-popup>

  </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 AppSearchModule from "@/components/module/app-search";
import { list } from "@/mixins";
import { getList } from "@/api/member";
import { getAllDist,changeDist } from "@/api/dist"
import { mapGetters } from "vuex";
export default {
  name: "selectCustom",
  components: {
    TuiListCell,
    BadgeModule,
    AppWrapperEmpty,
    appVipModule,
    AppSearchModule
  },
  mixins: [list],
  data() {
    return {
      tabIndex: 0,
      currentDist: {},
      currentCustom: {},
      couldScan: false,
      allDist: []
    };
  },
  computed:{
  },
  onPullDownRefresh() {
    this.resetList();
    this.getCustomList().then((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (!this.list.finished) {
      this.getCustomList().then((res) => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  onLoad() {
    getAllDist().then(res=>{
      if(res.code == 1){
        this.allDist = res.data.list?res.data.list:[]
      }
    })
    if(this.option.distName){
      uni.setNavigationBarTitle({ title: '设置为'+this.option.distName })
    }
  },
  methods: {
    init() {
       this.getCustomList()
    },
    searchFn(e) {
        this.resetList();
        this.seekVal = e;
        this.getCustomList();
    },
    getCustomList() {
      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;
          }
        });
    },
    // 打开配送区域选择弹框
    openDistSelect(item) {
      this.currentCustom = item;
      this.currentDist = { id: item.distId } || {};
      this.$refs.distSelectRef.open('center');
    },
    confirmDist(custom){
      let distId = this.option.distId?this.option.distId:0
      let distName = this.option.distName?this.option.distName:''
      changeDist({customId:custom.id,distId:distId}).then(res=>{
        if(res.code == 1){
          this.$msg('设置成功')
          custom.distName = distName
        }
      })
    },
    // 选择配送区域
    selectDist(dist) {
      this.$refs.distSelectRef.close();
      changeDist({customId:this.currentCustom.id,distId:dist.id}).then(res=>{
        if(res.code == 1){
          this.$msg('设置成功')
          this.currentCustom.distName = dist.name
        }
      })
    },
    // 关闭弹框
    cancelDistSelect() {
      this.$refs.distSelectRef.close();
    }
  },
};
</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:700upx;
    min-height:100upx;
    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;
    .tui-user-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 500upx;
      font-size: 32upx;
      .super-man{
        margin-left:30upx;
        font-size:24upx;
        display:inline-block;
        color:white;
        border:1upx solid green;
        padding:6upx 10upx;
        background-color: green;
        border-radius: 11upx;
      }
      .cost-man{
        margin-left:30upx;
        font-size:24upx;
        display:inline-block;
        color:white;
        border:1upx solid red;
        padding:6upx 10upx;
        background-color: red;
        border-radius: 11upx;
      }
      .ls-man{
        margin-left:30upx;
        font-size:24upx;
        display:inline-block;
        color:#6f756f;
        border:1upx solid #6f756f;
        padding:6upx 10upx;
        border-radius: 11upx;
      }
    }
  }

  .tui-msg-content {
    width:500upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 24upx;
    line-height: 1;
    color: #9397a4;
    .debt-amount{
      margin-left:20upx;
      .amount_num{
        color:red;
        margin-left:6upx;
        font-weight:bold;
      }
    }
  }
}
.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;
}
.class-popup-style{
  z-index:99999;
}
.staff-btn {
  min-width: 160upx;
  padding: 0 27upx;
  height: 80upx;
  font-size: 40upx;
  font-weight: bold;
  margin: 8upx 8upx 0 0;
  border-radius: 16upx;
  background: #f0f2f6;
  color: #333;
  border: 2upx solid #e0e0e0;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-btn.selected,
.staff-btn:active {
  background: #f0f2f6;
  color: #333;
  border-color: #e0e0e0;
}
</style>