cart.vue 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278
  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-if="isEmpty" 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=0')
  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,pageNum:1,pageSize:this.pageSize}
  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.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.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. }
  665. Object.keys(stateTextObject).forEach(key => {
  666. if(key == state){
  667. stateText = stateTextObject[key]
  668. }
  669. })
  670. return stateText;
  671. },
  672. setHeaderBtnPosi(){
  673. // 获得胶囊按钮位置信息
  674. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  675. return headerBtnPosi
  676. },
  677. setSysteminfo(){
  678. let systeminfo;
  679. uni.getSystemInfo({ // 获取设备信息
  680. success: (res) => {
  681. systeminfo = res
  682. },
  683. })
  684. return systeminfo
  685. }
  686. },
  687. watch:{//深度监听所有数据,每次改变重新计算总价和总数
  688. goodsList:{
  689. deep:true,
  690. handler(val,oldval){
  691. this.totalPeice()
  692. this.totalCount()
  693. }
  694. }
  695. },
  696. onPullDownRefresh() {//下拉刷新
  697. this.initGetCartGoodsList()
  698. uni.stopPullDownRefresh()
  699. },
  700. onShow(){
  701. if(this.hasLogin){
  702. this.initData()
  703. }else{
  704. this.initLogin()
  705. }
  706. },
  707. }
  708. </script>
  709. <style lang="scss">
  710. page{
  711. background: #f7f7f7;
  712. height: auto;
  713. }
  714. .cart-content{
  715. position: relative;
  716. }
  717. .container-cart-main.none{
  718. display: none;
  719. }
  720. .container-cart-main.show{
  721. display: block;
  722. }
  723. .cart-content.empty.none{
  724. display: none;
  725. }
  726. .cart-content.empty.show{
  727. display: block;
  728. }
  729. .container-cart.show{
  730. display: block;
  731. }
  732. .container-cart.none{
  733. display: none;
  734. }
  735. .empty-container.none{
  736. display: none;
  737. }
  738. .empty-container.show{
  739. display: flex;
  740. }
  741. .checkbox-box{
  742. display: flex;
  743. align-items: center;
  744. .checkbox{
  745. display: flex;
  746. margin: 0;
  747. padding: 0;
  748. display: flex;
  749. flex-direction: column;
  750. align-items: center;
  751. box-sizing: border-box;
  752. text-align: center;
  753. text-decoration: none;
  754. border-radius: 0;
  755. -webkit-tap-highlight-color: transparent;
  756. overflow: hidden;
  757. background-color:#FFFFFF;
  758. font-size: 36rpx;
  759. color:$color-system;
  760. }
  761. &.disabled{
  762. .checkbox{
  763. color:#999999
  764. }
  765. }
  766. .text{
  767. font-size: $font-size-24;
  768. margin-left: 10rpx;
  769. }
  770. }
  771. .goods-list{
  772. width: 100%;
  773. height: auto;
  774. border-top: 1px solid #EBEBEB;
  775. background-color: #F7F7F7;
  776. .goods-item{
  777. width: 702rpx;
  778. padding: 0 24rpx;
  779. background: #FFFFFF;
  780. margin-bottom: 24rpx;
  781. }
  782. .shoptitle{
  783. display: flex;
  784. align-items: center;
  785. height: 80rpx;
  786. // border-bottom: 1px solid #EBEBEB;
  787. line-height: 80rpx;
  788. .checkbox-box{
  789. padding: 10rpx;
  790. }
  791. .text{
  792. margin-left: 37rpx;
  793. font-size: $font-size-28;
  794. color: $text-color;
  795. text-align: left;
  796. font-weight: bold;
  797. }
  798. }
  799. .goods-pros{
  800. width: 100%;
  801. height: auto;
  802. }
  803. .goods-pros-t{
  804. display: flex;
  805. align-items: center;
  806. width: 100%;
  807. height: 210rpx;
  808. padding:0 0 26rpx 0;
  809. .checkbox-box{
  810. padding: 10rpx;
  811. }
  812. .pros-img{
  813. width: 210rpx;
  814. height: 100%;
  815. border-radius: 10rpx;
  816. margin:0 20rpx;
  817. border:1px solid #f3f3f3;
  818. image{
  819. width: 100%;
  820. height: 100%;
  821. border-radius: 10rpx;
  822. }
  823. }
  824. }
  825. .goods-pros-b{
  826. width:622rpx;
  827. margin-left: 84rpx;
  828. height: 40rpx;
  829. padding:0 0 26rpx 0;
  830. // border-top: 1px solid #EBEBEB;
  831. &.show{
  832. display: block;
  833. }
  834. &.none{
  835. display: none;
  836. }
  837. .sum{
  838. font-size: $font-size-28;
  839. line-height: 40rpx;
  840. color: $text-color;
  841. display: flex;
  842. justify-content: flex-end;
  843. .money{
  844. color: #FF2A2A;
  845. font-size: $font-size-28;
  846. }
  847. .money-sign{
  848. font-size: $font-size-24;
  849. color: #FF2A2A;
  850. }
  851. }
  852. }
  853. .pros-product{
  854. width: 402rpx;
  855. height: 100%;
  856. line-height: 36rpx;
  857. font-size: $font-size-28;
  858. position: relative;
  859. .producttitle{
  860. width: 100%;
  861. display: inline-block;
  862. height: auto;
  863. text-overflow:ellipsis;
  864. display: -webkit-box;
  865. word-break: break-all;
  866. -webkit-box-orient: vertical;
  867. -webkit-line-clamp: 2;
  868. overflow: hidden;
  869. margin-bottom: 8rpx;
  870. .no-text{
  871. display: inline-block;
  872. height:36rpx;
  873. padding: 0 12rpx;
  874. line-height: 36rpx;
  875. background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
  876. border-radius:18rpx;
  877. text-align: center;
  878. color: #FFFFFF;
  879. font-size:$font-size-28;
  880. margin-right: 24rpx;
  881. }
  882. }
  883. .productspec{
  884. height: 36rpx;
  885. color: #999999;
  886. font-size: $font-size-26;
  887. }
  888. .productprice{
  889. height: 48rpx;
  890. position: absolute;
  891. width: 100%;
  892. bottom: 0;
  893. .price{
  894. line-height: 48rpx;
  895. font-size: $font-size-28;
  896. width: 48%;
  897. color: #FF2A2A;
  898. float: left;
  899. &.disabled{
  900. color: #999999;
  901. }
  902. .money-sign{
  903. font-size: $font-size-24;
  904. color: #FF2A2A;
  905. }
  906. }
  907. .count{
  908. height: 100%;
  909. float: right;
  910. position: relative;
  911. &.show{
  912. display: block;
  913. }
  914. &.none{
  915. display: none;
  916. }
  917. .count-tips{
  918. width: auto;
  919. display: inline-block;
  920. padding: 0 15rpx;
  921. line-height: 44rpx;
  922. height: 44rpx;
  923. border-radius: 22rpx;
  924. background: $btn-confirm;
  925. font-size: $font-size-24;
  926. text-align: center;
  927. color: #FFFFFF;
  928. position: absolute;
  929. top:-60rpx;
  930. left: -5rpx;
  931. z-index: 5;
  932. &::before{
  933. content: "";
  934. position: absolute;
  935. bottom: -30rpx;
  936. right: 15rpx;
  937. z-index:1;
  938. width: 0;
  939. height: 0;
  940. border-width: 18rpx;
  941. border-style: solid;
  942. border-color:$color-system transparent transparent transparent;
  943. }
  944. }
  945. .number-box{
  946. display: flex;
  947. justify-content: center;
  948. align-items: center;
  949. .iconfont{
  950. font-size: $font-size-24;
  951. padding:0 20rpx;
  952. color: $text-color;
  953. text-align: center;
  954. line-height: 48rpx;
  955. font-weight: bold;
  956. }
  957. .btn-input{
  958. width: 62rpx;
  959. height: 48rpx;
  960. line-height: 48rpx;
  961. background: #F8F8F8;
  962. border-radius: 4rpx;
  963. text-align: center;
  964. font-size: $font-size-24;
  965. }
  966. }
  967. .uni-numbox{
  968. position: absolute;
  969. left: 45rpx;
  970. bottom: 0;
  971. .uni-numbox-minus, .uni-numbox-plus{
  972. width: 50rpx;
  973. line-height: 40rpx;
  974. }
  975. .uni-numbox-value {
  976. font-size: $font-size-28;
  977. width: 60rpx;
  978. }
  979. }
  980. }
  981. }
  982. }
  983. }
  984. .failure-list{
  985. width: 702rpx;
  986. height: auto;
  987. padding: 0 24rpx;
  988. margin-top: 20rpx;
  989. background: #FFFFFF;
  990. .failure-title{
  991. width: 100%;
  992. height: 80rpx;
  993. line-height: 80rpx;
  994. font-size: $font-size-28;
  995. border-bottom: 1px solid #EBEBEB;
  996. .title-txt{
  997. float: left;
  998. color: $text-color;
  999. text-align: left;
  1000. }
  1001. .title-btn{
  1002. float: right;
  1003. color: $color-system;
  1004. text-align: right;
  1005. }
  1006. }
  1007. .productlist{
  1008. padding-top: 10rpx;
  1009. .goods-pros{
  1010. width: 100%;
  1011. height: auto;
  1012. padding: 20rpx 0;
  1013. }
  1014. .goods-pros-t{
  1015. display: flex;
  1016. align-items: center;
  1017. width: 100%;
  1018. height: 210rpx;
  1019. position: relative;
  1020. .checkbox-box{
  1021. padding: 10rpx;
  1022. }
  1023. .pros-img{
  1024. width: 210rpx;
  1025. height: 100%;
  1026. border-radius: 10rpx;
  1027. margin:0 20rpx;
  1028. border:1px solid #f3f3f3;
  1029. position: relative;
  1030. .img-tip{
  1031. display: block;
  1032. width: 72rpx;
  1033. height: 36rpx;
  1034. line-height: 36rpx;
  1035. font-size: $font-size-24;
  1036. text-align: center;
  1037. color: #FFFFFF;
  1038. border-radius: 10rpx 0 10rpx 0;
  1039. background:linear-gradient(34deg,rgba(255,149,42,1) 0%,rgba(225,86,22,1) 100%);
  1040. position: absolute;
  1041. left: 0;
  1042. top: 0;
  1043. }
  1044. image{
  1045. width: 100%;
  1046. height: 100%;
  1047. border-radius: 10rpx;
  1048. }
  1049. }
  1050. .pros-marks{
  1051. width: 722rpx; height: 250rpx;
  1052. z-index: 9;
  1053. background: rgba(0,0,0,.05);
  1054. position: absolute;
  1055. left:0;
  1056. top: -20rpx;
  1057. }
  1058. }
  1059. .goods-pros-b{
  1060. width:622rpx;
  1061. margin-left: 84rpx;
  1062. height: 40rpx;
  1063. padding:0 0 26rpx 0;
  1064. // border-top: 1px solid #EBEBEB;
  1065. &.show{
  1066. display: block;
  1067. }
  1068. &.none{
  1069. display: none;
  1070. }
  1071. .sum{
  1072. font-size: $font-size-28;
  1073. line-height: 40rpx;
  1074. color: $text-color;
  1075. display: flex;
  1076. justify-content: flex-end;
  1077. .money{
  1078. color: #FF2A2A;
  1079. font-size: $font-size-28;
  1080. }
  1081. .money-sign{
  1082. font-size: $font-size-24;
  1083. color: #FF2A2A;
  1084. }
  1085. }
  1086. }
  1087. .pros-product{
  1088. width: 402rpx;
  1089. height: 100%;
  1090. line-height: 36rpx;
  1091. font-size: $font-size-28;
  1092. position: relative;
  1093. .producttitle{
  1094. width: 100%;
  1095. display: inline-block;
  1096. height: auto;
  1097. text-overflow:ellipsis;
  1098. display: -webkit-box;
  1099. word-break: break-all;
  1100. -webkit-box-orient: vertical;
  1101. -webkit-line-clamp: 2;
  1102. overflow: hidden;
  1103. margin-bottom: 8rpx;
  1104. .no-text{
  1105. display: inline-block;
  1106. height:36rpx;
  1107. padding: 0 12rpx;
  1108. line-height: 36rpx;
  1109. background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
  1110. border-radius:18rpx;
  1111. text-align: center;
  1112. color: #FFFFFF;
  1113. font-size: $font-size-28;
  1114. margin-right: 24rpx;
  1115. }
  1116. }
  1117. .productspec{
  1118. height: 36rpx;
  1119. color: #999999;
  1120. font-size: $font-size-26;
  1121. }
  1122. .productstate{
  1123. font-size: $font-size-28;
  1124. height: 44rpx;
  1125. color: #FF2A2A;
  1126. position: absolute;
  1127. bottom: 0;
  1128. left: 0;
  1129. }
  1130. }
  1131. }
  1132. }
  1133. .footer{
  1134. width: 100%;
  1135. background-color: #FFFFFF;
  1136. height: 110rpx;
  1137. position: fixed;
  1138. bottom: 0rpx;
  1139. z-index: 10;
  1140. .footer-le{
  1141. width: 490rpx;
  1142. height: 100%;
  1143. padding:0 30rpx;
  1144. float: left;
  1145. .text{
  1146. font-weight: bold;
  1147. }
  1148. .foot-check{
  1149. width: 100rpx;
  1150. float: left;
  1151. line-height: 110rpx;
  1152. font-size: $font-size-24;
  1153. .checkbox{
  1154. width: 40rpx;
  1155. text-align: center;
  1156. }
  1157. .text{
  1158. width: 60rpx;
  1159. float: right;
  1160. }
  1161. }
  1162. .foot-check-delbtn{
  1163. float: left;
  1164. .delBtn{
  1165. margin: 0;
  1166. padding: 0;
  1167. display: flex;
  1168. flex-direction: column;
  1169. align-items: center;
  1170. box-sizing: border-box;
  1171. font-size: $font-size-24;
  1172. text-align: center;
  1173. text-decoration: none;
  1174. border-radius: 0;
  1175. -webkit-tap-highlight-color: transparent;
  1176. overflow: hidden;
  1177. background-color:#FFFFFF;
  1178. color: #FF2A2A;
  1179. padding: 0 24rpx;
  1180. display: flex;
  1181. justify-content: center;
  1182. align-items: center;
  1183. line-height: 110rpx;
  1184. font-weight: bold;
  1185. &.none{
  1186. display: none;
  1187. }
  1188. }
  1189. }
  1190. .sum{
  1191. font-size: $font-size-28;
  1192. line-height: 110rpx;
  1193. color: $text-color;
  1194. display: flex;
  1195. justify-content: flex-end;
  1196. .money{
  1197. color: #FF2A2A;
  1198. }
  1199. .money-sign{
  1200. font-size: $font-size-24;
  1201. color: #FF2A2A;
  1202. }
  1203. }
  1204. }
  1205. .footer-ri{
  1206. width: 200rpx;
  1207. height: 100%;
  1208. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  1209. float: right;
  1210. display: flex;
  1211. justify-content: space-between;
  1212. align-items: center;
  1213. z-index: 999;
  1214. &.none{
  1215. display: none;
  1216. }
  1217. .btn{
  1218. width: 200rpx;
  1219. height: 100%;
  1220. font-size: $font-size-28;
  1221. line-height: 110rpx;
  1222. color: #FFFFFF;
  1223. display: flex;
  1224. justify-content: center;
  1225. align-items: center;
  1226. }
  1227. }
  1228. .footer-del{
  1229. width: 400rpx;
  1230. height: 110rpx;
  1231. position: absolute;
  1232. padding-left: 200rpx;
  1233. background: #FFFFFF;
  1234. right: 0;
  1235. top: 0;
  1236. z-index: 1000;
  1237. &.show{
  1238. animation: showDelbtn 0s linear both;
  1239. }
  1240. &.none{
  1241. animation: hideDelbtn 0s linear both;
  1242. }
  1243. .btn{
  1244. width: 50%;
  1245. height: 100%;
  1246. line-height: 110rpx;
  1247. font-size: $font-size-28;
  1248. color: #FFFFFF;
  1249. text-align: center;
  1250. float: left;
  1251. }
  1252. .btn.btn-cancel{
  1253. background:#EEC1AB;
  1254. }
  1255. .btn.btn-confirm{
  1256. background:#FF2A2A;
  1257. }
  1258. @keyframes showDelbtn {
  1259. 0% {
  1260. transform: translateX(0);
  1261. }
  1262. 100% {
  1263. transform: translateX(-100%);
  1264. }
  1265. }
  1266. @keyframes hideDelbtn {
  1267. 0% {
  1268. transform: translateX(-100%);
  1269. }
  1270. 100% {
  1271. transform: translateX(0);
  1272. }
  1273. }
  1274. }
  1275. }
  1276. </style>