慧治理 首页迁移

src/project/huizhili/AppHome/AppHome.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="AppHome">
+    <component :is="tabList[tabIndex].component"/>
+    <div class="tab-list">
+      <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">
+        <img :src="tabIndex == index ? item.activeImg : item.img " alt="">
+        <p :style="tabIndex == index ? 'color: #267EF0;' : ''">{{ item.text }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Home from './components/Home'
+import Grid from './components/Grid'
+import App from './components/App'
+import My from './components/My'
+export default {
+  name: "AppHome",
+  appName: "首页",
+  data() {
+    return {
+      tabList: [
+        {
+          text: '首页',
+          img: require('./img/tab/home-icon.png'),
+          activeImg: require('./img/tab/home-icon-active.png'),
+          component: Home
+        },
+        {
+          text: '网格',
+          img: require('./img/tab/grid-icon.png'),
+          activeImg: require('./img/tab/grid-icon-active.png'),
+          component: Grid
+        },
+        {
+          text: '应用',
+          img: require('./img/tab/app-icon.png'),
+          activeImg: require('./img/tab/app-icon-active.png'),
+          component: App
+        },
+        {
+          text: '我的',
+          img: require('./img/tab/my-icon.png'),
+          activeImg: require('./img/tab/my-icon-active.png'),
+          component: My
+        }
+      ],
+      tabIndex: 0,
+    }
+  },
+  components: {Home, Grid, App, My},
+  methods: {
+    tabClick(index) {
+      this.tabIndex = index
+    },
+  },
+  onShow() {
+    document.title = "慧政务"
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppHome {
+  width: 100%;
+  height: 100%;
+  background-color: #F5F6F7;
+  padding-bottom: 112px;
+  .tab-list {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    padding: 16px 36px 8px;
+    box-sizing: border-box;
+    background-color: #fff;
+    z-index: 9999999;
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      img {
+        width: 56px;
+        height: 56px;
+      }
+      p {
+        font-size: 20px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #000;
+        line-height: 28px;
+      }
+    } 
+  }
+}
+</style>

src/project/huizhili/AppHome/FeedBack.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="feedback">
+    <div class="suggest">
+      <div flex class="title"><em v-text="'*'"/>请输入您的宝贵意见</div>
+      <AiTextarea v-model="content" placeholder="请输入（200字以内）" :maxlength="200"/>
+    </div>
+    <div class="name">
+      <div flex><em v-text="'*'"/>联系人</div>
+      <input type="text" placeholder="请输入您的姓名" style="text-align: right;" v-model="name" class="inp">
+    </div>
+    <div class="phone">
+      <div flex><em v-text="'*'"/>联系方式</div>
+      <input type="number" placeholder="请输入您的联系方式" style="text-align: right;" v-model="phone" class="inp" maxlength="11">
+    </div>
+    <div class="photo">
+      <div class="photo-title">图片 <span>（最多9张）</span></div>
+      <div class="pad-120">
+        <AiUploader :limit="9" multiple :def.sync="picture" placeholder="上传图片" action="/admin/file/add2"/>
+      </div>
+    </div>
+    <div style="height: 56px;"></div>
+    <div class="btn" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'feedback',
+
+  data() {
+    return {
+      content: '',
+      picture: [],
+      name: '',
+      phone: ''
+    }
+  },
+
+  methods: {
+    submit() {
+      let {phone, content, picture, name} = this
+      if (!content) {
+        return this.$u.toast("请输入您的宝贵意见")
+      }
+      if (!name) {
+        return this.$u.toast("请输入您的姓名")
+      }
+      if (!phone) {
+        return this.$u.toast("请输入联系方式")
+      }
+      if (!/^\d{11}$/g.test(phone)) {
+        return this.$u.toast("联系方式格式有误!")
+      }
+      this.$http.post("/oms/api/appfeedback/addOrUpdate", {
+        phone,
+        opinion: content,
+        pictureUrl: picture?.map(e=>e.url).toString(),
+        contacts: name,
+        sourceHost: location.host
+      }, {
+        withoutToken: true
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$u.toast("保存成功!")
+          setTimeout(() => {
+            uni.navigateBack({})
+          }, 1500)
+        }
+      })
+    }
+  },
+  onShow() {
+    document.title = '意见反馈'
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.feedback {
+  padding-bottom: 100px;
+
+  em {
+    display: block;
+    color: red;
+    font-style: normal;
+    height: initial;
+  }
+
+  .suggest {
+    padding: 15px 30px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    margin-bottom: 8px;
+
+    .title {
+      width: 100%;
+      height: 100px;
+      line-height: 100px;
+      font-size: 32px;
+      color: #333333;
+    }
+  }
+
+  .name,
+  .phone {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #FFFFFF;
+    margin-bottom: 8px;
+    padding: 0 30px;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    font-size: 32px;
+    box-sizing: border-box;
+  }
+
+  .photo {
+    background-color: #FFFFFF;
+    padding: 20px 30px;
+
+    .photo-title {
+      width: 100%;
+      height: 100px;
+      line-height: 80px;
+      color: #333333;
+
+      & > span {
+        color: #999999;
+      }
+    }
+
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background-color: #1365DD;
+    color: #FFFFFF;
+  }
+
+}
+</style>

src/project/huizhili/AppHome/GridMemberPoints.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="gridMemberPoints">
+    <img src="./img/my/grid-point.png" alt="" class="right-icon">
+  </div>
+</template>
+
+<script>
+export default {
+  name: "gridMemberPoints",
+}
+</script>
+
+<style lang="scss" scoped>
+.gridMemberPoints {
+  img {
+    width: 100%;
+  }
+}
+</style>

src/project/huizhili/AppHome/HelpDocs.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="HelpDocs">
+    <div class="bg-fff title">
+      <p>系统初始化</p>
+      <p>一、进入应用-网格管理模块添加网格信息。</p>
+      <p>二、进入应用-网格管理模块添加网格员相关信息。</p>
+      <p>三、进入首页-居民档案，添加居民档案。</p>
+      <p>四、进入应用-网格管理-选中网格员添加责任家庭。</p>
+    </div>
+    <div class="bg-fff">
+      <div class="flex">
+        <span>如有相关问题，请联系客服</span>
+        <div @click="callPhone('18186229224')">18186229224<img src="./img/my/phone-icon.png" /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelpDocs",
+  data() {
+    return {
+    }
+  },
+  methods: {
+    copy() {
+      uni.setClipboardData({
+        data: 'https://saasweb.icunwei.com/login', // e是你要保存的内容
+        success: () => {
+          uni.showToast({
+            title:'复制成功',
+            icon:'none'
+          })
+        }
+      })
+    },
+    callPhone(phoneNumber) {
+      uni.makePhoneCall({phoneNumber})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.HelpDocs {
+  width: 100%;
+  height: 100%;
+  background-color: #F5F6F7;
+  .bg-fff {
+    background-color: #fff;
+  }
+  .title {
+    padding: 30px;
+    margin-bottom: 20px;
+    p {
+      width: 100%;
+      font-size: 28px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 40px;
+    }
+  }
+  .flex {
+    display: flex;
+    // justify-content: space-between;
+    padding: 0 30px;
+    line-height: 100px;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #030303;
+    div {
+      color: #3975C6;
+      margin-left: 32px;
+    }
+    .copy {
+      margin-left: 24px;
+    }
+    img {
+      width: 48px;
+      height: 48px;
+      margin-left: 16px;
+      vertical-align: middle;
+    }
+  }
+}
+</style>

src/project/huizhili/AppHome/UploadPhoto.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="uploadPhoto">
+    <div class="photo">
+      <div class="photo-title">图片 <span>（最多1张）</span></div>
+      <div class="pad-120">
+        <AiUploader :limit="1" multiple placeholder="上传图片" :def.sync="picture" action="/admin/file/add-portrait"/>
+      </div>
+    </div>
+    <div style="height: 56px;"></div>
+    <div class="btn" @click="back">返回</div>
+  </div>
+</template>
+
+<script>
+import {mapActions} from "vuex";
+
+export default {
+  name: 'uploadPhoto',
+  data() {
+    return {
+      picture: []
+    }
+  },
+  methods: {
+    ...mapActions(['getAccount']),
+    back() {
+      uni.navigateBack({
+        success: () => {
+          this.getAccount()
+        }
+      })
+    }
+  },
+  onShow() {
+    document.title = '头像上传'
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.uploadPhoto {
+
+  .photo {
+    background-color: #FFFFFF;
+    padding: 20px 30px;
+
+    .photo-title {
+      width: 100%;
+      height: 100px;
+      line-height: 80px;
+      color: #333333;
+
+      & > span {
+        color: #999999;
+      }
+    }
+
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background-color: #1365DD;
+    color: #FFFFFF;
+  }
+}
+</style>

src/project/huizhili/AppHome/components/App.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="App">
+    <div class="content">
+      <div class="app-list">
+        <div class="title">网格管理</div>
+        <div class="item" v-for="(item, index) in gridAppList" :key="index" @click="linkTo(item.linkUrl)">
+          <img :src="item.img" alt="">
+          <p>{{ item.title }}</p>
+        </div>
+      </div>
+      <div class="app-list">
+        <div class="title">日常办公</div>
+        <div class="item" v-for="(item, index) in officeAppList" :key="index" @click="linkTo(item.linkUrl)">
+          <img :src="item.img" alt="">
+          <p>{{ item.title }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+  data() {
+    return {
+      gridAppList: [
+        {
+          img: require('../img/app/app-jmda-icon.png'),
+          title: '居民档案',
+          linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
+        },
+        {
+          img: require('../img/app/app-wggl-icon.png'),
+          title: '网格管理',
+          linkUrl: '/apps/AppGridManagement/AppGridManagement'
+        },
+        {
+          img: require('../img/app/app-tsrq-icon.png'),
+          title: '特殊人群',
+          linkUrl: '/apps/AppSpecialGroups/AppSpecialGroups'
+        },
+        {
+          img: require('../img/app/app-rfdt-icon.png'),
+          title: '人房地图',
+          linkUrl: '/apps/AppBuilding/AppBuilding'
+        }
+      ],
+      officeAppList: [
+        {
+          img: require('../img/app/app-mdtj-icon.png'),
+          title: '矛盾调解',
+          linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
+        },
+        {
+          img: require('../img/app/app-zfww-icon.png'),
+          title: '走访慰问',
+          linkUrl: '/apps/AppWalkask/AppWalkask'
+        },
+        {
+          img: require('../img/app/app-swjl-icon.png'),
+          title: '事务记录',
+          linkUrl: '/apps/AppInterview/AppInterview'
+        },
+        {
+          img: require('../img/home/home-xtxf-icon.png'),
+          title: '协同宣发',
+          linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
+        },
+        {
+          img: require('../img/app/app-xftj-icon.png'),
+          title: '宣发统计',
+          linkUrl: '/apps/AppPropagandaStatistics/AppPropagandaStatistics'
+        },
+        {
+          img: require('../img/app/app-tzgg-icon.png'),
+          title: '通知公告',
+          linkUrl: '/apps/AppNotification/AppNotification'
+        },
+        {
+          img: require('../img/app/app-wgyjf-icon.png'),
+          title: '网格员积分',
+          linkUrl: './GridMemberPoints'
+        },
+      ]
+    }
+  },
+  methods: {
+    linkTo(url) {
+      uni.navigateTo({ url })
+    }
+  },
+  created() {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.App {
+  .content {
+    padding: 32px 32px 0;
+    .app-list {
+      width: 100%;
+      background: #FFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
+      border-radius: 8px;
+      margin-bottom: 32px;
+      .title {
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        padding: 24px 0 8px 32px;
+      }
+      .item {
+        display: inline-block;
+        width: 25%;
+        text-align: center;
+        padding: 24px 0;
+        img {
+          width: 72px;
+          height: 72px;
+          margin-bottom: 8px;
+        }
+        p {
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+        }
+      }
+    }
+  }
+}
+</style>

src/project/huizhili/AppHome/components/Grid.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="Grid">
+    <div class="banner-img">
+      <img src="../img/grid/grid-banner.png" alt="">
+    </div>
+    <div class="content">
+      <div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.linkUrl)">
+        <div class="title">{{ item.title }}</div>
+        <div class="text">{{ item.text }}</div>
+        <img :src="item.img" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Grid",
+  data() {
+    return {
+      appList: [
+        {
+          img: require('../img/grid/grid-jmda.png'),
+          title: '居民档案',
+          text: '辖区居民信息全览',
+          linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
+        },
+        {
+          img: require('../img/grid/grid-tsrq.png'),
+          title: '特殊人群',
+          text: '特殊居民标签化管理',
+          linkUrl: '/apps/AppSpecialGroups/AppSpecialGroups'
+        },
+        {
+          img: require('../img/grid/grid-wggl.png'),
+          title: '网格管理',
+          text: '基层网格化精细治理',
+          linkUrl: '/apps/AppGridManagement/AppGridManagement'
+        },
+        {
+          img: require('../img/grid/grid-rfdt.png'),
+          title: '人房地图',
+          text: '图属结合更直观',
+          linkUrl: '/apps/AppBuilding/AppBuilding'
+        }
+      ]
+    }
+  },
+  methods: {
+    linkTo(url) {
+      uni.navigateTo({ url })
+    }
+  },
+  created() {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Grid {
+  .banner-img {
+    padding: 32px 32px 16px;
+    img {
+      width: 100%;
+      // height: 240px;
+    }
+  }
+  .content {
+    padding-left: 32px;
+    .item {
+      display: inline-block;
+      width: calc(50% - 32px);
+      margin: 0 32px 32px 0;
+      padding: 40px 0 0 40px;
+      position: relative;
+      height: 384px;
+      background-color: #fff;
+      box-sizing: border-box;
+      border-radius: 8px;
+      .title {
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 50px;
+      }
+      .text {
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ABB5C4;
+        line-height: 36px;
+      }
+      img {
+        width: 208px;
+        height: 208px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
+    }
+  }
+}
+</style>

src/project/huizhili/AppHome/components/Home.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="Home">
+    <div @click="linkTo('./HelpDocs')">
+      <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
+    </div>
+    <!-- <div class="tips">
+      <img src="../img/home/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
+    </div> -->
+    <div class="content">
+      <div class="user-info">
+        <div class="left">
+          <img :src="user.avatar" alt="" v-if="user.avatar">
+          <img src="../img/user-icon.png" alt="" v-else>
+        </div>
+        <div class="right">
+          <p class="name">你好，<AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId"></AiOpenData></p>
+          <p class="time">您已加入慧政务 <span>{{ girdInfo['加入天数'] }}</span>天</p>
+        </div>
+      </div>
+      <div class="app-list">
+        <div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.linkUrl)">
+          <img :src="item.img" alt="">
+          <p>{{ item.title }}</p>
+        </div>
+      </div>
+      <div class="title">数据统计</div>
+      <div class="tab-content">
+        <div class="item" v-for="(item, index) in tabStatistics" :key="index">
+          <p><span></span>{{ item.label }}</p>
+          <div>{{ item.value || 0}}</div>
+        </div>
+      </div>
+      <div class="title">消息发送情况</div>
+      <div class="chart-content" id="statistic"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import echarts from 'echarts'
+export default {
+  name: "Home",
+  data() {
+    return {
+      appList: [
+        {
+          img: require('../img/home/home-jmgl-icon.png'),
+          title: '居民档案',
+          linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
+        },
+        {
+          img: require('../img/home/home-zfww-icon.png'),
+          title: '走访慰问',
+          linkUrl: '/apps/AppWalkask/AppWalkask'
+        },
+        {
+          img: require('../img/home/home-mdtj-icon.png'),
+          title: '矛盾调解',
+          linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
+        },
+        {
+          img: require('../img/home/home-xtxf-icon.png'),
+          title: '协同宣发',
+          linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
+        }
+      ],
+      tabStatistics: [],
+      echartData: null,
+      list: ['慧政务改版上线了，点此查看帮助文档！'],
+      girdInfo: {}
+    }
+  },
+  computed: { ...mapState(['user']) },
+  methods: {
+    chartInit() {
+      this.echartData = echarts.init(document.getElementById('statistic'))
+      var option = {
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#E1E5EF', //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          data: ['4月', '5月', '6月', '7月', '8月',]
+        },
+        yAxis: {
+          axisLine:{       //y轴
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#666',
+            },
+          },
+          type: 'value',
+          minInterval: 50,
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        series: [
+          {
+            data: [155, 130, 120, 160, 120, 130, 110],
+            type: 'line',
+            areaStyle: {//覆盖区域的渐变色
+            	normal: {
+            		color: {
+                  type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
+                    }
+                  ],
+                  global: false // 缺省为 false
+		       		  },
+            	}
+            },
+            lineStyle: {
+              normal: {
+                color: '#2891FF'
+              }
+            },
+            itemStyle : {
+              normal : {
+                color:'#2891FF',
+              }
+            }
+          }
+        ]
+      };
+      this.echartData.setOption(option)
+    },
+    linkTo(url) {
+      console.log(url)
+      uni.navigateTo({ url })
+    },
+    getGirdInfo() {
+      this.$http.post(`/app/appgirdmemberinfo/girdMemberOrNotStatistic`).then(res => {
+        if (res.code == 0) {
+          this.girdInfo = res.data
+          for(var i in res.data) {
+            if(i != '加入天数' && i != '网格员类型') {
+              this.tabStatistics.push({label: i, value: res.data[i]})
+            }
+          }
+        }
+      })
+    }
+  },
+  created() {
+    this.getGirdInfo()
+    this.$nextTick(() => {
+      this.chartInit()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Home {
+  .tips {
+    padding: 24px 32px;
+    background-color: #3975C6;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #FFF;
+    line-height: 40px;
+    img {
+      width: 32px;
+      height: 32px;
+      margin-right: 16px;
+      vertical-align: middle;
+    }
+  }
+  .content {
+    padding: 0 32px;
+    .user-info {
+      display: flex;
+      padding: 48px 0 32px 0;
+      .left {
+        width: 96px;
+        height: 96px;
+        margin-right: 32px;
+        img {
+          width: 96px;
+          height: 96px;
+          border-radius: 50%;
+          border: 4px solid #FFFFFF;
+          box-sizing: border-box;
+        }
+      }
+      .right {
+        width: calc(100% - 128px);
+        margin-top: 6px;
+        .name {
+          font-size: 32px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 44px;
+        }
+        .time {
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #999;
+          line-height: 40px;
+          span {
+            color: #3975C6;
+          }
+        }
+      }
+    }
+    .app-list {
+      width: 100%;
+      background: #FFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
+      border-radius: 8px;
+      display: flex;
+      .item {
+        flex: 1;
+        text-align: center;
+        padding: 24px 0;
+        img {
+          width: 64px;
+          height: 64px;
+          margin-bottom: 8px;
+        }
+        p {
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+        }
+      }
+    }
+    .title {
+      padding: 48px 0 24px 0;
+      font-size: 32px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 44px;
+    }
+    .tab-content {
+      .item {
+        display: inline-block;
+        width: calc(50% - 8px);
+        height: 160px;
+        background: #FFF;
+        box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
+        border-radius: 16px;
+        padding: 24px;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+        p {
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666;
+          line-height: 40px;
+          margin-bottom: 8px;
+          span {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            border: 4px solid #3975C6;
+            margin-right: 8px;
+            box-sizing: border-box;
+          }
+        }
+        div{
+          font-size: 48px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #333;
+          line-height: 64px;
+          padding-left: 24px;
+        }
+        
+      }
+      .item:nth-of-type(2n-1) {
+        margin-right: 14px;
+      }
+      .item:nth-last-of-type(1) {
+        p {
+          span {
+            border-color: #3ACEB3;
+          }
+        }
+      }
+    }
+    .chart-content{
+      width: 100%;
+      height: 514px;
+      background: #FFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
+      border-radius: 8px;
+      margin-bottom: 82px;
+    }
+  }
+  ::v-deep .u-type-warning-light-bg {
+    padding: 20px 32px!important;
+    background-color: #3975C6!important;
+  }
+  ::v-deep .u-icon__icon--warning {
+    color: #D7E3F3;
+    width: 32px;
+    height: 32px;
+    font-size: 0px!important;
+    background-image: url('../img/home/tips-icon.png');
+    background-size: 100%;
+  }
+  ::v-deep .u-type-warning {
+    color: #fff;
+    font-size: 28px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    line-height: 40px;
+  }
+}
+</style>

src/project/huizhili/AppHome/components/My.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="My">
+    <div class="content">
+      <div class="user-info">
+        <img src="../img/my/my-bg-user.png" alt="" class="bg-img">
+        <div class="top">
+          <div>
+            <AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId"></AiOpenData>
+          </div>
+          <img :src="user.avatar" alt="" v-if="user.avatar">
+          <img src="../img/user-icon.png" alt="" v-else>
+        </div>
+        <div class="bottom">{{ user.corpName }}</div>
+      </div>
+      <div class="link" v-for="(item, index) in linkList" :key="index" @click="linkTo(item.linkUrl)">
+        <div class="left">
+          <img :src="item.img" alt="">{{ item.title }}
+        </div>
+        <img src="../img/right-icon-999.png" alt="" class="right-icon">
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+export default {
+  name: "My",
+  data() {
+    return {
+      linkList: [
+        {
+          title: '头像上传',
+          img: require('../img/my/my-txsc.png'),
+          linkUrl: './UploadPhoto'
+        },
+        {
+          title: '意见反馈',
+          img: require('../img/my/my-yjfk.png'),
+          linkUrl: './FeedBack'
+        },
+        {
+          title: '联系我们',
+          img: require('../img/my/my-lxwm.png'),
+          linkUrl: 'contact'
+        },
+        {
+          title: '帮助文档',
+          img: require('../img/my/my-bzwd.png'),
+          linkUrl: './HelpDocs'
+        }
+      ]
+    }
+  },
+  computed: { ...mapState(['user']) },
+  methods: {
+    ...mapActions(['wxInvoke', 'injectJWeixin']),
+    linkTo(url) {
+      if(url == 'contact') { //联系我们
+        this.wxInvoke(["openThirdAppServiceChat", {}, res => {
+          if (res.err_msg == "openThirdAppServiceChat:fail") {
+            window.open("https://work.weixin.qq.com/kfid/kfcc23927b18d1ad4f4")
+          }
+        }])
+      }else {
+        console.log(url)
+        uni.navigateTo({ url })
+      }
+      
+    }
+  },
+  created() {
+    this.injectJWeixin('openThirdAppServiceChat')
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.My {
+  .content {
+    padding: 32px 32px 0;
+    .user-info{
+      width: 100%;
+      height: 248px;
+      border-radius: 8px;
+      background-color: #fff;
+      position: relative;
+      margin-bottom: 32px;
+      .bg-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .top {
+        display: flex;
+        justify-content: space-between;
+        padding: 28px 32px 36px;
+        border-bottom: 1px solid #eee;
+        div {
+          font-size: 40px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 96px;
+        }
+        img {
+          width: 96px;
+          height: 96px;
+          border-radius: 50%;
+          border: 1px solid #DDD;
+        }
+      }
+      .bottom {
+        padding: 24px 32px;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999;
+        line-height: 40px;
+      }
+    }
+    .link {
+      display: flex;
+      justify-content: space-between;
+      padding: 32px;
+      background-color: #fff;
+      border-radius: 8px;
+      margin-bottom: 24px;
+      .left {
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 42px;
+        img {
+          width: 48px;
+          height: 48px;
+          margin-right: 16px;
+          vertical-align: middle;
+        }
+      }
+      .right-icon {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}
+</style>