├── Vue3-H5 ├── src │ ├── service │ │ ├── modules │ │ │ ├── favor.js │ │ │ ├── order.js │ │ │ ├── city.js │ │ │ ├── detail.js │ │ │ └── home.js │ │ ├── request │ │ │ ├── config.js │ │ │ └── index.js │ │ └── index.js │ ├── style.css │ ├── assets │ │ ├── img │ │ │ ├── sprite.png │ │ │ ├── favor │ │ │ │ ├── favor.png │ │ │ │ └── empty_favorite.44731802.png │ │ │ ├── home │ │ │ │ ├── 1008641.png │ │ │ │ ├── banner.webp │ │ │ │ ├── header_bg.png │ │ │ │ ├── loading-bg.png │ │ │ │ ├── location.png │ │ │ │ ├── home-sprite.png │ │ │ │ ├── icon-right-menu.png │ │ │ │ ├── icon_location.png │ │ │ │ └── full-screen-loading.gif │ │ │ ├── order │ │ │ │ ├── icon-time.png │ │ │ │ ├── icon-order.png │ │ │ │ └── icon_right_orderlist.png │ │ │ ├── tabbar │ │ │ │ ├── tab_home.png │ │ │ │ ├── tab_favor.png │ │ │ │ ├── tab_order.png │ │ │ │ ├── tab_message.png │ │ │ │ ├── tab_home_active.png │ │ │ │ ├── tab_favor_active.png │ │ │ │ └── tab_order_active.png │ │ │ ├── detail │ │ │ │ ├── icon_chat.png │ │ │ │ ├── icon_check.png │ │ │ │ ├── icon_order.png │ │ │ │ └── XiaoYu-image.png │ │ │ ├── common │ │ │ │ └── icon_nav_back.png │ │ │ ├── message │ │ │ │ └── icon_message.png │ │ │ └── search │ │ │ │ ├── tj-mob-ui_unit-item_collected-new.png │ │ │ │ └── tj-mob-ui_unit-item_comment-new.png │ │ ├── css │ │ │ ├── reset.css │ │ │ └── common.css │ │ └── data │ │ │ └── tabBarData.js │ ├── views │ │ ├── order │ │ │ └── order.vue │ │ ├── message │ │ │ └── message.vue │ │ ├── details │ │ │ ├── cpns │ │ │ │ ├── detail-action-bar.vue │ │ │ │ ├── detail_08-intro.vue │ │ │ │ ├── detail_07-map.vue │ │ │ │ ├── detail_06-notice.vue │ │ │ │ ├── detail_02-infos.vue │ │ │ │ ├── detail_03-facility.vue │ │ │ │ ├── detail_01-swipe.vue │ │ │ │ ├── detail_04-landlord.vue │ │ │ │ └── detail_05-comment.vue │ │ │ └── details.vue │ │ ├── favor │ │ │ └── favor.vue │ │ ├── search │ │ │ └── search.vue │ │ ├── home │ │ │ ├── cpns │ │ │ │ ├── home_nav_bar.vue │ │ │ │ ├── home_categories.vue │ │ │ │ ├── home_content.vue │ │ │ │ └── home_search_box.vue │ │ │ └── home.vue │ │ └── city │ │ │ ├── cpns │ │ │ └── city-group-list.vue │ │ │ └── city.vue │ ├── stores │ │ ├── index.js │ │ └── modules │ │ │ ├── mian.js │ │ │ ├── city.js │ │ │ └── home.js │ ├── main.js │ ├── utils │ │ ├── format_date.js │ │ └── get_assets_img.js │ ├── App.vue │ ├── components │ │ ├── loading │ │ │ └── loading.vue │ │ ├── detail-section │ │ │ └── detail-section.vue │ │ ├── tab-bar.vue │ │ ├── tab-control │ │ │ └── tab-control.vue │ │ ├── home-item-v9 │ │ │ └── home-item-v9.vue │ │ ├── home-item-v3 │ │ │ └── home-item-v3.vue │ │ └── search-bar │ │ │ └── search-bar.vue │ ├── router │ │ └── index.js │ └── hooks │ │ └── useScroll.js ├── jsconfig.json ├── README.md ├── index.html ├── package.json ├── vite.config.js └── public │ └── vite.svg ├── Vue3-H5_images ├── image-20230310010819996.png ├── image-20230310012624925.png ├── image-20230310024247705.png ├── image-20230310031417551.png ├── image-20230313101045927.png ├── image-20230314010149456.png ├── image-20230314013020872.png ├── image-20230314013129282.png ├── image-20230314094855967.png ├── image-20230314101829006.png ├── image-20230314102307847.png ├── image-20230314105504901.png ├── image-20230314214104488.png ├── image-20230315185854793.png ├── image-20230316031930269.png ├── image-20230316100830116.png ├── image-20230316102034404.png ├── image-20230316112601841.png ├── image-20230316113126975.png ├── image-20230317120317312.png ├── image-20230317120528867.png ├── image-20230317120749274.png ├── image-20230317121011369.png ├── image-20230318052736911.png ├── image-20230318183953257.png ├── image-20230318184009017.png ├── image-20230318184023698.png ├── image-20230318184107255.png ├── image-20230322082644907.png ├── image-20230322084507143.png ├── image-20230322084527227.png ├── image-20230322084539070.png ├── image-20230322084952224.png ├── image-20230322084958239.png ├── image-20230322085003459.png ├── image-20230322085009014.png ├── image-20230322085013952.png ├── image-20230322202515106.png ├── image-20230322202516451.png ├── image-20230323135554233.png ├── image-20230323135841429.png ├── image-20230323140555018.png ├── image-20230324232348206.png ├── image-20230324234536819.png ├── image-20230325004104681.png ├── image-20230325010935795.png ├── image-20230325010955925.png ├── image-20230325011011950.png ├── image-20230325224644046.png ├── image-20230327073628493.png ├── image-20230327074606478.png ├── image-20230327074621804.png ├── image-20230327074814520.png ├── image-20230327074840183.png ├── image-20230327074857740.png ├── image-20230327081554265.png ├── image-20230327082016620.png ├── image-20230327163318833.png ├── image-20230327163418978.png ├── image-20230327182809544.png ├── image-20230327224652847.png ├── image-20230328142448811.png ├── image-20230328143145378.png ├── image-20230329015232501.png ├── image-20230329015530170.png ├── image-20230329022457459.png ├── image-20230329022525238.png ├── image-20230329023110954.png ├── image-20230329023346952.png ├── image-20230329023655470.png ├── image-20230329023718655.png ├── image-20230329023827024.png ├── image-20230329024046685.png ├── image-20230329131614840.png ├── image-20230329152738200.png ├── image-20230329173859199.png ├── image-20230329174538670.png ├── image-20230330003258697.png ├── image-20230330003504231.png ├── image-20230330021354434.png ├── image-20230318184023698-1679136024832-2.png └── image-20230322082644907-1679444807472-1.png ├── 接口文档.md └── README.md /Vue3-H5/src/service/modules/favor.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Vue3-H5/src/service/modules/order.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Vue3-H5/src/style.css: -------------------------------------------------------------------------------- 1 | @import url(./assets/css/reset.css); 2 | @import url(./assets//css/common.css); -------------------------------------------------------------------------------- /Vue3-H5/src/service/request/config.js: -------------------------------------------------------------------------------- 1 | export const BASE_URL = "http://codercba.com:1888/api" 2 | export const TIMEOUT = 10000 -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/sprite.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/favor/favor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/favor/favor.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/1008641.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/1008641.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/banner.webp -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/header_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/header_bg.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/loading-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/loading-bg.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/location.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/order/icon-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/order/icon-time.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/tabbar/tab_home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/tabbar/tab_home.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230310010819996.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230310010819996.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230310012624925.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230310012624925.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230310024247705.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230310024247705.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230310031417551.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230310031417551.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230313101045927.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230313101045927.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314010149456.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314010149456.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314013020872.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314013020872.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314013129282.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314013129282.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314094855967.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314094855967.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314101829006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314101829006.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314102307847.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314102307847.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314105504901.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314105504901.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230314214104488.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230314214104488.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230315185854793.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230315185854793.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230316031930269.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230316031930269.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230316100830116.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230316100830116.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230316102034404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230316102034404.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230316112601841.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230316112601841.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230316113126975.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230316113126975.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230317120317312.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230317120317312.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230317120528867.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230317120528867.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230317120749274.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230317120749274.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230317121011369.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230317121011369.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230318052736911.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230318052736911.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230318183953257.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230318183953257.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230318184009017.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230318184009017.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230318184023698.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230318184023698.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230318184107255.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230318184107255.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322082644907.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322082644907.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322084507143.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322084507143.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322084527227.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322084527227.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322084539070.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322084539070.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322084952224.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322084952224.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322084958239.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322084958239.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322085003459.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322085003459.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322085009014.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322085009014.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322085013952.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322085013952.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322202515106.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322202515106.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322202516451.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322202516451.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230323135554233.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230323135554233.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230323135841429.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230323135841429.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230323140555018.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230323140555018.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230324232348206.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230324232348206.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230324234536819.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230324234536819.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230325004104681.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230325004104681.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230325010935795.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230325010935795.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230325010955925.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230325010955925.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230325011011950.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230325011011950.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230325224644046.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230325224644046.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327073628493.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327073628493.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327074606478.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327074606478.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327074621804.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327074621804.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327074814520.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327074814520.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327074840183.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327074840183.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327074857740.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327074857740.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327081554265.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327081554265.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327082016620.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327082016620.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327163318833.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327163318833.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327163418978.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327163418978.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327182809544.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327182809544.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230327224652847.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230327224652847.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230328142448811.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230328142448811.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230328143145378.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230328143145378.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329015232501.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329015232501.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329015530170.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329015530170.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329022457459.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329022457459.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329022525238.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329022525238.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329023110954.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329023110954.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329023346952.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329023346952.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329023655470.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329023655470.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329023718655.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329023718655.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329023827024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329023827024.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329024046685.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329024046685.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329131614840.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329131614840.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329152738200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329152738200.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329173859199.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329173859199.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230329174538670.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230329174538670.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230330003258697.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230330003258697.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230330003504231.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230330003504231.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230330021354434.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230330021354434.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/detail/icon_chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/detail/icon_chat.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/detail/icon_check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/detail/icon_check.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/detail/icon_order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/detail/icon_order.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/home-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/home-sprite.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/order/icon-order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/order/icon-order.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/tabbar/tab_favor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/tabbar/tab_favor.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/tabbar/tab_order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/tabbar/tab_order.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/common/icon_nav_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/common/icon_nav_back.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/detail/XiaoYu-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/detail/XiaoYu-image.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/icon-right-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/icon-right-menu.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/icon_location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/icon_location.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/message/icon_message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/message/icon_message.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/tabbar/tab_message.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/tabbar/tab_message.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/tabbar/tab_home_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/tabbar/tab_home_active.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/home/full-screen-loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/home/full-screen-loading.gif -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/tabbar/tab_favor_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/tabbar/tab_favor_active.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/tabbar/tab_order_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/tabbar/tab_order_active.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/order/icon_right_orderlist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/order/icon_right_orderlist.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/favor/empty_favorite.44731802.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/favor/empty_favorite.44731802.png -------------------------------------------------------------------------------- /Vue3-H5/src/views/order/order.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /Vue3-H5/src/service/index.js: -------------------------------------------------------------------------------- 1 | //减少文件夹内嵌太多，提升文件夹内文件的层级 2 | export * from "@/service/modules/city" 3 | export * from "@/service/modules/home" 4 | export * from "@/service/modules/detail" -------------------------------------------------------------------------------- /Vue3-H5/src/views/message/message.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230318184023698-1679136024832-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230318184023698-1679136024832-2.png -------------------------------------------------------------------------------- /Vue3-H5_images/image-20230322082644907-1679444807472-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5_images/image-20230322082644907-1679444807472-1.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/search/tj-mob-ui_unit-item_collected-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/search/tj-mob-ui_unit-item_collected-new.png -------------------------------------------------------------------------------- /Vue3-H5/src/assets/img/search/tj-mob-ui_unit-item_comment-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/2002XiaoYu/-Mobile-rental-project/HEAD/Vue3-H5/src/assets/img/search/tj-mob-ui_unit-item_comment-new.png -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail-action-bar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /Vue3-H5/src/stores/index.js: -------------------------------------------------------------------------------- 1 | import {createPinia} from "pinia" 2 | 3 | const useStore = createPinia("useStore",{ 4 | state:()=>({ 5 | count:1 6 | }), 7 | }) 8 | 9 | export default useStore -------------------------------------------------------------------------------- /Vue3-H5/src/service/modules/city.js: -------------------------------------------------------------------------------- 1 | import XYRequest from "../request" 2 | 3 | //请求城市相关的数据 4 | 5 | //获取全部的城市信息(国内、海外) 6 | export function getCityAll(){ 7 | return XYRequest.get({ 8 | url:"/city/all" 9 | }) 10 | } -------------------------------------------------------------------------------- /Vue3-H5/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import 'normalize.css' 4 | import router from "./router" 5 | import pinia from "./stores" 6 | import App from './App.vue' 7 | 8 | createApp(App).use(router).use(pinia).mount('#app') 9 | -------------------------------------------------------------------------------- /Vue3-H5/src/service/modules/detail.js: -------------------------------------------------------------------------------- 1 | import XYRequest from "@/service/request" 2 | 3 | export function getDatailInfos(houseId){ 4 | return XYRequest.get({ 5 | url:"/detail/infos", 6 | params:{ 7 | houseId 8 | } 9 | }) 10 | } -------------------------------------------------------------------------------- /Vue3-H5/src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | body,h1,h2,h3,h4,ul,li { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | ul,li { 7 | list-style: none; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | color:#333; 13 | } 14 | 15 | img { 16 | vertical-align: top; 17 | } -------------------------------------------------------------------------------- /Vue3-H5/src/utils/format_date.js: -------------------------------------------------------------------------------- 1 | import dayjs from "dayjs" 2 | 3 | export function formatMonthDay(date,formatStr="MM月DD日"){ 4 | return dayjs(date).format(formatStr) 5 | } 6 | 7 | export function getDiffDays(startDate,endDate){ 8 | return dayjs(endDate).diff(startDate,"day")//计算相差多少天 9 | } -------------------------------------------------------------------------------- /Vue3-H5/src/views/favor/favor.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 12 | 13 | -------------------------------------------------------------------------------- /Vue3-H5/src/stores/modules/mian.js: -------------------------------------------------------------------------------- 1 | import { defineStore } from "pinia"; 2 | 3 | // 初始化时间 4 | const startDate = new Date()//现在的时间 5 | const endDate = new Date() 6 | endDate.setDate(startDate.getDate()+1) 7 | 8 | const useMainStore = defineStore("main",{ 9 | state:()=>({ 10 | token:"", 11 | isLoading:true, 12 | startDate:startDate, 13 | endDate:endDate 14 | }) 15 | }) 16 | 17 | export default useMainStore -------------------------------------------------------------------------------- /Vue3-H5/jsconfig.json: -------------------------------------------------------------------------------- 1 | {"compilerOptions": { 2 | "target": "esnext", 3 | "checkJs": false, 4 | "strict": true, 5 | "allowSyntheticDefaultImports": true, 6 | "baseUrl": ".", 7 | "module": "commonjs", 8 | "allowJs": true, 9 | "paths": { 10 | "@/*": ["./src/*"], 11 | "@components/*": ["src/components/*"], 12 | "@views/*": ["src/views/*"] 13 | } 14 | }, 15 | "exclude": ["node_modules", "dist", "temp"], 16 | "include": ["src/**/*", "types/**/*"] 17 | } -------------------------------------------------------------------------------- /Vue3-H5/src/views/search/search.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/home/cpns/home_nav_bar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /Vue3-H5/src/utils/get_assets_img.js: -------------------------------------------------------------------------------- 1 | const getAssetURL = (image) =>{ 2 | //参数1：相对路径 参数2：当前路径 3 | return new URL(`../assets/img/${image}`,import.meta.url).href 4 | //返回创建的URL语句 5 | //具体来说，这个语句使用了 URL 构造函数，它接受两个参数：第一个参数是一个字符串，表示要创建的 URL 地址；第二个参数是一个可选的基础 URL，用于解析相对路径。在这个语句中，第一个参数是一个模板字符串，其中包含一个占位符 ${image}，它会被变量 image 的值所替换，生成一个字符串 ../assets/img/xxx，其中 xxx 是变量 image 的值。这个字符串表示了一个相对于当前模块的上级目录的 assets/img 目录中的某个文件的路径。 6 | 7 | //第二个参数是 import.meta.url，这是一个元数据属性，表示当前模块的绝对 URL 地址。它在解析相对路径时非常有用。 8 | } 9 | 10 | export default getAssetURL -------------------------------------------------------------------------------- /Vue3-H5/src/stores/modules/city.js: -------------------------------------------------------------------------------- 1 | import { getCityAll } from "@/service"; 2 | import { defineStore } from "pinia"; 3 | 4 | //参数1：id，参数2：内容 5 | const useCityStore = defineStore("city",{ 6 | state:()=> ({ 7 | allCities:{}, 8 | //通常保存的不能是单独一个城市 9 | currentCity:{cityName:"请选择城市"} 10 | }), 11 | actions:{ 12 | //取得全部城市数据 13 | async fetchAllCitiesData(){ 14 | const res = await getCityAll() 15 | this.allCities = res.data 16 | } 17 | } 18 | }) 19 | 20 | export default useCityStore 21 | 22 | -------------------------------------------------------------------------------- /Vue3-H5/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Vue3-H5/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Vue3-H5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-h5", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "axios": "^1.3.4", 13 | "dayjs": "^1.11.7", 14 | "less": "^4.1.3", 15 | "normalize.css": "^8.0.1", 16 | "pinia": "^2.0.33", 17 | "underscore": "^1.13.6", 18 | "vant": "^4.1.0", 19 | "vue": "^3.2.45", 20 | "vue-router": "^4.1.6" 21 | }, 22 | "devDependencies": { 23 | "@vitejs/plugin-vue": "^4.0.0", 24 | "unplugin-vue-components": "^0.24.1", 25 | "vite": "^4.1.0" 26 | } 27 | } -------------------------------------------------------------------------------- /Vue3-H5/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import Components from 'unplugin-vue-components/vite'; 3 | import path from 'path' 4 | import { VantResolver } from 'unplugin-vue-components/resolvers'; 5 | import vue from '@vitejs/plugin-vue' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | vue(), 11 | Components({ 12 | resolvers: [VantResolver()], 13 | }), 14 | ], 15 | resolve: { 16 | alias: {//配置别名 17 | '@': path.resolve(__dirname, './src'), 18 | '@components': path.resolve(__dirname, './src/components'), 19 | '@styles': path.resolve(__dirname, './src/styles'), 20 | }, 21 | } 22 | }) 23 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_08-intro.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | -------------------------------------------------------------------------------- /Vue3-H5/src/assets/data/tabBarData.js: -------------------------------------------------------------------------------- 1 | //对于底部tabBar，由于数据就一点，我就直接抽取出来放在这里，不从服务器中获取 2 | const tabbarData = [ 3 | { 4 | id:1, 5 | text:"首页", 6 | image:"tabbar/tab_home.png", 7 | imageActive:"tabbar/tab_home_active.png",//活跃的图片 8 | path:"/home" 9 | }, 10 | { 11 | id:2, 12 | text:"收藏", 13 | image:"tabbar/tab_favor.png", 14 | imageActive:"tabbar/tab_favor_active.png", 15 | path:"/favor" 16 | }, 17 | { 18 | id:3, 19 | text:"订单", 20 | image:"tabbar/tab_order.png", 21 | imageActive:"tabbar/tab_order_active.png", 22 | path:"/order" 23 | }, 24 | { 25 | id:4, 26 | text:"消息", 27 | image:"tabbar/tab_message.png", 28 | imageActive:"tabbar/tab_message.png", 29 | path:"/message" 30 | } 31 | ] 32 | 33 | //将数据暴露出去 34 | export default tabbarData -------------------------------------------------------------------------------- /Vue3-H5/src/assets/css/common.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --primary-color:#ff9854; 3 | --primary-icon-color:#fe893a; 4 | /* 搜索框图标颜色 使用!important加强权重值 */ 5 | --van-search-left-icon-color:var(--primary-color) !important; 6 | 7 | --van-index-bar-index-active-color:var(--primary-color) !important; 8 | --van-index-anchor-sticky-text-color:var(--primary-color) !important; 9 | /* 全局修改样式 */ 10 | --van-nav-bar-text-color:var(--primary-color) !important; 11 | --van-nav-bar-icon-color:var(--primary-icon-color) !important; 12 | 13 | } 14 | 15 | body{ 16 | font-size: 14px; 17 | } 18 | 19 | .top-page{ 20 | position: relative; 21 | z-index: 9; 22 | height: 100vh; 23 | background-color: #fff; 24 | overflow-y: auto; 25 | } 26 | 27 | .icon_check{ 28 | display: inline-block; 29 | width: 12px; 30 | height: 12px; 31 | background: url(../img/detail/icon_check.png) 0 0/100% 100%; 32 | } -------------------------------------------------------------------------------- /Vue3-H5/src/stores/modules/home.js: -------------------------------------------------------------------------------- 1 | import { defineStore } from "pinia"; 2 | import { getHomeHotSuggests ,getHomeCategories, getHomeHouseList} from "@/service" 3 | 4 | const useHomeStore = defineStore("home",{ 5 | state:()=>({ 6 | hotSuggest:[null], 7 | categories:[], 8 | currentPage:1, 9 | HouseList:[] 10 | }), 11 | actions:{ 12 | async fetchHotSuggestData(){ 13 | const res = await getHomeHotSuggests() 14 | this.hotSuggest = res.data 15 | }, 16 | //热门分类信息 17 | async fetchCategoriesData(){ 18 | const res = await getHomeCategories()//完成获取数据的时候需要先去其他页面调用网络请求，不然一开始是没有数据的 19 | this.categories = res.data 20 | }, 21 | 22 | //首页房子列表 23 | async fetchHouseList(){ 24 | const res = await getHomeHouseList(this.currentPage) 25 | this.HouseList.push(...res.data) 26 | this.currentPage++ 27 | } 28 | } 29 | }) 30 | 31 | export default useHomeStore -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_07-map.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 31 | 32 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/home/cpns/home_categories.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_06-notice.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 27 | 28 | -------------------------------------------------------------------------------- /Vue3-H5/src/components/loading/loading.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | 19 | -------------------------------------------------------------------------------- /Vue3-H5/src/components/detail-section/detail-section.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 28 | 29 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/home/cpns/home_content.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 35 | 36 | -------------------------------------------------------------------------------- /Vue3-H5/src/router/index.js: -------------------------------------------------------------------------------- 1 | import {createRouter,createWebHashHistory} from "vue-router" 2 | 3 | const router = createRouter({ 4 | history:createWebHashHistory(),//使用哈希路由 5 | routes:[ 6 | { 7 | path:"/", 8 | redirect:"/home"//重定向到首页 9 | }, 10 | { 11 | path:"/home", 12 | //路由懒加载，方便打包的时候进行分包处理 13 | component:()=>import("@/views/home/home.vue") 14 | }, 15 | { 16 | path:"/favor", 17 | component:()=>import("@/views/favor/favor.vue") 18 | }, 19 | { 20 | path:"/order", 21 | component:()=>import("@/views/order/order.vue") 22 | }, 23 | { 24 | path:"/message", 25 | component:()=>import("@/views/message/message.vue") 26 | }, 27 | { 28 | path:"/city", 29 | component:()=>import("@/views/city/city.vue"), 30 | meta:{ 31 | //判断是否需要隐藏 不需要隐藏的不需要写，undefined会被转化为false 32 | hideTabBar:true 33 | } 34 | }, 35 | { 36 | path:"/search", 37 | component:()=>import("@/views/search/search.vue") 38 | }, 39 | { 40 | path:"/details/:id",// :id的作用是拼接传递信息 41 | component:()=>import("@/views/details/details.vue") 42 | } 43 | ] 44 | }) 45 | 46 | export default router 47 | 48 | -------------------------------------------------------------------------------- /Vue3-H5/src/components/tab-bar.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 36 | 37 | -------------------------------------------------------------------------------- /Vue3-H5/src/service/request/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import { BASE_URL,TIMEOUT } from './config' 3 | import useMainStore from '@/stores/modules/mian'; 4 | const mainStore = useMainStore() 5 | 6 | class XYRequest { 7 | constructor(baseURL, timeout=10000) { 8 | // 创造instance实例 9 | this.instance = axios.create({ 10 | baseURL, 11 | timeout 12 | }) 13 | //对实例上添加拦截器 14 | // 请求拦截 15 | this.instance.interceptors.request.use(config=>{ 16 | mainStore.isLoading = true 17 | return config 18 | },err=>{ 19 | return err 20 | }) 21 | // 响应拦截 22 | this.instance.interceptors.response.use(res=>{ 23 | mainStore.isLoading = false 24 | return res 25 | },err=>{ 26 | mainStore.isLoading = false 27 | return err 28 | }) 29 | } 30 | 31 | request(config) { 32 | mainStore.isLoading = true 33 | return new Promise((resolve, reject) => { 34 | this.instance.request(config).then(res => { 35 | resolve(res.data) 36 | }).catch(err => { 37 | reject(err) 38 | }) 39 | }) 40 | } 41 | 42 | get(config) { 43 | return this.request({ ...config, method: "get" }) 44 | } 45 | 46 | post(config) { 47 | return this.request({ ...config, method: "post" }) 48 | } 49 | } 50 | 51 | export default new XYRequest(BASE_URL,TIMEOUT) -------------------------------------------------------------------------------- /Vue3-H5/src/views/home/home.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 43 | 44 | -------------------------------------------------------------------------------- /Vue3-H5/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Vue3-H5/src/components/tab-control/tab-control.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 38 | 39 | -------------------------------------------------------------------------------- /Vue3-H5/src/hooks/useScroll.js: -------------------------------------------------------------------------------- 1 | import { onMounted, onUnmounted, ref} from 'vue'; 2 | // 防抖节流的库：throttle(节流) debounce(防抖) 3 | import { throttle, debounce } from "underscore" 4 | 5 | // 预留接口位置用来传递调用 6 | export default function useScroll(elRef) { 7 | let el = window 8 | const isReachBottom = ref(false) 9 | const clientHeight = ref(0) 10 | const scrollTop = ref(0) 11 | const scrollHeight = ref(0) 12 | // 进行节流，每200毫秒只能触发一次。这里改换成防抖(因为一次性加载图片太多了，一滑动就不停的加载) 13 | const scrollList = debounce(() => { 14 | if(el === window){ 15 | // 客户端的高度 16 | clientHeight.value = document.documentElement.clientHeight 17 | // 距离视图的顶部 18 | scrollTop.value = document.documentElement.scrollTop 19 | // 视图的高度 20 | scrollHeight.value = document.documentElement.scrollHeight 21 | }else{ 22 | clientHeight.value = el.clientHeight 23 | scrollTop.value = el.scrollTop 24 | scrollHeight.value = el.scrollHeight 25 | } 26 | // 客户端高度+距离视图的顶部=视图的高度(相当于获取到了底部) 27 | // 底部tabBar的高度50px 28 | const tabBarHeight = 50 29 | if (clientHeight + scrollTop + tabBarHeight >= scrollHeight) { 30 | // 到达底部就设置isReachBottom为true 31 | isReachBottom.value = true 32 | } 33 | },100) 34 | 35 | // 监听window创建的滚动，在挂载到卸载组件的这段时间中 36 | onMounted(() => { 37 | if(elRef) el = elRef.value 38 | el.addEventListener("scroll", scrollList) 39 | }) 40 | 41 | onUnmounted(() => { 42 | el.removeEventListener("scroll", scrollList) 43 | }) 44 | 45 | return { isReachBottom, clientHeight, scrollTop, scrollHeight } 46 | } -------------------------------------------------------------------------------- /Vue3-H5/src/components/home-item-v9/home-item-v9.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 33 | 34 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/city/cpns/city-group-list.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 59 | 60 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_02-infos.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 45 | 46 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_03-facility.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 37 | 38 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_01-swipe.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 64 | 65 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/city/city.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 86 | 87 | -------------------------------------------------------------------------------- /Vue3-H5/src/components/home-item-v3/home-item-v3.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 39 | 40 | -------------------------------------------------------------------------------- /Vue3-H5/src/components/search-bar/search-bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 34 | 35 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_04-landlord.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 53 | 54 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/cpns/detail_05-comment.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 62 | 63 | -------------------------------------------------------------------------------- /接口文档.md: -------------------------------------------------------------------------------- 1 | # HYTrip 2 | 3 | https://documenter.getpostman.com/view/12387168/UzXPxcSi 4 | 5 | ## 一. 首页 6 | 7 | GET 8 | 9 | ### 1.1. 热门建议 10 | 11 | http://codercba.com:1888/api/home/hotSuggests 12 | 13 | Example Request 14 | 15 | 热门建议 16 | 17 | ```js 18 | var requestOptions = { 19 | method: 'GET', 20 | redirect: 'follow' 21 | }; 22 | 23 | fetch("http://codercba.com:1888/api/home/hotSuggests", requestOptions) 24 | .then(response => response.text()) 25 | .then(result => console.log(result)) 26 | .catch(error => console.log('error', error)); 27 | ``` 28 | 29 | GET 30 | 31 | ### 1.2. 推荐类别 32 | 33 | http://codercba.com:1888/api/home/categories 34 | 35 | Example Request 36 | 37 | 推荐类别 38 | 39 | ```js 40 | var requestOptions = { 41 | method: 'GET', 42 | redirect: 'follow' 43 | }; 44 | 45 | fetch("http://codercba.com:1888/api/home/categories", requestOptions) 46 | .then(response => response.text()) 47 | .then(result => console.log(result)) 48 | .catch(error => console.log('error', error)); 49 | ``` 50 | 51 | GET 52 | 53 | ### 1.3. 房屋列表 54 | 55 | http://codercba.com:1888/api/home/houselist?page=1 56 | 57 | PARAMS 58 | 59 | page 60 | 61 | 1 62 | 63 | 64 | 65 | Example Request 66 | 67 | 房屋列表 68 | 69 | ```js 70 | var requestOptions = { 71 | method: 'GET', 72 | redirect: 'follow' 73 | }; 74 | 75 | fetch("http://codercba.com:1888/api/home/houselist?page=1", requestOptions) 76 | .then(response => response.text()) 77 | .then(result => console.log(result)) 78 | .catch(error => console.log('error', error)); 79 | ``` 80 | 81 | ## 城市 82 | 83 | GET 84 | 85 | ### 所有城市 86 | 87 | http://codercba.com:1888/api/city/all 88 | 89 | Example Request 90 | 91 | 所有城市 92 | 93 | ```js 94 | var requestOptions = { 95 | method: 'GET', 96 | redirect: 'follow' 97 | }; 98 | 99 | fetch("http://codercba.com:1888/api/city/all", requestOptions) 100 | .then(response => response.text()) 101 | .then(result => console.log(result)) 102 | .catch(error => console.log('error', error)); 103 | ``` 104 | 105 | ## 二. 详情 106 | 107 | GET 108 | 109 | ### 2.1. 房子详情 110 | 111 | http://codercba.com:1888/api/favor/list 112 | 113 | Example Request 114 | 115 | 房子详情 116 | 117 | ```js 118 | var requestOptions = { 119 | method: 'GET', 120 | redirect: 'follow' 121 | }; 122 | 123 | fetch("http://codercba.com:1888/api/favor/list", requestOptions) 124 | .then(response => response.text()) 125 | .then(result => console.log(result)) 126 | .catch(error => console.log('error', error)); 127 | ``` 128 | 129 | ## 三. 收藏 130 | 131 | GET 132 | 133 | ### 3.1. 收藏列表 134 | 135 | http://codercba.com:1888/api/favor/list 136 | 137 | Example Request 138 | 139 | 收藏列表 140 | 141 | ```js 142 | var requestOptions = { 143 | method: 'GET', 144 | redirect: 'follow' 145 | }; 146 | 147 | fetch("http://codercba.com:1888/api/favor/list", requestOptions) 148 | .then(response => response.text()) 149 | .then(result => console.log(result)) 150 | .catch(error => console.log('error', error)); 151 | ``` 152 | 153 | GET 154 | 155 | ### 3.2. 浏览历史 156 | 157 | http://codercba.com:1888/api/favor/history 158 | 159 | Example Request 160 | 161 | 浏览历史 162 | 163 | ```js 164 | var requestOptions = { 165 | method: 'GET', 166 | redirect: 'follow' 167 | }; 168 | 169 | fetch("http://codercba.com:1888/api/favor/history", requestOptions) 170 | .then(response => response.text()) 171 | .then(result => console.log(result)) 172 | .catch(error => console.log('error', error)); 173 | ``` 174 | 175 | ## 四. 订单 176 | 177 | GET 178 | 179 | ### 4.1. 订单列表 180 | 181 | http://codercba.com:1888/api/order/list?type=pend 182 | 183 | type=pend 未完成订单 type=recent 最近订单 type=all 全部订单 184 | 185 | 186 | 187 | Example Request 188 | 189 | 订单列表 190 | 191 | ```js 192 | var requestOptions = { 193 | method: 'GET', 194 | redirect: 'follow' 195 | }; 196 | 197 | fetch("http://codercba.com:1888/api/order/list?type=pend", requestOptions) 198 | .then(response => response.text()) 199 | .then(result => console.log(result)) 200 | .catch(error => console.log('error', error)); 201 | ``` 202 | 203 | ## 五. 搜索 204 | 205 | GET 206 | 207 | ### 5.1. 搜索顶部 208 | 209 | http://codercba.com:1888/api/search/top 210 | 211 | Example Request 212 | 213 | 搜索顶部 214 | 215 | ```javascript 216 | var requestOptions = { 217 | method: 'GET', 218 | redirect: 'follow' 219 | }; 220 | 221 | fetch("http://codercba.com:1888/api/search/top", requestOptions) 222 | .then(response => response.text()) 223 | .then(result => console.log(result)) 224 | .catch(error => console.log('error', error)); 225 | ``` 226 | 227 | GET 228 | 229 | ### 5.2. 搜素结果 230 | 231 | http://codercba.com:1888/api/search/result 232 | 233 | Example Request 234 | 235 | 搜素结果 236 | 237 | ```javascript 238 | var requestOptions = { 239 | method: 'GET', 240 | redirect: 'follow' 241 | }; 242 | 243 | fetch("http://codercba.com:1888/api/search/result", requestOptions) 244 | .then(response => response.text()) 245 | .then(result => console.log(result)) 246 | .catch(error => console.log('error', error)); 247 | ``` 248 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/details/details.vue: -------------------------------------------------------------------------------- 1 | 102 | 103 | 134 | 135 | -------------------------------------------------------------------------------- /Vue3-H5/src/views/home/cpns/home_search_box.vue: -------------------------------------------------------------------------------- 1 | 87 | 88 | 155 | 156 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue3项目 -- H5 2 | 3 | > 技术栈：Vue3 + Router4 + Pinia + ES6 + Vant4 + Git +axios以及各种类似dayjs的第三方库 4 | > 5 | > 下载项目后需要做的步骤： 6 | > 7 | > 1. `pnpm install`(下载依赖) 8 | > 2. `pnpm dev`(运行项目) 9 | 10 | ## 创建Vue项目 11 | 12 | - 方式一：Vue CLI 13 | - 基于`Webpack`工具 14 | - 创建命令：`vue create` 15 | - 方式二：create-vue 16 | - 基于`vite`工具 17 | - 创建命令：`npm init vue@latest`或者`pnpm create vite` 18 | 19 | - 以下是基于`pnpm create vite`创建的项目 20 | 21 | ![image-20230310010819996](./Vue3-H5_images/image-20230310010819996.png) 22 | 23 | 项目配置: 24 | 25 | - 配置项目的`icon`图标 26 | 27 | > 从静态文件夹`public`中找到文件，将原本不需要的脚手架默认图标进行删除，加入新的图标照片 28 | > 29 | > 记得遵守替换图标的规则： 30 | > 31 | > - 在public文件夹中找到favicon.ico文件，这是默认的项目图标文件。 32 | > - 准备你想要使用的新图标文件，并将其命名为favicon.ico 33 | > - 将新的favicon.ico文件替换默认的文件，保存更改。 34 | > - 在浏览器中重新加载项目，你应该能够看到新的图标已经生效了 35 | > - 如果你想要使用不同的文件名来保存你的图标文件，你需要在index.html文件中手动更改图标文件的引用。在index.html文件中，找到以下代码：(我的href比较不一样，不过道理都是差不多的) 36 | > 37 | > ```html 38 | > 39 | > //将//vite.svg替换为你的图标文件的相对路径即可 40 | > ``` 41 | 42 | - 配置项目的标题 43 | 44 | ![image-20230310012624925](./Vue3-H5_images/image-20230310012624925.png) 45 | 46 | - 配置`jsconfig.json` 47 | 48 | > 这个`jsconfig.json`配置文件能给我们写代码更友好的提示(可以对你的文件所在目录下的所有js代码做出个性化支持)，但是`Vite脚手架`并没有生成这个文件，需要我们自己进行添加 49 | > 50 | > 这个文件所需的内容我放在下方的代码块中 51 | > 52 | > - 使用命令`touch jsconfig.json`生成对应的`jsconfig.json`文件 53 | > - 一般情况下`.json`后缀的文件是不能写注释的，而`jsconfig.json`和`tsconfig.json`是例外，因为vscode编辑器额外单独做了处理 54 | 55 | ```javascript 56 | //一般来说选这个就够了，需要其他的根据下面参考大全自己加 57 | {"compilerOptions": { 58 | "target": "esnext", 59 | "checkJs": false, 60 | "strict": true, 61 | "allowSyntheticDefaultImports": true, 62 | "baseUrl": ".", 63 | "module": "commonjs", 64 | "paths": { 65 | "@/*": ["./src/*"], 66 | "@components/*": ["src/components/*"], 67 | "@views/*": ["src/views/*"] 68 | } 69 | }, 70 | "exclude": ["node_modules", "dist", "temp"], 71 | "include": ["src/**/*", "types/**/*"] 72 | } 73 | ``` 74 | 75 | - **以下是可供参考的`jsconfig.json`配置文件** 76 | 77 | ```json 78 | // jsconfig.json 79 | { 80 | "compilerOptions": { 81 | "target": "es2015", // 指定要使用的默认库，值为"es3","es5","es2015"... 82 | "module": "commonjs", // 在生成模块代码时指定模块系统 83 | "checkJs": false, // 启用javascript文件的类型检查 84 | "baseUrl": "*", // 解析非相关模块名称的基础目录 85 | "paths": { 86 | "utils": ["src/utils/*"] // 指定相对于baseUrl选项计算的路径映射，使用webpack别名，智能感知路径 87 | } 88 | }, 89 | "exclude": [ // 要排除的文件 90 | "node_modules", 91 | "**/node_modules/*" 92 | ], 93 | "include": [ // 包含的文件 94 | "src/*.js" 95 | ] 96 | } 97 | 98 | "compilerOptions": { 99 | "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度 100 | "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置 101 | "diagnostics": true, // 打印诊断信息 102 | "target": "ES5", // 目标语言的版本 103 | "module": "CommonJS", // 生成代码的模板标准 104 | "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD", 105 | "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array", 106 | "allowJS": true, // 允许编译器编译JS，JSX文件 107 | "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用 108 | "outDir": "./dist", // 指定输出目录 109 | "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构 110 | "declaration": true, // 生成声明文件，开启后会自动生成声明文件 111 | "declarationDir": "./file", // 指定生成声明文件存放目录 112 | "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件 113 | "sourceMap": true, // 生成目标文件的sourceMap文件 114 | "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中 115 | "declarationMap": true, // 为声明文件生成sourceMap 116 | "typeRoots": [], // 声明文件目录，默认时node_modules/@types 117 | "types": [], // 加载的声明文件包 118 | "removeComments":true, // 删除注释 119 | "noEmit": true, // 不输出文件,即编译后不会生成任何js文件 120 | "noEmitOnError": true, // 发送错误时不输出任何文件 121 | "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用 122 | "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块 123 | "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现 124 | "strict": true, // 开启所有严格的类型检查 125 | "alwaysStrict": true, // 在代码中注入'use strict' 126 | "noImplicitAny": true, // 不允许隐式的any类型 127 | "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量 128 | "strictFunctionTypes": true, // 不允许函数参数双向协变 129 | "strictPropertyInitialization": true, // 类的实例属性必须初始化 130 | "strictBindCallApply": true, // 严格的bind/call/apply检查 131 | "noImplicitThis": true, // 不允许this有隐式的any类型 132 | "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错) 133 | "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错) 134 | "noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行) 135 | "noImplicitReturns": true, //每个分支都会有返回值 136 | "esModuleInterop": true, // 允许export=导出，由import from 导入 137 | "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块 138 | "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入 139 | "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录 140 | "paths": { // 路径映射，相对于baseUrl 141 | // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置 142 | "jquery": ["node_modules/jquery/dist/jquery.min.js"] 143 | }, 144 | "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错 145 | "listEmittedFiles": true, // 打印输出文件 146 | "listFiles": true// 打印编译的文件(包括引用的声明文件) 147 | } 148 | ``` 149 | 150 | ### 项目目录结构划分 151 | 152 | - `src`文件夹下的目录图片： 153 | 154 | ![image-20230310024247705](./Vue3-H5_images/image-20230310024247705.png) 155 | 156 | | 文件夹 | 作用 | 157 | | :----------: | :----------------------------------------------------------: | 158 | | `assets` | 存放资源(图片、CSS静态资源、字体资源、MP3、MP4等等) | 159 | | `components` | 存放Vue抽取的组件(比较通用的部分)
可能在`components`文件夹中还会存在以下两个小文件夹
`common`：多个项目都会公用的组件
`content`当前项目多个页面公用的组件 | 160 | | `hooks` | 多个组件中用到的代码逻辑抽取到这个文件夹中 | 161 | | `mock` | 模拟数据(服务器接口的数据还未写好，此时模拟的数据放在这里) | 162 | | `router` | 路由配置 | 163 | | `service` | 网络请求 | 164 | | `stores` | 复杂数据的状态管理，Pinia或者VueX，这里Pinia采用stores，加上s，因为Pinia可以存在多个store，实现扁平化 | 165 | | `utils` | 抽出的工具函数放在这里(工具类) | 166 | | `views` | 一个主要的，大的页面通常会抽取成`views`，有时候也可能不叫`views`而是叫`pages` | 167 | | **文件** | **作用** | 168 | | `App.vue` | Vue父组件 | 169 | | `main.js` | 全局配置文件 | 170 | | `style.css` | 全局CSS，随Vite脚手架创建时一起创建的 | 171 | 172 | ### CSS样式的重置 173 | 174 | - 对默认CSS样式进行重置:(在GitHub中进行下载前人已经总结好的) 175 | 176 | `Github地址：`[necolas/normalize.css: A modern alternative to CSS resets (github.com)](https://github.com/necolas/normalize.css) 177 | 178 | - normalize.css(适配各种浏览器的CSS样式) 179 | 180 | 使用命令`pnpm install --save normalize.css`进行安装 181 | 182 | 然后在`main.js`文件中进行引入使用 183 | 184 | ![image-20230310031417551](./Vue3-H5_images/image-20230310031417551.png) 185 | 186 | - reset.css(常见配置的处理) 187 | 188 | > 这个你可以放在`assets`文件夹下，创建一个css文件夹专门进行存放，也可以说直接导入，看你所处的具体情况决定 189 | > 190 | > - 但通常我们项目会抽出很多的CSS文件出来，这些文件我们可以放在`assets`文件夹中的`css`文件夹中，然后统一使用`@import url()`导入全局CSS样式`style.css`文件中进行统一管理 191 | 192 | ```css 193 | /* reset.css，我们会配置一些如下基础设置。然后将此文件引入全局CSS文件中 */ 194 | 195 | body,h1,h2,h3,h4,ul,li { 196 | padding: 0; 197 | margin: 0; 198 | } 199 | 200 | ul,li { 201 | list-style: none; 202 | } 203 | 204 | a { 205 | text-decoration: none; 206 | color:#333; 207 | } 208 | 209 | img { 210 | vertical-align: top; 211 | } 212 | ``` 213 | 214 | ### 全家桶 – 路由配置 215 | 216 | > 1. 安装路由：`pnpm install vue-router` 217 | > 2. 在router文件夹中的index.js配置路由文件。导出内容 218 | > 219 | > 3. 在全局配置文件`main.js`中进行配置 220 | 221 | - 路由需要对应多个界面，界面是在`views`中进行配置，我们需要在`views`文件夹中创建多个文件夹 222 | - 一个文件夹对应一个页面，因为一个页面会对应多个组件。使用文件夹进行区分会更加合理 223 | - 在文件夹中创建路由要跳转的对应页面（可以直接创建页面 或者 创建一个`index.vue`文件当作主体，然后创建其他的vue文件引入主体中），这里采用第一种方式 224 | 225 | > 在views中创建的文件夹中的vue文件中使用setup语法糖会报警告的解决方案： 226 | > 227 | > - 在上面创建的`jsconfig.json`文件中的`compilerOptions`配置中加上这部分`"allowJs": true` 228 | > - 这个方法是更加标准的做法，即使你没有使用Typescript也需要这么做 229 | 230 | - 做完之后就把`views`页面**映射**进路由里面，然后在`App.vue`组件中使用`router-view`进行路由占位 231 | - 使用`页面信息`进行路由跳转 232 | 233 | ```js 234 | import {createRouter,createWebHashHistory} from "vue-router" 235 | 236 | const router = createRouter({ 237 | history:createWebHashHistory(),//使用哈希路由 238 | routes:[ 239 | { 240 | path:"/", 241 | redirect:"/home"//重定向到首页 242 | }, 243 | { 244 | path:"/home", 245 | //路由懒加载，方便打包的时候进行分包处理 246 | component:()=>import("../views/home/home.vue") 247 | }, 248 | { 249 | path:"/favor", 250 | component:()=>import("../views/favor/favor.vue") 251 | }, 252 | { 253 | path:"/order", 254 | component:()=>import("../views/order/order.vue") 255 | }, 256 | { 257 | path:"/message", 258 | component:()=>import("../views/message/message.vue") 259 | } 260 | ] 261 | }) 262 | 263 | export default router 264 | ``` 265 | 266 | ### 全家桶 – 状态管理 267 | 268 | - 状态管理的选择: 269 | - `vuex`: 目前依然使用较多的状态管理库 270 | - `pinia`: 强烈推荐, 未来趋势的状态管理库 271 | 272 | > - 使用命令安装：`pnpm install pinia` 273 | > - 导入stores文件夹下(创建一个`index.js`文件进行配置操作)，并导出 274 | > - 在全局配置文件`main.js`文件下进行引入配置使用 275 | > 276 | > --- 277 | > 278 | > - 在Pinia中，我们是可以创建多个store的，`index.js`文件是我们最终汇总的store文件，其他大大小小的store文件我们按模块进行区分，(创建一个`modules`文件夹，其他模块的的store文件就放在该文件里面) 279 | 280 | ```js 281 | //stores里的index.js搭建 282 | import {createPinia} from "pinia" 283 | 284 | const useStore = createPinia("useStore",{ 285 | state:()=>({ 286 | count:1 287 | }), 288 | }) 289 | 290 | export default useStore 291 | ``` 292 | 293 | ## 首页搭建 294 | 295 | ### TabBar(底部)基本搭建 296 | 297 | > 将底部`TabBar`抽取出来封装成一个组件 => 写到`components`文件夹中 298 | > 299 | > 这里就需要使用到`编程式路由导航`了，然后就是写样式了，完成底部的组件效果 300 | > 301 | > - 涉及到的静态资源已经在`assets`文件夹中进行分类为 => `font`、`data`、`img`三个文件夹分别存放字体、数据、图片 302 | > - CSS样式使用到的`less`，使用命令`pnpm i less`安装 303 | 304 | - 这里需要注意的点： 305 | 306 | - 直接在`img的src`属性中加上图片地址是可以的，但是想要从`tabbarData`中动态获取`image`确是不行的。 307 | 308 | - 在`webpack`中我们可以通过``中的`require`来实现 309 | 310 | - 但是在`Vite`中需要进行封装一个工具类，然后丢进`utils`文件夹中，引入TabBar组件中使用 311 | 312 | ```javascript 313 | const getAssetURL = (image) =>{ 314 | //参数1：相对路径 参数2：当前路径 315 | return new URL(`../assets/img/${image}`,import.meta.url).href 316 | //返回创建的URL语句 317 | //具体来说，这个语句使用了 URL 构造函数，它接受两个参数：第一个参数是一个字符串，表示要创建的 URL 地址；第二个参数是一个可选的基础 URL，用于解析相对路径。在这个语句中，第一个参数是一个模板字符串，其中包含一个占位符 ${image}，它会被变量 image 的值所替换，生成一个字符串 ../assets/img/xxx，其中 xxx 是变量 image 的值。这个字符串表示了一个相对于当前模块的上级目录的 assets/img 目录中的某个文件的路径。 318 | 319 | //第二个参数是 import.meta.url，这是一个元数据属性，表示当前模块的绝对 URL 地址。它在解析相对路径时非常有用。 320 | 321 | //但是它本身并不是一个字符串，而是一个包含了 URL 信息的对象。如果想要使用这个 URL 地址，需要使用 href 属性获取它的字符串表示 322 | } 323 | ``` 324 | 325 | 326 | 327 | - 对于底部`tabBar`，由于数据就一点，我就直接抽取出来放在这里，不从服务器中获取。写完抽取到提前创建好的`data`文件中，取名随意(但记得语义化，方便找) 328 | 329 | ```javascript 330 | //对于底部tabBar，由于数据就一点，我就直接抽取出来放在这里，不从服务器中获取 331 | const tabbarData = [ 332 | { 333 | id:1, 334 | text:"首页", 335 | image:"tabbar/tab_home.png", 336 | imageActive:"tabbar/tab_home_active.png",//活跃的图片 337 | path:"/home" 338 | }, 339 | { 340 | id:2, 341 | text:"收藏", 342 | image:"tabbar/tab_favor.png", 343 | imageActive:"tabbar/tab_favor_active.png", 344 | path:"/favor" 345 | }, 346 | { 347 | id:3, 348 | text:"订单", 349 | image:"tabbar/tab_order.png", 350 | imageActive:"tabbar/tab_order_active.png", 351 | path:"/order" 352 | }, 353 | { 354 | id:4, 355 | text:"消息", 356 | image:"tabbar/tab_message.png", 357 | imageActive:"tabbar/tab_message.png", 358 | path:"/message" 359 | } 360 | ] 361 | 362 | //将数据暴露出去 363 | export default tabbarData 364 | ``` 365 | 366 | ```vue 367 | 1467 | ``` 1468 | 1469 | - 然后就可以开始创建我们的`百度地图`组件了，命名为`detail_07-map.vue` 1470 | - 我们在使用百度地图相关内容的时候，js部分不能直接写在`setup`中，因为Vue3的`setup`语法糖用于替代 Vue 2 中的 `created()` 和 `beforeCreate()` 钩子函数，它在组件实例创建之前执行。所以我们如果写在setup中，内容的元素不一定已经挂载上去了 1471 | - 我们这部分内容需要写在`onMount`生命周期中 1472 | 1473 | - 具体的步骤跟API就记录在百度地图的文档中：[jspopularGL | 百度地图API SDK (baidu.com)](https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld) 1474 | 1475 | ### TabControl的展示和监听滚动过程 1476 | 1477 | > 封装成通用组件`tab-control`，然后对原本`hook`文件夹中监听距离顶部的逻辑`useScroll.js`做出修改，原本的逻辑是监听窗口距离顶部的变化，现在我们需要用到里面的元素(也就是最外层的div)距离顶部的距离，所以进一步修改将其通用性增强.然后在`details`组件中使用 1478 | 1479 | - 还记得前面刚开始封装hook中这份逻辑中需要区分的点吗 1480 | 1481 | ![image-20230329131614840](./Vue3-H5_images/image-20230329131614840.png) 1482 | 1483 | - 需要注意的点： 1484 | - 在展示`TabControl`的时候，需要先使用CSS进行固定定位将其固定在当前视口最上面，不然就算进行判断显示出来，没有固定住会在原本的位置上，就算拖动到该显示出`TabControl`的时候也看不到他，不是没有展示出来，而是展示出来了但是没有固定住已经被滑动出可视范围外了 1485 | 1486 | ### TabControl的交互和滚动位置 1487 | 1488 | > 这个交互我们就需要将`TabControl`栏跟内容进行一个交互关联起来，才能够在点击按键的时候能够跳转到对应的位置中去。我们通过`defineEmit`将`TabControl`的索引拿到传递给`父组件`跟`父组件TabControl`的内容联系起来 1489 | > 1490 | > 1491 | 1492 | - 在所有的组件中加上一个`ref`，然后再js中获取对应的值(由于我们直接在组件中使用ref，如果直接.value获取到的是组件本身，需要在`.value`的基础上继续`.$el`拿到他的根元素) 1493 | - 如果单纯的`ref`的话，我们需要给每个组件(除了第一个)都绑定上，然后重复的进行上面的操作。这样的操作肯定是不好的，会产生大量重复的代码。所以我们使用`:ref`动态绑定函数 1494 | - 但是这里下拉的时候会不断的刷新，对于性能是一个比较大的浪费，优化的方式就是在刷新的这部分内容中加上`memo`，设置只有`mainPart`发生了变化才会更新 1495 | 1496 | > `memo` 函数是 Vue 3 的一个新特性，用于优化渲染性能。它在 Vue 3 的 Composition API 中提供，用于缓存并跟踪响应式值的更改，从而在值发生更改时仅重新计算依赖它的副作用。 1497 | > 1498 | > `memo` 是一个接受一个工厂函数作为参数的函数。工厂函数会在第一次调用时执行，其返回值将被缓存。后续调用将返回缓存的结果，直到依赖的响应式值发生变化。一旦依赖项发生变化，工厂函数将再次执行，缓存并返回新的结果 1499 | 1500 | - 我们`TabControl`的内容是由`:title`进行控制的，如果直接写入一个数组来显示内容的话，其实就跟下面`描述`、`设施`、`评论`等内容没有关联上了 1501 | - 所以我们可以给组件再加上一个`name`属性，然后将`name`属性跟`:ref`关联上，组成一对的键值对 1502 | 1503 | - **这一步比较复杂**，需要慢慢构思 1504 | 1505 | ## 移动适配-打包 1506 | 1507 | ### 详情页返回小bug逻辑判断 1508 | 1509 | > 目前的情况下在详情页中点击左上角的返回会报错。这是因为在点击返回的时候，详情页的组件都会进行销毁，但是里面的`getSectionRef`会被触发，但是组件已经销毁了，获取到组件的信息就是`null`，从`null`中获取值就会报错，所以只需要在这里加个判断就行 1510 | 1511 | ![image-20230329173859199](./Vue3-H5_images/image-20230329173859199.png) 1512 | 1513 | ### 页面滚动匹配TabControl索引 1514 | 1515 | - 目前有个问题还未解决，当我们详情页下拉的时候，`TabControl`索引应该要随着下拉内容的变化而变化，而不是只有点击的时候才进行变化 1516 | - 需求： 页面滚动， 滚动到一定的位置时， 显示正确的tabControl的索引(标题) 1517 | 1518 | 1519 | 1520 | - 其中用到的算法 1521 | 1522 | ```javascript 1523 | // 页面滚动，滚动时匹配对应的tabControl 1524 | const tabControlRef = ref() 1525 | watch(scrollTop, async (newValue) => {//距离顶点 新的值 1526 | const els = Object.values(sectionEls.value)//获取tabControl身上的根元素 1527 | const values = els.map(el => el.offsetTop)//映射根元素距离顶部的距离 1528 | // 根据newValue去匹配想要的索引 1529 | let index = values.length - 1//获取tabControl对应的索引值 1530 | for (let i = 0; i < values.length; i++) { 1531 | if(values[i] > newValue + 44){ 1532 | index = i - 1 1533 | break 1534 | } 1535 | } 1536 | await nextTick(); 1537 | // 调用子组件实例的方法 1538 | if(tabControlRef.value) tabControlRef.value.setCurrentIndex(index); 1539 | }) 1540 | ``` 1541 | 1542 | - 在父组件中的子组件上添加`ref`的作用是获取子组件的实例 1543 | 1544 | ### 点击tabs的跳动bug处理 1545 | 1546 | 在前面中，百度地图的API会报警告如下： 1547 | 1548 | ![image-20230330003258697](./Vue3-H5_images/image-20230330003258697.png) 1549 | 1550 | - 解决方法： 1551 | 1552 | - 在`index.html`中修改一下内容，警告就能消除掉 1553 | 1554 | ![image-20230330003504231](./Vue3-H5_images/image-20230330003504231.png) 1555 | 1556 | - 我们在点击`tabControl`的时候，如果从第一个跳转到第三个，或者就是说跳转的中间还有其他内容的话，会有一个颜色一格一格跳过去的停顿感，而不是直接一步到位跳转过去。 1557 | - 解决方案：声明一个变量`isClick`(存放布尔值)，当我们触发点击事件的时候，就不执行过渡效果(跳过我们设置触发滑动索引的算法)，滑动的时候就触发过渡效果 1558 | - 但是当我们通过点击滚动到对应位置的时候，需要将`isClick`设置回去，不然点击完后继续滑动`TabControl`就没办法动态颜色切换了。所以我们需要再设置一个变量`currentDistance`，然后在点击事件里面将当前距离顶部的距离赋值给这个变量，然后在滑动索引算法中判断`currentDistance`和通过滑动距离顶部的值是否相同，相同的话就将`isClick`重新设置为false 1559 | 1560 | ### 切换页面的keep-alive操作 1561 | 1562 | > 我们在首页浏览界面的时候，发送网络请求分页请求数据的时候，如果突然跳转到其他界面去的话，再重新回到首页，网络请求又会重新加载一遍，但是网络请求分页的时候，只会从我们刚刚跳转前请求第几个分页数据的基础上继续向后请求，忽略掉了前面分页1、2、3...的请求 1563 | > 1564 | > - 原因是：我们离开了首页组件的时候，会销毁组件的。但是其中的数据保存在`useHomeStore`中，这是全局的数据 1565 | > - 可以使用保持活跃的`keep-alive`让首页不被销毁，这个就可以在`App.vue`组件中定义这一点了，但是这个`keep-alive`是需要有name的，但是我们setup语法糖中是没办法定义name名字的，不过这个问题目前已经被`B站UP主小满zs`解决了，通过他写的插件可以实现`