1

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package-lock.json

@@ -2428,6 +2428,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -2550,6 +2558,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.5.1.tgz",
@@ -3840,6 +3853,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
+      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
     "css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1604507262318&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -5442,8 +5463,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz?cache=0&sync_timestamp=1597059692702&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.0.tgz",
-      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=",
-      "dev": true
+      "integrity": "sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs="
     },
     "for-in": {
       "version": "1.0.2",
@@ -5971,6 +5991,14 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.7.tgz",
+      "integrity": "sha512-yvPNZGejB2KOyKleZspjK/NruXVQuowu8NnV2HYG7gW7ytzl+umffbtUI62v2dCHQLDdsK6HIDtyJZ0W3neerA==",
+      "requires": {
+        "css-line-break": "1.1.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz?cache=0&sync_timestamp=1607394274032&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-3.10.1.tgz",

package.json

@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.14.1",
+    "html2canvas": "^1.0.0-rc.7",
     "vant": "^2.11.3",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/App.vue

@@ -13,7 +13,7 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  /* text-align: center; */
   color: #2c3e50;
 }
 

src/api/ajax.js

@@ -0,0 +1,73 @@
+import axios from 'axios';
+import qs from 'qs';
+import { Message } from 'element-ui';
+// import {BASE_URL} from '/wx'
+
+axios.defaults.baseURL = '/api';
+axios.defaults.headers.common['Content-Type'] = 'application/json; charset=UTF-8';
+//网络请求
+export default function ajax(url, data = {}, type = 'GET', isupload) {
+  return new Promise(function(resolve, reject) {
+    let promise;
+    if (type === 'GET') {
+      let dataStr = '';
+      Object.keys(data).forEach(key => {
+        dataStr += key + '=' + data[key] + '&';
+      });
+      if (dataStr !== '') {
+        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'));
+        url = url + '?' + dataStr;
+      }
+      promise = axios.get(url);
+    } else if (type === 'DELETE') {
+      let dataString = '';
+      Object.keys(data).forEach(key => {
+        dataString += key + '=' + data[key] + '&';
+      });
+      if (dataString !== '') {
+        dataString = dataString.substring(0, dataString.lastIndexOf('&'));
+        url = url + '?' + dataString;
+      }
+      promise = axios.delete(url);
+    } else {
+      if (isupload) {
+        promise = axios.post(url, data, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+          transformRequest: [
+            function(data) {
+              return data;
+            },
+          ],
+        });
+      } else {
+        promise = axios.post(url, qs.stringify(data));
+      }
+    }
+    promise
+      .then(function(response) {
+        if (response.data.msg == '请求成功') {
+          resolve(response.data);
+        } else {
+          if (response.data.msg) {
+            // Message({
+            //   message: response.data.msg,
+            //   type: 'error',
+            //   duration: 5000,
+            // });
+          }
+          resolve(response.data);
+        }
+      })
+      .catch(function(error) {
+        Message({
+          message: '系统异常，请联系管理员',
+          type: 'error',
+          duration: 5000,
+        });
+        // console.error("异常", error);
+        reject(error);
+      });
+  });
+}

src/api/baseUrl.js

@@ -0,0 +1 @@
+export const BASE_URL = 'https://yuehe.hellevil.com/';

src/api/index.js

@@ -0,0 +1,16 @@
+import ajax from './ajax';
+let openId = 'oeYBv5YNe7H98VMH3kp4qNofgrF4';
+// 获取表单项
+export const getForm = params => ajax(`/wx/member/${openId}/options`, params, 'GET');
+// 获取首页活动列表
+export const getActives = params => ajax(`/wx/member/${openId}/actives`, params, 'GET');
+// 我的 获取心动次数显示
+export const getHeartTimes = params => ajax(`/wx/actives/${openId}/0/myHearts`, params, 'GET');
+// 我的 获取被心动次数显示
+export const getHeartedTimes = params => ajax(`/wx/actives/${openId}/0/myHearted`, params, 'GET');
+//获取我的活动
+export const getMyActives = params => ajax(`/wx/member/${openId}/myActive`, params, 'GET');
+// 判断个人信息是否填写
+export const getPersonInfo = params => ajax(`/wx/member/${openId}/info`, params, 'GET');
+// 获取活动详情
+export const getActiveDetails = (params, id) => ajax(`/wx/actives/${openId}/${id}/detail`, params, 'GET');

