346 lines
10 KiB
Vue
346 lines
10 KiB
Vue
<template>
|
||
<view class="components">
|
||
<!-- 推荐区域 -->
|
||
<view class="user_title" v-if="apiType == 5">
|
||
<text class="user_name">为您推荐</text>
|
||
</view>
|
||
|
||
<!-- 商品区域 -->
|
||
<view class="shop_view" v-if="shopList.length">
|
||
<view class="shop_view_ul">
|
||
<block v-for="(item,index) in shopList" :key="item.id">
|
||
<block v-if="item.isEven">
|
||
<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
|
||
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
|
||
<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
|
||
<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" @load="imageLoad" lazy-load @click="JumpType(swiperitem)"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
|
||
<view class="shop_view_img">
|
||
<!-- <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> -->
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
|
||
<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
|
||
<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
|
||
<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
<view class="shop_view_ul">
|
||
<block v-for="(item,index) in shopList" :key="item.id">
|
||
<block v-if="!item.isEven">
|
||
<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
|
||
<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
|
||
<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
|
||
<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" lazy-load @load="imageLoad" @click="JumpType(swiperitem)"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
|
||
<view class="shop_view_img">
|
||
<!-- <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> -->
|
||
<view class="shop_view_img_u">
|
||
<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
|
||
</view>
|
||
</view>
|
||
<view class="shop_view_cont">
|
||
<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
|
||
<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
|
||
<view class="shop_view_cont_tag">
|
||
<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
|
||
<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
|
||
</view>
|
||
<view class="shop_view_cont_bottom">
|
||
<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
|
||
<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
|
||
<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="load_desc">{{decs_com}}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { loads } from '@/utils/index.js'
|
||
import { frontproduct } from '@/server/api';
|
||
import { computed,ref,onMounted,defineEmits,watch} 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 { skudetail,cartsave } from '@/server/api.js'
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const { token } = storeToRefs(counterStore);
|
||
const shopList = ref([]);
|
||
const total_com = ref(0);
|
||
const decs_com = ref('');
|
||
const pages_com = ref(0);
|
||
const limits_com = ref(10);
|
||
// 1. 定义可触发的事件名
|
||
const emit = defineEmits(['add-message']);
|
||
const props = defineProps({
|
||
apiType:{
|
||
type:Number,
|
||
default:1 //1为首页5为热门推荐
|
||
}
|
||
})
|
||
const api_product=()=>{
|
||
pages_com.value = pages_com.value + 1;
|
||
decs_com.value = "—— 加载中... ——";
|
||
const params = {
|
||
page:pages_com.value,
|
||
limit:limits_com.value
|
||
}
|
||
return frontproduct(props.apiType,params).then(({data}) => {
|
||
total_com.value = data.total;
|
||
decs_com.value = '—— 上拉加载更多 ——'
|
||
data.list.forEach((item,index)=>{
|
||
item.isEven = index % 2 === 0
|
||
})
|
||
shopList.value = shopList.value.concat(data.list);
|
||
if(data.list.length < 10){
|
||
decs_com.value = '—— 嗷呜，已经到底啦 ——';
|
||
}
|
||
}).catch(({message}) => {
|
||
decs_com.value = `—— ${message||'网络异常'} ——`;
|
||
})
|
||
}
|
||
|
||
//跳转统一处理
|
||
const JumpType=(item,type)=>{
|
||
if(type == 1){
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail?id=${item}`//商品详情
|
||
})
|
||
}else{
|
||
const { jumpUrl,jumpIds,jumpType } = item;
|
||
if(jumpType == 0 || jumpType == 2 || jumpType == 4) return false;
|
||
let url = "";
|
||
if(jumpType == 1){
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail?id=${jumpIds}`//商品详情
|
||
})
|
||
}else if(jumpType == 3){
|
||
uni.switchTab({
|
||
url:`/pages/classify/classify`//商品列表
|
||
})
|
||
}
|
||
}
|
||
}
|
||
//加购物车
|
||
const addCart=(i,type)=>{
|
||
emit('add-message',i,type)
|
||
}
|
||
//生命周期钩子
|
||
onMounted(() => {
|
||
api_product();
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
shopList.value = [];
|
||
total_com.value = 0;
|
||
decs_com.value = '';
|
||
pages_com.value = 0;
|
||
api_product();
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
api_product();
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.user_title{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 60rpx;
|
||
.user_name{
|
||
color: #FF0000;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
margin: 0 10rpx 0 10rpx;
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.user_title::before{
|
||
content: "";
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-image: url('../../static/user/leftimg.png');
|
||
background-size: cover;
|
||
margin-right: 10rpx;
|
||
}
|
||
.user_title::after{
|
||
vertical-align: middle;
|
||
content: "";
|
||
display: inline-block;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-image: url('../../static/user/rightimg.png');
|
||
background-size: cover;
|
||
margin-left: 10rpx;
|
||
}
|
||
// 商品区域样式
|
||
.shop_view{
|
||
// margin-top: 10rpx;
|
||
padding: 13rpx 20rpx 0rpx 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.shop_view_ul{
|
||
width: 346rpx;
|
||
.shop_view_li{
|
||
background-color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
width: 100%;
|
||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||
margin-bottom: 20rpx;
|
||
.shop_view_li_swiper{
|
||
width: 100%;
|
||
height: 504rpx;
|
||
.shop_view_li_swiper_item{
|
||
width: 100%;
|
||
.shop_view_li_swiper_img_url{
|
||
width: 100%;
|
||
height: 504rpx;
|
||
display: block;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.shop_view_img{
|
||
// width: 100%;
|
||
position: relative;
|
||
padding: 10rpx 10rpx 0rpx 10rpx;
|
||
.shop_view_tag{
|
||
width: 66rpx;
|
||
height: 42rpx;
|
||
position: absolute;
|
||
z-index: 2;
|
||
right: -15rpx;
|
||
top: 20rpx;
|
||
background: url(../../static/tag_img.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
.shop_view_tag_text{
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
height: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.shop_view_img_u{
|
||
width: 100%;
|
||
.shop_view_img_url{
|
||
width: 100%;
|
||
height: 300rpx;
|
||
display: block;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.shop_view_cont{
|
||
padding: 20rpx;
|
||
.shop_view_cont_title{
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
min-height: 80rpx;
|
||
}
|
||
.shop_view_cont_title text{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
word-break: break-all;
|
||
}
|
||
.shop_view_cont_desc{
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
.shop_view_cont_desc text{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
word-break: break-all;
|
||
}
|
||
.shop_view_cont_tag{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.shop_view_cont_tag_text{
|
||
border-radius: 6rpx;
|
||
border: 1px solid #FF6868;
|
||
padding: 0rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
color: #ff6868;
|
||
font-size: 18rpx;
|
||
margin-top: 10rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.shop_view_cont_bottom{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.shop_view_cont_price{
|
||
font-size: 32rpx;
|
||
color: red;
|
||
font-weight: 500;
|
||
}
|
||
.shop_view_cont_cart{
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.shop_view_cont_cart_img{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.shop_view_bcg{
|
||
background-color: inherit;
|
||
}
|
||
}
|
||
}
|
||
.load_desc{
|
||
font-size: 28rpx;
|
||
color: #aaa;
|
||
text-align: center;
|
||
padding-top: 30rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
</style> |