TelpoH5FrontendWeb/src/views/alipay-dealers/AlipayFormDealers.vue

<!--
 * @Date: 2022-01-19 16:53:16
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-04-13 14:26:06
 * @FilePath: \AntpayFrontEnd\src\views\alipay-dealers\AlipayFormDealers.vue
 * @description: 表单信息录入
-->
<template>
    <div class="form-container">
        <!-- 头部 -->
        <div class="form-header pos-flex-cen">
            <van-image radius="10"  :src="goodsData.imgPath" @click="onPreview"></van-image>
        </div>
        <!-- 中部表单 -->
        <div class="form-body pos-flex-cen">
            <div class="tips">
                <span class="font-red font-16"><van-icon name="warning" size="15" color="#1989fa" />友情提醒：</span>此处填写的联系电话，必须与“随手精灵0元购”下单时填写的电话为同一个。
            </div>
           <van-form>
               <van-field
                    v-model="form.schoolName"
                    v-if="false"
                    name="学校名称"
                    label="学校名称:"
                    required
                    maxlength="50"
                    left-icon="wap-home-o"
                    clearable
                    :rules="[{ required: true, message: '请填写学校名称' }]"
                />
                <van-field
                    v-model="form.className"
                    v-if="false"
                    name="年级班级"
                    label="年级班级:"
                    required
                    maxlength="20"
                    left-icon="description"
                    clearable
                    :rules="[{ required: true, message: '请填写年级班级' }]"
                />
                <van-field
                    v-model="form.studentName"
                    v-if="false"
                    name="学生姓名"
                    label="学生姓名:"
                    required
                    maxlength="10"
                    left-icon="manager-o"
                    clearable
                    :rules="[{ required: true, message: '请填写学生姓名' }]"
                />
                <van-field
                    v-model="form.parentName"
                    v-if="false"
                    name="家长姓名"
                    label="家长姓名:"
                    required
                    maxlength="10"
                    left-icon="friends-o"
                    clearable
                    :rules="[{ required: true, message: '请填写家长姓名' }]"
                />

                <van-field
                    v-model="form.contactsManName"
                    v-if="true"
                    name="联系人"
                    label="联系人:"
                    required
                    maxlength="10"
                    left-icon="contact"
                    clearable
                    :rules="[{ required: true, message: '请填写联系人' }]"
                />
                <van-field
                    v-model="form.contactsTelephone"
                    v-if="true"
                    name="联系电话"
                    label="联系电话:"
                    required
                    maxlength="11"
                    left-icon="phone-o"
                    clearable
                    :rules="[{ required: true, message: '请填写联系电话' }]"
                />


                <van-field
                    v-model="form.familyNumber"
                    v-if="false"
                    type="textarea"
                    :autosize="true"
                    name="亲情号码"
                    label="亲情号码:"
                    placeholder="每个亲情号码用 , 隔开,最多可支持4个"
                    required
                    maxlength="50"
                    left-icon="phone-circle-o"
                    clearable
                    :rules="[{ required: true, message: '请填写亲情号码' }]"
                />

                <van-field
                    v-model="form.studentCard"
                    v-if="false"
                    name="学生身份证"
                    label="学生身份证:"
                    placeholder="学生身份证"
                    required
                    maxlength="20"
                    left-icon="idcard"
                    clearable
                    :rules="[{ required: true, message: '请填写学生身份证' }]"
                />
                <van-field
                    v-model="form.receivingAddress"
                    v-if="false"
                    name="收货地址"
                    label="收货地址:"
                    type="textarea"
                    :autosize="{ maxHeight: 100, minHeight: 25 }"
                    required
                    maxlength="50"
                    left-icon="location-o"
                    clearable
                    :rules="[{ required: true, message: '请填写收货地址' }]"
                >
                </van-field>
                <van-cell :center="true" v-if="false">
                   <div class="switch-address ">
                       <div class="left"><van-switch v-model="checked" /></div>
                       <div class="rigth"><van-icon name="warning" color="#1989fa"/><span>点击切换到商家配送</span></div>
                   </div>
                </van-cell>
            </van-form>
        </div>
        <!-- 底部按钮 -->
        <div class="form-footer">
            <div class="know-tips">
                <p class="font-red font-big"><van-icon name="warning" size="15" color="#1989fa" /><span class="font-16">友情提醒：</span></p>
                <p>每月从您的支付宝余额扣除{{(goodsData.price / goodsData.count).toFixed(2)}}元</p>
                <p>即将从您的余额扣除{{goodsData.price}}元</p>
            </div>
            <van-button  :disabled="!canSubmit" block   @click="onSubmit"><span class="font-white">{{submitText}}</span></van-button>
        </div>
    </div>
