151 lines
4.0 KiB
Vue
151 lines
4.0 KiB
Vue
<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>
|
||
|