|
@@ -1,197 +0,0 @@
|
|
|
-<template>
|
|
|
- <a-modal
|
|
|
- centered
|
|
|
- class="newProductDetail-modal"
|
|
|
- :footer="null"
|
|
|
- :maskClosable="false"
|
|
|
- title="产品详情"
|
|
|
- v-model="isShow"
|
|
|
- @cancle="isShow=false"
|
|
|
- width="80%">
|
|
|
- <!-- 产品详情 -->
|
|
|
- <h4>{{ detailsData&&detailsData.name || '--' }}</h4>
|
|
|
- <div class="productHead">
|
|
|
- <div class="productInfo">
|
|
|
- <a-descriptions bordered :column="2" size="small">
|
|
|
- <a-descriptions-item label="产品品牌:">{{ detailsData&&detailsData.productBrandName || '--' }}</a-descriptions-item>
|
|
|
- <a-descriptions-item label="产品编码:">{{ detailsData&&detailsData.code || '--' }}</a-descriptions-item>
|
|
|
- <a-descriptions-item label="原厂编码:">{{ detailsData&&detailsData.origCode || '--' }}</a-descriptions-item>
|
|
|
- <a-descriptions-item label="商品尺寸:">{{ detailsData&&detailsData.name || '--' }}</a-descriptions-item>
|
|
|
- <a-descriptions-item label="重量:">{{ detailsData&&detailsData.unit || '--' }}</a-descriptions-item>
|
|
|
- <a-descriptions-item label="计量单位:">{{ detailsData&&detailsData.unit || '--' }}</a-descriptions-item>
|
|
|
- <a-descriptions-item label="其它编号:">{{ detailsData&&(detailsData.specialPrice || detailsData.specialPrice==0) ? detailsData.specialPrice : '--' }}</a-descriptions-item>
|
|
|
- <a-descriptions-item label=""></a-descriptions-item>
|
|
|
- <a-descriptions-item label="适用车型:">{{ productTypeName || '--' }}</a-descriptions-item>
|
|
|
- </a-descriptions>
|
|
|
- <div class="productDetail">
|
|
|
- <h4>产品介绍</h4>
|
|
|
- <div class="productDesc">
|
|
|
- 阿斯顿发链接撒旦发了就阿斯大幅拉四大佛教萨拉丁撒地方就拉萨撒萨德勒撒旦发了撒打发士大夫了士大夫了撒打发
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="productImg">
|
|
|
- <a-carousel arrows>
|
|
|
- <div
|
|
|
- slot="prevArrow"
|
|
|
- slot-scope="props"
|
|
|
- class="custom-slick-arrow"
|
|
|
- style="left: 10px;zIndex: 1"
|
|
|
- >
|
|
|
- <a-icon type="left-circle" />
|
|
|
- </div>
|
|
|
- <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
|
|
|
- <a-icon type="right-circle" />
|
|
|
- </div>
|
|
|
- <div><img src="../../../assets/avatar2.jpg"></div>
|
|
|
- <div><img src="../../../assets/avatar2.jpg"></div>
|
|
|
- <div><img src="../../../assets/avatar2.jpg"></div>
|
|
|
- </a-carousel>
|
|
|
- <div class="sycxImg">
|
|
|
- <p>适用车型图片</p>
|
|
|
- <div>
|
|
|
- <img src="../../../assets/avatar2.jpg">
|
|
|
- <div>江陵凯瑞200</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
|
|
|
- </a-modal>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { productDetail } from '@/api/product.js'
|
|
|
-export default {
|
|
|
- name: 'ProductInfoDetailModal',
|
|
|
- props: {
|
|
|
- openModal: { // 弹框显示状态
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- itemId: {
|
|
|
- type: [Number, String],
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- productTypeName () {
|
|
|
- const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
|
|
|
- const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
|
|
|
- const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
|
|
|
- return productTypeName1 + productTypeName2 + productTypeName3
|
|
|
- }
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- isShow: this.openModal, // 是否打开弹框
|
|
|
- detailsData: null // 详情数据
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取详情
|
|
|
- getDetail () {
|
|
|
- productDetail({ sn: this.itemId }).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- this.detailsData = res.data
|
|
|
- } else {
|
|
|
- this.detailsData = null
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 父页面传过来的弹框状态
|
|
|
- openModal (newValue, oldValue) {
|
|
|
- this.isShow = newValue
|
|
|
- },
|
|
|
- // 重定义的弹框状态
|
|
|
- isShow (newValue, oldValue) {
|
|
|
- if (!newValue) {
|
|
|
- this.$emit('close')
|
|
|
- }
|
|
|
- },
|
|
|
- itemId (newValue, oldValue) {
|
|
|
- if (this.isShow && newValue) {
|
|
|
- this.getDetail()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
- /* For demo */
|
|
|
- .ant-carousel .slick-slide {
|
|
|
- text-align: center;
|
|
|
- height: 190px;
|
|
|
- line-height: 190px;
|
|
|
- background: #364d79;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .ant-carousel .custom-slick-arrow {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- font-size: 25px;
|
|
|
- color: #fff;
|
|
|
- opacity: 0.3;
|
|
|
- }
|
|
|
- .ant-carousel .custom-slick-arrow:before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .ant-carousel .custom-slick-arrow:hover {
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
- .ant-carousel .slick-slide img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .newProductDetail-modal{
|
|
|
- .ant-modal-body {
|
|
|
- padding: 15px;
|
|
|
- h4{
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .productHead{
|
|
|
- display: flex;
|
|
|
- .productImg{
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- .productInfo{
|
|
|
- flex-grow: 1;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .sycxImg{
|
|
|
- margin-top: 10px;
|
|
|
- p{
|
|
|
- font-size: 14px;
|
|
|
- padding: 5px 10px;
|
|
|
- background-color: #dcf1ff;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 100px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .productDetail{
|
|
|
- border: 1px solid #eee;
|
|
|
- margin-top: 10px;
|
|
|
- h4{
|
|
|
- font-size: 14px;
|
|
|
- padding: 5px 10px;
|
|
|
- background-color: #dcf1ff;
|
|
|
- }
|
|
|
- .productDesc{
|
|
|
- padding: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ant-descriptions-item-label.ant-descriptions-item-colon{
|
|
|
- width: 120px;
|
|
|
- }
|
|
|
- .btn-cont {
|
|
|
- text-align: center;
|
|
|
- margin: 35px 0 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|