front-end/hdApp/src/pagesPurchase/pb.vue

<template>
  <view class="ghs_list_page flex-col">
    <view class="search-wrap">
      <view class="search-inner">
        <AppSearchModule placeholder="搜索批发店" @input="searchFn" />
      </view>
    </view>
    <template v-if="!$util.isEmpty(list.data)">
    <view class="ghs_list_area flex-col justify-end">
      
        <view class="ghs_box flex-col justify-end" v-for="(ghsInfo, index) in list.data" :key="index">
          <view class="image-text_7 flex-row justify-between">
            <view class="section_1 flex-col">
              <image class="logo" :src="ghsInfo.avatar" />
            </view>
            <view class="text-group_7 flex-col justify-between">
              <text class="text_8">{{ghsInfo.name}}</text>
              <text class="text_9"></text>
            </view>
          </view>
          <view class="box_4 flex-col"></view>
          <view class="box_9">
            <view class="tag_2" @click="pageTo({ url: '/admin/ghs/debtChange?ghsId='+ghsInfo.id})"> <text>挂账变动记录</text> </view>
            <view class="tag_2" @click="pageTo({ url: '/admin/clear/list?ghsId='+ghsInfo.id})"> <text>结账记录</text> </view>
            <view class="tag_2" @click="pageTo({url:'/pagesPurchase/shopping'})"> <text>买花记录</text> </view>
          </view>
          <view class="box_6 flex-row" @click="settleAccounts(ghsInfo)" v-if="Number(ghsInfo.debtAmount)>0">
            <view class="show_clear_area flex-row justify-between">
              <image class="icon_2" referrerpolicy="no-referrer" src="/static/lanhu_020105gongyingshangliebiao/ps2pvfa1l5i34w5vqj2k7b3kejml3i3nmrba1421bf-caa2-491b-8773-af413df7e96d.png" />
              <text class="waite_clear_order">待结订单&nbsp;{{ghsInfo.debtNum}}笔&nbsp;¥{{ghsInfo.debtAmount?parseFloat(ghsInfo.debtAmount):0}}</text>
            </view>
            <view class="image-text_9 flex-row justify-between">
              <text class="text-group_4">去结账</text>
              <image class="icon_3" referrerpolicy="no-referrer" src="/static/lanhu_020105gongyingshangliebiao/ps83ag7scu3a8bfq22ciodg5hiu0x9cesxjbfb4c9ca-ee3f-45ec-a6d7-6f166e13d6e6.png" />
            </view>
          </view>
          <view class="button_4 flex-col" @click="recover(ghsInfo)"><text class="text_13">恢复</text></view>
        </view>
    </view>

      </template>
      <block v-else>
        <emptyComponent title="没有记录" />
      </block>

  </view>
