Bläddra i källkod

当二级分类一行显示不全时,不要换行,改成滑动显示

skyblued 3 år sedan
förälder
incheckning
77e871ecfd

+ 8 - 7
src/views/shop-mall/goods-list/index.module.less

@@ -36,12 +36,15 @@
   }
 }
 .filter-productCategory {
-  flex-wrap: wrap;
   font-size: 14px;
   color: #666666;
-  transition: color cubic-bezier(0.075, 0.82, 0.165, 1);
-  background: #ffffff;
   :global {
+    .van-tab{
+      padding: 0;
+    }
+    .van-tabs__line{
+      display: none !important;
+    }
     .van-col {
       height: 37px;
       display: flex;
@@ -50,16 +53,14 @@
     }
   }
   .filter-tag {
-    // text-overflow: ellipsis;
-    // overflow: hidden;
-    // white-space: nowrap;
-    padding: 0 10px;
+    padding: 5px 10px;
     height: 80%;
     border-radius: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 5px;
+    min-width: 50px;
   }
   .filter-tag-checked{
     background: var(--van-primary);

+ 24 - 19
src/views/shop-mall/goods-list/index.tsx

@@ -1,4 +1,4 @@
-import { Popup, Col, Row, Icon, Tag, Sticky } from 'vant'
+import { Popup, Col, Row, Icon, Tag, Sticky, Tabs, Tab } from 'vant'
 import { defineComponent } from 'vue'
 import TabList from '../components/tab-list'
 import styles from './index.module.less'
@@ -71,7 +71,6 @@ export default defineComponent({
             productAttributeCategory: undefined,
             brand: undefined
           })
-          
         }
       } catch (err) {}
     }
@@ -105,10 +104,10 @@ export default defineComponent({
       })
     },
 
-    onToggleTag(i: number) {
+    onToggleTag() {
       let tabList = this.$refs.tabList as any
       if (tabList.loading) return
-      this.productCategory.active = i
+      // this.productCategory.active = i
       this.$nextTick(() => {
         this.onSearch()
       })
@@ -198,25 +197,31 @@ export default defineComponent({
               <Icon name={iconFilter} size={18} />
             </Col>
           </Row>
+
           {this.productCategory.id ? (
-            <Row class={styles['filter-productCategory']}>
-              {/* <Col span={6}>{this.productCategory.name}</Col> */}
+            <Tabs class={styles['filter-productCategory']} shrink ellipsis={false} v-model:active={this.productCategory.active} onChange={() => this.onToggleTag()}>
               {this.productCategory &&
                 this.productCategory.children.map((n: any, i: number) => (
-                  <Col onClick={() => this.onToggleTag(i)}>
-                    <div
-                      class={[
-                        styles['filter-tag'],
-                        this.productCategory.active === i
-                          ? styles['filter-tag-checked']
-                          : ''
-                      ]}
-                    >
-                      {n.name}
-                    </div>
-                  </Col>
+                  <Tab
+                    name={i}
+                    title={n.name}
+                    v-slots={{
+                      title: () => (
+                        <div
+                          class={[
+                            styles['filter-tag'],
+                            this.productCategory.active === i
+                              ? styles['filter-tag-checked']
+                              : ''
+                          ]}
+                        >
+                          {n.name}
+                        </div>
+                      )
+                    }}
+                  ></Tab>
                 ))}
-            </Row>
+            </Tabs>
           ) : null}
         </Sticky>
 

+ 2 - 1
src/views/shop-mall/modal/add-goods-cart/index.tsx

@@ -104,7 +104,8 @@ export default defineComponent({
         price: selectItem.price, //添加到购物车的价格
         productSkuId: selectItem.id,
         quantity: this.total, // 数量
-        productId: item.id
+        productId: item.id,
+        hidden: this.showType === 'cart' ? 0 : 1
       }
       // console.log(body)
       try {

+ 6 - 0
src/views/shop-mall/shop-order-detail/index.module.less

@@ -39,3 +39,9 @@ body {
     }
   }
 }
+
+.copyWrap{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

+ 24 - 2
src/views/shop-mall/shop-order-detail/index.tsx

@@ -1,5 +1,5 @@
 import request from '@/helpers/request'
-import { Divider, Cell, CellGroup } from 'vant'
+import { Divider, Cell, CellGroup, Button, Toast } from 'vant'
 import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import ShopItem from '../components/shop-item'
@@ -117,9 +117,31 @@ export default defineComponent({
                   value={order.value?.deliveryCompany}
                 ></Cell>
                 <Cell
+                class={styles.addressDetail}
                   border={false}
                   title="运单编号:"
-                  value={order.value?.deliverySn}
+                  v-slots={{
+                    value: () => (
+                      <div class={styles.copyWrap}
+                        onClick={evt => {
+                          let copy = e => {
+                            e.clipboardData.setData('text/plain', order.value?.deliverySn)
+                            e.preventDefault()
+                            Toast("复制成功")
+                          }
+                          // 添加 copy 内容
+                          document.addEventListener('copy', copy)
+                          // // 执行 copy 命令
+                          document.execCommand('copy')
+                          // // 移除绑定事件
+                          document.removeEventListener('copy', copy)
+                        }}
+                      >
+                        <span style={{marginRight: '8px'}}>{order.value?.deliverySn}</span>
+                        <Button size='mini'>点击复制</Button>
+                      </div>
+                    )
+                  }}
                 ></Cell>
               </CellGroup>
             </div>