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