diancan_uni/pages/shopcart/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view :class="showGoodsSpec ? 'wrap limited' : 'wrap'">
            <view class="wrap_nr">
                <view :class="addGoodList && addGoodList.length != 0 ? 'tips addPos' : 'tips'" v-if="!isHaveGoods">购物车空空如也，去逛逛吧~</view>
                <view class="shopcar_wrap" v-if="isHaveGoods">
                    <view class="shopcar">
                        <view class="goods_list">
                            <van-checkbox-group :value="resultArr" @change="onChangeResult">
                                <van-swipe-cell :right-width="65" v-for="(item, index) in cartGoods" :key="index">
                                    <van-cell-group>
                                        <!-- 普通商品 -->
                                        <view class="goods_item" v-if="!item.add_good_rule_id">
                                            <van-checkbox
                                                :name="item.id"
                                                checked-color="#295C56"
                                                :class="'checkboxes-' + item.id"
                                                @tap.native="toggleGoods($event, { id: item.id })"
                                                :data-id="item.id"
                                            ></van-checkbox>
                                            <image class="goods_tu" :src="imgUrl + item.good_thumb" @tap="onGoodsSpec" :data-item="item"></image>
                                            <view class="goods_info">
                                                <view @tap="onGoodsSpec" :data-item="item">
                                                    <view class="goods_title">{{ item.good_title }}</view>
                                                    <view class="goods_labels" v-if="item.good_specs_title">
                                                        <view class="label">{{ item.good_specs_title }}</view>
                                                    </view>
                                                </view>
                                                <view class="goods_specs">
                                                    <view class="price">
                                                        <text>
                                                            <text class="unit">¥</text>
                                                            {{ item.price }}
                                                        </text>
                                                        <text class="vip">会员价{{ '¥' + item.member_price }}</text>
                                                    </view>
                                                    <van-stepper
                                                        :value="item.nums"
                                                        input-width="40rpx"
                                                        min="1"
                                                        disable-input
                                                        custom-class="stepper"
                                                        plus-class="plus"
                                                        minus-class="minus"
                                                        input-class="step_input"
                                                        @change="onChangeCartNum($event, { item })"
                                                        :data-item="item"
                                                    />
                                                </view>
                                            </view>
                                        </view>
                                        <!-- 活动加购商品 -->
                                        <view class="goods_item" v-else>
                                            <van-checkbox
                                                :name="item.id"
                                                checked-color="#295C56"
                                                :class="'checkboxes-' + item.id"
                                                @tap.native="toggleGoods($event, { id: item.id })"
                                                :data-id="item.id"
                                            ></van-checkbox>
                                            <image class="goods_tu" :src="imgUrl + item.good_thumb" @tap="onGoodsSpec" :data-item="item"></image>
                                            <view class="goods_info">
                                                <view @tap="onGoodsSpec" :data-item="item">
                                                    <view class="goods_title">
                                                        <text class="add_tag">加购商品</text>
                                                        {{ item.good_title }}
                                                    </view>
                                                    <view class="goods_labels" v-if="item.good_specs_title">
                                                        <view class="label">{{ item.good_specs_title }}</view>
                                                    </view>
                                                </view>
                                                <view class="goods_specs">
                                                    <view class="price">
                                                        <text>
                                                            <text class="unit">¥</text>
                                                            {{ item.add_price }}
                                                        </text>
                                                        <text class="df_price">原价{{ '¥' + item.price }}</text>
                                                    </view>
                                                    <van-stepper
                                                        :value="item.nums"
                                                        input-width="40rpx"
                                                        min="1"
                                                        async-change
                                                        disable-input
                                                        custom-class="stepper"
                                                        plus-class="plus"
                                                        minus-class="minus"
                                                        input-class="step_input"
                                                        @change="onChangeCartNum($event, { item })"
                                                        :data-item="item"
                                                    />
                                                </view>
                                            </view>
                                        </view>
                                    </van-cell-group>

                                    <view slot="right" class="goods_del" @tap="bindDel" :data-item="item">删除</view>
                                </van-swipe-cell>
                            </van-checkbox-group>
                        </view>
                        <view class="jiesuan_wrap">
                            <!-- {{ is_member ? totalMemberPrice : totalPrice }} -->
                            <view class="jiesuan_t">
                                共计{{ totalNums }}个产品，总价
                                <text class="price">
                                    <text class="unit">¥</text>
                                    {{ totalPrice }}
                                </text>
                            </view>
                            <view class="jiesuan_b">
                                <view class="jieusan_btn" @tap="toPay">去结算</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view :class="!isHaveGoods ? 'huangou_wrap addTipPos' : 'huangou_wrap'" v-if="addGoodList && addGoodList.length != 0">
                    <view v-for="(item, index) in addGoodList" :key="item.id">
                        <view class="title">{{ item.title }}</view>

                        <view class="huangou_list">
                            <view class="huangou_item">
                                <image class="goods_tu" :src="imgUrl + item.add_good.thumb" @tap="onAdGoodsSpec" :data-item="item"></image>
                                <view class="goods_info">
                                    <view class="goods_title">{{ item.add_good.title }}</view>
                                    <view class="goods_info_b">
                                        <view class="goods_price">
                                            <text class="ac_price">
                                                <text class="unit">¥</text>
                                                {{ item.add_price }}
                                            </text>
                                            <text class="df_price">
                                                <text class="unit">¥</text>
                                                {{ item.add_good.base_price }}
                                            </text>
                                        </view>
                                    </view>
                                    <view class="setp_w">
                                        <view
                                            class="guige_btn"
                                            v-if="item.add_good_rule_good_spec && item.add_good_rule_good_spec.length != 0"
                                            @tap="onAdGoodsSpec"
                                            :data-item="item"
                                        >
                                            选规格
                                        </view>
                                        <van-stepper
                                            v-else
                                            :value="item.nums"
                                            input-width="40rpx"
                                            min="0"
                                            :max="item.add_num"
                                            disable-input
                                            custom-class="stepper"
                                            plus-class="plus"
                                            minus-class="minus"
                                            input-class="step_input"
                                            :data-item="item"
                                            @change="onChangeAdGoodsNum($event, { item })"
                                        />
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 详情弹层 -->
        <van-overlay :z-index="5" class-style="background: rgba(0,0,0,.3);" :show="showGoodsSpec" @tap.native.stop.prevent="closeGoodsSpec"></van-overlay>
        <view class="guige_wrap" v-if="showGoodsSpec">
            <view class="guige">
                <view class="guige_t">
                    <image class="goods_thumb" mode="widthFix" :src="imgUrl + currentGoods.good_thumb"></image>
                    <view class="guige_t_r">
                        <view class="goods_name">
                            <view class="goods_name_l">{{ currentGoods.good_title }}</view>
                        </view>
                        <view class="goods_desc" v-if="currentGoods.good_specs_title">
                            <view class="goods_desc_nr slh">{{ currentGoods.good_specs_title }}</view>
                        </view>
                    </view>
                </view>
                <view class="guige_b">
                    <view class="guige_b_l">
                        <text class="price">
                            <text class="unit">¥</text>
                            {{ currentGoods.price }}
                        </text>
                        <text class="vip">会员价{{ '¥' + currentGoods.member_price }}</text>
                    </view>
                    <view class="">
                        <van-stepper
                            :value="currentGoods.nums"
                            input-width="40rpx"
                            min="1"
                            disable-input
                            custom-class="stepper"
                            plus-class="plus"
                            minus-class="minus"
                            input-class="step_input"
                            @change="onChangeCartNum($event, { item: currentGoods })"
                            :data-item="currentGoods"
                        />
                    </view>
                </view>
            </view>
            <van-icon name="close" class="btn_close" color="#ffffff" size="30px" @tap.native="closeGoodsSpec" />
        </view>
        <!-- 加购商品详情 -->
        <van-overlay :z-index="5" class-style="background: rgba(0,0,0,.3);" :show="showAdGoodsSpec" @tap.native.stop.prevent="closeAdGoodsSpec"></van-overlay>
        <view class="guige_wrap" v-if="showAdGoodsSpec">
            <view class="guige">
                <view class="guige_t">
                    <image class="goods_thumb" mode="widthFix" :src="imgUrl + currentAdGoods.add_good.thumb"></image>
                    <view class="guige_t_r">
                        <view class="goods_name">
                            <view class="goods_name_l">{{ currentAdGoods.add_good.title }}</view>
                        </view>
                        <view class="goods_guige" v-if="currentAdGoods.add_good_rule_good_spec && currentAdGoods.add_good_rule_good_spec.length != 0">
                            <view class="goods_guige_name">规格</view>
                            <view class="goods_guige_nr">
                                <view
                                    :class="addgood_specs.is_checked ? 'guige_item selected' : 'guige_item'"
                                    @tap="onChangeSpecGoods"
                                    :data-specs="addgood_specs"
                                    v-for="(addgood_specs, index) in currentAdGoods.add_good_rule_good_spec"
                                    :key="index"
                                >
                                    <view class="item_wenzi">
                                        <text>{{ addgood_specs.good_spec.title }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- <view class="goods_guige">
					<view class="goods_desc_nr" wx:if="{{ currentAdGoods.add_good_rule_good_spec.length == 0 }}">
						<view class="item_wenzi"><text>{{ currentAdGoods.add_good_specs.title }}</text></view>
					</view>
				</view> -->
                        <!-- <view class="goods_desc" wx:if="{{ currentAdGoods.add_good_rule_good_spec }}">
					<view class="goods_desc_nr slh">{{ currentAdGoods.add_good_specs.title }}</view>
				</view> -->
                    </view>
                </view>
                <view class="guige_b_wrap">
                    <view class="guige_b" v-if="currentAdGoods.add_good_rule_good_spec && currentAdGoods.add_good_rule_good_spec.length != 0">
                        <view class="guige_b_l">
                            <text class="price">
                                <text class="unit">¥</text>
                                {{ currentAdGoods.add_price }}
                            </text>
                            <text class="vip">原价{{ '¥' + currentAdGoodsSpec.good_spec.price }}</text>
                        </view>
                        <view class="">
                            <van-stepper
                                :value="currentAdGoodsSpec.nums"
                                input-width="40rpx"
                                min="0"
                                :max="currentAdGoods.add_num"
                                async-change
                                disable-input
                                custom-class="stepper"
                                plus-class="plus"
                                minus-class="minus"
                                input-class="step_input"
                                :data-item="currentAdGoodsSpec"
                                @change="onChangeAdGoodsSpecNum($event, { item: currentAdGoodsSpec })"
                            />
                        </view>
                    </view>
                    <view class="guige_b" v-else>
                        <view class="guige_b_l">
                            <text class="price">
                                <text class="unit">¥</text>
                                {{ currentAdGoods.add_price }}
                            </text>
                            <text class="vip">原价{{ '¥' + currentAdGoods.add_good.base_price }}</text>
                        </view>
                        <view class="">
                            <van-stepper
                                :value="currentAdGoods.nums"
                                input-width="40rpx"
                                min="0"
                                :max="currentAdGoods.add_num"
                                disable-input
                                custom-class="stepper"
                                plus-class="plus"
                                minus-class="minus"
                                input-class="step_input"
                                :data-item="currentAdGoods"
                                @change="onChangeAdGoodsNum($event, { item: currentAdGoods })"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <van-icon name="close" class="btn_close" color="#ffffff" size="30px" @tap.native="closeAdGoodsSpec" />
        </view>
        <!-- js -->
    </view>
</template>
<script module="we" lang="wxs">
/* 字符串长度截取 */
var strSlice = function(value) {
	if(value.length > 10){
		value = value.slice(0,6)+'...'
	};
	return value;
};
module.exports = {
	strSlice: strSlice
}
</script>
<script>
// index.js
let myPro = require('../../utils/wxRequest.js');

let util = require('../../utils/util.js');

export default {
    data() {
        return {
            setBgHeight: getApp().globalData.setBgHeight,
            imgUrl: getApp().globalData.imgUrl,
            fare_type: 1,

            // 0外卖 1自提   默认自取
            is_member: 0,

            // 是否为会员
            showGoodsSpec: false,

            cartGoods: [],

            // 购物车商品
            addGoodList: [],

            // 活动加购商品
            resultArr: [],

            // 选中商品
            checkedAll: true,

            resultAll: [],

            // 测试
            totalNums: 0,

            // 加购商品总数
            totalPrice: 0,

            // 加购商品总价(原价)
            totalMemberPrice: 0,

            // 加购商品总价(会员价)
            showAdGoodsSpec: false,

            // 是否有商品
            isHaveGoods: true,

            currentGoods: {
                good_thumb: '',
                good_title: '',
                good_specs_title: '',
                member_price: '',
                nums: ''
            },

            currentAdGoods: {
                add_good: {
                    thumb: '',
                    title: '',
                    base_price: ''
                },

                add_good_rule_good_spec: '',
                add_num: '',
                nums: ''
            },

            currentAdGoodsSpec: {
                good_spec: {
                    price: ''
                },

                nums: ''
            },

            addgood_specs: {
                is_checked: false,

                good_spec: {
                    title: ''
                }
            }
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.setData({
            is_member: getApp().globalData.is_member
        }); // 获取配送方式

        if (uni.getStorageSync('fare_type')) {
            that.setData({
                fare_type: uni.getStorageSync('fare_type')
            });
        }

        that.getCartsList();
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取购物车商品
        getCartsList() {
            let that = this;
            let params = {};
            myPro
                .wxRequest('user/v3/carts/list', 'GET', params)
                .then((res) => {
                    // 普通商品
                    let list = res.result.list;

                    if (list.length != 0) {
                        that.setData({
                            isHaveGoods: true
                        });
                    } else {
                        that.setData({
                            isHaveGoods: false
                        });
                    } // 活动加购商品

                    let addGoodList = res.result.add_good_list;
                    that.setData({
                        cartGoods: list,
                        addGoodList: addGoodList,
                        totalNums: res.result.total_num,
                        totalPrice: res.result.money // 接口返回的,不需再关注是否为会员价
                    }); // 商品选中状态

                    let resultArr = [];

                    for (let i in list) {
                        if (list[i].selected) {
                            resultArr.push('' + list[i].id);
                        }
                    }

                    that.setData({
                        resultArr: resultArr
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 展示详情
        onGoodsSpec(event) {
            let that = this;
            let item = event.currentTarget.dataset.item;
            that.setData({
                currentGoods: item,
                // 商品加购的规格(不带多规格)
                showGoodsSpec: true
            });
        },

        // 关闭详情
        closeGoodsSpec() {
            let that = this;
            that.setData({
                showGoodsSpec: false
            });
        },

        // 更改购物车商品
        onChangeCartNum(event, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(event, _dataset);
            /* ---处理dataset end--- */
            let that = this;
            let nums = event.detail;
            let item = event.currentTarget.dataset.item;
            let params = {
                id: item.id,
                nums: nums
            }; // console.log('event',event)
            // return;

            myPro
                .wxRequest('user/v3/carts/editnum', 'POST', params)
                .then((res) => {
                    that.getCartsList();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 删除商品
        bindDel(event) {
            let that = this;
            console.log('event', event);
            let item = event.currentTarget.dataset.item;
            let params = {
                id: item.id
            };
            myPro
                .wxRequest('user/v3/carts/remove', 'POST', params)
                .then((res) => {
                    // 主动调购物车,更新信息
                    that.getCartsList();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 选择
        onChangeResult(event) {
            let that = this;
            console.log(event.detail);
            that.setData({
                resultArr: event.detail
            });
        },

        // 切换状态
        toggleGoods(event, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(event, _dataset);
            /* ---处理dataset end--- */
            console.log('切换状态', event);
            let that = this;
            let id = event.currentTarget.dataset.id;
            let resultArr = that.resultArr;
            let params = {
                id: id
            };

            if (resultArr.includes('' + id)) {
                params.selected = 1; // 选中

                myPro
                    .wxRequest('user/v3/carts/selected', 'POST', params)
                    .then((res) => {
                        that.getCartsList();
                    })
                    .catch((err) => {
                        console.log('报错信息', err);
                        uni.showToast({
                            title: err,
                            icon: 'none'
                        });
                    });
            } else {
                // 取消选中
                params.selected = 0; // 选中

                myPro
                    .wxRequest('user/v3/carts/selected', 'POST', params)
                    .then((res) => {
                        that.getCartsList();
                    })
                    .catch((err) => {
                        console.log('报错信息', err);
                        uni.showToast({
                            title: err,
                            icon: 'none'
                        });
                    });
            }
        },

        // 去结算
        toPay() {
            let that = this; // 判断商品是否勾选(如果都未勾选提示一下)
            // console.log('resultArr',that.data.resultArr);

            let resultArr = that.resultArr;

            if (resultArr.length == 0) {
                uni.showToast({
                    title: '请勾选商品',
                    icon: 'none'
                });
                return;
            } // 验证是否能下单(有可能不在营业时间)

            uni.request({
                url: getApp().globalData.api + 'user/v3/order/createlist',
                data: {
                    token: getApp().globalData.token
                },
                success: function (res) {
                    if (res.data.code == 200) {
                        // 如果是外卖，看是否有收货地址
                        if (that.fare_type == 0) {
                            if (!uni.getStorageSync('checkedAddress')) {
                                uni.navigateTo({
                                    url: '/pages/user/address/list/index'
                                });
                            } else {
                                uni.navigateTo({
                                    url: '/pages/create-order/index'
                                });
                            }
                        } else {
                            // 路由跳转：需要保留购物车页面(因为从购物车往后的步骤都可能回退),但注意更新购物车
                            uni.navigateTo({
                                url: '/pages/create-order/index'
                            });
                        }
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            icon: 'none'
                        });
                    }
                }
            });
        },

        // 活动加购商品
        onAdGoodsSpec(event) {
            let that = this;
            let cartGoods = that.cartGoods;
            let item = event.currentTarget.dataset.item;
            let currentAdGoodsSpec = null;

            if (item.add_good_rule_good_spec && item.add_good_rule_good_spec.length != 0) {
                for (let i in item.add_good_rule_good_spec) {
                    if (i == 0) {
                        item.add_good_rule_good_spec[i].is_checked = true; // 默认选中第一个

                        currentAdGoodsSpec = item.add_good_rule_good_spec[i];
                    } else {
                        item.add_good_rule_good_spec[i].is_checked = false;
                    }
                } // 跟购物车对比,拿数量

                for (let k in cartGoods) {
                    if (
                        currentAdGoodsSpec.good_id == cartGoods[k].good_id &&
                        currentAdGoodsSpec.good_spec_id == cartGoods[k].good_specs_id &&
                        currentAdGoodsSpec.add_good_rule_id == cartGoods[k].add_good_rule_id
                    ) {
                        currentAdGoodsSpec.nums = cartGoods[k].nums;
                        break;
                    }
                }
            }

            that.setData({
                showAdGoodsSpec: true,
                currentAdGoods: item,
                currentAdGoodsSpec: currentAdGoodsSpec
            }); // console.log('活动加购商品',that.data.currentAdGoods);
        },

        // 切换规格
        onChangeSpecGoods(event) {
            let that = this;
            console.log(event);
            let specs = event.currentTarget.dataset.specs;
            let currentAdGoods = that.currentAdGoods;
            let cartGoods = that.cartGoods;

            if (currentAdGoods.add_good_rule_good_spec && currentAdGoods.add_good_rule_good_spec.length != 0) {
                for (let i in currentAdGoods.add_good_rule_good_spec) {
                    let item = currentAdGoods.add_good_rule_good_spec[i];

                    if (item.good_spec_id == specs.good_spec_id) {
                        item.is_checked = true;
                    } else {
                        item.is_checked = false;
                    }
                } // 跟购物车对比,拿数量

                for (let k in cartGoods) {
                    if (specs.good_id == cartGoods[k].good_id && specs.good_spec_id == cartGoods[k].good_specs_id && specs.add_good_rule_id == cartGoods[k].add_good_rule_id) {
                        specs.nums = cartGoods[k].nums;
                        break;
                    }
                }
            }

            that.setData({
                currentAdGoods: currentAdGoods,
                currentAdGoodsSpec: specs
            });
        },

        // 关闭活动加购商品
        closeAdGoodsSpec() {
            let that = this;
            that.setData({
                showAdGoodsSpec: false
            });
        },

        // 点击活动加购商品(多规格)
        onChangeAdGoodsSpecNum(event, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(event, _dataset);
            /* ---处理dataset end--- */
            let that = this;
            let nums = event.detail; // console.log('event',event);

            let item = event.currentTarget.dataset.item;
            let itemObj = {
                good_id: item.good_id,
                add_good_rule_id: item.add_good_rule_id,
                good_specs_id: item.good_spec_id
            }; // console.log('当前规格',itemObj);

            that.handleAdGoods(itemObj, nums);
        },

        // 点击活动加购商品(无规格)
        onChangeAdGoodsNum(event, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(event, _dataset);
            /* ---处理dataset end--- */
            let that = this;
            let nums = event.detail;
            let item = event.currentTarget.dataset.item;
            let itemObj = {
                good_id: item.add_good_id,
                add_good_rule_id: item.id,
                good_specs_id: item.add_good_spec_id
            };
            that.handleAdGoods(itemObj, nums);
        },

        // 加购商品增删改查
        handleAdGoods(item, nums) {
            let that = this;
            let cartId = that.isAddCart(item);

            if (cartId) {
                console.log('在'); // 在购物车

                let params = {
                    id: cartId // 购物车ID
                }; // 活动加购商品

                if (nums != 0) {
                    params.nums = nums; // 修改数量

                    myPro
                        .wxRequest('user/v3/carts/editnum', 'POST', params)
                        .then((res) => {
                            that.closeAdGoodsSpec();
                            that.getCartsList();
                        })
                        .catch((err) => {
                            console.log('报错信息', err);
                            uni.showToast({
                                title: err,
                                icon: 'none'
                            });
                        });
                } else {
                    // 删除
                    myPro
                        .wxRequest('user/v3/carts/remove', 'POST', params)
                        .then((res) => {
                            that.closeAdGoodsSpec();
                            that.getCartsList();
                        })
                        .catch((err) => {
                            console.log('报错信息', err);
                            uni.showToast({
                                title: err,
                                icon: 'none'
                            });
                        });
                }
            } else {
                console.log('不在');
                let params = {
                    good_id: item.good_id,
                    good_specs_id: item.good_specs_id,
                    nums: nums,
                    add_good_rule_id: item.add_good_rule_id,
                    is_add: 1 // 是否为加购商品（1是 0否）
                }; // console.log('参数',params);
                // return;

                myPro
                    .wxRequest('user/v3/carts/create', 'POST', params)
                    .then((res) => {
                        that.closeAdGoodsSpec();
                        that.getCartsList();
                    })
                    .catch((err) => {
                        console.log('报错信息', err);
                        uni.showToast({
                            title: err,
                            icon: 'none'
                        });
                    });
            }
        },

        // 核实商品是否存在于购物车
        isAddCart(item) {
            let that = this;
            let oldCartGoods = that.cartGoods;
            let cartId = null; // console.log('item',item);
            // console.log('购物车',oldCartGoods);
            // 检测购物车是否有此商品

            for (let i in oldCartGoods) {
                if (item.good_id == oldCartGoods[i].good_id && oldCartGoods[i].add_good_rule_id && item.add_good_rule_id && item.good_specs_id == oldCartGoods[i].good_specs_id) {
                    cartId = oldCartGoods[i].id;
                    break;
                }
            }

            return cartId;
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
    overflow: auto;
}
.wrap.limited {
    height: 100vh;
    overflow: hidden;
}
.wrap_nr {
    padding-bottom: 30rpx;
}
/* 商品 */
.shopcar_wrap {
    padding-top: 30rpx;
}
.shopcar {
    width: 690rpx;
    margin: 0 auto;
    background: #ffffff;
}
.shopcar .goods_list .goods_item .goods_tu {
    width: 120rpx;
    height: 120rpx;
    border-radius: 5rpx;
}
.shopcar .goods_list .goods_item .goods_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.goods_list .goods_del {
    height: 100%;
    width: 130rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #ef3838;
}
/* 会员价 */
.goods_list .goods_item {
    margin-top: 20rpx;
    padding: 30rpx;
}
.goods_list .goods_item:first-child {
    margin-top: 0;
}
.goods_list .goods_item .goods_specs .price .vip {
    padding: 4rpx 10rpx;
    font-size: 20rpx;
    /* font-weight: bold; */
    background: #ffffff;
    border: 1px solid #f1a223;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1a223;
}
.guige .guige_b .guige_b_l .vip {
    padding-left: 8rpx;
}
/* 合计 */
.heji_wrap {
    width: 100%;
    height: 100rpx;
    padding: 0 30rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}
.heji_wrap .heji_r {
    display: flex;
    align-items: center;
}
.heji_wrap .heji_btn {
    width: 200rpx;
    height: 80rpx;
    margin-left: 30rpx;
    border-radius: 40rpx;
    background: #ffd102;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 规格 */
.guige_wrap {
    width: 670rpx;
    border-radius: 10rpx 10rpx 0 0;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}
.guige {
    width: 100%;
    padding-bottom: 38rpx;
    background: #ffffff;
}
.guige .goods_thumb_wrap {
    width: 100%;
    /* height: 370rpx; */
    position: relative;
}
.guige .goods_thumb_wrap .line {
    width: 100%;
    height: 30rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    background-repeat: repeat-x;
    background-size: 18rpx 30rpx;
}
.guige .goods_thumb {
    width: 100%;
    height: auto;
}
.guige .goods_name {
    padding: 20rpx 30rpx 0;
    font-size: 30rpx;
    color: #080808;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.guige .goods_labels {
    padding: 0 30rpx;
    font-size: 24rpx;
    color: rgba(8, 8, 8, 0.54);
    display: flex;
    flex-wrap: wrap;
}
.guige .goods_labels .label {
    padding: 6rpx;
    background: #f6f6f6;
    margin: 10rpx 14rpx 0 0;
}
.guige .goods_desc {
    padding: 10rpx 30rpx 0;
}
.guige .goods_desc .goods_desc_name {
    font-size: 26rpx;
    color: rgba(51, 51, 51, 0.54);
}
.guige .goods_desc .goods_desc_nr {
    /* padding-top: 20rpx; */
    font-size: 24rpx;
    color: rgba(8, 8, 8, 0.54);
}
.guige .goods_guige {
    padding: 20rpx 30rpx 0;
}
.guige .goods_guige .goods_guige_name {
    font-size: 26rpx;
    color: rgba(51, 51, 51, 0.54);
}
.guige .goods_guige .goods_guige_nr {
    display: flex;
    flex-wrap: wrap;
}
.guige .guige_item {
    height: 59rpx;
    font-size: 24rpx;
    color: #333333;
    background: #ffffff;
    border: 1rpx solid rgba(0, 0, 0, 0.12);
    border-radius: 5rpx;
    display: flex;
    align-items: center;
    margin: 20rpx 20rpx 0 0;
}
.guige .guige_item:last-child {
    margin-right: 0;
}
.guige .guige_item .item_wenzi {
    display: flex;
}
.guige .guige_item .item_wenzi text {
    padding: 0 16rpx 0 12rpx;
    display: flex;
    align-items: center;
}
.guige .guige_item .item_wenzi text:not(:last-child)::after {
    content: '';
    display: block;
    width: 2rpx;
    height: 16rpx;
    background: rgba(0, 0, 0, 0.12);
    margin-left: 16rpx;
}
.guige .guige_item .price {
    padding: 0 18rpx;
    font-size: 28rpx;
    border-left: 1rpx solid rgba(0, 0, 0, 0.12);
}
.guige .guige_item .price .unit {
    font-size: 20rpx;
}
.guige .guige_item.selected {
    background: #fffbf0;
    border-color: #ed8c17;
    color: #ed8c17;
}
.guige .guige_item.selected .price {
    color: #ea4335;
    border-left-color: #ed8c17;
}
.guige .guige_selected {
    margin-top: 20rpx;
    height: 60rpx;
    background: #fafafa;
    border: 1rpx solid rgba(0, 0, 0, 0.05);
    border-left: 0 none;
    border-right: 0 none;
    padding: 0rpx 30rpx;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #000000;
}
.guige .guige_selected .label {
    color: rgba(0, 0, 0, 0.54);
}
.guige .guige_b {
    margin-top: 30rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.guige .guige_b .guige_b_l {
    font-size: 26rpx;
    color: #000000;
}
.guige .guige_b .price {
    font-size: 38rpx;
    color: #ea4335;
    padding-left: 10rpx;
}
.guige .guige_b .price .unit {
    font-size: 22rpx;
}
.guige .guige_b .item {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.54);
}
.guige .guige_b .guige_b_r {
    width: 350rpx;
    height: 90rpx;
    background: #d54c43;
    border-radius: 45rpx;
    font-size: 34rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.guige_wrap .btn_close {
    width: 100%;
}
.guige_wrap .btn_close .van-icon {
    /* width: 56rpx;
	height: 56rpx; */
    display: block;
    margin: 36rpx auto;
}
.guige_wrap .van-icon-cross {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
}
/* 无商品的提醒 */
.wrap_nr .tips {
    position: absolute;
    top: 40vh;
    left: 0;
    width: 100%;
    text-align: center;
}
/*  */
.goods_list .goods_item .goods_labels .label {
    background: none;
    font-size: 24rpx;
    color: rgba(8, 8, 8, 0.54);
    margin: 0;
}
.goods_list .goods_item .goods_specs .price {
    display: flex;
    align-items: center;
}
.goods_list .goods_item .goods_specs .price .vip {
    margin-left: 20rpx;
}
/*  */
.jiesuan_wrap {
    padding: 30rpx 20rpx 36rpx;
    font-size: 26rpx;
    color: #000000;
    border-top: 1rpx solid rgba(0, 0, 0, 0.12);
}
.jiesuan_wrap .jiesuan_t .price {
    padding-left: 10rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #d54c43;
}
.jiesuan_wrap .jiesuan_t .price .unit {
    font-size: 24rpx;
}
.jiesuan_wrap .jiesuan_b {
    display: flex;
    justify-content: flex-end;
}
.jiesuan_wrap .jieusan_btn {
    width: 197rpx;
    height: 60rpx;
    background: #295c56;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #fffefe;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 换购 */
.huangou_wrap {
    width: 690rpx;
    margin: 0 auto;
}
.huangou_wrap .title {
    font-size: 30rpx;
    color: #000000;
    display: flex;
    align-items: center;
    margin-top: 28rpx;
}
.huangou_wrap .title::before {
    content: '';
    display: block;
    width: 6rpx;
    height: 28rpx;
    background: #295c56;
    margin-right: 10rpx;
}
.huangou_wrap .huangou_list {
    display: flex;
    flex-wrap: wrap;
}
.huangou_wrap .huangou_list .huangou_item {
    width: 210rpx;
    margin: 28rpx 28rpx 0 0;
}
.huangou_wrap .huangou_list .huangou_item:nth-of-type(3n) {
    margin-right: 0;
}
.huangou_item .goods_tu {
    width: 210rpx;
    height: 210rpx;
    border-radius: 5rpx 5rpx 0rpx 0rpx;
    display: block;
}
.huangou_item .goods_info {
    width: 100%;
    background: #ffffff;
    border-radius: 0 0 5rpx 5rpx;
    padding: 10rpx;
}
.huangou_item .goods_info .goods_title {
    font-size: 24rpx;
    color: #080808;
}
.huangou_item .goods_info_b {
    padding-top: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.huangou_item .ac_price {
    font-size: 30rpx;
    color: #d54c43;
}
.huangou_item .ac_price .unit {
    font-size: 20rpx;
}
.huangou_item .df_price {
    font-size: 20rpx;
    color: rgba(8, 8, 8, 0.54);
    text-decoration: line-through;
}
.huangou_item .df_price .unit {
    font-size: 14rpx;
}
.huangou_item .add_btn .van-icon {
    color: #295c56;
    font-size: 35rpx;
}
.huangou_item .setp_w {
    display: flex;
    justify-content: flex-end;
}
/* 商品列表 活动价*/
.goods_list .goods_item .goods_specs .price .df_price {
    padding-left: 20rpx;
    font-size: 20rpx;
    color: rgba(8, 8, 8, 0.54);
    text-decoration: line-through;
}
/* 规格按钮 */
.guige_btn {
    width: 120rpx;
    height: 45rpx;
    background: #295c56;
    border-radius: 23rpx;
    font-size: 26rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*  */
.wrap_nr .tips.addPos {
    top: 5vh;
}
.huangou_wrap.addTipPos {
    margin-top: 10vh;
}
/* 加购标志 */
.add_tag {
    font-size: 24rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #ff6637, #ff954e);
    border-radius: 5rpx;
    padding: 6rpx 8rpx;
    margin-right: 12rpx;
}
</style>