This commit is contained in:
yanran200730
2022-11-02 17:23:17 +08:00
parent 5061c0d950
commit 33b9400e4a
5 changed files with 164 additions and 66 deletions

View File

@@ -1,13 +1,12 @@
<template> <template>
<div class="home"> <div class="home">
<image class="banner" src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" /> <image class="banner" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
<div class="nav"> <div class="nav">
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./PhotoReport')"> <div class="nav-item" hover-class="text-hover" @click="$linkTo('./PhotoReport')">
<span>随手拍</span> <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ssp.png" />
</div> </div>
<div class="nav-item" @click="$linkTo('./Culture')"> <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Culture')">
<span>文明倡导</span> <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wmcd.png" />
<image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
</div> </div>
</div> </div>
<div class="activity-wrapper"> <div class="activity-wrapper">
@@ -118,6 +117,7 @@
width: 686px; width: 686px;
height: 240px; height: 240px;
margin: 0 auto 32rpx; margin: 0 auto 32rpx;
border-radius: 10px;
} }
.nav { .nav {
@@ -127,36 +127,13 @@
margin: 0 32rpx 58rpx; margin: 0 32rpx 58rpx;
.nav-item { .nav-item {
position: relative;
width: 328px; width: 328px;
height: 128px; height: 122px;
line-height: 128px;
text-align: center;
font-size: 30rpx;
overflow: hidden;
background: rgba($color: #fff, $alpha: 0.8);
border-radius: 16px;
span {
position: relative;
z-index: 1;
color: #333;
font-weight: 600;
}
&:last-child {
span {
color: #fff;
font-weight: 600;
}
}
image { image {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10px;
} }
} }
} }

View File

@@ -11,9 +11,10 @@
<image src="/static/img/left.png"/> <image src="/static/img/left.png"/>
</div> </div>
<div class="photo-header"> <div class="photo-header">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wm-bg.png" /> <image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wm-bg.png" />
<h2>文明倡导</h2> <h2>文明倡导</h2>
<p>将文明倡导公益海报分享在微信朋友圈50人以上的微信群微博群即可获得积分奖励</p> <p>将文明倡导公益海报分享在微信朋友圈50人以上的微信群微博群即可获得积分奖励</p>
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right1.png" />
</div> </div>
<div class="phone-wrapper"> <div class="phone-wrapper">
<h2>我上传的</h2> <h2>我上传的</h2>
@@ -283,7 +284,7 @@ export default {
height: 448px; height: 448px;
padding: 150px 48px 0; padding: 150px 48px 0;
image { .bg-img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -292,6 +293,15 @@ export default {
height: 448px; height: 448px;
} }
.right-icon {
position: absolute;
top: 105px;
right: 0;
z-index: 2;
width: 304px;
height: 240px;
}
h2 { h2 {
position: relative; position: relative;
z-index: 2; z-index: 2;
@@ -341,7 +351,7 @@ export default {
top: 16px; top: 16px;
right: 16px; right: 16px;
z-index: 2; z-index: 2;
width: 110px; padding: 0 16px;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
font-size: 26px; font-size: 26px;

View File

@@ -11,9 +11,10 @@
<image src="/static/img/left.png"/> <image src="/static/img/left.png"/>
</div> </div>
<div class="photo-header"> <div class="photo-header">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" /> <image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" />
<h2>随手拍</h2> <h2>随手拍</h2>
<p>将身边文明或不文明行为拍照上传即可获得积分奖励</p> <p>将身边文明或不文明行为拍照上传即可获得积分奖励</p>
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right2.png" />
</div> </div>
<div class="phone-wrapper"> <div class="phone-wrapper">
<h2>我上传的</h2> <h2>我上传的</h2>
@@ -275,7 +276,7 @@
height: 448px; height: 448px;
padding: 150px 48px 0; padding: 150px 48px 0;
image { .bg-img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -284,6 +285,15 @@
height: 448px; height: 448px;
} }
.right-icon {
position: absolute;
top: 105px;
right: 0;
z-index: 2;
width: 304px;
height: 240px;
}
h2 { h2 {
position: relative; position: relative;
z-index: 2; z-index: 2;
@@ -333,9 +343,9 @@
top: 16px; top: 16px;
right: 16px; right: 16px;
z-index: 2; z-index: 2;
width: 110px;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
padding: 0 16px;
font-size: 26px; font-size: 26px;
text-align: center; text-align: center;
color: #FF883C; color: #FF883C;

View File

@@ -1,10 +1,10 @@
<template> <template>
<div class="my"> <div class="my">
<div class="user" @click="toSetting"> <div class="user" @click="toSetting">
<image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" /> <image :src="user.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
<div class="right" v-if="isLogin"> <div class="right" v-if="isLogin">
<h2>张三</h2> <h2>{{ user.nickName }}</h2>
<p>文明天府星市民 Lv.1</p> <p v-if="user.levelTitle">{{ user.levelTitle }}</p>
</div> </div>
<div class="right" v-else @click="toLogin"> <div class="right" v-else @click="toLogin">
<h2>登录</h2> <h2>登录</h2>
@@ -14,27 +14,30 @@
<div class="info"> <div class="info">
<div class="info-item"> <div class="info-item">
<h3>积分总额</h3> <h3>积分总额</h3>
<span>32</span> <span>{{ user.integral }}</span>
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/nav2.png" />
</div> </div>
<div class="info-item"> <div class="info-item">
<h3>积分排名</h3> <h3>积分排名</h3>
<span>32</span> <span>{{ user.integralOrder }}</span>
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/nav1.png" />
</div> </div>
</div> </div>
<div class="my-list"> <div class="my-list">
<h2>积分明细</h2> <h2>积分明细</h2>
<div class="list"> <div class="list">
<div class="item" v-for="(item, index) in 10" :key="index"> <div class="item" v-for="(item, index) in list" :key="index">
<div class="left"> <div class="left">
<h2>随手拍</h2> <h2>{{ item.detail }}</h2>
<p>2022-07-21 10:10:13</p> <p>{{ item.createTime }}</p>
</div> </div>
<div class="right"> <div class="right">
<i>+</i> <i>{{ item.calcType === '0' ? '-' : '+' }}</i>
<span>5</span> <span>{{ item.integral || 0 }}</span>
<em>积分</em> <em>积分</em>
</div> </div>
</div> </div>
<AiEmpty v-if="!list.length"></AiEmpty>
</div> </div>
</div> </div>
</div> </div>
@@ -48,7 +51,9 @@
data () { data () {
return { return {
list: [],
current: 1,
isMore: false
} }
}, },
@@ -61,10 +66,9 @@
}, },
onLoad () { onLoad () {
console.log(this.user)
console.log(this.token)
if (this.token) { if (this.token) {
this.getUserInfo() this.getUserInfo()
this.getList()
} }
}, },
@@ -85,7 +89,43 @@
} else { } else {
this.getUserInfo() this.getUserInfo()
} }
},
getList () {
if (this.isMore) return
this.$instance.post(`/appwechatintegraldetail/list`, null, {
params: {
current: this.current,
size: 10
} }
}).then(res => {
if (res.code === 0) {
this.$hideLoading()
if (this.current > 1) {
this.list = [...this.list, ...res.data.records]
} else {
this.list = res.data.records
}
if (res.data.records.length < 10) {
this.isMore = true
return false
}
this.current = this.current + 1
} else {
this.isMore = true
}
}).catch(() => {
this.$hideLoading()
})
}
},
onReachBottom () {
this.getList()
} }
} }
</script> </script>
@@ -95,6 +135,10 @@
padding-top: 32px; padding-top: 32px;
padding-bottom: 30px; padding-bottom: 30px;
div {
box-sizing: border-box;
}
.user, .info { .user, .info {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -194,16 +238,33 @@
.info-item { .info-item {
display: flex; display: flex;
position: relative;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 28px; font-size: 28px;
width: 192px; width: 318px;
height: 112px; height: 112px;
padding: 0 24px;
color: #4D5596; color: #4D5596;
box-sizing: border-box;
div:last-child { &:last-child {
color: #316568; color: #316568;
} }
h3, span {
position: relative;
z-index: 2;
}
image {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 318px;
height: 112px;
}
} }
} }
} }

