cart.vue 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279
  1. <template>
  2. <view class="container cart clearfix" v-if="hasLogin">
  3. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
  4. <view class="container-cart-main tui-skeleton">
  5. <view v-if="!isEmpty" class="container-cart">
  6. <scroll-view class="cart-content" scroll-y @scrolltolower="toLower" :style="{paddingBottom :isIphoneX ? (68+100)+'rpx' : '100rpx'}">
  7. <view class="goods-list">
  8. <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
  9. <view class="shoptitle">
  10. <!--选择商店的全部商品"-->
  11. <view class="checkbox-box" @click.stop="checkShop(item)">
  12. <button class="checkbox iconfont"
  13. :class="[item.checked ?'icon-gouxuanl':'icon-weigouxuan']"
  14. :disabled="item.isDisabled && !isshowDelbtn">
  15. </button>
  16. </view>
  17. <view class="text">{{item.name}}</view>
  18. </view>
  19. <view class="productlist">
  20. <view class="goods-pros" v-for="(pros,idx) in item.productsList" :key="idx" >
  21. <view class="goods-pros-t">
  22. <!--选择商品-->
  23. <view class="checkbox-box" @click.stop="ischeck(item,pros)" :class="[pros.validFlag == '3' && !isshowDelbtn ?'disabled' : '']">
  24. <button class="checkbox iconfont"
  25. :disabled="pros.validFlag == '3' && !isshowDelbtn"
  26. :class="[pros.productsChecked ?'icon-gouxuanl':'icon-weigouxuan']">
  27. </button>
  28. </view>
  29. <view class="pros-img" @click.stop="navToListPage(pros.productID)" ><image :src="pros.mainImage ? pros.mainImage:''" alt="" /></view>
  30. <view class="pros-product">
  31. <view class="producttitle" @click.stop="navToListPage(pros.productID)" >
  32. <text v-if="pros.validFlag == '3'" class="no-text">商品已下架</text>{{pros.name}}
  33. </view>
  34. <view class="productspec">规格:{{pros.unit ? pros.unit : ''}}</view>
  35. <view class="productprice">
  36. <!--使用过滤器对总价改变-->
  37. <view class="price" :class="[pros.validFlag == '3' ?'disabled' : '']">
  38. <text :class="[pros.validFlag == '3' ?'disabled' : 'money-sign']">¥</text>
  39. {{pros.retailPrice?pros.retailPrice.toFixed(2):''}}
  40. </view>
  41. <view class="count" v-if="pros.validFlag == '2'" :class="[isshowDelbtn ? 'none':'show']">
  42. <text class="count-tips" v-if="pros.productCount<pros.minBuyNumber">起订量:{{pros.minBuyNumber}}</text>
  43. <view class="number-box">
  44. <view class="iconfont icon-jianhao" :class="[pros.validFlag == '3'?'disabled':'']" @click="changeCountSub(item,pros)"></view>
  45. <input class="btn-input" type="number" maxlength='4' v-model="pros.productCount" @blur="changeNnmber($event,item,pros)">
  46. <view class="iconfont icon-jiahao" :class="[pros.validFlag == '3'?'disabled':'']" @click="changeCountAdd(item,pros)"></view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </view>
  54. <view class="goods-pros-b" :class="[isshowDelbtn ? 'none':'show']" >
  55. <view class="sum">合计:<text class="money"><text class="money-sign">¥</text>{{item.totalPrice.toFixed(2)}}</text></view>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="failure-list" v-if="failureList.length>0">
  60. <view class="failure-title">
  61. <view class="title-txt">失效商品<text>{{failureList.length}}件</text></view>
  62. <view class="title-btn" @click.stop="deletefailureList">清空失效商品</view>
  63. </view>
  64. <view class="productlist">
  65. <view class="goods-pros" v-for="(failure,failureIdx) in failureList" :key="failureIdx" >
  66. <view class="goods-pros-t" @click.stop="failureToProduct(failure)">
  67. <!--选择商品-->
  68. <view class="checkbox-box" @click.stop="ischeckFailure(failure)" v-if="isshowDelbtn">
  69. <button class="checkbox iconfont"
  70. :disabled="!isshowDelbtn"
  71. :class="[failure.productsChecked ?'icon-gouxuanl':'icon-weigouxuan']">
  72. </button>
  73. </view>
  74. <view class="pros-img">
  75. <image :src="failure.mainImage ? failure.mainImage:''" alt="" />
  76. <text class="img-tip">失效</text>
  77. </view>
  78. <view class="pros-product">
  79. <view class="producttitle">{{failure.name}}</view>
  80. <view class="productspec">规格:{{failure.unit ? failure.unit : ''}}</view>
  81. <view class="productstate">{{failureStateText(failure.failureState)}}</view>
  82. </view>
  83. <view class="pros-marks" v-if="failure.isFailureLayer"></view>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. </scroll-view>
  89. <!-- 脚部菜单 -->
  90. <view class="footer" :style="{paddingBottom :isIphoneX ? '68rpx' : '0rpx'}">
  91. <view class="footer-le">
  92. <view class="foot-check checkbox-box" @tap.stop="checkAll()">
  93. <button class="checkbox iconfont" :class="[isCheckAll?'icon-gouxuan':'icon-weigouxuan']"></button>
  94. <view class="text">全选</view>
  95. </view>
  96. <view class="foot-check-delbtn">
  97. <button class="delBtn" @tap.stop="showDelManager">删除</button>
  98. </view>
  99. <view class="sum">总价:<text class="money-sign">¥</text><text class="money">{{allPrice.toFixed(2)}}</text></view>
  100. </view>
  101. <view v-if="!isshowDelbtn" class="footer-ri" >
  102. <view class="btn" @tap="toConfirmation">去结算({{allCount}})</view>
  103. </view>
  104. <view v-else class="footer-del">
  105. <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
  106. <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
  107. </view>
  108. </view>
  109. </view>
  110. <view v-else class="cart-content empty">
  111. <view class="empty-container">
  112. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png" mode="aspectFit"></image>
  113. <text class="error-text">购物车空空如也,快去商城逛逛吧~</text>
  114. <view class="login-btn" @click="goIndex">去商城</view>
  115. </view>
  116. </view>
  117. </view>
  118. <!-- 透明模态层 -->
  119. <modal-layer v-if='modallayer'></modal-layer>
  120. </view>
  121. </template>
  122. <script>
  123. import authorize from '@/common/config/authorize.js'
  124. import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
  125. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  126. import tuiNomore from "@/components/tui-components/nomore/nomore"
  127. import modalLayer from "@/components/modal-layer"
  128. import { mapState,mapMutations } from 'vuex';
  129. import { queryShoppingCartList,shoppingCartUpdate,shoppingCartDelete } from "@/api/cart.js"
  130. export default{
  131. components:{
  132. tuiSkeleton,
  133. tuiLoadmore,
  134. tuiNomore,
  135. modalLayer
  136. },
  137. data(){
  138. return{
  139. CustomBar:this.CustomBar,// 顶部导航栏高度
  140. isIphoneX:this.$store.state.isIphoneX,
  141. userID:'',
  142. alertType:'',
  143. isStock:'',
  144. failureList:[], //失效商品列表
  145. goodsList:[], //购物车的商品
  146. delGoodsList:'',//要删除的商品
  147. setGoodData:'', //确认订单的商品
  148. isCheckAll:false,//是否全选
  149. allPrice:0,//所有价格
  150. allCount:0,//被选中的产品数量
  151. isNnder:true,
  152. isModallayer:false,
  153. skeletonShow:true,
  154. isshowDelbtn:false,
  155. isDisabled: false, // 供应商/店铺全选是否禁用状态
  156. isNoConfim:false,
  157. isEmpty:false,//显示空购物车
  158. scrollHeight: 'auto',
  159. nomoreText: '上拉显示更多',
  160. hasNextPage: false,
  161. loadding: false,
  162. pullUpOn: true,
  163. pullFlag: true,
  164. pageSize: 10,
  165. pageNum: 1,
  166. }
  167. },
  168. onLoad(){
  169. this.setScrollHeight();
  170. },
  171. computed: {
  172. ...mapState(['hasLogin','userInfo'])
  173. },
  174. filters:{//单件商品的价格 × 数量
  175. totalprice(val,count){
  176. return (val * count).toFixed(2)
  177. }
  178. },
  179. methods:{
  180. initData(){
  181. this.isModallayer = false //遮罩层 防止多次点击
  182. this.skeletonShow = true //预加载圆圈
  183. this.isCheckAll=false//是否全选
  184. this.$api.getStorage().then((resolve) => {
  185. this.userID = resolve.userID;
  186. this.initGetCartGoodsList();
  187. })
  188. },
  189. initLogin(){
  190. authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  191. if(wxResponse == 1){
  192. this.$api.redirectTo('/pages/login/login?type=4')
  193. }else{
  194. this.$api.navigateTo('/pages/authorization/authorization?type=1')
  195. }
  196. })
  197. },
  198. setScrollHeight() {
  199. // 窗口高度-footer高度
  200. const {windowHeight, pixelRatio} = uni.getSystemInfoSync();
  201. setTimeout(()=> {
  202. const query = uni.createSelectorQuery().in(this);
  203. query.selectAll('.footer').boundingClientRect();
  204. query.exec(res => {
  205. this.windowHeight = windowHeight;
  206. if(res[0][0]) {
  207. this.scrollHeight = windowHeight - res[0][0].height;
  208. }
  209. })
  210. }, 500)
  211. },
  212. initGetCartGoodsList(){//初始化购物车 index:1
  213. let params = {userID:this.userID}
  214. queryShoppingCartList(params).then(response =>{
  215. this.skeletonShow = false
  216. this.$store.commit('updateAllNum',response.data.cartQuantity)
  217. const responseData = response.data
  218. if(responseData.pageDate.length > 0 || responseData.failureList.length > 0){
  219. this.isEmpty =false
  220. }else{
  221. this.isEmpty =true
  222. }
  223. if(responseData.pageDate && responseData.pageDate.length > 0 ){
  224. this.goodsList = responseData.pageDate;
  225. this.goodsList.forEach((item,index) => {
  226. let productsListLength = item.productsList.length,
  227. invalidLength = 0;
  228. item.productsList.forEach(pros => {
  229. pros.shopID = item.shopID;
  230. if(pros.validFlag == '3' ) {invalidLength++;}
  231. })
  232. item.isDisabled = invalidLength === productsListLength;
  233. })
  234. } else {
  235. this.goodsList = [];
  236. }
  237. if( responseData.failureList && responseData.failureList.length > 0){
  238. let newFailureList = [],isFailureLayer;
  239. responseData.failureList.forEach((failure,index) => {
  240. if(failure.failureState == 1 || failure.failureState == 2) {
  241. isFailureLayer = true
  242. }else{
  243. isFailureLayer = false
  244. }
  245. newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
  246. })
  247. this.failureList = newFailureList
  248. } else {
  249. this.failureList = [];
  250. }
  251. }).catch(error =>{
  252. this.$util.msg(error.msg,2000);
  253. })
  254. },
  255. getOnReachBottomData(){//上拉加载
  256. this.pageNum+=1
  257. let params = {userID:this.userID,pageNum:this.pageNum,pageSize:this.pageSize}
  258. queryShoppingCartList(params).then(response =>{
  259. let resultsData = response.data.pageDate
  260. this.hasNextPage = resultsData.hasNextPage;
  261. this.goodsList = this.goodsList.concat(resultsData.results)
  262. this.pullFlag = false;// 防上拉暴滑
  263. setTimeout(()=>{this.pullFlag = true;},500)
  264. if(this.hasNextPage){
  265. this.pullUpOn = false
  266. this.nomoreText = '上拉显示更多'
  267. }else{
  268. this.loadding = false
  269. this.pullUpOn = false
  270. this.nomoreText = '已至底部'
  271. }
  272. }).catch(error =>{
  273. this.$util.msg(error.msg,2000);
  274. })
  275. },
  276. ischeckFailure(failure){
  277. failure.productsChecked = !failure.productsChecked;
  278. },
  279. ischeck(item,pro){//为未选中的时候改变为true,反之为true
  280. pro.productsChecked = !pro.productsChecked;
  281. this.updateProductCheckedAllBtn(item);
  282. this.updateCheckAllBtn();
  283. },
  284. updateProductCheckedAllBtn(item) {// 单独每个供应商的勾选判断
  285. let productsList = item.productsList,
  286. productsCheckedLength = 0,
  287. disabledLength = 0;
  288. if(this.isshowDelbtn) {
  289. productsList.forEach(pros => {
  290. if(pros.productsChecked) {
  291. productsCheckedLength++;
  292. }
  293. })
  294. } else {
  295. productsList.forEach(pros => {
  296. if(pros.productsChecked && pros.validFlag != '3') {
  297. productsCheckedLength++;
  298. }
  299. if(pros.validFlag == '3') {disabledLength++;}
  300. })
  301. }
  302. item.checked = productsCheckedLength === productsList.length - disabledLength;
  303. },
  304. updateCheckAllBtn() {// 全选勾选判断
  305. let goodsCheckedLength = 0,
  306. disabledListLength = 0,
  307. goodsList = this.goodsList;
  308. goodsList.forEach(item => {
  309. if(item.checked) {
  310. goodsCheckedLength++;
  311. }
  312. if(item.isDisabled && !this.isshowDelbtn) {
  313. disabledListLength++;
  314. }
  315. })
  316. this.isCheckAll = goodsCheckedLength === goodsList.length - disabledListLength;
  317. },
  318. checkShop(item){//与单选商品类似
  319. item.checked = !item.checked;
  320. this.setProductChecked(item);
  321. this.updateCheckAllBtn();
  322. },
  323. setProductChecked(item) {
  324. let products = item.productsList;
  325. products.forEach(pros=>{
  326. if(item.checked) {
  327. if(pros.validFlag =='3'){
  328. // 无效
  329. this.isNnder = true;
  330. pros.productsChecked = this.isshowDelbtn ?true :false;
  331. }else{
  332. // 有效
  333. this.isNnder = false;
  334. pros.productsChecked = true;
  335. }
  336. } else {
  337. pros.productsChecked = false;
  338. }
  339. })
  340. },
  341. updateBothCheckBtn() {
  342. if(this.isshowDelbtn) {
  343. // 当管理删除按钮出现时,失效的商品可被选择
  344. this.goodsList.forEach((item)=>{
  345. item.checked = this.isCheckAll;
  346. this.setProductChecked(item);
  347. })
  348. } else {
  349. this.goodsList.forEach((item)=>{
  350. item.checked = this.isCheckAll && !item.isDisabled;
  351. this.setProductChecked(item);
  352. })
  353. }
  354. },
  355. checkAll(){//全选方法内调用方法
  356. this.isCheckAll = !this.isCheckAll;
  357. this.updateBothCheckBtn();
  358. },
  359. totalShopPeice(){//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
  360. let prosPrice=0;
  361. let validPrice =0;
  362. let validList=[];
  363. let productsList=[];
  364. this.goodsList.map((item,index)=>{
  365. productsList=item.productsList;
  366. prosPrice=productsList.reduce((p,e)=>p+e.retailPrice*e.productCount,0);
  367. productsList.forEach(pros =>{
  368. if(pros.validFlag =='3'){
  369. validList.push(pros)
  370. validPrice = validList.reduce((p,e)=>p+e.retailPrice*e.productCount,0);
  371. item.totalPrice = prosPrice - validPrice
  372. }else{
  373. item.totalPrice = prosPrice
  374. }
  375. })
  376. })
  377. },
  378. totalPeice(){ //计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
  379. this.allPrice = 0
  380. let prosPrice=0;
  381. let validPrice=0;
  382. let validList =[];
  383. let productsList =[];
  384. this.goodsList.forEach((item,index)=>{
  385. productsList=item.productsList;
  386. productsList.forEach(pros=>{
  387. if(pros.productsChecked){
  388. prosPrice+=pros.retailPrice*pros.productCount;
  389. if(pros.validFlag =='3'){
  390. validList.push(pros)
  391. validPrice = validList.reduce((p,e)=>p+e.retailPrice*e.productCount,0);
  392. this.allPrice = prosPrice - validPrice
  393. }else{
  394. this.allPrice = prosPrice
  395. }
  396. }
  397. })
  398. })
  399. },
  400. totalCount(){//计算总数量
  401. this.allCount = 0
  402. let prosAllCount=0
  403. let validCount = 0
  404. let validList =[];
  405. let productsList =[];
  406. this.goodsList.forEach(item=>{
  407. productsList = item.productsList
  408. productsList.forEach(pros=>{
  409. if(pros.productsChecked){
  410. prosAllCount+=parseInt(pros.productCount);
  411. if(pros.validFlag =='3'){
  412. validList.push(pros)
  413. validList.forEach(val =>{
  414. validCount += val.productCount
  415. })
  416. this.allCount = prosAllCount - validCount
  417. }else{
  418. this.allCount = prosAllCount
  419. }
  420. }
  421. })
  422. })
  423. },
  424. changeCountAdd(item,pros){//商品数量加加
  425. if(pros.productCount>=pros.stock){
  426. pros.productCount= pros.stock
  427. this.isStock =true
  428. return
  429. }else{
  430. pros.productCount++
  431. this.processActivityPrice(pros)
  432. this.isStock =false
  433. }
  434. this.updateShoppogNum(pros)
  435. this.totalShopPeice();
  436. },
  437. changeCountSub(item,pros){//商品数量减减
  438. if(pros.productCount<=pros.minBuyNumber){
  439. pros.productCount= pros.minBuyNumber
  440. this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`,2000);
  441. return
  442. }else{
  443. pros.productCount--
  444. this.processActivityPrice(pros)
  445. }
  446. this.updateShoppogNum(pros)
  447. this.totalShopPeice();
  448. },
  449. changeNnmber(e,item,pros){//输入商品数量更新
  450. let _value = e.detail.value;
  451. if(!this.$api.isNumber(_value)){
  452. pros.productCount = pros.minBuyNumber
  453. }else if(_value < pros.minBuyNumber){
  454. this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`,2000);
  455. pros.productCount = pros.minBuyNumber
  456. }else{
  457. pros.productCount = e.detail.value
  458. this.processActivityPrice(pros)
  459. }
  460. this.updateShoppogNum(pros)
  461. this.totalShopPeice();
  462. },
  463. processActivityPrice(pros){//单独处理活动价格和阶梯价格
  464. let ladderPriceList = pros.ladderPriceList;
  465. if(pros.ladderPriceFlag == '0' || pros.actStatus == 1){
  466. pros.retailPrice = pros.retailPrice
  467. }else{
  468. ladderPriceList.forEach((item,index)=>{
  469. if(pros.productCount>=item.buyNum){
  470. pros.retailPrice = item.buyPrice
  471. }
  472. })
  473. }
  474. },
  475. updateShoppogNum(pros){//加减购物车商品更新到后台
  476. let params ={userID:this.userID,productID:pros.productID,productCount:pros.productCount}
  477. shoppingCartUpdate(params).then(response =>{
  478. this.isshowDelbtn = false;
  479. this.initGetCartGoodsList();
  480. }).catch(error =>{
  481. this.$util.msg(error.msg,2000);
  482. })
  483. },
  484. toConfirmation(){//跳转确认订单页面
  485. let setGoodsList=[];
  486. this.goodsList.forEach(res=>{
  487. let products = res.productsList
  488. products.forEach(pros=>{
  489. if(pros.productsChecked){
  490. setGoodsList.push(pros.productID)
  491. }
  492. })
  493. })
  494. if(setGoodsList == ''){
  495. this.$util.msg("请先选择结算商品~",2000);
  496. return
  497. }else{
  498. this.isNoConfim = false
  499. this.goodsList.forEach(el=>{
  500. el.productsList.forEach(pros=>{
  501. if(pros.productsChecked){
  502. if(pros.productCount<pros.minBuyNumber){
  503. this.isNoConfim = true
  504. }
  505. }
  506. })
  507. })
  508. if(this.isNoConfim){
  509. this.$util.modal('','有商品的购买量没达到最小起订量,请修改数量后再次提交结算','去修改','',false,() =>{})
  510. return;
  511. }else{
  512. let productID = '';
  513. this.goodsList.forEach(el=>{//获取勾选的商品ID拼接字符串逗号隔开,最后一个逗号去掉
  514. el.productsList.forEach(pros=>{
  515. if(pros.productsChecked){
  516. productID += pros.productID+','
  517. }
  518. })
  519. })
  520. let cartPramsData={
  521. allPrice:this.allPrice,
  522. allCount:this.allCount,
  523. productID:productID.substring(0,productID.lastIndexOf(',')),
  524. productCount:''
  525. }
  526. this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({data:cartPramsData})}`)
  527. }
  528. }
  529. },
  530. showDelManager(){//显示删除商品管理
  531. this.isshowDelbtn = true;
  532. this.isNnder = true;
  533. if(this.isCheckAll) {
  534. this.updateBothCheckBtn();
  535. } else {
  536. // 失效也被勾选
  537. this.goodsList.forEach(item => {
  538. if(item.checked) {
  539. item.productsList.forEach(pros => {
  540. pros.productsChecked = true;
  541. })
  542. }
  543. })
  544. this.updateCheckAllBtn();
  545. }
  546. this.failureList.forEach(failureItem => {
  547. if(failureItem.isFailureLayer){
  548. failureItem.isFailureLayer = false
  549. }
  550. })
  551. },
  552. hideDelManage(){//隐藏删除商品管理
  553. this.isshowDelbtn = false;
  554. let isFailureLayer,newFailureList =[];
  555. if(this.isCheckAll) {
  556. this.updateBothCheckBtn();
  557. } else {
  558. // 失效商品取消勾选
  559. this.goodsList.forEach(item => {
  560. if(item.isDisabled) {
  561. item.checked = false;
  562. }
  563. item.productsList.forEach(pros => {
  564. if(pros.validFlag == '3') {
  565. pros.productsChecked = false;
  566. }
  567. })
  568. })
  569. this.updateCheckAllBtn();
  570. }
  571. this.failureList.forEach((failure,index) => {
  572. if(failure.failureState == 1 || failure.failureState == 2) {
  573. isFailureLayer = true
  574. }else{
  575. isFailureLayer = false
  576. }
  577. newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
  578. })
  579. this.failureList = newFailureList;
  580. },
  581. deleteList(){//删除购物车商品
  582. this.delGoodsList=[];
  583. this.goodsList.forEach(delitem=>{
  584. let products = delitem.productsList
  585. products.forEach(pros=>{
  586. if(pros.productsChecked){
  587. this.delGoodsList += pros.productID+','
  588. }
  589. })
  590. })
  591. this.failureList.forEach(failure=>{
  592. if(failure.productsChecked){
  593. this.delGoodsList += failure.productID+','
  594. }
  595. })
  596. if(this.delGoodsList.length == 0){
  597. this.$util.msg("请选择要删除的商品~",2000);
  598. return
  599. }else{
  600. this.$util.modal('','确定删除选中的商品吗?','确定','取消',true,() =>{
  601. shoppingCartDelete({userID:this.userID,productIDs:this.delGoodsList}).then(response =>{
  602. this.$util.msg('删除成功',2000);
  603. setTimeout(()=>{
  604. this.isshowDelbtn = false;
  605. this.initGetCartGoodsList();
  606. },2000)
  607. }).catch(error =>{
  608. this.$util.msg(error.msg,2000)
  609. })
  610. })
  611. }
  612. },
  613. deletefailureList(){
  614. this.failureList.forEach(failure=>{
  615. this.delGoodsList += failure.productID+','
  616. })
  617. this.$util.modal('','确定清空全部失效商品吗?','确定','取消',true,() =>{
  618. shoppingCartDelete({userID:this.userID,productIDs:this.delGoodsList}).then(response =>{
  619. this.$util.msg('删除成功',2000);
  620. setTimeout(()=>{
  621. this.isshowDelbtn = false;
  622. this.initGetCartGoodsList();
  623. },2000)
  624. }).catch(error =>{
  625. this.$util.msg(error.msg,2000)
  626. })
  627. })
  628. },
  629. goIndex(){
  630. uni.switchTab({
  631. url: '/pages/tabBar/home/home'
  632. });
  633. },
  634. goNavto(url){
  635. uni.navigateTo ({
  636. url
  637. })
  638. },
  639. navToListPage(id){
  640. this.isModallayer = true;
  641. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  642. },
  643. failureToProduct(failure){
  644. if(failure.failureState == 1){
  645. this.$util.msg('商品已丢失,不能查看',2000)
  646. return
  647. }else if(failure.failureState == 2){
  648. this.$util.msg('商品已停售,不能查看',2000)
  649. return
  650. }else{
  651. this.isModallayer = true;
  652. this.$api.navigateTo(`/pages/goods/product?id=${failure.productID}`)
  653. }
  654. },
  655. failureStateText(state){
  656. let stateText = '',
  657. stateTextObject={
  658. 1:'商品已丢失',
  659. 2:'商品已停售',
  660. 3:'商品已下架',
  661. 4:'商品已售罄',
  662. 5:'价格仅会员可见,您不能购买',
  663. 6:'未公开价格',
  664. 7:'库存不足'
  665. }
  666. Object.keys(stateTextObject).forEach(key => {
  667. if(key == state){
  668. stateText = stateTextObject[key]
  669. }
  670. })
  671. return stateText;
  672. },
  673. setHeaderBtnPosi(){
  674. // 获得胶囊按钮位置信息
  675. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  676. return headerBtnPosi
  677. },
  678. setSysteminfo(){
  679. let systeminfo;
  680. uni.getSystemInfo({ // 获取设备信息
  681. success: (res) => {
  682. systeminfo = res
  683. },
  684. })
  685. return systeminfo
  686. }
  687. },
  688. watch:{//深度监听所有数据,每次改变重新计算总价和总数
  689. goodsList:{
  690. deep:true,
  691. handler(val,oldval){
  692. this.totalPeice()
  693. this.totalCount()
  694. }
  695. }
  696. },
  697. onPullDownRefresh() {//下拉刷新
  698. this.initGetCartGoodsList()
  699. uni.stopPullDownRefresh()
  700. },
  701. onShow(){
  702. if(this.hasLogin){
  703. this.initData()
  704. }else{
  705. this.initLogin()
  706. }
  707. },
  708. }
  709. </script>
  710. <style lang="scss">
  711. page{
  712. background: #f7f7f7;
  713. height: auto;
  714. }
  715. .cart-content{
  716. position: relative;
  717. }
  718. .container-cart-main.none{
  719. display: none;
  720. }
  721. .container-cart-main.show{
  722. display: block;
  723. }
  724. .cart-content.empty.none{
  725. display: none;
  726. }
  727. .cart-content.empty.show{
  728. display: block;
  729. }
  730. .container-cart.show{
  731. display: block;
  732. }
  733. .container-cart.none{
  734. display: none;
  735. }
  736. .empty-container.none{
  737. display: none;
  738. }
  739. .empty-container.show{
  740. display: flex;
  741. }
  742. .checkbox-box{
  743. display: flex;
  744. align-items: center;
  745. .checkbox{
  746. display: flex;
  747. margin: 0;
  748. padding: 0;
  749. display: flex;
  750. flex-direction: column;
  751. align-items: center;
  752. box-sizing: border-box;
  753. text-align: center;
  754. text-decoration: none;
  755. border-radius: 0;
  756. -webkit-tap-highlight-color: transparent;
  757. overflow: hidden;
  758. background-color:#FFFFFF;
  759. font-size: 36rpx;
  760. color:$color-system;
  761. }
  762. &.disabled{
  763. .checkbox{
  764. color:#999999
  765. }
  766. }
  767. .text{
  768. font-size: $font-size-24;
  769. margin-left: 10rpx;
  770. }
  771. }
  772. .goods-list{
  773. width: 100%;
  774. height: auto;
  775. border-top: 1px solid #EBEBEB;
  776. background-color: #F7F7F7;
  777. .goods-item{
  778. width: 702rpx;
  779. padding: 0 24rpx;
  780. background: #FFFFFF;
  781. margin-bottom: 24rpx;
  782. }
  783. .shoptitle{
  784. display: flex;
  785. align-items: center;
  786. height: 80rpx;
  787. // border-bottom: 1px solid #EBEBEB;
  788. line-height: 80rpx;
  789. .checkbox-box{
  790. padding: 10rpx;
  791. }
  792. .text{
  793. margin-left: 37rpx;
  794. font-size: $font-size-28;
  795. color: $text-color;
  796. text-align: left;
  797. font-weight: bold;
  798. }
  799. }
  800. .goods-pros{
  801. width: 100%;
  802. height: auto;
  803. }
  804. .goods-pros-t{
  805. display: flex;
  806. align-items: center;
  807. width: 100%;
  808. height: 210rpx;
  809. padding:0 0 26rpx 0;
  810. .checkbox-box{
  811. padding: 10rpx;
  812. }
  813. .pros-img{
  814. width: 210rpx;
  815. height: 100%;
  816. border-radius: 10rpx;
  817. margin:0 20rpx;
  818. border:1px solid #f3f3f3;
  819. image{
  820. width: 100%;
  821. height: 100%;
  822. border-radius: 10rpx;
  823. }
  824. }
  825. }
  826. .goods-pros-b{
  827. width:622rpx;
  828. margin-left: 84rpx;
  829. height: 40rpx;
  830. padding:0 0 26rpx 0;
  831. // border-top: 1px solid #EBEBEB;
  832. &.show{
  833. display: block;
  834. }
  835. &.none{
  836. display: none;
  837. }
  838. .sum{
  839. font-size: $font-size-28;
  840. line-height: 40rpx;
  841. color: $text-color;
  842. display: flex;
  843. justify-content: flex-end;
  844. .money{
  845. color: #FF2A2A;
  846. font-size: $font-size-28;
  847. }
  848. .money-sign{
  849. font-size: $font-size-24;
  850. color: #FF2A2A;
  851. }
  852. }
  853. }
  854. .pros-product{
  855. width: 402rpx;
  856. height: 100%;
  857. line-height: 36rpx;
  858. font-size: $font-size-28;
  859. position: relative;
  860. .producttitle{
  861. width: 100%;
  862. display: inline-block;
  863. height: auto;
  864. text-overflow:ellipsis;
  865. display: -webkit-box;
  866. word-break: break-all;
  867. -webkit-box-orient: vertical;
  868. -webkit-line-clamp: 2;
  869. overflow: hidden;
  870. margin-bottom: 8rpx;
  871. .no-text{
  872. display: inline-block;
  873. height:36rpx;
  874. padding: 0 12rpx;
  875. line-height: 36rpx;
  876. background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
  877. border-radius:18rpx;
  878. text-align: center;
  879. color: #FFFFFF;
  880. font-size:$font-size-28;
  881. margin-right: 24rpx;
  882. }
  883. }
  884. .productspec{
  885. height: 36rpx;
  886. color: #999999;
  887. font-size: $font-size-26;
  888. }
  889. .productprice{
  890. height: 48rpx;
  891. position: absolute;
  892. width: 100%;
  893. bottom: 0;
  894. .price{
  895. line-height: 48rpx;
  896. font-size: $font-size-28;
  897. width: 48%;
  898. color: #FF2A2A;
  899. float: left;
  900. &.disabled{
  901. color: #999999;
  902. }
  903. .money-sign{
  904. font-size: $font-size-24;
  905. color: #FF2A2A;
  906. }
  907. }
  908. .count{
  909. height: 100%;
  910. float: right;
  911. position: relative;
  912. &.show{
  913. display: block;
  914. }
  915. &.none{
  916. display: none;
  917. }
  918. .count-tips{
  919. width: auto;
  920. display: inline-block;
  921. padding: 0 15rpx;
  922. line-height: 44rpx;
  923. height: 44rpx;
  924. border-radius: 22rpx;
  925. background: $btn-confirm;
  926. font-size: $font-size-24;
  927. text-align: center;
  928. color: #FFFFFF;
  929. position: absolute;
  930. top:-60rpx;
  931. left: -5rpx;
  932. z-index: 5;
  933. &::before{
  934. content: "";
  935. position: absolute;
  936. bottom: -30rpx;
  937. right: 15rpx;
  938. z-index:1;
  939. width: 0;
  940. height: 0;
  941. border-width: 18rpx;
  942. border-style: solid;
  943. border-color:$color-system transparent transparent transparent;
  944. }
  945. }
  946. .number-box{
  947. display: flex;
  948. justify-content: center;
  949. align-items: center;
  950. .iconfont{
  951. font-size: $font-size-24;
  952. padding:0 20rpx;
  953. color: $text-color;
  954. text-align: center;
  955. line-height: 48rpx;
  956. font-weight: bold;
  957. }
  958. .btn-input{
  959. width: 62rpx;
  960. height: 48rpx;
  961. line-height: 48rpx;
  962. background: #F8F8F8;
  963. border-radius: 4rpx;
  964. text-align: center;
  965. font-size: $font-size-24;
  966. }
  967. }
  968. .uni-numbox{
  969. position: absolute;
  970. left: 45rpx;
  971. bottom: 0;
  972. .uni-numbox-minus, .uni-numbox-plus{
  973. width: 50rpx;
  974. line-height: 40rpx;
  975. }
  976. .uni-numbox-value {
  977. font-size: $font-size-28;
  978. width: 60rpx;
  979. }
  980. }
  981. }
  982. }
  983. }
  984. }
  985. .failure-list{
  986. width: 702rpx;
  987. height: auto;
  988. padding: 0 24rpx;
  989. margin-top: 20rpx;
  990. background: #FFFFFF;
  991. .failure-title{
  992. width: 100%;
  993. height: 80rpx;
  994. line-height: 80rpx;
  995. font-size: $font-size-28;
  996. border-bottom: 1px solid #EBEBEB;
  997. .title-txt{
  998. float: left;
  999. color: $text-color;
  1000. text-align: left;
  1001. }
  1002. .title-btn{
  1003. float: right;
  1004. color: $color-system;
  1005. text-align: right;
  1006. }
  1007. }
  1008. .productlist{
  1009. padding-top: 10rpx;
  1010. .goods-pros{
  1011. width: 100%;
  1012. height: auto;
  1013. padding: 20rpx 0;
  1014. }
  1015. .goods-pros-t{
  1016. display: flex;
  1017. align-items: center;
  1018. width: 100%;
  1019. height: 210rpx;
  1020. position: relative;
  1021. .checkbox-box{
  1022. padding: 10rpx;
  1023. }
  1024. .pros-img{
  1025. width: 210rpx;
  1026. height: 100%;
  1027. border-radius: 10rpx;
  1028. margin:0 20rpx;
  1029. border:1px solid #f3f3f3;
  1030. position: relative;
  1031. .img-tip{
  1032. display: block;
  1033. width: 72rpx;
  1034. height: 36rpx;
  1035. line-height: 36rpx;
  1036. font-size: $font-size-24;
  1037. text-align: center;
  1038. color: #FFFFFF;
  1039. border-radius: 10rpx 0 10rpx 0;
  1040. background:linear-gradient(34deg,rgba(255,149,42,1) 0%,rgba(225,86,22,1) 100%);
  1041. position: absolute;
  1042. left: 0;
  1043. top: 0;
  1044. }
  1045. image{
  1046. width: 100%;
  1047. height: 100%;
  1048. border-radius: 10rpx;
  1049. }
  1050. }
  1051. .pros-marks{
  1052. width: 722rpx; height: 250rpx;
  1053. z-index: 9;
  1054. background: rgba(0,0,0,.05);
  1055. position: absolute;
  1056. left:0;
  1057. top: -20rpx;
  1058. }
  1059. }
  1060. .goods-pros-b{
  1061. width:622rpx;
  1062. margin-left: 84rpx;
  1063. height: 40rpx;
  1064. padding:0 0 26rpx 0;
  1065. // border-top: 1px solid #EBEBEB;
  1066. &.show{
  1067. display: block;
  1068. }
  1069. &.none{
  1070. display: none;
  1071. }
  1072. .sum{
  1073. font-size: $font-size-28;
  1074. line-height: 40rpx;
  1075. color: $text-color;
  1076. display: flex;
  1077. justify-content: flex-end;
  1078. .money{
  1079. color: #FF2A2A;
  1080. font-size: $font-size-28;
  1081. }
  1082. .money-sign{
  1083. font-size: $font-size-24;
  1084. color: #FF2A2A;
  1085. }
  1086. }
  1087. }
  1088. .pros-product{
  1089. width: 402rpx;
  1090. height: 100%;
  1091. line-height: 36rpx;
  1092. font-size: $font-size-28;
  1093. position: relative;
  1094. .producttitle{
  1095. width: 100%;
  1096. display: inline-block;
  1097. height: auto;
  1098. text-overflow:ellipsis;
  1099. display: -webkit-box;
  1100. word-break: break-all;
  1101. -webkit-box-orient: vertical;
  1102. -webkit-line-clamp: 2;
  1103. overflow: hidden;
  1104. margin-bottom: 8rpx;
  1105. .no-text{
  1106. display: inline-block;
  1107. height:36rpx;
  1108. padding: 0 12rpx;
  1109. line-height: 36rpx;
  1110. background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
  1111. border-radius:18rpx;
  1112. text-align: center;
  1113. color: #FFFFFF;
  1114. font-size: $font-size-28;
  1115. margin-right: 24rpx;
  1116. }
  1117. }
  1118. .productspec{
  1119. height: 36rpx;
  1120. color: #999999;
  1121. font-size: $font-size-26;
  1122. }
  1123. .productstate{
  1124. font-size: $font-size-28;
  1125. height: 44rpx;
  1126. color: #FF2A2A;
  1127. position: absolute;
  1128. bottom: 0;
  1129. left: 0;
  1130. }
  1131. }
  1132. }
  1133. }
  1134. .footer{
  1135. width: 100%;
  1136. background-color: #FFFFFF;
  1137. height: 110rpx;
  1138. position: fixed;
  1139. bottom: 0rpx;
  1140. z-index: 10;
  1141. .footer-le{
  1142. width: 490rpx;
  1143. height: 100%;
  1144. padding:0 30rpx;
  1145. float: left;
  1146. .text{
  1147. font-weight: bold;
  1148. }
  1149. .foot-check{
  1150. width: 100rpx;
  1151. float: left;
  1152. line-height: 110rpx;
  1153. font-size: $font-size-24;
  1154. .checkbox{
  1155. width: 40rpx;
  1156. text-align: center;
  1157. }
  1158. .text{
  1159. width: 60rpx;
  1160. float: right;
  1161. }
  1162. }
  1163. .foot-check-delbtn{
  1164. float: left;
  1165. .delBtn{
  1166. margin: 0;
  1167. padding: 0;
  1168. display: flex;
  1169. flex-direction: column;
  1170. align-items: center;
  1171. box-sizing: border-box;
  1172. font-size: $font-size-24;
  1173. text-align: center;
  1174. text-decoration: none;
  1175. border-radius: 0;
  1176. -webkit-tap-highlight-color: transparent;
  1177. overflow: hidden;
  1178. background-color:#FFFFFF;
  1179. color: #FF2A2A;
  1180. padding: 0 24rpx;
  1181. display: flex;
  1182. justify-content: center;
  1183. align-items: center;
  1184. line-height: 110rpx;
  1185. font-weight: bold;
  1186. &.none{
  1187. display: none;
  1188. }
  1189. }
  1190. }
  1191. .sum{
  1192. font-size: $font-size-28;
  1193. line-height: 110rpx;
  1194. color: $text-color;
  1195. display: flex;
  1196. justify-content: flex-end;
  1197. .money{
  1198. color: #FF2A2A;
  1199. }
  1200. .money-sign{
  1201. font-size: $font-size-24;
  1202. color: #FF2A2A;
  1203. }
  1204. }
  1205. }
  1206. .footer-ri{
  1207. width: 200rpx;
  1208. height: 100%;
  1209. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  1210. float: right;
  1211. display: flex;
  1212. justify-content: space-between;
  1213. align-items: center;
  1214. z-index: 999;
  1215. &.none{
  1216. display: none;
  1217. }
  1218. .btn{
  1219. width: 200rpx;
  1220. height: 100%;
  1221. font-size: $font-size-28;
  1222. line-height: 110rpx;
  1223. color: #FFFFFF;
  1224. display: flex;
  1225. justify-content: center;
  1226. align-items: center;
  1227. }
  1228. }
  1229. .footer-del{
  1230. width: 400rpx;
  1231. height: 110rpx;
  1232. position: absolute;
  1233. padding-left: 200rpx;
  1234. background: #FFFFFF;
  1235. right: 0;
  1236. top: 0;
  1237. z-index: 1000;
  1238. &.show{
  1239. animation: showDelbtn 0s linear both;
  1240. }
  1241. &.none{
  1242. animation: hideDelbtn 0s linear both;
  1243. }
  1244. .btn{
  1245. width: 50%;
  1246. height: 100%;
  1247. line-height: 110rpx;
  1248. font-size: $font-size-28;
  1249. color: #FFFFFF;
  1250. text-align: center;
  1251. float: left;
  1252. }
  1253. .btn.btn-cancel{
  1254. background:#EEC1AB;
  1255. }
  1256. .btn.btn-confirm{
  1257. background:#FF2A2A;
  1258. }
  1259. @keyframes showDelbtn {
  1260. 0% {
  1261. transform: translateX(0);
  1262. }
  1263. 100% {
  1264. transform: translateX(-100%);
  1265. }
  1266. }
  1267. @keyframes hideDelbtn {
  1268. 0% {
  1269. transform: translateX(-100%);
  1270. }
  1271. 100% {
  1272. transform: translateX(0);
  1273. }
  1274. }
  1275. }
  1276. }
  1277. </style>