微信支付

package.json

@@ -56,6 +56,7 @@
         "mockjs": "^1.0.1-beta3",
         "postcss": "^8.2.10",
         "postcss-loader": "^5.2.0",
+        "qrcode": "^1.5.3",
         "runjs": "4.3.2",
         "sass": "1.26.8",
         "sass-loader": "8.0.2",

src/App.vue

@@ -20,24 +20,6 @@ export default {
     async fn() {
         let userInfor = getToken();
         if (userInfor) {
-            let MethodName = "/OrgServer/DictManager/GetStudyPhaseList";
-            let typeListAll = [{
-                study_phase: -1,
-                study_phase_name: '全部'
-            }]
-            let typeList = []
-            await getLogin(MethodName, {})
-                .then((res) => {
-                    if (res.status === 1) {
-                        typeListAll = typeListAll.concat(res.study_phase_list)
-                        typeList = res.study_phase_list
-                    }
-                })
-                .catch(() => {
-
-                });
-            this.$store.commit('setStudyTypeAll',typeListAll)   
-            this.$store.commit('setStudyType',typeList)
             let MethodNames = "/OrgServer/DictManager/GetOrgTypeList";
             let typeListAlls = [{
                 type: -1,
@@ -56,39 +38,6 @@ export default {
                 });
             this.$store.commit('setOrgTypeAll',typeListAlls)   
             this.$store.commit('setOrgType',typeLists)
-            let provinceCityListAll = [{
-                label: '全部',
-                value: '0',
-                leaf: true
-            }]
-            let provinceCityList = []
-            await getLogin('/OrgServer/DictManager/GetAllProvinceCityList', {})
-                .then((res) => {
-                    if (res.status === 1) {
-                        res.province_list.forEach(item => {
-                            let obj = {
-                                label: item.name,
-                                value: item.id,
-                                children: []
-                            }
-                            item.city_list.forEach(items=>{
-                                let objs = {
-                                    label: items.name,
-                                    value: items.id,
-                                    leaf: true
-                                }
-                                obj.children.push(objs)
-                            })
-                            provinceCityList.push(obj)
-                            provinceCityListAll.push(obj)
-                        });
-                    }
-                })
-                .catch(() => {
-
-                });
-            this.$store.commit('setProviceCity',provinceCityList)
-            this.$store.commit('setProviceCityAll',provinceCityListAll)
             let searchStatusList = [{
                 status:-1,
                 status_name:'全部'
@@ -104,6 +53,59 @@ export default {
             });
             this.$store.commit('setSearchStatusList',searchStatusList)
         }
+
+        let MethodName = "/OrgServer/DictManager/GetStudyPhaseList";
+        let typeListAll = [{
+            study_phase: -1,
+            study_phase_name: '全部'
+        }]
+        let typeList = []
+        await getLogin(MethodName, {})
+            .then((res) => {
+                if (res.status === 1) {
+                    typeListAll = typeListAll.concat(res.study_phase_list)
+                    typeList = res.study_phase_list
+                }
+            })
+            .catch(() => {
+
+            });
+        this.$store.commit('setStudyTypeAll',typeListAll)   
+        this.$store.commit('setStudyType',typeList)
+        let provinceCityListAll = [{
+            label: '全部',
+            value: '0',
+            leaf: true
+        }]
+        let provinceCityList = []
+        await getLogin('/OrgServer/DictManager/GetAllProvinceCityList', {})
+            .then((res) => {
+                if (res.status === 1) {
+                    res.province_list.forEach(item => {
+                        let obj = {
+                            label: item.name,
+                            value: item.id,
+                            children: []
+                        }
+                        item.city_list.forEach(items=>{
+                            let objs = {
+                                label: items.name,
+                                value: items.id,
+                                leaf: true
+                            }
+                            obj.children.push(objs)
+                        })
+                        provinceCityList.push(obj)
+                        provinceCityListAll.push(obj)
+                    });
+                }
+            })
+            .catch(() => {
+
+            });
+        this.$store.commit('setProviceCity',provinceCityList)
+        this.$store.commit('setProviceCityAll',provinceCityListAll)
+        
     } 
   },
   mounted(){

src/components/Header.vue

@@ -64,7 +64,7 @@
         width="504px"
         class="login-dialog"
         v-if="loginFlag">
-        <login @cancelLogin="cancelLogin" :toUrl="toUrl"></login>
+        <login @cancelLogin="cancelLogin" :toUrl="toUrl" :linkType="linkType"></login>
     </el-dialog>
   </div>
 </template>
@@ -107,7 +107,8 @@ export default {
       userMessage: getToken()?JSON.parse(getToken()):null,
       userShow: Cookies.get('HM21St_User_Token')?true:false,
       loginFlag: false,
-      toUrl: ''
+      toUrl: '',
+      linkType: '',
     };
   },
   watch: {},
@@ -134,6 +135,11 @@ export default {
         }
       
     },
+    handleLogin(url,type){
+        this.toUrl = url
+        this.loginFlag = true
+        this.linkType = type
+    },
     // 切换登录的注册
     cutLoginReg() {
       window.location.href = "/";

src/views/bookShelf/bookItem.vue

@@ -5,6 +5,7 @@
       :headerBorder="headerBorder"
       :userBg="userBg"
       :LoginNavIndex="LoginNavIndex"
+      ref="header"
     />
     <div class="navBar" v-if="info">
         <div class="navBar-left">
@@ -202,7 +203,7 @@
         width="712px"
         class="bookItem-dialog"
         v-if="paymentShow">
-        <Payment :data="data" :payWay="payWay" @handleClose="handleClose" />
+        <Payment :data="info" :payWay="payWay" @handleClose="handleClose" :orderId="orderId" :qr_code_url="qr_code_url" />
     </el-dialog>
   </div>
 </template>
@@ -217,6 +218,7 @@ import TreeList from "./components/TreeList"
 import CourseList from "./components/CourseList.vue"
 import { cutMoneyFiter } from '@/utils/defined';
 import { getLogin } from "@/api/ajax";
+import { getToken } from '@/utils/auth'
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -408,7 +410,7 @@ export default {
         tagBg:['#C9EBFF','#FFFAC9','#D7C9FF'], // 标签背景色
         tagColor:['#006DAA','#AA8500','#7849C4'], // 标签字体颜色
         paymentShow: false, // 支付弹窗
-        payWay:'dui',
+        payWay:this.$route.query.paywei?this.$route.query.paywei:'dui',
         bookType: this.$route.query.cardType?this.$route.query.cardType:'baozhi', // 书籍类型
         bannerFlag: true, // 是否展示广告
         id: this.$route.query.id?this.$route.query.id:'',
@@ -416,7 +418,10 @@ export default {
         courseList:[],
         sales: null,
         salesCn: '',
-        isBuy: 'false'
+        isBuy: 'false',
+        userMessage: getToken()?JSON.parse(getToken()):null,
+        orderId: '',
+        qr_code_url: ''
     }
   },
   //计算属性 类似于data概念
@@ -434,12 +439,17 @@ export default {
 
     },
     handleChangeWay(type){
+        if(!this.userMessage){
+            this.$refs.header.handleLogin('/bookItem?headerConfig='+this.$route.query.headerConfig+'&cardType='+this.bookType+'&id='+this.id+'&paywei='+type,'url')
+            return false
+        }
         this.payWay = type;
-        this.paymentShow = true;
+        this.handleOrder()
     },
     // 关闭弹窗
     handleClose(){
         this.paymentShow = false
+        this.getInfo()
     },
     // 详情
     getInfo(){
@@ -504,6 +514,24 @@ export default {
             }
         });
         return listArr
+    },
+    // 生成订单
+    handleOrder(){
+        let MethodName = "/ShopServer/Client/OrderManager/CreateOrder";
+        let data = {
+            goods_type: this.bookType==='LB'?0:this.bookType==='baozhi'?2:null,
+            goods_id_list: [this.id],
+            pay_type: this.payWay==='wei'?3:this.payWay==='zhi'?4:null
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status === 1){
+                this.orderId = res.id
+                this.qr_code_url = res.qr_code_url
+                this.paymentShow = true;
+            }
+        })
+        // this.paymentShow = true;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -517,6 +545,9 @@ export default {
         this.previousPage = arr[4] ? arr[4] : '商城'
     }
     this.getInfo()
