crmeb在普通列表页直接添加到购物车及规格选择

产品列表添加购物车按钮及数量加减

<view v-if="item.stock>0" class="bottom">
	<view class="iconfont icon-gouwuche6 acea-row row-center-wrapper" v-if="item.activity && (item.activity.type === '1' || item.activity.type === '2' || item.activity.type === '3')"></view>
	<view v-else>
		<!-- 多规格 -->
		<view class="bnt iconfont icon-gouwuche6 acea-row row-center-wrapper" @click.stop="goCartDuo(item)" v-if="item.spec_type">
			<view class="num" v-if="isLogin && item.cart_num">{{item.cart_num}}</view>
		</view>
		<!-- 单规格 -->
		<view class="iconfont icon-gouwuche6 acea-row row-center-wrapper" v-if="!item.spec_type && !item.cart_num" @click.stop="goCartDan(item,index)"></view>
		<view class="cart acea-row row-middle" v-if="!item.spec_type && item.cart_num">
			<view class="pictrue iconfont icon-jianhao acea-row row-center-wrapper" @click.stop="ChangeCartNumDan(false,index,item)"></view>
			<view class="num">{{item.cart_num}}</view>
			<view class="pictrue iconfont icon-jiahao acea-row row-center-wrapper" @click.stop="ChangeCartNumDan(true,index,item)"></view>
		</view>
	</view>
</view>

用到的弹窗选择属性及购物车按钮组件

<productWindow :attr="attr" :isShow='1' :iSplus='1' :iScart='1'  @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
     @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal" @iptCartNum="iptCartNum" @goCat="goCatNum" id='product-window'>
</productWindow>
<c_artNum  :cartCount="cartCount"></c_artNum>

引入组件

data里新加的变量

attr: {
    cartAttr: false,
    productAttr: [],
    productSelect: {}
},
productValue: [],
attrValue: '', //已选属性
storeName: '', //多属性产品名称
id: 0,
cartData: {
    cartList: [],
    iScart: false
},
cartCount: 10,
totalPrice: 0.00,
lengthCart: 0

onload里先获取购物车产品数量

购物车相关methods

// 点击默认单属性购物车
goCartDan(item, index) {
    if (!this.isLogin) {
        this.getIsLogin();
    } else {
        this.tempArr[index].cart_num = 1;
        this.$set(this, 'tempArr', this.tempArr);
        this.goCat(0, item.id, 1);
    }
},
// 改变单属性购物车
ChangeCartNumDan(changeValue, index, item) {

    console.log( this.tempArr)
    let num = this.tempArr[index];
    let stock = this.tempArr[index].stock;
    this.ChangeCartNum(changeValue, num, stock, 0, item.id);

},

goCartDuo(item) {
    if (!this.isLogin) {
        this.getIsLogin();
    } else {
        uni.showLoading({
            title: '加载中'
        });
        this.storeName = item.store_name;
        this.getAttrs(item.id);
        this.$set(this, 'id', item.id);
        this.$set(this.attr, 'cartAttr', true);
    }
},

// 商品详情接口；
getAttrs(id) {
    let that = this;
    getAttr(id, 0).then(res => {
        uni.hideLoading();
        that.$set(that.attr, 'productAttr', res.data.productAttr);
        that.$set(that, 'productValue', res.data.productValue);
        that.DefaultSelect();
    })
},

/**
 * 默认选中属性
 * 
 */
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.join(",")];
    if (productSelect && productAttr.length) {
        this.$set(
            this.attr.productSelect,
            "store_name",
            this.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.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", value.join(","));
    } else if (!productSelect && productAttr.length) {
        this.$set(
            this.attr.productSelect,
            "store_name",
            this.storeName
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
    } else if (!productSelect && !productAttr.length) {
        this.$set(
            this.attr.productSelect,
            "store_name",
            this.storeName
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
        this.$set(
            this.attr.productSelect,
            "unique",
            this.storeInfo.unique || ""
        );
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", "");
    }
},
/**
 * 属性变动赋值
 * 
 */
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.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", res);
    } else {
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
    }
},
attrVal(val) {
    this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
},

// 购物车加减计算函数
ChangeCartNum(changeValue, num, stock, isDuo, id,index,cart) {
    console.log(changeValue, num, stock, isDuo, id)


    if (changeValue) {
        num.cart_num++;
        if (num.cart_num > stock) {
            if (isDuo) {
                this.$set(this.attr.productSelect, "cart_num", stock ? stock : 1);
                this.$set(this, "cart_num", stock ? stock : 1);
            } else {
                num.cart_num = stock ? stock : 0;
                this.$set(this, 'tempArr', this.tempArr);
                this.$set(this.cartData, 'cartList', this.cartData.cartList);
            }
            return this.$util.Tips({
                title: "该产品没有更多库存了"
            });
        } else {
            if (!isDuo) {
                if(cart){
                    this.goCat(0, id, 1,1,num.product_attr_unique);
                    this.getTotalPrice();
                }else{
                    this.goCat(0, id, 1);
                }
            }
        }
    } else {
        num.cart_num--;
        if(num.cart_num == 0){
            this.cartData.cartList.splice(index,1);
            if(isDuo){
                this.$set(this.attr.productSelect, "cart_num", 1);
                this.$set(this, "cart_num", 1);
            }
        }
        if (num.cart_num < 0) {
            if (isDuo) {
                this.$set(this.attr.productSelect, "cart_num", 1);
                this.$set(this, "cart_num", 1);
            } else {
                num.cart_num = 0;
                this.$set(this, 'tempArr', this.tempArr);
                this.$set(this.cartData, 'cartList', this.cartData.cartList);
            }
        } else {
            if (!isDuo) {
                if(cart){
                    this.goCat(0, id, 0,1,num.product_attr_unique);
                    this.getTotalPrice();
                }else{
                    this.goCat(0, id, 0);
                }
            }
        }
    }
    //console.log(changeValue, num, stock, isDuo, id,index,cart)
},
// 多规格加入购物车；
goCatNum() {
    this.goCat(1, this.id, 1);
},
/*
 * 加入购物车
 */
