合并

MrShi

7 小时以前 4282e1cc35d85e2f84fe37b7f51fde22b374c7c9

 mini-program/pagesA/pages/product-management/product-management.vue

@@ -1,67 +1,72 @@
<template>
   <view class="box">
      <!-- <view class="zhezhao"></view> -->
      <view class="head">
         <u-search
            placeholder="请输入关键词"
            :showAction="false"
            bgColor="#F8F9FB"
            placeholderColor="#999999"
            searchIconSize="28"
            height="36"
            v-model="keyword" />
         <view class="head-cate">
            <u-tabs :list="list" lineColor="#004096" lineWidth="24" lineHeight="3"></u-tabs>
         </view>
         <view class="head-search">
            <view class="head-search-item">
               <text class="fontact">排序</text>
               <u-icon name="arrow-up" color="#222222" size="14"></u-icon>
               <!-- <u-icon name="arrow-down" color="#777777" size="14"></u-icon> -->
   <view class="mall">
      <view class="mall-zz" v-show="show"></view>
      <view class="head" :style="{ height: 'calc(' + (navHeight + ' + 188rpx)') }">
         <view class="head-box">
            <view :style="{ width: '100%', height: 10 + 'px' }"></view>
            <view class="head-search":style="{ height: navHeight + 'px' }">
               <view class="head-search-input">
                  <u-search placeholder="搜索商品" height="30" searchIconColor="#999999" borderColor="#eeeeee"
                     bgColor="rgba(255,255,255,0.9)" @custom="search" :showAction="false" v-model="form.goodsName" @search="search" />	
               </view>
            </view>
            <view class="head-search-item">
               <text>适用品牌</text>
               <u-icon name="arrow-down" color="#777777" size="14"></u-icon>
            </view>
            <view class="head-search-item">
               <text>系列</text>
               <u-icon name="arrow-down" color="#777777" size="14"></u-icon>
            <view class="head-tabs">
               <u-tabs lineColor="#E4001D" :list="list" @click="clickCate"></u-tabs>
            </view>
         </view>
         <!-- <view class="data">
            <view class="data-cate">
               <view class="data-cate-item active">自营品牌</view>
               <view class="data-cate-item">雷沃</view>
               <view class="data-cate-item">洋马</view>
               <view class="data-cate-item">星光</view>
               <view class="data-cate-item">中联</view>
               <view class="data-cate-item">久保田</view>
         <view class="head-list">
            <view class="head-list-item" @click="openSearch(1)">
               <text :style="form.sortInfo ? 'color: #222222; font-weight: 500;' : ''">{{form.sortName}}</text>
               <u-icon name="arrow-down" color="#222222" size="13" v-if="form.sortInfo && !show"></u-icon>
               <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.sortInfo && show === 1"></u-icon>
               <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon>
            </view>
            <view class="data-list">
               <view class="data-list-item active">
                  <text>综合排序</text>
                  <image src="/static/icon/ic_sele1te@2x.png" mode="widthFix"></image>
               </view>
               <view class="data-list-item">
                  <text>销量由高到低</text>
               </view>
               <view class="data-list-item">
                  <text>价格由低到高</text>
               </view>
            <view class="head-list-item" @click="openSearch(2)">
               <text :style="form.applicableBrandId ? 'color: #222222; font-weight: 500;' : ''">{{form.applicableBrandId ? form.applicableBrandName : '适用品牌'}}</text>
               <u-icon name="arrow-down" color="#222222" size="13" v-if="form.applicableBrandId && !show"></u-icon>
               <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.applicableBrandId && show === 2"></u-icon>
               <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon>
            </view>
         </view> -->
            <view class="head-list-item" @click="openSearch(3)">
               <text :style="form.seriesBrandId ? 'color: #222222; font-weight: 500;' : ''">{{form.seriesBrandId ? form.seriesBrandName : '系列'}}</text>
               <u-icon name="arrow-down" color="#222222" size="13" v-if="form.seriesBrandId && !show"></u-icon>
               <u-icon name="arrow-up" color="#222222" size="13" v-else-if="form.seriesBrandId && show === 3"></u-icon>
               <u-icon name="arrow-down" color="#777777" size="13" v-else></u-icon>
            </view>
         </view>
         <!-- 排序 -->
         <view class="list" v-if="show === 1">
            <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in paixu" :key="index" @click="clickpx(index)">
               <text>{{item.name}}</text>
               <image src="/static/icon/ic_selete@2x.png" mode="widthFix" v-show="item.active"></image>
            </view>
         </view>
         <!-- 品牌 -->
         <view class="list" style="padding-top: 30rpx; box-sizing: border-box; justify-content: flex-start;" v-if="show === 2">
            <view :class="item.active ? 'list-cate active' : 'list-cate'" v-for="(item, index) in pingpai" :key="index" @click="getXiLie(item.id, index)">{{item.name}}</view>
         </view>
         <!-- 系列 -->
         <view class="list" v-if="show === 3">
            <view :class="item.active ? 'list-item red' : 'list-item'" v-for="(item, index) in xilie" :key="index" @click="clickxl(index)">
               <text>{{item.name}}</text>
               <image src="/static/icon/ic_selete@2x.png" mode="widthFix" v-show="item.active"></image>
            </view>
         </view>
      </view>
      <view class="list">
         <view class="list-item" v-for="(item, index) in 10" :key="index">
      <view class="commodity">
         <view class="commodity-wu" v-if="goodsList.length === 0">
            <image src="/static/images/default_search@2x.png" mode="widthFix"></image>
         </view>
         <view class="list-item" v-else v-for="(item, i) in goodsList" :key="i" @click="jumpDetails(item.id)">
            <view class="list-item-image">
               <image src="/static/logo.png" mode="widthFix"></image>
               <image :src="item.imgurl?item.imgurl:'/static/icon/default2.png'" mode="widthFix"></image>
            </view>
            <view class="list-item-info">
               <view class="list-item-info-title">中联艾禾宽齿 适用雷沃/中联/久保田</view>
               <view class="price">¥398.00</view>
               <view class="list-item-info-title">{{item.name}} 适用雷沃/中联/久保田</view>
               <view class="price">¥{{item.price}}</view>
               <view class="list-item-info-label">
                  <text>供货价¥100.00</text>
                  <text>本店销量：219</text>
                  <text>供货价¥{{(item.exFactoryPrice || 0).toFixed(2)}}</text>
                  <text>本店销量：{{item.realSaleNum || 0}}</text>
               </view>
            </view>
         </view>
