|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view>
|
|
|
|
|
|
|
+ <view style="padding-bottom: 32rpx;">
|
|
|
<view class='searchGood'>
|
|
<view class='searchGood'>
|
|
|
<view class='search acea-row row-between-wrapper'>
|
|
<view class='search acea-row row-between-wrapper'>
|
|
|
<view class='input acea-row row-between-wrapper'>
|
|
<view class='input acea-row row-between-wrapper'>
|
|
|
- <text class='iconfont icon-sousuo'></text>
|
|
|
|
|
|
|
+ <text class='iconfont icon-sousuo' style="color:#999;"></text>
|
|
|
<input type='text' confirm-type="search" :value='searchValue' :focus="focus" placeholder='点击搜索商品' placeholder-class='placeholder'
|
|
<input type='text' confirm-type="search" :value='searchValue' :focus="focus" placeholder='点击搜索商品' placeholder-class='placeholder'
|
|
|
@input="setValue" @confirm="searchBut" />
|
|
@input="setValue" @confirm="searchBut" />
|
|
|
</view>
|
|
</view>
|
|
@@ -16,7 +16,53 @@
|
|
|
<!-- </block>-->
|
|
<!-- </block>-->
|
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
|
<view class='line'></view>
|
|
<view class='line'></view>
|
|
|
- <goodList :bastList="calculatedProducts" v-if="bastList.length > 0"></goodList>
|
|
|
|
|
|
|
+ <!-- <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">
|
|
<view class='loadingicon acea-row row-center-wrapper' v-if="bastList.length > 0">
|
|
|
<text class='loading iconfont icon-jiazai' :hidden='loading == false'></text>{{ loadTitle }}
|
|
<text class='loading iconfont icon-jiazai' :hidden='loading == false'></text>{{ loadTitle }}
|
|
|
</view>
|
|
</view>
|
|
@@ -66,6 +112,28 @@ const {
|
|
|
realAgprice, // 白银实时销售价(基础)
|
|
realAgprice, // 白银实时销售价(基础)
|
|
|
} = useRealGoldPrice({});
|
|
} = useRealGoldPrice({});
|
|
|
|
|
|
|
|
|
|
+// Navigation to detail page
|
|
|
|
|
+const goDetail = async (item) => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: `/pages/goods/goods_details/index?id=${item.id}`,
|
|
|
|
|
+ });
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ console.error('Navigation error:', err);
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const merchantNameShow = () => {
|
|
|
|
|
+ if(!appStore.userInfo ||(appStore.userInfo && !appStore.userInfo.merchant && !appStore.merchantId && !appStore.userInfo.lastVisitedMerchantId)){
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }else{
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+const toMerchant = (merchantId) => {
|
|
|
|
|
+ uni.navigateTo({ url:"/pages/merchantCenters/merchant?merchantId="+merchantId });
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const calculatedProducts = computed(() => {
|
|
const calculatedProducts = computed(() => {
|
|
|
// 计算逻辑与原代码一致,但基于响应式数据 products
|
|
// 计算逻辑与原代码一致,但基于响应式数据 products
|
|
|
return bastList.value.map((product) => {
|
|
return bastList.value.map((product) => {
|
|
@@ -189,8 +257,9 @@ onReachBottom(() => {
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
page {
|
|
page {
|
|
|
- margin-top: var(--status-bar-height);
|
|
|
|
|
- background-color: #fff !important;
|
|
|
|
|
|
|
+ // margin-top: var(--status-bar-height);
|
|
|
|
|
+ background-color: #F9F7F0;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.searchGood .search {
|
|
.searchGood .search {
|
|
@@ -199,12 +268,12 @@ page {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.searchGood .search {
|
|
.searchGood .search {
|
|
|
- padding-top: 20rpx;
|
|
|
|
|
|
|
+ padding: 16rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.searchGood .search .input {
|
|
.searchGood .search .input {
|
|
|
width: 598rpx;
|
|
width: 598rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
|
|
|
|
+ background-color: #F9F7F0;
|
|
|
border-radius: 16rpx;
|
|
border-radius: 16rpx;
|
|
|
padding: 0 35rpx;
|
|
padding: 0 35rpx;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
@@ -256,7 +325,127 @@ page {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.searchGood .line {
|
|
.searchGood .line {
|
|
|
- border-bottom: 1rpx solid #eee;
|
|
|
|
|
|
|
+ // border-bottom: 1rpx solid #eee;
|
|
|
margin: 20rpx 30rpx 0 30rpx;
|
|
margin: 20rpx 30rpx 0 30rpx;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.index-product-wrapper {
|
|
|
|
|
+ padding: 0 16rpx;
|
|
|
|
|
+ margin-bottom: 200rpx; /* 为自定义 tabBar 留出空间 */
|
|
|
|
|
+ // min-height: 700rpx;
|
|
|
|
|
+ //background: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ &.on {
|
|
|
|
|
+ min-height: 1500rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .list-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ .item {
|
|
|
|
|
+ width: 48.99%;
|
|
|
|
|
+ //height: 490rpx;
|
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
+ // box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(0, 0, 0, 0.13);
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
|
+
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ .pictrue {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 330rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text-info {
|
|
|
|
|
+ padding: 10rpx 20rpx 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .title {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-items: space-between;
|
|
|
|
|
+ .tip {
|
|
|
|
|
+ width: 61rpx;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ margin-right: 5rpx;
|
|
|
|
|
+ background-color: #ef4800;
|
|
|
|
|
+ border-radius: 5rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .text{
|
|
|
|
|
+ width: 80%;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+ .weight{
|
|
|
|
|
+ background-color: rgba(197, 128, 3, 0.10);
|
|
|
|
|
+ color: #C58003;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .bottom-row {
|
|
|
|
|
+ color: $theme-color;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ margin: 10rpx 0 0;
|
|
|
|
|
+
|
|
|
|
|
+ .price {
|
|
|
|
|
+ padding-bottom: 4rpx;
|
|
|
|
|
+ font-weight: 800;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #f16327;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sales {
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ .merchantInfo{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .merchantLogo{
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .merchantName{
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.on {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|