index.vue 13.1 KB
<template>
	<view class="container">
	    <view :style="'padding:40rpx;'+'background-image:url('+BASE_URL+'/api/File/Image/annexpic/bgimage.jpeg)'">
	        <view style="display:flex;align-items:center;justify-content:center;">
	            <view>
	                <image :src="BASE_URL+'/api/File/Image/annexpic/dates.png'" style="width:50rpx;height:50rpx;margin-top:10rpx;margin-right:10rpx;"></image>
	            </view>
	            <view style="color:white;font-size:28rpx;">{{''+(model.type=='1'?'待付款':model.type=='2'?'待收货':model.type=='3'?'待评价':model.type=='4'?'已完成':model.type=='5'?'已取消':model.type=='6'?'售后中':'异常订单')+''}}</view>
	        </view>
	    </view>
	    <view style="background-color:white;padding:20rpx;border-radius:20rpx;">
	        <view style="display:flex;align-items:center;justify-content:space-between;padding:20rpx;border-bottom:1px solid #e0e0e0;">
	            <view style="display:flex;align-items:center;">
	                <view>
	                    <image :src="BASE_URL+'/api/File/Image/annexpic/rooms.png'" style="width:50rpx;height:50rpx;margin-top:10rpx;"></image>
	                </view>
	                <view style="font-size:28rpx;color:black;margin-left:10rpx;">朗思测评教育</view>
	            </view>
	            <view>
	                <image :src="BASE_URL+'/api/File/Image/annexpic/right.png'" style="width:30rpx;height:30rpx;"></image>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding:20rpx;border-bottom:1px solid #e0e0e0;font-size:25rpx;">
	            <view style="font-size:25rpx;color:black;margin-left:10rpx;">联系方式</view>
	            <view style="color:gray;">17798297507</view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding:20rpx;border-bottom:1px solid #e0e0e0;font-size:25rpx;">
	            <view style="font-size:25rpx;color:black;margin-left:10rpx;">发货方式</view>
	            <view style="color:gray;">无需物流</view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding:20rpx;border-bottom:1px solid #e0e0e0;font-size:25rpx;">
	            <view style="font-size:25rpx;color:black;margin-left:10rpx;">下单信息</view>
	            <view style="color:gray;">{{''+model.orderName+'+'+model.orderPhone+''}}</view>
	        </view>
	    </view>
	    <view style="margin:20rpx;background-color:white;padding:20rpx;border-radius:20rpx;">
	        <view style="display:flex;align-items:center;justify-content:space-between;padding:20rpx;border-bottom:1px solid #e0e0e0;">
	            <view style="font-size:30rpx;color:black;margin-left:10rpx;">订单信息</view>
	            <view></view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">订单编号:<text>{{model.orderNumber}}</text>
	            </view>
	            <view @click="Copy" style="border-radius:40rpx;border:1px solid #e0e0e0;padding:8rpx 25rpx;font-size:20rpx;color:gray;">复制</view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">下单时间:<text>{{model.creatorTime}}</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">支付方式:<text>微信支付</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">效验码:<text>{{(model.user&&model.user.BankNumber)==null?'暂无效验码':model.user&&model.user.BankNumber}}</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;">
	            <view :style="'font-size:28rpx;margin-left:10rpx;'+model.type=='1'?'color:red;':'color:black'">订单状态:<text>{{model.type=='1'?'待付款':model.type=='2'?'待收货':model.type=='3'?'待评价':model.type=='4'?'已完成':model.type=='5'?'已取消':model.type=='6'?'售后中':'异常订单'}}</text>
	            </view>
	        </view>
	    </view>
	    <view style="margin:20rpx;background-color:white;padding:20rpx;border-radius:20rpx;">
	        <view style="display:flex;align-items:center;justify-content:space-between;padding:20rpx;border-bottom:1px solid #e0e0e0;">
	            <view style="font-size:30rpx;color:black;margin-left:10rpx;">平台自营</view>
	            <view></view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;margin:20rpx;" v-for="(item,index) in model.jsonDetail.arrayJsons" :key="index">
	            <view>
	                <view style="display:flex;">
	                    <view>
	                        <image :src="item.goods!=null?item.goods.banner[0].url==undefined?BASE_URL+item.goods.Banner[0].url:BASE_URL+item.goods.banner[0].url:''" style="width:200rpx;height:200rpx;"></image>
	                    </view>
	                    <view style="font-size:25rpx;margin-left:20rpx;line-height:50rpx;">
	                        <view style="font-size:28rpx;">{{item.goods.Title}}</view>
	                        <view style="color:GRAY;">{{'规格:'+item.jsonDetail.Title}}</view>
	                        <view style="color:gray;">x{{item.count}}</view>
	                    </view>
	                </view>
	            </view>
	            <view style="font-size:25rpx;">{{'¥'+(item.count*(item.jsonDetail&&item.jsonDetail.Moneys))+''}}</view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;">
	            <view></view>
	            <view>
	                <text style="color:gray;font-size:25rpx;">合计</text>
	                <text style="color:red;">{{'¥'+model.jsonDetail.totalMoneys}}</text>
	            </view>
	        </view>
	    </view>
	    <view style="margin:20rpx;background-color:white;padding:20rpx;border-radius:20rpx;margin-bottom:150rpx;">
	        <view style="display:flex;align-items:center;justify-content:space-between;padding:20rpx;border-bottom:1px solid #e0e0e0;">
	            <view style="font-size:30rpx;color:black;margin-left:10rpx;">其他信息</view>
	            <view></view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">选择内容:<text>{{model.classType}}</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">姓(拼音):<text>{{model.surname}}</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">名(拼音):<text>{{model.name}}</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">电话:<text>{{model.phone}}</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">邮箱:<text>{{model.email}}</text>
	            </view>
	        </view>
	       <!-- <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">地址:<text>{{model.address}}</text>
	            </view>
	        </view>
	        <view style="display:flex;align-items:center;justify-content:space-between;padding-left:15rpx;margin-top:20rpx;">
	            <view style="font-size:28rpx;color:black;margin-left:10rpx;">证件号码:<text>{{model.idCard}}</text>
	            </view>
	        </view> -->
	    </view>
	    <view style="position:fixed;bottom:0;background-color:white;width:100%;height:120rpx;box-shadow:0px -10px 20px -5px #e0e0e0;" v-if="model.type=='1'">
	        <view style="margin:20rpx 20rpx 0rpx 20rpx;display:flex;align-items:center;justify-content:space-between;padding-bottom:20rpx;">
	            <view>
	                <text style="font-size:20rpx;font-weight:bold;color:red;">合计:¥</text>
	                <text style="font-size:50rpx;color:red;font-weight:bold;">{{model.jsonDetail.totalMoneys}}</text>
	            </view>
	            <view @click="Confirm" style="background-color:red;border-radius:20rpx;padding:20rpx;font-weight:bold;color:white;">提交订单</view>
	        </view>
	    </view>
	</view>

