54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<view class="page-detail" v-if="f">
|
|
<view class="foods-cover">
|
|
<image class="cover" :src="f.cover" mode=""></image>
|
|
</view>
|
|
<view class="foods-name">
|
|
<text>{{f.title}}</text>
|
|
</view>
|
|
<view class="sale-count">
|
|
<text>{{f.saleCount}}</text>
|
|
</view>
|
|
<view class="sale-control">
|
|
<view class="sale-price">
|
|
<text class="price">{{f.price}}</text>
|
|
<text class="coupon">{{f.coupon}}</text>
|
|
</view>
|
|
<view class="add-to-cart">
|
|
<text class="iconfont icon-add"></text>
|
|
<text>加入购物车</text>
|
|
</view>
|
|
</view>
|
|
<view class="foods-detail-content" v-html="f.content">
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { foodsDetail } from '../../service/api';
|
|
import { ref } from "vue";
|
|
import { FoodsModel } from '../../service/models';
|
|
const props = defineProps<{
|
|
id : any
|
|
}>();
|
|
const f = ref<FoodsModel>()
|
|
foodsDetail(props.id).then((foods) => {
|
|
f.value = foods
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-detail{
|
|
img,image,umi-image{
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.foods-cover{
|
|
.cover{
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |