绿色回收充值

api/views/recycling/index.js

@@ -0,0 +1,58 @@
+import http from '@/http/api.js'
+
+export function submitRecycling(data) {
+    return http.request({
+        url: '/blade-sales-part/green/recycling/save',
+        method: 'post',
+        data
+    })
+}
+
+export function updateRecycling(data) {
+    return http.request({
+        url: '/blade-sales-part/green/recycling/update',
+        method: 'post',
+        data
+    })
+}
+
+
+export function getPageList(data) {
+    return http.request({
+        url: '/blade-sales-part/green/recycling/page',
+        method: 'get',
+        params: data
+    })
+}
+
+
+export function getDetail(data) {
+    return http.request({
+        url: '/blade-sales-part/green/recycling/detail?id=' + data,
+        method: 'get'
+    })
+}
+
+
+export function getCustomerPageList(data) {
+    return http.request({
+        url: '/blade-sales-part/corpsDesc/page',
+        method: 'get',
+        params: data
+    })
+}
+
+
+export function delGreenRecycling(data) {
+    return http.request({
+        url: '/blade-sales-part/green/recycling/delGreenRecycling?id=' + data,
+        method: 'post'
+    })
+}
+
+export function greenRecyclingGoods() {
+    return http.request({
+        url: '/blade-sales-part/green/recycling/greenRecyclingGoods',
+        method: 'post'
+    })
+}

pages.json

@@ -503,6 +503,16 @@
 				"style": {
 					"navigationBarTitleText": "客户分析详情"
 				}
+			}, {
+				"path": "recycling/index",
+				"style": {
+					"navigationBarTitleText": "绿色回收列表"
+				}
+			}, {
+				"path": "recycling/details",
+				"style": {
+					"navigationBarTitleText": "绿色回收详情"
+				}
 			}
 		]
 	}],
@@ -545,7 +555,7 @@
 			// 	"iconPath": "static/images/tabBar/news.png",
 			// 	"selectedIconPath": "static/images/tabBar/news_selected.png",
 			// 	"text": "消息"
-			// }, 
+			// },
 			{
 				"pagePath": "pages/tabBar/center",
 				"iconPath": "static/images/tabBar/my.png",
@@ -554,4 +564,4 @@
 			}
 		]
 	}
-}
+}

pages/tabBar/home.vue

@@ -111,7 +111,7 @@
 					// 		url: "../../static/images/view/home/desktop/customer.png",
 					// 		text: "客户信息",
 					// 		value: "customer"
-					// }, 
+					// },
 					// {
 					// 	url: "../../static/images/view/home/desktop/visit.png",
 					// 	text: "拜访记录",
@@ -186,6 +186,13 @@
 						value: "customerAnalysis",
 						inShow: true,
 					},
+          {
+            url: "../../static/images/view/home/desktop/green-recycling.png",
+            text: "绿色回收",
+            badgeShow: false,
+            value: "greenRecycling",
+            inShow: true,
+          }
 					// {
 					// 	url: "../../static/images/view/home/desktop/product.png",
 					// 	text: "上架轮胎",
@@ -389,6 +396,9 @@
 					case "customerAnalysis":
 						uni.$u.route('/pages/views/customerAnalysis/index');
 						break;
+          case "greenRecycling":
+            uni.$u.route('/pages/views/recycling/index');
+            break;
 					default:
 						this.$refs.uToast.success("该功能暂未开发~")
 				}
@@ -456,4 +466,4 @@
 		// font-weight: bold;
 		padding-top: 5rpx;
 	}
-</style>
+</style>

pages/views/recycling/details.vue

