cashier_app/pagesOrder/detail/components/user.vue

88 lines
2.4 KiB
Vue

<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.phone||'未绑定手机号'}}</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||0}}</view>
<view class="color-666 u-m-t-8 u-font-24">余额</view>
</view>
<view class="">
<view class="font-bold">{{user.accountPoints||0}}</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.userId||'',
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>