cart.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <view class="cart-pages">
  3. <view class="cart-bar">
  4. <view>共25件商品</view>
  5. <view @click="editCart">
  6. <text class="blue" v-if="!isEdit">管理</text>
  7. <text class="blue" v-else>完成</text>
  8. </view>
  9. </view>
  10. <view class="goods-list">
  11. <!-- 按分类显示 -->
  12. <view class="goods-class-box" v-for="item in 2">
  13. <view class="goods-class-head">
  14. <view>
  15. <u-checkbox shape="circle" name='goodsClas' @change="goodsClasChange">
  16. 人气零食
  17. </u-checkbox>
  18. </view>
  19. <view class="des">
  20. 满<text>300</text>乐豆才可购买
  21. </view>
  22. </view>
  23. <view class="goods-class-list">
  24. <!-- 商品列表 -->
  25. <view class="goods-item" v-for="(item,index) in 3" :key="index">
  26. <view class="checkbox">
  27. <u-checkbox v-if="index!=1||isEdit" shape="circle" name='goodsItem'></u-checkbox>
  28. </view>
  29. <view class="goods-imgs">
  30. <view v-if="index==1" class="goods-staus">已售罄</view>
  31. <u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
  32. </view>
  33. <view class="goods-info">
  34. <view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
  35. <view class="goods-price">
  36. <view><text>50</text>乐豆</view>
  37. <view v-if="index!=1">
  38. <u-number-box :min="1"></u-number-box>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="cart-submit">
  47. <view>
  48. <u-checkbox shape="circle" name='checkAll' @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
  49. </view>
  50. <view v-if="!isEdit">
  51. <view>总计:<text>450</text>乐豆</view>
  52. <u-button type="warning" @click="toOrder()">立即下单</u-button>
  53. </view>
  54. <view v-else>
  55. <u-button type="error">删除</u-button>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. export default {
  62. data() {
  63. return {
  64. checkAll: false,// 全选
  65. isEdit: false, // 是否编辑模式
  66. };
  67. },
  68. methods: {
  69. // 全选
  70. checkAllChange(e) {
  71. console.log(e);
  72. },
  73. // 每个分类的全选
  74. goodsClasChange(e){
  75. console.log(e);
  76. },
  77. // 编辑购物车
  78. editCart(){
  79. this.isEdit = !this.isEdit
  80. },
  81. //立即下单
  82. toOrder(){
  83. uni.redirectTo({
  84. url:"/pages/toOrder/index"
  85. })
  86. }
  87. },
  88. }
  89. </script>
  90. <style lang="scss">
  91. page{
  92. height: 100%;
  93. }
  94. .cart-pages{
  95. width: 100%;
  96. height: 100%;
  97. display: flex;
  98. flex-direction: column;
  99. .cart-bar{
  100. background: #FFFFFF;
  101. box-shadow: 1px 1px 3px #eee;
  102. border-bottom: 1px solid #eee;
  103. display: flex;
  104. justify-content: space-between;
  105. padding:20upx;
  106. .blue{
  107. color: #007AFF;
  108. }
  109. }
  110. .goods-list{
  111. padding: 20upx 0;
  112. flex-grow: 1;
  113. overflow: auto;
  114. .goods-class-box{
  115. background: #FFFFFF;
  116. box-shadow: 1px 1px 3px #eee;
  117. margin-bottom: 20upx;
  118. .goods-class-head{
  119. display: flex;
  120. align-items: center;
  121. padding: 20upx;
  122. border-bottom: 1px solid #F8F8F8;
  123. justify-content: space-between;
  124. .des{
  125. font-size: 26upx;
  126. text{
  127. color: #FA3534;
  128. }
  129. }
  130. }
  131. }
  132. .goods-item{
  133. padding: 20upx;
  134. display: flex;
  135. align-items: center;
  136. justify-content: space-between;
  137. border-bottom: 1px solid #F8F8F8;
  138. &:last-child{
  139. border: 0;
  140. }
  141. .checkbox{
  142. width: 80rpx;
  143. overflow: hidden;
  144. }
  145. .goods-imgs{
  146. position: relative;
  147. .goods-staus{
  148. width: 100rpx;
  149. height: 100rpx;
  150. position: absolute;
  151. z-index: 10000;
  152. border-radius: 100%;
  153. background: rgba($color: #000000, $alpha: 0.5);
  154. text-align: center;
  155. line-height: 100rpx;
  156. left: 50%;
  157. top: 50%;
  158. margin-top: -50rpx;
  159. margin-left: -50rpx;
  160. color: #eee;
  161. font-size: 24upx;
  162. }
  163. }
  164. .goods-info{
  165. padding-left: 20upx;
  166. }
  167. .goods-price{
  168. display: flex;
  169. align-items: center;
  170. justify-content: space-between;
  171. padding-top: 20upx;
  172. >view{
  173. &:first-child{
  174. font-size: 22upx;
  175. text{
  176. color: red;
  177. font-size: 30upx;
  178. margin-right: 6upx;
  179. }
  180. }
  181. }
  182. }
  183. }
  184. }
  185. .cart-submit{
  186. padding: 20upx;
  187. background: #FFFFFF;
  188. box-shadow: 1px 1px 3px #eee;
  189. border-top: 1px solid #eee;
  190. display: flex;
  191. align-items: center;
  192. justify-content: space-between;
  193. >view{
  194. &:last-child{
  195. display: flex;
  196. align-items: center;
  197. font-size: 26upx;
  198. text{
  199. color: red;
  200. font-size: 40upx;
  201. }
  202. > view{
  203. padding: 0 20upx;
  204. }
  205. }
  206. }
  207. }
  208. }
  209. </style>