|
|
@@ -0,0 +1,340 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="header-box">
|
|
|
+ <view class="search-box">
|
|
|
+ <u-search
|
|
|
+ v-model="searchForm.keyword"
|
|
|
+ :clearabled="true"
|
|
|
+ bg-color="#E5E5E5"
|
|
|
+ :input-style="searchInputStyle"
|
|
|
+ placeholder="搜索您想要的内容"
|
|
|
+ ></u-search>
|
|
|
+ </view>
|
|
|
+ <view class="tab-box">
|
|
|
+ <u-tabs
|
|
|
+ name="label"
|
|
|
+ :list="searchType"
|
|
|
+ :is-scroll="true"
|
|
|
+ v-model="searchForm.type"
|
|
|
+ @change="onSearchTypeChange"
|
|
|
+ font-size="24"
|
|
|
+ :bold="false"
|
|
|
+ inactive-color="#000000"
|
|
|
+ active-color="#000000"
|
|
|
+ :bar-style="{'background-color': '#2979ff'}"
|
|
|
+ :gutter="25"
|
|
|
+ height="45"
|
|
|
+ ></u-tabs>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-box">
|
|
|
+ <view class="list-item-box" v-for="item in list" :key="item.id" @click="onClickReport(item)">
|
|
|
+ <view class="image-box">
|
|
|
+ <image :src="item.image" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view class="title">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="type">
|
|
|
+ <span>{{item.type}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="func">
|
|
|
+ <view class="" v-if="item.free > 0"></view>
|
|
|
+ <view class="price" v-if="item.price">
|
|
|
+ ￥{{item.price}}元
|
|
|
+ </view>
|
|
|
+ <view class="member-free" v-if="item.price == null && item.free < 1">
|
|
|
+ {{item.memberFree > 0 ? '会员免费' : `会员：${item.memberPrice}元`}}
|
|
|
+ </view>
|
|
|
+ <view class="not-member-price" v-if="item.price == null && item.free < 1">
|
|
|
+ 非会员：￥{{item.notMemberPrice}}元
|
|
|
+ </view>
|
|
|
+ <view v-if="item.free > 0" class="button free">免费</view>
|
|
|
+ <view v-else-if="item.memberFree > 0" class="button member-free">会员免费</view>
|
|
|
+ <view v-else :class="['button', item.status > 0 ? 'free' : 'buy']">{{item.status > 0 ? '已购买' : '立即购买'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref, computed } from 'vue'
|
|
|
+ import { onLoad } from '@dcloudio/uni-app'
|
|
|
+
|
|
|
+ const customButtonStyle = {
|
|
|
+ height: '40rpx',
|
|
|
+ lineHeight: '40rpx',
|
|
|
+ padding: '0 30rpx'
|
|
|
+ }
|
|
|
+ const searchInputStyle = {
|
|
|
+ backgroundColor: '#E5E5E5'
|
|
|
+ }
|
|
|
+ const searchType = [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '每周成交简报',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '月度成交简报',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '经理人指数报告',
|
|
|
+ value: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '一周楼市资讯',
|
|
|
+ value: 4
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ function onSearchTypeChange(val) {
|
|
|
+ console.log('搜索表单', searchForm.value)
|
|
|
+ }
|
|
|
+ const searchForm = ref({
|
|
|
+ keyword: '',
|
|
|
+ type: 0
|
|
|
+ })
|
|
|
+
|
|
|
+ const modelName = ref()
|
|
|
+
|
|
|
+ const list = [
|
|
|
+ {
|
|
|
+ id: '01',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://img.shetu66.com/2023/10/21/1697901453723364.png',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: '9.9',
|
|
|
+ memberPrice: '9.9',
|
|
|
+ notMemberPrice: null,
|
|
|
+ free: 0, // 是否免费
|
|
|
+ memberFree: 0, // 是否会员免费
|
|
|
+ status: 0, // 是否购买
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '02',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://img.shetu66.com/2023/12/13/1702403646894275.png',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: '9.9',
|
|
|
+ memberPrice: '9.9',
|
|
|
+ notMemberPrice: null,
|
|
|
+ free: 0, // 是否免费
|
|
|
+ memberFree: 0, // 是否会员免费
|
|
|
+ status: 1, // 是否购买
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '03',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://img.shetu66.com/2023/10/16/1697397333933789.png',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: null,
|
|
|
+ memberPrice: null,
|
|
|
+ notMemberPrice: null,
|
|
|
+ free: 1, // 是否免费
|
|
|
+ memberFree: 0, // 是否会员免费
|
|
|
+ status: 0, // 是否购买
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '04',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://img.shetu66.com/2023/10/24/1698106006242859.png',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: '9.9',
|
|
|
+ memberPrice: null,
|
|
|
+ notMemberPrice: null,
|
|
|
+ free: 0, // 是否免费
|
|
|
+ memberFree: 1, // 是否会员免费
|
|
|
+ status: 0, // 是否购买
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '05',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://static.fxbaogao.com/subject/cover/prod/361.jpg',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: '9.9',
|
|
|
+ memberPrice: null,
|
|
|
+ notMemberPrice: null,
|
|
|
+ free: 0, // 是否免费
|
|
|
+ memberFree: 1, // 是否会员免费
|
|
|
+ status: 0, // 是否购买
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '06',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://img.shetu66.com/2023/10/16/1697387221220874.png',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: null,
|
|
|
+ memberPrice: null,
|
|
|
+ notMemberPrice: '9.9',
|
|
|
+ free: 0, // 是否免费
|
|
|
+ memberFree: 1, // 是否会员免费
|
|
|
+ status: 1, // 是否购买
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '07',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://img.shetu66.com/2023/10/21/1697901453723364.png',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: null,
|
|
|
+ memberPrice: '9.9',
|
|
|
+ notMemberPrice: '19.9',
|
|
|
+ free: 0, // 是否免费
|
|
|
+ memberFree: 0, // 是否会员免费
|
|
|
+ status: 0, // 是否购买
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '08',
|
|
|
+ title: '2024年11月广州市中介促成二手住宅市场交易简报',
|
|
|
+ time: '2023年8月8日',
|
|
|
+ image: 'https://img.shetu66.com/2023/12/13/1702403646894275.png',
|
|
|
+ type: '月度成交简报',
|
|
|
+ price: null,
|
|
|
+ memberPrice: '9.9',
|
|
|
+ notMemberPrice: '19.9',
|
|
|
+ free: 0, // 是否免费
|
|
|
+ memberFree: 0, // 是否会员免费
|
|
|
+ status: 1, // 是否购买
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ function onClickReport(report) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/reportDetail/reportDetail?id=${report.id}&title=${report.title}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onLoad((load) => {
|
|
|
+ if (load.model) {
|
|
|
+ modelName.value = load.model
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: modelName.value
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+$image-width: 230rpx;
|
|
|
+
|
|
|
+ .container {
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ background-color: $uni-text-color-inverse;
|
|
|
+
|
|
|
+ .header-box {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background-color: $uni-text-color-inverse;
|
|
|
+ @include topMagnet();
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ ::v-deep(.u-search) {
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ border-radius: 50rpx;
|
|
|
+
|
|
|
+ .u-action {
|
|
|
+ width: 18%;
|
|
|
+ background-color: $uni-color-primary;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ letter-spacing: 3rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-box {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ .list-item-box {
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ gap: 20rpx;
|
|
|
+ height: 210rpx;
|
|
|
+ border-bottom: 5rpx solid #E6E6E6;
|
|
|
+ &:active {
|
|
|
+ background-color: $uni-bg-color-hover;
|
|
|
+ }
|
|
|
+ .image-box {
|
|
|
+ width: $image-width;
|
|
|
+ image {
|
|
|
+ width: $image-width;
|
|
|
+ flex: 0 0 $image-width;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-box {
|
|
|
+ .title {
|
|
|
+ font-size: $uni-title-font-size-2;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ @include text-line-overflow(2);
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ font-size: $uni-font-size-2;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $uni-font-size-2;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .func {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: $uni-font-size-2;
|
|
|
+ font-weight: bold;
|
|
|
+ .button {
|
|
|
+ text-align: center;
|
|
|
+ width: 130rpx;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ color: $uni-color-error;
|
|
|
+ font-size: $uni-title-font-size-3;
|
|
|
+ }
|
|
|
+ .not-member-price {
|
|
|
+ font-size: $uni-font-size-4;
|
|
|
+ color: $uni-text-color-grey;
|
|
|
+ text-align: end;
|
|
|
+ }
|
|
|
+ .buy {
|
|
|
+ padding: 6rpx 25rpx;
|
|
|
+ background-color: $uni-color-error;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ }
|
|
|
+ .free {
|
|
|
+ padding: 6rpx 25rpx;
|
|
|
+ background-color: $uni-color-primary;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ }
|
|
|
+ .member-free {
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ @include backgroundImg('@/static/images/bg-label.png');
|
|
|
+ color: $uni-text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
