index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <view class="container">
  3. <view class="header">
  4. <text class="title">购物车</text>
  5. </view>
  6. <view class="content">
  7. <view class="placeholder">
  8. <text class="placeholder-text">🛒</text>
  9. <text class="placeholder-title">购物车空空如也</text>
  10. <text class="placeholder-desc">去逛逛,发现更多好酒</text>
  11. <button class="go-shopping-btn" @click="goShopping">
  12. 去购物
  13. </button>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. // 移除权限检查,游客可正常访问购物车页面
  20. export default {
  21. name: 'Cart',
  22. onLoad() {
  23. console.log('购物车页面加载')
  24. },
  25. onShow() {
  26. // 更新自定义tabBar选中状态
  27. this.updateTabBar()
  28. },
  29. methods: {
  30. // 更新tabBar选中状态
  31. updateTabBar() {
  32. try {
  33. if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  34. this.getTabBar().updateSelected(3) // 购物车索引为3
  35. }
  36. } catch (error) {
  37. console.log('更新tabBar状态失败:', error)
  38. }
  39. },
  40. // 移除权限检查方法,游客可正常访问购物车页面
  41. goShopping() {
  42. uni.switchTab({
  43. url: '/pages/index/index'
  44. })
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. .container {
  51. min-height: 100vh;
  52. background: #f5f5f5;
  53. padding: 20rpx;
  54. }
  55. .header {
  56. padding: 30rpx 0;
  57. text-align: center;
  58. .title {
  59. font-size: 36rpx;
  60. font-weight: bold;
  61. color: #333;
  62. }
  63. }
  64. .content {
  65. flex: 1;
  66. display: flex;
  67. align-items: center;
  68. justify-content: center;
  69. min-height: 60vh;
  70. }
  71. .placeholder {
  72. text-align: center;
  73. padding: 60rpx;
  74. .placeholder-text {
  75. font-size: 120rpx;
  76. display: block;
  77. margin-bottom: 30rpx;
  78. }
  79. .placeholder-title {
  80. font-size: 32rpx;
  81. color: #333;
  82. font-weight: bold;
  83. display: block;
  84. margin-bottom: 20rpx;
  85. }
  86. .placeholder-desc {
  87. font-size: 28rpx;
  88. color: #666;
  89. display: block;
  90. margin-bottom: 40rpx;
  91. }
  92. .go-shopping-btn {
  93. background: #FF6600;
  94. color: white;
  95. border: none;
  96. border-radius: 40rpx;
  97. padding: 20rpx 40rpx;
  98. font-size: 28rpx;
  99. &:active {
  100. background: #E55A00;
  101. transform: scale(0.98);
  102. }
  103. }
  104. }
  105. </style>