更新优化

src/student/teacher-dependent/teacher-elegant.tsx

@@ -14,14 +14,18 @@ import { useRect } from '@vant/use'
 
 export default defineComponent({
   data() {
+    const sessionSubjectId = sessionStorage.getItem('elegantSubjectId')
     return {
+      sessionSubjectId,
       searchStatus: false,
       openStatus: false,
       subjectList: [],
       params: {
         username: '',
         page: 1,
-        subjectId: null as any,
+        subjectId: (sessionSubjectId ||
+          state.user.data?.subjectId ||
+          null) as any,
         subjectName: ''
       },
       dataShow: true, // 判断是否有数据
@@ -36,14 +40,10 @@ export default defineComponent({
       const res = await request.get('/api-student/subject/subjectSelect')
       this.subjectList = res.data || []
     } catch {}
-    const sessionSubjectId = sessionStorage.getItem('elegantSubjectId')
-
-    this.params.subjectId =
-      sessionSubjectId || state.user.data?.subjectId || null
     let subjectName = ''
     this.subjectList.forEach((item: any) => {
       item.subjects?.forEach((child: any) => {
-        if (child.id === Number(sessionSubjectId)) {
+        if (child.id === Number(this.sessionSubjectId)) {
           subjectName = child.name
         }
       })
@@ -91,14 +91,14 @@ export default defineComponent({
       this.finished = false
       this.searchStatus = false
       this.getList()
-
-      sessionStorage.setItem('elegantSubjectId', this.params.subjectId)
     },
     onSearch(_search?: any) {
       this.params.username = _search
       this.onSort()
     },
     onDetail(item: any) {
+      this.params.subjectId &&
+        sessionStorage.setItem('elegantSubjectId', this.params.subjectId)
       this.$router.push({
         path: '/teacherHome',
         query: {

src/student/trade/index.module.less

@@ -3,5 +3,19 @@
     .van-tab--active {
       color: var(--van-primary);
     }
+    .van-tab__text {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .tab {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
   }
 }

src/student/trade/index.tsx

@@ -2,7 +2,7 @@ import { Cell, Sticky, Tab, Tabs } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import List from './list'
-import { useElementSize } from '@vueuse/core'
+import { useRect } from '@vant/use'
 
 export default defineComponent({
   name: 'tradeRecord',
@@ -14,8 +14,9 @@ export default defineComponent({
   },
   mounted() {
     this.$nextTick(() => {
-      const { width, height } = useElementSize((this as any).$refs.tabs)
-      console.log(width.value, height.value, width, height)
+      const { height } = useRect((this as any).$refs.tabs)
+      console.log(height, (this as any).$refs.tabs)
+      this.height = height
     })
   },
   render() {
@@ -24,11 +25,19 @@ export default defineComponent({
         <Tabs
           v-model:active={this.active}
           color="var(--van-primary)"
-          ref="tabs"
           sticky
           lineWidth={28}
         >
-          <Tab name="buy" title="购买记录">
+          <Tab
+            name="buy"
+            v-slots={{
+              title: () => (
+                <div class={styles.tab} ref="tabs">
+                  购买记录
+                </div>
+              )
+            }}
+          >
             <List height={this.height} />
           </Tab>
           <Tab name="refund" title="退费记录">

src/student/trade/list/index.tsx

@@ -113,7 +113,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.tradeList}>
-        <Sticky position="top" offsetTop={44}>
+        <Sticky position="top" offsetTop={this.height}>
           <Cell
             center
             style={{ backgroundColor: '#F7F8F9' }}

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

@@ -49,7 +49,8 @@ export default defineComponent({
               ]}
               name={iconAddCart}
               size={22}
-              onClick={() => {
+              onClick={(e: MouseEvent) => {
+                e.stopPropagation()
                 item.stock > 0 && this.onBuyClick(item)
               }}
             />

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

@@ -55,3 +55,127 @@
   color: #333333;
   line-height: 22px;
 }
+
+.row {
+  background-color: #fff;
+  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
+  .col {
+    line-height: 32px;
+    font-size: 16px;
+    color: #333333;
+  }
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  // margin-top: 14px;
+}
+
+.radio {
+  margin-right: 10px;
+  margin-bottom: 8px;
+  :global {
+    .van-radio__label--disabled {
+      opacity: 0.5;
+    }
+    .van-radio__icon {
+      display: none;
+    }
+    .van-tag--large {
+      height: 32px;
+      font-size: 16px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .van-tag {
+      box-sizing: border-box;
+    }
+    .van-tag--default {
+      color: var(--van-tag-text-default-color);
+    }
+    .van-tag--primary {
+      background-color: var(--tag-bg-color);
+    }
+    .van-radio__label {
+      margin-left: 0;
+    }
+  }
+}
+
+.section {
+  background: #fff;
+  padding: 12px 0 0;
+}
+
+.detail {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #999999;
+  line-height: 20px;
+  margin-bottom: 12px;
+  span {
+    padding: 0 10px;
+  }
+
+  &::before,
+  &::after {
+    display: inline-block;
+    content: ' ';
+    width: 40px;
+    height: 3px;
+  }
+  &::before {
+    background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, #d8d8d8 100%);
+  }
+  &::after {
+    background: linear-gradient(
+      270deg,
+      rgba(238, 238, 238, 0) 0%,
+      #d8d8d8 100%
+    );
+  }
+}
+
+.photoDetail {
+  img {
+    width: 100%;
+    vertical-align: middle;
+  }
+}
+
+.goodsDetail {
+  margin-bottom: calc(var(--van-action-bar-height) + 10px);
+}
+
+.actionBar {
+  padding: 5px 12px;
+  justify-content: space-between;
+  box-shadow: 0px -10px 10px var(--box-shadow-color);
+  :global {
+    .van-action-bar-icon {
+      align-items: center;
+    }
+    .van-action-bar-icon__icon {
+      margin-bottom: 0;
+      line-height: 0;
+    }
+  }
+}
+
+.addCertBtn {
+  background: #fff;
+  border: var(--van-button-border-width) solid
+    var(--van-button-primary-border-color);
+  color: var(--van-primary);
+}
+
+.buyGroup {
+  flex-basis: 60%;
+  display: flex;
+  justify-content: center;
+}

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

@@ -1,8 +1,26 @@
 import request from '@/helpers/request'
 import { moneyFormat } from '@/helpers/utils'
-import { Swipe, SwipeItem, Image, CellGroup, Cell, ImagePreview } from 'vant'
+import {
+  Swipe,
+  SwipeItem,
+  Image,
+  CellGroup,
+  Cell,
+  ImagePreview,
+  RadioGroup,
+  Radio,
+  Tag,
+  Row,
+  Col,
+  Sticky,
+  ActionBar,
+  ActionBarButton,
+  ActionBarIcon,
+  Icon
+} from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
+import iconShopCart from '../images/icon-shop-cart.png'
 
 export default defineComponent({
   name: 'goods-detail',
@@ -11,19 +29,58 @@ export default defineComponent({
     return {
       id: query.id,
       albumPics: [],
-      product: {} as any
+      product: {} as any,
+      radio: '',
+      skuStockListTemp: [],
+      detailMobileHtml: '',
+      loading: false
+    }
+  },
+  computed: {
+    skuStockList() {
+      // 处理规格
+      const product = this.product
+      const skuStockList: any =
+        this.skuStockListTemp.length > 0
+          ? this.skuStockListTemp
+          : [
+              {
+                id: -1,
+                price: product.price,
+                pic: product.pic,
+                stock: product.stock,
+                spData: null
+              }
+            ]
+      skuStockList.forEach((item: any) => {
+        if (item.spData) {
+          const spData = JSON.parse(item.spData)
+          let str = ''
+          spData.forEach((sp: any) => {
+            str += `${sp.value}`
+          })
+          item.spDataJson = str
+        } else {
+          item.spDataJson = '默认'
+        }
+      })
+      return skuStockList
     }
   },
   async mounted() {
     try {
+      this.loading = true
       const res = await request.get(
         `/api-mall-portal/product/detail/${this.id}`
       )
+      this.loading = false
       const result = res.data || {}
       this.albumPics = result.product.albumPics
         ? result.product.albumPics.split(',')
-        : []
+        : [result.product.pic]
       this.product = result.product
+      this.skuStockListTemp = result.skuStockList || []
+      this.detailMobileHtml = result.product.detailMobileHtml
     } catch {}
   },
   methods: {
@@ -34,6 +91,26 @@ export default defineComponent({
         startPosition: index,
         closeable: true
       })
+    },
+    onShowImg(target: any) {
+      const { localName } = target.srcElement
+      if (localName !== 'img') {
+        return
+      }
+      let startPosition = 0
+      const domList = document.querySelectorAll('.msgWrap img')
+      let imgList = Array.from(domList).map((item: any, index: number) => {
+        if (target.srcElement == item) {
+          startPosition = index
+        }
+        return item.src
+      })
+
+      ImagePreview({
+        images: imgList,
+        startPosition: startPosition,
+        closeable: true
+      })
     }
   },
   render() {
@@ -44,11 +121,12 @@ export default defineComponent({
           class={styles.swipe}
           lazyRender
           v-slots={{
-            indicator: (item: any) => (
-              <div class={styles['custom-indicator']}>
-                {(item.active || 0) + 1} / {item.total}
-              </div>
-            )
+            indicator: (item: any) =>
+              item.total > 1 && (
+                <div class={styles['custom-indicator']}>
+                  {(item.active || 0) + 1} / {item.total}
+                </div>
+              )
           }}
         >
           {this.albumPics.map((item: string, index: number) => (
@@ -78,8 +156,8 @@ export default defineComponent({
                     ¥{moneyFormat(product.originalPrice)}
                   </del>
                 </div>
-              ),
-              default: () => <div class={styles.stock}>销量4件</div>
+              )
+              // default: () => <div class={styles.stock}>销量4件</div>
             }}
           />
 
@@ -90,6 +168,75 @@ export default defineComponent({
             titleClass={[styles.goodsName, 'van-ellipsis']}
           />
         </CellGroup>
+
+        <Row class={[styles.row, 'mb12']}>
+          <Col span={4} class={styles.col}>
+            规格
+          </Col>
+          <Col span={20}>
+            <RadioGroup
+              class={styles['radio-group']}
+              modelValue={this.radio}
+              onUpdate:modelValue={val => (this.radio = val)}
+            >
+              {this.skuStockList.map((item: any) => {
+                const isActive = item.id === this.radio
+                const type = isActive ? 'primary' : 'default'
+                return (
+                  <Radio
+                    class={styles.radio}
+                    name={item.id}
+                    disabled={item.stock === 0}
+                    onClick={() => {
+                      // 判断是否有库存
+                      if (item.stock === 0) {
+                        return
+                      }
+                      this.radio = item.id
+                    }}
+                  >
+                    <Tag size="large" plain={isActive} type={type}>
+                      {item.spDataJson}
+                    </Tag>
+                  </Radio>
+                )
+              })}
+            </RadioGroup>
+          </Col>
+        </Row>
+        {this.detailMobileHtml && (
+          <div class={[styles.section]}>
+            <div class={styles.detail}>
+              <span>图文详情</span>
+            </div>
+
+            <div
+              class={[styles.photoDetail, 'msgWrap']}
+              onClick={this.onShowImg}
+              v-html={this.detailMobileHtml}
+            ></div>
+          </div>
+        )}
+
+        {!this.loading && (
+          <ActionBar class={styles.actionBar}>
+            <ActionBarIcon
+              icon="cart-o"
+              // text="购物车"
+              v-slots={{
+                icon: () => <Icon name={iconShopCart} size={30} />
+              }}
+            />
+            <div class={styles.buyGroup}>
+              <ActionBarButton
+                type="primary"
+                class={styles.addCertBtn}
+                text="加入购物车"
+              />
+              <ActionBarButton type="primary" text="立即购买" />
+            </div>
+          </ActionBar>
+        )}
       </div>
     )
   }