修改页面 部分样式

This commit is contained in:
HHS
2025-05-27 19:02:04 +08:00
parent de3594578c
commit 1732ecfa5d
10 changed files with 461 additions and 80 deletions

View File

@@ -144,6 +144,14 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/deviceManagement/deviceManagement",
"style" :
{
"navigationBarTitleText" : "设备管理",
"navigationStyle": "custom"
}
},
{
"path": "pages/cashWithdrow/cashWithdrow",
"style" :

View File

@@ -2,6 +2,7 @@
<view class="container">
<TransNavVue title="微信提现"></TransNavVue>
<view class="withdraw-card">
<view class="title">提现金额</view>
<view class="input-box">
@@ -25,12 +26,14 @@
</template>
<script setup>
import { ref } from 'vue'
import TransNavVue from '../../components/TransNav.vue'
import { ref ,onMounted} from 'vue'
import { request } from '@/utils/request'
import TransNavVue from '../../components/TransNav.vue'
const amount = ref('')
const availableBalance = ref('15230.80')
const availableBalance = ref('0')
const wechatInfo = ref({
nickname: '微信用户',
avatar: ''
@@ -74,6 +77,21 @@ const submitWithdraw = async () => {
const fillAllAmount = () => {
amount.value = availableBalance.value
}
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
// 通过页面参数获取数据
if (currentPage && currentPage.$vm) {
const eventChannel = currentPage.$vm.getOpenerEventChannel();
eventChannel.on('withdrawAmount', (data) => {
// 处理提现金额数据
availableBalance.value = data.amount||0
});
}
})
</script>
<style lang="scss" scoped>

View File

@@ -14,17 +14,18 @@
<view class="data-item">
<image class="data-icon" src="/static/images/commissionDetail/Group 1000009065.png"></image>
<text class="data-label">今日佣金</text>
<text class="data-value">1254.22</text>
<text class="data-value">{{ commissionData.todaySEarnings}}</text>
</view>
<view class="data-item">
<image class="data-icon" src="/static/images/commissionDetail/Vector.png"></image>
<text class="data-label">累计佣金</text>
<text class="data-value">6890.50</text>
<text class="data-value">{{ commissionData.cumulativeEarnings }}</text>
</view>
<view class="data-item">
<image class="data-icon" src="/static/images/commissionDetail/Frame.png"></image>
<text class="data-label">当前收益</text>
<text class="data-value">15230.80</text>
<text class="data-value">{{ commissionData.currentEarnings }}</text>
</view>
</view>
@@ -58,24 +59,60 @@
<script setup>
import { ref, onMounted } from 'vue'
import TransNavVue from '../../components/TransNav.vue';
import { useTokenStorage } from '../../utils/storage'
import { request } from '@/utils/request'
const { token, getToken } = useTokenStorage()
const records = ref([
{ time: '2023-10-15 14:30', amount: '+125.50' },
{ time: '2023-10-14 09:15', amount: '+80.00' },
{ time: '2023-10-14 09:15', amount: '+80.00' },
{ time: '2023-10-14 09:15', amount: '+80.00' },
{ time: '2023-10-14 09:15', amount: '+80.00' },
{ time: '2023-10-15 14:30', amount: '+0' },
{ time: '2023-10-14 09:15', amount: '+0' },
{ time: '2023-10-14 09:15', amount: '+0' },
{ time: '2023-10-14 09:15', amount: '+0' },
{ time: '2023-10-14 09:15', amount: '+0' },
// 可以添加更多记录数据
])
const commissionData = ref({
cumulativeEarnings: 0,
currentEarnings: 0,
todaySEarnings: 0
})
const goToWithdraw = ()=>{
uni.navigateTo({
url:'/pages/cashWithdrow/cashWithdrow'
url:'/pages/cashWithdrow/cashWithdrow',
success: (res) => {
res.eventChannel.emit('withdrawAmount', {
amount: commissionData.value.currentEarnings
})
}
})
}
// 获取佣金详情
const getCommissionDetail = async () => {
try {
const res = await request({
url: '/app-api/weixin/distribution/get/commission/info',
showLoading: true,
header: {
'Authorization': `Bearer ${getToken()}`
}
})
if (res.code === 0 || res.code === 200) {
commissionData.value=res.data || {};
} else {
throw new Error(res.msg || '数据异常')
}
} catch (err) {
console.error('获取用户信息失败:', err)
}
}
onMounted(() => {
// 这里可以添加获取收益记录的API调用
getCommissionDetail()
})
</script>

View File

@@ -0,0 +1,238 @@
<template>
<view class="container">
<TransNavVue title="设备管理"></TransNavVue>
<view class="header">
<text class="title">总设备:{{devices.length}}</text>
</view>
<scroll-view scroll-y="true" class="device-list">
<view v-if="devices.length === 0" class="empty-container">
<image src="/static/images/empty.png" class="empty-image"></image>
<text class="empty-text">暂无设备数据</text>
</view>
<view
v-else
v-for="(device, index) in devices"
:key="index"
class="device-item"
>
<view class="device-header">
<text class="device-name">{{ device.name }}</text>
<button class="unbind-btn" @click="handleUnbind(device.id)">解绑</button>
</view>
<view class="device-status">
<text class="info-tag">普通信息</text>
<text class="online-tag">在线</text>
<text class="device-model">{{ device.model }}</text>
</view>
<view class="divider"></view>
<view class="device-detail">
<image class="device-image" :src="device.image" mode="aspectFit"></image>
<view class="device-info">
<text class="info-text">型号{{ device.model }}</text>
<text class="info-text">绑定日期{{ device.bindDate }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import TransNavVue from '../../components/TransNav.vue'
const devices = ref([
{
id: 1,
name: '智能蜂箱001',
model: 'X-1000',
status: 'online',
image: '/static/images/养蜂.png',
bindDate: '2023-10-15'
},
{
id: 2,
name: '智能蜂箱002',
model: 'X-2000',
status: 'online',
image: '/static/images/养蜂.png',
bindDate: '2023-10-10'
}
])
const handleUnbind = (id) => {
uni.showModal({
title: '提示',
content: '确定要解绑该设备吗?',
success: (res) => {
if (res.confirm) {
// 调用解绑API
}
}
})
}
</script>
<style lang="scss" scoped>
.nav-bar {
display: flex;
align-items: center;
padding: 20rpx 30rpx;
margin-bottom: 20rpx;
.back-icon {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.nav-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
}
.container {
padding: 30rpx;
background-color: #f7f7f7;
min-height: 100vh;
.header {
margin-bottom: 30rpx;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
}
.device-list {
.device-item {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
.device-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.device-name {
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.unbind-btn {
margin: 0;
padding: 0 20rpx;
height: 50rpx;
line-height: 50rpx;
background-color: #ff6f0e;
color: #fff;
font-size: 24rpx;
border-radius: 25rpx;
}
}
.device-status {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.info-tag {
position: relative;
padding-left: 30rpx;
margin-right: 10rpx;
&:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16rpx;
height: 16rpx;
background-color: #1890ff;
border-radius: 50%;
}
}
.online-tag {
position: relative;
padding-left: 30rpx;
margin-right: 20rpx;
&:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16rpx;
height: 16rpx;
background-color: #52c41a;
border-radius: 50%;
}
}
.device-model {
margin-left: auto;
font-size: 24rpx;
color: #999;
}
}
.divider {
height: 1rpx;
background-color: #eee;
margin: 20rpx 0;
}
.device-detail {
display: flex;
.device-image {
width: 120rpx;
height: 120rpx;
margin-right: 20rpx;
}
.device-info {
display: flex;
flex-direction: column;
justify-content: space-between;
.info-text {
font-size: 24rpx;
color: #666;
}
}
}
}
}
}
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 60vh;
.empty-image {
width: 300rpx;
height: 300rpx;
margin-bottom: 40rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
}
}
</style>

View File

@@ -73,7 +73,8 @@
<view class="my-bee-right" @click="collectBee">领取蜂箱</view>
</view>
<view v-if="dataList.length>0" class="my-bee-card" v-for='item in dataList' :key="item" @click="gotoMyBeehive(item)">
<view v-if="dataList.length>0">
<view class="my-bee-card" v-for='item in dataList' :key="item" @click="gotoMyBeehive(item)">
<image src="/static/images/Subtract@2x.png" mode="" class="card-bg"></image>
<view class="card-content">
<view class="card-top">
@@ -106,6 +107,7 @@
</view>
</view>
</view>
</view>
<view v-else class="no-bee">
<image src="/static/images/无数据.png" mode=""></image>
<view><text>当前暂无蜂箱信息</text></view>
@@ -142,9 +144,7 @@ onShow(() => {
onMounted(() => {
getSwiperList()
getInfoData()
if (getToken()) {
getInfoDataList()
}
})
const swiperList=ref(['/static/images/轮播图(1).png','/static/images/轮播图(1).png'])
const infoData=ref({})
@@ -243,18 +243,34 @@ const gotoMyBeehive = (item) => { // 接收当前item参数
};
// 领取蜂箱跳转
const collectBee = () => {
if (!getToken()) {
uni.showModal({
title: '提示',
content: '请先登录',
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/login/login'
})
}
}
})
return
}else{
uni.navigateTo({
url: '/pages/homePage/collectBee'
});
}
}
</script>
<style lang="scss" scoped>
.container {
background-color: #f7f7f7;
height: 100vh;
padding-bottom: 40rpx;
position: relative;
z-index: 1;
display: flex;
@@ -524,11 +540,15 @@ const collectBee=()=>{
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin: auto;
margin-top: 24rpx;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
height: 120rpx;
width: 120rpx;
margin-top: 5rpx;
}
text {
font-weight: 400;
@@ -539,11 +559,12 @@ const collectBee=()=>{
width: 228rpx;
height: 44rpx;
background: #FF6F0E;
border-radius: 130rpx 130rpx 130rpx 130rpx;
border-radius: 130rpx;
line-height: 44rpx;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
}
}
}