</template>

<script>
import { APIAlipay } from "../../api/alipay";
/* import { IMAGE_URL } from '../../config/models'; */
export default {
  name:'alipay-form',
  data(){
   return {
       goodsData: {
           imgPath: '' || require('@/assets/img/dealers_form_banner.jpg'),
           price: JSON.parse(this.$route.query.price) || '',
           count: JSON.parse(this.$route.query.count) || 24,
           isAmountShow: '',
           mainTitle: '',
           title: '4G电子学生证资费套餐开通服务协议',
       }, //接收从首页传过来的数据
       form: {
           studentName: '',
           parentName: '',
           schoolName: '',
           className: '',
           studentCard: '',
           receivingAddress: '到店自提',
           contactsManName: '',
           contactsTelephone: '',
       }, //输入的表单数据
       alipayForm: '', //接收支付宝接口返回的表单
       submitText: '办理支付宝分期业务', //submit标题
       Imgshow: false, //相片预览
       images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
      ], //预览图片数组
      canSubmit: true, //是否可以提交， 默认false
      checked: false, //地址选择开关

   }
  },
  created() {
      this.getGoodsDetails();

  },
  methods: {
    // 根据商品编号获取商品详情
    getGoodsDetails() {
        APIAlipay.getGoodsDetails(this.$store.getters.goodsNo, this.$store.getters.userId)
            .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.isOld = good.descriptionText === '' ? true : false;
                     // 商品名称
                     this.goodsData.mainTitle = good.mainTitle;
                    // 是否显示金额总数, todo 后期需从接口获取
                    /* this.goodsData.isAmountShow = JSON.parse(this.$route.query.isAmountShow); */
                }
            })
    },
    // 办理支付宝分期业务表单校验通过后
      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("表单输入不完整!");
    },
    // 图片预览
    onChange() {

    },
    // 点击图片预览大图
    onPreview() {
        this.Imgshow = true;
    }
  }
}
</script>
<style lang="scss">
    .van-form {
        overflow: scroll;
        border-radius: 10px;
    }
</style>
<style scoped lang="scss">
.form-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 10px;
    .form-header {
        height: 45vh;
        width: 100%;
        background-color: sandybrown;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        box-shadow: rgb(38, 57, 77) 0px 10px 20px -10px;
        background: linear-gradient(to bottom right, rgb(253, 198, 232), 60%, rgba(162, 94, 207, 0.952));
        .van-image {
            flex: 1;
            width: 100%;
        }
    }
    .form-body {
        flex: 1;
        width: 100%;
        overflow: scroll;
        margin: 20px 0 10px 0;
       /*  box-shadow: rgb(38, 57, 77) 0px 10px 20px -10px; */
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* background: linear-gradient(to bottom right, rgb(154, 213, 252), 40%, rgb(96, 141, 238)); */
        /* background: linear-gradient(to bottom right, rgb(253, 198, 232), 40%, rgb(165, 108, 211)); */
        .tips {
            height: 60px;
            width: 100%;
            padding: 0 20px 20px 20px;
            line-height: 20px;
            text-align: left;

        }
        .switch-address {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .rigth {
                padding-left: 10px;
            }
        }
    }
    .form-footer {
        height: 20vh;
        width: 100%;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items:flex-start;
        flex-direction: column;
        .know-tips {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            margin-bottom: 10px;
            border-radius: 10px;
            p {
                padding: 5px;
            }
        }
        .van-button {
            background: linear-gradient(to bottom right, rgb(154, 213, 252), 40%, rgb(96, 141, 238));
        }
    }
}
</style>