init project

miniprogram/pages/main/travel/index.json

@@ -0,0 +1,9 @@
+{
+	"component": true,
+	"usingComponents": {
+		"t-cell": "tdesign-miniprogram/cell/cell",
+		"t-navbar": "tdesign-miniprogram/navbar/navbar",
+		"t-collapse": "tdesign-miniprogram/collapse/collapse",
+		"t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel"
+    }
+}

miniprogram/pages/main/travel/index.less

@@ -0,0 +1,25 @@
+/* pages/main/travel/travel.wxss */
+
+.travel {
+
+	.collapse {
+
+		.panel {
+
+			.images {
+				column-gap: .25rem;
+				column-count: 3;
+				padding-bottom: 2rem;
+
+				.image {
+					width: 100%;
+					display: block;
+					overflow: hidden;
+					background: #FFF;
+					break-inside: avoid;
+					margin-bottom: .25rem;
+				}
+			}
+		}
+	}
+}

miniprogram/pages/main/travel/index.ts

@@ -0,0 +1,107 @@
+// pages/main/travel/travel.ts
+
+import config from "../../../config/index";
+
+export type Luggage = {
+	gao: LuggageItem[];
+	yu: LuggageItem[];
+}
+
+export type LuggageItem = {
+	name: string;
+	isTaken: boolean;
+}
+
+type Guide = {
+	title: string;
+	images: string[];
+}
+
+interface ITravelData {
+	luggage?: Luggage;
+	guides: Guide[];
+	guidesDB: Guide[];
+	activeCollapse?: number;
+}
+
+Page({
+	data: <ITravelData>{
+		luggage: undefined,
+		guides: [],
+		guidesDB: [],
+		activeCollapse: undefined
+	},
+	onLoad() {
+		wx.request({
+			url: `${config.url}/journal/travel`,
+			method: "GET",
+			header: {
+				Key: wx.getStorageSync("key")
+			},
+			success: async (resp: any) => {
+				this.setData({
+					luggage: resp.data.data.luggage,
+					guides: resp.data.data.guides.map((item: any) => {
+						return {
+							title: item.title,
+							images: [] // 留空分批加载
+						}
+					}),
+					guidesDB: resp.data.data.guides
+				})
+			}
+		});
+	},
+	onShow() {
+		wx.request({
+			url: `${config.url}/journal/travel`,
+			method: "GET",
+			header: {
+				Key: wx.getStorageSync("key")
+			},
+			success: async (resp: any) => {
+				this.setData({
+					luggage: resp.data.data.luggage
+				});
+			}
+		});
+	},
+	toLuggageList(e: WechatMiniprogram.BaseEvent) {
+		const name = e.target.dataset.name;
+		wx.setStorageSync("luggage", {
+			name,
+			luggage: this.data.luggage
+		});
+		wx.navigateTo({
+			"url": "/pages/main/travel/luggage/index"
+		})
+	},
+	onCollapseChange(e: any) {
+		const index = e.detail.value;
+		if (this.data.guides[index].images.length === 0) {
+			this.data.guides[index].images = this.data.guidesDB[index].images.map((item: any) => {
+				return `${config.url}/attachment/read/${item}`;
+			});
+			this.setData({
+				guides: this.data.guides
+			})
+		}
+		this.setData({
+			activeCollapse: index
+		})
+	},
+	preview(e: WechatMiniprogram.BaseEvent) {
+		const index = e.target.dataset.index;
+		const imageIndex = e.target.dataset.imageIndex;
+		const images = this.data.guides[index].images;
+		wx.previewMedia({
+			current: imageIndex,
+			sources: images.map((image: any) => {
+				return {
+					url: image,
+					type: "image"
+				}
+			})
+		})
+	},
+});

miniprogram/pages/main/travel/index.wxml

@@ -0,0 +1,30 @@
+<!--pages/main/travel/travel.wxml-->
+<view class="custom-navbar">
+	<t-navbar title="北海之旅" />
+</view>
+<view class="travel">
+	<t-cell title="小糕的旅行装备" arrow bindtap="toLuggageList" data-name="gao"></t-cell>
+	<t-cell title="夜雨的旅行装备" arrow bindtap="toLuggageList" data-name="yu"></t-cell>
+	<t-collapse class="collapse" bind:change="onCollapseChange" expandMutex expandIcon>
+		<t-collapse-panel
+			class="panel"
+			wx:for="{{guides}}"
+			header="{{item.title}}"
+			value="{{index}}"
+			wx:key="index"
+		>
+			<view wx:if="{{item.images}}" class="images">
+				<block wx:for="{{item.images}}" wx:for-item="image" wx:for-index="imageIndex" wx:key="imageIndex">
+					<image
+						class="image"
+						src="{{image}}"
+						mode="widthFix"
+						bindtap="preview"
+						data-index="{{index}}"
+						data-image-index="{{imageIndex}}"
+					></image>
+				</block>
+			</view>
+		</t-collapse-panel>
+	</t-collapse>
+</view>

miniprogram/pages/main/travel/luggage/index.json

@@ -0,0 +1,10 @@
+{
+	"usingComponents": {
+		"t-icon": "tdesign-miniprogram/icon/icon",
+		"t-input": "tdesign-miniprogram/input/input",
+		"t-navbar": "tdesign-miniprogram/navbar/navbar",
+		"t-button": "tdesign-miniprogram/button/button",
+		"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
+		"t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
+	}
+}

miniprogram/pages/main/travel/luggage/index.less

