TelpoH5FrontendWeb/src/views/AliPayForm.vue

<!--
 * @Date: 2022-01-19 16:53:16
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-03-04 11:08:17
 * @FilePath: \AntpayFrontEnd\src\views\AliPayForm.vue
 * @description: 春雨个性化表单
-->
<template>
    <div class="form-container">
        <!-- 头部 -->
        <div class="form-header">
            <div class="img-left">
                <van-image :src="goodsData.imgPath" height="120"></van-image>
            </div>
            <div class="content-right">
                <p>
                    <strong>套餐名字:</strong>
                </p>
                <p>{{goodsData.mainTitle}}</p>
                <p>
                    <strong>月套餐费:</strong>
                </p>
                <p>
                    <span>￥{{ (goodsData.price/goodsData.count).toFixed(2) }}</span> x
                    <span>{{goodsData.count}}期</span>
                    <span v-show="goodsData.isAmountShow">=￥{{goodsData.price}}</span>
                </p>
            </div>
        </div>
        <!-- 中部表单 -->
        <div class="form-body">
            <van-form @submit="onSubmit" @failed="onFailed">
                <div class="form-box">
                    <van-field
                        v-model="form.phoneNumber"
                        name="phoneNumber"
                        label="电话"
                        type="tel"
                        placeholder="必填"
                        maxlength="11"
                        required
                        clearable
                        :rules="[{ required: true, message: '请填写电话' }]"
                    />
                    <van-field
                        v-model="form.schoolName"
                        name="schoolName"
                        label="学校"
                        placeholder="必填"
                        maxlength="30"
                        required
                        clearable
                        :rules="[{ required: true, message: '请填写学校' }]"
                    />
                    <van-field
                        v-model="form.className"
                        name="className"
                        label="班级"
                        placeholder="必填"
                        maxlength="10"
                        required
                        clearable
                        :rules="[{ required: true, message: '请填写班级' }]"
                    />
                    <van-field
                        v-model="form.userName"
                        name="userName"
                        label="学生"
                        placeholder="必填"
                        maxlength="10"
                        required
                        clearable
                        :rules="[{ required: true, message: '请填写学生' }]"
                    />
                </div>
                <!-- '请知悉' 提示, -->
                <div class="know-tips">
                    <h5>请知悉!</h5>
                    <p>点击以下按钮,启动支付宝页面"立即支付"</p>
                    <p>成功后,将分期每月从你的余额扣{{ (goodsData.price/goodsData.count).toFixed(2) }}元</p>
                </div>
                <div class="form-footer">
                    <van-button
                        native-type="onSubmit"
                    >{{submitText}}</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { APIAlipay } from "../api/alipay";
import { IMAGE_URL } from '../config/models';
export default {
  name:'alipay-form',
  data(){
   return {
       goodsData: {
           imgPath: '',
           price: null,
           count: null,
           isAmountShow: '',
           mainTitle: '',
           title: '4G电子学生证资费套餐开通服务协议',
       }, //接收从首页传过来的数据
       form: {
           phoneNumber: '',
           schoolName: '',
           className: '',
           userName: '',
           deviceImei: ''
       }, //输入的表单数据
       alipayForm: '', //接收支付宝接口返回的表单
       submitText: '办理支付宝分期业务', //submit标题
   }
  },
  mounted() {
      this.getGoodsDetails();

  },
  methods: {
    // 根据商品编号获取商品详情
    getGoodsDetails() {
        APIAlipay.getGoodsDetails(this.$store.getters.goodsNo)
            .then(res => {
                if(res.data.code === 20000) {
                    let good = res.data.data.goods;
                    console.log("good", good);
                    // 图片路径
                    this.goodsData.imgPath = IMAGE_URL[ process.env.NODE_ENV ] + good.goodsImg;
                    // 价格
                    this.goodsData.price = good.price;
                    // 是否是老用户
                    this.isOld = good.descriptionText === '' ? true : false;
                     // 商品名称
                     this.goodsData.mainTitle = good.mainTitle;
                    // 分期数
                    let count = good.periodizationJson.substring(1, good.periodizationJson.length - 1).split(',');
                    // 是否显示金额总数, todo 后期需从接口获取
                    this.goodsData.isAmountShow = JSON.parse(this.$route.query.isAmountShow);
                    this.goodsData.count = Math.max(...count);
                    this.goodsData.goodDefCount = Math.max(...count).toString();
                }
            })
    },
    // 办理支付宝分期业务表单校验通过后
      onSubmit() {
        let reg = /^1[3456789]\d{9}$/; //手机号码正则验证
        if(!reg.test(this.form.phoneNumber)) {
            this.$notify({
                message: '请输入正确的手机号码',
                type: 'warning',
                duration: 1500
            })
        } else {
            let reqBody = {
                username: this.form.userName,
                deviceImei: this.form.deviceImei === '' ? '123' : this.form.deviceImei,
                schoolName: this.form.schoolName,
                className: this.form.className,
                phoneNumber: this.form.phoneNumber,
                periodizationNum: Number(this.goodsData.count),
                goodsNo: this.$store.getters.goodsNo,
                alipayStateType: Number(this.goodsData.payType),
                userId: this.$store.getters.userId,
            }
            APIAlipay.getAlipayForm(reqBody)
                .then(res => {
                    this.alipayForm = res.data;
                    this.$store.commit('price', Number(this.goodsData.price));
                    this.$store.commit('count', Number(this.goodsData.count));
                    // 跳转到一个中转页 form,再通过这个中转页来调起支付宝的收银台
                    this.$router.push({path: 'redirect', query: {alipayForm: this.alipayForm}});
                })
                .catch(error => {
                    console.log(error);
                })
        }
      },
    //   表单不通过时
    onFailed() {
        console.log("表单输入不完整!");
    },
  }
}
</script>

<style scoped lang="scss">
.form-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* padding: 5px;
        border-radius: 20px; */
    background-color: #f7f8fa;
    .form-header {
        height: 25vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
            rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        background-color: rgba(235, 233, 229, 0.726);
        .img-left {
            width: 120px;
        }
        .content-right {
            flex: 1;
            p {
                font-size: 14px;
                text-align: left;
                padding: 5px 10px;
                strong {
                    text-align: left;
                }
            }
        }
    }
    .form-body {
        flex: 1;
        position: relative;
        overflow: scroll;
        /* padding: 10px; */
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
            rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        .know-tips {
            height: 120px;
            width: 100%;
            padding: 10px;
            h5 {
                font-size: 16px;
                text-align: left;
                padding: 5px;
                color: red;
            }
            p {
                font-size: 14px;
                padding: 5px;
                text-align: left;
            }
        }
    }
    .form-footer {
        height: 15vh;
        width: 100%;
        position: absolute;
        padding: 10px;
        bottom: 10px;
        left: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        .van-button {
            height: 40px;
            background-color: #1989fa;
            color: white;
            border-radius: 5px;
            &.notSubmit {
                background-color: rgba(150, 150, 146, 0.904);
            }
        }
    }
}
</style>