绿满眶商城微信小程序-uniapp
xiangpei
2025-06-16 948da1610a8b2a41b98ebfcd8643029c3bd7f469
pages/goods-manager/goodsList/goodsList.vue
@@ -7,41 +7,38 @@
            <view :border="!formData.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
               v-for="item in data" :key="item.id" @click="addGoods(item.id)">
               <!-- 通过header插槽定义列表左侧图片 -->
               <template v-slot:header>
                  <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
                     <image :src="item.goods_thumb" mode="aspectFill"></image>
                  </view>
               </template>
               <template v-slot:body>
                  <view class="shop">
                     <view>
                        <view class="uni-title">
                           <text class="uni-ellipsis-2">{{ item.name }}</text>
                        </view>
                        <!-- <view>
               <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
                  <image :src="item.thumbnail" mode="aspectFill"></image>
               </view>
               <view class="shop">
                  <view>
                     <view class="uni-title">
                        <text class="uni-ellipsis-2">{{ item.goodsName }}</text>
                     </view>
                     <!-- <view>
                           <text class="uni-tag hot-tag">{{ item.goods_tip }}</text>
                           <text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
                        </view> -->
                  </view>
                  <view>
                     <view class="shop-price">
                        <text>¥</text>
                        <text class="shop-price-text">{{ item.price }}</text>
                        <text>.00</text>
                     </view>
                     <view>
                        <view class="shop-price">
                           <text>¥</text>
                           <text class="shop-price-text">{{ item.goods_price }}</text>
                           <text>.00</text>
                     <view class="uni-flex-row">
                        <view class="uni-note">{{ item.commentNum || 0 }}条评论 月销量 {{
                           item.buyCount || 0 }}
                        </view>
                        <view class="uni-flex-row">
                           <view class="uni-note">{{ item.comment_count||0 }}条评论 月销量 {{
                              item.month_sell_count||0 }}
                           </view>
                           <view class="uni-note ellipsis">
                              <text class="uni-link">上架</text>
                        <view class="uni-note ellipsis">
                           <text class="uni-link">上架</text>
                              <text class="uni-link" style="color:red;">删除</text>
                           </view>
                           <text class="uni-link" style="color:red;">删除</text>
                        </view>
                     </view>
                  </view>
               </template>
               </view>
               <!-- 通过body插槽定义商品布局 -->
            </view>
@@ -59,13 +56,22 @@
</template>
<script>
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
import * as API_GOODS from "@/api/goods.js";
export default {
   components: {},
   components: { UIcon },
   data() {
      return {
         formData: {
            waterfall: false, // 布局方向切换
            status: 'loading', // 加载状态
         },
         params: {
            pageNumber: 1,
            pageSize: 10,
         },
         data: [
            {
@@ -95,16 +101,27 @@
         tipShow: false // 是否显示顶部提示框
      };
   },
   onLoad() { },
   onLoad() {
   },
   onShow() {
      if (this.$options.filters.tipsToLogin()) {
         this.getGoodsList();
      }
   },
   methods: {
      load(data, ended) {
         if (ended) {
            this.formData.status = 'noMore'
         }
      getGoodsList() {
         uni.showLoading();
         API_GOODS.getStoreGoods(
            this.params.pageNumber,
            this.params.pageSize
         ).then((res) => {
            this.data = res.data.result.records;
            if (this.$store.state.isShowToast) { uni.hideLoading() };
         });
      },
      addGoods(id) {
         console.log("addGoods:" + id);
         uni.navigateTo({
            url: `/pages/goods-manager/addGoods/addGoods${id ? "?id=" + id : ""}`,
         });
@@ -239,6 +256,7 @@
      // 小程序 编译后会多一层标签,而其他平台没有,所以需要特殊处理一下
      /deep/ .uni-list {
         /* #endif */
         height: calc(100vh - 100px - 80px - 60px);
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
@@ -250,7 +268,7 @@
         /deep/
         /* #endif */
         .uni-list-item--waterfall {
            // width: 50%;
            width: 98%;
            display: flex;
            box-sizing: border-box;
            margin-bottom: 10px;