@@ -70,24 +75,233 @@
</template>

<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','shopInfo', 'shopToken'])
      },
      watch: {
         paixu: {
            immediate: true,
            deep: true,
            handler(news, olds) {
               let obj = news.filter(item => item.active)
               this.form.sortInfo = obj[0].id
               this.form.sortName = obj[0].name
            }
         },
         pingpai: {
            immediate: true,
            deep: true,
            handler(news, olds) {
               if (news.length === 0) return;
               let obj = news.filter(item => item.active)
               this.form.applicableBrandId = obj[0].id
               this.form.applicableBrandName = obj[0].name
            }
         },
         xilie: {
            immediate: true,
            deep: true,
            handler(news, olds) {
               if (news.length === 0) return;
               let obj = news.filter(item => item.active)
               this.form.seriesBrandId = obj[0].id
               this.form.seriesBrandName = obj[0].name
            }
         }
      },
      data() {
         return {
            keyword: '',
            list: [{
               name: '全部',
            }, {
               name: '支重轮',
            }, {
               name: '托轮'
            }, {
               name: '平衡轮'
            }, {
               name: '导轨'
            }, {
               name: '导向轮'
            }]
            shop:{},
            show: null,
            list: [],
            paixu: [
               { name: '默认排序', id: '', active: true },
               { name: '综合排序', id: 0, active: false },
               { name: '销量由低到高', id: 1, active: false },
               { name: '价格由低到高', id: 2, active: false },
               { name: '销量由高到低', id: 3, active: false },
               { name: '价格由高到低', id: 4, active: false },
            ],
            pingpai: [],
            xilie: [],
            form: {
               shopId:null,
               sortInfo: '',
               sortName: '',
               categoryId: '',
               type: 1,
               goodsName: '',
               seriesBrandId: '',
               seriesBrandName: '',
               applicableBrandId: '',
               applicableBrandName: ''
            },
            next: true,
            page: 1,
            goodsList: [],
            cardTotal: 0
         };
      },
      onLoad() {
         this.shop  ={}
         this.checkShopLogin()
         this.shop = this.shopInfo || {}
         this.form.shopId = this.shop.id
         this.getCartNum()
         this.getLabels()
         this.getGoodsList()
      },
      onReachBottom() {
         this.getGoodsList()
      },
      onShow() {
      },
      methods: {
         getCartNum() {
            this.$u.api.cartGoodsTypeNum()
               .then(res => {
                  if (res.code === 200) {
                     this.cardTotal = res.data
                  }
               })
         },
         search() {
            this.page = 1
            this.goodsList = []
            this.next = true
            this.getGoodsList()
         },
         addCard(e) {
            this.$u.api.addCart({
               goodsId: e.id,
               goodsSkuId: e.skuResponsesList[0].id,
               num: 1
            }).then(res => {
               if (res.code === 200) {
                  uni.showToast({ title: '添加成功', icon: 'success' })
                  this.getCartNum()
               }
            })
         },
         jumpDetails(id) {
            uni.navigateTo({
               url: '/pages/details/details?id=' + id
            })
         },
         // 商品
         getGoodsList() {
            if (!this.next) return;
            this.$u.api.goodsPage({
               capacity: 10,
               page: this.page,
               model: this.form
            }).then(res => {
               if (res.code === 200) {
                  res.data.records.forEach(item => {
                     item.minPrice = item.minPrice.toFixed(2).split('.')
                  })
                  this.goodsList.push(...res.data.records)
                  this.page++
                  if (this.goodsList.length === res.data.total) {
                     this.next = false
                  }
               }
            })
         },
         // 获取分类
         getLabels() {
            this.$u.api.getGoodsLabelsByType({ type: 0 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.unshift({ name: '全部', id: '' })
                     this.list = res.data
                  }
               })
            this.$u.api.getGoodsLabelsByType({ type: 14 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.forEach(item => {
                        item.active = false
                     })
                     res.data.unshift({ name: '全部', id: '', active: true })
                     this.pingpai = res.data
                  }
               })
         },
         // 系列
         getXiLie(parentId, i) {
            this.xilie = []
            this.pingpai.forEach((item, index) => {
               item.active = index === i
            })
            if (!parentId) {
               this.show = null
               this.form.seriesBrandId = ''
               this.form.seriesBrandName = ''
               this.search()
               return;
            }
            this.$u.api.getGoodsLabelsByType({ type: 15, parentId })
               .then(res => {
                  if (res.code === 200) {
                     this.show = null
                     this.search()
                     if (res.data.length === 0) return uni.showToast({
                        title: '当前品牌下暂无系列',
                        icon: 'none'
                     })
                     res.data.forEach(item => {
                        item.active = false
                     })
                     res.data.unshift({ name: '全部', id: '', active: true })
                     this.xilie = res.data
                  }
               })
         },
         // 打开搜索
         openSearch(type) {
            if (type === 3 && this.xilie.length === 0) return uni.showToast({
               title: '当前暂无系列数据',
               icon: 'none'
            })
            if (type === this.show) {
               this.show = null
            } else {
               this.show = type
            }
         },
         // 选择排序
         clickpx(i) {
            this.paixu.forEach((item, index) => {
               item.active = index === i
            })
            this.show = null
            this.search()
         },
         // 选择系列
         clickxl(i) {
            this.xilie.forEach((item, index) => {
               item.active = index === i
            })
            this.show = null
            this.search()
         },
         // 切换分类
         clickCate(e) {
            this.form.categoryId = e.id
            this.search()
         },
         checkShopLogin(){
            var that =this
            if( this.shopInfo ==null || this.shopInfo.id==null ||  this.shopToken==null || this.shopToken==''){
               uni.navigateTo({
                  url: '/pages/login/login'
               })
            } 
         } 
      }
   }
