|
@@ -2,40 +2,44 @@
|
|
|
<div class="productDetails container">
|
|
|
<div class="payInfo">
|
|
|
<div class="imgs fl">
|
|
|
- <img src="@assets/productDetails.jpg" alt="" />
|
|
|
- <img src="@assets/productDetails.jpg" alt="" />
|
|
|
- <img src="@assets/productDetails.jpg" alt="" />
|
|
|
- <img src="@assets/productDetails.jpg" alt="" />
|
|
|
+ <img :src="imgs[currImgIndex]" alt="" />
|
|
|
+ <img
|
|
|
+ v-for="(s, index) in imgs"
|
|
|
+ :key="`imgs${index}`"
|
|
|
+ :src="s"
|
|
|
+ @mouseover="currImgIndex = index"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="info fl">
|
|
|
- <div class="title">铁皮柜</div>
|
|
|
+ <div class="title">{{ product.name }}</div>
|
|
|
<div class="desc">品牌认证</div>
|
|
|
<div class="row">
|
|
|
<div class="tit">价格 :</div>
|
|
|
- <div class="amount fl"><span>¥</span>1800</div>
|
|
|
+ <div class="amount fl"><span>¥</span>{{ product.price }}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="tit">规格 :</div>
|
|
|
<div class="items">
|
|
|
- <div class="item curr">
|
|
|
- 一斗两门
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- 两斗两门
|
|
|
+ <div
|
|
|
+ v-for="({ size }, index) in product.goodsSizes"
|
|
|
+ :key="`goodsSizes${index}`"
|
|
|
+ :class="{ item: true, curr: form.goodsSizes === index }"
|
|
|
+ @click="form.goodsSizes = index"
|
|
|
+ >
|
|
|
+ {{ size }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="tit">颜色 :</div>
|
|
|
<div class="items">
|
|
|
- <div class="item curr">
|
|
|
- 黑色
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- 白色
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- 灰色
|
|
|
+ <div
|
|
|
+ v-for="({ id, color }, index) in product.goodsColors"
|
|
|
+ :key="`goodsColors${index}`"
|
|
|
+ :class="{ item: true, curr: form.goodsColors === index }"
|
|
|
+ @click="form.goodsColors = index"
|
|
|
+ >
|
|
|
+ {{ color }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -88,8 +92,25 @@
|
|
|
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
|
|
|
@Component
|
|
|
export default class extends Vue {
|
|
|
+ private currImgIndex = 0;
|
|
|
+ private form = {
|
|
|
+ goodsSizes: "",
|
|
|
+ goodsColors: ""
|
|
|
+ };
|
|
|
@Prop(String)
|
|
|
private pid!: string;
|
|
|
+ private product: IAny = {};
|
|
|
+ @Watch("pid", { immediate: true })
|
|
|
+ async load(id: number) {
|
|
|
+ const [err, data] = await this.$post("/goods/info/details", { id });
|
|
|
+ if (err) return;
|
|
|
+ this.product = data;
|
|
|
+ }
|
|
|
+ get imgs() {
|
|
|
+ return (this.product.slideshow + "")
|
|
|
+ .split(",")
|
|
|
+ .map(x => this.$basePath + x);
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
@@ -152,6 +173,7 @@ export default class extends Vue {
|
|
|
padding: 5px 15px;
|
|
|
color: rgb(102, 102, 102);
|
|
|
margin: 0 20px 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
&.curr {
|
|
|
border: 1px rgb(253, 85, 34) solid;
|
|
|
color: rgb(253, 85, 34);
|