diff --git a/README.md b/README.md
index 6cac505..a9b61fe 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 15:52:30
+ * @LastEditTime: 2022-05-09 11:30:39
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: 项目说明文档
 -->
@@ -86,4 +86,9 @@ feature
 feature
 - 增加 春雨个性化定制 '@/views/chunyu/AliPayForm'
 - 增加 Checkbox 组件, '@/components/checkbox'
-- 增加 AgreementDialog 组件, '@/components/AgreementDialog'
\ No newline at end of file
+- 增加 AgreementDialog 组件, '@/components/AgreementDialog'
+
+### v1.0.3
+`2022.05.09`
+feature
+- 增加 支付宝花呗支付页面
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index ef212b3..b1fafa0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-25 16:45:37
+ * @LastEditTime: 2022-04-14 09:50:16
  * @FilePath: \AntpayFrontEnd\src\App.vue
  * @description:
 -->
@@ -43,6 +43,7 @@ export default {
     text-align: center;
     color: #2c3e50;
     height: 100vh;
-    width: 100vw;
+    width: 100%;
+    background-color: #f7f8fa;
 }
 </style>
diff --git a/src/api/alipay.js b/src/api/alipay.js
index 0450017..bee8608 100644
--- a/src/api/alipay.js
+++ b/src/api/alipay.js
@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-02-14 15:18:50
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 10:50:22
+ * @LastEditTime: 2022-04-13 17:08:21
  * @FilePath: \AntpayFrontEnd\src\api\alipay.js
  * @description: axios封装
  */
@@ -11,16 +11,19 @@ export const APIAlipay = {
     getGoodsDetails, //首页获取商品数据
     getAlipayForm, // 调起支付宝收银台
     getAlipayResult, //获取支付结果
+    getUserTemplate, //获取用户模板
+    getQRCode, //获取商品二维码图片
 };
 export default APIAlipay;
 
 // post请求
-function getGoodsDetails(goodsNo) {
+function getGoodsDetails(goodsNo, userId) {
     return request({
         url: '/api/get/goods',
         method: 'get',
         params: {
-            goodsNo
+            goodsNo,
+            userId
         },
     });
 }
@@ -40,6 +43,21 @@ function getAlipayResult(params) {
         data: params,
     });
 }
+function getUserTemplate (userId) {
+    return request({
+        url: '/api/get/goodsTemplate',
+        method: 'get',
+        params: {userId},
+    });
+}
+
+function getQRCode (userId, spuId) {
+    return request({
+        url: 'api/get/QRCodeImageUrl',
+        method: 'get',
+        params: {userId, spuId},
+    });
+}
 
 // get请求 示例
 /* function getPolygonFence(serialNo) {
diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss
new file mode 100644
index 0000000..0c463b3
--- /dev/null
+++ b/src/assets/css/public.scss
@@ -0,0 +1,42 @@
+
+
+// 公共css样式
+
+// 24号字体
+.font-24 {
+    font-size: 24px;
+}
+// 16号字体
+.font-16 {
+    font-size: 16px;
+}
+// 红色字体
+.font-red {
+    color: red;
+}
+// 蓝色字体
+.font-blue {
+    color: #1989fa;
+}
+// 白色字体
+.font-white {
+    color: #fff;
+}
+// 居中flex-column布局
+.pos-flex-cen-column {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+// 居中flex无column布局
+.pos-flex-cen {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+// 下划线
+.underline {
+    text-decoration: underline;
+}
\ No newline at end of file
diff --git a/src/assets/img/dealers_form_banner.jpg b/src/assets/img/dealers_form_banner.jpg
new file mode 100644
index 0000000..0d273ee
Binary files /dev/null and b/src/assets/img/dealers_form_banner.jpg differ
diff --git a/src/config/models.js b/src/config/models.js
index 742a8b0..9b7042a 100644
--- a/src/config/models.js
+++ b/src/config/models.js
@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 11:38:20
+ * @LastEditTime: 2022-05-09 11:30:58
  * @FilePath: \AntpayFrontEnd\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.2'; //版本号
+export const VERSION_MODEL = '1.0.3'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',
diff --git a/src/main.js b/src/main.js
index 2f14456..9102d62 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 15:00:32
+ * @LastEditTime: 2022-04-12 15:07:40
  * @FilePath: \AntpayFrontEnd\src\main.js
  * @description:
  */
@@ -38,6 +38,11 @@ import {
     Area,
     Cascader,
     Picker,
+    NoticeBar,
+    Icon,
+    ImagePreview,
+    Switch,
+    Tag,
 } from 'vant'; //按需加载vant组件
 
 Vue
@@ -67,6 +72,11 @@ Vue
     .use(Popup)
     .use(Picker)
     .use(Cascader)
+    .use(Tag)
+    .use(NoticeBar)
+    .use(Icon)
+    .use(ImagePreview)
+    .use(Switch)
     .use(Tabs);
 
 Vue.config.productionTip = false;
diff --git a/src/router/index.js b/src/router/index.js
index 22d2b63..f352ce6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-28 09:47:42
+ * @LastEditTime: 2022-04-13 11:15:53
  * @FilePath: \AntpayFrontEnd\src\router\index.js
  * @description:
  */
@@ -23,6 +23,17 @@ const routes = [
     { path: '/chunyuForm', name: 'chunyuForm', component: resolve => require(['@/views/chunyu/AliPayForm'], resolve) },
     // 组件测试页面
     { path: '/compTest', name: 'compTest', component: resolve => require(['@/views/ComponentsTest'], resolve) },
+    // 新首页
+    { path: '/index-new', name: 'index-new', component: resolve => require(['@/views/AlipayIndexNew'], resolve) },
+    { path: '/form-new', name: 'form-new', component: resolve => require(['@/views/AliPayFormNew'], resolve) },
+
+    // 分销商模式- 首页
+    { path: '/index-dealers', name: 'index-dealers', component: resolve => require(['@/views/alipay-dealers/AlipayIndexDealers'], resolve) },
+
+    // 分销商模式- 信息录入
+    { path: '/form-dealers', name: 'form-dealers', component: resolve => require(['@/views/alipay-dealers/AlipayFormDealers'], resolve) },
+
+
 
 ];
 
diff --git a/src/utils/index.js b/src/utils/index.js
index 24c2dcd..db99691 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 16:39:51
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-25 16:55:56
+ * @LastEditTime: 2022-04-13 16:22:59
  * @FilePath: \AntpayFrontEnd\src\utils\index.js
  * @description: 工具类
  */
@@ -50,3 +50,42 @@ export function isAndroid(userAgent) {
         return false;
     }
 }