goCat: function(duo, id, type,cart,unique) {
    let that = this;
    if (duo) {
        let productSelect = that.productValue[this.attrValue];
        //如果有属性,没有选择,提示用户选择
        if (
            that.attr.productAttr.length &&
            productSelect === undefined
        )
            return that.$util.Tips({
                title: "产品库存不足，请选择其它属性"
            });
    }
    let q = {
        product_id: id,
        num: duo ? that.attr.productSelect.cart_num : 1,
        type: type,
        unique: duo ? that.attr.productSelect.unique : cart?unique:""
    };

    let donum = duo ? that.attr.productSelect.cart_num : 1
    var index2 = 0
    this.goodList.find((v,i)=>{
        if(v.id == id){
            index2 = i
            return true
        }
    })
    if(type == 1){
        this.$set(this.goodList[index2], "cart_num", this.goodList[index2]['cart_num']+donum);
    }else{
        this.$set(this.goodList[index2], "cart_num", this.goodList[index2]['cart_num']-donum);
    }
    this.$forceUpdate()


    postCartNum(q)
        .then(function(res) {
            if (duo) {
                that.attr.cartAttr = false;
                that.$util.Tips({
                    title: "添加购物车成功"
                });
                that.page = 1;
                that.loadend = false;
                //that.tempArr = [];
                //that.productslist();

            }

            that.getCartNum();
            if(!cart){
                that.getCartList(1);
            }
        })
        .catch(err => {
            return that.$util.Tips({
                title: err
            });
        });
},
goCartDuo(item) {
    if (!this.isLogin) {
        this.getIsLogin();
    } else {
        uni.showLoading({
            title: '加载中'
        });
        this.storeName = item.store_name;
        this.getAttrs(item.id);
        this.$set(this, 'id', item.id);
        this.$set(this.attr, 'cartAttr', true);
    }
},

getCartNum: function() {
    let that = this;
    getCartCounts().then(res => {
        that.cartCount = res.data.count;
    });
},

// 改变多属性购物车
ChangeCartNumDuo(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;
    this.ChangeCartNum(changeValue, num, stock, 1, this.id);
},
onMyEvent: function() {
    this.$set(this.attr, 'cartAttr', false);
},

购物车在产品列表上按钮及+-号的样式

.bottom{
    margin-top: 22rpx;
    position: absolute;
    bottom: 10rpx;
    right: 20rpx;
    .money{
        font-size: 34rpx;
        font-weight: 800;
        width: 212rpx;
        .sign{
            font-size: 24rpx;
        }
        .y_money{
            font-size: 20rpx;
            color: #8B8B8B;
            margin-left: 14rpx;
            font-weight: normal;
            text-decoration: line-through;
        }
        .vip{
            font-size: 22rpx;
            color: #282828;
            font-weight: normal;
            margin-left: 14rpx;
            image{
                width: 38rpx;
                height: 18rpx;
                margin-right: 6rpx;
            }
        }
    }
    .cart{
        height: 46rpx;
        .pictrue{
            color: #e93323;
            font-size:46rpx;
            width: 46rpx;
            height: 46rpx;
            text-align: center;
            line-height: 46rpx;
            &.icon-jiahao{
                 color: #e93323;
            }
        }
        .num{
            font-size: 30rpx;
            color: #282828;
            font-weight: bold;
            width: 60rpx;
            text-align: center;
        }
    }
    .icon-gouwuche6{
        width: 46rpx;
        height: 46rpx;
        background-color: #e93323;
        border-radius: 50%;
        color: #fff;
        font-size: 30rpx;
    }
    .bnt{
        /* padding: 0 20rpx;
        height: 46rpx;
        line-height: 46rpx;
        background:#e93323;
        border-radius:23rpx;
        font-size: 22rpx;
        color: #fff;
        position: relative; */
        &.end{
            background:rgba(203,203,203,1);
        }
        .num{
            min-width: 12rpx;
            color: #fff;
            border-radius: 15px;
            position: absolute;
            right: -13rpx;
            top: -11rpx;
            font-size: 16rpx;
            padding: 0 11rpx;
            background-color: #FD502F;
            height: 32rpx;
            line-height: 32rpx;
        }
    }
}

作者qq：837944832