v1

config/index.js

@@ -2,6 +2,19 @@
 // Template version: 1.3.1
 // see http://vuejs-templates.github.io/webpack for documentation.
 
+const interfaces = require('os').networkInterfaces(); // 在开发环境中获取局域网中的本机iP地址
+let IPAdress = '';
+for (var devName in interfaces) {
+  var iface = interfaces[devName];
+  for (var i = 0; i < iface.length; i++) {
+    var alias = iface[i];
+    if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+      IPAdress = alias.address;
+    }
+  }
+}
+console.log('ip', IPAdress);
+
 const path = require('path')
 
 module.exports = {
@@ -14,7 +27,7 @@ module.exports = {
 
     // Various Dev Server settings
     // host: 'localhost', // can be overwritten by process.env.HOST
-    host: '192.168.1.110', // can be overwritten by process.env.HOST
+    host: IPAdress, // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

package-lock.json

@@ -5136,6 +5136,11 @@
       "integrity": "sha1-9OaGxd4eofhn28rT1G2WlCjfmMQ=",
       "dev": true
     },
+    "js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npm.taobao.org/js-md5/download/js-md5-0.7.3.tgz",
+      "integrity": "sha1-tPL7sLMnRV9ZjWcn447Ccs0Jw/I="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",

package.json

@@ -5,12 +5,13 @@
   "author": "y",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "build": "node build/build.js"
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "js-md5": "^0.7.3",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/assets/css/flex.css

+/* 水平方向 */
+.row-center-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.row-center-start {
+  display: flex;
+  justify-content: center;
+  align-items: start;
+}
+
+.row-between-center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.row-around-center {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* 垂直方向 */
+.col-center-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.col-start-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+}
+
+.col-center-start {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+}
\ No newline at end of file

src/assets/css/font-color.css

@@ -2,10 +2,18 @@
   color: #000000;
 }
 
+.fc-3 {
+  color: #333;
+}
+
 .fc-6 {
   color: #666;
 }
 
+.fc-9 {
+  color: #999;
+}
+
 .fc-f {
   color: #fff;
 }
@@ -13,3 +21,15 @@
 .fc-sys1 {
   color: #3abfff;
 }
+
+.fc-sys2 {
+  color: #FA004B;
+}
+
+.fc-sys3 {
+  color: #FFA3CF;
+}
+
+.fc-sys4 {
+  color: #7EBBFF;
+}
\ No newline at end of file

src/assets/css/font-size.css

+.fs-14 {
+  font-size: 0.14rem;
+}
+
+.fs-16 {
+  font-size: 0.16rem;
+}
+
+.fs-18 {
+  font-size: 0.18rem;
+}
+
+.fs-20 {
+  font-size: 0.20rem;
+}
+
+.fs-22 {
+  font-size: 0.22rem;
+}
 
 .fs-24 {
   font-size: 0.24rem;
 }
 
+.fs-28 {
+  font-size: 0.28rem;
+}
+
+.fs-32 {
+  font-size: 0.32rem;
+}
+
+.fs-34 {
+  font-size: 0.34rem;
+}
+
 .fs-36 {
   font-size: 0.36rem;
 }
 
 .fs-40 {
   font-size: 0.4rem;
-}
\ No newline at end of file
+}
+
+.fs-60 {
+  font-size: 0.6rem;
+}
+
+.fs-100 {
+  font-size: 1rem;
+}
+

src/components/StatusBar/index.vue

 <template>
-  <div class="status-bar">
-    <slot></slot>
+  <div>
+    <div style="width: 100%; height: 0.36rem"></div>
+    <div class="status-bar">
+      <slot></slot>
+    </div>
+    <div v-if="!flag" class="status-bar sticky">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      flag: true,
+    };
+  },
+
+  mounted() {
+    var top = document.querySelector(".status-bar").offsetTop;
+    window.onscroll = (e) => {
+      if (window.pageYOffset >= top) {
+        this.flag = false;
+      } else {
+        this.flag = true;
+      }
+    };
+  },
+};
 </script>
 
 <style scoped>
 .status-bar {
-  /* display: block; */
   width: 100%;
-  height: 1.28rem;
+  height: 0.92rem;
   background-color: #fff;
-  /* position: fixed; */
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0 1px 5px #ccc;
+
+  font-size: 0.36rem;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #000000;
+  line-height: 0.36rem;
+}
+
+.sticky {
+  /* position: -webkit-sticky; */
+  position: fixed;
+  top: 0;
+  z-index: 10;
 }
 </style>
\ No newline at end of file

src/main.js

@@ -10,6 +10,16 @@ import './assets/css/font-color.css'
 import './assets/css/font-size.css'
 import './assets/css/font-family.css'
 import './assets/css/font-weight.css'
