feat(distribution): 实现分销员中心完整功能

- 新增分销业绩统计页面，包含时间范围筛选和自定义日期选择功能
- 重构分销认证页面，改为跳转至招募页面申请分销员身份
- 添加分销商品访问记录功能，支持分享追踪和佣金计算
- 更新分销历史记录页面，优化数据结构和显示字段
- 完全重写分销员首页，包含用户信息、收益统计、等级系统等功能

pages/mine/distribution/list.vue

@@ -1,496 +1,402 @@
 <template>
-  <view class="wrapper">
-    <!-- 筛选弹出层 TODO后续版本更新 -->
-    <!-- <u-popup width="90%" v-model:show="popup" mode="right">
-      <view class="screen-title">商品筛选</view>
-
-      <view class="screen-view">
-        <view class="screen-item">
-          <h4>价格区间</h4>
-          <view class="flex">
-            <u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最低价"></u-input>
-            <view class="line"></view>
-            <u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最高价"></u-input>
-          </view>
-        </view>
-        <view class="screen-item">
-          <h4>销量</h4>
-          <view class="flex">
-            <u-input class="u-bg w200 flex1" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="销量"></u-input>
-            <view class="flex1">笔以上</view>
-          </view>
-        </view>
-        <view class="screen-item">
-          <h4>收入比率</h4>
-          <view class="flex">
-            <u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最低%"></u-input>
-            <view class="line"></view>
-            <u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最高%"></u-input>
-          </view>
-        </view>
-        <view class="screen-item">
-          <h4>包邮</h4>
-          <view class="flex">
-            <u-tag class="u-tag" shape="circle" text="包邮" mode="plain" type="info" />
-          </view>
-        </view>
-        <view class="screen-item">
-          <h4>促销活动</h4>
-          <view class="flex">
-            <u-tag class="u-tag" shape="circle" text="限时抢购" mode="plain" type="info" />
-            <u-tag class="u-tag" shape="circle" text="拼团秒杀" mode="plain" type="info" />
-          </view>
-        </view>
-        <view class="screen-item">
-          <h4>经营类型</h4>
-          <view class="flex">
-            <u-tag class="u-tag" shape="circle" text="平台自营" mode="plain" type="info" />
-            <u-tag class="u-tag" shape="circle" text="三方店铺" mode="plain" type="info" />
-          </view>
-        </view>
-      </view>
-
-      <view class="screen-btn">
-        <view class="screen-clear"> 重置 </view>
-        <view class="screen-submit"> 确定 </view>
-      </view>
-    </u-popup> -->
-
-    <!-- 导航栏 -->
-    <view class="nav">
-      <view class="nav-item" @click="toggleGoodsTab(true)" :class="{ checked: queryParams.checked }">已选择</view>
-      <view class="nav-item" @click="toggleGoodsTab(false)" :class="{ checked: !queryParams.checked }">未选择</view>
-
-      <!-- <view class="nav-item" @click="popup = !popup">筛选</view> -->
-    </view>
-    <!-- 商品列表 -->
-
-    <view class="goods-list">
-      <scroll-view class="body-view" scroll-y @scrolltolower="loadMore">
-        <block v-for="(item, index) in goodsList" :key="item.id">
-          <u-swipe-action v-if="queryParams.checked" class="distribution-swipe">
-            <u-swipe-action-item
-              :show="item.___selected"
-              @open="openSwipeAction(item)"
-              :name="index"
-              :options="swipeOptions"
-              @click="confirmUnbindPrompt(item)"
-            >
-              <view class="goods-item">
-                <view class="goods-item-img" @click="navigateToGoods(item)">
-                  <u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
-                </view>
-                <view class="goods-item-desc">
-                  <view class="-item-title" @click="navigateToGoods(item)">
-                    {{ item.goodsName }}
-                  </view>
-                  <view class="-item-price" @click="navigateToGoods(item)">
-                    佣金:
-                    <span> ￥{{ unitPrice(item.commission) }}</span>
-                  </view>
-                  <view class="-item-bottom">
-                    <view class="-item-bootom-money" @click="navigateToGoods(item)">
-                      <view class="-item-yj">
-                        <span>￥{{ unitPrice(item.price) }}</span>
-                      </view>
-                    </view>
-                    <view>
-                      <view class="click" @click="shareDistributionGoods(item)">分销商品</view>
-                    </view>
-                  </view>
-                </view>
-              </view>
-            </u-swipe-action-item>
-          </u-swipe-action>
-
-          <view v-else class="goods-item">
-            <view class="goods-item-img" @click="navigateToGoods(item)">
-              <u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
-            </view>
-            <view class="goods-item-desc">
-              <view class="-item-title" @click="navigateToGoods(item)">
-                {{ item.goodsName }}
-              </view>
-              <view class="-item-price" @click="navigateToGoods(item)">
-                佣金:
-                <span> ￥{{ unitPrice(item.commission) }}</span>
-              </view>
-              <view class="-item-bottom">
-                <view class="-item-bootom-money" @click="navigateToGoods(item)">
-                  <view class="-item-yj">
-                    <span>￥{{ unitPrice(item.price) }}</span>
-                  </view>
-                </view>
-                <view>
-                  <view class="click" @click="selectGoods(item)">立即选取</view>
-                </view>
-              </view>
-            </view>
-          </view>
-        </block>
-      </scroll-view>
-
-
-      <view class="empty">
-        <!-- <u-empty v-if="empty" text="没有分销商品了" mode="list"></u-empty> -->
+  <view class="page">
+    <view class="search-bar">
+      <view class="search-inner">
+        <u-icon name="search" color="#bbb" size="18" />
+        <input
+          class="search-input"
+          v-model="keyword"
+          confirm-type="search"
+          placeholder="商品搜索: 请输入商品关键字"
+          placeholder-class="search-placeholder"
+          @confirm="onSearch"
+        />
       </view>
     </view>
