首次提交

FrontCode2/sunshine_levy/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+};
+</script>
+
+<style>
+</style>

FrontCode2/sunshine_levy/src/assets/rem.js

@@ -0,0 +1,28 @@
+/**
+   * 设置根元素font-size
+   * 当设备宽度为375(iPhone6)时，根元素font-size=16px;
+   */
+(function (doc, win) {
+  var docEl = win.document.documentElement;
+  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
+
+  var refreshRem = function () {
+    var clientWidth = win.innerWidth
+      || doc.documentElement.clientWidth
+      || doc.body.clientWidth;
+
+    // console.log(clientWidth)
+    if (!clientWidth) return;
+    var fz;
+    var width = clientWidth;
+    fz = 16 * width / 375;  // 可以根据项目需要，自行修改
+    docEl.style.fontSize = fz + 'px';  //这样每一份也是16px,即1rem=16px
+  };
+
+  if (!doc.addEventListener) return;
+  win.addEventListener(resizeEvt, refreshRem, false);
+  doc.addEventListener('DOMContentLoaded', refreshRem, false);
+  refreshRem();
+
+})(document, window);
+

FrontCode2/sunshine_levy/src/assets/reset.css

@@ -0,0 +1,135 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+v2.0 | 20110126
+License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

FrontCode2/sunshine_levy/src/common/apis/index.js

@@ -0,0 +1,72 @@
+import axios from 'axios';
+import { token } from '@/common/token';
+import vm from '@/main';
+
+const code = {
+    authorization: '00',
+    error: '02',
+    success: '01',
+}
+
+axios.defaults.baseURL = process.env.BASE_URL;
+
+/**
+ * 最终直接根据url名称调用接口方法
+ * 例如
+ * import { apis } from '@/api'
+ * apis.getItemGroupType(parmas).then(...)
+ */
+import urls from './requests';
+
+const apis = {}
+
+for (let key in urls) {
+    apis[key] = (params = {}) => {
+        return new Promise((reslove, reject) => {
+            let instance = axios
+                .create({
+                    headers: {
+                        Authorization: 'Bearer ' + token.value
+                    }
+                });
+
+            instance.interceptors.response.use((res) => {
+                if (res.data.code === code.authorization) {
+                    token.value = '';
+                    // vm.$router.replace({
+                    //     path: '/login'
+                    // }).catch(err => { });
+                }
+                return res;
+            }, (err) => {
+                return Promise.reject(err);
+            });
+
+            instance
+                .post(urls[key], params)
+                .then(({ data }) => {
+                    if (data.code === code.success) {
+                        reslove(data);
+                    } else {
+                        if (vm.version.beta) {
+                            alert(data.message);
+                        }
+                        reject(data);
+                    }
+                })
+                .catch(err => {
+                    if (process.env.PROD) {
+                        vm.$dialog.alert({ message: '发生错误，请联系管理员' });
+                    } else {
+                        console.warn(err, urls[key]);
+                    }
+                });
+        })
+    }
+}
+
+export {
+    axios,
+    apis,
+    code
+};

FrontCode2/sunshine_levy/src/common/apis/requests.js

@@ -0,0 +1,16 @@
+// 接口文档地址
+// https://docs.qq.com/doc/DZkdyS3hNT2V4Q3VJ
+
+const url = {
+    // 登录
+    login: '/webapi/account.ashx?action=login',
+
+    // 个人信息
+    account: '/webapi/account.ashx?action=userinfo',
+
+    // 项目数统计信息
+    projectStatistics: '/webapi/project.ashx?action=getStatistics',
+
+};
+
+export default url;

FrontCode2/sunshine_levy/src/common/token/index.js

@@ -0,0 +1,19 @@
+const key = '__SESSION';
+
+const token = {
+    get value() {
+        return window.localStorage.getItem(key);
+    },
+    set value(token) {
+        if (!token) {
+            window.localStorage.removeItem(key);
+        } else {
+            window.localStorage.setItem(key, token);
+        }
+    }
+}
+
+export {
+    key,
+    token
+}