+    if(this.$route.query.paywei){
+        this.handleOrder()
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {

src/views/bookShelf/components/Payment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="payment">
+  <div class="payment" v-if="data">
     <ul class="payment-left">
         <li v-for="(itemP,indexP) in payList" :key="indexP" @click="handleChangePay(itemP.type)" :class="[payType===itemP.type?'active':'']">
             <img :src="itemP.img" />
@@ -8,20 +8,21 @@
     </ul>
     <div class="payment-right">
         <i class="el-icon-close" @click="closeDialogue"></i>
-        <h2>{{data.title}}</h2>
-        <h3>{{data.org}}</h3>
-        <p class="price">￥{{data.price|cutMoneyFiter}}</p>
+        <h2>{{data.name}}</h2>
+        <h3>{{data.org_name}}</h3>
+        <p class="price">￥{{data.price_discount|cutMoneyFiter}}</p>
         <template v-if="payType==='dui'">
             <el-input class="code" placeholder="在此输入兑换码" v-model="codeValue"></el-input>
             <a class="exchange" @click="handleExchange">兑换</a>
             <b class="tips">输入兑换码</b>
         </template>
-        <template v-else-if="payType==='wei'">
-            <img class="img-code" src="../../../assets/img-code.png" />
+        <template v-else>
+            <canvas id="QRCode_header" style="width: 338px; height: 338px; cursor: pointer;" @click="handleRefresh"></canvas>
+        </template>
+        <template v-if="payType==='wei'">
             <b class="tips">请使用微信扫一扫</b>
         </template>
         <template v-else-if="payType==='zhi'">
-            <img class="img-code" src="../../../assets/img-code.png" />
             <b class="tips">请使用支付宝扫一扫</b>
         </template>
     </div>
@@ -32,10 +33,12 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import { cutMoneyFiter } from '@/utils/defined';
+import { getLogin } from "@/api/ajax";
+import QRCode from "qrcode";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { },
-  props: ["data", "payWay"],
+  props: ["data", "payWay", "qr_code_url", "orderId"],
   filters:{
     cutMoneyFiter
   },
@@ -61,19 +64,73 @@ export default {
         ], // 支付方式
         payType: 'dui',
         codeValue: '', // 兑换码的值
+        codeImg: '',
+        payCode:{
+            wei: 'http://localhost:9970/#/people_manage',
+            zhi: 'http://localhost:9970/#/organize_manage'
+        },
+        opts: {
+            errorCorrectionLevel: "H", //容错级别
+            type: "image/png", //生成的二维码类型
+            quality: 1, //二维码质量
+            margin: 0, //二维码留白边距
+            width: 330, //宽
+            height: 330, //高
+            text: "", //二维码内容
+            color: {
+                dark: "#333333", //前景色
+                light: "#fff", //背景色
+            },
+        },
+        timer: null,
     }
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {
-
+    //  data:{
+    //   handler(val, oldVal) {
+    //     const _this = this;
+    //     if (val) {
+    //       
+    //     }
+    //   },
+    //   // 深度观察监听
+    //   deep: true,
+    // },
   },
   //方法集合
   methods: {
     // 支付方式
     handleChangePay(type){
         this.payType = type;
+        if(type==='dui'){
+            return false
+        }
+        let MethodName = "/ShopServer/Client/OrderManager/UpdateOrderPayType";
+        let data = {
+            id: this.orderId,
+            pay_type: this.payType==='wei'?3:this.payType==='zhi'?4:null
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status === 1){
+                this.payCode[this.payType] = res.qr_code_url
+                this.createQRCode()
+            }
+        })
+    },
+    createQRCode(){
+        let msg = document.getElementById("QRCode_header");
+        setTimeout(() => {
+            QRCode.toCanvas(msg, this.payCode[this.payType], this.opts, function (error) {
+                if (error) {
+                    console.log("二维码加载失败", error);
+                    this.$message.error("二维码加载失败");
+                }
+            });
+        }, 1000);
     },
     closeDialogue(){
         this.$emit("handleClose")
@@ -81,6 +138,40 @@ export default {
     // 兑换
     handleExchange(){
 
+    },
+
+    handleRefresh(){
+        let MethodName = "/ShopServer/Client/OrderManager/GetOrderNewPayQRCode";
+        let data = {
+            id: this.orderId,
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status === 1){
+                this.payCode[this.payType] = res.qr_code_url
+                this.createQRCode()
+            }
+        })
+        // this.payCode = {
+        //     wei: 'https://baidu.com',
+        //     zhi: 'https://xdf.cn'
+        // }
+        // this.createQRCode()
+    },
+    getOrderStatus(){
+        let MethodName = "/ShopServer/Client/OrderManager/GetOrderPayStatus";
+        let data = {
+            id: this.orderId,
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status === 1){
+                if(res.is_success==='true'){
+                    clearInterval(this.timer);
+                    this.$emit("handleClose")
+                }
+            }
+        })
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -89,7 +180,14 @@ export default {
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-
+    if(this.qr_code_url){
+        this.payCode[this.payType] = this.qr_code_url
+        this.createQRCode()
+        this.timer = null;
+        this.timer = setInterval(() => {
+            this.getOrderStatus()
+        }, 5000);
+    }
   },
   //生命周期-创建之前
   beforeCreated() { },
