|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <view class="content flex flex_column">
|
|
|
+ <view class="header">
|
|
|
+ <view class="headerList u-flex">
|
|
|
+ <view class="list_l">
|
|
|
+ <u-icon name="clock" color="#00aaff" size="32"></u-icon>
|
|
|
+ <text>对账周期</text>
|
|
|
+ </view>
|
|
|
+ <view class="list_r u-flex">
|
|
|
+ <u-input v-model="brandName" @click="timeShow=true" disabled placeholder="请选择对账日期" />
|
|
|
+ <u-icon name="arrow-right" color="#999" size="30"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="headerList u-flex">
|
|
|
+ <view class="list_l">
|
|
|
+ <u-icon name="account" color="#00aaff" size="32"></u-icon>
|
|
|
+ <text>客户名称</text>
|
|
|
+ </view>
|
|
|
+ <view class="list_r u-flex">
|
|
|
+ <u-input v-model="brandName" @click="customerShow=true" disabled placeholder="请选择客户名称" />
|
|
|
+ <u-icon name="arrow-right" color="#999" size="30"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="statistical u-flex">
|
|
|
+ <view class="statisticalList">
|
|
|
+ <text>总单数:</text>
|
|
|
+ <text>34</text>
|
|
|
+ </view>
|
|
|
+ <view class="statisticalList">
|
|
|
+ <text>待收金额合计:</text>
|
|
|
+ <text>¥123456.08</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="chooseCon">
|
|
|
+ <view class="chooseList u-flex">
|
|
|
+ <view class="checkbox">
|
|
|
+ <u-checkbox v-model="checked" :name="productSn" @change="checkChange" size="40" shape="circle"></u-checkbox>
|
|
|
+ </view>
|
|
|
+ <view class="choose_r">
|
|
|
+ <view class="u-flex u-row-between">
|
|
|
+ <view class="billInfo u-flex">
|
|
|
+ <text>2022-11-23</text>
|
|
|
+ <view>待出库</view>
|
|
|
+ <view>数字货架</view>
|
|
|
+ </view>
|
|
|
+ <view class="billOrder">
|
|
|
+ XS211230001
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="rigth_b u-flex u-row-between">
|
|
|
+ <view>应收:¥12.00</view>
|
|
|
+ <view>已收:¥12.00</view>
|
|
|
+ <view>待收:<text>¥12.00</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="footer u-flex">
|
|
|
+ <view class="f-left">
|
|
|
+ <u-checkbox @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
|
|
|
+ </view>
|
|
|
+ <view class="f-mid" @click="isDetailShow=!isDetailShow">
|
|
|
+ <view class="u-flex">
|
|
|
+ <view>待收:<text>¥80.00</text></view>
|
|
|
+ <view style="margin-left: 6rpx;">/ 折后:<text>¥80.00</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex">
|
|
|
+ <view>
|
|
|
+ 折让:<text>¥0.00</text>
|
|
|
+ </view>
|
|
|
+ <view class="costBtn">
|
|
|
+ 打折
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="f-btns">
|
|
|
+ <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >发送对账单</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 时间、客户选择弹窗 -->
|
|
|
+ <u-picker mode="time" v-model="timeShow" :params="params"></u-picker>
|
|
|
+ <u-picker mode="selector" v-model="customerShow" :default-selector="[0]"></u-picker>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ params:{//配置时间选项
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: true,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ },
|
|
|
+ timeShow:false,
|
|
|
+ customerShow:false,
|
|
|
+ customBtnStyle: { // 自定义按钮样式
|
|
|
+ borderColor: this.$config('primaryColor'),
|
|
|
+ backgroundColor: this.$config('primaryColor'),
|
|
|
+ color: '#fff',
|
|
|
+ width:'180rpx'
|
|
|
+ },
|
|
|
+ allChecked:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad() {
|
|
|
+ uni.setNavigationBarColor({
|
|
|
+ frontColor: '#ffffff',
|
|
|
+ backgroundColor: this.$config('primaryColor')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .content{
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ .header{
|
|
|
+ width: 100%;
|
|
|
+ .headerList{
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:16rpx 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ &:last-child{
|
|
|
+ border-top:1rpx solid #e4e7ed;
|
|
|
+ }
|
|
|
+ .list_l{
|
|
|
+ width: 170rpx;
|
|
|
+ text{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list_r{
|
|
|
+ width: calc(100% - 170rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statistical{
|
|
|
+ padding:20rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin:10rpx 0;
|
|
|
+ .statisticalList{
|
|
|
+ &:first-child{
|
|
|
+ width: 210rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ &:last-child{
|
|
|
+ color:$uni-color-warning;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chooseCon{
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: auto;
|
|
|
+ background-color: #fff;
|
|
|
+ .chooseList{
|
|
|
+ padding:20rpx;
|
|
|
+ border-bottom:1rpx solid #e4e7ed;
|
|
|
+ &:last-child{
|
|
|
+ border-bottom:0rpx solid #e4e7ed;
|
|
|
+ }
|
|
|
+ .checkbox{
|
|
|
+ width: 74rpx;
|
|
|
+ }
|
|
|
+ .choose_r{
|
|
|
+ flex:1;
|
|
|
+ .billInfo{
|
|
|
+ text{
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ view{
|
|
|
+ padding:4rpx 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ border:1rpx solid #e4e7ed;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: .7rem;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .billOrder{
|
|
|
+ font-size: .8rem;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .rigth_b{
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ view{
|
|
|
+ &:last-child{
|
|
|
+ color:#333;
|
|
|
+ text{
|
|
|
+ color:$uni-color-warning;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer{
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ padding: 20rpx;
|
|
|
+ .f-mid{
|
|
|
+ flex-grow: 1;
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ > view{
|
|
|
+ &:first-child{
|
|
|
+ text{
|
|
|
+ color: $uni-color-warning;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ text{
|
|
|
+ color: $uni-color-primary;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .costBtn{
|
|
|
+ width:70rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background: #999;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|