添加商城

src/components/col-header/index.module.less

@@ -4,6 +4,11 @@
     .van-icon {
       color: inherit;
     }
+    .van-nav-bar__right {
+      & > div {
+        line-height: 0;
+      }
+    }
   }
   &.transparent {
     background-color: transparent;

src/components/col-header/index.tsx

@@ -138,6 +138,10 @@ export default defineComponent({
                 border={this.border}
                 onClick-right={this.clickRight}
                 onClick-left={this.onClickLeft}
+                v-slots={{
+                  right: () =>
+                    (this.$slots.right && this.$slots.right()) || this.rightText
+                }}
               ></NavBar>
             </div>
             {this.$slots.default ? this.$slots.default() : null}

src/router/routes-common.ts

@@ -93,7 +93,7 @@ export const router = [
     name: 'shopMall',
     component: () => import('@/views/shop-mall/index'),
     meta: {
-      title: '乐理详情'
+      title: '商城'
     }
   }
 ]

src/student/practice-class/index.tsx

@@ -90,7 +90,7 @@ export default defineComponent({
     this.getList()
 
     // this.$nextTick(() => {
-    const { width, height } = useElementSize((this as any).$refs.tabs)
+    const { width, height } = useElementSize((this as any).$refs.headers)
     console.log(width.value, height.value, width, height)
     this.height = height
     // })
@@ -162,7 +162,7 @@ export default defineComponent({
             width: '100%'
           }}
         >
-          <div ref="tabs">
+          <div ref="headers">
             <ColHeader
               title="陪练课"
               isFixed={false}

src/styles/index.less

@@ -140,7 +140,7 @@ body {
   position: relative;
   .van-sticky {
     height: inherit !important;
-    top: 0px;
+    top: var(--van-sticky-z-index) !important;
     position: fixed;
     width: 100%;
   }

src/teacher/practice-class/practice-setting.tsx

@@ -48,7 +48,7 @@ export default defineComponent({
         subjectIdTemp: '',
         subjectId: [] as any[],
         subjectPrice: [] as any[],
-        skipHolidayFlag: 0,
+        skipHolidayFlag: 1,
         setting: ''
       },
       minutes: [] as any,

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

@@ -0,0 +1,40 @@
+.goods {
+  width: 168px;
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.goodsImg {
+  width: 100%;
+  height: 168px;
+}
+.goodsInfo {
+  position: relative;
+  padding: 8px;
+
+  .goodsName {
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    padding-bottom: 6px;
+  }
+}
+
+.goodsSale {
+  font-size: 12px;
+  color: #999999;
+  line-height: 17px;
+}
+
+.goodsPrice {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--van-primary);
+  line-height: 20px;
+}
+.addCart {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+}

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

@@ -0,0 +1,31 @@
+import { Icon, Image } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+import iconAddCart from '../../images/icon-add-cart.png'
+
+export default defineComponent({
+  name: 'goods',
+  render() {
+    return (
+      <div class={styles.goods}>
+        <Image
+          src="https://daya.ks3-cn-beijing.ksyun.com/202204/T3unJeA.png"
+          fit="cover"
+          class={styles.goodsImg}
+        />
+        <div class={styles.goodsInfo}>
+          <div class={[styles.goodsName, 'van-ellipsis']}>
+            圆号 S.E.SHIRES圆号 S.E.SHIRES
+          </div>
+          <div class={styles.goodsBuy}>
+            <p class={styles.goodsSale}>已售152</p>
+            <p class={styles.goodsPrice}>￥21800</p>
+
+            <Icon class={styles.addCart} name={iconAddCart} size={22} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,56 @@
+.hotGoods {
+  margin: 0 14px 10px;
+  height: 150px;
+  background: linear-gradient(180deg, #ffecba 0%, rgba(255, 255, 255, 0) 100%);
+  border-radius: 7px;
+
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+    display: flex;
+    align-items: inherit;
+
+    line-height: 22px;
+    :global {
+      .van-icon {
+        margin-left: 8px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .tips {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    & > div {
+      margin-right: 14px;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #ff4e19;
+      line-height: 16px;
+    }
+    :global {
+      .van-icon {
+        margin-right: 3px;
+      }
+    }
+  }
+
+  .hotGoodsSection {
+    padding: 0 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .hotGoodsItem,
+  .hotGoodsItemImg {
+    width: 105px;
+    height: 105px;
+    background: #ffffff;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { Row, Col, Image, Icon } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../images/${fileName}`
+  const modules = import.meta.globEager('../../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'hot-goods',
+  render() {
+    return (
+      <div class={styles.hotGoods}>
+        <Row style={{ padding: '9px 0 6px' }}>
+          <Col span={8} class={styles.title}>
+            <Icon name={getAssetsHomeFile('icon-fire.png')} size={18} />
+            热销商品
+          </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>
+        <div class={styles.hotGoodsSection}>
+          <div class={styles.hotGoodsItem}>
+            <Image
+              class={styles.hotGoodsItemImg}
+              src="https://ks3-cn-beijing.ksyuncs.com/daya/1651803185953%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220506100738.jpg"
+              fit="cover"
+            />
+          </div>
+          <div class={styles.hotGoodsItem}>
+            <Image
+              class={styles.hotGoodsItemImg}
+              src="https://ks3-cn-beijing.ksyuncs.com/daya/1651803185953%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220506100738.jpg"
+              fit="cover"
+            />
+          </div>
+          <div class={styles.hotGoodsItem}>
+            <Image
+              class={styles.hotGoodsItemImg}
+              src="https://ks3-cn-beijing.ksyuncs.com/daya/1651803185953%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220506100738.jpg"
+              fit="cover"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/shop-mall/components/menu-list/index.module.less

@@ -0,0 +1,39 @@
+.swipeType {
+  margin: 14px 14px 0;
+  padding-bottom: 30px;
+  :global {
+    .van-swipe__indicators {
+      bottom: 12px;
+    }
+    .van-swipe__indicator:not(:last-child) {
+      margin-right: 0;
+    }
+    .van-swipe__indicator {
+      width: 20px;
+      height: 4px;
+      background: #ebebeb;
+      border-radius: 4px;
+    }
+  }
+}
+
+.typeSection {
+  display: flex;
+  align-items: center;
+}
+
+.typeItem {
+  width: 25%;
+  text-align: center;
+  .swipeTypeImg {
+    width: 47px;
+    height: 47px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  .typeName {
+    padding-top: 12px;
+    font-size: 12px;
+    color: #333333;
+  }
+}

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

@@ -0,0 +1,41 @@
+import { Swipe, SwipeItem, Image } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'menu-list',
+  render() {
+    return (
+      <Swipe
+        class={styles.swipeType}
+        indicator-color="var(--van-primary)"
+        loop={false}
+      >
+        <SwipeItem class={styles.typeSection}>
+          {['美食', '甜点饮品', '鲜花', '美容美发', '家居生活'].map(item => (
+            <div class={styles.typeItem}>
+              <Image
+                class={styles.swipeTypeImg}
+                src={'https://daya.ks3-cn-beijing.ksyun.com/202204/T3unJeA.png'}
+                fit="cover"
+              />
+              <p class={styles.typeName}>{item}</p>
+            </div>
+          ))}
+        </SwipeItem>
+        <SwipeItem class={styles.typeSection}>
+          {['美食', '甜点饮品', '鲜花', '美容美发', '家居生活'].map(item => (
+            <div class={styles.typeItem}>
+              <Image
+                class={styles.swipeTypeImg}
+                src={'https://daya.ks3-cn-beijing.ksyun.com/202204/T3unJeA.png'}
+                fit="cover"
+              />
+              <p class={styles.typeName}>{item}</p>
+            </div>
+          ))}
+        </SwipeItem>
+      </Swipe>
+    )
+  }
+})

src/views/shop-mall/components/tab-list/index.module.less

@@ -0,0 +1,16 @@
+.tabList {
+  :global {
+    .van-list__loading,
+    .van-list__finished-text,
+    .van-list__error-text {
+      width: 100%;
+    }
+  }
+}
+
+.goodsList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0 14px;
+}

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

@@ -0,0 +1,86 @@
+import ColResult from '@/components/col-result'
+import request from '@/helpers/request'
+import { List, Tab, Tabs } from 'vant'
+import { defineComponent } from 'vue'
+import Goods from '../goods'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'tab-list',
+  data() {
+    return {
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        page: 1,
+        rows: 20
+      }
+    }
+  },
+  mounted() {
+    // this.getList()
+  },
+  methods: {
+    onSearch(value: string) {
+      this.dataShow = true
+      this.loading = false
+      this.finished = false
+      this.list = []
+      this.params.page = 1
+      this.getList()
+    },
+    async getList() {
+      // try {
+      //   let params = this.params
+      //   const res: any = { data: {} }
+      //   // await request.post(
+      //   //   '/api-student/courseGroup/queryPageCourseGroup',
+      //   //   {
+      //   //     data: {
+      //   //       ...params
+      //   //     }
+      //   //   }
+      //   // )
+      //   this.loading = false
+      //   const result = res.data || {}
+      //   // 处理重复请求数据
+      //   if (this.list.length > 0 && result.pageNo === 1) {
+      //     return
+      //   }
+      //   this.list = this.list.concat(result.rows || [])
+      //   this.finished = result.pageNo >= result.totalPage
+      //   this.params.page = result.pageNo + 1
+      //   this.dataShow = this.list.length > 0
+      // } catch {
+      //   this.dataShow = false
+      //   this.finished = true
+      // }
+    }
+  },
+  render() {
+    return (
+      <div class={styles.tabList}>
+        {this.dataShow ? (
+          <List
+            v-model:loading={this.loading}
+            finished={this.finished}
+            finishedText=" "
+            immediateCheck={false}
+            class={[styles.goodsList, 'mb12']}
+            onLoad={this.getList}
+          >
+            {/* {this.list.map((item: any) => (
+            ))} */}
+            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item: any) => (
+              <Goods style={{ marginTop: '12px' }} />
+            ))}
+          </List>
+        ) : (
+          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无商品" />
+        )}
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,25 @@
+.icon-shop-cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .dot {
+    line-height: 16px;
+    background: #ff4e19;
+    border-radius: 10px 10px 0px 10px;
+    font-size: 12px;
+    color: #ffffff;
+    padding: 0px 5px;
+    margin-right: 5px;
+  }
+}
+
+.swipe {
+  margin: 14px;
+  border-radius: 10px;
+  overflow: hidden;
+  height: 162px;
+  .swipeItemImg {
+    height: 162px;
+    width: 100%;
+  }
+}

src/views/shop-mall/index.tsx

@@ -1,11 +1,106 @@
+import ColHeader from '@/components/col-header'
+import { Divider, Icon, Image, Sticky, Swipe, SwipeItem, Tab, Tabs } from 'vant'
 import { defineComponent } from 'vue'
+import HotGoods from './components/hot-goods'
+import MenuList from './components/menu-list'
+import TabList from './components/tab-list'
+import styles from './index.module.less'
+import { useElementSize } from '@vueuse/core'
+import iconShopCart from './images/icon-shop-cart.png'
 
 export default defineComponent({
   name: 'shop-mall',
   data() {
-    return {}
+    return {
+      height: 'auto' as any
+    }
+  },
+  mounted() {
+    const { height } = useElementSize((this as any).$refs.headers)
+    this.height = height
+  },
+  methods: {
+    onSearch() {}
   },
   render() {
-    return <>商城</>
+    return (
+      <div style={{ overflow: 'hidden' }}>
+        <div ref="headers">
+          <ColHeader
+            border={false}
+            background="linear-gradient(#59e5d5, 30%, #f6f8f9)"
+            v-slots={{
+              right: () => (
+                <div class={styles['icon-shop-cart']}>
+                  <span class={styles.dot}>12</span>
+                  <Icon name={iconShopCart} size={24} />
+                </div>
+              )
+            }}
+          />
+        </div>
+        <Swipe
+          class={styles.swipe}
+          autoplay={3000}
+          showIndicators={false}
+          lazyRender
+        >
+          <SwipeItem>
+            <Image
+              class={styles.swipeItemImg}
+              src={'https://daya.ks3-cn-beijing.ksyun.com/202204/T3unJeA.png'}
+              fit="cover"
+            />
+          </SwipeItem>
+          <SwipeItem>
+            <Image
+              class={styles.swipeItemImg}
+              src={'https://daya.ks3-cn-beijing.ksyun.com/202204/T3unJeA.png'}
+              fit="cover"
+            />
+          </SwipeItem>
+        </Swipe>
+
+        <MenuList />
+
+        <HotGoods />
+
+        <Tabs
+          shrink
+          lineWidth={25}
+          background={'#f6f8f9'}
+          color="var(--van-primary)"
+          class={styles.tabs}
+          sticky
+          offsetTop={this.height}
+          lazyRender
+        >
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+          <Tab title="全部商品">
+            <TabList />
+          </Tab>
+        </Tabs>
+      </div>
+    )
   }
 })