wxapp_shuibei/pages/merchantCenter/productCenter.vue

<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
<!--      <up-search placeholder="搜索商品名称" shape="square" :clearabled="true"-->
<!--                 height="36" bgColor="#F9F7F0" :showAction="false" v-model="searchVal"-->
<!--                 @clear="onClear" @search="onSearch"-->
<!--                 :focus="isFocus" @focus="onFocus" @blur="onBlur" ></up-search>-->
      <view class="search-bar-con">
        <view class="search-input-wrapper">
          <uni-icons class="search-icon" type="search" size="18" color="#999"></uni-icons>
          <input
              class="search-input"
              v-model="searchVal"
              placeholder="请输入搜索内容"
              placeholder-class="placeholder"
              @input="onSearch"
              @confirm="onSearch"
              :focus="isFocus"
          />
          <view v-if="searchVal" class="clear-btn" @click="onClear">
            <uni-icons type="clear" size="18" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>


    <!-- 商品列表 -->
    <view class="product-list">
      <view class="product-card" v-for="(item, index) in goodsList" :key="index">
        <view class="product-header">
          <image class="product-image" :src="item.image" mode="aspectFit" />
          <view class="product-info">
            <view class="nameweight">
              <text class="product-name">{{ item.storeName }}</text>
              <text class="product-weight">{{ item.weight }}g</text>
            </view>
            <view class="nameweight">
              <view class="price-info">
                <text class="label">工费</text>
                <view class="value"><text class="unit">￥</text>{{ item.totalLaborCost }}<text class="unit">/g</text></view>
              </view>
              <view class="price-info">
                <text class="label">附加费</text>
                <view class="value"><text class="unit">￥</text>{{ item.additionalAmount }}</view>
              </view>
            </view>
            <view class="product-stats">
              <text class="stat">销量：{{ Number(item.sales || 0) + Number(item.ficti || 0) }}</text>
              <text class="stat">库存：{{ item.stock }}</text>
            </view>
          </view>
        </view>

        <view class="action-buttons">
          <button class="btn btn-offline" v-show="params.isShow==1" @click="OffShellFn(item,index)">下架</button>
          <button class="btn btn-offline" v-show="params.isShow==0" @click="PutOnShellFn(item,index)">上架</button>
          <button class="btn btn-edit" @click="toEditProduct(item)">编辑</button>
        </view>
      </view>
      <view class="loadingicon acea-row row-center-wrapper" v-if="goodScroll">
        <text
            class="loading iconfont icon-jiazai"
            :hidden="loading == false"
        ></text>
      </view>
      <view class="no-data" v-if="isNoDataState">
        <image
            src="https://my-go-easy-im.oss-cn-shenzhen.aliyuncs.com/goeasy-im-%E6%B0%B4%E8%B4%9D%E5%95%86%E5%9F%8E/zhanwu_20250827104005_1720_6.png"
        />
      </view>
      <view class="mores-txt flex" v-if="!goodScroll && !isNoDataState">
        <text>我是有底线的</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {computed, ref} from 'vue'
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { productsList,productPutOnShell,productOffShell } from "@/api/merchant.js";
import { useAppStore } from "@/stores/app";

const appStore = useAppStore();

const tabList = ref([
  {name:'销售中',code:1},
  {name:'已下架',code:0}
])
const searchVal = ref('')
const goodsList = ref([]);
const goodType = ref(1);
// Pagination
const params = ref({
  page: 1,
  limit: 10,
  isShow:1,
});
const loading = ref(false);
const goodScroll = ref(true);
const merchantInfo = ref({})

const isFocus = ref(false)

const isNoDataState = computed(() => {
  return goodsList.value.length === 0 && !loading.value;
});


onShow(() => {
  merchantInfo.value = appStore.userInfo.merchant;
  getGroomList()
})

const onFocus = () => {
  console.log('获取焦点')
  isFocus.value = true
}

