ai-plan.wxml 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <!-- pages/ai-plan/ai-plan.wxml -->
  2. <view class="ai-plan-page" style="--primary-color:#e54d42">
  3. <!-- 顶部导航 -->
  4. <view class="nav-header">
  5. <image src="/images/icons/back.png" class="back-icon" bindtap="navigateBack"></image>
  6. <text class="nav-title">AI红色旅游规划</text>
  7. <image src="/images/icons/red-flag.png" class="flag-icon"></image>
  8. </view>
  9. <!-- 进度指示器 -->
  10. <view class="progress-steps">
  11. <view class="step {{currentStep >= 1 ? 'active' : ''}}">
  12. <view class="step-number">1</view>
  13. <text class="step-text">偏好设置</text>
  14. </view>
  15. <view class="step-line {{currentStep >= 2 ? 'active' : ''}}"></view>
  16. <view class="step {{currentStep >= 2 ? 'active' : ''}}">
  17. <view class="step-number">2</view>
  18. <text class="step-text">行程生成</text>
  19. </view>
  20. <view class="step-line {{currentStep >= 3 ? 'active' : ''}}"></view>
  21. <view class="step {{currentStep >= 3 ? 'active' : ''}}">
  22. <view class="step-number">3</view>
  23. <text class="step-text">完成</text>
  24. </view>
  25. </view>
  26. <!-- 步骤1: 偏好设置 -->
  27. <block wx:if="{{currentStep === 1}}">
  28. <view class="step-container">
  29. <!-- 城市选择 -->
  30. <view class="form-section">
  31. <text class="section-title">选择城市</text>
  32. <view class="interest-tags">
  33. <view
  34. wx:for="{{cityOptions}}"
  35. wx:key="value"
  36. class="tag city-tag {{selectedCities.indexOf(item.value) !== -1 ? 'selected' : ''}}"
  37. bindtap="toggleCity"
  38. data-value="{{item.value}}"
  39. >
  40. {{item.label}}
  41. <image
  42. src="/images/icons/checked-red.png"
  43. class="tag-icon"
  44. wx:if="{{selectedCities.indexOf(item.value) !== -1}}"
  45. ></image>
  46. </view>
  47. </view>
  48. </view>
  49. <!-- 天数选择 -->
  50. <view class="form-section">
  51. <text class="section-title">旅行天数</text>
  52. <view class="day-selector">
  53. <view
  54. wx:for="{{dayOptions}}"
  55. wx:key="value"
  56. class="day-option {{selectedDays === item.value ? 'selected' : ''}}"
  57. bindtap="selectDays"
  58. data-value="{{item.value}}"
  59. >
  60. {{item.label}}
  61. </view>
  62. </view>
  63. </view>
  64. <!-- 兴趣偏好 -->
  65. <view class="form-section">
  66. <text class="section-title">兴趣偏好</text>
  67. <view class="interest-tags">
  68. <view
  69. wx:for="{{interestOptions}}"
  70. wx:key="value"
  71. class="tag interest-tag {{selectedInterests.indexOf(item.value) !== -1 ? 'selected' : ''}}"
  72. bindtap="toggleInterest"
  73. data-value="{{item.value}}"
  74. >
  75. {{item.label}}
  76. <image
  77. src="/images/icons/red-check.png"
  78. class="tag-icon"
  79. wx:if="{{selectedInterests.indexOf(item.value) !== -1}}"
  80. ></image>
  81. </view>
  82. </view>
  83. </view>
  84. <!-- 出行方式 -->
  85. <view class="form-section">
  86. <text class="section-title">出行方式</text>
  87. <view class="transport-options">
  88. <view
  89. wx:for="{{transportOptions}}"
  90. wx:key="value"
  91. class="transport-option {{selectedTransport === item.value ? 'selected' : ''}}"
  92. bindtap="selectTransport"
  93. data-value="{{item.value}}"
  94. >
  95. <image src="{{item.icon}}" class="transport-icon"></image>
  96. <text>{{item.label}}</text>
  97. </view>
  98. </view>
  99. </view>
  100. <!-- 特殊需求 -->
  101. <view class="form-section">
  102. <text class="section-title">特殊需求</text>
  103. <textarea
  104. class="custom-input"
  105. placeholder="如:需要轮椅通道、希望包含党史讲解等"
  106. value="{{customRequirements}}"
  107. bindinput="updateCustomRequirements"
  108. ></textarea>
  109. </view>
  110. <button class="next-btn" bindtap="goToNextStep">下一步</button>
  111. </view>
  112. </block>
  113. <!-- 步骤2: 行程生成 -->
  114. <block wx:if="{{currentStep === 2}}">
  115. <view class="step-container">
  116. <!-- 加载状态 -->
  117. <view wx:if="{{!planGenerated || isLoading}}" class="generating-container">
  118. <image src="/images/loading.gif" class="loading-gif" mode="aspectFit"></image>
  119. <text class="generating-text">AI正在规划红色路线...</text>
  120. </view>
  121. <!-- 行程结果 -->
  122. <view wx:else class="plan-result">
  123. <!-- 行程标题 -->
  124. <view class="plan-header">
  125. <text class="plan-title">{{planData.title}}</text>
  126. <text class="plan-desc">{{planData.description}}</text>
  127. </view>
  128. <!-- 统计信息面板(新增) -->
  129. <view class="stats-panel">
  130. <view class="stat-item">
  131. <text class="stat-value">{{planData.statistics.red_attractions_count}}</text>
  132. <text class="stat-label">红色景点</text>
  133. </view>
  134. <view class="stat-item">
  135. <text class="stat-value">{{planData.statistics.total_attractions}}</text>
  136. <text class="stat-label">总景点数</text>
  137. </view>
  138. <view class="stat-item">
  139. <text class="stat-value">{{planData.statistics.educational_points_count}}</text>
  140. <text class="stat-label">教育要点</text>
  141. </view>
  142. </view>
  143. <!-- 每日行程 -->
  144. <scroll-view scroll-y class="day-list">
  145. <view wx:for="{{planData.days}}" wx:key="day" class="day-item">
  146. <!-- 天数和主题 -->
  147. <view class="day-header">
  148. <text class="day-title">第{{item.day}}天: {{item.theme}}</text>
  149. </view>
  150. <!-- 教育要点展示(新增) -->
  151. <view class="education-points">
  152. <view class="section-title">
  153. <image src="/images/icons/edu-point.png"></image>
  154. <text>今日教育要点</text>
  155. </view>
  156. <view wx:for="{{item.educational_points}}" wx:key="name" class="point-item">
  157. <text class="point-name">{{item.name}}</text>
  158. <text class="point-desc">{{item.description}}</text>
  159. </view>
  160. </view>
  161. <!-- 景点卡片列表(替换原有attractions-list) -->
  162. <view class="attractions-list">
  163. <view class="attraction-card" wx:for="{{item.attractions}}" wx:key="id">
  164. <image src="{{item.image}}" class="card-image"></image>
  165. <view class="card-content">
  166. <view class="card-header">
  167. <text class="card-title">{{item.name}}</text>
  168. <text class="card-tag {{item.is_red_tourism?'red':'blue'}}">
  169. {{item.is_red_tourism?'红色景点':'常规景点'}}
  170. </text>
  171. </view>
  172. <text class="card-desc">{{item.description}}</text>
  173. <view class="card-meta">
  174. <text>教育价值: {{item.educational_value}}</text>
  175. <text>开放时间: {{item.open_hours}}</text>
  176. </view>
  177. </view>
  178. </view>
  179. </view>
  180. <!-- 交通信息 -->
  181. <view class="transport-info">
  182. <image src="/images/icons/transport.png"></image>
  183. <text>交通方式: {{item.transport}}</text>
  184. </view>
  185. </view>
  186. </scroll-view>
  187. <!-- 操作按钮 -->
  188. <view class="action-buttons">
  189. <button bindtap="savePlan">保存行程</button>
  190. <button bindtap="regeneratePlan">重新生成</button>
  191. </view>
  192. </view>
  193. </view>
  194. </block>
  195. <!-- 景点详情弹窗 -->
  196. <view
  197. class="attraction-detail-modal"
  198. wx:if="{{showAttractionDetail}}"
  199. catchtap="closeAttractionDetail"
  200. >
  201. <view class="detail-content" catchtap="stopPropagation">
  202. <!-- 顶部图片和标题 -->
  203. <view class="detail-header">
  204. <image src="{{currentAttraction.image}}" class="detail-image" mode="aspectFill"></image>
  205. <view class="detail-title-wrap">
  206. <text class="detail-title">{{currentAttraction.name}}</text>
  207. <view class="detail-subtitle">
  208. <image src="/images/icons/location-small.png" class="detail-icon"></image>
  209. <text>{{currentAttraction.address}}</text>
  210. </view>
  211. </view>
  212. <image
  213. src="/images/icons/close-white.png"
  214. class="close-icon"
  215. bindtap="closeAttractionDetail"
  216. ></image>
  217. </view>
  218. <!-- 详情内容 -->
  219. <scroll-view scroll-y class="detail-body">
  220. <!-- 基础信息 -->
  221. <view class="detail-section">
  222. <view class="section-header">
  223. <image src="/images/icons/info-icon.png" class="section-icon"></image>
  224. <text class="section-title">景点介绍</text>
  225. </view>
  226. <text class="section-text">{{currentAttraction.description}}</text>
  227. </view>
  228. <!-- 历史背景 -->
  229. <view class="detail-section" wx:if="{{currentAttraction.history}}">
  230. <view class="section-header">
  231. <image src="/images/icons/history-icon.png" class="section-icon"></image>
  232. <text class="section-title">历史背景</text>
  233. </view>
  234. <text class="section-text">{{currentAttraction.history}}</text>
  235. </view>
  236. <!-- 实用信息 -->
  237. <view class="practical-info">
  238. <view class="info-row">
  239. <view class="info-item">
  240. <image src="/images/icons/time-icon.png" class="info-icon"></image>
  241. <text>开放时间: {{currentAttraction.open_hours || '暂无信息'}}</text>
  242. </view>
  243. <view class="info-item">
  244. <image src="/images/icons/ticket-icon.png" class="info-icon"></image>
  245. <text>门票: {{currentAttraction.ticket_price || '免费'}}</text>
  246. </view>
  247. </view>
  248. <view class="info-row">
  249. <view class="info-item">
  250. <image src="/images/icons/edu-value-icon.png" class="info-icon"></image>
  251. <text>教育价值: {{currentAttraction.educational_value || '高'}}</text>
  252. </view>
  253. <view class="info-item">
  254. <image src="/images/icons/time-cost-icon.png" class="info-icon"></image>
  255. <text>建议时长: {{currentAttraction.visit_time || '1-2小时'}}</text>
  256. </view>
  257. </view>
  258. </view>
  259. <!-- 参观建议 -->
  260. <view class="detail-section">
  261. <view class="section-header">
  262. <image src="/images/icons/suggestion-icon.png" class="section-icon"></image>
  263. <text class="section-title">参观建议</text>
  264. </view>
  265. <text class="section-text">{{currentAttraction.recommendation || '暂无特别建议'}}</text>
  266. </view>
  267. <!-- 参观礼仪 -->
  268. <view class="detail-section" wx:if="{{currentAttraction.is_red_tourism}}">
  269. <view class="section-header">
  270. <image src="/images/icons/etiquette-icon.png" class="section-icon"></image>
  271. <text class="section-title">参观礼仪</text>
  272. </view>
  273. <view class="etiquette-list">
  274. <view class="etiquette-item">
  275. <image src="/images/icons/check-circle.png" class="etiquette-icon"></image>
  276. <text>请保持庄严肃穆</text>
  277. </view>
  278. <view class="etiquette-item">
  279. <image src="/images/icons/check-circle.png" class="etiquette-icon"></image>
  280. <text>勿大声喧哗</text>
  281. </view>
  282. <view class="etiquette-item" wx:if="{{currentAttraction.tags && currentAttraction.tags.includes('memorial')}}">
  283. <image src="/images/icons/check-circle.png" class="etiquette-icon"></image>
  284. <text>纪念馆内请勿拍照</text>
  285. </view>
  286. </view>
  287. </view>
  288. </scroll-view>
  289. <!-- 底部操作 -->
  290. <view class="detail-footer">
  291. <button class="nav-btn" bindtap="navigateToAttraction">导航前往</button>
  292. </view>
  293. </view>
  294. </view>
  295. </view>