View File

@@ -10,7 +10,12 @@
</uni-popup>
<view class="container">
<scroll-view scroll-y="true" class="scroll-content">
<view v-if="messageList.length === 0" class="empty-tip">
<image src="/static/images/empty.png" mode="aspectFit"></image>
<text>暂无消息数据</text>
</view>
<view
v-else
v-for="(item, index) in messageList"
:key="index"
class="message-item"
@@ -184,5 +189,23 @@ const getCurrentMessage = async () => {
}
}
}
.empty-tip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 500rpx;
image {
width: 200rpx;
height: 200rpx;
margin-bottom: 30rpx;
}
text {
font-size: 28rpx;
color: #999;
}
}
}
</style>

View File

@@ -12,7 +12,18 @@
<view class="avatar-content">
<view class="avatar-view">
<image :src="userInfo.avatar" mode="" class="avatar-image"></image>
<image src="/static/images/myPapeImages/Group 1000008640@2x.png" mode="" class="sex-image"></image>
<image
v-if="userInfo.gender == 1"
src="/static/images/myPapeImages/Group 1000008640@2x.png"
mode=""
class="sex-image">
</image>
<image
v-else-if="userInfo.gender == 0"
src="/static/images/myPapeImages/Group 1000009029.png"
mode=""
class="sex-image">
</image>
</view>
<view class="name-content" >
<text class="name-text">{{userInfo.nickname||'暂未登陆' }}</text>
@@ -255,12 +266,18 @@ const gotoBeeFarmerJion = () => {
}
}
})
} else {
if (userInfo.value.isBeefarmer) {
uni.navigateTo({
url: '/pages/deviceManagement/deviceManagement'
})
} else {
uni.navigateTo({
url: '/pages/beeFarmerJion/beeFarmerJion'
})
}
}
}
// 跳转智能养蜂
const gotoSmartBee = () => {
if (!getToken()) {

View File

@@ -78,6 +78,20 @@
//添加物品
const buyBtn = async () => {
if (!getToken()) {
uni.showModal({
title: '提示',
content: '请先登录',
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/login/login'
})
}
}
})
return
}
try {
const res = await request({
@@ -99,8 +113,7 @@
} else {
throw new Error(res.msg || '数据异常')
}
}
catch (err) {
} catch (err) {
console.error('获取商场数据失败:', err)
}
}

