xingmingyi_applet/pagesA/mall/creatOrd.vue

<template>
	<view class="content">
		<navigator url="/pages/user/address/address" class="address dfsb">
			<image src="/static/img/pro/malladdress.png" mode=""></image>
			<view v-if="addressInfo.shou_name" class="addInfo">
				<view class="addInfo-title">
					<text>{{ addressInfo.shou_name }}</text>
					<text class="textgrey">{{ addressInfo.shou_phone }}</text>
				</view>
				<view class="addInfo-bot">{{ addressInfo.shou_address }}</view>
			</view>
			<view v-if="!addressInfo.shou_name" class="addInfo">请选择地址</view>
			<u-icon name="arrow-right" color="#999" size="12"></u-icon>
		</navigator>
		<view class="shopsBox">
			<block v-if="flag == 1">
				<view v-for="(item, index) in newsInfo.order_goods.goods" :key="index" class="shopshead dfsb">
					<image :src="item.imgurl" mode=""></image>
					<view class="shopsInfo dffd">
						<view class="elli">{{ item.goods_name }}</view>
						<view v-if="item.sku_name" class="selAttr">{{ item.sku_name }}</view>
						<view class="price dfsb">
							<text v-if="flag == 1" class="promain">￥{{ item.price}}</text>
							<text class="textgrey">x{{ item.num || 1 }}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-if="flag !=1">
				<view class="shopshead dfsb">
					<image :src="newsInfo.order.imgurl" mode=""></image>
					<view class="shopsInfo dffd">
						<view class="elli">{{ newsInfo.order.goods_name }}</view>
						<view v-if="newsInfo.order.sku_name" class="selAttr">{{ newsInfo.order.sku_name }}</view>
						<view class="price dfsb">
							<text class="promain">￥{{ newsInfo.order.price }}</text> 
							<text class="textgrey">x{{ newsInfo.order.num || 1 }}</text>
						</view>
					</view>
				</view>
			</block>
			<view class="other dfsb">
				<text>邮费</text>
				<text>{{ newsInfo.exp_fee || 0 }}元</text>
			</view>
			<view class="other dfsb">
				<text>订单备注</text>
				<input type="text" v-model="beizhu" placeholder="选填，请先和商家协商一致" />
			</view>
		</view>
		<view v-if="flag == 1" class="payInfo dfsb">
			<image class="payicon" src="/static/img/pro/payyh.png" mode=""></image>
			<view class="dffd flex1">
				<text class="blank fontmid">
					使用优惠券
					<text class="prosecond fontmid">-{{ coupon.reduce }}</text>
				</text>
				<view @click.stop="nextTo" class="textgrey fontssm dffs">
					当前有{{ newsInfo.coupon_list.length }}张可使用的优惠券
					<u-icon name="arrow-down" color="#999" size="14"></u-icon>
				</view>
			</view>
		</view>
		<view v-if="flag == 1" class="payInfo dffs">
			<text class="fontsm">共{{ newsInfo.num }}件,合计{{ newsInfo.total }},折扣{{ newsInfo.discount }}折</text>
		</view>
		<view class="fixBox dffs">
			<text class="prosecond fontmid">实际支付{{ newsInfo.payment_price }},</text>
			<text v-if="flag == 1" class="flex1 fontsm ">优惠-{{ coupon.reduce }}</text>
			<!-- <text v-if="flag == 1" class="prosecond">￥{{ newsInfo.total }}+{{ newsInfo.point }}积分</text> -->
			<view @click="handle" class="clickbtn">提交订单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flag: 1, //  1普通  2拼团  3秒杀
			goods: {}, //传来的商品信息

			newsInfo: {
				coupon_list: [],
				order_goods: {
					goods: []
				},
				order: {}
			},
			addressInfo: {},
			coupon: { reduce: 0 }, //优惠券
			beizhu: '',

			showimg: false,
			noWeiXin: true, //是不是微信中支付宝不嫩显示
			num: 1,
			addid: uni.getStorageSync('setAddId'), //收货id
			showPaytype: false, //展示付款方式
			paytype: '', // 获取付款方式  3 圆宝积分 4  fyt
			showPass: '', // 展示密码
			orderId: '' //订单id
		};
	},
	onLoad(opt) {
		this.flag = opt.flag || 1;
		this.goods = JSON.parse(opt.goods);
		this.onload();
	},
	onShow() {},
	methods: {
		// 选择优惠券
		nextTo() {
			uni.navigateTo({
				url: '/pages/user/coupon/myCoup?money=' + this.newsInfo.payment_price
			});
		},
		onload() {
			console.log(this.flag);
			let url = '';
			let data = {};
			if (this.flag == 1) {
				url = 'orders/order_view';
				let arrList = [];
				let arr = {};
				arr['id'] = this.goods.id;
				arr['sku_id'] = this.goods.sku_id;
				arr['num'] = this.goods.num;
				arrList.push(arr);
				data = {
					goods: JSON.stringify(arrList),
					address_id: ''
				};
			} else if (this.flag == 2) {
				url = 'grouporder/order_view';
				data = {
					id: this.goods.id,
					num: this.goods.num,
					pid: this.goods.pid,
					sku_id: this.goods.sku_id,
					id: this.goods.id,
					address_id: ''
				};
			} else {
				url = 'seckillorder/order_view';
				data = {
					id: this.goods.id,
					num: this.goods.num, 
					sku_id: this.goods.sku_id,
					id: this.goods.id,
					address_id: ''
				};
			}
			this.$api.request(url, data).then(data => {
				if (data.code == 200) {
					if (this.flag == 1) {
						this.addressInfo = data.data.order_goods.address;
						this.newsInfo = data.data;
					} else if (this.flag == 2) {
						this.addressInfo = data.data.order.address;
						this.newsInfo = data.data;
					} else if (this.flag == 3) {
						this.addressInfo = data.data.order.address;
						this.newsInfo = data.data;
					} else {
					}
				} else {
					this.$api.modal('温馨提示', data.msg, true, res => {
						if (this.$api.prePage() != undefined) {
							uni.navigateBack({
								delta: 1
							});
							return;
						}
						uni.switchTab({
							url: '/pages/index/index'
						});
					});
				}
			});
		},
		//点击提交
		handle() {
			if (!this.addressInfo.address_id) return this.$api.toast('请选择收货地址');
			let url = '';
			let data = {};
			if (this.flag == 1) {
				url = 'orders/order_create';
				let arrList = [];
				let arr = {};
				arr['id'] = this.goods.id;
				arr['sku_id'] = this.goods.sku_id;
				arr['num'] = this.goods.num;
				arrList.push(arr);
				data = {
					goods: JSON.stringify(arrList),
					content: this.beizhu,
					coupon_id: this.coupon.id || '',
					address_id: this.addressInfo.address_id || ''
				};
			} else if (this.flag == 2) {
				url = 'grouporder/order_create';
				data = {
					id: this.goods.id,
					num: this.goods.num,
					sku_id: this.goods.sku_id,
					pid: this.goods.pid,
					content: this.beizhu,
					address_id: this.addressInfo.address_id || ''
				};
			} else if (this.flag == 3) {
				url = 'seckillorder/toSeckill';
				data = {
					id: this.goods.id,
					goods_id: this.goods.goods_id,
					num: this.goods.num,
					sku_id: this.goods.sku_id, 
					content: this.beizhu,
					address_id: this.addressInfo.address_id || ''
				};
			}
			this.$api.request(url, data).then(data => {
				if (data.code == 200) {
					this.orderId = data.data;
					this.toPay();
				} else {
					this.$api.toast(data.msg);
				}
			});
		},
		// 支付
		toPay() {
			this.$api
				.request('orders/order_pay', {
					id: this.orderId,
					type: this.flag
				})
				.then(data => {
					console.log(data);
					if (data.code && data.code != 200) {
						this.$api.toast(data.msg || '获取支付信息失败');
						return;
					}
					console.log(data);
					const orderInfo = data;
					const { timeStamp, nonceStr, paySign } = orderInfo;
					const payParams = {
						provider: 'wxpay',
						orderInfo: data,
						timeStamp,
						nonceStr,
						package: orderInfo.package,
						signType: 'MD5',
						paySign,
						success: e => {
							setTimeout(res => {
								uni.redirectTo({
									url: '/pagesA/mall/order?flag=' + this.flag
								});
							}, 600);
						},
						fail: err => {
							if (err.errMsg.indexOf('取消') > -1 || err.errMsg.indexOf('cancel') > 1 || err.errMsg.indexOf('-2') > -1) {
								this.$api.toast('取消支付');
							} else {
								this.$api.toast('支付遇到错误，请稍候重试');
								console.log(err);
							}
						}
					};
					uni.requestPayment(payParams);
				});
		}
	}
};
</script>

