caimei-applets-caimei/pages/seller/order/create-recharge-order.vue

<template>
	<view class="container order clearfix" :style="{ paddingBottom: isIphoneX ? '170rpx' : '134rpx' }">
		<view class="product-info">
			<view class="product-logo"> <image :src="productInfo.mainImage" mode=""></image> </view>
			<view class="product-cent">
				<view class="product-name">商品编码：{{ productInfo.productCode }}</view>
				<view class="product-note">规格：{{ productInfo.unit }}</view> <view class="product-nums">X1</view>
			</view>
		</view>
		<view class="created-info">
			<view class="created-item">
				<view class="label">商品名称：</view>
				<input
					class="input"
					type="text"
					v-model="params.name"
					placeholder="必填，最多不超过40个汉字"
					maxlength="40"
				/>
			</view>
			<view class="created-item">
				<view class="label">商品价格：</view>
				<input class="input" type="number" v-model="params.price" placeholder="必填" maxlength="20" />
			</view>
			<view class="created-item">
				<view class="label">备注：</view>
				<input
					class="input"
					type="text"
					v-model="params.note"
					placeholder="选填，最多不超过50个汉字"
					maxlength="50"
				/>
			</view>
			<view class="created-item">
				<view class="label-total"
					>合计：<text class="red">￥{{ params.price | NumFormat }}</text>
				</view>
			</view>
		</view>
		<view class="footer" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
			<view class="footer-le">
				<view class="footer-count"> <text>共1件商品</text> </view>
				<view class="footer-price">
					<view class="sum"
						>总价:<text class="price">￥{{ params.price | NumFormat }}</text></view
					>
				</view>
			</view>
			<view class="footer-submit" @click.stop="orderSubmitMit"> <view class="btn">提交订单</view> </view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			productInfo: {},
			userId: 0,
			params: {
				name: '',
				price: '',
				note: '',
				clubId: 0,
				serviceProviderId: 0
			}
		}
	},
	onLoad() {
		this.initStorage()
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	methods: {
		async initStorage() {
			const culbInfo = await this.$api.getComStorage('orderUserInfo')
			const userInfo = await this.$api.getStorage()
			this.userId = culbInfo.userId ? culbInfo.userId : 0
			this.params.clubId = culbInfo.clubId ? culbInfo.clubId : 0
			this.params.serviceProviderId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.getInitCrearOrder()
		},
		getInitCrearOrder(option) {
			//协销购物车跳转确认订单初始化信息
			this.SellerService.SellerProductRechargeGoods({
				productId: 6060
			})
				.then(response => {
					this.productInfo = response.data
					console.log(this.productInfo)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		orderSubmitMit() {
			//提交订单
			if (this.params.name == '') {
				this.$util.msg('请填写商品名称', 2000)
				return
			}
			if (this.params.price == '') {
				this.$util.msg('请填写商品价格', 2000)
				return
			}
			this.SellerService.SellerSubmitRechargeOrder(this.params)
				.then(response => {
					const data = response.data
					this.$util.msg('订单提交成功', 2000, true, 'success')
					setTimeout(() => {
						this.$api.redirectTo(
							`/pages/seller/order/order-details?type=cash&orderId=${data.orderId}&userId=${this.userId}`
						)
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
	background: #f7f7f7;
}
.product-info {
	width: 100%;
	height: 228rpx;
	float: left;
	box-sizing: border-box;
	padding: 24rpx;
	background-color: #ffffff;
	.product-logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
		float: left;
		image {
			width: 180rpx;
			height: 180rpx;
			display: block;
			border-radius: 8rpx;
		}
	}
	.product-cent {
		width: 498rpx;
		height: 180rpx;
		float: right;
		.product-name {
			width: 100%;
			height: 50rpx;
			float: left;
			line-height: 50rpx;
			font-size: $font-size-28;
			color: #333333;
			text-align: left;
		}
		.product-note {
			width: 100%;
			height: 50rpx;
			float: left;
			line-height: 50rpx;
			font-size: $font-size-28;
			color: #999999;
			text-align: left;
		}
		.product-nums {
			width: 100%;
			height: 50rpx;
			float: left;
			line-height: 50rpx;
			font-size: $font-size-28;
			color: #333333;
			text-align: right;
			margin-top: 40rpx;
		}
	}
}
.created-info {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 24rpx;
	background-color: #ffffff;
	float: left;
	.created-item {
		width: 100%;
		height: 64rpx;
		float: left;
		margin-bottom: 24rpx;
		.label {
			width: 148rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: $font-size-28;
			text-align: left;
			color: #666666;
			float: left;
		}
		.input {
			width: 550rpx;
			height: 64rpx;
			box-sizing: border-box;
			border: 1px solid #e1e1e1;
			padding: 0 20rpx;
			line-height: 64rpx;
			font-size: $font-size-26;
			color: #666666;
			float: left;
			border-radius: 8rpx;
		}
		.label-total {
			text-align: right;
			font-size: $font-size-28;
			.red {
				color: #f94b4b;
			}
		}
	}
}
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 110rpx;
	line-height: 110rpx;
	justify-content: space-between;
	font-size: $font-size-28;
	background-color: #ffffff;
	z-index: 998;
	color: $text-color;
	.footer-le {
		width: 570rpx;
		height: 100%;
		float: left;
	}
	.footer-count {
		float: left;
		padding-left: 24rpx;
		width: 190rpx;
		box-sizing: border-box;
		font-size: $font-size-26;
	}
	.footer-price {
		width: 370rpx;
		float: right;
		text-align: right;
		color: $text-color;
		padding: 10rpx 20rpx 10rpx 0;
		box-sizing: border-box;
		.sum {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			float: left;
			.price {
				font-size: $font-size-32;
				color: #ff2a2a;
			}
		}
	}
	.footer-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 100%;
		box-sizing: border-box;
		padding: 15rpx 5rpx;
		.btn {
			width: 100%;
			height: 100%;
			color: #ffffff;
			background: linear-gradient(135deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
			font-size: $font-size-26;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
		}
	}
}
</style>