<template>
|
<view class="list">
|
<view class='uni-list--waterfall'>
|
<view class="uni-list ">
|
<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
|
<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
|
<view :border="!formData.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
|
v-for="item in data" :key="item.id" @click="addGoods(item.id)">
|
<!-- 通过header插槽定义列表左侧图片 -->
|
|
<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
|
<image :src="item.goods_thumb" mode="aspectFill"></image>
|
</view>
|
<view class="shop">
|
<view>
|
<view class="uni-title">
|
<text class="uni-ellipsis-2">{{ item.name }}</text>
|
</view>
|
<!-- <view>
|
<text class="uni-tag hot-tag">{{ item.goods_tip }}</text>
|
<text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
|
</view> -->
|
</view>
|
<view>
|
<view class="shop-price">
|
<text>¥</text>
|
<text class="shop-price-text">{{ item.goods_price }}</text>
|
<text>.00</text>
|
</view>
|
<view class="uni-flex-row">
|
<view class="uni-note">{{ item.comment_count || 0 }}条评论 月销量 {{
|
item.month_sell_count || 0 }}
|
</view>
|
<view class="uni-note ellipsis">
|
<text class="uni-link">上架</text>
|
|
<text class="uni-link" style="color:red;">删除</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 通过body插槽定义商品布局 -->
|
|
</view>
|
</view>
|
</view>
|
|
<button type="default" class="btn" @click="addGoods('')">
|
<u-icon name="plus-circle"></u-icon>
|
添加商品
|
</button>
|
<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
|
<uni-load-more v-if="loading || formData.status === 'noMore'" :status="formData.status" />
|
|
</view>
|
</template>
|
|
<script>
|
|
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
|
export default {
|
components: { UIcon },
|
data() {
|
return {
|
formData: {
|
waterfall: false, // 布局方向切换
|
status: 'loading', // 加载状态
|
},
|
data: [
|
{
|
"id": 122,
|
"goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg",
|
"name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机",
|
"goods_price": "699.00",
|
"goods_tip": "热卖中",
|
"tag": [
|
"热卖中",
|
]
|
},
|
{
|
"id": 123,
|
"goods_thumb": "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/83df593e6ba448ddbe6685d928e6fa65.jpg",
|
"name": "【爆款】Apple iPhone 11 (A2223) 64GB 深空灰色 移动联通电信4G手机",
|
"goods_price": "699.00",
|
"goods_tip": "热卖中",
|
"tag": [
|
"热卖中",
|
]
|
}
|
],
|
formData: {
|
status: 'loading', // 加载状态
|
},
|
tipShow: false // 是否显示顶部提示框
|
};
|
},
|
onLoad() { },
|
methods: {
|
load(data, ended) {
|
if (ended) {
|
this.formData.status = 'noMore'
|
}
|
},
|
addGoods(id) {
|
console.log("addGoods:" + id);
|
|
uni.navigateTo({
|
url: `/pages/goods-manager/addGoods/addGoods${id ? "?id=" + id : ""}`,
|
});
|
}
|
|
},
|
/**
|
* 下拉刷新回调函数
|
*/
|
onPullDownRefresh() {
|
this.formData.status = 'more'
|
|
},
|
/**
|
* 上拉加载回调函数
|
*/
|
onReachBottom() {
|
|
}
|
};
|
</script>
|
|
|
<style lang="scss" scoped>
|
@import './goodsList.scss';
|
|
page {
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
background-color: #efeff4;
|
min-height: 100%;
|
height: auto;
|
}
|
|
.tips {
|
color: #67c23a;
|
font-size: 14px;
|
line-height: 40px;
|
text-align: center;
|
background-color: #f0f9eb;
|
height: 0;
|
opacity: 0;
|
transform: translateY(-100%);
|
transition: all 0.3s;
|
}
|
|
.tips-ani {
|
transform: translateY(0);
|
height: 40px;
|
opacity: 1;
|
}
|
|
.shop {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.shop-picture {
|
width: 110px;
|
height: 110px;
|
}
|
|
.shop-picture-column {
|
width: 100%;
|
height: 170px;
|
margin-bottom: 10px;
|
}
|
|
.shop-price {
|
margin-top: 5px;
|
font-size: 12px;
|
color: #ff5a5f;
|
}
|
|
.shop-price-text {
|
font-size: 16px;
|
}
|
|
.hot-tag {
|
background: #ff5a5f;
|
border: none;
|
color: #fff;
|
}
|
|
.button-box {
|
height: 30px;
|
line-height: 30px;
|
font-size: 12px;
|
background: #007AFF;
|
color: #fff;
|
}
|
|
.uni-flex-row {
|
display: flex;
|
|
}
|
|
.uni-link {
|
flex-shrink: 0;
|
margin-right: 10px;
|
}
|
|
.ellipsis {
|
margin-left: auto;
|
display: flex;
|
overflow: hidden;
|
}
|
|
.uni-ellipsis-1 {
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.uni-ellipsis-2 {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
|
|
// 默认加入 scoped ，所以外面加一层提升权重
|
.list {
|
.uni-list--waterfall {
|
|
/* #ifndef H5 || APP-VUE */
|
// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
|
/deep/ .uni-list {
|
/* #endif */
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
padding: 5px;
|
box-sizing: border-box;
|
|
/* #ifdef H5 || APP-VUE */
|
// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
|
/deep/
|
/* #endif */
|
.uni-list-item--waterfall {
|
// width: 50%;
|
display: flex;
|
box-sizing: border-box;
|
margin-bottom: 10px;
|
background-color: white;
|
padding: 10px;
|
|
.uni-list-item__container {
|
padding: 5px;
|
flex-direction: column;
|
}
|
}
|
|
/* #ifndef H5 || APP-VUE */
|
}
|
|
/* #endif */
|
}
|
}
|
|
|
.btn {
|
background: $light-color;
|
position: fixed;
|
width: 690rpx;
|
bottom: 60rpx;
|
height: 80rpx;
|
left: 30rpx;
|
font-size: 30rpx;
|
line-height: 80rpx;
|
|
.u-icon {
|
margin-right: 10rpx;
|
}
|
}
|
</style>
|
