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

<template>
  <div class="page">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div class="transferTop">
      <p>{{ transferInfo.dealAmount }}套</p>
      <span>课程名额</span>
    </div>
    <div class="transferConetent">
      <span>{{ transferInfo.name }}</span>
      <courseList :dataList="courseInfo" :showNum="3"></courseList>
      <p>备注信息:{{ transferInfo.content }}</p>
    </div>
    <div class="transferBtm">
      <van-button
        style="padding:0 .5rem;"
        type="primary"
        v-if="transferInfo.toUserId == user_info.id"
        @click="confirm"
        >确认接收</van-button
      >
      <van-button
        style="padding:0 .5rem;background-color: #999;color:#FFF;"
        size="large"
        v-else
        >等待对方接收</van-button
      >
      <div class="transferTH">
        <p>如一天内未确认，将自动退还对方。 <span @click="returnLimit()">{{user_info.id == transferInfo.toUserId?'立即退还':'立即撤回'}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import {dealAccept,dealRefund,dealRecall} from '../api'
import courseList from "../components/courseList.vue";
export default {
  name: "courseTransfer",
  components: { courseList },
  props: [],
  data() {
    return {
      title: "课程交易",
      transferInfo: {},
      user_info:JSON.parse(localStorage.getItem('wx_user_info'))
    };
  },
  computed: {
    courseInfo() {
      let list = [];
      list.push(this.transferInfo);
      console.log(list);
      return list;
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.transferInfo = this.$route.query
      console.log(this.transferInfo)
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    returnLimit(){
      if(this.transferInfo.toUserId == this.user_info.id){
        this.$dialog.confirm({
        title: "提示",
        message: "确认退还当前转让的名额？"
      })
        .then(() => {
          this.sendback();
        })
        .catch(() => {
        });
      }else{
        this.$dialog.confirm({
        title: "提示",
        message: "确认撤回当前转让的名额？"
      })
        .then(() => {
          this.sendRecall()
        })
        .catch(() => {
        });
      }
    },
    // 退还名额
    sendback(){
      let data = {
        transferId:this.transferInfo.id,
        subjectId:this.transferInfo.subjectId,
        toUserId:this.transferInfo.toUserId,
        fromUserId:this.transferInfo.fromUserId,
      }
      dealRefund(data).then(res=>{
        this.$toast.success('退回成功')
        setTimeout(()=>{
          this.$router.go(-1)
        })
      })
    },
    // 撤回名额
    sendRecall(){
      let data = {
        transferId:this.transferInfo.id,
        subjectId:this.transferInfo.subjectId,
        toUserId:this.transferInfo.toUserId,
        fromUserId:this.transferInfo.fromUserId,
      }
      dealRecall(data).then(res=>{
        this.$toast.success('退回成功')
        setTimeout(()=>{
          this.$router.go(-1)
        })
      })
    },
    // 接收名额
    acceptAccount(){
      let data = {
        transferId:this.transferInfo.id,
        subjectId:this.transferInfo.subjectId,
        toUserId:this.transferInfo.toUserId,
        fromUserId:this.transferInfo.fromUserId,
      }
      dealAccept(data).then(res=>{
        this.$toast.success('接收成功')
        setTimeout(()=>{
          this.$router.go(-1)
        })
      })
    },
    confirm() {
      this.$dialog.confirm({
        title: "提示",
        message: "确认接收当前转让的名额？"
      })
        .then(() => {
          this.acceptAccount()
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
.page {
  position: relative;
  .transferTop {
    padding: 0.6rem;
    text-align: center;
    p {
      font-size: 0.6rem;
      color: #000;
    }
    span {
      font-size: 0.3rem;
      line-height: 2;
    }
  }
  .transferConetent {
    .listOuer {
      padding: 0 0 0.1rem;
      background-color: #fff;
    }
    & > span {
      margin-left: 0.2rem;
      font-size: 0.26rem;
      color: #666;
      line-height: 1.4;
    }
    & > p {
      font-size: 0.28rem;
      color: #333;
      line-height: 1.3;
      padding: 0 0.2rem;
    }
  }
  .transferBtm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0.7rem;
    .transferTH {
      margin-top: 0.7rem;
      width: 100%;
      display: flex;
      justify-content: center;
      p {
        font-size: 0.26rem;
        color: #000;
      }
      span {
        color: #26a2ff;
      }
    }
  }
}
</style>