+import './assets/css/flex.css'
+
+var EventBus = new Vue();
+Object.defineProperties(Vue.prototype, {
+  $bus: {
+    get: function () {
+      return EventBus
+    }
+  }
+})
 
 // 路由发生变化修改页面title
 router.beforeEach((to, from, next) => {

src/router/routes.js

@@ -8,6 +8,16 @@ const routes = [
     name: "Index",
     component: resolve => require(["@/views/Home"], resolve) // 宝宝起名首页
   },
+  {
+    path: "/pay",
+    name: "pay",
+    component: resolve => require(["@/views/Pay"], resolve) // 宝宝起名支付页面
+  },
+  {
+    path: "/result",
+    name: "result",
+    component: resolve => require(["@/views/Result"], resolve) // 宝宝起名支付页面
+  },
 ]
 
 export default routes
\ No newline at end of file

src/service/api.js

+import axios from "./axios";
+import sign from "./sign";
+
+const reportUrl = "https://report.zhangxinhulian.com";
+const payUrl = "https://zx-paytest.zhangxinzhixun.com";
+
+const request = (url, method, data_or_params = {}, form) => {
+  if (process.env.NODE_ENV === "development") {
+    data_or_params.tgyz = 1; //跳过验证
+    data_or_params.tgtk = 1; //跳过token
+  } else {
+    data_or_params.sign = sign(data_or_params)[0];
+  }
+
+  if (form == "form") {
+    return axios({
+      url: url,
+      method: method,
+      params: data_or_params
+    });
+  } else {
+    if (method == "get") {
+      return axios({
+        url: url,
+        method: method,
+        params: data_or_params
+      });
+    } else if (method == "post") {
+      return axios({
+        url: url,
+        method: method,
+        data: data_or_params
+      });
+    }
+  }
+};
+
+const API = {
+  API_test: function (data) {
+    return request("/test", "get", data);
+  },
+
+  // 创建订单
+  API_createorder: function (data) {
+    return request("/h5game/bbqm/createOrder", "post", data, 'form');
+  },
+
+  // 获取支付价格
+  API_payConfig: function (data) {
+    return request("/app/v1/location/user/pay-config", "get", data);
+  },
+
+  // 查询选牌结果
+  API_orderdetail: function (data) {
+    return request("/h5game/orderdetail", "get", data);
+  },
+
+  // 发起支付
+  API_gatewayCreateorder: function (data) {
+    return request(
+      payUrl + "/unifiedpay/gateway/createOrder",
+      "post",
+      data
+    );
+  },
+
+  // 查询支付结果
+  API_gatewayQueryOrder: function (data) {
+    return request(payUrl + "/unifiedpay/gateway/queryOrder", "get", data);
+  },
+
+  // 收集数据
+  API_h5Logs: function (data) {
+    return request(reportUrl + "/v1/collect/h5Logs", "post", data);
+  },
+
+  // 用户反馈
+  API_feedback: function (data) {
+    return request("/app/v1/user/feedback", "post", data, "form");
+  },
+
+  // 点击上报
+  API_reportClick: function (data) {
+    return request(
+      reportUrl +
+      "/logCollection/log/v1/userLogCollection?module=web&pkg=com.h5game.taluo",
+      "post",
+      data
+    );
+  },
+
+  // 展示上报
+  API_reportView: function (data) {
+    return request(
+      reportUrl +
+      "/logCollection/log/v1/userLogCollection?module=web&pkg=com.h5game.taluo",
+      "post",
+      data
+    );
+  },
+
+  // 查询名字列表
+  API_fetchName: function (data) {
+    return request('/h5game/bbqm/fetchNames', 'get', data)
+  }
+};
+
+export default API;

src/service/axios.js

+import axios from "axios";
+
+let baseURL = "https://feedapi.zhangxinhulian.com";
+if (process.env.NODE_ENV === "development") {
+  baseURL = "https://feedapitest.zhangxinhulian.com";
+} else {
+  baseURL = "https://feedapi.zhangxinhulian.com";
+}
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: baseURL,
+  withCredentials: false, //设置cross跨域 并设置访问权限 允许跨域携带cookie信息
+  timeout: 5000, // 请求超时时间
+  retryDelay: 1000, //重试间隔
+  retry: 3 //重试次数
+});
+
+service.interceptors.response.use(
+  function (response) {
+    return Promise.resolve(response.data); //请求正常则返回
+  },
+  function (error) {
+    return Promise.reject(error); //请求错误
+  }
+);
+
+export default service;

src/service/sign.js

+import MD5 from "js-md5";
+
+function sign(obj) {
+  let keyArray = []; //key数组
+  let valueArray = []; //value数组
+
+  //抽出key
+  for (let i in obj) {
+    keyArray.push(i);
+  }
+
+  //字典排序key
+  keyArray.sort();
+
+  //根据key，整理value
+  for (let i in keyArray) {
+    for (let j in obj) {
+      if (keyArray[i] == j) {
+        valueArray.push(obj[j]);
+      }
+    }
+  }
+
+  const salt1 = "D0EV7FZL45A5DVKD";
+  const salt2 = "E2Y1YREK2BYDAC5C";
+  let step1 = "";
+  let step2 = "";
+  let step3 = "";
+  let step4 = "";
+  let timestamp = Date.parse(new Date());
+
+  for (let i in valueArray) {
+    step1 += valueArray[i];
+  }
+  step1 = step1 + timestamp;
+  step2 = MD5(step1 + salt1);
+  step3 = MD5(step2 + salt2);
+  step4 = step3.substring(0, 16);
+
+  return [step4, timestamp];
+}
+
+export default sign;

