56 提交订单布局和数据

Cascader 级联选择=>中国省市区数据

https://develop365.gitlab.io/vant/zh-CN/cascader/#/zh-CN/cascader

提交订单布局和数据 实现代码如下

1, src/views/Order.js
<template>
	<div class="order container">
		<header>
			<i class="iconfont icon-a-huaban1fuben44" @click="$router.back()"></i>
			<span>提交订单</span>
			<i class="iconfont icon-kefu"></i>
		</header>
		<section>
			<div class="path">
				<h3 class="path-title">收货信息:</h3>
				<!-- {{path}} -->
				<div class="path-content">
					<div>
						<span>{{path.name}}</span>
						<span>{{path.tel}}</span>
						<!-- <span>张三</span>
						<span>18017927192</span> -->
					</div>
					<div>
						<span>{{path.province}}</span>
						<span>{{path.city}}</span>
						<span>{{path.county}}</span>
						<span>{{path.addressDetail}}</span>
						<!-- <span>省</span>
						<span>市</span>
						<span>区县</span>
						<span>详细地址</span> -->
					</div>
				</div>
			</div>
			<div class="payment">
				<!-- {{radioPayment}} -->
				<div class="payment-title">支付方式:</div>
				<van-radio-group v-model="radioPayment">
					<van-radio name="wx">微信支付</van-radio>
					<van-radio name="ali">支付宝支付</van-radio>
				</van-radio-group>
			</div>
			<div class="goods">
				<!-- {{goodsList}} -->
				<ul>
					<li v-for="(item,index) in goodsList" :key="index">
						<div>
							<img :src="item.goods_imgUrl" alt="" />
						</div>
						<div class="goods-content">
							<h4>{{item.goods_name}}</h4>
							<div>规格: 暂无</div>
							<div class="goods-total">
								<span class="goods-price">￥{{item.goods_price}}</span>
								<span>x{{item.goods_num}}</span>
							</div>
						</div>
					</li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</section>
		<footer>
			<div class="order-total">
				<span>共</span>
				<b>{{total.num}}</b>
				<span>件,</span>
				<span>总金额:</span>
				<em>￥{{total.price}}</em>
			</div>
			<div class="order-topay">
				提交订单
			</div>
		</footer>
	</div>
</template>

<script>
	import http from '@/common/api/request.js'
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				radioPayment: 'wx',
				path: {},
				item: []
			}
		},
		computed: {
			...mapState({
				list.state => state.cart.list
			}),
			...mapGetters(['total', 'defaultPath']),
			goodsList() {
				return this.item.map(v => {
					// console.log(id);
					return this.list.find(v => v.id == id);
				})
			}
		},
		created() {
			// 选中的商品的id号  转换
			this.item = JSON.parse(this.$route.query.detail);

			// Cart.vue 传值到这里 打印一下
			// console.log(this.$route.query.detail);

			// 请求收货地址
			http.$axios({
				url: '/api/selectAddress',
				method: 'post',
				headers: { // 哪个用户新增地址
					token: true
				}
			}).then(res => {
				// 将数据存储到 vuex 中
				this.initData(res.data);

				// 有默认收货地址
				if (this.defaultPath.length) {
					this.path = this.defaultPath[0];
				} else {
					this.path = res.data[0];
				}

				// console.log(res.data);
			});
		},
		methods: {
			...mapMutations(['initData'])
		}
	}
</script>

<style scoped lang="scss">
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 44px;
		color: #fff;
		background-color: #b0352f;



		i {
			padding: 0 18px;
			font-size: 24px;
		}

		span {
			font-size: 18px;
			font-weight: 300;
		}
	}

	section {
		background-color: #f7f7f7;

		.path-title {
			padding: 6px 15px;
			font-size: 20px;
			// color: dimgray;
		}

		.path-content {
			padding: 6px 15px;
			font-size: 18px;
			background-color: #FFFFFF;

			span {
				padding-right: 6px;
			}
		}

		.payment {
			padding: 6px 15px;
			margin-top: 15px;
			font-size: 16px;
			background-color: #FFFFFF;

			.van-radio-group {
				display: flex;
				padding: 10px 0;

				.van-radio {
					padding-right: 10px;
				}
			}
		}

		.goods {
			padding: 6px 15px;
			margin-top: 15px;
			font-size: 16px;
			background-color: #FFFFFF;

			ul {
				width: 100%;

				li {
					display: flex;
					width: 100%;

					img {
						width: 74px;
						height: 74px;
					}

					.goods-content {
						display: flex;
						flex: 1;
						flex-direction: column;
						justify-content: space-between;
						padding-left: 15px;

						.goods-total {
							display: flex;
							justify-content: space-between;

							.goods-price {
								font-size: 18px;
								color: #b0352f;
							}
						}
					}
				}
			}
		}

		footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			line-height: 50px;
			border-top: 1px solid #CCC;

			.order-total {
				font-size: 20px;

				span {
					padding: 0 6px;
				}

				b {
					color: #b0352f;
				}

				em {
					font-size: 22px;
					color: #b0352f;
				}
			}



			.order-topay {
				width: 120px;
				line-height: 50px;
				text-align: center;
				color: #fff;
				background-color: #b0352f;
				font-size: 18px;
			}

		}
	}
