Core Concepts

1. Bind a unique identifier to list items using data-id during list rendering.
2. Trigger navigation to the detail view using bindtap.
3. Extract the identifier within the target page's onLoad lifecycle hook to query the cloud database.
4. Render the fetched document within the detail view.

Implementation Steps

In the parent list component, ensure the unique identifier is passed and the navigation method is invoked.

navigateToActivityDetail(e) {
    const recordId = e.currentTarget.dataset.recordId;
    wx.navigateTo({
        url: '/pages/activityDetail/activityDetail?recordId=' + recordId
    });
}

After registering the new page in app., construct the detail page structure. Utilize conditional rendering to handle various states such as rejected or completed applications.

activityDetail.wxml

<view class="detail-container">
    <!-- Event Basic Info -->
    <view class="detail-section">
        <view class="section-title">Event Information</view>
        <view class="content-box">
            <view>Name: {{info.eventName}}</view>
            <view>Start: {{info.commenceTime}}</view>
            <view>End: {{info.concludeTime}}</view>
            <view>Venue: {{info.venue}}</view>
            <view>Campus: {{info.campus}}</view>
        </view>
    </view>

    <!-- Organizer Details -->
    <view class="detail-section">
        <view class="section-title">Organizer Information</view>
        <view class="content-box">
            <view>Name: {{info.organizerName}}</view>
            <view>Major: {{info.organizerMajor}}</view>
            <view>Phone: {{info.organizerPhone}}</view>
            <view>Email: {{info.organizerEmail}}</view>
        </view>
    </view>

    <!-- Funding -->
    <view class="detail-section">
        <view class="section-title">Budget Details</view>
        <view class="content-box">
            <view>Total Budget: {{info.totalBudget}}</view>
            <view>Self-Funded: {{info.selfFunded}}</view>
            <view>Requested Funds: {{info.requestedFunds}}</view>
        </view>
    </view>

    <!-- Sponsorship -->
    <view class="detail-section">
        <view class="section-title">Sponsorship Details</view>
        <view class="content-box">
            <view>Has Sponsor: {{info.hasSponsor}}</view>
            <view>Company: {{info.sponsorEntity}}</view>
            <view>Type: {{info.sponsorType}}</view>
            <view>Amount: {{info.sponsorAmount}}</view>
            <view>Contract Submitted: {{info.contractSubmitted}}</view>
        </view>
    </view>

    <!-- Loans -->
    <view class="detail-section">
        <view class="section-title">Loan Details</view>
        <view class="content-box">
            <view>Requires Loan: {{info.requiresLoan}}</view>
            <view>Borrower: {{info.borrowerName}}</view>
            <view>Major: {{info.borrowerMajor}}</view>
            <view>Age: {{info.borrowerAge}}</view>
            <view>Phone: {{info.borrowerPhone}}</view>
            <view>Amount: {{info.loanAmount}}</view>
        </view>
    </view>

    <!-- Labor -->
    <view class="detail-section">
        <view class="section-title">Labor Remuneration</view>
        <view class="content-box">
            <view>Applicable: {{info.hasRemuneration}}</view>
            <view>Recipient: {{info.remunerationTarget}}</view>
            <view>Amount: {{info.remunerationAmount}}</view>
        </view>
    </view>

    <!-- Reservation -->
    <view class="detail-section">
        <view class="section-title">Organization Details</view>
        <view class="content-box">
            <view>Affiliated Institute: {{info.affiliatedInstitute}}</view>
        </view>
    </view>

    <!-- Remarks -->
    <view class="detail-section">
        <view class="section-title">Additional Remarks</view>
        <view class="content-box">
            <view>Notes: {{info.notes}}</view>
            <view>Expected Attendees: {{info.expectedAttendees}}</view>
            <view>OA Upload Required: {{info.needsOAUpload}}</view>
            <view>Project Description: {{info.projectDescription}}</view>
        </view>
    </view>

    <!-- Rejected Status -->
    <block wx:if="{{info.status === 'rejected'}}">
        <view class="detail-section">
            <view class="section-title">Rejection Reason</view>
            <view class="content-box">
                <view>{{info.rejectionNote}}</view>
            </view>
        </view>
    </block>

    <!-- Completed Status -->
    <block wx:if="{{info.status === 'completed'}}">
        <view class="detail-section">
            <view class="section-title">Summary Report</view>
            <view class="content-box">
                <view>Actual Participants: {{info.actualParticipants}}</view>
                <view>Actual Expenditure: {{info.actualExpenditure}}</view>
            </view>
        </view>
    </block>
</view>

activityDetail.wxss

.detail-container {
    display: grid;
    font-size: 18px;
    font-weight: bold;
    margin: 20rpx 10rpx;
}

.content-box {
    margin: 15px 20px;
    padding: 5px 15px;
    border-radius: 25px;
    border: 1px solid #e0e0e0;
}

.section-title {
    font-size: 18px;
    font-weight: 500;
    color: #c0392b;
    margin-left: 20px;
}

activityDetail.js

Page({
    data: {
        info: {}
    },
    onLoad(options) {
        const docId = options.recordId;
        const db = wx.cloud.database();
        
        db.collection('events').doc(docId).get()
            .then(response => {
                this.setData({
                    info: response.data
                });
            })
            .catch(error => {
                console.error('Failed to fetch details:', error);
            });
    }
});