add 部分ui

xuxueyang

2024-08-15 891b5db055a1d27c6bda2e9700aa57f8bacd7cd2

 sub_pages/customer/shop/shop.vue

@@ -82,74 +82,76 @@
            </view>

            <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 120rpx;"></no-data>

            <view class="flex m-t-12 flex-wrap-normal">

            <view class="type-list"  v-if="flg==='1'">

               <view v-for="(item,index) of catgoryTree" @click="changeType(item)"

                  :class="[query.categoryRoot===item.id?'current':'']" :key="index" class="p10 flex type-item">

                  {{item.name || '-'}}

               </view>

            </view>

            <view class="flex1">

					
				
               <view class="component-shop-item flex" v-for="(item,index) of list" :key="index" :class="flg==='1'?'flg-category':''">

                  <view class="img" @click.stop="toDetail(item)">

                     <image class="img img100" :src="item.cover" lazy-load>

                     </image>

                     <view class="level">

                        {{item.levelStr||''}}

                     </view>

               <view class="type-list" v-if="flg==='1'">

                  <view v-for="(item,index) of catgoryTree" @click="changeType(item)"

                     :class="[query.categoryRoot===item.id?'current':'']" :key="index"

                     class="p10 flex type-item">

                     {{item.name || '-'}}

                  </view>

               </view>

               <view class="flex1">



                  <view class="m-l-12 info-container flex1">

                     <view class="title" @click.stop="toDetail(item)">

                        {{item.name}}

                        <view class="price">

                           ￥{{item.price}}/扎



                  <view class="component-shop-item flex" v-for="(item,index) of list" :key="index"

                     :class="flg==='1'?'flg-category':''">

                     <view class="img" @click.stop="toDetail(item)">

                        <image class="img img100" :src="item.cover" lazy-load>

                        </image>

                        <view class="level">

                           {{item.levelStr||''}}

                        </view>

                     </view>
                     <view class="tags" v-if="item.tags||false"  @click.stop="toDetail(item)">
                     <!--       <view class="tag red">限时抢购</view>
                        <view class="tag green">品质严选</view> -->
                        <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']"
                           :key="tag">{{
                          tag
                        }}
                        </view>
                     </view>

                  <!--    <view class="shop-name" @click.stop="toDetail(item)">



                     <view class="m-l-12 info-container flex1">

                        <view class="title" @click.stop="toDetail(item)">

                           {{item.name}}

                           <view class="price">

                              ￥{{item.price}}/扎

                           </view>

                        </view>

                        <view class="tags" v-if="item.tags||false" @click.stop="toDetail(item)">

                           <!--       <view class="tag red">限时抢购</view>

                        <view class="tag green">品质严选</view> -->

                           <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']"

                              :key="tag">{{

                          tag

                        }}

                           </view>

                        </view>

                        <!--    <view class="shop-name" @click.stop="toDetail(item)">

                        {{item.categoryStr}}

                     </view> -->

                     <view class="other-info flex" @click.stop="toDetail(item)">

                        <view class="m-r-15">

                           已售:{{item.sales || 0}}

                        </view>

                        <view class="m-r-15">

                           剩余:{{item.stock || 0}}

                        </view>

                        <view class="m-r-15">

                           {{item.unit}}

                        </view>

                     </view>

                     <view class="bottom-buttons  flex">

                        <view class="m-l-0 m-r-a">

                           <view class="m-r-15 desc-gray other-info">

                              颜色:{{item.color||'-'}}

                        <view class="other-info flex" @click.stop="toDetail(item)">

                           <view class="m-r-15">

                              已售:{{item.sales || 0}}

                           </view>

                           <view class="m-r-15">

                              剩余:{{item.stock || 0}}

                           </view>

                           <view class="m-r-15">

                              {{item.unit}}

                           </view>

                        </view>

                        <view class="icons flex">

                           <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"

                              @click.stop="addnum(item,-1)"></uni-icons>

                           <view class="curnums" @click.stop="updateItemNum(item)"

                              v-if="item.shopnum&&item.shopnum>=1">

                              {{ item.shopnum }}

                        <view class="bottom-buttons  flex">

                           <view class="m-l-0 m-r-a">

                              <view class="m-r-15 desc-gray other-info">

                                 颜色:{{item.color||'-'}}

                              </view>

                           </view>

                           <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"

                              @click.stop="addnum(item,1)"></uni-icons>

                           <view class="icons flex">

                              <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"

                                 @click.stop="addnum(item,-1)"></uni-icons>

                              <view class="curnums" @click.stop="updateItemNum(item)"

                                 v-if="item.shopnum&&item.shopnum>=1">

                                 {{ item.shopnum }}

                              </view>

                              <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"

                                 @click.stop="addnum(item,1)"></uni-icons>

                           </view>

                        </view>

                     </view>

                  </view>

               </view>

            </view>

            </view>

         </view>



