collection.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <template>
  2. <view class="my-product">
  3. <view class="header">
  4. <view class="title">
  5. 收藏的商品
  6. </view>
  7. <view style="position: relative;">
  8. <view class="sub-title">全部宝贝</view>
  9. <view class="release" @tap="edit=!edit">
  10. {{edit?'取消':'管理'}}
  11. </view>
  12. </view>
  13. </view>
  14. <view v-if="collections.length===0"
  15. style="margin: 20upx auto;text-align: center; font-size: 28upx;color: #999999;">
  16. 暂未收藏任何商品
  17. </view>
  18. <view class="product-list">
  19. <view class="product-item" v-for="collection in collections" @tap="openDetails(collection.product.id)">
  20. <view v-if="edit" class="select">
  21. <checkbox class="checkbox" :checked="collection.checked"
  22. @tap="collection.checked=!collection.checked" />
  23. </view>
  24. <view class="product-image">
  25. <image class="image" :src="collection.product.images|imagesFilter" mode="scaleToFill"></image>
  26. </view>
  27. <view>
  28. <view class="row row-1">
  29. <text class="title"><text class="sxzg-icon">省心直供</text>{{collection.product.name}}</text>
  30. </view>
  31. <view class="row row-2">
  32. <text class="org-price">¥{{collection.product.org_price}}</text>
  33. </view>
  34. <view class="row row-3">
  35. <text class="sxj-icon">省心价</text>
  36. <text class="price">¥{{collection.product.price}}</text>
  37. </view>
  38. <view class="row row-4">
  39. <text>日期:</text>
  40. <text class="time">{{collection.createtime|datetimeFilter}}</text>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. <view v-if="edit" class="footer">
  46. <view class="btn-wrapper">
  47. <button class="btn del-btn" type="default" @tap="del">删除已勾选的商品</button>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. export default {
  54. data() {
  55. return {
  56. page: 1,
  57. pageLoading: false,
  58. collections: [],
  59. edit: false
  60. }
  61. },
  62. onLoad() {
  63. // this.getProductData();
  64. },
  65. onPageScroll(e) {
  66. const query = uni.createSelectorQuery();
  67. query.select("#my-product").boundingClientRect(data => {
  68. if (e.scrollTop > data.height - uni.getSystemInfoSync().windowHeight * 2) {
  69. // this.getProductData();
  70. }
  71. }).exec();
  72. },
  73. onPullDownRefresh() {
  74. this.refresh();
  75. },
  76. onShow() {
  77. this.refresh();
  78. },
  79. methods: {
  80. refresh() {
  81. this.page = 1;
  82. this.collections = [];
  83. this.getCollectionsData()
  84. .then(uni.stopPullDownRefresh())
  85. .catch(uni.stopPullDownRefresh());
  86. },
  87. getCollectionsData() {
  88. return new Promise((resolve, reject) => {
  89. this.$http.get({
  90. url: "/collection/lists",
  91. data: {
  92. limit: 10,
  93. page: this.page
  94. },
  95. success: (res) => {
  96. this.collections = [
  97. ...this.collections,
  98. ...res.data.data.rows
  99. ]
  100. }
  101. })
  102. })
  103. },
  104. openDetails(id) {
  105. if (this.edit) {
  106. return;
  107. }
  108. uni.navigateTo({
  109. url: "/pages/product/product-details?id=" + id
  110. })
  111. },
  112. del() {
  113. let checked = this.collections.filter((cur) => {
  114. console.log(cur)
  115. return cur.checked
  116. }).map((cur) => {
  117. return cur.product_id
  118. })
  119. this.$http.post({
  120. url: "/collection/del",
  121. data: {
  122. product_id: checked.join(",")
  123. },
  124. success: (res) => {
  125. uni.showToast({
  126. icon: "none",
  127. title: "删除成功",
  128. success: () => {
  129. this.collections = this.collections.filter((cur) => {
  130. return !checked.includes(cur.product_id)
  131. })
  132. this.edit = false;
  133. }
  134. })
  135. }
  136. })
  137. }
  138. }
  139. }
  140. </script>
  141. <style lang="scss" scoped>
  142. .my-product {
  143. overflow: hidden;
  144. }
  145. .header {
  146. margin: 20upx;
  147. background: white;
  148. text-align: center;
  149. border-radius: 20upx;
  150. padding-bottom: 10upx;
  151. .title {
  152. height: 100upx;
  153. font-size: 32upx;
  154. line-height: 100upx;
  155. // font-weight: bold;
  156. }
  157. .sub-title {
  158. font-size: 28upx;
  159. color: #999999;
  160. }
  161. .release {
  162. position: absolute;
  163. right: 20upx;
  164. font-size: 24upx;
  165. bottom: 4upx;
  166. }
  167. }
  168. .product-list {
  169. .product-item {
  170. display: flex;
  171. background: white;
  172. margin: 20upx;
  173. padding: 20upx;
  174. .select {
  175. align-self: center;
  176. position: relative;
  177. margin-top: -4upx;
  178. margin-right: 14upx;
  179. .checkbox {
  180. transform: scale(0.7);
  181. /deep/ .uni-checkbox-input {
  182. border: 2upx solid #CCCCCC;
  183. &.uni-checkbox-input-checked {
  184. color: $primary-color !important;
  185. }
  186. }
  187. /deep/ .uni-checkbox-input:hover {
  188. border: 2upx solid #CCCCCC;
  189. }
  190. }
  191. }
  192. .product-image {
  193. width: 180upx;
  194. height: 180upx;
  195. margin-right: 20upx;
  196. }
  197. .image {
  198. width: 180upx;
  199. height: 180upx;
  200. background: #EEEEEE;
  201. }
  202. }
  203. .sxzg-icon {
  204. color: $primary-color;
  205. font-size: 16rpx;
  206. width: 80rpx;
  207. text-align: center;
  208. line-height: normal;
  209. border: 2rpx solid $primary-color;
  210. border-radius: 20rpx;
  211. display: inline-block;
  212. position: relative;
  213. top: -4rpx;
  214. margin-right: 10upx;
  215. // transform: scale(0.9);
  216. }
  217. .title {
  218. font-size: 24rpx;
  219. display: inline-block;
  220. white-space: normal;
  221. display: -webkit-box;
  222. -webkit-box-orient: vertical;
  223. -webkit-line-clamp: 2;
  224. overflow: hidden;
  225. height: 68upx;
  226. }
  227. .row {
  228. // padding: 0 10upx;
  229. }
  230. .row-2 {
  231. display: flex;
  232. justify-content: space-between;
  233. margin-top: 4upx;
  234. }
  235. .org-price {
  236. font-size: 26rpx;
  237. color: #cccccc;
  238. }
  239. .org-price {
  240. text-decoration: line-through;
  241. }
  242. .sxj-icon {
  243. background: $primary-color;
  244. color: white;
  245. font-size: 20upx;
  246. padding: 0 5upx;
  247. border-radius: 5upx;
  248. vertical-align: middle;
  249. }
  250. .price {
  251. font-size: 26rpx;
  252. color: $primary-color;
  253. font-weight: bold;
  254. }
  255. .row-3 {
  256. display: flex;
  257. align-items: center;
  258. margin-top: 4upx;
  259. }
  260. .row-4 {
  261. font-size: 24upx;
  262. color: #999999;
  263. margin-top: 4upx;
  264. }
  265. }
  266. .footer {
  267. display: flex;
  268. position: fixed;
  269. height: 100upx;
  270. background: $primary-color;
  271. bottom: 0;
  272. width: 100%;
  273. box-shadow: 0 0 10upx #999999;
  274. align-items: center;
  275. .btn-wrapper {
  276. flex: 1;
  277. margin: 0 20upx;
  278. }
  279. .del-btn {
  280. background: $primary-color;
  281. padding: 15upx 60upx;
  282. color: white;
  283. line-height: normal;
  284. font-size: 32upx;
  285. border-radius: 50upx;
  286. }
  287. }
  288. </style>