支付页面

src/api/webApi/pay/idnex.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+//  学生卡价格列表
+export function getEcardPrices() {
+  return request({
+    url: 'front/ecard/getEcardPrices',
+    method: 'get',
+  })
+}
+
+//  验证码
+export function sendSmsNoValidation(params) {
+  return request({
+    url: 'common/shortMessage/sendSmsNoValidation',
+    method: 'get',
+    params
+  })
+}
+
+export function validateSms(params) {
+  return request({
+    url: 'common/shortMessage/validateSms',
+    method: 'get',
+    params
+  })
+}

src/views/pay/index.vue

@@ -1,13 +1,134 @@
 <template>
-  <h1>支付</h1>
+  <div style="width: 70%;margin:0 auto">
+    <div class="fx-row jc-between ai-center pd10 pt10 mb20">
+      <el-image class="pointer" @click="$router.push('/login')" :src="`${$imgBase}index/login/icon_logo_medium@2x.png`" fit="contain"
+                style="width: 152px;"></el-image>
+      <div>
+        <img class="icon16" src="../../assets/images/icon_tel2.png"/>
+        <span class="pl8">服务热线：400-1797-985</span>
+      </div>
+    </div>
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
+      <el-row :gutter="20" class="border pd20">
+        <el-col :span="12"><el-image :src="require('../../assets/images/pay_banner.png')"/></el-col>
+        <el-col :span="12">
+          <p class="f24 bold text-center">名学金榜学生卡</p>
+          <el-form-item label="价格:"><span>￥{{cardActive.price/100}}</span></el-form-item>
+          <el-form-item label="有效期:">{{cardActive.outTime}}</el-form-item>
+          <el-form-item label="入学年份:">
+            <el-button @click="cardActive = card"  :type="card.greadId == cardActive.greadId ? 'primary' : ''" v-for="card in cardList">
+              {{card.year}}
+            </el-button>
+          </el-form-item>
+          <el-form-item label="手机号:" prop="phoneNumber">
+            <el-input v-model="form.phoneNumber"></el-input>
+          </el-form-item>
+          <el-form-item label="短信验证码:" prop="captcha">
+            <div class="fx-row">
+              <el-input class="mr30" v-model="form.captcha"></el-input>
+              <el-button type="plain" @click="getCode">{{ captchaBtnText }}</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item >
+              <el-button type="primary" @click="validate">购买</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="tips">
+      <p class="f20">购卡须知</p>
+      <p>1、您将购买的是电子卡,不同的入学年份有效期和价格不同。</p>
+      <p>2、购买后系统默认激活当前的登录帐号，若忘记账号请联系客服。</p>
+      <p>3、由于产品特性，本电子卡不适用“7天无理由退换货”。</p>
+    </div>
+  </div>
 </template>
 
 <script>
+import { getEcardPrices, sendSmsNoValidation, validateSms } from '@/api/webApi/pay/idnex'
+
 export default {
-  name: 'PayIndex'
+  name: 'PayIndex',
+  created() {
+    this.getEcardPrices()
+  },
+  data() {
+    let checkPhone = (rule, value, callback) => {
+      let reg = /^1[345789]\d{9}$/
+      if (!reg.test(value)) {
+        callback(new Error('手机号格式不正确！'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      rules: {
+        //  required: true   是否必填，如不设置，则会根据校验规则自动生成
+        phoneNumber: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { type: 'number', validator: checkPhone, message: '请输入11位有效手机号号码', trigger: ['blur', 'change'] }
+        ],
+        captcha: { required: true, message: '短信验证码不能为空', trigger: 'change' },
+      },
+      form:{
+        phoneNumber:'',
+        captcha:''
+      },
+      captchaBtnText: '免费获取',
+      cardActive:{},
+      cardList:[],
+    }
+  },
+  methods:{
+    getCode() {
+      this.$refs.form.validateField('phoneNumber',(res)=>{
+        if(res == '') {
+          // 通过
+          sendSmsNoValidation({
+            mobile:this.form.phoneNumber,
+            smsType:1
+          }).then(res => {
+            if(res.code == 200) {
+              this.$message.success('发送成功,请在手机上查收')
+              // 成功60秒不让点击
+            }
+          })
+        }
+      })
+    },
+    getEcardPrices(){
+      getEcardPrices().then(res =>{
+        this.cardList = res.data
+        this.cardActive = res?.data[0]
+        console.log(res)
+      })
+    },
+    validate() {
+      this.$refs.form.validate(valid => {
+        if(!valid)return
+        validateSms({
+          mobile:this.form.phoneNumber,
+          code:this.form.captcha,
+        }).then(res => {
+          console.log(res)
+        })
+      })
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+.border{
+  border: 1px solid #e2e2e2;
+}
+>>> .el-form-item{
+  margin-bottom: 22px;
+}
+.tips{
+  padding: 20px 0;
+}
+.tips > p{
+  margin-top: 10px;
+}
 </style>