first commit

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Info.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="info">
+
+    <div class="header_back" :style="{ background: `rgba(255,255,255,${opacity})` }">
+      <van-icon size="18" :class="isHidden ? 'default' : 'theme' " name="arrow-left" />
+      <van-icon size="18" :class="isHidden ? 'default' : 'theme' " name="shopping-cart-o" />
+    </div>
+
+    <van-tabs ref="mytab" :class=" isHidden ? 'hidden' : '' " v-model="active" scrollspy sticky>
+      <van-tab title="商品">
+        <SwipeComponents ref="mySwipe" :list="infoData.wares_masterimg">
+          <template #default="{ item }">
+            <img @click="showImgPri(item.index)" :src="item.src" alt="">
+          </template>
+
+        </SwipeComponents>
+        <div class="text">
+          <div class="price">￥5399</div>
+          <div class="title">小米12</div>
+          <div class="desc">「24期免息，信用卡分期至高立减500元；+99元得50W立式无线充；【全款支付套装】赠蓝牙耳机Air2 SE」</div>
+          <ul class="point_desc">
+            <li>【性能跃升】全新一代 骁龙8 移动平台</li>
+            <li>【性能跃升】全新一代 骁龙8 移动平台</li>
+            <li>【性能跃升】全新一代 骁龙8 移动平台</li>
+          </ul>
+
+          <van-contact-card
+              type="edit"
+              name="bmy"
+              tel="15155145354"
+          />
+
+        </div>
+      </van-tab>
+      <van-tab title="详情">
+        <div class="info_img">
+          <img v-for="(item,index) in infoData.wares_infoimg"
+               :key="index"
+               :src="item" @click="infoPreview(index)" alt="">
+        </div>
+      </van-tab>
+    </van-tabs>
+
+    <van-goods-action>
+      <van-goods-action-icon icon="chat-o" text="收藏" dot />
+      <van-goods-action-icon icon="cart-o" to="/car" text="购物车" :badge="getCarArr.length" />
+      <van-goods-action-button :class="isAddCar ? 'noclick' : '' " type="warning" @click="isAddCar ? '' : addCar() " text="加入购物车" />
+      <van-goods-action-button type="danger" text="立即购买" />
+    </van-goods-action>
+
+  </div>
+</template>
+
+<script>
+import SwipeComponents from "@/components/Swipe"
+import { ImagePreview } from 'vant';
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: "info",
+  data() {
+    return {
+      active: 0,
+      opacity: 0,
+      infoData: {},
+      isHidden: true,
+      isAddCar: true
+    }
+  },
+  async created() {
+    await this.getCarList()
+    this.getInfo();
+    this.checkCar();
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.handleScroll)
+  },
+  methods: {
+    ...mapActions([
+        'getCarList'
+    ]),
+    ...mapMutations([
+        'setCount'
+    ]),
+    async checkCar() {
+      let res = await this.$http.car.checkCar({
+        waresid: this.$route.query.id
+      });
+      this.isAddCar = res.isAddCar
+    },
+    async addCar() {
+      let res = await this.$http.car.addCar({
+        waresid: this.$route.query.id
+      });
+      this.isAddCar = true
+      await this.getCarList()
+    },
+    infoPreview(index) {
+      ImagePreview({
+        images: this.infoData.wares_infoimg,
+        startPosition: index
+      });
+    },
+    showImgPri(index) {
+      ImagePreview({
+        images: this.infoData.wares_masterimg,
+        startPosition: index,
+        onChange: (index) => {
+          this.$refs.mySwipe.to(index)
+        }
+      });
+    },
+    handleScroll() {
+      const scrollTop = window.pageYOffset;
+      this.opacity = scrollTop / 412
+      // 显示tab切换
+      if (scrollTop >= 50) {
+        this.isHidden = false
+        this.$refs.mytab.resize()
+      // 隐藏tab切换
+      } else {
+        this.isHidden = true
+      }
+    },
+    async getInfo() {
+      let res = await this.$http.index.info({
+        id: this.$route.query.id
+      });
+      this.infoData = res;
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCarArr',
+        'getTheme'
+    ])
+  },
+  components: {
+    SwipeComponents
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "~@page/info.less";
+</style>
+