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 ...
随机推荐
- day19_python_1124
.01 昨日内容回顾 面向对象:1,将一些相似功能的函数集合到一起 类:具有相同属性和功能的一类事物. 对象:类的具体体现. 2,站在上帝的角度考虑问题,类就是一个公共模板, 类的结构: class ...
- css样式 + 特殊符号
color控制字体颜色 十六进制值 #cc0066: font-size控制字体大小 单位 px / % / em / rem:像素 / 相对于父级元素 / 取决自己使用字体大小 / 取决于根元素ht ...
- Forth 内存布局
body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...
- centos 进程查看
查看pid 所属文件/项目 ps -aux |grep -v grep|grep 51073
- 疑问:VS在调试的过程中,总是会提示正在加载picface.dll的符号,然后卡死在那
环境: 硬件环境: PC 软件环境: Windows7 VS2012 MFC程序调试 现象: 调试的过程中,提示“正在从以下目录加载picface.dll的符号:C:\windows\dll”,然后就 ...
- Python 实现简易 Shell
什么是shell? (1)shell是一个系统软件,负责用户和操作系统内核之间的交互,是产生进程的进程(通过linux系统调用fork,exec),主要负责解释用户的命令,进而实现用户对进程的控制. ...
- linux下GCC编译文件
Linux终端使用技巧: Ctrl+Alt+T打开终端 Ctrl+c死循环退出程序 Shift+Ctrl+T:新建标签页 Shift+Ctrl+N:新建窗口 Shift+Ctrl+Q:关闭终端 终端中 ...
- Centos6.5修改镜像为国内的阿里云源
第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...
- alpha冲刺(5/10)
前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 博客撰写 问题困扰: 我想尝试让他们自己安排明天的任务,不知道是否可行. 心得体会: 一 ...
- jdk1.7安装和配置
jdk1.7 安装引用 https://jingyan.baidu.com/article/ff41162596a77912e4823716.html