vue仿淘宝结账订单
<template>
<div class=
"container"
>
<div class=
"checkout-title"
>
<span>购物车</span>
</div>
<table class=
"product_table"
>
<tbody>
<template v-
for
=
"(list,index) in table_list"
>
<tr>
<td width=
"7%"
min-width=
"94px"
v-
if
=
"index===0"
>
<input type=
"checkbox"
v-model=
'checked'
@click=
'checkedAll'
>
</td>
<td width=
"7%"
v-
if
=
"index!==0"
>
<input type=
"checkbox"
v-model=
'checkList'
:value=
"list.id"
@click=checkProductFun(index,$event)>
</td>
<td width=
"43%"
>{{list.product_inf}}</td>
<td width=
"10%"
v-
if
=
"index===0"
>{{list.product_price}}</td>
<td width=
"10%"
v-
if
=
"index!==0"
>¥{{list.product_price}}</td>
<td width=
"10%"
v-
if
=
"index===0"
>{{list.product_quantity}}</td>
<td width=
"10%"
v-
if
=
"index!==0"
>
<a class=
"numbers plus"
href=
"javascript:void(0)"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
@click=
"changeMoney(index,-1)"
>-</a>
<input class=
"txt_number"
type=
"text"
v-model=
"list.product_quantity"
size=
"1"
disabled>
<a class=
"numbers reduce"
href=
"javascript:void(0)"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
@click=
"changeMoney(index,1)"
>+</a>
</td>
<td width=
"10%"
>{{list.total_amount}}</td>
<td width=
"20%"
v-
if
=
"index===0"
>编辑</td>
<td width=
"20%"
v-
if
=
"index!==0"
>
<a href=
"javascript:void(0)"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
class=
"update"
>修改</a>
<a href=
"javascript:void(0)"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
class=
"delete"
>删除</a>
</td>
</tr>
</template>
</tbody>
</table>
<div class=
"price_total_bottom"
>
<div class=
"price_total_ms"
>
<label>合计:{{allProductTotal}}</label>
<router-link to=
"/userAddress"
>结账</router-link>
</div>
</div>
</div>
</template>
<script>
import userAddress from
'./address'
export
default
{
components: {
userAddress
},
data() {
return
{
table_list: [{
'id'
: 0,
'product_inf'
:
'商品信息'
,
'product_price'
:
'商品金额'
,
'product_quantity'
:
'商品数量'
,
'total_amount'
:
'总金额'
}, {
'id'
:
'1'
,
'product_inf'
:
'女士银手链'
,
'product_price'
: 100,
'product_quantity'
: 10,
'total_amount'
: 1000
}, {
'id'
:
'2'
,
'product_inf'
:
'女士银手镯'
,
'product_price'
: 200,
'product_quantity'
: 5,
'total_amount'
: 1000
}, {
'id'
:
'3'
,
'product_inf'
:
'女士银耳环'
,
'product_price'
: 50,
'product_quantity'
: 10,
'total_amount'
: 500
}],
checked:
false
,
allProductTotal:
null
,
checkList: [
'1'
,
'3'
]
}
},
mounted:
function
() {
var
_this =
this
;
// 根据data中默认勾选的checkbox,计算当前勾选的商品总价
_this.allProductTotal = 0;
this
.checkList.forEach(
function
(element1, index1) {
_this.table_list.forEach(
function
(element2, index2) {
if
(element1 == element2.id) {
_this.$set(_this.table_list[index2],
'checked'
,
true
);
_this.allProductTotal += element2.product_price * element2.product_quantity;
}
});
});
},
methods: {
checkedAll:
function
() {
var
_this =
this
;
_this.allProductTotal = 0;
if
(_this.checked) {
//实现反选
_this.checkList = [];
_this.table_list.forEach(
function
(item, index) {
if
(_this.table_list[index].checked) {
_this.table_list[index].checked =
false
;
}
});
}
else
{
//实现全选
_this.checkList = [];
_this.table_list.forEach(
function
(item, index) {
if
(index > 0) {
_this.checkList.push(item.id);
if
(!_this.table_list[index].checked) {
_this.$set(_this.table_list[index],
'checked'
,
true
);
}
else
{
_this.table_list[index].checked =
true
;
}
if
(item.checked) {
_this.allProductTotal += item.product_price * item.product_quantity;
}
}
});
}
},
checkProductFun(index, event) {
//根据checkbox是否勾选,计算勾选后的商品总价
var
_this =
this
;
_this.allProductTotal = 0;
if
(event.target.checked) {
if
(!_this.table_list[index].checked) {
_this.$set(_this.table_list[index],
'checked'
,
true
);
}
}
else
{
if
(_this.table_list[index].checked) {
_this.table_list[index].checked =
false
;
}
}
this
.table_list.forEach(
function
(item, index) {
if
(item.checked) {
_this.allProductTotal += item.product_price * item.product_quantity;
}
});
},
changeMoney:
function
(index, way) {
if
(way > 0) {
this
.table_list[index].product_quantity++;
}
else
{
this
.table_list[index].product_quantity--;
if
(
this
.table_list[index].product_quantity < 1) {
this
.table_list[index].product_quantity = 1;
}
}
this
.calcTotalPrice();
},
calcTotalPrice:
function
() {
var
_this =
this
;
_this.allProductTotal = 0;
this
.table_list.forEach(
function
(item, index) {
if
(index > 0) {
//因为第一行为表头不需要进行计算
item.total_amount = item.product_price * item.product_quantity;
//根据商品数量计算每一个商品对应的总金额
}
if
(item.checked) {
_this.allProductTotal += item.product_price * item.product_quantity;
//根据是否否选该商品的checkbox,计算总价
}
});
},
},
watch: {
//深度 watcher
'checkList'
: {
handler:
function
(val, oldVal) {
if
(val.length ===
this
.table_list.length - 1) {
this
.checked =
true
;
}
else
{
this
.checked =
false
;
}
},
deep:
true
}
}
}
</script>
<!-- Add
"scoped"
attribute to limit CSS to
this
component only -->
<style scoped>
.container {
padding: 69px 0 54px 0;
}
table {
border-collapse: collapse;
border-color: transparent;
text-align: center;
}
.product_table,
.product_table tbody {
width: 100%
}
.product_table tr:first-child {
background:
#ece6e6;
color:
#e66280;
font-size: 20px;
}
.product_table td {
border: 1px solid
#f3e8e8;
height: 62px;
line-height: 62px;
}
.product_table a.update:link,
.product_table a.update:visited,
.product_table a.update:hover,
.product_table a.update:active {
color:
#1CE24A;
}
.product_table a.
delete
:link,
.product_table a.
delete
:visited,
.product_table a.
delete
:hover,
.product_table a.
delete
:active {
color:
#ffa700;
}
.product_table .txt_number {
text-align: center;
}
.product_table .numbers {
font-weight: bold;
}
.price_total_bottom {
font-size: 20px;
padding: 20px 10px;
}
.price_total_ms {
text-align: right;
}
.price_total_bottom .price_total_ms label {
margin-right: 100px;
}
.price_total_bottom .price_total_ms a {
cursor:
default
;
text-align: center;
display: inline-block;
font-size: 20px;
color:
#fff;
font-weight: bold;
width: 220px;
height: 54px;
line-height: 54px;
border: 0;
padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#f71455;
}
</style>
vue仿淘宝结账订单的更多相关文章
- vue实现仿淘宝结账页面
这个demo,是小颖基于之前的 vue2.0在table中实现全选和反选 文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图: ...
- vue仿淘宝订单状态的tab切换效果
<div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...
- vue仿淘宝地址选择组件
Vue组件:省市区地址选择组件 <template> <div v-show="addressSelectShow" :style="{'left': ...
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- 仿淘宝 vue
最近自己闲着无聊,用vue仿照淘宝打算写个皮囊,顺便把遇到的问题顺便记录下 1.动画问题 (1)单个元素给动画 <transition name="fade">< ...
- android版高仿淘宝客户端源码V2.3
android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
随机推荐
- 跟随我在oracle学习php(8)
JavaScript 是一种专为与网页交互而设计的脚本语言, javascript:特效 表单验证原理:什么时候,找到标签,什么时候,操作标签 使用<script>元素的方式有两种:直接在 ...
- 管理商品demo
1.写一个管理商品的程序# 1.商品存在文件里面# 2.添加商品的时候,商品存在的就不能添加了,数量只能是大于0的整数,价格可以是小数.整数,但是只能是大于0的# 商品名称# 商品价格# 商品数量# ...
- linux后台运行python程序 nohup
nohup python -u test.py > out.log 2>&1 & nohup sh **.sh > /dev/null 2>&1 &am ...
- Java学习笔记35(sql补充)
在上一篇里,写了数据库的增删该查,没有写完,这里补充 CREATE DATABASE Zs_Base; USE Zs_Base; # 创建表 CREATE TABLE PRODUCT( ID INT ...
- Sql Server索引重建
公司线上数据有几千万数据,有时候索引碎片会导致索引达不到我们的预期查询效率,这个时候将索引重建将会提升一定效率,不过重建的时候一定得晚上用户少的时候,索引重建需要一定时间. 直接贴自动重建索引脚本吧 ...
- Python 基于时间的进程通信
import time from multiprocessing import Process,Event def f1(e): time.sleep(2) n = 100 print("子 ...
- C# 文件上传下载功能实现 文件管理引擎开发
Prepare 本文将使用一个NuGet公开的组件技术来实现一个服务器端的文件管理引擎,提供了一些简单的API,来方便的实现文件引擎来对您自己的软件系统的文件进行管理. 在Visual Studio ...
- phpcms 加载微信类库,生成签名
在phpcms 中 pc_base:load_config(文件名) 用于加载配置文件,配置文件存放于phpcms目录下的caches/configs中 在控制器新增加载微信类库的方法: /** * ...
- 一条命令将windows下多个ts文件合并为一个ts文件
首先在待合并的文件夹下创建concat.bat(名字随意啦),写入如下命令 copy /b "%~dp0"\*.ts "%~dp0"\new.ts 执行该命令后 ...
- Angular新手容易碰到的坑
在Angular群里回答新手问题一段时间了,有一些Angular方面的坑留在这里备查,希望能对各位有所帮助.这个文章将来会随时更新,不会单独开新章,欢迎各位订阅. Q1.<div ng-incl ...