View File

@@ -4,26 +4,28 @@
<div class="form"> <div class="form">
<div class="form-item avatar"> <div class="form-item avatar">
<h2>头像</h2> <h2>头像</h2>
<div class="form-item__right" @click="uploadImg"> <div class="form-item__right">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"> <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="userInfo.avatar"></image> <image class="avatar" :src="userInfo.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'"></image>
</button> </button>
<image class="right" src="/static/images/next.png" />
</div> </div>
</div> </div>
<div class="form-item"> <div class="form-item">
<h2>昵称</h2> <h2>昵称</h2>
<div class="form-item__right"> <div class="form-item__right">
<input placeholder="请输入昵称" type="nickname" v-model="userInfo.nickname" /> <input placeholder="请输入昵称" type="nickname" v-model="userInfo.nickName" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="btn" @click="save">保存</div> <div class="btn-wrapper">
<div class="btn" hover-class="text-hover">保存</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'
export default { export default {
appName: '设置', appName: '设置',
name: 'UserInfo', name: 'UserInfo',
@@ -33,15 +35,14 @@
} }
}, },
onLoad () { computed: {
if (uni.getStorageSync('token')) { ...mapState(['user'])
this.userInfo = uni.getStorageSync('userInfo') },
console.log(this.userInfo)
}
uni.$on('updateUserInfo', () => { onLoad () {
this.getUserInfo() this.userInfo = {
}) ...this.user
}
}, },
methods: { methods: {
@@ -56,6 +57,32 @@
}) })
}, },
onChooseAvatar (e) {
this.$loading()
uni.uploadFile({
url: this.$instance.defaults.baseURL + '/api/file/add',
filePath: e.detail.avatarUrl,
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
Authorization: uni.getStorageSync('token'),
},
success: (res) => {
const data = JSON.parse(res.data)
if (data.code === 0) {
this.$set(this.userInfo, 'avatarUrl', data.data[0].split(';')[0])
} else {
this.$toast(data.msg)
}
},
complete: () => {
this.$nextTick(() => {
this.$hideLoading()
})
}
})
},
uploadImg () { uploadImg () {
uni.chooseImage({ uni.chooseImage({
@@ -118,6 +145,19 @@
} }
} }
.avatar-wrapper {
padding: 0;
width: 120px!important;
height: 120px!important;
border-radius: 50%;
margin: 0;
image {
width: 120px;
height: 120px;
}
}
.form { .form {
.form-item { .form-item {
display: flex; display: flex;