detail.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view">
  6. <view class="list-scroll-view">
  7. <view class="one_1">
  8. </view>
  9. </view>
  10. </scroll-view>
  11. </view>
  12. <view class="two">
  13. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft"
  14. @buttonClick="toNavright" />
  15. </view>
  16. </view>
  17. </mobile-frame>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. // 底部菜单
  24. options: [{
  25. icon: 'shop',
  26. text: '店铺',
  27. type: 'shop',
  28. route: 'pagesHome/shop/index',
  29. },
  30. {
  31. icon: 'cart',
  32. text: '购物车',
  33. type: 'market',
  34. route: 'pages/market/index',
  35. },
  36. ],
  37. buttonGroup: [{
  38. text: '加入购物车',
  39. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  40. color: '#fff',
  41. type: '0'
  42. },
  43. {
  44. text: '立即购买',
  45. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  46. color: '#fff',
  47. type: '1'
  48. }
  49. ],
  50. };
  51. },
  52. onLoad: function(e) {
  53. },
  54. onShow: function() {
  55. },
  56. onUnload: function() {
  57. },
  58. methods: {
  59. // 店铺,购物车
  60. toNavleft(e) {
  61. const that = this;
  62. if (e.content.type == 'shop') {
  63. that.toShop();
  64. } else if (e.content.type == 'market') {
  65. let obj = {
  66. route: e.content.route
  67. }
  68. that.toPath(obj)
  69. }
  70. },
  71. // 加入购物车,立即购买
  72. toNavright(e) {
  73. const that = this;
  74. that.$set(that, `popupShow`, '1');
  75. that.$set(that, `btn_type`, e.content.type);
  76. that.$refs.specShow.open();
  77. },
  78. }
  79. }
  80. </script>
  81. <style lang="scss">
  82. .main {
  83. display: flex;
  84. flex-direction: column;
  85. width: 100vw;
  86. height: 100vh;
  87. .one {
  88. position: relative;
  89. flex-grow: 1;
  90. }
  91. .two {
  92. width: 100vw;
  93. height: 8vh;
  94. overflow: hidden;
  95. }
  96. }
  97. .scroll-view {
  98. position: absolute;
  99. top: 0;
  100. left: 0;
  101. right: 0;
  102. bottom: 0;
  103. .list-scroll-view {
  104. display: flex;
  105. flex-direction: column;
  106. }
  107. }
  108. </style>