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
Split 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>
<view class="assemble">
<fui-segmented-control :values="values" type="text" activeColor="#29d3b4" color="#fff" @click="segmented"></fui-segmented-control>
<view class="search">
<view :class="{'selected': select_type === 1, 'not-selected': select_type !== 1}" @click="getSelect(1)">全部(320)</view>
<view :class="{'selected': select_type === 2, 'not-selected': select_type !== 2}" @click="getSelect(2)">待跟进(8)</view>
<view :class="{'selected': select_type === 3, 'not-selected': select_type !== 3}" @click="getSelect(3)">7天未跟进(15)</view>
<view :class="{'selected': select_type === 4, 'not-selected': select_type !== 4}" @click="getSelect(4)">30天未成交(12)</view>
</view>
<view v-if="segmented_type == 1">
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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/intention3.png" class="drop-image-x"></image>
</view>
<view class="title-x">意向：高</view>
</view>
</view>
</view>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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/intention2.png" class="drop-image-x"></image>
</view>
<view class="title-x">意向：中</view>
</view>
</view>
</view>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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">待跟进</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: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
</view>
<view v-if="segmented_type == 2">
<view style="color: #999999;padding: 20rpx 30rpx;">
今日待领（15/30）
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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>
<view class="assemble">
<fui-segmented-control :values="values" type="text" activeColor="#29d3b4" color="#fff"
@click="segmented"></fui-segmented-control>
<view class="search">
<view :class="{'selected': select_type === 1, 'not-selected': select_type !== 1}" @click="getSelect(1)">全部(320)
</view>
<view :class="{'selected': select_type === 2, 'not-selected': select_type !== 2}" @click="getSelect(2)">待跟进(8)
</view>
<view :class="{'selected': select_type === 3, 'not-selected': select_type !== 3}" @click="getSelect(3)">
7天未跟进(15)
</view>
<view :class="{'selected': select_type === 4, 'not-selected': select_type !== 4}" @click="getSelect(4)">
30天未成交(12)
</view>
</view>
<view v-if="segmented_type == 1">
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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/intention3.png" class="drop-image-x"></image>
</view>
<view class="title-x">意向：高</view>
</view>
</view>
</view>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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/intention2.png" class="drop-image-x"></image>
</view>
<view class="title-x">意向：中</view>
</view>
</view>
</view>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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">待跟进</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: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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: 15%;">
<image src="@/static/images/index/message.png" class="image"></image>
</view>
<view style="width: 15%;">
<image src="@/static/images/index/phone.png" class="image"></image>
</view>
</view>
</view>
<view v-if="segmented_type == 2">
<view style="color: #999999;padding: 20rpx 30rpx;">
今日待领（15/30）
</view>
<view class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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 class="card">
<view style="width: 70%;" @click="clue_info">
<view style="display: flex;align-items: center;padding: 20rpx;">
<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>
<script>
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
AQTabber,
},
data() {
return {
values: [{
id: 1,
name: '我的客户'
}, {
id: 2,
name: '区域公海'
}],
select_type: 1,
segmented_type: 1,
}
},
methods: {
getSelect(type){
this.select_type = type
},
segmented(index){
this.segmented_type = index.id
},
clue_info(){
uni.navigateTo({
url: '/pages/market/clue/clue_info'
})
},
}
}
import AQTabber from "@/components/AQ/AQTabber.vue"
export default {
components: {
AQTabber,
},
data() {
return {
values: [{
id: 1,
name: '我的客户'
}, {
id: 2,
name: '区域公海'
}],
select_type: 1,
segmented_type: 1,
}
},
methods: {
getSelect(type) {
this.select_type = type
},
segmented(index) {
this.segmented_type = index.id
},
clue_info() {
uni.navigateTo({
url: '/pages/market/clue/clue_info'
})
},
}
}
</script>
<style lang="less" scoped>

Write Preview
Loading…
Cancel
Save