detail.wxml 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!-- 骨架屏 -->
  2. <import src="./detail.skeleton.wxml" />
  3. <template is="skeleton" wx:if="{{loading}}" />
  4. <!-- 轮播图 -->
  5. <swiper indicator-dots circular indicator-active-color='#333'>
  6. <swiper-item wx:for="{{files.images}}" wx:key="item.attachmentid" data-index="{{index}}" data-type='image' bindtap="viewMedias">
  7. <van-image width="100vw" height="464rpx" fit="cover" src="{{item.cover}}" use-loading-slot use-error-slot lazy-load>
  8. <van-loading slot="loading" type="spinner" size="20" vertical />
  9. <text slot="error">加载失败</text>
  10. </van-image>
  11. </swiper-item>
  12. </swiper>
  13. <!-- 产品介绍 -->
  14. <view class="intr">
  15. <view class="title">
  16. {{detail.itemname}}
  17. </view>
  18. <view class="tags">
  19. <text>班尼戈</text><text>水务</text>
  20. </view>
  21. <view class="offer">
  22. <view>
  23. <text class="price">¥{{detail.gradeprice}}</text>
  24. <text class="old-price">¥{{detail.oldprice}}</text>
  25. </view>
  26. <text class="unit">单位/{{detail.unitname}}</text>
  27. </view>
  28. <view class="else">
  29. <text>起订量:10</text>
  30. <text>库存:1200 紧缺</text>
  31. </view>
  32. </view>
  33. <!-- 选择型号 -->
  34. <view class="model">
  35. <view class="label">
  36. 选择商品
  37. </view>
  38. <view class="product-box">
  39. <navigator url="#" class="product {{itemno===item.itemno?'active':''}}" wx:for="{{rows}}" wx:key="item.itemno" bindtap="changeItemno" data-item="{{item}}">{{item.spec}}</navigator>
  40. </view>
  41. </view>
  42. <van-tabs custom-class='tabs' title-active-color='var(--assist)' color='var(--assist)'>
  43. <van-tab title="商品简介">
  44. <view class="tab-box">
  45. <view class="row">
  46. 商品编号:{{detail.itemno}}
  47. </view>
  48. <view class="row">
  49. 规格:{{detail.spec}}
  50. </view>
  51. <view class="row">
  52. 型号:{{detail.model}}
  53. </view>
  54. <view class="row">
  55. 材质:—
  56. </view>
  57. </view>
  58. </van-tab>
  59. <van-tab title="产品资料">
  60. <view class="tab-box">
  61. <view class="row">
  62. 产品手册:
  63. </view>
  64. <navigator class="row" url="#">
  65. 紫铜快接产品册-2022
  66. </navigator>
  67. <view class="row">
  68. 安装指南:
  69. </view>
  70. <navigator class="row" url="#">
  71. 紫铜快接产品册-2022
  72. </navigator>
  73. <view class="row">
  74. 安装教程:
  75. </view>
  76. <navigator class="row" url="#">
  77. 紫铜快接产品册-2022
  78. </navigator>
  79. </view>
  80. </van-tab>
  81. </van-tabs>
  82. <!-- 底部 -->
  83. <view style="height: 150rpx;" />
  84. <view class="footer">
  85. <van-button custom-class='but' bindtap="storage">加入购物车</van-button>
  86. </view>
  87. <!-- 购物车按钮 -->
  88. <Float id="Float" />