first commit

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Info.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="Info" ref="infos">
+    <div
+      class="header_top"
+      :style="{ background: `rgba(255, 255, 255, ${backColor})` }"
+    >
+      <van-icon
+        name="arrow-left"
+        :style="{ color: iconColor }"
+        @click="$router.back()"
+      />
+      <van-icon name="cart-o" :style="{ color: iconColor }" />
+    </div>
+
+    <van-swipe class="my-swipe" @change="onChange" :autoplay="3000">
+      <van-swipe-item
+        v-for="(item, index) in info.wares_masterimg"
+        :key="index"
+      >
+        <img :src="item" @click="showSwiper(index)" alt="" />
+      </van-swipe-item>
+
+      <template #indicator>
+        <div class="custom-indicator">{{ current + 1 }}/3</div>
+      </template>
+    </van-swipe>
+
+    <div class="content_info">
+      <div class="price">￥{{ info.wares_nowprice }}</div>
+      <div class="tite">{{ info.wares_title }}</div>
+      <div class="desc">{{ info.wares_info }}</div>
+    </div>
+
+    <div class="img">
+      <img
+        v-for="(v, i) in info.wares_infoimg"
+        @click="showImg(i)"
+        :key="i"
+        :src="v"
+        alt=""
+      />
+    </div>
+
+    <van-goods-action>
+      <van-goods-action-icon icon="chat-o" text="收藏" />
+      <van-goods-action-icon
+        @click="$router.push('/car')"
+        icon="cart-o"
+        text="购物车"
+        :badge="count"
+      />
+      <van-goods-action-button
+        type="warning"
+        :style="{
+          background: isAddCar
+            ? 'linear-gradient(to right,#c4c1b4,#c8c7c6)'
+            : '',
+        }"
+        @click="isAddCar ? '' : addCar()"
+        text="加入购物车"
+      />
+      <van-goods-action-button type="danger" text="立即购买" />
+    </van-goods-action>
+
+    <Preview
+      :images="info.wares_infoimg"
+      :is-show="showStatus"
+      @status="changeShowStatus"
+      :idx="infoIndex"
+    ></Preview>
+  </div>
+</template>
+
+<script>
+import Preview from "@c/Preview.vue";
+import { ImagePreview } from "vant";
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Info",
+  data() {
+    return {
+      showStatus: false,
+      infoIndex: 0,
+      id: this.$route.query.id,
+      current: 0,
+      backColor: 0,
+      iconColor: "#fff",
+      info: {},
+      isAddCar: false, // false 可以添加，true 不可以添加
+    };
+  },
+  created() {
+    this.getInfoData();
+    this.checkCar();
+  },
+  mounted() {
+    window.addEventListener("scroll", this.paperScroll);
+  },
+  methods: {
+    ...mapMutations({
+      addCount: "SET_COUNT",
+    }),
+    // 添加购物车
+    async addCar() {
+      await this.$http.index.addCar({
+        waresid: this.id,
+      });
+      this.addCount();
+      this.$toast("加入成功");
+      this.isAddCar = true;
+    },
+    async checkCar() {
+      let res = await this.$http.index.checkCar({
+        waresid: this.id,
+      });
+      this.isAddCar = res.isAddCar;
+      console.log(this.isAddCar);
+    },
+    showSwiper(index) {
+      ImagePreview({
+        images: this.info.wares_masterimg,
+        startPosition: index,
+      });
+    },
+    changeShowStatus(status) {
+      this.showStatus = status;
+    },
+    showImg(i) {
+      this.infoIndex = i;
+      this.showStatus = true;
+    },
+    async getInfoData() {
+      let res = await this.$http.index.info({
+        id: this.id,
+      });
+      this.info = res;
+    },
+    onChange(index) {
+      this.current = index;
+    },
+    paperScroll() {
+      var top = document.documentElement.scrollTop;
+      var scrollTop = (top / 412).toFixed(1);
+      if (top >= 367) {
+        this.iconColor = "#000";
+      } else {
+        this.iconColor = "#fff";
+      }
+
+      if (scrollTop >= 1) {
+        this.backColor = 255;
+      } else {
+        this.backColor = scrollTop;
+      }
+    },
+  },
+  computed: {
+    ...mapGetters({
+      count: "GET_CARCOUNT",
+    }),
+  },
+  components: {
+    Preview,
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+@import '~@page/Info.styl';
+</style>