</template>
<script>
import emptyComponent from "@/components/empty";
import AppSearchModule from "@/components/module/app-search";
import { ghsList } from "@/api/purchase";
import { changeDelStatus } from "@/api/ghs";
import { list } from "@/mixins";
export default {
  components: {
    emptyComponent,
    AppSearchModule
  },
  mixins: [list],
  data () {
    return {
      seekVal: ''
    }
  },
  onReachBottom () {
    if (!this.list.finished) {
      this.getGhsList().then(res => {
        uni.stopPullDownRefresh()
      });
    } else {
      uni.stopPullDownRefresh()
    }
  },
  onPullDownRefresh() {
    this.resetList()
    this.getGhsList().then(res => {
      uni.stopPullDownRefresh();
    })
  },
  onUnload(){

    //返回上一页带参数
    let pages = getCurrentPages();
    let prevPage = pages[ pages.length - 2 ];
    //修改上一页data里面的xjData
    prevPage.$vm.backAction = 'cacelMask'

  },
  methods: {
    recover(ghs){
      let that = this
      that.$util.confirmModal({content:'确认恢复？',okText:'确认'},() => {
        that.confirmRecover(ghs)
			})
    },
    confirmRecover(ghs){
      let that = this
      changeDelStatus({delStatus:0,ghsId:ghs.id}).then(res=>{
        if(res.code == 1){
          that.resetList()
          that.getGhsList()
        }
      })
    },
    init() {
      this.getGhsList()
    },
    searchFn(e) {
      const keyword = (e || '').trim()
      if (!keyword) {
        return
      }
      if (keyword === this.seekVal) {
        return
      }
      this.seekVal = keyword
      this.resetList()
      this.getGhsList()
    },
    getGhsList () {
      return ghsList({ delStatus: 1, page: this.list.page, name: this.seekVal || '' }).then(res => {
        this.completes(res)
      })
    },
    settleAccounts (item) {
      this.pageTo({ url: '/pagesPurchase/gathering?id='+item.id})
    },
    gotoDetails (val) {
      this.pageTo({ url: '/pagesPurchase/purDetails?status=' + val.status + '&id=' + val.id, type:2 })
    }
  }
}
</script>
<style lang='scss' scoped>
.ghs_list_page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 750upx;
  padding-top: 100upx;
  overflow: hidden;

  .search-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 750upx;
    height: 100upx;
    display: flex;
    align-items: center;
    padding: 0 24upx;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.06);
  }

  .search-inner {
    width: 100%;
    flex: 1;

    ::v-deep .app-search-module {
      width: 100%;
    }
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-start {
      display: flex;
      justify-content: flex-start;
    }
  .justify-center {
      display: flex;
      justify-content: center;
  }
    
  .justify-end {
      display: flex;
      justify-content: flex-end;
  }
  .justify-evenly {
      display: flex;
      justify-content: space-evenly;
  }
  .justify-around {
      display: flex;
      justify-content: space-around;
  }
  .justify-between {
      display: flex;
      justify-content: space-between;
  }
  .align-start {
      display: flex;
      align-items: flex-start;
  }
  .align-center {
      display: flex;
      align-items: center;
  }
  .align-end {
      display: flex;
      align-items: flex-end;
  }

  .ghs_list_area {
    width: 750upx;
    background-color: #ece5e5;
    .group_1 {
      box-shadow: 0px 1px 0px 0px rgba(221, 221, 221, 1);
      background-color: rgba(255, 255, 255, 1);
      width: 750upx;
      height: 128upx;
      margin-top: 2upx;
      .image_1 {
        width: 727upx;
        height: 20upx;
        margin: 11upx 0 0 12upx;
      }
      .block_4 {
        width: 714upx;
        height: 64upx;
        margin: 21upx 0 12upx 24upx;
        .icon_1 {
          width: 20upx;
          height: 34upx;
          margin-top: 16upx;
        }
        .text_1 {
          width: 107upx;
          height: 34upx;
          overflow-wrap: break-word;
          color: rgba(4, 4, 4, 1);
          font-size: 36upx;
          font-family: PingFangSC-Semibold;
          text-align: left;
          white-space: nowrap;
          line-height: 24upx;
          margin: 15upx 0 0 278upx;
        }
        .applet-top-bar_1 {
          width: 174upx;
          height: 64upx;
          margin-left: 135upx;
        }
      }
    }
    .ghs_box {
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      width: 750upx;
      height: auto;
      margin-bottom:35upx;
      .image-text_7 {
        width: 674upx;
        height: 120upx;
        margin: 40upx 0 0 31upx;
        .section_1 {
          width: 120upx;
          height: 120upx;
          .logo{
            width:120upx;
            height:120upx;
            border-radius:10upx;
          }
        }
        .text-group_7 {
          width: 533upx;
          height: 99upx;
          margin-top: 5upx;
          .text_8 {
            display:inline-block;
            width: 550upx;
            height: 38upx;
            color: rgba(51, 51, 51, 1);
            font-size: 36upx;
            font-weight:bold;
            text-align: left;
            white-space: nowrap;
            line-height:38upx;
            overflow:hidden;
            text-overflow:ellipsis;
          }
          .text_9 {
            width: 533upx;
            height: 25upx;
            overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 26upx;
            text-align: left;
            white-space: nowrap;
            line-height: 24upx;
            margin-top: 10upx;
          }
        }
      }
      .box_4 {
        background-color: rgba(238, 238, 238, 1);
        width: 750upx;
        height: 1upx;
        margin-top: 40upx;
      }
      .box_9 {
        width: 100%;
        height: 60upx;
        margin: 23upx 0 22upx 30upx;
        .tag_2 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          height: 60upx;
          line-height:60upx;
          border: 2px solid rgba(221, 221, 221, 1);
          color: rgba(51, 51, 51, 1);
          font-size: 30upx;
          margin:0 25upx 0 0;
          text-align:center;
          float:left;
          padding-left:15upx;
          padding-right:15upx;
        }
        .tag_3 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          height: 60upx;
          border: 1px solid rgba(221, 221, 221, 1);
          margin-left: 12upx;
          width: 140upx;
          .text_11 {
            width: 101upx;
            height: 25upx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 26upx;
            text-align: left;
            white-space: nowrap;
            line-height: 25upx;
            margin: 17upx 0 0 20upx;
          }
        }
        .tag_4 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          height: 60upx;
          border: 1px solid rgba(221, 221, 221, 1);
          margin-left: 12upx;
          width: 192upx;
          .text_12 {
            width: 153upx;
            height: 25upx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 26upx;
            text-align: left;
            white-space: nowrap;
            line-height: 25upx;
            margin: 17upx 0 0 18upx;
          }
        }
      }
      .box_6 {
        background-color: rgb(248, 242, 242);
        width: 750upx;
        height:85upx;
        .show_clear_area {
          width: 247upx;
          height: 29upx;
          margin: 26upx 0 0 30upx;
          .icon_2 {
            width: 22upx;
            height: 26upx;
            margin-top: 2upx;
          }
          .waite_clear_order {
            width: 214upx;
            height: 29upx;
            overflow-wrap: break-word;
            color: rgba(255, 40, 66, 1);
            font-size: 30upx;
            font-weight:bold;
            text-align: left;
            white-space: nowrap;
            line-height: 29upx;
          }
        }
        .image-text_9 {
          width: 134upx;
          height: 27upx;
          margin: 26upx 29upx 0 310upx;
          .text-group_4 {
            width: 111upx;
            height: 27upx;
            overflow-wrap: break-word;
            color: rgba(255, 40, 66, 1);
            font-size: 30upx;
            font-weight:bold;
            text-align: left;
            white-space: nowrap;
            line-height: 27upx;
          }
          .icon_3 {
            width: 14upx;
            height: 24upx;
            margin-top: 2upx;
          }
        }
      }
      .button_4 {
        height: 80upx;
        line-height:80upx;
        text-align:center;
        background-color:#e88f0b;
        background-size: 137upx 137upx;
        width: 180upx;
        position: absolute;
        left: 515upx;
        top: 105upx;
        border-radius:10upx;
        .text_13 {
          color: rgba(255, 255, 255, 1);
          font-size: 30upx;
          font-weight:bold;
        }
      }
      .button_5 {
        height: 80upx;
        line-height:80upx;
        text-align:center;
        background-color:#CCCCCC;
        background-size: 137upx 137upx;
        width: 130upx;
        position: absolute;
        left: 585upx;
        top: 105upx;
        border-radius:39upx;
        .text_13 {
          color: rgba(255, 255, 255, 1);
          font-size: 30upx;
          font-weight:bold;
        }
      }
      .button_6 {
        height: 80upx;
        line-height:80upx;
        text-align:center;
        background-color:rgb(18, 175, 18);
        background-size: 137upx 137upx;
        width: 130upx;
        position: absolute;
        left: 390upx;
        top: 105upx;
        border-radius:39upx;
        .text_13 {
          color: rgba(255, 255, 255, 1);
          font-size: 30upx;
          font-weight:bold;
        }
      }
    }
  }
}
</style>