commit: 合同列表开发

+import request from '@/utils/request'
+import { ContentTypeEnum } from '@/utils/httpEnum';
+
+export const statusStyle = [
+  { color: '#2BA471', bgColor:'#E3F9E9',text: '审核通过' },
+  { color: '#D54941', bgColor:'#FFF0ED',text: '已驳回' },
+  { color: '#3D48A3', bgColor:'#F2F3FF',text: '审核中' },
+];
+
+export const statusMap = {
+  '生产中': '#2BA471',
+  '审批中': '#3D48A3',
+  '已签收': '#E7E7E7',
+  '已发货': '#D54941',
+}
+
+const baseUrl = '/contract';
+// 查询合同框架列表
+export function queryApi(params) {
+  return request({
+    url: `${baseUrl}/contractFramework/query`,
+    method: 'get',
+    params
+  })
+}
+
+// 查询合同列表
+export function queryContractApi(params) {
+  return request({
+    url: `${baseUrl}/contractDistributorStandard/query`,
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file

@@ -19,8 +19,8 @@
 		}, {
 			"path": "pages/mine/index",
 			"style": {
-            "navigationBarTitleText": "我的",
-            "navigationBarTextStyle": "white"
+					"navigationBarTitleText": "我的",
+					"navigationBarTextStyle": "white"
 			}
 		}, {
 			"path": "pages/mine/index2",
@@ -35,17 +35,17 @@
 		}, {
 			"path": "pages/mine/pwd/index",
 			"style": {
-            "navigationBarTitleText": "修改密码"
+					"navigationBarTitleText": "修改密码"
 			}
 		}, {
 			"path": "pages/mine/setting/index",
 			"style": {
-            "navigationBarTitleText": "应用设置"
+					"navigationBarTitleText": "应用设置"
 			}
 		}, {
 			"path": "pages/mine/about/index",
 			"style": {
-            "navigationBarTitleText": "关于我们"
+					"navigationBarTitleText": "关于我们"
 			}
 		}, {
 			"path": "pages/dev_manage/index",
@@ -54,6 +54,62 @@
 				"navigationBarBackgroundColor": "#ffffff",
 				"navigationBarTextStyle": "black"
 			}
+		}, {
+			"path": "pages/contract_framework/index",
+			"style": {
+				"navigationBarTitleText": "框架合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}, {
+			"path": "pages/contract_retail/index",
+			"style": {
+				"navigationBarTitleText": "经销标准合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}, {
+			"path": "pages/contract_stock/index",
+			"style": {
+				"navigationBarTitleText": "经销库存合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}, {
+			"path": "pages/contract_unplan/index",
+			"style": {
+				"navigationBarTitleText": "经销未锁规合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}, {
+			"path": "pages/contract_process/index",
+			"style": {
+				"navigationBarTitleText": "加工标准合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}, {
+			"path": "pages/contract_foreign_std/index",
+			"style": {
+				"navigationBarTitleText": "外贸标准合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}, {
+			"path": "pages/contract_foreign_stock/index",
+			"style": {
+				"navigationBarTitleText": "外贸库存合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
+		}, {
+			"path": "pages/contract_foreign_unplan/index",
+			"style": {
+				"navigationBarTitleText": "外贸未锁规合同",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black"
+			}
 		}
 	],
 	"subPackages": [
@@ -197,4 +253,4 @@
 		"navigationBarBackgroundColor": "$theme-primary",
 		"navigationBarTextStyle": "white"
 	}
-}
\ No newline at end of file
+}

+<template>
+  <view class="page">
+    <view class="contract-list-fixed">
+      <view class="search-row">
+        <uni-search-bar
+          v-model="searchKeyword"
+          radius="6"
+          placeholder="请输入需方名称或编号或办事处"
+          clearButton="auto"
+          cancelButton="none"
+          bgColor="#F3F3F3"
+          textColor="rgba(0,0,0,0.4)"
+          @confirm="search"
+          @input="onSearchInput"
+        />
+        <view class="tool-icons">
+          <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+          <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+        </view>
+      </view>
+
+      <view class="tabs">
+        <view
+          v-for="(t, i) in tabs"
+          :key="i"
+          :class="['tab', { active: status === t.value }]"
+          @click="switchTab(t)"
+        >
+          {{ t.label }}
+        </view>
+      </view>
+    </view>
+
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :selectedKeys.sync="selectedKeys"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @loaded="onCardLoaded"
+        @error="onCardError"
+      >
+        <template v-slot="{ item }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.buyerName }}</text>
+              <text v-if="item.status === 'STANDARD'" :class="['status']" :style="{ background: statusMap[item.shippingStatusName] }">{{ item.shippingStatusName }}</text>
+            </view>
+            <view class="info-row">
+              <text>编号</text><text>{{ item.code }}</text>
+            </view>
+            <view class="info-row">
+              <text>办事处</text><text>{{ item.deptName }}</text>
+            </view>
+            <view class="info-row" v-if="item.status !== 'STANDARD'">
+              <text>订单总额</text><text class="amount" :style="{ color: '#b67a76' }">{{ item.totalAmountIncludingTax ? '¥' : '' }}{{ formatAmount(item.totalAmountIncludingTax) || '-' }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'STANDARD'">
+              <text>正式合同规范性审核状态</text><span class="info-status" :style="item.standardApprovedName ? getStatusCss(item.standardApprovedName) : ''">{{ item.standardApprovedName || '-' }}</span>
+            </view>
+            <view class="info-row">
+              <text>订货日期</text><text>{{ item.orderDate }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">订货日期</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { queryContractApi, statusStyle,statusMap } from '@/api/contract.js'
+import { officeQueryApi } from '@/api/devManage.js'
+
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+
+      tabs: [
+        { label: '草稿合同', value: 'DRAFT' },
+        { label: '标准合同', value: 'STANDARD' },
+        { label: '已删除合同', value: 'DELETED' }
+      ],
+      status: 'DRAFT',
+
+      query: { deptId: '', deptName: '', dateRange: [] },
+      extraParams: {},
+
+      batchMode: false,
+      selectedKeys: [],
+      currentItems: [],
+
+      filterVisible: false,
+      filterForm: { deptId: '', deptName: '', dateRange: [] },
+      deptSelectVisible: false,
+      statusStyle,
+      statusMap,
+    }
+  },
+  computed: {
+    extraCombined() {
+      return {
+        keyword: this.searchKeywordDebounced || undefined,
+        status: this.status || undefined,
+        type: 'INTL_STD_CONTRACT'
+      }
+    }
+  },
+  watch: {
+    extraCombined: {
+      deep: true,
+      handler(v) {
+        this.extraParams = v
+      },
+      immediate: true
+    }
+  },
+  created() {
+  },
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    onCardLoaded({ items }) {
+      this.currentItems = items
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+    onSearchInput() {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    switchTab(item) {
+      this.status = item.value
+    },
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+      this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+      this.query = { ...payload }
+    },
+    openDeptSelect() {
+      this.deptSelectVisible = true
+    },
+    onDeptConfirm(payload) {
+      const val = payload && payload.value != null ? payload.value : ''
+      const label = payload && payload.label != null ? payload.label : ''
+      this.filterForm.deptId = val
+      this.filterForm.deptName = label
+    },
+    toggleBatch() {
+      this.batchMode = !this.batchMode
+      if (!this.batchMode) this.selectedKeys = []
+    },
+    onAdd() {
+      uni.showToast({ title: '点击新增', icon: 'none' })
+    },
+    fetchList({ pageIndex, pageSize, query, extra }) {
+        console.log('fetchList', pageIndex, pageSize, query, extra)
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.orderDateStart = params.dateRange[0]
+        params.orderDateEnd = params.dateRange[1]
+        delete params.dateRange
+      }
+      return queryContractApi(params)
+        .then(res => {
+          const _data = res.data || {}
+          const records = _data.datas || []
+          const totalCount = _data.totalCount || 0
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('queryContractApi error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+
+    formatAmount(val) {
+      if (val == null) return '0.00'
+      try {
+        const num = Number(val)
+        return num.toFixed(2)
+      } catch (e) {
+        return String(val)
+      }
+    },
+    getStatusCss(name) {
+      const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
+      const found = list.find(it => it && it.text === name) || {}
+      return {
+        color: found.color || '#000',
+        backgroundColor: found.bgColor || '#000'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.contract-list-fixed {
+  position: fixed;
+  top: 96rpx;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: #fff;
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    .uni-searchbar { padding: 0; flex: 1; }
+    .tool-icons { display: flex; .tool-icon { width: 48rpx; height: 48rpx; display: block; margin-left: 32rpx; } }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 0;
+    border-bottom: solid 1px #E7E7E7;
+    .tab { width: 50%; text-align: center; color: rgba(0,0,0,0.9); line-height: 44rpx; position: relative; font-weight: 600; }
+    .tab.active { color: $theme-primary; }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -13px;
+      width: 32rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      background: $theme-primary;
+    }
+  }
+}
+::v-deep .uni-searchbar__box { height: 80rpx !important; justify-content: start; .uni-searchbar__box-search-input { font-size: 32rpx !important; } }
+
+.list-box {
+  flex: 1;
+  padding-top: 236rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        .info-status {
+            padding: 4rpx 12rpx;
+            border-radius: 6rpx;
+            font-size: 24rpx;
+            color: #fff;
+            line-height: 40rpx;
+        }
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+</style>
\ No newline at end of file

+<template>
+  <view class="page">
+    <view class="contract-list-fixed">
+      <view class="search-row">
+        <uni-search-bar
+          v-model="searchKeyword"
+          radius="6"
+          placeholder="请输入需方名称或编号或办事处"
+          clearButton="auto"
+          cancelButton="none"
+          bgColor="#F3F3F3"
+          textColor="rgba(0,0,0,0.4)"
+          @confirm="search"
+          @input="onSearchInput"
+        />
+        <view class="tool-icons">
+          <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+          <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+        </view>
+      </view>
+
+      <view class="tabs">
+        <view
+          v-for="(t, i) in tabs"
+          :key="i"
+          :class="['tab', { active: status === t.value }]"
+          @click="switchTab(t)"
+        >
+          {{ t.label }}
+        </view>
+      </view>
+    </view>
+
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :selectedKeys.sync="selectedKeys"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @loaded="onCardLoaded"
+        @error="onCardError"
+      >
+        <template v-slot="{ item }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.buyerName }}</text>
+              <text v-if="item.status === 'STANDARD'" :class="['status']" :style="{ background: statusMap[item.shippingStatusName] }">{{ item.shippingStatusName }}</text>
+            </view>
+            <view class="info-row">
+              <text>编号</text><text>{{ item.code }}</text>
+            </view>
+            <view class="info-row">
+              <text>办事处</text><text>{{ item.deptName }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'DRAFT' || item.status === 'DELETED'">
+              <text>订单总额</text><text class="amount" :style="{ color: '#b67a76' }">{{ item.totalAmountIncludingTax ? '¥' : '' }}{{ formatAmount(item.totalAmountIncludingTax) || '-' }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'STANDARD' || item.status === 'FORMAL'">
+              <text>{{ item.status === 'STANDARD' ? '标准合同' : '正式合同' }}规范性审核状态</text><span class="info-status" :style="item.standardApprovedName ? getStatusCss(item.standardApprovedName) : ''">{{ item.standardApprovedName || '-' }}</span>
+            </view>
+            <view class="info-row">
+              <text>订货日期</text><text>{{ item.orderDate }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">订货日期</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { queryContractApi, statusStyle,statusMap } from '@/api/contract.js'
+import { officeQueryApi } from '@/api/devManage.js'
+
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+
+      tabs: [
+        { label: '草稿合同', value: 'DRAFT' },
+        { label: '正式合同', value: 'FORMAL' },
+        { label: '标准合同', value: 'STANDARD' },
+        { label: '已删除合同', value: 'DELETED' }
+      ],
+      status: 'DRAFT',
+
+      query: { deptId: '', deptName: '', dateRange: [] },
+      extraParams: {},
+
+      batchMode: false,
+      selectedKeys: [],
+      currentItems: [],
+
+      filterVisible: false,
+      filterForm: { deptId: '', deptName: '', dateRange: [] },
+      deptSelectVisible: false,
+      statusStyle,
+      statusMap,
+    }
+  },
+  computed: {
+    extraCombined() {
+      return {
+        keyword: this.searchKeywordDebounced || undefined,
+        status: this.status || undefined,
+        type: 'INTL_INVENTORY_AGMT'
+      }
+    }
+  },
+  watch: {
+    extraCombined: {
+      deep: true,
+      handler(v) {
+        this.extraParams = v
+      },
+      immediate: true
+    }
+  },
+  created() {
+  },
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    onCardLoaded({ items }) {
+      this.currentItems = items
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+    onSearchInput() {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    switchTab(item) {
+      this.status = item.value
+    },
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+      this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+      this.query = { ...payload }
+    },
+    openDeptSelect() {
+      this.deptSelectVisible = true
+    },
+    onDeptConfirm(payload) {
+      const val = payload && payload.value != null ? payload.value : ''
+      const label = payload && payload.label != null ? payload.label : ''
+      this.filterForm.deptId = val
+      this.filterForm.deptName = label
+    },
+    toggleBatch() {
+      this.batchMode = !this.batchMode
+      if (!this.batchMode) this.selectedKeys = []
+    },
+    onAdd() {
+      uni.showToast({ title: '点击新增', icon: 'none' })
+    },
+    fetchList({ pageIndex, pageSize, query, extra }) {
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.orderDateStart = params.dateRange[0]
+        params.orderDateEnd = params.dateRange[1]
+        delete params.dateRange
+      }
+      return queryContractApi(params)
+        .then(res => {
+          const _data = res.data || {}
+          const records = _data.datas || []
+          const totalCount = _data.totalCount || 0
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('queryContractApi error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+
+    formatAmount(val) {
+      if (val == null) return '0.00'
+      try {
+        const num = Number(val)
+        return num.toFixed(2)
+      } catch (e) {
+        return String(val)
+      }
+    },
+    getStatusCss(name) {
+      const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
+      const found = list.find(it => it && it.text === name) || {}
+      return {
+        color: found.color || '#000',
+        backgroundColor: found.bgColor || '#000'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.contract-list-fixed {
+  position: fixed;
+  top: 96rpx;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: #fff;
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    .uni-searchbar { padding: 0; flex: 1; }
+    .tool-icons { display: flex; .tool-icon { width: 48rpx; height: 48rpx; display: block; margin-left: 32rpx; } }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 0;
+    border-bottom: solid 1px #E7E7E7;
+    .tab { width: 50%; text-align: center; color: rgba(0,0,0,0.9); line-height: 44rpx; position: relative; font-weight: 600; }
+    .tab.active { color: $theme-primary; }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -13px;
+      width: 32rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      background: $theme-primary;
+    }
+  }
+}
+::v-deep .uni-searchbar__box { height: 80rpx !important; justify-content: start; .uni-searchbar__box-search-input { font-size: 32rpx !important; } }
+
+.list-box {
+  flex: 1;
+  padding-top: 236rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+            &.status_1 {
+                background: #3D48A3;
+            }
+            &.status_2 {
+                background: #2BA471;
+            }
+            &.status_3 {
+                background: #D54941;
+            }
+            &.status_4 {
+                background: #E7E7E7;
+                color: #323241;
+            }
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        .info-status {
+            padding: 4rpx 12rpx;
+            border-radius: 6rpx;
+            font-size: 24rpx;
+            color: #fff;
+            line-height: 40rpx;
+        }
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+</style>
\ No newline at end of file

+<template>
+  <view class="page">
+    <view class="contract-list-fixed">
+      <view class="search-row">
+        <uni-search-bar
+          v-model="searchKeyword"
+          radius="6"
+          placeholder="请输入需方名称或编号或办事处"
+          clearButton="auto"
+          cancelButton="none"
+          bgColor="#F3F3F3"
+          textColor="rgba(0,0,0,0.4)"
+          @confirm="search"
+          @input="onSearchInput"
+        />
+        <view class="tool-icons">
+          <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+          <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+        </view>
+      </view>
+
+      <view class="tabs">
+        <view
+          v-for="(t, i) in tabs"
+          :key="i"
+          :class="['tab', { active: status === t.value }]"
+          @click="switchTab(t)"
+        >
+          {{ t.label }}
+        </view>
+      </view>
+    </view>
+
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :selectedKeys.sync="selectedKeys"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @loaded="onCardLoaded"
+        @error="onCardError"
+      >
+        <template v-slot="{ item }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.buyerName }}</text>
+              <text v-if="item.status === 'STANDARD'" :class="['status']" :style="{ background: statusMap[item.shippingStatusName] }">{{ item.shippingStatusName }}</text>
+            </view>
+            <view class="info-row">
+              <text>编号</text><text>{{ item.code }}</text>
+            </view>
+            <view class="info-row">
+              <text>办事处</text><text>{{ item.deptName }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'DRAFT' || item.status === 'DELETED'">
+              <text>订单总额</text><text class="amount" :style="{ color: '#b67a76' }">{{ item.totalAmountIncludingTax ? '¥' : '' }}{{ formatAmount(item.totalAmountIncludingTax) || '-' }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'STANDARD' || item.status === 'FORMAL'">
+              <text>{{ item.status === 'STANDARD' ? '标准合同' : '正式合同' }}规范性审核状态</text><span class="info-status" :style="item.standardApprovedName ? getStatusCss(item.standardApprovedName) : ''">{{ item.standardApprovedName || '-' }}</span>
+            </view>
+            <view class="info-row">
+              <text>订货日期</text><text>{{ item.orderDate }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">订货日期</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { queryContractApi, statusStyle,statusMap } from '@/api/contract.js'
+import { officeQueryApi } from '@/api/devManage.js'
+
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+
+      tabs: [
+        { label: '草稿合同', value: 'DRAFT' },
+        { label: '正式合同', value: 'FORMAL' },
+        { label: '标准合同', value: 'STANDARD' },
+        { label: '已删除合同', value: 'DELETED' }
+      ],
+      status: 'DRAFT',
+
+      query: { deptId: '', deptName: '', dateRange: [] },
+      extraParams: {},
+
+      batchMode: false,
+      selectedKeys: [],
+      currentItems: [],
+
+      filterVisible: false,
+      filterForm: { deptId: '', deptName: '', dateRange: [] },
+      deptSelectVisible: false,
+      statusStyle,
+      statusMap,
+    }
+  },
+  computed: {
+    extraCombined() {
+      return {
+        keyword: this.searchKeywordDebounced || undefined,
+        status: this.status || undefined,
+        type: 'INTL_OPEN_SPEC_AGMT'
+      }
+    }
+  },
+  watch: {
+    extraCombined: {
+      deep: true,
+      handler(v) {
+        this.extraParams = v
+      },
+      immediate: true
+    }
+  },
+  created() {
+  },
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    onCardLoaded({ items }) {
+      this.currentItems = items
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+    onSearchInput() {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    switchTab(item) {
+      this.status = item.value
+    },
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+      this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+      this.query = { ...payload }
+    },
+    openDeptSelect() {
+      this.deptSelectVisible = true
+    },
+    onDeptConfirm(payload) {
+      const val = payload && payload.value != null ? payload.value : ''
+      const label = payload && payload.label != null ? payload.label : ''
+      this.filterForm.deptId = val
+      this.filterForm.deptName = label
+    },
+    toggleBatch() {
+      this.batchMode = !this.batchMode
+      if (!this.batchMode) this.selectedKeys = []
+    },
+    onAdd() {
+      uni.showToast({ title: '点击新增', icon: 'none' })
+    },
+    fetchList({ pageIndex, pageSize, query, extra }) {
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.orderDateStart = params.dateRange[0]
+        params.orderDateEnd = params.dateRange[1]
+        delete params.dateRange
+      }
+      return queryContractApi(params)
+        .then(res => {
+          const _data = res.data || {}
+          const records = _data.datas || []
+          const totalCount = _data.totalCount || 0
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('queryContractApi error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+
+    formatAmount(val) {
+      if (val == null) return '0.00'
+      try {
+        const num = Number(val)
+        return num.toFixed(2)
+      } catch (e) {
+        return String(val)
+      }
+    },
+    getStatusCss(name) {
+      const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
+      const found = list.find(it => it && it.text === name) || {}
+      return {
+        color: found.color || '#000',
+        backgroundColor: found.bgColor || '#000'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.contract-list-fixed {
+  position: fixed;
+  top: 96rpx;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: #fff;
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    .uni-searchbar { padding: 0; flex: 1; }
+    .tool-icons { display: flex; .tool-icon { width: 48rpx; height: 48rpx; display: block; margin-left: 32rpx; } }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 0;
+    border-bottom: solid 1px #E7E7E7;
+    .tab { width: 50%; text-align: center; color: rgba(0,0,0,0.9); line-height: 44rpx; position: relative; font-weight: 600; }
+    .tab.active { color: $theme-primary; }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -13px;
+      width: 32rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      background: $theme-primary;
+    }
+  }
+}
+::v-deep .uni-searchbar__box { height: 80rpx !important; justify-content: start; .uni-searchbar__box-search-input { font-size: 32rpx !important; } }
+
+.list-box {
+  flex: 1;
+  padding-top: 236rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+            &.status_1 {
+                background: #3D48A3;
+            }
+            &.status_2 {
+                background: #2BA471;
+            }
+            &.status_3 {
+                background: #D54941;
+            }
+            &.status_4 {
+                background: #E7E7E7;
+                color: #323241;
+            }
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        .info-status {
+            padding: 4rpx 12rpx;
+            border-radius: 6rpx;
+            font-size: 24rpx;
+            color: #fff;
+            line-height: 40rpx;
+        }
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+</style>
\ No newline at end of file

+<template>
+  <view class="page">
+    <view class="framework-list-fixed">
+        <view class="search-row">
+          <uni-search-bar
+            v-model="searchKeyword"
+            radius="6"
+            placeholder="请输入客户名称或编号"
+            clearButton="auto"
+            cancelButton="none"
+            bgColor="#F3F3F3"
+            textColor="rgba(0,0,0,0.4)"
+            @confirm="search"
+            @input="onSearchInput"
+          />
+            <view class="tool-icons">
+                <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+                <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+            </view>
+        </view>
+
+    </view>  
+    <!-- 列表卡片组件 -->
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @error="onCardError"
+      >
+        <template v-slot="{ item, selected }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.customerName }}</text>
+            </view>
+             <view class="info-row">
+              <text>框架合同编号</text><text>{{ item.code }}</text>
+            </view>
+             <view class="info-row">
+              <text>是否签订</text><text>{{ item.hasFrameworkAgreement }}</text>
+            </view>
+             <view class="info-row">
+              <text>品种</text><text>{{ item.materialTypeName }}</text>
+            </view>
+             <view class="info-row">
+              <text>授信截至时间</text><text>{{ item.validityTime }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+    <!-- 筛选弹框 -->
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">品种</view>
+            <uni-data-checkbox
+              mode="tag"
+              :multiple="false"
+              :value-field="'value'"
+              :text-field="'text'"
+              v-model="model.materialTypeId"
+              @change="onMaterialTypeChange"
+              :localdata="materialTypeOptions"
+            />
+          </view>
+          <view class="form-item">
+            <view class="label">授权截止时间</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import {getDicByCodes, getDicName} from '@/utils/dic';
+import { queryApi } from '@/api/contract.js'
+import { productVarietyQueryApi } from '@/api/devManage.js'
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+      // 批量选择
+      batchMode: false,    
+      // 给到 card 的筛选值
+      query: {  materialTypeId: '', dateRange: [] },
+      extraParams: {},  
+
+      // 筛选弹框
+      filterVisible: false,
+      filterForm: { materialTypeId: '', dateRange: [] },
+      materialTypeOptions: [],
+    }
+
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  created() {
+    this.getProductVariety();
+  },
+  // 页面触底兜底：当页面自身滚动到底部时，转调卡片组件加载更多
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    // uni-search-bar 确认搜索：更新关键字并触发 CardList 刷新
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    // 输入实时搜索：1200ms 防抖，仅在停止输入超过阈值后刷新
+    onSearchInput(val) {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    // 列表接口（真实请求）
+    fetchList({ pageIndex, pageSize, query, extra }) {
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      // 处理日期范围
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.validityTimeStart = params.dateRange[0] + ' 00:00:00'
+        params.validityTimeEnd = params.dateRange[1] + ' 23:59:59'
+        delete params.dateRange
+      }
+      // 关键字（使用去抖后的值避免频繁触发）
+      if (this.searchKeywordDebounced) {
+        params.customerName = this.searchKeywordDebounced
+      }
+      return queryApi(params)
+        .then(res => {
+          console.log('fetchList', res)
+          const _data = res.data || {};
+          const records = _data.datas || [];
+          const totalCount = _data.totalCount || 0;
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('fetchList error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+        // 保持弹框不关闭，仅同步表单
+        this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+        // 合并筛选值
+        this.query = { ...this.query, ...payload }
+    },
+    onMaterialTypeChange(e) {
+      const raw = e && e.detail && e.detail.value !== undefined
+        ? e.detail.value
+        : (e && e.value !== undefined ? e.value : '')
+      // 直接同步到外层 filterForm，驱动 FilterModal 的 innerModel 更新
+      this.filterForm.materialTypeId = raw
+    },
+
+    onAdd() {
+    //   uni.navigateTo({ url: '/pages/contract_framework/add' })
+    },
+
+
+
+    getProductVariety() {
+      productVarietyQueryApi({ 
+        pageIndex: 1,
+        pageSize: 9999,
+        available: true}).then(res => {
+      const _data = res.data || {};
+      const records = _data.datas || [];
+      this.materialTypeOptions = records.map(item => ({
+        value: item.id,
+        text: item.name
+      }))
+    })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.framework-list-fixed {
+    position: fixed;
+    top: 96rpx;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    background: #fff;
+
+    .search-row { 
+        display: flex; 
+        align-items: center;
+        padding: 16rpx 32rpx;
+        .uni-searchbar {
+            padding: 0;
+            flex: 1;
+        }
+        .tool-icons { 
+            display: flex;
+            .tool-icon { 
+                width: 48rpx; height: 48rpx; display: block; 
+                margin-left: 32rpx;
+            }
+        }
+    }
+    
+   
+}
+/* 仅当前页覆盖 uni-search-bar 盒子高度 */
+::v-deep .uni-searchbar__box { 
+    height: 80rpx !important;
+    justify-content: start;
+    .uni-searchbar__box-search-input {
+        font-size: 32rpx !important; 
+    }
+}
+
+.list-box {
+  flex: 1;
+  padding-top: 112rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+            &.status_1 {
+                background: #3D48A3;
+            }
+            &.status_2 {
+                background: #2BA471;
+            }
+            &.status_3 {
+                background: #D54941;
+            }
+            &.status_4 {
+                background: #E7E7E7;
+                color: #323241;
+            }
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+
+/* 深度覆盖 uni-data-checkbox（mode=tag）内部的 tag 展示与间距 */
+::v-deep .filter-form .uni-data-checklist .checklist-group {
+  .checklist-box {
+    &.is--tag {
+        width: 212rpx;
+        margin-top: 0;
+        margin-bottom: 24rpx;
+        margin-right: 24rpx;
+        height: 80rpx;
+        padding: 0;
+        border-radius: 12rpx;
+        background-color: #f3f3f3;
+        border-color: #f3f3f3;
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        .checklist-content {
+            display: flex;
+            justify-content: center;
+        }
+        .checklist-text {
+            color: rgba(0,0,0,0.9);
+            font-size: 28rpx;
+        }
+    }
+    &.is-checked {
+        background-color: $theme-primary-plain-bg !important;
+        border-color: $theme-primary-plain-bg !important;
+        .checklist-text {
+            color: $theme-primary !important;
+        }
+    }
+  }
+  
+}
+
+
+</style>
\ No newline at end of file

+<template>
+  <view class="page">
+    <view class="contract-list-fixed">
+      <view class="search-row">
+        <uni-search-bar
+          v-model="searchKeyword"
+          radius="6"
+          placeholder="请输入需方名称或编号或办事处"
+          clearButton="auto"
+          cancelButton="none"
+          bgColor="#F3F3F3"
+          textColor="rgba(0,0,0,0.4)"
+          @confirm="search"
+          @input="onSearchInput"
+        />
+        <view class="tool-icons">
+          <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+          <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+        </view>
+      </view>
+
+      <view class="tabs">
+        <view
+          v-for="(t, i) in tabs"
+          :key="i"
+          :class="['tab', { active: status === t.value }]"
+          @click="switchTab(t)"
+        >
+          {{ t.label }}
+        </view>
+      </view>
+    </view>
+
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :selectedKeys.sync="selectedKeys"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @loaded="onCardLoaded"
+        @error="onCardError"
+      >
+        <template v-slot="{ item }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.buyerName }}</text>
+              <text v-if="item.status === 'STANDARD'" :class="['status']" :style="{ background: statusMap[item.shippingStatusName] }">{{ item.shippingStatusName }}</text>
+            </view>
+            <view class="info-row">
+              <text>编号</text><text>{{ item.code }}</text>
+            </view>
+            <view class="info-row">
+              <text>办事处</text><text>{{ item.deptName }}</text>
+            </view>
+            <view class="info-row" v-if="item.status !== 'STANDARD'">
+              <text>订单总额</text><text class="amount" :style="{ color: '#b67a76' }">{{ item.totalAmountIncludingTax ? '¥' : '' }}{{ formatAmount(item.totalAmountIncludingTax) || '-' }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'STANDARD'">
+              <text>正式合同规范性审核状态</text><span class="info-status" :style="item.standardApprovedName ? getStatusCss(item.standardApprovedName) : ''">{{ item.standardApprovedName || '-' }}</span>
+            </view>
+            <view class="info-row">
+              <text>订货日期</text><text>{{ item.orderDate }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">订货日期</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { queryContractApi, statusStyle,statusMap } from '@/api/contract.js'
+import { officeQueryApi } from '@/api/devManage.js'
+
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+
+      tabs: [
+        { label: '草稿合同', value: 'DRAFT' },
+        { label: '标准合同', value: 'STANDARD' },
+        { label: '已删除合同', value: 'DELETED' }
+      ],
+      status: 'DRAFT',
+
+      query: { deptId: '', deptName: '', dateRange: [] },
+      extraParams: {},
+
+      batchMode: false,
+      selectedKeys: [],
+      currentItems: [],
+
+      filterVisible: false,
+      filterForm: { deptId: '', deptName: '', dateRange: [] },
+      deptSelectVisible: false,
+      statusStyle,
+      statusMap,
+    }
+  },
+  computed: {
+    extraCombined() {
+      return {
+        keyword: this.searchKeywordDebounced || undefined,
+        status: this.status || undefined,
+        type: 'PROCESS_STD_AGMT'
+      }
+    }
+  },
+  watch: {
+    extraCombined: {
+      deep: true,
+      handler(v) {
+        this.extraParams = v
+      },
+      immediate: true
+    }
+  },
+  created() {
+  },
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    onCardLoaded({ items }) {
+      this.currentItems = items
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+    onSearchInput() {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    switchTab(item) {
+      this.status = item.value
+    },
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+      this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+      this.query = { ...payload }
+    },
+    openDeptSelect() {
+      this.deptSelectVisible = true
+    },
+    onDeptConfirm(payload) {
+      const val = payload && payload.value != null ? payload.value : ''
+      const label = payload && payload.label != null ? payload.label : ''
+      this.filterForm.deptId = val
+      this.filterForm.deptName = label
+    },
+    toggleBatch() {
+      this.batchMode = !this.batchMode
+      if (!this.batchMode) this.selectedKeys = []
+    },
+    onAdd() {
+      uni.showToast({ title: '点击新增', icon: 'none' })
+    },
+    fetchList({ pageIndex, pageSize, query, extra }) {
+        console.log('fetchList', pageIndex, pageSize, query, extra)
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.orderDateStart = params.dateRange[0]
+        params.orderDateEnd = params.dateRange[1]
+        delete params.dateRange
+      }
+      return queryContractApi(params)
+        .then(res => {
+          const _data = res.data || {}
+          const records = _data.datas || []
+          const totalCount = _data.totalCount || 0
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('queryContractApi error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+
+    formatAmount(val) {
+      if (val == null) return '0.00'
+      try {
+        const num = Number(val)
+        return num.toFixed(2)
+      } catch (e) {
+        return String(val)
+      }
+    },
+    getStatusCss(name) {
+      const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
+      const found = list.find(it => it && it.text === name) || {}
+      return {
+        color: found.color || '#000',
+        backgroundColor: found.bgColor || '#000'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.contract-list-fixed {
+  position: fixed;
+  top: 96rpx;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: #fff;
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    .uni-searchbar { padding: 0; flex: 1; }
+    .tool-icons { display: flex; .tool-icon { width: 48rpx; height: 48rpx; display: block; margin-left: 32rpx; } }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 0;
+    border-bottom: solid 1px #E7E7E7;
+    .tab { width: 50%; text-align: center; color: rgba(0,0,0,0.9); line-height: 44rpx; position: relative; font-weight: 600; }
+    .tab.active { color: $theme-primary; }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -13px;
+      width: 32rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      background: $theme-primary;
+    }
+  }
+}
+::v-deep .uni-searchbar__box { height: 80rpx !important; justify-content: start; .uni-searchbar__box-search-input { font-size: 32rpx !important; } }
+
+.list-box {
+  flex: 1;
+  padding-top: 236rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+            &.status_1 {
+                background: #3D48A3;
+            }
+            &.status_2 {
+                background: #2BA471;
+            }
+            &.status_3 {
+                background: #D54941;
+            }
+            &.status_4 {
+                background: #E7E7E7;
+                color: #323241;
+            }
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        .info-status {
+            padding: 4rpx 12rpx;
+            border-radius: 6rpx;
+            font-size: 24rpx;
+            color: #fff;
+            line-height: 40rpx;
+        }
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+</style>
\ No newline at end of file

+<template>
+  <view class="page">
+    <view class="contract-list-fixed">
+      <view class="search-row">
+        <uni-search-bar
+          v-model="searchKeyword"
+          radius="6"
+          placeholder="请输入需方名称或编号或办事处"
+          clearButton="auto"
+          cancelButton="none"
+          bgColor="#F3F3F3"
+          textColor="rgba(0,0,0,0.4)"
+          @confirm="search"
+          @input="onSearchInput"
+        />
+        <view class="tool-icons">
+          <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+          <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+        </view>
+      </view>
+
+      <view class="tabs">
+        <view
+          v-for="(t, i) in tabs"
+          :key="i"
+          :class="['tab', { active: status === t.value }]"
+          @click="switchTab(t)"
+        >
+          {{ t.label }}
+        </view>
+      </view>
+    </view>
+
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :selectedKeys.sync="selectedKeys"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @loaded="onCardLoaded"
+        @error="onCardError"
+      >
+        <template v-slot="{ item }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.buyerName }}</text>
+              <text v-if="item.status === 'STANDARD'" :class="['status']" :style="{ background: statusMap[item.shippingStatusName] }">{{ item.shippingStatusName }}</text>
+            </view>
+            <view class="info-row">
+              <text>编号</text><text>{{ item.code }}</text>
+            </view>
+            <view class="info-row">
+              <text>办事处</text><text>{{ item.deptName }}</text>
+            </view>
+            <view class="info-row" v-if="item.status !== 'STANDARD'">
+              <text>订单总额</text><text class="amount" :style="{ color: '#b67a76' }">{{ item.totalAmountIncludingTax ? '¥' : '' }}{{ formatAmount(item.totalAmountIncludingTax) || '-' }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'STANDARD'">
+              <text>正式合同规范性审核状态</text><span class="info-status" :style="item.standardApprovedName ? getStatusCss(item.standardApprovedName) : ''">{{ item.standardApprovedName || '-' }}</span>
+            </view>
+            <view class="info-row">
+              <text>订货日期</text><text>{{ item.orderDate }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">订货日期</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { queryContractApi, statusStyle, statusMap } from '@/api/contract.js'
+import { officeQueryApi } from '@/api/devManage.js'
+
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+
+      tabs: [
+        { label: '草稿合同', value: 'DRAFT' },
+        { label: '标准合同', value: 'STANDARD' },
+        { label: '已删除合同', value: 'DELETED' }
+      ],
+      status: 'DRAFT',
+
+      query: { deptId: '', deptName: '', dateRange: [] },
+      extraParams: {},
+
+      batchMode: false,
+      selectedKeys: [],
+      currentItems: [],
+
+      filterVisible: false,
+      filterForm: { deptId: '', deptName: '', dateRange: [] },
+      deptSelectVisible: false,
+      statusStyle,
+      statusMap
+    }
+  },
+  computed: {
+    extraCombined() {
+      return {
+        keyword: this.searchKeywordDebounced || undefined,
+        status: this.status || undefined,
+        type: 'DISTRIB_STD'
+      }
+    }
+  },
+  watch: {
+    extraCombined: {
+      deep: true,
+      handler(v) {
+        this.extraParams = v
+      },
+      immediate: true
+    }
+  },
+  created() {
+  },
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    onCardLoaded({ items }) {
+      this.currentItems = items
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+    onSearchInput() {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    switchTab(item) {
+      this.status = item.value
+    },
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+      this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+      this.query = { ...payload }
+    },
+    openDeptSelect() {
+      this.deptSelectVisible = true
+    },
+    onDeptConfirm(payload) {
+      const val = payload && payload.value != null ? payload.value : ''
+      const label = payload && payload.label != null ? payload.label : ''
+      this.filterForm.deptId = val
+      this.filterForm.deptName = label
+    },
+    toggleBatch() {
+      this.batchMode = !this.batchMode
+      if (!this.batchMode) this.selectedKeys = []
+    },
+    onAdd() {
+      uni.showToast({ title: '点击新增', icon: 'none' })
+    },
+    fetchList({ pageIndex, pageSize, query, extra }) {
+        console.log('fetchList', pageIndex, pageSize, query, extra)
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.orderDateStart = params.dateRange[0]
+        params.orderDateEnd = params.dateRange[1]
+        delete params.dateRange
+      }
+      return queryContractApi(params)
+        .then(res => {
+          const _data = res.data || {}
+          const records = _data.datas || []
+          const totalCount = _data.totalCount || 0
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('queryContractApi error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+
+    formatAmount(val) {
+      if (val == null) return '0.00'
+      try {
+        const num = Number(val)
+        return num.toFixed(2)
+      } catch (e) {
+        return String(val)
+      }
+    },
+    getStatusCss(name) {
+      const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
+      const found = list.find(it => it && it.text === name) || {}
+      return {
+        color: found.color || '#000',
+        backgroundColor: found.bgColor || '#000'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.contract-list-fixed {
+  position: fixed;
+  top: 96rpx;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: #fff;
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    .uni-searchbar { padding: 0; flex: 1; }
+    .tool-icons { display: flex; .tool-icon { width: 48rpx; height: 48rpx; display: block; margin-left: 32rpx; } }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 0;
+    border-bottom: solid 1px #E7E7E7;
+    .tab { width: 50%; text-align: center; color: rgba(0,0,0,0.9); line-height: 44rpx; position: relative; font-weight: 600; }
+    .tab.active { color: $theme-primary; }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -13px;
+      width: 32rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      background: $theme-primary;
+    }
+  }
+}
+::v-deep .uni-searchbar__box { height: 80rpx !important; justify-content: start; .uni-searchbar__box-search-input { font-size: 32rpx !important; } }
+
+.list-box {
+  flex: 1;
+  padding-top: 236rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+            &.status_1 {
+                background: #3D48A3;
+            }
+            &.status_2 {
+                background: #2BA471;
+            }
+            &.status_3 {
+                background: #D54941;
+            }
+            &.status_4 {
+                background: #E7E7E7;
+                color: #323241;
+            }
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        .info-status {
+            padding: 4rpx 12rpx;
+            border-radius: 6rpx;
+            font-size: 24rpx;
+            color: #fff;
+            line-height: 40rpx;
+        }
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+</style>
\ No newline at end of file

+<template>
+  <view class="page">
+    <view class="contract-list-fixed">
+      <view class="search-row">
+        <uni-search-bar
+          v-model="searchKeyword"
+          radius="6"
+          placeholder="请输入需方名称或编号或办事处"
+          clearButton="auto"
+          cancelButton="none"
+          bgColor="#F3F3F3"
+          textColor="rgba(0,0,0,0.4)"
+          @confirm="search"
+          @input="onSearchInput"
+        />
+        <view class="tool-icons">
+          <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+          <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+        </view>
+      </view>
+
+      <view class="tabs">
+        <view
+          v-for="(t, i) in tabs"
+          :key="i"
+          :class="['tab', { active: status === t.value }]"
+          @click="switchTab(t)"
+        >
+          {{ t.label }}
+        </view>
+      </view>
+    </view>
+
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :selectedKeys.sync="selectedKeys"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @loaded="onCardLoaded"
+        @error="onCardError"
+      >
+        <template v-slot="{ item }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.buyerName }}</text>
+              <text v-if="item.status === 'STANDARD'" :class="['status']" :style="{ background: statusMap[item.shippingStatusName] }">{{ item.shippingStatusName }}</text>
+            </view>
+            <view class="info-row">
+              <text>编号</text><text>{{ item.code }}</text>
+            </view>
+            <view class="info-row">
+              <text>办事处</text><text>{{ item.deptName }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'DRAFT' || item.status === 'DELETED'">
+              <text>订单总额</text><text class="amount" :style="{ color: '#b67a76' }">¥{{ formatAmount(item.totalAmountIncludingTax) }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'STANDARD' || item.status === 'FORMAL'">
+              <text>{{ item.status === 'STANDARD' ? '标准合同' : '正式合同' }}规范性审核状态</text><span class="info-status" :style="getStatusCss(item.standardApprovedName)">{{ item.standardApprovedName }}</span>
+            </view>
+            <view class="info-row">
+              <text>订货日期</text><text>{{ item.orderDate }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">订货日期</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { queryContractApi, statusStyle,statusMap } from '@/api/contract.js'
+import { officeQueryApi } from '@/api/devManage.js'
+
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+
+      tabs: [
+        { label: '草稿合同', value: 'DRAFT' },
+        { label: '正式合同', value: 'FORMAL' },
+        { label: '标准合同', value: 'STANDARD' },
+        { label: '已删除合同', value: 'DELETED' }
+      ],
+      status: 'DRAFT',
+
+      query: { deptId: '', deptName: '', dateRange: [] },
+      extraParams: {},
+
+      batchMode: false,
+      selectedKeys: [],
+      currentItems: [],
+
+      filterVisible: false,
+      filterForm: { deptId: '', deptName: '', dateRange: [] },
+      deptSelectVisible: false,
+      statusStyle,
+      statusMap,
+    }
+  },
+  computed: {
+    extraCombined() {
+      return {
+        keyword: this.searchKeywordDebounced || undefined,
+        status: this.status || undefined,
+        type: 'DIST_STOCK_CONTRACT'
+      }
+    }
+  },
+  watch: {
+    extraCombined: {
+      deep: true,
+      handler(v) {
+        this.extraParams = v
+      },
+      immediate: true
+    }
+  },
+  created() {
+  },
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    onCardLoaded({ items }) {
+      this.currentItems = items
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+    onSearchInput() {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    switchTab(item) {
+      this.status = item.value
+    },
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+      this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+      this.query = { ...payload }
+    },
+    openDeptSelect() {
+      this.deptSelectVisible = true
+    },
+    onDeptConfirm(payload) {
+      const val = payload && payload.value != null ? payload.value : ''
+      const label = payload && payload.label != null ? payload.label : ''
+      this.filterForm.deptId = val
+      this.filterForm.deptName = label
+    },
+    toggleBatch() {
+      this.batchMode = !this.batchMode
+      if (!this.batchMode) this.selectedKeys = []
+    },
+    onAdd() {
+      uni.showToast({ title: '点击新增', icon: 'none' })
+    },
+    fetchList({ pageIndex, pageSize, query, extra }) {
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.orderDateStart = params.dateRange[0]
+        params.orderDateEnd = params.dateRange[1]
+        delete params.dateRange
+      }
+      return queryContractApi(params)
+        .then(res => {
+          const _data = res.data || {}
+          const records = _data.datas || []
+          const totalCount = _data.totalCount || 0
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('queryContractApi error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+
+    formatAmount(val) {
+      if (val == null) return '0.00'
+      try {
+        const num = Number(val)
+        return num.toFixed(2)
+      } catch (e) {
+        return String(val)
+      }
+    },
+    getStatusCss(name) {
+      const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
+      const found = list.find(it => it && it.text === name) || {}
+      return {
+        color: found.color || '#000',
+        backgroundColor: found.bgColor || '#000'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.contract-list-fixed {
+  position: fixed;
+  top: 96rpx;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: #fff;
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    .uni-searchbar { padding: 0; flex: 1; }
+    .tool-icons { display: flex; .tool-icon { width: 48rpx; height: 48rpx; display: block; margin-left: 32rpx; } }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 0;
+    border-bottom: solid 1px #E7E7E7;
+    .tab { width: 50%; text-align: center; color: rgba(0,0,0,0.9); line-height: 44rpx; position: relative; font-weight: 600; }
+    .tab.active { color: $theme-primary; }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -13px;
+      width: 32rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      background: $theme-primary;
+    }
+  }
+}
+::v-deep .uni-searchbar__box { height: 80rpx !important; justify-content: start; .uni-searchbar__box-search-input { font-size: 32rpx !important; } }
+
+.list-box {
+  flex: 1;
+  padding-top: 236rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+            &.status_1 {
+                background: #3D48A3;
+            }
+            &.status_2 {
+                background: #2BA471;
+            }
+            &.status_3 {
+                background: #D54941;
+            }
+            &.status_4 {
+                background: #E7E7E7;
+                color: #323241;
+            }
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        .info-status {
+            padding: 4rpx 12rpx;
+            border-radius: 6rpx;
+            font-size: 24rpx;
+            color: #fff;
+            line-height: 40rpx;
+        }
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+</style>
\ No newline at end of file

+<template>
+  <view class="page">
+    <view class="contract-list-fixed">
+      <view class="search-row">
+        <uni-search-bar
+          v-model="searchKeyword"
+          radius="6"
+          placeholder="请输入需方名称或编号或办事处"
+          clearButton="auto"
+          cancelButton="none"
+          bgColor="#F3F3F3"
+          textColor="rgba(0,0,0,0.4)"
+          @confirm="search"
+          @input="onSearchInput"
+        />
+        <view class="tool-icons">
+          <image class="tool-icon" src="/static/images/dev_manage/add_icon.png" @click="onAdd" />
+          <image class="tool-icon" src="/static/images/dev_manage/filter_icon.png" @click="openFilter" />
+        </view>
+      </view>
+
+      <view class="tabs">
+        <view
+          v-for="(t, i) in tabs"
+          :key="i"
+          :class="['tab', { active: status === t.value }]"
+          @click="switchTab(t)"
+        >
+          {{ t.label }}
+        </view>
+      </view>
+    </view>
+
+    <view :class="['list-box', { 'pad-batch': batchMode }]">
+      <card-list
+        ref="cardRef"
+        :fetch-fn="fetchList"
+        :query="query"
+        :extra="extraParams"
+        :selectable="batchMode"
+        row-key="id"
+        :selectedKeys.sync="selectedKeys"
+        :enable-refresh="true"
+        :enable-load-more="true"
+        @loaded="onCardLoaded"
+        @error="onCardError"
+      >
+        <template v-slot="{ item }">
+          <view class="card">
+            <view class="card-header">
+              <text class="title omit2">{{ item.buyerName }}</text>
+              <text v-if="item.status === 'STANDARD'" :class="['status']" :style="{ background: statusMap[item.shippingStatusName] }">{{ item.shippingStatusName }}</text>
+            </view>
+            <view class="info-row">
+              <text>编号</text><text>{{ item.code }}</text>
+            </view>
+            <view class="info-row">
+              <text>办事处</text><text>{{ item.deptName }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'DRAFT' || item.status === 'DELETED'">
+              <text>订单总额</text><text class="amount" :style="{ color: '#b67a76' }">{{ item.totalAmountIncludingTax ? '¥' : '' }}{{ formatAmount(item.totalAmountIncludingTax) || '-' }}</text>
+            </view>
+            <view class="info-row" v-if="item.status === 'STANDARD' || item.status === 'FORMAL'">
+              <text>{{ item.status === 'STANDARD' ? '标准合同' : '正式合同' }}规范性审核状态</text><span class="info-status" :style="item.standardApprovedName ? getStatusCss(item.standardApprovedName) : ''">{{ item.standardApprovedName || '-' }}</span>
+            </view>
+            <view class="info-row">
+              <text>订货日期</text><text>{{ item.orderDate }}</text>
+            </view>
+          </view>
+        </template>
+      </card-list>
+    </view>
+
+    <filter-modal
+      :visible.sync="filterVisible"
+      :value.sync="filterForm"
+      title="筛选"
+      @reset="onFilterReset"
+      @confirm="onFilterConfirm"
+    >
+      <template v-slot="{ model }">
+        <view class="filter-form">
+          <view class="form-item">
+            <view class="label">订货日期</view>
+            <uni-datetime-picker type="daterange" v-model="model.dateRange" start="2023-01-01" />
+          </view>
+        </view>
+      </template>
+    </filter-modal>
+
+  </view>
+</template>
+
+<script>
+import CardList from '@/components/card/index.vue'
+import FilterModal from '@/components/filter/index.vue'
+import { queryContractApi, statusStyle,statusMap } from '@/api/contract.js'
+import { officeQueryApi } from '@/api/devManage.js'
+
+export default {
+  components: { CardList, FilterModal },
+  data() {
+    return {
+      searchKeyword: '',
+      searchKeywordDebounced: '',
+
+      tabs: [
+        { label: '草稿合同', value: 'DRAFT' },
+        { label: '正式合同', value: 'FORMAL' },
+        { label: '标准合同', value: 'STANDARD' },
+        { label: '已删除合同', value: 'DELETED' }
+      ],
+      status: 'DRAFT',
+
+      query: { deptId: '', deptName: '', dateRange: [] },
+      extraParams: {},
+
+      batchMode: false,
+      selectedKeys: [],
+      currentItems: [],
+
+      filterVisible: false,
+      filterForm: { deptId: '', deptName: '', dateRange: [] },
+      deptSelectVisible: false,
+      statusStyle,
+      statusMap,
+    }
+  },
+  computed: {
+    extraCombined() {
+      return {
+        keyword: this.searchKeywordDebounced || undefined,
+        status: this.status || undefined,
+        type: 'DRAFT_DIST_AGMT'
+      }
+    }
+  },
+  watch: {
+    extraCombined: {
+      deep: true,
+      handler(v) {
+        this.extraParams = v
+      },
+      immediate: true
+    }
+  },
+  created() {
+  },
+  onReachBottom() {
+    if (this.$refs && this.$refs.cardRef && this.$refs.cardRef.onLoadMore) {
+      this.$refs.cardRef.onLoadMore()
+    }
+  },
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+  methods: {
+    onCardLoaded({ items }) {
+      this.currentItems = items
+    },
+    onCardError() {
+      uni.showToast({ title: '列表加载失败', icon: 'none' })
+    },
+    onSearchInput() {
+      if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = setTimeout(() => {
+        this.searchKeywordDebounced = this.searchKeyword
+        this.searchDebounceTimer = null
+      }, 1200)
+    },
+    search(e) {
+      const val = e && e.value != null ? e.value : this.searchKeyword
+      this.searchKeyword = val
+      this.searchKeywordDebounced = val
+    },
+    switchTab(item) {
+      this.status = item.value
+    },
+    openFilter() {
+      this.filterVisible = true
+    },
+    onFilterReset(payload) {
+      this.filterForm = payload
+    },
+    onFilterConfirm(payload) {
+      this.query = { ...payload }
+    },
+    openDeptSelect() {
+      this.deptSelectVisible = true
+    },
+    onDeptConfirm(payload) {
+      const val = payload && payload.value != null ? payload.value : ''
+      const label = payload && payload.label != null ? payload.label : ''
+      this.filterForm.deptId = val
+      this.filterForm.deptName = label
+    },
+    toggleBatch() {
+      this.batchMode = !this.batchMode
+      if (!this.batchMode) this.selectedKeys = []
+    },
+    onAdd() {
+      uni.showToast({ title: '点击新增', icon: 'none' })
+    },
+    fetchList({ pageIndex, pageSize, query, extra }) {
+      const params = { pageIndex, pageSize, ...extra, ...query }
+      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
+        params.orderDateStart = params.dateRange[0]
+        params.orderDateEnd = params.dateRange[1]
+        delete params.dateRange
+      }
+      return queryContractApi(params)
+        .then(res => {
+          const _data = res.data || {}
+          const records = _data.datas || []
+          const totalCount = _data.totalCount || 0
+          const hasNext = _data.hasNext || false
+          return { records, totalCount, hasNext }
+        })
+        .catch(err => {
+          console.error('queryContractApi error', err)
+          this.onCardError()
+          return { records: [], totalCount: 0, hasNext: false }
+        })
+    },
+
+    formatAmount(val) {
+      if (val == null) return '0.00'
+      try {
+        const num = Number(val)
+        return num.toFixed(2)
+      } catch (e) {
+        return String(val)
+      }
+    },
+    getStatusCss(name) {
+      const list = Array.isArray(this.statusStyle) ? this.statusStyle : []
+      const found = list.find(it => it && it.text === name) || {}
+      return {
+        color: found.color || '#000',
+        backgroundColor: found.bgColor || '#000'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.contract-list-fixed {
+  position: fixed;
+  top: 96rpx;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: #fff;
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    .uni-searchbar { padding: 0; flex: 1; }
+    .tool-icons { display: flex; .tool-icon { width: 48rpx; height: 48rpx; display: block; margin-left: 32rpx; } }
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 0;
+    border-bottom: solid 1px #E7E7E7;
+    .tab { width: 50%; text-align: center; color: rgba(0,0,0,0.9); line-height: 44rpx; position: relative; font-weight: 600; }
+    .tab.active { color: $theme-primary; }
+    .tab.active::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -13px;
+      width: 32rpx;
+      height: 6rpx;
+      border-radius: 4rpx;
+      background: $theme-primary;
+    }
+  }
+}
+::v-deep .uni-searchbar__box { height: 80rpx !important; justify-content: start; .uni-searchbar__box-search-input { font-size: 32rpx !important; } }
+
+.list-box {
+  flex: 1;
+  padding-top: 236rpx;
+  &.pad-batch { padding-bottom: 144rpx; }
+    .card { position: relative; }
+    .card-header {
+        margin-bottom: 28rpx;
+        position: relative;
+
+        .title {
+            font-size: 36rpx;
+            font-weight: 600;
+            line-height: 50rpx;
+            color: #323241;
+            width: 578rpx;
+        }
+
+        .status {
+            font-size: 30rpx;
+            font-weight: 600;
+            position: absolute;
+            top: -36rpx;
+            right: -32rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            color: #fff;
+            font-size: 24rpx;
+            padding: 0 14rpx;
+            border-radius: 6rpx;
+            &.status_1 {
+                background: #3D48A3;
+            }
+            &.status_2 {
+                background: #2BA471;
+            }
+            &.status_3 {
+                background: #D54941;
+            }
+            &.status_4 {
+                background: #E7E7E7;
+                color: #323241;
+            }
+        }
+    }
+    .info-row {
+        display: flex;
+        align-items: center;
+        color: rgba(0,0,0,0.6);
+        font-size: 28rpx;
+        margin-bottom: 24rpx;
+        height: 32rpx;
+        .info-status {
+            padding: 4rpx 12rpx;
+            border-radius: 6rpx;
+            font-size: 24rpx;
+            color: #fff;
+            line-height: 40rpx;
+        }
+        &:last-child {
+        margin-bottom: 0;
+        }
+        text {
+            width: 60%;
+            &:last-child {
+                color: rgba(0,0,0,0.9);
+                width: 40%;
+            }
+        }
+    }
+}
+
+.filter-form { 
+    .form-item { margin-bottom: 24rpx; }
+    .label { 
+        margin-bottom: 20rpx; 
+        color: rgba(0,0,0,0.9);
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 30rpx;
+     }
+    .fake-select { 
+        height: 80rpx; line-height: 80rpx; padding: 0 20rpx; background: #f3f3f3; border-radius: 12rpx; 
+        .placeholder { color: #999; }
+        .value { color: #333; }
+    }
+}
+</style>
\ No newline at end of file

@@ -86,7 +86,7 @@
                 link: '/pages/contract_stock/index'
               },
               {
-                  text: '经销未规划合同',
+				text: '经销未锁规合同',
                 icon: '/static/images/index/contract_unplan.png',
                 link: '/pages/contract_unplan/index'
               },
@@ -106,7 +106,7 @@
                 link: '/pages/contract_foreign_stock/index'
               },
               {
-                text: '外贸未规划合同',
+                text: '外贸未锁规合同',
                 icon: '/static/images/index/contract_foreign_unplan.png',
                 link: '/pages/contract_foreign_unplan/index'
               },