Leadfyy.co
/
uniapp-supplychain
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

食堂端采购订单详情增加上传凭证

master
邓平艺 5 years ago
parent
c7ec97d27a
commit
fd46b06fad
1 changed files with 191 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 194
      canteen/pages/purchase/detail.vue

194
canteen/pages/purchase/detail.vue
View File

@ -32,11 +32,17 @@
<view class="lf-font-bold"></view>
</view>
<view class="list">
<view>证明材料</view>
<view>证明材料-供应端</view>
<view class="lf-flex-wrap lf-m-t-10">
<image :src="item.voucher_pic" @click="lookImage(index)" class="ms-img" v-for="(item, index) in order.voucher" :key="item.id"></image>
</view>
</view>
<view class="list" v-if="voucher_list.length">
<view>证明材料-食堂端</view>
<view class="lf-flex-wrap lf-m-t-10">
<image :src="item" @click="lookPopupImage(index)" class="ms-img" v-for="(item, index) in voucher_list" :key="index"></image>
</view>
</view>
</view>
<self-line></self-line>
<view class="lf-m-t-30 lf-m-l-32">
@ -55,7 +61,7 @@
</view>
<view v-else-if="type == 4" class="lf-row-flex-end">
<button class="btn btn1">退单</button>
<button class="btn btn1 lf-m-l-20">上传凭证</button>
<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>
<button class="btn btn2" @click="$url('/pages/purchase/receipt?p_sn='+ order.p_sn)">确认收货</button>
</view>
<view v-else-if="type == 5" class="lf-row-between">
@ -63,6 +69,28 @@
<view class="lf-font-32" style="color: #11D189;">已完成</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="lookPopupImage(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>
</view>
</template>
@ -89,17 +117,92 @@
contents: [],
order: {},
p_sn: '',
type: 4
type: 4,
is_show_voucher: false,
voucher_list: []
}
},
onLoad(options){
// TODO 1、凭证上传流程变动：当采购单状态为已发货状态时，食堂可以上传凭证图片；
// TODO 2、食堂收货时，实到数、实收数默认填充采购数量；
// todo 上传凭证参考页面：/uniapp-supplychain/supplier/pages/gonghuo/detail
this.p_sn = options.p_sn || '';
// TODO 显示车辆等信息，显示table信息
this.getData();
},
methods: {
// 预览图片
lookPopupImage(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);
},
// 上传凭证图片
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);
}
})
},
// 用户点击确定，将图片上传至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);
// todo 图片上传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'
})
})
},
getData(){
this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, {
p_sn: this.p_sn
@ -222,4 +325,89 @@
margin-right: 0rpx;
}
}
.popup-box{
width: 686rpx;
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;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save