SetmealPayMoney.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <a-modal
  3. class="setmealPayMoneyModal"
  4. title="套餐收款"
  5. width="60%"
  6. centered
  7. :footer="null"
  8. :maskClosable="false"
  9. :destroyOnClose="true"
  10. @cancel="isShow = false"
  11. v-model="isShow">
  12. <!-- 表单 -->
  13. <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
  14. <!-- 手机号 -->
  15. <a-form-model-item label="手机号" prop="custMobile">
  16. <a-input id="setmealPayMoney-custMobile" v-model.trim="form.custMobile" @input="mobileInput" :maxLength="11" placeholder="请输入手机号" />
  17. </a-form-model-item>
  18. <!-- 销售合作商 -->
  19. <a-form-model-item label="销售合作商" prop="dataSourceNo">
  20. <a-select id="setmealPayMoney-dataSourceNo" v-model="form.dataSourceNo" placeholder="请选择该套餐是由哪个合作商售出">
  21. <a-select-option v-for="(item, index) in partnerList" :key="index" :value="item.salesChannelNo">{{ item.salesChannelName }}</a-select-option>
  22. </a-select>
  23. </a-form-model-item>
  24. <!-- 客户姓名 -->
  25. <a-form-model-item label="客户姓名" prop="custName">
  26. <a-input id="setmealPayMoney-custName" v-model.trim="form.custName" :maxLength="30" placeholder="请输入客户姓名(最多30个字符)" />
  27. </a-form-model-item>
  28. <!-- 应收金额 -->
  29. <a-form-model-item label="应收金额" class="item-con">
  30. <p class="item-main">
  31. <span class="item-price" v-if="setmealData">{{ setmealData.price || 0 }}</span>
  32. </p>
  33. </a-form-model-item>
  34. <!-- 收款方式 -->
  35. <a-form-model-item label="收款方式" class="item-con"><p class="item-main">现金</p></a-form-model-item>
  36. <a-form-model-item label="" class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
  37. <a-button type="primary" id="setmealPayMoney-submit" @click="onSubmit">确认收款</a-button>
  38. <a-button id="setmealPayMoney-cancel" class="setmealPayMoney-cancel" @click="cancel">取消</a-button>
  39. </a-form-model-item>
  40. <p class="text-center">重要提示:请确认在线下实际收到款后再点击【确认收款】!</p>
  41. </a-form-model>
  42. </a-modal>
  43. </template>
  44. <script>
  45. import { isMobile } from '@/libs/tools'
  46. import { mapGetters } from 'vuex'
  47. import { bundleFindByMobile, bundleBuy } from '@/api/customerBundle.js'
  48. import { salesChannelList } from '@/api/FinancialManagement'
  49. export default {
  50. name: 'SetmealPayMoney',
  51. props: {
  52. openModal: {
  53. // 弹框是否展示
  54. type: Boolean,
  55. default: false
  56. },
  57. setmealInfo: {
  58. // 套餐信息
  59. type: Object,
  60. default: () => {
  61. return {}
  62. }
  63. }
  64. },
  65. data () {
  66. // 校验手机号
  67. const isMobileValid = (rule, value, callback) => {
  68. if (!value) {
  69. callback(new Error('请输入手机号'))
  70. } else {
  71. if (!isMobile(value)) {
  72. callback(new Error('请输入正确的手机号'))
  73. } else {
  74. callback()
  75. }
  76. }
  77. }
  78. return {
  79. isShow: this.openModal, // 弹框是否展示
  80. form: {
  81. custMobile: '',
  82. custName: '',
  83. custId: null,
  84. dataSourceNo: undefined // 销售合作商
  85. },
  86. rules: {
  87. custMobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: isMobileValid, trigger: 'blur' }],
  88. dataSourceNo: [{ required: true, message: '请选择销售合作商', trigger: 'change' }]
  89. },
  90. setmealData: null, // 套餐数据
  91. partnerList: [] // 合作商 下拉数据
  92. }
  93. },
  94. computed: {
  95. ...mapGetters(['authUserInfo'])
  96. },
  97. methods: {
  98. // 手机号输入监听
  99. mobileInput () {
  100. if (this.form.custMobile.length == 11) {
  101. if (isMobile(this.form.custMobile)) {
  102. // 校验手机号
  103. // 根据手机号去查询是否已绑定车牌
  104. bundleFindByMobile({ mobile: this.form.custMobile }).then(res => {
  105. if (res.status == 200) {
  106. if (res.data) {
  107. // 查到客户信息
  108. this.form.custId = res.data.id
  109. } else {
  110. // 未查到客户信息
  111. this.form.custId = null
  112. }
  113. } else {
  114. this.form.custId = null
  115. }
  116. })
  117. }
  118. }
  119. },
  120. // 确认收款
  121. onSubmit () {
  122. this.$refs.ruleForm.validate(valid => {
  123. if (valid) {
  124. const params = {
  125. bundleId: this.setmealData.id,
  126. custId: this.form.custId,
  127. custName: this.form.custName,
  128. custMobile: this.form.custMobile,
  129. dataSourceNo: this.form.dataSourceNo,
  130. totalAmount: this.setmealData.price,
  131. paymentDetail: { payType: 10001 }
  132. }
  133. bundleBuy(params).then(res => {
  134. if (res.status == 200) {
  135. if (this.$hasPermissions('M_bundel_buyRecord')) {
  136. this.$router.push({ path: '/SetmealSales/PurchasedSetmeal' })
  137. } else {
  138. this.cancel()
  139. }
  140. }
  141. })
  142. } else {
  143. console.log('error submit!!')
  144. return false
  145. }
  146. })
  147. },
  148. // 取消收款
  149. cancel () {
  150. this.resetForm() // 重置表单数据
  151. this.isShow = false
  152. },
  153. // 重置表单
  154. resetForm () {
  155. this.form.custMobile = ''
  156. this.form.custName = ''
  157. this.form.custId = null
  158. this.form.dataSourceNo = undefined
  159. },
  160. // 获取渠道商下的合作商信息
  161. getSalesChannel () {
  162. salesChannelList().then(res => {
  163. if (res.status == 200) {
  164. this.partnerList = res.data
  165. const salesChannelType = this.authUserInfo.extInfo.channel.salesChannelType
  166. if (salesChannelType == 'SALLER') { // 合作商
  167. this.form.dataSourceNo = res.data.length > 0 ? res.data[0].salesChannelNo : undefined
  168. }
  169. } else {
  170. this.partnerList = []
  171. this.form.dataSourceNo = undefined
  172. }
  173. })
  174. }
  175. },
  176. watch: {
  177. // 父页面传过来的弹框状态
  178. openModal (newValue, oldValue) {
  179. this.isShow = newValue
  180. },
  181. // 重定义的弹框状态
  182. isShow (val) {
  183. if (!val) {
  184. this.$emit('close')
  185. } else {
  186. this.resetForm() // 重置表单数据
  187. this.getSalesChannel()
  188. }
  189. },
  190. setmealInfo (newValue, oldValue) {
  191. if (newValue && this.isShow) {
  192. this.setmealData = newValue
  193. } else {
  194. this.setmealData = null
  195. }
  196. }
  197. }
  198. }
  199. </script>
  200. <style lang="less">
  201. .setmealPayMoneyModal {
  202. .item-con {
  203. .item-main {
  204. margin: 0;
  205. .item-price {
  206. font-size: 24px;
  207. color: red;
  208. margin-right: 5px;
  209. }
  210. }
  211. }
  212. .btn-cont {
  213. text-align: center;
  214. .setmealPayMoney-cancel {
  215. margin-left: 30px;
  216. }
  217. }
  218. .text-center {
  219. text-align: center;
  220. }
  221. }
  222. </style>