Kaynağa Gözat

优化:调整一些页面布局

haiyang 1 hafta önce
ebeveyn
işleme
1ce42f6766

+ 2 - 1
src/components/mescroll.vue

@@ -35,7 +35,8 @@
 
                     <!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现) -->
                     <!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
-                    <view v-if="mescroll.optUp.use && !isDownLoading && upLoadType !== 3" class="mescroll-upwarp"
+                    <view v-if="mescroll.optUp.use && !isDownLoading && !isShowEmpty && upLoadType !== 3"
+                        class="mescroll-upwarp"
                         :style="{ background: mescroll.optUp.bgColor, color: mescroll.optUp.textColor }">
                         <!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
                         <!-- <view v-show="upLoadType === 1">

+ 27 - 18
src/pages-A/sharePage/index.vue

@@ -453,23 +453,6 @@ function drawCouponDescription(ctx, width, height, scale) {
     ctx.font = `${28 * scale}px sans-serif`
     ctx.textAlign = 'center'
 
-    const relatedType = couponDetail.value.relatedType
-    const relatedName = getLastPartAfterSlash(couponDetail.value.relatedName)
-    if (relatedType === '1') {
-        ctx.fillText(`限${relatedName}分类商品使用`, width / 2, 280 * scale)
-    }
-    else {
-        ctx.fillText(`限${relatedName}商品使用`, width / 2, 280 * scale)
-    }
-
-    // 添加分隔线
-    ctx.strokeStyle = '#E9ECEF'
-    ctx.lineWidth = 2 * scale
-    ctx.beginPath()
-    ctx.moveTo(40 * scale, 300 * scale)
-    ctx.lineTo(width - 40 * scale, 300 * scale)
-    ctx.stroke()
-
     // 文本自动换行辅助函数
     const drawWrappedText = (text, fontSize, yPosition, color) => {
         ctx.font = `${fontSize * scale}px sans-serif`
@@ -502,13 +485,38 @@ function drawCouponDescription(ctx, width, height, scale) {
         return currentY + lineHeight // 返回下一行的y坐标
     }
 
+    const relatedType = couponDetail.value.relatedType
+    const relatedName = getLastPartAfterSlash(couponDetail.value.relatedName)
+    let descriptionText = ''
+
+    if (relatedType === '1') {
+        descriptionText = `限${relatedName}分类商品使用`
+    }
+    else {
+        descriptionText = `限${relatedName}商品使用`
+    }
+
+    // 使用自动换行函数绘制
+    const fontSize = 28
+    const lineHeight = fontSize * 1.5 * scale
+    const nextLineY = drawWrappedText(descriptionText, fontSize, 260 * scale, '#333333')
+
+    // 添加分隔线 - 根据文本高度调整分隔线位置
+    // 减lineHeight是因为nextLineY返回的是下一行的位置
+    ctx.strokeStyle = '#E9ECEF'
+    ctx.lineWidth = 2 * scale
+    ctx.beginPath()
+    ctx.moveTo(40 * scale, nextLineY - lineHeight + 10 * scale) // 调整分隔线位置
+    ctx.lineTo(width - 40 * scale, nextLineY - lineHeight + 10 * scale)
+    ctx.stroke()
+
     // 有效期
     // ctx.fillStyle = '#FF6B35'
     // ctx.font = `${20 * scale}px sans-serif`
     // ctx.textAlign = 'center'
 
     // 有效期
-    let currentY = 340 * scale
+    let currentY = 350 * scale
     const validityType = couponDetail.value.validityType
     let validityText = ''
 
@@ -788,6 +796,7 @@ async function handleSaveImage() {
             title: '保存成功',
             icon: 'success',
         })
+        await markSuccess(shareRecordId.value)
     }
     catch (error) {
         uni.hideLoading()

+ 24 - 19
src/pages/income/income.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { usePagination, useRequest } from 'alova/client'
 import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { getAccountCount } from '@/api/home'
 import { getCouponIssuerAccountByPageMap } from '@/api/income'
 import IncomeItem from '@/components/IncomeItem.vue'
 import MescrollUni from '@/components/mescroll.vue'
-import MescrollEmpty from '@/custom-components/custom-mescroll/components/mescroll-empty.vue'
 import { useShare } from '@/hooks/useShare'
 import { useUserStore } from '@/store'
 import { useTokenStore } from '@/store/token'
@@ -73,11 +72,20 @@ const { send, data: incomeData, pageCount, loading, page, pageSize, isLastPage,
     immediate: false,
 })
 
