feat: 用户体验-骨架屏
This commit is contained in:
eric
@@ -1,4 +1,4 @@
|
||||
import { Button, Cell, Dialog, Toast } from "@antmjs/vantui";
|
||||
import { Button, Cell, Dialog, Skeleton, Toast } from "@antmjs/vantui";
|
||||
import { Input, RichText, View } from "@tarojs/components";
|
||||
import Taro, { getCurrentInstance, useShareTimeline } from "@tarojs/taro";
|
||||
import react, { useEffect, useState } from "react";
|
||||
@@ -161,7 +161,7 @@ const details = () => {
|
||||
let newstatusName = "立即报名";
|
||||
// 开放中
|
||||
if (detailStatus === "1") {
|
||||
if (status === "0" ) {
|
||||
if (status === "0") {
|
||||
newstatusName = "立即报名";
|
||||
}
|
||||
if (status === "4") {
|
||||
@@ -185,70 +185,128 @@ const details = () => {
|
||||
return newstatusName;
|
||||
};
|
||||
|
||||
const canelActive = () => {
|
||||
// 取消报名
|
||||
let peopleArrItem = (dataSource?.peopleArr ?? []).map(
|
||||
(item, index, arr) => {
|
||||
if (item?.openid === openId) {
|
||||
return {
|
||||
...item,
|
||||
status: "4", //报名后取消
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
};
|
||||
}
|
||||
}
|
||||
);
|
||||
updateTableid({
|
||||
tableName: "details",
|
||||
id: id,
|
||||
objData: {
|
||||
// 删除用户报名记录
|
||||
// useridArr: [
|
||||
// ...(dataSource?.useridArr ?? []).filter(
|
||||
// (value, index, arr) => {
|
||||
// return value !== openId;
|
||||
// }
|
||||
// ),
|
||||
// ],
|
||||
// peopleArr: [
|
||||
// ...(dataSource?.peopleArr ?? []).filter(
|
||||
// (item, index, arr) => {
|
||||
// return item?.openid !== openId;
|
||||
// }
|
||||
// ),
|
||||
// ],
|
||||
peopleArr: [...peopleArrItem],
|
||||
},
|
||||
okFun: (res: any) => {
|
||||
Toast.success({
|
||||
message: "取消成功",
|
||||
selector: "#vanToast-demo2",
|
||||
onClose: () => {
|
||||
// 刷新数据
|
||||
getDetail();
|
||||
// 返回首页 [上一页]
|
||||
// Taro.navigateBack({
|
||||
// // url: "/pages/home/index",
|
||||
// delta: 1,
|
||||
// });
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<View className={`detailContent`}>
|
||||
<View>
|
||||
<View>{dataSource?.title}</View>
|
||||
<Image
|
||||
width="100%"
|
||||
height="180px"
|
||||
fit="cover"
|
||||
// src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
src={dataSource?.images?.[0]?.url}
|
||||
/>
|
||||
<View>
|
||||
{Object.keys(dataSource)?.length>0? <View className={`detailContent`}>
|
||||
<View>
|
||||
<Cell
|
||||
icon="clock"
|
||||
title={`开始时间 ${
|
||||
dataSource?.startTime
|
||||
? moment(dataSource?.startTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: ""
|
||||
}`}
|
||||
// isLink
|
||||
// linkType="navigateTo"
|
||||
// url="/pages/dashboard/index"
|
||||
/>
|
||||
<Cell
|
||||
icon="clock"
|
||||
title={`结束时间 ${
|
||||
dataSource?.endTime
|
||||
? moment(dataSource?.endTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: ""
|
||||
}`}
|
||||
// isLink
|
||||
// linkType="navigateTo"
|
||||
// url="/pages/dashboard/index"
|
||||
/>
|
||||
<Cell
|
||||
isLink
|
||||
icon="location"
|
||||
title={`${dataSource?.address}`}
|
||||
linkType="navigateTo"
|
||||
url="/pages/dashboard/index"
|
||||
onClick={() => {
|
||||
Taro.openLocation({
|
||||
latitude: dataSource?.latitude,
|
||||
longitude: dataSource?.longitude,
|
||||
scale: 18,
|
||||
});
|
||||
}}
|
||||
<View>{dataSource?.title}</View>
|
||||
<Image
|
||||
width="100%"
|
||||
height="180px"
|
||||
fit="cover"
|
||||
// src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
src={dataSource?.images?.[0]?.url}
|
||||
/>
|
||||
<View>
|
||||
<Cell
|
||||
icon="clock"
|
||||
title={`开始时间 ${
|
||||
dataSource?.startTime
|
||||
? moment(dataSource?.startTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: ""
|
||||
}`}
|
||||
// isLink
|
||||
// linkType="navigateTo"
|
||||
// url="/pages/dashboard/index"
|
||||
/>
|
||||
<Cell
|
||||
icon="clock"
|
||||
title={`结束时间 ${
|
||||
dataSource?.endTime
|
||||
? moment(dataSource?.endTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: ""
|
||||
}`}
|
||||
// isLink
|
||||
// linkType="navigateTo"
|
||||
// url="/pages/dashboard/index"
|
||||
/>
|
||||
<Cell
|
||||
isLink
|
||||
icon="location"
|
||||
title={`${dataSource?.address}`}
|
||||
linkType="navigateTo"
|
||||
url="/pages/dashboard/index"
|
||||
onClick={() => {
|
||||
Taro.openLocation({
|
||||
latitude: dataSource?.latitude,
|
||||
longitude: dataSource?.longitude,
|
||||
scale: 18,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<Cell
|
||||
icon="friends"
|
||||
// title={`已报名人数 ${dataSource?.useridArr?.length ?? 0}`}
|
||||
title={`已报名人数 ${(dataSource?.peopleArr??[]).filter((item:any)=>{
|
||||
return item?.status ==='2'
|
||||
})?.length>>0}`}
|
||||
<Cell
|
||||
icon="friends"
|
||||
// title={`已报名人数 ${dataSource?.useridArr?.length ?? 0}`}
|
||||
title={`已报名人数 ${
|
||||
(dataSource?.peopleArr ?? []).filter((item: any) => {
|
||||
return item?.status === "2";
|
||||
})?.length >> 0
|
||||
}`}
|
||||
|
||||
// isLink
|
||||
// linkType="navigateTo"
|
||||
// url="/pages/dashboard/index"
|
||||
/>
|
||||
</View>
|
||||
// isLink
|
||||
// linkType="navigateTo"
|
||||
// url="/pages/dashboard/index"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 头像列表 */}
|
||||
{/* <View className="imagesArr">
|
||||
{/* 头像列表 */}
|
||||
{/* <View className="imagesArr">
|
||||
{[1, 2, 3, 4].map((item: any) => {
|
||||
return (
|
||||
<Image
|
||||
@@ -261,207 +319,160 @@ const details = () => {
|
||||
);
|
||||
})}
|
||||
</View> */}
|
||||
</View>
|
||||
{/* 富文本 */}
|
||||
<View onClick={() => {}} className="RichText">
|
||||
{/* <View>{dataSource?.[0]?.actTitle}</View> */}
|
||||
</View>
|
||||
{/* 富文本 */}
|
||||
<View onClick={() => {}} className="RichText">
|
||||
{/* <View>{dataSource?.[0]?.actTitle}</View> */}
|
||||
|
||||
<RichText nodes={dataSource?.richText} />
|
||||
</View>
|
||||
<RichText nodes={dataSource?.richText} />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Dialog
|
||||
id="vanDialog3"
|
||||
title="长按二维码识别"
|
||||
showCancelButton={false}
|
||||
showConfirmButton={false}
|
||||
// confirmButtonOpenType="getUserInfo"
|
||||
show={show}
|
||||
onClose={() => setShow(false)}
|
||||
>
|
||||
<View className="wechatCode">
|
||||
<Image
|
||||
showMenuByLongpress={true}
|
||||
width={300}
|
||||
height={300}
|
||||
src={dataSource?.qrCode}
|
||||
// src='cloud://citynew-0givkbre03955d8c.6369-citynew-0givkbre03955d8c-1253655588/images/touxiang/download-1.jpg'
|
||||
></Image>
|
||||
|
||||
<Button
|
||||
style={{ width: "130px", marginTop: "20px" }}
|
||||
type="primary"
|
||||
round
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setShow(false);
|
||||
}}
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
</View>
|
||||
</Dialog>
|
||||
</View>
|
||||
|
||||
{/* 调试按钮 */}
|
||||
{/* <Cell title="组件调用" onClick={() => setShow(true)} /> */}
|
||||
|
||||
<View
|
||||
className={`detailBtn`}
|
||||
style={{ bottom: `${bottomheight ?? 0}px` }}
|
||||
>
|
||||
{/* style={{width:'375px'}} */}
|
||||
<Button
|
||||
type={disable ? "warning" : "primary"}
|
||||
block
|
||||
// disabled={disable}
|
||||
onClick={() => {
|
||||
if (disable) {
|
||||
setShow(true);
|
||||
return false;
|
||||
}
|
||||
// if (isCheckin) {
|
||||
if (status === "2") {
|
||||
// 取消报名
|
||||
canelActive();
|
||||
return false;
|
||||
}
|
||||
|
||||
// 放鸽子
|
||||
if (status === "4") {
|
||||
Toast.fail({
|
||||
message: "再次报名需审核!",
|
||||
selector: "#vanToast-demo2",
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
// 跳转到目的页面，打开新页面
|
||||
setShow(true);
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
let isin: any = phoneLogin();
|
||||
if (!isin) {
|
||||
//重新登录- 跳转到我的页面
|
||||
Toast.fail({
|
||||
message: "请先登录",
|
||||
selector: "#vanToast-demo2",
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
// 跳转到目的页面，打开新页面
|
||||
Taro.navigateTo({
|
||||
url: "/pages/my/index",
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
console.log("id", id);
|
||||
// 立即报名
|
||||
let postData = {
|
||||
// env: "any",
|
||||
id: id,
|
||||
tableName: "details",
|
||||
objData: {
|
||||
// ..._.cloneDeep(dataSource),
|
||||
useridArr: [
|
||||
..._.cloneDeep(dataSource?.useridArr ?? []),
|
||||
openId,
|
||||
],
|
||||
peopleArr: [
|
||||
..._.cloneDeep(dataSource?.peopleArr ?? []),
|
||||
{
|
||||
openid: openId,
|
||||
status: "1", //待审核
|
||||
},
|
||||
],
|
||||
},
|
||||
okFun: (res: any) => {
|
||||
console.log("res333", res);
|
||||
// 报名成功
|
||||
Toast.success({
|
||||
message: "报名成功,审核中",
|
||||
selector: "#vanToast-demo2",
|
||||
onClose: () => {
|
||||
setShow(true);
|
||||
// 刷新数据
|
||||
getDetail();
|
||||
|
||||
// 返回首页 [上一页]
|
||||
// Taro.navigateBack({
|
||||
// // url: "/pages/home/index",
|
||||
// delta: 1,
|
||||
// });
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
console.log("postData", postData);
|
||||
updateTableid({ ...postData });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* 立即参加 */}
|
||||
{btnContent()}
|
||||
{/* {`立即报名`} */}
|
||||
</Button>
|
||||
|
||||
<Toast id="vanToast-demo2" />
|
||||
</View>
|
||||
</View>
|
||||
:
|
||||
<View>
|
||||
<Dialog
|
||||
id="vanDialog3"
|
||||
title="长按二维码识别"
|
||||
showCancelButton={false}
|
||||
showConfirmButton={false}
|
||||
// confirmButtonOpenType="getUserInfo"
|
||||
show={show}
|
||||
onClose={() => setShow(false)}
|
||||
>
|
||||
<View className="wechatCode">
|
||||
<Image
|
||||
showMenuByLongpress={true}
|
||||
width={300}
|
||||
height={300}
|
||||
src={dataSource?.qrCode}
|
||||
// src='cloud://citynew-0givkbre03955d8c.6369-citynew-0givkbre03955d8c-1253655588/images/touxiang/download-1.jpg'
|
||||
></Image>
|
||||
|
||||
<Button
|
||||
style={{ width: "130px", marginTop: "20px" }}
|
||||
type="primary"
|
||||
round
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setShow(false);
|
||||
}}
|
||||
>
|
||||
关闭
|
||||
</Button>
|
||||
</View>
|
||||
</Dialog>
|
||||
</View>
|
||||
|
||||
{/* 调试按钮 */}
|
||||
{/* <Cell title="组件调用" onClick={() => setShow(true)} /> */}
|
||||
|
||||
<View
|
||||
className={`detailBtn`}
|
||||
style={{ bottom: `${bottomheight ?? 0}px` }}
|
||||
>
|
||||
{/* style={{width:'375px'}} */}
|
||||
<Button
|
||||
type={disable ? "warning" : "primary"}
|
||||
block
|
||||
// disabled={disable}
|
||||
onClick={() => {
|
||||
if (disable) {
|
||||
setShow(true);
|
||||
return false;
|
||||
}
|
||||
// if (isCheckin) {
|
||||
if (status === "2") {
|
||||
// 取消报名
|
||||
let peopleArrItem = (dataSource?.peopleArr ?? []).map(
|
||||
(item, index, arr) => {
|
||||
if (item?.openid === openId) {
|
||||
return {
|
||||
...item,
|
||||
status: "4", //报名后取消
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
};
|
||||
}
|
||||
}
|
||||
);
|
||||
updateTableid({
|
||||
tableName: "details",
|
||||
id: id,
|
||||
objData: {
|
||||
// 删除用户报名记录
|
||||
// useridArr: [
|
||||
// ...(dataSource?.useridArr ?? []).filter(
|
||||
// (value, index, arr) => {
|
||||
// return value !== openId;
|
||||
// }
|
||||
// ),
|
||||
// ],
|
||||
// peopleArr: [
|
||||
// ...(dataSource?.peopleArr ?? []).filter(
|
||||
// (item, index, arr) => {
|
||||
// return item?.openid !== openId;
|
||||
// }
|
||||
// ),
|
||||
// ],
|
||||
peopleArr: [
|
||||
...peopleArrItem
|
||||
],
|
||||
},
|
||||
okFun: (res: any) => {
|
||||
Toast.success({
|
||||
message: "取消成功",
|
||||
selector: "#vanToast-demo2",
|
||||
onClose: () => {
|
||||
// 刷新数据
|
||||
getDetail();
|
||||
// 返回首页 [上一页]
|
||||
// Taro.navigateBack({
|
||||
// // url: "/pages/home/index",
|
||||
// delta: 1,
|
||||
// });
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// 放鸽子
|
||||
if (status === "4") {
|
||||
Toast.fail({
|
||||
message: "再次报名需审核!",
|
||||
selector: "#vanToast-demo2",
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
// 跳转到目的页面，打开新页面
|
||||
setShow(true)
|
||||
},
|
||||
});
|
||||
return false
|
||||
}
|
||||
|
||||
let isin: any = phoneLogin();
|
||||
if (!isin) {
|
||||
//重新登录- 跳转到我的页面
|
||||
Toast.fail({
|
||||
message: "请先登录",
|
||||
selector: "#vanToast-demo2",
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
// 跳转到目的页面，打开新页面
|
||||
Taro.navigateTo({
|
||||
url: "/pages/my/index",
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
console.log("id", id);
|
||||
// 立即报名
|
||||
let postData = {
|
||||
// env: "any",
|
||||
id: id,
|
||||
tableName: "details",
|
||||
objData: {
|
||||
// ..._.cloneDeep(dataSource),
|
||||
useridArr: [
|
||||
..._.cloneDeep(dataSource?.useridArr ?? []),
|
||||
openId,
|
||||
],
|
||||
peopleArr: [
|
||||
..._.cloneDeep(dataSource?.peopleArr ?? []),
|
||||
{
|
||||
openid: openId,
|
||||
status: "1", //待审核
|
||||
},
|
||||
],
|
||||
},
|
||||
okFun: (res: any) => {
|
||||
console.log("res333", res);
|
||||
// 报名成功
|
||||
Toast.success({
|
||||
message: "报名成功,审核中",
|
||||
selector: "#vanToast-demo2",
|
||||
onClose: () => {
|
||||
setShow(true);
|
||||
// 刷新数据
|
||||
getDetail();
|
||||
|
||||
// 返回首页 [上一页]
|
||||
// Taro.navigateBack({
|
||||
// // url: "/pages/home/index",
|
||||
// delta: 1,
|
||||
// });
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
console.log("postData", postData);
|
||||
updateTableid({ ...postData });
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* 立即参加 */}
|
||||
{btnContent()}
|
||||
{/* {`立即报名`} */}
|
||||
</Button>
|
||||
|
||||
<Toast id="vanToast-demo2" />
|
||||
</View>
|
||||
{/* 骨架屏 */}
|
||||
<Skeleton title={true} row={16} />
|
||||
</View>}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
Grid,
|
||||
GridItem,
|
||||
Row,
|
||||
Skeleton,
|
||||
Tab,
|
||||
Tabs,
|
||||
Tag,
|
||||
@@ -487,24 +488,28 @@ const Home = () => {
|
||||
</Tabs> */}
|
||||
|
||||
{/* 截取数组2个活动 */}
|
||||
{details?.length > 0 && (
|
||||
{details?.length > 0 ? (
|
||||
<View>
|
||||
{(details?.reverse()?.splice(0, 2) ?? []).map((item: any, index: any) => {
|
||||
return (
|
||||
<View
|
||||
onClick={() => {
|
||||
console.log("Card");
|
||||
Taro.navigateTo({
|
||||
url: `/pages/activityList/components/details/index?id=${item?._id}`,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{/* 活动卡片 */}
|
||||
<ActiveCard dataSource={item} />
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
{(details?.reverse()?.splice(0, 2) ?? []).map(
|
||||
(item: any, index: any) => {
|
||||
return (
|
||||
<View
|
||||
onClick={() => {
|
||||
console.log("Card");
|
||||
Taro.navigateTo({
|
||||
url: `/pages/activityList/components/details/index?id=${item?._id}`,
|
||||
});
|
||||
}}
|
||||
>
|
||||
{/* 活动卡片 */}
|
||||
<ActiveCard dataSource={item} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<Skeleton title={true} row={4} />
|
||||
)}
|
||||
|
||||
{/* 直播live专区 */}
|
||||
@@ -557,7 +562,6 @@ const Home = () => {
|
||||
})
|
||||
}}>订阅消息</View> */}
|
||||
|
||||
|
||||
<Toast id="vanToast-demo2" />
|
||||
|
||||
<TabbarCom active={0} />
|
||||
|
||||
Reference in New Issue
Block a user