-    <canvas class="canvas-hide" canvas-id="qrcode" />
-    <drawCanvas ref="drawCanvasRef" v-if="showPoster" :res="posterData" />
-    <u-modal
-      v-model:show="showUnbindModal"
-      :confirm-style="{ color: lightColor }"
-      @confirm="confirmUnbind"
-      show-cancel-button
-      :content="unbindModalContent"
-      :async-close="true"
-    ></u-modal>
 
+    <view class="sort-bar">
+      <view
+        v-for="item in sortTabs"
+        :key="item.field"
+        class="sort-item"
+        :class="{ active: sortField === item.field }"
+        @click="onSortTab(item.field)"
+      >
+        <text>{{ item.label }}</text>
+        <view class="sort-arrows">
+          <image
+            class="arrow-img"
+            :src="sortField === item.field && sortOrder === 'ASC' ? '/static/index/arrow-up-1.png' : '/static/index/arrow-up.png'"
+            mode="aspectFit"
+          />
+          <image
+            class="arrow-img"
+            :src="sortField === item.field && sortOrder === 'DESC' ? '/static/index/arrow-down-1.png' : '/static/index/arrow-down.png'"
+            mode="aspectFit"
+          />
+        </view>
+      </view>
+    </view>
+
+    <scroll-view
+      class="goods-scroll"
+      scroll-y
+      :lower-threshold="80"
+      @scrolltolower="loadMore"
+    >
+      <view v-if="loading && !goodsList.length" class="state-wrap">
+        <text class="state-text">加载中...</text>
+      </view>
+
+      <view v-else-if="!goodsList.length" class="state-wrap">
+        <text class="state-text">暂无推广商品</text>
+      </view>
+
+      <view v-else class="goods-list">
+        <view
+          v-for="item in goodsList"
+          :key="item.id"
+          class="goods-card"
+        >
+          <image
+            class="goods-image"
+            :src="item.thumbnail"
+            mode="aspectFill"
+            @click="goGoodsDetail(item)"
+          />
+          <view class="goods-body">
+            <view class="goods-name" @click="goGoodsDetail(item)">{{ item.goodsName }}</view>
+            <view class="goods-detail-row">
+              <view class="goods-info" @click="goGoodsDetail(item)">
+                <view class="goods-earn">赚 ¥{{ formatMoney(item.commission) }}</view>
+                <view class="goods-price">¥{{ formatMoney(item.price) }}</view>
+              </view>
+              <view class="share-btn" @click.stop="shareGoods(item)">立即分享</view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="goodsList.length" class="load-more">
+        <text>{{ finished ? '没有更多了' : (loadingMore ? '加载中...' : '上拉加载更多') }}</text>
+      </view>
+    </scroll-view>
   </view>
 </template>
