feature

- 增加 支付宝花呗支付页

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'
+- 增加 AgreementDialog 组件, '@/components/AgreementDialog'
+
+### v1.0.3
+`2022.05.09`
+feature
+- 增加 支付宝花呗支付页面

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>

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) {

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;
+}

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/',

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;

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) },
+
+
 
 ];
 

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;
+    }
+}

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

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>

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;

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;
                 }
             }
         }

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>

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>

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>

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>

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>
 

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
     },