This commit is contained in:
Vinjor 2025-04-02 11:34:12 +08:00
parent 872e59cea7
commit d5070e970f
12 changed files with 506 additions and 128 deletions

View File

@ -0,0 +1,129 @@
<template>
<!-- header -->
<view :style="{ backgroundColor, paddingTop: homeHeaderPaddingTop + 'px' }" class="navigationBar"
:class="{leftTitle: leftTitle}">
<template v-if="leftTitle">
<view class="navigationBarTitle" :style="{ color: titleColor }">
{{ title ? title : '' }}
</view>
</template>
<template v-else>
<view class="navigationBarBack" @click="back">
<slot name="back">
<uni-icons size="24" type="left" :color="titleColor"></uni-icons>
</slot>
</view>
<view class="navigationBarTitle" :style="{ color: titleColor }">
{{ title }}
</view>
<view v-if="showClear" @click="clearNoReadFun" class="navigationBarIcon" :style="{ color: titleColor }">
<image src="@/static/images/clear.png" mode="" class="clear-icon"></image>
</view>
</template>
<view class="navigationBarBackExtra">
<slot name="extra">
</slot>
</view>
</view>
</template>
<script>
/* 计算标题位置 */
import {
getWXStatusHeight
} from "@/utils/common.js";
export default {
props: {
backgroundColor: {
type: String,
default: '#317DFA'
},
title: String,
titleColor: {
type: String,
default: '#fff'
},
leftTitle: {
type: Boolean,
default: false
},
showClear: {
type: Boolean,
default: false
}
},
mounted() {
// #ifdef MP
const {
barHeight,
barTop,
menuButtonLeft
} = getWXStatusHeight()
console.log('barHeight, barTop, menuButtonLeft: ', barHeight, barTop, menuButtonLeft);
this.homeHeaderPaddingTop = barTop || 0
this.homeHeaderMenuHeight = barHeight
this.homeHeaderMenuLeft = menuButtonLeft - 6
// #endif
},
data() {
return {
// #ifdef MP
homeHeaderPaddingTop: 0,
homeHeaderMenuHeight: 0,
homeHeaderMenuLeft: 0,
// #endif
// #ifdef APP || H5
homeHeaderPaddingTop: 20,
homeHeaderMenuHeight: 50,
homeHeaderMenuLeft: 0
// #endif
}
},
methods: {
back() {
uni.navigateBack()
},
clearNoReadFun() {
this.$emit('clearNoRead')
}
}
}
</script>
<style lang="scss" scoped>
.navigationBar {
display: flex;
align-items: center;
justify-content: center;
&.leftTitle {
justify-content: start;
padding-left: 28rpx;
}
.navigationBarBack {
position: absolute;
left: 20rpx;
}
.navigationBarBackExtra {
position: absolute;
right: 20rpx;
}
.navigationBarTitle {
font-size: 36rpx;
}
.navigationBarIcon {
display: flex;
}
.clear-icon {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
}
</style>

View File

@ -41,9 +41,9 @@
},
"quickapp" : {},
"mp-weixin" : {
"optimization":{
"subPackages":true
},
"optimization" : {
"subPackages" : true
},
"appid" : "wxd8ef44a8268672e4",
"setting" : {
"urlCheck" : false,
@ -51,9 +51,6 @@
"minified" : true,
"postcss" : true
},
"optimization" : {
"subPackages" : true
},
"usingComponents" : true
},
"vueVersion" : "2",

View File

