create_account.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <div class="app-container">
  3. <div v-show="step == 1">
  4. <div class="setting_title">开通账号</div>
  5. <el-divider></el-divider>
  6. <div class="tips">说明:开通商户账号是指开通商城后台管理系统的总登录账号。</div>
  7. <el-card shadow="never" class="my-card">
  8. <el-form class="my-form" ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="120px" label-position="right">
  9. <el-form-item label="商户账号" prop="account">
  10. <el-input v-model="mainForm.account" autocomplete="off" placeholder="请输入商户账号"></el-input>
  11. <el-popover
  12. class="question"
  13. placement="right-start"
  14. title="账号设置"
  15. width="260"
  16. trigger="hover"
  17. content="账号设置需按数字、字母组合设置至少12位账号">
  18. <svg-icon icon-class="question" slot="reference" />
  19. </el-popover>
  20. </el-form-item>
  21. <el-form-item label="账户昵称" prop="nickName">
  22. <el-input v-model="mainForm.nickName" autocomplete="off" placeholder="请输入账户昵称"></el-input>
  23. </el-form-item>
  24. <el-form-item label="负责人" prop="chargePerson">
  25. <el-input v-model="mainForm.chargePerson" autocomplete="off" placeholder="请输入负责人"></el-input>
  26. </el-form-item>
  27. <el-form-item label="联系电话" prop="phone">
  28. <el-input v-model="mainForm.phone" autocomplete="off" placeholder="请输入联系电话"></el-input>
  29. </el-form-item>
  30. <el-form-item label="金蝶主体账号" prop="kingdeeId">
  31. <el-input v-model="mainForm.kingdeeId" autocomplete="off" placeholder="请输入金蝶主体账号"></el-input>
  32. </el-form-item>
  33. <el-form-item label="金蝶主体名称" prop="kingdeeName">
  34. <el-input v-model="mainForm.kingdeeName" autocomplete="off" placeholder="请输入金蝶主体名称"></el-input>
  35. </el-form-item>
  36. <el-form-item label="电子邮箱" prop="email">
  37. <el-input v-model="mainForm.email" autocomplete="off" placeholder="请输入电子邮箱"></el-input>
  38. </el-form-item>
  39. <el-form-item label="地址" prop="address">
  40. <el-input v-model="mainForm.address" placeholder="请输入地址"></el-input>
  41. </el-form-item>
  42. <el-form-item label="登录密码" prop="newPassword">
  43. <el-input v-model="mainForm.newPassword" ref="password1" auto-complete="new-password" placeholder="请输入登录密码" :type="passwordType1"></el-input>
  44. <span class="show-pwd" @click="showPwd(1)">
  45. <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
  46. </span>
  47. <el-popover
  48. class="question"
  49. placement="right-start"
  50. title="密码设置"
  51. width="260"
  52. trigger="hover"
  53. content="密码设置需按数字、字母组合设置至少12位密码">
  54. <svg-icon icon-class="question" slot="reference" />
  55. </el-popover>
  56. </el-form-item>
  57. <el-form-item label="确认密码" prop="confirmPassword">
  58. <el-input v-model="mainForm.confirmPassword" ref="password2" auto-complete="confirm-password" placeholder="请再次输入密码" :type="passwordType2"></el-input>
  59. <span class="show-pwd" @click="showPwd(2)">
  60. <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
  61. </span>
  62. <el-popover
  63. class="question"
  64. placement="right-start"
  65. title="密码设置"
  66. width="260"
  67. trigger="hover"
  68. content="确认密码需要和登录密码保持一致">
  69. <svg-icon icon-class="question" slot="reference" />
  70. </el-popover>
  71. </el-form-item>
  72. </el-form>
  73. </el-card>
  74. </div>
  75. <div class="page-footer">
  76. <div class="footer" :class="classObj">
  77. <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
  78. <el-popconfirm
  79. title="确定关闭吗?"
  80. @onConfirm="goBack"
  81. style="margin-left: 10px;"
  82. >
  83. <el-button slot="reference">关 闭</el-button>
  84. </el-popconfirm>
  85. </div>
  86. </div>
  87. </div>
  88. </template>
  89. <script>
  90. import { getToken } from '@/utils/auth'
  91. import { addAccount } from "@/api/merchant";
  92. export default {
  93. data() {
  94. var validateAccount = (rule, value, callback) => {
  95. if (value === '') {
  96. callback(new Error('请输入商户账号'));
  97. } else if (value.length < 12) {
  98. callback(new Error('账号长度至少12位'));
  99. } else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
  100. callback(new Error('账号必须包含数字和字母'));
  101. } else {
  102. callback();
  103. }
  104. };
  105. var validatePass3 = (rule, value, callback) => {
  106. if (value === '') {
  107. callback(new Error('请输入登录密码'));
  108. } else if (value.length < 12) {
  109. callback(new Error('密码长度至少12位'));
  110. } else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
  111. callback(new Error('密码必须包含数字和字母'));
  112. } else {
  113. if (this.mainForm.confirmPassword !== '') {
  114. this.$refs.mainForm.validateField('confirmPassword');
  115. }
  116. callback();
  117. }
  118. };
  119. var validatePass4 = (rule, value, callback) => {
  120. if (value === '') {
  121. callback(new Error('请再次输入密码'));
  122. } else if (value !== this.mainForm.newPassword) {
  123. callback(new Error('两次输入密码不一致'));
  124. } else {
  125. callback();
  126. }
  127. };
  128. return {
  129. baseURL: process.env.VUE_APP_BASE_API,
  130. myHeaders: {'x-token': getToken()},
  131. step: 1,
  132. mainForm: {
  133. account: '', // 账号
  134. nickName: '', // 用户名
  135. appName: '', // 小程序名称
  136. chargePerson: '', // 负责人
  137. phone: '', // 联系电话
  138. kingdeeId: '',
  139. kingdeeName: '',
  140. email: '', // 电子邮箱
  141. address: '', // 地址
  142. newPassword: '', // 登录密码
  143. confirmPassword: '', // 确认密码
  144. },
  145. mainFormRules: {
  146. account: [
  147. { required: true, validator: validateAccount, trigger: 'blur' }
  148. ],
  149. nickName: [
  150. { required: true, message: '请输入用户名', trigger: 'blur' }
  151. ],
  152. appName: [
  153. { required: true, message: '请输入用户名', trigger: 'blur' }
  154. ],
  155. chargePerson: [
  156. { required: true, message: '请输入负责人', trigger: 'blur' }
  157. ],
  158. phone: [
  159. { required: true, message: '请输入联系电话', trigger: 'blur' }
  160. ],
  161. kingdeeId: [
  162. { required: true, message: '请输入金蝶主体账号', trigger: 'blur' }
  163. ],
  164. kingdeeName: [
  165. { required: true, message: '请输入金蝶主体密码', trigger: 'blur' }
  166. ],
  167. newPassword: [
  168. { required: true, validator: validatePass3, trigger: 'blur' }
  169. ],
  170. confirmPassword: [
  171. { required: true, validator: validatePass4, trigger: 'blur' }
  172. ],
  173. },
  174. passwordType1: 'password',
  175. passwordType2: 'password',
  176. formLoading: false,
  177. }
  178. },
  179. computed: {
  180. sidebar() {
  181. return this.$store.state.app.sidebar
  182. },
  183. classObj() {
  184. return {
  185. hideSidebar: !this.sidebar.opened,
  186. openSidebar: this.sidebar.opened
  187. }
  188. },
  189. },
  190. methods: {
  191. goBack() {
  192. this.$router.go(-1);
  193. },
  194. // 显示隐藏密码
  195. showPwd(num) {
  196. if(num == 1) {
  197. if (this.passwordType1 === 'password') {
  198. this.passwordType1 = ''
  199. } else {
  200. this.passwordType1 = 'password'
  201. }
  202. this.$nextTick(() => {
  203. this.$refs.password1.focus()
  204. })
  205. }
  206. if(num == 2) {
  207. if (this.passwordType2 === 'password') {
  208. this.passwordType2 = ''
  209. } else {
  210. this.passwordType2 = 'password'
  211. }
  212. this.$nextTick(() => {
  213. this.$refs.password2.focus()
  214. })
  215. }
  216. },
  217. // 点击 提交表单
  218. clickSubmitForm() {
  219. this.$refs.mainForm.validate((valid) => {
  220. if (valid) {
  221. this.submitForm();
  222. }
  223. })
  224. },
  225. // 提交表单
  226. submitForm() {
  227. this.formLoading = true;
  228. let params = {
  229. adminCompanyName: this.mainForm.nickName,
  230. useOrgNumber: this.mainForm.kingdeeId,
  231. useOrgName: this.mainForm.kingdeeName,
  232. adminUser: {
  233. userName: this.mainForm.account,
  234. adminCompanyName: this.mainForm.nickName,
  235. linkName: this.mainForm.chargePerson,
  236. linkPhone: this.mainForm.phone,
  237. email: this.mainForm.email,
  238. address: this.mainForm.address,
  239. password: this.mainForm.confirmPassword,
  240. },
  241. }
  242. addAccount(params).then(res => {
  243. this.$successMsg('开通成功');
  244. setTimeout(() => {
  245. this.$router.push({
  246. path: '/merchant/merchant_list',
  247. query: {}
  248. })
  249. }, 1500)
  250. }).finally(res => {
  251. this.formLoading = false;
  252. })
  253. }
  254. }
  255. }
  256. </script>
  257. <style lang="scss" scoped>
  258. .setting_title {
  259. padding-left: 0;
  260. }
  261. .tips {
  262. font-size: 14px;
  263. }
  264. .my-card {
  265. margin-top: 20px;
  266. .box {
  267. background: rgb(235, 240, 249);
  268. padding: 10px;
  269. font-size: 14px;
  270. margin: 20px 0;
  271. line-height: 18px;
  272. ::v-deep .el-link {
  273. vertical-align: unset;
  274. }
  275. }
  276. }
  277. .my-form {
  278. width: 450px;
  279. margin: 0 auto;
  280. }
  281. .show-pwd {
  282. position: absolute;
  283. right: 15px;
  284. top: 0;
  285. font-size: 16px;
  286. cursor: pointer;
  287. user-select: none;
  288. }
  289. .question {
  290. position: absolute;
  291. right: -30px;
  292. top: 0;
  293. font-size: 20px;
  294. cursor: pointer;
  295. user-select: none;
  296. }
  297. </style>