172 lines
3.9 KiB
Vue
172 lines
3.9 KiB
Vue
<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>
|