src/utils/index.js

+// -------倒计时--------
+/**
+ * @params {number} endtime
+ * 参数是结束时间的毫秒数
+ * eg: endtime = (new Date()).getTime() + 1 * 60 * 60 * 1000  当前时间的1个小时后
+ * 
+ * @returns {string} '00:59:59'
+ */
+export function showtime(endtime) {
+  var nowtime = new Date()  //获取当前时间
+
+  var lefttime = endtime - nowtime.getTime()  //距离结束时间的毫秒数
+
+  // var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24))  //计算天数
+
+  var lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24)  //计算小时数
+  lefth = lefth < 10 ? '0' + lefth : lefth
+
+  var leftm = Math.floor(lefttime / (1000 * 60) % 60)  //计算分钟数
+  leftm = leftm < 10 ? '0' + leftm : leftm
+
+  var lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
+  lefts = lefts < 10 ? '0' + lefts : lefts
+
+  // return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
+  return lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
+}
+
+
+const PublicMethods = {
+  // 设置cookie
+  setCookie: function (name, value, seconds) {
+    seconds = seconds || 0; //seconds有值就直接赋值，没有为0，这个根php不一样。
+    var expires = "";
+    if (seconds != 0) {
+      //设置cookie生存时间
+      var date = new Date();
+      date.setTime(date.getTime() + seconds * 1000);
+      expires = "; expires=" + date.toGMTString();
+    }
+    document.cookie = name + "=" + escape(value) + expires + "; path=/"; //转码并赋值
+  },
+
+  // 取得cookie
+  getCookie: function (name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(";"); // 把cookie分割成组
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i]; // 取得字符串
+      while (c.charAt(0) == " ") {
+        // 判断一下字符串有没有前导空格
+        c = c.substring(1, c.length); // 有的话，从第二位开始取
+      }
+      if (c.indexOf(nameEQ) == 0) {
+        // 如果含有我们要的name
+        return unescape(c.substring(nameEQ.length, c.length)); // 解码并截取我们要值
+      }
+    }
+    return false;
+  },
+
+  // 清除cookie
+  clearCookie: function (name) {
+    setCookie(name, "", -1);
+  },
+
+  // //获取cookie
+  // getCookie: function(name) {
+  //   var arr = "";
+  //   var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+  //   if ((arr = document.cookie.match(reg))) {
+  //     return unescape(arr[2]);
+  //   } else {
+  //     return "";
+  //   }
+  // },
+
+  //获取链接里的参数
+  getUrlParams() {
+    let obj = {};
+    let is_parameter = window.location.href.split("?");
+
+    if (is_parameter.length <= 1) {
+      return obj;
+    }
+
+    let parList = is_parameter[1].split("&");
+    for (var i = 0; i < parList.length; i++) {
+      var arr = parList[i].split("=");
+      var key = arr[0];
+      var value = arr[1];
+      obj[key] = value;
+    }
+    return obj;
+  },
+
+  //获取系统当前时间
+  getToday() {
+    var nowdate = new Date();
+    var y = nowdate.getFullYear();
+    var m = nowdate.getMonth() + 1;
+    var d = nowdate.getDate();
+
+    m = m < 10 ? "0" + m : m;
+    d = d < 10 ? "0" + d : d;
+
+    var formatToday = y + "-" + m + "-" + d;
+    return formatToday;
+  },
+
+  //获取系统前一周的时间
+  getWeek() {
+    var nowdate = new Date();
+    var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
+    var y = oneweekdate.getFullYear();
+    var m = oneweekdate.getMonth() + 1;
+    var d = oneweekdate.getDate();
+
+    m = m < 10 ? "0" + m : m;
+    d = d < 10 ? "0" + d : d;
+
+    var formatWeek = y + "-" + m + "-" + d;
+    return formatWeek;
+  },
+
+  //获取系统前一个月的时间
+  getMonth() {
+    var nowdate = new Date();
+    var oneweekdate = new Date(nowdate - 30 * 24 * 3600 * 1000);
+    var y = oneweekdate.getFullYear();
+    var m = oneweekdate.getMonth() + 1;
+    var d = oneweekdate.getDate();
+
+    m = m < 10 ? "0" + m : m;
+    d = d < 10 ? "0" + d : d;
+
+    var formatMonth = y + "-" + m + "-" + d;
+    return formatMonth;
+  },
+
+  //获取系统前一个月的时间
+  getDynamicDay(agoDay) {
+    var nowdate = new Date();
+    var oneweekdate = new Date(nowdate - agoDay * 24 * 3600 * 1000);
+    var y = oneweekdate.getFullYear();
+    var m = oneweekdate.getMonth() + 1;
+    var d = oneweekdate.getDate();
+
+    m = m < 10 ? "0" + m : m;
+    d = d < 10 ? "0" + d : d;
+
+    var formatAgo = y + "-" + m + "-" + d;
+    return formatAgo;
+  },
+
+  //获取某天对应的周几
+  getweekday(date) {
+    var weekArray = new Array("7", "1", "2", "3", "4", "5", "6");
+    var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
+    return week;
+  },
+
+  //将秒数转为时分秒
+  getHoursMinutesSeconds(time) {
+    time = Math.floor(time / 1000);
+    let hours = Math.floor(time / 3600);
+    let minutes = Math.floor((time % 3600) / 60);
+    let seconds = (time % 3600) % 60;
+
+    hours = ("0" + hours).slice(-2);
+    minutes = ("0" + minutes).slice(-2);
+    seconds = ("0" + seconds).slice(-2);
+    return hours + ":" + minutes + ":" + seconds;
+  },
+
+  //判断当前App环境
+  appSource() {
+    const u = navigator.userAgent;
+    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+    if (isiOS) {
+      return "ios";
+    } else {
+      return "android";
+    }
+  },
+
+  //判断是否在微信环境里
+  isWeiXin() {
+    var ua = window.navigator.userAgent.toLowerCase();
+    if (ua.match(/MicroMessenger/i) == "micromessenger") {
+      return true;
+    } else {
+      return false;
+    }
+  }
+};
+
+export default PublicMethods; //封装所有公共方法

