cate.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template name="cate">
  2. <view slot="links">
  3. <view class="category">
  4. <view class="category-wrapper" v-if="fetch.cate.length>0">
  5. <!-- 左边导航 -->
  6. <view scroll-y="true" class="left-wrapper" scroll-with-animation="true">
  7. <view class="left-content">
  8. <view class="title-content" :class="fetch.show[v.id] == 1?'onSelected':''" v-for="(v,k) in fetch.cate" :key="v.id" @click="choose(v.id)">{{v.name}}</view>
  9. </view>
  10. </view>
  11. <!-- 右边内容 -->
  12. <view scroll-y="true" class="right-wrapper" scroll-with-animation="true">
  13. <view class="right-content">
  14. <!-- banner区域 -->
  15. <view class="banner-wrapper" v-if="swiperList.length > 0">
  16. <swiper class="swiper-content" :autoplay="true" :interval="3000" :circular="true">
  17. <swiper-item class="swiper-item" v-for="imgs in swiperList" :key="imgs.id">
  18. <image class="swiper-img" :src="imgs.src"></image>
  19. </swiper-item>
  20. </swiper>
  21. </view>
  22. <!-- 产品区 -->
  23. <view class="product-wrapper">
  24. <view class="category-item" :id="'list'+v.id" v-for="(v,k) in fetch.child" :key="k" v-if="fetch.show[v.page_id] == 1">
  25. <view class="category-title">{{v.name}}</view>
  26. <view class="category-content" v-if="v.content">
  27. <view class="product-item" v-for="(v1,k1) in v.content" :key="k1" @click="go(k1,v1.page_id,fetch.num)">
  28. <image class="product-img" :src="v1.pic"></image>
  29. <text class="product-title">{{v1.name}}</text>
  30. </view>
  31. </view>
  32. <view class="category-content" v-if="!v.content">
  33. 敬请期待
  34. </view>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. export default {
  45. name: "cate",
  46. props: {
  47. content_id : {
  48. type : String,
  49. value : null
  50. },
  51. page_id : {
  52. type : String,
  53. value : null
  54. },
  55. width : {
  56. type : String,
  57. default : '100%'
  58. },
  59. param : {},
  60. index : 0
  61. },
  62. data() {
  63. return {
  64. swiperList: [],
  65. fetch : {},
  66. }
  67. },
  68. created() {
  69. this.fetch = this.param;
  70. },
  71. methods:{
  72. getData : function() {
  73. this.$emit('getCate');
  74. },
  75. getInfo : function(t) {
  76. //触底刷新
  77. },
  78. choose : function(id) {
  79. if (this.fetch.show[id] == 1) {
  80. return;
  81. }
  82. for(var i in this.fetch.show) {
  83. if (id == i) {
  84. this.fetch.show[id] = 1;
  85. } else {
  86. this.fetch.show[i] = 2;
  87. }
  88. }
  89. },
  90. go : function(index, page_id, num) {
  91. index = parseInt(index) + parseInt(num);
  92. console.info(index);
  93. if (this.page_id != page_id) {
  94. var self = this;
  95. this.Dever.post('app/collection/?l=api.getCodeByPage', {code:this.Dever.config.code,page_id:page_id,index:index}, function(t) {
  96. self.Dever.location('dream/view?code=' + t.code + '&name=' + self.Dever.config.name);
  97. })
  98. //this.Dever.location('dream/view?id=' + this.info_id + '&page_id='+page_id+'&index=' + index);
  99. } else {
  100. this.$emit('goIndex', index);
  101. }
  102. },
  103. },
  104. }
  105. </script>
  106. <style lang="less">
  107. .category-content {
  108. margin-bottom: 20rpx;
  109. }
  110. .category {
  111. .category-wrapper {
  112. width: 100%;
  113. display: flex;
  114. flex-direction: row;
  115. position: absolute;
  116. top: 0;
  117. bottom: 0;
  118. left: 0;
  119. .left-wrapper {
  120. width: 200rpx;
  121. flex: 0 0 200rpx;
  122. /*background-color: #f6f6f6;*/
  123. .left-content {
  124. .title-content {
  125. width: 100%;
  126. height: 100rpx;
  127. display: flex;
  128. justify-content: center;
  129. align-items: center;
  130. font-size: 25rpx;
  131. border-bottom: 1px solid #dedede;
  132. cursor: pointer;
  133. &:last-child {
  134. border-bottom: 0;
  135. }
  136. &.onSelected {
  137. background-color: #fff;
  138. position: relative;
  139. color: #feb436;
  140. &::before {
  141. content: '';
  142. position: absolute;
  143. left: 0;
  144. top: 0;
  145. width: 10rpx;
  146. height: 100%;
  147. background: linear-gradient(124deg, #feb436 0%, #fb7c22 100%);
  148. }
  149. }
  150. }
  151. }
  152. }
  153. .right-wrapper {
  154. flex: 1;
  155. .right-content {
  156. width: 100%;
  157. padding: 20rpx 0;
  158. border-left: 1rpx solid #efefef;
  159. box-sizing: border-box;
  160. .banner-wrapper {
  161. padding: 0 20rpx;
  162. .swiper-content {
  163. width: 100%;
  164. height: 180rpx;
  165. margin-bottom: 20rpx;
  166. .swiper-item {
  167. .swiper-img {
  168. width: 100%;
  169. height: 180rpx;
  170. }
  171. }
  172. }
  173. }
  174. .product-wrapper {
  175. .category-item {
  176. .category-title {
  177. height: 60rpx;
  178. font-size: 26rpx;
  179. line-height: 60rpx;
  180. font-weight: 500;
  181. background-color: #f6f6f6;
  182. padding-left: 20rpx;
  183. color: #000;
  184. }
  185. .category-content {
  186. display: flex;
  187. flex-direction: row;
  188. flex-flow: wrap;
  189. padding: 20rpx 20rpx 0;
  190. .product-item {
  191. width: 33%;
  192. display: flex;
  193. flex-direction: column;
  194. justify-content: center;
  195. align-items: center;
  196. margin-bottom: 20rpx;
  197. .product-img {
  198. width: 120rpx;
  199. height: 140rpx;
  200. margin-bottom: 10rpx;
  201. }
  202. .product-title {
  203. font-size: 23rpx;
  204. height: 50rpx;
  205. }
  206. }
  207. }
  208. }
  209. }
  210. }
  211. }
  212. }
  213. }
  214. </style>