验质页面增加计算折扣率

qingyiay

2023-06-26 131ed52dc99f68b3dfb3acc77c009e212df16267

验质页面增加计算折扣率

 pages/driver-page/driver-index/bill-of-lading-details/weighDetail/weighDetail.vue

New file
@@ -0,0 +1,282 @@
<!-- 查看皮毛净明细 -->
<template>
    <view class="main">
        <view class="main-block"
            v-for="(item,i) in showWeigh"
            :key="i">
            <view class="weigh-item">
                <view class="item">
                    <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/skin.png') no-repeat;background-size: cover;">
                        皮</view>
                    <view class="num">{{ item.skin }}</view>
                </view>
                <view class="item">
                    <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/hair.png') no-repeat;background-size: cover;">
                        毛</view>
                    <view class="num">{{ item.hair }}</view>
                </view>
                <view class="item">
                    <view class="concrete"
                        style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clean.png') no-repeat;background-size: cover;">
                        净</view>
                    <view class="num">{{ item.clean }}</view>
                </view>
            </view>
            <view class="discount">
                <view class="rate">
                    <view class="label-text">
                        折扣率
                    </view>
                    <view v-if='roleType!==1'
                        class="count">{{item.discount}}%</view>
                    <view v-else
                        class="count-input"><u--input placeholder="请输入折扣率"
                            border="bottom"
                            clearable
                            v-model="item.discount"
                            @input='v=>discountInputHandle(v,i,item.clean)'></u--input></view>
                </view>
                <view class="weigh">
                    <view class="label-text">
                        折扣后重量
                    </view>
                    <view class="count">{{item.discountWeight}}</view>
                </view>
            </view>
            <view class="level">
                <u-tag :text="item.level||'请选择'"
                    plain
                    @click="popoverShow(i)"></u-tag>
            </view>
            <view class="confirm-button"
                v-if='roleType===1'>
                <u-button type="primary"
                    shape="circle"
                    text="确认"
                    @click="confirmInput(item)"
                    :loading="loading"
                    loading-text="确认"></u-button>
            </view>
            <view v-if='roleType===1'>
                <u-picker :show="show"
                    :columns="columns"
                    @cancel='cancel'
                    @confirm='confirm'></u-picker>
            </view>
        </view>
    </view>
</template>

<script>
    import loginVue from '../../../../login/login.vue';
    export default {
        data() {
            return {
                orderPlanId: "",
                index: null,
                coalDetailsData: {},
                showWeigh: [],
                discountrate: "",
                loading: false,
                show: false,
                columns: [
                    ['轻质', '中质', '重质']
                ],
                level: '请选择',
                selectIndex: null
            };
        },
        computed: {
            roleType() {
                return uni.getStorageSync('roleType')
            }
        },
        onLoad(params) {
            this.orderPlanId = params.orderPlanId ? params.orderPlanId : ''
            this.index = params.index ? params.index : ''
        },
        onShow() {
            this.roleType === 1 ? this.GetOrderPlan() : this.getTakeCoal()
        },
        methods: {
            getTakeCoal() {
                uni.showLoading({
                    title: '加载中'
                });
                this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
                    if (res.code == 0) {
                        this.coalDetailsData = res.data;
                        this.showWeigh = this.coalDetailsData.tmTaskCoalItems ? this.coalDetailsData
                            .tmTaskCoalItems : [],
                            uni.hideLoading()
                    } else {
                        this.$u.toast('加载失败')
                        uni.hideLoading()
                    }
                })
            },
            GetOrderPlan() {
                uni.showLoading({ title: '加载中...' });
                this.$reqGet('GetOrderPlan').then(res => {
                    if (res.data) {
                        this.coalDetailsData = res.data;
                        this.showWeigh = this.coalDetailsData[this.index].tmTaskCoalItems ? this.coalDetailsData[
                                this.index].tmTaskCoalItems : [],
                            // this.showWeigh = this.showWeigh.map(v => {
                            //     return {
                            //         ...v,
                            //         loading: false
                            //     }
                            // })
                            uni.hideLoading();
                    } else {
                        this.$u.toast('加载失败')
                        uni.hideLoading()
                    }
                });
            },
            // 输入折扣率后点击确认
            confirmInput(item) {
                this.loading = true
                console.log(this.coalDetailsData);
                this.$reqPost('updateTmTaskCoalItem', this.coalDetailsData[this.index].tmTaskCoalItems, 'json').then(
                    res => {
                        if (res.code == 0) {
                            this.loading = false
                            this.$u.toast('操作成功')
                        } else {
                            this.loading = false
                            this.$u.toast('操作失败')
                        }
                    })
            },
            // 选择质量
            popoverShow(i) {
                this.show = true
                this.selectIndex = i
            },
            confirm(e) {
                this.show = false
                this.coalDetailsData[this.index].tmTaskCoalItems[this.selectIndex].level = e.value[0]
            },
            cancel() {
                this.show = false
            },
            // 折扣率输入
            discountInputHandle(value, index, clean) {
                console.log(value, index);
                this.coalDetailsData[this.index].tmTaskCoalItems[index].discountWeight = (Number(value) * clean) / 100
            }
        },
    }
</script>

<style lang="scss"
    scoped>
    @mixin flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /deep/ .u-picker {
        height: 600rpx;
    }

    .main {
        width: 100%;
        height: 100vh;
        background-color: #fff;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        .main-block {
            width: 690rpx;
            height: 360rpx;
            margin: vww(20) auto;
            padding: vww(5);
            background: #ffffff;
            box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;

            .weigh-item {
                width: 100%;
                height: vww(36);
                margin: vww(10);
                @include flex;
                justify-content: space-around;

                .item {
                    min-width: vww(50);
                    height: vww(45);
                    font-size: 21rpx;
                    font-weight: 400;
                    color: #ffffff;
                    text-align: center;
                    line-height: vww(30);
                    @include flex;

                    .concrete {
                        width: vww(36);
                        height: vww(36);
                    }

                    .num {
                        font-size: 40rpx;
                        font-weight: 300;
                        color: #303030;
                    }
                }
            }

            .discount {
                @include flex;
                justify-content: space-around;
                width: 100%;
                line-height: vww(36);

                .rate,
                .weigh {
                    width: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex-direction: column;

                    .count-input {
                        width: 70%;
                        // border-bottom: 1px solid rgb(218, 219, 222);

                    }
                }

                .count {
                    font-size: 40rpx;
                    color: rgb(242, 70, 79);
                }

            }

            .level {
                width: 120rpx;
                margin-top: 30rpx;
                margin-left: 80rpx;
            }

            .confirm-button {
                position: absolute;
                bottom: 10rpx;
                right: 10rpx;

                /deep/ .u-button {
                    width: 180rpx !important;
                }
            }
        }
    }
</style>

 pages/tabbar-page/index-tabbar/index-tabbar.vue

@@ -175,7 +175,7 @@
            if (this.globalisconnect) {
                this.$store.dispatch('websocketInit')
                this.changeisconnect(false)
                console.log(this.globalisconnect, 'index的ws心事’');
                console.log(this.globalisconnect, 'index的ws数据’');
            }
            this.userAuthorization();
            this.messageReq();

 uni.scss

@@ -11,7 +11,8 @@
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

// uview样式
@import '@/uni_modules/uview-ui/theme.scss';
/* 颜色变量 */

/* 行为相关颜色 */
@@ -78,6 +79,3 @@
@function vww($number) {
    @return ($number / 375) * 750 + rpx;
}

// uview样式
@import '@/uni_modules/uview-ui/theme.scss';