<template>
|
<div class="goods-detail">
|
<div class="goods-main" v-if="goodsmessage">
|
<swiper-component :swiperSource="goodsmessage.images" :swiperConfig="swiperConfig"></swiper-component>
|
<p class="title" v-text="goodsmessage.title"></p>
|
<p class="price">{{dict.money + goodsmessage.price}}</p>
|
<p class="express">{{dict.express + ':' + goodsmessage.express}}</p>
|
</div>
|
<div class="goods-active" v-if="goodsmessage && goodsmessage.promotion">
|
<span class="active-name">{{dict.promotion}}</span>
|
<p class="active-detail" v-for="(item, index) in goodsmessage.promotion" :key="index">{{item}}</p>
|
</div>
|
<div class="comment" v-if="goodsmessage && goodsmessage.comment">
|
<h4>
|
{{dict.buyer_comments}}（{{goodsmessage.comment.commentnum}}）
|
<a href="javascript:" class="back pull-right" @click="jumpMenu()">
|
<span>{{dict.view_all}}</span>
|
<i class="fa fa-angle-right"></i>
|
</a>
|
</h4>
|
<p><img :src="goodsmessage.comment.imgurl" alt="">{{goodsmessage.comment.nickname}}</p>
|
<p class="message">{{goodsmessage.comment.message}}</p>
|
<p class="date">{{goodsmessage.comment.date + goodsmessage.comment.specification}}</p>
|
</div>
|
<div class="detail" v-if="goodsmessage && goodsmessage.detail">
|
<h4>{{dict.goods_detail}}</h4>
|
<simple-table-component v-if="columns && store" :columns="columns" :store="store"></simple-table-component>
|
<p class="table-tail">{{dict.goods_detail_specify_tip}}</p>
|
</div>
|
<div class="exhibition" v-if="goodsmessage && goodsmessage.pictures">
|
<goods-list-component :goods="goodsmessage.pictures"></goods-list-component>
|
</div>
|
<tab-bar-branch1-component :status="collected" @tabchange="tabchange"></tab-bar-branch1-component>
|
<!-- <popup-component id="goodsdetail-popup" :popupdata=""></popup-component> -->
|
</div>
|
</template>
|
|
<script>
|
import {dict, dictgoodsdetail} from '../store/dictionary'
|
import {goodsdetail} from '../store/mockdata'
|
import swiperComponent from '../components/swiperComponent'
|
import goodsListComponent from '../components/goodsListComponent'
|
import simpleTableComponent from '../components/simpleTableComponent'
|
import tabBarBranch1Component from '../components/tabBarBranch1Component'
|
import popupComponent from '../components/popupComponent'
|
export default {
|
name: 'goodsDetail',
|
components: { swiperComponent, goodsListComponent, simpleTableComponent, tabBarBranch1Component, popupComponent },
|
data () {
|
return {
|
dict: {},
|
goodsmessage: null,
|
collected: false,
|
swiperConfig: {
|
loop: true,
|
autoplay: 3000,
|
pagination: '.swiper-pagination',
|
paginationClickable: true
|
},
|
columns: null,
|
store: null
|
}
|
},
|
methods: {
|
login () {
|
this.$router.push({name: 'login', params: {view: 'home'}})
|
},
|
jumpMenu () {
|
this.$router.push({name: 'comment'})
|
},
|
openpopup () {
|
$('#my-popup').popup()
|
},
|
jumptopayment () {
|
this.$router.push({name: 'payment'})
|
},
|
tabchange (type) {
|
if (type === 'collect') {
|
|
} else if (type === 'addcart') {
|
|
} else if (type === 'shopnow') {
|
$('#goodsdetail-popup').popup()
|
}
|
}
|
},
|
mounted: function () {
|
Object.assign(this.dict, dict, dictgoodsdetail)
|
setTimeout(() => {
|
this.goodsmessage = JSON.parse(JSON.stringify(goodsdetail))
|
this.columns = this.goodsmessage.detail.columns
|
this.store = this.goodsmessage.detail.data
|
this.collected = true
|
}, 1000)
|
}
|
}
|
</script>
|
|
<style scoped>
|
.goods-detail {
|
font-size: 16px;
|
}
|
.goods-main {
|
position: relative;
|
padding-bottom: 10px;
|
overflow: hidden;
|
border-bottom: 5px solid #eeeeee;
|
}
|
.goods-main p {
|
padding: 0px 5px;
|
box-sizing: border-box;
|
}
|
.title {
|
width: 100%;
|
font-size: 1em;
|
margin-top: 5px;
|
}
|
.express {
|
font-size: 0.9em;
|
}
|
.price {
|
color: #ff0000;
|
font-size: 1em;
|
}
|
.goods-active {
|
position: relative;
|
font-size: 14px;
|
padding: 10px 10px;
|
border-bottom: 5px solid #eeeeee;
|
}
|
.active-name {
|
position: absolute;
|
top: 12px;
|
color: #ffffff;
|
border: 1px solid #ee0000;
|
border-radius: 10px;
|
padding: 0px 10px;
|
line-height: 16px;
|
background: #dd0000;
|
opacity: 0.7;
|
}
|
.active-detail {
|
margin-left: 55px;
|
}
|
.comment {
|
padding: 10px 10px 15px;
|
border-bottom: 5px solid #eeeeee;
|
}
|
.comment p {
|
font-size: 14px;
|
}
|
.comment .message {
|
font-size: 12px;
|
}
|
.comment .date {
|
font-size: 12px;
|
color: #cccccc;
|
}
|
.comment p img {
|
width: 30px;
|
height: 30px;
|
border-radius: 30px;
|
vertical-align: bottom;
|
}
|
.back {
|
display: inline-block;
|
font-size: 28px;
|
font-weight: 300;
|
padding: 0 10px 0px 5px;
|
line-height: 28px;
|
color: #ED6938;
|
}
|
.back span {
|
font-size: 14px;
|
position: relative;
|
top: -4px;
|
}
|
.detail {
|
padding: 10px 5px 15px;
|
border-bottom: 5px solid #eeeeee;
|
}
|
.table-tail {
|
font-size: 13px;
|
color: #cccccc;
|
}
|
.exhibition {
|
padding-top: 10px;
|
margin-bottom: 50px;
|
}
|
</style>
|
