|
|
<template> <view> <view class="head"> <view class="lf-row-between lf-color-gray list"> <view>采购单 {{ order.p_sn }}</view> </view> <view class="lf-row-between list" v-if="order.canteen"> <image :src="order.canteen.logo" class="image"></image> <view class="info"> <view class="lf-font-32 lf-color-black lf-font-bold">{{ order.canteen.canteen_name }}</view> <view class="lf-font-24 lf-color-555">{{ order.canteen.address }}</view> </view> </view> </view> <self-line></self-line> <view class="lf-border-box lf-bg-white"> <lf-stepbar :list="stepList"></lf-stepbar> </view> <self-line></self-line> <view class="lf-m-t-30 lf-m-l-32"> <view class="lf-font-32 lf-color-black lf-font-bold lf-m-b-20">物资明细</view> <wyb-table v-if="contents.length" :first-line-fixed="true" contentBgColor="#eef6fe" :headers="headers" :contents="contents" @onButtonClick="onButtonClick" width="max-content" height="350rpx"></wyb-table> </view> <view style="height: 100rpx;"></view> <!-- 操作按钮 --> <view class="fixed-bottom"> <view v-if="type == 1" class="lf-row-flex-end"> <button class="btn btn2" style="background-color: #1833F2;" @click="orderTaking">立即接单</button> </view> <view v-if="type == 2" class="lf-row-flex-end"> <button class="btn btn1" @click="is_show_voucher = true">上传凭证</button> <button class="btn btn2" @click="is_show_receiving = true">确认发货</button> </view> <view v-if="type == 3" class="lf-row-flex-end"> <view class="lf-font-32" style="color: #11D189;">已完成</view> </view> <view v-if="type == 4" class="lf-row-flex-end"> <view class="lf-font-32" style="color: #222222;">已退单</view> </view> </view> <!-- 弹出层-上传凭证 --> <u-popup v-model="is_show_voucher" mode="center" border-radius="20"> <view class="popup-box"> <view class="content"> <view class="popup-title">上传凭证信息</view> <view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view> <view class="popup-images"> <view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index)"> <image :src="item" mode="aspectFill"></image> <view class="remove-image" @click.stop="removeInage(index)"> <u-icon name="close-circle"></u-icon> </view> </view> <view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view> </view> </view> <view class="foot-btn"> <u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button> <u-button class="popup-btn" @click="submitImage">确定</u-button> </view> </view> </u-popup> <!-- 弹出层-确认收货 --> <u-popup v-model="is_show_receiving" mode="center" border-radius="20"> <view class="popup-box"> <view class="content"> <view class="popup-title">发货提醒</view> <view class="popup-desc">请填写车辆信息、司机信息</view> <view class="lf-row-between popup-input"> <view>车牌号</view> <input placeholder="请输入车牌号" v-model="l_p_num" /> </view> <view class="lf-row-between popup-input"> <view>司机姓名</view> <input placeholder="请输入司机姓名" v-model="driver_name" /> </view> <view class="lf-row-between popup-input lf-m-b-30"> <view>司机电话</view> <input placeholder="请输入司机电话" maxlength="11" v-model="driver_phone" /> </view> </view> <view class="foot-btn"> <u-button class="popup-btn" @click="is_show_receiving = false">取消</u-button> <u-button class="popup-btn" @click="confirmDeliver">确定</u-button> </view> </view> </u-popup> </view></template>
<script> import { uploadFile } from '@/common/uploadFile.js' import lfYsteps from '@/components/lf-ysteps/lf-ysteps'; import wybTable from '@/components/wyb-table/wyb-table'; export default { components: { lfYsteps, wybTable }, data(){ return { stepList: [], headers: [{ label: '菜品名称', key: 'name' },{ label: '规格', key: 'spec' },{ label: '税前价', key: 'pre_tax_price' },{ label: '税后价', key: 'after_tax_price' }], contents: [], is_show_voucher: false, // 是否显示凭证上传弹出层
is_show_receiving: false, voucher_list: [], // 已上传的凭证列表
voucher_count: 6, // 最多可以上传多少张凭证
type: 2, // 订单状态
p_sn: '', order: {}, l_p_num: '', driver_name: '', driver_phone: '' } }, onLoad(options){ this.p_sn = options.p_sn; // this.getData();
}, methods: { getData(){ this.$http(this.API.API_SUPPLIER_PURCHASEDETAIL, { p_sn: this.p_sn }).then(res => { console.log("getData", res); let order = res.data.order || {}; this.order = order; this.stepList = order.state_log.map((item, index) => { item.isFinished = false; if(index == order.state_log.length - 1){ if(item.action == '订单已完成' || item.action == '订单已退款'){ item.isFinished = true; } } return item; }) // todo contents换成接口返回的值
}); }, // 监听table删除操作
onButtonClick(event){ uni.showModal({ title: '温馨提示', content: '您确定移除该项吗?', success: result => { if(result.confirm){ console.log("移除某一项", event); let { contentIndex } = event; this.contents.splice(contentIndex, 1); } } }) }, // 上传凭证图片
uploadImage(){ let current_count = this.voucher_count - this.voucher_list.length; if(current_count == 0) return; uni.chooseImage({ count: current_count, complete: result => { this.voucher_list.push(...result.tempFilePaths); } }) }, // 预览图片
lookImage(current){ if(this.voucher_list.length <= 0) return; this.$u.throttle(() => { uni.previewImage({ urls: this.voucher_list, current: current }) }, 500); }, // 移除图片
removeInage(current){ this.voucher_list.splice(current, 1); }, // 用户点击确定，将图片上传至oss，并将url发送给后端
submitImage(){ let that = this; let voucher_list = that.voucher_list; if(voucher_list.length <= 0){ return that.$msg('您未上传图片哦'); }; that.is_show_voucher = false; uni.showLoading({ title: '正在上传中...' }) let http_list = []; voucher_list.map(item => { let itemP = new Promise((resolve, reject) => { uploadFile(item, (res) => { resolve(res); }, (err) => { reject(err); }, this); }) http_list.push(itemP); }) Promise.all(http_list).then(res => { console.log("上传完毕", res); let images = res.map(item => item.url); that.$http(that.API.API_SUPPLIER_PURCHASESAVEVOUCHER, { p_sn: that.p_sn, images: images, }).then(result => { uni.hideLoading(); that.voucher_list = []; that.$msg('凭证已上传成功!') }).catch(err => uni.hideLoading()); }).catch(err => { uni.hideLoading(); uni.showModal({ title: '', content: JSON.stringify(err), showCancel: false, confirmColor: '#1833F2' }) }) }, // 立即接单
orderTaking(){ this.$http(this.API.API_SUPPLIER_PURCHASEORDERACCEPT, { p_sn: this.p_sn }).then(res => { console.log("orderTaking", res); this.$msg('接单成功') }); }, // 确认发货
confirmDeliver(){ let l_p_num = this.l_p_num; let driver_name = this.driver_name; let driver_phone = this.driver_phone; if(!l_p_num){ return this.$msg('请输入车牌号') }else if(!driver_name){ return this.$msg('请输入司机姓名') }else if(!driver_phone){ return this.$msg('请输入司机电话') } this.is_show_receiving = false; this.$http(this.API.API_SUPPLIER_PURCHASEORDERSENDOUT, { p_sn: this.p_sn }).then(res => { console.log("confirmDeliver", res); this.$msg('确认收货成功') }); } } }</script>
<style lang="scss" scoped="scoped"> .head{ padding: 0 32rpx; width: 750rpx; box-sizing: border-box; height: auto; .list{ padding: 30rpx 0; border-bottom: 1rpx solid #e5e5e5; font-size: 28rpx; color: #555555; &:last-child{ border-bottom: none; } .image{ width: 140rpx; height: 140rpx; border-radius: 10rpx; } .info{ display: flex; flex-direction: column; justify-content: space-around; width: 530rpx; height: 140rpx; } } } .fixed-bottom{ position: fixed; bottom: 0rpx; left: 0rpx; z-index: 99; width: 750rpx; height: 98rpx; display: flex; // justify-content: flex-end;
align-items: center; border-top: 1rpx solid #E5E5E5; background-color: #FFFFFF; box-sizing: border-box; padding: 0 32rpx; .btn{ width: 212rpx; height: 82rpx; border-radius: 41rpx; margin: 0; padding: 0; font-size: 32rpx; display: flex; justify-content: center; align-items: center; } .btn1{ border: 2rpx solid #555555; opacity: .5; } .btn2{ background: #1833F2; color: #FFFFFF; margin-left: 20rpx; } } .fixed-bottom>view{ width: 100%; } .popup-box{ width: 686rpx; // height: 727rpx;
height: max-content; display: flex; justify-content: space-between; flex-direction: column; .content{ .popup-title{ font-size: 32rpx; font-weight: bold; color: #222222; text-align: center; margin-top: 40rpx; } .popup-desc{ font-size: 28rpx; color: #555555; text-align: center; margin-top: 20rpx; margin-bottom: 18rpx; } .popup-images{ display: flex; flex-wrap: wrap; padding: 22rpx; margin-bottom: 18rpx; .popup-image-item{ width: 198rpx; height: 198rpx; margin: 8rpx; background: #F5F5F5; border-radius: 10rpx; position: relative; image{ width: 100%; height: 100%; } .remove-image{ position: absolute; right: -8rpx; top: -16rpx; color: #e74c3c; font-size: 40rpx; padding: 8rpx; } } .popup-image-item-after::after{ content: '+'; position: absolute; left: 30%; top: 14%; font-size: 100rpx; color: #777777; } } .popup-input{ padding: 0 60rpx; box-sizing: border-box; height: 90rpx; font-size: 28rpx; color: #555555; input{ text-align: right; } } } .foot-btn{ height: 90rpx; width: 100%; border-top: 1rpx solid #E5E5E5; display: flex; box-sizing: border-box; .popup-btn{ width: 50%; height: 100%; border: none; border-radius: initial; &:last-child{ border-left: 1rpx solid #E5E5E5; color: #1833F2; } } } } // 去掉u-button 外边框线
/deep/.u-hairline-border::after{ border: none; }</style>
|
