goodsDetail.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <view class="content">
  3. <view class="uni-margin-wrap">
  4. <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
  5. :duration="duration">
  6. <swiper-item v-for="(item,index) in info.imgList">
  7. <view class="swiper-item">
  8. <image :src="item.imgPath" mode="aspectFit" class="swiper-itemImg"></image>
  9. </view>
  10. </swiper-item>
  11. </swiper>
  12. </view>
  13. <view style="height: 30rpx;background: #F4F5F7;"></view>
  14. <view class="detail">
  15. <view class="datailTitle">商品详情</view>
  16. <view v-html="info.ozContent"></view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. components: {
  23. },
  24. data() {
  25. return {
  26. id:'',
  27. info:'',
  28. }
  29. },
  30. onLoad(opt) {
  31. this.id=opt.id;
  32. this.queryPartDetail()
  33. },
  34. methods: {
  35. queryPartDetail(){
  36. uni.showLoading({ title: '加载中'});
  37. this.$http('partsByOpen/queryPartDetail', {
  38. id:this.id,
  39. },'POST').then(res => {
  40. uni.hideLoading();
  41. this.info=res.data
  42. })
  43. }
  44. }
  45. }
  46. </script>
  47. <style scoped>
  48. .swiper-itemImg{
  49. width: 750rpx;
  50. height: 750rpx;
  51. }
  52. .uni-margin-wrap{
  53. height: 750rpx;
  54. }
  55. .swiper{
  56. height: 750rpx;
  57. }
  58. .datailTitle{
  59. font-weight: 500;
  60. color: #1A1A1A;
  61. line-height: 40rpx;
  62. padding: 32rpx 24rpx;
  63. font-size: 28rpx;
  64. }
  65. </style>