第一次上传
This commit is contained in:
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="" style="padding: 20rpx;">
|
||||
<view class=""
|
||||
style=" font-size: 40rpx; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; ">
|
||||
{{comNotice?.title}}
|
||||
</view>
|
||||
<view class=""
|
||||
style=" margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="" style="display: flex; align-items: center;">
|
||||
|
||||
</view>
|
||||
<view class="" style="display: flex; align-items: center;">
|
||||
<!-- <img :src="Service.GetIconImg('/static/article/see.png')" style="width: 28rpx; height: 26rpx;"
|
||||
alt="" />
|
||||
<text style="font-size: 24rpx; margin-left: 10rpx; color: #6B7280; ">2025</text> -->
|
||||
<img :src="Service.GetIconImg('/static/article/date.png')" style="width: 25rpx; height: 25rpx;"
|
||||
alt="" />
|
||||
<text style="font-size: 24rpx; margin-left: 10rpx; color: #6B7280; ">{{Service.formatDate(comNotice.addTime,2)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="margin-top: 30rpx;">
|
||||
{{comNotice.remark}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { Service } from "@/Service/Service"
|
||||
import { vpCommunityService } from '@/Service/vp/vpCommunityService'
|
||||
import { ref } from "vue";
|
||||
|
||||
interface notice{
|
||||
addTime:string
|
||||
noticeId:string
|
||||
remark:string
|
||||
sign:string
|
||||
title:string
|
||||
}
|
||||
|
||||
let noticeId = ref('')
|
||||
let comNotice=ref<notice>({
|
||||
addTime:'',
|
||||
noticeId:'',
|
||||
remark:'',
|
||||
sign:'',
|
||||
title:''
|
||||
})
|
||||
onLoad((data : any) => {
|
||||
noticeId.value=data.noticeId
|
||||
getData()
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
|
||||
const getData=()=>{
|
||||
vpCommunityService.GetCommunityNoticeInfo(noticeId.value).then(res=>{
|
||||
comNotice.value=res.data.noticeInfo
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<view>
|
||||
<view :style="{'height':topHeight+'rpx'}"
|
||||
style=" position: fixed; top: 0; z-index: 2; width: 100%; background-color: #fff; ">
|
||||
<view class="" @click="isCommunity=!isCommunity"
|
||||
:style="{'margin-top':top+'rpx','height':height+'rpx','line-height':height+'rpx'}"
|
||||
style=" margin-left: 40rpx; display: flex; align-items: center;">
|
||||
<img :src="Service.GetIconImg('/static/index/index/location.png')" style="width: 40rpx; height: 40rpx;"
|
||||
alt="" />
|
||||
<text style="margin-left: 15rpx; font-size: 26rpx; font-weight: 600; ">{{address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" :style="{ 'margin-top':topHeight+20+'rpx' } ">
|
||||
<view class="" style="margin: 40rpx 20rpx">
|
||||
<up-swiper imgMode='heightFix' indicatorStyle="right: 20px" :list="swiperList" height='140'
|
||||
@change="e => current = e.current" :autoplay="false">
|
||||
<template #indicator style="right: 36rpx;">
|
||||
<view class="indicator">
|
||||
<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
|
||||
:class="[index === current && 'indicator__dot--active']">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</up-swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="margin-top: 40rpx; background-color: #fff; padding: 20rpx; ">
|
||||
<view class=""
|
||||
style=" margin: 20rpx 0 40rpx; display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="" style=" display: flex;align-items: center; font-weight: 600; font-size: 38rpx;">
|
||||
<up-icon name="bell-fill" color="#333333" size="20"></up-icon>
|
||||
<text style="margin-left: 20rpx;">社区公告</text>
|
||||
</view>
|
||||
<view class="" @click="Service.GoPage('/pages/community/noticeList?comId='+comId)"
|
||||
style="display: flex;align-items: center;">
|
||||
<text style="color: #666666;margin-right: 10rpx; font-size: 28rpx; ">查看更多</text>
|
||||
<up-icon name="arrow-right" size="14" color='#666666' :bold='true'></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" @click="Service.GoPage('/pages/article/articleCom?noticeId='+comNotice?.noticeId)"
|
||||
style=" padding: 20rpx; margin: 20rpx 0; border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #e2e2e2; ">
|
||||
<view class="" style="display: flex; align-items: center; ">
|
||||
<view class="tag"
|
||||
style=" color: #fff; border-radius: 12rpx; background-color: #FF6B35; padding: 4rpx 20rpx; ">
|
||||
<img :src="Service.GetIconImg('/static/index/community/top.png')"
|
||||
style="width: 30rpx; height: 30rpx; " alt="" />
|
||||
<text style="margin-left: 10rpx;">{{comNotice?.sign}}</text>
|
||||
</view>
|
||||
<text style="font-size: 32rpx; font-weight: 600; margin-left: 10rpx;">{{comNotice?.title}}</text>
|
||||
</view>
|
||||
<view class=""
|
||||
style=" margin: 16rpx 0; color: #666666; font-size: 26rpx; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; ">
|
||||
{{comNotice?.remark}}
|
||||
</view>
|
||||
<view class="" style=" font-size: 22rpx; color: #999999; display: flex; align-items: center;">
|
||||
<up-icon name="clock" size="12" color='#999999' ></up-icon>
|
||||
<text style="margin-left: 10rpx;" >{{Service.formatDate(comNotice?.addTime,2)}}</text>
|
||||
<!-- <text style="margin: 0 15rpx;">·</text>
|
||||
<view class="" style="display: flex;align-items: center;">
|
||||
<img :src="Service.GetIconImg('/static/index/community/see.png')"
|
||||
style="width: 30rpx; height: 30rpx; " alt="" />
|
||||
<text style="margin-left: 10rpx;">1200人阅读</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- <view class="" style="margin-top: 40rpx; background-color: #fff; padding: 20rpx; ">
|
||||
<view class=""
|
||||
style=" margin: 10rpx 0; display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="" style="font-weight: 600; width: 70%; font-size: 32rpx;">
|
||||
<up-notice-bar bgColor='#fff' color='#FF6B35' :text="notice"></up-notice-bar>
|
||||
</view>
|
||||
<view class="" @click="Service.GoPage('/pages/article/newsList')"
|
||||
style="display: flex;align-items: center;">
|
||||
<text style="color: #666666;margin-right: 10rpx; font-size: 28rpx; ">查看更多</text>
|
||||
<up-icon name="arrow-right" size="14" color='#666666' :bold='true'></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" @click="Service.GoPage('/pages/article/news')"
|
||||
style="display: flex; margin-top: 20rpx; border-radius: 20rpx; ">
|
||||
<image :src="Service.GetIconImg('/static/dele/dele1.jpg')" mode="aspectFill"
|
||||
style=" border-radius: 20rpx; width: 190rpx; height: 150rpx;" alt="" />
|
||||
<view class=""
|
||||
style=" flex: 1; margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between; ">
|
||||
<view class="" style=" ">
|
||||
<view class=""
|
||||
style="font-weight: 700; font-size: 32rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
|
||||
老北京炸酱面
|
||||
</view>
|
||||
</view>
|
||||
<view class=""
|
||||
style="color: #666666; font-size: 26rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; ">
|
||||
老北京炸酱面是北京市传统小吃，属北京菜系，在京津冀地区广为流传。该菜品以面条为主料，搭配炸酱与时令菜码拌制而成，核心酱料选用肥瘦相间的五花肉丁，配以干黄酱和甜面酱混合炒制，经慢火熬煮形成深褐色酱料
|
||||
</view>
|
||||
<view class="" style=" ">
|
||||
<text style="color: #666666; font-size: 26rpx;">2026-10-15</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view> -->
|
||||
|
||||
<view class="" style="margin-top: 40rpx; background-color: #fff; padding: 20rpx; ">
|
||||
<view class="" style=" display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="" style=" font-weight: 600; ">
|
||||
附近商家推荐
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="" style="margin-top: 20rpx;">
|
||||
<up-scroll-list :indicator='false'>
|
||||
<view v-for="(item, index) in tabList" @click="chooseTab(item,index)"
|
||||
style="display: flex; width: 200rpx; flex-direction: column; align-items: center; justify-content: center;"
|
||||
:key="index">
|
||||
<view class="" v-if="item.icon" :class="{tabimgActive:index==tabCurrent,tabimg: index!=tabCurrent }"
|
||||
style=" border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 80rpx; width: 80rpx; ">
|
||||
<img :src="Service.GetMateUrlByImg(item.icon)" style="width: 45rpx; height: 45rpx; "></img>
|
||||
</view>
|
||||
<view :class="{tabActivefont:index==tabCurrent,tabfont:index!=tabCurrent}"
|
||||
style="font-size: 26rpx; white-space: nowrap; margin-top: 15rpx; width: fit-content; "
|
||||
class="">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</up-scroll-list>
|
||||
</view>
|
||||
<!-- <view class="" style=" display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="" style=" font-weight: 600; ">
|
||||
|
||||
</view>
|
||||
<view class="" @click="Service.GoPage('/pages/community/merchantCom')"
|
||||
style="display: flex;align-items: center;">
|
||||
<text style="color: #666666;margin-right: 10rpx; font-size: 28rpx; ">查看更多</text>
|
||||
<up-icon name="arrow-right" size="14" color='#666666' :bold='true'></up-icon>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="" v-for="(item,index) in merchList" :key="index"
|
||||
style="padding: 20rpx; margin-top: 30rpx; border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #e2e2e2;">
|
||||
<view @click="Service.GoPage('/pages/community/merchantDetail?merchId='+item.merchId)" class="" style="display: flex; ">
|
||||
<img :src="Service.GetMateUrlByImg(item.showImg)"
|
||||
style=" border-radius: 20rpx; width: 140rpx; height: 140rpx;" alt="" />
|
||||
<view class=""
|
||||
style=" flex: 1; margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between; ">
|
||||
<view class="" style="display: flex; align-items: center;">
|
||||
<view class="" style="font-weight: 700; font-size: 32rpx;">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="tag" v-if="item.tag" v-for="(tagItem,tagIndex) in item.tag.split(',')" :key="tagIndex"
|
||||
style=" margin-left: 15rpx; color: #fff; border-radius: 12rpx; background-color: #FF6B35; padding: 4rpx 20rpx; ">
|
||||
{{tagItem}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="display: flex;align-items: center;">
|
||||
<up-rate count="1" activeColor='#FF6B35' size='16' :readonly='true'></up-rate>
|
||||
<text style="color: #666666; font-size: 26rpx;">{{item.score.toFixed(1)}}</text>
|
||||
<text style="margin-left: 10rpx;color: #666666; font-size: 26rpx; ">月售{{item.sale}}单</text>
|
||||
</view>
|
||||
<view class="" style="display: flex; align-items: center; justify-content: space-between; ">
|
||||
<view class="" style="display: flex;align-items: center;">
|
||||
<up-icon name="map" color="#666666" size="18"></up-icon>
|
||||
<text style="color: #666666; margin-left: 12rpx; font-size: 26rpx;">{{cancleDistance(item.distance)}}</text>
|
||||
</view>
|
||||
<view class="" style="margin-right: 20rpx;">
|
||||
<text style="font-size: 28rpx;font-weight: 600; color: #FF6B35; "> ￥{{item.price}}/人 </text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="item.goodsList.length>0" style="margin: 20rpx; margin-bottom: 0; ">
|
||||
<up-scroll-list :indicator='false'>
|
||||
<view @click="Service.GoPage('/pages/goods/goodsDetail?goodsId='+goodsItem.goodsId)" v-for="(goodsItem, goodsIndex) in item.goodsList"
|
||||
:key="goodsIndex"
|
||||
style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<img :src="Service.GetMateUrlByImg(goodsItem.img)" alt=""
|
||||
style="width: 100rpx; height: 100rpx; border-radius: 20rpx; " />
|
||||
<view class="" style="font-size: 24rpx; color: #666666; margin-top: 10rpx; ">
|
||||
{{goodsItem.name}}
|
||||
</view>
|
||||
</view>
|
||||
</up-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="" style="width: 100%; height: 100rpx; ">
|
||||
<up-loadmore :status="status" />
|
||||
</view>
|
||||
|
||||
<up-picker @cancel='isCommunity=!isCommunity' @confirm="selecComunity" :show="isCommunity"
|
||||
:columns="comunityColumns" keyName="name" valueName="name" ></up-picker>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad, onShareAppMessage, onShareTimeline, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { ref } from "vue";
|
||||
import { Service } from "@/Service/Service"
|
||||
import { vpCommunityService } from '@/Service/vp/vpCommunityService'
|
||||
|
||||
|
||||
// 导航栏
|
||||
let topHeight = ref()
|
||||
let height = ref()
|
||||
let top = ref()
|
||||
let isCommunity = ref(false)
|
||||
let comunityColumns = ref([[]])
|
||||
|
||||
interface tab {
|
||||
name : string
|
||||
icon : string
|
||||
assortId : string
|
||||
}
|
||||
|
||||
|
||||
interface Goods {
|
||||
showImg : string
|
||||
distance : number
|
||||
tips : string
|
||||
price : number
|
||||
name : string
|
||||
score : number
|
||||
tag : string
|
||||
merchId : string
|
||||
sale:number
|
||||
goodsList:merchGoods[]
|
||||
}
|
||||
|
||||
interface merchGoods{
|
||||
name:string
|
||||
img:string
|
||||
goodsId:string
|
||||
}
|
||||
|
||||
interface notice{
|
||||
addTime:string
|
||||
noticeId:string
|
||||
remark:string
|
||||
sign:string
|
||||
title:string
|
||||
}
|
||||
|
||||
|
||||
let notice = ref('uview-plus UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用')
|
||||
|
||||
let comNotice=ref<notice>()
|
||||
let current = ref(0)
|
||||
let swiperList = ref([])
|
||||
let address = ref('')
|
||||
let tabCurrent = ref(0)
|
||||
let tabList = ref<tab[]>([])
|
||||
let assId = ref('')
|
||||
let comId = ref('')
|
||||
let page = ref(1)
|
||||
let status = ref('nomore')
|
||||
let longitude = ref()
|
||||
let latitude = ref()
|
||||
|
||||
let merchList=ref<Goods[]>([])
|
||||
|
||||
onLoad(() => {
|
||||
let res = wx.getMenuButtonBoundingClientRect()
|
||||
topHeight.value = (res.top + res.height + 5) * 2
|
||||
height.value = res.height * 2
|
||||
top.value = res.top * 2
|
||||
getCommunity()
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
|
||||
|
||||
onReachBottom(()=>{
|
||||
getList()
|
||||
})
|
||||
|
||||
|
||||
const getLocation = () => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function (res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
getdata()
|
||||
},
|
||||
fail: function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const getCommunity=()=>{
|
||||
vpCommunityService.GetCommunityList().then(res=>{
|
||||
tabList.value = res.data.assortList
|
||||
comunityColumns.value[0]=res.data.comList
|
||||
address.value = res.data.comList[0].name
|
||||
comId.value=res.data.comList[0].communityId
|
||||
assId.value=res.data.assortList[0].assortId
|
||||
getLocation()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const getdata = () => {
|
||||
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
merchList.value=[]
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
|
||||
if (status.value !== 'loadmore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
vpCommunityService.GetCommunityMerchList( comId.value, assId.value, longitude.value, latitude.value, page.value).then(res => {
|
||||
comNotice.value=res.data.notice
|
||||
swiperList.value = []
|
||||
res.data.banner.map((item : any) => {
|
||||
swiperList.value.push(Service.GetMateUrlByImg(item.url))
|
||||
})
|
||||
merchList.value=[...merchList.value,...res.data.list]
|
||||
status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore'
|
||||
page.value++
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const selecComunity = (e) => {
|
||||
isCommunity.value = !isCommunity.value
|
||||
address.value = e.value[0].name
|
||||
comId.value=e.value[0].communityId
|
||||
}
|
||||
|
||||
|
||||
|
||||
const chooseTab = (e : any, index : number) => {
|
||||
tabCurrent.value = index
|
||||
assId.value = e.assortId
|
||||
getdata()
|
||||
}
|
||||
|
||||
const cancleDistance = (item : any) => {
|
||||
if (item >= 1000) {
|
||||
return (item / 1000).toFixed(1) + 'km'
|
||||
} else {
|
||||
return item + 'm'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
|
||||
|
||||
@include flex(row);
|
||||
justify-content: center;
|
||||
|
||||
&__dot {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
margin: 0 5px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&--active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.tabimgActive {
|
||||
background-color: var(--nav-mian);
|
||||
}
|
||||
|
||||
.tabimg {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
|
||||
.tabActivefont {
|
||||
color: var(--nav-mian);
|
||||
}
|
||||
|
||||
.tabfont {
|
||||
color: #333333
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {parent, children} from '../common/relation';
|
||||
export default {
|
||||
name: 'lime-painter-qrcode',
|
||||
mixins:[children('painter')],
|
||||
props: {
|
||||
id: String,
|
||||
css: [String, Object],
|
||||
text: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: 'qrcode',
|
||||
el: {
|
||||
css: {},
|
||||
text: null
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,470 @@
|
||||
<template>
|
||||
<view class="member-code-page">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">会员码</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 会员卡片 -->
|
||||
<view class="member-card">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-section">
|
||||
<image class="user-avatar" :src="user.avatar" mode="aspectFill" />
|
||||
<view class="user-info">
|
||||
<text class="user-name">{{ user.nickname }}</text>
|
||||
<!-- ID和会员等级标签在一排 -->
|
||||
<view class="tags-row">
|
||||
<view class="user-id-tag" @click="copyMemberId">
|
||||
<text class="ri-vip-crown-2-fill id-icon"></text>
|
||||
<text class="id-text">ID: {{ user.memberId }}</text>
|
||||
<text class="ri-file-copy-line id-copy"></text>
|
||||
</view>
|
||||
<view class="user-member-tag">
|
||||
<text class="ri-vip-crown-fill member-icon"></text>
|
||||
<text class="member-text">{{ memberLevelText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 条形码区域 -->
|
||||
<view class="barcode-section">
|
||||
<view class="barcode-wrapper" @click="previewBarcode">
|
||||
<view class="barcode-placeholder">
|
||||
<text class="barcode-lines">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="barcode-number">{{ user.memberCode }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 二维码区域 -->
|
||||
<view class="qrcode-section">
|
||||
<view class="qrcode-wrapper" @click="previewQrcode">
|
||||
<view class="qrcode-placeholder">
|
||||
<text class="ri-qr-code-line qrcode-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="code-tip">向商家出示会员码，扫码享受积分优惠</text>
|
||||
</view>
|
||||
|
||||
<!-- 刷新提示 -->
|
||||
<view class="refresh-section">
|
||||
<text class="ri-time-line refresh-icon"></text>
|
||||
<text class="refresh-text">{{ refreshCountdown }}秒后自动刷新</text>
|
||||
<view class="refresh-btn" @click="refreshCode">
|
||||
<text class="ri-refresh-line btn-icon"></text>
|
||||
<text class="btn-text">刷新</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<view class="tips-section">
|
||||
<view class="tips-title">
|
||||
<text class="ri-lightbulb-line tips-icon"></text>
|
||||
<text class="title-text">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-list">
|
||||
<text class="tips-item">• 会员码每分钟自动更新，确保使用安全</text>
|
||||
<text class="tips-item">• 结账时请向商家出示此码</text>
|
||||
<text class="tips-item">• 消费可获得积分，积分可抵扣现金</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
// import { getUserInfo } from '@/api/index.js'
|
||||
|
||||
// 用户数据
|
||||
const user = ref({
|
||||
nickname: '美食达人',
|
||||
avatar: 'https://picsum.photos/200/200?random=100',
|
||||
points: 2580,
|
||||
memberLevel: 'gold',
|
||||
memberId: '8888888',
|
||||
memberCode: 'VIP8888888888888'
|
||||
})
|
||||
|
||||
// 刷新倒计时（秒）
|
||||
const refreshCountdown = ref(60)
|
||||
let refreshTimer = null
|
||||
let countdownTimer = null
|
||||
|
||||
// 会员等级文本
|
||||
const memberLevelText = computed(() => {
|
||||
const levelMap = {
|
||||
'gold': '黄金会员',
|
||||
'platinum': '铂金会员',
|
||||
'diamond': '钻石会员'
|
||||
}
|
||||
return levelMap[user.value.memberLevel] || '普通会员'
|
||||
})
|
||||
|
||||
// 获取用户信息
|
||||
const fetchUserInfo = async () => {
|
||||
// const res = await getUserInfo()
|
||||
// if (res.code === 200) {
|
||||
// user.value = res.data
|
||||
// }
|
||||
}
|
||||
|
||||
// 刷新会员码
|
||||
const refreshCode = () => {
|
||||
// 生成新的会员码
|
||||
const newCode = 'VIP' + Date.now().toString().slice(-12)
|
||||
user.value.memberCode = newCode
|
||||
|
||||
// 重置倒计时
|
||||
refreshCountdown.value = 60
|
||||
|
||||
uni.showToast({
|
||||
title: '会员码已刷新',
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
|
||||
// 预览条形码
|
||||
const previewBarcode = () => {
|
||||
uni.showToast({
|
||||
title: '条形码预览功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 预览二维码
|
||||
const previewQrcode = () => {
|
||||
uni.showToast({
|
||||
title: '二维码预览功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 复制会员ID
|
||||
const copyMemberId = () => {
|
||||
uni.setClipboardData({
|
||||
data: user.value.memberId,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '会员ID已复制',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回我的页面
|
||||
const goBack = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/profile/profile'
|
||||
})
|
||||
}
|
||||
|
||||
// 开始自动刷新
|
||||
const startAutoRefresh = () => {
|
||||
// 清除之前的定时器
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
}
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer)
|
||||
}
|
||||
|
||||
// 倒计时定时器（每秒更新）
|
||||
countdownTimer = setInterval(() => {
|
||||
refreshCountdown.value--
|
||||
if (refreshCountdown.value <= 0) {
|
||||
refreshCountdown.value = 60
|
||||
// 自动刷新会员码
|
||||
const newCode = 'VIP' + Date.now().toString().slice(-12)
|
||||
user.value.memberCode = newCode
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchUserInfo()
|
||||
startAutoRefresh()
|
||||
})
|
||||
|
||||
// 清理定时器
|
||||
onUnmounted(() => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
}
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 引入全局标签样式 */
|
||||
@import '@/styles/member-tags.scss';
|
||||
|
||||
/* 现代化会员码页面 */
|
||||
.member-code-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #FFF4E6 0%, #F5F5F5 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 40rpx;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 会员卡片 */
|
||||
.member-card {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(255, 107, 0, 0.12);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* 用户信息区域 */
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
border: 3rpx solid #FF6B00;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background: linear-gradient(90deg, transparent, #E0E0E0, transparent);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* 条形码区域 */
|
||||
.barcode-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.barcode-wrapper {
|
||||
width: 480rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.barcode-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.barcode-lines {
|
||||
font-size: 40rpx;
|
||||
color: #000000;
|
||||
letter-spacing: 2rpx;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.barcode-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
/* 二维码区域 */
|
||||
.qrcode-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.qrcode-wrapper {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.qrcode-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000000;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.qrcode-icon {
|
||||
font-size: 200rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.code-tip {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 刷新区域 */
|
||||
.refresh-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
font-size: 24rpx;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.refresh-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 温馨提示 */
|
||||
.tips-section {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #FFA500;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<view class="member-benefits-page">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">会员权益</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 会员权益卡片 -->
|
||||
<view class="benefits-card">
|
||||
<!-- 顶部装饰 -->
|
||||
<view class="card-header">
|
||||
<text class="ri-vip-crown-fill header-icon"></text>
|
||||
<text class="header-title">会员尊享权益</text>
|
||||
</view>
|
||||
|
||||
<!-- 权益内容 -->
|
||||
<view class="benefits-content">
|
||||
<!-- 权益条目 -->
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-coin-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">积分累积</text>
|
||||
<text class="benefit-desc">消费即可获得积分，积分可抵扣现金或兑换优惠券</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-coupon-3-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">专属优惠券</text>
|
||||
<text class="benefit-desc">会员专享优惠券，享受更多折扣优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-gift-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">生日特权</text>
|
||||
<text class="benefit-desc">会员生日当月可领取专属生日礼包</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-bank-card-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">联盟卡权益</text>
|
||||
<text class="benefit-desc">绑定联盟卡，享受联盟商户专属优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-percent-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">积分抵扣</text>
|
||||
<text class="benefit-desc">结账时可使用积分抵扣，100积分抵1元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="benefit-item">
|
||||
<view class="benefit-badge">
|
||||
<text class="ri-calendar-check-line badge-icon"></text>
|
||||
</view>
|
||||
<view class="benefit-text">
|
||||
<text class="benefit-title">优先活动</text>
|
||||
<text class="benefit-desc">优先参与平台活动，提前享受优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 等级说明 -->
|
||||
<view class="level-section">
|
||||
<view class="level-title">
|
||||
<text class="ri-medal-line level-icon"></text>
|
||||
<text class="title-text">会员等级</text>
|
||||
</view>
|
||||
<view class="level-list">
|
||||
<view class="level-item">
|
||||
<view class="level-badge gold">
|
||||
<text class="ri-vip-crown-fill level-icon-mini"></text>
|
||||
<text class="level-name">黄金会员</text>
|
||||
</view>
|
||||
<text class="level-desc">累计消费满1000元升级</text>
|
||||
</view>
|
||||
<view class="level-item">
|
||||
<view class="level-badge platinum">
|
||||
<text class="ri-vip-diamond-fill level-icon-mini"></text>
|
||||
<text class="level-name">铂金会员</text>
|
||||
</view>
|
||||
<text class="level-desc">累计消费满5000元升级</text>
|
||||
</view>
|
||||
<view class="level-item">
|
||||
<view class="level-badge diamond">
|
||||
<text class="ri-sparkling-fill level-icon-mini"></text>
|
||||
<text class="level-name">钻石会员</text>
|
||||
</view>
|
||||
<text class="level-desc">累计消费满10000元升级</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<view class="tips-box">
|
||||
<view class="tips-header">
|
||||
<text class="ri-error-warning-line tips-icon"></text>
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">• 会员权益最终解释权归平台所有</text>
|
||||
<text class="tips-item">• 会员等级按累计消费金额自动升级</text>
|
||||
<text class="tips-item">• 积分有效期为获得之日起1年</text>
|
||||
<text class="tips-item">• 更多权益敬请期待</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.member-benefits-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding:60rpx 24rpx 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 权益卡片 */
|
||||
.benefits-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 40rpx;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 2rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 48rpx;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
/* 权益内容 */
|
||||
.benefits-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.benefit-badge {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 107, 0, 0.25);
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.benefit-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.benefit-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.benefit-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg, transparent, #E0E0E0, transparent);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* 等级说明区域 */
|
||||
.level-section {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.level-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.level-icon {
|
||||
font-size: 32rpx;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.level-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.level-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.level-badge.gold {
|
||||
background: linear-gradient(135deg, #FFF9C4, #FFF176);
|
||||
border: 2rpx solid #FDD835;
|
||||
}
|
||||
|
||||
.level-badge.platinum {
|
||||
background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
|
||||
border: 2rpx solid #42A5F5;
|
||||
}
|
||||
|
||||
.level-badge.diamond {
|
||||
background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
|
||||
border: 2rpx solid #AB47BC;
|
||||
}
|
||||
|
||||
.level-icon-mini {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.level-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.level-desc {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 温馨提示 */
|
||||
.tips-box {
|
||||
background: #FFF9F0;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
border-left: 4rpx solid #FF9800;
|
||||
}
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tips-item {
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<!-- 时间筛选标签 -->
|
||||
<view class="time-filter">
|
||||
<text class="filter-item" @click="currentIndex=0" :class="{active:currentIndex==0}">全部</text>
|
||||
<text class="filter-item" @click="currentIndex=1" :class="{active:currentIndex==1}">今日</text>
|
||||
<text class="filter-item" @click="currentIndex=2" :class="{active:currentIndex==2}">本月</text>
|
||||
<text class="filter-item" @click="show=true" :class="{active:currentIndex==3}">自定义</text>
|
||||
</view>
|
||||
|
||||
<!-- 关键数据卡片 -->
|
||||
<view class="data-cards">
|
||||
<view class="data-card">
|
||||
<text class="data-label">销售额</text>
|
||||
<text class="data-value">¥12,345</text>
|
||||
<text class="data-growth">+12.5%</text>
|
||||
</view>
|
||||
<view class="data-card">
|
||||
<text class="data-label">订单数</text>
|
||||
<text class="data-value">128单</text>
|
||||
<text class="data-growth">+8.3%</text>
|
||||
</view>
|
||||
<view class="data-card">
|
||||
<text class="data-label">访客数</text>
|
||||
<text class="data-value">1,024人</text>
|
||||
<text class="data-growth">+15.2%</text>
|
||||
</view>
|
||||
<view class="data-card">
|
||||
<text class="data-label">人均消费</text>
|
||||
<text class="data-value">¥96.4</text>
|
||||
<text class="data-growth">+4.8%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-calendar :show="show" :mode="mode" monthNum='5' minDate='2025-12-01' maxDate='2999-12-31' @close="show=false" @confirm="confirm"></up-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 商品销量排行数据类型
|
||||
interface RankingItem {
|
||||
name : string;
|
||||
sales : number;
|
||||
trend : 'up' | 'down';
|
||||
}
|
||||
|
||||
let currentIndex = ref(0)
|
||||
|
||||
|
||||
|
||||
// 商品销量排行数据
|
||||
const salesRanking = ref<RankingItem[]>([
|
||||
{ name: '招牌牛肉面', sales: 245, trend: 'up' },
|
||||
{ name: '香菇三明治', sales: 189, trend: 'down' },
|
||||
{ name: '水果沙拉', sales: 156, trend: 'up' },
|
||||
{ name: '红烧排骨', sales: 134, trend: 'up' },
|
||||
{ name: '糖醋里脊', sales: 112, trend: 'down' }
|
||||
]);
|
||||
|
||||
|
||||
|
||||
const show = ref(false);
|
||||
const mode = ref('range');
|
||||
|
||||
const confirm = (e) => {
|
||||
console.log(e);
|
||||
currentIndex.value=3
|
||||
};
|
||||
|
||||
|
||||
// 切换时间筛选
|
||||
const changeTimeFilter = (index : number) => {
|
||||
// 实际项目中这里应该有切换时间筛选的逻辑
|
||||
console.log('切换时间筛选', index);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
background-color: #F5F5F5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 时间筛选标签 */
|
||||
.time-filter {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
padding: 10rpx 40rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.filter-item.active {
|
||||
background-color: #FF6600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 关键数据卡片 */
|
||||
.data-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
background-color: #FFFFFF;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.data-growth {
|
||||
font-size: 28rpx;
|
||||
color: #4CD964;
|
||||
}
|
||||
|
||||
/* 图表区域 */
|
||||
.chart-section,
|
||||
.ranking-section,
|
||||
.flow-section {
|
||||
background-color: #FFFFFF;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.sales-trend-chart,
|
||||
.customer-flow-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 商品销量排行 */
|
||||
.ranking-list {
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
|
||||
.ranking-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ranking-number {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #FF6600;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.ranking-product {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.ranking-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ranking-sales {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.trend-icon {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user