LightingSystemApp-serial/.svn/pristine/8b/8b7b035fabba141c43116612d465bd6dc648e9f6.svn-base

<template>
  <view class="page">
    <u-navbar back-text="项目维护">

    </u-navbar>
    <view class="background">
      <view class="list" v-for="(item, index) in productList" :key="item.prodid">
        <view class="list-content">
          <view @tap="toOne(item.prodid)">
            <view class="title">项目名称：{{ item.name }}</view>
            <view class="content">
              <view>项目编号：{{ item.code }}</view>
              <view>项目位置：{{ item.format }}</view>
            </view>
          </view>
          <view @tap="select(index)">
            <u-checkbox v-model="item.selected" shape="circle" disabled />
          </view>
        </view>
        <view class="border" />
      </view>
      <u-empty v-if="productList.length === 0" margin-top="32" />
    </view>
    <u-loadmore
      v-if="productList.length !== 0"
      :status="loadmore"
      margin-top="32"
      @loadmore="getProductPage"
    />
    <view style="height: 32rpx" />
    <u-popup v-model="showPopup" mode="top" class="top">
      <view class="popup-content">
        
      </view>
    </u-popup>
    <u-modal
      v-model="showDelete"
      :show-title="false"
      :content="`是否删除这${selectedList.length}个项目`"
      async-close
      show-cancel-button
      @confirm="deleteProduct"
    />
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  getProductPage,
  deleteProduct,
} from "@/common/network/equipment/product";

export default {
  data() {
    return {
      showPopup: false,
      showDelete: false,
      page: 1,
      productList: [],
      loadmore: "loadmore",
      selectedList: [],
	  
	  currentPage:1,
	  perpage:10,
	  total:0,
    };
  },
  created() {},
  mounted() {},
  methods: {
    refresh() {
      this.page = 1;
      this.getProductPage();
    },
    getProductPage() {
      let data = {
		currentPage:1,
		perpage:10,
      };
      getProductPage(data)
        .then((res) => {
		  this.total=res.totalCount;
		  var data= res.result;
          if (this.total > 0) {
            res.result.forEach((item) => {
              item.selected = false;
            });
            if (this.page === 1) {
              this.productList = res.result;
              this.selectedList = [];
            } else {
              this.productList.push(...res.result);
            }
            if (this.page < res.data.page.lastPage) {
              this.page++;
              this.loadmore = "loadmore";
            } else {
              this.loadmore = "nomore";
            }
            uni.stopPullDownRefresh();
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    toOne(prodid) {
      uni.navigateTo({
        url: "/pages/product/one/one?prodid=" + prodid,
      });
    },
    select(index) {
      this.productList[index].selected = !this.productList[index].selected;
      if (this.productList[index].selected) {
        this.selectedList.push(this.productList[index].prodid);
      } else {
        let i = this.selectedList.indexOf(this.productList[index].prodid);
        this.selectedList.splice(i, 1);
      }
    },
    toAdd() {
      uni.navigateTo({
        url: "/pages/product/add/add",
      });
      this.showPopup = false;
    },
    toDelete() {
      if (this.selectedList.length) {
        this.showDelete = true;
      } else {
        this.$refs.uToast.show({
          title: "请先选择需要删除的项目",
          type: "warning",
          icon: false,
        });
      }
    },
    deleteProduct() {
      deleteProduct(this.selectedList)
        .then((res) => {
          if (res.code === 200) {
            this.showDelete = false;
            this.showPopup = false;
            this.$refs.uToast.show({
              title: "删除成功",
              type: "success",
            });
            this.refresh();
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "warning",
              icon: false,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  onLoad(option) {
    this.getProductPage();
    uni.$on("refresh", this.refresh);
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.loadmore === "loadmore") {
      this.getProductPage();
    }
  },
  onUnload() {
    uni.$off("refresh", this.refresh);
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(
    180deg,
    rgba(235, 241, 255, 0.5) 0%,
    #e4ebff 100%
  );
}

.background {
  margin: 32rpx 24rpx;
  padding: 1px 0;

  background: #ffffff;
  border-radius: 20rpx;
}

.list-content {
  display: flex;
}
.list-content > :first-child {
  flex: 1;
}
.list-content > :last-child {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: 1px;
  width: 50rpx;
  background: rgba(78, 115, 223, 0.4);
}
.list-content > :last-child .u-checkbox {
  display: block;
}
.list:first-child .list-content > :last-child {
  border-top-right-radius: 20rpx;
}
.list:last-child .list-content > :last-child {
  border-bottom-right-radius: 20rpx;
}
.list >>> .u-checkbox__icon-wrap {
  background-color: #ffffff;
}
.list >>> .u-checkbox__icon-wrap--checked {
  background-color: #2979ff;
}

.list .title {
  margin-top: 24rpx;
  padding: 0 24rpx;

  font-size: 34rpx;

  max-width: 460rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list .content {
  display: flex;
  justify-content: space-between;

  margin: 20rpx 0;
  padding: 0 24rpx;

  font-size: 30rpx;
  color: #8d92a6;
}
.list .content > * {
  max-width: 280rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list > .border {
  height: 1px;
  background-color: #e8e9ed;
}
.list:last-child > .border {
  height: 0;
}

.u-drawer.top,
.u-drawer.top >>> .u-mask {
  margin-top: calc(var(--status-bar-height) + 44px);
}

.popup-content {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 200rpx;
  height: 230rpx;

  color: #4e73df;
}
.popup-content .u-image {
  margin: 0 auto 20rpx;
}

.importTip .title {
  font-size: 36rpx;
  line-height: 2em;
  text-align: center;
}
.importTip .tipList {
  padding: 20rpx;
  line-height: 2em;
}
</style>