|
|
@@ -0,0 +1,315 @@
|
|
|
+<template>
|
|
|
+ <view class="pages">
|
|
|
+ <view class="" :style="{height: navHeight+'px' }"></view>
|
|
|
+ <view class="navbar-box">
|
|
|
+ <u-navbar title="开具发票" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="#EF1818"></u-navbar>
|
|
|
+ </view>
|
|
|
+ <view class="page-wrap">
|
|
|
+ <mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
|
+ <!-- :down="downOption" :up="upOption" -->
|
|
|
+ <view class="list">
|
|
|
+ <u-checkbox-group placement="column" @change="checkboxChange" >
|
|
|
+ <view v-for="(item,index) in dataList" class="list-item u-flex" :key="item.id">
|
|
|
+ <view class="left">
|
|
|
+ <u-checkbox shape="circle" :disabled="item.quantity>item.stock" activeColor="#ED0000" :key="index" :name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="order-number">订单号：360123456789079797</view>
|
|
|
+ <view class="info u-flex">
|
|
|
+ <image class="img" :src="item.showImg||staticUrl+'/img/newsdetails-banner.png'"></image>
|
|
|
+ <view class="text">
|
|
|
+ <view class="name">《伟大转折》-【成人票】</view>
|
|
|
+ <view class="time">2023-11–03 14:00-16:00</view>
|
|
|
+ <view class="position">5排6座</view>
|
|
|
+ <view class="statistics">
|
|
|
+ <text>共1张</text>
|
|
|
+ <text class="label">合计：</text>
|
|
|
+ <text class="price">¥120.00</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ </mescroll-body>
|
|
|
+ </view>
|
|
|
+ <view class="page-bottom">
|
|
|
+ <view class="inner u-flex u-row-between">
|
|
|
+ <view class="left">
|
|
|
+ <u-checkbox-group @change="allCheckboxChange">
|
|
|
+ <u-checkbox shape="circle" :checked="allChecked" activeColor="#ED0000" :name="allCheckbox.name" label="全选"></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ <view class="right u-flex">
|
|
|
+ <view class="total-price u-flex">
|
|
|
+ <text>合计：</text>
|
|
|
+ <text class="num">{{totalPrice}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn active" v-if="totalPrice>0&&cansubmit" @click="submitorder">申请开票</view>
|
|
|
+ <view class="btn" v-else>申请开票</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { systemInfo } from "@/mixin.js";
|
|
|
+ import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
|
+ export default {
|
|
|
+ mixins: [MescrollMixin,systemInfo], // 使用mixin
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ staticUrl:this.$commonConfig.staticUrl,
|
|
|
+ allCheckbox:{name: '全选'},
|
|
|
+ dataList:[
|
|
|
+ {name:'路线推荐',checked:false,pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:1},
|
|
|
+ {name:'路线推荐',checked:false,pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:2},
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getSystemInfo();
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 是否全选
|
|
|
+ allChecked() {
|
|
|
+ return this.dataList.every(item => item.checked)
|
|
|
+ },
|
|
|
+ // 商品合计价格
|
|
|
+ selectGoods() {
|
|
|
+ let selectGoods = [];
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ if (item.checked) {
|
|
|
+ selectGoods.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return selectGoods
|
|
|
+ },
|
|
|
+ totalPrice() {
|
|
|
+ let that = this;
|
|
|
+ return this.dataList.reduce((total, item) => {
|
|
|
+ if (item.checked) {
|
|
|
+ let price = null;
|
|
|
+ // if(that.vuex_member_info.priceType>1){
|
|
|
+ // price = item.vipPrice
|
|
|
+ // }else{
|
|
|
+ // price = item.salePrice
|
|
|
+ // }
|
|
|
+ price = item.levelPrice
|
|
|
+ total += price * item.quantity;
|
|
|
+ }
|
|
|
+ return total;
|
|
|
+ }, 0).toFixed(2);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ leftClick(e){
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ if(pages.length==1){
|
|
|
+ uni.$u.route('/pages/index/index')
|
|
|
+ }else{
|
|
|
+ uni.navigateBack()
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
|
|
|
+ downCallback(){
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
+ /*上拉加载的回调*/
|
|
|
+ upCallback(page) {
|
|
|
+ // 此处可以继续请求其他接口
|
|
|
+ // if(page.num == 1){
|
|
|
+ // // 请求其他接口...
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 如果希望先请求其他接口,再触发upCallback,可参考以下写法
|
|
|
+ // if(!this.hasTypeId){
|
|
|
+ // this.mescroll.endErr();//没有接口暂时不调用
|
|
|
+ // return // 此处return,先获取xx
|
|
|
+ // }
|
|
|
+
|
|
|
+ let pageNum = page.num; // 页码, 默认从1开始
|
|
|
+ let pageSize = page.size; // 页长, 默认每页10条
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ pageNum : page.num,
|
|
|
+ pageSize : page.size,
|
|
|
+ status:this.status
|
|
|
+ }
|
|
|
+ // console.log('this.params',params);
|
|
|
+ this.$u.api.orderList(params).then(data => {
|
|
|
+ this.hasfetch = true;
|
|
|
+ console.log('data',JSON.parse(JSON.stringify(data)));
|
|
|
+ // 接口返回的当前页数据列表 (数组)
|
|
|
+ let curPageData = data.data.rows;
|
|
|
+ curPageData = curPageData.map( item =>{
|
|
|
+ item.checked = false
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ // console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
|
|
|
+ // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
+ let curPageLen = curPageData.length;
|
|
|
+ // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
+ // let totalPage = data.data.data.totalPage;
|
|
|
+ // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
+ let totalSize = data.data.total;
|
|
|
+ // 接口返回的是否有下一页 (true/false)
|
|
|
+ // let hasNext = data.xxx;
|
|
|
+ // console.log('totalPage',totalPage,'curPageLen',curPageLen);
|
|
|
+ //设置列表数据
|
|
|
+ if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
|
|
|
+ this.dataList = this.dataList.concat(curPageData); //追加新数据
|
|
|
+ // 请求成功,隐藏加载状态
|
|
|
+ //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
+ // this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
+ //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
|
|
+ this.mescroll.endBySize(curPageLen, totalSize);
|
|
|
+ }).catch(err => {
|
|
|
+ this.mescroll.endErr()
|
|
|
+ console.log(err)
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ /*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
|
|
|
+ reloadList() {
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },
|
|
|
+ search(e){
|
|
|
+ this.reloadList();
|
|
|
+ },
|
|
|
+ checkboxChange(n){
|
|
|
+ // console.log('checkboxChange',n);
|
|
|
+ },
|
|
|
+ toggleCheck(index) {
|
|
|
+ console.log('toggleCheck',index);
|
|
|
+ this.dataList[index].checked = !this.dataList[index].checked
|
|
|
+ },
|
|
|
+ checkboxClick(){
|
|
|
+ console.log('checkboxClick',this.allChecked);
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ if(item.quantity<=item.stock){
|
|
|
+ item.checked = !this.allChecked
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 切换全选状态
|
|
|
+ allCheckboxChange(n){
|
|
|
+ // console.log('allCheckboxChange',n[0]);
|
|
|
+ // console.log('allCheckboxChange',n);
|
|
|
+ let selectAll = n[0]?true:false;
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ item.checked = selectAll
|
|
|
+ });
|
|
|
+ console.log('selectGoods',this.selectGoods);
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page{background-color: #F7F7F9;}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.list-item{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 34rpx 32rpx 50rpx 20rpx;
|
|
|
+ .right{
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ .order-number{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #7F7F7F;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-bottom: 36rpx;
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ .img{
|
|
|
+ width: 180rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #7F7F7F;
|
|
|
+ padding-left: 26rpx;
|
|
|
+ .name{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #363636;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .position{
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .statistics{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #363636;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ED0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.page-bottom{
|
|
|
+ position: relative;
|
|
|
+ z-index: 1001;
|
|
|
+ height: 98rpx;
|
|
|
+ padding: 24rpx 20rpx 50rpx;
|
|
|
+ .inner{
|
|
|
+ position: fixed;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 98rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 24rpx 20rpx 50rpx;
|
|
|
+ box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(215,215,215,0.5);
|
|
|
+ .total-price{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #313131;
|
|
|
+ margin-right: 32rpx;
|
|
|
+ .num{
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ED0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 0 50rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ &.active{
|
|
|
+ background: linear-gradient(90deg, #FF7979 0%, #ED0000 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
