Skip to content

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

新增 非配额 公关团购订单

parent f059baa9
Hide whitespace changes
Inline Side-by-side
Showing with 1944 additions and 27 deletions
pages/group-buy/group-baseinfo.nvue 0 → 100644
View file @ 5f52d1d6
<template>
<view class="lists">
<view class="middle view planout-block-item">
<view class="text-block">
<text class="middle-date">团购单位</text>
<view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<text class="middle-date-des">请选择</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">商机选择</text>
<view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<text class="middle-date-des">请选择</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">盒外刻字</text>
<view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<text class="middle-date-des">请选择</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">收货单位</text>
<view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<text class="middle-date-des">请选择</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">外箱喷码内容</text>
<input class="middle-date-des" type="text" value="" placeholder="请选择" />
</view>
<view class="text-block">
<text class="middle-date">联系人</text>
<input class="middle-date-des" type="text" value="" placeholder="请选择" />
</view>
<view class="text-block text-block-last">
<text class="middle-date">电话</text>
<input class="middle-date-des" type="text" value="" placeholder="请选择" />
</view>
<view class="text-block text-block-last">
<text class="middle-date">收货地址</text>
<input class="middle-date-des" type="text" value="" placeholder="请选择" />
</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="nextStep">
<text class="btn-text">下一步</text>
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
applyNum: 100
}
},
methods: {
nextStep() {
this.$emit('click', 'quotaOrder')
},
preStep() {
uni.switchTab({
url: `/pages/go-order/go-order`
})
},
}
}
</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;
}
.text-block {
over-overflow: hidden;
height: 96rpx;
margin-bottom: 14rpx;
border-bottom: 1px solid #f4f5f6;
}
.text-block-last {
margin-bottom: 0;
border-bottom: 0;
}
.middle-date {
flex: 2;
font-size: 28rpx;
line-height: 96rpx;
color: #333;
margin-bottom: 8rpx;
}
.middle-date-des {
flex: 3;
font-size: 28rpx;
line-height: 96rpx;
height: 96rpx;
color: #888;
}
.picker-year {
position: relative;
border-radius: 4px;
align-items: center;
}
.uni-list-cell {
flex: 1;
}
.uni-list-cell-db {
flex: 1;
}
.picker-block {
flex: 1;
}
.icon-arrow {
position: absolute;
right: 0;
top: 16px;
width: 12rpx;
height: 20rpx;
z-index: 10;
}
.upload {
padding: 0;
height: 136rpx;
padding: 48rpx;
margin-bottom: 0;
align-items: center;
}
.planout-block-lists {
display: flex;
flex-direction: column;
}
.planout-block-item {
flex: 1;
}
.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;
}
</style>
pages/group-buy/group-buy.nvue
View file @ 5f52d1d6
<template> <template>
<div> <view class="apply-history view" :style="winHeight">
<view class="status_bar" :style="navHeight"></view>
</div> <view class="header-bg"></view>
</template> <view class="apply-history-wrapper view">
<view ref='top' id="top">
<script> <view class="steps">
export default { <view class="steps__row-container">
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before steps__row-line--hide"></view>
<view class="steps__row-check">
<i class="icon-dot icon-dot-active"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--active"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before" :class="{'steps__row-line--active':baseinfoListBeforeLineShow || baseinfoAfterLineShow || uploadLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot" :class="{'icon-dot-active':baseinfoListBeforeLineShow || baseinfoAfterLineShow || uploadLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after" :class="{'steps__row-line--active':baseinfoAfterLineShow || uploadLineShow}"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before" :class="{'steps__row-line--active':baseinfoAfterLineShow || uploadLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot" :class="{'icon-dot-active':baseinfoAfterLineShow || uploadLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after" :class="{'steps__row-line--active':uploadLineShow}"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before" :class="{'steps__row-line--active':uploadLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot " :class="{'icon-dot-active':uploadLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--hide"></view>
</view>
</view>
<view class="steps__row-text-container">
<view class="steps__row-text">
<text class="steps__row-title">下单类型</text>
<text class="steps__row-desc"></text>
</view>
<view class="steps__row-text">
<text class="steps__row-title">团购信息</text>
<text class="steps__row-desc"></text>
</view>
<view class="steps__row-text">
<text class="steps__row-title">订购产品</text>
<text class="steps__row-desc"></text>
</view>
<view class="steps__row-text">
<text class="steps__row-title">附件上传</text>
<text class="steps__row-desc"></text>
</view>
</view>
</view>
</view>
<component :style="componentHeight" :is="currentTabComponent" @click="changeComponent" @submit="submit"></component>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
import groupBaseinfo from './group-baseinfo.nvue'
import quotaOrder from './quota-order.nvue'
import orderUpload from './order-upload.nvue'
// #ifdef APP-PLUS
const dom = weex.requireModule('dom');
// #endif
export default {
components: {
groupBaseinfo,
quotaOrder,
orderUpload
},
data() {
return {
currentTabComponent: 'groupBaseinfo',
topHeight:''
}
},
computed: {
deliveryListBeforeLineShow() {
return this.currentTabComponent != 'deliveryPlan'
},
baseinfoListBeforeLineShow() {
return this.currentTabComponent == 'groupBaseinfo'
},
baseinfoAfterLineShow() {
return this.currentTabComponent == 'quotaOrder'
},
uploadLineShow(){
return this.currentTabComponent == 'orderUpload'
},
componentHeight(){
console.log('componentHeight',`${this.sysinfo.safeArea.height - 44 - this.topHeight}px`,this.sysinfo);
return {
'height':`${this.sysinfo.safeArea.height - 44 - this.topHeight}px`
}
},
winHeight(){
return {
'height':`${this.sysinfo.safeArea.height}px`
}
},
navHeight(){
return {
'height':`${this.sysinfo.safeArea.top + 44}px`
}
},
...mapState(['sysinfo'])
},
onReady() {
// this.winHeight = `height:${this.sysinfo.safeArea.height}px`;
// this.navHeight = `height:${this.sysinfo.safeArea.top + 44}px`;
// #ifdef APP-NVUE
let queryTabSize = uni.createSelectorQuery().in(this);
queryTabSize.select('#top').boundingClientRect();
queryTabSize.exec(rects => {
console.log('rects',rects);
rects.forEach((rect) => {
this.topHeight = rect.height;
})
});
// #endif
// #ifdef H5
uni.createSelectorQuery().in(this).select('#top').boundingClientRect( (res) => {
this.topHeight = res.height;
}).exec();
// #endif
},
onBackPress() {
uni.navigateBack({
delta: 1
})
},
methods: {
changeComponent(com) {
this.currentTabComponent = com;
},
submit() {
console.log('submit')
}
}
}
</script>
<style lang="scss" scoped>
.view {
flex-direction: column;
} }
</script>
.header-bg {
<style> height: 284rpx;
opacity: 0.72;
margin-top: -88rpx;
background: linear-gradient(232deg, #f4e2e2 25%, #faf3f3 98%);
}
.apply-history {
width: 750rpx;
flex: 1;
background: $background-color-1;
}
.apply-history-wrapper {
margin-top: -164rpx;
}
.top {
position: relative;
background: $background-color-1;
}
.steps {
flex: 1;
flex-direction: column;
margin: 28rpx 0 32rpx;
}
.steps__row-text-container {
align-items: flex-end;
flex-direction: row;
}
.steps__row-text {
flex: 1;
flex-direction: column;
}
.steps__row-title {
font-size: 12px;
line-height: 16px;
text-align: center;
color: $text-base-color;
}
.steps__row-container {
margin-bottom: 16rpx;
}
.steps__row-line-item {
flex: 1;
height: 14px;
line-height: 14px;
align-items: center;
justify-content: center;
}
.steps__row-line--before {
transform: translateX(-1px);
}
.steps__row-line {
flex: 1;
height: 1px;
background-color: #fff;
}
.icon-dot {
width: 16rpx;
height: 16rpx;
background: #fff;
border-radius: 50%;
}
.icon-dot-active {
background: #ff1d32;
}
.steps__row-line--after {
transform: translateX(1px);
}
.steps__row-line {
flex: 1;
height: 1px;
background-color: #fff;
}
.steps__row-line--active {
background: #ff3e61;
border-radius: 1px;
}
.steps__row-circle {
background: #E5E5E5;
}
.steps__row-line--hide {
background-color: transparent;
}
</style> </style>
pages/group-buy/order-upload.nvue 0 → 100644
View file @ 5f52d1d6
<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/group-buy/quota-order.nvue 0 → 100644
View file @ 5f52d1d6
<template>
<view class="lists">
<view class="middle upload 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>
<text class="summary-num">789*6*4</text>
</view>
</view>
<view class="planout-block">
<text class="planout-block-title">订购产品</text>
<image class="planout-block-icon" src="@/static/image/shop_more@3x.png" mode="aspectFit"></image>
</view>
<uni-swipe-action class="planout-block-lists">
<uni-swipe-action-item v-for="item in 2" :key='item'>
<view class="middle view planout-block-item">
<view class="text-block title-first">
<text class="middle-date title-first__text">1</text>
</view>
<view class="text-block">
<text class="middle-date">产品</text>
<view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<text class="middle-date-des">请选择</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">数量（件）</text>
<input class="middle-date-des" type="text" value="" placeholder="请填写" />
</view>
<view class="text-block">
<text class="middle-date">单价</text>
<text class="middle-date-des">789</text>
</view>
<view class="text-block text-block-last">
<text class="middle-date">小计</text>
<text class="middle-date-des">789*6*4</text>
</view>
</view>
<template v-slot:right>
<view class="swipe-right-block" @click="handleDel"><text class="swipe-right-block__text">删除</text>
</view>
</template>
</uni-swipe-action-item>
</uni-swipe-action>
<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="nextStep">
<text class="btn-text">下一步</text>
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
applyNum: 100
}
},
methods: {
handleDel() {
console.log(1)
},
nextStep() {
this.$emit('click','orderUpload')
},
preStep() {
uni.switchTab({
url: `/pages/go-order/go-order`
})
},
}
}
</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;
}
.middle-date {
flex: 2;
font-size: 28rpx;
line-height: 96rpx;
color: #333;
margin-bottom: 8rpx;
}
.middle-date-des {
flex: 3;
font-size: 28rpx;
line-height: 96rpx;
height: 96rpx;
color: #888;
}
.picker-year {
position: relative;
border-radius: 4px;
align-items: center;
}
.title-first {
border-bottom: 0;
margin-bottom: 24rpx;
}
.title-first__text {
font-size: 28rpx;
color: #333333;
font-weight: 600;
}
.uni-list-cell {
flex: 1;
}
.uni-list-cell-db {
flex: 1;
}
.picker-block {
flex: 1;
}
.icon-arrow {
position: absolute;
right: 0;
top: 16px;
width: 12rpx;
height: 20rpx;
z-index: 10;
}
.upload {
padding: 0;
height: 136rpx;
padding: 48rpx;
margin-bottom: 0;
align-items: center;
}
.upload-text {
flex: 2;
font-size: 14px;
color: #999;
}
.summary {
display: flex;
margin-bottom: 32rpx;
height: 176rpx;
padding: 0 48rpx 0 24rpx;
justify-content: space-between;
}
.icon_plan {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
.summary-num {
font-size: 32rpx;
color: #333;
font-weight: 500;
}
.planout-block-lists{
display: flex;
flex-direction: column;
}
.uni-swipe {
flex: 1;
margin-bottom: 26rpx;
}
/deep/ .uni-swipe_box {
flex: 1;
}
.swipe-right-block {
width: 152rpx;
background: linear-gradient(90deg, #fb4d61, #ff0f00 100%);
border-radius: 0px 8px 8px 0px;
justify-content: center;
}
.swipe-right-block__text {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 34rpx;
font-weight: 500;
}
.planout-block {
display: flex;
justify-content: space-between;
height: 40rpx;
margin-top: 48rpx;
margin-bottom: 32rpx;
padding: 0 24rpx;
}
.planout-block-title {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.planout-block-icon {
width: 32rpx;
height: 40rpx;
}
.planout-block-item {
flex: 1;
}
.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;
}
</style>
pages/no-quota/no-quota.nvue
View file @ 5f52d1d6
<template> <template>
<div> <view class="apply-history view" :style="winHeight">
<view class="status_bar" :style="navHeight"></view>
</div> <view class="header-bg"></view>
</template> <view class="apply-history-wrapper view">
<view ref='top' id="top">
<script> <view class="steps">
export default { <view class="steps__row-container">
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before steps__row-line--hide"></view>
<view class="steps__row-check">
<i class="icon-dot icon-dot-active"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--active"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before" :class="{'steps__row-line--active':deliveryListBeforeLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot" :class="{'icon-dot-active':deliveryListBeforeLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after" :class="{'steps__row-line--active':!deliveryListAfterLineShow}"></view>
</view>
<view class="steps__row-line-item">
<view class="steps__row-line steps__row-line--before" :class="{'steps__row-line--active':deliveryCheckLineShow}"></view>
<view class="steps__row-check steps__row-circle">
<i class="icon-dot " :class="{'icon-dot-active':deliveryCheckLineShow}"></i>
</view>
<view class="steps__row-line steps__row-line--after steps__row-line--hide"></view>
</view>
</view>
<view class="steps__row-text-container">
<view class="steps__row-text">
<text class="steps__row-title">下单类型</text>
<text class="steps__row-desc"></text>
</view>
<view class="steps__row-text">
<text class="steps__row-title">订购产品</text>
<text class="steps__row-desc"></text>
</view>
<view class="steps__row-text">
<text class="steps__row-title">附件上传</text>
<text class="steps__row-desc"></text>
</view>
</view>
</view>
</view>
<component :style="componentHeight" :is="currentTabComponent" @click="changeComponent" @submit="submit"></component>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
import quotaOrder from './quota-order.nvue'
import orderUpload from './order-upload.nvue'
// #ifdef APP-PLUS
const dom = weex.requireModule('dom');
// #endif
export default {
components: {
quotaOrder,
orderUpload
},
data() {
return {
currentTabComponent: 'quotaOrder',
topHeight:''
}
},
computed: {
deliveryListBeforeLineShow() {
return this.currentTabComponent != 'deliveryPlan'
},
deliveryListAfterLineShow() {
return this.currentTabComponent == 'quotaOrder'
},
deliveryCheckLineShow(){
return this.currentTabComponent == 'orderUpload'
},
componentHeight(){
console.log('componentHeight',`${this.sysinfo.safeArea.height - 44 - this.topHeight}px`,this.sysinfo);
return {
'height':`${this.sysinfo.safeArea.height - 44 - this.topHeight}px`
}
},
winHeight(){
return {
'height':`${this.sysinfo.safeArea.height}px`
}
},
navHeight(){
return {
'height':`${this.sysinfo.safeArea.top + 44}px`
}
},
...mapState(['sysinfo'])
},
onReady() {
// this.winHeight = `height:${this.sysinfo.safeArea.height}px`;
// this.navHeight = `height:${this.sysinfo.safeArea.top + 44}px`;
// #ifdef APP-NVUE
let queryTabSize = uni.createSelectorQuery().in(this);
queryTabSize.select('#top').boundingClientRect();
queryTabSize.exec(rects => {
console.log('rects',rects);
rects.forEach((rect) => {
this.topHeight = rect.height;
})
});
// #endif
// #ifdef H5
uni.createSelectorQuery().in(this).select('#top').boundingClientRect( (res) => {
this.topHeight = res.height;
}).exec();
// #endif
},
onBackPress() {
uni.navigateBack({
delta: 1
})
},
methods: {
changeComponent(com) {
this.currentTabComponent = com;
},
submit() {
console.log('submit')
}
}
}
</script>
<style lang="scss" scoped>
.view {
flex-direction: column;
} }
</script>
.header-bg {
<style> height: 284rpx;
opacity: 0.72;
margin-top: -88rpx;
background: linear-gradient(232deg, #f4e2e2 25%, #faf3f3 98%);
}
.apply-history {
width: 750rpx;
flex: 1;
background: $background-color-1;
}
.apply-history-wrapper {
margin-top: -164rpx;
}
.top {
position: relative;
background: $background-color-1;
}
.steps {
flex: 1;
flex-direction: column;
margin: 28rpx 0 32rpx;
}
.steps__row-text-container {
align-items: flex-end;
flex-direction: row;
}
.steps__row-text {
flex: 1;
flex-direction: column;
}
.steps__row-title {
font-size: 12px;
line-height: 16px;
text-align: center;
color: $text-base-color;
}
.steps__row-container {
margin-bottom: 16rpx;
}
.steps__row-line-item {
flex: 1;
height: 14px;
line-height: 14px;
align-items: center;
justify-content: center;
}
.steps__row-line--before {
transform: translateX(-1px);
}
.steps__row-line {
flex: 1;
height: 1px;
background-color: #fff;
}
.icon-dot {
width: 16rpx;
height: 16rpx;
background: #fff;
border-radius: 50%;
}
.icon-dot-active {
background: #ff1d32;
}
.steps__row-line--after {
transform: translateX(1px);
}
.steps__row-line {
flex: 1;
height: 1px;
background-color: #fff;
}
.steps__row-line--active {
background: #ff3e61;
border-radius: 1px;
}
.steps__row-circle {
background: #E5E5E5;
}
.steps__row-line--hide {
background-color: transparent;
}
</style> </style>
pages/no-quota/order-upload.nvue 0 → 100644
View file @ 5f52d1d6
<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/no-quota/quota-order.nvue 0 → 100644
View file @ 5f52d1d6
<template>
<view class="lists">
<view class="middle upload 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>
<text class="summary-num">789*6*4</text>
</view>
</view>
<view class="planout-block">
<text class="planout-block-title">订购产品</text>
<image class="planout-block-icon" src="@/static/image/shop_more@3x.png" mode="aspectFit"></image>
</view>
<uni-swipe-action class="planout-block-lists">
<uni-swipe-action-item v-for="item in 2" :key='item'>
<view class="middle view planout-block-item">
<view class="text-block title-first">
<text class="middle-date title-first__text">1</text>
</view>
<view class="text-block">
<text class="middle-date">产品</text>
<view class="middle-date-des uni-list picker-year">
<view class="uni-list-cell">
<view class="uni-list-cell-db">
<text class="middle-date-des">请选择</text>
</view>
</view>
<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
</view>
</view>
<view class="text-block">
<text class="middle-date">数量（件）</text>
<input class="middle-date-des" type="text" value="" placeholder="请填写" />
</view>
<view class="text-block">
<text class="middle-date">单价</text>
<text class="middle-date-des">789</text>
</view>
<view class="text-block text-block-last">
<text class="middle-date">小计</text>
<text class="middle-date-des">789*6*4</text>
</view>
</view>
<template v-slot:right>
<view class="swipe-right-block" @click="handleDel"><text class="swipe-right-block__text">删除</text>
</view>
</template>
</uni-swipe-action-item>
</uni-swipe-action>
<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="nextStep">
<text class="btn-text">下一步</text>
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
applyNum: 100
}
},
methods: {
handleDel() {
console.log(1)
},
nextStep() {
this.$emit('click','orderUpload')
},
preStep() {
uni.switchTab({
url: `/pages/go-order/go-order`
})
},
}
}
</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;
}
.middle-date {
flex: 2;
font-size: 28rpx;
line-height: 96rpx;
color: #333;
margin-bottom: 8rpx;
}
.middle-date-des {
flex: 3;
font-size: 28rpx;
line-height: 96rpx;
height: 96rpx;
color: #888;
}
.picker-year {
position: relative;
border-radius: 4px;
align-items: center;
}
.title-first {
border-bottom: 0;
margin-bottom: 24rpx;
}
.title-first__text {
font-size: 28rpx;
color: #333333;
font-weight: 600;
}
.uni-list-cell {
flex: 1;
}
.uni-list-cell-db {
flex: 1;
}
.picker-block {
flex: 1;
}
.icon-arrow {
position: absolute;
right: 0;
top: 16px;
width: 12rpx;
height: 20rpx;
z-index: 10;
}
.upload {
padding: 0;
height: 136rpx;
padding: 48rpx;
margin-bottom: 0;
align-items: center;
}
.upload-text {
flex: 2;
font-size: 14px;
color: #999;
}
.summary {
display: flex;
margin-bottom: 32rpx;
height: 176rpx;
padding: 0 48rpx 0 24rpx;
justify-content: space-between;
}
.icon_plan {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
.summary-num {
font-size: 32rpx;
color: #333;
font-weight: 500;
}
.planout-block-lists{
display: flex;
flex-direction: column;
}
.uni-swipe {
flex: 1;
margin-bottom: 26rpx;
}
/deep/ .uni-swipe_box {
flex: 1;
}
.swipe-right-block {
width: 152rpx;
background: linear-gradient(90deg, #fb4d61, #ff0f00 100%);
border-radius: 0px 8px 8px 0px;
justify-content: center;
}
.swipe-right-block__text {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 34rpx;
font-weight: 500;
}
.planout-block {
display: flex;
justify-content: space-between;
height: 40rpx;
margin-top: 48rpx;
margin-bottom: 32rpx;
padding: 0 24rpx;
}
.planout-block-title {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.planout-block-icon {
width: 32rpx;
height: 40rpx;
}
.planout-block-item {
flex: 1;
}
.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;
}
</style>
pages/quota/quota.nvue
View file @ 5f52d1d6
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
.icon-dot { .icon-dot {
width: 16rpx; width: 16rpx;
height: 16rpx; height: 16rpx;
background: #E5E5E5; background: #fff;
border-radius: 50%; border-radius: 50%;
} }
......
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