Skip to content

W
wly-APP
Commit f059baa9 authored by chuan.liu's avatar chuan.liu
Browse files
Options

订单附件上传新增

parent abe5cf09
Hide whitespace changes
Inline Side-by-side
Showing with 319 additions and 12 deletions
pages/quota/order-upload.nvue 0 → 100644
View file @ f059baa9
<template>
<view class="lists">
<view class="middle summary">
<view class="summary-block">
<image class="icon_plan" src="@/static/image/icon_plan@3x.png" mode=""></image>
<text class="upload-text">附件上传</text>
</view>
<view class="upload-block">
<uni-file-picker ref='files' :auto-upload='false' v-model="fileList" file-mediatype="image" :imageStyles="imageStyles" @select="select" @progress="progress" @success="success" @fail='fail'>
<text>+</text>
</uni-file-picker>
</view>
</view>
<view class="bottom-area"></view>
<view class="bottom">
<button class="btn btn-l" type="default" @tap="preStep">
<text class="btn-text btn-text-l">上一步</text>
</button>
<button class="btn" type="default" @tap="submit">
<text class="btn-text">提交</text>
</button>
</view>
<uni-popup ref="popup" background-color="#fff" @change="change" :mask-click='false'>
<view class="popup-content">
<view class="popup-content-head">
<image class="popup-content-head__icon" src="@/static/image/icon_plan@3x.png" mode=""></image>
</view>
<view class="popup-content-content">
<text class="popup-content-content__title">支付成功</text>
<text class="popup-content-content__title2">订单号：{{ orderNo }}</text>
</view>
<view class="popup-content-foot">
<text class="popup-content-foot__btn" @click="fnBackHome()">回到首页</text>
<text class="popup-content-foot__btn popup-content-foot__sure"
@click="fnCheckOrderByNo()">查看订单</text>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
orderNo: '',
fileList: [],
}
},
computed:{
imageStyles(){
return {
width: 64,
height: 64,
border: {
radius: '50%'
}
}
},
},
methods: {
change(e) {
console.log('当前模式：' + e.type + ',状态：' + e.show);
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
// 选择文件
select(e) {
console.log('选择文件：', e)
},
// 上传成功
success(e) {
console.log('上传成功',e)
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
},
fnBackHome() {
this.$refs.popup.close()
setTimeout(() => {
uni.switchTab({
url: `/pages/home/home`
})
}, 300)
},
fnCheckOrderByNo() {
this.$refs.popup.close()
},
submit() {
this.$refs.popup.open('center')
this.$refs.files.upload()
},
preStep() {
this.$emit('click', 'quotaOrder')
},
}
}
</script>
<style lang="scss" scoped>
.view {
flex-direction: column;
}
.lists {
position: relative;
flex-direction: column;
padding: 0 16rpx;
overflow-y: scroll;
}
.middle {
background-color: #fff;
border-radius: 16rpx;
padding: 32rpx 64rpx 40rpx 48rpx;
}
.summary-block {
display: flex;
align-items: center;
}
.text-block {
over-overflow: hidden;
height: 96rpx;
margin-bottom: 14rpx;
border-bottom: 1px solid #f4f5f6;
}
.text-block-last {
margin-bottom: 0;
border-bottom: 0;
}
.icon-arrow {
position: absolute;
right: 0;
top: 16px;
width: 12rpx;
height: 20rpx;
z-index: 10;
}
.upload-text {
flex: 2;
font-size: 32rpx;
color: #333;
font-weight: 500;
}
.summary {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 32rpx;
padding: 32rpx 48rpx 140rpx;
}
.icon_plan {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
.upload-block {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
width: 344rpx;
height: 344rpx;
background: #f5f6f7;
border: 1px dashed #dedede;
border-radius: 4px;
margin-top: 90rpx;
}
.uni-file-picker{
width: 100%;
height: 100%;
}
/deep/ .uni-file-picker__container{
width: 100%;
height: 100%;
}
.bottom-area {
height: 140rpx;
margin-top: 12rpx;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
width: 750rpx;
height: 140rpx;
padding: 0 32rpx;
background-color: #fff;
justify-content: space-between;
align-items: center;
}
.btn {
flex: 1;
height: 92rpx;
background: $wly-primary-color;
border-radius: 46rpx;
}
.btn-l {
margin-right: 30rpx;
border: 1px solid $wly-primary-color;
background-color: transparent;
}
.btn-text {
color: #fff;
font-size: 34rpx;
}
.btn-text-l {
color: $wly-primary-color;
}
/deep/ .uni-popup__wrapper {
border-radius: 20rpx;
}
.popup-content {
display: flex;
flex-direction: column;
align-items: center;
width: 580rpx;
height: 408rpx;
background: #ffffff;
border-radius: 20rpx;
}
.popup-content-head {
margin-top: 56rpx;
margin-bottom: 16rpx;
}
.popup-content-head__icon {
width: 80rpx;
height: 80rpx;
}
.popup-content-content {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 52rpx;
}
.popup-content-content__title {
font-size: 32rpx;
color: #444;
font-weight: 500;
margin-bottom: 8rpx;
}
.popup-content-content__title2 {
color: #999999;
font-size: 24rpx;
}
.popup-content-foot {}
.popup-content-foot__btn {
width: 152rpx;
height: 60rpx;
line-height: 60rpx;
background: #ffedee;
text-align: center;
color: #ff0f00;
font-weight: 500;
border-radius: 32rpx;
}
.popup-content-foot__sure {
margin-left: 40rpx;
color: #fff;
background: #ff1d32;
border: 1px solid #ff1d32;
}
</style>
pages/quota/index.nvue → pages/quota/quota-order.nvue
View file @ f059baa9
<template>
<view class="lists">
<view class="middle upload summary">
<view class="">
<view class="summary-block">
<image class="icon_plan" src="@/static/image/icon_plan@3x.png" mode=""></image>
<text class="upload-text">合计金额</text>
</view>
......@@ -93,7 +93,7 @@
<button class="btn btn-l" type="default" @tap="preStep">
<text class="btn-text btn-text-l">上一步</text>
</button>
<button class="btn" type="default" @tap="submit">
<button class="btn" type="default" @tap="nextStep">
<text class="btn-text">下一步</text>
</button>
</view>
......@@ -111,11 +111,13 @@
handleDel() {
console.log(1)
},
submit() {
this.$emit('submit')
nextStep() {
this.$emit('click','orderUpload')
},
preStep() {
this.$emit('click', 'deliveryList')
preStep() {
uni.switchTab({
url: `/pages/go-order/go-order`
})
},
}
}
......@@ -137,7 +139,13 @@
background-color: #fff;
border-radius: 16rpx;
padding: 32rpx 64rpx 40rpx 48rpx;
}
}
.summary-block{
display: flex;
align-items: center;
}
.text-block {
over-overflow: hidden;
......
pages/quota/quota.nvue
View file @ f059baa9
......@@ -53,7 +53,8 @@
mapState
} from 'vuex'
import index from './index.nvue'
import quotaOrder from './quota-order.nvue'
import orderUpload from './order-upload.nvue'
// #ifdef APP-PLUS
const dom = weex.requireModule('dom');
......@@ -61,11 +62,12 @@
export default {
components: {
index
quotaOrder,
orderUpload
},
data() {
return {
currentTabComponent: 'index',
currentTabComponent: 'quotaOrder',
topHeight:''
}
},
......@@ -74,10 +76,10 @@
return this.currentTabComponent != 'deliveryPlan'
},
deliveryListAfterLineShow() {
return this.currentTabComponent == 'index'
return this.currentTabComponent == 'quotaOrder'
},
deliveryCheckLineShow(){
return this.currentTabComponent == 'deliveryPlan'
return this.currentTabComponent == 'orderUpload'
},
componentHeight(){
console.log('componentHeight',`${this.sysinfo.safeArea.height - 44 - this.topHeight}px`,this.sysinfo);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment