gdy_app_8/src/view/course/user/deal.vue

<template>
  <div class="deal-x">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div class="userInfo">
      <van-row
        type="flex"
        class="imageName"
        justify="space-between"
        align="center"
      >
        <div class="userImage">
          <userImage
            class="about-me__avatar"
            :img_url="user_info.imgUrl"
            :user_name="user_info.name"
            width="1.12rem"
            height="1.12rem"
          ></userImage>
          <div class="info">
            <span
              >{{ user_info.name
              }}<van-icon
                name="notes-o"
                color="#E1B98B"
                style="margin-left: .1rem;"
            /></span>
            <p v-if="user_info.mobile != ''">手机：{{ user_info.mobile }}</p>
          </div>
        </div>
        <div class="user_leave" @click="dealCourseNum">
          <span>交易课程名额</span>
        </div>
      </van-row>
    </div>
    <div class="user_tabs">
      <van-tabs
        v-model="active"
        @click="activeChange"
        animated
        title-active-color="#26A2FF"
      >
        <van-tab
          v-for="(item, index) in activeList"
          :key="index"
          :title="item"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="dealScroll">
      <scroller
        ref="courseScroller"
        :on-infinite="getMoreList"
        :list="courseList"
        noDataText="没有更多..."
        v-show="active == 0"
      >
        <div class="dealList">
          <courseList :dataList="courseList" :listType="2"></courseList>
        </div>
        <noData :list="courseList" />
      </scroller>
      <scroller
        ref="recordScroller"
        :on-infinite="getMoreList"
        noDataText="没有更多..."
        :list="recordList"
        v-show="active == 1"
      >
        <div class="dealRecordList" v-show="active == 1">
          <div
            class="recordLi"
            v-for="(item, index) in recordList"
            :key="index"
          >
            <div class="flex-name-num">
              <p>{{ item.subjectName }}</p>
              <span :style="{color:item.toUserId == target_user_info.id ?'#26A2FF':'#eb6f6f'}"
                >{{ item.toUserId == target_user_info.id ? "收到" : "卖出"
                }}{{ item.amount }}套</span
              >
            </div>
            <p>{{ item.content }}</p>
            <span>{{ item.createTime }}</span>
          </div>
        </div>
        <van-divider
          v-if="recordList.length != 0 && recordList.length == page1.total"
          style="line-height: .6rem;"
          >没有更多了...</van-divider
        >
        <noData :list="recordList" />
      </scroller>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import courseList from "../components/courseList";