</script>
@@ -98,131 +312,77 @@
   }
</style>
<style lang="scss" scoped>
   .box {
   .mall {
      width: 100%;
      .zhezhao {
      .mall-zz {
         width: 100vw;
         height: 100vh;
         background: rgba(0,0,0,0.5);
         background-color: rgba(0,0,0,.5);
         position: fixed;
         top: 0;
         left: 0;
         z-index: 2;
      }
      .head {
         width: 100%;
         height: 280rpx;
         padding: 20rpx 0 0 0;
         box-sizing: border-box;
         background: #FFFFFF;
         position: sticky;
         top: 0;
         left: 0;
         z-index: 99;
         .head-cate {
            width: 100%;
            height: 100rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
      .cart {
         position: fixed;
         right: 30rpx;
         bottom: 100rpx;
         z-index: 999;
         .cart-box {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            display: flex;
            align-items: flex-end;
            border-bottom: 1rpx solid #E5E5E5;
         }
         .head-search {
            width: 100%;
            height: 86rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            .head-search-item {
               height: 100%;
               display: flex;
               align-items: center;
               justify-content: center;
               position: relative;
               .fontact {
                  color: #222222 !important;
                  font-weight: 500 !important;
               }
               text {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #777777;
                  margin-right: 8rpx;
               }
            justify-content: center;
            background: rgba(255,255,255,0.96);
            box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.16);
            position: relative;
            image {
               width: 35rpx;
               height: 35rpx;
            }
         }
         .data {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 0rpx 0rpx 24rpx 24rpx;
            .data-cate {
               width: 100%;
               padding: 30rpx 0 10rpx 0;
               box-sizing: border-box;
               display: flex;
               flex-wrap: wrap;
               align-items: center;
               justify-content: space-between;
               .active {
                  background: rgba(0,64,150,0.1) !important;
                  font-weight: 500 !important;
                  color: #004096 !important;
               }
               .data-cate-item {
                  width: 216rpx;
                  height: 72rpx;
                  line-height: 72rpx;
                  text-align: center;
                  background: #F7F7F7;
                  border-radius: 8rpx;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #333333;
                  margin-bottom: 20rpx;
               }
            text {
               font-weight: 400;
               font-size: 20rpx;
               color: #333333;
            }
            .data-list {
               width: 100%;
               display: flex;
               flex-direction: column;
               .active {
                  text {
                     color: #004096 !important;
                  }
               }
               .data-list-item {
                  width: 100%;
                  height: 98rpx;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1rpx solid #EEEEEE;
                  text {
                     font-weight: 400;
                     font-size: 28rpx;
                     color: #222222;
                  }
                  image {
                     width: 24rpx;
                     height: 18rpx;
                  }
               }
            .cart-num {
               position: absolute;
               top: -15rpx;
               right: -15rpx;
               border-radius: 50%;
               width: 40rpx;
               height: 40rpx;
               line-height: 40rpx;
               font-weight: 400;
               font-size: 22rpx;
               color: #FFFFFF;
               text-align: center;
               background: #E4001D;
            }
         }
      }
      .list {
      .commodity {
         width: 100%;
         margin-top: 18rpx;
         padding: 0 30rpx;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
         background-color: #ffffff;
         align-items: center;
         flex-wrap: wrap;
         justify-content: space-between;
         padding: 20rpx 30rpx;
         box-sizing: border-box;
         .commodity-wu {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 240rpx;
            image {
               width: 320rpx;
               height: 320rpx;
            }
         }
         .list-item {
            width: 100%;
            padding: 28rpx 0;
@@ -274,6 +434,195 @@
               }
            }
         }
         .commodity-item {
            width: 332rpx;
            background-color: #ffffff;
            margin-bottom: 20rpx;
            .commodity-item-image {
               width: 100%;
               height: 336rpx;
               display: flex;
               align-items: center;
               justify-content: center;
               image {
                  width: 100%;
               }
            }
            .commodity-item-box {
               width: 100%;
               padding: 20rpx;
               box-sizing: border-box;
               .commodity-item-box-title {
                  font-weight: 600;
                  font-size: 30rpx;
                  color: #222222;
               }
               .commodity-item-box-price {
                  width: 100%;
                  display: flex;
                  align-items: baseline;
                  margin-top: 8rpx;
                  .commodity-item-box-price-a {
                     display: flex;
                     align-items: baseline;
                     margin-right: 8rpx;
                     text {
                        &:nth-child(1) {
                           font-weight: bold;
                           font-size: 32rpx;
                           color: #E4001D;
                           &::before {
                              content: '￥';
                              font-weight: 400;
                              font-size: 24rpx;
                              color: #E4001D;
                           }
                        }
                        &:nth-child(2) {
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #E4001D;
                        }
                     }
                  }
                  .commodity-item-box-price-b {
                     font-weight: 400;
                     font-size: 22rpx;
                     color: #999999;
                  }
               }
               .commodity-item-shou {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  text {
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #999999;
                  }
                  .commodity-item-shou-add {
                     width: 44rpx;
                     height: 44rpx;
                     background: #004096;
                     border-radius: 50%;
                     line-height: 44rpx;
                     text-align: center;
                     font-size: 30rpx;
                     color: #fff;
                  }
               }
            }
         }
      }
      .head {
         width: 100%;
         position: sticky;
         top: 0;
         left: 0;
         z-index: 999;
         .head-box {
            width: 100%;
            background: linear-gradient(180deg, #C8F3FF 0%, #ffffff 100%);
            // background: linear-gradient( 180deg, #FFD7C8 0%, #FFFFFF 100%);
            .head-search {
               width: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               display: flex;
               align-items: center;
               text {
                  font-weight: 500;
                  font-size: 40rpx;
                  color: #111111;
                  margin-right: 40rpx;
               }
               .head-search-input {
                  width: 100%;
               }
            }
            .head-tabs {
               width: 100%;
               height: 100rpx;
               display: flex;
               align-items: flex-end;
               border-bottom: 1rpx solid #E5E5E5;
            }
         }
         .list {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            border-radius: 0rpx 0rpx 24rpx 24rpx;
            .active {
               background: rgba(0,64,150,0.1) !important;
               color: #004096 !important;
               font-weight: 500 !important;
            }
            .list-cate {
               width: 216rpx;
               height: 72rpx;
               line-height: 72rpx;
               text-align: center;
               background: #F7F7F7;
               border-radius: 8rpx;
               font-weight: 400;
               font-size: 28rpx;
               color: #333333;
               margin-bottom: 24rpx;
               margin-right: 20rpx;
               &:last-child {
                  margin-right: 0 !important;
               }
            }
            .red {
               text {
                  color: #E4001D !important;
               }
            }
            .list-item {
               width: 100%;
               height: 96rpx;
               display: flex;
               align-items: center;
               justify-content: space-between;
               border-bottom: 1rpx solid #EEEEEE;
               text {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #222222;
               }
               image {
                  width: 24rpx;
                  height: 18rpx;
               }
            }
         }
         .head-list {
            width: 100%;
            height: 88rpx;
            display: flex;
            align-items: center;
            background-color: #ffffff;
            .head-list-item {
               flex: 1;
               height: 100%;
               display: flex;
               align-items: center;
               justify-content: center;
               text {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #777777;
                  margin-right: 8rpx;
               }
            }
         }
      }
   }
</style>