<style lang="scss">
.content {
	min-height: 100vh;
	padding: 30rpx 30rpx 140rpx;
	.payInfo {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 35rpx 30rpx;
		.payicon {
			width: 68rpx;
			height: 68rpx;
		}
		.flex1 {
			margin: 0 15rpx;
		}
		.fontmid {
			flex: 1;
		}
		.payselicon {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.warp {
		background-color: none;
		align-items: center;
		.title {
			width: 434rpx;
			height: 312rpx;
		}
		.box {
			margin-top: -138rpx;
			padding: 164rpx 0 0;
			width: 564rpx;
			min-height: 502rpx;
			background: #ffffff;
			border-radius: 16rpx;
			border: 2rpx solid #979797;
			align-items: center;
			.errtit {
				padding: 0 40rpx;
				font-size: 40rpx;
				color: #080404;
				line-height: 50rpx;
				margin: 46rpx 0 30rpx;
			}
			.subtit {
				image {
					width: 54rpx;
					height: 54rpx;
					margin-right: 20rpx;
				}
				font-size: 36rpx;
				color: #ff5302;
				line-height: 50rpx;
			}
			.com {
				margin: 110rpx 0 30rpx;
				font-size: 28rpx;
				font-family: MicrosoftYaHei;
				color: #666666;
				line-height: 38rpx;
			}
		}
		.close {
			width: 64rpx;
			height: 64rpx;
			margin-top: 30rpx;
		}
	}
	.address {
		padding: 30rpx;
		background-color: #fff;
		margin: 0rpx 0 22rpx;
		border-radius: 16rpx;
		overflow: hidden;
		image {
			width: 56rpx;
			height: 56rpx;
			margin-right: 30rpx;
		}
		.addInfo {
			flex: 1;
			&-title {
				text {
					font-size: 32rpx;
				}
				text:nth-of-type(2) {
					font-size: 28rpx;
					margin-left: 12rpx;
				}
			}
			&-bot {
				margin-top: 10rpx;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}
	.shopsBox {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;

		.shopsTit {
			font-size: 32rpx;
			line-height: 44rpx;
			margin-bottom: 30rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.shopshead {
			padding-bottom: 20rpx;
			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				background-color: #ccc;
			}
			.shopsInfo {
				width: 450rpx;
				height: 100%;
				align-items: flex-start;
				justify-content: space-between;
				.elli {
					height: 80rpx;
					line-height: 40rpx;
				}
				.price {
					width: 100%;
					text {
						font-size: 32rpx;
					}
					/deep/ .u-number-input {
						margin: 0;
					}
					/deep/ .u-icon-plus,
					/deep/ .uni-input-input,
					/deep/ .u-icon-minus {
						border: 1px solid #ebebeb;
					}
				}
			}
		}
		.other {
			margin: 30rpx 0 0 60rpx;
			&:nth-of-type(1) {
				margin-top: 50rpx;
			}
			text {
				margin-right: 30rpx;
			}
			input {
				flex: 1;
			}
		}
	}
	.fixBox {
		justify-content: flex-end;
		font-size: 32rpx;
		padding-left: 30rpx;
		.clickbtn {
			margin: 0 0 0 20rpx;
			width: 214rpx;
			border-radius: 0px;
		}
	}
}
</style>