goodsDetail.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <view class="content">
  3. <homenav :iStatusBarHeight="iStatusBarHeight" :title="'商品详情'"></homenav>
  4. <view class="uni-margin-wrap">
  5. <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
  6. :duration="duration" indicator-active-color="#EAEAEA">
  7. <swiper-item v-for="(item,index) in info.imgList">
  8. <view class="swiper-item">
  9. <image @click="showImgList(item.imgPath)" :src="item.imgPath" mode="aspectFit" class="swiper-itemImg"></image>
  10. </view>
  11. </swiper-item>
  12. </swiper>
  13. </view>
  14. <view class="name" v-if="loading">{{info.name}} | {{info.specificationModel}} | {{info.partsCode}}</view>
  15. <view style="height: 30rpx;background: #F4F5F7;"></view>
  16. <view class="detail">
  17. <view class="datailTitle">商品详情</view>
  18. <!-- <player-component vid="f3310d4pktb"></player-component> -->
  19. <rich-text :nodes="html"></rich-text>
  20. <!-- <u-parse :content="html" ></u-parse> -->
  21. <!-- <view v-html="html"></view> -->
  22. </view>
  23. </view>
  24. </template>
  25. <script>
  26. import homenav from "../../components/homenav/nav.vue"
  27. import uParse from '@/components/u-parse/u-parse.vue'
  28. export default {
  29. components: {
  30. homenav,uParse
  31. },
  32. data() {
  33. return {
  34. id:'',
  35. info:'',
  36. iStatusBarHeight:'',
  37. html:'',
  38. loading:false,
  39. }
  40. },
  41. onLoad(opt) {
  42. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  43. this.id=opt.id;
  44. this.queryPartDetail()
  45. },
  46. methods: {
  47. queryPartDetail(){
  48. uni.showLoading({ title: '加载中'});
  49. this.loading=false;
  50. this.$http('partsByOpen/queryPartDetail', {
  51. id:this.id,
  52. },'POST').then(res => {
  53. this.loading=true;
  54. uni.hideLoading();
  55. this.info=res.data;
  56. this.html = this.info.ozContent
  57. this.html = this.html.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
  58. //this.html = this.html.replace(/\iframe/gi, 'video');
  59. console.log(this.html)
  60. })
  61. },
  62. showImgList(img){
  63. var arr=[]
  64. arr.push(img)
  65. uni.previewImage({
  66. urls: arr,
  67. longPressActions: {
  68. itemList: ['发送给朋友', '保存图片'],
  69. success: function(data) {
  70. console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
  71. },
  72. fail: function(err) {
  73. console.log(err.errMsg);
  74. }
  75. }
  76. });
  77. }
  78. },
  79. }
  80. </script>
  81. <style scoped>
  82. .swiper-itemImg{
  83. width: 750rpx;
  84. height: 750rpx;
  85. }
  86. .uni-margin-wrap{
  87. height: 750rpx;
  88. }
  89. .swiper{
  90. height: 750rpx;
  91. }
  92. .datailTitle{
  93. font-weight: 500;
  94. color: #1A1A1A;
  95. line-height: 40rpx;
  96. padding: 32rpx 24rpx;
  97. font-size: 28rpx;
  98. }
  99. .name{
  100. font-weight: 500;
  101. color: #1A1A1A;
  102. line-height: 40rpx;
  103. font-size: 28rpx;
  104. padding: 30rpx 24rpx;
  105. }
  106. .detail img{
  107. width: 750rpx;
  108. }
  109. .detail image{
  110. width: 750rpx;
  111. }
  112. </style>