You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
44 lines
1.1 KiB
<template> |
|
<div class="detail"> |
|
<nav-bar |
|
:title="product.name" |
|
left-text="返回" |
|
left-arrow |
|
@click-left="onClickLeft" |
|
/> |
|
|
|
<h1>{{ product.name }}</h1> |
|
<div class="content" v-html="product.content"></div> |
|
<action-bar> |
|
<action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" /> |
|
<action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" /> |
|
<action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" /> |
|
<action-bar-button |
|
type="danger" |
|
text="立即购买" |
|
@click="onClickButton" |
|
/> |
|
</action-bar> |
|
</div> |
|
</template> |
|
|
|
<script setup> |
|
import { ref } from "vue"; |
|
import { useRoute, useRouter } from "vue-router"; |
|
import { loadProductByIdAPI } from "../services/products"; |
|
import { ActionBar, ActionBarIcon, ActionBarButton } from "vant"; |
|
import { NavBar } from "vant"; |
|
|
|
const route = useRoute(); |
|
const router = useRouter(); |
|
const product = ref({}); |
|
|
|
loadProductByIdAPI(route.query.id).then((res) => { |
|
product.value = res.data; |
|
}); |
|
const onClickIcon = () => {}; |
|
const onClickButton = () => {}; |
|
const onClickLeft = () => { |
|
router.go(-1); // 返回上一页 |
|
}; |
|
</script>
|
|
|