src/views/Home/child_cpn/FormQuery.vue

@@ -5,7 +5,7 @@
       <div class="baby-form">
         <div>
           <span>宝宝姓氏</span>
-          <input type="text" placeholder="请输入宝宝姓氏" />
+          <input type="text" v-model="name" placeholder="请输入宝宝姓氏" />
         </div>
         <div>
           <span>宝宝性别</span>
@@ -42,8 +42,13 @@
           <a href="javascript:;">《隐私权协议》</a>
         </div>
       </div>
+
+      <div v-if="totast" class="totast fs-24 fc-f row-center-center">
+        请将信息填写完整
+      </div>
     </div>
-    <div class="btn fs-40 fc-f ff-pp">立即起名</div>
+
+    <div class="btn fs-40 fc-f ff-pp" @click="clickBtn">立即起名</div>
   </div>
 </template>
 
@@ -54,6 +59,13 @@ export default {
   data() {
     return {
       date: "",
+      name: "",
+      totast: false,
+      formatterGender: [
+        { gender: "男", value: 1 },
+        { gender: "女", value: 2 },
+        { gender: "未出生", value: 3 },
+      ],
       genderInfo: [
         {
           src: deactive,
@@ -82,9 +94,10 @@ export default {
 
   methods: {
     dateChange() {
-      console.log(this.date);
+      // console.log(this.date);
     },
 
+    // 选择性别
     selectGender(item) {
       this.genderInfo.map((option) => {
         if (item.id == option.id) {
@@ -94,6 +107,32 @@ export default {
         }
       });
     },
+
+    // 立即起名
+    clickBtn() {
+      if (this.name == "" || this.date == "") {
+        this.totast = true;
+        setTimeout(() => {
+          this.totast = false;
+        }, 1500);
+        return;
+      }
+
+      // 获取性别
+      let g;
+      this.genderInfo.map((item) => {
+        if (item.status) {
+          return (g = item.id);
+        }
+      });
+
+      let params = {
+        name: this.name,
+        gender: g,
+        date: this.date,
+      };
+      this.$router.push({ path: "/pay", query: params });
+    },
   },
 };
 </script>
@@ -107,7 +146,7 @@ export default {
 }
 
 .btn {
-  widows: 7.5rem;
+  width: 7.5rem;
   height: 0.92rem;
   display: flex;
   justify-content: center;
@@ -211,4 +250,16 @@ a {
   text-decoration: none;
   color: #3abfff;
 }
+
+.totast {
+  position: absolute;
+  top: 0.8rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 3rem;
+  height: 0.3rem;
+  background-color: #000;
+  opacity: 0.4;
+  border-radius: 0.16rem;
+}
 </style>
\ No newline at end of file

src/views/Home/index.vue

@@ -77,12 +77,22 @@
 import StatusBar from "@/components/StatusBar";
 import FormQuery from "./child_cpn/FormQuery";
 
+import utils from "@/utils";
+
 export default {
   components: {
     StatusBar,
     FormQuery,
   },
 
+  mounted() {
+    let h5LogsObj = utils.getUrlParams();
+    let link = encodeURIComponent(window.location.href);
+
+    utils.setCookie("h5LogsObj", encodeURI(JSON.stringify(h5LogsObj)), 0);
+    utils.setCookie("link", encodeURI(link), 0);
+  },
+
   data() {
     return {
       aaa: "",

src/views/Pay/index.css

+
+.pay {
+  width: 100%;
+  position: relative;
+}
+
+.pay-body {
+  width: 100%;
+  position: relative;
+  background: url(~@/assets/img/pay/bg1.png) no-repeat;
+  background-size: cover;
+  background-color: #DBF3FE;
+}
+
+
+.img1 {
+  width: 100%;
+  height: 4.5rem;
+}
+
+.pay-info {
+  width: 7.5rem;
+  height: 1.68rem;
+  background-color: #fff;
+  
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.pay-info>div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.pay-btn {
+  width: 7.5rem;
+  height: 0.92rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #FA004B;
+  border-radius: 0 0 0.4rem 0.4rem;
+}
+
+.num {
+  width: 100%;
+  margin-top: 0.24rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.img2-father {
+  width: 100%;
+  height: 0.5rem;
+  margin-top: 0.4rem;
+}
+
+.img2 {
+  width: 6.22rem;
+  height: 0.5rem;
+}
+
+.base-list>div {
+  margin-top: 0.3rem;
+  width: 7.22rem;
+  height: 3.64rem;
+  background-color: #fff;
+  border-radius: 0.16rem;
+  position: relative;
+}
+
+.title {
+  width: 3.56rem;
+  height: 0.6rem;
+  position: absolute;
+  top: 0.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0.31rem;
+  background-color: #7EBBFF;
+}
+
+.img3-father {
+  width: 1.36rem;
+  height: 1.36rem;
+  position: relative;
+}
+
+.img3-father>div {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+}
+
+.img3 {
+  width: 1.36rem;
+  height: 1.36rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+}
+
+.name-info {
+  width: 100%;
+  position: absolute;
+  top: 1.6rem;
+}
+
+.name-info div:nth-child(1) {
+  flex: 1;
+}
+
+.name-info div:nth-child(2) {
+  flex: 3;
+}
+
+.img4 {
+  position: absolute;
+  bottom: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6.42rem;
+  height: 0.7rem;
+  z-index: 2;
+}
+
+.name-recommend {
+  position: absolute;
+  top: 1.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.name-recommend>div {
+  width: 6.4rem;
+}
+
+.name-recommend>div:nth-child(1) {
+  margin-bottom: 0.16rem;
+}
+
+.name-select {
+  position: absolute;
+  top: 1.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.name-select>div {
+  width: 6.4rem;
+}
+
+.name-select>div:nth-child(1) {
+  margin-bottom: 0.16rem;
+}
+
+.name-suggest {
+  width: 100%;
+  position: absolute;
+  top: 1.25rem;
+}
+
+.name-suggest>div>div {
+  width: 4.64rem;
+}
+
+.name-suggest>div:nth-child(1) {
+  margin-bottom: 0.1rem;
+}
+
+.img5,.img6 {
+  width: 1.8rem;
+  height: 0.66rem;
+}
+
+.right-now {
+  width: 100%;
+  height: 1rem;
+  margin-top: 0.4rem;
+  background-color: #FA004B;
+}
+
+.hour,.minute,.second {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.52rem;
+  background-color: #FA004B;
+  border-radius: 0.04rem;
+  line-height: 0.52rem;
+  text-align: center;
+}
\ No newline at end of file

src/views/Pay/index.vue

+<template>
+  <div id="pay">
+    <status-bar>
+      <span>宝宝起名</span>
+    </status-bar>
+
+    <div class="pay-body">
+      <img class="img1" src="@/assets/img/pay/img1.png" alt="" />
+
+      <!-- 支付 -->
+      <div class="pay-info fc-6">
+        <div>
+          <div class="fs-32" style="margin-bottom: 0.12rem">
+            特惠价：<span class="fc-sys2">￥{{ cash }}</span>
+          </div>
+          <div class="fs-24" style="text-decoration: line-through">
+            原价：￥198
+          </div>
+        </div>
+
+        <div>
+          <span class="fs-24" style="margin-bottom: 0.12rem">机不可失</span>
+          <div class="fs-32">
+            <span class="hour fc-f">{{ hour }}</span>
+            <span>:</span>
+            <span class="minute fc-f">{{ minute }}</span>
+            <span>:</span>
+            <span class="second fc-f">{{ second }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 支付按钮 -->
+      <div class="pay-btn fc-f fs-40" @click="payment">立即支付</div>
+
+      <div class="num fs-28 fc-6">
+        <span
+          >已有 <span class="fc-sys2">3844948</span> 人为宝宝求得好名字</span
+        >
+      </div>
+
+      <div class="img2-father row-center-center">
+        <img class="img2" src="@/assets/img/pay/img2.png" alt="" />
+      </div>
+
+      <div class="col-start-center base-list ff-pp fw-4">
+        <!-- 基本信息 -->
+        <div>
+          <div class="title row-center-center fc-f fs-36">基本信息</div>
+          <div class="row-around-center name-info fc-3">
+            <div class="img3-father">
+              <img class="img3" src="@/assets/img/pay/img3.png" alt="" />
+              <div class="fs-100">{{ $route.query.name }}</div>
+            </div>
+            <div class="col-center-start fs-28">
+              <span
+                ><span class="fs-32">公历生辰</span>：{{
+                  $route.query.date
+                }}</span
+              >
+              <span style="margin: 0.06rem 0"
+                ><span class="fs-32">农历生辰</span>：{{ dateConvert }}</span
+              >
+              <span
+                ><span class="fs-32"
+                  >性<span style="color: #fff">性别</span>别</span
+                >：{{
+                  this.$route.query.gender == 1
+                    ? "男"
+                    : this.$route.query.gender == 2
+                    ? "女"
+                    : "未出生"
+                }}</span
+              >
+            </div>
+          </div>
+          <div class="img4-father">
+            <img class="img4" src="@/assets/img/pay/img4.png" alt="" />
+          </div>
+        </div>
+
+        <!-- 查看推荐美名 -->
+        <div>
+          <div class="title row-center-center fc-f fs-36">查看推荐美名</div>
+          <div class="fc-3 fs-32 name-recommend col-center-center">
+            <div>
+              根据宝宝出生特点，精心挑选200个<span class="fc-sys3"
+                >吉祥美名</span
+              >，且男女各提供一套名字。
+            </div>
+            <div>
+              丰富的起名经验，专业的起名算法，符合潮流但不盲从，年轻父母们的选择。
+            </div>
+          </div>
+          <div class="img4-father">
+            <img class="img4" src="@/assets/img/pay/img4.png" alt="" />
+          </div>
+        </div>
+
+        <!-- 诗词选名 -->
+        <div>
+          <div class="title row-center-center fc-f fs-36">诗词选名</div>
+          <div class="col-center-center name-select fc-3 fs-32">
+            <div>
+              专业姓名分析，参考大量千古传诵的诗词古文，深入研究传统文化，将美学与传统深度结合。
+            </div>
+            <div>诗词来源：诗经、乐府、唐诗、宋词等。</div>
+          </div>
+          <div class="img4-father">
+            <img class="img4" src="@/assets/img/pay/img4.png" alt="" />
+          </div>
+        </div>
+
+        <!-- 适宜用字 -->
+        <div>
+          <div class="title row-center-center fc-f fs-36">适宜用词</div>
+          <div class="col-center-center name-select fc-3 fs-32">
+            <div>
+              将传统<span class="fc-sys3">国学文化</span>与历史<span
+                class="fc-sys3"
+                >姓名大数据</span
+              >相结合，基于<span class="fc-sys3">智能算法</span>挑选合适的用字。
+            </div>
+            <div>“名以正体，字以表德”，是理想信念与美好期待的表达。</div>
+          </div>
+          <div class="img4-father">
+            <img class="img4" src="@/assets/img/pay/img4.png" alt="" />
+          </div>
+        </div>
+
+        <!-- 吉祥宝宝起名建议 -->
+        <div>
+          <div class="title row-center-center fc-f fs-32">吉祥宝宝起名建议</div>
+          <div class="name-suggest col-center-center fc-3 fs-32">
+            <div class="row-around-center" style="width: 100%">
+              <img class="img5" src="@/assets/img/pay/img5.png" alt="" />
+              <div>邓姓为左右结构，建议名字和姓要结构平衡，和谐一致。</div>
+            </div>
+            <div class="row-around-center" style="width: 100%">
+              <img class="img6" src="@/assets/img/pay/img6.png" alt="" />
+              <div>
+                邓姓为去声声调，建议合理搭配名字声调，才能朗朗上口，清新悦耳。
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="right-now row-center-center ff-pp fc-f fs-36"
+        @click="_gatewayCreateorder"
+      >
+        立刻获取200+套取名方案
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StatusBar from "@/components/StatusBar";
+import { calendar } from "@/utils/calendar";
+
+import API from "@/service/api";
+import utils from "@/utils";
+
+export default {
+  components: {
+    StatusBar,
+  },
+
+  data() {
+    return {
+      hour: "00",
+      minute: "00",
+      second: "00",
+      cash: 0,
+      babyInfo: {},
+    };
+  },
+
+  mounted() {
+    let endTime = new Date().getTime() + 0.5 * 60 * 60 * 1000;
+    let timer = setInterval(() => {
+      this.showtime(endTime);
+      if (new Date().getTime() >= endTime) {
+        clearInterval(timer);
+        this.hour = "00";
+        this.minute = "00";
+        this.second = "00";
+      }
+    }, 1000);
+
+    this._payConfig();
+    // this._gatewayCreateorder();
+  },
+
+  computed: {
+    // 农历转换
+    dateConvert() {
+      if (Object.keys(this.$route.query).length == 0) {
+        return;
+      }
+      var tempArr = this.$route.query.date.split("-");
+      tempArr = tempArr.map((item) => {
+        return parseInt(item);
+      });
+      var a = calendar.solar2lunar(tempArr[0], tempArr[1], tempArr[2]);
+      var day = a.lDay;
+      var month = a.lMonth;
+      var year = a.lYear;
+      day = day < 10 ? "0" + day : day;
+      month = month < 10 ? "0" + month : month;
+      return year + "-" + month + "-" + day;
+    },
+  },
+
+  methods: {
+    // 获取支付价格
+    _payConfig() {
+      let h5LogsObj = JSON.parse(decodeURI(utils.getCookie("h5LogsObj")));
+
+      API.API_payConfig({
+        pkg:
+          process.env.NODE_ENV == "development"
+            ? "com.h5game.bbqm"
+            : h5LogsObj.pkg,
+        zygt: "hzwz",
+        tgtk: 1,
+        uid: 1008611,
+      }).then((res) => {
+        console.log("获取支付价格===", res);
+        // this.originalPrice = res.result.data.goodsList[0].originalPrice;
+        this.cash = res.result.data.goodsList[0].originalPrice;
+      });
+    },
+
+    // 创建订单，开启支付
+    async _gatewayCreateorder() {
+      utils.setCookie("babyInfo", JSON.stringify(this.$route.query), 0); // 将宝宝信息存储到cookie中
+
+      let h5LogsObj = JSON.parse(decodeURI(utils.getCookie("h5LogsObj")));
+
+      // 创建订单，获取orderId
+      let params = await API.API_createorder({
+        // source:
+        //   process.env.NODE_ENV == "development" ? "toutiao" : h5LogsObj.source,
+        zygt: "hzwz",
+        tgtk: 1,
+        pkg: "com.h5.bbqm",
+        firstName: this.$route.query.name,
+        gender: this.$route.query.gender,
+        datadate: this.$route.query.date,
+        source: "toutiao",
+      });
+
+      utils.setCookie("orderId", params.orderId, 0); // 将orderId添加到cookie中
+
+      API.API_gatewayCreateorder({
+        payPlatform: 1,
+        payType: 2,
+        wxType: "H5Page",
+        orderType: 5,
+        // pkg: h5LogsObj.pkg,
+        pkg: "com.h5game.bbqm",
+        outTradeNo: params.orderId,
+        totalFee: 1,
+      }).then((res) => {
+        let mwebUrl = res.result.data.wakeup.mwebUrl;
+        let tempUrl = window.location.href;
+        tempUrl = tempUrl.replace("pay", "result");
+        window.location.href = `${mwebUrl}&redirect_url=${tempUrl}?pay_cb=1`;
+      });
+    },
+
+    // 倒计时
+    showtime(endTime) {
+      let nowTime = new Date().getTime();
+      let final = endTime - nowTime;
+
+      this.hour = Math.floor((final / (1000 * 60 * 60)) % 24); //计算小时数
+      this.hour = this.hour < 10 ? "0" + this.hour : this.hour;
+
+      this.minute = Math.floor((final / (1000 * 60)) % 60); //计算分钟数
+      this.minute = this.minute < 10 ? "0" + this.minute : this.minute;
+
+      this.second = Math.floor((final / 1000) % 60); //计算秒数
+      this.second = this.second < 10 ? "0" + this.second : this.second;
+    },
+
+    // 支付
+    payment() {
+      this._gatewayCreateorder();
+    },
+  },
+};
+</script>
+
+<style scoped src='./index.css'>
+</style>
\ No newline at end of file

src/views/Result/index.css

+#result {
+  width: 100%;
+  position: relative;
+}
+
+.result-body {
+  width: 100%;
+  position: relative;
+  background: url(~@/assets/img/result/bg1.png) no-repeat;
+  background-size: cover;
+  background-color: #DBF3FE;
+}
+
+.analyse {
+  width: 7.22rem;
+  height: 11rem;
+  margin-top: 0.42rem;
+  position: relative;
+  background-color: #fff;
+  border-radius: 0.16rem;
+  opacity: 0.9;
+
+  padding: 0 0.4rem;
+  box-sizing: border-box;
+}
+
+
+.title {
+  width: 3.56rem;
+  height: 0.6rem;
+  position: absolute;
+  top: 0.4rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 0.31rem;
+  background-color: #7EBBFF;
+  line-height: 0.6rem;
+  text-align: center;
+}
+
+.baby-info {
+  padding: 0 0.1rem;
+  margin-top: 1.5rem;
+}
+
+.baby-info>div {
+  margin-bottom: 0.2rem;
+}
+
+.baby-info>div:nth-child(1)  {
+  margin-bottom: 0.3rem;
+}
+
+.img3 {
+  position: absolute;
+  bottom: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6.42rem;
+  height: 0.7rem;
+  z-index: 2;
+}
+
+.recommend {
+  position: relative;
+  width: 7.22rem;
+  height: 22.12rem;
+  background-color: #fff;
+  border-radius: 0.16rem;
+  opacity: 0.9;
+  margin: 0.3rem 0;
+}
+
+.name {
+  width: 6.9rem;
+  background: #F3F9FF;
+  border-radius: 0.32rem;
+  border: 0.02rem solid #7FBBFE;
+  margin-top: 1.4rem;
+  overflow: hidden;
+}
+
+.img1,.img2 {
+  width: 3.45rem;
+  height: 1.12rem;
+}
+
+.name-list {
+  flex-wrap: wrap;
+}
+
+.name-list>div {
+  width: 50%;
+  margin-bottom: 0.78rem;
+}
+
+.img5 {
+  width: 0.96rem;
+  height: 0.96rem;
+}
+
+.only-text {
+  width: 0.96rem;
+  height: 0.96rem;
+  position: relative;
+  background: url(~@/assets/img/result/img5.png) no-repeat;
+  background-size: cover;
+}
+
+.name-list>div:nth-child(2n-1) .only-text {
+  
+  background: url(~@/assets/img/result/img5-1.png) no-repeat;
+  background-size: cover;
+}
+
+.only-text>div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file

src/views/Result/index.vue

+<template>
+  <div id="result">
+    <status-bar>
+      <span>宝宝起名</span>
+    </status-bar>
+
+    <div class="result-body col-center-center fs-32 fw-400 ff-pp fc-3">
+      <!-- 分析报告 -->
+      <div class="analyse">
+        <div class="title fs-36 fc-f">邓宝宝的分析报告</div>
+
+        <div class="baby-info">
+          <div>基本资料</div>
+          <div>姓名：邓</div>
+          <div>性别：男</div>
+          <div>公历：2020年7月28日 时辰未知</div>
+          <div>农历：二零二零年六月初八 时辰未知</div>
+        </div>
+
+        <div class="fc-sys4 fs-36" style="margin-top: 0.1rem">
+          基于智能大数据分析，宝宝将来会有以下性格特点
+        </div>
+
+        <div style="margin-top: 0.12rem">
+          个性明朗，积极乐观，活泼热情，给人洒脱、豪爽、具有活力的印象，思想、观念很开明，喜欢独立思考。很有幽默感，能很快活跃气氛，而且重情重义，很在乎朋友间的情谊与承诺，常为朋友出头。
+        </div>
+
+        <div class="fs-36 fc-sys4" style="margin-top: 0.3rem">
+          起名风格偏好推荐
+        </div>
+
+        <div class="fc-sys3" style="margin-top: 0.12rem">
+          勇敢、有毅力、自律、睿智、自信、成功、敏锐
+        </div>
+
+        <div style="margin-top: 0.12rem">
+          符合上述这些风格的名字有利于宝宝健康成长，对于一生的发展都会有帮助！
+        </div>
+
+        <img class="img3" src="@/assets/img/result/img3.png" alt="" />
+      </div>
+
+      <div class="recommend row-center-start">
+        <div class="title fs-36 fc-f">推荐好名</div>
+
+        <div class="name">
+          <div class="row-between-center" style="margin-bottom: 0.6rem">
+            <template v-for="(item, i) in imgInfo">
+              <img
+                class="img1"
+                :src="item.flag ? item.src : item.src_deactive"
+                alt=""
+                :key="i"
+                @click="convertImg(item)"
+              />
+            </template>
+          </div>
+
+          <div v-if="words == 3" class="name-list row-center-center">
+            <template v-for="item in nameList">
+              <div :key="item.id" class="row-around-center">
+                <div class="only-text">
+                  <div>{{ item.name.substr(0, 1) }}</div>
+                </div>
+                <div class="only-text">
+                  <div>{{ item.name.substr(1, 1) }}</div>
+                </div>
+                <div class="only-text">
+                  <div>{{ item.name.substr(2, 1) }}</div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <div v-if="words == 2" class="name-list row-center-center">
+            <template v-for="item in nameList">
+              <div :key="item.id" class="row-around-center">
+                <div class="only-text">
+                  <div>{{ item.name.substr(0, 1) }}</div>
+                </div>
+                <div class="only-text">
+                  <div>{{ item.name.substr(1, 1) }}</div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <div class="col-center-center" style="margin-bottom: 0.3rem">
+            <div>xxx</div>
+            <div class="fc-9 fs-28">一共有200个起名推荐，请翻页查看</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StatusBar from "@/components/StatusBar";
+
+import img1 from "@/assets/img/result/img1.png";
+import img2 from "@/assets/img/result/img2.png";
+import img1_1 from "@/assets/img/result/img1-1.png";
+import img2_1 from "@/assets/img/result/img2-1.png";
+
+import utils from "@/utils";
+import API from "@/service/api";
+
+export default {
+  components: {
+    StatusBar,
+  },
+
+  data() {
+    return {
+      imgInfo: [
+        { src: img1, flag: true, src_deactive: img1_1, id: 1, words: 3 },
+        { src: img2, flag: false, src_deactive: img2_1, id: 2, words: 2 },
+      ],
+      babyInfo: {},
+      nameList: [],
+      words: 3,
+    };
+  },
+
+  mounted() {
+    this.getBabyInfo();
+    this._fetchName();
+  },
+
+  methods: {
+    // 网络请求 获取宝宝姓名
+    _fetchName() {
+      let params = {
+        zygt: "hzwz",
+        tgtk: 1,
+        pkg: "com.h5.bbqm",
+        orderId: "1377535433709146112",
+        words: this.words,
+        page: 19,
+      };
+      API.API_fetchName(params).then((res) => {
+        this.nameList = res.result.data;
+      });
+    },
+
+    // 但双字切换
+    convertImg(item) {
+      this.words = item.words;
+      this.imgInfo.map((option) => {
+        if (option.id == item.id) {
+          return (option.flag = true);
+        } else {
+          return (option.flag = false);
+        }
+      });
+      this._fetchName();
+    },
+
+    // 获取宝宝信息
+    getBabyInfo() {
+      var i = utils.getCookie("babyInfo");
+      this.babyInfo = JSON.parse(i);
+    },
+  },
+};
+</script>
+
+<style scoped src='./index.css'>
+</style>
\ No newline at end of file