+
+
+// 初始化分期数数组, 1. 如果 分数数组面 包含有 '1' 并且还有其它'12' '24'两个分期, 则把 '1'删掉
+// 2. 否则直接返回该数组
+export function intCount(array) {
+    let index = array.some(item => item === '1');
+    if( index) {
+        // 大于-1表示存在
+        let newArray = array.splice(1, 2);
+        return newArray;
+         // 存在就删除
+    } else {
+        return array;
+    }
+}
+
+
+// 通过接口返回的数组判读是否显示花呗或者支付宝，, 1. 1 12 24 都存在则支付宝花呗全都显示
+// 2. 只有 1 则 只显示支付宝
+// 3. 没有 1 则显示花呗
+export function isShowAlipay(array) {
+    let index = array.indexOf('1');
+    if(index > -1 && array.length === 1 ) {
+        return true;
+    } else if (index > -1 && array.length > 2) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+export function isShowAntpay(array) {
+    let index = array.indexOf('1');
+    if(index < 0 && array.length >= 1) {
+        return true;
+    } else {
+        return false;
+    }
+}
\ No newline at end of file
diff --git a/src/views/AliPayForm.vue b/src/views/AliPayForm.vue
index 47e9be0..da7e784 100644
--- a/src/views/AliPayForm.vue
+++ b/src/views/AliPayForm.vue
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 16:53:16
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 11:08:17
+ * @LastEditTime: 2022-04-12 15:53:34
  * @FilePath: \AntpayFrontEnd\src\views\AliPayForm.vue
  * @description: 春雨个性化表单
 -->
@@ -14,11 +14,12 @@
             </div>
             <div class="content-right">
                 <p>
-                    <strong>套餐名字:</strong>
+                    <span>套餐名字:</span>
                 </p>
                 <p>{{goodsData.mainTitle}}</p>
+
                 <p>
-                    <strong>月套餐费:</strong>
+                    <span>月套餐费:</span>
                 </p>
                 <p>
                     <span>￥{{ (goodsData.price/goodsData.count).toFixed(2) }}</span> x
diff --git a/src/views/AliPayFormNew.vue b/src/views/AliPayFormNew.vue
new file mode 100644
index 0000000..68fcf68
--- /dev/null
+++ b/src/views/AliPayFormNew.vue
@@ -0,0 +1,425 @@
+<!--
+ * @Date: 2022-01-19 16:53:16
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-05-06 15:18:53
+ * @FilePath: \AntpayFrontEnd\src\views\AliPayFormNew.vue
+ * @description: 表单信息录入
+-->
+<template>
+    <div class="form-container">
+        <!-- 头部 -->
+        <div class="form-header">
+            <div class="img-left">
+                <van-image :src="goods.imgPath" height="120" @click="onPreview"></van-image>
+                <van-image-preview v-model="Imgshow" :images="images" @change="onChange"></van-image-preview>
+            </div>
+            <div class="content-right">
+                <p>
+                    <span>套餐名字:</span>
+                </p>
+                <p>{{goods.mainTitle}}</p>
+                <p>
+                    <span>{{ goods.amountTitle }}:</span>
+                </p>
+                <p v-if="goods.isAntPay">
+                    <span class="font-red font-24">￥{{ (goods.price/goods.count).toFixed(2) }}</span> x
+                    <span>{{goods.count}}期</span>
+                    <span v-show="userTemplate.isShowMoney">=￥{{goods.price}}</span>
+                </p>
+                <p v-if="!goods.isAntPay">
+                    <span class="font-red font-24">￥{{ goods.price }}</span>
+                </p>
+            </div>
+        </div>
+        <!-- 中部表单 -->
+        <div class="form-body pos-flex-cen">
+            <van-form ref="form" >
+                <van-field
+                    v-model="form.schoolName"
+                    v-if="userTemplate.isShowSchool"
+                    name="学校名称"
+                    label="学校名称:"
+                    required
+                    maxlength="50"
+                    left-icon="wap-home-o"
+                    clearable
+                    :rules="[{ required: true, message: '请填写学校名称' }]"
+                />
+                <van-field
+                    v-model="form.className"
+                    v-if="userTemplate.isShowClass"
+                    name="年级班级"
+                    label="年级班级:"
+                    required
+                    maxlength="20"
+                    left-icon="description"
+                    clearable
+                    :rules="[{ required: true, message: '请填写年级班级' }]"
+                />
+                <van-field
+                    v-model="form.studentName"
+                    v-if="userTemplate.isShowStudentName"
+                    name="学生姓名"
+                    label="学生姓名:"
+                    required
+                    maxlength="10"
+                    left-icon="manager-o"
+                    clearable
+                    :rules="[{ required: true, message: '请填写学生姓名' }]"
+                />
+                <van-field
+                    v-model="form.parentName"
+                    v-if="userTemplate.isShowParentName"
+                    name="家长姓名"
+                    label="家长姓名:"
+                    required
+                    maxlength="10"
+                    left-icon="friends-o"
+                    clearable
+                    :rules="[{ required: true, message: '请填写家长姓名' }]"
+                />
+
+                <van-field
+                    v-model="form.contactsManName"
+                    v-if="userTemplate.isShowContactsManName"
+                    name="联系人"
+                    label="联系人:"
+                    required
+                    maxlength="10"
+                    left-icon="contact"
+                    clearable
+                    :rules="[{ required: true, message: '请填写联系人' }]"
+                />
+                <van-field
+                    v-model="form.contactsTelephone"
+                    v-if="userTemplate.isShowContactsTelephone"
+                    name="联系电话"
+                    label="联系电话:"
+                    required
+                    maxlength="11"
+                    left-icon="phone-o"
+                    clearable
+                    :rules="[{ required: true, message: '请填写联系电话' }]"
+                />
+
+                <van-field
+                    v-model="form.familyNumber"
+                    v-if="userTemplate.isShowFamilyNumber"
+                    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="userTemplate.isShowStudentCard"
+                    name="学生身份证"
+                    label="学生身份证:"
+                    required
+                    maxlength="20"
+                    left-icon="idcard"
+                    clearable
+                    :rules="[{ required: true, message: '请填写学生身份证' }]"
+                />
+                <van-field
+                    v-model="form.receivingAddress"
+                    v-if="userTemplate.isShowReceivingAddress"
+                    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="userTemplate.isShowReceivingAddress">
+                    <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 v-if="goods.isAntPay">每月从您的支付宝余额扣除{{(goods.price / goods.count).toFixed(2)}}元</p>
+                <p v-if="!goods.isAntPay">即将从您的余额扣除{{goods.price}}元</p>
+            </div>
+            <van-button :class="['van-button', {notSubmit: !canSubmit }]" block @click="onSubmit">
+                <span class="font-white">{{submitText}}</span>
+            </van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { APIAlipay } from "../api/alipay";
+import { isNotNull } from "../utils/index";
+import { IMAGE_URL } from '../config/models';
+export default {
+  name:'alipay-form',
+  data(){
+   return {
+       goods: {
+           imgPath: '',
+           price: '',
+           count: '',
+           type: '',
+           userId: '',
+           goodsNo: '',
+           isAmountShow: '',
+           mainTitle: '',
+           amountTitle: '',
+           isAntPay: null,
+       }, //接收从首页传过来的数据
+       form: {
+           studentName: '',
+           parentName: '',
+           schoolName: '',
+           className: '',
+           studentCard: '',
+           receivingAddress: '到店自提',
+           contactsManName: '',
+           contactsTelephone: '',
+       }, //输入的表单数据
+       userTemplate: {
+           isShowMoney: null,
+           isShowClass: true,
+           isShowContactsManName: null,
+           isShowContactsTelephone: true,
+           isShowFamilyNumber: null,
+           isShowParentName: null,
+           isShowReceivingAddress: null,
+           isShowSchool: true,
+           isShowStudentCard: null,
+           isShowStudentName: true,
+       },
+       alipayForm: '', //接收支付宝接口返回的表单
+       submitText: '办理支付宝分期业务', //submit标题
+       Imgshow: false, //相片预览
+       images: [
+        'https://img01.yzcdn.cn/vant/apple-1.jpg',
+      ], //预览图片数组
+      canSubmit: false, //是否可以提交， 默认false
+      checked: false, //地址选择开关
+
+   }
+  },
+  created() {
+      this.getGoodsDetails();
+      this.initQueryData();
+      this.getUserTemplate();
+  },
+  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.goods.imgPath = IMAGE_URL[ process.env.NODE_ENV ] + good.goodsImg;
+                    // 价格
+                    // 是否是老用户
+                    this.isOld = good.descriptionText === '' ? true : false;
+                     // 商品名称
+                     this.goods.mainTitle = good.mainTitle;
+                    // 是否显示金额总数, todo 后期需从接口获取
+                    /* this.goods.isAmountShow = JSON.parse(this.$route.query.isAmountShow); */
+                }
+            })
+    },
+    // initQueryData 初始化路由传过来的数据
+    initQueryData() {
+        let query = this.$route.query;
+        this.goods.price = query.price;
+        this.goods.count = JSON.parse(query.count);
+        this.goods.type = JSON.parse(query.type);
+        this.goods.mainTitle = query.mainTitle;
+        this.goods.userId = JSON.parse(query.userId);
+        this.goods.goodsNo = JSON.parse(query.goodsNo);
+        this.goods.amountTitle = JSON.parse(query.type) === 2 ? '月套餐费' : '支付总额';
+        this.goods.isAntPay = JSON.parse(query.type) === 2;
+    },
+    // getUserTemplate 根据用户id 获取用户模板信息 判断页面组件是否需要渲染
+    getUserTemplate() {
+        APIAlipay.getUserTemplate(this.goods.userId)
+            .then(res => {
+                if(res.data.code === 20000) {
+                    let data = res.data.data.goodsTemplate;
+                    console.log("用户模板", data);
+                    if(isNotNull(data)) {
+                        this.userTemplate.isShowMoney = data.isShowMoney === 1;
+                        this.userTemplate.isShowClass = data.isShowClass === 1;
+                        this.userTemplate.isShowContactsManName = data.isShowContactsManName === 1;
+                        this.userTemplate.isShowContactsTelephone = data.isShowContactsTelephone === 1;
+                        this.userTemplate.isShowFamilyNumber = data.isShowFamilyNumber === 1;
+                        this.userTemplate.isShowReceivingAddress = data.isShowReceivingAddress === 1;
+                        this.userTemplate.isShowSchool = data.isShowSchool === 1;
+                        this.userTemplate.isShowStudentCard = data.isShowStudentCard === 1;
+                        this.userTemplate.isShowStudentName = data.isShowStudentName === 1;
+                    }
+                }
+            })
+    },
+    // 办理支付宝分期业务表单校验通过后
+      onSubmit() {
+        if (!this.isCanSubmit(this.form)) {return};
+        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.goods.count),
+                goodsNo: this.$store.getters.goodsNo,
+                alipayStateType: Number(this.goods.payType),
+                userId: this.$store.getters.userId,
+            }
+            APIAlipay.getAlipayForm(reqBody)
+                .then(res => {
+                    this.alipayForm = res.data;
+                    this.$store.commit('price', Number(this.goods.price));
+                    this.$store.commit('count', Number(this.goods.count));
+                    // 跳转到一个中转页 form,再通过这个中转页来调起支付宝的收银台
+                    this.$router.push({path: 'redirect', query: {alipayForm: this.alipayForm}});
+                })
+                .catch(error => {
+                    console.log(error);
+                })
+        }
+      },
+    //   表单不通过时
+    isCanSubmit(form) {
+        console.log(form);
+    },
+    // 图片预览
+    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: 20px;
+    .form-header {
+        height: 25vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px 0 10px 10px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        box-shadow: rgb(38, 57, 77) 0px 10px 20px -10px;
+        background-color: #fff;
+        /*  background: linear-gradient(to bottom right, rgb(96, 141, 238), 60%, rgb(154, 213, 252)); */
+        .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;
+        width: 100%;
+        overflow: scroll;
+        margin: 20px 0 10px 0;
+        padding: 0;
+        box-shadow: rgb(38, 57, 77) 0px 10px 20px -10px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        background-color: #fafafa;
+        /* background: linear-gradient(to bottom right, rgb(154, 213, 252), 70%, rgb(96, 141, 238)); */
+        .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: flex-end;
+        align-items: center;
+        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-color: #1989fa;
+            color: white;
+            border: none;
+            &.notSubmit {
+                background-color: rgb(150, 196, 241);
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/AliPayIndex.vue b/src/views/AliPayIndex.vue
index a365721..515cb1c 100644
--- a/src/views/AliPayIndex.vue
+++ b/src/views/AliPayIndex.vue
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 16:52:21
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 11:19:26
+ * @LastEditTime: 2022-04-08 10:28:58
  * @FilePath: \AntpayFrontEnd\src\views\AliPayIndex.vue
  * @description:
 -->
@@ -145,7 +145,7 @@ export default {
        antpayIconpath: require('../assets/antpay.png'), //花呗支付图片
        alipayIconPath: require('../assets/alipay.png'), //支付宝图片
        checked: false, //是否已经勾选协议
-       isAlipayShow: false, //是否显示支付宝选项
+       isAlipayShow: true, //是否显示支付宝选项
        goodsNo: '', //商品id
        countList: null, //分期数数组
        isAmountShow: true, //是否显示总数, 默认显示,部分客户不需要显示则false
@@ -199,7 +199,7 @@ export default {
             this.isNewCustom = false;
             this.isAmountShow = true;
         } else if (goodsNo === '889') {
-            this.isChunyu = true;
+            this.isChunyu = false;
             this.submitText = '下一步';
             this.switchPayType = '支付方案'
         }
@@ -357,15 +357,15 @@ export default {
         .index-banner{
             height: 40vh;
             width: 100vw;
-            padding: 5px 5px 0 5px;
+            /* padding: 5px 5px 0 5px; */
             .img-contanier {
-                height: calc(40vh - 5px);
-                width: calc(100vw - 10px);
+                height: 40vh;
+                width: 100vw;
             }
         }
         .index-body {
             flex: 1;
-            margin: 0 5px 5px 5px;
+           /*  margin: 0 5px 5px 5px; */
             padding: 0 10px 10px 10px;
             overflow: scroll;
             box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
diff --git a/src/views/AliPayResult.vue b/src/views/AliPayResult.vue
index 1bb37f3..f86673a 100644
--- a/src/views/AliPayResult.vue
+++ b/src/views/AliPayResult.vue
@@ -1,31 +1,31 @@
 <!--
  * @Date: 2022-01-19 16:55:03
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 14:11:16
+ * @LastEditTime: 2022-04-12 18:16:42
  * @FilePath: \AntpayFrontEnd\src\views\AliPayResult.vue
  * @description:
  注意：本地调试需要手动在url添加参数
- ?tradeno='860009040228082'&outtradeno='860009040228082'
+ ?out_trade_no=2021112316151201&trade_no=2021112322001402891436965855
 -->
 
 <template>
     <div class="pay-result-container">
         <!-- 接口轮询时加载动画以及空状态 -->
         <van-empty v-show="isResultBack" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" />
-        <van-loading v-show="isResultBack" type="spinner" >数据加载中...</van-loading>
+        <van-loading v-show="isResultBack" type="spinner" color="black">获取结果中...</van-loading>
         <!-- 接口轮询完成后 -->
         <div class="pay-result-content" v-show="!isResultBack">
             <div class="result-header">
-                <h5 v-if="isPaySuccess">{{ checkSuccess.tips }}</h5>
-                <h5 v-if="isPaySuccess">{{ checkSuccess.title }}</h5>
-                <h5 v-if="!isPaySuccess">{{checkFail.tips}}</h5>
+                <p v-if="isPaySuccess" class="font-red font-24"><van-icon name="checked" color="green"/>{{ checkSuccess.tips }}</p>
+                <p v-if="isPaySuccess" class="font-red font-24"><van-icon name="checked" color="green"/>{{ checkSuccess.title }}</p>
+                <p v-if="!isPaySuccess" class="font-white font-24"><van-icon name="info-o" />{{checkFail.tips}}</p>
                 <p v-if="isPaySuccess">接下来将按分期每月从你的支付宝余额扣{{(price/count).toFixed(2)}}元。</p>
                 <p>{{isPaySuccess ? checkSuccess.content : checkFail.content}}</p>
             </div>
             <!-- 页脚 -->
             <div class="result-footer">
                 <p>商家订单号: </p>
-                <p>{{alipayOrder.outradeNo}}</p>
+                <p class="font-white">{{alipayOrder.outradeNo}}</p>
                 <p>请保存好该订单号截图,方便售后服务。</p>
 
             </div>
@@ -50,15 +50,15 @@ export default {
        price: this.$store.getters.price,
        count: this.$store.getters.count,
        isPaySuccess: null, //是否支付成功
-       isResultBack: true, //是否有结果返回
+       isResultBack: false, //是否有结果返回
        checkSuccess: {
            tips: "恭喜你!",
            title: '支付宝分期业务办理成功!',
-           content: "可进入支付宝-->我的-->花呗-->我的账单,查询应还、或提前还款。"
+           content: "可进入支付宝-->我的-->花呗-->我的账单,查询详情。"
        }, //查询支付结果成功时
        checkFail: {
            tips: "查询交易信息失败!",
-           content: "请进入支付宝-->我的-->花呗-->我的账单,查询应还、或提前还款。"
+           content: "请进入支付宝-->我的-->花呗-->我的账单,查询详情。"
        }, //查询支付结果失败时
 
    }
@@ -125,47 +125,45 @@ export default {
 <style scoped lang="scss">
     .pay-result-container {
         height: 100vh;
-        width: 100vw;
+        width: 100%;
+        padding: 20px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
-        /* background-color: whitesmoke; */
+        background: linear-gradient(to bottom right, rgb(154, 213, 252),  65%,  rgb(96, 141, 238) );
         .pay-result-content {
             height: 100vh;
-            width: 100vw;
+            width: 100%;
             .result-header, .result-footer {
                 display: flex;
                 justify-content: center;
-                /* align-items: center; */
                 flex-direction: column;
-                padding: 30px;
-                text-align: left;
             }
             .result-header {
+                align-items: flex-start;
                 height: 50vh;
-                background-color: #f2f2f2;
-                h5 {
-                    color: red;
-                    font-size: 26px;
+                p {
+                    text-align: left;
                     padding: 10px;
-                    font-weight: bold;
                 }
-                p {
-                    font-size: 16px;
+                h5 {
+                    font-size: 24px;
+                    text-align: left;
                     padding: 10px;
                 }
             }
             .result-footer {
                 height: 50vh;
+                width: 100%;
+                border-top: 1px solid white;
+                align-items: center;
                 p {
-                    font-size: 16px;
+                    /* font-size: 16px; */
                     padding: 10px;
                 }
                 p:nth-child(2) {
                     padding: 20px;
-                    color: red;
-                    background-color: antiquewhite;
                 }
             }
         }
diff --git a/src/views/AlipayIndexNew.vue b/src/views/AlipayIndexNew.vue
new file mode 100644
index 0000000..88f690f
--- /dev/null
+++ b/src/views/AlipayIndexNew.vue
@@ -0,0 +1,636 @@
+<!--
+ * @Date: 2022-04-08 10:53:53
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-05-06 15:08:17
+ * @FilePath: \AntpayFrontEnd\src\views\AlipayIndexNew.vue
+ * @description:
+-->
+<template>
+    <div class="index-container">
+        <!-- banner -->
+        <div class="banner pos-flex-cen">
+            <van-image
+                :src="goods.bannerImg"
+                radius="10"
+                cover
+            />
+        </div>
+        <!-- main -->
+        <div class="main pos-flex-cen-column">
+            <div class="main-container">
+                <div class="pay-choose">
+                    <!-- 支付宝和花呗 选择-->
+                    <div class="pay-header">
+                        <p class="pay-plan">支付方案：</p>
+                        <van-radio-group v-model="radio" @change="onRadioChange">
+                            <van-cell-group>
+                                <!-- 支付宝 -->
+                                <van-cell  clickable  v-if="isShowAlipay" @click="onCell('1')">
+                                <template #title>
+                                    <div class="pay-item">
+                                        <van-image :src="alipayIconPath" height="30" width="30"></van-image><span>支付宝</span>
+                                    </div>
+                                </template>
+                                <template #right-icon>
+                                    <van-radio name="1" />
+                                </template>
+                                </van-cell>
+                                <!-- 支付宝end -->
+                                <!-- 花呗 -->
+                                <van-cell  clickable v-if="isShowAntpay"  @click="onCell('2')">
+                                <template #title>
+                                    <div class="pay-item">
+                                        <van-image :src="antpayIconpath" height="30" width="30"></van-image><span>花呗分期<span class="font-red">(推荐)</span></span>
+                                    </div>
+                                </template>
+                                <template #right-icon>
+                                    <van-radio name="2" />
+                                </template>
+                                </van-cell>
+                                <!-- 花呗分期下拉选择 -->
+                                <van-dropdown-menu v-show="isAntPay" >
+                                    <van-dropdown-item v-model="goods.value" :options="goods.option" @change="onChange"/>
+                                </van-dropdown-menu>
+                                <!-- 花呗分期下拉选择 end-->
+                                <!-- 花呗end -->
+                            </van-cell-group>
+                        </van-radio-group>
+                    </div>
+                    <!-- 花呗分期数选择 有12 24 支付宝默分期认 传1 此模块只有花呗分期使用-->
+                </div>
+            <!-- 套餐信息 -->
+                <div class="set-meal">
+                    <!-- 套餐价格 -->
+                    <div class="set-meal-price" v-if="isAntPay">
+                        <span>{{ amountTitle }}:</span>
+                        <span class="font-red price-big">￥{{ isAntPay ? (goods.price/goods.count).toFixed(2) :  goods.price}}</span>
+                        <span v-if="isAntPay"> x </span>
+                        <span v-if="isAntPay"> {{ goods.count }}期 </span>
+                        <!-- 花呗分期 -->
+                        <span v-if="userTemplate.isShowMoney"> = </span>
+                        <span v-if="userTemplate.isShowMoney"> ￥{{ goods.price }} </span>
+                    </div>
+                    <div class="set-meal-price" v-if="!isAntPay">
+                        <span>{{ amountTitle }}:</span>
+                        <span class="font-red price-big">￥{{ isAntPay ? (goods.price/goods.count).toFixed(2) :  goods.price}}</span>
+                    </div>
+                </div>
+                <!-- 其它内容 -->
+                <div class="others">
+                    <!-- 开通花呗 -->
+                    <div class="open-ant">
+                        <p v-if="isAntPay"><van-icon name="warning" size="15" color="#1989fa" /><span class="underline font-red" @click="onOpenWay">如何开通花呗 ？</span></p>
+                        <p v-if="userTemplate.isShowAgreement"><van-icon name="todo-list" size="15" color="#1989fa" /><span class="underline" @click="onOpenAgreement">智能学生证开通协议</span></p>
+                        <p v-if="userTemplate.isShowAgreement"><van-checkbox v-model="checked"  @change="onCheckChange" shape="square"><span>我已阅读协议并确认</span></van-checkbox></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- footer -->
+        <div class="footer pos-flex-cen">
+            <van-button :class="['van-button', {notSubmit: !checked }]" block @click="onSubmit">{{submitText}}</van-button>
+        </div>
+
+        <!-- agreement 协议 -->
+        <van-dialog
+            v-model="isAgreementShow"
+            :title="goods.agreementTitle"
+            show-cancel-button
+            confirm-button-text="同意"
+            cancel-button-text="不同意"
+            confirm-button-color="green"
+            @confirm="onConfirm"
+            @cancel="onCancel"
+             >
+            <div class="deal-content" v-show="!custom.isCustomDeal">
+                <h5>一.开通需知及承诺</h5>
+                    <p v-show="goods.isCustom">1.感谢用户使用支付宝花呗分期功能。</p>
+                    <p v-show="goods.isCustom">2.用户自愿开通4G电子学生证<span v-show="!custom.isGuangan">资费</span>套餐服务(24期)每月自动通过支付宝花呗分期支付<span v-show="!custom.isGuangan">资费</span>(话费+流量)套餐费<span>{{(goods.price/goods.count).toFixed(2)}}元/月。</span></p>
+                    <p v-show="goods.isCustom">3.用户需连续使用该<span v-show="!custom.isGuangan">资费</span>套餐24期，可据此领取4G电子学生证1台、电话卡1张。</p>
+                    <p style="white-space: pre-wrap"><span v-show="goods.isCustom"></span>4.{{goods.description}}</p>
+                    <p v-show="goods.isOld">5.协议期内，电子学生证非人为损坏或进水按“三包”政策进行免费维修或更换。如丢失或人为损坏，按优惠价重新购买。</p>
+                    <p v-show="goods.isOld">6.北京随手精灵科技有限公司接受电子学生证运营销售商委托采用支付宝花呗分期付代收业务货款。</p>
+                <h5>二．用户承诺</h5>
+                    <p>1.用户已充分了解支付宝花呗付款条款（含支付宝花呗相关规则），充分阅读及理解本协议。</p>
+                    <p v-show="custom.isCanShow">2.用户已经签署业务订购回执，自愿购买并同意签署本协议。</p>
+                <h5>三．法律适用与管辖</h5>
+                    <p>本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国法律。因本协议产生的争议，均应依照中华人民共和国法律予以处理。</p>
+            </div>
+
+             <!-- 协议需要根据某一个客户自定义时，todo后面需要从接口获取 -->
+            <div class="deal-content" v-show="custom.isCustomDeal">
+                <h5>一.开通须知</h5>
+                    <ol v-show="goods.isCustom">1.自愿开通测温版智能电子学生证配套资费套餐服务（24期）每月自动通过支付宝花呗分期支付资费（话费+流量）套餐费29元/月。</ol>
+                    <ol v-show="goods.isCustom">2.需连续使用该资费套餐24期，可免费使用测温版智能电子学生证1台、电话卡一张。</ol>
+                    <ol v-show="goods.isCustom">3.非人为损坏按照“三包”政策免费维修或更换，如丢失或人为损坏，请按价购买。</ol>
+                <h5>二．用户承诺</h5>
+                    <ol>用户已充分了解支付宝花呗付款条款（含支付宝花呗相关规则），充分阅读及理解本协议。</ol>
+                <h5>三．法律适用</h5>
+                    <ol>本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国法律。</ol>
+            </div>
+        </van-dialog>
+
+        <!-- 非在支付宝浏览器弹窗 -->
+        <van-dialog
+            v-model="isAipayBrowser"
+            title="请切换支付宝扫码支付！"
+            :show-confirm-button="false"
+            :close-on-click-overlay="true"
+            >
+            <div class="browser-tips">
+
+                <p>
+                    步骤如下:
+                </p>
+                <p>1、<a @click="onDownCode($event)" class="font-blue">点击下载</a>付款码，再长按码保存到手机相册。</p>
+                <p>
+                    2、打开支付宝，如果未安装支付宝请到应用商店下载；<a v-show="isIos" @click="onDownAlipay" class="font-blue">请点击前往应用商店下载</a><span v-show="!isIos">或<span @click="onCopy" style="color: red">复制链接</span>，粘贴到浏览器打开并下载。</span>
+                </p>
+                <p>
+                    3、支付宝扫码，然后从扫描页的【相册】中选择刚下载的付款码。
+                </p>
+                <p>点击屏幕任意地方关闭弹窗</p>
+            </div>
+        </van-dialog>
+    </div>
+</template>
+
+<script>
+import { isNotNull, /* isAlipayBrowser, isAndroid */intCount, isShowAlipay, isShowAntpay } from "../utils/index";
+import { APIAlipay } from "../api/alipay";
+import { IMAGE_URL, USER_AGENT, ALIPAY_DOWN_URL} from '../config/models';
+export default {
+  name:'',
+  data(){
+   return {
+       radio: "", //支付选项 默认花呗分期  1 是支付宝全额 ， 2 是花呗分期
+       isShowAlipay: null, // 是否显示支付宝
+       isShowAntpay: null, //是否显示花呗
+       isAntPay: null, //是否是花呗支付
+       antpayIconpath: require('../assets/antpay.png'), //花呗支付图片
+       alipayIconPath: require('../assets/alipay.png'), //支付宝图片
+       submitText: '下一步', //submit文字
+       checked: false, //复选框 默认是false
+       goods: {
+           bannerImg: '' || require('@/assets/banner_03.jpg'), // banner图片
+           goodsNo: '', //商品id
+           userId: '', //用户id
+           description: '', //商品协议
+           mainTitle: '', //商品标题
+           price: '', //商品价格
+           count: '', //商品分期数
+           defDescription: '电子学生证套餐两年内（24个月）内含每月200分钟通话和1.5G流量，超出通话或流量部分，由用户自行交费。', //默认协议内容
+           isDistribution: null, //是否是分销模式  1是分销商模式 其它是代理商
+           agreementTitle: '', //协议标题
+           isOld: null, //是否是老用户
+           isCustom: true, //是否是新用户
+           value: '', //下拉框默认的值
+           option: [], //下拉选项
+           qrCodeImg: '', //商品二维码下载链接
+
+       }, //商品数据
+       userTemplate: {
+           isShowMoney: null, //是否需要显示总额
+           isShowAgreement: null, //是否需要显示协议
+
+       }, //用户模板
+       isAgreementShow: false, //弹窗协议， 默认不显示
+       checkoutCount: 0, //点击复选框或者协议次数
+       custom: {
+           isCanShow: false, //特殊客户不显示协议中某一个协议
+           isGuangan: false, //广安客户 协议个性定制
+           isAnjiao: false, //安教客户 协议个性定制
+           isCustomDeal: false, //客户个性化定制协议, 与默认协议区别大 故另起一个协议
+       },
+       isAipayBrowser: null, //是否是支付宝内核浏览器
+       isIos: null, //是否是ios
+       alipayDownUrl: '', //支付宝app下载链接
+   }
+  },
+  computed: {
+      amountTitle: {
+        get() {
+            return this.isAntPay ? '月套餐费' : '支付总额';
+        },
+        set(value) {
+            return value;
+        }
+      }
+  },
+  created() {
+      this.checkBrowser();
+      this.checkIosOrAndroid();
+      this.getParams();
+  },
+  methods: {
+    //   checkBrowser 检查浏览器内核 非支付宝浏览器弹窗提示
+    checkBrowser() {
+        if (/AlipayClient/.test(USER_AGENT)) {
+            console.log("alipay");
+            this.isAipayBrowser = false;
+        } else {
+            this.isAipayBrowser = true;
+        }
+    },
+    // checkIosOrAndroid 检查当前用户设备是安卓还是ios 以方便跳转下载支付宝app 商店
+    checkIosOrAndroid() {
+        if (USER_AGENT.indexOf('Android') > -1 || USER_AGENT.indexOf('Linux') > -1) {
+            this.alipayDownUrl = ALIPAY_DOWN_URL.android;
+            this.isIos = false;
+        } else if (USER_AGENT.indexOf('iPhone') > -1) {
+            this.alipayDownUrl = ALIPAY_DOWN_URL.ios;
+            this.isIos = true;
+        }
+    },
+    // onDownCode 下载二维码
+    onDownCode($e) {
+        $e.stopPropagation();
+        // 定义下载链接, 从接口获取
+        // todo 待接口完成, 接口返回空则使用banner图片作为测试
+        const URL = this.goods.qrCodeImg;
+        window.open(URL);
+    },
+    // onDownAlipay 下载支付宝app
+    onDownAlipay() {
+        window.location = this.alipayDownUrl;
+    },
+    // onCopy 复制粘贴
+    onCopy() {
+        let url = 'https://d.alipay.com';
+        let oInput = document.createElement('input');
+        oInput.value = url;
+        document.body.appendChild(oInput);
+        oInput.select(); // 选择对象;
+        document.execCommand("Copy"); // 执行浏览器复制命令
+        this.$toast.success('已复制到粘贴板!');
+        oInput.remove()
+    },
+    //   getParams 获取二维码url携带的参数
+    getParams() {
+        let params = this.$route.query;
+        // 根据不同商品的id初始化协议内容 注： 有些客户 需要显示不同的协议内容
+        this.initDealContent(params.goodsNo);
+        console.log("扫码传过来的参数", params);
+        if(isNotNull(params.goodsNo)) {
+            this.goods.goodsNo = params.goodsNo;
+            this.goods.userId = params.userId;
+            this.$store.commit('goodsNo', params.goodsNo);
+            this.$store.commit('userId', params.userId);
+            this.getGoodsDetails();
+            this.getUserTemplate();
+            this.getQRCodeImageUrl(params.userId, params.goodsNo);
+        } else {
+            this.$router.push({path: '/404'})
+        }
+    },
+    // initDealContent 初始化部分协议内容
+    initDealContent(goodsNo) {
+        console.log("goodsNo", goodsNo);
+        switch(goodsNo) {
+            case '1483687825375969280':
+                // do something
+                this.goods.agreementTitle = '电子学生证AI套餐开通服务协议';
+                break;
+            case '1499199301461164032':
+                // do something
+                this.goods.agreementTitle = '4G电子学生证套餐开通服务协议';
+                this.custom.isGuangan = true;
+                break;
+            case '1500295698449121280':
+                // do something
+                this.custom.isAnjiao = true;
+                this.checked = true;
+                break;
+            case '1500296054570696704':
+                // do something
+                this.custom.isAnjiao = true;
+                this.amountTitle = '费用总计';
+                this.isShowAlipay = true;
+                this.checked = true;
+                break;
+            case '1509442747413250048':
+                // do something
+                this.custom.isCanShow = false;
+                this.custom.isCustomDeal = true;
+                break;
+
+        }
+    },
+    // getGoodsDetails 根据商品No 和 用户id获取该商品的详情
+    getGoodsDetails() {
+        this.$toast.loading({
+            message: '加载中',
+        })
+        APIAlipay.getGoodsDetails(this.goods.goodsNo, this.goods.userId)
+            .then(res => {
+                let data = res.data;
+                console.log("商品数据::", data);
+                if (data.code === 20000) {
+                    let good =  data.data.goods;
+                    console.log("goods", data.data.goods);
+                    this.goods.bannerImg = IMAGE_URL[ process.env.NODE_ENV ] + good.goodsImg;
+                    this.goods.description = good.descriptionText === '' ? this.goods.defDescription : good.descriptionText.replace(/\\n/g,"<br/>");
+                    this.goods.isOld = good.descriptionText === '';
+                    this.goods.price = good.price;
+                    this.goods.count = good.count;
+                    this.goods.mainTitle = good.mainTitle;
+                    this.goods.agreementTitle = good.agreementTitle || '智能学生证套餐开通服务协议';
+                    this.goods.isDistribution = good.patternNum === '1' ? true: false; // 分销模式1：分销模式；2 代理商模式
+                    // 初始化 分期数 由于接口返回的分期数不符合页面填充的数据 我们要重组
+                    let payCount = good.periodizationJson.substring(1, good.periodizationJson.length - 1).split(',');
+                    let newCountList = intCount(payCount);
+                    this.radio = newCountList.length === 0 ? '1' : '2'; //有一种情况, 只有支付宝全额支付时, 需默认支付方式为1
+                    this.goods.count = newCountList.length === 0 ? 1 : Math.max(...newCountList); //有一种情况, 只有支付宝全额支付时, 需默认分期数为1
+                    this.goods.value = Math.max(...newCountList).toString();
+                    this.goods.option = newCountList.map(g => {
+                        return {
+                            text: `可分${g}期, ${(good.price/g).toFixed(2)}元/期`,
+                            value: g
+                        }
+                    });
+                    this.isShowAlipay = isShowAlipay(payCount); //单选是否显示支付宝
+                    this.isShowAntpay = isShowAntpay(newCountList); //单选是否显示花呗
+                    this.isAntPay = this.isShowAntpay; //花呗默认显示内容
+                    this.redirectDealers(good.patternNum); //重定向 到分销商与代理商
+                } else {
+                    this.$router.push({path: '/404'});
+                    this.$dialog.confirm({
+                        title: '出错了',
+                        message: data.message || '请联系管理员!'
+                    })
+                }
+            })
+            .catch(error => {
+                this.$dialog.confirm({
+                    title: '出错了',
+                    message: error,
+                })
+            })
+            .finally(() => {
+                this.$toast.clear();
+            })
+    },
+    // getUserTemplate 根据用户id 获取用户模板信息 判断页面组件是否需要渲染
+    getUserTemplate() {
+        APIAlipay.getUserTemplate(this.goods.userId)
+            .then(res => {
+                if(res.data.code === 20000) {
+                    let data = res.data.data.goodsTemplate;
+                    console.log("用户模板", data);
+                    if(isNotNull(data)) {
+                        // 处理协议单选框的默认值, 当不需要显示协议时为ture
+                        this.checked = data.isShowAgreement === 0;
+                        this.userTemplate.isShowMoney = data.isShowMoney === 1;
+                        this.userTemplate.isShowAgreement = data.isShowAgreement === 1;
+                    }
+                }
+            })
+    },
+    // getQRCodeImageUrl 获取商品二维码下载链接
+    getQRCodeImageUrl(userId, spuId) {
+        APIAlipay.getQRCode(userId, spuId)
+        .then(res => {
+            this.goods.qrCodeImg = res.data.data.QRCodeUrl;
+        })
+        .catch(error => {
+            console.log("error", error);
+        })
+    },
+    //   onSubmit
+    onSubmit() {
+        if (!this.checked) {
+            this.$dialog.confirm({
+                title: '温馨提示',
+                message: `请您阅读并勾选同意\n${this.goods.agreementTitle}`,
+                showCancelButton: false
+            })
+        } else {
+            let queryData = {
+                price: this.goods.price,
+                count: this.radio === '1' ? 1 : this.goods.count,
+                type: this.radio, // '1' 是支付宝 '2'是花呗分期
+                userId: this.goods.userId,
+                goodsNo: this.goods.goodsNo,
+                mainTitle: this.goods.mainTitle,
+            }
+            this.$router.push({name: 'form-new', query: queryData});
+        }
+    },
+    // onRadio 选择支付方式
+    onRadioChange(value) {
+        console.log("选择的支付方式是::", value);
+    },
+    // onCell 点击 cell
+    onCell(value) {
+        console.log("选择的cell是", value);
+        this.radio = value;
+        this.isAntPay = value === '2';
+        console.log("this.isAntPay", this.isAntPay);
+    },
+    // onChange 花呗分期选择
+    onChange(value) {
+        this.goods.count = Number(value);
+        console.log("选择了", typeof value);
+        console.log("此时花呗的分期数是",  this.goods.count);
+    },
+    // onOpenWay 如何开通花呗弹窗
+    onOpenWay() {
+        this.$dialog.confirm({
+            title: '如何开通花呗',
+            message: '请进入支付宝APP-右下角【我的】-【花呗】，点击后按页面提示操作开通即可。',
+            showCancelButton: false
+        });
+    },
+    // onOpenAgreement 打开协议弹窗
+    onOpenAgreement( ) {
+        this.isAgreementShow = true;
+        this.checkoutCount ++;
+    },
+    // onConfirm 协议弹窗 -同意
+    onConfirm() {
+        this.isAgreementShow = false;
+        this.checked = true;
+    },
+    // onCancel 协议弹窗 不同意
+    onCancel() {
+        this.isAgreementShow = false;
+        this.checked = false;
+    },
+    // onCheckChange 复选框
+    onCheckChange() {
+        if(this.checkoutCount < 1) {
+            this.onOpenAgreement();
+            this.checkoutCount ++;
+        }
+    },
+    // redirectDealers 重定向路由到 分销商首页
+    redirectDealers(patternNum) {
+        if( patternNum === '1') {
+            this.$router.push({name: 'index-dealers', query: {goodsNo: this.goods.goodsNo, userId: this.goods.userId,}})
+        }
+    },
+  }
+}
+</script>
+
+// 此处不加 scoped是为了修改vant的默认样式
+<style lang="scss">
+    .van-dropdown-item {
+        position: fixed;
+        right: 6%;
+        left: 6%;
+        width: 88%;
+        z-index: 10;
+        overflow: hidden;
+    }
+    .van-dropdown-menu__item {
+        display: flex;
+        justify-content:  flex-start;
+        align-items: center;
+    }
+    /* .van-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 0;
+        background-color: rgba(0,0,0,.7);
+    } */
+</style>
+<style scoped lang="scss">
+    .index-container {
+        height: 100vh;
+        width: 100%;
+        padding: 20px 20px 0 20px;
+        overflow: hidden;
+        .banner {
+            height: 40vh;
+            width: 100%;
+            box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+            border-radius: 10px;
+            .van-image {
+               flex: 1;
+                width: 100%;
+            }
+        }
+        .main {
+            flex: 1;
+            min-height: 45vh;
+            width: 100%;
+            margin-top: 10px;
+            padding: 5px 20px;
+            border-radius: 10px;
+            background-color: #fafafa;
+            box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+            overflow: scroll;
+            .main-container {
+                width: 100%;
+                .pay-choose {
+                    flex: 1;
+                    width: 100%;
+                    margin: 10px 0 0 0;
+                    text-align: left;
+                    .pay-header {
+                        .pay-plan {
+                            padding-left: 5px;
+                            line-height: 20px;
+                        }
+                        p {
+                            padding: 5px 0;
+                        }
+                        .pay-item {
+                            display: flex;
+                            justify-content: flex-start;
+                            align-items: center;
+                            span {
+                                padding-left: 10px;
+                            }
+                        }
+                    }
+                    .van-cell {
+                        padding: 5px 0;
+                    }
+                    .antpay-dropdown {
+                        width: 80%;
+                        left: 15px;
+                    }
+                    .van-dropdown-item {
+                            width: 80% !important;
+                            margin: 0 20px !important;
+                    }
+                }
+                .set-meal {
+                    height: 30px;
+                    width: 100%;
+                    margin: 10px 0;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    span {
+                        font-size: 14px;
+                    }
+                    .set-meal-price {
+                        line-height: 30px;
+                        .price-big {
+                            font-size: 24px;
+                            padding-left: 10px
+                        }
+                    }
+                }
+                .others {
+                    flex: 1;
+                    width: 100%;
+                    .open-ant {
+                        width: 100%;
+                        text-align: left;
+                        display: flex;
+                        justify-content: center;
+                        align-items: flex-start;
+                        flex-direction: column;
+                        p {
+                            padding: 5px 0;
+
+                        }
+                        span {
+                            padding-left: 5px;
+                        }
+                    }
+                }
+            }
+        }
+        .footer {
+            height: 10vh;
+            width: 100%;
+            padding: 0 20px;
+            position: absolute;
+            left: 0;
+            bottom: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            .van-button {
+                background-color: #1989fa;
+                color: white;
+                border: none;
+                &.notSubmit {
+                    background-color: rgb(150, 196, 241);
+                }
+            }
+        }
+        .deal-content, .browser-tips {
+            width: 100%;
+            overflow: scroll;
+            padding: 10px;
+            text-align: left;
+            p {
+                font-size: 14px;
+                padding: 5px;
+                line-height: 20px;
+            }
+        }
+        .deal-content {
+            height: 50vh;
+        }
+    }
+</style>
diff --git a/src/views/ComponentsTest.vue b/src/views/ComponentsTest.vue
index d41f0c9..5f45b88 100644
--- a/src/views/ComponentsTest.vue
+++ b/src/views/ComponentsTest.vue
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-02-28 09:46:25
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-03-04 10:14:03
+ * @LastEditTime: 2022-03-31 16:23:27
  * @FilePath: \AntpayFrontEnd\src\views\ComponentsTest.vue
  * @description: 组件测试页面
 -->
@@ -9,10 +9,11 @@
     <div>
         <AgreementDialog
             :title="title"
-            :show="true"
+            :show="false"
             :count="count"
             :price="price"
             :description="description"/>
+            <div class="flex-ct-x box">浮动布局</div>
     </div>
 </template>
 
@@ -42,5 +43,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+    .box {
+        height: 400px;
+        width: 400px;
+    }
 </style>
diff --git a/src/views/alipay-dealers/AlipayFormDealers.vue b/src/views/alipay-dealers/AlipayFormDealers.vue
new file mode 100644
index 0000000..9611ba9
--- /dev/null
+++ b/src/views/alipay-dealers/AlipayFormDealers.vue
@@ -0,0 +1,338 @@
+<!--
+ * @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>
diff --git a/src/views/alipay-dealers/AlipayIndexDealers.vue b/src/views/alipay-dealers/AlipayIndexDealers.vue
new file mode 100644
index 0000000..eee95b2
--- /dev/null
+++ b/src/views/alipay-dealers/AlipayIndexDealers.vue
@@ -0,0 +1,231 @@
+<!--
+ * @Date: 2022-04-08 10:53:53
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-04-13 11:03:38
+ * @FilePath: \AntpayFrontEnd\src\views\alipay-dealers\AlipayIndexDealers.vue
+ * @description:
+-->
+<template>
+    <div class="index-container">
+        <!-- banner -->
+        <div class="banner pos-flex-cen">
+            <van-image
+                :src="bannerImg"
+                radius="10"
+                cover
+            />
+        </div>
+        <!-- main -->
+        <div class="main pos-flex-cen-column">
+            <div class="pay-header">
+                <!-- 友情提醒-->
+                <div class="pay-tips">
+                    <p><van-icon name="warning" size="15" color="#1989fa" /><span class="font-red">友情提醒：</span>您已提交“随手精灵0元购”订单，请点击“一键办理”在此完成每月话费缴纳。</p>
+                </div>
+            </div>
+            <!-- 套餐信息 -->
+            <div class="set-meal">
+                <!-- 套餐价格 -->
+                <div class="set-meal-price">
+                    <span>月套餐费:</span>
+                    <span class="font-red price-big">￥25.00</span>
+                    <span> x </span>
+                    <span> 24期 </span>
+                    <span> = </span>
+                    <span> ￥600 </span>
+                </div>
+            </div>
+             <!-- 其它内容 -->
+            <div class="others">
+                <!-- 开通花呗 -->
+                <div class="open-ant">
+                    <p class="ant-img"><van-image :src="antpayIconpath" height="30" width="30"></van-image><span>花呗分期</span><van-icon name="warning" size="15" color="#1989fa" /><span class="underline">如何开通花呗？</span></p>
+                </div>
+            </div>
+        </div>
+        <!-- footer -->
+        <div class="footer pos-flex-cen">
+            <div class="footer-argeement">
+                <van-row>
+                    <van-col :span="11">
+                        <van-checkbox v-model="checked" shape="square"><span>我已阅读协议并确认</span></van-checkbox>
+                    </van-col>
+                     <van-col :span="13">
+                        <van-icon name="todo-list" size="15" color="#1989fa" /><span class="underline">智能学生证开通协议</span>
+                     </van-col>
+                </van-row>
+            </div>
+            <van-button type="info" :disabled="!checked" block    @click="onSubmit">{{submitText}}</van-button>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+  name:'',
+  data(){
+   return {
+       bannerImg: require('@/assets/banner_03.jpg'),
+       radio: "1",
+       antpayIconpath: require('../../assets/antpay.png'), //花呗支付图片
+       alipayIconPath: require('../../assets/alipay.png'), //支付宝图片
+       submitText: '一键办理', //submit文字
+       radioCount: '1', //分期数
+       checked: false, //单选框 默认是false
+       value1: 24,
+       option1: [
+         { text: '可分24期，20元/期', value: 24 },
+         { text: '可分24期，40元/期', value: 12 },
+       ],
+   }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+
+    //   submit
+    onSubmit() {
+        this.$router.push({name: 'form-new', query: { price: 480, count: 24}});
+    }
+  }
+}
+</script>
+
+// 此处不加 scoped是为了修改vant的默认样式
+<style lang="scss">
+    .van-dropdown-item {
+        position: fixed;
+        right: 5%;
+        left: 5%;
+        width: 90%;
+        z-index: 10;
+        overflow: hidden;
+    }
+    .van-dropdown-menu__item {
+        display: flex;
+        justify-content:  flex-start;
+        align-items: center;
+    }
+    .van-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 0;
+        background-color: rgba(0,0,0,.7);
+    }
+</style>
+<style scoped lang="scss">
+    .index-container {
+        height: 100vh;
+        width: 100%;
+        padding: 10px 10px 0 10px;
+        overflow: hidden;
+        .banner {
+            height: 50vh;
+            width: 100%;
+            background-color: sandybrown;
+            box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+            .van-image {
+               flex: 1;
+                width: 100%;
+            }
+        }
+        .main {
+            /* flex: 1; */
+            height: 30vh;
+            width: 100%;
+            margin-top: 10px;
+            padding: 5px 20px;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+            background-color: #fff;
+            box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+            .pay-header {
+                flex: 1;
+                width: 100%;
+                margin: 10px 0 0 0;
+                text-align: left;
+                .pay-tips {
+                    p {
+                        padding: 5px;
+                        line-height: 20px;
+                    }
+                }
+            }
+            .set-meal {
+                flex: 1;
+                width: 100%;
+                padding: 10px 0;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                span {
+                    font-size: 14px;
+                }
+                .set-meal-price {
+                    .price-big {
+                        font-size: 24px;
+                    }
+                }
+            }
+            .others {
+                height: 40px;
+                width: 100%;
+                .open-ant {
+                    width: 100%;
+                    text-align: left;
+                    display: flex;
+                    justify-content: center;
+                    align-items: flex-start;
+                    flex-direction: column;
+                    .ant-img {
+                        height: 40px;
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                        margin-right: 10px;
+                        .van-icon {
+                            margin-left: 5px;
+                        }
+                    }
+                    p {
+                        padding: 5px 0;
+
+                    }
+                    span {
+                        padding-left: 5px;
+                    }
+                }
+            }
+        }
+        .footer {
+            height: 15vh;
+            width: 100%;
+            padding: 0 10px;
+            position: absolute;
+            left: 0;
+            bottom: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            .footer-argeement {
+                width: 100%;
+                .van-row {
+                    height: 40px;
+                    width: 100%;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    text-align: left;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/views/page-not-found/index.vue b/src/views/page-not-found/index.vue
index 8fce652..25c1236 100644
--- a/src/views/page-not-found/index.vue
+++ b/src/views/page-not-found/index.vue
@@ -1,13 +1,13 @@
 <!--
  * @Date: 2022-02-14 15:34:10
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-02-14 15:39:24
- * @FilePath: \alipay-scan-code-front-end\src\views\page-not-found\index.vue
+ * @LastEditTime: 2022-04-14 11:33:22
+ * @FilePath: \AntpayFrontEnd\src\views\page-not-found\index.vue
  * @description: 404
 -->
 <template>
     <div class="page-not-found">
-        <van-empty description="扫码出现错误!请您重新扫码!" />
+        <van-empty description="商品数据异常!请您联系相关工作人员!" />
     </div>
 </template>
 
diff --git a/vue.config.js b/vue.config.js
index 2593cb0..0fffe71 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,10 +1,10 @@
 /*
  * @Author: your name
  * @Date: 2020-04-15 10:00:32
- * @LastEditTime: 2022-02-23 17:36:48
+ * @LastEditTime: 2022-04-08 15:01:09
  * @LastEditors: JinxChen
  * @Description: In User Settings Edit
- * @FilePath: \AlipayFrontEnd\vue.config.js
+ * @FilePath: \AntpayFrontEnd\vue.config.js
  */
 const port = process.env.port || process.env.npm_config_port || 8080;/* 7788 */ // dev port
 
@@ -32,7 +32,12 @@ module.exports = {
         // 允许生成 CSS source maps?
         sourceMap: true,
         // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
-        loaderOptions: {},
+        loaderOptions: {
+            sass: {
+                // 比如你可以这样向所有 Sass/Less 样式传入共享的全局变量
+                prependData: `@import "@/assets/css/public.scss";`
+            },
+        },
         // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
         requireModuleExtension: true
     },