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:{},
				params:{
					name:'',
					price:'', 
					note:'', 
					userId:0 , 
					serviceProviderId:0
				}
			}
		},
		onLoad(option){//商品数据
			this.$api.getComStorage('orderUserInfo').then((resolve) =>{
				this.params.userId = resolve.userID
				this.getInitCrearOrder();
			})
		},
		filters:{
			NumFormat(value) {//处理金额
				return Number(value).toFixed(2);
			},
		},
		methods: {
			getInitCrearOrder(option){//协销购物车跳转确认订单初始化信息
				this.$api.getStorage().then((resolve) =>{
					this.params.serviceProviderId = resolve.serviceProviderId
					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({'params':JSON.stringify(this.params)}).then(response =>{
					const data = response.data;
					if(data.code === '1'){
						this.$util.msg('支付成功',2000,true,'success')
						setTimeout(() =>{
							this.$api.redirectTo(`/pages/seller/order/order-details?type=cash&orderID=${data.orderID}&userId=${this.params.userId}`)
						},2000)
					}else{
						this.$util.msg('订单提交成功',2000,true,'success')
						setTimeout(()=>{
							this.$api.redirectTo(`/pages/seller/order/order-details?type=cash&orderID=${data.orderID}&userId=${this.params.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>