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;
 }
@@ -10,3 +41,12 @@
 .fs-40 {
   font-size: 0.4rem;
 }
+
+.fs-60 {
+  font-size: 0.6rem;
+}
+
+.fs-100 {
+  font-size: 1rem;
+}
+

src/components/StatusBar/index.vue

 <template>
+  <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/calendar.js

+/**
+* @1900-2100区间内的公历、农历互转
+* @charset UTF-8
+* @Author  Jea杨(JJonline@JJonline.Cn)
+* @Time    2014-7-21
+* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
+* @Version 1.0.3
+* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+*/
+export var calendar = {
+
+    /**
+      * 农历1900-2100的润大小信息表
+      * @Array Of Property
+      * @return Hex
+      */
+    lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
+            0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
+            0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
+            0x06566,0x0d4a0,0x0ea50,0x16a95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
+            0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
+            0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
+            0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
+            0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
+            0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
+            0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x05ac0,0x0ab60,0x096d5,0x092e0,//1990-1999
+            0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
+            0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
+            0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
+            0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
+            0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
+            /**Add By JJonline@JJonline.Cn**/
+            0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50, 0x06b20,0x1a6c4,0x0aae0,//2050-2059
+            0x092e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
+            0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
+            0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
+            0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
+            0x0d520],//2100
+
+    /**
+      * 公历每个月份的天数普通表
+      * @Array Of Property
+      * @return Number
+      */
+    solarMonth:[31,28,31,30,31,30,31,31,30,31,30,31],
+
+    /**
+      * 天干地支之天干速查表
+      * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+      * @return Cn string
+      */
+    Gan:["\u7532","\u4e59","\u4e19","\u4e01","\u620a","\u5df1","\u5e9a","\u8f9b","\u58ec","\u7678"],
+
+    /**
+      * 天干地支之地支速查表
+      * @Array Of Property
+      * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+      * @return Cn string
+      */
+    Zhi:["\u5b50","\u4e11","\u5bc5","\u536f","\u8fb0","\u5df3","\u5348","\u672a","\u7533","\u9149","\u620c","\u4ea5"],
+
+    /**
+      * 天干地支之地支速查表<=>生肖
+      * @Array Of Property
+      * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+      * @return Cn string
+      */
+    Animals:["\u9f20","\u725b","\u864e","\u5154","\u9f99","\u86c7","\u9a6c","\u7f8a","\u7334","\u9e21","\u72d7","\u732a"],
+    
+    /**
+     * 阳历节日
+     */
+    festival: {
+      '1-1':   {title: '元旦节'},
+      '2-14':  {title: '情人节'},
+      '5-1':   {title: '劳动节'},
+      '5-4':   {title: '青年节'},
+      '6-1':   {title: '儿童节'},
+      '9-10':  {title: '教师节'},
+      '10-1':  {title: '国庆节'},
+      '12-25': {title: '圣诞节'},
+
+      '3-8':   {title: '妇女节'},
+      '3-12':  {title: '植树节'},
+      '4-1':   {title: '愚人节'},
+      '5-12':  {title: '护士节'},
+      '7-1':   {title: '建党节'},
+      '8-1':   {title: '建军节'},
+      '12-24': {title: '平安夜'},
+    },
+
+    /**
+     * 农历节日
+     */
+    lfestival: {
+      '12-30': {title: '除夕'},
+      '1-1':   {title: '春节'},
+      '1-15':  {title: '元宵节'},
+      '5-5':   {title: '端午节'},
+      '8-15':  {title: '中秋节'},
+      '9-9':   {title: '重阳节'},
+    },
+
+    /**
+     * 返回默认定义的阳历节日
+     */
+    getFestival(){
+      return this.festival
+    },
+
+    /**
+     * 返回默认定义的内容里节日
+     */
+    getLunarFestival(){
+      return this.lfestival
+    },
+
+    /**
+     * 
+     * @param {Object} 按照festival的格式输入数据，设置阳历节日
+     */
+    setFestival(param={}){
+      this.festival = param
+    },
+
+    /**
+     * 
+     * @param {Object} 按照lfestival的格式输入数据，设置农历节日
+     */
+    setLunarFestival(param={}){
+      this.lfestival = param
+    },
+
+    /**
+      * 24节气速查表
+      * @Array Of Property
+      * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+      * @return Cn string
+      */
+    solarTerm:["\u5c0f\u5bd2","\u5927\u5bd2","\u7acb\u6625","\u96e8\u6c34","\u60ca\u86f0","\u6625\u5206","\u6e05\u660e","\u8c37\u96e8","\u7acb\u590f","\u5c0f\u6ee1","\u8292\u79cd","\u590f\u81f3","\u5c0f\u6691","\u5927\u6691","\u7acb\u79cb","\u5904\u6691","\u767d\u9732","\u79cb\u5206","\u5bd2\u9732","\u971c\u964d","\u7acb\u51ac","\u5c0f\u96ea","\u5927\u96ea","\u51ac\u81f3"],
+
+    /**
+      * 1900-2100各年的24节气日期速查表
+      * @Array Of Property
+      * @return 0x string For splice
+      */
+    sTermInfo:['9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f',
+              '97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+              '97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa',
+              '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f',
+              'b027097bd097c36b0b6fc9274c91aa','9778397bd19801ec9210c965cc920e','97b6b97bd19801ec95f8c965cc920f',
+              '97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2','9778397bd197c36c9210c9274c91aa',
+              '97b6b97bd19801ec95f8c965cc920e','97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2',
+              '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e','97bcf97c3598082c95f8e1cfcc920f',
+              '97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e',
+              '97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+              '97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722',
+              '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f',
+              '97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+              '97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+              '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd097bd07f595b0b6fc920fb0722',
+              '9778397bd097c36b0b6fc9210c8dc2','9778397bd19801ec9210c9274c920e','97b6b97bd19801ec95f8c965cc920f',
+              '97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
+              '97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
+              '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e','97bd07f1487f595b0b0bc920fb0722',
+              '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+              '97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+              '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+              '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722',
+              '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+              '97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+              '97b6b97bd19801ec9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+              '9778397bd097c36b0b6fc9210c91aa','97b6b97bd197c36c9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722',
+              '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
+              '97b6b7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
+              '9778397bd097c36b0b70c9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
+              '7f0e397bd097c35b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
+              '7f0e27f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+              '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+              '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+              '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
+              '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+              '97b6b7f0e47f531b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+              '9778397bd097c36b0b6fc9210c91aa','97b6b7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+              '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','977837f0e37f149b0723b0787b0721',
+              '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c35b0b6fc9210c8dc2',
+              '977837f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
+              '7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+              '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','977837f0e37f14998082b0787b06bd',
+              '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+              '977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+              '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+              '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd',
+              '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+              '977837f0e37f14998082b0723b06bd','7f07e7f0e37f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+              '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721',
+              '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f595b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5',
+              '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f531b0b0bb0b6fb0722',
+              '7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+              '7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
+              '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35',
+              '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+              '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721',
+              '7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd',
+              '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35',
+              '7ec967f0e37f14998082b0723b06bd','7f07e7f0e37f14998083b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+              '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14898082b0723b02d5','7f07e7f0e37f14998082b0787b0721',
+              '7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66aa89801e9808297c35','665f67f0e37f14898082b0723b02d5',
+              '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66a449801e9808297c35',
+              '665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+              '7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
+              '7f07e7f0e47f531b0723b0b6fb0721','7f0e26665b66a449801e9808297c35','665f67f0e37f1489801eb072297c35',
+              '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722'],
+
+    /**
+      * 数字转中文速查表
+      * @Array Of Property
+      * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+      * @return Cn string
+      */
+    nStr1:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341"],
+
+    /**
+      * 日期转农历称呼速查表
+      * @Array Of Property
+      * @trans ['初','十','廿','卅']
+      * @return Cn string
+      */
+    nStr2:["\u521d","\u5341","\u5eff","\u5345"],
+
+    /**
+      * 月份转农历称呼速查表
+      * @Array Of Property
+      * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+      * @return Cn string
+      */
+    nStr3:["\u6b63","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u51ac","\u814a"],
+
+    /**
+      * 返回农历y年一整年的总天数
+      * @param lunar Year
+      * @return Number
+      * @eg:var count = calendar.lYearDays(1987) ;//count=387
+      */
+    lYearDays:function(y) {
+        var i, sum = 348;
+        for(i=0x8000; i>0x8; i>>=1) { sum += (this.lunarInfo[y-1900] & i)? 1: 0; }
+        return(sum+this.leapDays(y));
+    },
+
+    /**
+      * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+      * @param lunar Year
+      * @return Number (0-12)
+      * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+      */
+    leapMonth:function(y) { //闰字编码 \u95f0
+        return(this.lunarInfo[y-1900] & 0xf);
+    },
+
+    /**
+      * 返回农历y年闰月的天数 若该年没有闰月则返回0
+      * @param lunar Year
+      * @return Number (0、29、30)
+      * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+      */
+    leapDays:function(y) {
+        if(this.leapMonth(y))  {
+            return((this.lunarInfo[y-1900] & 0x10000)? 30: 29);
+        }
+        return(0);
+    },
+
+    /**
+      * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+      * @param lunar Year
+      * @return Number (-1、29、30)
+      * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+      */
+    monthDays:function(y,m) {
+        if(m>12 || m<1) {return -1}//月份参数从1至12，参数错误返回-1
+        return( (this.lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );
+    },
+
+    /**
+      * 返回公历(!)y年m月的天数
+      * @param solar Year
+      * @return Number (-1、28、29、30、31)
+      * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+      */
+    solarDays:function(y,m) {
+        if(m>12 || m<1) {return -1} //若参数错误 返回-1
+        var ms = m-1;
+        if(ms==1) { //2月份的闰平规律测算后确认返回28或29
+            return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);
+        }else {
+            return(this.solarMonth[ms]);
+        }
+    },
+
+    /**
+     * 农历年份转换为干支纪年
+     * @param  lYear 农历年的年份数
+     * @return Cn string
+     */
+    toGanZhiYear:function(lYear) {
+        var ganKey = (lYear - 3) % 10;
+        var zhiKey = (lYear - 3) % 12;
+        if(ganKey == 0) ganKey = 10;//如果余数为0则为最后一个天干
+        if(zhiKey == 0) zhiKey = 12;//如果余数为0则为最后一个地支
+        return this.Gan[ganKey-1] + this.Zhi[zhiKey-1];
+
+    },
+
+    /**
+     * 公历月、日判断所属星座
+     * @param  cMonth [description]
+     * @param  cDay [description]
+     * @return Cn string
+     */
+    toAstro:function(cMonth,cDay) {
+        var s   = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
+        var arr = [20,19,21,21,21,22,23,23,23,23,22,22];
+        return s.substr(cMonth*2 - (cDay < arr[cMonth-1] ? 2 : 0),2) + "\u5ea7";//座
+    },
+
+    /**
+      * 传入offset偏移量返回干支
+      * @param offset 相对甲子的偏移量
+      * @return Cn string
+      */
+    toGanZhi:function(offset) {
+        return this.Gan[offset%10] + this.Zhi[offset%12];
+    },
+
+    /**
+      * 传入公历(!)y年获得该年第n个节气的公历日期
+      * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+      * @return day Number
+      * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+      */
+    getTerm:function(y,n) {
+        if(y<1900 || y>2100) {return -1;}
+        if(n<1 || n>24) {return -1;}
+        var _table = this.sTermInfo[y-1900];
+        var _info = [
+            parseInt('0x'+_table.substr(0,5)).toString() ,
+            parseInt('0x'+_table.substr(5,5)).toString(),
+            parseInt('0x'+_table.substr(10,5)).toString(),
+            parseInt('0x'+_table.substr(15,5)).toString(),
+            parseInt('0x'+_table.substr(20,5)).toString(),
+            parseInt('0x'+_table.substr(25,5)).toString()
+        ];
+        var _calday = [
+            _info[0].substr(0,1),
+            _info[0].substr(1,2),
+            _info[0].substr(3,1),
+            _info[0].substr(4,2),
+
+            _info[1].substr(0,1),
+            _info[1].substr(1,2),
+            _info[1].substr(3,1),
+            _info[1].substr(4,2),
+
+            _info[2].substr(0,1),
+            _info[2].substr(1,2),
+            _info[2].substr(3,1),
+            _info[2].substr(4,2),
+
+            _info[3].substr(0,1),
+            _info[3].substr(1,2),
+            _info[3].substr(3,1),
+            _info[3].substr(4,2),
+
+            _info[4].substr(0,1),
+            _info[4].substr(1,2),
+            _info[4].substr(3,1),
+            _info[4].substr(4,2),
+
+            _info[5].substr(0,1),
+            _info[5].substr(1,2),
+            _info[5].substr(3,1),
+            _info[5].substr(4,2),
+        ];
+        return parseInt(_calday[n-1]);
+    },
+
+    /**
+      * 传入农历数字月份返回汉语通俗表示法
+      * @param lunar month
+      * @return Cn string
+      * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+      */
+    toChinaMonth:function(m) { // 月 => \u6708
+        if(m>12 || m<1) {return -1} //若参数错误 返回-1
+        var s = this.nStr3[m-1];
+        s+= "\u6708";//加上月字
+        return s;
+    },
+
+    /**
+      * 传入农历日期数字返回汉字表示法
+      * @param lunar day
+      * @return Cn string
+      * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+      */
+    toChinaDay:function(d){ //日 => \u65e5
+        var s;
+        switch (d) {
+            case 10:
+            s = '\u521d\u5341'; break;
+        case 20:
+            s = '\u4e8c\u5341'; break;
+            break;
+        case 30:
+            s = '\u4e09\u5341'; break;
+            break;
+        default :
+            s = this.nStr2[Math.floor(d/10)];
+            s += this.nStr1[d%10];
+        }
+        return(s);
+    },
+
+    /**
+      * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+      * @param y year
+      * @return Cn string
+      * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+      */
+    getAnimal: function(y) {
+        return this.Animals[(y - 4) % 12]
+    },
+
+    /**
+      * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+      * @param y  solar year
+      * @param m  solar month
+      * @param d  solar day
+      * @return JSON object
+      * @eg:console.log(calendar.solar2lunar(1987,11,01));
+      */
+    solar2lunar:function (y,m,d) { //参数区间1900.1.31~2100.12.31
+        y = parseInt(y)
+        m = parseInt(m)
+        d = parseInt(d)
+        //年份限定、上限
+        if(y<1900 || y>2100) {
+            return -1;// undefined转换为数字变为NaN
+        }
+        //公历传参最下限
+        if(y==1900&&m==1&&d<31) {
+            return -1;
+        }
+        //未传参  获得当天
+        if(!y) {
+            var objDate = new Date();
+        }else {
+            var objDate = new Date(y,parseInt(m)-1,d)
+        }
+        var i, leap=0, temp=0;
+        //修正ymd参数
+        var y = objDate.getFullYear(),
+            m = objDate.getMonth()+1,
+            d = objDate.getDate();
+        var offset = (Date.UTC(objDate.getFullYear(),objDate.getMonth(),objDate.getDate()) - Date.UTC(1900,0,31))/86400000;
+        for(i=1900; i<2101 && offset>0; i++) {
+            temp    = this.lYearDays(i);
+            offset -= temp;
+        }
+        if(offset<0) {
+            offset+=temp; i--;
+        }
+
+        //是否今天
+        var isTodayObj = new Date(),
+            isToday    = false;
+        if(isTodayObj.getFullYear()==y && isTodayObj.getMonth()+1==m && isTodayObj.getDate()==d) {
+            isToday = true;
+        }
+        //星期几
+        var nWeek = objDate.getDay(),
+           cWeek  = this.nStr1[nWeek];
+        //数字表示周几顺应天朝周一开始的惯例
+        if(nWeek==0) {
+            nWeek = 7;
+        }
+        //农历年
+        var year   = i;
+        var leap   = this.leapMonth(i); //闰哪个月
+        var isLeap = false;
+
+        //效验闰月
+        for(i=1; i<13 && offset>0; i++) {
+            //闰月
+            if(leap>0 && i==(leap+1) && isLeap==false){
+                --i;
+                isLeap = true; temp = this.leapDays(year); //计算农历闰月天数
+            }
+            else{
+                temp = this.monthDays(year, i);//计算农历普通月天数
+            }
+            //解除闰月
+            if(isLeap==true && i==(leap+1)) { isLeap = false; }
+            offset -= temp;
+        }
+        // 闰月导致数组下标重叠取反
+        if(offset==0 && leap>0 && i==leap+1)
+        {
+            if(isLeap){
+                isLeap = false;
+            }else{
+                isLeap = true; --i;
+            }
+        }
+        if(offset<0)
+        {
+            offset += temp; --i;
+        }
+        //农历月
+        var month      = i;
+        //农历日
+        var day        = offset + 1;
+        //天干地支处理
+        var sm         = m-1;
+        var gzY        = this.toGanZhiYear(year);
+
+        // 当月的两个节气
+        // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
+        var firstNode  = this.getTerm(y,(m*2-1));//返回当月「节」为几日开始
+        var secondNode = this.getTerm(y,(m*2));//返回当月「节」为几日开始
+
+        // 依据12节气修正干支月
+        var gzM        = this.toGanZhi((y-1900)*12+m+11);
+        if(d>=firstNode) {
+            gzM        = this.toGanZhi((y-1900)*12+m+12);
+        }
+
+        //传入的日期的节气与否
+        var isTerm = false;
+        var Term   = null;
+        if(firstNode==d) {
+            isTerm  = true;
+            Term    = this.solarTerm[m*2-2];
+        }
+        if(secondNode==d) {
+            isTerm  = true;
+            Term    = this.solarTerm[m*2-1];
+        }
+        //日柱 当月一日与 1900/1/1 相差天数
+        var dayCyclical = Date.UTC(y,sm,1,0,0,0,0)/86400000+25567+10;
+        var gzD         = this.toGanZhi(dayCyclical+d-1);
+        //该日期所属的星座
+        var astro       = this.toAstro(m,d);
+
+        var solarDate = y+'-'+m+'-'+d
+        var lunarDate = year+'-'+month+'-'+day
+
+        var festival = this.festival
+        var lfestival = this.lfestival
+
+        var festivalDate = m+'-'+d
+        var lunarFestivalDate = month+'-'+day
+
+        return {
+          date: solarDate,
+          lunarDate: lunarDate,
+          festival: festival[festivalDate] ? festival[festivalDate].title : null,
+          lunarFestival: lfestival[lunarFestivalDate] ? lfestival[lunarFestivalDate].title : null,
+          'lYear':year,
+          'lMonth':month,
+          'lDay':day,
+          'Animal':this.getAnimal(year),
+          'IMonthCn':(isLeap?"\u95f0":'')+this.toChinaMonth(month),
+          'IDayCn':this.toChinaDay(day),
+          'cYear':y,
+          'cMonth':m,
+          'cDay':d,
+          'gzYear':gzY,
+          'gzMonth':gzM,
+          'gzDay':gzD,
+          'isToday':isToday,
+          'isLeap':isLeap,
+          'nWeek':nWeek,
+          'ncWeek':"\u661f\u671f"+cWeek,
+          'isTerm':isTerm,
+          'Term':Term,
+          'astro':astro
+        };
+    },
+
+    /**
+      * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+      * @param y  lunar year
+      * @param m  lunar month
+      * @param d  lunar day
+      * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+      * @return JSON object
+      * @eg:console.log(calendar.lunar2solar(1987,9,10));
+      */
+    lunar2solar:function(y,m,d,isLeapMonth) {   //参数区间1900.1.31~2100.12.1
+        y = parseInt(y)
+        m = parseInt(m)
+        d = parseInt(d)
+        var isLeapMonth = !!isLeapMonth;
+        var leapOffset  = 0;
+        var leapMonth   = this.leapMonth(y);
+        var leapDay     = this.leapDays(y);
+        if(isLeapMonth&&(leapMonth!=m)) {return -1;}//传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+        if(y==2100&&m==12&&d>1 || y==1900&&m==1&&d<31) {return -1;}//超出了最大极限值
+        var day  = this.monthDays(y,m);
+        var _day = day;
+        //bugFix 2016-9-25
+        //if month is leap, _day use leapDays method
+        if(isLeapMonth) {
+            _day = this.leapDays(y,m);
+        }
+        if(y < 1900 || y > 2100 || d > _day) {return -1;}//参数合法性效验
+
+        //计算农历的时间差
+        var offset = 0;
+        for(var i=1900;i<y;i++) {
+            offset+=this.lYearDays(i);
+        }
+        var leap = 0,isAdd= false;
+        for(var i=1;i<m;i++) {
+            leap = this.leapMonth(y);
+            if(!isAdd) {//处理闰月
+                if(leap<=i && leap>0) {
+                    offset+=this.leapDays(y);isAdd = true;
+                }
+            }
+            offset+=this.monthDays(y,i);
+        }
+        //转换闰月农历 需补充该年闰月的前一个月的时差
+        if(isLeapMonth) {offset+=day;}
+        //1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+        var stmap   =   Date.UTC(1900,1,30,0,0,0);
+        var calObj  =   new Date((offset+d-31)*86400000+stmap);
+        var cY      =   calObj.getUTCFullYear();
+        var cM      =   calObj.getUTCMonth()+1;
+        var cD      =   calObj.getUTCDate();
+
+        return this.solar2lunar(cY,cM,cD);
+    }
+};

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