php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(market): 优化线索页面布局和代码结构 

-调整了卡片组件的样式和布局
- 优化了代码格式，提高了代码可读性- 统一了样式单位，使用 rpx 替代 px- 移除了冗余的空行和不必要的换行符
master
liutong 1 year ago
parent
a28500d3a5
commit
083f8dc7a2
1 changed files with 393 additions and 363 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 756
      pages/market/clue/index.vue

756
pages/market/clue/index.vue
View File

@ -1,370 +1,400 @@
<template> <template>
<view class="assemble"> <view class="assemble">
<fui-segmented-control :values="values" type="text" activeColor="#29d3b4" color="#fff" @click="segmented"></fui-segmented-control> <fui-segmented-control :values="values" type="text" activeColor="#29d3b4" color="#fff"
<view class="search"> @click="segmented"></fui-segmented-control>
<view :class="{'selected': select_type === 1, 'not-selected': select_type !== 1}" @click="getSelect(1)">全部(320)</view> <view class="search">
<view :class="{'selected': select_type === 2, 'not-selected': select_type !== 2}" @click="getSelect(2)">待跟进(8)</view> <view :class="{'selected': select_type === 1, 'not-selected': select_type !== 1}" @click="getSelect(1)">全部(320)
<view :class="{'selected': select_type === 3, 'not-selected': select_type !== 3}" @click="getSelect(3)">7天未跟进(15)</view> </view>
<view :class="{'selected': select_type === 4, 'not-selected': select_type !== 4}" @click="getSelect(4)">30天未成交(12)</view> <view :class="{'selected': select_type === 2, 'not-selected': select_type !== 2}" @click="getSelect(2)">待跟进(8)
</view> </view>
<view v-if="segmented_type == 1"> <view :class="{'selected': select_type === 3, 'not-selected': select_type !== 3}" @click="getSelect(3)">
<view class="card"> 7天未跟进(15)
<view style="width: 70%;" @click="clue_info"> </view>
<view style="display: flex;align-items: center;padding: 20rpx;"> <view :class="{'selected': select_type === 4, 'not-selected': select_type !== 4}" @click="getSelect(4)">
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> 30天未成交(12)
<view class="card-text">包子皮</view> </view>
<view class="card-label">试听</view> </view>
</view> <view v-if="segmented_type == 1">
<view class="card-con"> <view class="card">
首联系人：包念念 <span class="card-con-span">妈妈</span> <view style="width: 70%;" @click="clue_info">
</view> <view style="display: flex;align-items: center;padding: 20rpx;">
<view class="card-date"> <view>
<view class="card-con">08-30 14:25  跟进</view> <image src="@/static/images/index/myk.png" class="card-image"></image>
<view style="margin-left: 30rpx;"> </view>
<view style="display: flex;align-items: center;"> <view class="card-text">包子皮</view>
<view style="padding: 12rpx;"> <view class="card-label">试听</view>
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> </view>
</view> <view class="card-con">
<view class="title-x">意向：低</view> 首联系人：包念念 <span class="card-con-span">妈妈</span>
</view> </view>
</view> <view class="card-date">
</view> <view class="card-con">08-30 14:25  跟进</view>
</view> <view style="margin-left: 30rpx;">
<view style="width: 15%;"> <view style="display: flex;align-items: center;">
<image src="@/static/images/index/message.png" class="image"></image> <view style="padding: 12rpx;">
</view> <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
<view style="width: 15%;"> </view>
<image src="@/static/images/index/phone.png" class="image"></image> <view class="title-x">意向：低</view>
</view> </view>
</view> </view>
<view class="card"> </view>
<view style="width: 70%;" @click="clue_info"> </view>
<view style="display: flex;align-items: center;padding: 20rpx;"> <view style="width: 15%;">
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> <image src="@/static/images/index/message.png" class="image"></image>
<view class="card-text">包子皮</view> </view>
<view class="card-label">试听</view> <view style="width: 15%;">
</view> <image src="@/static/images/index/phone.png" class="image"></image>
<view class="card-con"> </view>
首联系人：包念念 <span class="card-con-span">妈妈</span> </view>
</view> <view class="card">
<view class="card-date"> <view style="width: 70%;" @click="clue_info">
<view class="card-con">08-30 14:25  跟进</view> <view style="display: flex;align-items: center;padding: 20rpx;">
<view style="margin-left: 30rpx;"> <view>
<view style="display: flex;align-items: center;"> <image src="@/static/images/index/myk.png" class="card-image"></image>
<view style="padding: 12rpx;"> </view>
<image src="@/static/images/index/intention3.png" class="drop-image-x"></image> <view class="card-text">包子皮</view>
</view> <view class="card-label">试听</view>
<view class="title-x">意向：高</view> </view>
</view> <view class="card-con">
</view> 首联系人：包念念 <span class="card-con-span">妈妈</span>
</view> </view>
</view> <view class="card-date">
<view style="width: 15%;"> <view class="card-con">08-30 14:25  跟进</view>
<image src="@/static/images/index/message.png" class="image"></image> <view style="margin-left: 30rpx;">
</view> <view style="display: flex;align-items: center;">
<view style="width: 15%;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/phone.png" class="image"></image> <image src="@/static/images/index/intention3.png" class="drop-image-x"></image>
</view> </view>
</view> <view class="title-x">意向：高</view>
<view class="card"> </view>
<view style="width: 70%;" @click="clue_info"> </view>
<view style="display: flex;align-items: center;padding: 20rpx;"> </view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> </view>
<view class="card-text">包子皮</view> <view style="width: 15%;">
<view class="card-label">试听</view> <image src="@/static/images/index/message.png" class="image"></image>
</view> </view>
<view class="card-con"> <view style="width: 15%;">
首联系人：包念念 <span class="card-con-span">妈妈</span> <image src="@/static/images/index/phone.png" class="image"></image>
</view> </view>
<view class="card-date"> </view>
<view class="card-con">08-30 14:25  跟进</view> <view class="card">
<view style="margin-left: 30rpx;"> <view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;padding: 20rpx;">
<view style="padding: 12rpx;"> <view>
<image src="@/static/images/index/intention2.png" class="drop-image-x"></image> <image src="@/static/images/index/myk.png" class="card-image"></image>
</view> </view>
<view class="title-x">意向：中</view> <view class="card-text">包子皮</view>
</view> <view class="card-label">试听</view>
</view> </view>
</view> <view class="card-con">
</view> 首联系人：包念念 <span class="card-con-span">妈妈</span>
<view style="width: 15%;"> </view>
<image src="@/static/images/index/message.png" class="image"></image> <view class="card-date">
</view> <view class="card-con">08-30 14:25  跟进</view>
<view style="width: 15%;"> <view style="margin-left: 30rpx;">
<image src="@/static/images/index/phone.png" class="image"></image> <view style="display: flex;align-items: center;">
</view> <view style="padding: 12rpx;">
</view> <image src="@/static/images/index/intention2.png" class="drop-image-x"></image>
<view class="card"> </view>
<view style="width: 70%;" @click="clue_info"> <view class="title-x">意向：中</view>
<view style="display: flex;align-items: center;padding: 20rpx;"> </view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> </view>
<view class="card-text">包子皮</view> </view>
<view class="card-label">试听</view> </view>
</view> <view style="width: 15%;">
<view class="card-con"> <image src="@/static/images/index/message.png" class="image"></image>
首联系人：包念念 <span class="card-con-span">妈妈</span> </view>
</view> <view style="width: 15%;">
<view class="card-date"> <image src="@/static/images/index/phone.png" class="image"></image>
<view class="card-con">待跟进</view> </view>
<view style="margin-left: 30rpx;"> </view>
<view style="display: flex;align-items: center;"> <view class="card">
<view style="padding: 12rpx;"> <view style="width: 70%;" @click="clue_info">
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> <view style="display: flex;align-items: center;padding: 20rpx;">
</view> <view>
<view class="title-x">意向：低</view> <image src="@/static/images/index/myk.png" class="card-image"></image>
</view> </view>
</view> <view class="card-text">包子皮</view>
</view> <view class="card-label">试听</view>
</view> </view>
<view style="width: 15%;"> <view class="card-con">
<image src="@/static/images/index/message.png" class="image"></image> 首联系人：包念念 <span class="card-con-span">妈妈</span>
</view> </view>
<view style="width: 15%;"> <view class="card-date">
<image src="@/static/images/index/phone.png" class="image"></image> <view class="card-con">待跟进</view>
</view> <view style="margin-left: 30rpx;">
</view> <view style="display: flex;align-items: center;">
<view class="card"> <view style="padding: 12rpx;">
<view style="width: 70%;" @click="clue_info"> <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
<view style="display: flex;align-items: center;padding: 20rpx;"> </view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> <view class="title-x">意向：低</view>
<view class="card-text">包子皮</view> </view>
<view class="card-label">试听</view> </view>
</view> </view>
<view class="card-con"> </view>
首联系人：包念念 <span class="card-con-span">妈妈</span> <view style="width: 15%;">
</view> <image src="@/static/images/index/message.png" class="image"></image>
<view class="card-date"> </view>
<view class="card-con">08-30 14:25  跟进</view> <view style="width: 15%;">
<view style="margin-left: 30rpx;"> <image src="@/static/images/index/phone.png" class="image"></image>
<view style="display: flex;align-items: center;"> </view>
<view style="padding: 12rpx;"> </view>
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> <view class="card">
</view> <view style="width: 70%;" @click="clue_info">
<view class="title-x">意向：低</view> <view style="display: flex;align-items: center;padding: 20rpx;">
</view> <view>
</view> <image src="@/static/images/index/myk.png" class="card-image"></image>
</view> </view>
</view> <view class="card-text">包子皮</view>
<view style="width: 15%;"> <view class="card-label">试听</view>
<image src="@/static/images/index/message.png" class="image"></image> </view>
</view> <view class="card-con">
<view style="width: 15%;"> 首联系人：包念念 <span class="card-con-span">妈妈</span>
<image src="@/static/images/index/phone.png" class="image"></image> </view>
</view> <view class="card-date">
</view> <view class="card-con">08-30 14:25  跟进</view>
</view> <view style="margin-left: 30rpx;">
<view v-if="segmented_type == 2"> <view style="display: flex;align-items: center;">
<view style="color: #999999;padding: 20rpx 30rpx;"> <view style="padding: 12rpx;">
今日待领（15/30） <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
</view> </view>
<view class="card"> <view class="title-x">意向：低</view>
<view style="width: 70%;" @click="clue_info"> </view>
<view style="display: flex;align-items: center;padding: 20rpx;"> </view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> </view>
<view class="card-text">包子皮</view> </view>
<view class="card-label">试听</view> <view style="width: 15%;">
</view> <image src="@/static/images/index/message.png" class="image"></image>
<view class="card-con"> </view>
首联系人：包念念 <span class="card-con-span">妈妈</span> <view style="width: 15%;">
</view> <image src="@/static/images/index/phone.png" class="image"></image>
<view class="card-date"> </view>
<view class="card-con">08-30 14:25  跟进</view> </view>
<view style="margin-left: 30rpx;"> </view>
<view style="display: flex;align-items: center;"> <view v-if="segmented_type == 2">
<view style="padding: 12rpx;"> <view style="color: #999999;padding: 20rpx 30rpx;">
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> 今日待领（15/30）
</view> </view>
<view class="title-x">意向：低</view> <view class="card">
</view> <view style="width: 70%;" @click="clue_info">
</view> <view style="display: flex;align-items: center;padding: 20rpx;">
</view> <view>
</view> <image src="@/static/images/index/myk.png" class="card-image"></image>
<view style="width: 30%;display: flex;justify-content: center;"> </view>
<view class="neck"> <view class="card-text">包子皮</view>
领 <view class="card-label">试听</view>
</view> </view>
</view> <view class="card-con">
</view> 首联系人：包念念 <span class="card-con-span">妈妈</span>
<view class="card"> </view>
<view style="width: 70%;" @click="clue_info"> <view class="card-date">
<view style="display: flex;align-items: center;padding: 20rpx;"> <view class="card-con">08-30 14:25  跟进</view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> <view style="margin-left: 30rpx;">
<view class="card-text">包子皮</view> <view style="display: flex;align-items: center;">
<view class="card-label">试听</view> <view style="padding: 12rpx;">
</view> <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
<view class="card-con"> </view>
首联系人：包念念 <span class="card-con-span">妈妈</span> <view class="title-x">意向：低</view>
</view> </view>
<view class="card-date"> </view>
<view class="card-con">08-30 14:25  跟进</view> </view>
<view style="margin-left: 30rpx;"> </view>
<view style="display: flex;align-items: center;"> <view style="width: 30%;display: flex;justify-content: center;">
<view style="padding: 12rpx;"> <view class="neck">
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> 领
</view> </view>
<view class="title-x">意向：低</view> </view>
</view> </view>
</view> <view class="card">
</view> <view style="width: 70%;" @click="clue_info">
</view> <view style="display: flex;align-items: center;padding: 20rpx;">
<view style="width: 30%;display: flex;justify-content: center;"> <view>
<view class="neck"> <image src="@/static/images/index/myk.png" class="card-image"></image>
领 </view>
</view> <view class="card-text">包子皮</view>
</view> <view class="card-label">试听</view>
</view> </view>
<view class="card"> <view class="card-con">
<view style="width: 70%;" @click="clue_info"> 首联系人：包念念 <span class="card-con-span">妈妈</span>
<view style="display: flex;align-items: center;padding: 20rpx;"> </view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> <view class="card-date">
<view class="card-text">包子皮</view> <view class="card-con">08-30 14:25  跟进</view>
<view class="card-label">试听</view> <view style="margin-left: 30rpx;">
</view> <view style="display: flex;align-items: center;">
<view class="card-con"> <view style="padding: 12rpx;">
首联系人：包念念 <span class="card-con-span">妈妈</span> <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
</view> </view>
<view class="card-date"> <view class="title-x">意向：低</view>
<view class="card-con">08-30 14:25 跟进</view> </view>
<view style="margin-left: 30rpx;"> </view>
<view style="display: flex;align-items: center;"> </view>
<view style="padding: 12rpx;"> </view>
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> <view style="width: 30%;display: flex;justify-content: center;">
</view> <view class="neck">
<view class="title-x">意向：低</view> 领
</view> </view>
</view> </view>
</view> </view>
</view> <view class="card">
<view style="width: 30%;display: flex;justify-content: center;"> <view style="width: 70%;" @click="clue_info">
<view class="neck"> <view style="display: flex;align-items: center;padding: 20rpx;">
领 <view>
</view> <image src="@/static/images/index/myk.png" class="card-image"></image>
</view> </view>
</view> <view class="card-text">包子皮</view>
<view class="card"> <view class="card-label">试听</view>
<view style="width: 70%;" @click="clue_info"> </view>
<view style="display: flex;align-items: center;padding: 20rpx;"> <view class="card-con">
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> 首联系人：包念念 <span class="card-con-span">妈妈</span>
<view class="card-text">包子皮</view> </view>
<view class="card-label">试听</view> <view class="card-date">
</view> <view class="card-con">08-30 14:25 跟进</view>
<view class="card-con"> <view style="margin-left: 30rpx;">
首联系人：包念念 <span class="card-con-span">妈妈</span> <view style="display: flex;align-items: center;">
</view> <view style="padding: 12rpx;">
<view class="card-date"> <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
<view class="card-con">08-30 14:25  跟进</view> </view>
<view style="margin-left: 30rpx;"> <view class="title-x">意向：低</view>
<view style="display: flex;align-items: center;"> </view>
<view style="padding: 12rpx;"> </view>
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> </view>
</view> </view>
<view class="title-x">意向：低</view> <view style="width: 30%;display: flex;justify-content: center;">
</view> <view class="neck">
</view> 领
</view> </view>
</view> </view>
<view style="width: 30%;display: flex;justify-content: center;"> </view>
<view class="neck"> <view class="card">
领 <view style="width: 70%;" @click="clue_info">
</view> <view style="display: flex;align-items: center;padding: 20rpx;">
</view> <view>
</view> <image src="@/static/images/index/myk.png" class="card-image"></image>
<view class="card"> </view>
<view style="width: 70%;" @click="clue_info"> <view class="card-text">包子皮</view>
<view style="display: flex;align-items: center;padding: 20rpx;"> <view class="card-label">试听</view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> </view>
<view class="card-text">包子皮</view> <view class="card-con">
<view class="card-label">试听</view> 首联系人：包念念 <span class="card-con-span">妈妈</span>
</view> </view>
<view class="card-con"> <view class="card-date">
首联系人：包念念 <span class="card-con-span">妈妈</span> <view class="card-con">08-30 14:25  跟进</view>
</view> <view style="margin-left: 30rpx;">
<view class="card-date"> <view style="display: flex;align-items: center;">
<view class="card-con">08-30 14:25  跟进</view> <view style="padding: 12rpx;">
<view style="margin-left: 30rpx;"> <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
<view style="display: flex;align-items: center;"> </view>
<view style="padding: 12rpx;"> <view class="title-x">意向：低</view>
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> </view>
</view> </view>
<view class="title-x">意向：低</view> </view>
</view> </view>
</view> <view style="width: 30%;display: flex;justify-content: center;">
</view> <view class="neck">
</view> 领
<view style="width: 30%;display: flex;justify-content: center;"> </view>
<view class="neck"> </view>
领 </view>
</view> <view class="card">
</view> <view style="width: 70%;" @click="clue_info">
</view> <view style="display: flex;align-items: center;padding: 20rpx;">
<view class="card"> <view>
<view style="width: 70%;" @click="clue_info"> <image src="@/static/images/index/myk.png" class="card-image"></image>
<view style="display: flex;align-items: center;padding: 20rpx;"> </view>
<view><image src="@/static/images/index/myk.png" class="card-image"></image></view> <view class="card-text">包子皮</view>
<view class="card-text">包子皮</view> <view class="card-label">试听</view>
<view class="card-label">试听</view> </view>
</view> <view class="card-con">
<view class="card-con"> 首联系人：包念念 <span class="card-con-span">妈妈</span>
首联系人：包念念 <span class="card-con-span">妈妈</span> </view>
</view> <view class="card-date">
<view class="card-date"> <view class="card-con">08-30 14:25  跟进</view>
<view class="card-con">08-30 14:25  跟进</view> <view style="margin-left: 30rpx;">
<view style="margin-left: 30rpx;"> <view style="display: flex;align-items: center;">
<view style="display: flex;align-items: center;"> <view style="padding: 12rpx;">
<view style="padding: 12rpx;"> <image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image> </view>
</view> <view class="title-x">意向：低</view>
<view class="title-x">意向：低</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view style="width: 30%;display: flex;justify-content: center;">
<view style="width: 30%;display: flex;justify-content: center;"> <view class="neck">
<view class="neck"> 领
领 </view>
</view> </view>
</view> </view>
</view> <view class="card">
</view> <view style="width: 70%;" @click="clue_info">
<view style="height: 170rpx;"></view> <view style="display: flex;align-items: center;padding: 20rpx;">
<AQTabber /> <view>
</view> <image src="@/static/images/index/myk.png" class="card-image"></image>
</view>
<view class="card-text">包子皮</view>
<view class="card-label">试听</view>
</view>
<view class="card-con">
首联系人：包念念 <span class="card-con-span">妈妈</span>
</view>
<view class="card-date">
<view class="card-con">08-30 14:25  跟进</view>
<view style="margin-left: 30rpx;">
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image src="@/static/images/index/intention1.png" class="drop-image-x"></image>
</view>
<view class="title-x">意向：低</view>
</view>
</view>
</view>
</view>
<view style="width: 30%;display: flex;justify-content: center;">
<view class="neck">
领
</view>
</view>
</view>
</view>
<view style="height: 170rpx;"></view>
<AQTabber/>
</view>
</template> </template>
<script> <script>
import AQTabber from "@/components/AQ/AQTabber.vue" import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: { export default {
AQTabber, components: {
}, AQTabber,
data() { },
return { data() {
values: [{ return {
id: 1, values: [{
name: '我的客户' id: 1,
}, { name: '我的客户'
id: 2, }, {
name: '区域公海' id: 2,
}], name: '区域公海'
select_type: 1, }],
segmented_type: 1, select_type: 1,
} segmented_type: 1,
}, }
methods: { },
getSelect(type){ methods: {
this.select_type = type getSelect(type) {
}, this.select_type = type
segmented(index){ },
this.segmented_type = index.id segmented(index) {
}, this.segmented_type = index.id
clue_info(){ },
uni.navigateTo({ clue_info() {
url: '/pages/market/clue/clue_info' uni.navigateTo({
}) url: '/pages/market/clue/clue_info'
}, })
} },
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

Write Preview
Loading…
Cancel
Save