123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <template>
- <div>
- <a-page-header :ghost="false" :backIcon="false" class="newProductDetail-back">
- <!-- 自定义的二级文字标题 -->
- <template slot="subTitle">
- <a id="newProductDetail-back-btn" href="javascript:;" @click="goBack">
- <a-icon type="left" />
- 返回
- </a>
- </template>
- </a-page-header>
- <div class="newProductDetail-modal">
- <!-- 产品详情 -->
- <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.size) || '--' }}</a-descriptions-item>
- <a-descriptions-item label="重量:">{{ (detailsData && detailsData.weight) || '--' }}</a-descriptions-item>
- <a-descriptions-item label="计量单位:">{{ (detailsData && detailsData.unit) || '--' }}</a-descriptions-item>
- </a-descriptions>
- <div class="productDetail">
- <h4>产品介绍</h4>
- <div class="productDesc">
- <div v-if="detailsData && detailsData.description" v-html="detailsData.description"></div>
- <span v-else>暂无产品介绍</span>
- </div>
- </div>
- </div>
- <div class="productImg" v-if="detailsData && detailsData.productPicList && detailsData.productPicList.length>0">
- <a-carousel arrows dots-class="slick-dots slick-thumb">
- <a slot="customPaging" slot-scope="props">
- <img :src="detailsData.productPicList[props.i].imageUrl" />
- </a>
- <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" style="color: #314659;" /></div>
- <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" style="color: #314659;" /></div>
- <div v-for="(item, index) in detailsData.productPicList" :key="index">
- <img-zoom :src="item.imageUrl" width="100%" height="100%" :bigsrc="item.imageUrl" :configs="configs"></img-zoom>
- </div>
- </a-carousel>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import imgZoom from 'vue2.0-zoom'
- import { productDetail } from '@/api/product.js'
- export default {
- name: 'ProductInfoDetail',
- components: { imgZoom },
- 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 {
- itemId: null,
- detailsData: null, // 详情数据
- prevPageInfo: null,
- configs: {
- width: 600,
- height: 350,
- maskWidth: 80,
- maskHeight: 80,
- maskColor: 'red',
- maskOpacity: 0.2
- }
- }
- },
- methods: {
- // 获取详情
- getDetail () {
- this.detailsData = null
- productDetail({ sn: this.itemId }).then(res => {
- if (res.status == 200) {
- this.detailsData = res.data
- } else {
- this.detailsData = null
- }
- })
- },
- // 返回
- goBack () {
- this.$router.push({ path: this.prevPageInfo && this.prevPageInfo.path })
- }
- },
- mounted () {
- if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
- this.itemId = this.$route.params.sn
- this.getDetail()
- }
- },
- activated () {
- this.itemId = this.$route.params.sn
- this.getDetail()
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- vm.prevPageInfo = from
- })
- }
- }
- </script>
- <style lang="less">
- #_magnifier_layer{
- left: 500px!important;
- }
- /* For demo */
- .ant-carousel .slick-slide {
- text-align: center;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .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%;
- max-height: 100%;
- }
- .ant-carousel{
- border: 1px solid #e8e8e8;
- }
- .ant-carousel .slick-dots {
- height: auto;
- }
- .ant-carousel .slick-slide img {
- border: 5px solid #fff;
- display: block;
- margin: auto;
- max-width: 90%;
- }
- .ant-carousel .slick-thumb {
- bottom: -40px;
- }
- .ant-carousel .slick-thumb li {
- width: 40px;
- height: 35px;
- }
- .ant-carousel .slick-thumb li img {
- width: 100%;
- height: 100%;
- filter: grayscale(100%);
- }
- .ant-carousel .slick-thumb li.slick-active img {
- filter: grayscale(0%);
- }
- .newProductDetail-back {
- margin-bottom: 10px;
- }
- .newProductDetail-modal {
- background-color: #fff;
- padding: 15px 15px 55px;
- h4 {
- font-size: 18px;
- }
- .productHead {
- display: flex;
- .productImg {
- width: 240px;
- }
- .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>
|