绿满眶商城微信小程序-uniapp
zhanghua
5 天以前 9354604265d3a5fd05b8bb528749bdbab424cc79
pages/goods-manager/goodsList/goodsList.vue
@@ -5,7 +5,7 @@
            <!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
            <!-- to 属性携带参数跳转详情页面,当前只为参考 -->
            <view :border="!formData.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
               v-for="item in data" :key="item.id" @click="addGoods(item.id)">
               v-for="item in data" :key="item.id" @click="toggle(item)">
               <!-- 通过header插槽定义列表左侧图片 -->
               <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
@@ -32,9 +32,10 @@
                           item.buyCount || 0 }}
                        </view>
                        <view class="uni-note ellipsis">
                           <text class="uni-link">上架</text>
                           <text :class="item.marketEnable == 'DOWN' ? 'market-down' : 'market-up'">{{
                              item.marketEnable == 'DOWN' ? "已下架" : "已上架" }}</text>
                           <text class="uni-link" style="color:red;">删除</text>
                           <!--<text class="uni-link" style="color:red;">删除</text> -->
                        </view>
                     </view>
                  </view>
@@ -43,6 +44,7 @@
            </view>
         </view>
         <view style="height: 80px;"></view>
      </view>
      <button type="default" class="btn" @click="addGoods('')">
@@ -51,6 +53,18 @@
      </button>
      <!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 -->
      <uni-load-more v-if="loading || formData.status === 'noMore'" :status="formData.status" />
      <view>
         <!-- 普通弹窗 -->
         <uni-popup ref="popup" background-color="#fff">
            <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
               <button type="default" @click="underOrup">{{ selectGoods.marketEnable == 'DOWN' ? '上架' : "下架"
               }}</button>
               <button type="default" @click="stocks">调整库存</button>
            </view>
         </uni-popup>
      </view>
   </view>
</template>
@@ -73,31 +87,11 @@
            pageNumber: 1,
            pageSize: 10,
         },
         data: [
            {
               "id": 122,
               "goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg",
               "name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机",
               "goods_price": "699.00",
               "goods_tip": "热卖中",
               "tag": [
                  "热卖中",
               ]
            },
            {
               "id": 123,
               "goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg",
               "name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机",
               "goods_price": "699.00",
               "goods_tip": "热卖中",
               "tag": [
                  "热卖中",
               ]
            }
         ],
         data: [],
         formData: {
            status: 'loading', // 加载状态
         },
         selectGoods: {},
         tipShow: false // 是否显示顶部提示框
      };
   },
@@ -109,6 +103,48 @@
      }
   },
   methods: {
      underOrup() {
         let params = {
            goodsId: this.selectGoods.id,
         };
         this.$refs.popup.close()
         if (this.selectGoods.marketEnable == 'DOWN') {
            API_GOODS.upGoods(params).then((res) => {
               uni.showLoading({
                  title: '上架成功'
               });
               setTimeout(function () {
                  uni.hideLoading();
               }, 2000);
               this.getGoodsList();
            })
         }
         else {
            API_GOODS.lowGoods(params).then((res) => {
               uni.showLoading({
                  title: '下架成功'
               });
               setTimeout(function () {
                  uni.hideLoading();
               }, 2000);
               this.getGoodsList();
            })
         }
      },
      stocks() {
         this.$refs.popup.close()
         var goodsId = this.selectGoods.id
         uni.navigateTo({
            url: `/pages/goods-manager/updateSkus/updateSkus${"?goodsId=" + goodsId}`,
         });
      },
      toggle(item) {
         this.$refs.popup.open('bottom')
         this.selectGoods = item;
      },
      getGoodsList() {
         uni.showLoading();
@@ -256,7 +292,6 @@
      // 小程序 编译后会多一层标签,而其他平台没有,所以需要特殊处理一下
      /deep/ .uni-list {
         /* #endif */
         height: calc(100vh - 100px - 80px - 60px);
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
@@ -303,4 +338,42 @@
      margin-right: 10rpx;
   }
}
@mixin flex {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
}
@mixin height {
   /* #ifndef APP-NVUE */
   height: 100%;
   /* #endif */
   /* #ifdef APP-NVUE */
   flex: 1;
   /* #endif */
}
.popup-content {
   @include flex;
   align-items: center;
   justify-content: center;
   padding: 15px;
   height: 150px;
   background-color: #fff;
}
.popup-height {
   @include height;
   width: 200px;
}
.market-down {
   color: red;
}
.market-up {
   color: green;
}
</style>