Vue의 가장 강력한 부분은 구성 요소 개발이지만 실제로는 다중 페이지 개발에 매우 적합합니다. 다음 기사는 Taobao 결제 페이지 모방을 구현하기 위해 편집기가 공유할 예제 코드입니다. 타오바오 페이지의 장바구니 결제를 흉내내보세요. 상품 선택시 자동으로 총 가격을 계산해주는 페이지입니다.
이 데모는 테이블에서 전체 선택과 역선택을 구현한 이전 vue2.0 기사를 기반으로 업데이트된 데모입니다. 주요 기능은 장바구니 항목을 확인할 때 총 가격을 자동으로 계산하는 타오바오 페이지를 모방하는 것입니다. 특정 페이지 효과에 대해서는 아래 애니메이션을 참조하세요. (문제가 발견되면 Xiaoying이 제때에 오류를 수정할 수 있도록 도와주세요. 감사합니다 ㅎㅎ)
Rendering:
Updated home.vue
<template>
<p class="container">
<p class="checkout-title">
<span>购物车</span>
</p>
<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>
<p class="price_total_bottom">
<p class="price_total_ms">
<label>合计：{{allProductTotal}}</label>
<router-link to="/userAddress">结账</router-link>
</p>
</p>
</p>
</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;
background-color: #f71455;
}
</style>로그인 후 복사
관련 추천:
JavaScript를 사용하여 타오바오를 모방하여 돋보기 효과를 구현하는 예
타오바오 검색창 입력 이벤트를 모방한 JavaScript 구현
HTML을 사용하여 타오바오 별 다섯 개를 모방하는 예 만들기 리뷰
위 내용은 vue.js를 사용하여 Taobao 결제 페이지를 모방한 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
