151 lines
4.0 KiB
Vue
151 lines
4.0 KiB
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
|
||
// 调用你的订单详情接口 ...
|
||
===================================================== --> |