index.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <view>
  3. <view class="flex-row justify-between" :style="{'height':height}">
  4. <view class="left-box flex-col">
  5. <scroll-view scroll-y :style="{'height':height}">
  6. <view class="flex-col">
  7. <view class="tab" :class="{'checked-tab':current===index}" v-for="(item,index) in productList" :key="index" @click="clickTab(index)">
  8. <text :class="{'unselected-text': current !== index,'checked-text': current !== index}">{{item.title}}</text>
  9. </view>
  10. </view>
  11. </scroll-view>
  12. </view>
  13. <view class="right-box flex-col">
  14. <swiper :style="{'height':height}" :current="current" duration="0">
  15. <swiper-item v-for="(tab,index) in productList" :key="index" :catchtouchmove="false">
  16. <view>
  17. <mescroll-item ref="MescrollItem" :i="index" :index="current" :productId="tab.id" :height="height">
  18. </mescroll-item>
  19. </view>
  20. </swiper-item>
  21. </swiper>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import MescrollItem from "./module/mescrollUni-item.vue";
  28. import { getCategoryOne, getCategoryTwo, getGoodsList } from '@/api/home.js'
  29. export default {
  30. components: {
  31. MescrollItem,
  32. },
  33. data () {
  34. return {
  35. vGoodsList:[],
  36. productList:[],
  37. current:0,
  38. height:'',
  39. }
  40. },
  41. created () {
  42. let sysInfo = uni.getSystemInfoSync();
  43. this.height = sysInfo.windowHeight*0.8+'px'
  44. console.log(this.height)
  45. this.getCategoryOne();
  46. },
  47. onShow(){
  48. },
  49. methods: {
  50. delVGood(item){
  51. for (let i =0;i<this.productList.length;i++){
  52. this.$refs.MescrollItem[i].delVGood(item);
  53. }
  54. },
  55. returnVGoods(){
  56. let arr=[];
  57. this.vGoodsList=[];
  58. for (let i =0;i<this.productList.length;i++){
  59. arr = this.$refs.MescrollItem[i].getvGoodsList();
  60. this.vGoodsList = this.vGoodsList.concat(arr)
  61. }
  62. return this.vGoodsList
  63. },
  64. clickTab(index){
  65. this.current =index
  66. },
  67. getCategoryOne () {
  68. getCategoryOne({
  69. parentId: 0
  70. }).then(res => {
  71. if (res.data.length > 0) {
  72. this.productList = res.data
  73. }
  74. })
  75. },
  76. }
  77. }
  78. </script>
  79. <style scoped lang="scss">
  80. @import '/static/css/common.css';
  81. @import './index.rpx.css';
  82. </style>