From e7731f1cf08331d23cd0d27549025a2642caa9ab Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期三, 24 七月 2024 18:58:39 +0800
Subject: [PATCH] update todo还差个订单详情的商品列表展示
---
pages/home/components/home-zones.vue | 338 +++++++++++++++++++++++++++++---------------------------
1 files changed, 176 insertions(+), 162 deletions(-)
diff --git a/pages/home/components/home-zones.vue b/pages/home/components/home-zones.vue
index c9b656f..30b2c15 100644
--- a/pages/home/components/home-zones.vue
+++ b/pages/home/components/home-zones.vue
@@ -1,191 +1,205 @@
<template>
- <view class="home-zones">
- <view class="c">
- <image class="p1 img100" :lazy-load="true" mode="aspectFit"
- src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/eb/eba404b98a224edc82897fe9647902e7%E4%BD%8D%E5%9B%BE@2x%20(4).png">
- </image>
- <view class="c-txt-1">
- <view class="title">婚礼酒店专区</view>
- <view class="flex">
- <view class="desc">查看详情</view>
- <view class="right m-l-5">
- <uni-icons class="icon" type="right" color="#C3B8A0" size="12"></uni-icons>
- </view>
+ <view class="home-zones">
+ <view class="c" v-for="(item,index) of list">
+ <image class="p1 img100 m-t-12" :lazy-load="true" mode="aspectFit"
+ :src="item.bgUrl">
+ </image>
+ <view class="c-txt-1">
+ <view class="title">{{ item.name }}</view>
+ <view class="flex" @click.stop="toDetail(item.id)">
+ <view class="desc">查看详情</view>
+ <view class="right m-l-5">
+ <uni-icons class="icon" type="right" color="#C3B8A0" size="12"></uni-icons>
+ </view>
- </view>
- </view>
- </view>
- <view class="c">
- <image class="p2 img100 m-t-12" :lazy-load="true" mode="aspectFit"
- src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/52/52deec39e6ff47efb4855cda8766f29e%E8%B7%AF%E5%BE%84%204@2x.png">
- </image>
- <view class="c-txt-1" style="top: 60rpx;">
- <view class="title">特惠专区</view>
- <view class="flex">
- <view class="desc">查看详情</view>
- <view class="right m-l-5">
- <uni-icons class="icon" type="right" color="#C3B8A0" size="12"></uni-icons>
- </view>
+ </view>
+ </view>
+ </view>
+ <view class="c" v-if="false">
+ <image class="p2 img100 m-t-12" :lazy-load="true" mode="aspectFit"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/52/52deec39e6ff47efb4855cda8766f29e%E8%B7%AF%E5%BE%84%204@2x.png">
+ </image>
+ <view class="c-txt-1" style="top: 60rpx;">
+ <view class="title">特惠专区</view>
+ <view class="flex">
+ <view class="desc">查看详情</view>
+ <view class="right m-l-5">
+ <uni-icons class="icon" type="right" color="#C3B8A0" size="12"></uni-icons>
+ </view>
- </view>
- </view>
- </view>
- <view class="flex m-t-12">
- <view class="flex1 c m-r-5">
- <image class="p3 img100" :lazy-load="true" mode="aspectFit"
- src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/87/8787940a92524d7a9805a9184946cfaf%E4%BD%8D%E5%9B%BE@2x%20(5).png">
- </image>
- <view class="c-txt-2">
- <view class="title">品质专区</view>
- <view class="flex">
- <view class="desc">查看详情</view>
- <view class="right m-l-5">
- <uni-icons class="icon" type="right" color="#ffffff" size="9"></uni-icons>
- </view>
+ </view>
+ </view>
+ </view>
+ <view class="flex m-t-12" v-if="false">
+ <view class="flex1 c m-r-5">
+ <image class="p3 img100" :lazy-load="true" mode="aspectFit"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/87/8787940a92524d7a9805a9184946cfaf%E4%BD%8D%E5%9B%BE@2x%20(5).png">
+ </image>
+ <view class="c-txt-2">
+ <view class="title">品质专区</view>
+ <view class="flex">
+ <view class="desc">查看详情</view>
+ <view class="right m-l-5">
+ <uni-icons class="icon" type="right" color="#ffffff" size="9"></uni-icons>
+ </view>
- </view>
- </view>
- </view>
- <view class="flex1 c m-l-5">
- <image class="p4 img100" :lazy-load="true" mode="aspectFit"
- src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/0e/0eb0917d31e64c849f250b6e0a825b25%E4%BD%8D%E5%9B%BE@2x%20(6).png">
- </image>
- <view class="c-txt-2 red">
- <view class="title">秒杀专区</view>
- <view class="flex">
- <view class="desc">查看详情</view>
- <view class="right m-l-5">
- <uni-icons class="icon" type="right" color="#ffffff" size="9"></uni-icons>
- </view>
+ </view>
+ </view>
+ </view>
+ <view class="flex1 c m-l-5">
+ <image class="p4 img100" :lazy-load="true" mode="aspectFit"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/0e/0eb0917d31e64c849f250b6e0a825b25%E4%BD%8D%E5%9B%BE@2x%20(6).png">
+ </image>
+ <view class="c-txt-2 red">
+ <view class="title">秒杀专区</view>
+ <view class="flex">
+ <view class="desc">查看详情</view>
+ <view class="right m-l-5">
+ <uni-icons class="icon" type="right" color="#ffffff" size="9"></uni-icons>
+ </view>
- </view>
- </view>
- </view>
- </view>
- </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
</template>
<script>
- export default {
- data() {
- return {
-
- };
- }
- }
+export default {
+ data() {
+ return {
+ list: [],
+ };
+ },
+ methods: {
+ toDetail(id) {
+ uni.navigateTo({
+ url: `//sub_pages/customer/trade/list?zoneId=${id}`
+ })
+ },
+ },
+ onLoad() {
+ this.$http.request('get', '/api/flower/zone/list', {}).then(res => {
+ this.list = res.data || []
+ })
+ },
+}
</script>
<style lang="scss">
- .home-zones {
- margin-top: 20rpx;
+.home-zones {
+ margin-top: 20rpx;
- .c {
- position: relative;
+ .c {
+ position: relative;
- .c-txt-1 {
- position: absolute;
- left: 38rpx;
- top: 40rpx;
+ .c-txt-1 {
+ position: absolute;
+ left: 38rpx;
+ top: 40rpx;
- .title {
- font-weight: 600;
- font-size: 36rpx;
- color: #FFFFFF;
- line-height: 50rpx;
- margin-bottom: 8rpx;
- }
+ .title {
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #FFFFFF;
+ line-height: 50rpx;
+ margin-bottom: 8rpx;
+ }
- .desc {
- font-weight: 400;
- font-size: 28rpx;
- color: #FFFFFF;
- line-height: 40rpx;
- }
+ .desc {
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #FFFFFF;
+ line-height: 40rpx;
+ }
- .right {
- background: #FFFFFF;
- border-radius: 50%;
- width: 28rpx;
- height: 28rpx;
- margin-top: 6rpx;
- position: relative;
+ .right {
+ background: #FFFFFF;
+ border-radius: 50%;
+ width: 28rpx;
+ height: 28rpx;
+ margin-top: 6rpx;
+ position: relative;
- .icon {
- position: absolute;
- top: -10rpx;
- left: 2rpx;
- }
- }
- }
+ .icon {
+ position: absolute;
+ top: -10rpx;
+ left: 2rpx;
+ }
+ }
+ }
- .c-txt-2 {
- position: absolute;
- left: 22rpx;
- top: 50rpx;
+ .c-txt-2 {
+ position: absolute;
+ left: 22rpx;
+ top: 50rpx;
- .title {
- font-weight: 600;
- font-size: 28rpx;
- color: #535FCA;
- line-height: 40rpx;
- margin-bottom: 2rpx;
- }
+ .title {
+ font-weight: 600;
+ font-size: 28rpx;
+ color: #535FCA;
+ line-height: 40rpx;
+ margin-bottom: 2rpx;
+ }
- .desc {
- font-weight: 400;
- font-size: 24rpx;
- color: #535FCA;
- line-height: 34rpx;
- }
+ .desc {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #535FCA;
+ line-height: 34rpx;
+ }
- .right {
- background: #535FCA;
- border-radius: 50%;
- width: 24rpx;
- height: 24rpx;
- margin-top: 6rpx;
- position: relative;
+ .right {
+ background: #535FCA;
+ border-radius: 50%;
+ width: 24rpx;
+ height: 24rpx;
+ margin-top: 6rpx;
+ position: relative;
- .icon {
- position: absolute;
- top: -14rpx;
- left: 4rpx;
- }
- }
- }
+ .icon {
+ position: absolute;
+ top: -14rpx;
+ left: 4rpx;
+ }
+ }
+ }
- .c-txt-2.red {
- .title {
- color: #892E2E;
- }
- .desc {
- color: #892E2E;
- }
- .right{
- background: #892E2E;
- }
- }
- }
+ .c-txt-2.red {
+ .title {
+ color: #892E2E;
+ }
- .p1 {
- width: 100%;
- height: 176rpx;
- }
+ .desc {
+ color: #892E2E;
+ }
- .p2 {
- width: 100%;
- height: 176rpx;
+ .right {
+ background: #892E2E;
+ }
+ }
+ }
- }
+ .p1 {
+ width: 100%;
+ height: 176rpx;
+ }
- .p3 {
- width: 100%;
- height: 176rpx;
- }
+ .p2 {
+ width: 100%;
+ height: 176rpx;
- .p4 {
- width: 100%;
- height: 176rpx;
- }
- }
+ }
+
+ .p3 {
+ width: 100%;
+ height: 176rpx;
+ }
+
+ .p4 {
+ width: 100%;
+ height: 176rpx;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3