diancan_uni/pages/staff/order/index.vue

<template>
    <!-- pages/staff/order/index.wxml -->
    <!-- index.wxml -->
    <view class="container">
        <view class="bottom-view">
            <view class="order_back" v-for="(order, index) in orderList" :key="order.id">
                <view class="order_content">
                    <view class="order_car">
                        <view class="left_title">姓名</view>
                        <view class="right_car">{{ order.name }}</view>
                    </view>
                    <view class="area_sep" />
                    <view class="order_other">
                        <view class="left_title">支付方式</view>
                        <view class="right_title">{{ order.payname }}</view>
                    </view>
                    <view class="order_other">
                        <view class="left_title">下单时间</view>
                        <view class="right_title">{{ order.pay_time }}</view>
                    </view>
                    <view class="order_other">
                        <view class="left_title">订单号</view>
                        <view class="right_title">{{ order.order_sn }}</view>
                    </view>
                    <view class="area_sep2" />
                    <view class="order_action">
                        <view class="accept_action" @tap="acceptAction" :data-order="order">接单</view>
                    </view>
                </view>
            </view>
        </view>
        <image class="change_goods" v-if="canSendGoods" src="/static/pages/resource/img/get-award.png" @tap="sendGoods" />
        <image class="change_award" v-if="canAward && siteAward" src="/static/pages/resource/img/change-award.png" @tap="changeAward" />
        <image class="add_oil" v-if="canAddGas" src="/static/pages/resource/img/add-gas.png" @tap="addGas" />
        <image class="send_card" v-if="canSendCard" src="/static/pages/resource/img/send-card.png" @tap="sendCard" />
        <image class="creat_order" v-if="canCreatOrder" src="/static/pages/resource/img/creat-order.png" @tap="creatOrder" />
        <image class="bind_card" v-if="canBindCard" src="/static/pages/resource/img/bing-card.png" @tap="bindCard" />

        <van-dialog id="van-dialog" />
        <van-toast id="van-toast" />
    </view>
</template>

<script>
// pages/staff/order/index.js
export default {
    data() {
        return {
            orderList: [
                {
                    name: '张三',
                    payname: '微信',
                    pay_time: '2022-10-10 10:00:00',
                    order_sn: '123321321312'
                }
            ],

            order: {
                id: '',
                name: '',
                payname: '',
                pay_time: '',
                order_sn: ''
            },

            canSendGoods: [],
            canAward: '',
            siteAward: '',
            canAddGas: [],
            canSendCard: '',
            canCreatOrder: '',
            canBindCard: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        acceptAction() {
            console.log('占位：函数 acceptAction 未声明');
        },

        sendGoods() {
            console.log('占位：函数 sendGoods 未声明');
        },

        changeAward() {
            console.log('占位：函数 changeAward 未声明');
        },

        addGas() {
            console.log('占位：函数 addGas 未声明');
        },

        sendCard() {
            console.log('占位：函数 sendCard 未声明');
        },

        creatOrder() {
            console.log('占位：函数 creatOrder 未声明');
        },

        bindCard() {
            console.log('占位：函数 bindCard 未声明');
        }
    }
};
</script>
<style>
/* pages/staff/order/index.wxss */
/**index.wxss**/
.bottom-view {
    background-color: #f7f8fa;
    min-height: 100vh;
    box-sizing: border-box;
}

.order_back {
    width: 100%;
    height: 370rpx;
    background-color: #f7f8fa;
}

.order_content {
    background-color: white;
    margin-left: 32rpx;
    margin-top: 20rpx;
    width: 91.5%;
    height: 370rpx;
}

.order_car {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
}

.left_title {
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #b8bccc;
}

.right_car {
    margin-right: 20rpx;
    font-size: 34rpx;
    color: #292b33;
}

.area_sep {
    margin-left: 30rpx;
    width: 92%;
    height: 2rpx;
    background-color: rgba(207, 211, 230);
}

.area_sep2 {
    margin-left: 30rpx;
    width: 92%;
    height: 2rpx;
    background-color: rgba(207, 211, 230);
    margin-top: 20rpx;
}

.order_other {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
}

.right_title {
    margin-right: 20rpx;
    font-size: 26rpx;
    color: #525666;
}

.order_action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 88rpx;
}

.accept_action {
    width: 120rpx;
    height: 48rpx;
    background-color: #558de0;
    color: white;
    font-size: 26rpx;
    margin-right: 20rpx;
    text-align: center;
    line-height: 48rpx;
    border-radius: 12rpx;
}

.bind_card {
    position: fixed;
    width: 180rpx;
    height: 176rpx;
    bottom: 120rpx;
}

.send_card {
    position: fixed;
    width: 180rpx;
    height: 176rpx;
    bottom: 276rpx;
}

.creat_order {
    position: fixed;
    width: 180rpx;
    height: 176rpx;
    bottom: 432rpx;
}

.add_oil {
    position: fixed;
    width: 180rpx;
    height: 176rpx;
    bottom: 588rpx;
}

.change_award {
    position: fixed;
    width: 180rpx;
    height: 176rpx;
    bottom: 744rpx;
}

.change_goods {
    position: fixed;
    width: 180rpx;
    height: 176rpx;
    bottom: 900rpx;
}
</style>