fanfan
1 year ago
parent
4180ec42d8
commit
65072c1147
@ -0,0 +1,226 @@ |
||||
<template> |
||||
<view> |
||||
<view class="bgImg" |
||||
:style="{ background: `url(${$picUrl+'/static/news3/walletBg.png'})`, 'background-size': 'cover' }"> |
||||
<view style="width:100%;position:sticky;"> |
||||
<view class="navBarContent"> |
||||
<u-icon name="arrow-left" @click="onBack" |
||||
style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#000" |
||||
size="35"></u-icon> |
||||
<text>物流信息</text> |
||||
</view> |
||||
</view> |
||||
<view class="logis-box"> |
||||
<image src="/static/default-logo.png" alt=""></image> |
||||
<view class="logis-pany"> |
||||
<view class="logis-text"> |
||||
<text>物流公司：</text>{{logisticsItem.express_name}} |
||||
</view> |
||||
<view class="logis-text"> |
||||
<text>物流单号：</text>{{logisticsItem.express_no}}<text |
||||
style="color: #FF6565; font-size:15px;margin-left: 20px;" @click="copy">复制</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- 物流轨迹 --> |
||||
<view class="logis-detail" v-if="logisticsItem"> |
||||
<view class="logis-item" :class="{ first: index === 0 }" v-for="(item, index) in logisticsItem.items" :key="index"> |
||||
<view class="logis-item-content"> |
||||
<view class="logis-item-content__describe"> |
||||
<text class="f-26">{{ item.context }}</text> |
||||
</view> |
||||
<view class="logis-item-content__time"> |
||||
<text class="f-22">{{ item.time }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="all-details" style="padding: 50px 0;font-size: 16px;" v-if="!logisticsItem.items">暂无物流信息</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as newFunApi from '@/api/newFun' |
||||
export default { |
||||
data() { |
||||
return { |
||||
traces: [], |
||||
logisticsItem:'' |
||||
}; |
||||
}, |
||||
/** |
||||
* 生命周期函数--监听页面加载 |
||||
*/ |
||||
onLoad(o) { |
||||
this.onCheck(o.logisticsNum) |
||||
}, |
||||
methods: { |
||||
onBack() { |
||||
uni.navigateBack({ |
||||
delta: 1 // 表示返回到上一页（默认为1） |
||||
}); |
||||
}, |
||||
copy(value) { |
||||
uni.setClipboardData({ |
||||
data: this.logisticsItem.express_no, // 这里是个坑接受字符串类型 value转化为字符串 |
||||
success: function() { |
||||
//调用方法成功 |
||||
uni.showToast({ |
||||
title: '复制成功', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
/** |
||||
* 查快递 |
||||
*/ |
||||
onCheck(logisticsNum) { |
||||
newFunApi.expressSearch({ |
||||
expressNo: logisticsNum |
||||
}) |
||||
.then(res => { |
||||
if (res.status) { |
||||
this.logisticsItem = res.data |
||||
} else { |
||||
uni.showToast({ |
||||
title: '查询失败', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}) |
||||
.finally() |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
page { |
||||
background-color: #F7F8FA; |
||||
min-height: 100%; |
||||
padding-bottom: 40upx; |
||||
} |
||||
|
||||
.all-details { |
||||
width: 100%; |
||||
font-size: 14px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.navBarContent { |
||||
height: 88upx; |
||||
line-height: 88upx; |
||||
text-align: center; |
||||
position: relative; |
||||
|
||||
text { |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #000; |
||||
} |
||||
|
||||
} |
||||
|
||||
.bgImg { |
||||
width: 100%; |
||||
height: 130px; |
||||
position: relative; |
||||
} |
||||
|
||||
// 物流轨迹 |
||||
.logis-box { |
||||
width: 100%; |
||||
height: 80px; |
||||
// background-color: #FFF; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 30px; |
||||
|
||||
image { |
||||
width: 60px; |
||||
height: 60px; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.logis-text { |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.logis-pany { |
||||
overflow: hidden; |
||||
margin-left: 15px; |
||||
color: #000; |
||||
font-size: 14px; |
||||
|
||||
text { |
||||
color: #999; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.logis-detail { |
||||
padding: 30rpx 50rpx; |
||||
background: #fff; |
||||
|
||||
.logis-item { |
||||
position: relative; |
||||
padding: 10px 0 10px 25px; |
||||
box-sizing: border-box; |
||||
border-left: 2px solid #ccc; |
||||
|
||||
&.first { |
||||
border-left: 2px solid #FF5050; |
||||
|
||||
&:after { |
||||
background: #FF5050; |
||||
color: #FF5050; |
||||
} |
||||
|
||||
.logis-item-content { |
||||
// background: #ff6e39; |
||||
color: #FF5050; |
||||
|
||||
&:after { |
||||
border-bottom-color: #FF5050; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&:after { |
||||
content: ' '; |
||||
display: inline-block; |
||||
position: absolute; |
||||
left: -6px; |
||||
top: 30px; |
||||
width: 6px; |
||||
height: 6px; |
||||
border-radius: 10px; |
||||
background: #bdbdbd; |
||||
border: 2px solid #fff; |
||||
} |
||||
|
||||
.logis-item-content { |
||||
position: relative; |
||||
// background: #f9f9f9; |
||||
padding: 10rpx 20rpx; |
||||
box-sizing: border-box; |
||||
color: #999; |
||||
|
||||
// &:after { |
||||
// content: ''; |
||||
// display: inline-block; |
||||
// position: absolute; |
||||
// left: -10px; |
||||
// top: 18px; |
||||
// border-left: 10px solid #fff; |
||||
// border-bottom: 10px solid #f3f3f3; |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,357 +1,440 @@ |
||||
<template> |
||||
<view> |
||||
<view class="section"> |
||||
<u-field |
||||
v-model="form.config" |
||||
label="商品型号" |
||||
placeholder="请输入商品型号" |
||||
> |
||||
</u-field> |
||||
<u-field |
||||
v-model="form.shopNum" |
||||
label="商品数量" |
||||
placeholder="请输入商品数量" |
||||
> |
||||
</u-field> |
||||
</view> |
||||
<view class="section"> |
||||
<u-input class="realAddr" placeholder="请粘贴或输入文本，点击“识别”自动识别姓名、电话和地址" v-model="form.auto"></u-input> |
||||
<view class="btnContent"> |
||||
<view class="btn"> |
||||
识别 |
||||
</view> |
||||
<view> |
||||
<view class="section"> |
||||
<u-field v-model="form.config" label="商品型号" placeholder="请输入商品型号"> |
||||
</u-field> |
||||
<u-field v-model="form.shopNum" label="商品数量" placeholder="请输入商品数量"> |
||||
</u-field> |
||||
</view> |
||||
</view> |
||||
<view class="section"> |
||||
<u-field |
||||
v-model="form.getPeopleName" |
||||
label="收货人" |
||||
placeholder="请输入收货人姓名" |
||||
> |
||||
</u-field> |
||||
<u-field |
||||
v-model="form.getPeoplePhone" |
||||
label="手机号" |
||||
placeholder="请输入收货人手机号" |
||||
> |
||||
</u-field> |
||||
<u-field @click="cityShow=true" v-model="form.city" |
||||
:disabled="true" label="所属城市" placeholder="请选择" |
||||
right-icon="arrow-right" |
||||
> |
||||
</u-field> |
||||
<u-picker mode="region" v-model="cityShow"></u-picker> |
||||
<view class="addrDetail"> |
||||
<view class="addrTitle"> |
||||
详细地址 |
||||
<view class="section"> |
||||
<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> |
||||
<u-input type="textarea" v-model="form.address" placeholder="请输入详细地址"></u-input> |
||||
</view> |
||||
</view> |
||||
<view class="section"> |
||||
<u-field @click="modeShow=true" v-model="form.setGoodsMode" |
||||
:disabled="true" label="发货模式" placeholder="待选择" |
||||
right-icon="arrow-right" |
||||
> |
||||
</u-field> |
||||
<u-action-sheet :list="modeList" v-model="modeShow"></u-action-sheet> |
||||
<u-field |
||||
v-model="form.setGoodsCompany" |
||||
label="发货公司" |
||||
placeholder="请输入上游公司名字" |
||||
> |
||||
</u-field> |
||||
<u-field |
||||
v-model="form.setGoodsName" |
||||
label="发货人" |
||||
placeholder="请输入上游渠道商名字" |
||||
> |
||||
</u-field> |
||||
<u-field |
||||
v-model="form.setGoodsPhone" |
||||
label="发货人电话" |
||||
placeholder="请输入上游渠道商电话" |
||||
> |
||||
</u-field> |
||||
<u-field @click="goodsShow=true" v-model="form.wuliuCompany" |
||||
:disabled="true" label="物流公司" placeholder="请选择物流公司" |
||||
right-icon="arrow-right" |
||||
> |
||||
</u-field> |
||||
<u-action-sheet :list="kuaidiList" v-model="goodsShow"></u-action-sheet> |
||||
<u-field |
||||
v-model="form.orderNum" |
||||
label="物流单号" |
||||
placeholder="请输入物流单号" |
||||
> |
||||
</u-field> |
||||
</view> |
||||
<view class="recordList"> |
||||
<view class="recordItem"> |
||||
<view class="recordTitle"> |
||||
转账记录<text class="intro">最多上传5张</text> |
||||
<view class="section"> |
||||
<u-field v-model="form.getPeopleName" label="收货人" placeholder="请输入收货人姓名"> |
||||
</u-field> |
||||
<u-field v-model="form.getPeoplePhone" label="手机号" placeholder="请输入收货人手机号"> |
||||
</u-field> |
||||
<u-field @click="cityShow=true" v-model="form.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.address" placeholder="请输入详细地址"></u-input> |
||||
</view> |
||||
<u-upload |
||||
:fileList="finishImageList" |
||||
:previewFullImage="true" |
||||
@afterRead="afterRead" |
||||
:maxCount="5" |
||||
@delete="deletePic" |
||||
name="1" |
||||
multiple |
||||
></u-upload> |
||||
</view> |
||||
<view class="recordItem"> |
||||
<view class="recordTitle"> |
||||
聊天记录<text class="intro">最多上传5张</text> |
||||
<view class="section"> |
||||
<u-field @click="modeShow=true" v-model="form.setGoodsMode" :disabled="true" label="发货模式" placeholder="待选择" |
||||
right-icon="arrow-right"> |
||||
</u-field> |
||||
<u-action-sheet :list="modeList" v-model="modeShow"></u-action-sheet> |
||||
<u-field v-model="form.setGoodsCompany" label="发货公司" placeholder="请输入上游公司名字"> |
||||
</u-field> |
||||
<u-field v-model="form.setGoodsName" label="发货人" placeholder="请输入上游渠道商名字"> |
||||
</u-field> |
||||
<u-field v-model="form.setGoodsPhone" label="发货人电话" placeholder="请输入上游渠道商电话"> |
||||
</u-field> |
||||
<u-field @click="goodsShow=true" v-model="form.wuliuCompany" :disabled="true" label="物流公司" |
||||
placeholder="请选择物流公司" right-icon="arrow-right"> |
||||
</u-field> |
||||
<u-action-sheet :list="kuaidiList" v-model="goodsShow"></u-action-sheet> |
||||
<u-field v-model="form.orderNum" label="物流单号" placeholder="请输入物流单号"> |
||||
</u-field> |
||||
</view> |
||||
<view class="recordList"> |
||||
<view class="recordItem c"> |
||||
<view class="recordTitle"> |
||||
转账记录<text class="intro">最多上传5张</text> |
||||
</view> |
||||
<u-upload :action="action" :header="header" @on-uploaded="transferSuccess" width="180" height="180" |
||||
:file-list="transferList" :custom-btn="true" max-count="1"> |
||||
<template v-slot:addBtn> |
||||
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
||||
<image src="/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">最多上传5张</text> |
||||
</view> |
||||
<u-upload :action="action" :header="header" @on-uploaded="chatSuccess" width="180" height="180" |
||||
:file-list="chatList" :custom-btn="true" max-count="1"> |
||||
<template v-slot:addBtn> |
||||
<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"> |
||||
<image src="/static/news/icon-upload.png"></image> |
||||
<view class="1">上传图片</view> |
||||
</view> |
||||
</template> |
||||
</u-upload> |
||||
</view> |
||||
<u-upload |
||||
:fileList="chatList" |
||||
:previewFullImage="true" |
||||
@afterRead="afterRead" |
||||
:maxCount="5" |
||||
@delete="deletePic" |
||||
name="1" |
||||
multiple |
||||
></u-upload> |
||||
</view> |
||||
<view class="footerBtn" @click="onSubmit"> |
||||
提交 |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
<view class="footerBtn"> |
||||
提交 |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
form:{ |
||||
config:'', |
||||
shopNum:null, |
||||
auto:'', |
||||
getPeopleName:'', |
||||
getPeoplePhone:'', |
||||
city:null, |
||||
address:'', |
||||
setGoodsMode:null, |
||||
setGoodsCompany:'', |
||||
setGoodsName:'', |
||||
setGoodsPhone:'', |
||||
wuliuCompany:'', |
||||
orderNum:'', |
||||
}, |
||||
modeList:[ |
||||
{ |
||||
import * as UploadApi from '@/api/upload' |
||||
import * as newFunApi from '@/api/newFun' |
||||
import Config from '@/core/config' |
||||
export default { |
||||
data() { |
||||
return { |
||||
form: { |
||||
config: '', |
||||
shopNum: null, |
||||
auto: '', |
||||
getPeopleName: '', |
||||
getPeoplePhone: '', |
||||
city: null, |
||||
address: '', |
||||
setGoodsMode: null, |
||||
setGoodsCompany: '', |
||||
setGoodsName: '', |
||||
setGoodsPhone: '', |
||||
wuliuCompany: '', |
||||
orderNum: '', |
||||
transferImgId:'', |
||||
chatImgId:'' |
||||
}, |
||||
content: '', |
||||
modeList: [{ |
||||
text: '店内现货', |
||||
} |
||||
], |
||||
kuaidiList:[ |
||||
{ |
||||
}], |
||||
kuaidiList: [{ |
||||
text: '顺丰快递', |
||||
} |
||||
], |
||||
cityShow:false, |
||||
modeShow:false, |
||||
goodsShow:false, |
||||
finishImageList:[], |
||||
chatList:[] |
||||
|
||||
} |
||||
}, |
||||
methods:{ |
||||
showAction(){ |
||||
this.modeShow = true; |
||||
}, |
||||
showgoodsAction(){ |
||||
this.goodsShow = true; |
||||
}], |
||||
cityShow: false, |
||||
modeShow: false, |
||||
goodsShow: false, |
||||
transferList: [], |
||||
chatList: [], |
||||
action: '', |
||||
} |
||||
}, |
||||
// 新增图片 |
||||
async afterRead(event) { |
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 |
||||
let lists = [].concat(event.file) |
||||
let fileListLen = this[`fileList${event.name}`].length |
||||
lists.map((item) => { |
||||
this[`fileList${event.name}`].push({ |
||||
...item, |
||||
status: 'uploading', |
||||
message: '上传中' |
||||
}) |
||||
}) |
||||
for (let i = 0; i < lists.length; i++) { |
||||
const result = await this.uploadFilePromise(lists[i].url) |
||||
|
||||
if(JSON.parse(result).code==1){ |
||||
let item = this[`fileList${event.name}`][fileListLen] |
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { |
||||
status: 'success', |
||||
message: '', |
||||
url: result |
||||
})) |
||||
fileListLen++ |
||||
}else{ |
||||
this[`fileList${event.name}`].splice(fileListLen, 1) |
||||
} |
||||
|
||||
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", |
||||
} |
||||
|
||||
}, |
||||
//上传照片 |
||||
uploadFilePromise(url) { |
||||
return new Promise((resolve, reject) => { |
||||
let a = uni.uploadFile({ |
||||
url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址 |
||||
filePath: url, |
||||
name: 'file', |
||||
formData: { |
||||
user: 'test', |
||||
token:getToken() |
||||
}, |
||||
success: (res) => { |
||||
if(JSON.parse(res.data).code==1){ |
||||
setTimeout(() => { |
||||
this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url}) |
||||
resolve(res.data) |
||||
}, 1000) |
||||
}else{ |
||||
uni.$u.toast(JSON.parse(res.data).msg) |
||||
|
||||
resolve(res.data) |
||||
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.getPeopleName = data.name |
||||
this.form.getPeoplePhone = data.phone |
||||
this.form.address = data.detail |
||||
console.log(data) |
||||
uni.showToast({ |
||||
title: '识别成功', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: '识别失败', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
} |
||||
}, |
||||
fail: (res) => { |
||||
console.log(res,"rrr") |
||||
}) |
||||
.finally() |
||||
}, |
||||
// 提交信息 |
||||
onSubmit() { |
||||
const that = this; |
||||
that.uploadFile() |
||||
that.uploadFileRecord() |
||||
if (!that.form.name) { |
||||
return that.$toast('请输入商品名称') |
||||
} |
||||
let params = { |
||||
...that.imgage_ids, |
||||
...that.imgage2_ids |
||||
} |
||||
}, |
||||
showAction() { |
||||
this.modeShow = true; |
||||
}, |
||||
showgoodsAction() { |
||||
this.goodsShow = true; |
||||
}, |
||||
regionChage(e) { |
||||
this.form.city = e.province.name + e.city.name + e.area.name; |
||||
}, |
||||
//接受上传返回的数据 |
||||
transferSuccess(list) { |
||||
if (list.length > 0) { |
||||
const { |
||||
response |
||||
} = list[0]; |
||||
if (response.status == 200) { |
||||
uni.showToast({ |
||||
title: "上传成功" |
||||
}) |
||||
console.log(response.data.fileInfo.file_id) |
||||
this.form.transferImgId = response.data.fileInfo.file_id |
||||
} |
||||
}); |
||||
}) |
||||
}, |
||||
//删除图片 |
||||
deletePic(event) { |
||||
console.log(event) |
||||
// this[`fileList${event.name}`].splice(event.index, 1) |
||||
this.finishImageList.splice(event.index, 1) |
||||
}, |
||||
} |
||||
}, |
||||
//接受上传返回的数据 |
||||
chatSuccess(list) { |
||||
if (list.length > 0) { |
||||
const { |
||||
response |
||||
} = list[0]; |
||||
if (response.status == 200) { |
||||
uni.showToast({ |
||||
title: "上传成功" |
||||
}) |
||||
console.log(response.data.fileInfo.file_id) |
||||
this.form.chatImgId = response.data.fileInfo.file_id |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
page{ |
||||
min-height: 100%; |
||||
background-color: #F7F8FA; |
||||
padding-bottom: 96upx; |
||||
} |
||||
.section{ |
||||
background-color: #fff; |
||||
padding:0 26upx; |
||||
margin-top:16upx; |
||||
.realAddr{ |
||||
padding:40upx 0 !important; |
||||
::v-deep .uni-input-wrapper{ |
||||
text-align: left !important; |
||||
page { |
||||
min-height: 100%; |
||||
background-color: #F7F8FA; |
||||
padding-bottom: 96upx; |
||||
} |
||||
|
||||
.section { |
||||
background-color: #fff; |
||||
padding: 0 26upx; |
||||
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; |
||||
} |
||||
} |
||||
::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; |
||||
} |
||||
} |
||||
} |
||||
.btnContent{ |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
padding-bottom: 30upx; |
||||
|
||||
.selectContent { |
||||
border-top: 1px solid transparent; |
||||
margin-top: 6upx; |
||||
padding-bottom: 100upx; |
||||
} |
||||
|
||||
::v-deep .u-field { |
||||
padding: 30upx 10upx; |
||||
} |
||||
|
||||
::v-deep .uni-input-wrapper { |
||||
text-align: right; |
||||
} |
||||
|
||||
.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; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
.btn{ |
||||
width: 120upx; |
||||
height: 50upx; |
||||
background: #FFB8B3; |
||||
border-radius: 19px 19px 19px 19px; |
||||
|
||||
.footerBtn { |
||||
width: 80%; |
||||
height: 88upx; |
||||
background: #FFAAA4; |
||||
border-radius: 36px 36px 36px 36px; |
||||
opacity: 1; |
||||
line-height: 50upx; |
||||
text-align: center; |
||||
|
||||
font-size: 24upx; |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
|
||||
line-height: 88upx; |
||||
text-align: center; |
||||
margin: 96upx auto 0 auto; |
||||
|
||||
} |
||||
.addrDetail{ |
||||
padding:0 10upx; |
||||
.addrTitle{ |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #303030; |
||||
margin-top:32upx; |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.selectContent{ |
||||
border-top:1px solid transparent; |
||||
margin-top:6upx; |
||||
padding-bottom: 100upx; |
||||
} |
||||
|
||||
::v-deep .u-field{ |
||||
padding:30upx 10upx; |
||||
} |
||||
::v-deep .uni-input-wrapper{ |
||||
text-align: right; |
||||
} |
||||
.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; |
||||
|
||||
.photo { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
padding: 20rpx 0; |
||||
overflow: hidden; |
||||
|
||||
.slot-btn { |
||||
width: 80px; |
||||
height: 80px; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx; |
||||
border: 1px solid #C0C0C0; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #D1D1D1; |
||||
|
||||
image { |
||||
width: 50rpx; |
||||
height: 50rpx; |
||||
margin-top: 20rpx; |
||||
} |
||||
|
||||
} |
||||
.picList{ |
||||
} |
||||
|
||||
.file_img { |
||||
overflow: hidden; |
||||
position: relative; |
||||
margin-right: 10rpx; |
||||
|
||||
image { |
||||
width: 80px; |
||||
height: 80px; |
||||
|
||||
} |
||||
|
||||
.image-delete { |
||||
position: absolute; |
||||
top: -10rpx; |
||||
right: -10rpx; |
||||
height: 42rpx; |
||||
width: 42rpx; |
||||
background: rgba(0, 0, 0, 0.64); |
||||
border-radius: 50%; |
||||
color: #fff; |
||||
font-weight: bolder; |
||||
font-size: 22rpx; |
||||
z-index: 10; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin:12upx 0; |
||||
text-align: center; |
||||
image{ |
||||
width: 200upx; |
||||
height: 160upx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
.footerBtn{ |
||||
width: 80%; |
||||
height: 88upx; |
||||
background: #FFAAA4; |
||||
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:96upx auto 0 auto; |
||||
|
||||
} |
||||
|
||||
</style> |
||||
</style> |
||||
|
||||
@ -1,242 +1,340 @@ |
||||
<template> |
||||
<view class="updatePrice"> |
||||
<view class="head-info"> |
||||
<!-- 搜索 --> |
||||
<view class="searchContent"> |
||||
<u-input v-model="searchText" placeholder="商品名称/编码"/> |
||||
<u-icon name="search" class="search"></u-icon> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="bg"> |
||||
<image :src="$picUrl+'/static/news3/bg.png'" mode="widthFix"></image> |
||||
<view class="text"> |
||||
只属于非商城订单 |
||||
<view class="updatePrice" style="padding-bottom: 120upx;"> |
||||
<view class="head-info"> |
||||
<!-- 搜索 --> |
||||
<view class="searchContent"> |
||||
<u-input v-model="searchText" placeholder="商品名称/编码" /> |
||||
<u-icon name="search" class="search" @click="getOrderList(1)"></u-icon> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="dispatchContent"> |
||||
<view class="orderNum"> |
||||
订单号：7868867676878676876 |
||||
<view class="bg"> |
||||
<image :src="$picUrl+'/static/news3/bg.png'" mode="widthFix"></image> |
||||
<view class="text"> |
||||
只属于非商城订单 |
||||
</view> |
||||
</view> |
||||
<view class="dispatchItem"> |
||||
<image :src="$picUrl+'/static/news3/filter.png'" mode="aspectFill"></image> |
||||
<view class="right"> |
||||
<view class="title"> |
||||
联想小新笔记本电脑2023年新款 |
||||
</view> |
||||
<view class="subTitle"> |
||||
16GB，128GB |
||||
</view> |
||||
<view style="display: flex;align-items: center;justify-content: space-between;"> |
||||
<view class="num"> |
||||
x1 |
||||
<view class="dispatchContent" v-for="(item, index) in goodsList" :key="index"> |
||||
<view class="orderNum"> |
||||
订单号：{{item.express_no}} |
||||
</view> |
||||
<view class="dispatchItem" v-for="(item1, index) in item.goods"> |
||||
<image :src="item1.goods.goods_image" mode="aspectFill"></image> |
||||
<view class="right"> |
||||
<view class="title"> |
||||
{{item1.goods.goods_name}} |
||||
</view> |
||||
<view class="price"> |
||||
<text style="font-size: 26upx;">¥</text> |
||||
<text>288</text> |
||||
<!-- <view class="subTitle"> |
||||
{{item1.goods.goods_name}} |
||||
</view> --> |
||||
<view style="display: flex;align-items: center;justify-content: space-between;"> |
||||
<view class="num"> |
||||
x{{item1.goods.total_num}} |
||||
</view> |
||||
<view class="price"> |
||||
<text style="font-size: 26upx;">¥</text> |
||||
<text>{{item1.goods.goods_price}}</text> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="totalNum"> |
||||
<text>含运费¥5</text> |
||||
<text>共计：</text> |
||||
<text>¥2500</text> |
||||
</view> |
||||
<view class="footerBtn"> |
||||
<view class="wuliuBtn"> |
||||
调货记录 |
||||
<view class="totalNum"> |
||||
<text>含运费¥5</text> |
||||
<text>共计：</text> |
||||
<text>¥2500</text> |
||||
</view> |
||||
<view class="footerBtn"> |
||||
<view class="wuliuBtn" @click="onCondiments"> |
||||
调货记录 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
<view class="footerBtns" @click="manualEntry"> |
||||
手动录入 |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
searchText:'' |
||||
import * as newFunApi from '@/api/newFun' |
||||
export default { |
||||
data() { |
||||
return { |
||||
searchText: '', |
||||
goodsList: [], |
||||
total: 1, |
||||
pageNum: 1, |
||||
} |
||||
}, |
||||
onLoad(o) { |
||||
this.getOrderList(1) |
||||
}, |
||||
onShow() { |
||||
}, |
||||
onPullDownRefresh() { |
||||
this.pageNum = 1; |
||||
this.goodsList = []; |
||||
setTimeout(() => { |
||||
uni.stopPullDownRefresh(); |
||||
}, 1000) |
||||
}, |
||||
onReachBottom() { |
||||
if (this.goodsList.length <= this.total) { |
||||
this.pageNum++; |
||||
} |
||||
}, |
||||
methods: { |
||||
// 手动录入 |
||||
manualEntry() { |
||||
uni.navigateTo({ |
||||
url: "/pages/news3/ManualEntry" |
||||
}) |
||||
}, |
||||
// 调货记录 |
||||
onCondiments() { |
||||
uni.navigateTo({ |
||||
url: "/pages/news3/seasoningCondimentsRecord" |
||||
}) |
||||
}, |
||||
/** |
||||
* 获取商品列表 |
||||
*/ |
||||
async getOrderList(type) { |
||||
uni.showLoading({ |
||||
title: "加载中" |
||||
}) |
||||
if (type == 1) { |
||||
this.pageNum = 1; |
||||
this.goodsList = [] |
||||
} |
||||
let { |
||||
status, |
||||
message, |
||||
data |
||||
} = await newFunApi.deliveryList({ |
||||
page: this.pageNum, |
||||
searchText:this.searchText |
||||
}); |
||||
if (status == 200) { |
||||
this.goodsList = this.goodsList.concat(data.list.data) |
||||
this.total = data.list.total |
||||
} |
||||
}, |
||||
onClassify(index) { |
||||
this.pageNum = 1; |
||||
this.goodsList = [] |
||||
this.getOrderList(); |
||||
}, |
||||
} |
||||
}, |
||||
methods:{ |
||||
|
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
page{ |
||||
min-height: 100%; |
||||
background-color: #F7F8FA; |
||||
padding:0 20upx; |
||||
} |
||||
.head-info{ |
||||
margin:22upx 20upx; |
||||
.searchContent{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
page { |
||||
min-height: 100%; |
||||
background-color: #F7F8FA; |
||||
padding: 0 20upx; |
||||
} |
||||
|
||||
.head-info { |
||||
margin: 22upx 20upx; |
||||
|
||||
.searchContent { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
position: relative; |
||||
|
||||
::v-deep .u-input { |
||||
background: #FFFFFF; |
||||
border-radius: 30px 30px 30px 30px; |
||||
opacity: 1; |
||||
width: 100%; |
||||
padding-left: 90upx !important; |
||||
} |
||||
|
||||
.search { |
||||
position: absolute; |
||||
top: 20upx; |
||||
left: 26upx; |
||||
z-index: 9; |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
|
||||
.bg { |
||||
position: relative; |
||||
::v-deep .u-input{ |
||||
background: #FFFFFF; |
||||
border-radius: 30px 30px 30px 30px; |
||||
opacity: 1; |
||||
width:100%; |
||||
padding-left:90upx !important; |
||||
|
||||
image { |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
|
||||
.search{ |
||||
|
||||
.text { |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
font-size: 42upx; |
||||
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
position: absolute; |
||||
top:20upx; |
||||
left:26upx; |
||||
z-index:9; |
||||
left: 0; |
||||
top: 0; |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
.bg{ |
||||
position: relative; |
||||
image{ |
||||
width:100%; |
||||
height:auto; |
||||
} |
||||
.text{ |
||||
height:100%; |
||||
width:100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
font-size: 42upx; |
||||
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
||||
|
||||
.orderNum { |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
position: absolute; |
||||
left: 0; |
||||
top:0; |
||||
|
||||
color: #707070; |
||||
margin: 10upx 30upx; |
||||
|
||||
} |
||||
} |
||||
.orderNum{ |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #707070; |
||||
margin:10upx 30upx; |
||||
|
||||
} |
||||
.dispatchContent{ |
||||
margin:20upx 0; |
||||
background: #FFFFFF; |
||||
// border-radius: 6px 6px 6px 6px; |
||||
opacity: 1; |
||||
padding:20upx 10upx; |
||||
} |
||||
.dispatchItem{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
image{ |
||||
width: 194upx; |
||||
height:194upx; |
||||
|
||||
.dispatchContent { |
||||
margin: 20upx 0; |
||||
background: #FFFFFF; |
||||
// border-radius: 6px 6px 6px 6px; |
||||
opacity: 1; |
||||
padding: 20upx 10upx; |
||||
} |
||||
.right{ |
||||
flex:1; |
||||
margin-left:40upx; |
||||
position: relative; |
||||
|
||||
.dispatchItem { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
.title{ |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #3B3B3B; |
||||
|
||||
align-items: center; |
||||
|
||||
image { |
||||
width: 194upx; |
||||
height: 194upx; |
||||
} |
||||
.subTitle{ |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #7C7C7C; |
||||
margin:14upx 0; |
||||
|
||||
|
||||
.right { |
||||
flex: 1; |
||||
margin-left: 40upx; |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
|
||||
.title { |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #3B3B3B; |
||||
|
||||
} |
||||
|
||||
.subTitle { |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #7C7C7C; |
||||
margin: 14upx 0; |
||||
|
||||
} |
||||
|
||||
.num { |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #1E1E1E; |
||||
} |
||||
|
||||
.price { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #F21A1C; |
||||
|
||||
|
||||
} |
||||
} |
||||
.num{ |
||||
|
||||
font-size: 28upx; |
||||
} |
||||
|
||||
.totalNum { |
||||
text-align: right; |
||||
margin-top: 70upx; |
||||
|
||||
text:first-child { |
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #1E1E1E; |
||||
color: #B7B7B7; |
||||
|
||||
} |
||||
.price{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
|
||||
text:nth-child(2) { |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #3B3B3B; |
||||
margin: 0 10upx; |
||||
|
||||
} |
||||
|
||||
text:nth-child(3) { |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #F21A1C; |
||||
|
||||
|
||||
|
||||
} |
||||
} |
||||
} |
||||
.totalNum{ |
||||
text-align: right; |
||||
margin-top:70upx; |
||||
text:first-child{ |
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #B7B7B7; |
||||
|
||||
|
||||
.footerBtn { |
||||
padding: 30upx; |
||||
display: flex; |
||||
align-items: center; |
||||
border-top: 1px solid #F0F0F0; |
||||
justify-content: flex-end; |
||||
margin-top: 30upx; |
||||
} |
||||
text:nth-child(2){ |
||||
font-size: 32upx; |
||||
|
||||
.wuliuBtn { |
||||
// padding:8upx 46upx; |
||||
text-align: center; |
||||
height: 70upx; |
||||
line-height: 66upx; |
||||
border: 1px solid #F63116; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #3B3B3B; |
||||
margin:0 10upx; |
||||
|
||||
color: #F83F11; |
||||
border-radius: 20px; |
||||
width: 200upx; |
||||
} |
||||
text:nth-child(3){ |
||||
font-size: 32upx; |
||||
|
||||
.footerBtns { |
||||
width: 94%; |
||||
height: 100rpx; |
||||
background: #F55349; |
||||
border-radius: 6px 6px 6px 6px; |
||||
position: fixed; |
||||
bottom: 20rpx; |
||||
margin: 0 auto; |
||||
margin-top: 40upx; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #F21A1C; |
||||
|
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
line-height: 100upx; |
||||
|
||||
} |
||||
} |
||||
|
||||
.footerBtn{ |
||||
padding:30upx; |
||||
display: flex; |
||||
align-items: center; |
||||
border-top:1px solid #F0F0F0; |
||||
justify-content: flex-end; |
||||
margin-top:30upx; |
||||
} |
||||
.wuliuBtn{ |
||||
// padding:8upx 46upx; |
||||
text-align: center; |
||||
height:70upx; |
||||
line-height: 66upx; |
||||
border:1px solid #F63116; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #F83F11; |
||||
border-radius:20px; |
||||
width:200upx; |
||||
} |
||||
|
||||
</style> |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue