en-head-img.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view>
  3. <view class="box" @click="isShowPop()">
  4. <image class="left" :src="value" mode="aspectFill"></image>
  5. <view class="right">
  6. <text>{{label}}</text>
  7. <image src="@/static/img/toRight.png" mode=""></image>
  8. </view>
  9. </view>
  10. <uni-popup ref="popup" type="bottom" background-color="#fff">
  11. <view class="pop-box" @click="this.editImg(2)">使用相机拍一张</view>
  12. <view class="pop-box" @click="this.editImg(1)">从相册选择一张</view>
  13. </uni-popup>
  14. </view>
  15. </template>
  16. <script>
  17. import { upLoadingFileOss } from "@/common/js/upLoadingFile";
  18. import tools from '@/common/js/tools.js'
  19. export default {
  20. props:{
  21. label: {
  22. type: String,
  23. default: '标题'
  24. },
  25. value:{
  26. type: String,
  27. default: ''
  28. },
  29. },
  30. data(){
  31. return{
  32. }
  33. },
  34. methods:{
  35. isShowPop(){
  36. let isH5=false
  37. // #ifdef H5
  38. isH5=true
  39. // #endif
  40. if(isH5){
  41. this.editImg(1)
  42. }else{
  43. this.$refs.popup.open('bottom')
  44. }
  45. },
  46. editImg(type){
  47. uni.chooseImage({
  48. count: 1,
  49. sizeType: ["compressed", "camera"],
  50. sourceType: [type===1?"album":"camera"],
  51. success:(res)=>{
  52. if (res.errMsg == "chooseImage:ok"){
  53. tools.showLoading()
  54. this.upLoadOss(res.tempFiles[0].path)
  55. }else{
  56. tools.error('头像选择失败')
  57. }
  58. }
  59. })
  60. },
  61. upLoadOss(path){
  62. upLoadingFileOss(path).then((res)=>{
  63. console.log(res);
  64. }).catch(()=>{
  65. tools.hideLoading()
  66. })
  67. },
  68. },
  69. }
  70. </script>
  71. <style scoped lang="scss">
  72. .box{
  73. width: 100%;
  74. height: 152rpx;
  75. background-color: #fff;
  76. display: flex;
  77. align-items: center;
  78. justify-content: space-between;
  79. image{
  80. width: 96rpx;
  81. height: 96rpx;
  82. border-radius: 50%;
  83. }
  84. .left{
  85. font-size: 32rpx;
  86. }
  87. .right{
  88. display: flex;
  89. align-items: center;
  90. text{
  91. font-size: 32rpx;
  92. color: #333;
  93. }
  94. image{
  95. width: 40rpx;
  96. height: 40rpx;
  97. }
  98. }
  99. }
  100. .pop-box{
  101. height: 130rpx;
  102. background-color: #fff;
  103. text-align: center;
  104. line-height: 130rpx;
  105. font-size: 30rpx;
  106. }
  107. </style>