front-end/hdApp/src/admin/item/hasLimitBuyCustom.vue

<template>
  <div class="app-main app-content">
    <block v-if="!$util.isEmpty(customList)">
      <block v-for="(item, index) in customList" :key="index">
        <tui-list-cell>
          <div class="tui-msg-box">
            <img :src="item.smallAvatar" class="tui-msg-pic" mode="widthFix" />
            <div class="tui-msg-item">
              <div class="tui-msg-name">
                <div class="tui-user-name">
                  {{ item.name }}
                  <text v-if="item.level == 2" class="super-man">大客户</text>
                </div>
              </div>
              <div class="tui-msg-content">
                <span>{{ item.visitTime.substr(5,11) }}</span>
                <span style="color:black;margin-left:20upx;">已购 {{ item.hasLimitBuyNum }}</span>
                <span style="color:black;margin-left:20upx;color:red;font-weight:bold;" v-if="item.specialPrice == true && item.reachLimitBuyNum == 1">特价量已用完</span>
                <span style="color:black;margin-left:20upx;color:red;font-weight:bold;" v-else-if="item.specialPrice == false && item.reachLimitBuyNum == 1">已不能购买</span>
              </div>
            </div>
            <button class="admin-button-com blue middle" @click="clearBuy(item)">清空已购</button>
          </div>
        </tui-list-cell>
      </block>
    </block>
    <block v-else>
      <app-wrapper-empty :is-empty="$util.isEmpty(customList)" title="暂无记录" />
    </block>
  </div>
</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 { hasLimitBuyCustomList, clearOneLimitBuy } from "@/api/item";
export default {
  name: "hasLimitBuyCustom",
  components: {
    TuiListCell,
    BadgeModule,
    AppWrapperEmpty,
    appVipModule,
    AppTag,
    AppSearchModule
  },
  mixins: [list],
  data() {
    return {
      customList:[]
    };
  },
  methods: {
    init() {
      hasLimitBuyCustomList({id:this.option.id}).then(res=>{
        if(res.code == 1){
          this.customList = res.data.customList ? res.data.customList : []
        }
      })
    },
    clearBuy(info){
      this.$util.confirmModal({content:'确认清空？清空后客户可重新下单'},() => {
        clearOneLimitBuy({customId:info.id,productId:this.option.id}).then(res=>{
          if(res.code == 1){
            this.$msg('清空成功')
            this.init()
          }
        })
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  padding-top: 10upx;
  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;
    width: 100%;
    height: 100upx;
    display: flex;
    align-items: center;
    padding: 0 30upx;
    & > view:nth-child(1) {
      flex: 1;
    }
  }
.tui-list-cell {
  width: 100%;
}
.tui-msg-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tui-msg-pic {
    width: 80upx;
    height: 80upx;
    border-radius: 50%;
    margin-right: 20upx;
  }

  .tui-msg-item {
    flex: 1;
    min-width: 0;
    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;
    .tui-user-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 290upx;
      .super-man{
        margin-left:20upx;
        color:red;
        font-size:24upx;
        display:inline-block;
        color:white;
        border:1upx solid green;
        padding:8upx 10upx;
        background-color: green;
        border-radius: 11upx;
      }
    }
  }

  .tui-msg-content {
    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;
      }
    }
  }
  .admin-button-com {
    margin-left: 20upx;
    white-space: nowrap;
  }
}
.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>