260 lines
10 KiB
JavaScript
260 lines
10 KiB
JavaScript
"use client";
|
||
import React, { useState } from "react";
|
||
import { Image, InfiniteScroll, List, Toast, Modal } from "antd-mobile";
|
||
import Empty from "@/components/Empty";
|
||
import requireAPI from "@/utils/requireAPI";
|
||
import { useRouter } from "next/navigation";
|
||
import clipboard from "copy-to-clipboard";
|
||
export default function HaveNotAddWechat({ zid, currentIndex }) {
|
||
const [offset, setOffset] = useState(0);
|
||
const [more, setMore] = useState(1);
|
||
const [data, setData] = useState([]);
|
||
const router = useRouter();
|
||
const getData = async (refresh) => {
|
||
if (zid === undefined || !more || currentIndex != 0) return;
|
||
try {
|
||
const body = {
|
||
tab: 1,
|
||
offset: refresh ? 0 : offset, //如果是下拉刷新则更新最新数据
|
||
limit: 20,
|
||
};
|
||
const _data = await requireAPI("POST", "/api/vas/get_add_wechat_list", {
|
||
body,
|
||
});
|
||
if (_data.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: _data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
setData((old) => [...old, ..._data.data.list]);
|
||
setOffset(_data.data.offset);
|
||
setMore(_data.data.more);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
const handleConfirm = async (item, modal) => {
|
||
try {
|
||
const _data = await requireAPI("POST", "/api/vas/confirm_add_wechat", {
|
||
body: { order_id: item.order_id },
|
||
});
|
||
if (_data.ret === -1) {
|
||
Toast.show({
|
||
icon: "fail",
|
||
content: _data.msg,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
modal.close();
|
||
router.refresh();
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
//保存内容到剪贴板
|
||
const copy = (_data) => {
|
||
// console.log("_data", _data);
|
||
clipboard(_data);
|
||
Toast.show({
|
||
icon: "success",
|
||
content: "已复制到剪贴板",
|
||
position: "top",
|
||
});
|
||
};
|
||
//单个成员组件
|
||
const RenderItem = ({ item }) => {
|
||
return (
|
||
<div>
|
||
<div className="flex items-center">
|
||
<Image
|
||
src={item?.account?.avatar?.images[0]?.urls[0]}
|
||
width={48}
|
||
height={48}
|
||
className="rounded-full"
|
||
placeholder=""
|
||
/>
|
||
<div className="ml-2 justify-around flex-1">
|
||
<div>
|
||
<div className="flex">
|
||
<p className="text-base text-white font-medium whitespace-nowrap overflow-hidden max-w-[70px] truncate">
|
||
{item?.account?.name}
|
||
</p>
|
||
<div className="ml-2 flex items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full">
|
||
<Image
|
||
src={
|
||
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
|
||
"/icons/info/ID.png"
|
||
}
|
||
width={14}
|
||
height={14}
|
||
className="w-4 h-full mr-1"
|
||
/>
|
||
<span className="text-white text-xs font-medium ml-0.5">
|
||
{item?.account?.user_id}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-[#FFFFFF80]">
|
||
请于72小时内添加对方微信
|
||
</p>
|
||
<p className="text-xs text-[#FFFFFF80]">
|
||
付款时间:{new Date(item?.ct * 1000).toLocaleString()}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="ml-2 justify-around items-center">
|
||
{item.order_status === 2 ? (
|
||
<span className="text-xs text-[#FFFFFF80] whitespace-nowrap">
|
||
等待用户填写微信
|
||
</span>
|
||
) : (
|
||
<div
|
||
onClick={() => {
|
||
// setCurrentOrder(item);
|
||
// setIsConfirmModalVisible(!isConfirmModalVisible);
|
||
const modal = Modal.show({
|
||
closeOnMaskClick: true,
|
||
bodyStyle: {
|
||
background: "none",
|
||
},
|
||
content: (
|
||
<div className="flex-1 justify-center items-center ">
|
||
<div
|
||
activeOpacity={1}
|
||
className="p-4 rounded-2xl bg-[#1E1C29] flex-col items-center justify-center"
|
||
>
|
||
{item.consumer_wechat ? (
|
||
<div className="flex flex-col w-full">
|
||
<div className="flex flex-row items-center justify-center">
|
||
<Image
|
||
className="rounded-full"
|
||
width={36}
|
||
height={36}
|
||
src={
|
||
item?.account?.avatar?.images[0]?.urls[0]
|
||
}
|
||
fit="cover"
|
||
/>
|
||
<span className="text-white text-lg ml-2 font-medium">
|
||
{item?.account?.name}
|
||
</span>
|
||
</div>
|
||
<span className="mt-2 text-white text-base font-medium">
|
||
Ta的微信号：
|
||
</span>
|
||
<div className="mt-1 flex flex-row bg-[#FFFFFF1A] px-4 py-2 rounded-lg justify-between">
|
||
<span className="text-white text-base font-medium">
|
||
{item?.consumer_wechat}
|
||
</span>
|
||
<div
|
||
onClick={() => copy(item?.consumer_wechat)}
|
||
className="flex"
|
||
>
|
||
<Image
|
||
width={20}
|
||
height={20}
|
||
fit="cover"
|
||
src={
|
||
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
|
||
"/icons/copy.png"
|
||
}
|
||
/>
|
||
<span className="text-white text-base font-medium">
|
||
复制
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<span className="mt-2 text-white text-base font-medium">
|
||
添加时请备注：
|
||
</span>
|
||
<div className="mt-1 flex flex-row bg-[#FFFFFF1A] mb-4 px-4 py-2 rounded-lg justify-between">
|
||
<span className="text-white text-base font-medium">
|
||
{item?.consumer_note}
|
||
</span>
|
||
<div
|
||
onClick={() => copy(item?.consumer_note)}
|
||
className="flex"
|
||
>
|
||
<Image
|
||
width={20}
|
||
height={20}
|
||
fit="cover"
|
||
src={
|
||
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
|
||
"/icons/copy.png"
|
||
}
|
||
/>
|
||
<span className="text-white text-base font-medium">
|
||
复制
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col">
|
||
<div className="flex flex-row items-center justify-center">
|
||
<Image
|
||
width={36}
|
||
height={36}
|
||
className="rounded-full"
|
||
src={item.account?.avatar?.images[0]?.urls[0]}
|
||
fit="cover"
|
||
/>
|
||
<span className="text-white text-lg ml-2 font-medium">
|
||
{item.account?.name}
|
||
</span>
|
||
</div>
|
||
<p className="text-white text-base text-center my-2 font-medium">
|
||
请确认对方已主动添加您的微信，并您已经通过好友申请。
|
||
</p>
|
||
</div>
|
||
)}
|
||
<div
|
||
onClick={() => handleConfirm(item, modal)}
|
||
className="flex justify-center"
|
||
>
|
||
<span className="py-2 px-4 text-sm font-medium text-center bg-[#FF669E] rounded-full">
|
||
我已完成添加
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
),
|
||
});
|
||
}}
|
||
className="text-[14px] font-medium px-4 py-2 bg-[#FF669E] rounded-full whitespace-nowrap"
|
||
>
|
||
添加微信
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="flex-1">
|
||
{data.length == 0 && (
|
||
<div className="mt-32">
|
||
<Empty type="nodata" />
|
||
</div>
|
||
)}
|
||
<List style={{ "--padding-left": 0 }}>
|
||
{data.map((item, index) => (
|
||
<List.Item key={index}>
|
||
<RenderItem item={item} />
|
||
</List.Item>
|
||
))}
|
||
</List>
|
||
<InfiniteScroll loadMore={getData} hasMore={more}>
|
||
{null}
|
||
</InfiniteScroll>
|
||
</div>
|
||
);
|
||
}
|