Merge branch 'mall-ui' into dev

dist/index.html

@@ -38,8 +38,13 @@
     <script type="module" crossorigin src="./assets/index.b03652aa.js"></script>
     <link rel="modulepreload" href="./assets/vendor.5359187d.js">
     <link rel="modulepreload" href="./assets/index.47b0863e.js">
+<<<<<<< HEAD
     <link rel="stylesheet" href="./assets/vendor.68261ebd.css">
     <link rel="stylesheet" href="./assets/index.cb2212cc.css">
+=======
+    <link rel="stylesheet" href="./assets/index.cb2212cc.css">
+    <link rel="stylesheet" href="./assets/vendor.68261ebd.css">
+>>>>>>> mall-ui
     <link rel="stylesheet" href="./assets/index.5062a520.css">
     <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script>
   </head>
@@ -49,7 +54,11 @@
     
     <!-- <script type="module" src="/src/teacher/main.ts"></script> -->
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
     <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.a6d92559.js"></script>
+=======
+    <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.11b78793.js"></script>
+>>>>>>> mall-ui
     <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.99cb2d9a.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

dist/teacher.html

@@ -38,8 +38,13 @@
     <script type="module" crossorigin src="./assets/teacher.ef062d42.js"></script>
     <link rel="modulepreload" href="./assets/vendor.5359187d.js">
     <link rel="modulepreload" href="./assets/index.47b0863e.js">
+<<<<<<< HEAD
     <link rel="stylesheet" href="./assets/index.cb2212cc.css">
     <link rel="stylesheet" href="./assets/vendor.68261ebd.css">
+=======
+    <link rel="stylesheet" href="./assets/vendor.68261ebd.css">
+    <link rel="stylesheet" href="./assets/index.cb2212cc.css">
+>>>>>>> mall-ui
     <link rel="stylesheet" href="./assets/index.5062a520.css">
     <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script>
   </head>
@@ -48,7 +53,11 @@
     <div id="app"></div>
     
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+<<<<<<< HEAD
     <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.a6d92559.js"></script>
+=======
+    <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.11b78793.js"></script>
+>>>>>>> mall-ui
     <script nomodule id="vite-legacy-entry" data-src="./assets/teacher-legacy.1da20334.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

src/views/shop-mall/components/TheHomeHeader/index.module.less

@@ -0,0 +1,52 @@
+.theHomeHeader {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  padding: 10px 14px;
+  z-index: 100;
+  .content {
+    display: flex;
+    align-items: center;
+    .mall {
+      width: 72px;
+      height: 28px;
+      flex-shrink: 0;
+    }
+    .cart {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      margin-right: 26px;
+    }
+    .more {
+      width: 4px;
+      height: 16px;
+      flex-shrink: 0;
+      margin-right: 6px;
+    }
+  }
+  .searchBox {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    background-color: #f8f8f8;
+    border-radius: 20px;
+    color: #ccc;
+    height: 30px;
+    margin-left: 4px;
+    margin-right: 16px;
+    .iconSearch {
+      width: 16px;
+      height: 16px;
+      margin-right: 16px;
+    }
+  }
+}
+.popover {
+  :global {
+    .van-popover__arrow {
+      right: 0 !important;
+    }
+  }
+}

src/views/shop-mall/components/TheHomeHeader/index.tsx

@@ -0,0 +1,52 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.less'
+
+import IconMall from '../../images/icon-mall.png'
+import IconSearch from '../../images/icon-search.png'
+import IconCart from '../../images/icon-cart.png'
+import IconMore from '../../images/icon-more.png'
+import IconLocation from '../../images/icon-location.png'
+import IconOrder from '../../images/icon-order.png'
+import { Popover } from 'vant'
+
+export default defineComponent({
+  name: 'TheHomeHeader',
+  emits: ['cart', 'more', 'search'],
+  setup(props, { emit }) {
+    const popoverSlots = {
+      reference: () => (
+        <img class={styles.more} src={IconMore} onClick={() => emit('more')} />
+      )
+    }
+
+    const popoverShow = ref(false)
+    const actions = [
+      { text: '我的订单', icon: IconLocation, url: '/goodsOrder' },
+      { text: '我的地址', icon: IconOrder, url: '/' }
+    ]
+    return () => (
+      <div class={styles.theHomeHeader}>
+        <div class={styles.content}>
+          <img class={styles.mall} src={IconMall} />
+          <div class={styles.searchBox} onClick={() => emit('search')}>
+            <img class={styles.iconSearch} src={IconSearch} />
+            <span>搜索你喜欢的内容</span>
+          </div>
+          <img
+            class={styles.cart}
+            src={IconCart}
+            onClick={() => emit('cart')}
+          />
+          <Popover
+            placement="bottom-end"
+            class={styles.popover}
+            v-model:show={popoverShow.value}
+            v-slots={popoverSlots}
+            actions={actions}
+            onSelect={(action) => emit('more', action)}
+          ></Popover>
+        </div>
+      </div>
+    )
+  }
+})

