Files
aishangjia-uniapp/sub_pages/order/detail.vue
2023-08-04 13:14:48 +08:00

638 lines
15 KiB
Vue
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="select-date">
<view class="arrow-left" @click="previous">
<u-icon class="icon" name="arrow-left"></u-icon>
<text>前一天</text>
</view>
<view class="agent-user" v-if="agentUser" @click="navTo('pages/menu/select-user/select-user')">
<span>{{ agentUser.nickname }}</span>
<u-icon class="icon" name="arrow-down-fill"></u-icon>
</view>
<view class="delivery-time" @click="openCalendar">
<span>{{ deliveryTime }}</span>
<u-icon class="calendar" name="calendar"></u-icon>
</view>
<view class="arrow-right" @click="next">
<text>后一天</text>
<u-icon class="icon" name="arrow-right"></u-icon>
</view>
<u-calendar v-model="show" mode="date" :default-date="minDate" :min-date="minDate" :max-date="maxDate"
@change="changeDate"></u-calendar>
</view>
<block v-for="(item,index) in list" :key="index">
<!-- {{ new Date(deliveryTime).getTime() }} == {{ now }} -->
<view class="order">
<view class="title" v-if="item.categoryId == 25">
<text>早餐</text>
<view>
<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
@click="onCancel(item)">取消</u-button>
</view>
</view>
<view class="title" v-if="item.categoryId == 26">
<text>午餐</text>
<view>
<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
@click="onCancel(item)">取消</u-button>
</view>
</view>
<view class="title" v-if="item.categoryId == 27">
<text>晚餐</text>
<view>
<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
@click="onCancel(item)">取消</u-button>
</view>
</view>
<view class="fenqi">
<block>
<view class="item">
<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
<view class="goods-info">
<view class="goods-name">
<text class="name">{{ item.goodsName }}</text>
<text class="selling-point" v-if="item.gear == 10">食堂档口</text>
<text class="selling-point" v-if="item.gear == 20">物品档口</text>
</view>
<view class="goods-price">
<text class="price">{{ item.goodsPrice }}</text>
<text class="num"> x {{ item.totalNum }}</text>
<text class="num">{{ item.deliveryStatus == 10 ? '待签到' : '已签到' }}</text>
</view>
</view>
</view>
</block>
</view>
</view>
</block>
<!-- 临时报餐 -->
<block v-if="temporary && !agentUser">
<view class="order">
<view class="title">
<text>临时报餐</text>
</view>
<view class="fenqi">
<block v-for="(item,index) in temporary.goodsList" :key="index">
<view class="item">
<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
<view class="goods-info">
<view class="goods-name">
<text class="name">{{ item.goodsName }}</text>
<text class="selling-point" v-if="item.gear == 10">食堂档口</text>
<text class="selling-point" v-if="item.gear == 20">物品档口</text>
<text class="selling-point" v-if="item.categoryId == 25">早餐</text>
<text class="selling-point" v-if="item.categoryId == 26">午餐</text>
<text class="selling-point" v-if="item.categoryId == 27">晚餐</text>
</view>
<view class="goods-price">
<text class="price">{{ item.goodsPrice }}</text>
<text class="num"> x {{ item.totalNum }}</text>
<text class="num">{{ item.deliveryStatus == 10 ? '待签到' : '已签到' }}</text>
</view>
</view>
</view>
</block>
</view>
</view>
</block>
<empty v-if="list.length == 0" tips="暂无信息" />
<!-- 与包裹页面所有内容的元素u-page同级且在它的下方 -->
<!-- <u-tabbar v-model="current" :list="tabbar"></u-tabbar> -->
</view>
</template>
<script>
import {
getUser
} from '@/api/user.js'
import {
dateFormat
} from '@/utils/util.js'
import {
createOrderNo
} from '@/utils/util.js'
import store from '@/store';
import Empty from '@/components/empty'
import {
payQuery
} from '@/api/payment.js'
import * as OrderApi from '@/api/order.js'
import * as OrderGoodsApi from '@/api/order-goods.js'
export default {
components: {
Empty
// Search
},
data() {
return {
tabbar: [{
iconPath: "static/tabbar/home.png",
selectedIconPath: "static/tabbar/home-active.png",
text: '首页',
isDot: true,
customIcon: true,
},
{
iconPath: "play-right",
selectedIconPath: "play-right-fill",
text: '报餐',
customIcon: false,
},
// {
// iconPath: "play-right",
// selectedIconPath: "play-right-fill",
// text: '消息',
// customIcon: false,
// },
{
iconPath: "account",
selectedIconPath: "account-fill",
text: '我的',
isDot: false,
customIcon: false,
},
],
current: 0,
disabled: false,
totalPrice: 0,
list: [],
temporary: null,
agentUserId: null,
agentUser: null,
canteenGoods: [],
entityGoods: [],
orderId: null,
record: {},
minDate: '2023-04-01',
maxDate: dateFormat('YYYY-mm-dd', new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 *
60 * 1000 * 7)),
deliveryTime: dateFormat('YYYY-mm-dd',
new Date()), // var startDate= new Date(new Date().toLocaleDateString());
now: new Date().getTime(),
daynow: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
today: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
show: false,
dateFormat,
// 正在加载中
isLoading: true,
// 当前选择的设备ID
goodsId: null,
mode: 'range',
month: 6,
agree: true,
price: {
batteryRent: 300,
batteryDeposit: 300,
batteryInsurance: 0
},
customStyle: {
marginTop: '20px', // 注意驼峰命名,并且值必须用引号包括,因为这是对象
backgroundColor: '#51b2aa'
},
isShowCancel: true
}
},
onLoad(option) {
const app = this
app.orderId = option.orderId
if (option.deliveryTime) {
app.deliveryTime = option.deliveryTime
}
},
onShow() {
// 是否代理报餐
this.getAgentUser()
// 是否已下过单
this.getMyOrder()
this.isCancel()
// 查询临时报餐明细
this.getTemporaryFood()
},
methods: {
isCancel() {
const today = new Date().getTime()
// console.log("this.isShowCancel: ",this.isShowCancel);
// console.log(this.deliveryTime + '=========' + today);
// console.log(Date.parse(this.deliveryTime) + '=======' + today);
if (Date.parse(this.deliveryTime) <= today) {
this.isShowCancel = false
} else {
this.isShowCancel = true
}
},
isDisabled(item) {
console.log("isDisabled: ", item);
},
getTemporaryFood() {
const app = this
const {
deliveryTime
} = this
console.log("deldeliveryTime: ",deliveryTime);
OrderApi.getTemporaryOrder({
isTemporary: 1,
deliveryTime
}).then(res => {
app.temporary = res.data
console.log("res: ", res.data);
}).catch(err => {
console.log("err: ",err);
})
},
// getToday(){
// this.today = dateFormat('YYYY-mm-dd',new Date())
// },
// getOrder(){
// const app = this
// const { orderId } = this
// OrderApi.getOrder(orderId).then(res => {
// app.record = res.data
// app.deliveryTime = dateFormat('YYYY-mm-dd',new Date(res.data.deliveryTime))
// OrderGoodsApi.listOrder({orderId}).then(res => {
// console.log("res.data: ",res.data);
// app.list = [];
// app.list = res.data.map(d => {
// if(d.gear == 10){
// app.canteenGoods.push(d)
// }
// if(d.gear == 20){
// app.entityGoods.push(d)
// }
// })
// })
// })
// },
getAgentUser() {
const app = this
const agentUser = uni.getStorageSync('agentUser')
if (agentUser) {
app.agentUser = agentUser
app.agentUserId = agentUser.userId
}
},
getMyOrder() {
const app = this
const {
orderId,
deliveryTime,
agentUserId
} = this
app.list = []
// app.canteenGoods = [];
// app.entityGoods = [];
// 加载今天报餐明细
OrderApi.getMyOrder({
orderId,
deliveryTime,
agentUserId
}).then(res => {
if (res.data) {
console.log("res.data: ", res.data.orderId);
const goodsList = res.data.goodsList
app.list = goodsList.filter(d => d.totalNum > 0)
app.orderId = res.data.orderId
// app.list = goodsList.map(d => {
// if(d.gear == 10){
// app.canteenGoods.push(d)
// }
// if(d.gear == 20){
// app.entityGoods.push(d)
// }
// })
}
})
},
// 取消单个菜品
onCancel(item) {
console.log("item.orderGoodsId: ", item.orderGoodsId);
OrderGoodsApi.cancelfood(item).then(res => {
this.$toast(res.message)
this.getAgentUser()
// 是否已下过单
this.getMyOrder()
})
},
cancelOrder() {
const {
orderId
} = this
console.log("orderId: ", orderId);
OrderApi.cancelOrder({
orderId
}).then(res => {
this.$toast(res.message)
this.getMyOrder()
}).catch(err => {
this.$toast(err.message)
})
},
onChangeStepper({
value
}) {
this.month = value
},
change(e) {
console.log(e);
},
openCalendar() {
this.show = true
},
changeDate(date) {
this.deliveryTime = date.result
this.getMyOrder()
this.isCancel()
},
onInput(month) {
this.month = month
},
onAgree() {
this.agree = !this.agree
},
// 跳转页面
navTo(url) {
uni.$u.route(url);
},
showXieyi() {
this.$navTo('pages/help/xieyi')
},
previous() {
// 前一天
this.today = this.today - 24 * 60 * 60 * 1000
this.deliveryTime = dateFormat('YYYY-mm-dd', new Date(this.today))
this.getAgentUser()
this.getMyOrder()
this.getTemporaryFood()
},
next() {
// 后一天
// console.log("this.today: ",this.today);
this.today = this.today + 24 * 60 * 60 * 1000
// console.log("this.today-------: ",this.today);
this.deliveryTime = dateFormat('YYYY-mm-dd', new Date(this.today))
// console.log("this.deliveryTime: ",this.deliveryTime);
this.getAgentUser()
this.getMyOrder()
this.getTemporaryFood()
},
// 比较时间大小
compare() {
// 预定开始时间
const deliveryTime = new Date(this.deliveryTime).getTime()
// 今天开始时间
const todayStartTime = new Date(dateFormat('YYYY-mm-dd', new Date(this.daynow))).getTime()
if (todayStartTime > deliveryTime) {
return true
} else {
return false
}
},
copyCode(text) {
// #ifndef H5
console.log("text: ", text);
uni.setClipboardData({
text: text,
success: (result) => {
this.$success("复制成功")
}
})
// #endif
// #ifdef H5
let textarea = document.createElement("textarea")
textarea.value = text
textarea.readOnly = "readOnly"
document.body.appendChild(textarea)
textarea.select() // 选中文本内容
textarea.setSelectionRange(0, info.length)
uni.showToast({ //提示
title: '复制成功'
})
result = document.execCommand("copy")
textarea.remove()
// #endif
}
}
}
</script>
<style lang="scss" scoped>
// .goods-info {
// background-color: #ffffff;
// border-radius: 12rpx;
// width: 700rpx;
// margin: 20rpx auto;
// .goods {
// padding: 20rpx;
// display: flex;
// image {
// width: 220rpx;
// height: 220rpx;
// margin: 20rpx;
// }
// .info {
// display: flex;
// flex-direction: column;
// padding: 20rpx;
// .goods-name {
// font-size: 34rpx;
// margin-bottom: 10rpx;
// }
// .goods-desc {
// font-size: 28rpx;
// color: #999999;
// }
// .selling-point{
// padding: 5px 0;
// color: #e6760e;
// }
// }
// }
// .between-time {
// width: 500rpx;
// margin: auto;
// padding-bottom: 20rpx;
// text-align: center;
// .select-slider {
// line-height: 2em;
// color: #e6760e;
// }
// }
// }
.order {
background-color: #ffffff;
border-radius: 12rpx;
width: 700rpx;
margin: 20rpx auto;
padding: 10rpx 0;
.title {
font-weight: bold;
font-size: 30rpx;
padding: 20rpx;
display: flex;
justify-content: space-between;
}
.title2 {
font-weight: bold;
font-size: 30rpx;
padding: 20rpx;
display: flex;
color: #ff0000;
justify-content: space-between;
}
.xieyi {
padding: 20rpx;
font-size: 26rpx;
}
}
.submit {
border-radius: 12rpx;
width: 700rpx;
margin: 20rpx auto;
padding: 10rpx 0;
}
.xieyi-text {
color: #0000ff;
}
.fenqi {
padding: 30rpx;
border-top: 1px solid #eee;
.item {
display: flex;
padding: 20rpx 0;
.image {
width: 160rpx;
height: 120rpx;
}
.goods-info {
width: 460rpx;
margin-left: 10rpx;
display: flex;
justify-content: space-between;
.goods-name {
text-align: left;
display: flex;
flex-direction: column;
.name {
font-weight: 500;
max-width: 300rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.selling-point {
max-width: 300rpx;
color: #999999;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 1; //行数
line-clamp: 1;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
}
.goods-price {
display: flex;
flex-direction: column;
.price {
color: #ff0000;
display: flex;
justify-content: right;
}
.num {
text-align: right;
color: #cccccc;
}
}
}
}
}
.select-date {
text-align: center;
line-height: 2.4rem;
background-color: #ffffff;
border-bottom: 15rpx solid #f3f3f3;
display: flex;
justify-content: space-between;
.agent-user {
color: #ff0000;
}
.icon {
font-size: 34rpx;
}
.arrow-left {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 20rpx;
text {
padding: 0 5px;
}
}
.arrow-right {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 12rpx;
text {
padding: 0 5px;
}
}
.delivery-time {
display: flex;
flex-direction: row;
justify-content: center;
}
.calendar {
margin: 0 5rpx;
}
}
.on-buy {
background-color: #804002;
}
</style>