lanan-app/pages/rescue/businessManageSource.vue

<template>
  <!-- 页面：展示指定渠道下所有来源列表 -->
  <view class="page">
	<!-- 顶部：状态栏安全区 + 渐变导航栏（连成一块） -->
	    <view class="top-bar">
	      <view class="nav-bar">
	        <uni-icons class="back" type="left" size="22" color="#fff" @click="goBack" />
	        <text class="title">{{ channel }} — 来源列表</text>
	      </view>
	    </view>

    <!-- 列表：来源卡片 -->
    <view class="source-list">
      <view
        v-for="s in sources"
        :key="s.id"
        class="source-card"
        @click="goOrder(s)"
      >
        <text class="src-name">{{ s.name }}</text>
        <uni-icons type="right" size="20" color="#666" />
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request'
export default {
  data(){return{
    channelId:'',         // ← 路由参数
    channel:'',
    dateType:'',
    sources:[]
  }},
  onLoad({channelId='',channel='',dateType=''}) {
    this.channelId   = channelId
    this.channel = decodeURIComponent(channel)
    this.dateType    = dateType

    // 拉来源列表
    request({
      url:`/rescue-channel-source/sources/${channelId}`,
      method:'get'
    }).then(res=>{
      // 后端返回数据结构自行调整
      this.sources = res.data        // [{id,name},…]
    })
  },
  methods:{
    goOrder(src){
      const query = [
        `dateType=${this.dateType}`,
        `channel=${encodeURIComponent(this.channel)}`,
        `source=${encodeURIComponent(src.name)}`
      ].join('&')
      uni.navigateTo({ url:`/pages/rescue/businessManageOrder?${query}` })
    }
  }
}
</script>

<!-- 只改动 <style> 部分，其余保持不变 -->
<style scoped lang="scss">
/* ===== 整页背景 ===== */
.page {
  min-height: 100vh;
  background: #f6f8fc;
}

/* ===== 顶部条：状态栏 + 渐变导航 ===== */
.top-bar {
  width: 100%;

  /* ⬇︎ 头部总高度 = 安全区 + 140rpx 导航本体 + 20rpx 额外留白 */
  height: calc(env(safe-area-inset-top) + 140rpx + 20rpx);

  /* ⬇︎ 只保留安全区的内边距，20rpx 额外留白改放到底部 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: 20rpx;

  background: linear-gradient(180deg, #3a8dff 0%, #579dff 100%);
  box-sizing: border-box;

  /* 关键：垂直方向末端对齐，把 nav-bar 推到底部 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 导航栏本体 */
.nav-bar {
  position: relative;
  height: 100rpx;
  display: flex;
  align-items: flex-end;   /* 关键：子元素整体贴底 */
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.back {
  flex: 0 0 60rpx;
    margin-right: 24rpx;
    align-self: flex-end;    /* 再次确保单独贴底 */
}

/* 标题水平居中即可，去掉垂直居中 */
.title {
  position: absolute;
  left: 50%;
  bottom: 0;                 /* 紧贴 nav-bar 底部 */
  transform: translateX(-50%);
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* ===== 列表区域 ===== */
.source-list {
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  row-gap: 20rpx;
}
.source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 32rpx;
  border-radius: 16rpx;
  background: linear-gradient(180deg, #d9e6ff 0%, #ffffff 100%);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
}
.src-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #101a3e;
}
</style>


<!-- ======================= 说明 =======================
1. 本页面只负责列出“来源”列表，没有任何数量/金额信息。
2. 示例数据写死在 data.sources；正式接接口时，按注释在 onLoad 中请求即可。
3. 点击来源卡片后，跳转到 /pages/order/OrderList，并把 dateType / channelName / sourceName 三个参数带过去。
4. 订单列表页 (OrderList.vue) 可在 onLoad 中：
   const { dateType, channelName, sourceName } = query
   // 调用你的订单详情接口 ...
===================================================== -->