dlh/shop_uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善店铺街

Browse Source
This commit is contained in:
wangxiaowei 2024-10-21 18:15:28 +08:00
parent 39fd3d0880
commit aef36eb840
2 changed files with 97 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
bundle_b/pages/local_shop_street/index.vue
View File

@ -10,46 +10,62 @@
<view class="flex row">
<u-search wrap-bg-color="transparent" :hideRight="true" :show-action="true"
action-text="取消" :animation="true" @focus="hideRight=false"
@blur="hideRight=true" @custom="handleCancel" placeholder="搜索商品名称" height="64"
@blur="hideRight=true" @custom="handleCancel" placeholder="搜索店铺名称" height="64"
@search="search" v-model="keyword"></u-search>
</view>
</view>
</view>
</u-navbar>
<view class="filter">
<view :class="'flex ' + (active == 1 ? 'active': '')" @tap="sortChange(1)">
<view class="mr-0">距离</view>
<view class="flex col-center">
<view class="arrow-icon flex-col col-center row-center">
<u-icon name="arrow-up-fill"
:color="distanceSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
<u-icon name="arrow-down-fill"
:color="distanceSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
</view>
</view>
</view>
</view>
</view>
</u-sticky>
</view>
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
:up="upOption" :fixed="false">
<view class="list">
<view class="list-block" v-for="(item, index) in 10" :key="index">
<view class="list-block" v-for="(item, index) in list" :key="index">
<router-link :to="{path: '/bundle_b/pages/local_shop/local_shop_detail', query: {id: 1}}">
<view class="goods-info flex row-between flex-align-top">
<view class="flex flex-align-top w-70">
<u-image class="goods-image" :width="width" :height="width" border-radius="20rpx"
:src="'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/local_life_shop_logo/202408161404202828e3337.png'"></u-image>
:src="item.shopLogo"></u-image>
<view class="shop-name m-l-20">
<view class="line-1 bold">东龙汇超市</view>
<view>0 件商品</view>
<view class="line-1 bold">{{item.shopName}}</view>
<view>{{item.goods_count >= 1 ? item.goods_count + ' 件商品' : '暂无商品'}}</view>
</view>
</view>
<view class="flex w-30 row-end">
<u-icon name="map-fill" size="32"></u-icon>
<text>距离1.1km</text>
<text>距离{{item.distance}}</text>
</view>
</view>
</router-link>
<view class="m-t-20">
<view class="m-t-20" v-if="item.street_goods && item.street_goods.length > 0">
<scroll-view style="white-space: nowrap;" scroll-x="true" scroll-with-animation="true">
<view class="flex item">
<router-link v-for="(value, k) in 1" :key="k" class="p-r-20" :to="{path: '/pages/goods_details/goods_details', query: {id: 1}}">
<u-image :src="'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/local_life_shop_logo/202408161404202828e3337.png'" width="160rpx" height="160rpx" border-radius="10rpx"></u-image>
<view class="price-block flex">
<view class="bold text-center price">
<text class="sm">￥</text>
<text class="xl">100</text>
</view>
<router-link v-for="(v, k) in item.street_goods" :key="k" class="p-r-20"
:to="{path: '/pages/goods_details/goods_details', query: {id: 1}}">
<u-image
:src="v.url"
width="160rpx" height="160rpx" border-radius="10rpx"></u-image>
<view class="price-block flex m-t-20">
<price-format :first-size="36" :second-size="24" color="#FF2C3C" :price="v.price" />
<price-format v-if="v.original_price" class="line-through m-l-10" :price="v.original_price"
:color="colorConfig.muted" :first-size="24" :second-size="24"
:subscript-size="24" />
</view>
</router-link>
</view>
@ -75,7 +91,10 @@
import {
getStreetlList
} from '@/api/local_store.js'
import {
sortType,
} from '@/utils/type';
export default {
mixins: [MescrollMixin],
data() {
@ -84,8 +103,7 @@
enable: true,
navSwiperH: '',
currentSwiper: 0,
active: 1,
distanceSort: 'asc',
active: 0,
navList: [],
downOption: {
auto: false,
@ -103,11 +121,12 @@
}
},
list: [],
width: '120rpx'
width: '120rpx',
keyword: '',
distanceSort: sortType.NONE,
}
},
onLoad(options) {
console.log(this.cityInfo)
if (this.cityInfo && this.cityInfo.gcj02_lng) {
this.mescroll.resetUpScroll()
}
@ -116,6 +135,26 @@
...mapActions(['initLocationFunc', 'getCartNum']),
...mapMutations(['setCityInfo']),
// 排序
sortChange(i) {
const {
distanceSort
} = this
this.active = parseInt(i)
switch (i) {
case 1:
if (distanceSort == sortType.DESC || distanceSort == sortType.NONE) {
this.distanceSort = sortType.ASC
} else if (distanceSort == sortType.ASC) {
this.distanceSort = sortType.DESC
}
break;
}
this.mescroll.resetUpScroll()
},
upCallback(page) {
const pageNum = page.num;
const pageSize = page.size;
@ -182,10 +221,32 @@
}
.shop-name {
width: calc(100% - 140rpx);
width: calc(100% - 160rpx);
}
.row-end {
justify-content: flex-end;
}
.filter {
display: flex;
align-items: center;
padding: 30rpx;
.arrow-icon {
transform: scale(0.5);
}
view {
margin-right: 20rpx;
}
.mr-0 {
margin-right: 0;
}
.active {
color: $-color-primary;
}
}
</style>

27
pages/local_life/local_life.vue
View File

@ -22,11 +22,11 @@
</u-navbar>
</view>
</u-sticky>
<view v-if="appConfig.show_local_notice">
<u-notice-bar mode="horizontal" :list="[appConfig.local_notice]"></u-notice-bar>
</view>
<view class="m-t-20">
<ad-swipers :pid="7" height="312rpx" radius="20rpx" padding="0 30rpx"></ad-swipers>
</view>
@ -64,7 +64,7 @@
</view>
</view>
</view>
<view :class="'flex ' + (active == 2 ? 'active': '')" @tap="sortChange(2)">
<view class="mr-0">距离</view>
<view class="flex col-center">
@ -94,6 +94,9 @@
<text class="primary">￥</text>
<price-format :show-subscript="false" :first-size="36" :second-size="24" color="#FF2C3C"
:price="item.price" />
<price-format v-if="item.original_price" class="line-through m-l-10"
:price="item.original_price" :color="colorConfig.muted" :first-ize="24"
:second-ize="24" :subscript-ize="24" />
</view>
</view>
</template>
@ -109,9 +112,11 @@
</view>
<view class="m-t-20"> {{item.title}} </view>
<view class="m-t-20">
<text class="primary">￥</text>
<price-format :show-subscript="false" :first-size="36" :second-size="24" color="#FF2C3C"
<price-format :first-size="36" :second-size="24" color="#FF2C3C"
:price="item.price" />
<price-format v-if="item.original_price" class="line-through m-l-10"
:price="item.original_price" :color="colorConfig.muted" :first-size="24"
:second-size="24" :subscript-size="24" />
</view>
</view>
</template>
@ -158,7 +163,7 @@
},
upOption: {
toTop: {
bottom: '300rpx'
bottom: '300rpx'
},
auto: false,
empty: {
@ -253,7 +258,7 @@
distanceSort,
keyword
} = this
if (this.cityInfo && this.cityInfo.gcj02_lng) {
getLocalList({
page_size: pageSize,
@ -284,14 +289,14 @@
this.$refs.uWaterfall.clear()
this.mescroll.resetUpScroll()
},
// 排序
sortChange(i) {
const {
moneySort,
distanceSort
} = this
this.active = parseInt(i)
switch (i) {
case 1:
@ -303,7 +308,7 @@
this.distanceSort = sortType.NONE
break;
case 2:
case 2:
if (distanceSort == sortType.DESC || distanceSort == sortType.NONE) {
this.distanceSort = sortType.ASC
} else if (distanceSort == sortType.ASC) {
@ -312,7 +317,7 @@
this.moneySort = sortType.NONE
break;
}
this.search()
},