info.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <extend name="public/base"/>
  2. <block name="css">
  3. <style>
  4. .van-nav-bar--fixed {z-index:100;}
  5. .van-nav-bar .van-icon,.van-nav-bar__text {color:white;}
  6. .van-step--horizontal .van-step__title {font-size:16px;}
  7. .van-step--horizontal .van-step__icon {font-size:16px;}
  8. .van-step__circle {width:10px;height:10px;}
  9. .van-row {width:100%;}
  10. .btn_search_item{background:#f2f6ff;display:inline-block;border-radius:5px;line-height:35px;height:35px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;font-size:13px;width:100%;color:#666;margin-bottom:10px;}
  11. .btn_search_item.active{color:var(--pink);background:#fff7fa;}
  12. .btn_search_icon{position:absolute;bottom:-3px;right:-3px;font-size:30px;}
  13. .van-uploader__input-wrapper {width:100%;}
  14. </style>
  15. </block>
  16. <block name="body">
  17. <!--头部-->
  18. <van-nav-bar
  19. class="bg-pink"
  20. left-text="返回"
  21. left-arrow
  22. @click-left="onBack"
  23. fixed="true"
  24. >
  25. <template #title>
  26. <span style="color:white;">我的资料</span>
  27. </template>
  28. </van-nav-bar>
  29. <div style="width:100%;height:46px;"></div>
  30. <!--头图-->
  31. <van-uploader :max-count="1" :after-read="uploadHead" style="padding:20px 0;width:100%;">
  32. <van-image width="30%" style="display:block;margin:0 auto;" :src="head_image"></van-image>
  33. <div style="text-align:center;font-size:14px;color:#999;">点击上传头像</div>
  34. </van-uploader>
  35. <!--增空-->
  36. <van-field
  37. v-model="form.name"
  38. label="真实姓名"
  39. placeholder="请输入真实姓名"
  40. required
  41. ></van-field>
  42. <van-field
  43. v-model="form.mobile"
  44. label="电话"
  45. placeholder="请输入电话号码"
  46. required
  47. ></van-field>
  48. <div style="padding:16px;">
  49. <van-button block class="bg-pink" @click="onSubmit">提交</van-button>
  50. </div>
  51. </block>
  52. <block name="script">
  53. <script>
  54. new Vue({
  55. el: '#app',
  56. data() {
  57. return {
  58. form: {$matchmaker},
  59. };
  60. },
  61. methods: {
  62. onBack() {
  63. history.back();
  64. },
  65. onSubmit() {
  66. if (this.form.realname == '') {
  67. this.$toast('请输入真实姓名');
  68. return false;
  69. }
  70. if (this.form.mobile == '') {
  71. this.$toast('请选择性别');
  72. return false;
  73. }
  74. $.post("{:url('infoPost')}", this.form, function (json) {
  75. location.href = "{:url('index')}";
  76. }, 'json');
  77. },
  78. uploadHead(file) {
  79. let self = this;
  80. $.post("{:url('imageUpload')}",{file:file.content,name:file.file.name},function(json){
  81. if (json.code) {
  82. self.form.avatar = json.data.avatar;
  83. self.$forceUpdate();
  84. } else {
  85. self.$toast(json.msg);
  86. }
  87. },'json')
  88. },
  89. },
  90. computed: {
  91. head_image() {
  92. return this.form.avatar ? this.form.avatar : '__TMPL__/public/assets/images/matchmaker/avatar2.png';
  93. }
  94. },
  95. });
  96. </script>
  97. </block>