1/*
2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15<template>
16    <div>
17        <Image :src="goodsModel.cover" style="width:100%;" :preview="true" />
18        <div class="content">
19            <span class="font-18 black">{{ goodsModel.name }}</span>
20            <span class="font-12 gray ">销量{{ goodsModel.salesNumber }}</span>
21            <div class="font-12"><span class="red">￥</span><span class="font-18 red bold" v-if="goodsModel.salePrice">{{
22                goodsModel.salePrice
23            }}</span><span v-if="goodsModel.salePrice" class="light-gray del">￥</span><span
24                    :class="goodsModel.salePrice ? 'light-gray del' : 'font-18 red bold'">{{ goodsModel.price }}</span>
25            </div>
26            <a-divider />
27            <div class="business">
28                <Image :src="businessModel.cover" style="height: 60px;" />
29                <div style="margin-left: 8px;">
30                    <div class="font-16 black">{{ businessModel.name }}</div>
31                    <div style="margin-top: 12px;" class="font-12 black">地址：{{ businessModel.address }}</div>
32                </div>
33            </div>
34            <a-divider />
35            <div>
36                <div class="font-14 black" style="margin-bottom: 6px;">商品详情</div>
37                <div class="font-12"><span class="light-gray " style="margin-right: 12px;">规格</span><span class="black">{{
38                    goodsModel.standards }}</span></div>
39                <div class="font-12"><span class="light-gray " style="margin-right: 12px;">重量</span><span class="black">{{
40                    goodsModel.weight }}</span></div>
41                <div class="font-12"><span class="light-gray " style="margin-right: 12px;">商品类别</span><span class="black">{{
42                    goodsModel.category }}</span></div>
43                <div class="font-12"><span class="light-gray " style="margin-right: 12px;">包装方式</span><span class="black">{{
44                    goodsModel.packing }}</span></div>
45                <div class="font-12"><span class="light-gray " style="margin-right: 12px;">储存方式</span><span class="black">{{
46                    goodsModel.keepType }}</span></div>
47            </div>
48            <a-divider />
49            <div>
50                <div style="margin-bottom: 6px;"><span class="font-12 black">价格说明</span>
51                    <Icon icon="ant-design:question-circle-outlined" :size="14" />
52                </div>
53                <div class="font-12 gray">{{ goodsModel.priceExplain }}</div>
54            </div>
55        </div>
56    </div>
57</template>
58<script lang="ts" name="system-position" setup>
59import { Image } from 'ant-design-vue';
60import Icon from '/@/components/Icon';
61import { useRoute } from 'vue-router';
62import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
63import { detail, detailBusiness } from './goods.api';
64import { ref } from 'vue';
65const route = useRoute();
66const goodsId = ref(route.query?.id);
67const goodsModel = ref({
68  businessId: '',
69  cover: '',
70  name: '',
71  price: '',
72  salePrice: '0',
73  salesNumber: '0',
74  standards: '',
75  weight: '',
76  packing: '',
77  category: '',
78  keepType: '',
79  priceExplain: ''
80});
81
82const businessModel = ref({
83  cover: '',
84  name: '',
85  address: null
86});
87
88function getDetail() {
89  detail({ id: goodsId.value }).then((data) => {
90    data.cover = getFileAccessHttpUrl(data.cover);
91    goodsModel.value = data;
92    getBusinessDetail(goodsModel.value.businessId);
93  });
94}
95
96function getBusinessDetail(id) {
97  detailBusiness({ id: id }).then((data) => {
98    data.cover = getFileAccessHttpUrl(data.cover);
99    businessModel.value = data;
100  });
101}
102
103getDetail();
104</script>
105
106<style scoped lang="less">
107.content {
108    display: flex;
109    flex-direction: column;
110    padding: 12px;
111
112    .business {
113        display: flex;
114        flex-direction: row;
115    }
116
117    .black {
118        color: #333;
119    }
120
121    .gray {
122        color: #666;
123    }
124
125    .light-gray {
126        color: #999;
127    }
128
129    .red {
130        color: red;
131    }
132
133    .font-18 {
134        font-size: 18px;
135    }
136
137    .font-16 {
138        font-size: 16px;
139    }
140
141    .font-14 {
142        font-size: 14px;
143    }
144
145    .font-12 {
146        font-size: 12px;
147    }
148
149    .bold {
150        font-weight: bold;
151    }
152
153    .del {
154        text-decoration-line: line-through;
155    }
156
157}
158</style>