You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
9.3 KiB
306 lines
9.3 KiB
<template> |
|
<view class="body-background"> |
|
<image class="img" mode="widthFix" :src="staticImage.bodyBackground"/> |
|
</view> |
|
|
|
<view class="app-wallpaper"> |
|
<u-row :custom-style="{padding:'26rpx'}"> |
|
<u-col :span="12"> |
|
<view class="user-container row"> |
|
<view class="user-avatar"> |
|
<u-avatar src="1" size="160" :custom-style="{border:'4rpx solid #020B18'}"></u-avatar> |
|
</view> |
|
<view class="user-content col"> |
|
<view class="user-nickname-group row"> |
|
<view class="user-nickname"> |
|
是麻瓜呀 |
|
</view> |
|
<view class="user-edit" @click="navTo('/pages/User/edit')"> |
|
编辑资料 |
|
</view> |
|
</view> |
|
<view class="user-icon-group row"> |
|
<u-image :src="staticImage.userFxx" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
<view class="user-icon-title"> |
|
丰行侠 |
|
</view> |
|
<u-rate |
|
readonly |
|
:count="starCount" |
|
v-model="starValue" |
|
size="30" |
|
activeColor="#FF9545" |
|
></u-rate> |
|
</view> |
|
<view class="user-id row"> |
|
<view class="user-id-content"> |
|
专属ID：NH56KUH01 |
|
</view> |
|
<u-text prefix-icon="file-text" |
|
text="复制" |
|
href="NH56KUH01" |
|
size="28" |
|
icon-style="font-size:28rpx" |
|
color="#AA4900"></u-text> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</u-col> |
|
</u-row> |
|
<view class="user-card border-box" :style="{backgroundImage:'url('+staticImage.userCard+')'}"> |
|
<view class="user-card-content-container border-box"> |
|
<view class="card-container"> |
|
<view class="card-title">我的暖新币</view> |
|
<view class="card-desc">暖新币余额</view> |
|
<view class="card-price">7,586,923</view> |
|
<view class="card-ext">累计 236,471,986 | 已兑换 236,471,986</view> |
|
<view class="card-hr"></view> |
|
<view class="card-btn-group row"> |
|
<view class="card-btn col" @click="navTo('/pages/Cron/detail')">暖新币明细</view> |
|
<view class="card-hhr"></view> |
|
<view class="card-btn col" @click="navTo('/pages/Cron/rule')">兑换制度</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<u-cell-group :border="false" :custom-style="{marginBottom:'100rpx'}"> |
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="我的兑换订单" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userOrder" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="我的活动报名" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userActivity" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="我的留言" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userMessage" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="我的线索" |
|
@click="navTo('/pages/Line/index')" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userLine" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="地址管理" |
|
@click="navTo('/pages/Address/index')" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userAddr" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="我的关注" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userFollow" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
</u-cell-group> |
|
<u-cell-group :border="false"> |
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="党员报到码" |
|
@click="navTo('/pages/Report/qrcode')" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userQrcode" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="意见箱/意见栏" |
|
@click="navTo('/pages/Feed/index')" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userFeed" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
<u-cell |
|
:border="false" |
|
:rightIconStyle="{fontSize:'28rpx'}" |
|
:isLink="true" |
|
title="街道联系方式" |
|
> |
|
<template #icon> |
|
<view class="cell-icon" :style="{marginRight:'56rpx'}"> |
|
<u-image :src="staticImage.userPhone" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image> |
|
</view> |
|
</template> |
|
</u-cell> |
|
|
|
</u-cell-group> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import HeaderNav from '@/components/HeaderNav/Index.vue'; |
|
import FooterNav from '@/components/FooterNav/Index.vue'; |
|
import RightNav from '@/components/RightNav/Index.vue'; |
|
import api from '@/utils/functions.js'; |
|
|
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav |
|
}, |
|
data() { |
|
return { |
|
title: 'Hello', |
|
loading: true, |
|
staticImage: { |
|
userOrder: imghost + '/static/image/user-order.png', |
|
userActivity: imghost + '/static/image/user-activity.png', |
|
userMessage: imghost + '/static/image/user-message.png', |
|
userLine: imghost + '/static/image/user-line.png', |
|
userAddr: imghost + '/static/image/user-addr.png', |
|
userFollow: imghost + '/static/image/user-follow.png', |
|
userQrcode: imghost + '/static/image/user-qrcode.png', |
|
userFeed: imghost + '/static/image/user-feed.png', |
|
userPhone: imghost + '/static/image/user-phone.png', |
|
bodyBackground:imghost+'/static/image/user-bg.png', |
|
userFxx:imghost+'/static/image/user-fxx.png', |
|
userCard:imghost+'/static/image/user-card.png', |
|
}, |
|
starCount:10, |
|
starValue:10, |
|
user: { |
|
avatar: imghost + '/static/image/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
pagePadding: 100, |
|
userInfo: {}, |
|
userExtends: {}, |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
methods: { |
|
navTo(url) { |
|
wx.navigateTo({ |
|
url: url |
|
}) |
|
}, |
|
userDetail() { |
|
wx.navigateTo({ |
|
url: '/pages/UserDetail/index' |
|
}) |
|
}, |
|
orderPage() { |
|
this.$store.commit('footCheck', 'order'); |
|
this.$store.commit('title', '订单'); |
|
}, |
|
userCouponsPage() { |
|
wx.navigateTo({ |
|
url: '/pages/UserCoupons/index' |
|
}) |
|
}, |
|
updateUserInfo() { |
|
if (this.userInfo) { |
|
this.user.id = this.userInfo.id |
|
this.user.nickname = this.userInfo.name |
|
this.user.avatar = this.userInfo.avatar |
|
} |
|
if (this.userExtends) { |
|
this.user.coupons = this.userExtends.coupon_count |
|
} |
|
} |
|
}, |
|
onPageScroll(res) { |
|
if (res.scrollTop <= 20) { |
|
uni.$emit('isTop', true); |
|
} else { |
|
uni.$emit('isTop', false); |
|
} |
|
|
|
}, |
|
created() { |
|
this.pagePadding = (api.navHeight().navPaddingTop + |
|
api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
}, |
|
watch: { |
|
"$store.state.userInfo": { |
|
handler(newVal, oldVal) { |
|
this.userInfo = newVal; |
|
this.updateUserInfo(); |
|
} |
|
}, |
|
"$store.state.userExtends": { |
|
handler(newVal, oldVal) { |
|
this.userExtends = newVal; |
|
this.updateUserInfo(); |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |