<!-- 售后列表 --> <template> <s-layout title="售后列表"> <!-- tab --> <su-sticky bgColor="#fff"> <su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" ></su-tabs> </su-sticky> <s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据"> </s-empty> <!-- 列表 --> <view v-if="state.pagination.total > 0"> <view class="list-box ss-m-y-20" v-for="order in state.pagination.data" :key="order.id" @tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })" > <view class="order-head ss-flex ss-col-center ss-row-between"> <text class="no">服务单号:{{ order.aftersale_sn }}</text> <text class="state">{{ order.aftersale_status_text }}</text> </view> <s-goods-item :img="order.goods_image" :title="order.goods_title" :skuText="order.goods_sku_text" :price="order.goods_price" :num="order.goods_num" ></s-goods-item> <view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20"> <view class="ss-flex ss-col-center"> <view class="title ss-m-r-20">{{ order.type_text }}</view> <view class="value">{{ order.aftersale_status_desc }}</view> </view> <text class="_icon-forward"></text> </view> <view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20"> <view> <button class="ss-reset-button tool-btn" @tap.stop="onApply(order.id)" v-if="order.btns.includes('cancel')" >取消申请</button > </view> <view> <button class="ss-reset-button tool-btn" @tap.stop="onDelete(order.id)" v-if="order.btns.includes('delete')" >删除</button > </view> </view> </view> </view> <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多', }" @tap="loadmore" /> </s-layout> </template> <script setup> import sheep from '@/sheep'; import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import { computed, reactive } from 'vue'; import _ from 'lodash'; const state = reactive({ currentTab: 0, showApply: false, pagination: { data: [], current_page: 1, total: 1, last_page: 1, }, loadStatus: '', }); const tabMaps = [ { name: '全部', value: 'all', }, { name: '申请中', value: 'nooper', }, { name: '处理中', value: 'ing', }, { name: '已完成', value: 'completed', }, { name: '已拒绝', value: 'refuse', }, ]; // 切换选项卡 function onTabsChange(e) { state.pagination = { data: [], current_page: 1, total: 1, last_page: 1, }; state.currentTab = e.index; getOrderList(); } // 获取售后列表 async function getOrderList(page = 1, list_rows = 5) { state.loadStatus = 'loading'; let res = await sheep.$api.order.aftersale.list({ type: tabMaps[state.currentTab].value, list_rows, page, }); if (res.error === 0) { if (page >= 2) { let orderList = _.concat(state.pagination.data, res.data.data); state.pagination = { ...res.data, data: orderList, }; } else { state.pagination = res.data; } if (state.pagination.current_page < state.pagination.last_page) { state.loadStatus = 'more'; } else { state.loadStatus = 'noMore'; } } } function onApply(orderId) { uni.showModal({ title: '提示', content: '确定要取消此申请吗?', success: async function (res) { if (res.confirm) { const { error } = await sheep.$api.order.aftersale.cancel(orderId); if (error === 0) { getOrderList(); } } }, }); } function onDelete(orderId) { uni.showModal({ title: '提示', content: '确定要删除吗?', success: async function (res) { if (res.confirm) { const { error } = await sheep.$api.order.aftersale.delete(orderId); if (error === 0) { getOrderList(); } } }, }); } onLoad(async (options) => { if (options.type) { state.currentTab = options.type; } getOrderList(); }); // 加载更多 function loadmore() { if (state.loadStatus !== 'noMore') { getOrderList(state.pagination.current_page + 1); } } // 上拉加载更多 onReachBottom(() => { loadmore(); }); </script> <style lang="scss" scoped> .list-box { background-color: #fff; .order-head { padding: 0 25rpx; height: 77rpx; } .apply-box { height: 82rpx; .title { font-size: 24rpx; } .value { font-size: 22rpx; color: $dark-6; } } .tool-btn-box { height: 100rpx; .tool-btn { width: 160rpx; height: 60rpx; background: #f6f6f6; border-radius: 30rpx; font-size: 26rpx; font-weight: 400; } } } </style>