feat：在线选品

commit/product.js

@@ -296,9 +296,80 @@ export function addProduct(data) {
     })
 }
 
-// mer/store/shipping/list
+/**
+ * 商品详情
+ */
+export function productDetailApi(data) {
+    return myRequestPhp({
+        url: `${pre}mer/gong/goods/detail`,
+        method: 'POST',
+        data,
+        apiType
+    })
+}
+
+
+/** 
+ * 在线选品 --- filter
+*/
 
+export function statusFilterApi(data) {
+    return myRequestPhp({
+        url: `${pre}mer/gong/goods/status_filter`,
+        method: 'GET',
+        data,
+        apiType
+    })
+}
+/**
+ * page: 1
+ limit: 12
+ * @param {*} data 
+ * @returns 
+ */
+export function categoryFilterApi(data) {
+    return myRequestPhp({
+        url: `${pre}mer/gong/category`,
+        method: 'GET',
+        data,
+        apiType
+    })
+}
 
+// 在线选品列表
+/**
+ * page: 1
+ limit: 20
+ title:
+     cate_ids:
+     profit:
+     price:
+     type:
+ * @param {*} data 
+ * @returns 
+ */
+export function productSelectListApi(data) {
+    return myRequestPhp({
+        url: `${pre}mer/gong/goods/lst`,
+        method: 'GET',
+        data,
+        apiType
+    })
+}
+/**
+ * @description 商品列表 -- 加入选品库
+ */
+export function joinselectionlibraryApi(data) {
+    return myRequestPhp({
+        url: `${pre}mer/gong/goods/join_selection_library`,
+        method: 'POST',
+        data,
+        apiType
+    })
+}
+export function Postjoinselectionlibrary(data) {
+    return request.post(``, data)
+}
 // /**
 //  * @description 配置状态
 //  */

commit/requestPhp.js

@@ -5,9 +5,10 @@ export let baseURL = 'http://testshop.hxxfb.com/'
 // 请求超出时间
 const timeout = 50000
 // const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDM3MTM1NSwibmJmIjoxNzQwMzcxMzU1LCJleHAiOjE3NTExNzEzNTUsImp0aSI6WzI5OCwibWVyIl19.j2f8VwdwWY4zBpcijHntzUZ9YUms2SxChaVsYf7KnPs"
-// const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDM3MTM1NSwibmJmIjoxNzQwMzcxMzU1LCJleHAiOjE3NTExNzEzNTUsImp0aSI6WzI5OCwibWVyIl19.j2f8VwdwWY4zBpcijHntzUZ9YUms2SxChaVsYf7KnPs"
+// const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzaG9wLmh4eGZiLmNvbSIsImF1ZCI6InNob3AuaHh4ZmIuY29tIiwiaWF0IjoxNzQwNTY5NDI3LCJuYmYiOjE3NDA1Njk0MjcsImV4cCI6MTc1MTM2OTQyNywianRpIjpbMzU0LCJtZXIiXX0.aZrICBozUFC0lvqxHgJMKFdhQlDHG1eC9UVAPzDHs5s"
 // const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDU3MTQ0OCwibmJmIjoxNzQwNTcxNDQ4LCJleHAiOjE3NTEzNzE0NDgsImp0aSI6WzM1NCwibWVyIl19.PVwYv71Gq9RxTxQclUoFMgc8cZt0ju3zQkxk6SGCQJw"
-export const phpToken = uni.getStorageSync('phpToken') || ""
+const token = ""
+export const phpToken = uni.getStorageSync('phpToken') || token
 // 需要修改token，和根据实际修改请求头
 export function myRequestPhp(options) {
 	let url = options.url;

pages/onlineproductselection/components/detail/DeliveryInfo.vue

@@ -1,16 +1,17 @@
 <template>
   <view class="delivery-info">
+    <view class="title">{{delivery.title}}</view>
     <view class="delivery-item">
       <view class="label">配送至</view>
-      <view class="value">{{ delivery.to }}</view>
+      <view class="value"> 全国各地</view>
     </view>
     <view class="delivery-item">
       <view class="label">包邮</view>
-      <view class="value">{{ delivery.freeShipping }}</view>
+      <!-- <view class="value">{{ delivery.freeShipping }}</view> -->
     </view>
     <view class="delivery-item">
       <view class="label">起购</view>
-      <view class="value">{{ delivery.minPurchase }}</view>
+      <view class="value">{{ lowest_num }}</view>
     </view>
   </view>
 </template>
@@ -21,8 +22,18 @@ export default {
     delivery: {
       type: Object,
       required: true
+    },
+    skuId_info:{
+       type: Object,
+      default:()=>{}
+    }
+  },
+    computed:{
+    lowest_num(){
+       const data = this.skuId_info|| {}
+      return data.lowest_num || 0;
+    },
     }
-  }
 };
 </script>
 
