|
|
<template> <view> <view class="head"> <view class="lf-row-between list" v-if="order.canteen"> <image :src="order.canteen.logo" class="image" v-if="order.canteen.logo"></image> <image src="../../static/images/canteen_avatar.png" class="image" v-else></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 class="lf-font-24 lf-color-555" @click="call(order.canteen.ctl_phone)">{{order.canteen.ctl_man}} {{ order.canteen.ctl_phone }}</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 v-if="order.car_license || supplier_voucher.length || canteen_voucher.length ||order.contact_name"></self-line> <view class="head"> <view class="lf-row-between list"> <view>采购人</view> <view class="lf-font-bold">{{order.contact_name}}</view> </view> <view class="lf-row-between list"> <view>联系电话</view> <view class="lf-font-bold" @click="call(order.contact_phone)">{{order.contact_phone}}</view> </view> <view class="lf-row-between list"> <view>采购单</view> <view class="lf-font-bold">{{order.p_sn}}</view> </view> <view class="lf-row-between list"> <view>批次号</view> <view class="lf-font-bold">{{order.batch_sn}}</view> </view> <view class="lf-row-between list"> <view>预计收货时间</view> <view class="lf-font-bold">{{order.deadline_text}}</view> </view> <view class="lf-row-between list" v-if="order.receive_time"> <view>实际收货时间</view> <view class="lf-font-bold">{{order.receive_time}}</view> </view> <block v-if="order.car_license"> <view class="lf-row-between list"> <view>车辆</view> <view class="lf-font-bold">{{order.car_license}}</view> </view> <view class="lf-row-between list"> <view>司机</view> <view class="lf-font-bold">{{order.deliver_man}}</view> </view> <view class="lf-row-between list"> <view>联系电话</view> <view class="lf-font-bold">{{order.deliver_phone}}</view> </view> </block> <view class="list" v-if="supplier_voucher.length"> <view>供应商证明材料</view> <view class="lf-flex-wrap lf-m-t-10"> <image :src="item" class="ms-img" @click="lookImage(index, 'supplier_voucher')" v-for="(item, index) in supplier_voucher" :key="index"></image> </view> </view> <view class="list" v-if="canteen_voucher.length"> <view>食堂证明材料</view> <view class="lf-flex-wrap lf-m-t-10"> <image :src="item" class="ms-img" @click="lookImage(index, 'canteen_voucher')" v-for="(item, index) in canteen_voucher" :key="index"></image> </view> </view> </view> <self-line></self-line> <view class="lf-m-t-30 lf-m-l-32 lf-m-r-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" width="max-content" height="80vh"></wyb-table> </view> <view style="height: 140rpx;"></view> <!-- 操作按钮 --> <view class="fixed-bottom"> <view v-if="type == '待接单'" class="lf-row-flex-end"> <button class="btn btn2" :class="{'lf-btn-disabled': button_click}" style="background-color: #1833F2;" @click="orderTaking">立即接单</button> </view> <view v-else-if="type == '备货中'" 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-else-if="type == '已发货'" class="lf-row-between"> <button class="btn btn1" @click="is_show_voucher = true">上传凭证</button> <view class="lf-font-32" style="color: #11D189;">{{ type }}</view> </view> <view v-else class="lf-row-flex-end"> <view class="lf-font-32">{{ type }}</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, 'voucher_list')"> <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> <!-- 预览图片组件 --> <lf-previewimage ref="previewimage" /> </view></template>
<script> import { uploadFile } from '@/common/uploadFile.js' import wybTable from '@/components/wyb-table/wyb-table'; export default { components: { wybTable }, data(){ return { stepList: [], headers: [{ key: 'm_name', label: '物资名称' },{ key: 'spec', label: '规格' },{ label: '单位', key: 'unit' },{ label: '分类', key: 'category' },{ key: 'brand', label: '品牌' },{ key: 'quality_level', label: '品级' },{ label: '编号', key: 'm_sn' },{ key: 'tax_price', label: '含税价' },{ key: 'non_tax_price', label: '不含税价' },{ key: 'purchase_limit', label: '起购数' },{ key: 'purchase_number', label: '采购数量' }], contents: [], is_show_voucher: false, // 是否显示凭证上传弹出层
is_show_receiving: false, voucher_list: [], // 已上传的凭证列表
voucher_count: 6, // 最多可以上传多少张凭证
type: '', // 订单状态
p_sn: '', order: {}, l_p_num: '', driver_name: '', driver_phone: '', canteen_voucher: [], // 食堂端凭证
supplier_voucher: [], // 供应端凭证
button_click: false } }, onLoad(options){ this.p_sn = options.p_sn; this.getData(); }, methods: { call(phone) { uni.makePhoneCall({ phoneNumber: phone //仅为示例
}); }, 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.type = order.state; this.order = order; this.stepList = order.state_log.map((item, index) => { item.isFinished = false; if(index == order.state_log.length - 1){ let actionState = [ '订单已完成', '订单已退款', '订单已撤销', '订单已确认，物资入库' ] if(actionState.includes(item.action)){ item.isFinished = true; } } return item; }) let supplier_voucher = []; let canteen_voucher = []; order.voucher.map(item => { if(item.client_type == '供应商'){ supplier_voucher.push(item.voucher_pic); }else if(item.client_type == '食堂'){ canteen_voucher.push(item.voucher_pic); } }) this.supplier_voucher = supplier_voucher; this.canteen_voucher = canteen_voucher; let list = order.items || []; let contents = list.map(item => { let obj = { m_name: item?.material?.m_name || '', material_id: item?.material?.id, spec: item?.spec?.name || '', spec_id: item?.spec?.id, brand: item?.material?.brand || '', quality_level: item?.material?.quality_level || '', m_sn: item?.material?.m_sn || '', tax_price: item.tax_price, non_tax_price: item.non_tax_price, purchase_limit: item?.p_order_item?.purchase_limit || '', purchase_number: item.purchase_number, unit: item?.material?.unit?.unit_name || '', category: item?.material?.category?.m_cate_name || '' } return obj; }); this.contents = contents; }); }, // 上传凭证图片
uploadImage(){ let current_count = this.voucher_count - this.voucher_list.length; if(current_count == 0) return; uni.chooseImage({ count: current_count, complete: result => { let tempFiles = result.tempFiles; let voucher_list = []; let overstep = false; tempFiles.map(item => { // 上传的图片需小于10MB
if(item.size < 10464788){ voucher_list.push(item.path); }else{ overstep = true; } }) if(overstep){ uni.showModal({ title: '温馨提示', content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！', showCancel: false }) } this.voucher_list.push(...voucher_list); } }) }, // 预览图片
lookImage(current, list){ if(this[list].length <= 0) return; this.$u.throttle(() => { this.$refs.previewimage.show({ images: this[list], current: current }); }, 500); }, // 移除图片
removeInage(current){ this.voucher_list.splice(current, 1); }, // 用户点击确定，将图片上传至oss，并将url发送给后端
submitImage(){ let that = this; if(that.button_click){ return; } that.button_click = true; let voucher_list = that.voucher_list; if(voucher_list.length <= 0){ that.button_click = false; 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.path); that.$http(that.API.API_SUPPLIER_PURCHASESAVEVOUCHER, { p_sn: that.p_sn, images: images, }).then(result => { uni.hideLoading(); that.voucher_list = []; that.$msg('凭证已上传成功!'); that.button_click = false; that.getData(); }).catch(err => { uni.hideLoading(); that.button_click = false; }); }).catch(err => { uni.hideLoading(); that.button_click = false; uni.showModal({ title: '', content: JSON.stringify(err), showCancel: false, confirmColor: '#1833F2' }) }) }, // 立即接单
orderTaking(){ if(this.button_click) return; this.button_click = true; this.$http(this.API.API_SUPPLIER_PURCHASEORDERACCEPT, { p_sn: this.p_sn }).then(res => { this.$msg('接单成功'); this.button_click = false; this.getData(); }).catch(err => this.button_click = false) }, // 确认发货
confirmDeliver(){ if(this.buttom_click) return; this.buttom_click = true; let l_p_num = this.l_p_num; let driver_name = this.driver_name; let driver_phone = this.driver_phone; if(!l_p_num){ this.buttom_click = false; return this.$msg('请输入车牌号') }else if(!driver_name){ this.buttom_click = false; return this.$msg('请输入司机姓名') }else if(!driver_phone){ this.buttom_click = false; return this.$msg('请输入司机电话') } this.is_show_receiving = false; this.$http(this.API.API_SUPPLIER_PURCHASEORDERSENDOUT, { p_sn: this.p_sn, deliver_phone: driver_phone, deliver_man: driver_name, car_license: l_p_num }).then(res => { this.$msg('确认发货成功'); this.buttom_click = false; this.getData(); }).catch(err => this.buttom_click = false) } } }</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;
justify-content: space-between; 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%; } .ms-img{ width: 160rpx; height: 160rpx; margin-right: 15rpx; margin-top: 15rpx; background-color: #EEEEEE; &:nth-of-type(4n){ margin-right: 0rpx; } } .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; } // 弹出层样式
/deep/.u-drawer{ z-index: 999 !important; }</style>
|