</style>






2, src/views/Cart.vue

<template>
	<div class="cart container">
		<header @click="$router.back()">
			<i class="iconfont icon-a-huaban1fuben44"></i>
			<span>购物车</span>
			<span @click="isNavBar" v-text="isNavStatus ? '完成' : '编辑'"></span>
		</header>
		<section>
			<!-- <section v-if="list.length"> -->
			<div class="cart-title">
				<!-- {{isCheckedAll}} -->
				<van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
				<span>商品</span>
			</div>
			<ul>
				<li v-for="(item,index) in list" :key="index">
					<div class="check">
						<van-checkbox @click="checkItem(index)" v-model="item.checked"></van-checkbox>
					</div>
					<h2>
						<img :src="item.imgUrl" alt="" />
					</h2>
					<div class="goods">
						<div class="goods-title">
							<span>{{item.goods_name}}</span>
							<!-- 单个删除 -->
							<i class="iconfont icon-shanchu1" @click="delGoodsFn(item.id)"></i>
						</div>
						<div class="goods-price">￥{{item.goods_price}}</div>
						<van-stepper @change="changeNum($event,item)" v-model="item.goods_num" integer />
					</div>
				</li>
			</ul>
			<h1>
				没有购物车数据
				<router-link to="/home">去首页逛逛吧</router-link>
			</h1>
			<!-- <section v-else>
				没有购物车数据
				<router-link to="/home">去首页逛逛吧</router-link>
			</section> -->
		</section>
		<footer v-if="list.length">
			<div class="radio">
				<van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
				<!-- <van-checkbox v-model="checked"></van-checkbox> -->
			</div>
			<div class="total" v-show="!isNavStatus">
				<div>共有
					<span class="total-active">{{total.num}}</span>
					件商品
				</div>
				<div>
					<span>总计:</span>
					<span class="total-active">￥{{total.price.toFixed(2)}}+0茶币</span>
				</div>
			</div>
			<!-- <div class="order">{{isNavStatus ? "删除" : "去结算"}}</div> -->
			<div class="order" v-if="isNavStatus" @click="delGoodsFn">删除</div>
			<div class="order" v-else @click="goOrder">去结算</div>
		</footer>
		<!-- <Tabbar></Tabbar> -->
	</div>
</template>