@@ -46,4 +57,9 @@ export default {
   font-size: 26rpx;
   color: #333333;
 }
+.title{
+  font-size: 30rpx;
+  color: #333333;
+  margin-bottom: 30rpx;
+}
 </style>

pages/onlineproductselection/components/detail/ProductInfo.vue

@@ -3,20 +3,20 @@
     <view class="price-section">
       <view class="price-item">
         <view class="label">销售价</view>
-        <view class="value">￥{{ product.salePrice }}</view>
+        <view class="value">￥{{ market_price }}</view>
       </view>
       <view class="price-item">
         <view class="label">创客利润</view>
-        <view class="value">￥{{ product.creatorProfit }}</view>
+        <view class="value">￥{{ profit }}</view>
       </view>
       <view class="price-item">
         <view class="label">养老金</view>
-        <view class="value">￥{{ product.pension }}</view>
+        <view class="value">￥{{ yanglaojin}}</view>
       </view>
     </view>
     <view class="brand-info">
       <view class="label">品牌商</view>
-      <view class="value">{{ product.brand }}</view>
+      <view class="value">{{ product.spuId_info&&product.spuId_info.band_name }}</view>
     </view>
   </view>
 </template>
@@ -27,7 +27,37 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+    skuId_info:{
+      type: Object,
+      default:()=>{}
     }
+  },
+  computed:{
+    attribute_json(){
+       const data = this.skuId_info || {}
+      return data.attribute_json;
+    },
+     cost_price(){
+      const data = this.skuId_info || {}
+      return data.cost_price || "0.00"
+     }, 
+     market_price(){
+      const data = this.skuId_info || {}
+      return data.market_price || "0.00"
+     },
+     retail_price(){
+      const data = this.skuId_info || {}
+      return data.retail_price || "0.00"
+     },
+     profit(){
+      const data = this.skuId_info || {}
+      return data.profit || "0.00"
+     },
+     yanglaojin(){
+      const data = this.skuId_info || {}
+      return data.yanglaojin
+     }, 
   }
 };
 </script>

pages/onlineproductselection/components/detail/ProductSpec.vue

@@ -1,9 +1,9 @@
 <template>
-  <view class="product-spec">
+  <view class="product-spec" v-if="attribute_json">
     <view class="spec-header">
       <view class="label">规格</view>
     </view>
-    <view class="spec-value">{{ product.spec }}</view>
+    <view class="spec-value">{{ attribute_json }}</view>
   </view>
 </template>
 
@@ -13,8 +13,17 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+     skuId_info:{
+      type: Object,
+      default:()=>{}
     }
-  }
+  },
+    computed:{
+    attribute_json(){
+       const data = this.skuId_info || {}
+      return data.attribute_json;
+    },}
 };
 </script>
 

pages/onlineproductselection/components/listCard/CategoryNav.vue