+watch(() => incomeData.value, (newVal) => {
+    if (newVal.length === 0 && !loading.value) {
+        mescroll.showEmpty()
+    }
+    else {
+        mescroll.removeEmpty()
+    }
+})
+
 // ============ mescroll 配置 ============
 const downOption = reactive({
     use: true,
     auto: false,
-    bgColor: '#f8f8fa',
+    bgColor: '#ffffff',
     textColor: '#666',
     textInOffset: '下拉刷新',
     textOutOffset: '释放刷新',
@@ -95,7 +103,13 @@ const upOption = reactive({
         size: pageSize.value,
     },
     empty: {
-        use: false,
+        use: true,
+        tip: '暂无数据',
+        btnText: '刷新试试',
+        icon: '/static/images/mescroll-empty.png',
+        fixed: false,
+        top: '200rpx',
+        zIndex: 1,
     },
     textNoMore: '--- 已经到底了 ---',
     toTop: {
@@ -110,15 +124,6 @@ const upOption = reactive({
     }
 })
 
-const emptyOption = reactive({
-    use: true,
-    tip: '暂无数据',
-    btnText: '刷新试试',
-    icon: '/static/images/mescroll-empty.png',
-    fixed: false,
-    top: '200rpx',
-})
-
 function mescrollInit(ref) {
     mescroll = ref
 }
@@ -226,8 +231,7 @@ function goPage(page: string) {
 </script>
 
 <template>
-    <view class="profile-container"
-        :style="{ minHeight: `calc(100vh - ${safeAreaInsets.top}px - ${safeAreaInsets.bottom}px - 100rpx)` }">
+    <view class="profile-container" :style="{ minHeight: `calc(100vh - 100rpx)` }">
         <!-- <up-pull-refresh :refreshing="refreshing" :threshold="60" @refresh="onRefresh"> -->
         <!-- 顶部区域 -->
         <view class="income-header"
@@ -313,12 +317,11 @@ function goPage(page: string) {
             </view>
             <view class="income-menu-list">
                 <mescroll-uni id="mescrollContainer" :down="downOption" :up="upOption" :fixed="false"
-                    @init="mescrollInit" @down="downCallback" @up="upCallback">
+                    :is-show-empty="true" @init="mescrollInit" @down="downCallback" @up="upCallback"
+                    @emptyclick="reload">
                     <view v-for="item in incomeData" :key="item.userId" class="income-content-item">
                         <income-item :data="item" :type="activeIndex" />
                     </view>
-                    <mescroll-empty v-if="incomeData.length === 0 && !loading" icon="'none'" tip="暂无数据"
-                        :option="emptyOption" @emptyclick="reload" />
                     <!-- 滚动区域内的loading遮罩 -->
                     <view v-if="showLoading && loading" class="loading-mask">
                         <view class="loading-spinner" />
@@ -469,6 +472,7 @@ function goPage(page: string) {
         border-radius: 10rpx 10rpx 0rpx 0rpx;
         margin-left: 24rpx;
         margin-right: 23rpx;
+        margin-bottom: 20rpx;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -552,13 +556,14 @@ function goPage(page: string) {
 
         .income-menu-list {
             background: #ffffff;
-            flex: 1;
+            // flex: 1;
             display: flex;
             flex-direction: column;
             position: relative;
 
             #mescrollContainer {
                 height: 100%;
+                flex: 1;
             }
 
             .income-content-item {