refactor social 界面

src/App.vue

@@ -1,94 +1,121 @@
 <template>
-    <div id="app">
-        <keep-alive>
-            <router-view class="app-body" v-if="$route.meta.keepAlive"/>
-        </keep-alive>
-        <router-view class="app-body" v-if="!$route.meta.keepAlive"/>
-        <div class="tab-nav nav-bar" v-if="$route.meta.showTab">
-                <a  href="javascript:;" v-for="(i,index) in data.tabs" :key="index" :class="{active:index == data.thatnum}" @click="addClassName(index)">
-                    <router-link :to="i.url">
-                        <img v-if="data.thatnum!=index"  :src="i.img"    class="first weui-tabbar__icon">
-                        <img v-if="data.thatnum==index"  :src="i.active" class="last first weui-tabbar__icon">
-                    </router-link>
-                </a>
-        </div>
+  <div id="app">
+    <keep-alive>
+      <router-view class="app-body" v-if="$route.meta.keepAlive" />
+    </keep-alive>
+    <router-view class="app-body" v-if="!$route.meta.keepAlive" />  
+
+    <div class="tab-nav nav-bar" v-if="$route.meta.showTab">
+      <a
+        href="javascript:;"
+        v-for="(i,index) in data.tabs"
+        :key=index
+        :class="{active:index === data.thatnum}"
+        @click="addClassName(index)"
+      >
+        <router-link :to="i.url" >
+          <img v-if="data.thatnum!=index" :src="i.img" class="first weui-tabbar__icon" />
+          <img v-if="data.thatnum==index" :src="i.active" class="last first weui-tabbar__icon" />
+        </router-link>
+      </a>
     </div>
+  </div>
 </template>
 
 <script lang="ts" >
-    import {Component, Vue} from "vue-property-decorator";
-    import router from "@/router";
-    import Utils from './extend/Utils';
+import { Component, Vue } from "vue-property-decorator";
+import router from "@/router";
+import Utils from "./extend/Utils";
+
+@Component({})
+export default class App extends Vue {
+  public data: any = {
+    thatnum: 0,
+    tabs: [
+      {
+        url: "/index",
+        img: require("./assets/image/label_01.png"),
+        active: require("./assets/image/label-2_01.png")
+      },
+      {
+        url: "/other",
+        img: require("./assets/image/label_02.png"),
+        active: require("./assets/image/label-2_02.png")
+      },
+      {
+        url: "/user",
+        img: require("./assets/image/label_03.png"),
+        active: require("./assets/image/label-2_03.png")
+      }
+    ]
+  };
+  private hasLogined() {
+    this.data.mobile = localStorage.getItem("mobile");
+    this.data.citycode = localStorage.getItem("citycode");
+    this.data.city_name = localStorage.getItem("city_name");
+    this.data.social_type = localStorage.getItem("social_type");
+    this.data.hubie = localStorage.getItem("social_name");
 
-    @Component({})
-    export default class App extends Vue {
-         public data:any= {
-             thatnum: -1,
-             tabs:[
-                 {url:'/index',img:require('./assets/image/label_01.png'),active:require('./assets/image/label-2_01.png')},
-                 {url:'/other',img:require('./assets/image/label_02.png'),active:require('./assets/image/label-2_02.png')},
-                 {url:'/user', img:require('./assets/image/label_03.png'),active:require('./assets/image/label-2_03.png')}
-             ]
-         }
-        addClassName(index) {
-            this.data.thatnum = index;
-        }
-        public get title() {
-            return this.$route.meta.title;
-        }
-        public goBack() {
-            router.back();
-        }
+    if (this.data.mobile == null) {
+      return false;
+    } else {
+      return true;
     }
+  }
+  addClassName(index) {
+    this.data.thatnum = index;
+    console.log(this.data.tabs.length)
+  }
+}
 </script>
 
 <style lang="scss">
-    @import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
-    @import '@/assets/scss/common.scss';
+@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+@import "@/assets/scss/common.scss";
 
-    #app {
-        position: relative;
-        min-height: 100%;
-        background: white;
-    }
+#app {
+  position: relative;
+  min-height: 100%;
+  background: white;
+}
 
-    #app > div:first-child {
-        font-size: 1.2rem;
-    }
-    .nav-ul{
-        display: flex;
-        width: 100%;
-    }
+#app > div:first-child {
+  font-size: 1.2rem;
+}
+.nav-ul {
+  display: flex;
+  width: 100%;
+}
 
-    .tab-nav {
-        position: fixed;
-        display: flex;
-        justify-content: space-between;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        border-bottom: 0;
-        border-top: 1px solid #f0f0f0;
-        background: #fff;
-        z-index: 999;
-        img{
-            width: 100%;
-        }
-    }
+.tab-nav {
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 0;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+  z-index: 999;
+  img {
+    width: 100%;
+  }
+}
 
-    .app-body {
-        /*margin-top: 45px;*/
-        /*margin-bottom: 5rem;*/
-        overflow: hidden;
-    }
+.app-body {
+  /*margin-top: 45px;*/
+  /*margin-bottom: 5rem;*/
+  overflow: hidden;
+}
 
