qniao
/
paper-shopkeeper-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

跟进记录

devlop
buffeyu 4 years ago
parent
39eb739468
commit
a63c753260
7 changed files with 539 additions and 5 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      App.vue
  2. 15
      pages.json
  3. 231
      pages/add-record/index.vue
  4. 11
      pages/client-detail/basic-information.vue
  5. 177
      pages/follow-up-records/index.vue
  6. 18
      pages/follow-up-records/timeLine.vue
  7. 87
      pages/follow-up-records/timelineItem.vue

5
App.vue
View File

@ -16,5 +16,8 @@ export default {
<style>
/*每个页面公共css */
@import url('./common/css/reset.scss');
@import '@/static/icon/iconfont.css';
@import '@/static/icon/iconfont.css';
page {
height: 100%;
}
</style>

15
pages.json
View File

@ -215,7 +215,20 @@
"enablePullDownRefresh": false
}
}
},
{
"path": "pages/follow-up-records/index",
"style": {
"navigationBarTitleText": "跟进记录"
}
},
{
"path": "pages/add-record/index",
"style": {
"navigationBarTitleText": "新增跟进记录",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",

231
pages/add-record/index.vue
View File

@ -0,0 +1,231 @@
<template>
<view class="warpper">
<qnHeader class="header">
<view class="header-title">跟进记录</view>
<view class="right-title">保存</view>
</qnHeader>
<view class="paper-price">
<view class="">
<view class="paper-price-image-title">
<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
<text class="add-paper-title">拜访对象</text>
</view>
<view class="paper-price-image">
<qn-easyinput
class="paper-price-textArea bf-height"
:maxlength="200"
:styles="{ disableColor: '#F7F8FA' }"
v-model="form.remark"
:inputBorder="false"
type="textarea"
placeholder="请输入拜访对象"
></qn-easyinput>
</view>
</view>
<view class="">
<view class="paper-price-image-title">
<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
<text class="add-paper-title">沟通记录</text>
</view>
<view class="paper-price-image">
<qn-easyinput
class="paper-price-textArea gt-height"
:maxlength="200"
:styles="{ disableColor: '#F7F8FA' }"
v-model="form.remark"
:inputBorder="false"
type="textarea"
placeholder="请输入与客户的沟通记录"
></qn-easyinput>
</view>
</view>
<view class="">
<view class="paper-price-image-title">
<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
<text class="add-paper-title">备注信息</text>
</view>
<view class="paper-price-image">
<qn-easyinput
class="paper-price-textArea bf-height"
:maxlength="200"
:styles="{ disableColor: '#F7F8FA' }"
v-model="form.remark"
:inputBorder="false"
type="textarea"
placeholder="请输入备注"
></qn-easyinput>
<view class="location">
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
<text class="text">广州市天河区</text>
<uni-icons size="16" type="bottom"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import qnHeader from '@/components/qn-header/qn-header.vue'
export default {
components: {qnHeader},
data() {
return {
form: {}
}
}
}
</script>
<style lang="scss" scoped>
.warpper {
background-color: #ffffff;
height: 100%;
.header {
justify-content: space-between;
}
.header-title {
font-size: 36rpx;
color: #000000;
letter-spacing: 0;
text-align: center;
font-weight: 500;
}
.right-title {
font-size: 28rpx;
color: #007aff;
text-align: center;
line-height: 40rpx;
font-weight: 500;
}
.add-paper-start {
font-size: 28rpx;
color: #f5222d;
letter-spacing: 0;
font-weight: 400;
}
.add-paper-title {
font-size: 28rpx;
color: #000000;
letter-spacing: 0;
font-weight: 500;
}
.paper-price {
background-color: #ffffff;
padding: 20rpx 0rpx;
.paper-price-form {
background: #f7f8fa;
border-radius: 8rpx;
margin: 22rpx 32rpx;
padding: 22rpx 32rpx;
line-height: 60rpx;
margin-bottom: 30rpx;
}
.paper-price-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.flex {
display: flex;
margin-left: 4px;
align-items: center;
}
}
.delete-text {
font-size: 28rpx;
color: #f5222d;
letter-spacing: 0;
font-weight: 400;
}
.paper-price-main {
padding: 22rpx 32rpx;
height: 88rpx;
align-items: center;
border-bottom: 2rpx solid #dddddd;
}
.paper-price-image-title {
padding: 0rpx 32rpx;
align-items: center;
}
.paper-price-image {
padding: 16rpx 32rpx;
}
.paper-price-textArea {
background: #f7f8fa;
border-radius: 20rpx;
padding: 10rpx;
}
.paper-price-title {
font-size: 28rpx;
color: #000000;
letter-spacing: 0;
font-weight: 600;
}
.paper-price-subtitle {
font-size: 24rpx;
color: #888888;
font-weight: 400;
}
.dian {
background: #adbac9;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
// margin-top: 28rpx;
margin-right: 10rpx;
}
.label_text {
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.label_value {
padding-bottom: 5rpx;
border-bottom: 2rpx solid #d8d8d8;
width: 65%;
text-align: right;
}
.label-select {
display: flex;
align-items: center;
justify-content: flex-end;
}
.text-left {
margin-left: 10rpx;
}
.text-right {
margin-right: 10rpx;
}
}
.bf-height{
height: 155rpx;
}
.gt-height {
height: 210rpx;
}
.location{
display: flex;
flex-direction: row;
align-items: center;
padding-top: 20rpx;
.icon {
width: 32rpx;
height: 32rpx;
}
.text{
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
font-weight: 400;
padding-left: 10rpx;
}
}
}
</style>

11
pages/client-detail/basic-information.vue
View File

@ -4,7 +4,7 @@
<view class="card-box">
<view class="card-header">
<view class="left-text">基本信息</view>
<view class="right-text">跟进记录</view>
<view class="right-text" @tap="gotoTap">跟进记录</view>
</view>
<view class="card-content">
<view class="info">
@ -212,7 +212,8 @@
<script>
import uGap from '@/components/u-gap/u-gap.vue'
import { getBaseInfo } from '@/apis/clientDetailApi'
import { getBaseInfo } from '@/apis/clientDetailApi'
import { go2 } from '@/utils/hook.js'
export default {
components: {
uGap
@ -236,7 +237,11 @@ export default {
seemoreFlag: true
}
},
methods: {
methods: {
gotoTap() {
go2('follow-up-records')
},
getBaseInfo() {
getBaseInfo({customerId: this.customerId }).then(res => {
// console.log('基础信息', res)

177
pages/follow-up-records/index.vue
View File

@ -0,0 +1,177 @@
<template>
<view class="warpper">
<timeline>
<timelineItem v-for="(item, index) in 4" :key="index">
<view class="time">
2021年12月28日 12:30:45
</view>
<view class="tripItem">
<view class="row">
<view class="title">跟进人：</view>
<view class="value">贾晓堂 18877799220</view>
</view>
<view class="row">
<view class="title">拜访对象：</view>
<view class="value">张翼德 18826104989</view>
</view>
<view class="row">
<view class="title">沟通内容：</view>
<view class="value">已经对该供应商进行了需求调研，并已经对纸掌柜产品进行推广，盘商表示愿意支付使用该产品</view>
</view>
<view class="row">
<view class="title">备注信息：</view>
<view class="value">客户说希望有特色功能。</view>
</view>
<view class="row">
<view class="title"></view>
<view class="value">
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image>
<text class="location">广州市天河区</text>
</view>
</view>
</view>
</timelineItem>
<view class="see-more">
<text>查看更多</text>
<image class="icon" :src="!seemoreFlag ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image>
</view>
</timeline>
<qn-footer fixed height="120rpx">
<view class="button-area">
<!-- <view class="button button__cancel" @click="back">
<text class="text">取消</text>
</view> -->
<view class="button button__submit" @click="addTap">
<text class="text" style="color: white">新增跟进</text>
</view>
</view>
</qn-footer>
</view>
</template>
<script>
import timeline from './timeLine.vue'
import timelineItem from './timelineItem.vue'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
import { go2 } from '@/utils/hook.js'
export default {
components: {
timeline,
timelineItem,
qnFooter
},
data() {
return {}
},
methods:{
addTap() {
go2('add-record')
},
}
}
</script>
<style lang="scss">
.warpper {
background-color: #FFFFFF;
.time {
font-size: 26rpx;
color: #000000;
letter-spacing: 0;
font-weight: 400;
}
.tripItem {
margin-top: 20rpx;
// height: 140rpx;
padding: 20rpx 30rpx;
// height: 376rpx;
background: #F7F8FA;
border-radius: 8rpx;
.row {
display: flex;
flex-direction: row;
padding: 16rpx 0rpx;
.title {
flex: 0 0 140rpx;
font-size: 28rpx;
color: #888888;
letter-spacing: 0;
font-weight: 400;
}
.value {
display: flex;
align-items: center;
flex: 1;
font-size: 28rpx;
color: #333333;
letter-spacing: 0;
font-weight: 400;
line-height: 1.3;
}
.icon {
width: 32rpx;
height: 32rpx;
}
.location{
font-size: 26rpx;
color: #888888;
letter-spacing: 0;
text-align: left;
line-height: 32rpx;
font-weight: 400;
padding-left: 10rpx;
}
}
}
.see-more {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 20rpx;
background: #ffffff;
// border-top: 2rpx solid #dddddd;
// padding: 0rpx 32rpx;
font-size: 28rpx;
color: #007aff;
letter-spacing: 0;
text-align: center;
font-weight: 400;
.icon {
width: 24rpx;
height: 24rpx;
}
}
.button-area {
width: 750rpx;
padding: 0 32rpx;
display: flex;
flex-direction: row;
align-items: center;
// justify-content: space-between;
.button {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
.text {
font-size: 30rpx;
font-weight: 500;
text-align: center;
}
}
.button__cancel {
width: 270rpx;
height: 88rpx;
border: 2rpx solid #979797;
}
.button__submit {
width: 100%;
height: 88rpx;
background: #007aff;
}
}
}
</style>

18
pages/follow-up-records/timeLine.vue
View File

@ -0,0 +1,18 @@
<template>
<view class="timeline">
<slot></slot>
</view>
</template>
<script>
export default {
components:{
}
}
</script>
<style scoped lang="less">
.timeline {
padding: 36rpx 32rpx 0rpx 45rpx;
}
</style>

87
pages/follow-up-records/timelineItem.vue
View File

@ -0,0 +1,87 @@
<template>
<view class="timelineItem">
<view class="timeItem">
<view class="leftTime">
{{leftTime}}
</view>
<view class="line">
<view class="out" :style="{background: color == '' ? '' : color}">
<view class="inner" :style="{background: color == '' ? '' : color}"></view>
</view>
</view>
<view class="rightContent">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
leftTime:{
type:String,
default:''
},
color:{
type:String,
default:''
}
},
data(){
return {
}
}
}
</script>
<style scoped lang="less">
.timelineItem {
.timeItem {
display: flex;
.leftTime {
// width: 45rpx;
// padding: 0 29rpx 0rpx 0rpx;
font-size:22rpx;
font-weight:500;
color:rgba(51,51,51,1);
// margin-right: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
width: 4rpx;
background: #B2D7FF;
position: relative;
.out {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
width: 28rpx;
height: 28rpx;
background : #007AFF;
border-radius: 50%;
.inner {
width: 18rpx;
height: 18rpx;
background : #007AFF;
border-radius: 50%;
}
}
}
.rightContent {
flex: 1;
padding: 0rpx 10rpx 16rpx 16rpx;
margin-left: 20rpx;
min-height: 50rpx;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save