123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <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>
|