<template> <view class="container"> <u-navbar title="购物车" bgColor="transparent"> <view class="u-nav-slot" slot="left"></view> <view class="u-nav-slot" slot="right" @tap="isManager = !isManager">管理</view> </u-navbar> <view class="bg"> <image src="@/static/images/shop/cart_bg.png"></image> </view> <view class="box"> <view class="item" v-for="(item,index) in cartList.valid" :key="item.attrId"> <view class="item-list" v-if="cartList.valid.length>0"> <view style="height: 1rpx;"></view> <view class="top"> <text class="shopName">{{item.storeName}}</text> </view> <view class="content"> <text :class="[reChecked(item)?'checkedIcon':'noCheckIcon']" @tap="reelect(item,index)" style="margin-left: 26rpx;"></text> <view class="image"> <image :src="item.image" style="border-radius: 10rpx;"></image> </view> <view class="detail" @tap="goDetail(item)"> <view class="name"> {{item.storeName}} </view> <view class="model"> {{item.storeName}} </view> <view class="price"> <u--text class="text" color="#E50202" mode="price" size="26" :text="item.price"></u--text> </view> </view> <!-- <view class="sum">x{{item.cartNum}}</view> --> <view class="numberBox"> <u-number-box v-model="cartNum" min="0"> <view @tap="ChangeCartCountJian(item,index)" slot="minus" class="minus"> <u-icon name="minus" size="12"></u-icon> </view> <text slot="input" style="width: 50px;text-align: center;" class="input">{{item.cartNum}}</text> <view slot="plus" class="plus" @tap="ChangeCartCountJia(item,index)"> <u-icon name="plus" color="#FFFFFF" size="12"></u-icon> </view> </u-number-box> </view> </view> </view> </view> <view class="item" style="width: 669rpx;height: 800rpx;background: transparent;" v-if="cartList.valid.length==0"> <u-empty width="669rpx" height="100%" marginTop="200rpx" mode="car"></u-empty> </view> </view> <view class="fixed" v-if="isManager"> <view class="all" @tap="allCheck"> <text :class="[isAllSelect?'checkedIcon':'noCheckIcon']"></text> <text>全选</text> </view> <view class="allPrice">合计 <u--text class="text" size="30" color="#E50202" mode="price" :text="priceAll"></u--text> </view> <view class="closeAll" @tap="subOrder">结算({{allCountval}})</view> </view> <view class="fixed" v-if="!isManager"> <view class="all" @tap="allCheck"> <text :class="[isAllSelect?'checkedIcon':'noCheckIcon']"></text> <text>全选</text> </view> <!-- <view class="collect">收藏</view> --> <view class="delAll" @tap="subDel">删除</view> </view> </view> </template> <script> let sysHeight = 0 import { getCartList, getCartCounts, changeCartNum, cartDel, getResetCart } from '@/api/order.js'; import Vue from 'vue' import { getProductHot, collectAll, getProductDetail } from '@/api/store.js'; import { toLogin } from '@/libs/login.js'; import { mapGetters } from "vuex"; import recommend from '@/components/recommend'; import productWindow from '@/components/productWindow'; // #ifdef MP import authorize from '@/components/Authorize'; import { login } from '../../api/public'; // #endif export default { components: { recommend, productWindow, // #ifdef MP authorize // #endif }, data() { return { cartCount: 0, goodsHidden: false, footerswitch: true, hostProduct: [], cartList: { valid: [], invalid: [] }, cartNum: 0, isManager: true, isAllSelect: false, //全选 selectValue: [], //选中的数据 selectCountPrice: 0.00, isAuto: false, //没有授权的不会自动授权 isShowAuth: false, //是否隐藏授权 hotScroll: false, hotPage: 1, value: '', radiolist1: [{ name: '全选', disabled: false }], checkboxValue1: [], // 基本案列数据 checkboxList1: [{ firmId: 101, firmName: '商铺名称', selectedAll: false, goods: [{ id: 1, img: '@/static/images/shop/shoes.png', name: '商品标题1', spec: '规格:S码', price: 127.5, number: 1, selected: false }, { id: 2, img: '@/static/images/shop/shoes.png', name: '标商品标题商品标题商品标', spec: '规格:S码', price: 2.5, number: 2, selected: false }] }, ], hotLimit: 10, loading: false, loadend: false, loadTitle: '加载更多', //提示语 page: 1, limit: 20, loadingInvalid: false, loadendInvalid: false, loadTitleInvalid: '加载更多', //提示语 pageInvalid: 1, priceAll: 0, limitInvalid: 20, attr: { cartAttr: false, productAttr: [], productSelect: {} }, productValue: [], //系统属性 productInfo: {}, attrValue: '', //已选属性 attrTxt: '请选择', //属性页面提示 cartId: 0, product_id: 0, sysHeight: sysHeight, canShow: false }; }, computed: { ...mapGetters(['isLogin', 'uid']), reChecked() { return item => { return item.checked } }, allSelectval() { let count = 0 this.cartList.valid.forEach(item => { if (item.checked) { count += 1 } }) if (count == this.cartList.valid.length) { return true } else { return false } }, allCountval() { this.priceAll = 0 let count = 0 this.cartList.valid.forEach(item => { let price = 0 if (item.checked) { count += 1 price = item.price * item.cartNum this.priceAll = this.priceAll + price } }) return count } }, onLoad: function(options) { let that = this; console.log(that.isAllSelect, 'isAllselect') that.cartList.valid.forEach((item, index) => { if (!item.checked) { that.isAllSelect = false return } }) if (that.isLogin == false) { toLogin(); } }, onShow: function() { this.canShow = false if (this.isLogin == true) { this.hotPage = 1; this.hostProduct = [], this.hotScroll = false, this.loadend = false; this.page = 1; this.cartList.valid = []; this.getCartList(); this.loadendInvalid = false; this.pageInvalid = 1; this.cartList.invalid = []; this.getInvalidList(); //this.getCartNum(); this.footerswitch = true; this.hotScroll = false; this.hotPage = 1; this.hotLimit = 10; this.cartList = { valid: [], invalid: [] }, this.isAllSelect = false; //全选 this.selectValue = []; //选中的数据 this.selectCountPrice = 0.00; this.cartCount = 0; this.isShowAuth = false; }; }, methods: { // 商品详情页跳转 goDetail(item) { if (item.activityH5 && item.activityH5.type === "2" && !this.isLogin) { toLogin(); } else { uni.navigateTo({ url: `/pages/goods_details/index?id=${item.productId}` }) } }, // 全选 allCheck() { this.isAllSelect = !this.isAllSelect if (this.isAllSelect) { this.cartList.valid.forEach((item, index) => { item.checked = true Vue.set(this.cartList.valid, index, item) Vue.set(this.cartList, 'valid', this.cartList.valid) }) } else { this.cartList.valid.forEach((item, index) => { this.priceAll = 0 item.checked = false Vue.set(this.cartList.valid, index, item) Vue.set(this.cartList, 'valid', this.cartList.valid) }) } }, // 购物车重选 reelect(item, index) { console.log(item, 'item哇') // let reCheck = { // id: item.id, // num: item.cartNum+2, // productId: item.productId, // unique: item.productAttrUnique // } // getResetCart(reCheck).then(res=> { // console.log('重选成功') // }) this.allCountval item.checked = !item.checked // this.priceAll -= item.price * item.cartNum Vue.set(this.cartList.valid, index, item) Vue.set(this.cartList, 'valid', this.cartList.valid) }, //购物车商品数量增加 ChangeCartCountJia(item, index) { item.cartNum += 1 console.log(item, 'jiajiajia') changeCartNum(item.id, item.cartNum).then(res => { Vue.set(this.cartList.valid, index, item) Vue.set(this.cartList, 'valid', this.cartList.valid) }) }, // 购物车商品数量减少 ChangeCartCountJian(item, index) { item.cartNum -= 1 changeCartNum(item.id, item.cartNum).then(res => { Vue.set(this.cartList.valid, index, item) Vue.set(this.cartList, 'valid', this.cartList.valid) }) }, // 授权关闭 authColse: function(e) { this.isShowAuth = e; }, // 修改购物车 reGoCat: function() { let that = this, productSelect = that.productValue[this.attrValue]; //如果有属性,没有选择,提示用户选择 if ( that.attr.productAttr.length && productSelect === undefined ) return that.$util.Tips({ title: "产品库存不足,请选择其它" }); let q = { id: that.cartId, productId: that.product_id, num: that.attr.productSelect.cart_num, unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : that.productInfo.id }; getResetCart(q) .then(function(res) { that.attr.cartAttr = false; that.$util.Tips({ title: "添加购物车成功", success: () => { that.loadend = false; that.page = 1; that.cartList.valid = []; that.getCartList(); that.getCartNum(); } }); }) .catch(res => { return that.$util.Tips({ title: res }); }); }, onMyEvent: function() { this.$set(this.attr, 'cartAttr', false); }, reElection: function(item) { this.getGoodsDetails(item) }, /** * 获取产品详情 * */ getGoodsDetails: function(item) { uni.showLoading({ title: '加载中', mask: true }); let that = this; that.cartId = item.id; that.product_id = item.productId; getProductDetail(item.productId).then(res => { uni.hideLoading(); that.attr.cartAttr = true; let productInfo = res.data.productInfo; that.$set(that, 'productInfo', productInfo); that.$set(that.attr, 'productAttr', res.data.productAttr); that.$set(that, 'productValue', res.data.productValue); that.DefaultSelect(); }).catch(err => { uni.hideLoading(); }) }, /** * 属性变动赋值 * */ ChangeAttr: function(res) { let productSelect = this.productValue[res]; if (productSelect && productSelect.stock > 0) { this.$set(this.attr.productSelect, "image", productSelect.image); this.$set(this.attr.productSelect, "price", productSelect.price); this.$set(this.attr.productSelect, "stock", productSelect.stock); this.$set(this.attr.productSelect, "unique", productSelect.id); this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this, "attrValue", res); this.$set(this, "attrTxt", "已选择"); } else { this.$set(this.attr.productSelect, "image", this.productInfo.image); this.$set(this.attr.productSelect, "price", this.productInfo.price); this.$set(this.attr.productSelect, "stock", 0); this.$set(this.attr.productSelect, "unique", this.productInfo.id); this.$set(this.attr.productSelect, "cart_num", 0); this.$set(this, "attrValue", ""); this.$set(this, "attrTxt", "请选择"); } }, /** * 默认选中属性 * */ DefaultSelect: function() { let productAttr = this.attr.productAttr; let value = []; for (let key in this.productValue) { if (this.productValue[key].stock > 0) { value = this.attr.productAttr.length ? key.split(",") : []; break; } } for (let i = 0; i < productAttr.length; i++) { this.$set(productAttr[i], "index", value[i]); } //sort();排序函数:数字-英文-汉字; let productSelect = this.productValue[value.sort().join(",")]; if (productSelect && productAttr.length) { this.$set( this.attr.productSelect, "storeName", this.productInfo.storeName ); this.$set(this.attr.productSelect, "image", productSelect.image); this.$set(this.attr.productSelect, "price", productSelect.price); this.$set(this.attr.productSelect, "stock", productSelect.stock); this.$set(this.attr.productSelect, "unique", productSelect.id); this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this, "attrValue", value.sort().join(",")); this.$set(this, "attrTxt", "已选择"); } else if (!productSelect && productAttr.length) { this.$set( this.attr.productSelect, "storeName", this.productInfo.storeName ); this.$set(this.attr.productSelect, "image", this.productInfo.image); this.$set(this.attr.productSelect, "price", this.productInfo.price); this.$set(this.attr.productSelect, "stock", 0); this.$set(this.attr.productSelect, "unique", this.productInfo.id); this.$set(this.attr.productSelect, "cart_num", 0); this.$set(this, "attrValue", ""); this.$set(this, "attrTxt", "请选择"); } else if (!productSelect && !productAttr.length) { this.$set( this.attr.productSelect, "storeName", this.productInfo.storeName ); this.$set(this.attr.productSelect, "image", this.productInfo.image); this.$set(this.attr.productSelect, "price", this.productInfo.price); this.$set(this.attr.productSelect, "stock", this.productInfo.stock); this.$set( this.attr.productSelect, "unique", this.productInfo.id || "" ); this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this, "attrValue", ""); this.$set(this, "attrTxt", "请选择"); } }, attrVal(val) { this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val .indexn]); }, /** * 购物车数量加和数量减 * */ ChangeCartNum: function(changeValue) { //changeValue:是否 加|减 //获取当前变动属性 let productSelect = this.productValue[this.attrValue]; //如果没有属性,赋值给商品默认库存 if (productSelect === undefined && !this.attr.productAttr.length) productSelect = this.attr.productSelect; //无属性值即库存为0;不存在加减; if (productSelect === undefined) return; let stock = productSelect.stock || 0; let num = this.attr.productSelect; if (changeValue) { num.cart_num++; if (num.cart_num > stock) { this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1); this.$set(this, "cart_num", stock ? stock : 1); } } else { num.cart_num--; if (num.cart_num < 1) { this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this, "cart_num", 1); } } }, /** * 购物车手动填写 * */ iptCartNum: function(e) { this.$set(this.attr.productSelect, 'cart_num', e); }, subDel: function(event) { let selectValue = [] this.cartList.valid.forEach(item => { if (item.checked && (selectValue.indexOf(item.id) < 0)) { selectValue.push(item.id) } }) console.log(selectValue, '000000') this.selectValue = selectValue let that = this if (selectValue.length > 0) cartDel(selectValue).then(res => { that.loadend = false; that.page = 1; that.cartList.valid = []; that.getCartList(); that.getCartNum(); }); else return that.$util.Tips({ title: '请选择产品' }); }, getSelectValueProductId: function() { let that = this; let validList = that.cartList.valid; let selectValue = that.selectValue; let productId = []; if (selectValue.length > 0) { for (let index in validList) { if (that.inArray(validList[index].id, selectValue)) { productId.push(validList[index].productId); } } }; return productId; }, subCollect: function(event) { let that = this selectValue = that.selectValue; if (selectValue.length > 0) { let selectValueProductId = that.getSelectValueProductId(); collectAll(that.getSelectValueProductId()).then(res => { return that.$util.Tips({ title: '收藏成功', icon: 'success' }); }).catch(err => { return that.$util.Tips({ title: err }); }); } else { return that.$util.Tips({ title: '请选择产品' }); } }, // 立即下单 subOrder: function(event) { let selectValue = [] this.cartList.valid.forEach(item => { console.log(item, 99999999) if (item.checked && (selectValue.indexOf(item.id) < 0)) { selectValue.push(item.id) } }) this.selectValue = selectValue let that = this if (selectValue.length > 0) { that.getPreOrder(); } else { return that.$util.Tips({ title: '请选择产品' }); } }, /** * 预下单 */ getPreOrder: function() { let shoppingCartId = this.selectValue.map(item => { return { "shoppingCartId": Number(item) } }) this.$Order.getPreOrder("shoppingCart", shoppingCartId); }, checkboxAllChange: function(event) { let value = event.detail.value; if (value.length > 0) { this.setAllSelectValue(1) } else { this.setAllSelectValue(0) } }, setAllSelectValue: function(status) { let that = this; let selectValue = []; let valid = that.cartList.valid; if (valid.length > 0) { let newValid = valid.map(item => { if (status) { if (that.footerswitch) { if (item.attrStatus) { item.checked = true; selectValue.push(item.id); } else { item.checked = false; } } else { item.checked = true; selectValue.push(item.id); } that.isAllSelect = true; } else { item.checked = false; that.isAllSelect = false; } return item; }); that.$set(that.cartList, 'valid', newValid); that.selectValue = selectValue; that.switchSelect(); } }, checkboxChange: function(event) { let that = this; let value = event.detail.value; let valid = that.cartList.valid; let arr1 = []; let arr2 = []; let arr3 = []; let newValid = valid.map(item => { if (that.inArray(item.id, value)) { if (that.footerswitch) { if (item.attrStatus) { item.checked = true; arr1.push(item); } else { item.checked = false; } } else { item.checked = true; arr1.push(item); } } else { item.checked = false; arr2.push(item); } return item; }); if (that.footerswitch) { arr3 = arr2.filter(item => !item.attrStatus); } that.$set(that.cartList, 'valid', newValid); // let newArr = that.cartList.valid.filter(item => item.attrStatus); that.isAllSelect = newValid.length === arr1.length + arr3.length; that.selectValue = value; that.switchSelect(); }, inArray: function(search, array) { for (let i in array) { if (array[i] == search) { return true; } } return false; }, switchSelect: function() { let that = this; let validList = that.cartList.valid; let selectValue = that.selectValue; let selectCountPrice = 0.00; if (selectValue.length < 1) { that.selectCountPrice = selectCountPrice; } else { for (let index in validList) { if (that.inArray(validList[index].id, selectValue)) { selectCountPrice = that.$util.$h.Add(selectCountPrice, that.$util.$h.Mul(validList[index] .cartNum, validList[ index].price)) } } that.selectCountPrice = selectCountPrice; } }, /** * 购物车手动填写 * */ iptCartNum: function(index) { let item = this.cartList.valid[index]; if (item.cartNum) { this.setCartNum(item.id, item.cartNum); } this.switchSelect(); }, blurInput: function(index) { let item = this.cartList.valid[index]; if (!item.cartNum) { item.cartNum = 1; this.$set(this.cartList, 'valid', this.cartList.valid) } }, subCart: function(index) { let that = this; let status = false; let item = that.cartList.valid[index]; item.cartNum = Number(item.cartNum) - 1; if (item.cartNum < 1) status = true; if (item.cartNum <= 1) { item.cartNum = 1; item.numSub = true; } else { item.numSub = false; item.numAdd = false; } if (false == status) { that.setCartNum(item.id, item.cartNum, function(data) { that.cartList.valid[index] = item; that.switchSelect(); that.getCartNum(); }); } }, addCart: function(index) { let that = this; let item = that.cartList.valid[index]; item.cartNum = Number(item.cartNum) + 1; let productInfo = item; if (item.cartNum >= item.stock) { item.cartNum = item.stock; item.numAdd = true; item.numSub = false; } else { item.numAdd = false; item.numSub = false; } that.setCartNum(item.id, item.cartNum, function(data) { that.cartList.valid[index] = item; that.switchSelect(); that.getCartNum(); }); }, setCartNum(cartId, cartNum, successCallback) { let that = this; changeCartNum(cartId, cartNum).then(res => { successCallback && successCallback(res.data); }); }, getCartNum: function() { let that = this; getCartCounts(true, 'sum').then(res => { that.cartCount = res.data.count; }); }, getCartData(data) { return new Promise((resolve, reject) => { getCartList(data).then((res) => { resolve(res.data); }).catch(function(err) { this.loading = false; this.canShow = true; this.$util.Tips({ title: err }); }) }); }, async getCartList() { // uni.showLoading({ // title: '加载中', // mask: true // }); let that = this; let data = { page: that.page, limit: that.limit, isValid: true } getCartCounts(true, 'sum').then(async c => { that.cartCount = c.data.count; if (c.data.count === 0) that.getHostProduct(); for (let i = 0; i < Math.ceil(that.cartCount / that.limit); i++) { let cartList = await this.getCartData(data); console.log(cartList, 'cartlist'); let valid = cartList.list; // let validList = that.$util.SplitArray(valid, that.cartList.valid); console.log(valid, 'that.cartList0') let numSub = [{ numSub: true }, { numSub: false }]; let numAdd = [{ numAdd: true }, { numAdd: false }], selectValue = []; // if (validList.length > 0) { // for (let index in validList) { // if (validList[index].cartNum == 1) { // validList[index].numSub = true; // } else { // validList[index].numSub = false; // } // let productInfo = validList[index]; // let stock = validList[index].stock ? validList[index].stock : 0; // if (validList[index].cartNum == stock) { // validList[index].numAdd = true; // } else if (validList[index].cartNum == validList[index].stock) { // validList[index].numAdd = true; // } else { // validList[index].numAdd = false; // } // if (validList[index].attrStatus) { // validList[index].checked = true; // selectValue.push(validList[index].id); // } else { // validList[index].checked = false; // } // } // } // that.$set(that.cartList, 'valid', validList); that.$set(that.cartList, 'valid', valid); data.page += 1; that.selectValue = selectValue; console.log(that.cartList, 'that.cartList') let newArr = valid.filter(item => item.attrStatus); that.isAllSelect = newArr.length == selectValue.length && newArr.length; that.loading = false; that.canShow = true; uni.hideLoading(); that.switchSelect(); } }); }, getInvalidList: function() { let that = this; if (this.loadendInvalid) return false; if (this.loadingInvalid) return false; let data = { page: that.pageInvalid, limit: that.limitInvalid, isValid: false } getCartList(data).then(res => { let invalid = res.data.list, loadendInvalid = invalid.length < that.limitInvalid; let invalidList = that.$util.SplitArray(invalid, that.cartList.invalid); that.$set(that.cartList, 'invalid', invalidList); console.log(that.cartList, 'sssss') that.loadendInvalid = loadendInvalid; that.loadTitleInvalid = loadendInvalid ? '我也是有底线的' : '加载更多'; that.pageInvalid = that.pageInvalid + 1; that.loadingInvalid = false; //if(invalid.length===0) that.getHostProduct(); }).catch(res => { that.loadingInvalid = false; that.loadTitleInvalid = '加载更多'; }) }, getHostProduct: function() { let that = this; if (that.hotScroll) return getProductHot( that.hotPage, that.hotLimit, ).then(res => { that.hotPage++ that.hotScroll = res.data.list.length < that.hotLimit that.hostProduct = that.hostProduct.concat(res.data.list) }); }, goodsOpen: function() { let that = this; that.goodsHidden = !that.goodsHidden; }, manage: function() { let that = this; that.footerswitch = !that.footerswitch; let arr1 = []; let arr2 = []; let newValid = that.cartList.valid.map(item => { if (that.footerswitch) { if (item.attrStatus) { if (item.checked) { arr1.push(item.id); } } else { item.checked = false; arr2.push(item); } } else { if (item.checked) { arr1.push(item.id); } } return item; }); that.cartList.valid = newValid; console.log(that.cartList.valid, 'that.cartList.valid') if (that.footerswitch) { that.isAllSelect = newValid.length === arr1.length + arr2.length; } else { that.isAllSelect = newValid.length === arr1.length; } that.selectValue = arr1; that.switchSelect(); }, unsetCart: function() { let that = this, ids = []; for (let i = 0, len = that.cartList.invalid.length; i < len; i++) { ids.push(that.cartList.invalid[i].id); } cartDel(ids).then(res => { that.$util.Tips({ title: '清除成功' }); that.$set(that.cartList, 'invalid', []); that.getHostProduct(); }).catch(res => { }); } }, onReachBottom() { let that = this; if (that.loadend) { that.getInvalidList(); } if (that.cartList.valid.length == 0 && that.cartList.invalid.length == 0 && this.hotPage != 1) { that.getHostProduct(); } } } </script> <style scoped lang="scss"> .container { position: relative; width: 100%; height: calc(100vh - 50px); // overflow: hidden; .bg { width: 100%; height: 100%; z-index: 0; image { width: 100%; height: 100%; // overflow: hidden; object-fit: cover; } } .box { position: absolute; top: 167rpx; width: 100%; height: 1000rpx; overflow: scroll; .item { margin-top: 20rpx; margin-left: 40rpx; width: 669rpx; background: #fff; border-radius: 20rpx; z-index: 1; .checkedIcon { display: inline-block; width: 34rpx; height: 34rpx; background: url(@/static/images/shop/checked.png); background-size: 100% 100%; } .noCheckIcon { display: inline-block; width: 34rpx; height: 34rpx; background: url(@/static/images/shop/nochecked.png); background-size: 100% 100%; } .top { margin-left: 25rpx; margin-top: 19rpx; display: flex; align-items: center; .shopName { display: inline-block; width: 240rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 40rpx; line-height: 28rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 400; color: #000000; } } .content { position: relative; margin-top: 10rpx; width: 100%; height: 150rpx; display: flex; align-items: center; image { margin-left: 34rpx; width: 111rpx; height: 98rpx; border-radius: 20rpx; } .detail { margin-top: -10rpx; margin-left: 25rpx; .name { width: 400rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 26rpx; font-family: PingFang SC; font-weight: 400; color: #000000; } .model { width: 300rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 10rpx 0; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: #B7B7B7; } .price { font-size: 26rpx; font-family: PingFang SC; font-weight: 400; color: #E94343; } } .sum { position: absolute; bottom: 29rpx; right: 32rpx; width: 50rpx; height: 50rpx; line-height: 50rpx; text-align: center; font-size: 26rpx; font-family: PingFang SC; font-weight: 400; color: #FD491F; border: 1px solid #FD491F; border-radius: 10rpx; } .numberBox { position: absolute; bottom: 16rpx; right: 30rpx; .minus { width: 44rpx; height: 44rpx; border-width: 1px; border-color: #E6E6E6; border-style: solid; border-top-left-radius: 200rpx; border-top-right-radius: 200rpx; border-bottom-left-radius: 200rpx; border-bottom-right-radius: 200rpx; @include flex; justify-content: center; align-items: center; } .input { width: 50rpx !important; padding: 0 10rpx; } .plus { width: 44rpx; height: 44rpx; background-color: #FF0000; border-radius: 50%; /* #ifndef APP-NVUE */ display: flex; /* #endif */ justify-content: center; align-items: center; } } } } } .fixed { position: absolute; bottom: 10rpx; width: 100%; height: 110rpx; background: #fff; .all { position: absolute; top: 35rpx; left: 42rpx; display: flex; align-items: center; font-size: 35rpx; .checkedIcon { display: inline-block; width: 34rpx; height: 34rpx; background: url(@/static/images/shop/checked.png); background-size: 100% 100%; } .noCheckIcon { display: inline-block; width: 34rpx; height: 34rpx; background: url(@/static/images/shop/nochecked.png); background-size: 100% 100%; } text { font-size: 26rpx; font-family: PingFang SC; font-weight: 400; margin-right: 10rpx; color: #000000; } } .allPrice { position: absolute; right: 222rpx; top: 34rpx; display: flex; font-size: 26rpx; font-family: PingFang SC; font-weight: 400; color: #000000; .text { font-size: 30rpx; font-family: PingFang SC; font-weight: 400; } } .collect { position: absolute; right: 209rpx; top: 23rpx; width: 155rpx; height: 57rpx; line-height: 57rpx; text-align: center; font-size: 30rpx; font-family: PingFang SC; font-weight: 400; color: #EF2461; background: #FFF1F5; border: 1px solid #EF2462; border-radius: 28rpx; } .closeAll { position: absolute; right: 20rpx; top: 23rpx; text-align: center; width: 170rpx; height: 56rpx; line-height: 56rpx; background: linear-gradient(0deg, #EE1C5D 0%, #FF6486 100%); border-radius: 28rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 400; color: #FFFFFF; } .delAll { position: absolute; right: 20rpx; top: 23rpx; text-align: center; width: 170rpx; height: 56rpx; line-height: 56rpx; background: linear-gradient(0deg, #FC0607 0%, #FF1C1C 100%); border-radius: 28rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 400; color: #FFFFFF; } } } </style>