捡漏计算器对接接口

project.private.config.json

@@ -10,6 +10,20 @@
     "miniprogram": {
       "list": [
         {
+          "name": "pages/calculatorSub/calculatorResult/index",
+          "pathName": "pages/calculatorSub/calculatorResult/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/calculatorSub/calculatorWishList/index",
+          "pathName": "pages/calculatorSub/calculatorWishList/index",
+          "query": "id=2815",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "pages/member/index",
           "pathName": "pages/member/index",
           "query": "",
@@ -45,13 +59,6 @@
           "scene": null
         },
         {
-          "name": "pages/calculatorSub/calculatorWishList/index",
-          "pathName": "pages/calculatorSub/calculatorWishList/index",
-          "query": "",
-          "launchMode": "default",
-          "scene": null
-        },
-        {
           "name": "pages/calculatorSub/calculator/index",
           "pathName": "pages/calculatorSub/calculator/index",
           "query": "",

src/pages/calculatorSub/calculator/index.jsx

@@ -1,17 +1,22 @@
 import { Component } from "react";
 import { View, Image, Text, Button } from "@tarojs/components";
+import { getCalculatorPartData } from "../../../service/activity";
 import "./index.less";
 import Taro from "@tarojs/taro";
 import more from "../../../images/calculator/more.png";
 import toShare from "../../../images/calculator/toShare.png";
 import wish from "../../../images/calculator/wish.png";
 export default class Index extends Component {
-  state = {};
-  componentDidMount() {}
+  state = {
+    calculatorPartData: {},// 捡漏计算器部分数据
+  };
+  componentDidMount() {
+    this.getCalculatorPartData();// 获取捡漏计算器部分数据
+  }
   // 去TA的捡漏心愿
-  toWishList = () => {
+  toWishList = (id) => {
     Taro.navigateTo({
-      url: `/pages/calculatorSub/calculatorWishList/index`,
+      url: `/pages/calculatorSub/calculatorWishList/index?id=${id}`,
     });
   };
   // 去捡漏清单
@@ -20,6 +25,13 @@ export default class Index extends Component {
       url: `/pages/calculatorSub/calculatorInventory/index`,
     });
   };
+  // 获取捡漏计算器部分数据
+  async getCalculatorPartData() {
+    const res = await getCalculatorPartData();
+    this.setState({
+      calculatorPartData: res.jianlou_list,
+    });
+  };
   // 配置分享内容
   onShareAppMessage(res) {
     return {
@@ -29,6 +41,7 @@ export default class Index extends Component {
     }
   }
   render() {
+    const { calculatorPartData } = this.state;
     return (
       <View className="index">
         {/* 顶部 */}
@@ -54,18 +67,20 @@ export default class Index extends Component {
             </View>
             {/* 列表 */}
             <View className="list-box">
-              <View className="list-item">
-                <View className="list-item-left">
-                  <Image className="avatar" src={wish} />
+              {calculatorPartData.length > 0 && calculatorPartData.map((item, index) => (
+                <View key={index} className="list-item">
+                  <View className="list-item-left">
+                    <Image className="avatar" src={item.icon} />
                   <View className="list-item-left-text">
-                    <Text className="name">按时打卡上课的急啊离开就</Text>
-                    <Text className="wishNum">15次捡漏许愿</Text>
+                    <Text className="name">{item.name}</Text>
+                    <Text className="wishNum">{item.activity_jianlou_cnt}次捡漏许愿</Text>
                   </View>
                 </View>
-                <View onClick={this.toWishList} className="list-item-right">
+                <View onClick={() => this.toWishList(item.id)} className="list-item-right">
                   查看
                 </View>
-              </View>
+                </View>
+              ))}
             </View>
           </View>
           {/* 查看全部 */}

src/pages/calculatorSub/calculatorInventory/index.jsx

@@ -1,28 +1,74 @@
 import { Component } from "react";
 import { View, Image, Text } from "@tarojs/components";
 import "./index.less";
-import wish from "../../../images/calculator/wish.png";
-
+import Taro from "@tarojs/taro";
+import { getCalculatorList } from "../../../service/activity";
 export default class Index extends Component {
-  state = {};
-  componentDidMount() {}
+  state = {
+    inventoryList: [],
+    page: 1, // 添加页码
+    totalPages: 1, // 添加总页数
+    loading: false, // 添加加载状态
+  };
+  componentDidMount() {
+    this.getCalculatorList(true); // 获取捡漏清单
+  }
+  // 获取捡漏清单
+  getCalculatorList = async (isRefresh) => {
+    this.setState({ loading: true });
+    const res = await getCalculatorList({
+      page: this.state.page,
+      page_size: 10,
+    });
+    this.setState({
+      inventoryList: isRefresh
+        ? res.jianlou_list
+        : [...this.state.inventoryList, ...res.jianlou_list],
+      totalPages: res.total_pages,
+      loading: false,
+    });
+  }
+  // 查看心愿列表
+  toWishList = (id) => {
+    Taro.navigateTo({
+      url: `/pages/calculatorSub/calculatorWishList/index?id=${id}`,
+    });
+  };
+  // 页面上拉触底
+  onReachBottom = () => {
+    const { page, totalPages, loading } = this.state;
+    if (page < totalPages && !loading) {
+      this.setState(
+        (prevState) => ({ page: prevState.page + 1 }),
+        () => this.getCalculatorList(false)
+      );
+    }
+  };
   render() {
     return (
       <View className="index">
         {/* 列表 */}
         <View className="list-box">
-          <View className="list-item">
-            <View className="list-item-left">
-              <Image className="avatar" src={wish} />
-              <View className="list-item-left-text">
-                <Text className="name">按时打卡上课的急啊离开就</Text>
-                <Text className="wishNum">15次捡漏许愿</Text>
+          {this.state.inventoryList.length > 0 &&
+            this.state.inventoryList.map((item, index) => (
+              <View key={index} className="list-item">
+                <View className="list-item-left">
+                  <Image className="avatar" src={item.icon} />
+                  <View className="list-item-left-text">
+                    <Text className="name">{item.name}</Text>
+                    <Text className="wishNum">
+                      {item.activity_jianlou_cnt}次捡漏许愿
+                    </Text>
+                  </View>
+                </View>
+                <View
+                  onClick={() => this.toWishList(item.id)}
+                  className="list-item-right"
+                >
+                  查看
+                </View>
               </View>
-            </View>
-            <View onClick={this.toWishList} className="list-item-right">
-              查看
-            </View>
-          </View>
+            ))}
         </View>
       </View>
     );

src/pages/calculatorSub/calculatorResult/index.jsx

@@ -1,73 +1,119 @@
 import { Component } from "react";
 import { View, Image, Text } from "@tarojs/components";
 import "./index.less";
+import Taro from "@tarojs/taro";
 export default class Index extends Component {
   state = {
+    isSearch: 1,// 是否计算成功
+    list: [],// 列表
   };
   componentDidMount() {
+    let { isSearch, list } = Taro.getCurrentInstance().router.params;
+    this.setState({
+      isSearch,
+      list: JSON.parse(decodeURIComponent(list)),
+    });
+  }
+  // 再次捡漏
+  handleAgain = () => {
+    Taro.navigateBack();
+  }
+  // 精选推荐
+  handleGoodRecommend = (id) => {
+    Taro.navigateTo({
+      url: `/pages/indexSub/productDetail/index?id=${id}&&isShare=true`,
+    });
   }
   render() {
+    const { isSearch, list } = this.state;
     return (
       <View className="index">
         {/* 顶部盒子 */}
         <View className="top-box">
-          <Image className="top-img" src='https://yushi.tos-cn-beijing.volces.com/calculator/resultImg.png' />
-          {/* <Image className="top-img" src='https://yushi.tos-cn-beijing.volces.com/calculator/failResult.png' /> */}
+          <Image
+            className="top-img"
+            src={isSearch == 1 ? "https://yushi.tos-cn-beijing.volces.com/calculator/resultImg.png" : "https://yushi.tos-cn-beijing.volces.com/calculator/failResult.png"}
+          />
           {/* 捡漏产品 */}
           <View className="calculator-info">
-              <View className="title-box">
-                <Text className="title-text-left">您想要的:</Text>
-                <Text className="title-text">购买北京到深圳的机票</Text>
-              </View>
-              <View className="title-box">
-                <Text className="title-text-left">期望花费:</Text>
-                <Text className="title-text">1000元</Text>
-              </View>
+            <View className="title-box">
+              <Text className="title-text-left">您想要的:</Text>
+              <Text className="title-text">购买北京到深圳的机票</Text>
+            </View>
+            <View className="title-box">
+              <Text className="title-text-left">期望花费:</Text>
+              <Text className="title-text">1000元</Text>
+            </View>
           </View>
           {/* 首选推荐产品 */}
           <View className="first-recommend">
             <View className="first-recommend-title">
-              <Image className="first-recommend-title-img" src='https://yushi.tos-cn-beijing.volces.com/calculator/recommend.png' />
+              <Image
+                className="first-recommend-title-img"
+                src="https://yushi.tos-cn-beijing.volces.com/calculator/recommend.png"
+              />
               <Text className="first-recommend-title-text">首选推荐</Text>
             </View>
             <View className="first-recommend-content">
-              <View className="product-info">
-                <Image className="product-avatar" src='https://yushi.tos-cn-beijing.volces.com/calculator/default-avatar.png' />
-                <View className="product-detail">
-                  <Text className="product-title">深圳往返北京机票</Text>
-                  <View className="price-box">
-                    <Text className="current-price">899</Text>
-                    <Text className="original-price">¥1299</Text>
+              {list.length > 0 && (
+                <View className="product-info">
+                  <Image
+                    className="product-avatar"
+                    mode="aspectFill"
+                    src={list[0].image_url}
+                  />
+                  <View className="product-detail">
+                    <Text className="product-title">{list[0].item_title}</Text>
+                    <View className="price-box">
+                      <Text className="current-price">{list[0].reserve_price}</Text>
+                      {list[0].original_price != 0 && (
+                        <Text className="original-price">¥{list[0].original_price}</Text>
+                      )}
+                    </View>
                   </View>
                 </View>
-              </View>
+              )}
             </View>
             {/* 再次捡漏 */}
-            <View className="first-recommend-button">
-              <Image className="first-recommend-button-img" src='https://yushi.tos-cn-beijing.volces.com/calculator/resultButton.png' />
+            <View onClick={this.handleAgain} className="first-recommend-button">
+              <Image
+                className="first-recommend-button-img"
+                src="https://yushi.tos-cn-beijing.volces.com/calculator/resultButton.png"
+              />
               <Text className="first-recommend-button-text">再次捡漏</Text>
             </View>
           </View>
         </View>
-          {/* 精选推荐列表 */}
-          <View className="good-recommend-content">
-            <View className="good-recommend-list-title">
-              <Image className="good-recommend-list-title-img" src='https://yushi.tos-cn-beijing.volces.com/calculator/recommendIcon.png' />
-              <Text className="good-recommend-list-title-text">精选推荐</Text>
-            </View>
-            {/* 精选推荐列表内容 */}
-              <View className="good-recommend-list">
-                <View className="good-recommend-list-item">
-                  <Image className="item-image" src='https://yushi.tos-cn-beijing.volces.com/calculator/default-avatar.png' />
-                  <Text className="item-title">深圳往返北京机票</Text>
-                  <View className="item-price">
-                    <Text className="price-symbol">¥</Text>
-                    <Text className="current-price">899</Text>
-                    <Text className="original-price">¥1299</Text>
-                  </View>
+        {/* 精选推荐列表 */}
+        <View className="good-recommend-content">
+          <View className="good-recommend-list-title">
+            <Image
+              className="good-recommend-list-title-img"
+              src="https://yushi.tos-cn-beijing.volces.com/calculator/recommendIcon.png"
+            />
+            <Text className="good-recommend-list-title-text">精选推荐</Text>
+          </View>
+          {/* 精选推荐列表内容 */}
+          <View className="good-recommend-list">
+            {list.length > 1 && list.slice(1, 7).map((item, index) => (
+              <View onClick={() => this.handleGoodRecommend(item.id)} key={index} className="good-recommend-list-item">
+                <Image
+                  mode="aspectFill"
+                  className="item-image"
+                  src={item.image_url}
+                />
+                <Text className="item-title">{item.item_title}</Text>
+                <View className="item-price">
+                  <Text className="price-symbol">¥</Text>
+                  <Text className="current-price">{item.reserve_price}</Text>
+                  {item.original_price != 0 && (
+                    <Text className="original-price">¥{item.original_price}</Text>
+                  )}
                 </View>
               </View>
+            ))}
           </View>
+        </View>
       </View>
     );
   }

src/pages/calculatorSub/calculatorResult/index.less

@@ -110,7 +110,6 @@
                     height: 146px;
                     border-radius: 20px;
                     margin-right: 12px;
-                    background-color: red;
                 }
 
                 .product-detail {
@@ -230,13 +229,18 @@
                     width: 220px;
                     height: 213px;
                     border-radius: 20px 20px 0 0;
-                    background-color: red;
                 }
 
                 .item-title {
                     font-size: 18px;
                     color: #000000;
                     line-height: 33px;
+                    height: 60px;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 2;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .item-price {

src/pages/calculatorSub/calculatorWish/index.jsx

@@ -1,19 +1,92 @@
 import { Component } from "react";
 import { View, Image, Text, Input } from "@tarojs/components";
+import Taro from "@tarojs/taro";
 import "./index.less";
 import iconOne from "../../../images/calculator/iconOne.png";
 import iconTwo from "../../../images/calculator/iconTwo.png";
 import iconThree from "../../../images/calculator/iconThree.png";
+import {
+  getCalculatorData,
+  getCalculatorSearch,
+} from "../../../service/activity";
 export default class Index extends Component {
-  state = {};
-  componentDidMount() {}
+  state = {
+    wishList: [],
+    wish: "", // 心愿
+    price: "", // 价格
+  };
+  componentDidMount() {
+    this.getCalculator(); // 计算捡漏
+  }
+  // 计算捡漏
+  getCalculator = async () => {
+    const res = await getCalculatorData();
+    this.setState({
+      wishList: res,
+    });
+  };
+  // 搜索捡漏
+  getCalculatorSearch = async () => {
+    if (!this.state.wish.trim()) {
+      Taro.showToast({
+        title: "请输入您想要捡漏的物品或服务",
+        icon: "none",
+      });
+      return;
+    }
+    if (!this.state.price.trim()) {
+      Taro.showToast({
+        title: "请输入您预期的价格",
+        icon: "none",
+      });
+      return;
+    }
+    Taro.showLoading({
+      title: "正在计算...",
+    });
+    try {
+      const res = await getCalculatorSearch({
+        keyword: this.state.wish,
+        money: this.state.price,
+      });
+      Taro.navigateTo({
+        url: `/pages/calculatorSub/calculatorResult/index?isSearch=${
+          res.is_search
+        }&&list=${encodeURIComponent(JSON.stringify(res.goods_list))}`,
+      });
+    } finally {
+      Taro.hideLoading();
+    }
+  };
+  // 心愿输入框改变
+  handleWishChange = (e) => {
+    this.setState({
+      wish: e.detail.value,
+    });
+  };
+  // 价格输入框改变
+  handlePriceChange = (e) => {
+    if (e.detail.value < 1 && e.detail.value.trim() !== "") {
+      e.detail.value = 1;
+    }
+    this.setState({
+      price: e.detail.value,
+    });
+  };
   render() {
     return (
       <View className="index">
-        <Image className="top-img" src='https://yushi.tos-cn-beijing.volces.com/calculator/wishTopImg.png' />
+        <Image
+          className="top-img"
+          src="https://yushi.tos-cn-beijing.volces.com/calculator/wishTopImg.png"
+        />
         {/* 底部 */}
         <View className="bottom-box">
-          <Image mode="heightFix" className="bg-img" src='https://yushi.tos-cn-beijing.volces.com/calculator/bottomImg.png' />
+          <Image
+            mode="heightFix"
+            className="bg-img"
+            src="https://yushi.tos-cn-beijing.volces.com/calculator/bottomImg.png"
+          />
           {/* 输入内容区域 */}
           <View className="input-box">
             <View className="input-box-title">
@@ -23,8 +96,10 @@ export default class Index extends Component {
             <View className="input-box-content">
               <View className="input-box-content-box">
                 <Input
+                  value={this.state.wish}
+                  onInput={this.handleWishChange}
                   className="input-box-content-input"
-                  placeholder="请输入你的心愿"
+                  placeholder="请详细描述需求"
                 />
               </View>
               <View className="input-box-content-text">
@@ -38,10 +113,14 @@ export default class Index extends Component {
               <Text className="title-text">您预期的价格</Text>
             </View>
             <View className="input-box-content">
-            <View className="input-box-content-box">
+              <View className="input-box-content-box">
                 <Input
+                  value={this.state.price}
+                  onInput={this.handlePriceChange}
+                  type="number"
+                  min="1"
                   className="input-box-content-input"
-                  placeholder="请输入你的心愿"
+                  placeholder="价格最低不能少于1元"
                 />
               </View>
               <View className="input-box-content-text">
@@ -49,37 +128,28 @@ export default class Index extends Component {
               </View>
             </View>
           </View>
-          <View className="button-box">
-            <Image className="button-icon" src='https://yushi.tos-cn-beijing.volces.com/calculator/buttonTwo.png' />
+          <View onClick={this.getCalculatorSearch} className="button-box">
+            <Image
+              className="button-icon"
+              src="https://yushi.tos-cn-beijing.volces.com/calculator/buttonTwo.png"
+            />
             <View className="button-text-box">
-                <Text className="button-text">捡漏计算</Text>
+              <Text className="button-text">捡漏计算</Text>
             </View>
           </View>
           {/* 底部捡漏列表 */}
-          <View className="bottom-list-box">  
+          <View className="bottom-list-box">
             <View className="bottom-list-box-title">
               <Image className="title-icon" src={iconThree} />
               <Text className="title-text">TA们捡了哪些漏</Text>
             </View>
-            <View className="bottom-list-box-content">  
-              <View className="bottom-list-box-content-item"> 
-              TA想要“从北京到深圳的机票”，捡漏200元
-              </View>
-              <View className="bottom-list-box-content-item"> 
-              TA想要“从北京到深圳的机票”，捡漏200元
-              </View>
-              <View className="bottom-list-box-content-item"> 
-              TA想要“从北京到深圳的机票”，捡漏200元
-              </View>
-              <View className="bottom-list-box-content-item"> 
-              TA想要“从北京到深圳的机票”，捡漏200元
-              </View>
-              <View className="bottom-list-box-content-item"> 
-              TA想要“从北京到深圳的机票”，捡漏200元
-              </View>
-              <View className="bottom-list-box-content-item"> 
-              TA想要“从北京到深圳的机票”，捡漏200元
-              </View>
+            <View className="bottom-list-box-content">
+              {this.state.wishList.length > 0 &&
+                this.state.wishList.map((item, index) => (
+                  <View key={index} className="bottom-list-box-content-item">
+                    TA想要“{item.jianlou_title}”，捡漏{item.reserve_price}元
+                  </View>
+                ))}
             </View>
           </View>
         </View>

src/pages/calculatorSub/calculatorWish/index.less

@@ -20,7 +20,7 @@
         align-items: center;
 
         .bg-img {
-            width: 100%;
+            width: 100% !important;
             height: 100%;
             position: absolute;
             top: 0;

src/pages/calculatorSub/calculatorWishList/index.jsx

@@ -1,54 +1,45 @@
 import { Component } from "react";
-import { View} from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { View } from "@tarojs/components";
 import "./index.less";
+import { getCalculatorDetail } from "../../../service/activity";
 export default class Index extends Component {
   state = {
-    wishList: [
-      {
-        title: "iPhone 15 Pro",
-        price: "¥8999",
-        time: "2024-03-20"
-      },
-      {
-        title: "机械键盘",
-        price: "¥599",
-        time: "2024-03-21"
-      },
-      {
-        title: "显示器",
-        price: "¥2399",
-        time: "2024-03-22"
-      },
-      {
-        title: "耳机",
-        price: "¥999",
-        time: "2024-03-23"
-      }
-    ]
+    wishList: [],
   };
   componentDidMount() {
+    const { id } = Taro.getCurrentInstance().router.params;
+    this.getCalculatorDetail(id); // 获取心愿列表
+  }
+  // 获取心愿列表
+  async getCalculatorDetail(id) {
+    const res = await getCalculatorDetail({
+      user_id: id,
+    });
+    this.setState({
+      wishList: res,
+    });
   }
   render() {
     return (
       <View className="index">
         {/* 心愿列表 */}
         <View className="wish-list">
-          {this.state.wishList.map((item, index) => (
-            <View key={index} className="item">
-              <View className="left">
-                {index+1}
-            </View>
-            <View className="right">
-              <View className="left-text">
-                <View className="title">{item.title}</View>
-                <View className="price">预算&emsp;{item.price}元</View>
-              </View>
-              <View className="right-text">
-                {item.time}
+          {this.state.wishList.length > 0 &&
+            this.state.wishList.map((item, index) => (
+              <View key={index} className="item">
+                <View className="left">{index + 1}</View>
+                <View className="right">
+                  <View className="left-text">
+                    <View className="title">{item.jianlou_title}</View>
+                    <View className="price">
+                      预算&emsp;{item.reserve_price}元
+                    </View>
+                  </View>
+                  <View className="right-text">{item.time}</View>
+                </View>
               </View>
-            </View>
-            </View>
-          ))}
+            ))}
         </View>
       </View>
     );

src/pages/calculatorSub/calculatorWishList/index.less

@@ -34,9 +34,13 @@
                     flex-direction: column;
 
                     .title {
+                        width: 300px;
                         font-weight: 500;
                         font-size: 30px;
                         color: #333333;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
                     }
 
                     .price {

src/service/activity.js

@@ -0,0 +1,39 @@
+import Request from '../api/request';
+// -----------------------------------------------------------捡漏计算器
+// 获取捡漏计算机数据展示
+export const getCalculatorData = data =>
+  Request({
+    url: '/activity/get_jianlou_data_show',
+    method: 'POST',
+    data,
+  });
+//   获取用户捡漏清单详情
+export const getCalculatorDetail = data =>
+  Request({
+    url: '/activity/get_jianlou_detail',
+    method: 'POST',
+    data,
+  });
+//   用户捡漏清单列表
+export const getCalculatorList = data =>
+  Request({
+    url: '/activity/get_jianlou_list',
+    method: 'POST',
+    data,
+  });
+//   搜索捡漏计算器
+export const getCalculatorSearch = data =>
+  Request({
+    url: '/activity/search_jianlou_calculator',
+    method: 'POST',
+    data,
+  });
+//   捡漏计算器部分数据
+export const getCalculatorPartData = data =>
+  Request({
+    url: '/activity/get_jianlou_calculator',
+    method: 'POST',
+    data,
+  });
+
+