You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
7.0 KiB
Vue
290 lines
7.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class=" bg-white sticky top-0 z-50">
|
|
<div class="flex items-center">
|
|
<view class="flex-1">
|
|
<wd-search @search="search" @clear="search({ value: '' })" v-model="params.keywords" hide-cancel>
|
|
<template #prefix>
|
|
<wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
|
|
<view class="search-type">
|
|
<text>{{ searchType }}</text>
|
|
<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
|
|
</view>
|
|
</wd-popover>
|
|
</template>
|
|
</wd-search>
|
|
</view>
|
|
<div v-if="getQrItem.img_url" class="mr-2">
|
|
<wd-button @click="showImg = true" size="small">付款码</wd-button>
|
|
</div>
|
|
</div>
|
|
|
|
<wd-tabs @change="(e) => {
|
|
params.status = (e.index == 3 ? 5 : e.index);
|
|
search({ value: params.keywords })
|
|
}" v-model="params.status">
|
|
<wd-tab v-for="item in status" :key="item" :title="`${item.content}`"></wd-tab>
|
|
</wd-tabs>
|
|
</view>
|
|
|
|
<view class="goodsBox p-2">
|
|
<yList ref="yListRef" :apiObj="order.OrderInpersonPayment.orderList"
|
|
:params="{ ...params, status: params.status - 1 }">
|
|
<template #default="{ list }">
|
|
<view>
|
|
<view v-for="item of list" class="goods">
|
|
<wd-card type="rectangle">
|
|
<template #title>
|
|
<view class="title">
|
|
|
|
<view>
|
|
<span class="mr-2">用户：{{ item?.user?.nickname }}</span>
|
|
</view>
|
|
|
|
<view @click="utils.copy(item.order_no, '已复制单号')" class="title-tip">
|
|
<span style="font-size: 24rpx;margin-left: 8px;">单号：{{ item.order_no }}</span>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="bg-gray-50 p-2 mb-2 flex justify-between" style="font-size: 22rpx;">
|
|
<view>原价：<text class="text-red-600">￥ {{ item.total_price || 0 }}</text></view>
|
|
<view>支付金额：<text class="text-red-600">￥ {{ item.pay_price || 0 }}</text></view>
|
|
<view>
|
|
支付方式：
|
|
<text class="text-black">
|
|
{{ [
|
|
"", "支付宝", "微信", "余额", "货到付款", "先就餐后支付"
|
|
][item.pay_type] }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<template #footer>
|
|
<!-- <view class="bg-gray-50 p-2 mb-2.5 flex justify-between" style="font-size: 22rpx;">
|
|
<view>
|
|
售后状态:
|
|
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="flex justify-between items-center">
|
|
<!-- <view class="font-bold">实付: {{ item.pay_price }} 元</view> -->
|
|
<view>
|
|
支付状态：<wd-button :round="false" size="small"
|
|
:type="['warning', 'success', 'warning', 'success', 'info'][item.status]">
|
|
<div>{{ ["未支付", "已支付", "已取消"][item.status] || "已取消" }}</div>
|
|
</wd-button>
|
|
</view>
|
|
<view class="flex-1 flex justify-end">
|
|
|
|
<!-- <view v-if="item.apply_cancel === 1" class="mr-2">
|
|
<wd-button type="error" @click="orderApproval(item)" size="small">退款</wd-button>
|
|
</view>
|
|
|
|
<view class="mr-2">
|
|
<wd-button @click="printing(item)" size="small">小票打印</wd-button>
|
|
</view>
|
|
<view class="mr-2">
|
|
<wd-button @click="orderNotes(item)" size="small">备注</wd-button>
|
|
</view>
|
|
<view v-if="item.status == 1" class="">
|
|
<wd-button @click="shipments(item)" size="small">发货</wd-button>
|
|
</view> -->
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
</wd-card>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</yList>
|
|
</view>
|
|
<wd-toast />
|
|
|
|
<wd-curtain v-if="getQrItem.img_url" :value="showImg" :src="getQrItem.img_url" :to="'/store/inpersonPay/index'"
|
|
@close="showImg = false" close-position="top" width="280"></wd-curtain>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import utils from '@/utils/utils.js';
|
|
import order from '@/api/store/order.js';
|
|
import yList from "/components/yList/index.vue";
|
|
import { useMessage } from '@/uni_modules/wot-design-uni';
|
|
import { useToast } from '@/uni_modules/wot-design-uni';
|
|
import { ref } from 'vue';
|
|
|
|
const message = useMessage('wd-message-box-slot');
|
|
const message1 = useMessage();
|
|
const toast = useToast();
|
|
const showImg = ref(false)
|
|
let afterType = 1
|
|
|
|
|
|
/**
|
|
* 处理订单备注操作
|
|
* @param {Object} row - 行数据
|
|
*/
|
|
const orderNotes = (row, text) => {
|
|
message1
|
|
.prompt({
|
|
title: text,
|
|
inputValue: row.refund_amount
|
|
})
|
|
.then((resp) => {
|
|
order.after_sale.update({
|
|
id: row.id,
|
|
status: 5,
|
|
refund_amount: resp.value,
|
|
refund_type: afterType,
|
|
shop_description: 1,
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
toast.success('操作成功');
|
|
row.status = 5;
|
|
} else {
|
|
toast.error('操作失败');
|
|
}
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const classify_id = ref(0);
|
|
|
|
const params = ref({
|
|
keywords: "",
|
|
status: "",
|
|
type: 'order_no'
|
|
});
|
|
|
|
const yListRef = ref(null);
|
|
|
|
const search = ({ value }) => {
|
|
yListRef.value.upData({
|
|
keywords: value,
|
|
classify_id: classify_id.value,
|
|
status: params.value.status - 1
|
|
});
|
|
};
|
|
|
|
const searchType = ref('订单编号');
|
|
const popover = ref(false);
|
|
|
|
const status = ref([
|
|
{ content: '全部' },
|
|
{ content: '未支付' },
|
|
{ content: '已支付' },
|
|
{ content: '已取消' },
|
|
]);
|
|
|
|
const menu = ref([
|
|
{ content: '订单编号' },
|
|
{ content: '商品名称' },
|
|
{ content: '手机号' },
|
|
{ content: '会员昵称' },
|
|
{ content: '收货人' },
|
|
]);
|
|
|
|
/**
|
|
* 切换搜索类型
|
|
* @param {Object} item - 切换的项
|
|
*/
|
|
function changeSearchType({ item, index }) {
|
|
searchType.value = item.content;
|
|
|
|
if (item.content == '订单编号') {
|
|
params.value.type = "order_no";
|
|
}
|
|
if (item.content == '商品名称') {
|
|
params.value.type = "goods_name";
|
|
}
|
|
if (item.content == '手机号') {
|
|
params.value.type = "receiver_phone";
|
|
}
|
|
if (item.content == '会员昵称') {
|
|
params.value.type = "nickname";
|
|
}
|
|
if (item.content == '收货人') {
|
|
params.value.type = "receiver_name";
|
|
}
|
|
}
|
|
|
|
|
|
const getQrItem = ref({});
|
|
|
|
/**
|
|
* 获取物流公司列表
|
|
*/
|
|
const getGetQrItem = () => {
|
|
order.OrderInpersonPayment.GetQrItem().then(res => {
|
|
getQrItem.value = res.data
|
|
});
|
|
};
|
|
|
|
// 初始化调用获取物流公司列表
|
|
getGetQrItem();
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-type {
|
|
position: relative;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 8px 0 10px;
|
|
font-size: 22rpx;
|
|
color: rgba(0, 0, 0, .45);
|
|
}
|
|
|
|
.search-type::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 1px;
|
|
right: 0;
|
|
top: 5px;
|
|
bottom: 5px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.search-type {
|
|
:deep(.icon-arrow) {
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.goodsBox {
|
|
|
|
.content,
|
|
.title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.title {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-tip {
|
|
color: rgba(0, 0, 0, 0.25);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|