完成大体功能和样式

pages-biz/contract/contract.vue

@@ -0,0 +1,305 @@
+<template>
+
+	<view class="contract-page">
+		<!-- 顶部导航栏 -->
+		<customNavbar title="我的合同"  :showHome = "true"/>
+
+		<!-- Tabs -->
+		<view class="tab-wrapper">
+			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#EA4D3E" activeColor="#EA4D3E"
+				itemStyle="padding: 0 30rpx;"></u-tabs>
+		</view>
+
+		<DateFilter :start="startDate" :end="endDate" @update:start="startDate = $event" @update:end="endDate = $event"
+			@change="onDateFilterChange" />
+
+		<!-- 合同列表 -->
+		<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" :refresher-enabled="true"
+			:refresher-triggered="isRefreshing" @refresherrefresh="refresh">
+			<view v-if="contracts.length > 0" class="contract-list">
+				<view class="contract-card" v-for="item in contracts" :key="item.contractNo" @click="goDetail(item)">
+					<image class="contract-cover" :src="staticHost + (item.coverImgUrl || defaultCover)" mode="aspectFill" />
+
+					<view class="contract-info">
+						<view class="top-row">
+							<text class="asset-name">{{ $ellipsis(item.assetName,12) }}</text>
+							<u-icon name="arrow-right" size="28" color="#ccc" />
+						</view>
+						<!-- <view class="asset-room">{{ item.assetRoom || "—" }}</view> -->
+						<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>
+
+						<view :class="['status-tag', item.signStatus]">
+							{{ getStatusText(item.signStatus) }}
+						</view>
+					</view>
+				</view>
+
+				<u-loadmore :status="loadStatus" />
+			</view>
+
+			<view v-else class="empty">
+				<u-empty mode="list" text="暂无合同记录" />
+			</view>
+		</scroll-view>
+
+
+	</view>
+
+</template>
+
+
+<script>
+import DateFilter from '../../components/DatePicker/DateFilter.vue';
+export default {
+	components: { DateFilter },
+	data() {
+		return {
+			tabList: [{
+				name: "全部",
+				value: "all"
+			},
+			{
+				name: "待签署",
+				value: "pending"
+			},
+			{
+				name: "已签署",
+				value: "signed"
+			},
+			{
+				name: "已过期",
+				value: "expired"
+			},
+			],
+
+			currentTab: 0,
+			statusFilter: "all",
+			// --- 时间筛选 ---
+			startDate: "",
+			endDate: "",
+			// 可选：限制日期范围
+			minDate: "2000-01-01",
+			maxDate: "2099-12-31",
+			contracts: [],
+			pageNo: 1,
+			pageSize: 10,
+			total: 0,
+			loadStatus: "loadmore",
+			isRefreshing: false,
+			defaultCover: "/public/static/assets.jpg",
+		};
+	},
+
+	onLoad(options) {
+		this.loadContracts();
+	},
+    onShow() {
+        this.$checkToken(this.$getToken())
+    },
+	computed: {
+	staticHost() {
+		return this.$config.staticUrl
+	}	
+	},
+	methods: {
+		onTabChange(index) {
+			this.currentTab = index;
+			this.statusFilter = this.tabList[index].value;
+			this.resetAndLoad();
+		},
+		onDateFilterChange({ start, end }) {
+			this.resetAndLoad();
+		},
+
+		formatDate(time) {
+			const d = new Date(time);
+			const m = String(d.getMonth() + 1).padStart(2, "0");
+			const day = String(d.getDate()).padStart(2, "0");
+			return `${d.getFullYear()}-${m}-${day}`;
+		},
+
+		resetAndLoad() {
+			this.pageNo = 1;
+			this.contracts = [];
+			this.loadStatus = "loadmore";
+			this.loadContracts();
+		},
+
+		/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
+		loadContracts() {
+			  if (this.loadStatus !== 'loadmore') return;
+			
+			  this.loadStatus = 'loading';
+			
+			  this.$u.post('/contract/queryPage', {
+			    pageNo: this.pageNo,
+			    pageSize: this.pageSize,
+			    startTime: this.startDate,
+			    endTime: this.endDate,
+			    signStatus: this.statusFilter
+			  }, {
+			    WT: this.$getToken()
+			  }).then(result => {
+			
+			    const rows = result.data.result || [];
+			
+			    // 第一页 & 无数据
+			    if (this.pageNo === 1 && rows.length === 0) {
+			      this.contracts = [];
+			      this.loadStatus = 'nomore';
+			      return;
+			    }
+			
+			    // 追加数据
+			    this.contracts = this.contracts.concat(rows);
+			
+			    // 是否还有下一页（核心判断）
+			    if (rows.length < this.pageSize) {
+			      this.loadStatus = 'nomore';
+			    } else {
+			      this.pageNo++;              // ✅ 只有这里才能 +1
+			      this.loadStatus = 'loadmore';
+			    }
+			
+			  }).catch(err => {
+			    console.log("获取合同信息失败：", err);
+			    this.loadStatus = 'loadmore';
+			  }).finally(() => {
+			    this.isRefreshing = false;
+			  });
+		},
+
+		refresh() {
+			this.isRefreshing = true;
+			this.resetAndLoad();
+		},
+
+		loadMore() {
+			 if (this.loadStatus !== "loadmore") return;
+			  this.loadContracts();
+		},
+
+		goDetail(item) {
+			uni.navigateTo({
+				url: `/pages-biz/contract/contractDetail?contractNo=${item.contractNo}`,
+			});
+		},
+
+		getStatusText(status) {
+			switch (status) {
+				case "pending":
+					return "待签署";
+				case "signed":
+					return "已签署";
+				case "expired":
+					return "已过期";
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.contract-page {
+	background-color: #f8f8f8;
+	padding-top: 170rpx;
+	/* 给导航栏留空间 */
+	min-height: 100vh;
+}
+
+.scroll-content {
+	height: calc(100vh - 100rpx);
+}
+
+.contract-list {
+	padding: 20rpx;
+}
+
+.contract-card {
+	display: flex;
+	background: #fff;
+	border-radius: 16rpx;
+	margin-bottom: 24rpx;
+	padding: 20rpx;
+	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+	position: relative;
+}
+
+.contract-cover {
+	width: 193rpx;
+	height: 145rpx;
+	border-radius: 10rpx;
+	background-color: #FCE5E0;
+	flex-shrink: 0;
+}
+
+.contract-info {
+	flex: 1;
+	margin-left: 20rpx;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.top-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.asset-name {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #333;
+		flex: 1;
+	}
+}
+
+.asset-room {
+	font-size: 26rpx;
+	color: #555;
+	margin-top: 18rpx;
+}
+
+.date-range {
+	font-size: 24rpx;
+	color: #888;
+	margin-top: 20rpx;
+}
+
+.status-tag {
+	position: absolute;
+	bottom: 20rpx;
+	right: 0rpx;
+	padding: 12rpx 15rpx;
+	border-radius: 6rpx;
+	font-size: 26rpx;
+
+	&.pending {
+		background: #FEEDDD;
+		color: #EFA049;
+	}
+
+	&.signed {
+		background: #FCE5E0;
+		color: #ED7748;
+	}
+
+	&.expired {
+		background: #CDCDCD;
+		color: #969696;
+	}
+}
+
+.empty {
+	margin-top: 200rpx;
+}
+
+.tab-wrapper {
+	background-color: #ffffff;
+	padding: 10rpx 0;
+	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
+</style>

pages-biz/contract/contractDetail.vue

@@ -0,0 +1,341 @@
+<template>
+  <view class="contract-detail-page">
+    <customNavbar title="我的合同"></customNavbar>
+
+    <!-- 合同基本信息 -->
+    <view class="section">
+      <view class="section-title">合同基本信息</view>
+      <view
+        class="info-item"
+        v-for="(item, index) in baseInfo"
+        :key="index"
+        @click="item.hasArrow && handleClick(item)"
+      >
+        <text class="label">{{ item.label }}</text>
+        <view class="value-box">
+          <text class="value">{{ item.value }}</text>
+          <u-icon v-if="item.hasArrow" name="arrow-right" size="30" color="#ccc" />
+        </view>
+      </view>
+    </view>
+
+  
+<!--  该部分仍保留 -->
+  <!--  <view
+      v-for="(asset, index) in assetList"
+      :key="index"
+      class="asset-block"
+    >
+      <view class="asset-header" @click="toggleAsset(index)">
+        <view class="left">
+          <image
+            class="cover"
+            :src="asset.coverUrl || '/static/default-cover.png'"
+            mode="aspectFill"
+          />
+          <view class="info">
+            <text class="name">{{ asset.assetName }}</text>
+            <text class="room">{{ asset.assetRoom || '—' }}</text>
+          </view>
+        </view>
+        <u-icon
+          :name="asset.expanded ? 'arrow-up' : 'arrow-down'"
+          size="28"
+          color="#999"
+        />
+      </view>
+
+      <view v-show="asset.expanded">
+        <view class="section">
+          <view class="section-title">费用信息</view>
+          <view
+            class="info-item"
+            v-for="(item, i) in feeItems(asset)"
+            :key="i"
+          >
+            <text class="label">{{ item.label }}</text>
+            <text class="value">{{ item.value }}</text>
+          </view>
+        </view>
+      </view>
+    </view> -->
+
+ <!--   <view
+      v-if="hasMoreAssets"
+      class="load-more"
+      @click="loadMoreAssets"
+    > -->
+   <!--   <text v-if="!loadingAsset">加载更多资产</text>
+      <text v-else>加载中...</text>
+    </view> -->
+
+    <!-- 底部操作栏（完全保留原逻辑和样式） -->
+    <view v-if="contract.signStatus === '待签署'" class="bottom-bar">
+      <u-button class="sign-btn" @click="goSign">
+        去签署
+      </u-button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      contractNo: null,
+      contract: {},
+      assetList: [],
+      assetPageNo: 1,
+      assetPageSize: 1,
+      hasMoreAssets: true,
+      loadingAsset: false
+    }
+  },
+
+  onShow() {
+    this.$checkToken(this.$getToken())
+	this.getContractDetail()
+  },
+
+  onLoad(options) {
+    this.contractNo = options.contractNo
+  },
+
+  onReachBottom() {
+    this.loadMoreAssets()
+  },
+
+  computed: {
+    baseInfo() {
+      return [
+		{ label: '合同名称', value: this.contract.contractName || '—' },
+        { label: '签约状态', value: this.contract.signStatus || '—' },
+        {
+          label: '合同生效期',
+          value: this.contract.startDate
+            ? `${this.contract.startDate} 至 ${this.contract.endDate}`
+            : '—'
+        },
+        {
+          label: '电子合同',
+          value: '查看',
+          hasArrow: true
+        }
+      ]
+    }
+  },
+
+  methods: {
+    /** 合同详情 + 第一条资产 */
+    getContractDetail() {
+      this.$u.get(`/contract/detail?contractNo=${this.contractNo}`, {},{
+        WT: this.$getToken()
+      }).then(res => {
+		  console.log(res)
+        this.contract = res.data || {}
+
+        // this.assetList = (res.assetsInfos.assets || []).map((item, index) => ({
+        //   ...item,
+        //   expanded: index === 0
+        // }))
+
+        // this.hasMoreAssets =
+        //   this.assetList.length < (res.totalAssets || 0)
+      })
+    },
+
+    /** 加载更多资产 */
+    loadMoreAssets() {
+      if (this.loadingAsset || !this.hasMoreAssets) return
+
+      this.loadingAsset = true
+      this.assetPageNo += 1
+
+      this.$u.get('/contract/assets', {
+        contractNo: this.contractNo,
+        pageNo: this.assetPageNo,
+        pageSize: this.assetPageSize,
+        WT: this.$getToken()
+      }).then(res => {
+        const list = (res.assets || []).map(item => ({
+          ...item,
+          expanded: false
+        }))
+
+        this.assetList = this.assetList.concat(list)
+        this.hasMoreAssets = list.length === this.assetPageSize
+      }).finally(() => {
+        this.loadingAsset = false
+      })
+    },
+
+    /** 折叠 / 展开（手风琴效果） */
+    toggleAsset(index) {
+      this.assetList.forEach((item, i) => {
+        item.expanded = i === index ? !item.expanded : false
+      })
+    },
+
+    feeItems(asset) {
+      return [
+        { label: '押金/保证金', value: asset.fee?.deposit || '—' },
+        { label: '租金', value: asset.fee?.rent || '—' },
+        { label: '电费', value: asset.fee?.electricity || '—' },
+        { label: '水费', value: asset.fee?.water || '—' },
+        { label: '物业/增值服务', value: asset.fee?.property || '—' }
+      ]
+    },
+
+    handleClick(item) {
+      if (item.label === '电子合同') {
+      uni.downloadFile({
+        url: this.$config.staticUrl + this.contract.eContractUrl,
+        header: {
+          'X-Token': this.$getToken(),
+		  'USERTYPE': this.$getUserType()
+        },
+        success: res => {
+          uni.openDocument({
+            filePath: res.tempFilePath,
+            fileType: 'pdf'
+          })
+        }
+      })
+      }
+    },
+
+    goSign() {
+	 let url = `/contract/getSignLink?eFlowId=${this.contract.eContractFlowId}`
+	 let signLink
+	 this.$u.get(url,{},{
+		 WT: this.$getToken()
+	 }).then(res=>{
+		 if(res.flag) {
+			 signLink = res.data
+			  // 开发者微信小程序内通过WebView打开e签宝的认证授权/签署页面
+			     // 场景二：当前小程序内打开H5页面操作认证授权/签署
+			     wx.navigateTo({
+			       url: '/pages-biz/webview/webview?url=' + encodeURIComponent(signLink),
+			     })
+
+		 }
+	 })	 
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.contract-detail-page {
+  background: #f7f8fa;
+  min-height: 100vh;
+  padding-top: 175rpx;
+  padding-bottom: 150rpx;
+}
+
+.asset-block {
+  background: #fff;
+  border-radius: 12rpx;
+  margin: 20rpx;
+  overflow: hidden;
+}
+
+.asset-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  .left {
+    display: flex;
+    align-items: center;
+  }
+
+  .cover {
+    width: 120rpx;
+    height: 96rpx;
+    border-radius: 8rpx;
+    margin-right: 20rpx;
+  }
+
+  .name {
+    font-size: 30rpx;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .room {
+    font-size: 26rpx;
+    color: #999;
+  }
+}
+
+.section {
+  background: #fff;
+  border-radius: 12rpx;
+  margin: 20rpx;
+  padding: 20rpx 24rpx;
+
+  .section-title {
+    font-weight: 500;
+    font-size: 40rpx;
+    margin-bottom: 12rpx;
+    color: #212121;
+  }
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 40rpx 0;
+    border-bottom: 1rpx solid #f0f0f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .label {
+      font-size: 30rpx;
+      color: #86868c;
+    }
+
+    .value {
+      font-size: 30rpx;
+      color: #222;
+    }
+  }
+}
+
+.load-more {
+  text-align: center;
+  padding: 30rpx;
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 底部按钮样式保持不变 */
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding: 35rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.06);
+  z-index: 99;
+
+  .sign-btn {
+    width: 100%;
+    height: 88rpx;
+  }
+
+  &::v-deep .u-btn {
+    font-size: 30rpx;
+    color: #fff;
+    background: linear-gradient(90deg, #ff6f63 0%, #fb392a 100%);
+    border-radius: 10rpx;
+  }
+}
+
+</style>