View File

@@ -94,7 +94,7 @@ onMounted(() => {
<style lang="scss" scoped>
.container {
height: 100vh;
padding-bottom: 120rpx;
display: flex;
flex-direction: column;
background: #f7f7f7;

View File

@@ -6,8 +6,12 @@
<view class="left-content">
<text class="amount">{{ walletData.balance || 0 }}</text>
<text class="label">账号余额</text>
</view>
<view>
</view>
<view class="right-content" @click="showCashWithdraw">
<image src="/static/images/myPapeImages/Frame (1).png" class="arrow-icon"></image>
<text class="withdraw-text">余额提现</text>
<image src="/static/images/myPapeImages/向右箭头.png" class="arrow-icon"></image>
</view>
@@ -21,7 +25,7 @@
<text class="amount">{{ walletData.coin || 0 }}</text>
<text class="label">M币</text>
</view>
<image src="/static/images/myPapeImages/使用工具生成图片 3@2x.png" class="honey-icon"></image>
<image style="width: 150rpx; height:150rpx" src="/static/images/myPapeImages/Group 1000009076.png" class="honey-icon"></image>
</view>
</view>
@@ -133,8 +137,9 @@ const showCashWithdraw = () => {
.top-card, .bottom-card {
border-radius: 16rpx;
padding: 30rpx;
padding: 50rpx;
margin-bottom: 20rpx;
height: 230rpx;
.card-content {
display: flex;
@@ -165,6 +170,7 @@ const showCashWithdraw = () => {
.withdraw-text {
font-size: 28rpx;
color: #fff;
margin-left: 10rpx;
}
.arrow-icon {
@@ -182,11 +188,11 @@ const showCashWithdraw = () => {
}
.black-bg {
background: #000;
background: linear-gradient(to bottom, #3b3b3b, #060608);
}
.orange-bg {
background: #ff6f0e;
background: #ff7f27;
}
.withdraw-btn {