Bläddra i källkod

选择客户页面

zhangdan 3 år sedan
förälder
incheckning
2ac14ec555
4 ändrade filer med 142 tillägg och 2 borttagningar
  1. 12 0
      api/sales.js
  2. 86 0
      pages/common/customerSearch.vue
  3. 43 1
      pages/sales/chooseCustomer.vue
  4. 1 1
      pages/sales/index.vue

+ 12 - 0
api/sales.js

@@ -62,4 +62,16 @@ export const settleStyleQueryAll = (params) => {
     data: params,
     method: 'post'
   })
+}
+
+// 客户列表
+export const customerList = (params) => {
+	const url=`cust/queryPage/${params.pageNo}/${params.pageSize}`
+	delete params.pageNo
+	delete params.pageSize
+	return axios.request({
+		url: url,
+		data: params,
+		method: 'post'
+	})
 }

+ 86 - 0
pages/common/customerSearch.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="search-box">
+		<u-search
+			placeholder="请输入客户名称搜索" 
+			v-model="queryWord" 
+			@input="searchBrand"
+			@search="searchBrand"
+			@clear="clearSearch"
+			:action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': $config('primaryColor'), 'border-radius': '6upx', 'padding': '12upx 0'}">
+		</u-search>
+		<scroll-view class="picker-content flex_1" scroll-y>
+			<view class="picker-main">
+				<view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(index)">
+					<view class="item-name">{{item.customerName}}</view>
+				</view>
+				<view v-if="listData&&listData.length>=20" style="color:#999;font-size: 26upx;">最多显示前20条匹配客户,请尝试输入更多内容</view>
+				<view v-if="listData && listData.length == 0">
+					<u-empty text="暂无匹配客户" mode="list" :img-width="200" :margin-top="60"></u-empty>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import {customerList} from '@/api/sales.js'
+	export default{
+		data(){
+			return{
+				listData:[],
+				queryWord:'',
+				pageSize:20,
+				pageNo:1,
+			}
+		},
+		methods:{
+			getData(){
+				customerList({queryWord:this.queryWord,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
+					if(res.status == 200 && res.data){
+						this.listData = res.data.list
+					}else{
+						this.listData = []
+					}
+				})
+			},
+			// 搜索品牌
+			searchBrand(){
+				if(this.queryWord != ''){
+					this.getData()
+				}
+			},
+			clearSearch(){
+				this.queryWord = ''
+				this.listData = []
+				this.getData()
+			},
+			chooseItem(val){
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.search-box{
+		width: 100%;
+		.picker-content{
+			padding: 6upx 0 20upx;
+			.picker-main{
+				width: 100%;
+				.picker-main-item{
+					padding: 0 20upx;
+					.item-name{
+						padding: 14upx 0;
+						border-bottom: 1rpx solid #e5e6eb;
+					}
+					.item-name:not(:last-child){
+						border-bottom:none
+					}
+				}
+				
+			}
+		}
+	}
+	
+</style>

+ 43 - 1
pages/sales/chooseCustomer.vue

@@ -1,8 +1,50 @@
 <template>
+	<view class="chooseCustomer-content">
+		<view class="flex justify_between align_center search-title">
+			<text class="search-label">客户名称</text>
+			<view class="search-btn">
+				<text>没有搜索到?</text>
+				<text>点击</text>
+				<text>新增客户</text>
+			</view>
+		</view>
+		<!-- 客户搜索框 -->
+		<customerSearch></customerSearch>
+	</view>
 </template>
 
 <script>
+	import customerSearch from '@/pages/common/customerSearch.vue'
+	export default{
+		components:{customerSearch},
+		data(){
+			return{
+				
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss">
+	.chooseCustomer-content{
+		width: 100%;
+		background-color: #fff;
+		padding:0 30upx;
+		.search-title{
+			padding: 20upx 0;
+			.search-label{
+				font-size: 30upx;
+				font-weight: 600;
+			}
+			.search-btn{
+				font-size: 28upx;
+				color: #999;
+				text:last-child{
+					display: inline-block;
+					padding-left: 10upx;
+					color:#007AFF
+				}
+			}
+		}
+	}
 </style>

+ 1 - 1
pages/sales/index.vue

@@ -26,7 +26,7 @@
 				<u-image class="nav-pic" style="margin-top: 5upx;" :src="`../../static/${theme}/navIcon/price_icon.png`" width="60" height="60"></u-image>
 				<text class="nav-txt" style="margin-top: 5upx;">产品报价</text>
 			</view>
-			<view class="nav-item" @click="toPage('')">
+			<view class="nav-item" @click="toPage('/pages/sales/chooseCustomer')">
 				<u-image class="nav-pic" :src="`../../static/${theme}/navIcon/sale_icon.png`" width="70" height="70"></u-image>
 				<text class="nav-txt">新增销售单</text>
 			</view>