xiamen-sb-uniapp/pages/oiling/oiling.vue

<template>
    <view>
       <!-- <view class="border-bottom">
            <u-tabs
                class="p-fixed left0 right0 zIndex"
                :list="list"
                :name="'label'"
                :is-scroll="false"
                :current="current"
                @change="change"
            ></u-tabs>
        </view> -->
				<common-tabs :list='list' :current="current" @change='change' />
        <my-page
            :loadData="loadData"
            :swipe-action="true"
            :row-show-params="{statusValue: $DictCache.VALUE.SB_OIL_STATUS,statusMap: statusMap,statusColor: $DictCache.COLOR.SB_OIL_STATUS}"
            @rowClick="handleDetail"
            :page-size="10"
            ref="myPage"
        >
            <template #pageRow="{ recordModel,rowShowParams }">
                <view class="mx3 my2 p3 bg-color-white box p-relative"
				@longpress="showMask(recordModel.id,$event)">
				<common-mask :item="recordModel" :maskId="maskId" @hide='maskId = 0' @del='handleDel(recordModel)' />
                    <view class="d-flex j-between border-bottom pb-2 a-center">
                        <view class="text-color-b f-size-26">{{ recordModel.updateTime }}</view>
                        <my-badge
                            :text="rowShowParams.statusMap[recordModel.status]"
                            :status="rowShowParams.statusColor[recordModel.status]"
                        />
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="text-color-3 f-size-32 f-weight-bold">
                            {{ recordModel.sbName }}
                        </view>
                        <view class="text-color-3 f-size-32 f-weight-bold">
                            {{ recordModel.storeName }}
                        </view>
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="f-size-26 text-color-6 f-weight-4 mt-2">
                            {{ recordModel.sbNo }}
                        </view>

                    </view>
                    <view class="d-flex j-end edit-box">
                        <view
                            class="text-color-3 f-size-32 edit"
                            v-if="recordModel.status === rowShowParams.statusValue.AGREE">
                            <view @click.stop="taskHandle(recordModel)">加油</view>
                        </view>
                        <view
                            class="text-color-3 f-size-32 edit"
                            v-if="recordModel.status === rowShowParams.statusValue.OIL">
                            <view @click.stop="taskHandle(recordModel)">修改</view>
                        </view>
                    </view>
                </view>
            </template>
        </my-page>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pageParams: {
                sbId: null
            },
            list: [],
            statusMap: {},
            current: 0,
						maskId: 0
        };
    },
    onPullDownRefresh() {
        this.$refs.myPage.pagePullDownRefresh();
    },
    onReachBottom() {
        this.$refs.myPage.pageReachBottom();
    },
    created() {
        const sbOilStatusList = this.$DictCache.getChildrenList(this.$DictCache.TYPE.SB_OIL_STATUS);
        const statusList = [{ label: '全部', value: '' }]
        sbOilStatusList.forEach(item => {
            if (item.value !== this.$DictCache.VALUE.SB_OIL_STATUS.APPLY &&
                item.value !== this.$DictCache.VALUE.SB_OIL_STATUS.REJECT &&
                item.value !== this.$DictCache.VALUE.SB_OIL_STATUS.NOT_AGREE
            ) {
                statusList.push(item);
            }
        })
        this.list = statusList;
        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.SB_OIL_STATUS
        );
    },
    onShow() {
        this.$nextTick(() => {
            this.$refs.myPage.initPage();
        })
    },
    onLoad(options) {
        if (this.$BaseTool.String.isNotBlank(options.sbId)) {
            this.pageParams.sbId = options.sbId
        } else {
            this.pageParams.sbId = null
        }
    },
		onHide() {
			this.maskId = 0
		},
    methods: {
			showMask(id, e) {
				this.maskId = id
				// #ifdef H5
				e.preventDefault()
				// #endif
			},
        // tab
        change(index, e) {
            this.current = index;
            this.$refs.myPage.initPage();
        },
        taskHandle(record) {
            uni.navigateTo({
                url: '/pages/oiling/oiling-task?id=' + record.id
            });
        },
        // 删除
        handleDel(recordModel) {
            const that = this
            const params = []
            params.push(recordModel.id)
            uni.showModal({
                title: '提示',
                content: '您确认删除吗?',
                success: (res) => {
                    if (res.confirm) {
                        this.$Http.deleteSbOils(params).then(res => {
                            uni.showToast({ title: '删除成功' })
                            that.$refs.myPage.listData = []
                            that.$refs.myPage.loadMore = true
                            that.$refs.myPage.pageNum = 1
                            that.$refs.myPage.initData();
                        })
                    } else if (res.cancel) { }
                }
            });
        },
        loadData(parameter) {
            return this.$Http
                .getSbOilTaskPage({
                    ...parameter,
                    ...this.pageParams,
                    status: this.list[this.current].value
                })
                .then(res => {
                    return res.data;
                })
        },
        // 使其他的列表选择隐藏
        handleClick() {
            uni.navigateTo({
                url: '/pages/oiling/my-oiling-add'
            });
        },
        // 详情
        handleDetail(recordModel) {
					if (this.maskId != 0) return this.maskId = 0
            uni.navigateTo({
                url: '/pages/oiling/my-oiling-detail?id=' + recordModel.id
            });
        }
    }
};
</script>
<style lang="less">
    page {
        background-color: #f4f4f4;
    }
    .main {
        .box {
            border-radius: unit(20, rpx);
            padding-right: 0;
        }
    }
		.edit-box{
			padding: 0 30rpx;
			margin-top: 40rpx;
			.edit{
				padding: 8rpx 40rpx;
				border: 1px solid #ddd;
				border-radius: 20rpx;
				font-size: 26rpx;
				color: #666;
				margin-left: 30rpx;
			}

		}
</style>