feat: 添加商品列表和获取位置功能

This commit is contained in:
mkm 2024-07-13 18:00:01 +08:00
parent ae7660e239
commit e2ae755323
6 changed files with 243 additions and 17 deletions

View File

@ -7,3 +7,7 @@ export const goodListApi = (data) => {
export const goodClassListApi = (data) => {
return request.get('/cate/cate/lists', data);
}
export const storeProductListApi = (data) => {
return request.get('/product/product/store_lists', data);
}

View File

@ -318,6 +318,11 @@
{{ popPhone }}
</view>
</up-modal>
<!-- 加载中 -->
<!-- <view style="position: absolute; top: 34%; left: 42%;">
<up-loading-icon text="加载中" textSize="14" show="true" :vertical="true"></up-loading-icon>
</view> -->
</template>
<script setup>
import {
@ -568,7 +573,7 @@
} catch (error) {
uni.hideLoading()
uni.$u.toast('查询失败');
uni.$u.toast(error.msg ?? '查询失败');
}
}
}

View File

@ -92,6 +92,14 @@
"navigationBarTitleText": "购买礼包",
"enablePullDownRefresh": true
}
},
{
"path" : "pages/product/product",
"style" :
{
"navigationBarTitleText" : "商品列表",
"enablePullDownRefresh": true
}
}
],
"subPackages": [{

View File

@ -121,6 +121,7 @@
<up-cell title="预约记录" :isLink="true" url="/pageQuota/asset/lists"></up-cell> -->
<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
<up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></up-cell>
<!-- <up-cell title="商品列表" :isLink="true" url="pages/product/product"></up-cell> -->
</up-cell-group>
</view>

199
pages/product/product.vue Normal file
View File

@ -0,0 +1,199 @@
<template>
<view class="page-box1">
<up-sticky offset-top="5">
<up-subsection :list="list1" :current="where.type" @change="sectionChange"></up-subsection>
<view style="margin: 0 20rpx; background-color: white;">
<up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
:showAction="false"></up-search>
</view>
</up-sticky>
<up-list @scrolltolower="loadMoreGood">
<view v-if="frequentlyList.length>0" class="list">
<up-list-item class="shop-item" v-for="(item, index) in frequentlyList" :key="index">
<image class="shop-img" :src="item.image"></image>
<view class="shop-content" style="width: 490rpx;">
<view class="title">
<view class="name u-line-2">{{item.store_name}}</view>
<view class="name u-line-2" style="color: red;">价格:{{item.price}}</view>
<!-- <view class="tip u-line-1">{{item.spec}}</view> -->
<view class="tip u-line-1">单位:{{item.unit_name}}</view>
<view class="tip u-line-1">规格:{{item.store_info}}</view>
<view class="tip u-line-1" style="justify-content: space-between;" v-if="item.batch">
<view style="display: flex;">
<view class="shop-content-li-l">起批量</view>
<view class="shop-content-li-r">{{ item.batch }}{{ item.unit_name }}起卖</view>
</view>
</view>
</view>
</view>
</up-list-item>
<up-loadmore :status="status" />
</view>
<view v-else style="margin-top: 100rpx;">
<up-empty :text="text"
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</up-empty>
</view>
</up-list>
</view>
</template>
<script setup>
import {
computed,
ref,
watch
} from 'vue';
import {
storeProductListApi
} from "@/api/good.js"
const frequentlyList = ref([]);
let text = '没有商品'
let status = ref('loadmore')
let list1 = ['零售', '商户', '会员']
let keyword = ref('');
const where = ref({
page_no: 1,
page_size: 15,
type: 0,
name: '',
store_name: '',
})
const getProductList = (loadmore = false) => {
if (loadmore) where.value.page_no++;
else where.value.page_no = 1;
storeProductListApi(where.value).then(res => {
if (res.data.lists.length == 0) {
status.value = 'nomore'
} else {
status.value = 'loadmore'
}
if (loadmore) {
frequentlyList.value.push(...res.data.lists);
} else {
frequentlyList.value = res.data.lists;
}
})
}
const sectionChange = (item) => {
where.value.type = item
getProductList()
}
const searchKeyword = () => {
where.value.name = keyword.value;
where.value.store_name = keyword.value;
getProductList();
}
//
const loadMoreGood = () => {
status.value = 'loading'
getProductList(true)
}
getProductList()
</script>
<style lang="scss">
.page-box1 {
position: relative;
.total {
// margin-top: 10rpx;
padding: 0 40rpx;
display: flex;
justify-content: space-between;
// position: sticky;
// top: var(--window-top);
// left: 0;
// right: 0;
z-index: 100000 !important;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
color: #444;
}
.list {
margin: 20rpx;
border-radius: 20rpx;
overflow: hidden;
// height: calc(100vh - var(--window-top) - 400rpx);
// /* #ifdef H5 */
// height: calc(100vh - 44px - 200rpx);
// /* #endif */
.shop-item {
padding: 20rpx;
border-bottom: 1rpx solid #f6f6f6;
background-color: #fff;
display: flex;
.shop-check {
width: 60rpx;
height: 120rpx;
display: flex;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
}
}
.shop-img {
height: 164rpx;
width: 164rpx;
margin-right: 20rpx;
border-radius: 14rpx;
}
.shop-content {
width: 430rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
.name {
font-size: 28rpx;
}
.tip {
color: #999;
font-size: 24rpx;
margin: 12rpx 0;
}
}
.price {
font-size: 30rpx;
font-weight: bold;
color: #F55726;
}
.price-btn {
display: flex;
justify-content: space-between;
.btn {
display: flex;
align-items: center;
.num {
margin: 0 20rpx;
text-align: center;
}
}
}
}
}
}
}
</style>

View File

@ -548,25 +548,34 @@
onLoad(options => {
if (uni.getStorageSync('location')) {
location = JSON.parse(uni.getStorageSync('location'))
checkOrder();
try {
location = JSON.parse(uni.getStorageSync('location'))
checkOrder();
} catch (e) {
getLocation()
}
} else {
uni.getLocation({
type: "gcj02",
success(res) {
location.lat = res.latitude;
location.long = res.longitude;
uni.setStorageSync('location', JSON.stringify(location))
checkOrder();
},
fail() {
uni.$u.toast('获取位置当前失败,为你推荐当前门店')
checkOrder(STORE_INFO.id);
},
complete() {}
})
getLocation()
}
})
const getLocation = () => {
uni.getLocation({
type: "gcj02",
success(res) {
location.lat = res.latitude;
location.long = res.longitude;
uni.setStorageSync('location', JSON.stringify(location))
checkOrder();
},
fail() {
uni.$u.toast('获取位置当前失败,为你推荐当前门店')
checkOrder(STORE_INFO.id);
},
complete() {}
})
}
onShow(() => {
getAddressList();
})