detail.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <div>
  3. <a-page-header :ghost="false" :backIcon="false" class="newProductDetail-back">
  4. <!-- 自定义的二级文字标题 -->
  5. <template slot="subTitle">
  6. <a id="newProductDetail-back-btn" href="javascript:;" @click="goBack">
  7. <a-icon type="left" />
  8. 返回
  9. </a>
  10. </template>
  11. </a-page-header>
  12. <div class="newProductDetail-modal">
  13. <!-- 产品详情 -->
  14. <h4>{{ (detailsData && detailsData.name) || '--' }}</h4>
  15. <div class="productHead">
  16. <div class="productInfo">
  17. <!--
  18. ***省级经销商:市场价、特约价1显示 0不显示
  19. ***市级经销商:特约价1显示 0不显示
  20. -->
  21. <a-descriptions bordered :column="2" size="small">
  22. <a-descriptions-item label="产品品牌:">{{ (detailsData && detailsData.productBrandName) || '--' }}</a-descriptions-item>
  23. <a-descriptions-item label="产品编码:">{{ (detailsData && detailsData.code) || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="原厂编码:">{{ (detailsData && detailsData.origCode) || '--' }}</a-descriptions-item>
  25. <a-descriptions-item label="条形码:">{{ detailsData&&detailsData.qrCode || '--' }}</a-descriptions-item>
  26. <a-descriptions-item label="商品尺寸:">{{ (detailsData && detailsData.size) || '--' }}</a-descriptions-item>
  27. <a-descriptions-item label="重量:">{{ (detailsData && detailsData.weight) || '--' }}</a-descriptions-item>
  28. <a-descriptions-item label="计量单位:">{{ (detailsData && detailsData.unit) || '--' }}</a-descriptions-item>
  29. <a-descriptions-item label="包装数:">{{ (detailsData && detailsData.packQty) || '--' }}{{ (detailsData && detailsData.packQty) ? detailsData.unit : '' }}/{{ detailsData.packQtyUnit||'--' }}</a-descriptions-item>
  30. <!-- <a-descriptions-item label="市级价:" v-if="this.specialPriceObj.dealerLevel&&this.specialPriceObj.dealerLevel == 'PROVINCE'">{{ detailsData&&(detailsData.cityPrice||detailsData.cityPrice==0) ? toThousands(detailsData.cityPrice):'--' }}</a-descriptions-item>
  31. <a-descriptions-item label="特约价:" v-if="(this.specialPriceObj.isShowSpecialPrice&&this.specialPriceObj.isShowSpecialPrice != 0)">{{ detailsData && (detailsData.specialPrice||detailsData.specialPrice==0)?toThousands(detailsData.specialPrice) : '--' }}</a-descriptions-item>
  32. <a-descriptions-item label="终端价:">{{ detailsData && (detailsData.terminalPrice || detailsData.terminalPrice==0)?toThousands(detailsData.terminalPrice):'--' }}</a-descriptions-item>
  33. <a-descriptions-item label="车主价:">{{ detailsData && (detailsData.carOwnersPrice || detailsData.carOwnersPrice==0)?toThousands(detailsData.carOwnersPrice):'--' }}</a-descriptions-item> -->
  34. </a-descriptions>
  35. <div class="productDetail">
  36. <h4>产品介绍</h4>
  37. <div class="productDesc">
  38. <div v-if="detailsData && detailsData.description" v-html="detailsData.description"></div>
  39. <span v-else>暂无产品介绍</span>
  40. </div>
  41. </div>
  42. </a-descriptions></div>
  43. <div class="productImg" v-if="detailsData && detailsData.productPicList && detailsData.productPicList.length>0">
  44. <a-carousel arrows dots-class="slick-dots slick-thumb">
  45. <a slot="customPaging" slot-scope="props">
  46. <img :src="detailsData.productPicList[props.i].imageUrl" />
  47. </a>
  48. <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" style="color: #314659;" /></div>
  49. <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" style="color: #314659;" /></div>
  50. <div v-for="(item, index) in detailsData.productPicList" :key="index">
  51. <img-zoom :src="item.imageUrl" width="100%" height="100%" :bigsrc="item.imageUrl" :configs="configs"></img-zoom>
  52. </div>
  53. </a-carousel>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. import { commonMixin } from '@/utils/mixin'
  61. import imgZoom from 'vue2.0-zoom'
  62. import { productDetail, getCurrentDealer } from '@/api/product.js'
  63. export default {
  64. name: 'ProductInfoDetail',
  65. components: { imgZoom },
  66. mixins: [commonMixin],
  67. computed: {
  68. productTypeName () {
  69. const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
  70. const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
  71. const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
  72. return productTypeName1 + productTypeName2 + productTypeName3
  73. }
  74. },
  75. data () {
  76. return {
  77. itemId: null,
  78. detailsData: null, // 详情数据
  79. prevPageInfo: null,
  80. configs: {
  81. width: 600,
  82. height: 350,
  83. maskWidth: 80,
  84. maskHeight: 80,
  85. maskColor: 'red',
  86. maskOpacity: 0.2
  87. },
  88. specialPriceObj: {}
  89. }
  90. },
  91. methods: {
  92. // 获取详情
  93. getDetail () {
  94. this.detailsData = null
  95. productDetail({ sn: this.itemId }).then(res => {
  96. if (res.status == 200) {
  97. this.detailsData = res.data
  98. } else {
  99. this.detailsData = null
  100. }
  101. })
  102. },
  103. // 获取特约价
  104. getSpecialPriceInfo () {
  105. getCurrentDealer().then(res => {
  106. if (res.status == 200) {
  107. this.specialPriceObj = res.data
  108. }
  109. })
  110. },
  111. // 返回
  112. goBack () {
  113. this.$router.push({ path: this.prevPageInfo && this.prevPageInfo.path })
  114. }
  115. },
  116. mounted () {
  117. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  118. this.itemId = this.$route.params.sn
  119. this.getDetail()
  120. this.getSpecialPriceInfo()
  121. }
  122. },
  123. activated () {
  124. this.itemId = this.$route.params.sn
  125. this.getDetail()
  126. this.getSpecialPriceInfo()
  127. },
  128. beforeRouteEnter (to, from, next) {
  129. next(vm => {
  130. vm.prevPageInfo = from
  131. })
  132. }
  133. }
  134. </script>
  135. <style lang="less">
  136. #_magnifier_layer{
  137. left: 500px!important;
  138. }
  139. /* For demo */
  140. .ant-carousel .slick-slide {
  141. text-align: center;
  142. overflow: hidden;
  143. display: flex;
  144. justify-content: center;
  145. align-items: center;
  146. }
  147. .ant-carousel .custom-slick-arrow {
  148. width: 25px;
  149. height: 25px;
  150. font-size: 25px;
  151. color: #fff;
  152. opacity: 0.3;
  153. }
  154. .ant-carousel .custom-slick-arrow:before {
  155. display: none;
  156. }
  157. .ant-carousel .custom-slick-arrow:hover {
  158. opacity: 0.5;
  159. }
  160. .ant-carousel .slick-slide img {
  161. width: 100%;
  162. max-height: 100%;
  163. }
  164. .ant-carousel{
  165. border: 1px solid #e8e8e8;
  166. }
  167. .ant-carousel .slick-dots {
  168. height: auto;
  169. }
  170. .ant-carousel .slick-slide img {
  171. border: 5px solid #fff;
  172. display: block;
  173. margin: auto;
  174. max-width: 90%;
  175. }
  176. .ant-carousel .slick-thumb {
  177. bottom: -40px;
  178. }
  179. .ant-carousel .slick-thumb li {
  180. width: 40px;
  181. height: 35px;
  182. }
  183. .ant-carousel .slick-thumb li img {
  184. width: 100%;
  185. height: 100%;
  186. filter: grayscale(100%);
  187. }
  188. .ant-carousel .slick-thumb li.slick-active img {
  189. filter: grayscale(0%);
  190. }
  191. .newProductDetail-back {
  192. margin-bottom: 10px;
  193. }
  194. .newProductDetail-modal {
  195. background-color: #fff;
  196. padding: 15px 15px 55px;
  197. h4 {
  198. font-size: 18px;
  199. }
  200. .productHead {
  201. display: flex;
  202. .productImg {
  203. width: 240px;
  204. }
  205. .productInfo {
  206. flex-grow: 1;
  207. margin-right: 10px;
  208. }
  209. .sycxImg {
  210. margin-top: 10px;
  211. p {
  212. font-size: 14px;
  213. padding: 5px 10px;
  214. background-color: #dcf1ff;
  215. }
  216. img {
  217. width: 100px;
  218. }
  219. }
  220. }
  221. .productDetail {
  222. border: 1px solid #eee;
  223. margin-top: 10px;
  224. h4 {
  225. font-size: 14px;
  226. padding: 5px 10px;
  227. background-color: #dcf1ff;
  228. }
  229. .productDesc {
  230. padding: 15px;
  231. }
  232. }
  233. .ant-descriptions-item-label.ant-descriptions-item-colon {
  234. width: 120px;
  235. }
  236. .btn-cont {
  237. text-align: center;
  238. margin: 35px 0 10px;
  239. }
  240. }
  241. </style>