@@ -0,0 +1,88 @@
+.luggage {
+
+	.tips {
+		color: #777;
+		margin: .5rem 0;
+		font-size: 12px;
+		text-align: center;
+	}
+
+	.items {
+		gap: 8px;
+		width: calc(100% - 64rpx);
+		margin: 12rpx auto;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+
+		.item {
+			--td-checkbox-vertical-padding: 12rpx 24rpx;
+
+			flex: 1;
+			margin: 0;
+			border: 3rpx solid #CCC;
+			position: relative;
+			overflow: hidden;
+			box-sizing: border-box;
+			word-break: break-all;
+			border-radius: 12rpx;
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&.active {
+				border-color: var(--td-brand-color, #0052d9);
+
+				&::after {
+					content: "";
+					top: 0;
+					left: 0;
+					width: 0;
+					height: 0;
+					display: block;
+					position: absolute;
+					border-width: 24px 24px 24px 0;
+					border-style: solid;
+					border-color: var(--td-brand-color);
+					border-bottom-color: transparent;
+					border-right-color: transparent;
+				}
+			}
+
+			.icon {
+				top: 1px;
+				left: 1px;
+				color: var(--td-bg-color-container, #fff);
+				z-index: 1;
+				position: absolute;
+				font-size: 12px;
+			}
+
+			.checkbox {
+				height: calc(100% - 24rpx);
+			}
+		}
+	}
+}
+
+.add-container {
+	left: 0;
+	right: 0;
+	color: #333;
+	bottom: 0;
+	display: flex;
+	padding: 20rpx;
+	position: fixed;
+	border-top: 1px solid rgba(0, 0, 0, .1);
+	background: rgba(240, 240, 240, .8);
+	box-sizing: border-box;
+	align-items: center;
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	backdrop-filter: blur(10px);
+
+	.input {
+		--td-input-vertical-padding: 8rpx;
+		margin-right: .5rem;
+		border-radius: 5px;
+	}
+}

miniprogram/pages/main/travel/luggage/index.ts

@@ -0,0 +1,86 @@
+// pages/main/travel/luggage/index.ts
+
+import { LuggageItem } from "..";
+import config from "../../../../config/index"
+
+interface ILuggageData {
+	name: string;
+	value: LuggageItem[];
+	keyboardHeight: number;
+	addValue: string;
+}
+
+Page({
+	data: <ILuggageData>{
+		name: "",
+		value: [],
+		keyboardHeight: 0,
+		addValue: ""
+	},
+	onLoad() {
+		wx.onKeyboardHeightChange(res => {
+			this.setData({
+				keyboardHeight: res.height
+			})
+		})
+	},
+	onShow() {
+		const store = wx.getStorageSync("luggage");
+		const value = store.luggage[store.name];
+		this.setData({
+			value,
+			name: store.name === "gao" ? "小糕" : "夜雨"
+		});
+	},
+	doBack() {
+		const store = wx.getStorageSync("luggage");
+		store.luggage[store.name] = this.data.value;
+		wx.request({
+			url: `${config.url}/journal/travel/luggage/update`,
+			method: "POST",
+			header: {
+				Key: wx.getStorageSync("key")
+			},
+			data: store.luggage,
+			success: () => {
+				wx.navigateBack();
+			}
+		});
+	},
+	onTapItem(e: WechatMiniprogram.BaseEvent) {
+		const index = e.currentTarget.dataset.index;
+		this.data.value[index].isTaken = !this.data.value[index].isTaken;
+		this.setData({ value: this.data.value });
+	},
+	showMenu(e: WechatMiniprogram.BaseEvent) {
+		const index = e.currentTarget.dataset.index;
+		wx.showActionSheet({
+			itemList: ["删除"],
+			itemColor: "red",
+			success: () => {
+				this.data.value.splice(index, 1);
+				this.setData({ value: this.data.value })
+			}
+		});
+	},
+	onInputFocus() {
+		this.setData({
+			keyboardHeight: this.data.keyboardHeight
+		})
+	},
+	onInputBlur() {
+		this.setData({
+			keyboardHeight: 0
+		})
+	},
+	add() {
+		this.data.value.push({
+			name: this.data.addValue,
+			isTaken: false
+		})
+		this.setData({
+			value: this.data.value,
+			addValue: ""
+		})
+	}
+})

miniprogram/pages/main/travel/luggage/index.wxml

@@ -0,0 +1,39 @@
+<!--pages/main/travel/luggage/index.wxml-->
+<wxs module="_"> module.exports.contain = function(arr, key) { return arr.indexOf(key) > -1 } </wxs>
+
+<view class="custom-navbar">
+	<t-navbar title="{{name}}的旅行装备" bind:go-back="doBack" delta="0" left-arrow />
+</view>
+<view class="luggage">
+	<view class="tips">tips: 勾选表示已携带，返回自动保存</view>
+	<t-checkbox-group class="items">
+		<view
+			class="item {{item.isTaken ? 'active' : ''}}"
+			wx:for="{{value}}"
+			wx:key="index"
+			data-index="{{index}}"
+			bindtap="onTapItem"
+			bindlongpress="showMenu"
+		>
+			<t-icon wx:if="{{item.isTaken}}" name="check" class="icon" ariaHidden="{{true}}" />
+			<t-checkbox
+				class="checkbox"
+				value="{{item.isTaken}}"
+				label="{{item.name}}"
+				icon="none"
+				borderless
+			/>
+		</view>
+	</t-checkbox-group>
+</view>
+<view class="add-container" style="transform: translateY(-{{keyboardHeight}}px)">
+	<t-input
+		class="input"
+		placeholder="请输入新的物品"
+		cursor-spacing="20"
+		adjust-position="{{false}}"
+		model:value="{{addValue}}"
+		borderless
+	/>
+	<t-button size="small" theme="primary" bindtap="add" disabled="{{!addValue}}">添加</t-button>
+</view>