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 ...
随机推荐
- 常用模块Part(2)
logging模块 hashlib模块 hashlib模块 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. # 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个 ...
- VSTO:使用C#开发Excel、Word【14】
操作workbooks集合可从Application对象的Workbooks属性中获取的Workbooks集合包含当前在应用程序中打开的Workbook对象的集合. 它还具有用于管理开放工作簿,创建新 ...
- python虚拟环境创建
1.模块安装: pip install virtualenv linux下:pip install virtualenvwrapper(用于workon管理) windows下:pip install ...
- guava-retrying 源码解析(导入项目)
1.从github上下载guava-retry源码 git clone git://github.com/rholder/guava-retrying.git 2.导入idea,使用gradle记得勾 ...
- CSS 文字概念小记
1.水平居中: 更多的是指宽度的居中,margin: 0 auto; 2.垂直居中: 是指高度的居中 PS:这个两个慨念我老是搞混,今天记录一下,防止下次又忘了
- TestLink工具使用手册介绍
工具名称:TestLink 工具介绍:TestLink遵循Apache2开源协议,免费试用.TestLink用于进行测试过程中的管理,通过使用TestLink提供的功能,可以将测试过程从测试需求.试设 ...
- 剑指Offer 6. 旋转数组的最小数字 (数组)
题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...
- 判断是不是微信浏览器和QQ内置浏览器
is_weixn() { let ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "mi ...
- Pyhon全栈之路----数据类型
1.定义时不需要像C语言一样加 ' int ' , 'char ' 等,直接写即可,解释器会直接自动识别数据类型.例: age = 22 (默认为数字类型) name = 'Alex ...
- docker删除镜像文件时,出现image is referenced in multiple repositories如何解决
1.输入查看镜像文件的命令: $ docker image ls 得到如下结果: 2.删除名为lihui/demo的镜像,输入如下命令: $ docker rmi 9fa504a6066a 报错,报错 ...