addCustomer.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <template>
  2. <view class="addCustomer-content">
  3. <view class="content-form">
  4. <u-form :model="form" ref="uForm" label-width="180" :error-type="['toast']">
  5. <u-form-item label="客户名称" required ><u-input v-model.trim="form.customerName" placeholder="请输入客户名称(最多30个字符)" input-align="right" :maxlength="60"/></u-form-item>
  6. <u-form-item label="客户地址" required >
  7. <u-input v-model="areaInfo.label" :disabled="true" input-align="right" placeholder="请选择客户地址" @click="openAddress"/>
  8. <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="openAddress"></u-icon>
  9. </u-form-item>
  10. <u-form-item label="详细地址">
  11. <textarea :auto-height="true" input-align="right" placeholder="请输入详细地址(最多60个字符)" :maxlength="60" v-model="form.customerAddr" class="receiveAddress" placeholder-style="color:#C0C4CC;font-size:28upx;"/>
  12. </u-form-item>
  13. <u-form-item label="联系人">
  14. <u-input v-model="form.contactName" input-align="right" placeholder="请输入联系人(最多20个字符)" :maxlength="20"/>
  15. </u-form-item>
  16. <u-form-item label="联系电话">
  17. <u-input v-model.trim="form.contactTel" placeholder="请输入联系电话(最多15个字符)" input-align="right" :maxlength="15"/>
  18. </u-form-item>
  19. <u-form-item label="联系手机"><u-input v-model.trim="form.contactMobile" placeholder="请输入联系手机(最多11位字符)" input-align="right" :maxlength="11"/>
  20. </u-form-item>
  21. <u-form-item label="价格类型" required prop="priceType">
  22. <v-select ref="priceType" :disabled="true" placeholder="请选择价格类型" @itemChange="chooseType" code="PRICE_TYPE" style="width: 100%"></v-select>
  23. </u-form-item>
  24. <u-form-item label="收款方式" required prop="settleStyleSn">
  25. <u-input v-model="settleStyleName" input-align="right" :disabled="true" placeholder="请选择收款方式" @click="showSettle=true"/>
  26. <u-icon name="arrow-right" color="#C0C4CC" slot="right"></u-icon>
  27. </u-form-item>
  28. <u-form-item label="客户传真">
  29. <u-input v-model="form.fax" input-align="right" placeholder="请输入客户传真(最多30个字符)" :maxlength="30"/>
  30. </u-form-item>
  31. <u-form-item label="客户类型">
  32. <u-input v-model="custTypeName" input-align="right" :disabled="true" placeholder="请选择客户类型" @click="showCust=true"/>
  33. <u-icon name="arrow-right" color="#C0C4CC" slot="right" @click="showCust=true"></u-icon>
  34. </u-form-item>
  35. <u-form-item label="配送方式" >
  36. <v-select ref="dispatchType" :disabled="true" placeholder="请选择配送方式" @itemChange="choosedispatchType" code="DISPATCH_TYPE" style="width: 100%"></v-select>
  37. </u-form-item>
  38. </u-form>
  39. </view>
  40. <view class="form-footer-btn">
  41. <u-button class="handle-btn" size="medium" shape="circle" hover-class="none" @click="customerSubmit" :custom-style="customBtnStyle">保存</u-button>
  42. </view>
  43. <!-- 省市区 -->
  44. <Address ref="applyAddress" :isJrMini="false" @onConfirm="areaConfirm"></Address>
  45. <!-- 选择收款方式 -->
  46. <u-picker v-model="showSettle" title="收款方式" @confirm="settleStyleChange" :range="settleTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultSettleIndex))"></u-picker>
  47. <!-- 客户类型 -->
  48. <u-picker v-model="showCust" title="客户类型" @confirm="custTypeChange" :range="custTypeList" range-key="name" mode="selector" :default-selector="JSON.parse(JSON.stringify(defaultCustIndex))"></u-picker>
  49. </view>
  50. </template>
  51. <script>
  52. import {settleStyleQueryAll} from '@/api/sales.js'
  53. import {customerDetail,custType,custSave,employeeAllList} from '@/api/customer.js'
  54. import Address from '@/components/address.vue'
  55. import vSelect from '@/components/select/v-select.vue'
  56. import { isvalidPhone } from '@/libs/validate.js'
  57. export default{
  58. components:{Address,vSelect},
  59. data(){
  60. return{
  61. customerData:null, // 客户信息
  62. customBtnStyle: { // 自定义按钮样式
  63. margin:0
  64. },
  65. // 客户form
  66. form:{
  67. id: undefined,
  68. customerName: '', // 客户名称
  69. contactTel: '', // 联系电话
  70. contactMobile: '', // 联系手机
  71. contactName: '', // 联系人
  72. provinceSn: undefined, // 省
  73. provinceName: '',
  74. citySn: undefined, // 市
  75. cityName: '',
  76. countySn: undefined, // 区
  77. countyName: '',
  78. customerAddr: '', // 详细地址
  79. fax: '', // 客户传真
  80. dispatchType: undefined, // 配送方式
  81. satelliteFlag: 0, // 是否卫星仓客户
  82. customerTypeSn: undefined, // 客户类型
  83. priceType: undefined, // 价格类型
  84. settleStyleSn: undefined // 收款方式
  85. },
  86. showSettle:false,//结算方式初始值
  87. settleTypeList:[],//收款方式列表
  88. settleStyleName:'',//收款方式名称
  89. custTypeList:[] ,// 客户类型数据
  90. showCust:false, //客户类型下拉弹窗初始值
  91. custTypeName:'', // 客户类型名称
  92. areaInfo: {}, // 省市区
  93. areaIdArr: [], // 省市区id数组
  94. defaultSettleIndex:[0] ,//选中收款方式的下标
  95. defaultCustIndex:[0],//选中客户类型的下标
  96. backPage: ''
  97. }
  98. },
  99. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  100. onReady() {
  101. this.$refs.uForm.setRules(this.rules);
  102. },
  103. onLoad(option) {
  104. this.backPage = option.backPage
  105. this.getSettleStyle()
  106. this.getCustomerList()
  107. },
  108. methods:{
  109. // 选择价格类型
  110. chooseType(val){
  111. this.form.priceType=val
  112. },
  113. // 选择配送方式
  114. choosedispatchType(val){
  115. this.form.dispatchType=val
  116. },
  117. // 选择省区市
  118. areaConfirm(e) {
  119. console.log('已选择的省市区', e)
  120. this.areaInfo = e
  121. this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
  122. this.form.provinceSn=e.provinceCode
  123. this.form.citySn=e.cityCode
  124. this.form.countySn=e.areaCode
  125. this.form.provinceName=e.labelArr[0]
  126. this.form.cityName=e.labelArr[1]
  127. this.form.countyName=e.labelArr[2]
  128. },
  129. openAddress(){
  130. // 省市区 回显 参数为省市区id数组
  131. // console.log(this.areaIdArr,'this.areaIdArr')
  132. this.$refs.applyAddress.open(this.areaIdArr)
  133. },
  134. brandClean(){
  135. this.settleStyleName=''
  136. this.form.settleStyleSn=undefined
  137. },
  138. // 获取客户类型列表
  139. getCustomerList(){
  140. custType({}).then(res=>{
  141. if(res.status==200){
  142. this.custTypeList=res.data
  143. }else{
  144. this.custTypeList=[]
  145. }
  146. })
  147. },
  148. // 获取结算方式列表
  149. getSettleStyle(){
  150. settleStyleQueryAll({}).then(res=>{
  151. if(res.status==200){
  152. this.settleTypeList=res.data
  153. }else{
  154. this.settleTypeList=null
  155. }
  156. })
  157. },
  158. // 收款方式change
  159. settleStyleChange(e){
  160. console.log(e,'data')
  161. this.defaultSettleIndex=[e]
  162. this.settleStyleName=this.settleTypeList[e].name
  163. this.form.settleStyleSn=this.settleTypeList[e].settleStyleSn
  164. },
  165. // 客户类型change
  166. custTypeChange(e){
  167. this.defaultCustIndex=[e]
  168. this.custTypeName=this.custTypeList[e].name
  169. this.form.customerTypeSn=this.custTypeList[e].customerTypeSn
  170. },
  171. // 保存 (新增客户)
  172. customerSubmit(){
  173. this.$refs.uForm.validate(valid => {
  174. if (valid) {
  175. if (this.form.customerName ==='') {
  176. uni.showToast({
  177. title: '请输入客户名称',
  178. icon: 'none'
  179. })
  180. return false
  181. }
  182. if(this.form.contactMobile){
  183. if (!isvalidPhone(this.form.contactMobile)) {
  184. uni.showToast({
  185. title: '请输入正确的联系手机',
  186. icon: 'none'
  187. })
  188. return false
  189. }
  190. }
  191. // 省市区
  192. if(this.areaIdArr.length == 0){
  193. uni.showToast({icon: 'none',title: '请选择客户地址'})
  194. return
  195. }
  196. if (!this.form.priceType) {
  197. uni.showToast({
  198. title: '请选择价格类型',
  199. icon: 'none'
  200. })
  201. return false
  202. }
  203. if (!this.form.settleStyleSn) {
  204. uni.showToast({
  205. title: '请选择收款方式',
  206. icon: 'none'
  207. })
  208. return false
  209. }
  210. const params=Object.assign({},this.form)
  211. console.log(params,'params')
  212. if(this.form.id) {
  213. params.id = this.form.id
  214. }
  215. custSave(params).then(res=>{
  216. if(res.status == 200) {
  217. uni.showToast({
  218. title: res.message,
  219. icon: 'none'
  220. })
  221. if(!this.backPage){
  222. uni.redirectTo({
  223. url:'/pages/sales/addSales?pageType=add&nowId='+res.data.id
  224. })
  225. }
  226. // 门店审核通过
  227. if(this.backPage == 'authPass'){
  228. uni.$emit("addCustome",res.data)
  229. uni.navigateBack({
  230. delta: 2
  231. })
  232. }
  233. }
  234. })
  235. } else {
  236. console.log('验证失败');
  237. }
  238. })
  239. },
  240. }
  241. }
  242. </script>
  243. <style lang="scss">
  244. .addCustomer-content{
  245. width: 100%;
  246. height: 100vh;
  247. background-color: #fff;
  248. padding:0 40upx;
  249. display: flex;
  250. flex-direction: column;
  251. .content-customerName{
  252. // padding: 10upx;
  253. // border-radius: 10upx;
  254. // border: 1upx solid #e5e5e5;
  255. }
  256. .content-form{
  257. flex: 1;
  258. // box-shadow:0 8upx 24upx rgba(0,0,0,.1);
  259. // border: 1upx solid #e5e5e5;
  260. .receiveAddress{
  261. width: 100%;
  262. line-height: 1.5em;
  263. box-sizing: border-box;
  264. font-style: normal;
  265. text-align: end;
  266. }
  267. }
  268. .content-form:not(:last-child){
  269. border-bottom: none;
  270. }
  271. .form-footer-btn{
  272. background-color: #fff;
  273. position: fixed;
  274. bottom: 0;
  275. left: 0;
  276. width: 100%;
  277. padding: 16upx 20upx 12upx;
  278. z-index: 999;
  279. .handle-btn{
  280. width: 100%;
  281. background-color: rgb(51, 95, 182);
  282. color: #fff;
  283. }
  284. }
  285. }
  286. </style>