-    .bar-nav .title {
-        position: absolute;
-        left: 0;
-        right: 0;
-        text-align: center;
-    }
-    body .el-message-box {
-        width: 300px;
-    }
-    </style>
+.bar-nav .title {
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+body .el-message-box {
+  width: 300px;
+}
+</style>

src/config/index.ts

@@ -9,7 +9,7 @@ export const params: any = {};
 
 export const http: any = {
     getverifycode: apihost + '/login/getCode',
-    login: apihost + '/login/loginWithCode',
+    loginWithCode: apihost + '/login/loginWithCode',
 
     getBannerList: apihost + '/index/banner',
     getsocialconfig: apihost + '/index/getSocialConfig',
@@ -19,7 +19,6 @@ export const http: any = {
     getSocialLimit: apihost + '/index/getSocialLimit',
     getSociallist: apihost + '/index/getSociallist',
     getconfig: apihost + '/index/getConfig',
-    getsharepic: apihost + '/index/getSharePic',
 
     getUserInfo: apihost + '/user/getInfo',
     baseinfo: apihost + '/user/saveBase',
@@ -35,6 +34,8 @@ export const http: any = {
     withdrawal: apihost + '/user/withdrawal',
     userWithdrawal: apihost + '/user/userWithdrawal',
     calcBill: apihost + '/user/calcBill',
+    getsharepic: apihost + '/user/getSharePic',
+
 
     getmoth: apihost + '/repair/RepairCalculation',
     getRepairMonth: apihost + '/repair/getRepairMonth',

src/extend/Http.ts

@@ -21,10 +21,10 @@ export default class Http
 
     public httpClient: HttpRequest = HttpRequest.getInstance();
 
-    async login(params: any) {
+    async loginWithCode(params: any) {
         return this.httpClient.request({
-            url: http.login,
-            method: 'POST',
+            url: http.loginWithCode,
+            method: 'GET',
             data: params,
         });
     }
@@ -39,7 +39,7 @@ export default class Http
     async getUserInfo(params: any = null) {
         return this.httpClient.request({
             url: http.getUserInfo,
-            method: 'POST',
+            method: 'GET',
             data: params,
         });
     }
@@ -47,14 +47,14 @@ export default class Http
     async setFirstLogin(params: any = null) {
         return this.httpClient.request({
             url: http.setfirstLogin,
-            method: 'POST',
+            method: 'GET',
             data: params,
         });
     }
     async saveBase(params: any = null) {
         return this.httpClient.request({
             url: http.baseinfo,
-            method: 'POST',
+            method: 'GET',
             data: params,
         });
     }
@@ -98,14 +98,14 @@ export default class Http
     async ctOrder(params: any = null) {
         return this.httpClient.request({
             url: http.ctorder,
-            method: 'POST',
+            method: 'GET',
             data: params,
         });
     }
     async cancelOrder(params: any = null) {
         return this.httpClient.request({
             url: http.cancelorder,
-            method: 'POST',
+            method: 'GET',
             data: params,
         });
     }

src/extend/HttpRequest.ts

@@ -31,7 +31,7 @@ export default class HttpRequest {
 
     private getOpts(options: AxiosRequestConfig): AxiosRequestConfig {
         let opts: any = {
-            method: 'GET', timeout: 5000, headers: {
+            method: 'GET', timeout: 500000, headers: {
                 'content-type': 'application/json'
             }, baseURL: host
         };
@@ -49,7 +49,7 @@ export default class HttpRequest {
         console.log('url:', options.url)
         let opts = this.getOpts(options);
         const instance = axios.create({
-            timeout: 5000,
+            timeout: 50000,
             baseURL: '/api',
             withCredentials: true,  // send cookies when cross-domain requests
         });
@@ -102,6 +102,8 @@ export default class HttpRequest {
         }
         console.log('request fail code:', res);
         switch (res.data.code.toString()) {
+            case '10102':
+                return res.data;                
             case '20002':
             case '20003':
             case '20004':

src/router/router.ts

@@ -112,6 +112,19 @@ export default [
             title: '个人中心'
         },
     },
+    {
+        path: '/user/detail',
+        name: 'udetail',
+        component: () => import('@/views/user/detail.vue'),
+        meta: {
+            icon: '',
+            keepAlive: false,
+            showTab: false,
+            showBackLeftBtn: true,
+            showBarRightBtn: false,
+            title: '个人信息填写'
+        }
+    },
     // {
     //     path: '/user/index',
     //     name: 'uindex',

src/views/index/bujiao.vue

@@ -2,7 +2,7 @@
     <div  class="bujiao">
         <div class="bujiaos">
             <div class="bujiao-city">
-                补缴城市 <span style="float: right">{{data.cityname}}</span>
+                补缴城市 <span style="float: right">{{data.city_name}}</span>
             </div>
             <div class="bujiao-hubie">
                 补缴户别 <span  style="float: right">{{data.hubie}}</span>
@@ -75,7 +75,7 @@
             checkboxGroup3: [''],
             month: [],
             priceisShow: false,
-            cityname:'',
+            city_name:'',
             social_type:'',
             code:'',
             hubie:'',
@@ -93,7 +93,7 @@
         async created() 
         {
             let res = await Http.getInstance().getIsrepairQual();
-            this.data.cityname = res.data.city_name
+            this.data.city_name = res.data.city_name
             this.data.social_type = res.data.social_type
             this.data.code = res.data.city_code
             this.data.hubie =  res.data.social_name

src/views/index/index.ts

@@ -12,21 +12,15 @@ import Carousel from '@/components/Carousel/Carousel.vue';
     },
 })
 export default class Index extends Vue {
-    // Getter
-    // @Getter author
-
-    // Action
-    // @Action GET_DATA_ASYN: any;
-
     // data
     data: any = {
         markShow:false,
         appid:'wx98622dc60a8a6abb',
         show: 1,
-        bannerlist:''
+        bannerlist:'',
     };
     private citycode = localStorage.getItem("citycode");
-    private cityname = localStorage.getItem("cityname");
+    private city_name = localStorage.getItem("city_name");
 
    async created() 
    {
@@ -38,7 +32,7 @@ export default class Index extends Vue {
         //    let res = await Http.getInstance().getUserInfo();
         //    console.log('index.ts getUserInfo res =', res)
         //    this.citycode = res.data.social_city as string;
-        //    this.cityname = res.data.city_name as string;
+        //    this.city_name = res.data.city_name as string;
 
         //    if (res.data.is_first == 0) {
         //        this.data.markShow = true
@@ -105,9 +99,63 @@ export default class Index extends Vue {
                 }
             }
         }
+    }
+    private isEmpty(obj) {
+        if (typeof obj == "undefined" || obj == null || obj == "") {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    private hasLogined() {
+        this.data.mobile = localStorage.getItem('mobile')
+        this.data.citycode = localStorage.getItem('citycode')
+        this.data.city_name = localStorage.getItem('city_name')
+        this.data.social_type = localStorage.getItem('social_type');
+        this.data.hubie = localStorage.getItem('social_name');
+
+        if (this.isEmpty(this.data.mobile)) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+
+    private hasDetail() {
+        let citycode = localStorage.getItem('citycode');
+        let social_type = localStorage.getItem('social_type');
+        let id_card = localStorage.getItem('id_card');
+        let realname = localStorage.getItem('realname');
 
+        if (this.isEmpty(realname) || this.isEmpty(id_card) || this.isEmpty(citycode) || this.isEmpty(social_type)) {
+            return false;
+        }
+        else {
+            return true;
+        }
     }
 
+    checkLogined(to,tip) 
+    {
+        if (this.hasLogined() == true) 
+        {
+            if(this.hasDetail() == true) {
+                this.$router.push(to);
+            } else {
+                this.$router.push({ name:'udetail'});
+            }            
+        } 
+        else {
+            var ret = confirm(tip);
+            if(ret == true) {
+                this.$router.push({ name: 'login' });
+            } else {
+
+            }           
+        }
+    }
     yaoqing(){
        this.$router.push('/user/share')
     }
@@ -129,5 +177,4 @@ export default class Index extends Vue {
     // 初始化函数
     init() {
     }
-
 }

src/views/index/index.vue

@@ -18,37 +18,39 @@
             </el-carousel>
         </div>
         <section class="index-main">
-            <router-link class="btn-lg btn-calc text-left" to="/calc">
-                <img src="../../assets/image/ico_04.png" alt="">
-                <span style="font-size: 1.5rem">社保计算器</span></router-link>
-            <router-link class="btn-lg btn-social text-left" to="/social?is_fund=0">
+            <a class="btn-lg btn-social text-left" @click="checkLogined('/social?is_fund=0','您需要完成注册后才能缴纳社保.')">
                 <img src="../../assets/image/ico_05.png" alt="">
                 <span  style="font-size: 1.5rem">社保代缴</span>
-            </router-link>
-            <router-link class="btn-lg btn-social text-left" to="/social?is_fund=1">
+            </a>
+
+            <a class="btn-lg btn-social text-left" @click="checkLogined('/social?is_fund=1','您需要完成注册后才能缴纳社保.')">
                 <img src="../../assets/image/ico_06.png" alt="">
                 <span  style="font-size: 1.5rem">五险一金</span>
-            </router-link>
-            <router-link class="btn-lg btn-social text-left" to="/bujiao">
+            </a>
+            
+            <a class="btn-lg btn-social text-left" @click="checkLogined('/bujiao','您需要完成注册后才能缴纳社保.')">
                 <img src="../../assets/image/homeico_10.png" alt="">
                 <span  style="font-size: 1.5rem">近三月补缴</span>
+            </a>
+            <router-link class="btn-lg btn-calc text-left" to="/calc">
+                <img src="../../assets/image/ico_04.png" alt="">
+                <span style="font-size: 1.5rem">社保计算器</span>
             </router-link>
         </section>
         <div class="marks" v-show="data.markShow" v-on:click="close">
             <div class="mark-back" @click="close">
                 <div class="mark-con">
                    <p class="marks-title">新人专享劵</p>
-                   <p class="marks-price">15<span style="font-size: 2rem;padding-left: 0.5rem;padding-bottom: 0.5rem">元</span> </p>
+                   <p class="marks-price">39.9<span style="font-size: 2rem;padding-left: 0.5rem;padding-bottom: 0.5rem">元</span> </p>
                </div>
             </div>
         </div>
     </div>
 </template>
-<script lang="ts" src="./index.ts"></script>
-
+<script lang="ts" src="./index.ts">
+</script>
 <style lang="scss" scoped>
     @import '@/assets/scss/variables.scss';
-
     .index-wrap {
         width: 100%;
         overflow-x: hidden;

src/views/login/login.ts

@@ -102,12 +102,11 @@ export default class Login extends Vue {
         }
         let post = Object.assign(this.urlParams,Utils.getInstance().serialize(document.getElementById('form-data')));
 
-        let pack = {code: post.password, mobile:post.username};
+        let pack = {mobile: this.data.mobile, code: this.data.codeVerify};
         console.log(post);
         console.log(pack);
 
-
-        let data = await Http.getInstance().login(pack);
+        let data = await Http.getInstance().loginWithCode(pack);
         (<any>window)._agl  &&  (<any>window)._agl.push(['track',  ['success',  {t:  3}]])
         if(data.errcode == 11 || data.errcode == 12 ){
             Message({
@@ -119,21 +118,57 @@ export default class Login extends Vue {
         return false;
     }
 
+
+    private isEmpty(obj) {
+        if (typeof obj == "undefined" || obj == null || obj == "") {
+            return true;
+        } else {
+            return false;
+        }
+    }
+    private hasDetail() {
+        let citycode = localStorage.getItem('citycode');
+        let social_type = localStorage.getItem('social_type'); 
+        let id_card = localStorage.getItem('id_card');
+        let realname = localStorage.getItem('realname');
+
+        if (this.isEmpty(realname) || this.isEmpty(id_card) || this.isEmpty(citycode) || this.isEmpty(social_type)) {
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
     async loginCallBack(data: any) 
     {
         console.log(data);
-        if (data.code === 1) {
+        if (data.code === 1) 
+        {
             for (let index in data.data) {
                 localStorage.setItem(index, data.data[index]);
             }
-            router.replace('index');
-        } else if (data.code === '20201') {
+            if(this.hasDetail()){
+                router.replace('index');
+            }
+            else {
+                var ret = confirm('请继续完善个人信息后，才能缴纳社保.');
+                if (ret == true) {
+                    this.$router.push({ name: 'uinfo' });
+                } else {
+                    router.replace('index');
+                }  
+            }
+        } 
+        else if (data.code === '20201') {
             this.data.errorType.push('mobile');
-        } else if (data.code.toString() === '20202') {
+        } 
+        else if (data.code.toString() === '20202') {
             this.data.errorType.push('imgVerify');
-        } else if (data.code.toString() === '20203') {
+        } 
+        else if (data.code.toString() === '20203') {
             this.data.errorType.push('codeVerify');
-        } else {
+        } 
+        else {
             alert(data.msg);
             return false
         }

src/views/other/other.vue

@@ -111,11 +111,11 @@
         };
         
         async created() {
-            let res = await Http.getInstance().getSocialConfig({
-            });
-            this.data = res.data;
-            console.log()
-            console.log(res)
+            // let res = await Http.getInstance().getSocialConfig({
+            // });
+            // this.data = res.data;
+            // console.log()
+            // console.log(res)
         }
     }
 </script>

src/views/social/social.ts

@@ -14,7 +14,8 @@ const serviceChargeData: any = [
 ];
 
 @Component({})
-export default class Social extends Vue {
+export default class Social extends Vue 
+{
     public data: any = {
         is_fund: 0,
         is_discounts: false,
@@ -36,7 +37,7 @@ export default class Social extends Vue {
         month:'',
         mobile:'',
         citycode:'',
-        cityname:'',
+        city_name:'',
         sheng:'',
         shi:'',
         code:'11',
@@ -45,40 +46,59 @@ export default class Social extends Vue {
         sociallist:[{id: 1, name: "本地城镇"}, {id: 2, name: "本地农村"}, {id: 3, name: "外埠城镇"}, {id: 4, name: "外埠农村"}]
     };
 
-     private service_charge_type: string = 'monthly';
+    private service_charge_type: string = 'monthly';
 
-    async created() 
+    async beforeCreate() 
     {
-        let resisorder = await Http.getInstance().getUserIsOrder();
-        if(resisorder.data.is_order == 1){
-            MessageBox.alert( '您有未支付订单，请先支付或取消未支付订单', '温馨提示', {
-                dangerouslyUseHTMLString: true,
-                confirmButtonText: '确定',
-            }).then(action =>{
-                this.$router.push('/order/list')
-            }).catch(() => {
-                this.$router.push('/index')
-            });
+        console.log('beforeCreate');
+        try{
+            let resisorder = await Http.getInstance().getUserIsOrder();
+            if (resisorder.data.is_order == 1) {
+                MessageBox.alert('您有未支付订单，请先支付或取消未支付订单', '温馨提示', {
+                    dangerouslyUseHTMLString: true,
+                    confirmButtonText: '确定',
+                }).then(action => {
+                    this.$router.push('/order/list')
+                }).catch(() => {
+                    this.$router.push('/index')
+                });
+            }
+        } 
+        catch(error) {
+
         }
+    }
+
+    private check_login() {
         this.data.mobile = localStorage.getItem('mobile')
         this.data.citycode = localStorage.getItem('citycode')
-        this.data.cityname = localStorage.getItem('cityname')
-        let res = await Http.getInstance().getProvinceList();
-        this.data.sheng = res.data.prolist
-        this.data.shi = res.data.citylist
-        let params = Utils.getInstance().getParams(location.href);
-        this.data.is_fund = Number(params.is_fund);
+        this.data.city_name = localStorage.getItem('city_name')
         this.data.social_type = localStorage.getItem('social_type');
         this.data.hubie = localStorage.getItem('social_name');
-        if (this.data.social_type != null) {
-            let res = await Http.getInstance().getSocialLimit({
-                socialType: this.data.social_type,
-                code: this.data.citycode
-            });
-            this.data.social_basic = res.data;
-            // this.data.social_type = this.data.social_type - 1;
-        }
-        this.data.service_charge = serviceChargeData[this.data.is_fund];
+    }
+
+    async created() 
+    {
+        console.log('created');
+        try {
+            this.check_login();
+
+            let res = await Http.getInstance().getProvinceList();
+            this.data.sheng = res.data.prolist
+            this.data.shi = res.data.citylist
+            let params = Utils.getInstance().getParams(location.href);
+            this.data.is_fund = Number(params.is_fund);
+
+            if (this.data.social_type != null) {
+                let res = await Http.getInstance().getSocialLimit({
+                    socialType: this.data.social_type,
+                    code: this.data.citycode
+                });
+                this.data.social_basic = res.data;
+            }
+            this.data.service_charge = serviceChargeData[this.data.is_fund];            
+        } catch (error) {            
+        }       
     }
     async chooseShi(){
         let res = await Http.getInstance().getCityList({
@@ -130,14 +150,14 @@ export default class Social extends Vue {
         this.data.social_type = res.data.social_type;
         this.data.social_name = res.data.social_name;
         this.data.citycode = res.data.city_code;
-        this.data.cityname = res.data.city_name;
+        this.data.city_name = res.data.city_name;
         this.data.service_charge = serviceChargeData[this.data.is_fund];
 
         localStorage.setItem('social_type', this.data.social_type);
         localStorage.setItem('social_name', this.data.social_name);
         localStorage.setItem('service_charge', this.data.service_charge);
         localStorage.setItem('citycode', res.data.city_code);
-        localStorage.setItem('cityname', res.data.city_name);
+        localStorage.setItem('city_name', res.data.city_name);
 
         res = await Http.getInstance().getSocialLimit({
             socialType: this.data.social_type,

src/views/social/social.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="social-wrap">
-    <section class="social-basic input-qian" v-if="data.social_type == null">
+    <!-- <section class="social-basic input-qian" v-if="data.social_type == null"> -->
+    <section class="social-basic input-qian">
       <form action id="social-basic" class="needs-validation" novalidate>
         <div class="form-group row">
           <label for="realname" class="col-3 col-form-label">姓名</label>
@@ -61,13 +62,6 @@
           </div>
           <b class="text-danger">*</b>
         </div>
-        <!--                <div class="form-group row">-->
-        <!--                    <label for="socialCity" class="col-3 col-form-label">缴费城市</label>-->
-        <!--                    <div class="col-8">-->
-        <!--                        <input id="socialCity" name="socialCity" class="form-control" type="text" value="北京" readonly>-->
-        <!--                    </div>-->
-        <!--                    <b class="text-danger">*</b>-->
-        <!--                </div>-->
         <div class="form-group row">
           <label for="idCard" class="col-3 col-form-label">身份证号</label>
           <div class="col-8">
@@ -211,7 +205,7 @@
           style="padding-left: 1.5rem;padding-right: 1.5rem;"
         >
           <label class="col-form-label">代缴城市</label>
-          <span class="hubie-right">{{data.cityname}}</span>
+          <span class="hubie-right">{{data.city_name}}</span>
         </div>
         <div class="detail" style="padding-left: 1.5rem;padding-right: 1.5rem;">
           <label class="col-form-label">缴费明细</label>

src/views/user/detail.scss

@@ -0,0 +1,195 @@
+@import "@/assets/scss/variables.scss";
+
+.input-qian{
+  padding: 1rem 2rem 5rem 2rem;
+}
+.social-wrap .form-group {
+  margin: 1.6rem 0;
+  font-size: 16px;
+}
+
+.form-group.btn-box {
+  background: $gray;
+  margin: 2rem -1.5rem -4.5rem;
+  padding: 3rem;
+  overflow: hidden;
+}
+
+.btn-box .btn {
+  margin: 1rem 0;
+  color: white;
+  background: $green;
+  border-radius: 0.5rem;
+}
+
+
+.btn-box .btn:last-child {
+  margin: 1rem 0;
+  color: #8e8e8e;
+  background: #ffffff;
+  border-radius: 0.5rem;
+}
+
+#app {
+  background: $gray;
+}
+.badge-pill{
+  font-size: 1.3rem;
+  font-weight: 400;
+}
+.badge{
+  font-size: 1.3rem;
+}
+.social-wrap input, .social-wrap select {
+  //background: $gray;
+}
+
+.swich-box .box {
+  width: 60px;
+  height: 25px;
+  background: #ccc;
+  border-radius: 20px;
+  transition: all .5s ease;
+}
+
+.swich-box input {
+  display: none;
+}
+
+.swich-box .box span {
+  display: inline-block;
+  height: 25px;
+  width: 25px;
+  border-radius: 15px;
+  background: #fff;
+  box-shadow: 1px 1px 1px #ddd;
+  transform: translateX(0px);
+  transition: all .5s ease;
+}
+
+.swich-on .box {
+  background: forestgreen;
+  transition: all .5s ease;
+}
+
+.swich-on .box span {
+  transform: translateX(36px);
+  transition: all .5s ease;
+}
+.detail{
+  font-size: 15px;
+}
+.detail .hubie-right{
+  float: right;
+  margin-top: 5px;
+}
+.detail .list-group, .detail .list-group-item{
+  background: $gray;
+}
+
+.col-form-label{
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.social-wrap .needs-validation .form-control {
+  background-image: none;
+}
+.youhui{
+  .pingtai{
+    padding: 10px 0 0;
+    font-size: 16px;
+    color: #999999;
+  }
+  .pingtai-2{
+    font-size: 16px;
+  }
+  .fuwuinput{
+    background: white !important;
+  }
+   .youhui-box{
+    //border: 1px solid #e8e8e8;
+     position:relative;
+    img{
+      width: 178px;
+      height: 33px;
+      margin: 10px 0;
+    }
+    .youhui-text{
+      //padding-left:  10px;
+      font-size: 16px;
+      padding-top: 1rem;
+      position: relative;
+        .youinput{
+          width: 15rem;
+          position: absolute;
+          right: 1rem;
+          top: 1.5rem;
+          background: white;
+        }
+    }
+    .youhui-p{
+      padding-left:  10px;
+      font-size: 16px;
+      color: #d30000;
+      margin-top: 2rem;
+      //padding-right: 20px;
+    }
+     .youhui-dec{
+       margin-top: 1rem;
+       display: inline-block;
+     }
+   }
+}
+.social-wrap{
+  padding:0;
+}
+.bottom-twobtn{
+  width: 100%;
+  padding-left: 0 !important;
+  position: fixed;
+  bottom: 0;
+  height: 4rem;
+  .button-1{
+    width: 50%;
+    height: 100%;
+    border: none;
+    background: #2ba408;
+    color: #ffffff;
+    font-size: 1.5rem;
+  }
+  .button-2{
+    width: 50%;
+    height: 100%;
+    border: none;
+    background: #f5f5f5;
+    color: #5ac53a;
+    font-size: 1.5rem;
+    .button-2-img{
+      width: 1.5rem;
+    }
+  }
+}
+.city-boxs{
+  display: flex;
+  justify-content: space-between;
+}
+.city-sheng{
+  width: 15.7rem;
+  height: 2.5rem;
+  font-size: 1rem;
+  background: white;
+  border-radius: 3px;
+  border-color: #d2d2d2;
+  color: #666666;
+}
+.city-shi{
+  width: 15.7rem;
+  height: 2.5rem;
+  font-size: 1rem;
+  background: white;
+  border-radius: 3px;
+  border-color: #d2d2d2;
+  color: #666666;
+  margin-top: 1rem;
+}

src/views/user/detail.vue

@@ -0,0 +1,551 @@
+<template>
+  <div class="social-wrap">
+    <section class="social-basic input-qian">
+      <form action id="social-basic" class="needs-validation" novalidate>
+        <div class="form-group row">
+          <label for="mobile" class="col-3 col-form-label">手机号码</label>
+          <div class="col-8">
+            <input
+              type="text"
+              class="form-control"
+              id="mobile"
+              name="mobile"
+              :value="data.mobile"
+              required
+              pattern="^1[3-9]\d{9}$"
+            />
+            <div class="invalid-feedback">请输入有效的手机号码</div>
+          </div>
+          <b class="text-danger">*</b>
+        </div>
+
+        <div class="form-group row">
+          <label for="realname" class="col-3 col-form-label">身份证姓名</label>
+          <div class="col-8">
+            <input
+              type="text"
+              class="form-control"
+              id="realname"
+              name="realname"
+              :value="data.realname"
+              required
+              pattern="^[\u4e00-\u9fa5]{2,4}$"
+            />
+            <div class="invalid-feedback">请输入有效的姓名</div>
+          </div>
+          <b class="text-danger">*</b>
+        </div>
+
+        <div class="form-group row">
+          <label for="idCard" class="col-3 col-form-label">身份证号码</label>
+          <div class="col-8">
+            <input
+              type="text"
+              class="form-control"
+              id="idCard"
+              name="idCard"
+              :value="data.id_card"
+              required
+              pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)"
+            />
+            <div class="invalid-feedback">请输入有效的身份证号</div>
+          </div>
+          <b class="text-danger">*</b>
+        </div>
+
+        <div class="form-group row">
+          <label for="gender" class="col-3 col-form-label">性别</label>
+          <div class="col-8">
+            <select id="gender" name="gender" class="form-control" :value="data.gender">
+              <option value="1">男</option>
+              <option value="2">女</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label for="city" class="col-3 col-form-label">代缴城市</label>
+          <div class="col-8">
+            <select class="city-sheng" name id="sheng" v-model="data.code" @change="chooseShi()">
+              <option
+                style="color:#8e8e8e"
+                v-for="item in data.sheng"
+                :value="item.code"
+              >{{item.name}}</option>
+            </select>
+            <br />
+            <select
+              class="city-shi"
+              name="social_city"
+              id
+              v-model="data.codes"
+              @change="chooseSocial()"
+            >
+              <option v-for="items in data.shi" :value="items.code">{{items.name}}</option>
+            </select>
+            <div class="invalid-feedback">请选择代缴城市</div>
+          </div>
+          <b class="text-danger">*</b>
+        </div>
+
+        <div class="form-group row">
+          <label for="socialType" class="col-3 col-form-label">社保户别</label>
+          <div class="col-8">
+            <select id="socialType" name="socialType" class="form-control">
+              <option v-for="item in data.sociallist" :value="item.id">{{item.name}}</option>
+            </select>
+            <div class="invalid-feedback">请输入有效的社保户别</div>
+          </div>
+          <b class="text-danger">*</b>
+        </div>
+
+        <div class="form-group row">
+          <label for="addr" class="col-3 col-form-label">联系地址</label>
+          <div class="col-8">
+            <input type="text" class="form-control" id="addr" name="addr" value />
+          </div>
+        </div>
+
+        <div class="text-right" style="color: #6b6b6b">
+          <small class="small">
+            输入您的个人信息,
+            <b class="text-danger">*</b>号为必填内容
+          </small>
+        </div>
+        <div class="btn-box form-group mt-3 row">
+          <input type="hidden" name="is_edit" value />
+          <a
+            href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUxMzYyMjYzOA==&scene=126&bizpsid=0#wechat_redirect"
+          >联系客服</a>
+          <button
+            type="button"
+            style="background: #0dbc5a;color: #ffffff;"
+            class="btn btn-block p-3"
+            v-on:click="saveInfo"
+          >下一步</button>
+        </div>
+      </form>
+    </section>    
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator';
+import Utils from '@/extend/Utils';
+import Http from '@/extend/Http';
+import router from '@/router';
+import {MessageBox} from 'element-ui';
+
+@Component({})
+export default class Detail extends Vue 
+{
+    public data: any = {
+        mobile:'',
+        realname:'',
+        citycode:'',
+        city_name:'',
+        gender:1,
+        
+        is_discounts: false,
+        social_calc: null,
+        service_calc: 0,
+        fund_calc: 0,
+        shouxu:0,
+        subtotal_calc: 0,
+        total_calc: 0,
+        social_basic: {pension: 3400, fund: 3400},
+        social_type: null,
+        social_name:'',
+        service_charge: null,
+        discountList:'',
+        // value:'',
+        discount:0,
+        freedom:0,
+        hubie:'',
+        month:'',
+
+        sheng:'',
+        shi:'',
+        code:'11',
+        codes:'1101',
+        couponSelected:'',
+        sociallist:[{id: 1, name: "本地城镇"}, {id: 2, name: "本地农村"}, {id: 3, name: "外埠城镇"}, {id: 4, name: "外埠农村"}]
+    };
+    private initData() {
+        this.data.realname = localStorage.getItem('realname');
+        this.data.mobile = localStorage.getItem('mobile');
+        this.data.gender = localStorage.getItem('gender');
+        this.data.id_card = localStorage.getItem('id_card');
+        this.data.citycode = localStorage.getItem('citycode');
+        this.data.city_name = localStorage.getItem('city_name');
+        this.data.social_type = localStorage.getItem('social_type');
+        this.data.hubie = localStorage.getItem('social_name');
+
+
+        console.log('id_card',this.data.id_card);
+    }
+
+    async created() 
+    {
+        console.log('created');
+        try {
+            this.initData();
+
+            let res = await Http.getInstance().getProvinceList();
+            this.data.sheng = res.data.prolist
+            this.data.shi = res.data.citylist
+            let params = Utils.getInstance().getParams(location.href);
+            this.data.is_fund = Number(params.is_fund);
+
+            if (this.data.social_type != null) {
+                let res = await Http.getInstance().getSocialLimit({
+                    socialType: this.data.social_type,
+                    code: this.data.citycode
+                });
+                this.data.social_basic = res.data;
+            }
+            // this.data.service_charge = serviceChargeData[this.data.is_fund];            
+        } catch (error) {            
+        }       
+    }
+    async chooseShi(){
+        let res = await Http.getInstance().getCityList({
+            code: this.data.code
+        });
+        this.data.shi = res.data
+        console.log(res.data)
+    }
+    async chooseSocial(){
+        let res = await Http.getInstance().getSociallist({
+            code: this.data.codes
+        });
+        if(res.data){
+            this.data.sociallist = res.data
+        }
+    }
+    open() {
+        // @ts-ignore
+        MessageBox.alert('<a href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a><p>手机号同步微信</p>', '请联系客服', {
+            dangerouslyUseHTMLString: true,
+            confirmButtonText: "拨打" ,
+        }).then(action =>{
+            window.location.href = 'tel://' +Http.PHONE;
+        });
+    }
+
+    async updated() {
+        if (this.data.social_calc == null) {
+            this.calcBill();
+        }
+    }
+
+    async saveInfo(event: any) 
+    {
+        if(this.data.codes == ''){
+            alert('请选择代缴城市')
+            return false
+        }
+    
+        let form = event.target.form;
+        if (form.checkValidity() === false) {
+            form.classList.add('was-validated');
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+        let res = await Http.getInstance().saveBase(Utils.getInstance().serialize(form));
+        // @ts-ignore
+        this.data.social_type = res.data.social_type;
+        this.data.social_name = res.data.social_name;
+        this.data.citycode = res.data.city_code;
+        this.data.city_name = res.data.city_name;
+        // this.data.service_charge = serviceChargeData[this.data.is_fund];
+
+        localStorage.setItem('social_type', this.data.social_type);
+        localStorage.setItem('social_name', this.data.social_name);
+        localStorage.setItem('service_charge', this.data.service_charge);
+        localStorage.setItem('citycode', res.data.city_code);
+        localStorage.setItem('city_name', res.data.city_name);
+
+        res = await Http.getInstance().getSocialLimit({
+            socialType: this.data.social_type,
+            code: this.data.codes
+        });
+        this.data.social_basic = res.data;
+        return false;
+    }
+
+    async calcBill(event?: any) {
+        let form = event ? event.target.form : document.getElementById('social-detail');
+        if (form.checkValidity() === false) {
+            form.classList.add('was-validated');
+            return false;
+        }
+        console.log(form)
+        let res = await Http.getInstance().calcBill(Utils.getInstance().serialize(form));
+        this.data.social_calc = res.data.social;
+        this.data.service_calc = res.data.service;
+        this.data.discount = res.data.discount;
+        this.data.freedom = res.data.freedom;
+        this.data.fund_calc = res.data.fund;
+        this.data.subtotal_calc = res.data.subtotal;
+        this.data.total_calc = res.data.total;
+        this.data.is_discounts = res.data.discounts;
+        this.data.month = res.data.month;
+        let ress = await Http.getInstance().getDiscount();
+        if(ress.data.length == 0){
+            this.data.discountList=  [{id: 0, money: "暂无优惠券"}]
+        }else{
+            this.data.discountList = ress.data;
+        }
+    }
+
+    async saveOrder(event: any) {
+        let date = new Date();
+        let seperator1 = "-";
+        let year = date.getFullYear();
+        let month = date.getMonth() + 1;
+        let strDate = date.getDate();
+        if (strDate > 28 ) {
+            if(this.data.is_fund == 0){
+                MessageBox.alert('当月社保缴纳时间为1-29日，目前只能为您代缴下个月的社保，如需缴纳本月社保，请联系客服。', '溫馨提示', {
+                    dangerouslyUseHTMLString: true,
+                    showCancelButton: true,
+                    confirmButtonText: "联系客服" ,
+                    cancelButtonText: '继续缴费',
+                }).then(action =>{
+                    window.location.href = 'tel://' +Http.PHONE;
+                });
+            }else {
+                MessageBox.alert('当月社保/公积金缴纳时间为1-29日，目前只能为您代缴下个月的社保/公积金，如需缴纳本月社保/公积金，请联系客服。', '溫馨提示', {
+                    dangerouslyUseHTMLString: true,
+                    showCancelButton: true,
+                    confirmButtonText: "联系客服" ,
+                    cancelButtonText: '继续缴费',
+                }).then(action =>{
+                    window.location.href = 'tel://' +Http.PHONE;
+                });
+            }
+        }
+        let form = event.target.form;
+        if (form.checkValidity() === false) {
+            form.classList.add('was-validated');
+            event.preventDefault();
+            event.stopPropagation();
+            return false;
+        }
+        let res = await Http.getInstance().saveOrder(Utils.getInstance().serialize(form));
+        localStorage.setItem('order_paying', JSON.stringify(res.data));
+        router.replace({
+            name: 'opayment',
+            params: {
+                order_sn: res.data.order_sn,
+                type: '1'
+            }
+        });
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables.scss";
+
+.social-wrap {
+  width: 100%;
+  padding: 1.5rem;
+  background: #ffffff;
+}
+.input-qian{
+  padding: 1rem 2rem 5rem 2rem;
+}
+.social-wrap .form-group {
+  margin: 1.6rem 0;
+  font-size: 16px;
+}
+
+.form-group.btn-box {
+  background: $gray;
+  margin: 2rem -1.5rem -4.5rem;
+  padding: 3rem;
+  overflow: hidden;
+}
+
+.btn-box .btn {
+  margin: 1rem 0;
+  color: white;
+  background: $green;
+  border-radius: 0.5rem;
+}
+
+
+.btn-box .btn:last-child {
+  margin: 1rem 0;
+  color: #8e8e8e;
+  background: #ffffff;
+  border-radius: 0.5rem;
+}
+
+#app {
+  background: $gray;
+}
+.badge-pill{
+  font-size: 1.3rem;
+  font-weight: 400;
+}
+.badge{
+  font-size: 1.3rem;
+}
+.social-wrap input, .social-wrap select {
+  //background: $gray;
+}
+
+.swich-box .box {
+  width: 60px;
+  height: 25px;
+  background: #ccc;
+  border-radius: 20px;
+  transition: all .5s ease;
+}
+
+.swich-box input {
+  display: none;
+}
+
+.swich-box .box span {
+  display: inline-block;
+  height: 25px;
+  width: 25px;
+  border-radius: 15px;
+  background: #fff;
+  box-shadow: 1px 1px 1px #ddd;
+  transform: translateX(0px);
+  transition: all .5s ease;
+}
+
+.swich-on .box {
+  background: forestgreen;
+  transition: all .5s ease;
+}
+
+.swich-on .box span {
+  transform: translateX(36px);
+  transition: all .5s ease;
+}
+.detail{
+  font-size: 15px;
+}
+.detail .hubie-right{
+  float: right;
+  margin-top: 5px;
+}
+.detail .list-group, .detail .list-group-item{
+  background: $gray;
+}
+
+.col-form-label{
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.social-wrap .needs-validation .form-control {
+  background-image: none;
+}
+.youhui{
+  .pingtai{
+    padding: 10px 0 0;
+    font-size: 16px;
+    color: #999999;
+  }
+  .pingtai-2{
+    font-size: 16px;
+  }
+  .fuwuinput{
+    background: white !important;
+  }
+   .youhui-box{
+    //border: 1px solid #e8e8e8;
+     position:relative;
+    img{
+      width: 178px;
+      height: 33px;
+      margin: 10px 0;
+    }
+    .youhui-text{
+      //padding-left:  10px;
+      font-size: 16px;
+      padding-top: 1rem;
+      position: relative;
+        .youinput{
+          width: 15rem;
+          position: absolute;
+          right: 1rem;
+          top: 1.5rem;
+          background: white;
+        }
+    }
+    .youhui-p{
+      padding-left:  10px;
+      font-size: 16px;
+      color: #d30000;
+      margin-top: 2rem;
+      //padding-right: 20px;
+    }
+     .youhui-dec{
+       margin-top: 1rem;
+       display: inline-block;
+     }
+   }
+}
+.social-wrap{
+  padding:0;
+}
+.bottom-twobtn{
+  width: 100%;
+  padding-left: 0 !important;
+  position: fixed;
+  bottom: 0;
+  height: 4rem;
+  .button-1{
+    width: 50%;
+    height: 100%;
+    border: none;
+    background: #2ba408;
+    color: #ffffff;
+    font-size: 1.5rem;
+  }
+  .button-2{
+    width: 50%;
+    height: 100%;
+    border: none;
+    background: #f5f5f5;
+    color: #5ac53a;
+    font-size: 1.5rem;
+    .button-2-img{
+      width: 1.5rem;
+    }
+  }
+}
+.city-boxs{
+  display: flex;
+  justify-content: space-between;
+}
+.city-sheng{
+  width: 15.7rem;
+  height: 2.5rem;
+  font-size: 1rem;
+  background: white;
+  border-radius: 3px;
+  border-color: #d2d2d2;
+  color: #666666;
+}
+.city-shi{
+  width: 15.7rem;
+  height: 2.5rem;
+  font-size: 1rem;
+  background: white;
+  border-radius: 3px;
+  border-color: #d2d2d2;
+  color: #666666;
+  margin-top: 1rem;
+}
+</style>

src/views/user/edit.vue

@@ -156,7 +156,7 @@ export default class UserEdit extends Vue {
       localStorage.setItem("citycode", res.data.city_code);
     res.data &&
       res.data.city_name &&
-      localStorage.setItem("cityname", res.data.city_name);
+      localStorage.setItem("city_name", res.data.city_name);
     res.data &&
       res.data.social_name &&
       localStorage.setItem("social_name", res.data.social_name);

src/views/user/index.vue

@@ -1,341 +1,367 @@
 <script src="../index/index.ts"></script>
 <template>
-    <div class="user-wrap">
-        <div class="tuichu" @click="exit">
-            <img src="../../assets/image/exit_03.png" alt="" >
-            退出
-        </div>
-        <div class="jumbotron jumbotron-fluid">
-            <div class="avator-top">
-                <router-link   to="/user/info">
-                   <img class="avator" :src="avatar">
-                   <span class="nicheng">{{nickname}}</span><br>
-                   <span class="phone">{{data.phone}}  </span>
-                    <b class="bbb"><img src="../../assets/image/arrow_03.png" alt=""></b>
-                </router-link>
-            </div>
-            <div class="avator-bottom">
-               <div class="avator-bottom-one">
-                   <p class="yue">余额: <span>{{data.balance}}</span></p>
-                   <!-- <el-button class="liji" @click="open">立即提现</el-button> -->
-               </div>
-            </div>
-        </div>
-        <div class="info">
-            <div class="list-group  ">
-                <router-link class="list-group-item" to="/order/list">
-                    我的订单
-                </router-link>
-                <router-link class="list-group-item" to="/user/discount">
-                    我的优惠券
-                </router-link>
-                <router-link class="list-group-item text-center" to="/user/share">
-                    邀请好友
-                </router-link>
-                <router-link class="list-group-item text-center" to="/user/inviter">
-                    好友列表
-                </router-link>
-                <div class="list-group-item" to="" @click="opentwo">
-                    联系客服
-                </div>
-            </div>
+  <div class="user-wrap" v-if="data.loaded === true">
+    <div class="tuichu" @click="exit">
+      <img src="../../assets/image/exit_03.png" alt />
+      退出
+    </div>
+    <div class="jumbotron jumbotron-fluid">
+      <div class="avator-top">
+        <router-link to="/user/info">
+          <img class="avator" :src="avatar" />
+          <span class="nicheng">{{nickname}}</span>
+          <br />
+          <span class="phone">{{data.phone}}</span>
+          <b class="bbb">
+            <img src="../../assets/image/arrow_03.png" alt />
+          </b>
+        </router-link>
+      </div>
+      <div class="avator-bottom">
+        <div class="avator-bottom-one">
+          <p class="yue">
+            余额:
+            <span>{{data.balance}}</span>
+          </p>
         </div>
+      </div>
     </div>
+    <div class="info">
+      <div class="list-group">
+        <router-link class="list-group-item" to="/order/list">我的订单</router-link>
+        <router-link class="list-group-item" to="/user/discount">我的优惠券</router-link>
+        <router-link class="list-group-item text-center" to="/user/share">邀请好友</router-link>
+        <!-- <router-link class="list-group-item text-center" to="/user/inviter">好友列表</router-link> -->
+        <div class="list-group-item" to @click="opentwo">联系客服</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-    import {Component, Vue} from "vue-property-decorator";
-    import Http from "../../extend/Http";
-    import Utils from "../../extend/Utils";
-    import wx from "weixin-jsapi";
-    import router from '@/router';
-    import {MessageBox} from 'element-ui';
+import { Component, Vue } from "vue-property-decorator";
+import Http from "../../extend/Http";
+import Utils from "../../extend/Utils";
+import wx from "weixin-jsapi";
+import router from "@/router";
+import { MessageBox } from "element-ui";
 
-    @Component({
-        components: {}
-    })
-    export default class UserIndex extends Vue {
-        public data: any = {
-            phone:'',
-            balance:'',
-            appid:'wx98622dc60a8a6abb'
-        };
-        private avatar;
-        private nickname;
-        private citycode;
-        private cityname;
-        private social_type;
+@Component({
+  components: {}
+})
+export default class UserIndex extends Vue {
+  public data: any = {
+    phone: "",
+    balance: "",
+    appid: "wx98622dc60a8a6abb",
+    loaded: true
+  };
+  private avatar;
+  private nickname;
+  private citycode;
+  private city_name;
+  private social_type;
 
-        async created() 
-        {
-            let res = await Http.getInstance().getUserInfo();                                    
-            this.avatar =   res.data.avatar as string;
-            this.nickname = res.data.realname as string;
-            this.citycode = res.data.social_city  as string;
-            this.social_type = res.data.social_type  as string;
-            this.cityname = res.data.city_name as string;
-            this.data.phone = res.data.mobile
-            this.data.balance = res.data.balance
+  async mounted() {
+    console.log("mounted");
+  }
 
-            let isWeiXin = () => { return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 }
-            if (isWeiXin()) {
-                console.log(res.data.openid)
-                if(res.data.openid == null || res.data.openid.length == 0){
-                    if(!localStorage.getItem('openid')){
-                        let url = Utils.getInstance().getParams(location.href);
-                        if(url.code){
-                            let ress = await Http.getInstance().getWeixinpay({
-                                code: url.code,
-                            });
-                            if(ress.data.openid){
-                                let rer = await Http.getInstance().setUserOpenid({
-                                    openid: ress.data.openid
-                                });
-                                localStorage.setItem("openid", ress.data.openid);
-                            }
-                        }else{
-                            this.getcode();
-                        }
-                    }
-                }else{
-                    localStorage.setItem("openid", res.data.openid);
-                }
+  async created() {
+    try {
+      this.data.loaded = false;
+      let res = await Http.getInstance().getUserInfo();
+      console.log("getUserInfo", res);
+      this.avatar = res.data.avatar as string;
+      this.nickname = res.data.realname as string;
+      this.citycode = res.data.social_city as string;
+      this.social_type = res.data.social_type as string;
+      this.city_name = res.data.city_name as string;
+      this.data.phone = res.data.mobile;
+      this.data.balance = res.data.balance;
+      this.data.loaded = true;
 
-            }
-        }
-        async getcode(){
-            let redirectURI='https://hr.hemadj.com/user';
-            window.location.replace(
-                 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.data.appid + '&redirect_uri=' + redirectURI + '&response_type=code&scope=snsapi_base&state=WXPaySTATE#wechat_redirect'
-            )
-        }
-        async exit(){
-            let  storage = window.localStorage;
-            storage.clear()
-            this.$router.push('/login')
-        }
-        open() {
-            // @ts-ignore
-            this.$router.push('/user/Withdraw')
-        }
-        opentwo() {
-            // @ts-ignore
-            MessageBox.alert('<a href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a><p>手机号同步微信</p>', '请联系客服', {
-                dangerouslyUseHTMLString: true,
-                confirmButtonText: "拨打" ,
-            }).then(action =>{
-                window.location.href = 'tel://' +Http.PHONE;
-            });
-        }
-        private async wxInit() {
-            let url = location.href.split("#")[0] + '?inviter_code=' + localStorage.getItem('inviter_code'); // 获取锚点之前的链接
-            let links = "m.wercf.com";
-            let title = "河马代缴";
-            let desc = "了解更多知识，请关注“河马代缴”公众号";
-            let imgUrl = "https://hr.hemadj.com/favicon.ico";
-            let res = await Http.getInstance().getConfig({
-                platform: "weixin", url: url,
-            });
-            res.jsApiList = ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone"];
-            wx.config(res);
-            wx.ready(() => {
-                wx.onMenuShareTimeline({
-                    title: title, // 分享标题
-                    link: links, // 分享链接
-                    imgUrl: imgUrl, // 分享图标
-                    success: () => {
-                    }, cancel: () => {
-                    }
-                });
-                // 微信分享菜单测试
-                wx.onMenuShareAppMessage({
-                    title: title, // 分享标题
-                    link: links, // 分享链接
-                    desc: title, // 分享链接
-                    type: "", // 分享链接
-                    dataUrl: "", imgUrl: imgUrl, // 分享图标
-                    success: () => {
-                    }, cancel: () => {
-                    }
+      let isWeiXin = () => {
+        return (
+          navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1
+        );
+      };
+      if (isWeiXin()) {
+        console.log(res.data.openid);
+        if (res.data.openid == null || res.data.openid.length == 0) {
+          if (!localStorage.getItem("openid")) {
+            let url = Utils.getInstance().getParams(location.href);
+            if (url.code) {
+              let ress = await Http.getInstance().getWeixinpay({
+                code: url.code
+              });
+              if (ress.data.openid) {
+                let rer = await Http.getInstance().setUserOpenid({
+                  openid: ress.data.openid
                 });
-                wx.onMenuShareQQ({
-                    title: title, // 分享标题
-                    link: links, // 分享链接
-                    desc: title, // 分享链接
-                    type: "", // 分享链接
-                    dataUrl: "", imgUrl: imgUrl, // 分享图标
-                    success: () => {
-                    }, cancel: () => {
-                    }
-                });
-                wx.onMenuShareWeibo({
-                    title: title, // 分享标题
-                    desc: desc, // 分享描述
-                    link: links, // 分享链接
-                    imgUrl: imgUrl, // 分享图标
-                    success: () => {
-                    }, cancel: () => {
-                    }
-                });
-            });
-            wx.error((err: any) => {
-                alert(JSON.stringify(err));
-            });
-        }
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '@/assets/scss/variables.scss';
-    .user-wrap {
-        width: 100%;
-        overflow-x: hidden;
-        position: relative;
-    }
-
-    .jumbotron {
-        text-align: left;
-        background: #20b452;
-        padding: 2rem 0 0;
-    }
-    .avator-top{
-        position:relative ;
-        padding-left: 1.5rem;
-        .bbb{
-            position: absolute;
-            top: 3.7rem;
-            right: 1.5rem;
-            color: #ffffff;
-            img{
-                width: 0.7rem;
+                localStorage.setItem("openid", ress.data.openid);
+              }
+            } else {
+              this.getcode();
             }
+          }
+        } else {
+          localStorage.setItem("openid", res.data.openid);
         }
-        .canbao{
-            background: rgba(23,130,59,0.5);
-            position: absolute;
-            top: 6.5rem;
-            right: 1.5rem;
-            color: #ffffff;
-            font-size: 1rem;
-            text-align: center;
-            padding: 0 1.2rem;
-            border-radius: 1rem;
-
-        }
+      }
+    } catch (error) {
+      console.log("user index created function exception:", error);
     }
+  }
 
+  async getcode() {
+    let redirectURI = "https://hr.hemadj.com/user";
+    window.location.replace(
+      "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
+        this.data.appid +
+        "&redirect_uri=" +
+        redirectURI +
+        "&response_type=code&scope=snsapi_base&state=WXPaySTATE#wechat_redirect"
+    );
+  }
+  async exit() {
+    let storage = window.localStorage;
+    storage.clear();
+    this.$router.push("/login");
+  }
+  open() {
+    // @ts-ignore
+    this.$router.push("/user/Withdraw");
+  }
+  opentwo() {
+    // @ts-ignore
+    MessageBox.alert(
+      '<a href="tel:' +
+        Http.PHONE +
+        '">' +
+        Http.PHONE +
+        "</a><p>手机号同步微信</p>",
+      "请联系客服",
+      {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: "拨打"
+      }
+    ).then(action => {
+      window.location.href = "tel://" + Http.PHONE;
+    });
+  }
+  private async wxInit() {
+    let url =
+      location.href.split("#")[0] +
+      "?inviter_code=" +
+      localStorage.getItem("inviter_code"); // 获取锚点之前的链接
+    let links = "m.wercf.com";
+    let title = "河马代缴";
+    let desc = "了解更多知识，请关注“河马代缴”公众号";
+    let imgUrl = "https://hr.hemadj.com/favicon.ico";
+    let res = await Http.getInstance().getConfig({
+      platform: "weixin",
+      url: url
+    });
+    res.jsApiList = [
+      "onMenuShareTimeline",
+      "onMenuShareAppMessage",
+      "onMenuShareQQ",
+      "onMenuShareWeibo",
+      "onMenuShareQZone"
+    ];
+    wx.config(res);
+    wx.ready(() => {
+      wx.onMenuShareTimeline({
+        title: title, // 分享标题
+        link: links, // 分享链接
+        imgUrl: imgUrl, // 分享图标
+        success: () => {},
+        cancel: () => {}
+      });
+      // 微信分享菜单测试
+      wx.onMenuShareAppMessage({
+        title: title, // 分享标题
+        link: links, // 分享链接
+        desc: title, // 分享链接
+        type: "", // 分享链接
+        dataUrl: "",
+        imgUrl: imgUrl, // 分享图标
+        success: () => {},
+        cancel: () => {}
+      });
+      wx.onMenuShareQQ({
+        title: title, // 分享标题
+        link: links, // 分享链接
+        desc: title, // 分享链接
+        type: "", // 分享链接
+        dataUrl: "",
+        imgUrl: imgUrl, // 分享图标
+        success: () => {},
+        cancel: () => {}
+      });
+      wx.onMenuShareWeibo({
+        title: title, // 分享标题
+        desc: desc, // 分享描述
+        link: links, // 分享链接
+        imgUrl: imgUrl, // 分享图标
+        success: () => {},
+        cancel: () => {}
+      });
+    });
+    wx.error((err: any) => {
+      alert(JSON.stringify(err));
+    });
+  }
+}
+</script>
 
-    .avator {
-        width: 5rem;
-        height: 5rem;
-        border-radius: 6rem;
-        margin-top: 1rem;
-    }
-    .nicheng{
-        font-size: 1.6rem;
-        padding-left: 1rem;
-        color: white;
-    }
-    .phone{
-        font-size: 1.4rem;
-        position: absolute;
-        top: 4rem;
-        left: 7.5rem;
-        color: white;
-    }
+<style lang="scss" scoped>
+@import "@/assets/scss/variables.scss";
+.user-wrap {
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
+}
 
-    .info .list-group-item {
-        margin: 0.6rem 1.25rem;
-        font-size: 1.3rem;
-        height: 5rem;
-        line-height: 5rem;
-        padding: 0;
-        color: #ffffff;
-        text-align: center;
-        border-radius: 0.8rem;
+.jumbotron {
+  text-align: left;
+  background: #20b452;
+  padding: 2rem 0 0;
+}
+.avator-top {
+  position: relative;
+  padding-left: 1.5rem;
+  .bbb {
+    position: absolute;
+    top: 3.7rem;
+    right: 1.5rem;
+    color: #ffffff;
+    img {
+      width: 0.7rem;
     }
+  }
+  .canbao {
+    background: rgba(23, 130, 59, 0.5);
+    position: absolute;
+    top: 6.5rem;
+    right: 1.5rem;
+    color: #ffffff;
+    font-size: 1rem;
+    text-align: center;
+    padding: 0 1.2rem;
+    border-radius: 1rem;
+  }
+}
 
-    .list-group-item {
-        background: #20b452;
-    }
+.avator {
+  width: 5rem;
+  height: 5rem;
+  border-radius: 6rem;
+  margin-top: 1rem;
+}
+.nicheng {
+  font-size: 1.6rem;
+  padding-left: 1rem;
+  color: white;
+}
+.phone {
+  font-size: 1.4rem;
+  position: absolute;
+  top: 4rem;
+  left: 7.5rem;
+  color: white;
+}
 
-    .list-group-item:last-child {
-        background: $orange;
-    }
+.info .list-group-item {
+  margin: 0.6rem 1.25rem;
+  font-size: 1.3rem;
+  height: 5rem;
+  line-height: 5rem;
+  padding: 0;
+  color: #ffffff;
+  text-align: center;
+  border-radius: 0.8rem;
+}
 
-    .invite {
-        display: inline-block !important;
-        line-height: normal;
-    }
+.list-group-item {
+  background: #20b452;
+}
 
-    .query img {
-        width: 25%;
-        margin-left: 12%;
-        margin-top: 6%;
-    }
-    .bottom-user{
-        margin-bottom: 6rem;
-    }
+.list-group-item:last-child {
+  background: $orange;
+}
 
-    .list-group-flush {
-        border-bottom: 0;
-    }
-    .tuichu{
-        position: absolute;
-        right: 1.5rem;
-        top: 1rem;
-        color: white;
-        border: 1px solid white;
-        border-radius: 20px;
-        padding: 0.2rem 0.8rem;
-        img{
-            width: 1rem;
-            vertical-align: middle;
-        }
-    }
-    .avator-bottom{
-        margin-top: 2.5rem;
-        padding-left: 1.2rem;
-        padding-top: 1.2rem;
-        padding-bottom: 1px;
-        background: #18a447;
-    }
-    .avator-bottom-one{
-        display: flex;
-        position: relative;
-        height: 3.5rem;
-        .yue{
-            font-size: 1.4rem;
-            color: #ffffff;
-            position: absolute;
-        }
-        .tixian{
-            position: absolute;
-            right: 8rem;
-            background: #108b39;
-            color: #ffffff;
-            border: none;
-            margin-left: 8rem;
-            height: 2rem;
-            border-radius: 5rem;
-        }
-        .liji{
-            position: absolute;
-            right: 1.5rem;
-           background: #ffffff;
-            color: #18a447;
-            border: none;
-            height: 2rem;
-            margin-left: 1.5rem;
-            border-radius: 5rem;
-            padding: 0 1.2rem;
-        }
+.invite {
+  display: inline-block !important;
+  line-height: normal;
+}
 
-    }
-    .p{
-        font-size: 1rem;
-        color: #ffffff;
-    }
+.query img {
+  width: 25%;
+  margin-left: 12%;
+  margin-top: 6%;
+}
+.bottom-user {
+  margin-bottom: 6rem;
+}
 
+.list-group-flush {
+  border-bottom: 0;
+}
+.tuichu {
+  position: absolute;
+  right: 1.5rem;
+  top: 1rem;
+  color: white;
+  border: 1px solid white;
+  border-radius: 20px;
+  padding: 0.2rem 0.8rem;
+  img {
+    width: 1rem;
+    vertical-align: middle;
+  }
+}
+.avator-bottom {
+  margin-top: 2.5rem;
+  padding-left: 1.2rem;
+  padding-top: 1.2rem;
+  padding-bottom: 1px;
+  background: #18a447;
+}
+.avator-bottom-one {
+  display: flex;
+  position: relative;
+  height: 3.5rem;
+  .yue {
+    font-size: 1.4rem;
+    color: #ffffff;
+    position: absolute;
+  }
+  .tixian {
+    position: absolute;
+    right: 8rem;
+    background: #108b39;
+    color: #ffffff;
+    border: none;
+    margin-left: 8rem;
+    height: 2rem;
+    border-radius: 5rem;
+  }
+  .liji {
+    position: absolute;
+    right: 1.5rem;
+    background: #ffffff;
+    color: #18a447;
+    border: none;
+    height: 2rem;
+    margin-left: 1.5rem;
+    border-radius: 5rem;
+    padding: 0 1.2rem;
+  }
+}
+.p {
+  font-size: 1rem;
+  color: #ffffff;
+}
 </style>
 

src/views/user/share.vue

@@ -25,8 +25,7 @@
     import { swiper } from 'vue-awesome-swiper'
     import wx from 'weixin-js-sdk';
     import soshm from "soshm";
-
-
+    
     @Component({
         components: {
             swiper