detail.vue 6.3 KB

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