</template>

<script>
	import BASE_URL from '../../common/config.js'
	import utils from '../../service/utils.js'
	import service from '../../service/service.js'
	export default{
		data(){
			return{
				BASE_URL,
				model:null,
				noClick:true,
				form: {
					"orderinfo": {
						"userId": "",
						"goodsId": "",
						"jsonDetail": "",
						"moneys": 0,
						"orderName": "",
						"orderPhone": "",
						"orderNumber": "",
						"type": "1",
						"classType": "线上考试OLP",
						"surname": "",
						"name": "",
						"phone": "",
						"email": "",
						"address": "",
						"idCard": "",
						"creatorTime": "2022-12-19T03:45:48.911Z",
						"lastModifyTime": "2022-12-19T03:45:48.911Z",
						"codes": "",
						"cpdUrl": "",
						"invitedUserId": "",
						"txt": ""
					},
					"openid": "",
					"status": 1
				},
			}
		},
		onLoad(data) {
			this.model=JSON.parse(decodeURIComponent(data.item))
			this.model.creatorTime=utils.formatTime(this.model.creatorTime,'yyyy-MM-dd HH:mm:ss')
			console.log('接收解析数据',this.model)
		},
		methods:{
			
			// 立即付款
			Confirm() {
				let item=JSON.parse(JSON.stringify(this.model))
				// 提交支付
					let that = this;
					uni.requestSubscribeMessage({
						tmplIds:['kRVg7meiHm-R1EMxtXDepwT_4cb0YXMpJfAdae9qH5k'],
						success(){
							if (that.noClick) {
								// 第一次点击
								that.noClick = false;
								that.form.orderinfo=item
								delete that.form.orderinfo.invitedUser
								delete that.form.orderinfo.user	
								that.form.openid=service.getUser().openid
								that.form.orderinfo.jsonDetail=JSON.stringify(that.form.orderinfo.jsonDetail)
								console.log('需要对比得订单信息',that.form.orderinfo.jsonDetail)
								console.log('最终数据',that.form)
								that.SubmitPay()
								setTimeout(() => {
									that.noClick = true;
								}, 500)
							} else {
								// 这里是重复点击的判断
								uni.showToast({
									title:'频率过快',
									icon:'none'
								})
							}
						}
					})
			},
			SubmitPay(){
				this.API.PlaceOrder(this.form).then(res => {
					console.log('下单信息', res)
					if (res.code == 200) {
						this.Pay(res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			Pay(parsejson) {
				console.log('这是支付参数', parsejson)
				uni.getProvider({
					service: 'payment',
					success(e) {
						console.log('获取服务商成功', e)
						console.log('时间戳', new Date().getTime().toFixed())
						uni.requestPayment({
							provider: e.provider[0],
							orderInfo: parsejson.data,
							timeStamp: parsejson.data.timeStamp,
							nonceStr: parsejson.data.nonceStr,
							package: parsejson.data.package,
							signType: 'MD5',
							paySign: parsejson.data.paySign,
							success(obj) {
								console.log('支付返回数据', obj.errMsg)
								if(obj.errMsg=='requestPayment:ok'){
									
								uni.showToast({
									title: '支付成功',
									icon: 'success',
								})
								setTimeout(()=>{
									uni.reLaunch({
										url:'../payResult/index?item='+encodeURIComponent(JSON.stringify(parsejson))
									})
								},2000)
								
								}
			
							},
							fail(e) {
								console.log('支付失败', e)
								uni.showToast({
									title:'支付失败',
									icon:'none'
								})
							}
			
			
						})
					},
					fail(e) {
						console.log('获取服务商失败', e)
						uni.showToast({
							title: '获取服务商失败,请联系管理员',
							icon: 'none'
						})
					}
				})
			},
			
			
			
			
			Copy(){
				uni.setClipboardData({
					data:this.model.orderNumber,
					success(res) {
						console.log('成功吗')
						uni.showToast({
							title:'粘贴板复制成功',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
</style>