WenWuGuanJia/pages/order/preview.vue

<template>
	<view class="wrap">
		<u-navbar :autoBack="true" title="购买课程" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="main" v-if="hasLoad">
			<view class="gift-head">商品信息</view>
			<view class="gift-list">
				<view class="gift-item" v-for="(item, index) in orderData.goods_list" :key="index">
					<view class="b-left">
						<image :src="item.goods_cover" mode="aspectFill"></image>
					</view>
					<view class="b-main">
						<view class="b-title">{{ item.goods_name }}</view>
						<view class="b-spec">
							<!-- <view class="s-tit">类型:</view> -->
							<view class="s-value">{{ item.goods_type_text }}</view>
						</view>
						<view class="b-fund">
							<view class="s-num">¥{{ item.payment }}</view>
							<view class="s-worth">¥{{ item.goods_price }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="b-row f-fund">
					<view class="b-tit">商品总价:</view>
					<view class="b-cont">
						<view class="s-num">¥{{ orderData.total_price }}</view>
					</view>
				</view>
				<view class="b-row f-fund">
					<view class="b-tit">优惠金额:</view>
					<view class="b-cont">
						<view class="s-num">¥{{ orderData.total_discount }}</view>
					</view>
				</view>
				<view class="b-row f-fund">
					<view class="b-tit">应付金额:</view>
					<view class="b-cont">
						<view class="s-num">¥{{ orderData.total_payment }}</view>
					</view>
				</view>
			</view>
			<view class="box">
				<radio-group @change="onRadioChange" v-for="(item, index) in payList" :key="index">
					<view class="b-row f-pay">
						<view class="b-tit">
							<view class="iconfont" :class="'icon-' + item.icon"></view>
							<view class="s-tit">{{ item.name }}</view>
						</view>
						<view class="b-cont">
							<radio value="wechat" :checked="item.checked" color="#DA5650" />
						</view>
					</view>
				</radio-group>
			</view>
			<view class="navbar">
				<view class="b-amount">
					<view class="s-tit">应付:</view>
					<view class="s-num">¥{{ orderData.total_payment }}</view>
				</view>
				<view class="b-action">
					<view class="s-exchange" @click="onSubmitOrder">确认下单</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
		<!-- 首页 -->
		<app-home></app-home>
	</view>
</template>

<script>
// import { removeCart, previewOrder, submitOrder, oncePay } from '@/service/api/order.js';
// import { requestPayment } from '@/service/request/main.js';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '@/mixins/auth.js';
let that;
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			disable: {
				submit: false
			},
			orderData: {},
			formData: {
				goods_list: [],
				total_price: 0,
				total_payment: 0
			},
			payList: [
				{
					icon: 'pay-wechat',
					alias: 'wechat',
					name: '微信支付',
					checked: true
				}
			],
			payIndex: 0,
			hasLoad: false,
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		that = this;
		let goodsData = options.goods_data;
		this.goodsData = JSON.parse(goodsData);
		this.loadPreview();
	},
	methods: {
		loadPreview() {
			this.$api.previewOrder({ goods_list: this.goodsData }, function (res) {
				console.log('加入购物车', res);
				if (res.code == 1) {
					that.hasLoad = true;
					that.loadingType = -1;
					that.orderData = res.data;
					that.formData.goods_list = res.data.goods_list;
					that.formData.total_price = res.data.total_price;
					that.formData.total_payment = res.data.total_payment;
				} else {
					that.loadingType = 3;
					that.loadingText = err.data.msg || '加载失败';
				}
			});

			// previewOrder({
			// 	goods_list: this.goodsData
			// }).then(([err, res]) => {
			// 	console.log('previewOrder', err, res);
			// 	if (!err) {
			// 		this.hasLoad = true;
			// 		this.loadingType = -1;
			// 		this.orderData = res;
			// 		this.formData.goods_list = res.goods_list;
			// 		this.formData.total_price = res.total_price;
			// 		this.formData.total_payment = res.total_payment;
			// 	} else {
			// 		this.loadingType = 3;
			// 		this.loadingText = err.data.msg || '加载失败';
			// 	}
			// });
		},
		onRadioChange(e) {
			console.log('onRadioChange', e);
		},
		onSubmitOrder() {
			if (this.disable.submit) {
				return;
			}
			this.disable.submit = true;

			this.$api.submitOrder({}, function () {
				console.log('888', res);
				that.disable.submit = false;
				if (res.code == 1) {
					for (let i = 0; i < this.goodsData.length; i++) {
						let goodsData = this.goodsData[i];
						if (goodsData.cart_id) {
							this.$api.removeCart({}, function (res) {
								console.log('999', res);
								if (res.code == 1) {
									this.$store.commit('delCartItem', goodsData.cart_id);
								}
							});

							// removeCart(goodsData.cart_id).then(([err, res]) => {
							// 	if (!err) {
							// 		this.$store.commit('delCartItem', goodsData.cart_id);
							// 	}
							// });
						}
					}
					requestPayment(res.order_no, this.payList[this.payIndex].alias, 'onceOrder');
				}
			});

			// submitOrder(this.formData).then(([err, res]) => {
			// 	console.log('submitOrder', err, res);
			// 	this.disable.submit = false;
			// 	if (!err) {
			// 		for (let i = 0; i < this.goodsData.length; i++) {
			// 			let goodsData = this.goodsData[i];
			// 			if (goodsData.cart_id) {
			// 				removeCart(goodsData.cart_id).then(([err, res]) => {
			// 					if (!err) {
			// 						this.$store.commit('delCartItem', goodsData.cart_id);
			// 					}
			// 				});
			// 			}
			// 		}
			// 		requestPayment(res.order_no, this.payList[this.payIndex].alias, 'onceOrder');
			// 	}
			// });
		}
	}
};
</script>

