<template>
<view style="padding-bottom: 200rpx;">
<view class="selectContent" style="border:none;background-color: #fff;">
<picker @change="changeMode" mode="selector" range-key="text" :value="index" :range="modeList">
<u-field v-model="send_name" :disabled="true" label="发货模式" placeholder="请选择发货模式"
right-icon="arrow-right">
</u-field>
</picker>
<u-field v-model="form.send_company" label="发货公司" placeholder="请输入发货公司">
</u-field>
<u-field v-model="form.sender" label="发货人" placeholder="请输入发货人名称">
</u-field>
<u-field v-model="form.send_phone" type="number" @input="handleInput" maxlength="13" label="发货人电话"
placeholder="请输入发货人手机号">
</u-field>
<u-field v-model="form.transfer_date" @click="show=true" :disabled="true" label="调货时间" placeholder="请选择调货时间"
right-icon="arrow-right">
</u-field>
<picker @change="changeOption" mode="selector" range-key="express_name" :value="index" :range="expressList">
<u-field v-model="express_name" :disabled="true" label="物流公司" placeholder="请选择物流公司"
right-icon="arrow-right">
</u-field>
</picker>
<view class="wuliu">
<u-field class='fanfan' style="flex: 1;padding:30upx 0 30upx 30upx" v-model="form.express_no"
label="物流单号" placeholder="请填写物流单号">
</u-field>
<view class="getWuliu" @click="onLogistics">
查看物流
</view>
</view>
<view class="recordList">
<view class="recordItem c">
<view class="recordTitle">
转账记录<text class="intro">最多上传6张</text>
</view>
<u-upload :action="action" :header="header" @on-uploaded="transferSuccess"
@on-remove="onRemoveTransfer" width="180" height="180" :file-list="transferList"
:custom-btn="true" max-count="6">
<template v-slot:addBtn>
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image :src="$picUrl+'/static/news/icon-upload.png'"></image>
<view class="1">上传图片</view>
</view>
</template>
</u-upload>
</view>
<view class="recordItem c">
<view class="recordTitle">
聊天记录<text class="intro">最多上传6张</text>
</view>
<u-upload :action="action" :header="header" @on-uploaded="chatSuccess" width="180"
@on-remove="onRemoveChat" height="180" :file-list="chatList" :custom-btn="true" max-count="6">
<template v-slot:addBtn>
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image :src="$picUrl+'/static/news/icon-upload.png'"></image>
<view class="1">上传图片</view>
</view>
</template>
</u-upload>
</view>
</view>
</view>
<u-picker mode="time" :params="params" v-model="show" confirm-color="#FE483B" :show-time-tag="false"
@confirm="confirm"></u-picker>
<view class="goods-fd">
<view class="btn" @click="onSubmit">保存</view>
</view><addShuiyin />
</view>
</template>
<script>
import * as newFunApi from '@/api/newFun'
import Config from '@/core/config'
export default {
data() {
return {
show: false,
params: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true
},
send_name: '',
express_name: '',
form: {},
modeList: [{
text: '店内现货',
id: 0,
}, {
text: '仓库发货',
id: 1,
}],
expressList: [],
action: '',
action: '',
transferList: [],
handleList: [],
chatList: [],
handChatList: [],
type: ''
}
},
onLoad(o) {
this.form = JSON.parse(o.item)
this.send_name = this.modeList[this.form.send_type].text;
this.transferList = this.form.transfer_image_ids ? this.form.transfer_image_ids : [];
this.chatList = this.form.chat_image_ids ? this.form.chat_image_ids : [];
this.type = o.type
if (this.form.transfer_image_ids) {
let list = this.form.transfer_image_ids
list.forEach(item => {
item.url = item.file_path;
});
this.transferList = list
}
if (this.form.chat_image_ids) {
let list = this.form.chat_image_ids
list.forEach(item => {
item.url = item.file_path;
});
this.chatList = list
}
if (this.form.transfer_date) {
this.captureTime(this.form.transfer_date)
}
},
onReady() {
this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
this.header = {
'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
'Access-Token': uni.getStorageSync('AccessToken'),
'platform': "MP-WEIXIN",
}
this.getExpressAll()
},
methods: {
captureTime(fullTime) {
var timeArr = fullTime.replace(" ", ":").replace(/\:/g, "-").split("-");
var nian = timeArr[0];
var yue = timeArr[1];
var ri = timeArr[2];
var shi = timeArr[3];
var fen = timeArr[4];
var miao = timeArr[5];
this.params.year = nian;
this.params.month = yue
this.params.day = ri
this.params.hour = shi
this.params.minute = fen
this.params.second = miao
},
confirm(e) {
this.form.transfer_date = e.year + "-" + e.month + '-' + e.day + " " + e.hour + ":" + e.minute + ':' +
e
.second
console.log(this.form.transfer_date)
},
handleInput(e) {
if (this.validatePhoneNumber(event.target.value)) {
this.form.send_phone = event.target.value
} else {
this.form.send_phone = ''
}
},
validatePhoneNumber(phone) {
var regExp = /^1[3456789]\d{9}$/;
if (regExp.test(phone)) {
return true;
} else {
return this.$toast('手机号不合法')
return false;
}
},
// 提交信息
async onSubmit() {
const that = this;
// 转账记录
let trList = []
this.transferList = this.transferList.concat(this.handleList);
this.transferList.forEach(item => {
trList.push(item.file_id)
});
this.form.transfer_image_id = trList.join(',');
// 聊天记录
let atList = []
this.chatList = this.chatList.concat(this.handChatList);
this.chatList.forEach(item => {
atList.push(item.file_id)
});
this.form.chat_image_id = atList.join(',');
if (!that.send_name) {
return that.$toast('请选择发货模式')
}
if (!that.form.send_company) {
return that.$toast('请输入发货公司')
}
if (!that.form.sender) {
return that.$toast('请输入发货人')
}
if (!that.form.send_phone) {
return that.$toast('请输入发货手机号')
}
if (!that.express_name) {
return that.$toast('请选择物流公司')
}
if (!that.form.transfer_date) {
return that.$toast('请选择调货时间')
}
if (!that.form.express_no) {
return that.$toast('请输入物流单号')
}
if (!that.form.transfer_image_id) {
return that.$toast('请上传转账记录')
}
let parmes = {
id: that.form.id,
send_type: that.form.send_type,
send_company: that.form.send_company,
sender: that.form.sender,
send_phone: that.form.send_phone,
express_no: that.form.express_no,
express_id: that.form.express_id,
chat_image_id: that.form.chat_image_id,
transfer_image_id: that.form.transfer_image_id,
order_id: that.form.order_id,
transfer_date: that.form.transfer_date
}
let {
status,
message,
data
} = await newFunApi.editTransfer(parmes);
if (status == 200) {
uni.showToast({
title: "修改成功"
})
setTimeout(function() {
uni.$emit('refreshData');
uni.navigateBack({
delta: 1
})
}, 2000);
}
},
changeMode(e) {
this.form.setGoodsMode = this.modeList[e.detail.value].text;
},
// 选择物流
changeOption(e) {
this.express_name = this.expressList[e.detail.value].express_name;
this.form.express_id = this.expressList[e.detail.value].express_id
},
/**
* 物流
*/
async getExpressAll() {
let {
status,
message,
data
} = await newFunApi.expressAll();
if (status == 200) {
this.expressList = data.list;
if (this.form.express_id) {
this.express_name = this.findNameById(this.expressList, this.form.express_id)
}
}
},
// 通过ID查找名称
findNameById(array, express_id) {
const result = array.find((item) => item.express_id === express_id);
return result.express_name;
},
onLogistics() {
uni.navigateTo({
url: "/pages/news3/LogisticsDetails?logisticsNum=" + this.form.express_no
})
},
onRemoveTransfer(file, fileList) {
if (fileList.length > 0) {
this.handleList = []
fileList.forEach((item, index) => {
if (item.response) {
this.handleList.push(item.response.data.fileInfo)
} else {
this.transferList.splice(file, 1)
}
});
} else {
this.transferList.splice(file, 1)
}
},
onRemoveChat(file, fileList) {
if (fileList.length > 0) {
this.handChatList = []
fileList.forEach((item, index) => {
if (item.response) {
this.handChatList.push(item.response.data.fileInfo)
} else {
this.chatList.splice(file, 1)
}
});
} else {
this.chatList.splice(file, 1)
}
},
//接受上传返回的数据
transferSuccess(list) {
let nList = []
list.forEach(item => {
if (item.response) {
nList.push(item)
}
});
list = nList
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
this.handleList = []
list.forEach(item => {
this.handleList.push(item.response.data.fileInfo)
});
}
}
},
//接受上传返回的数据
chatSuccess(list) {
let nList = []
list.forEach(item => {
if (item.response) {
nList.push(item)
}
});
list = nList
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
this.handChatList = []
list.forEach(item => {
this.handChatList.push(item.response.data.fileInfo)
});
}
}
},
}
}
</script>
<style lang="scss" scoped>
page {
min-height: 100%;
background-color: #F7F8FA;
}
.selectContent {
border-top: 1px solid transparent;
margin-top: 6upx;
padding: 0 40upx !important;
}
::v-deep .u-list-item {
margin: 10rpx 20rpx 10rpx 0 !important;
}
::v-deep .u-border-bottom:after {
border: none;
}
::v-deep .u-field {
padding: 20upx 0 !important;
}
::v-deep .uni-input-wrapper {
text-align: right;
}
::v-deep .u-label {
flex: auto !important
}
::v-deep .u-flex-1 {
width: 360upx !important;
text-align: right !important;
color: #B0B0B0 !important;
margin: 0 !important;
}
.wuliu {
display: flex;
align-items: center;
.fanfan {
padding-right: 0 !important;
}
.getWuliu {
width: 130upx;
height: 56upx;
background: #FFFFFF;
border-radius: 19px 19px 19px 19px;
opacity: 1;
border: 1px solid #F55349;
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #F55349;
line-height: 52upx;
text-align: center;
margin-left: 10upx;
}
}
.recordList {
padding: 0 0 30upx 0;
.recordItem {
.recordTitle {
margin-bottom: 10upx;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #353535;
}
.picList {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 12upx 0;
text-align: center;
image {
width: 200upx;
height: 160upx;
}
}
}
}
.goods-fd {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
padding: 0.9375rem;
z-index: 99;
background-color: #fafafa;
box-sizing: border-box;
.btn {
width: 630rpx;
line-height: 88rpx;
background: #F34A40;
border-radius: 88rpx;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
margin: auto;
}
}
// .footerBtn {
// width: 86%;
// height: 88upx;
// background: #FF5050;
// border-radius: 36px 36px 36px 36px;
// opacity: 1;
// font-size: 28upx;
// font-family: PingFang SC, PingFang SC;
// font-weight: 500;
// color: #FFFFFF;
// line-height: 88upx;
// text-align: center;
// margin: 42upx auto 0 auto;
// }
.c {
padding-top: 20rpx;
overflow: hidden;
.slot-btn {
width: 180rpx;
height: 180rpx;
background: #F6F6F6;
border-radius: 10rpx;
border: 1px solid #C0C0C0;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #6D6D6D;
.l {
line-height: 30rpx;
}
image {
width: 50rpx;
height: 50rpx;
display: block;
margin: 0 auto;
margin-top: 30rpx;
}
}
}
</style>