cart.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <template>
  2. <view style="height: 100vh;background-color: #F5F5F5;">
  3. <view class="titleright" @click="changeShop" v-if="isdelete">编辑</view>
  4. <view class="titleright" @click="changeShop" v-else>取消</view>
  5. <view v-if="list.length>0" style="margin-bottom: 150upx;">
  6. <scroll-view style="height: 88vh;" class="floor-list"
  7. :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
  8. refresher-enabled="true">
  9. <view class="cart-list">
  10. <view style="display: flex;align-items: center;padding: 20upx 36upx;
  11. border-bottom: 1px solid #F5F5F5;">
  12. <image :src="pictureUrl+'/uploads/home/store/'+store.store_id+'/'+store.store_logo" style="border-radius: 50%;
  13. width: 50upx;height: 50upx;"></image>
  14. <span style="padding-left: 8upx;">{{store.store_name}}</span>
  15. </view>
  16. <view v-for="(item,index) in list" :key="index" class="shoplist" style="background-color: #fff;">
  17. <view style="flex: 1;border-radius: 100%;">
  18. <van-checkbox-group :value="checkboxList" @change="checkboxChange()">
  19. <van-checkbox checked-color="#D9332E" :name="index"></van-checkbox>
  20. </van-checkbox-group>
  21. </view>
  22. <view style="flex: 15;">
  23. <van-card
  24. title-class="changewidth"
  25. price-class ="priceClass"
  26. :price="item.goods_price"
  27. :desc="item.desarray[1]+'X'+item.goods_num"
  28. :title="item.desarray[0]"
  29. :thumb="pictureUrl + '/uploads/home/store/goods/' + item.goods_image.substr(0, item.goods_image.indexOf('\_')) + '/' + item.goods_image"
  30. >
  31. <view slot="footer">
  32. <!-- <uninumberbox :min="1":isMax="item.number>=item.stock?true:false"
  33. :isMin="item.number===1":max="item.stock" :value="item.goods_num" @change="bindChange(item)"/> -->
  34. <uninumberbox
  35. class="step"
  36. :min="1"
  37. :value="item.goods_num"
  38. :index="index"
  39. @eventChange="bindChange"
  40. ></uninumberbox>
  41. </view>
  42. </van-card>
  43. </view>
  44. </view>
  45. </view>
  46. </scroll-view>
  47. </view>
  48. <view v-else>
  49. <view style="margin: 120upx auto;text-align: center;">
  50. <van-icon size="160rpx" color="#909399" name="cart-o" />
  51. <view style="text-align: center;color: #909399;"> 去买点什么</view>
  52. </view>
  53. </view>
  54. <view style="position: fixed;bottom: 0;border-top:1px solid #eee;height: 8vh;">
  55. <van-submit-bar
  56. :price="prices"
  57. :button-text="listip"
  58. @submit="onClickButton"
  59. :tip="true"
  60. >
  61. <van-checkbox checked-color="#D9332E" :value="isAll" shape="round" @change="onChange">
  62. 全选
  63. </van-checkbox>
  64. </van-submit-bar>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. import uniNavBar from '@/component/uni-nav-bar/uni-nav-bar.vue'
  70. import uninumberbox from '@/component/uinNumberCart.vue'
  71. export default {
  72. components: {
  73. uniNavBar,
  74. uninumberbox
  75. },
  76. data() {
  77. return {
  78. ismax: 0,
  79. lengthnumber: 0,
  80. pricelist:[],
  81. pictureUrl: this.pictureUrl,
  82. scrollTop: 0,
  83. old: {
  84. scrollTop: 0
  85. },
  86. store: {},
  87. ispull: true,
  88. page: 1,
  89. store_id: 0,
  90. prices: 0,
  91. listip: '',
  92. isdelete: true,
  93. isAll: false,
  94. checkboxList:[],
  95. list:[]
  96. }
  97. },
  98. // 隐藏分享菜单
  99. onLoad: function (options) {
  100. console.log(options)
  101. this.store_id = options.store_id;
  102. this.listip = '结算'+ (this.lengthnumber);
  103. this.getshoplist();
  104. },
  105. methods: {
  106. onClickButton(e) {
  107. let array = [];
  108. if(this.pricelist.length == 0) {
  109. this.$msg('请选择商品');
  110. return;
  111. }
  112. this.pricelist.forEach(item => {
  113. array.push(item.goods_id)
  114. })
  115. let ids = array.toString();
  116. if(this.isdelete) {
  117. // 结算
  118. this.getorderId(); // 保存订单生成订单id
  119. uni.navigateTo({
  120. // url: `/pages/index/sureBuy?store=${store}&pricelist=${pricelist}&prices=${prices}`
  121. });
  122. }else {
  123. if(ids == '') {
  124. this.$msg('请选择删除商品');
  125. return;
  126. }
  127. // 删除
  128. this.deleteshop(ids);
  129. }
  130. },
  131. getorderId() {
  132. let goods = [];
  133. let store = JSON.stringify(this.store);
  134. let pricelist = JSON.stringify(this.pricelist);
  135. let prices = this.prices;
  136. this.pricelist.forEach((item,index) => {
  137. goods.push({});
  138. goods[index].goods_id = item.goods_id;
  139. goods[index].buy_num = item.goods_num;
  140. })
  141. this.request({
  142. url:'/v1/order/save_og',
  143. method: 'post',
  144. data: {
  145. store_id: this.store.store_id,
  146. goods: JSON.stringify(goods)
  147. },
  148. success:(res) => {
  149. console.log(res);
  150. let order_id = res.data.data.order_id;
  151. uni.navigateTo({
  152. url: `/pages/index/sureBuy?store=${store}&pricelist=${pricelist}&prices=${prices}&order_id=${order_id}`
  153. });
  154. }
  155. })
  156. },
  157. deleteshop(ids) {
  158. this.request({
  159. url: '/v2/order/cart_drop',
  160. method: 'post',
  161. data: {
  162. ids: ids,
  163. store_id: this.store_id
  164. },
  165. success: () => {
  166. this.getshoplist();
  167. }
  168. })
  169. },
  170. // 滚动到顶部
  171. upper(e) {
  172. console.log("顶部")
  173. },
  174. // 滚到底部
  175. lower(e) {
  176. this.page = this.page + 1;
  177. if(this.ispull) {
  178. this.getshoplist();
  179. }
  180. },
  181. // 滚动时触发
  182. scroll(e) {
  183. this.old.scrollTop = e.detail.scrollTop
  184. },
  185. changeShop() {
  186. this.isdelete = !this.isdelete;
  187. console.log(this.lengthnumber)
  188. this.listip = this.isdelete ? "结算" + (this.lengthnumber) :'删除'+ (this.lengthnumber);
  189. },
  190. getshoplist() {
  191. this.request({
  192. url: '/v2/order/cart',
  193. method: 'post',
  194. data: {
  195. store_id: this.store_id,
  196. page: this.page
  197. },
  198. success: (res) => {
  199. let { data } = res.data;
  200. data.cart_list.forEach(item => {
  201. item.desarray = item.goods_name.split(' ')
  202. })
  203. this.list = data.cart_list;
  204. this.store = data.store;
  205. //console.log(data.cart_list[0].goods_name.split(' '));
  206. }
  207. })
  208. },
  209. // 返回上层
  210. goback() {
  211. uni.navigateBack();
  212. },
  213. // 编辑
  214. deleteShop() {
  215. },
  216. // 数量累加
  217. bindChange(e) {
  218. console.log(e);
  219. this.list[e.index].goods_num = e.number;
  220. this.checkoutprice();
  221. },
  222. // 单选
  223. checkboxChange(e) {
  224. this.checkboxList = []
  225. e.detail.forEach((item, idx) => {
  226. this.$set(this.checkboxList, idx, item)
  227. })
  228. let array = this.list;
  229. let price = [];
  230. this.checkboxList.forEach(item => {
  231. price.push(array[item])
  232. })
  233. this.pricelist = price
  234. this.lengthnumber = this.pricelist.length;
  235. this.listip = this.isdelete ? "结算" + (this.lengthnumber) :'删除'+ (this.lengthnumber);
  236. this.checkoutprice();
  237. },
  238. // 计算价格
  239. checkoutprice() {
  240. let total = 0;
  241. console.log(this.pricelist)
  242. this.pricelist.forEach(item => {
  243. total += item.goods_price * item.goods_num;
  244. })
  245. this.prices = Number(total.toFixed(2))*100;
  246. },
  247. // 全选
  248. onChange(a) {
  249. this.isAll = !this.isAll;
  250. let items = this.list;
  251. if(this.isAll) {
  252. items.forEach((item, idx) => {
  253. this.$set(this.checkboxList, idx, idx.toString())
  254. })
  255. this.pricelist = this.list;
  256. console.log(this.pricelist);
  257. this.lengthnumber = this.pricelist.length;
  258. this.listip = this.isdelete ? `结算(${this.lengthnumber})` :'删除'+ (this.lengthnumber);
  259. this.checkoutprice();
  260. }else {
  261. for (let i = 0, lenI = items.length; i < lenI; ++i) {
  262. this.checkboxList = []
  263. this.pricelist = [];
  264. this.lengthnumber = 0;
  265. this.listip = this.isdelete ? "结算" + (this.lengthnumber) :'删除'+ (this.lengthnumber);
  266. this.checkoutprice();
  267. }
  268. }
  269. }
  270. }
  271. }
  272. </script>
  273. <style>
  274. .uniNavBar {
  275. height: 100%;
  276. }
  277. .cart-list {
  278. background-color: #fff;
  279. /* padding: 0 36upx; */
  280. }
  281. .titleright {
  282. text-align: right;
  283. padding: 10upx 30upx;
  284. background: #fff;
  285. border-bottom: 1px solid #eee;
  286. height: 4vh;
  287. }
  288. .changewidth {
  289. color: #303133;
  290. font-size: 32upx;
  291. font-weight: 100!important;
  292. width: 70%;
  293. white-space: nowrap;
  294. overflow: hidden;
  295. text-overflow: ellipsis;
  296. }
  297. .priceClass {
  298. color:#303133!important;
  299. font-weight: 100!important;
  300. font-size: 36upx;
  301. }
  302. .van-card {
  303. background-color: #fff!important;
  304. }
  305. .shoplist {
  306. display: flex;
  307. padding: 0 35upx;
  308. justify-content: space-between;
  309. align-items: center;
  310. padding-bottom: 25upx;
  311. }
  312. .checklabel {
  313. transform:scale(0.7);
  314. border-radius: 100%;
  315. }
  316. .checkboxteil {
  317. transform:scale(0.7);
  318. border-radius: 100%;
  319. }
  320. .uni-numbox {
  321. position: static!important;
  322. float: right;
  323. }
  324. </style>