'normal'

src/containers/center/market/index.vue

@@ -17,7 +17,6 @@
         </el-col>
       </el-row>
 
-
       <ul class="m-course-list clear mt10 classlist" v-if="total>0">
         <li v-for="(item,index) in list" :key="item.course_id" class="pt-sola mt20 pb10">
           <div>
@@ -25,234 +24,447 @@
             <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 =='' && item.payNo == ''">
+                  还未购买
+                </span>
+                <span v-else-if="item.is_pay==0" style="background-color: orange;">
+                  等待审核
+                </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 class="ui-btn btn-o">
-                  {{item.can_buy?'购买课程':'开通课程'}}
-                  </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"  v-if="item.can_buy">
-                  <span class="p-ico c5"></span> ￥{{item.fee/100}}元
-               </p>
-               <p class="w2" >
-                 <span class="p-ico c3"></span> {{item.xs/10}}学时
-               </p>
+              <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>
             </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="title"
-      class="fc tc"
-      :visible.sync="qrcode"
-      width="500px"
-      :append-to-body="true"
-      @close="closeDialog"
-    >
-      <div class="qrcode">
-        <img :src="qrcodeUrl" />
-        <div class="notice">{{notice}}</div>
-      </div>
+    <el-dialog title="申请开通课程"  :visible.sync="buyCourseDialog" :append-to-body="true" width="750px" align="center">
+      <el-form label-width="80px" label-position="right" :inline="true" :model="buyForm" status-icon :rules="rules" ref="elForm">
+        <el-row align="left">
+          <el-col :span="12" class="pl20 pr20">
+            <el-form-item lable="报考岗位" prop="courseName">
+              <label slot="label">报考岗位</label>
+              <el-input v-model="buyForm.courseName" type="text" placeholder="报考岗位" style="width: 220px;"></el-input>
+            </el-form-item>
+
+          </el-col>
+
+          <el-col :span="12" class="pl20 pr20">
+            <el-form-item lable="证书编号" prop="rzCode">
+              <label slot="label">证书编号</label>
+              <el-input v-model="buyForm.rzCode" type="text" placeholder="证书编号" style="width: 220px;"></el-input>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+         <el-row>
+          <el-col :span="24" class="pl20 pr20">
+            <el-form-item lable="备注信息" prop="marks">
+              <label slot="label">备注信息</label>
+              <el-input v-model="buyForm.marks" type="textarea" placeholder="姓名+工种名称，例：张三+土建施工员" style="width: 573px;"></el-input>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <h2 class="tc"> 本课程费用:
+            <strong style="color: red;"> {{buyForm.fee/100}} 元 </strong>
+          </h2>
+          <vue-viewer class="preview" width="150" height="150"
+           :thumb="exampleImg" :full="exampleImg">
+          </vue-viewer>
+        </el-row>
+        <el-row>
+          <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-row>
+        
+        <el-row class="tc fc mt20">
+          <el-form-item >
+            <el-button @click="buyCourseDialog=false">取 消</el-button>
+            <el-button @click="buyCourse" type="primary">确 定</el-button>
+          </el-form-item>
+        </el-row>
+
+      </el-form>
+
     </el-dialog>
 
