|
|
@@ -0,0 +1,278 @@
|
|
|
+<template>
|
|
|
+ <view class="" :style="{'--status-bar-': statusBarHeight}">
|
|
|
+ <u-navbar title="选择下级分销商" :placeholder="true" @leftClick="leftClick" :autoBack="false" :safeAreaInsetTop="true">
|
|
|
+ </u-navbar>
|
|
|
+ <view class="item-list">
|
|
|
+ <!-- <view class="til u-flex u-row-between" :style="{top:navHeight+'px'}">
|
|
|
+ <u-checkbox-group @change="allCheckboxChange">
|
|
|
+ <u-checkbox shape="circle" :checked="allChecked" :name="allCheckbox.name"
|
|
|
+ label="观影人列表"></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view> -->
|
|
|
+ <u-checkbox-group placement="column" @change="checkboxChange">
|
|
|
+ <view v-for="(item,index) in dataList" :key="item.id" class="item u-flex">
|
|
|
+ <u-checkbox shape="circle" activeColor="#ED0000" :key="index"
|
|
|
+ :name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
|
|
|
+ <view class="text u-flex u-row-between" @click="toggleCheck(index)">
|
|
|
+ <view class="name">{{item.name}}</view>
|
|
|
+ <view class="withdrawTotal">可体现余额：<text class="num"> ￥ {{item.withdrawTotal}}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ <view class="cart-bottom">
|
|
|
+ <view class="inner u-flex u-row-between">
|
|
|
+ <view class="left u-flex">
|
|
|
+ <view class="checkbox" @click="checkboxClick" style="padding: 10px;">
|
|
|
+ <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="total-price-wrap u-flex">
|
|
|
+ <view class="total">共{{selectGoods.length}}人</view>
|
|
|
+ <view class="totalPrice u-flex">
|
|
|
+ 合计: <text class="num"> {{totalPrice}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn active" v-if="selectGoods.length>0&&cansubmit" @click="submitorder">确定</view>
|
|
|
+ <view class="btn" v-else>确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-toast ref="uToast"></u-toast>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ // import {
|
|
|
+ // systemInfo
|
|
|
+ // } from "@/mixin.js";
|
|
|
+ export default {
|
|
|
+ // mixins: [systemInfo], // 使用mixin
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: 0, // 状态栏安全距离
|
|
|
+ orderId: '',
|
|
|
+ cansubmit: true,
|
|
|
+ staticUrl: this.$commonConfig.staticUrl,
|
|
|
+ allCheckbox: {
|
|
|
+ name: '全选'
|
|
|
+ },
|
|
|
+ options: [{
|
|
|
+ text: '删除',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#FF3C3F',
|
|
|
+ 'padding-left': '10px'
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ // 购物车列表
|
|
|
+ dataList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ total += item.withdrawTotal;
|
|
|
+ }
|
|
|
+ return total;
|
|
|
+ }, 0).toFixed(2);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(page) {
|
|
|
+ // this.getSystemInfo();
|
|
|
+ this.statusBarHeight = getApp().globalData.statusBarHeight;
|
|
|
+ this.orderId = page.id;
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getViewers();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ leftClick(e) {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/main/index'
|
|
|
+ });
|
|
|
+ console.log('leftClick', e);
|
|
|
+ },
|
|
|
+ // 切换全选状态
|
|
|
+ allCheckboxChange(n) {
|
|
|
+ // console.log('allCheckboxChange',n[0]);
|
|
|
+ console.log('allCheckboxChange', n);
|
|
|
+ let selectAll = n[0] ? true : false;
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ item.checked = selectAll
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkboxClick() {
|
|
|
+ // console.log('checkboxClick',this.allChecked);
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ item.checked = !this.allChecked
|
|
|
+ })
|
|
|
+ },
|
|
|
+ checkboxChange(n) {
|
|
|
+ // console.log('checkboxChange',n);
|
|
|
+ },
|
|
|
+ // 切换商品选中状态
|
|
|
+ toggleCheck(index) {
|
|
|
+ // console.log('toggleCheck',index);
|
|
|
+ // if(this.dataList[index].status !== 3){
|
|
|
+ // uni.showToast({
|
|
|
+ // icon:'none',
|
|
|
+ // title:'该状态不能退款',
|
|
|
+ // duration:1000
|
|
|
+ // })
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.dataList[index].checked = !this.dataList[index].checked
|
|
|
+ },
|
|
|
+ submitorder() {
|
|
|
+ let personList = this.selectGoods.map(item=>{
|
|
|
+ return {personsId:item.id,withdrawTotal:item.withdrawTotal}
|
|
|
+ });
|
|
|
+ let params = {
|
|
|
+ withdrawTotal:this.totalPrice,
|
|
|
+ personList:JSON.stringify(personList)
|
|
|
+ };
|
|
|
+ // console.log('selectGoods', this.selectGoods);
|
|
|
+ uni.$u.route('/pages/cash/index', params);
|
|
|
+ },
|
|
|
+ getViewers() {
|
|
|
+ this.$u.api.distributorList({
|
|
|
+ userid: this.distribution_user_info.userId
|
|
|
+ }).then(res => {
|
|
|
+ this.dataList = res.data.list.map(item => {
|
|
|
+ item.checked = false;
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ class: {
|
|
|
+ 0: 'status-0',
|
|
|
+ 1: 'status-1',
|
|
|
+ 2: 'status-2',
|
|
|
+ 3: 'status-3',
|
|
|
+ 4: 'status-4',
|
|
|
+ 5: 'status-5',
|
|
|
+ 6: 'status-6',
|
|
|
+ 7: 'status-7',
|
|
|
+ 8: 'status-8'
|
|
|
+ }[item.status] || ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('getOrderDetails', err.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+page {
|
|
|
+ background: #F7F7F9;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.u-flex {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.u-row-between {
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.u-row-around {
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.item-list{
|
|
|
+ margin: 28rpx 32rpx 20rpx;
|
|
|
+ .item{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding-left: 18rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .text{
|
|
|
+ margin-left: 20rpx;
|
|
|
+ flex: 1;
|
|
|
+ padding: 30rpx 32rpx;
|
|
|
+ box-shadow: -6rpx 0rpx 20rpx -18rpx rgba(0,0,0,0.5);
|
|
|
+ .name{
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .withdrawTotal{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: var(--gd-but-color);
|
|
|
+ .num{
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+ .cart-bottom {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1001;
|
|
|
+ height: 98rpx;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ position: fixed;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 98rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ padding-left: 0;
|
|
|
+
|
|
|
+ .total-price-wrap {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ .totalPrice{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 400;
|
|
|
+ .num{
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ED0000;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 0 50rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: #FF3C3F;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
