网格员积分签到界面完成

This commit is contained in:
aixianling
2022-09-02 17:18:01 +08:00
parent da9f2ec274
commit bb4e57c189
9 changed files with 224 additions and 1 deletions

View File

@@ -0,0 +1,165 @@
<template>
<section class="AppMyGrid">
<div class="content" v-if="isGridMember">
<div class="user-info">
<img src="https://cdn.cunwuyun.cn/dvcp/AppMyGrid//my-bg-user.png" alt="" class="bg-img">
<div class="top">
<div v-text="user.name"/>
<img :src="user.avatar" alt="" v-if="user.avatar">
<img src="https://cdn.cunwuyun.cn/dvcp/user-icon.png" alt="" v-else>
</div>
<div class="bottom" flex>
<div class="fill" v-text="user.girdName"/>
<div class="signBtn" :class="{signIn}" v-text="signBtn" @click="handleSignIn"/>
</div>
</div>
<div class="link" v-for="(item, index) in linkList" :key="index" @click="linkTo(item.linkUrl)">
<div class="left" flex>
<img :src="item.img" alt="">
<div v-text="item.title"/>
</div>
<u-icon name="arrow-right" color="#ddd" size="40"/>
</div>
</div>
<AiEmpty class="mar-t32" v-else no-permit :description="`<p>您不是网格员<br/>无法使用网格员相关功能哦~</p>`"/>
</section>
</template>
<script>
import {mapState} from "vuex"
export default {
name: "AppMyGrid",
appName: "网格员主页",
computed: {
...mapState(['user']),
isGridMember: v => v.user.girdCheckType > 0,
signBtn: v => v.signIn ? '已签到' : '签到'
},
data() {
return {
signIn: false,
linkList: [
{title: '我的积分', img: require('./assets/wdjf.png'), linkUrl: '../AppCreditPoints/AppGridIntegral'},
{title: '积分兑换', img: require('./assets/jfdh.png'), linkUrl: '../AppCreditPoints/AppGridIntegral'},
{title: '我收到的评价', img: require('./assets/wsddpj.png'), linkUrl: '../AppCreditPoints/AppGridIntegral'},
]
}
},
methods: {
getMyGrid() {
},
linkTo(url) {
uni.navigateTo({url})
},
handleSignIn() {
!this.signIn && this.linkTo("./signResult")
}
},
created() {
this.getMyGrid()
}
}
</script>
<style lang="scss" scoped>
.AppMyGrid {
.content {
padding: 32px 32px 0;
.user-info {
width: 100%;
height: 248px;
border-radius: 8px;
background-color: #fff;
position: relative;
margin-bottom: 32px;
.bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.top {
display: flex;
justify-content: space-between;
padding: 28px 32px 36px;
border-bottom: 1px solid #eee;
div {
font-size: 40px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 96px;
}
img {
width: 96px;
height: 96px;
border-radius: 50%;
border: 1px solid #eee;
}
}
.bottom {
padding: 16px 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
height: 88px;
box-sizing: border-box;
}
}
.link {
display: flex;
justify-content: space-between;
padding: 32px;
background-color: #fff;
border-radius: 8px;
margin-bottom: 24px;
.left {
font-size: 30px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 42px;
img {
width: 48px;
height: 48px;
margin-right: 16px;
vertical-align: middle;
}
}
.right-icon {
width: 40px;
height: 40px;
}
}
}
.signBtn {
min-width: 144px;
text-align: center;
border: 1px solid #1365DD;
color: #1365DD;
line-height: 52px;
border-radius: 4px;
&.signIn {
border-color: #ccc;
color: #666;
background: #eee;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 697 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 637 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 B

View File

@@ -0,0 +1,57 @@
<template>
<section class="signResult">
<div class="successImg"/>
<b class="mar-t32">今日已完成签到</b>
<div class="mar-t32 score">积分+5</div>
<AiItem label="时间" :border="false">2022-9-2 16:59:23</AiItem>
<AiItem label="位置" :border="false">张家湾小区</AiItem>
</section>
</template>
<script>
export default {
name: "signResult",
appName: "签到结果",
data() {
return {}
},
methods: {},
created() {
}
}
</script>
<style lang="scss" scoped>
.signResult {
display: flex;
flex-direction: column;
align-items: center;
padding: 160px 70px;
font-family: PingFangSC-Regular, PingFang SC;
font-size: 32px;
.successImg {
background-image: url("./assets/qiandaochenggong.png");
width: 192px;
height: 192px;
}
& > b {
font-size: 40px;
}
.score {
color: #3975C6;
height: 32px;
margin-bottom: 112px;
padding-left: 48px;
background-image: url("./assets/score.png");
background-repeat: no-repeat;
background-position: left center;
}
::v-deep.normal {
height: 56px;
}
}
</style>

View File

@@ -139,7 +139,7 @@ export const user = {
getAccount({dispatch, commit}, config) {
//获取企业微信后台账号信息
return http.post("/admin/user/detail-phone", null, config).then(res => {
if (res?.code == 0) {
if (res?.data) {
commit('setUser', res.data)
return Promise.all([dispatch('getGridInfo', config)])
}

View File

@@ -43,6 +43,7 @@ export default {
<style lang="scss" scoped>
.AiItem {
font-family: PingFangSC-Regular, PingFang SC;
width: 100%;
&.border {
.normal {