Blame view

src/views/mySelf/selfNav.vue 3.39 KB
94c1e6a3   liuqimichale   微信公众号 个人页面集合
1
2
3
4
5
6
  <template>
    <div>
      <div class="person-bg">
        <div class="person-ifo">
          <div class="person-pic"></div>
          <ul class="person-con">
5e52ed7c   刘淇   个人中心
7
8
9
10
            <li></li>
            <li style="padding-top: 20px;font-size: 20px;">{{phoneNum}}</li>
            <!--<li>账户余额: <span>¥100.00</span></li>-->
            <!--<li>我的卡券:<span>20张</span></li>-->
94c1e6a3   liuqimichale   微信公众号 个人页面集合
11
12
13
14
          </ul>
        </div>
      </div>
  
5e52ed7c   刘淇   个人中心
15
      <!--<mt-cell title="会员卡" is-link :to="{ name: 'cardList' }"></mt-cell>-->
94c1e6a3   liuqimichale   微信公众号 个人页面集合
16
  
5e52ed7c   刘淇   个人中心
17
      <!--<mt-cell title="车辆管理" is-link :to="{ name: 'myCars' }"></mt-cell>-->
94c1e6a3   liuqimichale   微信公众号 个人页面集合
18
  
5e52ed7c   刘淇   个人中心
19
      <!--<mt-cell title="车辆管理" is-link :to="{ name: 'parkNotes' }"></mt-cell>-->
94c1e6a3   liuqimichale   微信公众号 个人页面集合
20
  
5e52ed7c   刘淇   个人中心
21
      <!--<mt-cell title="建议反馈" is-link :to="{ name: 'suggestionBack' }"></mt-cell>-->
94c1e6a3   liuqimichale   微信公众号 个人页面集合
22
  
5e52ed7c   刘淇   个人中心
23
24
25
26
27
      <van-cell-group>
        <van-cell v-for="i in navList" :key="i.title" :title="i.title" size="large" is-link @click="toNextPage(i.path)"/>
      </van-cell-group>
  
  
6ea1f7ef   刘淇   个人中心
28
      <div class="leftRightPadding" style="margin-top: 34px" v-if="phoneNum">
5e52ed7c   刘淇   个人中心
29
        <!--<mt-button type="danger" size="large"></mt-button>-->
6ea1f7ef   刘淇   个人中心
30
        <!--<van-button type="info" block>退出账户</van-button>-->
5e52ed7c   刘淇   个人中心
31
32
33
      </div>
      <div class="leftRightPadding" style="margin-top: 34px" v-else>
        <van-button type="info" block @click="toBindingPage">登录绑定</van-button>
94c1e6a3   liuqimichale   微信公众号 个人页面集合
34
35
36
37
38
39
      </div>
  
    </div>
  </template>
  
  <script>
5e52ed7c   刘淇   个人中心
40
  
6ea1f7ef   刘淇   个人中心
41
  import { getTokenByOpenId } from "@/api/getUserIfo";
94c1e6a3   liuqimichale   微信公众号 个人页面集合
42
  export default {
5e52ed7c   刘淇   个人中心
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
    name: "selfNav",
    data() {
      return {
        navList: [
          {
            title: "会员卡", path: "cardList"
          },
          {
            title: "车辆管理", path: "myCars"
          },
          {
            title: "停车记录", path: "parkNotes"
          },
          {
            title: "建议反馈", path: "suggestionBack"
          }
        ],
        openId: "",
6ea1f7ef   刘淇   个人中心
61
        phoneNum: ""//手机号
5e52ed7c   刘淇   个人中心
62
63
      };
    },
94a4ee91   刘淇   宣化 聚合支付
64
65
66
67
  
    created() {
  
    },
5e52ed7c   刘淇   个人中心
68
    mounted() {
6ea1f7ef   刘淇   个人中心
69
70
71
72
73
      // this.openId = this.$utils.openId;
      // if (this.openId) {
      //   this.getTokenAndphoneNum();
      // }
      // console.log(this.openId);
94a4ee91   刘淇   宣化 聚合支付
74
  
6ea1f7ef   刘淇   个人中心
75
76
      this.phoneNum = this.$utils.userPhoneNum
      console.log(this.$utils.userPhoneNum)
5e52ed7c   刘淇   个人中心
77
78
79
    },
    methods: {
      toNextPage(path) {
6ea1f7ef   刘淇   个人中心
80
        if (this.phoneNum) {
5e52ed7c   刘淇   个人中心
81
82
83
84
85
86
          this.$router.push({
              name: path
            }
          );
        } else {
          this.$toast("请先登录");
e7ca4bcb   刘淇   会员卡
87
88
89
90
          // this.$router.push({
          //     name: "binDing"
          //   }
          // );
5e52ed7c   刘淇   个人中心
91
92
93
94
95
96
97
98
        }
      },
      toBindingPage() {
        this.$router.push({
            name: "binDing"
          }
        );
      },
6ea1f7ef   刘淇   个人中心
99
      getTokenAndphoneNum() {
5e52ed7c   刘淇   个人中心
100
        let jsondata = {
6ea1f7ef   刘淇   个人中心
101
102
103
104
          openid: this.$utils.openId
        };
        jsondata.sign = this.$utils.signObject(jsondata);
        console.log("停车记录传参  " + JSON.stringify(jsondata));
5e52ed7c   刘淇   个人中心
105
        getTokenByOpenId(jsondata).then(response => {
6ea1f7ef   刘淇   个人中心
106
107
108
109
          console.log(response);
          this.phoneNum = response.data.phoneNum;
          console.log(response.data.token);
        });
5e52ed7c   刘淇   个人中心
110
111
112
      }
    }
  };
94c1e6a3   liuqimichale   微信公众号 个人页面集合
113
114
115
116
117
118
119
120
121
122
123
124
125
126
  </script>
  
  <style scoped lang="scss">
    .person-bg {
      height: 160px;
      background: url("../../assets/images/mySelf/selfNavBg.png") no-repeat;
      background-size: 100% 100%;
    }
  
    .person-ifo {
      padding: $commonLeftRightPadding;
      padding-top: 45px;
      display: flex;
      color: #ffbfbf;
5e52ed7c   刘淇   个人中心
127
      .person-pic {
94c1e6a3   liuqimichale   微信公众号 个人页面集合
128
129
130
131
132
133
        width: 64px;
        height: 64px;
        margin-right: 15px;
        background: url("../../assets/images/mySelf/photoBG.png") no-repeat;
      }
    }
5e52ed7c   刘淇   个人中心
134
135
136
  
    .person-con {
      span {
94c1e6a3   liuqimichale   微信公众号 个人页面集合
137
138
139
140
141
        font-size: 16px;
        font-weight: bold;
      }
    }
  
5e52ed7c   刘淇   个人中心
142
  
94c1e6a3   liuqimichale   微信公众号 个人页面集合
143
  </style>