+
+
+    <el-dialog title="承诺书" class="fc tc" :visible.sync="commitmentDialog" >
+
+        <div>
+          <div v-if="type=='继续教育'">
+            <div class="commitment-header"> 致：{{settings.study.username}} </div>
+            <div class="tl commitment">
+                {{settings.study.promise}}
+            </div>
+            <div class="commitment-footer">
+              特此诺书！
+            </div>
+          </div>
+
+          <div v-else-if="type=='新培'">
+            <div class="commitment-header"> 致：{{settings.exam.username}} </div>
+            <div class="tl commitment">
+              {{settings.exam.promise}}
+            </div>
+          </div>
+
+          <div class="tl commitment-content mt20 p10">
+            <el-radio-group v-model="isCommitment">
+              <el-row class="mt10">
+                <el-radio :label="true">本人作出上述承诺</el-radio>
+              </el-row>
+              <el-row class="mt10">
+                <el-radio :label="false">本人不作出上述承诺</el-radio>
+              </el-row>
+            </el-radio-group>
+          </div>
+
+          <span slot="footer" class="dialog-footer">
+            <el-button @click="commitmentDialog = false">取 消</el-button>
+            <el-button type="primary" :disabled="isCommitment?false:true" @click="buyCourseDialog=true">确 定</el-button>
+          </span>
+        </div>
+
+    </el-dialog>
+
+    <el-dialog append-to-body close-on-click-modal :visible.sync="showImgDialog" style="margin-top: 0px;" :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: 9,
-      total: 0,
-      type:'',
-      list: [],
-      showData: [],
-      qrcode: false,
-      qrcodeUrl: "",
-      outTradeNo: "",
-      courseFee:0,
-      title:'',
-      timer: null,
-      tickCount: 0,
-      listLoading: false,
-      loginDialog:false,
-      isLoginOk: false,
-      media:{},
-      notice:'',
-      defQrcode:require('@/assets/qrcode.jpg')
-    };
-  },
-  computed: {
-  	...mapGetters("user", ["typeList","userInfo"])
-  },
-  components:{unLogin},
-  filters:{
-    dateFilter(val) {
-      return parseTime(val, '{y}-{m}-{d}')
-    }
-  },
-  watch:{
-    type(val){
-      localStorage.setItem("@type", val)
-      this.getData()
-    }
-  },
-  created() {
-    this.type = this.$route.query.type||localStorage.getItem("@type")||'继续教育'
-    localStorage.setItem("@type", this.type)
-    if( !localStorage.uid || !localStorage.token){
-      this.loginDialog = true;
-      return;
-    }else{
-      this.isLoginOk = true;
-      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 promise from "./promise.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 settings from '@/settings.js'
+  import exampleImg from '@/assets/template.png'
+
+  import {
+    mapGetters,
+    mapActions
+  } from "vuex";
+
+  export default {
+    name: "Index",
+    data() {
+      return {
+        page: 1,
+        size: 9,
+        total: 0,
+        stage: 0,
+        isCompanyPay: 0,
+        width: "",
+        type: this.$route.query.type || '',
+        list: [],
+        showData: [],
+        isCommitment: "",
+        buyCourseDialog: false,
+        showExample: false,
+        showImgDialog: false,
+        exampleImg,
+        buyForm: {
+          marks: '',
+          rzCode: '',
+          payNo:'',
+          courseName: ''
+        },
+        settings,
+        promise,
+        imgUrl: '',
+        qrcodeUrl: "",
+        outTradeNo: "",
+        courseFee: 0,
+        title: '',
+        timer: null,
+        tickCount: 0,
+        listLoading: false,
+        loginDialog: false,
+        isLoginOk: false,
+        media: {},
+        commitmentDialog: false,
+        rules: {
+          rzCode: [{
+            required: true,
+            message: '请输入证书编号'
+          }],
+          payNo:[
+            {
+              required: true,
+              message: '请输入订单编号后六位'
+            }
+          ],
+          marks:[
+            {
+              required: true,
+              message: '请输入备注信息'
+            }
+          ],
+          email: [{
+              required: true,
+              message: '请输入有效邮箱'
+            },
+            {
+              type: 'string',
+              message: '邮箱格式不正确',
+              trigger: 'blur',
+              transform(value) {
+                if (!/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)) {
+                  return true
+                } else {}
+              }
+            }
+          ],
+          courseName: [{
+            required: true,
+            message: '请输入报考岗位'
+          }]
+        },
+        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];
-      if( item.can_buy === 0 ){
-        this.qrcode = true;
-        this.qrcodeUrl = this.defQrcode;
-        this.courseFee = item.fee
-        this.title = '【暂不支持购买】联系管理员开通'
-        this.notice = ''
-        return;
+    watch: {
+      type(val) {
+        this.page = 1
+        this.getData()
+      },
+      isCommitment(val) {
+        console.log(val)
       }
-
-      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.notice = `请注意：本课程费用￥${fee/100}元`
-          this.initTimer();
-        }
-      });
     },
-    gotoPlay( courseId ){
-      this.$router.push(`/center/class/train`);
+    beforeMount() {
+      if (!this.type && 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() {
+        if (!this.type) return;
+        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() {
+        this.$refs["elForm"].validate((valid) => {
+          if (!valid) return;
+          let {
+            marks,
+            payNo,
+            course_id,
+            courseName,
+            rzCode,
+            name,
+            email
+          } = this.buyForm;
+          if (courseName != name) {
+            this.$message.errorMsg("报考岗位有误", 1)
+            return;
+          }
+          let param = {
+            marks,
+            payNo,
+            courseId: course_id,
+            courseName,
+            rzCode,
+            email
+          }
+          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.buyForm.temp.is_pay = 0
+              this.buyForm.temp.courseName = this.buyForm.courseName;
+              this.buyForm.temp.rzCode = this.buyForm.rzCode
+              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;
+
+        // 绕开检查
+        this.stage = 2;
+        this.isCompanyPay = 0;
+        this.isCommitment=''
+        this.buyForm.rzCode = item.rzCode;
+        this.buyForm.courseName = item.courseName;
+        this.commitmentDialog = true;
+        // 检查
+        // httpServer("weixin.docheckpay", {
+        //   courseId: item.course_id
+        // }).then((res) => {
+        //   if (res.code == 200) {
+        //     this.stage = 2;
+        //     this.isCompanyPay = 0;
+        //     this.isCommitment=''
+        //     this.buyForm.rzCode = res.data.certificateNum;
+        //     this.buyForm.courseName = res.data.positionName;
+        //     this.commitmentDialog = 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;
+  }
+
+  .commitment-header {
+    font-size: 16px;
+    text-align: left;
+  }
+
+  .commitment {
+    text-indent: 30px;
+    margin-top: 20px;
+    font-size: 16px;
+    line-height: 200%;
+  }
+
+  .commitment-footer {
+    margin-top: 30px;
+    text-indent: 50px;
+    font-size: 16px;
+    text-align: left;
+  }
+
+  .commitment-content {
+    font-size: 16px;
+  }
 </style>

src/containers/center/market/promise.js

@@ -0,0 +1,23 @@
+export default {
+  'promise_plant': `根据福建省住房和城乡建设厅转发《关于加强建筑工人职业培训工作的指导意见》、
+      《福建省建筑工人职业技能培训考核工作导则》（试行）
+      和《住建部办公厅关于印发住房城乡建设行业职业工种目录的通知》、
+      闽建风貌函〔2019〕29号关于进一步推进全省城市园林绿化有关工作的通知等文件精神，
+      本人自愿选择参加三明市城市建设项目服务中心组织的建筑技术工人（园林绿化类）培训教育，
+      对报名相关条件、提交的材料及收费情况均已知晓！且所提交的材料真实有效，如有存在虚假，所导致的一切后果本人自愿承担。`,
+  'promise_other': `按照《福建省住房和城乡建设厅办公室关于住房城乡建设行业从业人员职业教育培训工作有关事项的通知》
+              （闽建办人〔2020〕3号）的要求，安管人员证书在证书有效期内参加县级以上住房和城乡建设主管部门组织的安全生产教育培训时间满24学时。
+              本人自愿选择参加三明市城市建设项目服务中心组织的安管人员（三类人员）继续教育，对报名相关条件、
+              提交的材料及收费情况均已知晓！且所提交的材料真实有效，如有存在虚假，所导致的一切后果本人自愿承担。`,
+
+  'promise_special': `根据住建部《建筑施工特种作业人员管理规定》（建质﹝2008﹞75号），
+              特种作业人员应当参加年度安全教育培训或继续教育，
+              每年不得少于24学时。本人自愿选择参加三明市城市建设项目服务中心组织的特种操作人员继续教育，
+              对报名相关条件、提交的材料及收费情况均已知晓！且所提交的材料真实有效，
+              如有存在虚假，所导致的一切后果本人自愿承担。`,
+  'promise_edu':`根据福建省住房和城乡建设厅《关于做好施工现场专业人员换发电子培训合格证相关工作的通知》（
+              闽建人函〔2021〕6号）的文件精神，施工现场专业人员符合换证条件的按要求参加不少于32学时的继续教育。
+              按照明建人才〔2021〕8号关于施工现场专业人员岗位证书继续教育的通知，
+              本人现自愿委托参加贵中心所组织的继续教育培训学习，委托培训费用_3_元/学时。`,
+
+}

src/settings.js

@@ -1,14 +1,14 @@
 module.exports = {
   title: '福建天映建设有限公司'
-  ,examBank:{
-    bankUser:'福建天映建设有限公司'
+  ,exam:{
+    username:'福建天映建设有限公司'
     ,bankName: '中国银行厦门市分行'
     ,bankNo:'414360427410'
     ,promise:'本人自愿选择参加福建天映建设有限公司组织的施工现场专业人员岗位培训，对报名相关条件、提交的材料及收费情况均已知晓！且所提交的材料真实有效，如有存在虚假，所导致的一切后果由本人承担。'
 
   }
-  ,studyBank:{
-    bankUser:'厦门友志者人力资源有限公司'
+  ,study:{
+    username:'厦门友志者人力资源有限公司'
     ,bankName: '中国建设银行厦门长青路支行'
     ,bankNo:'35150198370100001411'
     ,promise:'本人自愿选择参加福建天映建设有限公司组织的施工现场专业人员继续教育，对报名相关条件、提交的材料及收费情况均已知晓！且所提交的材料真实有效，如有存在虚假，所导致的一切后果由本人承担。'