@ -1,129 +1,40 @@
{
"pages": [{
"path": "pages/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom"
"path": "pages/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "custom",
"componentPlaceholder": {
"mine-index": "view",
"notice-index": "view",
"subscribe": "view"
}
}, {
"path": "pages/login",
"style": {
"navigationBarTitleText": "登录"
}
}, {
"path": "pages/register",
"style": {
"navigationBarTitleText": "注册"
}
}, {
"path": "pages/work/index",
"style": {
"navigationBarTitleText": "工作台"
}
}, {
"path": "pages/work/my-notice",
"style": {
"navigationBarTitleText": "我的通告"
}
}, {
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的"
}
}, {
"path": "pages/mine/avatar/index",
"style": {
"navigationBarTitleText": "修改头像"
}
}, {
"path": "pages/mine/info/index",
"style": {
"navigationBarTitleText": "个人信息"
}
}, {
"path": "pages/mine/info/edit",
"style": {
"navigationBarTitleText": "编辑资料"
}
}, {
"path": "pages/mine/pwd/index",
"style": {
"navigationBarTitleText": "修改密码"
}
}, {
"path": "pages/mine/setting/index",
"style": {
"navigationBarTitleText": "应用设置"
}
}, {
"path": "pages/mine/help/index",
"style": {
"navigationBarTitleText": "常见问题"
}
}, {
"path": "pages/mine/about/index",
"style": {
"navigationBarTitleText": "关于我们"
}
}, {
"path": "pages/common/webview/index",
}
}, {
"path": "pages/login",
"style": {
"navigationBarTitleText": "登录"
}
}],
"subPackages": [{
"root": "pages/common",
"pages": [{
"path": "webview/index",
"style": {
"navigationBarTitleText": "浏览网页"
}
}, {
"path": "pages/common/textview/index",
"path": "textview/index",
"style": {
"navigationBarTitleText": "浏览文本"
}
}, {
"path": "pages/common/richview/index",
"path": "richview/index",
"style": {
"navigationBarTitleText": "浏览富文本"
}
},
{
"path": "pages/components/index",
"style": {
"navigationBarTitleText": "通告首页"
}
}, {
"path": "pages/components/notice-item",
"style": {
"navigationBarTitleText": "通告组件"
}
},
{
"path": "pages/components/subscribe",
"style": {
"navigationBarTitleText": "订阅"
}
},
{
"path": "pages/mine/card/my-card",
"style": {
"navigationBarTitleText": "我的名片"
}
},
{
"path": "pages/mine/card/card-detail",
"style": {
"navigationBarTitleText": "编辑名片"
}
},
{
"path": "pages/mine/addr/addr-list",
"style": {
"navigationBarTitleText": "收货地址"
}
},
{
"path": "pages/mine/addr/addr-detail",
"style": {
"navigationBarTitleText": "编辑地址"
}
}
],
"subPackages": [{
}]
}, {
"root": "pages/notice",
"pages": [{
"path": "detail",
@ -138,6 +49,63 @@
}
}
]
}, {
"root": "pages/components",
"pages": [{
"path": "notice-index",
"style": {
"navigationBarTitleText": "通告首页"
}
}, {
"path": "notice-item",
"style": {
"navigationBarTitleText": "通告组件"
}
}, {
"path": "subscribe",
"style": {
"navigationBarTitleText": "订阅"
}
}]
}, {
"root": "pages/mine",
"pages": [{
"path": "mine-index",
"style": {
"navigationBarTitleText": "个人中心"
}
}, {
"path": "card/my-card",
"style": {
"navigationBarTitleText": "我的名片"
}
},
{
"path": "card/card-detail",
"style": {
"navigationBarTitleText": "编辑名片"
}
},
{
"path": "addr/addr-list",
"style": {
"navigationBarTitleText": "收货地址"
}
},
{
"path": "addr/addr-detail",
"style": {
"navigationBarTitleText": "编辑地址"
}
},
{
"path": "member/member-card",
"style": {
"navigationBarTitleText": "会员中心",
"navigationStyle": "custom"
}
}
]
}],
"globalStyle": {
"navigationBarTextStyle": "black",

View File

@ -5,7 +5,7 @@
<!-- 通告列表页 -->
<notice-index v-show="'home'==menuCode"></notice-index>
<mine-index v-show="'my'==menuCode"></mine-index>
<subscribe-vue v-show="'dingyue'==menuCode"></subscribe-vue>
<subscribe v-show="'dingyue'==menuCode"></subscribe>
</view>
<tabBarVue :menuCode="menuCode" ref="tarBar" @changeMenu="changeMenu"></tabBarVue>
</view>
@ -13,14 +13,14 @@
<script>
import tabBarVue from '@/components/tabbar/tabBar.vue'
import noticeIndex from '@/pages/components/index.vue'
import subscribeVue from '@/pages/components/subscribe.vue'
import mineIndex from '@/pages/mine/index.vue'
import noticeIndex from '@/pages/components/notice-index.vue'
import subscribe from '@/pages/components/subscribe.vue'
import mineIndex from '@/pages/mine/mine-index.vue'
export default {
components: {
tabBarVue,
noticeIndex,
subscribeVue,
subscribe,
mineIndex
},
data() {

View File

@ -60,16 +60,16 @@
}],
dataTree: [{
text: "山东省",
value: "山东省",
value: "1",
children: [{
text: "济南市",
value: "济南市",
value: "2",
children: [{
text: "历城区",
value: "历城区",
value: "3",
children: [{
text: "华山街道",
value: "华山街道"
value: "4"
},
{
text: "东风街道",

View File

@ -0,0 +1,258 @@
<template>
<view class="member-card-box">
<navigation-bar-vue title="会员中心" background-color="#262626" title-color="#FFFFFF"></navigation-bar-vue>
<view class="main-body">
<!-- 会员卡展示区 -->
<view class="vip-box">
<view class="dl-menu-box">
<view v-for="(item,index) in memberCardList" @click="itemClick(index)" class="dl-menu"
:class="item.id==chooseCardId?'dl-menu click':'dl-menu'">
<!-- 这里的图标要换成动态配置的 -->
<image src="@/static/mine/huang.png" mode="aspectFit"></image>
{{item.cardName}}
</view>
</view>
<!-- 会员卡详情 -->
<view class="card-detail-box">
<view class="price-box">
<view class="price-item">
<view>年付会员</view>
<view><text>¥</text>228</view>
<view>折合0.82</view>
</view>
</view>
</view>
</view>
<!-- 权益展示区 -->
<view class="rights-box">
<view class="rights-item title">
<view class="title-left">会员权益</view>
<view class="value-item" v-for="(item,index) in cardList">{{item.name}}</view>
</view>
<view class="rights-item item-bg" v-for="(item,index) in rightsList">
<view class="title-left">{{item.name}}</view>
<view :class="[i==cardList.length-1?'value-item yellow-bg':'value-item']"
v-for="(card,i) in cardList">
<view v-if="'02'==item.rightsType">
<!-- 数量限制 -->
<text v-if="0==item.cardRights[card.id]">无限</text>
<text v-else>{{item.cardRights[card.id]}}</text>
</view>
<view v-else-if="'01'==item.rightsType">
<!-- 是否支持 -->
<text v-if="0==item.cardRights[card.id]">-</text>
<view v-else>
<uni-icons v-if="i==cardList.length-1" color="#3A3A38" type="checkmarkempty"
size="18"></uni-icons>
<uni-icons v-else color="#E8CEAD" type="checkmarkempty" size="18"></uni-icons>
</view>
</view>
</view>
</view>
<view class="rights-item item-bg">
<view class="title-left">每日报名上限</view>
<view class="value-item">20</view>
<view class="value-item">无限</view>
<view class="value-item yellow-bg">无限</view>
</view>
</view>
</view>
</view>
</template>
<script>
import navigationBarVue from '@/components/navigation/navigationBar.vue';
export default {
components: {
navigationBarVue
},
data() {
return {
//ID
chooseCardIndex: 0,
//
memberCardList: [{
id: "1",
cardName: "箐英会员",
image: "",
monthPrice: 28,
quarterPrice: 78,
yearPrice: 228,
dayPrice: 0.82
}, {
id: "2",
cardName: "钻石会员",
image: "",
monthPrice: 28,
quarterPrice: 78,
yearPrice: 228,
dayPrice: 0.82
}],
//
cardList: [{
id: '1',
name: '非会员'
}, {
id: '2',
name: '箐英'
}, {
id: '3',
name: '钻石'
}],
rightsList: [{
name: "每日解锁通告上限",
// 01- | 02-
rightsType: '02',
cardRights: {
"1": 20,
"2": 0,
"3": 0
}
}, {
name: "高奖励&最新通告",
// 01- | 02-
rightsType: '01',
cardRights: {
"1": 0,
"2": 1,
"3": 1
}
}]
}
},
methods: {
/**
* 菜单点击
* @param {Object} index
*/
itemClick(index) {
this.chooseCardIndex = index
},
}
}
</script>
<style lang="scss">
.member-card-box {
width: 100%;
color: #363636;
font-size: 29rpx;
background-color: #262626;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
.main-body {
width: 100%;
min-height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 57rpx);
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
.vip-box {
width: 100%;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-bottom: 20rpx;
.dl-menu-box {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
color: #888888;
padding-top: 20rpx;
.dl-menu {
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
margin: 0 20rpx;
padding-bottom: 15rpx;
text-align: center;
image {
width: 38rpx;
height: 38rpx;
margin-right: 5rpx;
}
}
.click {
color: white;
font-weight: bold;
border-bottom: 2px solid white;
}
}
.card-detail-box {
width: 100%;
margin-top: 20rpx;
padding: 30rpx 20rpx 30rpx 20rpx;
border-radius: 20rpx;
border: 1rpx solid #96948C;
background-color: #1A1A1A;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.rights-box {
width: 100%;
padding: 0 20rpx 30rpx 20rpx;
border-radius: 20rpx;
border: 1rpx solid #96948C;
background-color: #363636;
color: #E8CEAD;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.rights-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.title-left {
width: 260rpx;
padding: 20rpx 0 20rpx 20rpx;
}
.value-item {
flex: 1;
text-align: center;
padding: 20rpx;
}
}
.title {
font-weight: bold;
}
.item-bg {
font-size: 24rpx;
background-color: #42403E;
border-radius: 15rpx;
margin-bottom: 20rpx;
.yellow-bg {
background-color: #F3D2A6;
border-radius: 0 15rpx 15rpx 0;
color: #3A3A38;
}
}
}
}
}
</style>

View File

@ -27,7 +27,7 @@
</view>
</view>
<!-- 会员开通 -->
<view class="dl-member-box">
<view class="dl-member-box" @click="goMemberCard()">
<view class="dl-left">
<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
<text>开通会员 解锁更多权益</text>
@ -164,6 +164,9 @@
goMyAddr() {
this.$tab.navigateTo('/pages/mine/addr/addr-list')
},
goMemberCard() {
this.$tab.navigateTo('/pages/mine/member/member-card')
}
}
}
</script>

BIN
static/mine/hot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/mine/huang.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
static/mine/zuan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -7,6 +7,29 @@ import {
} from '@/utils/auth'
import constant from '@/utils/constant'
export function getWXStatusHeight() {
// #ifdef MP-WEIXIN
// 获取距上
const barTop = wx.getSystemInfoSync().statusBarHeight
// 获取胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
// 获取导航栏高度
const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2
let barWidth = menuButtonInfo.width
console.log('menuButtonInfo', menuButtonInfo)
let barLeftPosition = 375 - menuButtonInfo.right + menuButtonInfo.width
let menuButtonLeft = menuButtonInfo.left
let menuButtonRight = menuButtonInfo.right
return {
barHeight,
barTop,
barWidth,
barLeftPosition,
menuButtonLeft,
menuButtonRight
}
// #endif
}
/**
* 判断某用户是否有某权益
* @param {Object} code 权益code