import { getDealerRecord } from "../api";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "deal",
  components: { courseList },
  data() {
    return {
      title: "交易",
      activeList: ["待确认接收的名额", "已确认接收的名额"],
      active: 0,
      noDate: false,
      noDate1: false,
      page: {
        cur: 1,
        size: 10,
        total: 0
      },
      page1: {
        cur: 1,
        size: 15,
        total: 0
      },
      user_info: {
        imgUrl: "",
        id: "wx15451154555",
        name: "新人",
        mobile: "15270803986"
      },
      target_user_info: JSON.parse(localStorage.getItem("wx_user_info")),
      courseList: [],
      recordList: []
    };
  },
  watch: {
    $route(to) {
      if (to.path.includes("/courseDeal/")) {
        this.resetList();
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.user_info = this.$route.query;
      this.getList();
      this.getRecordList();
    },
    // 初始化数据
    resetList() {
      this.active = 0;
      this.page.cur = 1;
      this.page.total = 0;
      this.page1.cur = 1;
      this.page1.total = 0;
      this.noDate = false;
      this.noDate1 = false;
      this.courseList = [];
      this.recordList = [];
      this.getList();
      this.getRecordList();
    },
    // 触底加载
    getMoreList(done) {
      if (this.active == 0) {
        if (!this.noDate) {
          setTimeout(() => {
            this.getList(done);
          }, 300);
        } else {
          this.$refs.courseScroller.finishInfinite(true);
        }
      } else {
        if (!this.noDate1) {
          setTimeout(() => {
            this.getRecordList(done);
          }, 300);
        } else {
          this.$refs.recordScroller.finishInfinite(true);
        }
      }
    },
    // 获取待确认的交易列表
    getList(done) {
      let data = {
        page: this.page.cur,
        pageSize: this.page.size,
        status: 1
      };
      getDealerRecord(this.$route.params.id, data).then(res => {
        res.list.forEach(item => {
          item.dealAmount = item.amount;
          item.subjectThumb = item.thumb;
          item.subjectPrice = item.price;
          delete item.amount;
          delete item.thumb;
          delete item.price;
        });
        this.courseList = this.courseList.concat(res.list);
        this.page.cur = res.current;
        this.page.total = res.total;
        if (res.pages == this.page.cur) {
          if (done) done(true);
          this.noDate = true;
        } else {
          if (done) done();
          this.page.cur++; //下拉一次页数+1
          this.noDate = false;
        }
      });
    },
    // 获取已交易的列表
    getRecordList(done) {
      let data = {
        page: this.page1.cur,
        pageSize: this.page1.size,
        status: 2
      };
      getDealerRecord(this.$route.params.id, data).then(res => {
        this.page1.cur = res.current;
        this.page1.total = res.total;
        this.recordList = this.recordList.concat(res.list);
        if (res.pages == this.page1.cur) {
          console.log("没有更多");
          if (done) done(true);
          this.noDate1 = true;
        } else {
          if (done) done();
          this.page1.cur++; //下拉一次页数+1
          this.noDate1 = false;
        }
      });
    },
    // 确认交易
    dealCourseNum() {
      this.$router.push(`/course/dealOrder/${this.$route.params.id}`);
    },
    // 标签切换
    activeChange(e) {
      this.active = e;
    },
    //导航左侧返回
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.deal-x {
  background-color: #efefef;
  .userInfo {
    padding: 0.24rem 0.32rem;
    .userImage {
      display: flex;
      align-items: center;
      flex: 1;
      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0.2rem;
        span {
          font-size: 0.32rem;
          font-weight: 600;
          color: #000;
          line-height: 2;
          display: block;
        }
        p {
          font-size: 0.22rem;
          color: #222;
          line-height: 1;
          display: block;
        }
      }
    }
    .user_leave {
      padding: 0.15rem 0.3rem;
      font-size: 0.26rem;
      font-weight: 550;
      color: #26A2FF;
      border: 1px solid #26A2FF;
      border-radius: 0.1rem;
      line-height: 1.5;
      margin-left: .2rem;
    }
  }
  .user_tabs {
    margin: 0 0.2rem;
    border-radius: 0.1rem;
    position: relative;
    overflow: hidden;
    &::after {
      content: "";
      width: 1px;
      height: 60%;
      position: absolute;
      left: 50%;
      top: 20%;
      background-color: #898989;
    }
  }
  .dealScroll {
    height: calc(100vh - 3.5rem) !important;
    padding: 0 0.2rem;
    position: relative;
    &::after {
      content: "";
      width: calc(100% - 0.2rem);
      height: 1px;
      position: absolute;
      top: 0;
      left: 0.1rem;
      background-color: #efefef;
    }
    .dealList {
      padding: 0.15rem 0.2rem 0;
      border-radius: 0.1rem;
    }
    .dealRecordList {
      padding: 0 0.2rem;
      border-radius: 0.1rem;
      margin-top: 0.1rem;
      .recordLi {
        background: #fff;
        padding: 0 0.2rem;
        overflow: hidden;
        &:not(:nth-last-child(1)) {
          border-bottom: 1px solid #efefef;
        }
        &:first-child {
          border-radius: 0.1rem 0.1rem 0 0;
        }
        &:last-child {
          border-radius: 0 0 0.1rem 0.1rem;
        }
        .flex-name-num {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 0.1rem;
          & > p {
            font-size: 0.32rem;
            color: #000;
            line-height: 1.5;
          }
          & > span {
            font-size: 0.28rem;
            color: #000;
            line-height: 2;
            margin-left: 0.1rem;
          }
        }
        & > p {
          font-size: 0.28rem;
          color: #666;
          line-height: 1;
        }
        & > span {
          font-size: 0.28rem;
          color: #666;
          line-height: 1;
          display: block;
          margin-top: 0.2rem;
          margin-bottom: 0.1rem;
        }
      }
    }
  }
}
</style>