JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-04-06 03:57:50 +08:00
Code Issues Projects Releases Wiki Activity

显示用户信息

Browse Source
This commit is contained in:
406803045 2019-06-14 14:58:20 +08:00
parent 1aef0b35ca
commit 1952fd1fde
2 changed files with 48 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -9,7 +9,7 @@ module.exports = {
node: true,
es6: true
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
extends: ['plugin:vue/essential', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue

95
src/views/account/index.vue
View File

@ -1,51 +1,52 @@
<!-- home.vue -->
<template>
<div class="app-container">
<div class="user-info-container">
<div class="user-info-warpper">
<div class="user-info">
<img class="user-avatar" :src="vipInfo.userImg" alt="用户头像">
<div class="user-info-center">
<div class="user-name">{{ vipInfo.nickName|formatName }}<span class="user-level"></span></div>
<div class="user-code">代购编号：{{ vipInfo.userCode }}</div>
<template v-if="{{ vipInfo }}">
<div class="user-info-container">
<div class="user-info-warpper">
<div class="user-info">
<img class="user-avatar" :src="vipInfo.userImg" alt="用户头像">
<div class="user-info-center">
<div class="user-name">{{ vipInfo.nickName|formatName }}<span class="user-level"></span></div>
<div class="user-code">代购编号：{{ vipInfo.userCode }}</div>
</div>
<div class="qrcode-warp" @click="showUserQrcode()">
<qrcode v-if="vipInfo.userPhone!==''" :value="vipInfo.userPhone" tag="img" :options="{ width: 45,margin:0 }"></qrcode>
</div>
</div>
<div class="qrcode-warp" @click="showUserQrcode()">
<qrcode v-if="vipInfo.userPhone!==''" :value="vipInfo.userPhone" tag="img" :options="{ width: 45,margin:0 }"></qrcode>
</div>
</div>
<div class="account-info">
<div class="account-info-item">
<span class="account-amount"> ¥{{ vipInfo.availableBalance|formatCentMoney }}</span>
<span class="account-label">余额</span>
</div>
<div class="account-info-item">
<span class="account-amount">{{ vipInfo.userGold }}</span>
<span class="account-label">金币</span>
<div class="account-info">
<div class="account-info-item">
<span class="account-amount"> ¥{{ vipInfo.availableBalance|formatCentMoney }}</span>
<span class="account-label">余额</span>
</div>
<div class="account-info-item">
<span class="account-amount">{{ vipInfo.userGold }}</span>
<span class="account-label">金币</span>
</div>
</div>
</div>
</div>
</div>
<div>
<van-cell-group>
<van-cell is-link @click="doorAccessKey">
<div slot="title" class="account-cell">
<span class="icon-ticket"></span>
<span class="custom-text">我的入场券 </span>
</div>
</van-cell>
<van-cell value-class="coupon-number" :value="vipInfo.couponAvailable+'张'" is-link to="/coupon">
<div slot="title" class="account-cell">
<span class="icon-coupon"></span>
<span class="custom-text">优惠券 </span>
</div>
</van-cell>
</van-cell-group>
</div>
<div>
<van-cell-group>
<van-cell is-link @click="doorAccessKey">
<div slot="title" class="account-cell">
<span class="icon-ticket"></span>
<span class="custom-text">我的入场券 </span>
</div>
</van-cell>
<van-cell value-class="coupon-number" :value="vipInfo.couponAvailable+'张'" is-link to="/coupon">
<div slot="title" class="account-cell">
<span class="icon-coupon"></span>
<span class="custom-text">优惠券 </span>
</div>
</van-cell>
</van-cell-group>
</div>
</template>
<!-- 绑定手机 -->
<msg-code :visible="codeVisible" @close="closeCodePop"></msg-code>
<!-- 二维码 -->
<qrcode-popup :visible="qrcodeVisible" :src="qrSrc" :title="qrTitle" :tips="qrTips" @close="()=>{ qrcodeVisible = false }">
</qrcode-popup>
</div>
</template>
@ -63,7 +64,7 @@ export default {
'qrcode-popup': QrCodePopup,
'qrcode': VueQrcode
},
data () {
data() {
return {
qrcodeVisible: false,
codeVisible: false,
@ -77,12 +78,12 @@ export default {
},
computed: {
},
mounted () {
mounted() {
this.init()
},
methods: {
// 获取初始数据
init () {
init() {
// 获取全部的会员信息
getAccountInfo().then(res => {
this.vipInfo = res.data.vipUserInfo
@ -95,7 +96,7 @@ export default {
}
})
},
closeCodePop () {
closeCodePop() {
this.codeVisible = false
// 点击入场券进入的 绑定完之后弹出入场券
if (this.access === '1') {
@ -103,7 +104,7 @@ export default {
}
},
// 展示会员二维码
showUserQrcode () {
showUserQrcode() {
this.qrSrc = this.vipInfo.userPhone
this.qrTitle = '小蚁货仓会员码'
this.qrTips = '<p>会员码用于会员储值及支付</p> <p>请勿随意泄漏给</p>'
@ -111,7 +112,7 @@ export default {
},
// 获取门禁二维码值
doorAccessKey () {
doorAccessKey() {
this.qrTitle = '小蚁货仓入场券'
this.qrTips = '<p>凭入场券二维码入场</p>'
// 如果不存在入场券
@ -207,7 +208,7 @@ h1 {
}
}
&:after {
content: "";
content: '';
width: 425px;
height: 75px;
background: #fff;
@ -227,8 +228,7 @@ h1 {
height: 19px;
margin-right: 10px;
display: inline-block;
background: url("../../assets/images/account/s-ticket@2x.png") no-repeat
center center;
background: url('../../assets/images/account/s-ticket@2x.png') no-repeat center center;
background-size: cover;
}
.icon-coupon {
@ -236,8 +236,7 @@ h1 {
height: 15px;
margin-right: 10px;
display: inline-block;
background: url("../../assets/images/account/s-conpon@2x.png") no-repeat
center center;
background: url('../../assets/images/account/s-conpon@2x.png') no-repeat center center;
background-size: cover;
}
.coupon-number {