src/views/shop-mall/components/goods/index.module.less

@@ -3,7 +3,7 @@
   background: #ffffff;
   border-radius: 8px;
   overflow: hidden;
-
+  margin-top: 14px;
   --van-image-placeholder-background-color: #f1f1f1;
 }
 

src/views/shop-mall/components/goods/index.tsx

@@ -9,6 +9,10 @@ import { moneyFormat } from '@/helpers/utils'
 export default defineComponent({
   name: 'goods',
   props: {
+    showAdd: {
+      type: Boolean,
+      default: true
+    },
     item: {
       type: Object,
       default: {}
@@ -42,18 +46,20 @@ export default defineComponent({
             </del> */}
             <p class={styles.goodsPrice}>￥{moneyFormat(item.price)}</p>
 
-            <Icon
-              class={[
-                styles.addCart,
-                item.stock <= 0 && styles.addCartDisabled
-              ]}
-              name={iconAddCart}
-              size={22}
-              onClick={(e: MouseEvent) => {
-                e.stopPropagation()
-                item.stock > 0 && this.onBuyClick(item)
-              }}
-            />
+            {this.showAdd && (
+              <Icon
+                class={[
+                  styles.addCart,
+                  item.stock <= 0 && styles.addCartDisabled
+                ]}
+                name={iconAddCart}
+                size={22}
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation()
+                  item.stock > 0 && this.onBuyClick(item)
+                }}
+              />
+            )}
           </div>
         </div>
       </div>

src/views/shop-mall/components/hot-goods/index.module.less

@@ -1,6 +1,9 @@
 .hotGoods {
+  padding-top: 10vmin;
   margin: 0 14px 10px;
-  background: linear-gradient(180deg, #FFE4A0 0%, #FFF5DF 100%);
+  background: url('../../images/icon-hotbg.png');
+  background-repeat: no-repeat;
+  background-size: 100%;
   border-radius: 7px;
 
   .title {

src/views/shop-mall/components/hot-goods/index.tsx

@@ -23,27 +23,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.hotGoods}>
-        <Row class={styles.hotGoodsWrap}>
-          <Col span={8} class={styles.title}>
-            <img class={styles.hotIcon} src={getAssetsHomeFile('icon-fire.png')} />
-          </Col>
-          <Col span={16} class={styles.tips}>
-            <div>
-              <Icon
-                name={getAssetsHomeFile('icon-genuine-goods.png')}
-                size={14}
-              />
-              正品商品
-            </div>
-            <div>
-              <Icon
-                name={getAssetsHomeFile('icon-after-sales.png')}
-                size={14}
-              />
-              安心售后
-            </div>
-          </Col>
-        </Row>
+        {/* <img src="" alt="" /> */}
         <div class={styles.hotGoodsSection}>
           {this.hotProductList.map((item: any) => (
             <div class={styles.hotGoodsItem} onClick={() => {

src/views/shop-mall/components/tab-list/index.tsx

@@ -9,6 +9,10 @@ import styles from './index.module.less'
 export default defineComponent({
   name: 'tab-list',
   props: {
+    showAdd:{
+      type: Boolean,
+      default: true
+    },
     // 商品分类ID
     typeId: {
       type: Number,
@@ -127,7 +131,7 @@ export default defineComponent({
         <List
           v-model:loading={this.loading}
           finished={this.finished}
-          finishedText=""
+          finishedText="没有更多了"
           immediateCheck={false}
           class={[styles.goodsList, 'mb12']}
           onLoad={this.getList}
@@ -135,10 +139,10 @@ export default defineComponent({
           {(this.list.length &&
             this.list.map((item: any) => (
               <Goods
-                style={{ marginTop: '12px' }}
                 item={item}
                 onItemClick={this.onDetailClick}
                 onBuyClick={this.onBuyClick}
+                showAdd={this.showAdd}
               />
             ))) ||
             null}

src/views/shop-mall/index.module.less

@@ -1,3 +1,13 @@
+.shopMall{
+  max-width: 750PX;
+  margin: 0 auto;
+}
+.hotContent{
+  padding: 11px 14px 0 14px;
+  background-color: #fff;
+  margin-bottom: 12px;
+  border-radius: 0 0 18px 18px;
+}
 .icon-shop-cart {
   display: flex;
   align-items: center;
@@ -30,26 +40,53 @@
   }
 }
 .swipe {
-  margin: 11px 14px 0 14px;
-  height: 132px;
+  
+  height: 35.2vmin;
   border-radius: 10px;
   overflow: hidden;
   .swipeItemImg {
     height: 100%;
     width: 100%;
   }
+  :global{
+    .van-swipe__indicators{
+      right: 10px;
+      left: initial;
+    }
+    .van-swipe__indicator{
+      transition: width .3s;
+    }
+    .van-swipe__indicator--active{
+      width: 12px;
+      border-radius: 4px;
+    }
+  }
 }
 
 .tabs{
   :global{
+    .van-tab{
+      height: 30px;
+      padding: 0 14px;
+      border-radius: 6px;
+      color: #333;
+      font-size: 14px;
+      background-color: #fff;
+      margin-right: 10px;
+    }
+    .van-tabs__wrap{
+      height: initial;
+      padding-top: 14px;
+    }
+    .van-tab--active{
+      background-color: #D9FFF8;
+      color: var(--van-primary);
+    }
+    .van-tabs__nav{
+      padding: 0 10px;
+    }
     .van-tabs__line{
-      width: 20px !important;
-      height: 7px;
-      bottom: 0.5rem;
-      background-image: url('./images/bottom-line.svg');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      background-color: transparent !important;
+      display: none;
     }
   }
 }

src/views/shop-mall/index.tsx

@@ -28,6 +28,7 @@ import {
 import ColSearch from '@/components/col-search'
 import { browser, setAuth } from '@/helpers/utils'
 import { cartCount, getCartCount } from './shop-mall'
+import TheHomeHeader from './components/TheHomeHeader'
 
 export default defineComponent({
   name: 'shop-mall',
@@ -122,69 +123,46 @@ export default defineComponent({
   },
   render() {
     return (
-      <div>
-        <div ref="headers">
-          <ColHeader
-            border={false}
-            background="linear-gradient(#59e5d5, 30%, #f6f8f9)"
-            onClickRight={() => this.openWebView('/cart')}
-            v-slots={{
-              right: () => (
-                <div class={styles['icon-shop-cart']}>
-                  <Badge
-                    class={styles.iconBadge}
-                    showZero={false}
-                    offset={[-8, 8]}
-                    color="rgba(236,92,50,1)"
-                    content={cartCount.value}
-                  >
-                    <Icon name={iconShopCart} size={30} />
-                  </Badge>
-                </div>
-              )
-            }}
-            onHeaderBack={() => {
-              this.$nextTick(() => {
-                const { height } = useRect((this as any).$refs.headers)
-                this.height = height - 1
+      <div class={styles.shopMall}>
+        <TheHomeHeader
+          onCart={() => this.openWebView('/cart')}
+          onSearch={() => this.openWebView('/goodsList?input=focus')}
+          onMore={action => {
+            if(!action) return
+            if (action.text == '我的地址'){
+              postMessage({
+                api: 'setAddress',
+                content: {}
               })
-            }}
-          />
-        </div>
+            } else {
+              this.openWebView(action.url)
+            }
+          }}
+        />
         <PullRefresh
           v-model={this.loading}
           loading-text="正在刷新..."
           success-text="刷新完成"
           onRefresh={() => this.onRefresh()}
         >
-          <div
-            onClick={() => {
-              this.openWebView('/goodsList?input=focus')
-            }}
-          >
-            <ColSearch
-              disabled
-              class={styles.searchBox}
-              background="transparent"
+          <div class={styles.hotContent}>
+            <Swipe class={styles.swipe} autoplay={3000}>
+              {this.advertiseList.map((item: any) => (
+                <SwipeItem onClick={() => this.openWebView(item.url)}>
+                  <Image
+                    class={styles.swipeItemImg}
+                    src={item.pic}
+                    fit="fill"
+                  />
+                </SwipeItem>
+              ))}
+            </Swipe>
+
+            <MenuList
+              productList={this.productList}
+              onOpenWebView={this.openWebView}
             />
           </div>
-          <Swipe
-            class={styles.swipe}
-            autoplay={3000}
-            showIndicators={false}
-            lazyRender
-          >
-            {this.advertiseList.map((item: any) => (
-              <SwipeItem onClick={() => this.openWebView(item.url)}>
-                <Image class={styles.swipeItemImg} src={item.pic} fit="fill" />
-              </SwipeItem>
-            ))}
-          </Swipe>
-
-          <MenuList
-            productList={this.productList}
-            onOpenWebView={this.openWebView}
-          />
 
           {this.hotProductList.length === 3 && (
             <HotGoods
@@ -209,12 +187,14 @@ export default defineComponent({
                 isTab={true}
                 productAttributeCategoryId={0}
                 onOpenWebView={this.openWebView}
+                showAdd={false}
               />
             </Tab>
             {this.productCategoryList.map((item: any) => (
               <Tab title={item.name} name={item.id}>
                 <TabList
                   isTab={true}
+                  showAdd={false}
                   productAttributeCategoryId={item.id}
                   onOpenWebView={this.openWebView}
                 />