cart.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <view>
  3. <view class="goodsList animated fadeInDown">
  4. <view class="item" v-for="(item, index) in list" :key="index">
  5. <view class="title" @click.stop="selected(item)">
  6. <text class="icon" v-if="item.check" style="color: #4581fb">&#xe631;</text>
  7. <text class="icon" v-else>&#xe60c;</text>
  8. <text>{{ item.goodsName }}</text>
  9. </view>
  10. <view class="state" @click.stop="del(item)"><text class="icon del">&#xe852;</text></view>
  11. <view class="con">
  12. <!--<view class="productName omit">{{ item.goodsName }}</view>-->
  13. <view class="desc omit">
  14. <text>{{ item.tradeAreaName }}</text>
  15. </view>
  16. <view class="price">¥ {{ item.resalePrice }}</view>
  17. </view>
  18. <view class="clear"></view>
  19. <view class="op">
  20. <view class="date">{{ item.createTime }}</view>
  21. <view class="an btn" @click.stop="buy(item)">立即购买</view>
  22. </view>
  23. </view>
  24. <u-empty v-if="list.length == 0"></u-empty>
  25. </view>
  26. <view class="mfooter" v-if="selects.length > 0">
  27. <view class="flex">
  28. <view class="f">
  29. <button class="btn" @click="buy({})">立即购买({{ selects.length }})</button>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. export default {
  37. data() {
  38. return {
  39. list: [],
  40. selects: []
  41. };
  42. },
  43. onLoad() {
  44. this.getData();
  45. },
  46. methods: {
  47. getData() {
  48. this.http.request({
  49. url: '/level-two-server/app/TbOrdersCart/getList',
  50. data: this.param,
  51. success: res => {
  52. this.list = res.data.data || [];
  53. }
  54. });
  55. },
  56. selected(item) {
  57. item.check = !item.check;
  58. this.$forceUpdate();
  59. this.selects = this.list.filter(item => item.check);
  60. },
  61. // 立即购买
  62. buy(item) {
  63. if (item.orderId) {
  64. uni.navigateTo({
  65. url: '/pages/market/two/purchaser/buy/buy?orderId=' + item.orderId
  66. });
  67. } else {
  68. uni.navigateTo({
  69. url: '/pages/market/two/purchaser/buy/buy?orderId=' + this.selects.map(item => item.orderId)
  70. });
  71. }
  72. },
  73. del(item) {
  74. let ids = item.id || this.list.map(i => i.id);
  75. uni.showModal({
  76. title: '提示',
  77. content: item.id ? '确定删除该购物车?' : '清空所有购物车',
  78. success: res => {
  79. if (res.confirm) {
  80. this.http.request({
  81. url: '/level-two-server/app/TbOrdersCart/deleteByIds/' + ids,
  82. success: res => {
  83. uni.showToast({ title: '删除成功' });
  84. this.getData();
  85. }
  86. });
  87. }
  88. }
  89. });
  90. }
  91. },
  92. onNavigationBarButtonTap() {
  93. this.del({});
  94. }
  95. };
  96. </script>
  97. <style lang="scss">
  98. page {
  99. background-color: $pg;
  100. }
  101. .title {
  102. .icon {
  103. color: $font-c;
  104. padding-right: 5px;
  105. }
  106. }
  107. .an {
  108. padding: 6px 15px;
  109. font-size: 14px;
  110. margin-top: 0px !important;
  111. font-weight: normal !important;
  112. }
  113. .mfooter {
  114. background-color: #ffffff00;
  115. border: 0px;
  116. }
  117. </style>