ホームページ

JS特殊効果

その他の特殊効果

ショッピングカート商品の累計決済効果

ダウンロード中プレビュー

<!DOCTYPE html>
<html>
<頭>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>vue购物车商品累積加结算代码 </title>


<link rel="stylesheet" href="js/layui/css/layui.css" />
<link rel="stylesheet" href="js/eleme-ui/index.css" />
<link rel="stylesheet" href="css/ShoppingCart.css" />

</head>
<本文>


<div class="row " id="myVue" v-cloak>
<div class="col-lg-10col-lg-offset-1" >
<div class="layui-form">
<table class="ShopCartTable レイアウトテーブル">
<頭>
<tr>
<th class="selectLeft">
<テンプレート>
<el-checkbox @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
</テンプレート>
<span class="selectLeftGoods">商品またはサービス名</span>
</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</頭>
<本体>
<tr v-for="(tabledatas,index) in shopTableDatas">
<td class="selectLeft">
<テンプレート>
<el-checkbox @change="checkedRadioBtn(tabledatas)" v-model="tabledatas.checked"></el-checkbox>
</テンプレート>
<span class="goodName">
<img class="goodImg" :src="tabledatas.src" />
</span>
<span class="goodName 商品名">
<h2 class="goodname" v-text="tabledatas.name"></h2>
<p class="グッドゲイリー">
<span>供应商：</span>
<span v-text="tabledatas.supplier"></span>
</p>
<p class="グッドゲイリー">
<span>発行地：</span>
<span v-text="tabledatas.ConPlace"></span>
</p>
</span>
</td>
<td class="danPrice">{{tabledatas.price | MoneyFiler}}</td>
<td>
<i @click="goodNum(tabledatas,-1)" class="fa deleteBtn" aria-hidden="true">-</i>
<input v-model="tabledatas.num" type="text" class="form-control numInput" aria-label="...">
<i @click="goodNum(tabledatas,1)" class="fa addBtn" aria-hidden="true"> </i>
</td>
<td>
<p class="totalPrice">{{tabledatas.price*tabledatas.num | MoneyFiler}}</p>
</td>
<td class="功能">
<p class="deletegoods" @click="alertRadio(index)">删除</p>
<p @click="alertmovesSavegoods(index)">我の收藏</p>
<テンプレート v-if="tabledatas.saveandremove">
<p @click="tabledatas.saveandremove = false">追加收藏</p>
</テンプレート>
<テンプレート v-else>
<p :class="{'saveCheck':!tabledatas.saveandremove}" @click="tabledatas.saveandremove = true">取消收藏</p>
</テンプレート>
</td>
</tr>
</tbody>
</テーブル>
<div class="行テーブルフッター">
<テンプレート>
<el-checkbox style="padding-left:16px" @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
</テンプレート>
<span class="removeMuch" @click="alertMuch">删除选中の商品またはサービス</span>
<span class="removeSaves" @click="alertMuchgoods">移へ我的收藏</span>
<span class="servicenum">已选择<span class="goodsNum">{{goodsNum}}</span>件商品<span class="goodsNum">{{serviceNum}}< ;/span>项服务</span>
<span class="totalclassPoin">总价：<span class="totalMoneyClass">{{totalMoney | MoneyFiler}}</span></span>
<span @click="saveData" class="SettlementBtn">去结算</span>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="js/vue/vue.min.js" ></script>
<script type="text/javascript" src="js/eleme-ui/index.js" ></script>
<script type="text/javascript" src="js/ShoppingCart.js" ></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</本文>
</html>

これは j ショッピングカート製品の累積決済効果です。必要な友人は直接ダウンロードして使用できます。その他の特殊効果コードは PHP 中国語 Web サイトで見つけることができます。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn