97 lines
1.7 KiB
Vue
97 lines
1.7 KiB
Vue
<template>
|
|
<view class="list">
|
|
<view class="item" v-for="item in list" :key="item.id" @click="selectGoods(item)">
|
|
<image class="cover" :src="item.coverImg" mode="aspectFill"></image>
|
|
<view class="info">
|
|
<text class="name">{{ item.name }}</text>
|
|
<text class="price">￥{{ returnPrice(item.skuList) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { getProductList } from '@/http/api/product.js';
|
|
|
|
// 商品列表
|
|
const list = ref([]);
|
|
|
|
// 选择商品
|
|
function selectGoods(item) {
|
|
uni.setStorageSync('packageSelectGoods', {
|
|
id: item.id,
|
|
coverImg: item.coverImg,
|
|
name: item.name,
|
|
price: returnPrice(item.skuList)
|
|
});
|
|
uni.navigateBack();
|
|
}
|
|
|
|
// 返回规格最高价
|
|
function returnPrice(skuList) {
|
|
return Math.max(...skuList.map((item) => item.salePrice));
|
|
}
|
|
|
|
// 获取商品列表
|
|
async function getProductListAjax() {
|
|
try {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
});
|
|
const res = await getProductList();
|
|
list.value = res;
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
uni.hideLoading();
|
|
}
|
|
|
|
onLoad(() => {
|
|
getProductListAjax();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.list {
|
|
padding: 28upx;
|
|
.item {
|
|
padding: 28upx;
|
|
background-color: #fff;
|
|
border-radius: 20upx;
|
|
display: flex;
|
|
&:not(:first-child) {
|
|
margin-top: 28upx;
|
|
}
|
|
.cover {
|
|
$size: 120upx;
|
|
width: $size;
|
|
height: $size;
|
|
border-radius: 16upx;
|
|
}
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12upx;
|
|
padding-left: 28upx;
|
|
.name {
|
|
font-size: 32upx;
|
|
color: #333;
|
|
}
|
|
.price {
|
|
font-size: 32upx;
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|