first

pagesOrder/detail/components/user.vue

@@ -0,0 +1,89 @@
+<template>
+	<view class="u-font-28 default-box-padding u-relative bg-fff border-r-12 u-overflow-hide">
+		<template v-if="orderInfo.status=='unpaid'">
+			<view class="change u-absolute  color-fff  left-top" @click="chooseUser">切换</view>
+		</template>
+		<template v-if="user.id">
+			<view class="u-flex	u-row-between u-m-t-20 border-bottom u-p-b-20">
+				<view class="u-flex">
+					<up-avatar :size="30" :src="user.headImg"></up-avatar>
+					<view class="color-666 u-m-l-30">{{user.telephone||'未绑定手机号'}}</view>
+				</view>
+				<view>
+					<my-button @click="toOrder" :height="60" plain shape="circle">他的订单</my-button>
+				</view>
+			</view>
+		</template>
+		<template v-else>
+			<view class="u-flex	u-row-between u-m-t-20 border-bottom u-p-b-24">
+				<view class="u-flex">
+					<up-avatar :size="30" :src="user.headImg"></up-avatar>
+					<view class="color-666 u-m-l-30">{{'服务员下单'}}</view>
+				</view>
+				<view>
+					<my-button width="128" height="48" @click="toOrder" :height="60" plain shape="circle">
+						<text class="u-font-24 no-wrap">他的订单</text>
+					</my-button>
+				</view>
+			</view>
+		</template>
+		<view class="u-flex u-m-t-24 u-row-between u-font-28">
+			<view class="">
+				<view class="font-bold ">{{user.amount}}</view>
+				<view class="color-666 u-m-t-8 u-font-24">余额</view>
+			</view>
+			<view class="">
+				<view class="font-bold">{{user.accountPoints}}</view>
+				<view class="color-666 u-m-t-8 u-font-24">积分</view>
+			</view>
+			<view class="">
+				<view class="font-bold u-text-center">{{user.orderNumber||0}}</view>
+				<view class="color-666 u-m-t-8 u-font-24">订单数量</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import go from '@/commons/utils/go.js'
+	const props = defineProps({
+		orderInfo: {
+			type: Object,
+			default: () => {
+				status:''
+			}
+		},
+		user: {
+			type: Object,
+			default: () => {
+				return {
+					id:'',
+					headImg:'',
+					telephone:'',
+					amount:'0.00',
+					accountPoints:'0.00'
+				}
+			}
+		}
+	})
+	
+	function toOrder(){
+		go.to('PAGES_ORDER_INDEX',{
+			userId:props.user.id||'',
+			type:'user'
+		})
+	}
+
+	function chooseUser() {
+		go.to('PAGES_CHOOSE_USER')
+	}
+</script>
+
+<style lang="scss" scoped>
+	.change {
+		padding: 2rpx 22rpx 4rpx 14rpx;
+		border-radius: 18rpx 0rpx 18rpx 0rpx;
+		background: linear-gradient( 139deg, #74B0FF 0%, #318AFE 100%);
+		z-index: 2;
+	}
+</style>