+
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
-import { useStore } from '@/store'
-import {
-  distributionGoods,
-  checkedDistributionGoods,
-  getMpCode,
-} from '@/api/goods'
-import drawCanvas from '@/components/m-canvas'
-import { unitPrice } from '@/utils/filters.js'
+import { onLoad } from '@dcloudio/uni-app'
+import { distributionGoods, getDistributionGoodsSetting } from '@/api/distribution'
 
-const store = useStore()
-const lightColor = computed(() => store.getters.lightColor)
-const swipeOptions = computed(() => [
-  {
-    text: '解绑',
-    style: { backgroundColor: lightColor.value },
-  },
-])
+const DEFAULT_SORT_MAP: Record<string, { field: string; order: string }> = {
+  HIGHEST_COMMISSION: { field: 'COMMISSION', order: 'DESC' },
+  HIGHEST_PRICE: { field: 'PRICE', order: 'DESC' },
+  HIGHEST_SALES: { field: 'SALES', order: 'DESC' },
+  LATEST_LISTING: { field: 'LATEST', order: 'DESC' },
+}
+
+const sortTabs = [
+  { field: 'COMMISSION', label: '佣金' },
+  { field: 'LATEST', label: '最新' },
+  { field: 'SALES', label: '销量' },
+  { field: 'PRICE', label: '价格' },
+]
 
-const unbindModalContent = '解绑该商品？'
-const showPoster = ref(false)
-const showUnbindModal = ref(false)
 const routeQuery = ref<Record<string, string>>({})
