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

<template>
  <div class="page">
    <van-nav-bar
      title="课程交易"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div class="orderContent">
      <div class="form">
        <van-field
          readonly
          clickable
          label="选择课程"
          :value="form.name"
          placeholder="选择课程"
          @click="showPop"
        />
        <div class="desc" v-if="form.id != 0">
          <span>该课程名额剩余{{ coursesUsable }}套</span>
        </div>
        <van-field
          readonly
          label="选择交易数量"
          :value="form.number"
          placeholder="选择交易数量"
          @touchstart.native.stop="numberShow = true"
        />
        <van-field
          v-model="form.content"
          rows="3"
          autosize
          label="备注"
          type="textarea"
          maxlength="100"
          placeholder="备注留言"
          show-word-limit
        />
        <div class="submit">
          <van-button
            color="#999"
            style="padding: 0 .8rem;border-radius: 0.15rem;"
            @click="$router.go(-1)"
            >取消</van-button
          >
          <van-button style="background-color: #26A2FF;padding: 0 .8rem;color: #FFF;border-radius: 0.15rem;" @click="comfirm"
            >确认</van-button
          >
        </div>
      </div>
    </div>
    <van-popup v-model="popupShow" position="bottom" :style="{ height: '30%' }">
      <van-picker
        title="选择课程"
        show-toolbar
        :columns="columnsOptions"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-number-keyboard
      :show="numberShow"
      @blur="numberShow = false"
      @input="onInput"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import {getDealerCourseList,dealCourse} from '../api'
import Vue from "vue";
import { NumberKeyboard } from "vant";

Vue.use(NumberKeyboard);
export default {
  name: "dealOrder",
  components: {},
  data() {
    return {
      numberShow: false,
      popupShow: false,
      form: {
        name: "",
        id: 0,
        number: 0,
        content: ""
      },
      coursesUsable: 0,
      courseList:[],
      columnsOptions:[]
    };
  },
  created() {
    this.getCourseList();
  },
  methods: {
    getCourseList(){
      getDealerCourseList().then(res=>{
        this.courseList = res.list;
        let list = [];
        res.list.forEach(item=>{
          list.push(item.subjectName)
        })
        this.columnsOptions = list
      })
    },
    postDeal(){
      let data = {
        subjectId:this.form.id,
        amount:this.form.number,
        content:this.form.content
      }
      dealCourse(this.$route.params.id,data).then(res=>{
        this.$toast.success('交易成功')
        this.form.id = 0;
        this.form.number = 0;
        this.form.content = "";
        this.form.name = "";
        this.$router.go(-1)
      })
    },
    comfirm(){
      this.$dialog.confirm({
         title: '提示',
         message: '确认要提交当前名额交易吗？',
        }).then(() => {
          if(this.form.id != 0 && this.form.number != 0){
            this.postDeal();
          }else{
            this.$toast.fail('请填写正确的交易信息后提交')
          }
        })
    },
    onInput(key) {
      this.form.number = Number(`${this.form.number}${key}`)
    },
    onDelete() {
      this.form.number = Number(this.form.number.toString().slice(0,this.form.number.toString().length - 1))
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    showPop() {
      this.popupShow = true;
    },
    onConfirm(e, index) {
      this.form.name = this.courseList[index].subjectName;
      this.form.id = this.courseList[index].subjectId;
      this.coursesUsable = this.courseList[index].amount;
      this.popupShow = false;
    }
  }
};
</script>
<style scoped lang="scss">
.page {
  background: #F3F2EE;
  background: linear-gradient(90deg, #F3F2EE, #E7EFF9);
  .orderContent {
    .form {
      .desc {
        padding: 0 0.2rem;
        font-size: 0.24rem;
        color: #888;
        line-height: 2;
      }
      .submit {
        margin-top: 0.5rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
}
</style>