const onBlur = () => {
  console.log('失去焦点')
  // 不要立即设置为false，避免焦点闪烁
  setTimeout(() => {
    isFocus.value = false
  }, 200)
}
const tabChange = (item) => {
  console.log('item',item)
  goodsList.value = [];
  loading.value = false;
  goodScroll.value = true;
  params.value.isShow = item.code;
  params.value.page = 1;
  getGroomList();
}
const onSearch = () => {
  goodsList.value = [];
  loading.value = false;
  goodScroll.value = true;
  params.value.page = 1;
  getGroomList();
}
// 清除搜索内容
const onClear = () => {
  console.log('清除搜索内容');
  searchVal.value = ''; // 手动清空关键词
  // 如果需要清除后立即刷新列表，可以调用搜索
  onSearch();
}
const getGroomList = async () => {
  if (!goodScroll.value) return;
  try {
    loading.value = true;
    params.value.merchantId = merchantInfo.value.id;
    params.value.keyword = searchVal.value;
    const { data } = await productsList(params.value);
    goodsList.value = [...goodsList.value, ...data.list] || [];
    goodScroll.value = data.list.length >= params.value.limit;
    params.value.page++;
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
};
async function OffShellFn(obj,index) {
  const {code} = await productOffShell(obj.id);
  if(code == 200){
    uni.showToast({ title: "操作成功", icon: "none" });
    goodsList.value.splice(index,1);
  }
}
async function PutOnShellFn(obj,index) {
  const {code} = await productPutOnShell(obj.id);
  if(code == 200){
    uni.showToast({ title: "操作成功", icon: "none" });
    goodsList.value.splice(index,1);
  }

}
function toEditProduct (obj){
  uni.navigateTo({
    url:`pages/merchantCenter/releaseProduct?id=${obj.id}`
  })
}
onReachBottom(() => {
  getGroomList();
});
</script>

<style lang="scss" scoped>

/* 搜索栏样式 */
.search-bar {
  background: #fff;
  padding: 30rpx 30rpx 0;
}

.search-input {
  width: 100%;
  height: 60rpx;
  font-size: 28rpx;
}

/* 标签页样式 */
.tabs {
  display: flex;
  background: white;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.tab.active {
  color: #333;
  font-weight: bold;
  border-bottom: 4rpx solid #333;
}
.product-list{
  padding: 30rpx;
  box-sizing: border-box;
}
/* 商品卡片样式 */
.product-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.product-header {
  display: flex;
  margin-bottom: 20rpx;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
}

.nameweight{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.product-name {
  font-size: 28rpx;
  color: #333;
  display: block;
}
.product-weight {
    background-color: rgba(197, 128, 3, 0.10);
    color: #C58003;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    float: right;
}

.price-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.label {
  font-size: 24rpx;
  color: #666666;
}

.value {
  color: #FD5F3C;
  font-size: 32rpx;
  .unit{
    font-size: 24rpx;
  }
}

/* 销售数据样式 */
.product-stats {
  display: flex;
  margin-bottom: 20rpx;
  gap: 10rpx;
}

.stat {
  font-size: 24rpx;
  color: #666;
  padding: 10rpx;
  background-color: #F5F7FA;
  border-radius: 8rpx;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 30rpx;
}

.btn {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}


.btn-offline {
  background: #F5F7FA;
  color: #333;
}

.btn-edit {
  background: #F8C008;
  color: #333;
}
.no-data {
  margin: 150rpx auto 0;
  text-align: center;

  img {
    width: 65%;
    height: auto;
  }
}
.mores-txt {
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 70rpx;
  color: #999;
  font-size: 24rpx;

  .iconfont {
    margin-top: 2rpx;
    font-size: 20rpx;
  }
}
.search-bar-con {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #F9F7F0;
  border-radius: 16rpx;
  height: 72rpx;
  line-height: 72rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.search-icon {
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  color: #999;
  font-size: 28rpx;
}

.clear-btn {
  padding: 10rpx;
  margin-left: 10rpx;
}

</style>