@@ -0,0 +1,723 @@
+<template>
+
+  <view class="container">
+
+    <view class="form-section" @click="openPicker">
+      <view class="section-title">选择客户</view>
+      <u-input
+          v-model="formData.customerName"
+          type="select"
+          placeholder="请选择客户"
+          border="bottom"
+          readonly
+      ></u-input>
+    </view>
+
+    <u-popup :show="showCustomerPicker" mode="bottom" @close="closePicker">
+      <!-- 顶部操作栏（渐变背景） -->
+      <view class="picker-header">
+        <text class="header-btn" @click="closePicker">取消</text>
+        <text class="header-title">选择客户</text>
+        <text class="header-btn confirm" @click="confirmSelection">确定</text>
+      </view>
+
+      <!-- 搜索框（带防抖） -->
+      <view class="search-box">
+        <u-search
+            v-model="searchKeyword"
+            placeholder="输入客户姓名搜索"
+            shape="round"
+            clearable
+            :showAction="true" actionText="搜索"
+            @search="handleSearch"
+            @custom="handleSearch"
+            @clear="resetSearch"
+        ></u-search>
+      </view>
+
+      <!-- 客户列表 -->
+      <scroll-view
+          scroll-y
+          class="customer-list"
+          :style="{height: listHeight + 'px'}"
+          @scrolltolower="loadMore"
+      >
+        <view
+            v-for="(item, index) in dataList"
+            :key="index"
+            class="customer-card"
+            :class="{active: selectedIndex === index}"
+            @click="selectItem(index)"
+        >
+          <text class="customer-name">{{ item.cname }}</text>
+          <u-icon
+              v-if="selectedIndex === index"
+              name="checkmark-circle-fill"
+              color="#2979ff"
+              size="36"
+          ></u-icon>
+        </view>
+
+        <!-- 加载状态 -->
+        <u-loadmore
+            :status="loading ? 'loading' : (isLastPage ? 'nomore' : 'loadmore')"
+            marginTop="20"
+            marginBottom="20"
+        />
+      </scroll-view>
+    </u-popup>
+
+    <scroll-view scroll-y class="goods-list">
+      <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
+        <view class="goods-info">
+          <text class="goods-name">{{ item.productName }}</text>
+          <text class="goods-price">¥{{ item.productPrice }}</text>
+        </view>
+        <view class="quantity-section">
+          <u-number-box
+              v-model="item.productQuantity"
+              :min="0"
+              integer
+              class="quantity-box"
+          ></u-number-box>
+          <view class="amount-box">
+            <text class="amount-symbol">¥</text>
+            <text class="amount-number">{{ (item.productPrice * item.productQuantity).toFixed(2) }}</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view class="total-section">
+      <text class="total-label">总金额：</text>
+      <view class="total-amount-box">
+        <text class="total-symbol">¥</text>
+        <text class="total-number">{{ totalAmount.toFixed(2) }}</text>
+      </view>
+    </view>
+
+    <view class="form-section">
+      <view class="section-title">备注信息</view>
+      <u-textarea
+          v-model="formData.remark"
+          placeholder="请输入备注(最多200字)"
+          :maxlength="200"
+          auto-height
+          confirm-type="done"
+          :count="true"
+          :height="180"
+          class="remark-textarea"
+          placeholder-class="placeholder-style"
+      ></u-textarea>
+    </view>
+    <view class="form-section">
+      <view class="section-title">上传图片(最多3张)</view>
+      <u-upload
+          :fileList="fileList"
+          @afterRead="afterRead"
+          @delete="deletePic"
+          multiple
+          maxCount="3"
+          :previewFullImage="true"
+          uploadIcon="plus"
+          uploadIconColor="#999"
+          deletable
+          :previewImage="true"
+          class="upload-area"
+      >
+        <template #default>
+          <view class="upload-tip">点击或拖拽上传图片</view>
+        </template>
+      </u-upload>
+    </view>
+    <view class="submit-section" v-if="!this.formData.status || this.formData.status !== 2">
+      <button
+          class="submit-btn"
+          :disabled="totalAmount <= 0 || !formData.customerId"
+          @click="clickSubmit"
+      >
+        {{this.formData.id ? '修改回收单' : '提交回收单'}}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  submitRecycling,
+  updateRecycling,
+  getDetail,
+  getCustomerPageList,
+  greenRecyclingGoods
+} from '@/api/views/recycling/index.js'
+import http from '@/http/api.js'
+import {
+  clientId,
+  clientSecret
+} from '@/common/setting'
+
+export default {
+  onLoad(options) {
+    this.formData.id = options.id
+    this.getGoodsList()
+    console.log(options.id);
+  },
+  data() {
+    return {
+      showCustomerPicker: false,
+      searchKeyword: '',
+      dataList: [],       // 当前页数据
+      currentPage: 1,     // 当前页码
+      loading: false,     // 加载状态
+      isLastPage: false,  // 是否最后一页
+      selectedIndex: -1,  // 选中项索引
+      listHeight: 500,     // 滚动区域高度,
+      goodsList: [],
+      fileList: [],
+      formData: {
+        id: null,
+        quantity: null,
+        amount: null,
+        customerId: null,
+        customerName: null,
+        remark: '',
+        imgs: [],
+        greenRecyclingItemList: []
+      },
+
+    }
+  },
+  computed: {
+    totalAmount() {
+      return this.goodsList.reduce((total, item) => {
+        return total + (item.productPrice * item.productQuantity)
+      }, 0)
+    }
+  },
+  methods: {
+    selectItem(index) {
+      this.selectedIndex = index;
+    },
+    async fetchData(reset = false) {
+      if (this.loading) return;
+
+      this.loading = true;
+      try {
+        const params = {
+          current: reset ? 1 : this.currentPage,
+          size: 10,
+          cname: this.searchKeyword,
+          corpType: 'KH'
+        };
+        getCustomerPageList(params).then(res => {
+          console.info('获取数据成功:', res)
+          if (reset) {
+            this.dataList = res.data.records;
+            this.currentPage = 1;
+          } else {
+            this.dataList = [...this.dataList, ...res.data.records];
+          }
+          this.isLastPage = this.currentPage * 10 >= res.data.total;
+        })
+      } catch (error) {
+        console.error('获取数据失败:', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 搜索处理（带防抖）
+    handleSearch() {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.fetchData(true);
+      }, 500);
+    },
+
+    // 加载更多
+    loadMore() {
+      if (!this.isLastPage && !this.loading) {
+        this.currentPage++;
+        this.fetchData();
+      }
+    },
+    calcListHeight() {
+      uni.getSystemInfo({
+        success: (res) => {
+          // 顶部操作栏88 + 搜索框60 + 底部安全区30
+          this.listHeight = res.windowHeight - 88 - 60 - 30;
+        }
+      });
+    },
+    // 重置搜索
+    resetSearch() {
+      this.searchKeyword = '';
+    },
+    openPicker() {
+      this.showCustomerPicker = true;
+      this.calcListHeight();
+      this.fetchData(true)
+    },
+    confirmSelection() {
+      if (this.selectedIndex >= 0) {
+        const selected = this.dataList[this.selectedIndex];
+        console.info('selected----', selected)
+        this.formData.customerId = selected.id
+        this.formData.customerName = selected.cname
+        this.$emit('selected', selected);
+      }
+      this.closePicker();
+    },
+    closePicker() {
+      this.showCustomerPicker = false;
+    },
+    async afterRead(event) {
+      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+      let lists = [].concat(event.file)
+      let fileListLen = this[`fileList${event.name}`].length
+      lists.map((item) => {
+        this[`fileList${event.name}`].push({
+          ...item,
+        })
+      })
+      for (let i = 0; i < lists.length; i++) {
+        const result = await this.uploadFilePromise(lists[i].url)
+        let item = this[`fileList${event.name}`][fileListLen]
+        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+          sort: this.fileList.length,
+          fileName: JSON.parse(result).data.originalName,
+          url: JSON.parse(result).data.link
+        }))
+        fileListLen++
+      }
+    },
+    deletePic(event) {
+      this.fileList.splice(event.index, 1)
+    },
+    orderDetail(){
+      if (!this.formData.id) {
+        return
+      }
+      getDetail(this.formData.id).then(res => {
+        this.formData = res.data
+        this.fileList = JSON.parse(this.formData.imgs)
+        for (let itemNum in res.data.greenRecyclingItemList) {
+          let nowItem = res.data.greenRecyclingItemList[itemNum]
+          console.info(nowItem)
+          let nowGoods = this.goodsList.findIndex(item => item.productName === nowItem.productName)
+          console.info(nowGoods)
+          if (nowGoods !== -1) {
+            this.goodsList[nowGoods].productQuantity = nowItem.productQuantity
+            this.goodsList[nowGoods].productPrice = nowItem.productPrice
+            continue
+          }
+          this.goodsList.push(nowItem)
+        }
+      })
+    },
+    clickSubmit() {
+      if (this.totalAmount <= 0) return;
+      this.formData.quantity = this.goodsList.reduce((sum, item) => sum + item.productQuantity, 0);
+      this.formData.amount = this.totalAmount
+      this.formData.greenRecyclingItemList = this.goodsList.filter(item => item.productQuantity > 0)
+      this.formData.imgs = JSON.stringify(this.fileList)
+      if (this.formData.id) {
+        this.handleUpdate()
+        return;
+      }
+      this.handleSubmit()
+    },
+    handleSubmit() {
+      uni.showLoading({title: '提交中...'});
+      submitRecycling(this.formData).then(res => {
+        console.info(res)
+        this.formData.id = res.data
+        uni.showToast({title: '提交成功'});
+      }).finally(() => {
+        uni.hideLoading();
+      })
+    },
+    handleUpdate() {
+      uni.showLoading({title: '提交中...'});
+      this.formData.greenRecyclingItemList = this.goodsList.filter(item => item.productQuantity > 0)
+      updateRecycling(this.formData).then(res => {
+        console.info(res)
+        // this.formData.id = res.data
+        uni.showToast({title: '修改成功'});
+      }).finally(() => {
+        uni.hideLoading();
+      })
+    },
+    uploadFilePromise(url) {
+      return new Promise((resolve, reject) => {
+        let a = uni.uploadFile({
+          url: http.config.baseURL +
+              '/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
+          filePath: url,
+          name: 'file',
+          formData: {
+            user: 'test'
+          },
+          header: {
+            // 客户端认证参数
+            'Authorization': 'Basic ' + Base64.encode(clientId + ':' +
+                clientSecret),
+            'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
+          },
+          success: (res) => {
+            setTimeout(() => {
+              resolve(res.data)
+            }, 1000)
+          }
+        });
+      })
+    },
+    getGoodsList(){
+      greenRecyclingGoods().then(res => {
+        for(let num in res.data){
+          this.goodsList.push( {
+            productName:  res.data[num].dictValue,
+            productPrice: res.data[num].dictKey,
+            productQuantity: 0
+          })
+        }
+        this.orderDetail()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 20rpx;
+  background-color: #f8f8f8;
+  /* 按钮高度 + 边距 */
+  padding-bottom: 120rpx;
+
+}
+
+.goods-list {
+  height: 30vh;
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 20rpx;
+}
+
+.goods-list::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.goods-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #eee;
+}
+
+.goods-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.goods-name {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.goods-price {
+  font-size: 32rpx;
+  color: #f56c6c;
+  margin-top: 10rpx;
+}
+
+.quantity-box {
+  width: 200rpx;
+}
+
+.form-section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-top: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  margin-bottom: 20rpx;
+  position: relative;
+  padding-left: 16rpx;
+}
+
+.section-title::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4rpx;
+  height: 24rpx;
+  background-color: #2979ff;
+  border-radius: 2rpx;
+}
+
+.remark-textarea {
+  background-color: #f8f8f8;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  font-size: 28rpx;
+}
+
+.placeholder-style {
+  color: #b2b2b2;
+  font-size: 26rpx;
+}
+
+.upload-area {
+  margin-top: 20rpx;
+}
+
+.upload-tip {
+  color: #999;
+  font-size: 26rpx;
+  text-align: center;
+  padding: 20rpx 0;
+}
+
+/* 调整计数器样式 */
+/deep/ .u-textarea__count {
+  color: #999;
+  font-size: 24rpx;
+}
+
+/* 美化已上传图片的样式 */
+/deep/ .u-upload__wrap__preview__image {
+  border-radius: 8rpx;
+}
+
+/deep/ .u-upload__wrap__preview__mask {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 8rpx;
+}
+
+
+.quantity-section {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.amount-box {
+  display: flex;
+  align-items: baseline;
+  min-width: 140rpx;
+  padding: 10rpx 20rpx;
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+  justify-content: flex-end;
+}
+
+.amount-symbol {
+  font-size: 24rpx;
+  color: #f56c6c;
+  margin-right: 4rpx;
+}
+
+.amount-number {
+  font-size: 28rpx;
+  color: #f56c6c;
+  font-weight: 500;
+}
+
+.total-section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-top: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.total-amount-box {
+  display: flex;
+  align-items: baseline;
+}
+
+.total-symbol {
+  font-size: 28rpx;
+  color: #f56c6c;
+  margin-right: 6rpx;
+}
+
+.total-number {
+  font-size: 36rpx;
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+.total-label {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+
+.submit-section {
+  position: fixed;
+  bottom: 30rpx;
+  left: 0;
+  right: 0;
+  padding: 0 30rpx;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 80rpx;
+  background: linear-gradient(90deg, #2979ff, #4facfe);
+  color: white;
+  font-size: 32rpx;
+  border-radius: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+
+  &[disabled] {
+    background: #c8c9cc;
+    box-shadow: none;
+  }
+}
+
+
+
+/* 调整输入框样式 */
+/deep/ .u-input__content__field-wrapper__field {
+  font-size: 28rpx !important;
+  color: #333 !important;
+}
+
+/* 搜索框区域样式 */
+.search-box {
+  padding: 20rpx;
+  background: #fff;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+
+/* 空状态提示 */
+.empty-tip {
+  padding-top: 100rpx;
+}
+
+/* 顶部操作栏（渐变背景） */
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  background: linear-gradient(135deg, #2979ff 0%, #4facfe 100%);
+  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
+
+  .header-title {
+    font-size: 34rpx;
+    font-weight: 500;
+    color: #fff;
+    letter-spacing: 1rpx;
+  }
+
+  .header-btn {
+    font-size: 30rpx;
+    color: rgba(255,255,255,0.9);
+    padding: 8rpx 16rpx;
+    border-radius: 40rpx;
+
+    &.confirm {
+      background: rgba(255,255,255,0.2);
+    }
+  }
+}
+
+/* 客户列表（卡片式设计） */
+.customer-list {
+  background-color: #f8f8f8;
+  padding: 20rpx;
+}
+
+.customer-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 28rpx 32rpx;
+  margin: 0 20rpx 20rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &.active {
+    border: 1rpx solid #2979ff;
+    box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.3);
+  }
+
+  .customer-name {
+    font-size: 32rpx;
+    color: #333;
+    flex: 1;
+  }
+
+  .check-mark {
+    width: 44rpx;
+    height: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(41, 121, 255, 0.1);
+    border-radius: 50%;
+  }
+}
+
+.card-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 28rpx 32rpx;
+
+  .customer-name {
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 500;
+    letter-spacing: 0.5rpx;
+  }
+
+  .check-mark {
+    width: 44rpx;
+    height: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(41, 121, 255, 0.1);
+    border-radius: 50%;
+  }
+}
+
+.card-divider {
+  height: 1rpx;
+  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
+  margin: 0 32rpx;
+}
+
+</style>

pages/views/recycling/index.vue

@@ -0,0 +1,428 @@
+<template>
+  <view class="container">
+    <!-- 固定在顶部的筛选区域 -->
+    <view class="filter-header">
+      <view class="filter-controls">
+        <view class="date-picker">
+          <picker mode="date" @change="bindStartDateChange">
+            <view class="date-input">
+              <text>{{startDate || '请选择'}}</text>
+              <uni-icons
+                  v-if="startDate"
+                  type="clear"
+                  size="16"
+                  @click="clearStartDate"
+                  style="margin-left: 10rpx">
+              </uni-icons>
+            </view>
+          </picker>
+        </view>
+        <view class="date-picker">
+          <picker mode="date" @change="bindEndDateChange">
+            <view class="date-input">
+              <text>{{endDate || '请选择'}}</text>
+              <uni-icons
+                  v-if="endDate"
+                  type="clear"
+                  size="16"
+                  @click="clearEndDate"
+                  style="margin-left: 10rpx">
+              </uni-icons>
+            </view>
+          </picker>
+        </view>
+        <button class="filter-btn" @click="handleSearch">查询</button>
+      </view>
+    </view>
+
+
+    <!-- 订单列表 -->
+    <scroll-view
+        scroll-y
+        class="list-container"
+        @scrolltolower="loadMore"
+        :scroll-top="scrollTop"
+    >
+        <u-swipe-action
+            ref="swipeAction"
+        >
+          <view
+              v-for="(item, index) in orderList"
+              :key="item.id"
+              class="list-item"
+          >
+          <u-swipe-action-item
+              :options="options"
+              :disabled="item.status === 2"
+              @click="handleSwipeClick(item, index)"
+          >
+            <!-- 原有订单内容 -->
+            <view class="item-header">
+              <text class="order-id">订单号：{{ item.id }}</text>
+              <view :class="['status-badge', getStatusClass(item.status)]">
+                {{ getStatusText(item.status) }}
+              </view>
+            </view>
+            <view class="item-content" @click="checkOrder(item)">
+              <view class="info-row">
+                <text class="info-label">创建时间：</text>
+                <text class="info-value">{{ formatDate(item.createTime) }}</text>
+              </view>
+
+              <view class="info-row">
+                <text class="info-label">总数量：</text>
+                <text class="info-value">{{ item.quantity }}条</text>
+              </view>
+
+              <view class="info-row">
+                <text class="info-label">总金额：</text>
+                <text class="info-value amount">¥{{ item.amount }}</text>
+              </view>
+            </view>
+          </u-swipe-action-item>
+          </view>
+        </u-swipe-action>
+
+
+      <!-- 加载状态提示 -->
+      <view class="loading-tip">
+        <text v-if="loading">加载中...</text>
+        <text v-else-if="noMoreData">没有更多数据了</text>
+      </view>
+    </scroll-view>
+
+    <!-- 新增按钮 -->
+    <u-button class="add-btn" @click="goToAddPage" icon="plus"/>
+  </view>
+</template>
+
+<script>
+import {
+  getPageList,
+  delGreenRecycling
+} from '@/api/views/recycling/index.js'
+export default {
+  data() {
+    return {
+      options: [{
+        text: '删除',
+        style: {
+          backgroundColor: '#FF7F50',
+          color: '#fff'
+        }
+      }],
+      moveIndex: -1,
+      startDate: '',
+      endDate: '',
+      orderList: [],
+      pageNum: 1,
+      pageSize: 10,
+      loading: false,
+      noMoreData: false,
+      scrollTop: 0,
+      isSearching: false
+    }
+  },
+  created() {
+    this.fetchOrderList()
+  },
+  methods: {
+    handleMove(index) {
+      console.info('index-----', index)
+      if (this.moveIndex === index) return;
+      this.moveIndex = index;
+      this.closeOtherActions();
+    },
+    closeOtherActions() {
+      if (this.moveIndex !== -1) {
+        const refName = 'swipeAction' + this.moveIndex;
+        this.$refs[refName]?.[0]?.closeHandler();
+      }
+    },
+    handleSwipeClick(item, index) {
+      uni.showModal({
+        title: '确认删除',
+        content: `确定删除该回收单 ${item.id} 吗？`,
+        success: (res) => {
+          if (res.confirm) {
+            delGreenRecycling(item.id).then(res => {
+              console.info('res-----', res)
+              uni.showToast({ title: res.msg, icon: 'success' });
+              this.handleSearch()
+            })
+          }
+        }
+      });
+    },
+    clearStartDate() {
+      this.startDate = '';
+      // 如果需要触发change事件可以手动调用
+      this.bindStartDateChange({detail: {value: ''}});
+    },
+    clearEndDate() {
+      this.endDate = '';
+      // 如果需要触发change事件可以手动调用
+      this.bindEndDateChange({detail: {value: ''}});
+    },
+    bindStartDateChange(e) {
+      this.startDate = e.detail.value
+    },
+    bindEndDateChange(e) {
+      this.endDate = e.detail.value
+    },
+    checkOrder(row){
+      uni.navigateTo({
+        url: '/pages/views/recycling/details?id=' + row.id
+      })
+    },
+    handleSearch() {
+      this.pageNum = 1
+      this.noMoreData = false
+      this.isSearching = true
+      this.scrollTop = 0
+      this.fetchOrderList()
+    },
+    fetchOrderList() {
+      if (this.loading || this.noMoreData) return
+      this.loading = true
+      let params = {
+        current: this.pageNum,
+        size: this.pageSize,
+        startDate: this.startDate,
+        endDate: this.endDate
+      }
+      getPageList(params).then(res => {
+        if (this.isSearching) {
+          this.orderList = res.data.records
+          this.isSearching = false
+        } else {
+          this.orderList = [...this.orderList, ...res.data.records]
+        }
+        this.noMoreData = this.pageNum * this.pageSize >= res.data.total;
+        this.pageNum++
+
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    loadMore() {
+      if (!this.loading && !this.noMoreData) {
+        this.fetchOrderList()
+      }
+    },
+    goToAddPage() {
+      uni.navigateTo({
+        url: '/pages/views/recycling/details'
+      })
+    },
+    formatDate(dateStr) {
+      return dateStr.replace(' ', '  ')
+    },
+    getStatusText(status) {
+      const statusMap = {
+        0: '待审批',
+        2: '已通过',
+        1: '已拒绝'
+      }
+      return statusMap[status] || ''
+    },
+    getStatusClass(status) {
+      const classMap = {
+        0: 'status-pending',
+        2: 'status-approved',
+        1: 'status-rejected'
+      }
+      return classMap[status] || ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 0;
+  background-color: #f8f8f8;
+  min-height: 100vh;
+  position: relative;
+}
+
+/* 筛选区域优化 */
+.filter-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #fff;
+  padding: 15rpx 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+
+.filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 15rpx;
+  padding: 10rpx 0;
+}
+
+.date-picker {
+  flex: 1;
+
+  .date-input {
+    background: #f8f8f8;
+    border-radius: 8rpx;
+    padding: 18rpx 20rpx;
+    font-size: 28rpx;
+    color: #333;
+    text-align: center;
+  }
+}
+
+.filter-btn {
+  background: #2979ff;
+  color: #fff;
+  border-radius: 8rpx;
+  padding: 0 30rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 28rpx;
+  min-width: 120rpx;
+
+  &::after {
+    border: none;
+  }
+}
+
+/* 列表区域 */
+.list-container {
+  height: calc(100vh - 180rpx);
+  padding: 10rpx;
+  transform: translateX(15rpx); /* 强制偏移 */
+  width: calc(100% - 30rpx);
+}
+
+.list-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 25rpx;
+  margin: 0 20rpx 20rpx 20rpx; /* 修改为四边统一间距 */
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  border: 1rpx solid #f0f0f0;
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding-bottom: 15rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.order-id {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.status-badge {
+  font-size: 24rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
+
+  &.status-pending {
+    background-color: #fff8e6;
+    color: #ff9900;
+  }
+
+  &.status-approved {
+    background-color: #e6f7ff;
+    color: #1890ff;
+  }
+
+  &.status-rejected {
+    background-color: #fff1f0;
+    color: #ff4d4f;
+  }
+}
+
+.item-content {
+  .info-row {
+    display: flex;
+    margin-bottom: 16rpx;
+    font-size: 28rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .info-label {
+    color: #999;
+    width: 160rpx;
+  }
+
+  .info-value {
+    color: #333;
+    flex: 1;
+
+    &.amount {
+      color: #f56c6c;
+      font-weight: 500;
+    }
+  }
+}
+
+.loading-tip {
+  text-align: center;
+  padding: 20rpx;
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 新增按钮 */
+.add-btn {
+  position: fixed;
+  right: 25rpx;
+  bottom: 25rpx;
+  width: 90rpx;
+  height: 90rpx;
+  background: #07C160;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
+  z-index: 99;
+  font-size: 36rpx;
+  font-weight: bold;
+
+  /* 移除按钮默认样式 */
+  padding: 0;
+  border: none;
+  outline: none;
+
+  /* 动画效果 */
+  transition: all 0.2s ease;
+
+  &::after {
+    border: none;
+  }
+
+  /* 点击反馈 */
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.3);
+  }
+
+  /* 图标样式 */
+  .add-icon {
+    margin-top: 4rpx; /* 微调+号位置 */
+  }
+}
+
+
+.u-swipe-action {
+  border-radius: 12rpx; /* 与列表项圆角一致 */
+  overflow: hidden; /* 防止按钮溢出 */
+}
+</style>