-const selectedGoods = ref<any>(null)
-const drawCanvasRef = ref<any>(null)
+const keyword = ref('')
+const sortField = ref('COMMISSION')
+const sortOrder = ref<'ASC' | 'DESC'>('DESC')
+const goodsList = ref<any[]>([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const finished = ref(false)
 
 const queryParams = ref({
   pageNumber: 1,
   pageSize: 10,
-  checked: true,
+  goodsName: '',
+  sortField: 'COMMISSION',
+  sortOrder: 'DESC',
 })
-const goodsList = ref<any[]>([])
 
-const posterData = ref({
-  container: {
-    width: 600,
-    height: 960,
-    background: '#fff',
-    title: '分享背景',
-  },
-  bottom: {
-    img: '',
-    code: '',
-    price: 0,
-    desc: '',
-  },
-})
+const distributionId = computed(() => routeQuery.value.id || '')
 
 onLoad((options) => {
-  routeQuery.value = options || {}
+  routeQuery.value = (options || {}) as Record<string, string>
+  initPage()
 })
 
-onShow(() => {
-  goodsList.value = []
-  queryParams.value.pageNumber = 1
-  fetchGoodsList()
-})
-
-function confirmUnbindPrompt(item: any) {
-  showUnbindModal.value = true
-  selectedGoods.value = item
+async function initPage() {
+  await loadGoodsSetting()
+  resetAndFetch()
 }
 
-function confirmUnbind() {
-  checkedDistributionGoods({ id: selectedGoods.value.id, checked: false }).then((res) => {
-    if (res.data.success) {
-      uni.showToast({ title: '此商品解绑成功', duration: 2000 })
-      showUnbindModal.value = false
-      goodsList.value = []
-      queryParams.value.pageNumber = 1
-      fetchGoodsList()
+async function loadGoodsSetting() {
+  try {
+    const res = await getDistributionGoodsSetting()
+    if (res.data?.success && res.data.result) {
+      const setting = res.data.result
+      const mapped = DEFAULT_SORT_MAP[setting.defaultSort] || DEFAULT_SORT_MAP.HIGHEST_COMMISSION
+      sortField.value = mapped.field
+      sortOrder.value = mapped.order as 'ASC' | 'DESC'
+      queryParams.value.sortField = mapped.field
+      queryParams.value.sortOrder = mapped.order
     }
-  })
+  } catch (error) {
+    console.warn('load distribution goods setting failed', error)
+  }
 }
 
-function openSwipeAction(item: any) {
-  goodsList.value.forEach((row) => {
-    row.___selected = false
-  })
-  item.___selected = true
+function formatMoney(val: number | string) {
+  const num = Number(val || 0)
+  return num.toFixed(2)
 }
 
-function navigateToGoods(item: any) {
+function resetAndFetch() {
+  goodsList.value = []
+  finished.value = false
+  queryParams.value.pageNumber = 1
+  queryParams.value.goodsName = keyword.value.trim()
+  fetchGoodsList()
+}
+
+function onSearch() {
+  resetAndFetch()
+}
+
+function onSortTab(field: string) {
+  if (sortField.value === field) {
+    sortOrder.value = sortOrder.value === 'DESC' ? 'ASC' : 'DESC'
+  } else {
+    sortField.value = field
+    sortOrder.value = 'DESC'
+  }
+  queryParams.value.sortField = sortField.value
+  queryParams.value.sortOrder = sortOrder.value
+  resetAndFetch()
+}
+
+function fetchGoodsList() {
+  if (queryParams.value.pageNumber > 1) {
+    if (loadingMore.value || finished.value) return
+    loadingMore.value = true
+  } else {
+    loading.value = true
+  }
+
+  distributionGoods(queryParams.value)
+    .then((res) => {
+      const records = res.data?.result?.records || []
+      const total = Number(res.data?.result?.total || 0)
+      if (res.data?.success) {
+        goodsList.value.push(...records)
+        finished.value = goodsList.value.length >= total || records.length < queryParams.value.pageSize
+      }
+    })
+    .catch(() => {
+      if (!goodsList.value.length) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      }
+    })
+    .finally(() => {
+      loading.value = false
+      loadingMore.value = false
+    })
+}
+
+function loadMore() {
+  if (loading.value || loadingMore.value || finished.value) return
+  queryParams.value.pageNumber += 1
+  fetchGoodsList()
+}
+
+function goGoodsDetail(item: any) {
+  if (!item?.skuId || !item?.goodsId) return
   uni.navigateTo({
     url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
   })
 }
 
-async function shareDistributionGoods(goods: any) {
-  uni.showToast({ title: '请请按住保存图片', duration: 2000, icon: 'none' })
-  const page = 'pages/product/goods'
-  const scene = `${goods.skuId},${goods.goodsId},${routeQuery.value.id}`
-  const result = await getMpCode({ page, scene })
-  if (result.data.success) {
-    const callback = result.data.result
-    posterData.value.container.title = `${goods.goodsName}`
-    posterData.value.bottom.code = `data:image/png;base64,${callback}`
-    posterData.value.bottom.price = unitPrice(goods.price, '￥')
-    posterData.value.bottom.desc = `${goods.goodsName}`
-    posterData.value.bottom.img = `${goods.thumbnail}`
-    if (showPoster.value) {
-      drawCanvasRef.value?.init()
-    }
-    showPoster.value = true
-  } else {
-    uni.showToast({ title: '制作二维码失败！请稍后重试', duration: 2000, icon: 'none' })
+function shareGoods(item: any) {
+  const distId = distributionId.value
+  if (!item?.skuId || !item?.goodsId || !distId) {
+    uni.showToast({ title: '分享信息不完整', icon: 'none' })
+    return
   }
-}
-
-function toggleGoodsTab(isSelected: boolean) {
-  goodsList.value = []
-  queryParams.value.checked = isSelected
-  queryParams.value.pageNumber = 1
-  fetchGoodsList()
-}
-
-function selectGoods(item: any) {
-  checkedDistributionGoods({ id: item.id, checked: true }).then((res) => {
-    if (res.data.success) {
-      uni.showToast({ title: '已添加到我的选品库', duration: 2000, icon: 'none' })
-      setTimeout(() => {
-        goodsList.value = []
-        queryParams.value.pageNumber = 1
-        fetchGoodsList()
-      }, 500)
-    }
+  uni.navigateTo({
+    url: `/pages/mine/distribution/share?skuId=${item.skuId}&goodsId=${item.goodsId}&distributionId=${distId}`,
   })
 }
-
-function fetchGoodsList() {
-  distributionGoods(queryParams.value).then((res) => {
-    if (res.data.success && res.data.result.records.length >= 1) {
-      res.data.result.records.forEach((item: any) => {
-        item.___selected = false
-      })
-      goodsList.value.push(...res.data.result.records)
-    }
-  })
-}
-
-function loadMore() {
-  queryParams.value.pageNumber += 1
-  fetchGoodsList()
-}
 </script>
+
 <style lang="scss" scoped>
-
-.body-view {
-  overflow-y: auto;
-  height: calc(100vh - 44px - 80rpx - 104rpx);
-}
-.canvas-hide {
-  /* 1 */
-  position: fixed;
-  right: 100vw;
-  bottom: 100vh;
-  /* 2 */
-  z-index: -9999;
-  /* 3 */
-  opacity: 0;
-}
-.empty {
-  margin: 40rpx 0;
-}
-.checked {
-  color: $main-color;
-  font-weight: bold;
-}
-.screen-btn {
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
   display: flex;
-  width: 100%;
+  flex-direction: column;
+}
+
+.search-bar {
+  padding: 16rpx 24rpx;
+  background: #fff;
+}
+
+.search-inner {
+  display: flex;
+  align-items: center;
+  height: 72rpx;
+  padding: 0 24rpx;
+  border-radius: 36rpx;
+  background: #f5f5f5;
+}
+
+.search-input {
+  flex: 1;
+  margin-left: 12rpx;
+  font-size: 26rpx;
+  color: #333;
+}
+
+.search-placeholder {
+  color: #bbb;
+  font-size: 26rpx;
+}
+
+.sort-bar {
+  display: flex;
+  align-items: center;
   height: 88rpx;
-  line-height: 88rpx;
-  position: fixed;
-  bottom: 0;
-  > .screen-clear,
-  .screen-submit {
-    width: 50%;
-    text-align: center;
-  }
-  .screen-submit {
-    background: $main-color;
-    color: #fff;
+  background: #fff;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.sort-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  font-size: 28rpx;
+
+  &.active {
+    color: #ff6b35;
+    font-weight: 600;
   }
 }
-.screen-item {
-  margin-bottom: 40rpx;
+
+.sort-arrows {
+  display: flex;
+  flex-direction: column;
+  margin-left: 6rpx;
 }
-.flex1 {
-  padding-left: 10rpx;
+
+.arrow-img {
+  width: 14rpx;
+  height: 14rpx;
 }
-.u-tag {
-  margin-right: 20rpx;
+
+.goods-scroll {
+  flex: 1;
+  height: calc(100vh - 200rpx);
 }
-.line {
-  width: 40rpx;
-  height: 2rpx;
-  background: #999;
-  margin: 0 10rpx;
-}
-.u-bg {
-  background: #eff1f4;
-  border-radius: 0.4em;
-  font-size: 22rpx;
-}
-.screen-title {
-  height: 88rpx;
+
+.state-wrap {
+  padding: 120rpx 0;
   text-align: center;
-  font-size: 28upz;
-  line-height: 88rpx;
-  border-bottom: 1px solid #ededed;
-}
-.flex {
-  display: flex;
-  margin: 20rpx 0;
-  align-items: center;
-}
-.screen-view {
-  padding: 32rpx;
-}
-.bar {
-  padding: 0 20rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 88rpx;
-  width: 100%;
-  background: #fff;
-  z-index: 8;
-  > .bar-btn {
-    display: flex;
-  }
-}
-.nav {
-  background: #fff;
-  width: 100%;
-  display: flex;
-  height: 88rpx;
-  box-sizing: border-box;
-  border-top: 1px solid #ededed;
-  border-bottom: 1px solid #ededed;
-  > .nav-item {
-    line-height: 88rpx;
-    height: 88rpx;
-    flex: 1;
-    text-align: center;
-    position: relative;
-    color: #666;
-  }
-  > .nav-item.checked {
-    color: $main-color;
-    font-weight: bold;
-    &::after {
-      content: "";
-      position: absolute;
-      left: 50%;
-      bottom: 0;
-      transform: translateX(-50%);
-      width: 80rpx;
-      height: 4rpx;
-      background: $main-color;
-      border-radius: 2rpx;
-    }
-  }
 }
 
-.distribution-swipe,
-:deep(.u-swipe-action),
-:deep(.u-swipe-action-item),
-:deep(.u-swipe-action-item__content) {
-  width: 100%;
+.state-text {
+  color: #999;
+  font-size: 28rpx;
 }
 
-:deep(.u-swipe-action-item) {
-  overflow: hidden;
-}
-
-:deep(.u-swipe-action-item__content) {
-  overflow: hidden;
-}
-.click {
-  background: $main-color;
-  color: #fff;
-  margin: 0 4rpx;
-  font-size: 22rpx;
-  padding: 10rpx 20rpx;
-  border-radius: 100px;
-}
 .goods-list {
-  // #ifdef H5
-  height: calc(100vh - 176rpx);
-  // #endif
-  // #ifndef H5
-  height: calc(100vh - 88rpx);
-  // #endif
-  overflow: auto;
+  padding: 16rpx 0 24rpx;
 }
-.goods-item {
+
+.goods-card {
+  display: flex;
+  margin: 0 20rpx 20rpx;
+  padding: 22rpx;
   border-radius: 20rpx;
   background: #fff;
+}
+
+.goods-image {
+  flex-shrink: 0;
+  width: 176rpx;
+  height: 176rpx;
+  border-radius: 12rpx;
+  background: #f4f4f4;
+}
+
+.goods-body {
+  flex: 1;
+  min-width: 0;
+  padding-left: 16rpx;
   display: flex;
-  padding: 22rpx;
-  margin: 20rpx;
+  flex-direction: column;
+}
+
+.goods-name {
+  color: #333;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.goods-detail-row {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  > .goods-item-desc {
-    flex: 2;
-    padding: 0 16rpx;
-    line-height: 1.7;
-    > .-item-bottom {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      padding-bottom: 20rpx;
-      > .-item-bootom-money {
-        > .-item-bl,
-        .-item-yj {
-          margin-right: 10rpx;
-          font-size: 24rpx;
-          color: $font-color-base;
-        }
-      }
-    }
-    > .-item-title {
-      display: -webkit-box;
-
-      -webkit-box-orient: vertical;
-
-      -webkit-line-clamp: 1;
-
-      overflow: hidden;
-    }
-    > .-item-price {
-      color: $price-color;
-      > span {
-        font-size: 36rpx;
-      }
-    }
-  }
+  margin-top: auto;
+  padding-top: 10rpx;
 }
-.wrapper {
-  width: 100%;
+
+.goods-info {
+  flex: 1;
+  min-width: 0;
 }
-</style>
+
+.goods-earn {
+  display: inline-block;
+  padding: 4rpx 12rpx;
+  border-radius: 6rpx;
+  background: #fff0f0;
+  color: #ff4d4f;
+  font-size: 22rpx;
+  line-height: 1.4;
+}
+
+.goods-price {
+  margin-top: 10rpx;
+  color: #222;
+  font-size: 34rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.share-btn {
+  flex-shrink: 0;
+  margin-left: 12rpx;
+  padding: 14rpx 24rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(135deg, #ff8f3f 0%, #ff6b35 100%);
+  color: #fff;
+  font-size: 24rpx;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.load-more {
+  padding: 24rpx 0 40rpx;
+  text-align: center;
+  color: #bbb;
+  font-size: 24rpx;
+}
+</style>