From 8c9fe474d3d43265c33653f17bb411336269dfab Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期五, 26 七月 2024 15:34:22 +0800
Subject: [PATCH] fix bug 接口对接和样式调整
---
pages/home/components/home-top-flow.vue | 278 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 151 insertions(+), 127 deletions(-)
diff --git a/pages/home/components/home-top-flow.vue b/pages/home/components/home-top-flow.vue
index 1b5e2ba..ff32ab2 100644
--- a/pages/home/components/home-top-flow.vue
+++ b/pages/home/components/home-top-flow.vue
@@ -1,149 +1,173 @@
<template>
- <view class="home-top-flow">
- <view class="item flex" v-for="(item,index) of list" :key="index">
- <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="home-top-flow">
+ <view class="item flex" v-for="(item,index) of list" :key="index">
+ <view class="img">
+ <image class="img img100"
+ :src="item.cover">
+ </image>
+ <view class="level">
+ {{ ite.levelStr}}
+ </view>
+ </view>
- <view class="m-l-12 info-container flex1">
- <view class="title">
- 橙色芭比
- <view class="price">
- ￥6.60/扎
- </view>
- </view>
- <view class="tags">
- <view class="tag red">限时抢购</view>
- <view class="tag green">品质严选</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>
- </view>
- </view>
+ <view class="m-l-12 info-container flex1">
+ <view class="title">
+ {{ item.name || '-' }}
+ <view class="price">
+ ￥{{ item.price || 0 }}/扎
+ </view>
+ </view>
+ <view class="tags">
+ <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']" :key="tag">{{
+ tag
+ }}
+ </view>
+ <!-- <view class="tag red">限时抢购</view>-->
+ <!-- <view class="tag green">品质严选</view>-->
+ </view>
+ <view class="shop-name">
+ {{ item.supplierName || '佚名' }}
+ </view>
+ <view class="other-info flex">
+ <view class="m-r-15">
+ 已售:{{ item.sales || 0 }}
+ </view>
+ <view class="m-r-15">
+ 剩余:{{ item.stock || 0 }}
+ </view>
+ <view class="m-r-15">
+ {{ item.unit || 0 }}
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
</template>
<script>
- export default {
- data() {
- return {
- list: [{}, {}, {}, {}]
- };
- }
- }
+export default {
+ data() {
+ return {
+ // list: [{}, {}, {}, {}]
+ };
+ },
+ mounted() {
+ this.listApi = '/api/customer/flower/list'
+ this.page.size = 4
+ this.page.current = 1
+ this.getList('post')
+ },
+ methods: {
+ getList_after() {
+ if (this.list) {
+ for (var item of this.list) {
+ item.tagArr = []
+ if (item.tags) {
+ item.tagArr = item.tags.split(",") || []
+ }
+ }
+ }
+ }
+ },
+
+}
</script>
<style lang="scss">
- .home-top-flow {
- .item {
- margin-top: 20rpx;
- background: #FFFFFF;
- border-radius: 8rpx;
- padding: 10rpx;
+.home-top-flow {
+ .item {
+ margin-top: 20rpx;
+ background: #FFFFFF;
+ border-radius: 8rpx;
+ padding: 10rpx;
- .info-container {
-
- .other-info {
- margin-top: 6rpx;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- text-align: left;
- }
+ .info-container {
- .shop-name {
- margin-top: 14rpx;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- }
+ .other-info {
+ margin-top: 6rpx;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ text-align: left;
+ }
- .tags {
- margin-top: 12rpx;
- display: flex;
+ .shop-name {
+ margin-top: 14rpx;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ }
- .tag {
- min-width: 80rpx;
- padding-left: 20rpx;
- padding-right: 20rpx;
- line-height: 36rpx;
- background: #FEE6E6;
- border-radius: 21rpx;
- font-size: 24rpx;
- color: #CD1212;
- margin-right: 12rpx;
- }
+ .tags {
+ margin-top: 12rpx;
+ display: flex;
- .tag.green {
- color: rgba(110, 159, 102, 1);
- background: rgba(202, 229, 214, 1);
- border-radius: 21rpx;
- // opacity: 0.57;
- }
- }
+ .tag {
+ min-width: 80rpx;
+ padding-left: 20rpx;
+ padding-right: 20rpx;
+ line-height: 36rpx;
+ background: #FEE6E6;
+ border-radius: 21rpx;
+ font-size: 24rpx;
+ color: #CD1212;
+ margin-right: 12rpx;
+ text-align: center;
+ }
- .title {
- font-weight: 600;
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- margin-top: 8rpx;
- position: relative;
+ .tag.green {
+ color: rgba(110, 159, 102, 1);
+ background: rgba(202, 229, 214, 1);
+ border-radius: 21rpx;
+ // opacity: 0.57;
+ }
+ }
- .price {
- position: absolute;
- font-weight: 400;
- font-size: 28rpx;
- color: #CF0000;
- line-height: 40rpx;
- top: 0;
- right: 0;
- }
- }
+ .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;
- }
+ .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;
+ }
+
+ }
- }
- }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3