'normal'

src/components/upload/index.vue

@@ -36,17 +36,12 @@
     },
     methods: {
       beforeUpload(file) {
-        // 限制上传类型
-        let fileExtensions = ".jpg"
-        //限制的上限为20M
-        const max20M = file.size / 1024 / 1024/20;
-        if (!fileExtensions) {
-          this.$message.error('上传文件类型只能是 .doc, .docx, .pdf 格式!');
+        if (file.size / 1024 / 300 >1) {
+          this.$message.error('上传文件大小不能超过 300KB!');
+          return false
         }
-        if (max20M >1) {
-          this.$message.error('上传文件大小不能超过 20MB!');
-        }
-        return fileExtensions && max20M;
+        file.is_pass = true;
+        return true;
       },
       handleExceed( event ){
         console.log('handleExceed', event)
@@ -75,12 +70,15 @@
       	}
       },
       handleUpload( rand, file ) {
+        console.log( "handleUpload")
+        if( !file.is_pass ) return;
         let that = this
         // 100k
-        compressImg( file, 100 ).then( nfile=>{
+        compressImg( file, 300 ).then( nfile=>{
            console.log( "nfile", nfile)
            const formData = new FormData()
            formData.append('avatar', nfile )
+           this.$message.successMsg('文件开始上传!', 1);
            uploadImg( that.fileMd5, formData ).then( res=>{
              that.onupload = false
              if( res.code== 200){

src/containers/center/market/index.vue

@@ -7,7 +7,7 @@
 
       <ul class="pt-line mt20">
         <li :span="6" v-for="item in typeList" style="width: 25%;float: left;" :key="item.id" v-if="item.isOpen">
-           <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
+          <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
         </li>
       </ul>
 
@@ -18,213 +18,274 @@
             <div class="img">
               <img :src="item.tb">
               <div class="year-label ng-binding">
-                  <span v-if="!item.is_pay">还未购买</span>
-                  <span v-else-if="!item.is_pass" style="background-color: blue;padding: 2px;border-radius: 2px;">在学习中</span>
-                  <span v-else style="background-color: green;padding: 2px;border-radius: 2px;" >已经完成</span>
+                <span v-if="item.is_pay==0 && item.buyImg ==''">
+                  还未购买
+                </span>
+                <span v-else-if="item.is_pay==0">
+                  等待审核
+                </span>
+                <span v-else-if="item.is_pay==2" style="background-color: #78335F;">申请驳回</span>
+                <span v-else-if="!item.is_pass" style="background-color: blue;padding: 2px;border-radius: 2px;">在学习中</span>
+                <span v-else style="background-color: green;padding: 2px;border-radius: 2px;">已经完成</span>
               </div>
 
               <div class="hover-block">
                 <div class="mask-bg"></div>
-                <el-button @click="gotoPlay(item.course_id)" v-if="item.is_pay"
-                class="ui-btn">进入学习</el-button>
+                <el-button @click="gotoPlay(item.course_id)" v-if="item.is_pay==1" class="ui-btn">进入学习</el-button>
 
+                <el-button @click="goPay(index)" v-else-if="item.is_pay==2 || !!item.buyImg" class="ui-btn btn-o">补充材料</el-button>
                 <el-button @click="goPay(index)" v-else class="ui-btn btn-o">购买课程</el-button>
               </div>
             </div>
 
             <div class="tit"><a>{{item.name}}</a></div>
             <div class="info">
-               <p class="w1"><span class="p-ico c1"></span> {{item.type}}</p>
-               <p class="w2"><span class="p-ico c2"></span>{{item.nd||'2020'}}</p>
-               <p class="w1" >
+              <p class="w1"><span class="p-ico c1"></span> {{item.type}}</p>
+              <p class="w2"><span class="p-ico c2"></span>{{item.nd||'2020'}}</p>
+              <p class="w1">
                 <span class="p-ico c5"></span> ￥{{item.fee/100}}元
-               </p>
-               <p class="w2" >
-                 <span class="p-ico c3"></span> {{item.xs/10}}学时
-               </p>
+              </p>
+              <p class="w2">
+                <span class="p-ico c3"></span> {{item.xs/10}}学时
+              </p>
             </div>
           </div>
         </li>
       </ul>
 
-      <el-pagination  class="m-pages"
-        @current-change="handleCurrentChange"
-        :current-page="page"
-        :page-size="size" layout="total, prev, pager, next"
-        :total="total">
+      <el-pagination class="m-pages" @current-change="handleCurrentChange" :current-page="page" :page-size="size"
+        layout="total, prev, pager, next" :total="total">
       </el-pagination>
 
     </div>
 
-    <el-dialog
-      class="fc tc"
-      :visible.sync="loginDialog"
-      :close-on-click-modal="false"
-      width="500px"
-      @close="loginDialog=false"
-    >
+    <el-dialog class="fc tc" :visible.sync="loginDialog" :close-on-click-modal="false" width="500px" @close="loginDialog=false">
       <div class="login-dialog m-login">
         <un-login @login="login"></un-login>
       </div>
     </el-dialog>
 
 
+    <el-dialog title="申请开通课程" class="fc tc" :visible.sync="buyCourseDialog" :append-to-body="true"
+    width="560px" >
+      <el-form label-width="80" label-position="center">
+        <div align="left" style="font-size: 16px;">
+          <p><span class="buyForm-title">单位名称：</span> 三明市城市建设项目服务中心　 </p>
+          <p><span class="buyForm-title">开户银行：</span>中国工商银行股份有限公司三明下洋支行　 </p>
+          <p><span class="buyForm-title">开户账号：</span> 1404400629000070587　 </p>
+        </div>
+
+        <div align="left" style="color: red; margin-top: 10px;">
+          <p style="font-size: 16px;">备注：</p>
+          <p style="margin-left: 20px;">1、仅支持个人缴费，批量缴费需联系三明市城市建设项目服务中心</p>
+          <p style="margin-left: 30px;">（三明市建设人才服务中心窗口，联系电话：0598-5157296） </p>
+          <p style="margin-left: 20px;">2、缴费时请备注：姓名+工种名称，例：张三+土建施工员</p>
+          <p style="margin-left: 20px;">3、缴费成功后请上传缴费截图审核。</p>
+        </div>
+
+        <div align="left" >
+          <el-button type="text" > 本课程费用: <strong style="color: red;"> {{buyForm.fee/100}} 元 </strong>  </el-button>
+          <el-button type="text"  @click="showImg(exampleImg)"> 查看案例 </el-button>
+        </div>
+
+        <el-form-item lable="备注信息" class="mt20">
+          <el-input v-model="buyForm.marks" type="textarea" placeholder="备注信息"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <img :src="buyForm.buyImg" :onerror="errorImg" class="setting-img" @click="showImg(buyForm.buyImg)">
+          <do-upload @onFinish="uploadBuyImg" placeholder="上传支付凭证"> </do-upload>
+        </el-form-item>
+
+        <el-form-item class="tc">
+          <el-button @click="buyCourseDialog=false">取 消</el-button>
+          <el-button @click="buyCourse" type="primary">确 定</el-button>
+        </el-form-item>
+
+      </el-form>
+
+    </el-dialog>
+
     <el-dialog
-      title="扫码购买课程"
-      class="fc tc"
-      :visible.sync="qrcode"
-      width="500px"
-      :append-to-body="true"
-      @close="closeDialog"
-    >
-      <div class="qrcode">
-        <img :src="qrcodeUrl" />
-        <div class="notice">请注意：本课程费用￥{{courseFee/100}}元</div>
-      </div>
+        append-to-body
+        close-on-click-modal
+        :visible.sync="showImgDialog"
+        :width="width">
+        <img :src="imgUrl" @load="onLoad" alt="" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import {httpServer} from "@/components/httpServer/httpServer.js";
-import { MessageBox } from "element-ui";
-import unLogin from "../../login/components/unLogin.vue";
-import {parseTime} from "@/utils";
-import { mapGetters,mapActions } from "vuex";
-
-export default {
-  name: "Index",
-  data() {
-    return {
-      page: 1,
-      size: 8,
-      total: 0,
-      type:this.$route.query.type||'',
-      list: [],
-      showData: [],
-      qrcode: false,
-      qrcodeUrl: "",
-      outTradeNo: "",
-      courseFee:0,
-      title:'',
-      timer: null,
-      tickCount: 0,
-      listLoading: false,
-      loginDialog:false,
-      isLoginOk: false,
-      media:{}
-    };
-  },
-  computed: {
-  	...mapGetters("user", ["typeList","userInfo"])
-  },
-  components:{unLogin},
-  filters:{
-    dateFilter(val) {
-      return parseTime(val, '{y}-{m}-{d}')
-    }
-  },
-  watch:{
-    type(val){
-      this.getData()
-    }
-  },
-  beforeMount(){
-    if( this.typeList.length >0 ){
-      this.type = this.typeList[0].name
-      this.getData()
-    }
-  },
-  beforeDestroy() {
-    if (this.timer) window.clearInterval(this.timer);
-  },
-  methods: {
-    initTimer() {
-      if (this.timer) window.clearInterval(this.timer);
-      this.timer = window.setInterval(() => {
-        this.tickCount++;
-        this.tickTimer();
-      }, 2000);
+  import { httpServer } from "@/components/httpServer/httpServer.js";
+  import {MessageBox } from "element-ui";
+  import unLogin from "../../login/components/unLogin.vue";
+  import {parseTime } from "@/utils";
+  import DoUpload from '@/components/upload/index.vue'
+  import exampleImg from   '@/assets/template.png'
+
+
+  import {
+    mapGetters,
+    mapActions
+  } from "vuex";
+
+  export default {
+    name: "Index",
+    data() {
+      return {
+        page: 1,
+        size: 8,
+        total: 0,
+        width: "",
+        type: this.$route.query.type || '',
+        list: [],
+        showData: [],
+        buyCourseDialog: false,
+        showExample: false,
+        showImgDialog: false,
+        buyForm:{marks:''},
+        imgUrl:'',
+        qrcodeUrl: "",
+        outTradeNo: "",
+        courseFee: 0,
+        title: '',
+        timer: null,
+        tickCount: 0,
+        listLoading: false,
+        loginDialog: false,
+        isLoginOk: false,
+        media: {},
+        exampleImg: exampleImg,
+        errorImg: 'this.src="' + require('../../../assets/images/no-data_hash5abcd2ef62.png') + '"'
+      };
     },
-    tickTimer() {
-      if (this.tickCount > 30) {
-        if (this.timer) window.clearInterval(this.timer);
-        this.qrcode = false;
-      }
-      let outTradeNo = this.outTradeNo;
-      httpServer("weixin.iswxPay", { outTradeNo }).then((res) => {
-        if (res.code == 200) {
-          if (!!res.data) {
-            if (this.timer) window.clearInterval(this.timer);
-            MessageBox("支付成功", "提示", {
-              confirmButtonText: "确定",
-              showClose: true,
-              type: "sucess",
-            });
-            this.qrcode = false;
-            this.getData();
-          }
-        }
-      });
+    computed: {
+      ...mapGetters("user", ["typeList", "userInfo"])
     },
-    closeDialog() {
-      if (this.timer) window.clearInterval(this.timer);
+    components: {
+      unLogin,
+      DoUpload
     },
-    getData() {
-      let param = {
-        size: this.size,
-        type: this.type,
-        from: (this.page - 1) * this.size
+    filters: {
+      dateFilter(val) {
+        return parseTime(val, '{y}-{m}-{d}')
       }
-      httpServer("course.getcoursemarket", param).then((res) => {
-        if( res.code == 200){
-          this.list = res.data.list;
-          this.total = res.data.total;
-        }
-      });
     },
-    gotoDetail(courseId) {
-      this.$router.push(`/main/course/${courseId}`);
-    },
-    goPay(index) {
-      let item = this.list[index];
-      httpServer("weixin.DoWxpay", { courseId: item.course_id }).then((res) => {
-        if (res.code == 200) {
-          let { outTradeNo, showUrl,fee } = res.data;
-          this.qrcode = true;
-          this.qrcodeUrl = showUrl;
-          this.courseFee = fee
-          this.outTradeNo = outTradeNo;
-          this.title = '购买课程'+ item.name
-          this.initTimer();
-        }
-      });
+    watch: {
+      type(val) {
+        this.getData()
+      }
     },
-    gotoPlay( courseId ){
-      this.$router.push(`/center/class/train`);
+    beforeMount() {
+      if (this.typeList.length > 0) {
+        this.type = this.typeList[0].name
+        this.getData()
+      }
     },
-    handleCurrentChange(page){
-      this.page = page;
-      this.getData()
+    beforeDestroy() {
+      if (this.timer) window.clearInterval(this.timer);
     },
-    login( param ){
-      httpServer("Auth.LoginStudy" , param).then( res => {
-        if(res.code==200){
-          let { nickname, token, uid } = res.data;
-          localStorage.nickname = nickname;
-          localStorage.token = token;
-          localStorage.uid = uid
-          this.user = { nickname, token, uid };
-          this.loginOk = true
-          this.loginDialog = false
+    methods: {
+      showImg( url ){
+        if( !url) return;
+        this.imgUrl = url;
+        this.showImgDialog = true;
+      },
+      closeDialog() {
+        if (this.timer) window.clearInterval(this.timer);
+      },
+      onLoad(e) {
+        const img = e.target;
+        let width = 0;
+        if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
+            width = img.width + 40;
         }
-      })
-     }
-  },
-};
+        this.width = width + "px";
+      },
+      getData() {
+        let param = {
+          size: this.size,
+          type: this.type,
+          from: (this.page - 1) * this.size
+        }
+        httpServer("course.getcoursemarket", param).then((res) => {
+          if (res.code == 200) {
+            this.list = res.data.list;
+            this.total = res.data.total;
+          }
+        });
+      },
+      buyCourse(){
+        let {marks, buyImg, course_id} = this.buyForm;
+        console.log( this.buyForm )
+        let param = {marks, buyImg, courseId:course_id}
+        httpServer("course.buyCourse", param).then((res) => {
+          if (res.code == 200) {
+            this.$message.successMsg("申请购买成功", 1);
+            this.buyForm.temp.buyImg = this.buyForm.buyImg
+            this.buyForm.temp.marks = this.buyForm.marks
+            this.buyCourseDialog = false
+          }
+        });
+      },
+      gotoDetail(courseId) {
+        this.$router.push(`/main/course/${courseId}`);
+      },
+      uploadBuyImg( url ){
+        this.buyForm.buyImg = url;
+      },
+      goPay(index) {
+        let item = this.list[index];
+        this.buyForm = Object.assign({}, item);
+        this.buyForm.temp= item;
+        httpServer("weixin.docheckpay", {
+          courseId: item.course_id
+        }).then((res) => {
+          if (res.code == 200) {
+            this.buyCourseDialog = true;
+          }
+        });
+      },
+      gotoPlay(courseId) {
+        this.$router.push(`/center/class/train`);
+      },
+      handleCurrentChange(page) {
+        this.page = page;
+        this.getData()
+      },
+      login(param) {
+        httpServer("Auth.LoginStudy", param).then(res => {
+          if (res.code == 200) {
+            let {
+              nickname,
+              token,
+              uid
+            } = res.data;
+            localStorage.nickname = nickname;
+            localStorage.token = token;
+            localStorage.uid = uid
+            this.user = {
+              nickname,
+              token,
+              uid
+            };
+            this.loginOk = true
+            this.loginDialog = false
+          }
+        })
+      }
+    },
+  };
 </script>
 <style>
   @import "../../../assets/css/content.css";
   @import "../../../assets/css/course.css";
   @import url("./index.css");
+
+  .buyForm-title {
+    width: 90px;
+    padding: 2px;
+    text-align: center;
+  }
 </style>

src/containers/center/myOrder/index.vue

@@ -9,6 +9,12 @@
       <div  class="ng-scope">
 
         <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
+          
+          <el-table-column label="交易订单" >
+            <template slot-scope="{row, $index}">
+              <span>{{row.id}}</span>
+            </template>
+          </el-table-column>
           <el-table-column label="培训内容" >
             <template slot-scope="{row, $index}">
               <span>{{row.name}}</span>
@@ -23,25 +29,21 @@
 
           <el-table-column label="学时">
             <template slot-scope="{row, $index}">
-              <span>{{row.xs/10}}</span>
+              <span>{{row.totalXs/10}}</span>
             </template>
           </el-table-column>
 
           <el-table-column label="金额(元)">
             <template slot-scope="{row}">
-              <span>{{ row.totalFee|money }} </span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="实付款(元)">
-            <template slot-scope="{row}">
-              <span>{{ row.payFee|money }}</span>
+              <span>{{ row.fee|money }} </span>
             </template>
           </el-table-column>
 
           <el-table-column label="订单状态">
             <template slot-scope="{row}">
-              <span>{{ row| payStatus }}</span>
+              <span v-if="row.isPay==1">支付完成</span>
+              <span v-if="row.isPay==0">支付中</span>
+              <span v-if="row.isPay==2">申请驳回</span>
             </template>
           </el-table-column>
         </el-table>
@@ -98,7 +100,7 @@
     methods: {
       getData() {
         let param = {from: (this.page - 1) * this.size,size:this.size}
-        httpServer('course.getPayCourseList', param).then(({
+        httpServer('course.GetSmPayCourseList', param).then(({
           data,
           code
         }) => {