src/components/tabbar.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="tabbar">
-    <div class="t1">
-      <img src="../assets/active_bar1.png" alt="" />
-      <p>首页</p>
-    </div>
-    <div class="t1">红娘</div>
-    <div class="t1">我的</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "tabbar",
-};
-</script>
-<style scoped>
-.tabbar {
-  width: 100%;
-  height: 50px;
-  background-color: #fff;
-  box-shadow: 0 0 10rpx 10rpx #eceafa;
-  display: flex;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  border: 1px solid red;
-}
-.t1 {
-  width: 33%;
-  height: 100%;
-  border: 1px solid red;
-  text-align: center;
-}
-.t1 img{
-  width: 30px;
-  height:30px;
-}
-</style>

src/main.js

@@ -6,7 +6,10 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import Vant from 'vant';
 import 'vant/lib/index.css';
+import { Swipe, SwipeItem } from 'vant';
 
+Vue.use(Swipe);
+Vue.use(SwipeItem);
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
 Vue.use(Vant);

src/pages/activeDetails.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div style="background: #fff">
+      <img
+        src="../assets/activeimg.png"
+        style="width: 94%; height: 180px; margin-left: 3%"
+      />
+      <div class="line">
+        <van-icon
+          name="like-o"
+          size="20px"
+          color="#906cff"
+          style="margin-left: 17px; margin-bottom: 17px"
+        />
+        <p style="margin-left: 17px">已报名{{ actualCount }}/{{ planCount }}</p>
+      </div>
+      <div style="background: #fcf9ff; width: 100%; height: 10px"></div>
+      <div class="line" style="border-bottom: 1px solid #eeeeee">
+        <van-icon
+          name="clock-o"
+          size="20px"
+          color="#906cff"
+          style="margin-left: 17px; margin-bottom: 17px"
+        />
+        <p style="margin-left: 17px">活动时间：{{ activeStart }}</p>
+      </div>
+      <div class="line">
+        <van-icon
+          name="location-o"
+          size="20px"
+          color="#906cff"
+          style="margin-left: 17px; margin-bottom: 17px"
+        />
+        <p style="margin-left: 17px">地址：{{ address }}</p>
+      </div>
+      <div style="background: #fcf9ff; width: 100%; height: 10px"></div>
+      <div class="title">
+        <div
+          style="
+            background-color: #8d6dff;
+            width: 5px;
+            height: 22px;
+            border-radius: 2px;
+          "
+        ></div>
+        <div style="color: #333333; margin-left: 10px; font-size: 14px">
+          活动详情
+        </div>
+      </div>
+      <div style="color: #999999; margin: 17px; font-size: 15px">
+        {{ remark }}
+      </div>
+      <img
+        src="../assets/remarked.png"
+        class="remarkImg"
+        v-if="isInit && activeOpenid != 'null'"
+      />
+      <div
+        class="btn_area"
+        v-if="isInit && (!activeOpenid || activeOpenid == 'null')"
+      >
+        <div class="btn" bindtap="isOk">报名</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getActiveDetails } from "../api";
+export default {
+  data() {
+    return {
+      isInit: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    async getDetails() {
+      const result = await getActiveDetails();
+      console.log(result);
+    },
+  },
+  created() {},
+  mounted() {
+      this.getDetails();
+  },
+};
+</script>
+<style>
+/* pages/activeDetail/activeDetail.wxss */
+.line {
+  display: flex;
+  color: #999999;
+  margin-top: 15px;
+}
+
+.title {
+  margin-left: 17px;
+  margin-top: 17px;
+  display: flex;
+}
+
+.btn_area {
+  width: 100%;
+  height: 75px;
+  /* border: 1px solid red; */
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.btn {
+  width: 90%;
+  height: 40px;
+  line-height: 40px;
+  /* margin-top: 35px; */
+  border-radius: 17px;
+  /* margin-left: 75px; */
+  background: -webkit-linear-gradient(left, #bd64ff, #8873ff);
+  color: white;
+  text-align: center;
+  position: absolute;
+  top: 17px;
+  left: 17px;
+}
+.remarkImg{
+  width: 122px;
+  height: 122px;
+  position: fixed;
+  bottom: 50px;
+  right: 25px;
+}
+</style>

src/pages/details.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="main">
+    <el-form
+      label-position="left"
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="250px"
+    >
+      <el-form-item label="咋联系你呢" prop="phone">
+        <el-input v-model="ruleForm.phone" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="你得有一米八吧" prop="height" label-width="240px">
+        <el-select v-model="ruleForm.height" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in height"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="你咋那么瘦呢" prop="weight">
+        <el-select v-model="ruleForm.weight" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in weight"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="当初没选清华北大是你不想吗" prop="education">
+        <el-select v-model="ruleForm.education" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in education"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="一月能挣多少米" prop="income">
+        <el-select v-model="ruleForm.income" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in income"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关于小红本本" prop="marriage">
+        <el-select v-model="ruleForm.marriage" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in marriage"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="亲生的小祖宗" prop="children">
+        <el-select v-model="ruleForm.children" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in children"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="这些年没少攒吧(房)" prop="assetHouse">
+        <el-select v-model="ruleForm.assetHouse" placeholder="未选择" @change="assetHouseChange">
+          <el-option
+            v-for="(item, i) in assetHouse"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="assetHouse.dictValue=='2' || assetHouseShow" label="房屋面积" prop="assetHouseArea">
+        <el-select v-model="ruleForm.assetHouseArea" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in assetHouseArea"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="assetHouse.dictValue=='2' || assetHouseShow" label="有无房贷" prop="assetHouseLoan">
+        <el-select v-model="ruleForm.assetHouseLoan" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in assetHouseLoan"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="这些年没少攒吧(车)" prop="assetCar">
+        <el-select v-model="ruleForm.assetCar" placeholder="未选择" @change="assetCarChange">
+          <el-option
+            v-for="(item, i) in assetCar"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="assetCar.dictValue=='2' || assetCarShow" label="车辆价值" prop="assetCarValue">
+        <el-select v-model="ruleForm.assetCarValue" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in assetCarValue"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="assetCar.dictValue=='2' || assetCarShow" label="车贷情况" prop="assetCarLoan">
+        <el-select v-model="ruleForm.assetCarLoan" placeholder="未选择">
+          <el-option
+            v-for="(item, i) in assetCarLoan"
+            :key="i"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        label="啥时候方便我给你介绍个对象(多选)"
+        prop="controlTime"
+        class="controlTime"
+      >
+        <el-checkbox-group v-model="ruleForm.controlTime">
+          <el-checkbox
+            v-for="(item, i) in controlTime"
+            :key="i"
+            :label="item"
+          ></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item
+        label="卖命主旋律(多选)"
+        prop="workStatus"
+        class="workStatus"
+      >
+        <el-checkbox-group v-model="ruleForm.workStatus">
+          <el-checkbox
+            v-for="(item, i) in workStatus"
+            :key="i"
+            :label="item"
+          ></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >立即创建</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// import tabbaar from '../components/tabbar'
+import { getForm ,getPersonInfo} from "../api";
+export default {
+  name: "Home",
+  components: {},
+  data() {
+    return {
+      assetHouseShow:false,
+      assetCarShow:false,
+      phone: [], //手机号
+      height: [], //身高
+      weight: [], //体重
+      education: [], //学历
+      income: [], //收入
+      marriage: [], //婚姻状况
+      children: [], //子女
+      assetHouse: [], //房
+      assetHouseArea: [], //房屋面积
+      assetHouseLoan: [], //贷款
+      assetCar: [], //车
+      assetCarValue: [], //车多钱
+      assetCarLoan: [], //车贷款
+      isCommon: [], //跟父母一起住
+      controlTime: ["43355654", "15gf11", "1df11"], //空闲时间
+      workStatus: ["0000", "1111", "保护壳"], //工作状态
+      companyNature: [], //公司性质
+      company: [], //公司名
+      parents: [], //父母状态
+      fatherWork: [], //
+      matherWork: [],
+      parentAssets: [], //父母资产
+      composition: [], //兄弟姐妹
+      motionState: [], //星座
+      hobby: [], //爱好
+      ruleForm: {
+        phone: "", //手机号
+        height: "", //身高
+        weight: "", //体重
+        education: "", //学历
+        income: "", //收入
+        marriage: "", //婚姻状况
+        children: "", //子女
+        assetHouse: "", //房
+        assetHouseArea: "", //房屋面积
+        assetHouseLoan: "", //贷款
+        assetCar: "", //车
+        assetCarValue: "", //车多钱
+        assetCarLoan: "", //车贷款
+        isCommon: "", //跟父母一起住
+        controlTime: [], //空闲时间
+        workStatus: [], //工作状态
+        companyNature: "", //公司性质
+        company: "", //公司名
+        parents: "", //父母状态
+        fatherWork: "", //
+        matherWork: "",
+        parentAssets: "", //父母资产
+        composition: "", //兄弟姐妹
+        motionState: "", //星座
+        hobby: "", //爱好
+      },
+      rules: {
+        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
+        height: [{ required: true, message: "请选择", trigger: "change" }],
+        weight: [{ required: true, message: "请选择", trigger: "change" }],
+        education: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        income: [{ required: true, message: "请选择", trigger: "change" }],
+        marriage: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        children: [{ required: true, message: "请选择", trigger: "change" }],
+        assetHouse: [{ required: true, message: "请选择", trigger: "change" }],
+        assetHouseArea: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        assetHouseLoan: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        assetCar: [{ required: true, message: "请选择", trigger: "change" }],
+        assetCarValue: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        assetCarLoan: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+        controlTime: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        workStatus: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        
+      },
+    };
+  },
+  methods: {
+    async getHeight() {
+      const result = await getForm({ type: "he_body_height" });
+      if (result.code == 0) {
+        this.height = result.options
+      }
+    },
+    async getWeight() {
+      const result = await getForm({ type: "he_body_weight" });
+      if (result.code == 0) {
+        this.weight = result.options
+      }
+    },
+    async getEducation() {
+      const result = await getForm({ type: "he_education" });
+      if (result.code == 0) {
+        this.education = result.options
+      }
+    },
+    async getIncome() {
+      const result = await getForm({ type: "he_income" });
+      if (result.code == 0) {
+        this.income = result.options
+      }
+    },
+    async getMarriage() {
+      const result = await getForm({ type: "he_marriage" });
+      if (result.code == 0) {
+        this.marriage = result.options
+      }
+    },
+    async getChildren() {
+      const result = await getForm({ type: "he_children" });
+      if (result.code == 0) {
+        this.children = result.options
+      }
+    },
+    async getAssetHouse() {
+      const result = await getForm({ type: "he_asset_house" });
+      if (result.code == 0) {
+        console.log(result);
+        this.assetHouse = result.options
+      }
+    },
+    async getAssetHouseArea() {
+      const result = await getForm({ type: "he_asset_house_area" });
+      if (result.code == 0) {
+        console.log(result);
+        this.assetHouseArea = result.options
+      }
+    },
+    async getAssetCar() {
+      const result = await getForm({ type: "he_asset_car" });
+      if (result.code == 0) {
+        console.log(result);
+        this.assetCar = result.options
+      }
+    },
+    
+    async getPersonInfo(){
+      const result = await getPersonInfo();
+      console.log(result.info,'222')
+      if (result.info.height) {
+        this.ruleForm=result.info
+      }
+    },
+    //监测房产
+    assetHouseChange(val){
+      if (val==2) {
+        this.assetHouseShow = true
+      }else{
+        this.assetHouseShow = false
+        }
+    },
+    //监测车产
+    assetCarChange(val){
+      if (val==2) {
+        this.assetCarShow = true
+      }else{
+        this.assetCarShow = false
+      }
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.getHeight();
+    this.getWeight();
+    this.getEducation();
+    this.getIncome();
+    this.getMarriage();
+    this.getChildren();
+    this.getAssetHouse();
+    this.getAssetHouseArea();
+    this.getAssetCar();
+    this.getPersonInfo();
+  },
+};
+</script>
+<style scoped>
+.main {
+  width: 90%;
+  margin: auto 5%;
+}
+/deep/.controlTime .el-form-item__label {
+  width: 100% !important;
+}
+/deep/.controlTime .el-form-item__content {
+  margin-left: 0 !important;
+}
+/deep/.workStatus .el-form-item__label {
+  width: 100% !important;
+}
+/deep/.workStatus .el-form-item__content {
+  margin-left: 0 !important;
+}
+/deep/.el-input__inner {
+  border: 0 !important;
+}
+/deep/.el-form-item__error {
+  margin-left: -250px;
+}
+</style>

src/pages/index.vue

@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div class="tabbar">
+      <div class="tab1" bindtap="goIndex">
+        <img
+          src="../assets/active_bar1.png"
+          style="width: 20px; height: 20px; padding-top: 5px"
+        />
+        <div style="color: #a342ff">首页</div>
+      </div>
+
+      <div class="tab1">
+        <img
+          src="../assets/unactive_bar2.png"
+          style="width: 20px; height: 20px; padding-top: 5px"
+        />
+        <div @click="goKf()">客服</div>
+      </div>
+
+      <div class="tab1" bindtap="goMy">
+        <router-link to="/personCenter">
+          <img
+            src="../assets/unactive_bar3.png"
+            style="width: 20px; height: 20px; padding-top: 5px"
+          />
+          <div style="color: #999999">我的</div>
+        </router-link>
+      </div>
+    </div>
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe-item><img src="../assets/lb.png" alt="" /></van-swipe-item>
+      <van-swipe-item><img src="../assets/lb.png" alt="" /></van-swipe-item>
+      <van-swipe-item><img src="../assets/lb.png" alt="" /></van-swipe-item>
+      <van-swipe-item><img src="../assets/lb.png" alt="" /></van-swipe-item>
+    </van-swipe>
+    <img
+      src="../assets/show.png"
+      style="width: 85%; margin-left: 5%; height: 100px"
+    />
+    <div style="display: flex; margin: 15px 0 15px 15px">
+      <div
+        style="
+          width: 5px;
+          height: 22px;
+          background-color: #986aff;
+          margin-right: 10px;
+          border-radius: 5px;
+        "
+      ></div>
+      近期活动
+    </div>
+    <img
+      v-if="showNull"
+      src="../assets/empty.png"
+      style="width: 160px; height: 160rpx"
+    />
+    <div
+      v-if="showNull"
+      style="
+        color: #999;
+        width: 100%;
+        height: 160px;
+        top: 275px;
+        left: 0px;
+        text-align: center;
+      "
+    >
+      近期还没有活动呦
+    </div>
+    <div style="margin-bottom: 70px">
+      <div v-for="item in activesArr" :key="item.name" class="box">
+        <div class="top">
+          <img
+            src="../assets/activephoto.png"
+            style="width: 40px; height: 40px"
+          />
+          <div class="text">
+            <div class="title">{{ item.title }}</div>
+            <div class="remark">{{ item.remark }}</div>
+          </div>
+          <div v-if="item.openId == null" class="btn btn1">报名</div>
+          <div v-if="item.enterStatus == 0" class="btn btn1">审核中</div>
+          <div v-if="item.enterStatus == 1" class="btn btn1">审核通过</div>
+          <div v-if="item.enterStatus == -1" class="btn btn1">审核失败</div>
+        </div>
+        <img src="../assets/activeimg.png" class="img2" />
+        <div class="p1">
+          <van-icon name="clock-o" color="#a267ff" size="15px" />
+          <div style="margin-left: 8px">活动时间：{{ item.activeTime }}</div>
+        </div>
+        <div class="p1">
+          <van-icon name="location-o" color="#a267ff" size="15px" />
+          <div style="margin-left: 8px">活动地点：{{ item.address }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getActives } from "../api";
+export default {
+  name: "index",
+  data() {
+    return {
+      showNull: false,
+      activesArr: [],
+    };
+  },
+  methods: {
+    async getActives() {
+      let arr = [];
+      const result = await getActives({ activeStatus: 0 });
+      if (result.code == 0) {
+        arr = result.actives;
+        const result2 = await getActives({ activeStatus: 1 });
+        if (result2.code == 0) {
+          this.activesArr = arr.concat(result2.actives);
+          if (this.activesArr.length == 0) {
+            this.showNull = true;
+          } else {
+            this.showNull = false;
+          }
+        }
+      }
+      console.log(this.activesArr);
+    },
+    goKf() {
+      window.location.href =
+        "https://hzkhcs.qiyukf.com/client?k=de9c471949df00adb71be66e0ac85978&wp=1&robotShuntSwitch=1&robotId=5217545&qtype=4486102";
+    },
+  },
+  computed: {},
+  mounted() {
+    this.getActives();
+  },
+};
+</script>
+<style scoped>
+.my-swipe {
+  width: 100%;
+  height: 200px;
+}
+.my-swipe .van-swipe-item img {
+  width: 100%;
+  height: 200px;
+}
+.tabbar {
+  width: 100%;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+  height: 50px;
+  position: fixed;
+  bottom: -2px;
+  left: 0;
+  display: flex;
+  font-size: 14px;
+  background: #fff;
+  z-index: 999;
+}
+
+.tab1 {
+  height: 50px;
+  width: 33%;
+  text-align: center;
+  color: #999999;
+}
+.box {
+  width: 85%;
+  /* height: 530rpx; */
+  margin: 5%;
+  box-shadow: 0 0 5px 5px #eceafa;
+  padding: 2%;
+}
+.top {
+  display: flex;
+}
+.text {
+  /* border: 1px solid red; */
+  width: 210px;
+  text-align: left;
+}
+
+.title {
+  color: #4d4d4d;
+  font-size: 14px;
+  margin-left: 15px;
+}
+
+.remark {
+  color: #999999;
+  font-size: 14px;
+  margin-left: 15px;
+  margin-top: 5px;
+}
+
+.btn {
+  width: 75px;
+  height: 25px;
+  text-align: center;
+  font-weight: bold;
+  line-height: 25px;
+  font-size: 14px;
+  border-radius: 15px;
+  margin-top: 5px;
+}
+
+.btn1 {
+  border: 1px solid #1bb610;
+  color: #1bb610;
+}
+
+.btn2 {
+  border: 1px solid #216deb;
+  color: #216deb;
+}
+
+.btn3 {
+  border: 1px solid #f1252e;
+  color: #f1252e;
+}
+
+.img2 {
+  width: 100%;
+  height: 150px;
+  margin-top: 15px;
+}
+.p1 {
+  display: flex;
+  color: #999999;
+  margin-top: 7px;
+  font-size: 14px;
+}
+</style>

src/pages/infoType.vue

@@ -0,0 +1,49 @@
+
+<template>
+  <div class="container1">
+    <div class="a1" bindtap="goMyinfo">
+      <div class="left">我的个人信息</div>
+      <van-icon name="arrow" class="right" />
+    </div>
+    <div class="a1" bindtap="goMyinfoDetail">
+      <div class="left">我的个人详细信息</div>
+      <van-icon name="arrow" class="right" />
+    </div>
+    <div class="a1" bindtap="goMyTargetInfo">
+      <div class="left">我的择偶信息</div>
+      <van-icon name="arrow" class="right" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container1 {
+  background: #fafafa;
+  height: 100vh;
+  width: 100%;
+  padding-top: 10px;
+}
+
+.a1 {
+  background: #fff;
+  height: 40px;
+  line-height: 40px;
+  width: 90%;
+  margin-left: 5%;
+  margin-top: 10px;
+  font-size: 14px;
+  text-indent: 10px;
+  border-radius: 5px;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+  /* line-height: 80rpx; */
+  margin-right: 10px;
+  margin-top: 14px;
+}
+</style>

src/pages/myActives.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div v-for="item in arr" :key="item.id" class="box">
+      <div class="top">
+        <img
+          src="../assets/activephoto.png"
+          style="width: 40px; height: 40px"
+        />
+        <div class="text">
+          <div class="title">{{ item.title }}</div>
+          <div class="remark">{{ item.remark }}</div>
+        </div>
+        <div v-if="item.activeStatus == 0" class="btn btn1">未开始</div>
+        <div
+          v-if="item.activeStatus == 1"
+          class="btn btn2"
+          @click="goActive(item.id)"
+        >
+          进行中
+        </div>
+        <div v-if="item.activeStatus == 2" class="btn btn3">已结束</div>
+      </div>
+      <img src="../assets/activeimg.png" class="img2" />
+      <div class="p1">
+        <van-icon name="clock-o" color="#a267ff" size="17px" />
+        <div style="margin-left: 7px">活动时间：{{ item.activeTime }}</div>
+      </div>
+      <div class="p1">
+        <van-icon name="location-o" color="#a267ff" size="17px" />
+        <div style="margin-left: 7px">活动地点：{{ item.address }}</div>
+      </div>
+    </div>
+    <div v-if="showNull" style="width: 100%; height: 160px; margin-top: 120px">
+      <img src="../assets/empty.png" style="width: 140px; height: 140px" />
+      <div>您还没有可以参与的活动呦</div>
+    </div>
+  </div>
+</template>
+<script>
+import { getMyActives } from "../api";
+export default {
+  name: "index",
+  data() {
+    return {
+      showNull: false,
+      arr: [],
+    };
+  },
+  methods: {
+    async getMyActives() {
+      const result = await getMyActives();
+      if (result.code == 0) {
+        this.arr = result.actives;
+        if (result.actives.length == 0) {
+          this.showNull = true
+        }
+      }
+    },
+  },
+  computed: {},
+  mounted() {
+    this.getMyActives();
+  },
+};
+</script>
+<style scoped>
+/* pages/myActive/myActive.wxss */
+.box {
+  width: 90%;
+  /* height: 175px; */
+  margin: 12px;
+  box-shadow: 0 0 5px 5px #eceafa;
+  padding: 12px;
+}
+.top {
+  display: flex;
+}
+.text {
+  /* border: 1px solid red; */
+  width: 220px;
+}
+.title {
+  color: #999999;
+  font-size: 14px;
+  margin-left: 15px;
+  text-align: left;
+}
+.remark {
+  color: #4d4d4d;
+  font-size: 14px;
+  margin-left: 15px;
+  margin-top: 5px;
+  text-align: left;
+}
+.btn {
+  width: 75px;
+  height: 25px;
+  text-align: center;
+  font-weight: bold;
+  line-height: 25px;
+  font-size: 14px;
+  border-radius: 15px;
+  margin-top: 5px;
+}
+.btn1 {
+  border: 1px solid #1bb610;
+  color: #1bb610;
+}
+.btn2 {
+  border: 1px solid #216deb;
+  color: #216deb;
+}
+.btn3 {
+  border: 1px solid #f1252e;
+  color: #f1252e;
+}
+.img2 {
+  width: 100%;
+  height: 150px;
+  margin-top: 15px;
+}
+.p1 {
+  display: flex;
+  color: #999999;
+  margin-top: 7px;
+  font-size: 14px;
+}
+</style>

src/pages/personCenter.vue

@@ -0,0 +1,172 @@
+<template>
+  <div style="background-color: #fafafa; min-height: 100vh">
+    <div class="tabbar">
+      <div class="tab1" bindtap="goIndex">
+        <router-link to="/">
+          <img
+            src="../assets/unactive_bar1.png"
+            style="width: 20px; height: 20px; padding-top: 5px"
+          />
+          <div style="color: #999999">首页</div>
+        </router-link>
+      </div>
+      <div class="tab1">
+        <img
+          src="../assets/unactive_bar2.png"
+          style="width: 20px; height: 20px; padding-top: 5px"
+        />
+        <div @click="goKf()">客服</div>
+      </div>
+      <div class="tab1" bindtap="goMy">
+        <img
+          src="../assets/active_bar3.png"
+          style="width: 20px; height: 20px; padding-top: 5px"
+        />
+        <div style="color: #a342ff">我的</div>
+      </div>
+    </div>
+    <img src="../assets/person_bj.png" style="width: 100%; height: 190px" />
+    <div class="top" align="center">
+      <img class="img" :src="avatarUrl" />
+      <div class="nick">
+        <div>昵称</div>
+      </div>
+    </div>
+    <div class="middle">
+      <div
+        v-for="item in tabArr"
+        :key="item.id"
+        class="block"
+        @click="goTab(item.url)"
+      >
+        <img
+          :src="item.img"
+          style="width: 45px; height: 45px; margin-left: 15px"
+        />
+        <div style="color: #6f7582; font-size: 15px; margin-left: 15px">
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getHeartTimes, getHeartedTimes } from "../api";
+export default {
+  name: "index",
+  data() {
+    return {
+      avatarUrl: require("../assets/morenImg.png"),
+      tabArr: [
+        {
+          name: "我的信息",
+          img: require("../assets/icon1.png"),
+          url: "infoType",
+        },
+        {
+          name: "我的活动",
+          img: require("../assets/icon2.png"),
+          url: "myActives",
+        },
+        {
+          name: "心动0次",
+          img: require("../assets/icon3.png"),
+          url: "",
+        },
+        {
+          name: "被心动0次",
+          img: require("../assets/icon4.png"),
+          url: "",
+        },
+        {
+          name: "推荐好友",
+          img: require("../assets/icon6.png"),
+          url: "share",
+        },
+      ],
+    };
+  },
+  methods: {
+    async getNum1() {
+      const result = await getHeartTimes();
+      if (result.code == 0) {
+        console.log(result)
+        this.tabArr[2].name = "心动" + result.heartCount + "次";
+      }
+    },
+    async getNum2() {
+      const result = await getHeartedTimes();
+      if (result.code == 0) {
+        this.tabArr[3].name = "被心动" + result.heartedCount + "次";
+      }
+    },
+    goTab(e){
+      this.$router.push({name:e})
+    },
+    goKf() {
+      window.location.href =
+        "https://hzkhcs.qiyukf.com/client?k=de9c471949df00adb71be66e0ac85978&wp=1&robotShuntSwitch=1&robotId=5217545&qtype=4486102";
+    },
+  },
+  computed: {},
+  mounted() {
+    this.getNum1();
+    this.getNum2();
+  },
+};
+</script>
+<style scoped>
+.tabbar {
+  width: 100%;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+  /* border: 1px solid #999; */
+  height: 50px;
+  position: fixed;
+  bottom: -2px;
+  left: 0;
+  display: flex;
+  font-size: 14px;
+  background: #fff;
+  z-index: 999;
+}
+
+.tab1 {
+  height: 50px;
+  width: 33%;
+  text-align: center;
+  color: #999999;
+}
+.top {
+  width: 100%;
+  height: 190px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.img {
+  width: 80px;
+  height: 80px;
+  border-radius: 80px;
+  overflow: hidden;
+  margin-top: 35px;
+}
+.middle {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  /* border: 1px solid red; */
+  width: 100%;
+}
+
+.block {
+  width: 44%;
+  height: 90px;
+  background: #fff;
+  margin-left: 4%;
+  margin-top: 15px;
+  border-radius: 15px;
+  display: flex;
+  /* justify-content:space-around; */
+  align-items: center;
+}
+</style>

src/pages/share.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-dialog
+    title="推荐好友"
+    :visible.sync="dialogVisible"
+    width="303px"
+    :close-on-click-modal="true"
+    custom-class="share-code-dialog"
+  >
+    <div class="poster" :style="'background-image:url(' + imageUrl + ')'">
+      <div class="shareImg">
+        <img :src="codeImg" alt="" />
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <!-- <el-button size="small" class="copyBtn" @click="copy">复 制</el-button> -->
+      <el-button size="small" class="downBtn" @click="down">下载到相册</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+// import { copy2Board } from '@/utils/copy.js'
+import html2canvas from "html2canvas";
+export default {
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    // 这里存放数据
+    return {
+      dialogVisible: false,
+      imageUrl: require("@/assets/ewmbj.png"),
+      codeImg: 'https://yuehe-1257653330.cos.ap-beijing.myqcloud.com/41996358.jpg',
+      // codeImg: 'https://picsum.photos/400/400',
+      posterBase64: "", //  转化后的base64编码
+      activityName: "大转盘游戏",
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    _initDialog() {
+      this.dialogVisible = true;
+      setTimeout(() => {
+        this.codeChangePoster();
+      }, 0);
+    },
+    // 下载海报图片
+    down() {
+      var $a = document.createElement("a");
+      $a.href = this.posterBase64;
+      $a.download = "分享海报名称";
+      $a.click();
+    },
+    // 将二维码转为图片
+    codeChangePoster() {
+      let _this = this;
+      let targetDom = document.querySelector(".poster");
+      html2canvas(targetDom, {
+        logging: true,
+        scrollY: -20, //  为了解决顶部偏移出现白边，初始化时就直接设置往上偏移-20位置
+        scrollX: 0,
+        allowTaint: true,
+        useCORS: false, // 运行跨域图片资源
+      }).then(function (canvas) {
+        var image = canvas.toDataURL("image/jpeg");
+        console.log(image)
+        _this.posterBase64 = image;
+      });
+    },
+    // 复制
+    copy() {
+      const url = this.posterBase64;
+      const oInput = document.createElement("input");
+      oInput.value = url;
+      document.body.appendChild(oInput);
+      oInput.select(); // 选择对象;
+      document.execCommand("Copy"); // 执行浏览器复制命令
+      oInput.remove();
+
+      this.$message({
+        message: "已成功复制到剪切板",
+        type: "success",
+      });
+    },
+    closeDialog() {
+      this.dialogVisible = false;
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+      this._initDialog();
+  },
+};
+</script>
+<style scoped>
+.el-dialog__wrapper >>> .el-dialog /deep/ .el-dialog__header /deep/ .el-dialog__headerbtn /deep/ i{
+    color: #fff!important;
+    font-size: 14px!important;
+    display: none;
+
+}
+.el-dialog__wrapper >>> .el-dialog{
+    margin-top: 10vh!important;
+} 
+.share-code-dialog .el-dialog__body {
+  max-height: 400px !important;
+  min-height: 220px !important;
+  padding: 20px !important;
+  margin-top:0vh;
+}
+.share-code-dialog .poster {
+  position: relative;
+  height: 250px;
+  width: 263px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.share-code-dialog .shareImg {
+  position: absolute;
+  top: 67%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.share-code-dialog .shareImg i {
+  display: inline-block;
+  font-weight: bolder;
+  color: #000;
+  padding: 0px;
+  margin: 0px 0 10px 0;
+  font-size: 22px;
+}
+.share-code-dialog .shareImg p {
+  font-size: 14px;
+  font-weight: bolder;
+  color: #747474;
+  padding: 0px;
+  margin: 0px;
+}
+.share-code-dialog .shareImg img {
+  height: 120px;
+  width: 120px;
+}
+.share-code-dialog .el-dialog__footer {
+  text-align: right !important;
+}
+.share-code-dialog .copyBtn {
+  color: #fff;
+  background: #36dcb5;
+  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
+}
+.share-code-dialog .downBtn {
+  color: #36dcb5;
+  border: 1px solid #36dcb5;
+  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
+}
+</style>

src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import index from '../views/index.vue'
+import index from '../pages/index.vue'
+
+const getComponent = (component, dir) => () => import(`.././pages` + (dir ? `/${dir}` : '') + `/${component}.vue`);
 
 Vue.use(VueRouter)
 
@@ -11,12 +13,29 @@ const routes = [
     component: index
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/personCenter',
+    name: 'personCenter',
+    component: getComponent('personCenter')
+  },
+  {
+    path: '/infoType',
+    name: 'infoType',
+    component: getComponent('infoType')
+  },
+  {
+    path: '/myActives',
+    name: 'myActives',
+    component: getComponent('myActives')
+  },
+  {
+    path: '/share',
+    name: 'share',
+    component: getComponent('share')
+  },
+  {
+    path: '/activeDetails',
+    name: 'activeDetails',
+    component: getComponent('activeDetails')
   }
 ]
 

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="home">
-    <tabbaar></tabbaar>
-  </div>
-</template>
-
-<script>
-import tabbaar from '../components/tabbar'
-export default {
-  name: 'Home',
-  components: {tabbaar}
-}
-</script>

vue.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  productionSourceMap: false,
+  publicPath: "./",
+  devServer: {
+    proxy: {  //配置跨域
+      '/api': {
+        target: 'https://yuehe.hellevil.com/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
+        changOrigin: true,  //允许跨域
+        pathRewrite: {
+          '^/api': '' 
+        }
+      },
+    }
+  },
+};
+