|
@@ -0,0 +1,1003 @@
|
|
|
+<template>
|
|
|
+ <view class="container cart clearfix">
|
|
|
+ <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="9"></tui-skeleton>
|
|
|
+ <view class="container-cart-main tui-skeleton">
|
|
|
+ <view v-if="!isEmpty" class="container-cart">
|
|
|
+ <scroll-view class="cart-content" scroll-y @scrolltolower="toLower">
|
|
|
+ <view class="goods-list">
|
|
|
+ <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
|
|
|
+ <view class="shoptitle">
|
|
|
+ <!--选择商店的全部商品 :disabled="isNnder"-->
|
|
|
+ <view class="checkbox-box">
|
|
|
+ <button class="checkbox iconfont"
|
|
|
+ :class="[item.checked ?'icon-gouxuanl':'icon-weigouxuan']"
|
|
|
+ @click.stop="checkShop(item)" :disabled="item.isDisabled && !isshowDelbtn">
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="text">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="productlist">
|
|
|
+ <view class="goods-pros"
|
|
|
+ v-for="(pros,idx) in item.productsList"
|
|
|
+ :key="idx"
|
|
|
+ >
|
|
|
+ <view class="goods-pros-t">
|
|
|
+ <!--选择商品-->
|
|
|
+ <view class="checkbox-box" :class="[pros.validFlag == '3' && !isshowDelbtn ?'disabled' : '']">
|
|
|
+ <button class="checkbox iconfont"
|
|
|
+ :disabled="pros.validFlag == '3' && !isshowDelbtn"
|
|
|
+ :class="[pros.productsChecked ?'icon-gouxuanl':'icon-weigouxuan']"
|
|
|
+ @click.stop="ischeck(item,pros,idx)">
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="pros-img" @click.stop="navToListPage(pros.productID)" ><image :src="pros.mainImage" alt="" /></view>
|
|
|
+ <view class="pros-product">
|
|
|
+ <view class="producttitle" @click.stop="navToListPage(pros.id)" >
|
|
|
+ <text v-if="pros.validFlag == '3'" class="no-text">商品已下架</text>{{pros.name}}
|
|
|
+ </view>
|
|
|
+ <view class="productspec">规格:{{pros.unit}}</view>
|
|
|
+ <view class="productprice">
|
|
|
+ <!--使用过滤器对总价改变-->
|
|
|
+ <view class="price"
|
|
|
+ :class="[pros.validFlag == '3' ?'disabled' : '']">
|
|
|
+ <text :class="[pros.validFlag == '3' ?'disabled' : 'money-sign']">¥</text>{{pros.retailPrice.toFixed(2)}}
|
|
|
+ </view>
|
|
|
+ <view class="count" v-if="pros.validFlag == '2'" :class="[isshowDelbtn ? 'none':'show']">
|
|
|
+ <view class="number-box">
|
|
|
+ <view class="iconfont icon-jianhao" :class="[pros.validFlag == '3'?'disabled':'']" @click="changeCountSub(item,pros)"></view>
|
|
|
+ <input class="btn-input" type="number" maxlength='4' v-model="pros.productCount" @blur="changeNnmber($event,item,pros)">
|
|
|
+ <view class="iconfont icon-jiahao" :class="[pros.validFlag == '3'?'disabled':'']" @click="changeCountAdd(item,pros)"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-pros-b" :class="[isshowDelbtn ? 'none':'show']" >
|
|
|
+ <view class="sum">合计:<text class="money"><text class="money-sign">¥</text>{{item.totalPrice.toFixed(2)}}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
|
|
|
+ <!--加载loadding-->
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 脚部菜单 -->
|
|
|
+ <view class="footer">
|
|
|
+ <view class="footer-le">
|
|
|
+ <view class="foot-check checkbox-box" @tap.stop="checkAll()">
|
|
|
+ <button class="checkbox iconfont" :class="[isCheckAll?'icon-gouxuan':'icon-weigouxuan']"></button>
|
|
|
+ <view class="text">全选</view>
|
|
|
+ </view>
|
|
|
+ <view class="foot-check-delbtn">
|
|
|
+ <button class="delBtn" @tap.stop="showDelManager">删除</button>
|
|
|
+ </view>
|
|
|
+ <view class="sum">总价:<text class="money-sign">¥</text><text class="money">{{allPrice.toFixed(2)}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view v-if="!isshowDelbtn" class="footer-ri" >
|
|
|
+ <view class="btn" @tap="toConfirmation">去结算({{allCount}})</view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="footer-del">
|
|
|
+ <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
|
|
|
+ <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="isEmpty" class="cart-content empty">
|
|
|
+ <view class="empty-container">
|
|
|
+ <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AWdWzAAGlgAP0das422.png" mode="aspectFit"></image>
|
|
|
+ <text class="error-text">购物车空空如也,快去商城逛逛吧~</text>
|
|
|
+ <view class="login-btn" @click="goIndex">去商城</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if='modallayer'></modal-layer>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
+ import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
|
|
|
+ import tuiNomore from "@/components/tui-components/nomore/nomore"
|
|
|
+ import modalLayer from "@/components/modal-layer"
|
|
|
+ import { mapState,mapMutations } from 'vuex';
|
|
|
+ import { queryShoppingCartList,shoppingCartUpdate,shoppingCartDelete } from "@/api/cart.js"
|
|
|
+
|
|
|
+ export default{
|
|
|
+ components:{
|
|
|
+ tuiSkeleton,
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore,
|
|
|
+ modalLayer
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ userID:'',
|
|
|
+ alertType:'',
|
|
|
+ isStock:'',
|
|
|
+ goodsList:[], //购物车的商品
|
|
|
+ delGoodsList:'',//要删除的商品
|
|
|
+ setGoodData:'', //确认订单的商品
|
|
|
+ isCheckAll:false,//是否全选
|
|
|
+ allPrice:0,//所有价格
|
|
|
+ allCount:0,//被选中的产品数量
|
|
|
+ isNnder:true,
|
|
|
+ isModallayer:false,
|
|
|
+ skeletonShow:true,
|
|
|
+ isshowDelbtn:false,
|
|
|
+ isDisabled: false, // 供应商/店铺全选是否禁用状态
|
|
|
+ isEmpty:false,//显示空购物车
|
|
|
+ scrollHeight: 'auto',
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ hasNextPage: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+ this.setScrollHeight();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin','userInfo'])
|
|
|
+ },
|
|
|
+ filters:{//单件商品的价格 × 数量
|
|
|
+ totalprice(val,count){
|
|
|
+ return (val * count).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initData(){
|
|
|
+ this.isModallayer = false //遮罩层 防止多次点击
|
|
|
+ this.skeletonShow = true //预加载圆圈
|
|
|
+ this.isCheckAll=false//是否全选
|
|
|
+ this.$api.getStorage().then((resolve) => {
|
|
|
+ this.userID = resolve.userID;
|
|
|
+ this.initGetCartGoodsList();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initLogin(){
|
|
|
+ this.$api.redirectTo('/pages/login/login-accont?type=4')
|
|
|
+ },
|
|
|
+ setScrollHeight() {
|
|
|
+ // 窗口高度-footer高度
|
|
|
+ const {windowHeight, pixelRatio} = uni.getSystemInfoSync();
|
|
|
+ setTimeout(()=> {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.selectAll('.footer').boundingClientRect();
|
|
|
+ query.exec(res => {
|
|
|
+ this.windowHeight = windowHeight;
|
|
|
+ if(res[0][0]) {
|
|
|
+ this.scrollHeight = windowHeight - res[0][0].height;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ initGetCartGoodsList(){//初始化购物车 index:1
|
|
|
+ let params = {userID:this.userID,pageNum:1,pageSize:this.pageSize}
|
|
|
+ queryShoppingCartList(params).then(response =>{
|
|
|
+ this.skeletonShow = false
|
|
|
+ this.$store.commit('updateAllNum',response.data.cartQuantity)
|
|
|
+ const resultsData = response.data.pageDate;
|
|
|
+ if(resultsData.results&&resultsData.results.length > 0){
|
|
|
+ this.isEmpty =false
|
|
|
+ this.hasNextPage = resultsData.hasNextPage;
|
|
|
+ this.goodsList = resultsData.results;
|
|
|
+ this.goodsList.forEach((item,index) => {
|
|
|
+ let productsListLength = item.productsList.length,
|
|
|
+ invalidLength = 0;
|
|
|
+ item.productsList.forEach(pros => {
|
|
|
+ pros.shopID = item.shopID;
|
|
|
+ if(pros.validFlag == '3') {invalidLength++;}
|
|
|
+ })
|
|
|
+ item.isDisabled = invalidLength === productsListLength;
|
|
|
+ })
|
|
|
+ this.pullFlag = false;
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ if(this.goodsList.length < 4){
|
|
|
+ this.pullUpOn = true
|
|
|
+ }else{
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.goodsList = [];
|
|
|
+ this.isEmpty =true
|
|
|
+ }
|
|
|
+ }).catch(response =>{
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOnReachBottomData(){//上拉加载
|
|
|
+ this.pageNum+=1
|
|
|
+ let params = {userID:this.userID,pageNum:this.pageNum,pageSize:this.pageSize}
|
|
|
+ queryShoppingCartList(params).then(response =>{
|
|
|
+ let resultsData = response.data.pageDate
|
|
|
+ this.hasNextPage = resultsData.hasNextPage;
|
|
|
+ this.goodsList = this.goodsList.concat(resultsData.results)
|
|
|
+ this.pullFlag = false;// 防上拉暴滑
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ }else{
|
|
|
+ this.loadding = false
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }).catch(response =>{
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ischeck(item,pro){//为未选中的时候改变为true,反之为true
|
|
|
+ pro.productsChecked = !pro.productsChecked;
|
|
|
+ this.updateProductCheckedAllBtn(item);
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+ },
|
|
|
+ updateProductCheckedAllBtn(item) {// 单独每个供应商的勾选判断
|
|
|
+ let productsList = item.productsList,
|
|
|
+ productsCheckedLength = 0,
|
|
|
+ disabledLength = 0;
|
|
|
+ if(this.isshowDelbtn) {
|
|
|
+ productsList.forEach(pros => {
|
|
|
+ if(pros.productsChecked) {
|
|
|
+ productsCheckedLength++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ productsList.forEach(pros => {
|
|
|
+ if(pros.productsChecked && pros.validFlag != '3') {
|
|
|
+ productsCheckedLength++;
|
|
|
+ }
|
|
|
+ if(pros.validFlag == '3') {
|
|
|
+ disabledLength++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ item.checked = productsCheckedLength === productsList.length - disabledLength;
|
|
|
+ },
|
|
|
+ updateCheckAllBtn() {// 全选勾选判断
|
|
|
+ let goodsCheckedLength = 0,
|
|
|
+ disabledListLength = 0,
|
|
|
+ goodsList = this.goodsList;
|
|
|
+ goodsList.forEach(item => {
|
|
|
+ if(item.checked) {
|
|
|
+ goodsCheckedLength++;
|
|
|
+ }
|
|
|
+ if(item.isDisabled && !this.isshowDelbtn) {
|
|
|
+ disabledListLength++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.isCheckAll = goodsCheckedLength === goodsList.length - disabledListLength;
|
|
|
+ },
|
|
|
+ checkShop(item){//与单选商品类似
|
|
|
+ item.checked = !item.checked;
|
|
|
+ this.setProductChecked(item);
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+ },
|
|
|
+ setProductChecked(item) {
|
|
|
+ let products = item.productsList;
|
|
|
+ products.forEach(pros=>{
|
|
|
+ if(item.checked) {
|
|
|
+ if(pros.validFlag =='3'){
|
|
|
+ // 无效
|
|
|
+ this.isNnder = true;
|
|
|
+ pros.productsChecked = this.isshowDelbtn ?true :false;
|
|
|
+ }else{
|
|
|
+ // 有效
|
|
|
+ this.isNnder = false;
|
|
|
+ pros.productsChecked = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ pros.productsChecked = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateBothCheckBtn() {
|
|
|
+ if(this.isshowDelbtn) {
|
|
|
+ // 当管理删除按钮出现时,失效的商品可被选择
|
|
|
+ this.goodsList.forEach((item)=>{
|
|
|
+ item.checked = this.isCheckAll;
|
|
|
+ this.setProductChecked(item);
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.goodsList.forEach((item)=>{
|
|
|
+ item.checked = this.isCheckAll && !item.isDisabled;
|
|
|
+ this.setProductChecked(item);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkAll(){//全选方法内调用方法
|
|
|
+ this.isCheckAll = !this.isCheckAll;
|
|
|
+ this.updateBothCheckBtn();
|
|
|
+ },
|
|
|
+ totalShopPeice(){//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
|
|
|
+ let prosPrice=0;
|
|
|
+ let validPrice =0;
|
|
|
+ let validList=[];
|
|
|
+ let productsList=[];
|
|
|
+ this.goodsList.map((item,index)=>{
|
|
|
+ productsList=item.productsList;
|
|
|
+ prosPrice=productsList.reduce((p,e)=>p+e.retailPrice*e.productCount,0);
|
|
|
+ productsList.forEach(pros =>{
|
|
|
+ if(pros.validFlag =='3'){
|
|
|
+ validList.push(pros)
|
|
|
+ validPrice = validList.reduce((p,e)=>p+e.retailPrice*e.productCount,0);
|
|
|
+ item.totalPrice = prosPrice - validPrice
|
|
|
+ }else{
|
|
|
+ item.totalPrice = prosPrice
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ totalPeice(){ //计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
|
|
|
+ this.allPrice = 0
|
|
|
+ let prosPrice=0;
|
|
|
+ let validPrice=0;
|
|
|
+ let validList =[];
|
|
|
+ let productsList =[];
|
|
|
+ this.goodsList.forEach((item,index)=>{
|
|
|
+ productsList=item.productsList;
|
|
|
+ productsList.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ prosPrice+=pros.retailPrice*pros.productCount;
|
|
|
+ if(pros.validFlag =='3'){
|
|
|
+ validList.push(pros)
|
|
|
+ validPrice = validList.reduce((p,e)=>p+e.retailPrice*e.productCount,0);
|
|
|
+ this.allPrice = prosPrice - validPrice
|
|
|
+ }else{
|
|
|
+ this.allPrice = prosPrice
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ totalCount(){//计算总数量
|
|
|
+ this.allCount = 0
|
|
|
+ let prosAllCount=0
|
|
|
+ let validCount = 0
|
|
|
+ let validList =[];
|
|
|
+ let productsList =[];
|
|
|
+ this.goodsList.forEach(item=>{
|
|
|
+ productsList = item.productsList
|
|
|
+ productsList.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ prosAllCount+=parseInt(pros.productCount);
|
|
|
+ if(pros.validFlag =='3'){
|
|
|
+ validList.push(pros)
|
|
|
+ validList.forEach(val =>{
|
|
|
+ validCount += val.productCount
|
|
|
+ })
|
|
|
+ this.allCount = prosAllCount - validCount
|
|
|
+ }else{
|
|
|
+ this.allCount = prosAllCount
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeCountAdd(item,pros){//商品数量加加
|
|
|
+ if(pros.productCount>=pros.stock){
|
|
|
+ pros.productCount= pros.stock
|
|
|
+ this.isStock =true
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ pros.productCount++
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ this.isStock =false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.updateShoppogNum(pros)
|
|
|
+ this.totalShopPeice();
|
|
|
+ },
|
|
|
+ changeCountSub(item,pros){//商品数量减减
|
|
|
+ if(pros.productCount<=pros.minBuyNumber){
|
|
|
+ pros.productCount= pros.minBuyNumber
|
|
|
+ this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`,2000);
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ pros.productCount--
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }
|
|
|
+ this.updateShoppogNum(pros)
|
|
|
+ this.totalShopPeice();
|
|
|
+ },
|
|
|
+ changeNnmber(e,item,pros){//输入商品数量更新
|
|
|
+ let _value = e.detail.value;
|
|
|
+ if(!this.$api.isNumber(_value)){
|
|
|
+ pros.productCount = pros.minBuyNumber
|
|
|
+ }else if(_value < pros.minBuyNumber){
|
|
|
+ this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`,2000);
|
|
|
+ pros.productCount = pros.minBuyNumber
|
|
|
+ }else{
|
|
|
+ pros.productCount = e.detail.value
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }
|
|
|
+ this.updateShoppogNum(pros)
|
|
|
+ this.totalShopPeice();
|
|
|
+ },
|
|
|
+ processActivityPrice(pros){//单独处理活动价格和阶梯价格
|
|
|
+ let ladderPriceList = pros.ladderPriceList;
|
|
|
+ if(pros.ladderPriceFlag == '0' || pros.actFlag == 1){
|
|
|
+ pros.retailPrice = pros.retailPrice
|
|
|
+ }else{
|
|
|
+ ladderPriceList.forEach((item,index)=>{
|
|
|
+ if(pros.productCount>=item.buyNum){
|
|
|
+ pros.retailPrice = item.buyPrice
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateShoppogNum(pros){//加减购物车商品更新到后台
|
|
|
+ let params ={userID:this.userID,productID:pros.productID,productCount:pros.productCount}
|
|
|
+ shoppingCartUpdate(params).then(response =>{
|
|
|
+ this.isshowDelbtn = false;
|
|
|
+ this.initGetCartGoodsList();
|
|
|
+ }).catch(response =>{
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toConfirmation(){//跳转确认订单页面
|
|
|
+ let setGoodsList=[];
|
|
|
+ this.goodsList.forEach(res=>{
|
|
|
+ let products = res.productsList
|
|
|
+ products.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ setGoodsList.push(pros.productID)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ if(setGoodsList == ''){
|
|
|
+ this.$util.msg("请先选择结算商品~",2000);
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ /**
|
|
|
+ * @获取勾选的商品ID拼接字符串逗号隔开,最后一个逗号去掉
|
|
|
+ * @获取勾选的商品分类ID拼接字符串格式逗号隔开,最后一个逗号去掉
|
|
|
+ */
|
|
|
+ let productID = '';
|
|
|
+ this.goodsList.forEach(el=>{
|
|
|
+ el.productsList.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ productID += pros.productID+','
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let cartPramsData={
|
|
|
+ allPrice:this.allPrice,
|
|
|
+ allCount:this.allCount,
|
|
|
+ productID:productID.substring(0,productID.lastIndexOf(',')),
|
|
|
+ productCount:''
|
|
|
+ }
|
|
|
+ this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({data:cartPramsData})}`)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setOrderGoods(){//本地获取勾选商品信息***暂时丢弃***
|
|
|
+ let setGoodData = {}
|
|
|
+ let prosPrice =0;
|
|
|
+ let prosCount =0;
|
|
|
+ let goodsArr = this.goodsList.map(el => {
|
|
|
+ el.productsList = el.productsList.filter(item => item.productsChecked)
|
|
|
+ prosPrice=el.productsList.reduce((p,e)=>p+e.retailPrice*e.productCount,0);
|
|
|
+ el.productsList.forEach(pros=>{
|
|
|
+ el.totalCount += pros.productCount;
|
|
|
+ })
|
|
|
+ el.totalPrice = prosPrice
|
|
|
+ return el
|
|
|
+ }).filter(el => el.productsList && el.productsList.length !==0);
|
|
|
+ setGoodData = {
|
|
|
+ allPrice:this.allPrice,
|
|
|
+ allCount:this.allCount,
|
|
|
+ goodList:goodsArr
|
|
|
+ }
|
|
|
+ return setGoodData
|
|
|
+ },
|
|
|
+ showDelManager(){//显示删除商品管理
|
|
|
+ this.isshowDelbtn = true;
|
|
|
+ this.isNnder = true;
|
|
|
+ if(this.isCheckAll) {
|
|
|
+ this.updateBothCheckBtn();
|
|
|
+ } else {
|
|
|
+ // 失效也被勾选
|
|
|
+ this.goodsList.forEach(item => {
|
|
|
+ if(item.checked) {
|
|
|
+ item.productsList.forEach(pros => {
|
|
|
+ pros.productsChecked = true;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hideDelManage(){//隐藏删除商品管理
|
|
|
+ this.isshowDelbtn = false;
|
|
|
+ if(this.isCheckAll) {
|
|
|
+ this.updateBothCheckBtn();
|
|
|
+ } else {
|
|
|
+ // 失效商品取消勾选
|
|
|
+ this.goodsList.forEach(item => {
|
|
|
+ if(item.isDisabled) {
|
|
|
+ item.checked = false;
|
|
|
+ }
|
|
|
+ item.productsList.forEach(pros => {
|
|
|
+ if(pros.validFlag == '3') {
|
|
|
+ pros.productsChecked = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteList(){//删除购物车商品
|
|
|
+ this.delGoodsList=[];
|
|
|
+ this.goodsList.forEach(delitem=>{
|
|
|
+ let products = delitem.productsList
|
|
|
+ products.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ this.delGoodsList += pros.productID+','
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // console.log(this.delGoodsList);
|
|
|
+ if(this.delGoodsList.length == 0){
|
|
|
+ this.$util.msg("请选择要删除的商品~",2000);
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ this.$util.modal('','确定删除选中的商品吗?','确定','取消',true,() =>{
|
|
|
+ shoppingCartDelete({userID:this.userID,productIDs:this.delGoodsList}).then(response =>{
|
|
|
+ console.log(response)
|
|
|
+ this.$util.msg('删除成功',2000);
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.isshowDelbtn = false;
|
|
|
+ this.initGetCartGoodsList();
|
|
|
+ },2000)
|
|
|
+ }).catch(response =>{
|
|
|
+ this.$util.msg(response.msg,2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goIndex(){
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/home/home'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goNavto(url){
|
|
|
+ uni.navigateTo ({
|
|
|
+ url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navToListPage(id){
|
|
|
+ this.isModallayer = true;
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{//深度监听所有数据,每次改变重新计算总价和总数
|
|
|
+ goodsList:{
|
|
|
+ deep:true,
|
|
|
+ handler(val,oldval){
|
|
|
+ this.totalPeice()
|
|
|
+ this.totalCount()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {//下拉刷新
|
|
|
+ this.initGetCartGoodsList()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ if(!this.hasLogin){
|
|
|
+ this.initLogin()
|
|
|
+ }else{
|
|
|
+ this.initData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ background: #f7f7f7;
|
|
|
+ }
|
|
|
+ .cart-content{
|
|
|
+ position: relative;
|
|
|
+ padding-bottom:74rpx;
|
|
|
+ }
|
|
|
+ .container-cart-main.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .container-cart-main.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .cart-content.empty.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .cart-content.empty.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .container-cart.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .container-cart.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .empty-container.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .empty-container.show{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .checkbox-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .checkbox{
|
|
|
+ display: flex;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 0;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color:#FFFFFF;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color:$color-system;
|
|
|
+ }
|
|
|
+ &.disabled{
|
|
|
+ .checkbox{
|
|
|
+ color:#999999
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-list{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ border-top: 1px solid #EBEBEB;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ .goods-item{
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .shoptitle{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
+ // border-bottom: 1px solid #EBEBEB;
|
|
|
+ line-height: 80rpx;
|
|
|
+ .checkbox-box{
|
|
|
+ margin-left: 18rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-left: 37rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-pros{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .goods-pros-t{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 217rpx;
|
|
|
+ padding:0 0 26rpx 0;
|
|
|
+ .checkbox-box{
|
|
|
+ margin-left: 22rpx;
|
|
|
+ }
|
|
|
+ .pros-img{
|
|
|
+ width: 210rpx;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin:0 26rpx 0 38rpx;
|
|
|
+ border:1px solid #f3f3f3;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-pros-b{
|
|
|
+ width:622rpx;
|
|
|
+ margin-left: 84rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ padding:0 0 26rpx 0;
|
|
|
+ // border-top: 1px solid #EBEBEB;
|
|
|
+ &.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: $text-color;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .money{
|
|
|
+ color: #FF2A2A;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pros-product{
|
|
|
+ width: 386rpx;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ position: relative;
|
|
|
+ .producttitle{
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ height: auto;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ .no-text{
|
|
|
+ display: inline-block;
|
|
|
+ height:36rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
|
|
|
+ border-radius:18rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .productspec{
|
|
|
+ height: 36rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .productprice{
|
|
|
+ height: 48rpx;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ .price{
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ width: 48%;
|
|
|
+ color: #FF2A2A;
|
|
|
+ float: left;
|
|
|
+ &.disabled{
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count{
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+ &.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .number-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .iconfont{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding:0 20rpx;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .btn-input{
|
|
|
+ width: 62rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #F8F8F8;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .uni-numbox{
|
|
|
+ position: absolute;
|
|
|
+ left: 45rpx;
|
|
|
+ bottom: 0;
|
|
|
+ .uni-numbox-minus, .uni-numbox-plus{
|
|
|
+ width: 50rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .uni-numbox-value {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ width: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer{
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ height: 110rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+ z-index: 10;
|
|
|
+ .footer-le{
|
|
|
+ width: 490rpx;
|
|
|
+ height: 100%;
|
|
|
+ padding:0 30rpx;
|
|
|
+ float: left;
|
|
|
+ .text{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .foot-check{
|
|
|
+ width: 100rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 110rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ .checkbox{
|
|
|
+ width: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ width: 60rpx;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .foot-check-delbtn{
|
|
|
+ float: left;
|
|
|
+ .delBtn{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 0;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color:#FFFFFF;
|
|
|
+ color: #FF2A2A;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 110rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 110rpx;
|
|
|
+ color: $text-color;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .money{
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-ri{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100%;
|
|
|
+ background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
|
|
|
+ float: right;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 999;
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100%;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 110rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-del{
|
|
|
+ width: 400rpx;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ padding-left: 200rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ &.show{
|
|
|
+ animation: showDelbtn 0s linear both;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ animation: hideDelbtn 0s linear both;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 110rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .btn.btn-cancel{
|
|
|
+ background:#EEC1AB;
|
|
|
+ }
|
|
|
+ .btn.btn-confirm{
|
|
|
+ background:#FF2A2A;
|
|
|
+ }
|
|
|
+ @keyframes showDelbtn {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes hideDelbtn {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|