Merge branch 'fix/goods' into 'master'

fix: 微信H5支付；监听键盘弹起；登录触发条件；

See merge request !93

src/components/GoodAction.vue

 <template>
-  <div class="good-action">
+  <div class="good-action" v-show="isShowAction">
     <div class="good-action-left">
       <a href="javascript:;" class="good-action-left-btn" @click="leftClick">
         <svg-icon icon-class="assistant" />
@@ -35,6 +35,7 @@
 const LEFT_BTN_CLICK_EVENT = "leftClick";
 const RIGHT_BTN_CLICK_EVENT = "click";
 import settings from "@/api/settings";
+import { onKeyboardStateChange, offKeyboardStateChange } from "@/service/utils";
 export default {
   name: "GoodAction",
   props: {
@@ -55,6 +56,19 @@ export default {
       default: ""
     }
   },
+  data() {
+    return {
+      isShowAction: true
+    };
+  },
+  mounted() {
+    onKeyboardStateChange(e => {
+      this.isShowAction = !e;
+    });
+  },
+  destroyed() {
+    offKeyboardStateChange();
+  },
   methods: {
     leftClick() {
       this.$emit(LEFT_BTN_CLICK_EVENT, {});

src/components/GoodList/index.vue

@@ -106,7 +106,7 @@ export default {
         return;
       }
       if (item.id === "BNZJX001" && !item.url) {
-        this.setIsShowLogin();
+        this.setIsShowLogin(true);
         return;
       }
       if (item.url) {

src/components/LoginModal.vue

@@ -39,8 +39,8 @@
       </cr-field>
       <div class="protocol">
         确定登录即表示同意
-        <a :href="userAgreement" target="_blank">《用户协议》</a>
-        <a :href="privacyPolicy" target="_blank">《隐私政策》</a>
+        <a :href="userAgreement">《用户协议》</a>
+        <a :href="privacyPolicy">《隐私政策》</a>
       </div>
     </cr-form>
   </modal>

src/service/pay.js

@@ -2,7 +2,7 @@
  * @Description: 支付微信h5, jsapi, 第三方收银台，跳转）
  * @Date: 2020-07-28 15:03:52
  * @LastEditors: gzw
- * @LastEditTime: 2020-08-24 22:02:45
+ * @LastEditTime: 2020-08-27 14:54:50
  */
 
 // import cherry from "@qg/cherry-ui";
@@ -98,7 +98,7 @@ export function payByWay(type = "THIRD", payInfo) {
         resolve();
       });
     } else {
-      if (payInfo.url.indexOf("weixin") > -1) {
+      if (payInfo.url.indexOf("tenpay") > -1) {
         payByWeixinH5(payInfo);
       } else {
         payByThirdPartyCashier(payInfo);

src/service/utils.js

+import { isAndroid, isIOS } from "./validation";
 /**
  * 替换邮箱字符
  * @param {String} email 输入字符串
@@ -184,7 +185,9 @@ export function parseTime(time, cFormat) {
 }
 
 /**
- * @param strBirthday：指的是出生日期，格式为"1990-01-01"
+ * @description: 根据日期获取真实年龄，精确到天
+ * @param {String} strBirthday 日期“1990-01-01”
+ * @return {String} returnAge 返回年龄
  */
 export function getRealAge(strBirthday) {
   var returnAge,
@@ -222,6 +225,12 @@ export function getRealAge(strBirthday) {
   }
   return returnAge; //返回周岁年龄
 }
+
+/**
+ * @description: 根据身份证号获取生日日期
+ * @param {String} idCard 身份证号
+ * @return {String} birthday 生日日期
+ */
 export function getBirthDate(idCard) {
   let birthday = "";
   if (idCard) {
@@ -235,3 +244,83 @@ export function getBirthDate(idCard) {
   }
   return birthday;
 }
+
+/**
+ * @description: 移动端监听软键盘弹起或收起，IOS，android
+ * @return {Function} callback 软键盘弹起或收取回调, true => 弹起， false => 隐藏
+ */
+
+export function onKeyboardStateChange(callback = () => {}) {
+  if (isIOS) {
+    let isReset = true; //是否归位
+
+    const focusinHandler = () => {
+      isReset = false; //聚焦时键盘弹出，焦点在输入框之间切换时，会先触发上一个输入框的失焦事件，再触发下一个输入框的聚焦事件
+      callback(true);
+    };
+
+    const focusoutHandler = () => {
+      isReset = true;
+      setTimeout(() => {
+        //当焦点在弹出层的输入框之间切换时先不归位
+        if (isReset) {
+          // window.scroll(0, 0); // 【暂时取掉】确定延时后没有聚焦下一元素，是由收起键盘引起的失焦，则强制让页面归位
+          callback(false);
+        }
+      }, 30);
+    };
+    document.body.addEventListener("focusin", focusinHandler);
+    document.body.addEventListener("focusout", focusoutHandler);
+  }
+
+  if (isAndroid) {
+    const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    const resizeHandler = () => {
+      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      const activeElement = document.activeElement;
+      if (resizeHeight < originHeight) {
+        // 键盘弹起后逻辑
+        if (
+          activeElement &&
+          (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")
+        ) {
+          setTimeout(() => {
+            activeElement.scrollIntoView({ block: "center" }); //焦点元素滚到可视区域的问题
+          }, 0);
+          callback(true);
+        }
+      } else {
+        // 键盘收起后逻辑
+        callback(false);
+      }
+    };
+    window.addEventListener("resize", resizeHandler);
+  }
+}
+
+/**
+ * @description: 销毁软键盘监听
+ */
+export function offKeyboardStateChange(callback = () => {}) {
+  if (isIOS) {
+    const focusinHandler = () => {
+      console.log("focusin已卸载");
+      callback();
+    };
+
+    const focusoutHandler = () => {
+      console.log("focusout已卸载");
+      callback();
+    };
+    document.body.removeEventListener("focusin", focusinHandler);
+    document.body.removeEventListener("focusout", focusoutHandler);
+  }
+
+  if (isAndroid) {
+    const resizeHandler = () => {
+      console.log("resize已卸载");
+      callback();
+    };
+    window.removeEventListener("resize", resizeHandler);
+  }
+}

src/service/validation.js

@@ -276,8 +276,12 @@ export function isChnAddress(str) {
   }
   return false;
 }
-
+const ua = window.navigator.userAgent.toLowerCase();
 // 判断微信环境
-export const isWeixinBrower = window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger";
+export const isWeixinBrower = ua.match(/MicroMessenger/i) == "micromessenger";
 // 判断信用钱包环境
-export const isXyqb = window.navigator.userAgent.toLowerCase().match(/xyqb/i) == "xyqb";
+export const isXyqb = ua.match(/xyqb/i) == "xyqb";
+// 判断IOS环境
+export const isIOS = /iphone|ipad|ipod/.test(ua);
+// 判读Android环境
+export const isAndroid = /android/.test(ua);

src/views/Goods/Detail/modules/detailPay.mixin.js

@@ -52,20 +52,20 @@ export default {
       const res = await placeOrder.pay(params);
       if (res) {
         let payInfo = "";
-        if (res.payUrl) {
+        if (res.payInfo.payUrl) {
           payInfo = {
-            url: res.payUrl,
+            url: res.payInfo.payUrl,
             params: {
               ...orderInfo,
               tradeType,
               state: 1
             }
           };
-        } else if (tradeType === "JSAPI" && !res.payUrl) {
+        } else if (tradeType === "JSAPI" && !res.payInfo.payUrl) {
           payInfo = res.payInfo;
         } else {
           payInfo = {
-            url: res.payUrl,
+            url: res.payInfo.payUrl,
             params: {
               ...orderInfo,
               tradeType,

src/views/Goods/index.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import goodsList from "@/api/goodsList.mock";
 import { list, getLink } from "@/api/product";
 import localStorage from "@/service/localStorage";
@@ -60,10 +61,22 @@ export default {
       active: 0,
       showLayer: false,
       goodsList: [],
+      mongoToken: localStorage.get("mongoToken"),
       goodsLink: ""
     };
   },
+  watch: {
+    isShowLogin(val) {
+      if (!val) {
+        this.mongoToken = localStorage.get("mongoToken");
+        if (this.mongoToken) {
+          this.getGoodsLink();
+        }
+      }
+    }
+  },
   computed: {
+    ...mapState(["isShowLogin"]),
     list() {
       const { active, goodsLink } = this;
       const _catList = JSON.parse(JSON.stringify(categoryList));
@@ -113,7 +126,7 @@ export default {
       }
     },
     async getGoodsLink() {
-      if (!localStorage.get("mongoToken")) return;
+      if (!this.mongoToken) return;
       const res = await getLink();
       if (res) {
         this.goodsLink = res.url;

src/views/Home/index.vue

@@ -97,6 +97,7 @@
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 import GoodList from "@/components/GoodList/index";
 import Tabbar from "@/components/Tabbar";
 import Copyright from "@/components/Copyright";
@@ -119,6 +120,7 @@ export default {
       ...settings,
       goodsList,
       articleUseful: localStorage.get("articleUseful"),
+      mongoToken: localStorage.get("mongoToken"),
       articleList: [
         {
           title: "25~45岁间该怎么买保险",
@@ -136,16 +138,29 @@ export default {
       report: {}
     };
   },
+  watch: {
+    isShowLogin(val) {
+      if (!val) {
+        this.mongoToken = localStorage.get("mongoToken");
+        if (this.mongoToken) {
+          this.getGoodsLink();
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapState(["isShowLogin"])
+  },
   async mounted() {
     this.getList();
-    if (localStorage.get("mongoToken")) {
+    if (this.mongoToken) {
       this.report = await getRiskEvaluation();
     }
   },
   methods: {
     clickUsefulOption(val) {
       this.articleUseful = val;
-      localStorage.setItem("articleUseful", val);
+      localStorage.set("articleUseful", val);
     },
     async getList() {
       const res = await list();

vue.config.js

@@ -87,8 +87,8 @@ module.exports = {
   configureWebpack: {
     plugins: [new SentryPlugin(SentryConfig)],
     output: {
-      filename: "js/[name].[chunkhash:5].js",
-      chunkFilename: "js/[name].[chunkhash:5].js"
+      filename: `js/[name].[${IS_PROD ? "chunk" : ""}hash:5].js`,
+      chunkFilename: `js/[name].[${IS_PROD ? "chunk" : ""}hash:5].js`
     }
   },
   lintOnSave: true,