feat:静态页面修改 tabbarbug修改

pages.config.ts

@@ -30,6 +30,7 @@ export default defineUniPages({
       {
         icon: '/static/tabbar/Parenting.svg',
         iconShow: '/static/tabbar/goods.svg',
+        roundIcon: '/static/tabbar/Polygon.svg',
         pagePath: 'pages/index/index',
         text: '育儿',
         iconType: 'local',
@@ -37,6 +38,7 @@ export default defineUniPages({
       {
         icon: '/static/tabbar/music.svg',
         iconShow: '/static/tabbar/Frame.svg',
+        roundIcon: '/static/tabbar/Polygon.svg',
         pagePath: 'pages/music/music',
         text: '音乐',
         iconType: 'local',
@@ -45,6 +47,7 @@ export default defineUniPages({
       {
         icon: '/static/tabbar/user.svg',
         iconShow: '/static/tabbar/macon.svg',
+        roundIcon: '/static/tabbar/Polygon.svg',
         pagePath: 'pages/myUser/myuser',
         text: '我的',
         iconType: 'local',

src/components/shop-tabbar/shop-tabbar.vue

@@ -2,16 +2,15 @@
   <view class="tab-bar">
     <view
       v-for="(item, index) in tabBar.list"
-      :key="index"
+      :key="item.pagePath"
       :class="['tab-item', { active: currentTab === index }]"
-      @click="selectTabBar(index, item.pagePath)"
+      @click.stop="selectTabBar(index, item.pagePath)"
     >
       <view class="icon-wrapper">
         <view v-if="currentTab === index">
-          <image :src="item.round" class="PolygonIcon"></image>
+          <image :src="item.roundIcon" class="PolygonIcon"></image>
           <image :src="item.iconShow" class="home-item-isShow"></image>
         </view>
-
         <image v-else :src="item.icon" class="home-item-img"></image>
       </view>
       <span class="labelTile">{{ item.text }}</span>
@@ -23,19 +22,18 @@
   import { tabBar } from '@/pages.json'
   import { t } from '@/locale'
   import { useTabbarStore } from '@/store/tabbar'
-  import { ref, watch } from 'vue'
+  import { onMounted, computed } from 'vue'
 
   const tabbarStore = useTabbarStore()
-  const currentTab = ref(0)
+  const currentTab = computed(() => tabbarStore.curIdx)
   function selectTabBar(index: number, url: string) {
     tabbarStore.setCurIdx(index)
-    currentTab.value = index
     uni.switchTab({
       url: `/${url}`,
     })
   }
 
-  onLoad(() => {
+  onMounted(() => {
     // #ifdef APP-PLUS | H5
     uni.hideTabBar({
       fail(err) {
@@ -46,7 +44,7 @@
       },
     })
     const routes = getCurrentPages()
-    const curRoute = routes[routes.length - 1].route
+    const curRoute = routes[routes.length - 1]?.route
     for (let i = 0; i < tabBar.list.length; i++) {
       const { pagePath } = tabBar.list[i]
       if (pagePath === curRoute) {
@@ -59,7 +57,7 @@
   })
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
   .tab-bar {
     position: fixed;
     right: 0;
@@ -69,7 +67,6 @@
     align-items: center;
     justify-content: space-around;
     width: 100%;
-    /* height: 160rpx; */
     background: #ffffff;
     box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
   }
@@ -89,13 +86,10 @@
     align-items: center;
     justify-content: center;
     width: 100rpx;
-    /* height: 100rpx; */
     border-radius: 50%;
     transition: all 0.3s ease;
   }
-  /* .tab-item.active {
-    color: #60a5fa;
-  } */
+
   .tab-item.active .icon-wrapper {
     transform: translateY(-48rpx);
   }

src/manifest.json

@@ -33,7 +33,8 @@
           "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
           "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
           "<uses-feature android:name=\"android.hardware.camera\"/>",
-          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>"
         ],
         "minSdkVersion": 30,
         "targetSdkVersion": 30,

src/pages/category/category.vue

@@ -1,14 +0,0 @@
-<route lang="json5">
-{
-  layout: 'tabbar',
-  style: {
-    navigationBarTitleText: '%tabbar.category%',
-  },
-}
-</route>
-<template>
-  <view>听歌页面</view>
-</template>
-
-<script lang="ts" setup></script>
-<style lang="scss" scoped></style>

src/pages/community/community.vue

@@ -1,17 +0,0 @@
-<route lang="json5">
-{
-  layout: 'tabbar',
-  style: {
-    navigationBarTitleText: '%tabbar.community%',
-  },
-}
-</route>
-<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
-
-<template>
-  <view class="verification-container"></view>
-</template>
-
-<script lang="ts" setup></script>
-
-<style scoped></style>

src/pages/music/component/musicPlayback.vue

@@ -54,12 +54,14 @@
         </view>
         <!-- 上一曲下一曲播放 -->
         <view class="controls">
+          <!-- 循环播放 -->
           <view class="control-btn" @click="palyCycleBtn">
             <image
               style="width: 32rpx; height: 32rpx"
               src="/src/static/icon/fi-rr-refresh.svg"
             ></image>
           </view>
+          <!-- 上一曲 -->
           <view class="control-btn" @click="previousSongBtn">
             <image
               style="width: 48rpx; height: 32rpx"
@@ -86,12 +88,14 @@
               </view>
             </button>
           </view>
+          <!-- 下一曲 -->
           <view class="control-btn" @click="nextSongBtn">
             <image
-              style="width: 24rpx; height: 32rpx"
+              style="width: 48rpx; height: 32rpx"
               src="/src/static/icon/Group-right.svg"
             ></image>
           </view>
+          <!--  -->
           <view class="control-btn">
             <image
               style="width: 32rpx; height: 32rpx"

src/pages/music/component/musicRecommend.vue

@@ -1,95 +1,86 @@
 <template>
-  <!-- Header -->
-  <view class="header">
-    <view class="header-left">
-      <!-- 播放按钮 -->
-      <view class="play-circle">
-        <image
-          @click="palyBtn"
-          style="width: 48rpx; height: 48rpx"
-          src="/src/static//icon/fi-rr-play-alt.svg"
-        ></image>
+  <view>
+    <!-- Header -->
+    <view class="header">
+      <view class="header-left">
+        <!-- 播放按钮 -->
+        <view class="play-circle">
+          <image
+            @click="palyBtn"
+            style="width: 48rpx; height: 48rpx"
+            src="/src/static//icon/fi-rr-play-alt.svg"
+          ></image>
+        </view>
+        <text class="text-gray">播放全部 (22首)</text>
       </view>
-      <text class="text-gray">播放全部 (22首)</text>
-    </view>
-
-    <!-- 循环播放 -->
-    <view class="header-right">
-      <image
-        @click="cycleBtn"
-        style="width: 32rpx; height: 32rpx"
-        src="/src/static/icon/fi-rr-refresh.svg"
-      ></image>
-      <image style="width: 32rpx; height: 32rpx" src="/src/static/icon/fi-rr-shuffle.svg"></image>
-    </view>
-  </view>
 
-  <!-- 当前播放 -->
-  <view class="currently-playing">
-    <view class="currently-playing-left">
-      <view class="play-circle">
-        <image
-          @click="palyBtn"
-          style="width: 28rpx; height: 28rpx"
-          src="/src/static//icon/fi-rr-play.svg"
-          v-if="type === 0"
-        ></image>
-        <image
-          @click="palyBtn"
-          style="width: 28rpx; height: 28rpx"
-          src="/src/static//icon/fi-rr-play.svg"
-          v-else
-        ></image>
+      <!-- 循环播放 -->
+      <view class="header-right">
+        <image @click="cycleBtn" class="imgIcon" src="/src/static/icon/fi-rr-refresh.svg"></image>
+        <image class="imgIcon" src="/src/static/icon/fi-rr-shuffle.svg"></image>
       </view>
-      <text class="text-gray">继续播放: 小燕子(供暖版) - 贝乐虎儿歌贝乐虎儿歌贝乐虎儿歌</text>
-    </view>
-    <!-- 循环播放 -->
-    <view style="display: flex; gap: 80rpx">
-      <image
-        @click="cycleBtn"
-        style="width: 32rpx; height: 32rpx"
-        src="/src/static/icon/fi-rr-pause.svg"
-      ></image>
-      <image
-        style="width: 32rpx; height: 32rpx"
-        src="/src/static/icon/fi-rr-cross-small.svg"
-      ></image>
     </view>
-  </view>
 
-  <!-- 播放列表 -->
-  <view class="playlist">
-    <view v-for="(song, index) in songs" :key="index" class="playlist-item">
-      <view class="album-cover">
-        <view class="cover-inner">
+    <!-- 当前播放 -->
+    <view class="currently-playing">
+      <view class="currently-playing-left">
+        <view class="play-circle">
           <image
-            style="width: 100rpx; height: 100rpx"
-            src="/src/static/icon/fi-rr-big-play.svg"
+            @click="palyBtn"
+            class="palyIcon"
+            src="/src/static//icon/fi-rr-play.svg"
+            v-if="type === 0"
+          ></image>
+          <image
+            @click="palyBtn"
+            class="palyIcon"
+            src="/src/static//icon/fi-rr-play.svg"
+            v-else
           ></image>
         </view>
+        <text class="text-gray">继续播放: 小燕子(供暖版) - 贝乐虎儿歌贝乐虎儿歌贝乐虎儿歌</text>
       </view>
-      <view class="song-details" @click="playFavoriteBtn(song, index)">
-        <text class="song-name">{{ song.name }}</text>
+      <!-- 循环播放 -->
+      <view style="display: flex; gap: 80rpx">
+        <image @click="cycleBtn" class="imgIcon" src="/src/static/icon/fi-rr-pause.svg"></image>
+        <image class="imgIcon" src="/src/static/icon/fi-rr-cross-small.svg"></image>
       </view>
-      <view class="song-controls">
-        <text>{{ song.duration }}</text>
-        <image
-          style="width: 40rpx; height: 40rpx"
-          v-if="type === 0"
-          :src="
-            song.favorite
-              ? '/src/static/icon/fi-rr-heart-grey.svg'
-              : '/src/static/icon/fi-rr-heart.svg'
-          "
-          @click="toggleFavorite(song)"
-        ></image>
+    </view>
 
-        <image
-          v-else
-          style="width: 40rpx; height: 40rpx"
-          src="/src/static/icon/fi-rr-heart.svg"
-          @click="toggHeartCancel(song)"
-        ></image>
+    <!-- 播放列表 -->
+    <view class="playlist">
+      <view v-for="(song, index) in songs" :key="index" class="playlist-item">
+        <view class="album-cover">
+          <view class="cover-inner">
+            <image
+              style="width: 100rpx; height: 100rpx"
+              src="/src/static/icon/fi-rr-big-play.svg"
+            ></image>
+          </view>
+        </view>
+        <view class="song-details" @click="playFavoriteBtn(song, index)">
+          <text class="song-name">{{ song.name }}</text>
+        </view>
+        <view class="song-controls">
+          <text>{{ song.duration }}</text>
+          <image
+            style="width: 40rpx; height: 40rpx"
+            v-if="type === 0"
+            :src="
+              song.favorite
+                ? '/src/static/icon/fi-rr-heart-grey.svg'
+                : '/src/static/icon/fi-rr-heart.svg'
+            "
+            @click="toggleFavorite(song)"
+          ></image>
+
+          <image
+            v-else
+            style="width: 40rpx; height: 40rpx"
+            src="/src/static/icon/fi-rr-heart.svg"
+            @click="toggHeartCancel(song)"
+          ></image>
+        </view>
       </view>
     </view>
   </view>
@@ -97,11 +88,10 @@
 
 <script setup>
   import { ref } from 'vue'
-  import musicPlayback from './musicPlayback.vue'
+
   const props = defineProps({
     type: {
       type: Number,
-      // eslint-disable-next-line vue/require-valid-default-prop
       default: true,
     },
   })
@@ -195,7 +185,7 @@
     color: #6b7280;
     cursor: pointer;
   }
-  /* 播发 */
+  /* 播放 */
   .currently-playing {
     display: flex;
     align-items: center;
@@ -261,4 +251,12 @@
     font-weight: 400;
     color: var(--999, #999);
   }
+  .imgIcon {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  .palyIcon {
+    width: 28rpx;
+    height: 28rpx;
+  }
 </style>

src/pages/music/music.vue

@@ -7,7 +7,6 @@
   },
 }
 </route>
-<script setup lang="ts"></script>
 <template>
   <view>
     <view class="music-search">
@@ -53,7 +52,7 @@
     width: 100%;
   }
   .music-recommend {
-    padding: 32rpx;
+    padding: 16rpx 32rpx 32rpx 32rpx;
     overflow: auto;
   }
 </style>

src/pages/myUser/component/babyInformation.vue

@@ -14,16 +14,19 @@
       title="宝宝信息"
       @deleteBaby="deleteBaby"
     ></headerTitle>
-    <headerTitle v-else title="宝宝信息" @deleteBaby="deleteBaby"></headerTitle>
+    <headerTitle v-else title="宝宝信息"></headerTitle>
 
     <view class="avatar-wrapper">
+      <!-- 头像 -->
       <view class="card-container" @click="photoBtn">
         <view class="info-profile"><image :src="camera" /></view>
-        <view class="info-camera"><image src="/src/static/icon/camera.svg" /></view>
+        <view class="info-camera">
+          <!-- <image src="/src/static/icon/camera.svg" /> -->
+        </view>
       </view>
       <view class="card-item">
         <!-- 昵称 -->
-        <view class="section" @click="nicknameBtn">
+        <view class="section">
           <view class="section-left">
             <view class="label">宝宝昵称</view>
             <view class="nickname">
@@ -38,7 +41,7 @@
               :columns="columns"
               v-model:value="genderValue"
               title="性别"
-              @confirm="handleConfirm"
+              @confirm="handleGenderBtn"
             />
           </template>
         </ItemForm>
@@ -56,7 +59,7 @@
               :columns="columnsBlood"
               title="血型"
               v-model:value="bloodValue"
-              @confirm="handleConfirm"
+              @confirm="handleBloodBtn"
             />
           </template>
         </ItemForm>
@@ -66,7 +69,7 @@
       <wd-button @click="addBaby">保存</wd-button>
     </view>
     <view class="baby-Bottom" v-else>
-      <wd-button @click="addBaby">开始育人</wd-button>
+      <wd-button @click="startBtn">开始育人</wd-button>
     </view>
     <wd-message-box />
   </view>
@@ -78,6 +81,8 @@
   import ItemForm from './item-form.vue'
   import pickerUser from './pickerUser.vue'
   import { formateDate } from '../../../utils/times'
+  import { useMessage } from 'wot-design-uni'
+  const message = useMessage()
   const queryList = ref({}) // 宝宝信息
   const columns = ref(['男', '女', '保密'])
   const columnsBlood = ref(['A型', 'B型', 'AB型', 'O型'])
@@ -87,23 +92,68 @@
   const datetimeValue = ref('') // 生日
 
   const camera = 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg'
+
   // 删除
-  const deleteBaby = () => {}
-  const handleConfirm = () => {
-    console.log(genderValue.value)
+  const deleteBaby = () => {
+    message
+      .confirm({
+        msg: '确定删除宝宝信息吗？',
+        cancelButtonProps: {
+          customClass: 'custom-one',
+        },
+        confirmButtonProps: {
+          customClass: 'custom-two',
+        },
+      })
+      .then(() => {
+        console.log('点击了确定按钮')
+      })
+      .catch(() => {
+        console.log('点击了取消按钮')
+      })
   }
-  const nicknameBtn = () => {}
+
+  // 换头像
   const photoBtn = () => {
-    console.log('换头像')
+    uni.chooseImage({
+      count: 1, // 最多选择1张
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: (res) => {
+        console.log(res)
+      },
+      fail: (err) => {
+        console.error(err)
+      },
+    })
   }
-  // 开始育人
-  const addBaby = () => {
-    console.log('开始育人')
+
+  // 性别
+  const handleGenderBtn = () => {
+    console.log(genderValue.value)
   }
+
+  // 血型
+  const handleBloodBtn = () => {
+    console.log(11)
+  }
+
+  // 生日
   const handleTimes = ({ value }) => {
     formateDate(value)
     console.log(formateDate(value), 'formattedDateformattedDate')
   }
+
+  // 保存数据
+  const addBaby = () => {
+    console.log('保存数据')
+  }
+
+  // 开始育人
+  const startBtn = () => {
+    console.log('开始育人')
+  }
+
   // 计算属性判断 queryList 是否为空
   const isQueryListEmpty = computed(() => Object.keys(queryList.value).length === 0)
   onLoad((query) => {
@@ -123,7 +173,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 320rpx;
+    height: 240rpx;
     padding-top: 32rpx;
     background: #fff;
   }
@@ -137,8 +187,8 @@
   }
   .info-camera {
     position: absolute;
-    top: 240rpx;
-    left: 410rpx;
+    top: 204rpx;
+    left: 400rpx;
     background: #f88842;
     border-radius: 50%;
     image {
@@ -152,7 +202,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 32rpx 32rpx 0px 32rpx;
+      padding: 12rpx 32rpx 32rpx 32rpx;
       border-bottom: 1px solid #f1f5f9;
     }
     .section-left {
@@ -187,4 +237,20 @@
   ::v-deep .wd-picker__cell {
     padding: 12rpx 0px;
   }
+  ::v-deep .wd-button {
+    gap: 10px;
+    flex: 1 0 0;
+  }
+  ::v-deep .wd-message-box__actions {
+    .custom-one {
+      color: #000 !important;
+      border: none;
+      background: #fff !important;
+    }
+    .custom-two {
+      color: #fb4848 !important;
+      border: none;
+      background: #fff !important;
+    }
+  }
 </style>

src/pages/myUser/component/headerTitle.vue

@@ -7,6 +7,9 @@
     <view class="header-delete" v-if="isShow" @click="handleDelete">
       <image class="w-[40rpx] h-[40rpx]" src="/src/static/icon/fi-rr-trash.svg"></image>
     </view>
+    <view class="header-delete" v-else>
+      <image class="w-[40rpx] h-[40rpx]"></image>
+    </view>
   </view>
 </template>
 

src/pages/myUser/component/messageCenter.vue

@@ -14,7 +14,10 @@
         <view class="message-time">13:00</view>
         <view class="message-card">
           <view class="message-title">新增关注</view>
-          <view class="message-text">老天爷爷等 (+86 13648597563) 关注宝宝了！</view>
+          <view class="message-text">
+            老天爷爷等 (+86 13648597563) 关注宝宝了！老天爷爷等 (+86 13648597563) 关注宝宝了！
+            老天爷爷等 (+86 13648597563) 关注宝宝了！老天爷爷等 (+86 13648597563) 关注宝宝了！
+          </view>
         </view>
       </view>
     </view>
@@ -55,13 +58,13 @@
   .message-title {
     display: flex;
     align-items: center;
-    height: 70rpx;
+    min-height: 70rpx;
     border-bottom: 2rpx solid #f2f2f2;
   }
 
   .message-text {
     display: flex;
     align-items: center;
-    height: 70rpx;
+    min-height: 70rpx;
   }
 </style>

src/pages/myUser/component/myBaby.vue

@@ -22,9 +22,9 @@
         <view class="baby-profile">
           <image style="width: 96rpx; height: 96rpx" :src="item.avatarUrl" />
         </view>
-        <view>
+        <view class="babyWarp">
           <view class="baby-font">{{ item.baby }}</view>
-          <text class="baby-year">{{ item.year }}</text>
+          <view class="baby-year">{{ item.year }}</view>
         </view>
       </view>
     </view>
@@ -88,27 +88,35 @@
     overflow: hidden;
     border-radius: 50%;
   }
-  .baby-font {
-    font-size: 28rpx;
-    font-weight: 600;
-    line-height: 44rpx;
-    color: #333;
-  }
-  .baby-year {
-    font-size: 24rpx;
-    line-height: 24rpx;
-    color: #666;
+  .babyWarp {
+    width: 100%;
+    height: 100%;
+    .baby-font {
+      display: flex;
+      align-items: flex-end;
+      font-size: 28rpx;
+      font-weight: 600;
+      height: 48rpx;
+      color: #333;
+    }
+    .baby-year {
+      display: flex;
+      align-items: flex-end;
+      height: 48rpx;
+      font-size: 24rpx;
+      color: #666;
+    }
   }
 
   .baby-Bottom {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
     height: 128rpx;
+    padding: 16rpx 32rpx;
   }
   ::v-deep .wd-button {
-    background: #ffac78;
-    border-radius: 160rpx;
+    gap: 10px;
+    flex: 1 0 0;
   }
 </style>

src/pages/myUser/component/setFocus.vue

@@ -30,18 +30,37 @@
     <view class="baby-Bottom">
       <wd-button @click="logOutBnt">退出登录</wd-button>
     </view>
+    <wd-message-box />
   </view>
 </template>
 
 <script setup>
   import { ref } from 'vue'
   import headerTitle from './headerTitle.vue'
+  import { useMessage } from 'wot-design-uni'
   const phoneValue = ref('')
+  const message = useMessage()
+
   const cleanBtn = () => {
     console.log('清楚缓存')
   }
-  const logOutBnt = () => {
-    console.log('退出登录')
+  function logOutBnt() {
+    message
+      .confirm({
+        msg: '是否退出登录？',
+        cancelButtonProps: {
+          customClass: 'custom-one',
+        },
+        confirmButtonProps: {
+          customClass: 'custom-two',
+        },
+      })
+      .then(() => {
+        console.log('点击了确定按钮')
+      })
+      .catch(() => {
+        console.log('点击了取消按钮')
+      })
   }
 </script>
 
@@ -82,4 +101,21 @@
     height: 128rpx;
     padding: 16rpx 32rpx;
   }
+  ::v-deep .wd-button {
+    gap: 10px;
+    flex: 1 0 0;
+    color: #fb4848 !important;
+    background: #fff !important;
+    border: 2rpx solid #fb4848;
+  }
+  ::v-deep .wd-message-box__actions {
+    .custom-one {
+      color: #000 !important;
+      border: none;
+    }
+    .custom-two {
+      color: #fb4848 !important;
+      border: none;
+    }
+  }
 </style>

src/pages/person/person.vue

@@ -1,11 +0,0 @@
-<route lang="json5">
-{
-  layout: 'tabbar',
-  style: {
-    navigationBarTitleText: '%tabbar.person%',
-  },
-}
-</route>
-<template>
-  <view>个人中心</view>
-</template>