You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
yanzong_qianduan/pages/news3/ManualEntry.vue

534 lines
13 KiB

<template>
<view style="padding-bottom: 200rpx;">
<view class="section">
<u-field v-model="form.goods_name" label="商品名称" placeholder="请输入商品名称">
</u-field>
<u-field v-model="form.goods_sn" label="商品型号" placeholder="请输入商品型号">
</u-field>
<u-field v-model="form.goods_price" label="商品价格" placeholder="请输入商品价格">
</u-field>
<u-field v-model="form.goods_num" type="number" label="商品数量" placeholder="请输入商品数量">
</u-field>
</view>
<view class="section" style="padding-top: 26upx;">
<u-input class="realAddr" type="textarea" placeholder="请粘贴或输入文本,点击“识别”自动识别姓名、电话和地址" v-model="content">
</u-input>
<view class="btnContent">
<view class="btn" @click="onIntelligence" :style="{'opacity': content?1:0.6 }">
识别
</view>
</view>
</view>
<view class="section">
<u-field v-model="form.receiver" label="收货人" placeholder="请输入收货人姓名">
</u-field>
<u-field v-model="form.receiver_phone" label="手机号" @input="handleInput" maxlength="11" type="number"
placeholder="请输入收货人手机号">
</u-field>
<u-field @click="cityShow=true" v-model="city" :disabled="true" label="所属城市" placeholder="请选择所属城市"
right-icon="arrow-right">
</u-field>
<u-picker mode="region" v-model="cityShow" @confirm="regionChage">{{form.city}}</u-picker>
<view class="addrDetail">
<view class="addrTitle">
详细地址
</view>
<u-input type="textarea" v-model="form.detail" placeholder="请输入详细地址"></u-input>
</view>
</view>
<view class="section">
<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" label="发货人电话" type="number" @input="handleSendInput" maxlength="11"
placeholder="请输入发货人电话">
</u-field>
<picker @change="changeOption" mode="selector" range-key="express_name" :value="index" :range="expressList">
<u-field v-model="form.express_name" :disabled="true" label="物流公司" placeholder="请选择物流公司"
right-icon="arrow-right">
</u-field>
</picker>
<u-field v-model="form.express_no" label="物流单号" placeholder="请输入物流单号">
</u-field>
</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="transferRemove"
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" @on-remove="chatRemove"
width="180" 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 class="goods-fd">
<view class="btn" @click="onSubmit">提交</view>
</view>
</view>
</template>
<script>
import * as UploadApi from '@/api/upload'
import * as newFunApi from '@/api/newFun'
import Config from '@/core/config'
export default {
data() {
return {
city: null,
send_name: null,
express_name: null,
form: {
goods_sn: '',
goods_num: null,
goods_price: '',
receiver: '',
receiver_phone: '',
detail: '',
send_type: null,
send_company: '',
sender: '',
send_phone: '',
express_id: '',
express_no: '',
transfer_image_id: '',
chat_image_id: '',
goods_name: '',
province_id: '',
city_id: '',
region_id: ''
},
content: '',
modeList: [{
text: '店内现货',
id: 0,
}, {
text: '仓库发货',
id: 1,
}],
cityShow: false,
transferList: [],
chatList: [],
expressList: [],
action: '',
header: '',
}
},
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: {
// 智能识别
onIntelligence() {
if (!this.content) {
return this.$toast('请输入识别内容')
}
newFunApi.analysis({
content: this.content
})
.then(res => {
if (res.status) {
let data = res.data.detail
this.form.city = data.region.province + data.region.city + data.region.region;
this.form.receiver = data.name
this.form.receiver_phone = data.phone
this.form.detail = data.detail
uni.showToast({
title: '识别成功',
icon: 'none',
duration: 2000
})
} else {
uni.showToast({
title: '识别失败',
icon: 'none',
duration: 2000
})
}
})
.finally()
},
// 提交信息
async onSubmit() {
const that = this;
if (!that.form.goods_name) {
return that.$toast('请选择商品名称')
}
if (!that.form.goods_sn) {
return that.$toast('请选择商品型号')
}
if (!that.form.goods_price) {
return that.$toast('请输入商品价格')
}
if (!that.form.goods_num) {
return that.$toast('请输入商品数量')
}
if (!that.form.receiver) {
return that.$toast('请输入收货人姓名')
}
if (!that.form.receiver_phone) {
return that.$toast('请输入收货人手机号')
}
if (!that.city) {
return that.$toast('请选择所属城市')
}
if (!that.form.detail) {
return that.$toast('请输入详细地址')
}
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.express_no) {
return that.$toast('请输入物流单号')
}
if (!that.form.transfer_image_id) {
return that.$toast('请上传转账记录')
}
let {
status,
message,
data
} = await newFunApi.addTransfer(that.form);
if (status == 200) {
uni.showToast({
title: "录入成功"
})
setTimeout(function() {
uni.$emit('refreshData');
uni.navigateBack({
delta: 1
})
}, 2000);
}
},
handleSendInput(e) {
if (this.validatePhoneNumber(event.target.value)) {
this.form.send_phone = event.target.value
} else {
this.form.send_phone = ''
}
},
handleInput(e) {
if (this.validatePhoneNumber(event.target.value)) {
this.form.receiver_phone = event.target.value
} else {
this.form.receiver_phone = ''
}
},
validatePhoneNumber(phone) {
var regExp = /^1[3456789]\d{9}$/;
if (regExp.test(phone)) {
return true;
} else {
return this.$toast('手机号不合法')
return false;
}
},
changeMode(e) {
this.send_name = this.modeList[e.detail.value].text;
this.form.send_type = this.modeList[e.detail.value].id;
},
// 选择物流
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;
}
},
regionChage(e) {
console.log(e)
this.city = e.province.name + e.city.name + e.area.name;
this.form.province_id = e.province.code;
this.form.city_id = e.city.code
this.form.region_id = e.area.code
},
//接受上传返回的数据
transferSuccess(list) {
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
this.form.transfer_image_id = this.handleRemove('', list);
}
}
},
transferRemove(file, fileList) {
this.form.transfer_image_id = this.handleRemove(file, fileList);
},
handleRemove: function(file, fileList) {
let idList = []
fileList.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
return idList.join(',')
},
chatRemove(file, fileList) {
this.form.chat_image_id = this.handleRemove(file, fileList);
},
//接受上传返回的数据
chatSuccess(list) {
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
this.form.chat_image_id = this.handleRemove('', list);
}
}
},
}
}
</script>
<style lang="scss" scoped>
page {
min-height: 100%;
background-color: #F7F8FA;
padding-bottom: 96upx;
}
.section {
background-color: #fff;
padding: 0 36upx;
margin-top: 16upx;
.realAddr {
padding: 40upx 0 !important;
::v-deep .uni-input-wrapper {
text-align: left !important;
}
::v-deep .uni-input-placeholder {
white-space: pre-wrap;
}
}
.btnContent {
display: flex;
justify-content: flex-end;
padding-bottom: 30upx;
}
.btn {
width: 120upx;
height: 50upx;
background: #FE483B;
border-radius: 19px 19px 19px 19px;
opacity: 1;
line-height: 50upx;
text-align: center;
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.addrDetail {
padding: 0 10upx;
.addrTitle {
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #303030;
margin-top: 32upx;
}
}
}
.selectContent {
border-top: 1px solid transparent;
margin-top: 6upx;
padding-bottom: 100upx;
}
::v-deep .u-list-item {
margin: 10rpx 20rpx 10rpx 0 !important;
}
::v-deep .u-field {
padding: 20upx !important;
}
::v-deep .uni-input-wrapper {
text-align: right;
}
::v-deep .u-label {
flex: auto !important
}
::v-deep .u-flex-1 {
width: 400upx;
}
::v-deep .u-flex-1,
::v-deep .fild-body {
text-align: right;
margin: 0 !important;
}
::v-deep .u-input__textarea {
padding: 40upx 0 20upx 0 !important;
}
.recordList {
padding: 30upx;
background-color: #fff;
margin-top: 14upx;
.recordItem {
.recordTitle {
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #353535;
margin-bottom: 20upx;
.intro {
font-size: 24upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #9F9F9F;
margin-left: 28upx;
}
}
.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;
}
}
.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>