From fb14fa911bde1ed360fe89a1c41d74b158db9ab5 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期五, 09 八月 2024 15:26:28 +0800
Subject: [PATCH] update 花店样式等
---
pages/home/components/home-top-flow.vue | 315 ++++++++++++++++++++++++++++------------------------
1 files changed, 168 insertions(+), 147 deletions(-)
diff --git a/pages/home/components/home-top-flow.vue b/pages/home/components/home-top-flow.vue
index af9a79c..7058577 100644
--- a/pages/home/components/home-top-flow.vue
+++ b/pages/home/components/home-top-flow.vue
@@ -1,173 +1,194 @@
<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="item.cover">
- </image>
- <view class="level">
- {{ ite.levelStr}}
- </view>
- </view>
+ <view class="home-top-flow">
+ <view class="item flex" v-for="(item,index) of list" :key="index" @click="toDetail(item)">
+ <view class="img">
+ <image class="img img100" :class="[!item.stock?'':'']" :src="item.cover" :lazy-load="true">
+ </image>
+ <view class="level">
+ {{ item.levelStr}}
+ </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" v-if="item.tag">
- <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']" :key="tag">{{
+ <view class="m-l-12 info-container flex1">
+ <view class="title">
+ {{ item.name || '-' }}<span v-if="item.categoryStr" class="m-l-10">{{item.categoryStr || '-'}}</span>
+ <view class="price">
+ ￥{{ item.price || 0 }}/扎
+ </view>
+ </view>
+ <view class="tags" v-if="item.tag">
+ <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>
+ </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 class="button-buy m-l-a m-r-0" v-if="item.status=='UP'">
+ 立即抢购
+ </view>
+ </view>
+ </view>
+ </view>
</template>
<script>
-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(",") || []
- }
- }
- }
- }
- },
+ export default {
+ data() {
+ return {
+ // list: [{}, {}, {}, {}]
+ query: {
+ status: 'UP',
+ recommend: true
+ }
+ };
+ },
+ mounted() {
+ this.listApi = '/api/customer/flower/list'
+ this.page.size = 20
+ 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(",") || []
+ }
+ }
+ }
+ },
+ toDetail(item) {
+ uni.navigateTo({
+ url: '/sub_pages/customer/trade/detail?id=' + item.id
+ })
+ }
+ },
-}
+ }
</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 {
+ .info-container {
+ .button-buy {
+ width: 128rpx;
+ height: 48rpx;
+ border-radius: 30rpx;
+ border: 2rpx solid #CF0000;
+ font-size: 24rpx;
+ color: #CF0000;
+ line-height: 48rpx;
+ text-align: center;
+ }
- .other-info {
- margin-top: 6rpx;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- text-align: left;
- }
+ .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;
- }
+ .shop-name {
+ margin-top: 14rpx;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ }
- .tags {
- margin-top: 12rpx;
- display: flex;
+ .tags {
+ margin-top: 12rpx;
+ display: flex;
- .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;
- }
+ .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;
+ }
- .tag.green {
- color: rgba(110, 159, 102, 1);
- background: rgba(202, 229, 214, 1);
- border-radius: 21rpx;
- // opacity: 0.57;
- }
- }
+ .tag.green {
+ color: rgba(110, 159, 102, 1);
+ background: rgba(202, 229, 214, 1);
+ border-radius: 21rpx;
+ // opacity: 0.57;
+ }
+ }
- .title {
- font-weight: 600;
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- margin-top: 8rpx;
- position: relative;
+ .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;
- }
- }
+ .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;
+ .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;
- }
+ .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