49 lines
2.1 KiB
Vue
49 lines
2.1 KiB
Vue
<template>
|
|
<main class="detail-page">
|
|
<van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
|
|
<van-image class="product-image" :src="product.image" fit="cover" />
|
|
<section class="product-info">
|
|
<h1>{{ product.name }}</h1>
|
|
<p>{{ product.detail }}</p>
|
|
<div><b>¥{{ product.price }}</b><del>¥{{ product.originPrice }}</del><van-tag type="danger" plain>{{ product.tag }}</van-tag></div>
|
|
</section>
|
|
<van-cell-group inset title="商品服务">
|
|
<van-cell title="正品保障" value="极速发货 · 售后无忧" />
|
|
<van-cell title="配送" value="满 99 元免配送费" />
|
|
</van-cell-group>
|
|
<section class="detail-content">
|
|
<h2>商品详情</h2>
|
|
<p>{{ product.desc }}</p>
|
|
</section>
|
|
<van-goods-action>
|
|
<van-goods-action-icon icon="chat-o" text="客服" dot />
|
|
<van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="$router.push('/joyful-selection/cart')" />
|
|
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
|
|
<van-goods-action-button type="warning" text="加入购物车" @click="$toast('已加入购物车')" />
|
|
<van-goods-action-button type="danger" text="立即购买" @click="$router.push('/joyful-selection/checkout')" />
|
|
</van-goods-action>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import { getJoyfulProduct } from '../product-data'
|
|
|
|
export default {
|
|
name: 'JoyfulSelectionProductDetail',
|
|
computed: {
|
|
product() { return getJoyfulProduct(this.$route.query.id) }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.detail-page { min-height: 100vh; padding-bottom: 56px; background: #f7f7f7; }
|
|
.product-image { display: block; width: 100%; height: 310px; background: #fff; }
|
|
.product-info, .detail-content { margin: 10px 12px; padding: 14px; border-radius: 10px; background: #fff; }
|
|
.product-info h1 { margin: 0 0 8px; font-size: 17px; }
|
|
.product-info p, .detail-content p { color: #777; font-size: 12px; line-height: 1.6; }
|
|
.product-info b { margin-right: 8px; color: #ff5b20; font-size: 21px; }
|
|
.product-info del { margin-right: 9px; color: #aaa; font-size: 11px; }
|
|
.detail-content h2 { margin: 0; font-size: 15px; }
|
|
</style>
|