@@ -210,7 +308,7 @@ export default {
             display: block;
             margin-top: 40px;
         }
-        .img-code{
+        #QRCode_header{
             border: 1px solid #EBEBEB;
             padding: 8px;
         }

src/views/bookStore/Subscribe.vue

@@ -108,7 +108,12 @@
                                 </div>
                                 <ul class="custom-box-bottom">
                                     <li v-for="(itemc,indexc) in custonList[customPage].list" :key="indexc" :style="{width:itemc.width?itemc.width*52+'px':'',borderRight:itemc.farRight?'none !important':'',borderBottom:itemc.farBottom?'none !important':''}" :class="[customOrderNumberList.indexOf(itemc.value)>-1?'active':'']" @click="changeCustomOrder(itemc)">
-                                        {{itemc.label}}
+                                        <el-tooltip placement="bottom">
+                                            <div slot="content">
+                                                第 791 期<br/>
+                                                出版日期：2020-10-23</div>
+                                            <el-button class="custom-btn">{{itemc.label}}</el-button>
+                                        </el-tooltip>
                                     </li>
                                 </ul>
                             </div>
@@ -849,17 +854,40 @@ export default {
         background: #ffffff !important;
         border: none !important;
         min-width: 52px;
+        height: 36px;
         text-align: center;
         border-right: 1px solid #E5E6EB !important;
         border-bottom: 1px solid #E5E6EB !important;
         border-radius: 0 !important;
+        display: flex;
+        .custom-btn{
+            border: none;
+            width: 100%;
+            background: initial;
+            padding: 0;
+            line-height: 20px;
+            height: 20px;
+            color: #000;
+        }
         &.active{
             border-right: 1px solid #F5F5F5 !important;
             border-bottom: 1px solid #F5F5F5 !important;
             background: #EA5939 !important;
-            color: #FFF !important;
+            &:hover{
+                .custom-btn{
+                    color: #FFF !important;
+                }
+            }
+            .custom-btn{
+                color: #FFF !important;
+            }
+        }
+        &:hover{
+            .custom-btn{
+                    color: #000 !important;
+                }
+            }
         }
-      }
     }
 }
 </style>

src/views/login.vue

@@ -70,7 +70,7 @@ import { setToken } from "@/utils/auth";
 import ForgotPwd from "./forgotPwd.vue"
 export default {
   name: "login",
-  props: ["toUrl"],
+  props: ["toUrl","linkType"],
   components: { ForgotPwd },
   data() {
     const validatePhone = (rule, value, callback) => {
@@ -174,9 +174,14 @@ export default {
                 this.loading = false
                 setToken(res);
                 if(this.toUrl){
-                    this.$router.push({
-                        path: this.toUrl,
-                    });
+                    if(this.linkType==='url'){
+                       window.location.href = window.location.href.substring(0,window.location.href.indexOf('/#/'))+"/#" + this.toUrl
+                       window.location.reload()
+                    }else{
+                        this.$router.push({
+                            path: this.toUrl,
+                        });
+                    }
                 }else{
                     window.location.reload()
                 }