邃芒智像大屏项目
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

436 linhas
9.8 KiB

  1. <template>
  2. <view class="page" id="page">
  3. <!-- tab栏 -->
  4. <view class="tabBox">
  5. <u-tabs
  6. :list="sexList"
  7. lineWidth="50"
  8. lineColor="#ff4f00"
  9. :itemStyle="{ width: '150rpx', height: '90rpx', padding: '0' }"
  10. :activeStyle="{ color: '#ff4f00', fontsize: '30rpx' }"
  11. :inactiveStyle="{ color: '#fff', fontsize: '30rpx' }"
  12. @click="chooseTab"
  13. ></u-tabs>
  14. <view class="moreTabs">
  15. <!-- <view class="moreIcon" @click="showPopup = true"> 更多 </view> -->
  16. <view class="moreIcon" @click="showPopup = true"> 更多 </view>
  17. </view>
  18. </view>
  19. <!-- 更多tab弹出层 -->
  20. <u-popup
  21. closeable="true"
  22. mode="top"
  23. :round="20"
  24. :show="showPopup"
  25. @close="closePopup"
  26. @open="openPopup"
  27. >
  28. <view class="popupBox">
  29. <view class="type">性别</view>
  30. <view class="typeBox">
  31. <view
  32. v-show="item.name"
  33. class="typeBox-item"
  34. :class="item.id == sex ? 'itemActive' : ''"
  35. @click="chooseSex(item)"
  36. v-for="item in sexList2"
  37. :key="item.id"
  38. >{{ item.name }}</view
  39. >
  40. </view>
  41. <view class="type">类型</view>
  42. <view class="typeBox">
  43. <view
  44. v-show="item.name"
  45. class="typeBox-item"
  46. :class="item.id == mouldType ? 'itemActive' : ''"
  47. @click="chooseMouldType(item)"
  48. v-for="item in mouldTypeList"
  49. :key="item.id"
  50. >{{ item.name }}</view
  51. >
  52. </view>
  53. </view>
  54. </u-popup>
  55. <!-- 模版选择 -->
  56. <u-list
  57. class="styleListBox"
  58. @scrolltolower="scrolltolower"
  59. lowerThreshold="100"
  60. >
  61. <u-list-item class="glodYBox">
  62. <u-list-item
  63. v-for="item in styleList"
  64. :key="item.id"
  65. class="styleListBoxItme"
  66. >
  67. <view class="styleInfo" @click="createPhoto(item)">
  68. <image :src="item.coverImg" mode="aspectFit" />
  69. <text class="name">{{ item.title }}</text>
  70. <text class="single">{{ peopleNum(item.mouldType) }}</text>
  71. </view>
  72. </u-list-item>
  73. <view
  74. v-if="styleList.length == 0"
  75. style="width: 100%; text-align: center"
  76. >暂无数据</view
  77. >
  78. </u-list-item>
  79. </u-list>
  80. </view>
  81. </template>
  82. <script setup>
  83. //#region 导入
  84. import { ref, watch, onMounted } from "vue";
  85. import { getListApi } from "../../api/closeStyle";
  86. import { onLoad, onUnload } from "@dcloudio/uni-app";
  87. import { userInfoModules } from "@/store/modules/userInfo";
  88. const userInfoModulesPinia = userInfoModules();
  89. //#endregion -----------------------
  90. //#region tab栏
  91. // 性别
  92. const sex = ref(2);
  93. const sexList = ref([
  94. { name: "女", id: 2 },
  95. { name: "男", id: 1 },
  96. { name: "单人", id: 3 },
  97. { name: "多人", id: 4 },
  98. ]);
  99. const sexList2 = ref([
  100. { name: "女", id: 2 },
  101. { name: "男", id: 1 },
  102. ]);
  103. // 类型
  104. const mouldType = ref("");
  105. const mouldTypeList = ref([
  106. { name: "单人", id: 1 },
  107. { name: "多人", id: 2 },
  108. ]);
  109. // 点击tab
  110. function chooseTab(item) {
  111. if (item.id < 3) {
  112. sex.value = item.id;
  113. mouldType.value = "";
  114. } else if (item.id == 3) {
  115. mouldType.value = 1;
  116. sex.value = "";
  117. } else if (item.id == 4) {
  118. mouldType.value = 2;
  119. sex.value = "";
  120. }
  121. }
  122. // 更多里的tab 性别
  123. function chooseSex(item) {
  124. if (sex.value == item.id) {
  125. if (mouldType.value == "") {
  126. return;
  127. } else {
  128. sex.value = "";
  129. }
  130. } else {
  131. sex.value = item.id;
  132. mouldType.value = "";
  133. }
  134. }
  135. // 更多里的tab 类型
  136. function chooseMouldType(item) {
  137. if (mouldType.value == item.id) {
  138. if (sex.value == "") {
  139. return;
  140. } else {
  141. mouldType.value = "";
  142. }
  143. } else {
  144. mouldType.value = item.id;
  145. sex.value = "";
  146. }
  147. }
  148. //#endregion
  149. //#region 更多tab弹出层
  150. const showPopup = ref(false);
  151. function closePopup() {
  152. showPopup.value = false;
  153. }
  154. function openPopup() {}
  155. function toCreated() {
  156. // uni.navigateTo({ url: "/pages/createing/index" });
  157. }
  158. //#endregion -----------------------
  159. //#region 列表加载
  160. const pageNum = ref(1);
  161. const pageSize = ref(20);
  162. // const sex = ref(2); //1男2女
  163. const styleList = ref([]);
  164. // 得到列表
  165. async function getList() {
  166. try {
  167. uni.showLoading({
  168. title: "加载中...",
  169. mask: true,
  170. });
  171. const res = await getListApi(
  172. pageNum.value,
  173. pageSize.value,
  174. sex.value,
  175. mouldType.value
  176. );
  177. styleList.value = res.data.list;
  178. uni.hideLoading();
  179. } catch (error) {
  180. uni.hideLoading();
  181. uni.showToast({
  182. title: "获取列表失败,请重试",
  183. icon: "none",
  184. });
  185. }
  186. }
  187. // 监听性别tab变化
  188. watch(
  189. () => mouldType.value,
  190. (old) => {
  191. pageNum.value = 1;
  192. pageSize.value = 20;
  193. getList();
  194. }
  195. );
  196. watch(
  197. () => sex.value,
  198. () => {
  199. pageNum.value = 1;
  200. pageSize.value = 20;
  201. getList();
  202. }
  203. );
  204. getList();
  205. // 触底加载更多
  206. const scrolltolower = async () => {
  207. try {
  208. uni.showLoading({
  209. title: "加载中...",
  210. mask: true,
  211. });
  212. pageNum.value += 1;
  213. const res = await getListApi(
  214. pageNum.value,
  215. pageSize.value,
  216. sex.value,
  217. mouldType.value
  218. );
  219. styleList.value.push(...res.data.list);
  220. setTimeout(function () {
  221. uni.hideLoading();
  222. }, 500);
  223. if (res.data.list.length == 0) {
  224. pageNum.value -= 1;
  225. uni.showToast({
  226. title: "已加载全部内容",
  227. icon: "none",
  228. mask: false,
  229. });
  230. }
  231. } catch (error) {
  232. setTimeout(function () {
  233. uni.hideLoading();
  234. }, 500);
  235. uni.showToast({
  236. title: "获取数据失败,请重试",
  237. icon: "none",
  238. });
  239. }
  240. };
  241. // 处理单人双人多人
  242. function peopleNum(num) {
  243. if (num == 1) {
  244. return "单人";
  245. } else if (num == 2) {
  246. return "双人";
  247. } else if (num == 3) {
  248. return "三人";
  249. }
  250. }
  251. //#endregion ---------------------
  252. //#region 点击图片
  253. function createPhoto(item) {
  254. uni.navigateTo({
  255. url: `/pages/createing/index?id=${item.id}`,
  256. });
  257. // if (item.mouldType == 1) {
  258. // } else {
  259. // uni.navigateTo({
  260. // url: `/pages/closeStyle/multiplayer?id=${item.id}`,
  261. // });
  262. // }
  263. }
  264. //#endregion ---------------------
  265. //#region 页面初始化和卸载
  266. const resetTimer = ref(null);
  267. onMounted(() => {
  268. window.document.addEventListener("touchstart", () => {
  269. // 用户点击时,清除之前的定时器
  270. clearTimeout(resetTimer.value);
  271. // 重新设定120秒后触发的定时器
  272. resetTimer.value = setTimeout(() => {
  273. userInfoModulesPinia.clearStorage();
  274. window.webview.raiseEvent("pageRefresh", "test_params");
  275. uni.redirectTo({ url: "/pages/login/index" });
  276. }, 300000);
  277. });
  278. resetTimer.value = setTimeout(() => {
  279. userInfoModulesPinia.clearStorage();
  280. window.webview.raiseEvent("pageRefresh", "test_params");
  281. uni.redirectTo({ url: "/pages/login/index" });
  282. }, 300000);
  283. });
  284. onUnload(() => {
  285. uni.hideLoading();
  286. clearTimeout(resetTimer.value);
  287. });
  288. //#endregion -----------------------
  289. </script>
  290. <style lang="scss" scoped>
  291. // <!-- tab栏 -->
  292. .tabBox {
  293. position: relative;
  294. width: 100vw;
  295. .u-tabs {
  296. :deep(.u-tabs__wrapper__nav__item__text) {
  297. font-size: 30rpx;
  298. }
  299. // width: calc(100% - 100rpx);
  300. width: 100%;
  301. color: #fff !important;
  302. margin-bottom: 30rpx;
  303. // :deep(.u-tabs__wrapper__nav__item-7) {
  304. // color: #00ff33 !important;
  305. // margin-right: 90rpx !important;
  306. // }
  307. }
  308. .moreTabs {
  309. position: absolute;
  310. top: 0;
  311. right: 0;
  312. width: 200rpx;
  313. height: 90rpx;
  314. background: linear-gradient(90deg, transparent 20%, #333 100%);
  315. // background-color: red;
  316. .moreIcon {
  317. margin-left: 50rpx;
  318. margin-top: 15rpx;
  319. width: 130rpx;
  320. height: 60rpx;
  321. border-radius: 40rpx;
  322. background-color: #ff4f00;
  323. text-align: center;
  324. line-height: 60rpx;
  325. }
  326. }
  327. }
  328. // <!-- 更多tab弹出层 -->
  329. .u-popup {
  330. :deep(.u-popup__content__close--top-right) {
  331. top: 35rpx;
  332. right: 35rpx;
  333. }
  334. :deep(.uicon-close) {
  335. font-size: 30rpx !important;
  336. }
  337. }
  338. .popupBox {
  339. padding-bottom: 30rpx;
  340. .type {
  341. padding: 30rpx 30rpx 0 30rpx;
  342. color: #000;
  343. font-weight: 900;
  344. font-size: 32rpx;
  345. }
  346. .typeBox {
  347. padding: 0 0 0 30rpx;
  348. display: flex;
  349. flex-wrap: wrap;
  350. justify-content: flex-start;
  351. color: #1f1212;
  352. font-size: 26rpx;
  353. &-item {
  354. margin-top: 20rpx;
  355. margin-right: 30rpx;
  356. height: 60rpx;
  357. line-height: 60rpx;
  358. text-align: center;
  359. // margin: 0 30rpx;
  360. width: 200rpx;
  361. border: 2rpx solid #ccc;
  362. border-radius: 30rpx;
  363. }
  364. .itemActive {
  365. color: #ff4f00;
  366. border: 2rpx solid #ff4f00;
  367. }
  368. }
  369. }
  370. // <!-- 模版选择 -->
  371. .u-list {
  372. overflow: hidden;
  373. height: calc(100vh - 200rpx) !important;
  374. width: 650rpx;
  375. .glodYBox {
  376. display: flex !important;
  377. flex-direction: row !important;
  378. flex-wrap: wrap !important;
  379. justify-content: space-between !important;
  380. }
  381. .u-list-item {
  382. display: flex !important;
  383. flex-direction: row !important;
  384. flex-wrap: wrap !important;
  385. justify-content: space-between !important;
  386. }
  387. .styleInfo {
  388. position: relative;
  389. display: flex !important;
  390. flex-wrap: wrap !important;
  391. width: 300rpx;
  392. height: 480rpx;
  393. margin-bottom: 50rpx;
  394. border-radius: 24rpx;
  395. overflow: hidden;
  396. image {
  397. width: 300rpx;
  398. height: 400rpx;
  399. }
  400. .name {
  401. background-color: #393b3d;
  402. width: 100%;
  403. height: 80rpx;
  404. text-align: center;
  405. line-height: 80rpx;
  406. font-size: 30rpx;
  407. font-weight: bold;
  408. }
  409. .single {
  410. position: absolute;
  411. top: 11rpx;
  412. right: 13rpx;
  413. width: 72rpx;
  414. height: 41rpx;
  415. text-align: center;
  416. line-height: 41rpx;
  417. background: rgba(0, 0, 0, 0.4);
  418. font-size: 22rpx;
  419. // opacity: 0.4;
  420. border-radius: 12rpx;
  421. }
  422. }
  423. }
  424. </style>