vue实现仿淘宝结账页面实例代码

<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;
}