FrontCode2/sunshine_levy/src/components/home.css

@@ -0,0 +1,271 @@
+.page {
+  border-radius: 6px;
+  background: #f2fbfd;
+}
+.topBox {
+  overflow: hidden;
+
+  width: 100%;
+  height: 225px;
+
+  background: url(../assets/img/bg.png);
+  background-size: 100% 225px;
+}
+.titleBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 173px;
+  height: 36px;
+  margin: 15px 0 15px 2px;
+
+  border-radius: 0 22px 22px 0;
+  background: rgba(6, 63, 142, .66);
+}
+.font {
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+
+  width: 167px;
+  height: 22px;
+  padding: 3px 7px 3px 7px;
+
+  text-align: center;
+  vertical-align: middle;
+
+  color: #fff;
+}
+.baseInfo {
+  display: flex;
+}
+.baseImg {
+  width: 22px;
+  height: 21px;
+  padding-right: 10px;
+  padding-left: 31px;
+}
+.baseFont {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+
+  height: 20px;
+
+  color: #fff;
+}
+.centerMagin {
+  margin-top: 10px;
+  margin-right: 12px;
+  margin-left: 16px;
+}
+.gridBg {
+  display: flex;
+  overflow: hidden;
+  justify-content: space-around;
+
+  height: 114px;
+
+  border-radius: 3px;
+  background: rgba(255, 255, 255, .28);
+}
+.gridImg {
+  width: 90px;
+  height: 80px;
+  margin: 12px 6px;
+}
+.bigImg {
+  width: 100%;
+  height: 91px;
+}
+.project {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  height: 41px;
+  padding-right: 0;
+  padding-left: 0;
+
+  background: url(../assets/img/project_bg.png);
+  background-size: 100% 41px;
+}
+.projectIcon {
+  width: 40px;
+  height: 39px;
+
+  vertical-align: middle;
+
+  border-radius: 5px 0 0 0;
+  background: #3284cd;
+}
+.projectTitle {
+  font-family: PingFangSC-Semibold,
+  PingFang SC;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+
+  height: 20px;
+
+  vertical-align: middle;
+
+  color: #fff;
+}
+.projectRight {
+  display: flex;
+  align-items: center;
+
+  width: 95px;
+  height: 27px;
+
+  opacity: .82;
+  border-radius: 13px 0 0 17px;
+  background: #24bca3;
+}
+.projectRightFont {
+  font-family: PingFangSC-Semibold,
+  PingFang SC;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 14px;
+
+  height: 17px;
+
+  color: #fff;
+}
+.projectRightIcon {
+  width: 17px;
+  height: 17px;
+  margin-right: 3px;
+  margin-left: 8px;
+}
+.projectCenter {
+  height: 440px;
+  padding-bottom: 35px;
+
+  background: #fff;
+  box-shadow: 0 2px 6px 1px rgba(212, 212, 212, .5);
+}
+.projectCenterInfo {
+  display: flex;
+  align-items: center;
+
+  padding-top: 5px;
+}
+.projectCenterImg {
+  width: 15px;
+  height: 15px;
+  padding: 0 13px;
+}
+.projectCenterFont {
+  font-family: PingFangSC-Regular,
+  PingFang SC;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 12px;
+
+  height: 12px;
+
+  color: #2c2b2b;
+}
+.assess {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  height: 25px;
+  padding-right: 0;
+  padding-left: 0;
+}
+.assessIcon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+
+  vertical-align: middle;
+
+  background: #2468f2;
+}
+.assessTitle {
+  font-family: PingFangSC-Regular,
+  PingFang SC;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+
+  height: 20px;
+
+  color: #2468f2;
+}
+.assessRightIcon {
+  width: 24px;
+  height: 24px;
+
+  background: #2468f2;
+}
+.assessBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 12px;
+}
+.assessCenter1 {
+  margin: 15px;
+
+  border-left: 2px solid #24bca3;
+}
+.assessCenter2 {
+  margin: 15px;
+
+  border-left: 2px solid #ff5959;
+}
+.protocolTitle {
+  overflow: hidden;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.font11 {
+  font-family: PingFangSC-Regular,
+  PingFang SC;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 11px;
+
+  height: 11px;
+
+  color: #9da2a3;
+}
+.protocolBox {
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 2px 5px 0 rgba(168, 168, 168, .5);
+}
+.font14 {
+  font-family: PingFangSC-Regular,
+  PingFang SC;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+
+  height: 20px;
+
+  color: #202020;
+}
+.protocolList {
+  padding: 20px 21px 0 20px;
+}
+.protocolLine {
+  padding-bottom: 10px;
+
+  border-bottom: 1px dashed rgba(168, 168, 168, .5);
+}

FrontCode2/sunshine_levy/src/components/home.vue

@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <div class="page">
+      <div class="topBox">
+        <div class="titleBox">
+          <div class="font">被征收人信息查询</div>
+        </div>
+        <div>
+          <div class="baseInfo">
+            <van-image :src="require('@/assets/img/renyuanliebiao.png')" class="baseImg" />
+            <span class="baseFont">被征收人姓名：</span>
+            <span class="baseFont">{{user.name}}</span>
+          </div>
+          <div class="baseInfo">
+            <van-image :src="require('@/assets/img/credentials_icon.png')" class="baseImg" />
+            <span class="baseFont">身份证号码：</span>
+            <span class="baseFont">{{user.identityId}}</span>
+          </div>
+        </div>
+        <div>
+          <div class="gridBg centerMagin">
+            <van-image :src="require('@/assets/img/scan.png')" class="gridImg" />
+            <van-image :src="require('@/assets/img/evaluation .png')" class="gridImg" />
+            <van-image :src="require('@/assets/img/compensation.png')" class="gridImg" />
+          </div>
+        </div>
+      </div>
+      <div class="centerMagin">
+        <van-image :src="require('@/assets/img/government.png')" class="bigImg" />
+      </div>
+      <div class="centerMagin">
+        <div class="project">
+          <div>
+            <van-image :src="require('@/assets/img/project.png')" class="projectIcon" />
+            <span class="projectTitle">{{project.name}}</span>
+          </div>
+          <div class="projectRight">
+            <van-image :src="require('@/assets/img/menu_yhxy.png')" class="projectRightIcon" />
+            <span class="projectRightFont">协议签订阶段</span>
+          </div>
+        </div>
+      </div>
+      <div class="projectCenter centerMagin">
+        <div class="projectCenterInfo">
+          <div class="projectCenterInfo">
+            <van-image :src="require('@/assets/img/project_area.png')" class="projectCenterImg" />
+            <span class="projectCenterFont">项目所在区域：</span>
+            <span class="projectCenterFont">{{project.area}}</span>
+          </div>
+        </div>
+        <div class="projectCenterInfo">
+          <div class="projectCenterInfo">
+            <van-image :src="require('@/assets/img/project_dep.png')" class="projectCenterImg" />
+            <span class="projectCenterFont">征收部门：</span>
+            <span class="projectCenterFont">{{project.department}}</span>
+          </div>
+        </div>
+        <div class="projectCenterInfo">
+          <div class="projectCenterInfo">
+            <van-image :src="require('@/assets/img/project_year.png')" class="projectCenterImg" />
+            <span class="projectCenterFont">所属年份：</span>
+            <span class="projectCenterFont">{{project.year}}</span>
+          </div>
+        </div>
+        <div class="projectCenterInfo">
+          <div class="projectCenterInfo">
+            <van-image :src="require('@/assets/img/project_no.png')" class="projectCenterImg" />
+            <span class="projectCenterFont">征收决定号：</span>
+            <span class="projectCenterFont" style="color:#3883F1">{{project.num}}</span>
+          </div>
+        </div>
+        <div class="centerMagin">
+          <div class="assess">
+            <div>
+              <van-image :src="require('@/assets/img/assess_1.png')" class="assessIcon" />
+              <span class="assessTitle">分户评估结果</span>
+            </div>
+            <div>
+              <van-image :src="require('@/assets/img/skip.png')" class="assessRightIcon" round />
+            </div>
+          </div>
+          <div class="assessCenter1">
+            <div class="assessBox">
+              <span class="projectCenterFont">评估报告编号：</span>
+              <span class="projectCenterFont">{{assess.num}}</span>
+            </div>
+            <div class="assessBox">
+              <span class="projectCenterFont" style="width: 40%;">被征收房屋地址：</span>
+              <span class="projectCenterFont protocolTitle">{{assess.address}}</span>
+            </div>
+            <div class="assessBox">
+              <span class="projectCenterFont">评估总金额：</span>
+              <span class="projectTitle" style="color:red">¥{{assess.amount}}</span>
+            </div>
+          </div>
+          <div class="assess">
+            <div>
+              <van-image :src="require('@/assets/img/assess_2.png')" class="assessIcon" />
+              <span class="assessTitle">补偿协议</span>
+            </div>
+            <div>
+              <van-image :src="require('@/assets/img/skip.png')" class="assessRightIcon" round />
+            </div>
+          </div>
+          <div class="assessCenter2">
+            <div class="assessBox">
+              <span class="projectCenterFont">协议编号：</span>
+              <span class="projectCenterFont">{{retrievalProtocol.num}}</span>
+            </div>
+            <div class="assessBox">
+              <span class="projectCenterFont" style="width: 40%;">被征收房屋地址：</span>
+              <span class="projectCenterFont protocolTitle">{{retrievalProtocol.address}}</span>
+            </div>
+            <div class="assessBox">
+              <span class="projectCenterFont">补偿方式：</span>
+              <span class="projectCenterFont">{{retrievalProtocol.compensation}}</span>
+            </div>
+            <div class="assessBox">
+              <span class="projectCenterFont">合计补偿资金：</span>
+              <span class="projectTitle" style="color:red">¥{{retrievalProtocol.amount}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="centerMagin">
+        <van-image :src="require('@/assets/img/expropriationPolicy.png')" class="bigImg" />
+      </div>
+      <div class="centerMagin">
+        <span class="projectTitle" style="color:#202020">征收政策</span>
+        <div class="assessBox" style="padding-left: 5px;padding-right: 5px;">
+          <span class="font11" style="color:#2c2b2b">共{{total}}条</span>
+          <div>
+            <span class="font11">查看全部</span>
+            <van-icon color="#1989fa" name="arrow" />
+          </div>
+        </div>
+      </div>
+      <div class="centerMagin" style="padding-bottom: 20px;">
+        <div class="protocolBox">
+          <van-list :finished="finished" @load="onLoad" v-model="loading">
+            <div :key="item.id" class="protocolList" v-for="(item,i) in list">
+              <div class="protocolLine" v-if="i!=list.length-1">
+                <div class="font14 protocolTitle">{{item.title}}</div>
+                <div class="assessBox" style="padding-left: 5px;padding-right: 5px;">
+                  <div>
+                    <span class="font11">发布时间：</span>
+                    <span class="font11">{{item.publish_date}}</span>
+                  </div>
+                  <div>
+                    <span class="font11">区域：</span>
+                    <span class="font11">{{item.area}}</span>
+                  </div>
+                </div>
+              </div>
+              <div style="padding-bottom: 10px;" v-else>
+                <div class="font14 protocolTitle">{{item.title}}</div>
+                <div class="assessBox" style="padding-left: 5px;padding-right: 5px;">
+                  <div>
+                    <span class="font11">发布时间：</span>
+                    <span class="font11">{{item.publish_date}}</span>
+                  </div>
+                  <div>
+                    <span class="font11">区域：</span>
+                    <span class="font11">{{item.area}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </van-list>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import './home.css';
+import { apis } from '@/common/apis';
+import { token } from '@/common/token';
+
+export default {
+  name: 'home',
+  data() {
+    return {
+      user: {
+        name: '胡伯钧',
+        identityId: '3302041982893743782',
+      },
+      project: {
+        name: '曙光一村地块',
+        area: '海曙区',
+        department: '宁海县房屋征收管理中心',
+        year: '2019',
+        num: '海政发【2021】28号',
+      },
+      assess: {
+        num: '044',
+        address: '宁波市江北区泗洲街16号404',
+        amount: '180234',
+      },
+      retrievalProtocol: {
+        num: '044',
+        address: '宁波市江北区泗洲街16号404',
+        compensation: '产权调换',
+        amount: '180234',
+      },
+      total: '8',
+      list: [
+        {
+          id: 11,
+          area: '全大市',
+          title: '宁波市住房和城乡建设委员会开展关于住房的政策',
+          publish_date: '2021年09月05日',
+        },
+        {
+          id: 22,
+          area: '全大市',
+          title: '宁波市住房和城乡建设委员会开展关于住房的政策',
+          publish_date: '2021年09月05日',
+        },
+        {
+          id: 33,
+          area: '全大市',
+          title: '宁波市住房和城乡建设委员会开展关于住房的政策',
+          publish_date: '2021年09月05日',
+        },
+      ],
+      loading: false,
+      finished: true,
+      // user: {
+      //   avatar: '',
+      //   name: '',
+      //   role: '',
+      //   account: '',
+      //   mobile: '',
+      //   deptName: '',
+      // },
+
+      // statistics: {
+      //   new: 0, // 新建项目总数
+      //   signing: 0, // 正在签约项目总数
+      //   signed: 0, // 已签约项目总数
+      // },
+    };
+  },
+  created() {
+    this.onInit();
+  },
+  methods: {
+    onLoad() {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      // setTimeout(() => {
+      //   for (let i = 0; i < 3; i++) {
+      //     this.list.push(this.list.length + 1);
+      //   }
+      //   // 加载状态结束
+      //   this.loading = false;
+      //   // 数据全部加载完成
+      //   if (this.list.length >= 3) {
+      //     this.finished = true;
+      //   }
+      // }, 1000);
+    },
+    onInit() {
+      // this.onLogin();
+    },
+    onLogin() {
+      // this.loading = true;
+      let form = { account: 'zgbqc', password: '111qqqqq' };
+      apis
+        .login(form)
+        .finally(() => {
+          debugger;
+          // this.loading = false;
+        })
+        .then(({ result }) => {
+          token.value = result.token;
+          // this.$root.replace('/');
+          debugger;
+          this.onLoadUserInfo();
+          this.onLoadStatistic();
+        })
+        .catch((err) => {
+          debugger;
+          // this.$toast(err);
+        });
+    },
+    onLoadUserInfo() {
+      apis.account().then(({ result }) => {
+        for (let key in result) {
+          if (this.user.hasOwnProperty(key)) {
+            this.user[key] = result[key];
+          }
+        }
+      });
+    },
+    onLoadStatistic() {
+      apis.projectStatistics().then(({ result }) => {
+        this.statistics = result;
+      });
+    },
+  },
+};
+</script>
+
+

FrontCode2/sunshine_levy/src/main.js

@@ -0,0 +1,49 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import './assets/reset.css';
+import 'lib-flexible/flexible';
+
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import { Button, NavBar, Cell, CellGroup } from 'vant';
+
+
+Vue.use(Button).use(NavBar).use(Cell).use(CellGroup);
+
+import { Image as VanImage } from 'vant';
+
+Vue.use(VanImage);
+
+import { Col, Row } from 'vant';
+
+Vue.use(Col);
+Vue.use(Row);
+
+import { Grid, GridItem } from 'vant';
+
+Vue.use(Grid);
+Vue.use(GridItem);
+
+import { Icon } from 'vant';
+
+Vue.use(Icon);
+
+import { List } from 'vant';
+
+Vue.use(List);
+
+import { Divider } from 'vant';
+
+Vue.use(Divider);
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+const vm = new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})
+export default vm

FrontCode2/sunshine_levy/src/router/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import home from '@/components/home'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: home
+    }
+  ]
+})