@@ -93,6 +93,7 @@ export default {
   watch: {
     // swiper与上面选项卡联动
     currentindex(newval) {
+      
       this.isActive = newval;
       this.scrollLeft = 0;
       // 滑动swiper后，每个选项距离其父元素最左侧的距离

pages/onlineproductselection/components/listCard/ProductCardOnline.vue

@@ -2,11 +2,11 @@
   <view class="product-card">
     <view class="product-cover">
       <image
-        :src="product.image"
+        :src="product.img"
         @error="handleError"
         mode="scaleToFill"
         class="product-img"
-        v-if="!isError && product.image"
+        v-if="!isError && product.img"
       />
       <image
         src="/static/images/new_ui/kongtu.png"
@@ -20,23 +20,34 @@
     <view class="product-info">
       <view class="product-title">{{ product.title }}</view>
       <view class="product-price">
-        销售价：{{ product.salePrice }} 
+        销售价：{{ product.market_price || "0.00" }}
       </view>
-       <view class="product-price">
-        养老金：{{ product.pension }}
+      <view class="product-price">
+        养老金：{{ product.pension || "0.00" }}
       </view>
-      <view class="product-profit">创客利润：{{ product.creatorProfit }}</view>
-      <view class="product-status">状态：{{ product.status }}</view>
+      <view class="product-profit">创客利润：{{ product.mer_profit || "0.00" }}</view>
+      <view class="product-status"
+        >状态：{{ product.status == 1 ? "正常" : "下架" }}</view
+      >
       <view class="product-desc">{{ product.description }}</view>
       <view class="product-actions">
-        <button type="primary"  @click="viewDetails">商品详情</button>
-        <button type="primary" class="isjiaru"  @click="addToInventory " >加入商品库</button>
+        <button type="primary" @click="handleOperate('detail', product)">
+          商品详情
+        </button>
+        <button
+          type="primary"
+          :class="[product.is_join == 1 ? 'isjiaru' : '']"
+          @click="handleOperate('jiaru', product)"
+        >
+          加入商品库
+        </button>
       </view>
     </view>
   </view>
 </template>
 
 <script>
+import { joinselectionlibraryApi } from "@/commit/product.js";
 export default {
   props: {
     product: {
@@ -53,13 +64,55 @@ export default {
     handleError() {
       this.isError = true;
     },
-    viewDetails() {
-      // 这里实现查看商品详情的逻辑，例如跳转页面
-      console.log("查看商品详情", this.product);
+    async handleOperate(type, data) {
+      if (type == "detail") {
+        console.log("handleOperate", data)
+        uni.redirectTo({ url: `/pages/onlineproductselection/onlineDetail?spu_id=${data.spu_id}` })
+      } else if (type == "jiaru") {
+        if (data.is_join == 1) {
+          uni.showModal({
+            title: "温馨提示",
+            content: "已加入商品库，不可操作",
+            showCancel: false,
+            success: ({ confirm, cancel }) => {},
+          });
+          return;
+        }
+        await this.setJiaruchangp(data);
+      }
     },
-    addToInventory() {
-      // 这里实现加入商品库的逻辑，例如提交数据
-      console.log("加入商品库", this.product);
+    async setJiaruchangp(data) {
+      uni.showLoading({
+        title: "提交中",
+        mask: true,
+      });
+      try {
+        const res = await joinselectionlibraryApi({ spu_id: data.spu_id });
+        if (res.data.status == 200) {
+          uni.showToast({
+            title: "提交成功",
+            icon: "success",
+            duration: 2000,
+          });
+          this.$emit("success", data);
+        } else {
+          uni.showToast({
+            title: res.data.message,
+            icon: "success",
+            duration: 2000,
+          });
+        }
+        uni.hideToast();
+        uni.hideLoading();
+      } catch (error) {
+        uni.showToast({
+          title: error?.data?.message  || "提交失败",
+          icon: "error",
+          duration: 2000,
+        });
+        uni.hideToast();
+        uni.hideLoading();
+      }
     },
   },
 };
@@ -73,7 +126,7 @@ export default {
   box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
   margin-bottom: 20rpx;
   overflow: hidden;
-  border: 2rpx solid red;
+  // border: 2rpx solid red;
 }
 .product-cover {
   position: relative;
@@ -108,19 +161,18 @@ export default {
   color: #999;
   margin-bottom: 10rpx;
 }
-.product-actions  {
+.product-actions {
   margin-right: 5rpx;
   width: 100%;
   display: flex;
   gap: 26rpx;
-  button{
-//    width: 45%;
-   width: 100%;
-   background: #007aff;
-  color: white;
-
+  button {
+    //    width: 45%;
+    width: 100%;
+    background: #007aff;
+    color: white;
   }
-  .isjiaru{
+  .isjiaru {
     background: transparent;
     color: #ff3c00;
   }

pages/onlineproductselection/components/listCard/product-item.vue

@@ -3,45 +3,56 @@
   <view class="product-card">
     <view class="product-header">
       <text class="product-name">{{ product.name }}</text>
-      <text class="product-status" :class="statusClass">{{ product.status }}</text>
+      <text class="product-status" :class="statusClass">{{
+        product.status
+      }}</text>
     </view>
 
     <view class="price-info">
       <text class="price-label">销售价：</text>
-      <text class="price-value">¥{{ product.price.toFixed(2) }}</text>
+      <text class="price-value">¥{{ product.market_price || "0.00" }}</text>
+    </view>
+    <view class="price-info">
+      <text class="price-label">养老金：</text>
+      <text class="price-value">¥{{ product.pension || "0.00" }}</text>
     </view>
 
     <view class="profit-info">
       <text class="profit-label">创客利润：</text>
-      <text class="profit-value">¥{{ product.profit.toFixed(2) }}</text>
+      <text class="profit-value">¥{{ product.mer_profit || "0.00" }}</text>
     </view>
 
     <view class="action-buttons">
-      <button class="btn detail" @click="$emit('detail')">商品详情</button>
-      <button 
-        class="btn add" 
-        :class="{ added: product.inLibrary }"
-        @tap="$emit('add-to-library', product)"
+      <button class="btn detail" @click="handleOperate('detail', product)">
+        商品详情
+      </button>
+      <button
+        class="btn add"
+        :class="{ added: product.is_join == 1 }"
+        @click="handleOperate('jiaru', product)"
       >
-        {{ product.inLibrary ? '已加入' : '加入商品库' }}
+        {{ product.is_join == 1 ? "已加入商品库" : "加入商品库" }}
       </button>
     </view>
   </view>
 </template>
 <script>
+import { joinselectionlibraryApi } from "@/commit/product.js";
 export default {
-    props: {
-        product: {
-            type: Object,
-            default: () => ({})
-        }
+  props: {
+    product: {
+      type: Object,
+      default: () => {},
     },
-    data(){
-        return {
+  },
+  data() {
+    return {};
+  },
+  methods: {
 
-        }
-    }
-}
+  },
+
+};
 </script>
 <style lang="scss" scoped>
 .product-card {
@@ -49,7 +60,7 @@ export default {
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 
   .product-header {
     display: flex;
@@ -66,28 +77,30 @@ export default {
   .product-status {
     font-size: 24rpx;
     &.normal {
-      color: #67C23A;
+      color: #67c23a;
     }
   }
 
-  .price-info, .profit-info {
+  .price-info,
+  .profit-info {
     margin-bottom: 12rpx;
     display: flex;
     align-items: center;
   }
 
-  .price-label, .profit-label {
+  .price-label,
+  .profit-label {
     font-size: 26rpx;
     color: #666;
   }
 
   .price-value {
-    color: #F56C6C;
+    color: #f56c6c;
     font-weight: bold;
   }
 
   .profit-value {
-    color: #E6A23C;
+    color: #e6a23c;
     font-weight: bold;
   }
 
@@ -110,7 +123,7 @@ export default {
       }
 
       &.add {
-        background: linear-gradient(90deg, #409EFF, #79BBFF);
+        background: linear-gradient(90deg, #409eff, #79bbff);
         color: #fff;
 
         &.added {

pages/onlineproductselection/onlineproductselection.vue

@@ -10,8 +10,17 @@
           placeholder="请输入商品名称"
           @search="onHandleSearch"
         ></searchVue>
-        <Statistics />
-        <CategoryNav />
+        <CategoryNav
+          :category="quanbuData"
+          :curruntActive="curruntActivesd"
+          @tabs="tabsCategoryNav"
+        />
+        <Statistics
+          :category="categoryData"
+          :curruntActive="curruntActive"
+          @tabs="tabsStatistics"
+        />
+
         <!-- <ActionButtons class="mt"/> -->
         <!-- <view class="sort-buttons">
       <button type="default" size="mini" @click="sortByPrice">{{ sortBy === 'price'? '销售价 ▲' : '销售价 ▼' }}</button>
@@ -21,14 +30,21 @@
     </view>
     <view class="online-content">
       <view class="product-list">
-        <ProductCard
-          :product="product"
-          v-for="(product, index) in filteredProducts"
-          :key="index"
-        />
+        <template v-if="list.length > 0">
+          <ProductCard
+            :product="product"
+            v-for="(product, index) in list"
+            :key="index"
+            @success="initData"
+          />
+        </template>
+        <template v-else>
+          <emptyDataVue />
+        </template>
       </view>
       <view
         class=""
+        v-if="tihsi == 0 && list.length > 0"
         style="margin: 60rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
       >
         —— 已经到最底部了哦 ——
@@ -44,6 +60,13 @@ import CategoryNav from "./components/listCard/CategoryNav.vue";
 import Statistics from "./components/listCard/Statistics.vue";
 import ActionButtons from "./components/listCard/ActionButtons.vue";
 import ProductCard from "./components/listCard/ProductCardOnline.vue";
+import emptyDataVue from "../../shop/components/emptyData/emptyData.vue";
+import {
+  statusFilterApi,
+  categoryFilterApi,
+  productSelectListApi,
+  productDetailApi,
+} from "@/commit/product.js";
 export default {
   components: {
     headersVue,
@@ -52,15 +75,24 @@ export default {
     Statistics,
     ActionButtons,
     ProductCard,
+    emptyDataVue,
   },
   data() {
     return {
       curruntActive: 0,
-      category: [],
+      curruntActivesd: 0,
+      categoryData: [],
+
+      quanbuData: [
+        {
+          cateIds: "",
+          cateName: "全部",
+        },
+      ],
       list: [],
-      page: 1,
-      limit: 10,
+
       tihsi: "",
+
       is_panudn: true,
       products: [
         {
@@ -84,31 +116,142 @@ export default {
           isChecked: false,
         },
       ],
-      totalCount: 2,
-      joinedCount: 0,
-      notJoinedCount: 2,
-      sortBy: "",
       searchValue: "",
+      formData: {
+        cate_ids: "",
+        page: 1,
+        limit: 10,
+        type: "", //筛选类型
+        profit: "", //筛选利润
+        title: "", //筛选标题
+        price: "", //筛选价格
+      },
     };
   },
+  async onLoad(params) {
+    await this.getCategoryFilterApi();
+    await this.initData();
+     
+  },
+  onPullDownRefresh() {
+    uni.showLoading({
+      title: "加载中",
+    });
+    this.formData.page = 1;
+    this.is_panudn = true;
+    this.list = [];
+    this.getProductList();
+  },
+  onReachBottom() {
+    if (this.is_panudn == true) {
+      this.formData.page++;
+      this.getProductList();
+    } else {
+      return;
+    }
+  },
   methods: {
+    async initData() {
+      await this.getStatusFilter();
+      await this.getProductList();
+    },
+    async getStatusFilter() {
+      try {
+        const res = await statusFilterApi();
+        if (res.data.status == 200) {
+          this.categoryData = res.data.data || [];
+        }
+      } catch (error) {}
+    },
+    async getCategoryFilterApi() {
+      try {
+        const res = await categoryFilterApi({
+          page: 1,
+          limit: 12,
+        });
+        if (res.data.status == 200) {
+          let data = res.data.data.data || [];
+          this.quanbuData = [
+            {
+              cateIds: "",
+              cateName: "全部",
+            },
+          ];
+          data.forEach((item) => {
+            this.quanbuData.push(item);
+          });
+        }
+        console.log(res.data, "9981");
+      } catch (error) {}
+    },
     headerJump() {
       uni.switchTab({ url: "../../shop/productManagementModule/index" });
     },
     goJump() {
-      console.log("fff");
       uni.redirectTo({ url: "./onlineDetail" });
     },
     onHandleSearch(val) {
       console.log(val);
+      this.formData.title = val;
+      this.getProductList();
+    },
+    async getProductList() {
+      uni.showLoading({
+        title: "加载中",
+        mask: true,
+      });
+      try {
+        const res = await productSelectListApi(this.formData);
+        uni.stopPullDownRefresh();
+        if (res.data.status == 200) {
+          this.tihsi = res.data.data.data.lenght || 0;
+          if (res.data.data.count > 0) {
+            if (this.formData.page == 1) {
+              this.list = res.data.data.data;
+            } else {
+              this.list = this.list.concat(res.data.data.data);
+            }
+          } else {
+            if (this.formData.page == 1) {
+              this.list = [];
+            }
+            this.is_panudn = false;
+          }
+          uni.hideLoading();
+        }
+      } catch (error) {
+        uni.hideLoading();
+      }
     },
-    tabsHandleClick() {},
     sortByPrice() {
       this.sortBy = this.sortBy === "price" ? "" : "price";
     },
     sortByProfit() {
       this.sortBy = this.sortBy === "profit" ? "" : "profit";
     },
+    tabsStatistics({ index, item }) {
+      this.curruntActive = index;
+      this.formData.type = item.type;
+      this.list = [];
+      this.formData.page = 1;
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 300,
+      });
+      this.getProductList();
+    },
+    tabsCategoryNav({ index, item }) {
+      this.curruntActivesd = index;
+      this.formData.cate_ids = item.cateIds;
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 300,
+      });
+      this.list = [];
+      this.formData.page = 1;
+      this.getStatusFilter();
+      this.getProductList();
+    },
   },
   computed: {
     filteredProducts() {
@@ -141,22 +284,23 @@ page {
       margin-top: 95rpx;
       position: fixed;
       top: 0rpx;
+      width: 100%;
       z-index: 666;
     }
   }
   .online-content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     margin-top: 450rpx;
     box-sizing: border-box;
     padding-bottom: 60rpx;
-	width: 100%;
+    width: 100%;
     .product-list {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
     }
   }
 }