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

<template>
    <view class="app-main app-content">
      <view class="input-wrap_box">
        <view>
          <AppSearchModule v-model="searchText" 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" @click="selectCurrent(item)">
            <view class="tui-msg-box">
              <img :src="item.cover" 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">
                  <text>
                    <block v-if="item.ratioType == 0">
                        {{item.ratio}}{{item.smallUnit}}/{{item.bigUnit}}
                    </block>
					<block v-else>
                        若干{{item.smallUnit}}/{{item.bigUnit}}
                    </block>
                  </text>
                    <text class="balance-amount">
                      <text>
                        <text style="color:#333333;font-weight:normal;">￥{{ item.hjPrice?parseFloat(item.hjPrice):0 }}</text>
                        <text style="margin-left:11upx;color:red;font-weight:bold;">￥{{ item.price?parseFloat(item.price):0 }}</text>
                        <text style="margin-left:11upx;color:#333333;font-weight:normal;">￥{{ item.skPrice?parseFloat(item.skPrice):0 }}</text>
                      </text>
                    </text>
                    <text style="margin-left:30upx;color:#9397a4;">剩 {{ item.stock?parseFloat(item.stock):0 }}</text>
                </view>
              </view>
            </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 { mapGetters } from "vuex";
  import { getItemList } from '@/api/item';
  export default {
    name: "selectItem",
    components: {
      TuiListCell,
      BadgeModule,
      AppWrapperEmpty,
      appVipModule,
      AppTag,
      AppSearchModule,
      couldScan:false
    },
    mixins: [list],
    data() {
      return {
        tabIndex: 0,
        selectStyle:1,
        searchText:''
      };
    },
    computed:{
      ...mapGetters(["getMyShopInfo"]),
    },
    onPullDownRefresh() {
      this.resetList();
      this.getMyList().then((res) => {
        uni.stopPullDownRefresh();
      });
    },
    onReachBottom() {
      if (!this.list.finished) {
        this.getMyList().then((res) => {
          uni.stopPullDownRefresh();
        });
      } else {
        uni.stopPullDownRefresh();
      }
    },
    onLoad() {
    },
    onShow(){
    },
    methods: {
      selectCurrent(item){
        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 == 2){
          //用于选择客户并且需要返回的情况
          let pages = getCurrentPages();
          let prevPage = pages[ pages.length - 2 ];
          if(this.option.losingItem){
            prevPage.$vm.losingItem = item.id
            prevPage.$vm.losingItemName = item.name
          }
          if(this.option.zjGatheringItem){
            prevPage.$vm.zjGatheringItem = item.id
            prevPage.$vm.zjGatheringItemName = item.name
          }
          prevPage.$vm.selectItemOk=1
          uni.navigateBack({})
        }else if(style == 3){
          //修改拆散库存到的花材
          let pages = getCurrentPages();
          let prevPage = pages[ pages.length - 2 ];
          prevPage.$vm.partAcceptItemModify = 1
          prevPage.$vm.partAcceptItem = item.id
          prevPage.$vm.partAcceptItemName = item.name
          uni.navigateBack({})
        }else{
          //无操作
        }
      },
      init() {
          this.getMyList()
      },
      searchFn() {
          this.resetList()
          this.getMyList()
      },
      getMyList() {
        let params = {classId:0,requestType:'itemList',page:this.list.page,search:this.searchText,customId:0,globalCgMyCharge:0,lookStock:0}
        getItemList(params).then((res) => {
            this.completes(res)
            if (this.$util.isEmpty(res.data)){
                return false
            }
        })
      }
    }
  };
  </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:18upx;
      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: 24upx;
      color: #9397a4;
      .balance-amount{
        margin-left:30upx;
      }
    }
  }
  .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>