<script>
	import http from '@/common/api/request.js'
	import {
		Toast
	} from 'mint-ui';
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		name: "Cart",
		data() {
			return {
				isNavStatus: false,
				checked: true
			}
		},
		// 调用 获取 list 的值
		computed: {
			...mapState({
				list: state => state.cart.list,
				selectList: state => state.cart.selectList
			}),
			...mapGetters(['isCheckedAll', 'total'])
		},
		created() {
			// console.log(11);
			this.getData();
		},
		methods: {
			// 使用这个方法
			...mapMutations(['cartList', 'checkItem']),
			...mapActions(['checkAllFn', 'delGoodsFn']),

			// 前端给后端发送请求，查询某个用户
			async getData() {
				// 发送请求
				let res = await http.$axios({
					// 前端给后端查询购物车数据接口发送请求
					url: '/api/selectCart',
					method: 'POST',
					// 查询当前用户购物车数据，要带上 token
					headers: {
						token: true
					}
				});

				// 循环 前端添加一项 'checked' 因为前端给后端打交道 (交互) 
				// 将数据与结构进行了重构，前端添加了一项 'checked' 
				// 每一个购物车数据都有一个 'checked:true',通过他我们就可以知道他是选中的
				res.data.forEach(v => {
					// 每一项加一个 'checked'
					v['checked'] = true;
				})

				// console.log(res.data);
				this.cartList(res.data);
			},
			// 点击编辑||完成
			isNavBar() {
				this.isNavStatus = !this.isNavStatus;
			},
			// 修改数量
			changeNum(value, item) {
				// 发送请求，前端将当前用户的购物车的id以及修改后的数量=>传递给后端
				// value 就是修改后的数量   item.id 就是购物车商品的id
				// console.log(value, item.id);
				// 发送请求 前端将 value 和 item.id 传递给后端
				http.$axios({
					// 前端给后端查询购物车数据接口发送请求
					url: '/api/updateNum',
					method: 'POST',
					// 查询当前用户购物车数据，要带上 token
					headers: {
						token: true
					},
					data: {
						id: item.id,
						num: value
					}
				}).then(res => {
					console.log(res);
				});
			},
			// 去结算
			goOrder() {
				// 点击 '去结算' 拿到id为37的商品,没有选中商品，商品id为空
				// console.log(this.selectList);

				// 判断 selectList:[] 中是否有选中商品
				if (!this.selectList.length) {
					Toast('请至少选择一件商品');
					return;
				}
				// console.log(1);  选中了就打印 1

				// 只有选中了才能跳转到结算页面 跳转页面
				this.$router.push({
					path: '/order',
					query: { // 传值到 Order 页面
						detail: JSON.stringify(this.selectList)
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	header {
		display: flex;
		// 左中右结构
		justify-content: space-between;
		// 垂直居中
		align-items: center;
		height: 44px;
		color: #fff;
		background-color: #b0352f;

		i {
			padding: 0 20px;
			font-size: 24px;
		}

		span {
			padding: 0 20px;
			font-size: 16px;
		}
	}

	section {
		background-color: #f5f5f5;

		.cart-title {
			display: flex;
			padding: 20px;

			span {
				padding: 0 15px;
				font-size: 18px;
				font-weight: 500;
			}
		}

		ul {
			display: flex;
			flex-direction: column;

			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 8px 0;
				padding: 6px 20px;
				background-color: #fff;

				.check {
					padding-right: 10px;
				}

				.goods {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 15px;
					font-size: 12px;


					.goods-title {
						display: flex;

						i {
							font-size: 24px;
						}
					}

					.goods-price {
						padding: 3px 0;
						color: #b0352f;
					}

					::v-deep .van-stepper {
						text-align: right;
					}
				}

				img {
					width: 74px;
					height: 74px;
				}
			}
		}
	}

	footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		border-top: 2px solid #ccc;

		.radio {
			padding: o 15px;
		}

		.total {
			flex: 1;
			font-size: 18px;
			font-weight: 500;

			.total-active {
				color: #b0352f;
			}
		}

		.order {
			width: 120px;
			line-height: 50px;
			font-size: 18px;
			font-weight: 500;
			color: #fff;
			text-align: center;
			background-color: #b0352f;
		}
	}
</style>






3, src/views/path/Path-Index.vue
<template>
	<div class="path-index container">
		<Header>
			<span>我的地址</span>
		</Header>
		<section>
			<ul v-if="list.length">
				<li @click="goList(item)" v-for="(item,index) in list" :key="index">
					<div>
						<span>{{item.name}}</span>
						<span>{{item.tel}}</span>
					</div>
					<div class="city">
						<span class="active" v-if="item.isDefault==1">[默认]</span>
						<span>{{item.province}}</span>
						<span>{{item.city}}</span>
						<span>{{item.county}}</span>
						<span>{{item.addressDetail}}</span>
					</div>
				</li>
			</ul>
			<h1 v-else>暂无数据，请添加地址</h1>
			<div class="add-path" @click="goList(add)">添加地址</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import http from '@/common/api/request.js'
	import Header from '@/components/path/Header.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		name: "Path-Index",
		components: {
			Header,
			Tabbar
		},
		created() {
			this.getData();
		},
		computed: {
			...mapState({
				list: state => state.path.list
			})
		},
		methods: {
			...mapMutations(['initData']),

			// 发送请求
			getData() {
				// 请求收货地址
				http.$axios({
					url: '/api/selectAddress',
					method: 'post',
					headers: { // 哪个用户新增地址
						token: true
					}
				}).then(res => {
					// 将数据存储到 vuex 中
					this.initData(res.data);
					// console.log(res.data);
				});
			},
			goList(option) {
				console.log(option);

				// 两种实现跳转方式都可以 根据名称和路径
				// this.$router.push('/path/path-list');
				this.$router.push({
					name: 'Path-List',
					params: {
						// key: option
						key: JSON.stringify(option)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	section {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f7f7f7;

		ul {
			width: 100%;

			li {
				padding: 10px 15px;
				width: 100%;
				margin: 6px 0;
				background-color: #FFFFFF;

				span {
					padding-right: 15px;
					font-size: 18px;
				}

				.active {
					color: #b0353f;
				}

				.city {
					span {
						padding-right: 6px;
					}
				}
			}
		}

		.add-path {
			margin-top: 30px;
			width: 150px;
			line-height: 40px;
			font-size: 18px;
			text-align: center;
			color: #fff;
			background-color: #b0352f;
			border-radius: 6px;
		}
	}

	::v-deep .tabbar {
		border-top: 2px solid #ccc;
	}
</style>








4, src/store/modules/path.js
import {
	INIT_DATA
} from '@/store/modules/mutations-types.js'

export default {
	state: {
		list: []
	},
	getters: {
		// 存储默认地址值
		defaultPath(state) {
			// 将 默认地址过滤出来
			return state.list.filter(v => {
				// 找到 默认地址为 1 
				return v.isDefault == 1;
			})
		}
	},
	mutations: {
		INIT_DATA(state, arrPath) {
			state.list = arrPath;
		}
	},
	actions: {
		//
	}
}