107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="list" v-for="(item,index) in shop_list" :key="index" @click="shopDetail(item)">
|
||
<view class="list_l">
|
||
<image class="list_img" :src="item.image" mode="widthFix"></image>
|
||
</view>
|
||
<view class="list_r">
|
||
<view class="list_title">{{item.storeName}}</view>
|
||
<!-- <view class="list_tag">
|
||
<view class="list_li">半小时送达</view>
|
||
<view class="list_li">劲辣胃浓</view>
|
||
</view> -->
|
||
<view class="list_bottom">
|
||
<view class="list_price price">{{item.price}}</view>
|
||
<view class="list_shop_cart" @click.stop="addCart(item,1)">
|
||
<image class="list_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty" v-if="img_err && decs">
|
||
<view class="empty_cont">
|
||
<image class="empty_cont_img" :src="img_err" mode="widthFix"></image>
|
||
<view class="empty_cont_title">{{decs}}</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="load_desc">{{decs}}</view>
|
||
<multi
|
||
ref="shopData"
|
||
@add-success="handleAddSuccess"
|
||
@add-error="handleAddError"
|
||
></multi>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { collectuser } from "@/server/api.js"
|
||
import multi from '@/components/multi/multi.vue'
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
const shop_list = ref([])
|
||
const img_err = ref("");
|
||
const decs = ref('');
|
||
const pages = ref(0);
|
||
const limits = ref(10);
|
||
const shopData = ref({});
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
|
||
const api_collectuser=()=>{
|
||
pages.value = pages.value + 1;
|
||
img_err.value = "";
|
||
decs.value = "—— 加载中... ——";
|
||
const params = {
|
||
page:pages.value,
|
||
limit:limits.value
|
||
}
|
||
return collectuser(params).then(({data}) => {
|
||
decs.value = '—— 上拉加载更多 ——';
|
||
shop_list.value = shop_list.value.concat(data.list);
|
||
if(!shop_list.value.length){
|
||
img_err.value = "../../static/Empty/collect.png"
|
||
decs.value = "—— 暂无收藏记录 ——"
|
||
}else if(data.list.length < 10){
|
||
decs.value = '—— 嗷呜，已经到底啦 ——';
|
||
}
|
||
}).catch(({message}) => {
|
||
img_err.value = "../../static/Empty/err.png"
|
||
decs.value = `—— ${message||'网络异常'} ——`;
|
||
})
|
||
}
|
||
//加购物车
|
||
const addCart=(i,type)=>{
|
||
shopData.value.addCart(i,type);
|
||
}
|
||
const shopDetail = (item) =>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail?id=${item.productId}`//商品详情
|
||
})
|
||
}
|
||
// 加入购物车成功回调
|
||
const handleAddSuccess = (data) => {}
|
||
// 加入购物车失败回调
|
||
const handleAddError = (error) => {}
|
||
onLoad((options) => {
|
||
api_collectuser();
|
||
});
|
||
onShow(() => {});
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{
|
||
shop_list.value = [];
|
||
decs.value = '';
|
||
pages.value = 0;
|
||
api_collectuser();
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
api_collectuser();
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |