yogaApp/pages/order/orderpj.vue

<template>
	<view class="page">
		
		<view class="oinfo" v-if="info">
			
			<!-- 商品信息 -->
			<view class="yycon odrcell" v-if="info.orderItemList&&info.orderItemList.length>0">
				<view class="oscon" v-for="(item, index) in info.orderItemList"  :key="index">
					<view class="osimg imgload">
						<image class="osimg" v-if="item.pic" :src="item.pic" mode="aspectFill"></image>
					</view>
					<view class="osrcon">
						<view class="osname">
							{{item.productName?item.productName:''}}
						</view>
						<view class="oscell">
							<text class="txt">规格：{{ retSku(item.spData) }}</text>
						</view>
						<view class="oscell">
							<text class="txt">单价：￥{{item.salePrice}}</text>
						</view>
						<view class="oscell">
							<text class="txt">数量：{{item.quantity}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评价信息 -->
			<view class="pjcon">
				
				<view class="fcon">
				    <!-- <button @click="handleUploadClick">上传</button> -->
					<view class="fcell" @click="handleUploadClick">
						<image class="img" src="/static/image/camera.png"></image>
						<view class="ftxt">添加视频/图片</view>
					</view>
				    <xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload>
				</view>
				<view class="srcon">
					<uni-easyinput type="textarea" v-model="value" placeholder="请从多个角度输入商品的评价内容！"></uni-easyinput>
				</view>
				
				<view class="fcon">
					<view class="pfcon">
						<view class="pftxt">综合评价</view>
						<uni-rate v-model="rateValue1" @change="onChange1" />
					</view>
					<view class="pfcon">
						<view class="pftxt">物流评价</view>
						<uni-rate v-model="rateValue2" @change="onChange2" />
					</view>
				</view>
				
				<view class="submitcon">
					<button type="primary" class="bbtn" @click="submit('valiForm')">发布</button>
				</view>
				
			</view>
			
		</view>
		
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin> 
		
	</view>
</template>

<script>
	import { myCache } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	export default {
		components: {
			openlogin
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				messageText: '', //错误提示框
				msgType: 'error',
				id:"",
				value:"",
				rateValue1:null,
				rateValue2:null,
				rateValue3:null,
				info:{
					sh_state:"1",
					sh_name:"收货人",
					sh_phone:"18900000001",
					sh_address:"收货地址收货地址收货地址收货地址",
					orderid:"ord23258876543",
					business:"π瑜伽（淮海中路店）",
					productid:"1",
					productprice:39.9,
					productname:"减脂|减重|垫子上瑜伽",
					img:'../../static/image/theme/p1.jpg',
					productspecs:"M 白",
					productnum:1,
					productunit:"个",
					orderstate:'1',
					orderdate:"2025-06-23 10:26:09",
					room:"VIP1",
					teacher:"教练A",
					paytype:"支付宝",
					paydate:"2025-06-23 10:26:09",
					ordershipfee:"0.0",
					jymoney:39.9,
					sfmoney:39.9,
					kdno:"1098768799232",
					icon:"../../static/image/product/sp1.jpg",
					username:"张三",
					tel:"18000000001",
					address:"江苏省扬州市江都市地址信息1地址信息2地址信息3地址信息4地址信息5"
				},
				steps:
				[
					{title:'已付款',desc:'2025-02-05 13:30'},
					{title:'已预约',desc:'2025-02-05 13:30'},
					{title:'教练已确认',desc:'2025-02-05 13:30'},
					{title:'店长确认，准备上课',desc:''},
					{title:'课程结束',desc:''},
				],
				uploadOptions: {
					// url: 'http://192.168.31.185:3000/api/upload', // 不传入上传地址则返回本地链接
				},
			};
		},
		onLoad(options) {
			if(options.id)
			{
				this.id=parseInt(options.id);
				this.getinfo();
			}
		},
		onShow(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(this.userid==""||this.userid=="0"){
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		},
		methods: {
			onChange1(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			onChange2(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			onChange3(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			handleUploadClick() {
				// 使用默认配置则不需要传入第二个参数
			    // type: ['image', 'video', 'file'];
			    this.$refs.XeUpload.upload('file', {});
			    // this.$refs.XeUpload.upload('image', {
			    //  count: 6,
			    //  sizeType: ['original', 'compressed'],
			    //  sourceType: ['album'],
			    // });
			},
			handleUploadCallback(e) {
			    // e.type: ['choose', 'success', 'warning']
			    // choose 是options没有传入url，返回临时链接时触发
			    // success 是上传成功返回对应的数据时触发
			    // warning 上传或者选择文件失败触发
			    // ......
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"||this.phone==""){
					uni.navigateTo({
						url: `/pages/login/login`
					});
					return false;
				}
				else{
					return true;
				}
			},
			goback(){
				uni.navigateBack({
					delta: 1
				});
			},
			retSku(spData){
				var sels=[];
				if(spData){
					var suk= JSON.parse(spData);
					var keys=Object.keys(suk);
					keys.forEach(dd=>{
						sels.push(dd+":"+suk[dd])
					});
				}
				return sels.join(',');
			},
			async getinfo() {
				uni.showLoading({
					title: '数据加载中...'
				});
				const {data: res} = await uni.$http.get('/api/order/orderDetail', {orderId:this.id});
				if(res){
					// 订单信息
					this.info=res;
					this.$forceUpdate();
				}
				else{
					uni.showModal({
						title: '提示',
						content: '当前订单信息不存在..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							// 返回
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			},
			submit(ref) {
				var that = this;
				// 判断是否可以提交？
				that.savedo();
			},
			async savedo() {
				var that = this;
				try { 
					
					const {
						data: res
					} = await uni.$http.post("/member/update", that.valiFormData);
					if (res.msg == "update member succeeded") {
						this.msgType = 'success';
						this.messageText = `提交成功！`;
						this.$refs.message.open();
						myCache("ifuserEdit", true);
						setTimeout(() => {
							// 返回  关闭当前页面
							uni.navigateBack({
								delta: 1
							});
						}, 2000);
					} else {
						this.msgType = 'error';
						this.messageText = res.msg ? res.msg : '提交失败！',
						this.$refs.message.open();
					}
				} catch (res) {
					this.msgType = 'error';
					this.messageText = res.msg ? res.msg : '提交失败！',
					this.$refs.message.open();
				}
			
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-collapse-item__title-box{
		padding: 0 !important;
	}
	::v-deep .uni-collapse-item__title-text{
		font-weight: 600;
	}
	.page{
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.ret{
		position: fixed;
		top:20rpx;
		left:20rpx;
		background: rgba(0, 0, 0, .3);
		height: 60rpx;
		width: 60rpx;
		border-radius: 50% 50%;
		text-align: center;
		line-height: 60rpx;
		z-index: 9999;
	}
	.submitcon{
		position: fixed;
		display: flex;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		background-color: #FFFFFF;
		justify-content: center;
	}
	.oscon{
		margin:0;
		background-color: #f3fafa;
		border-radius: 16rpx;
		padding: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		.osimg{
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
		.osrcon{
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: flex-start;
			margin-left: 50rpx;
		}
		.osname{
			line-height: 48rpx;
			font-size:28rpx;
			color:#303133;
		}
		.oscell{
			font-size: 24rpx;
			color:#747474;
		}
		.omoney{
			display: flex;
			width: 100rpx;
			color:#333;
			font-size: 28rpx;
			align-items: flex-end;
			justify-content: flex-end;
		}
	}
	.ydcon{
		position: relative;
	}
	.yyright{
		position: absolute;
		right: 100rpx;
		top:50rpx;
	}
	.odrcell{
		border-radius: 10rpx;
	}
	.pjcon{
		position: relative;
	}
	.srcon{
		margin-top: 20rpx;
	}
	.pfcon{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		align-items: center;
		padding:10rpx;
	}
	.pftxt{
		width: 140rpx;
	}
	.fcon{
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fff;
		border:1rpx solid #e5e5e5;
		padding: 20rpx;
		border-radius: 8rpx;
	}
	.fcell{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.img{
		width: 80rpx;
		height: 80rpx;
	}
	.oinfo{
		padding:20rpx;
		position: relative;
		margin-bottom: 160rpx;
		
		.ozc{
			display: flex;
			flex-direction: column;
			background-color: #becba0 ;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #333;
				width: 100%;
				margin: 10rpx 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #333;
				width: 100%;
				margin: 0 0 20rpx;
			}
		}
		.owc{
			display: flex;
			flex-direction: column;
			background-color: #00A99A ;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #FFF;
				width: 100%;
				margin: 6rpx 0 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #FFF;
				width: 100%;
				margin: 0 0 6rpx;
			}
		}
		.oztgray{
			display: flex;
			flex-direction: column;
			background-color: #ddd;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #333;
				width: 100%;
				margin: 6rpx 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #747474;
				width: 100%;
				margin: 0 0 20rpx;
			}
		}
		.oztorange{
			display: flex;
			flex-direction: column;
			background-color: #faa755;
			padding: 20rpx;
			border-radius: 16rpx;
			.ozstate{
				font-size: 28rpx;
				color: #FFF;
				width: 100%;
				margin: 6rpx 0;
			}
			.oztip{
				font-size: 26rpx;
				color: #FFF;
				width: 100%;
				margin: 0 0 20rpx;
			}
		}
		.yycon{
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 20rpx 20rpx;
			.atitle{
				padding: 10rpx 0 10rpx;
				color:#303133;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.price{
					font-size: 36rpx;
				}
			}
			.olist{
				display: flex;
				flex-direction: column;
				padding: 0;
				width: 100%;
				.ocell{
					font-size: 26rpx;
					color:#747474;
					padding: 10rpx 0 10rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}
				.ocell1{
					font-size: 26rpx;
					color:#747474;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}
			}
			.sqcon{
				padding: 20rpx;
				margin: 20rpx 0;
				background-color: #f5f5f5;
				display: flex;
				flex-direction: column;
				border-radius: 10rpx;
				.sqlist{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: #333333;
					font-size: 26rpx;
					line-height: 50rpx;
				}
			}
		}
	}
	
	.red{
		color:#ff3d0e;
	}
	.green{
		color:#00cd00;
	}
	
	::v-deep.uni-radio-input-checked{
		background-color: #00A99A !important;
		border-color: #00A99A !important;
		background-clip: content-box!important;
		box-sizing: border-box;
	}
	::v-deep.uni-radio-input-checked::before{
		display: none!important;
	}
	
	.bbtn {
		margin: 20rpx 10rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 560rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #00A99A;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(0,169,154,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	
</style>