<style>
.wrap {
	padding-bottom: 150upx;
}

.gift-head {
	padding: 20upx 30upx;
	font-size: 28upx;
	color: #333;
}

.gift-item {
	padding: 30upx;
	background: #fff;
	border-bottom: 2upx solid #eee;
	display: flex;
	align-items: center;
}

.gift-item .b-left {
	width: 160upx;
	height: 160upx;
}

.gift-item .b-left image {
	width: 160upx;
	height: 160upx;
}

.gift-item .b-main {
	margin-left: 30upx;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.gift-item .b-main .b-title {
	font-size: 28upx;
	color: #333;
}

.gift-item .b-main .b-spec {
	margin-top: 20upx;
	display: flex;
	align-items: center;
}

.gift-item .b-main .b-spec .s-tit {
	margin-right: 10upx;
	font-size: 24upx;
	color: #999;
}

.gift-item .b-main .b-spec .s-value {
	font-size: 24upx;
	color: #666;
}

.gift-item .b-main .b-fund {
	margin-top: 20upx;
	display: flex;
	align-items: baseline;
}

.gift-item .b-main .b-fund .s-num {
	font-size: 32upx;
	color: #da5650;
}

.gift-item .b-main .b-fund .s-worth {
	margin-left: 20upx;
	font-size: 26upx;
	color: #999;
	text-decoration: line-through;
}

.box {
	margin-top: 30upx;
	padding: 30upx;
	background: #fff;
}

.box .b-row {
	margin-bottom: 30upx;
	display: flex;
	justify-content: space-between;
}

.box .b-row:last-child {
	margin-bottom: 0;
}

.box .b-row.f-fund .b-cont .s-num {
	font-size: 32upx;
	color: #da5650;
}

.box .b-row.f-pay .b-tit {
	width: 320upx;
	display: flex;
	align-items: center;
}

.box .b-row.f-pay .b-tit .iconfont {
	font-size: 50upx;
	color: #6cb37a;
}

.box .b-row.f-pay .b-tit .s-tit {
	margin-left: 10upx;
	font-size: 28upx;
}

.box .b-row.f-pay .b-cont radio {
	transform: scale(0.8);
}

.box .b-row .b-tit {
	font-size: 28upx;
	width: 160upx;
}

.box .b-row .b-cont {
	display: flex;
	align-items: center;
}

.navbar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100upx;
	background: #fff;
	border-top: 1upx solid #f6f6f6;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar .b-amount {
	margin-left: 30upx;
	display: flex;
	align-items: center;
}

.navbar .b-amount .s-tit {
	font-size: 28upx;
	color: #333;
}

.navbar .b-amount .s-num {
	margin-left: 10upx;
	font-size: 32upx;
	color: #da5650;
}

.navbar .b-action .s-exchange {
	background: #da5650;
	height: 100upx;
	padding: 0 60upx;
	line-height: 100upx;
	font-size: 30upx;
	color: #fff;
	letter-spacing: 4upx;
}
</style>