@@ -271,7 +273,7 @@
               levelStr: '',

               level: '',

               name: '',

               categoryRoot:'',

               categoryRoot: '',

            },

            level_show: false,

            level_columns: [

@@ -285,8 +287,16 @@
         }

      },

      onShow() {

         //避免商品数目不一样

         //避免商品数目不一样			
         this.refreshList('post')

      },

      async onPullDownRefresh() {

         if (this.id) {

            await this.getDetail()

         }

         await this.refreshList('post')

         uni.stopPullDownRefresh()



      },

      onLoad(options) {

         this.id = options.id || ''

@@ -351,16 +361,16 @@
         //    this.getMore('post')

         // }

      },

      methods: {
         getList_after() {
            if (this.list) {
               for (var item of this.list) {
                  item.tagArr = []
                  if (item.tags) {
                     item.tagArr = item.tags.split(",") || []
                  }
               }
            }
      methods: {

         getList_after() {

            if (this.list) {

               for (var item of this.list) {

                  item.tagArr = []

                  if (item.tags) {

                     item.tagArr = item.tags.split(",") || []

                  }

               }

            }

         },



         async getDetail() {

@@ -460,13 +470,13 @@
                  this.$message.hideLoading()

               }

               //如果存在第一个分类，根据一级分类查询

               if(this.catgoryTree.length>0){

                  this.query.categoryRoot =this.catgoryTree[0].id

               if (this.catgoryTree.length > 0) {

                  this.query.categoryRoot = this.catgoryTree[0].id

                  //然后刷新

                  this.refreshList('post')

						


               }

					


            }

            this.flg = '' + flg

            //如果没有加载数据，需要加载一下

@@ -474,12 +484,12 @@


         },

         changeType(item) {

            if(item.id!==this.query.categoryRoot){

            if (item.id !== this.query.categoryRoot) {

               this.query.categoryRoot = item.id || ''

               this.refreshList('post')

               //拼接二级分类，然后查询商品列表

            }

				


         },

         buttonSearchFlow() {

            // this.query.name = this.search_flow || ''

@@ -557,30 +567,30 @@
</script>



<style lang="scss" scoped>

   .brand-detail {
      .tags {
         margin-top: 12rpx;
         display: flex;
		
         .tag {
            min-width: 80rpx;
            padding-left: 20rpx;
            padding-right: 20rpx;
            line-height: 36rpx;
            background: #FEE6E6;
            border-radius: 21rpx;
            font-size: 24rpx;
            color: #CD1212;
            margin-right: 12rpx;
            text-align: center;
         }
		
         .tag.green {
            color: rgba(110, 159, 102, 1);
            background: rgba(202, 229, 214, 1);
            border-radius: 21rpx;
            // opacity: 0.57;
         }
   .brand-detail {

      .tags {

         margin-top: 12rpx;

         display: flex;



         .tag {

            min-width: 60rpx;

            padding-left: 10rpx;

            padding-right: 10rpx;

            line-height: 30rpx;

            background: #FEE6E6;

            border-radius: 10rpx;

            font-size: 22rpx;

            color: #CD1212;

            margin-right: 12rpx;

            text-align: center;

         }



         .tag.green {

            color: rgba(110, 159, 102, 1);

            background: rgba(202, 229, 214, 1);

            border-radius: 10rpx;

            // opacity: 0.57;

         }

      }



      // min-height: 99vh;

@@ -592,9 +602,10 @@
         overflow: hidden;

         overflow-y: scroll;

         padding: 40rpx 32rpx;

         height: calc(100vh - 450rpx);

         min-height: calc(100vh - 470rpx);

         max-height: calc(100vh - 470rpx);

         padding-top: 0rpx;

			


         .type-list {

            max-width: 140rpx;

            min-width: 140rpx;

@@ -604,7 +615,7 @@
            // max-height: calc(100vh - 600rpx);

            overflow-y: scroll;

            margin-right: 10rpx;

			


            .type-item {

               text-align: center;

               font-weight: 400;

@@ -615,30 +626,33 @@
               // padding-left: 30rpx;

               // padding-right: 30rpx;

            }

			


            .type-item.current {

               font-weight: 600;

               color: #04BA97;

            }

         }

         .flg-category.component-shop-item{

            .img{



         .flg-category.component-shop-item {

            .img {

               width: 140rpx;

               height: 140rpx;

               margin-top: 10rpx;

            }

            .info-container{



            .info-container {

               .title {

                  margin-top: 0rpx;

               }

               .shop-name{

						
               }



               .shop-name {}



               .other-info {

                  margin-bottom: 60rpx;

               }

               .bottom-buttons{

                      bottom: -50rpx;



               .bottom-buttons {

                  bottom: -50rpx;

               }

            }