景徳镇旅游微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

141 lines
2.4 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <view class="action">
  3. <view class="icon">
  4. <image src="/static/image/cart/1.png" mode=""></image>
  5. <view class="num">
  6. {{ num || cartCheckboxValue.length }}
  7. </view>
  8. </view>
  9. <view class="price">
  10. <view class="count">
  11. 合计
  12. <view class="">
  13. <text>{{ price || totalPrice }}</text>
  14. </view>
  15. </view>
  16. <view class="text">
  17. {{ num || cartCheckboxValue.length }}已享受更低优惠
  18. </view>
  19. </view>
  20. <view class="btn"
  21. @click="$emit('submit')">
  22. {{ submitTitle }}
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import { mapState } from 'vuex'
  28. export default {
  29. props : {
  30. submitTitle : {
  31. default : '结算'
  32. },
  33. price : {
  34. default : 0
  35. },
  36. num : {
  37. default : 0
  38. }
  39. },
  40. data() {
  41. return {
  42. }
  43. },
  44. computed: {
  45. totalPrice() {
  46. if (!this.cartCheckboxValue.length) {
  47. return 0
  48. }
  49. let price = 0
  50. this.cartList.forEach(n => {
  51. // if (this.cartCheckboxValue.includes(n.shopcar.id)) {
  52. price += n.wares.waresPrice * (n.shopcar.shopcarNumber || 1)
  53. // }
  54. })
  55. return price
  56. },
  57. ...mapState(['cartList', 'cartCheckboxValue']),
  58. },
  59. methods: {
  60. }
  61. }
  62. </script>
  63. <style scoped lang="scss">
  64. .action {
  65. width: 700rpx;
  66. position: fixed;
  67. bottom: 220rpx;
  68. left: 25rpx;
  69. background-color: #fff;
  70. height: 100rpx;
  71. border-radius: 50rpx;
  72. box-shadow: 0 0 6rpx 6rpx #00000010;
  73. display: flex;
  74. justify-content: center;
  75. align-items: center;
  76. overflow: hidden;
  77. z-index: 99;
  78. .icon {
  79. position: relative;
  80. width: 80rpx;
  81. height: 80rpx;
  82. margin: 0 20rpx;
  83. image {
  84. width: 80rpx;
  85. height: 80rpx;
  86. }
  87. .num {
  88. position: absolute;
  89. right: 10rpx;
  90. top: 0rpx;
  91. background-color: $uni-color;
  92. color: #fff;
  93. font-size: 18rpx;
  94. border-radius: 50%;
  95. height: 30rpx;
  96. width: 30rpx;
  97. display: flex;
  98. justify-content: center;
  99. align-items: center;
  100. }
  101. }
  102. .price {
  103. .count {
  104. display: flex;
  105. font-size: 26rpx;
  106. align-items: center;
  107. view {
  108. color: $uni-color;
  109. margin-left: 10rpx;
  110. text {
  111. font-size: 32rpx;
  112. font-weight: 900;
  113. }
  114. }
  115. }
  116. .text {
  117. font-size: 20rpx;
  118. color: #717171;
  119. }
  120. }
  121. .btn {
  122. margin-left: auto;
  123. background-color: $uni-color;
  124. height: 100%;
  125. padding: 0 50rpx;
  126. color: #fff;
  127. display: flex;
  128. justify-content: center;
  129. align-items: center;
  130. }
  131. }
  132. </style>