|
|
@@ -1,110 +1,145 @@
|
|
|
<template>
|
|
|
- <view style="padding-bottom: 32rpx;">
|
|
|
- <view class='searchGood'>
|
|
|
- <view class='search acea-row row-between-wrapper'>
|
|
|
- <view class='input acea-row row-between-wrapper'>
|
|
|
- <text class='iconfont icon-sousuo' style="color:#999;"></text>
|
|
|
- <input type='text' confirm-type="search" :value='searchValue' :focus="focus" placeholder='点击搜索商品' placeholder-class='placeholder'
|
|
|
- @input="setValue" @confirm="searchBut" />
|
|
|
+ <view style="padding-bottom: 32rpx">
|
|
|
+ <view class="searchGood">
|
|
|
+ <view class="search acea-row row-between-wrapper">
|
|
|
+ <view class="input acea-row row-between-wrapper">
|
|
|
+ <text class="iconfont icon-sousuo" style="color: #999"></text>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ confirm-type="search"
|
|
|
+ :value="searchValue"
|
|
|
+ :focus="focus"
|
|
|
+ placeholder="点击搜索商品"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ @input="setValue"
|
|
|
+ @confirm="searchBut"
|
|
|
+ />
|
|
|
</view>
|
|
|
- <view class='bnt' @tap='searchBut'>搜索</view>
|
|
|
+ <view class="bnt" @tap="searchBut">搜索</view>
|
|
|
</view>
|
|
|
-<!-- <view class='title'>热门搜索</view>-->
|
|
|
-<!-- <view class='list acea-row'>-->
|
|
|
-<!-- <block v-for="(item, index) in hotSearchList" :key="index">-->
|
|
|
-<!-- <view class='item' @tap='setHotSearchValue(item.title)'>{{ item.title }}</view>-->
|
|
|
-<!-- </block>-->
|
|
|
-<!-- </view>-->
|
|
|
- <view class='line'></view>
|
|
|
+ <!-- <view class='title'>热门搜索</view>-->
|
|
|
+ <!-- <view class='list acea-row'>-->
|
|
|
+ <!-- <block v-for="(item, index) in hotSearchList" :key="index">-->
|
|
|
+ <!-- <view class='item' @tap='setHotSearchValue(item.title)'>{{ item.title }}</view>-->
|
|
|
+ <!-- </block>-->
|
|
|
+ <!-- </view>-->
|
|
|
+ <view class="line"></view>
|
|
|
<!-- <goodList :bastList="calculatedProducts" v-if="bastList.length > 0"></goodList> -->
|
|
|
- <view class="index-product-wrapper">
|
|
|
- <view
|
|
|
- class="list-box animated"
|
|
|
- :class="bastList.length > 0 ? 'fadeIn on' : ''"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="item"
|
|
|
- v-for="(item, index) in calculatedProducts"
|
|
|
- :key="index"
|
|
|
- @click="goDetail(item)"
|
|
|
- >
|
|
|
- <view class="pictrue">
|
|
|
- <image :src="item.image" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text-info">
|
|
|
- <view class="title" >
|
|
|
- <view class="text line1">{{ item.storeName }}</view>
|
|
|
- <view class="weight">{{ item.weight }}g</view>
|
|
|
- </view>
|
|
|
- <view class="bottom-row">
|
|
|
- <!-- <text class="price">工费: {{ item.price }}/克</text> -->
|
|
|
- <text class="price">¥ {{ item.totalPrice }}</text>
|
|
|
- <text class="sales" style="color:#666;">
|
|
|
- 销量:{{ Number(item.sales || 0) + Number(item.ficti || 0) }}件
|
|
|
- </text>
|
|
|
- <!-- <view class="txt">券</view> -->
|
|
|
- </view>
|
|
|
- <view class="bottom-row">
|
|
|
- <!-- <text class="price">工费: {{ item.price }}/克</text> -->
|
|
|
- <text class="sales">工费:¥{{ item.totalLaborCost }}</text>
|
|
|
- <text class="sales">
|
|
|
- 附加费:¥{{ item.additionalAmount }}
|
|
|
- </text>
|
|
|
- <!-- <view class="txt">券</view> -->
|
|
|
- </view>
|
|
|
- <template v-if="item?.merchant?.id && merchantNameShow()">
|
|
|
- <view class="merchantInfo" @click.stop="toMerchant(item.merchant.id)">
|
|
|
- <image class="merchantLogo" :src="item.merchant.merchantLogo" mode="scaleToFill"></image>
|
|
|
- <text class="merchantName">{{item.merchant.merchantName}}</text>
|
|
|
- <uni-icons style="margin-left: 10rpx;" type="right" size="16" color="#999999"></uni-icons>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class='loadingicon acea-row row-center-wrapper' v-if="bastList.length > 0">
|
|
|
- <text class='loading iconfont icon-jiazai' :hidden='loading == false'></text>{{ loadTitle }}
|
|
|
+ <view class="index-product-wrapper">
|
|
|
+ <view
|
|
|
+ class="list-box animated"
|
|
|
+ :class="bastList.length > 0 ? 'fadeIn on' : ''"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="item"
|
|
|
+ v-for="(item, index) in calculatedProducts"
|
|
|
+ :key="index"
|
|
|
+ @click="goDetail(item)"
|
|
|
+ >
|
|
|
+ <view class="pictrue">
|
|
|
+ <image :src="item.image" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text-info">
|
|
|
+ <view class="title">
|
|
|
+ <view class="text line1">{{ item.storeName }}</view>
|
|
|
+ <view class="weight">{{ item.weight }}g</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-row">
|
|
|
+ <!-- <text class="price">工费: {{ item.price }}/克</text> -->
|
|
|
+ <text class="price">¥ {{ item.totalPrice }}</text>
|
|
|
+ <text class="sales" style="color: #666">
|
|
|
+ 销量:{{
|
|
|
+ Number(item.sales || 0) + Number(item.ficti || 0)
|
|
|
+ }}件
|
|
|
+ </text>
|
|
|
+ <!-- <view class="txt">券</view> -->
|
|
|
+ </view>
|
|
|
+ <view class="bottom-row">
|
|
|
+ <!-- <text class="price">工费: {{ item.price }}/克</text> -->
|
|
|
+ <text class="sales">工费:¥{{ item.totalLaborCost }}</text>
|
|
|
+ <text class="sales">
|
|
|
+ 附加费:¥{{ item.additionalAmount }}
|
|
|
+ </text>
|
|
|
+ <!-- <view class="txt">券</view> -->
|
|
|
+ </view>
|
|
|
+ <template v-if="item?.merchant?.id && merchantNameShow()">
|
|
|
+ <view
|
|
|
+ class="merchantInfo"
|
|
|
+ @click.stop="toMerchant(item.merchant.id)"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ class="merchantLogo"
|
|
|
+ :src="item.merchant.merchantLogo"
|
|
|
+ mode="scaleToFill"
|
|
|
+ ></image>
|
|
|
+ <text class="merchantName">{{
|
|
|
+ item.merchant.merchantName
|
|
|
+ }}</text>
|
|
|
+ <uni-icons
|
|
|
+ style="margin-left: 10rpx"
|
|
|
+ type="right"
|
|
|
+ size="16"
|
|
|
+ color="#999999"
|
|
|
+ ></uni-icons>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="loadingicon acea-row row-center-wrapper"
|
|
|
+ v-if="bastList.length > 0"
|
|
|
+ >
|
|
|
+ <text
|
|
|
+ class="loading iconfont icon-jiazai"
|
|
|
+ :hidden="loading == false"
|
|
|
+ ></text
|
|
|
+ >{{ loadTitle }}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class='noCommodity'>
|
|
|
- <view class='pictrue' v-if="bastList.length == 0 && isbastList">
|
|
|
- <image :src="HTTP_REQUEST_URL_IMG+'noSearch.png'"></image>
|
|
|
+ <view class="noCommodity">
|
|
|
+ <view class="pictrue" v-if="bastList.length == 0 && isbastList">
|
|
|
+ <image :src="HTTP_REQUEST_URL_IMG + 'noSearch.png'"></image>
|
|
|
</view>
|
|
|
-<!-- <recommend :hostProduct='hostProduct' v-if="bastList.length == 0"></recommend>-->
|
|
|
+ <!-- <recommend :hostProduct='hostProduct' v-if="bastList.length == 0"></recommend>-->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {computed, ref} from 'vue'
|
|
|
-import { onShow, onReachBottom,onLoad } from '@dcloudio/uni-app'
|
|
|
-import { getSearchKeyword, getProductslist, getProductHot } from '@/api/store.js'
|
|
|
-import goodList from '@/components/goodList'
|
|
|
-import recommend from '@/components/recommend'
|
|
|
+import { computed, ref } from "vue";
|
|
|
+import { onShow, onReachBottom, onLoad } from "@dcloudio/uni-app";
|
|
|
+import {
|
|
|
+ getSearchKeyword,
|
|
|
+ getProductslist,
|
|
|
+ getProductHot,
|
|
|
+} from "@/api/store.js";
|
|
|
+import goodList from "@/components/goodList";
|
|
|
+import recommend from "@/components/recommend";
|
|
|
import { HTTP_REQUEST_URL_IMG } from "@/config/app";
|
|
|
-// 获取实时金价
|
|
|
+// 获取实物金价
|
|
|
import useRealGoldPrice from "@/hooks/useRealGoldPrice";
|
|
|
import { useAppStore } from "@/stores/app";
|
|
|
|
|
|
const appStore = useAppStore();
|
|
|
|
|
|
// 响应式数据
|
|
|
-const hostProduct = ref([])
|
|
|
-const searchValue = ref('')
|
|
|
-const focus = ref(true)
|
|
|
-const bastList = ref([])
|
|
|
-const hotSearchList = ref([])
|
|
|
-const limit = ref(8)
|
|
|
-const page = ref(1)
|
|
|
-const loading = ref(false)
|
|
|
-const loadend = ref(false)
|
|
|
-const loadTitle = ref('加载更多')
|
|
|
-const hotPage = ref(1)
|
|
|
-const isScroll = ref(true)
|
|
|
-const isbastList = ref(false)
|
|
|
-const query = ref({})
|
|
|
-const merchantId = ref('')
|
|
|
+const hostProduct = ref([]);
|
|
|
+const searchValue = ref("");
|
|
|
+const focus = ref(true);
|
|
|
+const bastList = ref([]);
|
|
|
+const hotSearchList = ref([]);
|
|
|
+const limit = ref(8);
|
|
|
+const page = ref(1);
|
|
|
+const loading = ref(false);
|
|
|
+const loadend = ref(false);
|
|
|
+const loadTitle = ref("加载更多");
|
|
|
+const hotPage = ref(1);
|
|
|
+const isScroll = ref(true);
|
|
|
+const isbastList = ref(false);
|
|
|
+const query = ref({});
|
|
|
+const merchantId = ref("");
|
|
|
// 实时价格处理
|
|
|
const {
|
|
|
realGoldprice, // 黄金实时销售价(基础)
|
|
|
@@ -119,20 +154,28 @@ const goDetail = async (item) => {
|
|
|
url: `/pages/goods/goods_details/index?id=${item.id}`,
|
|
|
});
|
|
|
} catch (err) {
|
|
|
- console.error('Navigation error:', err);
|
|
|
+ console.error("Navigation error:", err);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const merchantNameShow = () => {
|
|
|
- if(!appStore.userInfo ||(appStore.userInfo && !appStore.userInfo.merchant && !appStore.merchantId && !appStore.userInfo.lastVisitedMerchantId)){
|
|
|
+ if (
|
|
|
+ !appStore.userInfo ||
|
|
|
+ (appStore.userInfo &&
|
|
|
+ !appStore.userInfo.merchant &&
|
|
|
+ !appStore.merchantId &&
|
|
|
+ !appStore.userInfo.lastVisitedMerchantId)
|
|
|
+ ) {
|
|
|
return true;
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
return false;
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
const toMerchant = (merchantId) => {
|
|
|
- uni.navigateTo({ url:"/pages/merchantCenters/merchant?merchantId="+merchantId });
|
|
|
-}
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/merchantCenters/merchant?merchantId=" + merchantId,
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
const calculatedProducts = computed(() => {
|
|
|
// 计算逻辑与原代码一致,但基于响应式数据 products
|
|
|
@@ -148,67 +191,69 @@ const calculatedProducts = computed(() => {
|
|
|
|
|
|
const totalLaborCost = Number(product.totalLaborCost);
|
|
|
const additionalAmount = Number(product.additionalAmount);
|
|
|
- const totalPrice = (totalLaborCost+additionalAmount).toFixed(2);
|
|
|
+ const totalPrice = (totalLaborCost + additionalAmount).toFixed(2);
|
|
|
|
|
|
return {
|
|
|
...product,
|
|
|
calculatedTotal: formattedTotal, // 新增计算结果字段
|
|
|
- totalPrice
|
|
|
+ totalPrice,
|
|
|
};
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 获取热搜
|
|
|
function getRoutineHotSearch() {
|
|
|
- getSearchKeyword().then(res => {
|
|
|
- hotSearchList.value = res.data
|
|
|
- })
|
|
|
+ getSearchKeyword().then((res) => {
|
|
|
+ hotSearchList.value = res.data;
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
// 获取商品列表
|
|
|
function getProductList() {
|
|
|
- if (loadend.value || loading.value) return
|
|
|
- loading.value = true
|
|
|
- loadTitle.value = ''
|
|
|
+ if (loadend.value || loading.value) return;
|
|
|
+ loading.value = true;
|
|
|
+ loadTitle.value = "";
|
|
|
getProductslist({
|
|
|
...query.value,
|
|
|
keyword: searchValue.value,
|
|
|
page: page.value,
|
|
|
limit: limit.value,
|
|
|
- merchantId:merchantId.value,
|
|
|
- }).then(res => {
|
|
|
- const list = res.data.list
|
|
|
- const isLoadend = list.length < limit.value
|
|
|
- // 合并数组
|
|
|
- bastList.value = (bastList.value || []).concat(list)
|
|
|
- loading.value = false
|
|
|
- loadend.value = isLoadend
|
|
|
- loadTitle.value = isLoadend ? "我是有底线的" : "加载更多"
|
|
|
- page.value += 1
|
|
|
- isbastList.value = true
|
|
|
- }).catch(() => {
|
|
|
- loading.value = false
|
|
|
- loadTitle.value = '加载更多'
|
|
|
+ merchantId: merchantId.value,
|
|
|
})
|
|
|
+ .then((res) => {
|
|
|
+ const list = res.data.list;
|
|
|
+ const isLoadend = list.length < limit.value;
|
|
|
+ // 合并数组
|
|
|
+ bastList.value = (bastList.value || []).concat(list);
|
|
|
+ loading.value = false;
|
|
|
+ loadend.value = isLoadend;
|
|
|
+ loadTitle.value = isLoadend ? "我是有底线的" : "加载更多";
|
|
|
+ page.value += 1;
|
|
|
+ isbastList.value = true;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ loadTitle.value = "加载更多";
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
// 获取热门商品
|
|
|
function getHostProduct() {
|
|
|
- if (!isScroll.value) return
|
|
|
- getProductHot(hotPage.value, limit.value).then(res => {
|
|
|
- isScroll.value = res.data.list.length >= limit.value
|
|
|
- hostProduct.value = hostProduct.value.concat(res.data.list)
|
|
|
- hotPage.value += 1
|
|
|
- })
|
|
|
+ if (!isScroll.value) return;
|
|
|
+ getProductHot(hotPage.value, limit.value).then((res) => {
|
|
|
+ isScroll.value = res.data.list.length >= limit.value;
|
|
|
+ hostProduct.value = hostProduct.value.concat(res.data.list);
|
|
|
+ hotPage.value += 1;
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
// 设置热搜值
|
|
|
function setHotSearchValue(val) {
|
|
|
- searchValue.value = val
|
|
|
- page.value = 1
|
|
|
- loadend.value = false
|
|
|
- bastList.value = []
|
|
|
- getProductList()
|
|
|
+ searchValue.value = val;
|
|
|
+ page.value = 1;
|
|
|
+ loadend.value = false;
|
|
|
+ bastList.value = [];
|
|
|
+ getProductList();
|
|
|
}
|
|
|
|
|
|
// 输入框赋值
|
|
|
@@ -218,47 +263,50 @@ function setValue(event) {
|
|
|
|
|
|
// 搜索按钮
|
|
|
function searchBut() {
|
|
|
- focus.value = false
|
|
|
+ focus.value = false;
|
|
|
if (searchValue.value.length > 0) {
|
|
|
- page.value = 1
|
|
|
- loadend.value = false
|
|
|
- bastList.value = []
|
|
|
- uni.showLoading({ title: '正在搜索中' })
|
|
|
- getProductList()
|
|
|
- uni.hideLoading()
|
|
|
+ page.value = 1;
|
|
|
+ loadend.value = false;
|
|
|
+ bastList.value = [];
|
|
|
+ uni.showLoading({ title: "正在搜索中" });
|
|
|
+ getProductList();
|
|
|
+ uni.hideLoading();
|
|
|
} else {
|
|
|
// 这里假设 $util.Tips 已全局挂载
|
|
|
- uni.$u.toast('请输入要搜索的商品')
|
|
|
+ uni.$u.toast("请输入要搜索的商品");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 生命周期
|
|
|
onShow(() => {
|
|
|
- getRoutineHotSearch()
|
|
|
+ getRoutineHotSearch();
|
|
|
getHostProduct();
|
|
|
-
|
|
|
-})
|
|
|
-onLoad((options)=>{
|
|
|
+});
|
|
|
+onLoad((options) => {
|
|
|
query.value = options || {};
|
|
|
- merchantId.value =query.value.merchantId || appStore.merchantId||appStore.userInfo?.merchant?.id||'';
|
|
|
- if(options && options.cid){
|
|
|
- getProductList()
|
|
|
+ merchantId.value =
|
|
|
+ query.value.merchantId ||
|
|
|
+ appStore.merchantId ||
|
|
|
+ appStore.userInfo?.merchant?.id ||
|
|
|
+ "";
|
|
|
+ if (options && options.cid) {
|
|
|
+ getProductList();
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
onReachBottom(() => {
|
|
|
if (bastList.value.length > 0) {
|
|
|
- getProductList()
|
|
|
+ getProductList();
|
|
|
} else {
|
|
|
- getHostProduct()
|
|
|
+ getHostProduct();
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
// margin-top: var(--status-bar-height);
|
|
|
- background-color: #F9F7F0;
|
|
|
+ background-color: #f9f7f0;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
@@ -273,7 +321,7 @@ page {
|
|
|
|
|
|
.searchGood .search .input {
|
|
|
width: 598rpx;
|
|
|
- background-color: #F9F7F0;
|
|
|
+ background-color: #f9f7f0;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 0 35rpx;
|
|
|
box-sizing: border-box;
|
|
|
@@ -303,12 +351,6 @@ page {
|
|
|
color: #282828;
|
|
|
}
|
|
|
|
|
|
-.searchGood .title {
|
|
|
- // font-size: 28rpx;
|
|
|
- // color: #999;
|
|
|
- // margin: 50rpx 30rpx 25rpx 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
.searchGood .list {
|
|
|
padding-left: 10rpx;
|
|
|
}
|
|
|
@@ -387,13 +429,13 @@ page {
|
|
|
background-color: #ef4800;
|
|
|
border-radius: 5rpx;
|
|
|
}
|
|
|
- .text{
|
|
|
+ .text {
|
|
|
width: 80%;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
- .weight{
|
|
|
- background-color: rgba(197, 128, 3, 0.10);
|
|
|
- color: #C58003;
|
|
|
+ .weight {
|
|
|
+ background-color: rgba(197, 128, 3, 0.1);
|
|
|
+ color: #c58003;
|
|
|
font-size: 24rpx;
|
|
|
padding: 8rpx 16rpx;
|
|
|
border-radius: 8rpx;
|
|
|
@@ -420,24 +462,23 @@ page {
|
|
|
.sales {
|
|
|
font-size: 22rpx;
|
|
|
white-space: nowrap;
|
|
|
- flex-shrink: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
color: #999999;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .merchantInfo{
|
|
|
+ .merchantInfo {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
height: 40rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
}
|
|
|
- .merchantLogo{
|
|
|
+ .merchantLogo {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 8rpx;
|
|
|
}
|
|
|
- .merchantName{
|
|
|
+ .merchantName {
|
|
|
font-size: 24rpx;
|
|
|
color: #333;
|
|
|
}
|