130 lines
2.5 KiB
Vue
130 lines
2.5 KiB
Vue
<template>
|
|
<view class="page-detail" v-if="f">
|
|
<CustNavBar></CustNavBar>
|
|
<view class="foods-basic">
|
|
<view class="foods-cover">
|
|
<image class="cover" :src="f.cover" mode=""></image>
|
|
</view>
|
|
<view class="foods-info-wrapper">
|
|
<view class="foods-name">
|
|
<text>{{f.title}}</text>
|
|
</view>
|
|
<view class="sale-control flex-center justify-between">
|
|
<view class="sale-count">
|
|
<text>销量{{f.saleCount}} </text>
|
|
</view>
|
|
<view class="sale-price">
|
|
<text class="unit">￥</text>
|
|
<text
|
|
class="price">{{f.coupon ? (((f.price+f.coupon)/100).toFixed(2)) : (f.price/100).toFixed(2)}}</text>
|
|
<text v-if="f.coupon && f.coupon != 0" class="coupon-price">{{(f.price/100).toFixed(2)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="coupon-info">
|
|
{{f.couponDesc}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="foods-detail-content" v-html="f.content"></view>
|
|
<AddToCart :id="id || 0" />
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { foodsDetail } from '../../service/api';
|
|
import { ref } from "vue";
|
|
import { FoodsModel } from '../../service/models';
|
|
import { AddToCart } from '../../components'
|
|
const props = defineProps<{
|
|
id ?: any
|
|
}>();
|
|
const f = ref<FoodsModel>()
|
|
foodsDetail(Number(props.id || 1)).then((foods) => {
|
|
uni.setNavigationBarTitle({
|
|
title: foods.title
|
|
})
|
|
f.value = foods
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-detail {
|
|
background-color: $uni-color-primary;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
padding-bottom: 10px;
|
|
|
|
img,
|
|
image,
|
|
umi-image {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.foods-basic {
|
|
position: relative;
|
|
}
|
|
|
|
.foods-cover {
|
|
.cover {
|
|
display: block;
|
|
width: 100%;
|
|
height: 340px;
|
|
}
|
|
}
|
|
|
|
.coupon-info {
|
|
color: #999;
|
|
font-size: 13px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.foods-info-wrapper {
|
|
padding: 15px;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
left: 20px;
|
|
right: 20px;
|
|
bottom: -60px;
|
|
}
|
|
|
|
.foods-detail-content {
|
|
background-color: #fff;
|
|
margin: 80px 20px 20px;
|
|
border-radius: 10px;
|
|
padding: 15px 15px 50px;
|
|
}
|
|
|
|
.foods-name {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.sale-count {
|
|
color: #999;
|
|
font-size: 13px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.sale-price {
|
|
.unit {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.price {
|
|
font-size: 18px;
|
|
color: $uni-color-primary;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.coupon-price {
|
|
text-decoration: line-through;
|
|
font-size: 12px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |