会员福利页面样式调整

pages.json

@@ -18,7 +18,8 @@
 		{
 			"path": "pages/index/welfare",
 			"style": {
-				"navigationBarTitleText": "会员福利"
+				"navigationBarTitleText": "会员福利",
+				"navigationStyle": "custom" 
 			}
 		},
 		{

pages/index/welfare.vue

@@ -1,109 +1,84 @@
 <template>
-  <layout-page>
-		<view class="box defaultBgc">
-      <scroll-view class="scrollBox" scroll-y="true">
-        <view class="content">
-          <!-- 钱包 -->
-          <view class="wallet">
-            <view class="wallet-content">
-              <view class="wallet-content-member">
-                <view class="iconBox">
-                  <view class="iconBox-line">
-                    <uni-icons type="vip-filled" size="20" color="#ffbc00"></uni-icons>
+  <view>
+    <Navbar title="会员福利" />
+    <layout-page style="position: relative;">
+      <view class="commonBackground" style="height: 160px; position: inherit; top: 0;"></view>
+      <view class="box defaultBgc" style="margin-top: -160px;">
+        <scroll-view class="scrollBox" scroll-y="true">
+          <view class="content">
+            <!-- 钱包 -->
+            <view class="wallet">
+              <view class="wallet-content">
+                <view class="wallet-content-member">
+                  <view class="name">
+                    <view v-if="useUserStore.isLogin" style="position: relative;">
+                      <image class="enterAvatar"
+                        :src="getUserAvatar(useUserStore?.baseInfo?.avatar,  useUserStore?.baseInfo?.sex)"
+                      ></image>
+                      <view class="avatar-tips">我</view>
+                    </view>
+                    <text v-else class="MiSans-Semibold default-text-color" style="font-size: 38rpx;" @tap="handleLogin">点击登录</text>
                   </view>
                 </view>
-                <view class="name">
-                  <text v-if="useUserStore.isLogin" @tap="toInfo" class="active">
-                    {{ useUserStore?.baseInfo?.name || useUserStore?.userInfo?.phone }}
-                  </text>
-                  <text v-else @tap="handleLogin">点击登录</text>
+                <view class="wallet-content-integral wallet-content-item" @tap="handleTo('integral')">
+                  <text class="MiSans-Semibold" style="font-size: 40rpx;">{{ balance.point || 0 }}</text>
+                  <text class="title MiSans-Normal">积分</text>
                 </view>
+                <view class="septal-line"></view>
+                <view class="wallet-content-cash wallet-content-item" @tap="handleTo('balance')">
+                  <text class="MiSans-Semibold" style="font-size: 40rpx;">{{ balance.balance > 0 ? (balance?.balance / 100.0).toFixed(2) : 0 }}</text>
+                  <text class="title MiSans-Normal">余额</text>
                 </view>
-              <view class="wallet-content-integral wallet-content-item" @tap="handleTo('integral')">
-                <text>{{ balance.point || 0 }}</text>
-                <text class="title">积分</text>
-              </view>
-              <view class="wallet-content-cash wallet-content-item" @tap="handleTo('balance')">
-                <text>{{ balance.balance > 0 ? (balance?.balance / 100.0).toFixed(2) : 0 }}</text>
-                <text class="title">余额</text>
               </view>
             </view>
-          </view>
-          <!-- 签到 -->
-          <!-- <view class="signIn">
-            <view class="signIn-content">
-              <view class="signIn-content-items">
-                <view class="item" v-for="(sign, i) in SignItems" :key="sign.day">
-                  <view class="box" :class="{ active: i < continuousDay }">
-                    <uni-icons type="vip" size="30" color="#ffbc00" style="text-align: center;"></uni-icons>
-                    <text class="text">+{{ sign.point }}</text>
-                  </view>
-                  <view class="day">
-                    <text>{{ i === todayNumber ? '今' : '第' + sign.day }}天</text>
-                  </view>
+
+            <!-- 积分规则 -->
+            <view class="points">
+              <view class="MiSans-Semibold default-text-color" style="font-size: 30rpx; margin-bottom: 30rpx;">积分规则</view>
+              <view v-for="(k, i) in integralRules" :key="i" class="points-item list-item-bgc default-border">
+                <view class="d-flex align-center">
+                  <image class="icon-img" src="https://minio.menduner.com/dev/112bdf67dea1505a8d063f22b560a21891631dc7294526488d7f82009d716229.png"></image>
+                  <text class="points-item-text">{{ k.title }}</text>
+                </view>
+                <view class="points-item-text color-primary">
+                  {{ k.point }}（{{ k.complete ? '已完成' : '未完成' }}）
                 </view>
-              </view>
-              <view class="tips">
-                <button
-                  :disabled="todaySignIn"
-                  :class="{ disabled: todaySignIn }"
-                  @tap="handleSignIn"
-                >
-                  {{ todaySignIn ? '已签到' : '签到'}}
-                </button>
               </view>
             </view>
-          </view> -->
-          <!-- 积分规则、积分兑换 -->
-          <view class="ss-m-t-20">
-            <uni-section title="积分规则" type="line"  style="background-color: #fff;">
-              <uni-list>
-                <uni-list-item v-for="(k, i) in integralRules" :key="i" :showArrow="false">
-                  <template v-slot:header>
-                    <text class="ss-m-t-10">{{ k.title }}</text>
-                  </template>
-                  <template v-slot:footer>
-                    <view class="d-flex align-center" style="width: 130px; text-align: start; position: relative;">
-                      <image src="/static/svg/integral.svg" style="width: 30px; height: 30px;"></image>
-                      <view class="color-primary ss-m-l-10">{{ k.point }}</view>
-                      <uni-tag :inverted="true" :text="k.complete ? '已完成' : '未完成'" :type="k.complete ? 'success' : 'error'" style="position: absolute; right: 0;" />
-                    </view>
-                  </template>
-                </uni-list-item>
-              </uni-list>
-            </uni-section>
-            <view class="ss-m-t-20">
-              <uni-section title="积分兑换" type="line" style="background-color: #fff;">
-                <view class="goods" >
-                  <view class="goods-item" v-for="(item,index) in goodsList" :key="index" @tap.stop="handleClickGoods">
-                    <image :src="item.url" class="goods-item-img" mode="widthFix"></image>
-                    <view class="goods-item-name">{{ item.name }}</view>
-                    <view>消耗积分<text class="goods-item-price">{{ item.point }}</text></view>
+
+            <!-- 积分兑换 -->
+            <view class="goods">
+              <view class="MiSans-Semibold default-text-color" style="font-size: 30rpx; margin-bottom: 30rpx;">积分兑换</view>
+              <view class="goods-box">
+                <view class="goods-box-item list-item-bgc default-border" v-for="(item,index) in goodsList" :key="index" @tap.stop="handleClickGoods">
+                  <image :src="item.url" class="goods-box-item-img" mode="widthFix"></image>
+                  <view class="goods-box-item-name">{{ item.name }}</view>
+                  <view style="padding: 0 30rpx 20rpx 30rpx;">
+                    <text class="MiSans-Normal color-666" style="font-size: 24rpx">消费积分</text>
+                    <text class="goods-box-item-price">{{ item.point }}</text>
                   </view>
                 </view>
-              </uni-section>
+              </view>
             </view>
           </view>
-        </view>
-      </scroll-view>
-		</view>
-
-    <uni-popup ref="inputDialog" type="dialog">
-      <view class="shareQrCodePopupContent">
-        <view class="ss-m-b-10">请前往网页版门墩儿商城兑换</view>
-        <uni-link href="https://www.menduner.com/mall" text="点击复制网页地址" color="#00B760" fontSize="16" copyTips="已复制，请在电脑端打开"></uni-link>
+        </scroll-view>
       </view>
-    </uni-popup>
-	</layout-page>
+
+      <uni-popup ref="inputDialog" type="dialog">
+        <view class="shareQrCodePopupContent">
+          <view class="ss-m-b-10 MiSans-Normal">请前往网页版门墩儿商城兑换</view>
+          <uni-link class="MiSans-Normal" href="https://www.menduner.com/mall" text="点击复制网页地址" color="#00B760" fontSize="16" copyTips="已复制，请在电脑端打开"></uni-link>
+        </view>
+      </uni-popup>
+    </layout-page>
+  </view>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue'
 import layoutPage from '@/layout'
+import Navbar from '@/components/Navbar'
 import {
-	// getRewardSignInConfigList,
-	// getRewardSignInRecordSummary,
-  // createRewardSignInRecord,
   getAccountBalance,
   getUserAccount,
 } from '@/api/sign'
@@ -112,12 +87,11 @@ import { onShow, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/un
 import { userStore } from '@/store/user'
 import { showAuthModal } from '@/hooks/useModal'
 import { showNecessaryInfoPopup } from '@/utils/request'
+import { getUserAvatar } from '@/utils/avatar'
 
 const inputDialog = ref()
 const useUserStore = userStore()
-// 设置自定义tabBar选中值
 
-// const SignItems = ref([])
 // 积分规则
 const integralRules = ref([])
 const getTask = async () => {
@@ -155,21 +129,9 @@ onLoad(() => {
 })
 
 const handleClickGoods = () => {
-  // uni.showToast({
-  //   icon: 'none',
-  //   title: '请前往网页版门墩儿商城兑换'
-  // })
   inputDialog.value.open()
 }
 
-// 连续签到天数
-// const continuousDay = ref(0)
-// 今天有无签到
-// const todaySignIn = ref(false)
-
-// 今天
-// const todayNumber = ref()
-
 const balance = ref({})
 
 watch([() => useUserStore.refreshToken, () => useUserStore.isLogin], () => {
@@ -188,10 +150,6 @@ onShow(() => {
 })
 
 function init () {
-  // 获取签到列表
-  // getSignIn()
-  // 获取签到信息
-  // getSummary()
   // 获取余额积分
   getBalance()
   // 获取积分规则列表
@@ -208,54 +166,6 @@ async function getBalance() {
   }
 }
 
-
-// 获取个人签到统计
-// async function getSummary() {
-//   const { data } = await getRewardSignInRecordSummary()
-//   if (!data) return
-//   continuousDay.value = data.continuousDay // 连续签到第n天
-//   todaySignIn.value = data.todaySignIn // 今天有无签到
-//   todayNumber.value = todaySignIn.value ? continuousDay.value - 1 : continuousDay.value
-// }
-// 获取签到列表
-// async function getSignIn () {
-//   try {
-//     const { data } = await getRewardSignInConfigList()
-//     SignItems.value = data
-//   } catch (error) {
-    
-//   }
-// }
-// 签到
-// async function handleSignIn () {
-//   uni.showLoading({
-//     title: '正在签到'
-//   })
-//   try {
-//     const { code } = await createRewardSignInRecord()
-//     if (code !== 0) {
-//       return
-//     }
-//     setTimeout(async () => {
-//       const { code: _code } = await getSummary()
-//       if (_code !== 0) {
-//         return
-//       }
-//       uni.showToast({
-//         title: '签到成功',
-//         icon: 'success',
-//         mask: true
-//       })
-//       // 更新积分
-//       getBalance()
-//     }, 1000)
-//   } catch (error) {
-    
-//   } finally {
-//     uni.hideLoading()
-//   }
-// }
-
 function handleLogin () {
   if (!useUserStore.isLogin) {
 		showAuthModal()
@@ -289,12 +199,37 @@ function handleTo (page) {
 </script>
 
 <style scoped lang="scss">
+.enterAvatar {
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 50%;
+	margin: 0 auto;
+}
+.avatar-tips {
+  position: absolute;
+  bottom: 3rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60rpx;
+  height: 38rpx;
+  line-height: 38rpx;
+  color: #fff;
+  text-align: center;
+  font-family: MiSans-Medium;
+  background-color: #00B760;
+  border-radius: 20rpx;
+}
+.septal-line {
+  height: 60rpx;
+  border-left: 3px dashed #DDDDDD;
+}
 .shareQrCodePopupContent {
 	width: 75vw;
 	padding: 40rpx;
 	margin-bottom: 20rpx;
 	text-align: center;
 	background-color: #fff;
+  border-radius: 20rpx;
 }
 .box {
   overflow: hidden;
@@ -313,50 +248,20 @@ function handleTo (page) {
   }
   .wallet {
     box-sizing: border-box;
-    height: 200rpx;
-    margin-bottom: 20rpx;
     &-content {
       display: flex;
       height: 100%;
       border-radius: 10rpx;
-      background: #FFF;
+      align-items: center;
       
       &-member {
-        width: 50%;
-        display: flex;
-        align-items: center;
-        position: relative;
-        &:after {
-          content: '';
-          position: absolute;
-          width: 4rpx;
-          height: 30%;
-          right: 0;
-          top: 35%;
-          background: #00B760;
-        }
-        .iconBox {
-          width: 100rpx;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          &-line {
-            border: 4rpx solid #ffbc00;
-            border-radius: 180rpx;
-            padding: 10rpx;
-          }
-        }
+        width: 20%;
         .name {
-          flex: 1;
-          .actvie {
-            color: #ffbc00;
-          }
-          
+          margin-left: 50rpx;
         }
       }
       &-item {
-        width: 25%;
+        width: 40%;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -365,119 +270,76 @@ function handleTo (page) {
           font-size: .85em;
         }
       }
-      &-integral {
+    }
+  }
+  .points {
+    height: 282rpx;
+    margin: 30rpx;
+    padding: 30rpx;
+    background-color: #fff;
+    border-radius: 20rpx;
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 90rpx;
+      line-height: 90rpx;
+      border-radius: 20rpx;
+      padding: 0 20rpx;
+      margin-bottom: 20rpx;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &-text {
+        font-family: MiSans-Medium;
+        font-size: 28rpx;
       }
-      &-cash {
-        
+      .icon-img {
+        width: 50rpx;
+        height: 50rpx;
+        margin-right: 20rpx;
       }
     }
   }
-  .signIn {
-    // padding: 0 20rpx;
-    box-sizing: border-box;
-    &-content {
-      border-radius: 10rpx;
-      background: #FFF;
-      &-items {
-        padding: 20rpx 20rpx;
-        display: flex;
-        height: 220rpx;
+  .goods {
+    padding: 30rpx;
+    margin: 0 30rpx 30rpx 30rpx;
+    background-color: #fff;
+    border-radius: 20rpx;
+    .goods-box {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      &-item {
+        width: 48%;
+        margin: 10upx 0;
         box-sizing: border-box;
-        .item {
-          height: 140rpx;
-          width: 100%;
-          align-items: center;
-          justify-content: center;
-          padding: 0 10rpx;
-          .box {
-            height: 100%;
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            background: #f2f4f7;
-            border-radius: 10rpx;
-            &.active {
-              color: #fff;
-              background: rgba(16,137,123, .66);
-            }
-            .text {
-              font-size: .75em;
-              text-align: center;
-            }
-          }
-          .day {
-            margin-top: 10rpx;
-            height: 60rpx;
-            text-align: center;
-            font-size: .5em;
-          }
+        border-radius: 20rpx;
+        &-img {
+          width: 305rpx;
+          height: 305rpx;
+          display: block;
+          margin: auto;
+          border-radius: 20rpx 20rpx 0 0;
         }
-      }
-      .tips {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        height: 80rpx;
-        font-size: .75em;
-        color: #999;
-        &-light {
+        &-price {
           color: #00B760;
-          padding: 0 10rpx;
+          font-size: 26rpx;
+          font-family: MiSans-Semibold;
+          margin-left: 20rpx;
         }
-        button {
-          width: 180rpx;
-          height: 60rpx;
-          font-size: 24rpx;
-          margin: 0 10rpx;
-          border: unset;
-          background-color: #00B760;
-          color: #FFF;
-          &.disabled {
-            // background-color: #a7a7a7 !important;
-            opacity: .5;
-          }
+        &-name {
+          font-family: MiSans-Medium;
+          font-size: 26rpx;
+          padding: 20rpx 30rpx;
+          height: 65rpx;
+          overflow:hidden; 
+          text-overflow:ellipsis;
+          -webkit-box-orient:vertical;
+          -webkit-line-clamp:2; 
         }
       }
-      
     }
   }
-  .goods {
-    padding: 0 15upx;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-    &-item {
-      background: #FFFFFF;
-      width: 48%;
-      margin: 10upx 0;
-      box-sizing: border-box;
-      &-img {
-        width: 100%;
-        height: 250upx;
-        display: block;
-        margin: auto;
-      }
-      &-price {
-        padding-top: 10upx;
-        color: #00B760;
-        font-size: 32upx;
-      }
-      &-name {
-        width: 100%;
-        white-space: nowrap;
-        font-size: 28upx;
-        line-height: 50upx;
-        padding-bottom: 10upx;
-        padding-top: 10upx;
-        overflow:hidden; 
-        text-overflow:ellipsis;
-        -webkit-box-orient:vertical;
-        -webkit-line-clamp:2; 
-      }
-    }
-  }
-}
-:deep(.uni-section .uni-section-header__decoration) {
-  background-color: #00B760 !important;
 }
 </style>

utils/avatar.js

@@ -1,5 +1,6 @@
 const male = 'https://minio.citupro.com/dev/menduner/11.png'
 const female = 'https://minio.citupro.com/dev/menduner/7.png'
+const defaultAvatar = 'https://minio.menduner.com/dev/04af7f4a3b8bc90207ecae864b8a6e5bf72b4b3313886cb8cac3f78c82683691.png'
 
 // 根据性别返回默认头像
 // isChatSystem: 系统消息头像