<template>
|
<!-- 列表页面 -->
|
<view class="trade-list">
|
<view class="category-detail flex">
|
<view class="flex1 info">
|
<view class="title flex">
|
<view>牛油果泡泡</view>
|
<view>
|
<image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
|
|
</view>
|
</view>
|
<view class="desc">
|
规格：10支/扎
|
</view>
|
<view class="desc">
|
估重：1.3kg/扎
|
</view>
|
<view class="desc">
|
包袋：棉袋
|
</view>
|
</view>
|
<view class="info-price">
|
<view class="title">当日均价</view>
|
<view class="price">19.66</view>
|
<view class="flex desc">
|
<view class="m-l-a m-r-5">+0.76</view>
|
<view class="m-r-a m-l-5">+4.02%</view>
|
</view>
|
</view>
|
</view>
|
<view class="" style="min-height: calc(100vh - 260rpx);">
|
<no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
|
<view v-else>
|
<!-- 查询条件 -->
|
<view class="component-filter-container">
|
<view class="flex1">
|
等级<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
|
</view>
|
<view class="flex1">
|
等级<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
|
</view>
|
<view class="flex1">
|
好卖家<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
|
</view>
|
<view class="flex1">
|
颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
|
</view>
|
<view class="flex1">
|
筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
|
</view>
|
</view>
|
</view>
|
<view class="item flex" v-for="(item,index) of list" :key="index"
|
@click="toDetail(item)">
|
<view class="img">
|
<image class="img img100"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ff/fff3027bd0a146478fd1f0aae816a028%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240710224139.png">
|
</image>
|
<view class="level">
|
A级
|
</view>
|
</view>
|
|
<view class="m-l-12 info-container flex1">
|
<view class="title">
|
橙色芭比
|
<view class="price">
|
￥6.60/扎
|
</view>
|
</view>
|
<view class="shop-name">
|
牛油果泡泡·白色
|
</view>
|
<view class="other-info flex">
|
<view class="m-r-15">
|
已售:7
|
</view>
|
<view class="m-r-15">
|
剩余:13
|
</view>
|
<view class="m-r-15">
|
1支/扎
|
</view>
|
</view>
|
<view class="bottom-buttons flex">
|
|
<view class="icons flex">
|
<uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
|
@click.stop="mulnum(item)"></uni-icons>
|
<view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
|
<uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"
|
@click.stop="addnum(item)"></uni-icons>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
|
<view class="icon-shop" v-if="list&&list.length>0">
|
<!-- 购物图标 -->
|
<!-- 如果有购买的东西，就要附带数字了 -->
|
<view v-if="shoptotal>0" class="number">
|
{{shoptotal}}
|
</view>
|
</view>
|
</view>
|
|
<!-- 判断是否到底了，自动吧 -->
|
<footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
query: {
|
category: '',
|
},
|
shoptotal:0,
|
list:[{},{},{}]
|
}
|
},
|
async onLoad(options) {
|
// this.list = [{},{}]
|
console.log('options', options)
|
this.query.category = options.categoryId || ''
|
this.listApi = '/api/customer/flower/list'
|
// await this.getList('post')
|
// this.
|
},
|
onReachBottom() {
|
this.page.current += 1
|
this.getMore('post')
|
},
|
async onPullDownRefresh() {
|
this.page.current = 1
|
await this.getList('post')
|
uni.stopPullDownRefresh()
|
},
|
methods: {
|
toDetail(item) {
|
uni.navigateTo({
|
url: `/sub_pages/customer/trade/detail?id=${item.id}`
|
})
|
},
|
mulnum(item) {
|
if (item.shopnum > 0) {
|
item.shopnum -= 1
|
}
|
this.shoptotal -= 1
|
this.$forceUpdate()
|
|
},
|
addnum(item) {
|
if (item.shopnum) {
|
item.shopnum += 1
|
} else {
|
item.shopnum = 1
|
}
|
this.shoptotal += 1
|
this.$forceUpdate()
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.trade-list {
|
padding: 24rpx 30rpx;
|
|
.category-detail {
|
padding: 22rpx 38rpx;
|
margin-bottom: 10rpx;
|
background-color: #E1F0E7;
|
border-radius: 8rpx;
|
|
.info {
|
.title {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #000000;
|
line-height: 50rpx;
|
}
|
|
.icon-kf {
|
width: 44rpx;
|
height: 44rpx;
|
}
|
|
.desc {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #666666;
|
line-height: 34rpx;
|
margin-top: 8rpx;
|
}
|
}
|
|
.info-price {
|
padding: 22rpx;
|
text-align: center;
|
background: #FFFFFF;
|
border-radius: 8rpx;
|
min-width: 260rpx;
|
.title {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #000000;
|
line-height: 34rpx;
|
}
|
|
.price {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #BF0000;
|
line-height: 44rpx;
|
margin-top: 12rpx;
|
}
|
|
.desc {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #666666;
|
line-height: 34rpx;
|
margin-top: 12rpx;
|
}
|
}
|
}
|
|
.item {
|
margin-top: 20rpx;
|
background: #FFFFFF;
|
border-radius: 8rpx;
|
padding: 10rpx;
|
|
.info-container {
|
position: relative;
|
|
.other-info {
|
margin-top: 6rpx;
|
font-size: 24rpx;
|
color: #666666;
|
line-height: 34rpx;
|
text-align: left;
|
}
|
|
.shop-name {
|
margin-top: 14rpx;
|
font-size: 24rpx;
|
color: #666666;
|
line-height: 34rpx;
|
}
|
|
.bottom-buttons {
|
// width: 400rpx;
|
position: absolute;
|
bottom: 0rpx;
|
|
left: 0;
|
right: 0;
|
|
.icons {
|
margin-left: auto;
|
margin-right: 0rpx;
|
margin-top: -10rpx;
|
|
.curnums {
|
line-height: 60rpx;
|
margin-left: 12rpx;
|
margin-right: 12rpx;
|
}
|
}
|
}
|
|
.title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #000000;
|
line-height: 44rpx;
|
margin-top: 8rpx;
|
position: relative;
|
|
.price {
|
position: absolute;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #CF0000;
|
line-height: 40rpx;
|
top: 0;
|
right: 0;
|
}
|
}
|
|
}
|
|
.img {
|
width: 206rpx;
|
height: 206rpx;
|
border-radius: 8rpx;
|
position: relative;
|
|
.level {
|
position: absolute;
|
width: 66rpx;
|
height: 44rpx;
|
background: #20613D;
|
left: 0;
|
top: 0;
|
border-top-left-radius: 8rpx;
|
border-bottom-right-radius: 8rpx;
|
color: #FFFFFF;
|
line-height: 44rpx;
|
font-size: 24rpx;
|
text-align: center;
|
}
|
|
}
|
|
|
}
|
|
.icon-shop {
|
position: absolute;
|
position: fixed;
|
|
background-image: url('../../../static/images/customer/gwc.png');
|
width: 140rpx;
|
height: 140rpx;
|
// box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
|
border-radius: 50%;
|
right: 40rpx;
|
bottom: 300rpx;
|
background-size: 100% 100%;
|
|
.number {
|
width: 30rpx;
|
height: 30rpx;
|
background: #F20000;
|
line-height: 30rpx;
|
text-align: center;
|
position: absolute;
|
right: 14rpx;
|
top: 14rpx;
|
color: #FFFFFF;
|
border-radius: 50%;
|
font-size: 24rpx;
|
}
|
|
}
|
|
}
|
</style>
|
