|
@@ -1,34 +1,14 @@
|
|
|
<!--
|
|
<!--
|
|
|
个人首页
|
|
个人首页
|
|
|
- 未登录:搜店名 + 推荐花店(写死,分测试/正式)引导选店进店;已登录管理真实花店,并在列表加载后接收尚未通知的红包到账提醒。
|
|
|
|
|
|
|
+ 未登录:推荐花店(写死,分测试/正式)引导选店进店;已登录管理真实花店,并在列表加载后接收尚未通知的红包到账提醒。
|
|
|
已登录时每次打开或回到前台都会重新请求花店列表,保证余额、休店状态与列表本身是最新的。
|
|
已登录时每次打开或回到前台都会重新请求花店列表,保证余额、休店状态与列表本身是最新的。
|
|
|
-->
|
|
-->
|
|
|
<template>
|
|
<template>
|
|
|
<view class="page-container">
|
|
<view class="page-container">
|
|
|
- <!-- 未登录:搜索花店 + 推荐花店 + 底部选店引导 -->
|
|
|
|
|
|
|
+ <!-- 未登录:推荐花店 + 底部选店引导,不提供搜店 -->
|
|
|
<block v-if="loginStyle == 0">
|
|
<block v-if="loginStyle == 0">
|
|
|
<no-network-bar></no-network-bar>
|
|
<no-network-bar></no-network-bar>
|
|
|
<view class="guest-home">
|
|
<view class="guest-home">
|
|
|
- <!-- 仅搜花店名称,不搜城市;icon.search -->
|
|
|
|
|
- <view class="guest-search-bar">
|
|
|
|
|
- <text class="iconfont iconsearch guest-search-icon"></text>
|
|
|
|
|
- <input
|
|
|
|
|
- class="guest-search-input"
|
|
|
|
|
- type="text"
|
|
|
|
|
- confirm-type="search"
|
|
|
|
|
- :value="guestKeyword"
|
|
|
|
|
- placeholder="搜索花店名称"
|
|
|
|
|
- placeholder-class="guest-search-ph"
|
|
|
|
|
- @input="onGuestKeywordInput"
|
|
|
|
|
- @confirm="searchGuestShops"
|
|
|
|
|
- />
|
|
|
|
|
- <text
|
|
|
|
|
- v-if="guestKeyword"
|
|
|
|
|
- class="guest-search-clear"
|
|
|
|
|
- @click="clearGuestSearch"
|
|
|
|
|
- >清除</text>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
<view class="guest-banner">
|
|
<view class="guest-banner">
|
|
|
<image
|
|
<image
|
|
|
class="guest-banner-img"
|
|
class="guest-banner-img"
|
|
@@ -61,7 +41,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view v-else class="guest-search-empty">
|
|
<view v-else class="guest-search-empty">
|
|
|
- <text>{{ guestSearching ? '搜索中...' : '未找到相关花店' }}</text>
|
|
|
|
|
|
|
+ <text>{{ guestRecommendLoading ? '加载中...' : '暂无推荐花店' }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
@@ -216,7 +196,7 @@ import TuiListCell from "@/components/plugin/list-cell";
|
|
|
import TuiListView from "@/components/plugin/list-view";
|
|
import TuiListView from "@/components/plugin/list-view";
|
|
|
import AppHbArrival from "@/components/module/app-hb-arrival.vue";
|
|
import AppHbArrival from "@/components/module/app-hb-arrival.vue";
|
|
|
import { getList, delHd } from "@/api/hd";
|
|
import { getList, delHd } from "@/api/hd";
|
|
|
-import { searchShop, recommendShop } from "@/api/shop";
|
|
|
|
|
|
|
+import { recommendShop } from "@/api/shop";
|
|
|
import { checkArrival } from "@/api/hb";
|
|
import { checkArrival } from "@/api/hb";
|
|
|
import { share } from "@/mixins";
|
|
import { share } from "@/mixins";
|
|
|
import AppAvatarModule from "@/components/module/app-avatar";
|
|
import AppAvatarModule from "@/components/module/app-avatar";
|
|
@@ -248,12 +228,6 @@ export default {
|
|
|
hbArrivalInfo: {},
|
|
hbArrivalInfo: {},
|
|
|
hbArrivalIds: [],
|
|
hbArrivalIds: [],
|
|
|
hbArrivalLoading: false,
|
|
hbArrivalLoading: false,
|
|
|
- /** 未登录搜店 */
|
|
|
|
|
- guestKeyword: "",
|
|
|
|
|
- guestSearchKeyword: "",
|
|
|
|
|
- guestSearchList: [],
|
|
|
|
|
- guestSearching: false,
|
|
|
|
|
- guestSearchTimer: null,
|
|
|
|
|
/** 推荐花店(/shop/recommend,后端写死) */
|
|
/** 推荐花店(/shop/recommend,后端写死) */
|
|
|
guestRecommendList: [],
|
|
guestRecommendList: [],
|
|
|
guestBannerUrl: "",
|
|
guestBannerUrl: "",
|
|
@@ -262,15 +236,11 @@ export default {
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
...mapGetters({ userInfo: "getUser", loginInfo: "getLoginInfo" }),
|
|
...mapGetters({ userInfo: "getUser", loginInfo: "getLoginInfo" }),
|
|
|
- /** 有搜索词时展示接口结果,否则展示推荐 */
|
|
|
|
|
guestShopList() {
|
|
guestShopList() {
|
|
|
- if (this.guestSearchKeyword) {
|
|
|
|
|
- return this.guestSearchList;
|
|
|
|
|
- }
|
|
|
|
|
return this.guestRecommendList;
|
|
return this.guestRecommendList;
|
|
|
},
|
|
},
|
|
|
guestListTitle() {
|
|
guestListTitle() {
|
|
|
- return this.guestSearchKeyword ? "搜索结果" : "推荐花店";
|
|
|
|
|
|
|
+ return "推荐花店";
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
@@ -372,60 +342,6 @@ export default {
|
|
|
const base = (this.constant && this.constant.imgUrl) || "";
|
|
const base = (this.constant && this.constant.imgUrl) || "";
|
|
|
return String(base).replace(/\/$/, "") + (raw.charAt(0) === "/" ? raw : "/" + raw);
|
|
return String(base).replace(/\/$/, "") + (raw.charAt(0) === "/" ? raw : "/" + raw);
|
|
|
},
|
|
},
|
|
|
- /**
|
|
|
|
|
- * 搜索框输入:防抖后按花店名称请求 /shop/search
|
|
|
|
|
- */
|
|
|
|
|
- onGuestKeywordInput(e) {
|
|
|
|
|
- const val = (e && e.detail && e.detail.value != null) ? String(e.detail.value) : "";
|
|
|
|
|
- this.guestKeyword = val;
|
|
|
|
|
- if (this.guestSearchTimer) {
|
|
|
|
|
- clearTimeout(this.guestSearchTimer);
|
|
|
|
|
- }
|
|
|
|
|
- this.guestSearchTimer = setTimeout(() => {
|
|
|
|
|
- this.guestSearchTimer = null;
|
|
|
|
|
- this.searchGuestShops();
|
|
|
|
|
- }, 350);
|
|
|
|
|
- },
|
|
|
|
|
- /** 清空搜索,恢复推荐列表 */
|
|
|
|
|
- clearGuestSearch() {
|
|
|
|
|
- this.guestKeyword = "";
|
|
|
|
|
- this.guestSearchKeyword = "";
|
|
|
|
|
- this.guestSearchList = [];
|
|
|
|
|
- if (this.guestSearchTimer) {
|
|
|
|
|
- clearTimeout(this.guestSearchTimer);
|
|
|
|
|
- this.guestSearchTimer = null;
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- /**
|
|
|
|
|
- * 按店名搜索零售花店(xhShop ptStyle=1)
|
|
|
|
|
- */
|
|
|
|
|
- searchGuestShops() {
|
|
|
|
|
- const keyword = String(this.guestKeyword || "").trim();
|
|
|
|
|
- if (!keyword) {
|
|
|
|
|
- this.clearGuestSearch();
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- this.guestSearching = true;
|
|
|
|
|
- this.guestSearchKeyword = keyword;
|
|
|
|
|
- return searchShop({ keyword }).then((res) => {
|
|
|
|
|
- const list = (res && res.code == 1 && res.data && Array.isArray(res.data.list))
|
|
|
|
|
- ? res.data.list
|
|
|
|
|
- : [];
|
|
|
|
|
- // 统一字段:搜索结果用 avatar 当封面
|
|
|
|
|
- this.guestSearchList = list.map((row) => ({
|
|
|
|
|
- shopId: Number(row.account || row.id) || 0,
|
|
|
|
|
- name: row.name || "",
|
|
|
|
|
- address: row.address || "",
|
|
|
|
|
- businessHours: row.businessHours || "",
|
|
|
|
|
- cover: row.avatar || "",
|
|
|
|
|
- avatar: row.avatar || ""
|
|
|
|
|
- }));
|
|
|
|
|
- }).catch(() => {
|
|
|
|
|
- this.guestSearchList = [];
|
|
|
|
|
- }).finally(() => {
|
|
|
|
|
- this.guestSearching = false;
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
/**
|
|
/**
|
|
|
* 进入选中花店首页(未登录可浏览)
|
|
* 进入选中花店首页(未登录可浏览)
|
|
|
* 小程序里 @click="fn(item)" 有时拿到的是事件对象而非列表项,故用 data-shop-id 取值
|
|
* 小程序里 @click="fn(item)" 有时拿到的是事件对象而非列表项,故用 data-shop-id 取值
|
|
@@ -713,53 +629,12 @@ page {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* 未登录首页:搜索 + Banner + 推荐花店 */
|
|
|
|
|
|
|
+/* 未登录首页:Banner + 推荐花店 */
|
|
|
.guest-home {
|
|
.guest-home {
|
|
|
padding: 16upx 24upx 24upx;
|
|
padding: 16upx 24upx 24upx;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.guest-search-bar {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: row;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- height: 72upx;
|
|
|
|
|
- padding: 0 24upx;
|
|
|
|
|
- margin-bottom: 20upx;
|
|
|
|
|
- background: #ffffff;
|
|
|
|
|
- border-radius: 36upx;
|
|
|
|
|
- box-shadow: 0 2upx 12upx rgba(15, 23, 42, 0.04);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.guest-search-icon {
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
- margin-right: 12upx;
|
|
|
|
|
- font-size: 32upx;
|
|
|
|
|
- color: #9ca3af;
|
|
|
|
|
- line-height: 1;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.guest-search-input {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- height: 72upx;
|
|
|
|
|
- font-size: 28upx;
|
|
|
|
|
- color: #111827;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.guest-search-ph {
|
|
|
|
|
- color: #9ca3af;
|
|
|
|
|
- font-size: 28upx;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.guest-search-clear {
|
|
|
|
|
- flex-shrink: 0;
|
|
|
|
|
- margin-left: 12upx;
|
|
|
|
|
- font-size: 24upx;
|
|
|
|
|
- color: $mainColor1;
|
|
|
|
|
- line-height: 1;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.guest-banner {
|
|
.guest-banner {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
height: 200upx;
|
|
height: 200upx;
|