<template> <div class="car-page"> <!--联营盒子--> <div class="lxBox" v-show="type==1" :style="{'paddingTop':paddingTop+'px'}"> <div class="lyNav clr lyfixed"> <span class="fl" :class="{'act':(delivery==1)}" @click="deliveryTab(1)" v-back-top-window>大陆交货({{ly1Length}})<font class="fr">|</font></span> <span class="fl" :class="{'act':(delivery==2)}" @click="deliveryTab(2)" v-back-top-window>香港交货({{ly2Length}})</span> </div> <!--登录提示框--> <div class="logintip lyfixed" v-if="!isLogingo"> <span>登录后商品会同步到您账户中</span> <a :href="loginUrl">登录</a> </div> <div class="dataBox" > <!--编辑--> <div class="editBox clr lyfixed" :style="{'top':(paddingTop+44)+'px'}" v-if="!isNoContent"> <span class="remind fl" @click="tipLy">友情提醒<i class="iconfont icon-tishi" ></i></span> <a href="javascript:void(0)" class="edit-btn fr" @click="isEditf()" v-if="isEdit">完成</a> <a href="javascript:void(0)" class="edit-btn fr" @click="isEditf()" v-if="!isEdit">编辑</a> </div> <div class="dlBox" v-show="delivery==1"> <div class="mui-row shop-block sale_type_data" v-for="(item,indexdata) in ly1Data"> <div class="mui-col-sm-1 mui-col-xs-1 ta-c mt-10 zdychec"> <van-checkbox v-model="item.check" @change="checkWatch"></van-checkbox> </div> <div class="mui-col-sm-11 mui-col-xs-11"> <h4 class="mui-row"> <p class="mui-col-sm-11 mui-col-xs-11"> <a :href="'/goods_'+item.goods_id+'.html'" class="f-333">{{item.sku_name}}</a> </p> <p class="mui-col-sm-1 mui-col-xs-1 ta-c"> <a href="javascript:void(0)" v-show="item.editState" @click="deleteGoods(item.cart_id)" class="icon iconfont icon-shanchu delete-tier f-333"></a> </p> </h4> <div class="mt-10" v-if="item.ac_type==8&&item.activity_info"><span class="hot-price">{{item.activity_info.sign_name}}</span><font class="f-red"> {{item.activity_info.activity_ad}}</font></div> <ul class="mui-row"> <li class="mui-col-sm-8 mui-col-xs-8"> <span>制造商:</span> <p>{{item.brand_name}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r huoqi" >货期:{{item.delivery_time||'- -'}}</li> <li class="mui-col-sm-8 mui-col-xs-8"> <span>供应商:</span> <p>{{item.supplier_name||'- -'}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r"> 最小起订量:<font v-html="item.min_buy"></font> </li> <li class="mui-col-sm-7 mui-col-xs-7"> 标准包装量:<font v-html="item.min_mpq"></font> </li> <li class="mui-col-sm-5 mui-col-xs-5 danjia t-r" >单价:{{item.goods_price_format}}</li> </ul> <div class="mui-row"> <div class="mui-col-sm-7 mui-col-xs-7"> <div class="morePrice"> <div :id="'priceContent'+item.cart_id" :class="{'lyClass':item.tiered&&item.tiered.length<4,'lyMoreData':item.tiered&&item.tiered.length>3}" > <div class="mui-row act" v-for="(itemPrice,index) in item.tiered" :class="{'dataNo':(index>2)&&!item.priceCheck}"> <p class="mui-col-sm-3 mui-col-xs-3"><font v-html="itemPrice.purchases"></font>+</p> <p class="mui-col-sm-4 mui-col-xs-4 f-red">¥{{item.ac_type == 6?itemPrice.price_ac:itemPrice.price_cn}}</p> </div> </div> <div class="more-height" v-if="item.tiered&&item.tiered.length>3" @click="priceRow(ly1Data,indexdata,item.cart_id)" v-html="item.checkBtn||defaultBtn">更多梯度价格<i class="iconfont icon-bot"></i></div> </div> </div> <div class="mui-col-sm-5 mui-col-xs-5"> <div class="clr add-num"> <div class="mui-numbox edit-input"> <button class="mui-btn mui-btn-numbox-minus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.multiple,item.min_buy,item.stock,item.cart_id,1)"> <i class="icon iconfont icon-jian"></i> </button> <input class="mui-input-numbox valuep" type="number" :id="'test'+item.cart_id" @blur="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.multiple,item.min_buy,item.stock,item.cart_id,3)" :value="item.goods_number | numberCode"> <button class="mui-btn mui-btn-numbox-plus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.multiple,item.min_buy,item.stock,item.cart_id,2)"> <i class="icon iconfont icon-jia"></i> </button> </div> </div> <p class="subtotal f-999"> 小计:<b class="f-red rewTotal">{{item.goods_amount_format}}</b> </p> </div> </div> </div> </div> <div class="shopcart content-no" v-if="isNoContent"> <dl class="shop-empty"> <dt><i class="iconfont icon-gouwuche1"></i></dt> <dd> <h4>您的购物车空空如也</h4> <p><a class="muiclickbug" href="/v3/search/search_index.html">搜索型号 >></a></p> </dd> </dl> </div> <div class="sxData" v-for="item in ly1LoseData"> <div class="mui-row shop-block shop-lose" > <div class="mui-col-sm-1 mui-col-xs-1"></div> <div class="mui-col-sm-11 mui-col-xs-11"> <h4 class="mui-row"> <p class="mui-col-sm-11 mui-col-xs-11"> <a href="javascript:void(0)">{{item.sku_name}}</a> </p> </h4> <ul class="mui-row"> <li class="mui-col-sm-8 mui-col-xs-8"><span>制造商:</span><p>{{item.brand_name}}</p></li> <li class="mui-col-sm-4 mui-col-xs-4 t-r ">货期:{{item.delivery_time||'- -'}}</li> <li class="mui-col-sm-8 mui-col-xs-8"> <span>供应商:</span> <p>{{item.supplier_name||'- -'}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r"> 最小起订量:<font v-html="item.min_buy"></font> </li> <li class="mui-col-sm-7 mui-col-xs-7"> 标准包装量:<font v-html="item.min_mpq"></font> </li> <li class="mui-col-sm-5 mui-col-xs-5 danjia t-r">单价:{{item.goods_price_format}}</li> </ul> <p class="lose-but"> <a :href="'/s/?k='+item.goods_name" class="fr but-bor-red " >去搜索</a> <span>已失效</span> </p> </div> </div> </div> </div> <div class="hkBox" v-show="delivery==2"> <div class="mui-row shop-block sale_type_data" v-for="(item,indexdata) in ly2Data"> <div class="mui-col-sm-1 mui-col-xs-1 ta-c mt-10 zdychec"> <van-checkbox v-model="item.check" @change="checkWatch"></van-checkbox> </div> <div class="mui-col-sm-11 mui-col-xs-11"> <h4 class="mui-row"> <p class="mui-col-sm-11 mui-col-xs-11"> <a :href="'/goods_'+item.goods_id+'.html'" class="f-333">{{item.sku_name}}</a> </p> <p class="mui-col-sm-1 mui-col-xs-1 ta-c"> <a href="javascript:void(0)" v-show="item.editState" @click="deleteGoods(item.cart_id)" class="icon iconfont icon-shanchu delete-tier f-333"></a> </p> </h4> <ul class="mui-row"> <li class="mui-col-sm-8 mui-col-xs-8"> <span>制造商:</span> <p>{{item.brand_name}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r huoqi" >货期:{{item.delivery_time||'- -'}}</li> <li class="mui-col-sm-8 mui-col-xs-8"> <span>供应商:</span> <p>{{item.supplier_name||'- -'}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r"> 最小起订量:<font v-html="item.min_buy"></font> </li> <li class="mui-col-sm-7 mui-col-xs-7"> 标准包装量:<font v-html="item.min_mpq"></font> </li> <li class="mui-col-sm-5 mui-col-xs-5 danjia t-r" >单价:{{item.goods_price_format}}</li> </ul> <div class="mui-row"> <div class="mui-col-sm-7 mui-col-xs-7"> <div class="morePrice"> <div :id="'priceContent'+item.cart_id" :class="{'lyClass':item.tiered&&item.tiered.length<4,'lyMoreData':item.tiered&&item.tiered.length>3}" > <div class="mui-row act" v-for="(itemPrice,index) in item.tiered" :class="{'dataNo':(index>2)&&!item.priceCheck}"> <p class="mui-col-sm-3 mui-col-xs-3"><font v-html="itemPrice.purchases"></font>+</p> <p class="mui-col-sm-4 mui-col-xs-4 f-red">${{itemPrice.price_us}}</p> </div> </div> <div class="more-height" v-if="item.tiered&&item.tiered.length>3" @click="priceRow(ly2Data,indexdata,item.cart_id)" v-html="item.checkBtn||defaultBtn">更多梯度价格<i class="iconfont icon-bot"></i></div> </div> </div> <div class="mui-col-sm-5 mui-col-xs-5"> <div class="clr add-num"> <div class="mui-numbox edit-input"> <button class="mui-btn mui-btn-numbox-minus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.multiple,item.min_buy,item.stock,item.cart_id,1)"> <i class="icon iconfont icon-jian"></i> </button> <input class="mui-input-numbox valuep" type="number" :id="'test'+item.cart_id" @blur="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.multiple,item.min_buy,item.stock,item.cart_id,3)" :value="item.goods_number | numberCode"> <button class="mui-btn mui-btn-numbox-plus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.multiple,item.min_buy,item.stock,item.cart_id,2)"> <i class="icon iconfont icon-jia"></i> </button> </div> </div> <p class="subtotal f-999"> 小计:<b class="f-red rewTotal">{{item.goods_amount_format}}</b> </p> </div> </div> </div> </div> <div class="shopcart content-no" v-if="isNoContent"> <dl class="shop-empty"> <dt><i class="iconfont icon-gouwuche1"></i></dt> <dd> <h4>您的购物车空空如也</h4> <p><a class="muiclickbug" href="/v3/search/search_index.html">搜索型号 >></a></p> </dd> </dl> </div> <div class="sxData" v-for="item in ly2LoseData"> <div class="mui-row shop-block shop-lose" > <div class="mui-col-sm-1 mui-col-xs-1"></div> <div class="mui-col-sm-11 mui-col-xs-11"> <h4 class="mui-row"> <p class="mui-col-sm-11 mui-col-xs-11"> <a href="javascript:void(0)">{{item.sku_name}}</a> </p> </h4> <ul class="mui-row"> <li class="mui-col-sm-8 mui-col-xs-8"><span>制造商:</span><p>{{item.brand_name}}</p></li> <li class="mui-col-sm-4 mui-col-xs-4 t-r ">货期:{{item.delivery_time||'- -'}}</li> <li class="mui-col-sm-8 mui-col-xs-8"> <span>供应商:</span> <p>{{item.supplier_name||'- -'}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r"> 最小起订量:<font v-html="item.min_buy"></font> </li> <li class="mui-col-sm-7 mui-col-xs-7"> 标准包装量:<font v-html="item.min_mpq"></font> </li> <li class="mui-col-sm-5 mui-col-xs-5 danjia t-r">单价:{{item.goods_price_format}}</li> </ul> <p class="lose-but"> <a :href="'/s/?k='+item.goods_name" class="fr but-bor-red muiclickbug" guid="6436">去搜索</a> <span>已失效</span> </p> </div> </div> </div> </div> </div> </div> <!--自营盒子--> <div class="zyBox" v-show="type==2" :style="{'paddingTop':(paddingTop-44)+'px'}"> <!--登录提示框--> <div class="logintip zyfixed" v-if="!isLogingo"> <span>登录后商品会同步到您账户中</span> <a :href="loginUrl">登录</a> </div> <div class="dataBox"> <!--编辑--> <div class="editBox clr zyfixed" :style="{'top':paddingTop+'px'}" v-if="!isNoContent"> <a href="javascript:void(0)" class="edit-btn fr" @click="isEditf()" v-if="isEdit">完成</a> <a href="javascript:void(0)" class="edit-btn fr" @click="isEditf()" v-if="!isEdit">编辑</a> </div> <div class="zyDataGp"> <div class="xianhuoData" > <div class="mui-row headxianhuoqihuo" v-if="zy1Data.length>0"> <div class="mui-col-sm-1 mui-col-xs-1 ta-c zdychec1"> <van-checkbox v-model="zy1DataIsCheck" @click="checkWatchZy(1)"></van-checkbox> </div> <div class="mui-col-sm-11 mui-col-xs-11"><font class="zyqxtype">现货商品</font></div> </div> <template v-for="(item,indexdata) in zy1Data"> <div class="mui-row shop-block sale_type_data" > <div class="mui-col-sm-1 mui-col-xs-1 ta-c mt-10 zdychec"> <van-checkbox v-model="item.check" @change="checkWatch"></van-checkbox> </div> <div class="mui-col-sm-11 mui-col-xs-11"> <h4 class="mui-row"> <p class="mui-col-sm-11 mui-col-xs-11"> <a :href="'/item/'+item.goods_id+'.html'" class="f-333" >{{item.sku_name}}</a> </p> <p class="mui-col-sm-1 mui-col-xs-1 ta-c"> <a href="javascript:void(0)" guid="1991" v-show="item.editState" @click="deleteGoods(item.cart_id)" class="icon iconfont icon-shanchu delete-tier f-333"></a> </p> </h4> <div class="mt-10" v-if="item.ac_type==8&&item.activity_info"><span class="hot-price">{{item.activity_info.sign_name}}</span><font class="f-red"> {{item.activity_info.activity_ad}}</font></div> <ul class="mui-row"> <li class="mui-col-sm-8 mui-col-xs-8"> <span>制造商:</span> <p>{{item.brand_name}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r "> 库存:<font v-html="item.stock"></font> </li> <li class="mui-col-sm-8 mui-col-xs-8"> <span style="width:37px;">型号:</span> <p style="padding-left:0px;">{{item.goods_name||'- -'}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r"> 最小起订量:<font v-html="item.min_buy"></font> </li> <li class="mui-col-sm-7 mui-col-xs-7"> 倍数:<font v-html="item.mpl"></font> </li> <li class="mui-col-sm-5 mui-col-xs-5 danjia t-r" > 单价:{{item.goods_price_format}} </li> </ul> <div class="mui-row"> <div class="mui-col-sm-7 mui-col-xs-7"> <div class="morePrice"> <div :id="'priceContent'+item.cart_id" :class="{'lyClass':item.tiered&&item.tiered.length<4,'lyMoreData':item.tiered&&item.tiered.length>3}" > <div class="mui-row act" v-for="(itemPrice,index) in item.tiered" :class="{'dataNo':(index>2)&&!item.priceCheck}"> <p class="mui-col-sm-6 mui-col-xs-6"><font v-html="itemPrice.purchases"></font>+</p> <p class="mui-col-sm-6 mui-col-xs-6 f-red">¥{{item.ac_type == 6?itemPrice.price_ac:itemPrice.price_cn}}</p> </div> </div> <div class="more-height" v-if="item.tiered&&item.tiered.length>3" @click="priceRow(zy1Data,indexdata,item.cart_id)" v-html="item.checkBtn||defaultBtn">更多梯度价格<i class="iconfont icon-bot"></i></div> </div> </div> <div class="mui-col-sm-5 mui-col-xs-5"> <div class="clr add-num"> <div class="mui-numbox edit-input"> <button class="mui-btn mui-btn-numbox-minus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.mpl,item.min_buy,item.stock,item.cart_id,1)"> <i class="icon iconfont icon-jian"></i> </button> <input class="mui-input-numbox valuep" type="number" :id="'test'+item.cart_id" @blur="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.mpl,item.min_buy,item.stock,item.cart_id,3)" :value="item.goods_number | numberCode"> <button class="mui-btn mui-btn-numbox-plus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.mpl,item.min_buy,item.stock,item.cart_id,2)"> <i class="icon iconfont icon-jia"></i> </button> </div> </div> <p class="subtotal f-999"> 小计:<b class="f-red rewTotal">{{item.goods_amount_format}}</b> </p> </div> </div> </div> </div> </template> </div> <div class="qihuoData" > <div class="mui-row headxianhuoqihuo" v-if="zy2Data.length>0" > <div class="mui-col-sm-1 mui-col-xs-1 ta-c zdychec1"> <van-checkbox v-model="zy2DataIsCheck" @click="checkWatchZy(2)"></van-checkbox> </div> <div class="mui-col-sm-11 mui-col-xs-11"><font class="zyqxtype">期货商品</font></div> </div> <template v-for="(item,indexdata) in zy2Data"> <div class="mui-row shop-block sale_type_data" > <div class="mui-col-sm-1 mui-col-xs-1 ta-c mt-10 zdychec"> <van-checkbox v-model="item.check" @change="checkWatch"></van-checkbox> </div> <div class="mui-col-sm-11 mui-col-xs-11"> <h4 class="mui-row"> <p class="mui-col-sm-11 mui-col-xs-11"> <a :href="'/item/'+item.goods_id+'.html'" class="f-333" >{{item.sku_name}}</a> </p> <p class="mui-col-sm-1 mui-col-xs-1 ta-c"> <a href="javascript:void(0)" v-show="item.editState" @click="deleteGoods(item.cart_id)" class="icon iconfont icon-shanchu delete-tier f-333"></a> </p> </h4> <div class="mt-10" v-if="item.ac_type==8&&item.activity_info"><span class="hot-price">{{item.activity_info.sign_name}}</span><font class="f-red"> {{item.activity_info.activity_ad}}</font></div> <ul class="mui-row"> <li class="mui-col-sm-8 mui-col-xs-8"> <span>制造商:</span> <p>{{item.brand_name}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r "> 库存:<font v-html="item.stock"></font> </li> <li class="mui-col-sm-8 mui-col-xs-8"> <span style="width:37px;">型号:</span> <p style="padding-left:0px;">{{item.goods_name||'- -'}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r"> 最小起订量:<font v-html="item.min_buy"></font> </li> <li class="mui-col-sm-7 mui-col-xs-7"> 倍数:<font v-html="item.mpl"></font> </li> <li class="mui-col-sm-5 mui-col-xs-5 danjia t-r" > 单价:{{item.goods_price_format}} </li> </ul> <div class="mui-row"> <div class="mui-col-sm-7 mui-col-xs-7"> <div class="morePrice"> <div :id="'priceContent'+item.cart_id" :class="{'lyClass':item.tiered&&item.tiered.length<4,'lyMoreData':item.tiered&&item.tiered.length>3}" > <div class="mui-row act" v-for="(itemPrice,index) in item.tiered" :class="{'dataNo':(index>2)&&!item.priceCheck}"> <p class="mui-col-sm-6 mui-col-xs-6"><font v-html="itemPrice.purchases"></font>+</p> <p class="mui-col-sm-6 mui-col-xs-6 f-red">¥{{item.ac_type == 6?itemPrice.price_ac:itemPrice.price_cn}}</p> </div> </div> <div class="more-height" v-if="item.tiered&&item.tiered.length>3" @click="priceRow(zy2Data,indexdata,item.cart_id)" v-html="item.checkBtn||defaultBtn">更多梯度价格<i class="iconfont icon-bot"></i></div> </div> </div> <div class="mui-col-sm-5 mui-col-xs-5"> <div class="clr add-num"> <div class="mui-numbox edit-input"> <button class="mui-btn mui-btn-numbox-minus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.mpl,item.min_buy,item.stock,item.cart_id,1)"> <i class="icon iconfont icon-jian"></i> </button> <input class="mui-input-numbox valuep" type="number" :id="'test'+item.cart_id" @blur="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.mpl,item.min_buy,item.stock,item.cart_id,3)" :value="item.goods_number | numberCode"> <button class="mui-btn mui-btn-numbox-plus " type="button" @click="changeNumber(item.allow_presale,item.ac_type,item.goods_number,item.mpl,item.min_buy,item.stock,item.cart_id,2)"> <i class="icon iconfont icon-jia"></i> </button> </div> </div> <p class="subtotal f-999"> 小计:<b class="f-red rewTotal">{{item.goods_amount_format}}</b> </p> </div> </div> </div> </div> </template> </div> <div class="shopcart content-no" v-if="isNoContent"> <dl class="shop-empty"> <dt><i class="iconfont icon-gouwuche1"></i></dt> <dd> <h4>您的购物车空空如也</h4> <p><a class="muiclickbug" href="/v3/search/search_index.html">搜索型号 >></a></p> </dd> </dl> </div> <div class="sxData" v-for="item in zy1LoseData"> <div class="mui-row shop-block shop-lose" > <div class="mui-col-sm-1 mui-col-xs-1"></div> <div class="mui-col-sm-11 mui-col-xs-11"> <h4 class="mui-row"> <p class="mui-col-sm-11 mui-col-xs-11"> <a href="javascript:void(0)">{{item.sku_name}}</a> </p> </h4> <div class="mt-10" v-if="item.ac_type==8&&item.activity_info"><span class="hot-price">{{item.activity_info.sign_name}}</span><font class="f-red"> {{item.activity_info.activity_ad}}</font></div> <ul class="mui-row"> <li class="mui-col-sm-8 mui-col-xs-8"><span>制造商:</span><p>{{item.brand_name}}</p></li> <li class="mui-col-sm-4 mui-col-xs-4 t-r huoqi" >货期:{{item.delivery_time||'- -'}}</li> <li class="mui-col-sm-8 mui-col-xs-8"> <span>供应商:</span> <p>{{item.supplier_name||'- -'}}</p> </li> <li class="mui-col-sm-4 mui-col-xs-4 t-r"> 最小起订量:<font v-html="item.min_buy"></font> </li> <li class="mui-col-sm-7 mui-col-xs-7"> 标准包装量:<font v-html="item.min_mpq"></font> </li> <li class="mui-col-sm-5 mui-col-xs-5 danjia t-r">单价:{{item.goods_price_format}}</li> </ul> <p class="lose-but"> <a :href="'/s/?k='+item.goods_name" class="fr but-bor-red muiclickbug" guid="6436">去搜索</a> <span>已失效</span> </p> </div> </div> </div> </div> </div> </div> <!--购物车底部--> <div class="mui-row shop-but" v-if="!isNoContent"> <div class="mui-col-sm-3 mui-col-xs-3 checkallbox"> <van-checkbox v-model="isAll" @click="checkAll">全选</van-checkbox> </div> <div class="mui-col-sm-6 mui-col-xs-6 sum" v-if="!isEdit"> <h4 class="fw">总金额:<span class="f-red ">{{totalMoney}}</span></h4> <p class="f-999">(不含运费)</p> </div> <div class="mui-col-sm-3 mui-col-xs-3 button" :class="{'dis':(totalNum==0)}" v-if="!isEdit"> <a href="javascript:void('0')" class="but-red" @click="goSubmit">去结算<span>(<span class="carNum">{{totalNum}}</span>)</span></a> </div> <div class="mui-col-sm-9 mui-col-xs-9 button " v-if="isEdit"> <a href="javascript:void(0)" class="but-orange fr delbtn" @click="deleteGoods(0)">删除</a> <span class="f-blue fr clearbtn" @click="deleteGoods(0,1)">清除失效商品</span> </div> </div> <Header :isCar="isCar" :ly1Length="ly1Length" :ly2Length="ly2Length" :zy1Length="zy1Length" :meaushow="meaushow" :bgcolor="bgcolor" @listTab="listTab"></Header> <van-loading type="spinner" color="#000" class="loading-background" v-if="loading"/> </div> </template> <script> import Vue from 'vue'; import {mapState} from 'vuex' import Header from "@/views/common/Header.vue"; import {Loading,Toast,Checkbox,Dialog} from 'vant'; import Util from "../../util"; Vue.use(Loading).use(Toast).use(Checkbox).use(Dialog); export default { name: "car", data(){ return { isCar:true, meaushow:true, bgcolor:"#fff", defaultBtn: '更多梯度价格<i class="icon-bot"></i>', loginUrl:'/v3/login?referer='+encodeURIComponent(window.location.href),//登录地址 type:1,//联营 1 //自营2 delivery:1,//大陆1 //香港2, paddingTop:88,//控制登录提示条 isEdit:false,//是否是编辑状态 isLogingo:Util.isLogin()==1?true:false,//强登录太 zy1DataIsCheck:true,//现货全部选中状态 zy2DataIsCheck:false,//期货全部选中状态 isAll:true,//商品全部选中 totalMoney:0,//总金额 totalNum:0,//总数量 isNoContent:false,//没有数据展示 } }, computed:{ ...mapState({ loading: state => state.car.loading, loading1: state => state.car.loading1, ly1: state => state.car.ly1, ly2: state => state.car.ly2, zy1: state => state.car.zy1, ly1Data: state => state.car.ly1Data, ly2Data: state => state.car.ly2Data, zy1Data: state => state.car.zy1Data, zy2Data: state => state.car.zy2Data, ly1Length: state => state.car.ly1Length, ly2Length: state => state.car.ly2Length, zy1Length: state => state.car.zy1Length, ly1LoseData: state => state.car.ly1LoseData, ly2LoseData: state => state.car.ly2LoseData, zy1LoseData: state => state.car.zy1LoseData, totlaMState: state => state.car.totlaMState, }) }, created(){ this.loginTip(); this.getCarCount(); this.getData(); this.priceInit(); }, watch:{ totlaMState(val){ if(val){ this.priceInit(); } }, loading1(val){ this.isNoContent=false; if(!val){ this.priceInit(); this.isNOD(); } }, isEdit(val){ var list_1=this.ly1Data,list_2=this.ly2Data,list_3=this.zy1Data,list_4=this.zy2Data for(var i=0;i<list_1.length;i++){ list_1[i].editState=val; } for(var i=0;i<list_2.length;i++){ list_2[i].editState=val; } for(var i=0;i<list_3.length;i++){ list_3[i].editState=val; } for(var i=0;i<list_4.length;i++){ list_4[i].editState=val; } }, ly1Data(val){ this.priceInit(); if(val.length==0){ this.isNOD(); } }, ly2Data(val){ this.priceInit(); if(val.length==0){ this.isNOD(); } }, zy1Data(val){ this.priceInit(); this.checkWatch(); if(val.length==0){ this.isNOD(); } }, zy2Data(val){ this.priceInit(); this.checkWatch(); if(val.length==0){ this.isNOD(); } }, ly1LoseData(val){ if(val.length==0){ this.isNOD(); } }, ly2LoseData(val){ if(val.length==0){ this.isNOD(); } }, zy1LoseData(val){ if(val.length==0){ this.isNOD(); } }, }, methods:{ isNOD:function(){ //没数据展示 if(this.type==1){ //联营 if(this.delivery==1){ //大陆 if(this.ly1Data.length==0&&this.ly1LoseData.length==0){ this.isNoContent=true; }else{ this.isNoContent=false; } }else{ //香港 if(this.ly2Data.length==0&&this.ly2LoseData.length==0){ this.isNoContent=true; }else{ this.isNoContent=false; } } }else{ //自营 if(this.zy1Data.length==0&&this.zy2Data.length==0&&this.zy1LoseData.length==0){ this.isNoContent=true; }else{ this.isNoContent=false; } } }, //是否登录UI loginTip:function(){ if(this.isLogingo){ this.paddingTop=44; }else{ this.paddingTop=88; } }, //友情提示 tipLy:function(){ Dialog.alert({ messageAlign:"left", title: '友情提醒', message: '<div class="remind-content">\n' + '1.国际运费补差情况<br>' + '(1)由于部分型号(如风扇、线缆、模块等)采购数量较多、体积较大或重量较重等原因出现超重情况时,视供应商不同可能需要客户补交超出部分的运费;<br>' + '(2)出现超重情况时,我们客服人员会第一时间与您取得联系,提醒您补交运费事项。<br><br>' + '2.关税、商检、3C费用<br>' + '(1)根据国家海关规定:集成电路(IC)类的进口免关税;<br>' + '(2)非集成电路类的元器件(如继电器、带通滤波器、衰减器、各类模块、线缆等)可能需要额外增收3%-12%的关税;<br>' + '(3)开关、保险丝、气体放电管等需要商检和3C认证费用;<br>' + '(4)如果您所提交的订单中包含需要缴纳关税或其他报关费用的型号,我们客服人员会第一时间与您取得联系,并告知补款相关事宜。<br><br>\n' + '3.关于禁运型号<br>' + '(1)猎芯网严格遵守海外供应商的相关出口限制规定,但凡涉及出口限制/禁运的型号均不予下单采购,具体情况需根据供应商的出货情况而定;<br>' + '(2)有时可能会发生在发货前临时被告知属于出口限制/禁运范围,需要撤单退款的情况。由此而产生的损失,猎芯网将不承担责任。给您带来不便我们深表歉意,敬请谅解。<br><br>\n' + '4.订单审核机制<br>' + '(1)由于货物可能存在的关税、禁运等情况,猎芯网设置订单审核机制。用户成功提交订单后,需要由猎芯网客服人员确认订单,没有问题后再进行付款。订单审核的具体状态可登陆会员中心查看,或者联系在线客服了解详情。<br><br>\n' + '5.型号数据更新延迟问题<br>' + '(1)猎芯网部分数据来源于供应商,基本保证实时更新。但是由于供应商库存数据对全球开放或者供应商网站本身数据存在少量更新不及时的情况,您在采购时所看到的现货价格和库存数等信息有可能存在些许误差;<br>' + '(2)成功下单后,若订单状态更新为“已确认订单”,请尽快付款,以免价格和库存数量发生变动。如有特殊情况发生,我们客服人员会第一时间与您取得联系。<br><br>客服热线:0755-82560956<br>企业QQ:800158432\n' + '</div>' }).then(() => { // on close }); }, //自营联营切换 listTab:function(type){ this.type=type; this.checkWatch(); this.priceInit(); this.isNOD(); this.isEdit=false; if(type==2&&this.zy1){ return } if(type==1){ if(this.delivery==1&&this.ly1){ return } if(this.delivery==2&&this.ly2){ return } } this.getData(); }, //获取数据 getData:function(){ this.$store.dispatch({ type: 'cartList', delivery_place:this.delivery, order_goods_type: this.type }) }, //获取购物车数量 getCarCount:function(){ this.$store.dispatch({ type: 'allcount' }) }, //大陆香港切换 deliveryTab:function(delivery){ this.delivery=delivery; this.checkWatch(); this.priceInit(); this.isNOD(); this.isEdit=false; if(this.delivery==1&&this.ly1){ return } if(this.delivery==2&&this.ly2){ return } this.getData(); }, //阶梯价格处理 priceRow: function(dataList,index,id) { let dom = document.getElementById("priceContent" + id); let arrLength = dataList[index].tiered.length; if (dataList[index]["priceCheck"]) { console.log(1) dom.style.height = "54px"; this.$set(dataList[index], "priceCheck", false); this.$set( dataList[index], "checkBtn", '更多梯度价格<i class="icon-bot"></i>' ); } else { console.log(2) dom.style.height = 18 * arrLength + "px"; dom.style.transition = `height ${(arrLength - 3) * 0.125}s linear`; dom.style.webkitTransition = `height ${(arrLength - 3) * 0.125}s linear`; this.$set(dataList[index], "priceCheck", true); this.$set( dataList[index], "checkBtn", '收起梯度价格<i class="icon-top"></i>' ); } }, //编辑 isEditf:function(){ this.isEdit=!this.isEdit; }, //基础复选框 checkWatch:function(){ var self=this; if(self.type==1){ //联营 var list_=self.delivery==1?this.ly1Data:this.ly2Data; self.isAll=true; for(var i=0;i<list_.length;i++){ if(!list_[i].check){ self.isAll=false; } } }else{ self.isAll=true; //自营 var list_1=this.zy1Data; self.zy1DataIsCheck=true; for(var i=0;i<list_1.length;i++){ if(!list_1[i].check){ self.zy1DataIsCheck=false; self.isAll=false; } } var list_2=this.zy2Data; self.zy2DataIsCheck=true; for(var j=0;j<list_2.length;j++){ if(!list_2[j].check){ self.zy2DataIsCheck=false; self.isAll=false; } } } this.priceInit(); }, //期货现货复选框 checkWatchZy:function(tp){ var self=this; var list_1=this.zy1Data; var list_2=this.zy2Data; if(tp==1){ //现货 for(var i=0;i<list_1.length;i++){ if(!self.zy1DataIsCheck){ list_1[i].check=true; }else{ list_1[i].check=false; } } }else{ //期货 for(var i=0;i<list_2.length;i++){ if(!self.zy2DataIsCheck){ list_2[i].check=true; }else{ list_2[i].check=false; } } } this.priceInit(); }, //全选 checkAll:function(){ var self=this; if(self.type==1){ //联营 var list_=self.delivery==1?this.ly1Data:this.ly2Data; if(list_.length<=0){return} for(var i=0;i<list_.length;i++){ if(!self.isAll){ list_[i].check=true; }else{ list_[i].check=false; } } }else{ //自营 var list_1=this.zy1Data; var list_2=this.zy2Data; if(!self.isAll){ self.zy1DataIsCheck=true; self.zy2DataIsCheck=true; for(var i=0;i<list_1.length;i++){ list_1[i].check=true; } for(var i=0;i<list_2.length;i++){ list_2[i].check=true; } }else{ self.zy1DataIsCheck=false; self.zy2DataIsCheck=false; for(var i=0;i<list_1.length;i++){ list_1[i].check=false; } for(var i=0;i<list_2.length;i++){ list_2[i].check=false; } } } this.priceInit(); }, //渲染价格 priceInit:function(){ if(this.type==1){ //联营 var list_=this.delivery==1?this.ly1Data:this.ly2Data,num=0,totalnum=0; for(var i=0;i<list_.length;i++){ if(list_[i].check){ num+=Number(Number((list_[i].goods_amount_format).slice(1)).toFixed(4)); totalnum++; } } this.totalNum=totalnum; this.totalMoney=(this.delivery==1?"¥":"$")+num.toFixed(4); }else{ //自营 var list_1=this.zy1Data,list_2=this.zy2Data,num=0,totalnum=0; for(var i=0;i<list_1.length;i++){ if(list_1[i].check){ num+=Number(Number((list_1[i].goods_amount_format).slice(1)).toFixed(4)); totalnum++; } } for(var i=0;i<list_2.length;i++){ if(list_2[i].check){ num+=Number(Number((list_2[i].goods_amount_format).slice(1)).toFixed(4)); totalnum++; } } this.totalNum=totalnum; this.totalMoney="¥"+num.toFixed(4); } }, //删除 deleteGoods:function(arr,act){ var cart_id,self=this; var act=act?'faild':'normal'; if(act=='normal'){ //删除 if(arr==0){ //多个删除逻辑 var arrp=this.getIDs(); cart_id=arrp.join(","); }else{ //单个删除 cart_id=arr; } if(cart_id==""){ Toast({ message: "请选中至少一个商品", duration: 1500 }); return; } }else{ //清除 var arrp=[]; if(self.type==1){ var list_=self.delivery==1?this.ly1LoseData:this.ly2LoseData; for(var i=0;i<list_.length;i++){ arrp.push(list_[i].cart_id) } }else{ var list_=this.zy1LoseData; for(var i=0;i<list_.length;i++){ arrp.push(list_[i].cart_id) } } cart_id=arrp.join(","); if(cart_id==""){ Toast({ message: "当前没有要清除的商品", duration: 1500 }); return; } } Dialog.confirm({ message: '您确定要'+(act?'清除':'删除')+'当前商品吗', cancelButtonText:'再看看' }).then(() => { self.$store.dispatch({ type: 'cartDelete', cart_id:cart_id, act: act, types:self.type, delivery:self.delivery }) }).catch(() => { }); }, //获取当前选中ID数组f getIDs:function(){ var self=this; var arrp=[]; if(this.type==1){ var list_=self.delivery==1?this.ly1Data:this.ly2Data; for(var i=0;i<list_.length;i++){ if(list_[i].check){ arrp.push(list_[i].cart_id) } } }else{ //自营 var list_1=this.zy1Data,list_2=this.zy2Data; if(list_1.length>0){ for(var i=0;i<list_1.length;i++){ if(list_1[i].check){ arrp.push(list_1[i].cart_id) } } } if(list_2.length>0){ for(var l=0;l<list_2.length;l++){ if(list_2[l].check){ arrp.push(list_2[l].cart_id) } } } } return arrp; }, //结算提交 goSubmit:function(){ var self=this; var arrp=self.getIDs(); if(arrp.length==0){ Toast({ message: "当前没有选中商品", duration: 1500 }); return; } if(self.type==2){ var arr1 = self.zy1Data,arr2=self.zy2Data,arr3=[]; for(var i=0;i<arrp.length;i++){ var indeval=arrp[i]; for(var p=0;p<arr1.length;p++){ if(indeval==arr1[p].cart_id){ arr3.push(arr1[p].sale_type) } } for(var j=0;j<arr2.length;j++){ if(indeval==arr2[j].cart_id){ arr3.push(arr2[j].sale_type) } } } if(arr3.indexOf('1')!=-1 && arr3.indexOf('2')!=-1){ Toast({ message: "请分开结算期货订单和现货订单", duration: 1500 }); return; } } var confirm_=(self.type==2)?window.location.origin+"/v3/order/confirm?type=zy":window.location.origin+"/v3/order/confirm?type=other" window.sessionStorage.setItem("car_xk",arrp.join(",")); self.$store.dispatch({ type: 'confirmBehavior', url_:confirm_ }) }, changeNumber:function(allowPresale,goodType,number,mpq,min,stock,cart_id,type){ var self=this; var num=Util.aggxde(number), mpq=Util.aggxde(mpq),//包装数或者倍数 min=Util.aggxde(min),//最小购买数量 stock=Util.aggxde(stock),//最大购买数量 summitNum=num; if(min>mpq){ if(min%mpq){ min=Math.ceil(min/mpq)*mpq; } }else{ min=mpq; } if(stock%mpq){ stock=Math.floor(stock/mpq)*mpq; } if(type==1){ //减小 summitNum=summitNum-mpq; if(summitNum<min){ summitNum=min; Toast({ message: "购买数量不能小于最小购买数量!", duration: 1500 }); return; } }else if(type==2){ //增加 summitNum=summitNum+mpq; if(summitNum>stock){ if(self.type==1){ summitNum=stock; Toast({ message: "购买数量不能大于最大购买数量!", duration: 1500 }); return; }else if(self.type == 2){ if(goodType == 6 && allowPresale == 1){ self.$toast("想要购买更多,请联系客服"); var inputVal = num||0; if(inputVal!==0||inputVal!==mpq){ summitNum = Math.floor(stock/mpq)*mpq }else{ summitNum = inputVal } return } } } }else{ //失去焦点改变 var thisNum=Number(document.getElementById('test'+cart_id).value); summitNum=Math.ceil(thisNum/mpq)*mpq; document.getElementById('test'+cart_id).value=summitNum; if(summitNum<min){ summitNum=min; Toast({ message: "购买数量不能小于最小购买数量!", duration: 1500 }); document.getElementById('test'+cart_id).value=summitNum; return; } if(summitNum>stock){ if(self.type==1){ summitNum=stock; Toast({ message: "购买数量不能大于最大购买数量!", duration: 1500 }); }else if(self.type==2){ if(goodType == 6 && allowPresale == 1){ self.$toast("想要购买更多,请联系客服"); var inputVal = num||0; if(inputVal!==0||inputVal!==mpq){ summitNum = Math.floor(stock/mpq)*mpq }else{ summitNum = inputVal } } console.log(inputVal) } document.getElementById('test'+cart_id).value=summitNum; return; } } this.$store.dispatch({ type: 'changenum', cart_id:cart_id, num: summitNum, delivery_place:(self.type==1)?self.delivery:"", types:type }) } }, components:{ Header } } </script> <style scoped> @import "../../assets/css/car/index.min.css"; </style>