绿满眶商城微信小程序-uniapp
zxl
4 天以前 c9928dd4f6d25e2339ea1400f59ec58674a927a7
pages/goods-manager/goodsList/goodsList.vue
@@ -5,47 +5,46 @@
            <!-- 通过 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插槽定义列表左侧图片 -->
               <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="item.marketEnable == 'DOWN' ? 'market-down' : 'market-up'">{{
                              item.marketEnable == 'DOWN' ? "已下架" : "已上架" }}</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>
         </view>
         <view style="height: 80px;"></view>
      </view>
      <button type="default" class="btn" @click="addGoods('')">
@@ -54,57 +53,110 @@
      </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>
<script>
import '@/components/uview-components/uview-ui';
import * as API_GOODS from "@/api/goods.js";
export default {
   components: {},
   data() {
      return {
         formData: {
            waterfall: false, // 布局方向切换
            status: 'loading', // 加载状态
         },
         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": [
                  "热卖中",
               ]
            }
         ],
         params: {
            pageNumber: 1,
            pageSize: 10,
         },
         data: [],
         formData: {
            status: 'loading', // 加载状态
         },
         selectGoods: {},
         tipShow: false // 是否显示顶部提示框
      };
   },
   onLoad() { },
   onLoad() {
   },
   onShow() {
      if (this.$options.filters.tipsToLogin()) {
         this.getGoodsList();
      }
   },
   methods: {
      load(data, ended) {
         if (ended) {
            this.formData.status = 'noMore'
      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();
            })
         }
      },
      addGoods(id) {
         console.log("addGoods:" + id);
      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();
         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) {
         uni.navigateTo({
            url: `/pages/goods-manager/addGoods/addGoods${id ? "?id=" + id : ""}`,
         });
@@ -250,7 +302,7 @@
         /deep/
         /* #endif */
         .uni-list-item--waterfall {
            // width: 50%;
            width: 98%;
            display: flex;
            box-sizing: border-box;
            margin-bottom: 10px;
@@ -285,4 +337,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>