| @@ -4,9 +4,16 @@ | |||||
| <head> | <head> | ||||
| <meta charset="utf-8"> | <meta charset="utf-8"> | ||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||||
| <meta http-equiv="pragram" content="no-cache"> | |||||
| <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> | |||||
| <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | ||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | ||||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||||
| <!-- <link rel="icon" href="/favicon.ico" type="image/x-icon" /> | |||||
| <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> --> | |||||
| <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css"> | <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css"> | ||||
| <script src="http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js"></script> | <script src="http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js"></script> | ||||
| <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"> | <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"> | ||||
| @@ -1,281 +0,0 @@ | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter"> | |||||
| <van-uploader class="sett-item" :before-read="beforeRead"> | |||||
| <div style="height: 100%"><img :src="ImgUrl" alt="" /></div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| </van-uploader> | |||||
| </div> | |||||
| <div class="uploadava"> | |||||
| <van-popup | |||||
| duration="0" | |||||
| v-model="showCropper" | |||||
| position="top" | |||||
| :style="{ height: '100%' }" | |||||
| > | |||||
| <div class="cropper-container"> | |||||
| <van-loading | |||||
| v-show="loadingShow" | |||||
| size="50" | |||||
| color="#fff" | |||||
| vertical | |||||
| text-color="#fff" | |||||
| >上传中...</van-loading | |||||
| > | |||||
| <vueCropper | |||||
| ref="cropper" | |||||
| :img="option.img" | |||||
| :outputSize="option.outputSize" | |||||
| :outputType="option.outputType" | |||||
| :info="option.info" | |||||
| :full="option.full" | |||||
| :autoCropWidth="option.autoCropWidth" | |||||
| :autoCropHeight="option.autoCropHeight" | |||||
| :canMove="option.canMove" | |||||
| :canMoveBox="option.canMoveBox" | |||||
| :original="option.original" | |||||
| :autoCrop="option.autoCrop" | |||||
| :fixed="option.fixed" | |||||
| :fixedNumber="option.fixedNumber" | |||||
| :centerBox="option.centerBox" | |||||
| :infoTrue="option.infoTrue" | |||||
| :fixedBox="option.fixedBox" | |||||
| :high="option.high" | |||||
| :mode="option.mode" | |||||
| /> | |||||
| <van-nav-bar | |||||
| left-text="取消" | |||||
| right-text="确定" | |||||
| @click-left="onClickLeft" | |||||
| @click-right="onClickRight" | |||||
| /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { awsImgUpload } from '@/api/editModel' | |||||
| import { Toast } from 'vant' | |||||
| import { VueCropper } from 'vue-cropper' | |||||
| export default { | |||||
| name: 'uploadAva', | |||||
| components: { | |||||
| VueCropper | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean | |||||
| }, | |||||
| avaUrl: { | |||||
| default: '', | |||||
| type: String | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| ImgUrl: '', | |||||
| show: true, // 上传类型的弹窗 | |||||
| imageFileName: '', | |||||
| showCropper: false, // 裁剪的弹窗 | |||||
| option: { | |||||
| img: '', | |||||
| outputSize: 0.8, | |||||
| info: false, // 裁剪框的大小信息 | |||||
| outputType: 'jpeg', // 裁剪生成图片的格式 | |||||
| canScale: true, // 图片是否允许滚轮缩放 | |||||
| autoCrop: true, // 是否默认生成截图框 | |||||
| autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | |||||
| autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度 | |||||
| high: true, // 是否按照设备的dpr 输出等比例图片 | |||||
| fixedBox: false, // 固定截图框大小 不允许改变 | |||||
| fixed: true, // 是否开启截图框宽高固定比例 | |||||
| fixedNumber: [1, 1], // 截图框的宽高比例 | |||||
| full: true, // 是否输出原图比例的截图 | |||||
| canMoveBox: true, // 截图框能否拖动 | |||||
| original: false, // 上传图片按照原始比例渲染 | |||||
| centerBox: true, // 截图框是否被限制在图片里面 | |||||
| infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||||
| mode: '100% auto' // 图片默认渲染方式 | |||||
| }, | |||||
| loadingShow: false // 是否展示loading | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| beforeRead(file) { | |||||
| console.log(file) | |||||
| if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||||
| this.$toast('请上传 jpg/png 格式图片') | |||||
| return false | |||||
| } | |||||
| let data = window.URL.createObjectURL(new Blob([file])) | |||||
| this.option.img = data //给裁剪图片的路径 | |||||
| this.showCropper = true | |||||
| return false | |||||
| }, | |||||
| // 点击裁剪的选择 | |||||
| onClickRight() { | |||||
| let that = this | |||||
| this.loadingShow = true | |||||
| this.$refs.cropper.getCropBlob(async (data) => { | |||||
| let formData = new FormData() | |||||
| formData.append('file', data) | |||||
| let file = formData.get('file') | |||||
| // 转为 base64 | |||||
| let reader = new FileReader() | |||||
| reader.onload = async () => { | |||||
| // base64结果 | |||||
| that.ImgUrl = this.result | |||||
| that.loading = false | |||||
| } | |||||
| reader.readAsDataURL(file) | |||||
| // await that.toBase64(file) | |||||
| console.log(that.ImgUrl, 'dasdasd') | |||||
| // 发请求 | |||||
| const AccessToken = localStorage.getItem('AccessToken') | |||||
| that | |||||
| .$axios({ | |||||
| method: 'post', | |||||
| // url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`, | |||||
| url: `http://m.metavatar.cc/C/api/upload/awsImgUpload`, | |||||
| headers: { | |||||
| // 'Content-Type': 'application/json;charset=UTF-8', | |||||
| 'content-type': 'multipart/form-data', | |||||
| token: AccessToken, | |||||
| 'Access-Control-Allow-Credentials': true | |||||
| }, | |||||
| data: { file: that.base64ToBinary(that.ImgUrl) } | |||||
| }) | |||||
| .then((res) => { | |||||
| console.log(res) | |||||
| console.log(that.ImgUrl) | |||||
| console.log(that.base64ToBinary(that.ImgUrl)) | |||||
| that.loadingShow = false | |||||
| that.showCropper = false | |||||
| Toast.success('上传成功') | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| // 点击取消 | |||||
| onClickLeft() { | |||||
| this.loadingShow = false | |||||
| this.showCropper = false | |||||
| this.$parent.showPhotoUploader = false | |||||
| }, | |||||
| // 上传图片 | |||||
| async pushImg(data) { | |||||
| try { | |||||
| const res = await awsImgUpload(data) | |||||
| this.loadingShow = false | |||||
| this.showCropper = false | |||||
| Toast.success('上传成功') | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| }, | |||||
| //图片转base64,异步 | |||||
| toBase64(file) { | |||||
| let that = this | |||||
| return new Promise((resolve, reject) => { | |||||
| const reader = new FileReader() | |||||
| reader.onload = () => { | |||||
| // base64结果 | |||||
| that.ImgUrl = this.result | |||||
| that.loading = false | |||||
| } | |||||
| reader.onerror = reject | |||||
| reader.readAsDataURL(file) | |||||
| }) | |||||
| }, | |||||
| // base64 转二进制 | |||||
| base64ToBinary(base64) { | |||||
| console.log(base64) | |||||
| const binaryString = window.atob(base64) | |||||
| const binaryLength = binaryString.length | |||||
| const bytes = new Uint8Array(binaryLength) | |||||
| for (let i = 0; i < binaryLength; i++) { | |||||
| bytes[i] = binaryString.charCodeAt(i) | |||||
| } | |||||
| return bytes | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // .uploder{ | |||||
| // overflow: hidden; | |||||
| // } | |||||
| /deep/.cropper-view-box { | |||||
| outline: 2px dashed #fff !important; | |||||
| } | |||||
| /deep/.crop-point { | |||||
| background-color: auto !important; | |||||
| } | |||||
| /deep/.van-loading { | |||||
| position: absolute; | |||||
| // color: red; | |||||
| z-index: 9999; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| margin-left: -55px; | |||||
| margin-top: -30px; | |||||
| background: rgba(0, 0, 0, 0.3); | |||||
| padding: 10px 30px; | |||||
| border-radius: 25px; | |||||
| } | |||||
| .uploadava { | |||||
| .update-avatar { | |||||
| height: 100%; | |||||
| text-align: center; | |||||
| .update-avatar-line { | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| background-color: #979797; | |||||
| } | |||||
| .avatar-select-type { | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding-bottom: 4px; | |||||
| .upload-avator { | |||||
| padding: 14px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 15px 0 30px; | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding: 15px 0 18px; | |||||
| } | |||||
| } | |||||
| .cropper-container { | |||||
| height: 94vh; | |||||
| .van-nav-bar { | |||||
| background-color: rgba(0, 0, 0, 0.87); | |||||
| :global(.van-nav-bar__text) { | |||||
| color: #fff; | |||||
| // font-size: $font-size-normal-x; | |||||
| } | |||||
| :global(.van-nav-bar__text:nth-child(2)) { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| // :global(.van-icon) { | |||||
| // color: red; | |||||
| // } | |||||
| } | |||||
| } | |||||
| .vue-cropper { | |||||
| background: #000; | |||||
| height: 100%; | |||||
| padding-top: 46px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -1,272 +0,0 @@ | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter"> | |||||
| <van-uploader class="sett-item" :before-read="beforeRead"> | |||||
| <div style="height: 100%"><img :src="ImgUrl" alt="" /></div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| </van-uploader> | |||||
| </div> | |||||
| <div class="uploadava"> | |||||
| <van-popup | |||||
| duration="0" | |||||
| v-model="showCropper" | |||||
| position="top" | |||||
| :style="{ height: '100%' }" | |||||
| > | |||||
| <div class="cropper-container"> | |||||
| <van-loading | |||||
| v-show="loadingShow" | |||||
| size="50" | |||||
| color="#fff" | |||||
| vertical | |||||
| text-color="#fff" | |||||
| >上传中...</van-loading | |||||
| > | |||||
| <vueCropper | |||||
| ref="cropper" | |||||
| :img="option.img" | |||||
| :outputSize="option.outputSize" | |||||
| :outputType="option.outputType" | |||||
| :info="option.info" | |||||
| :full="option.full" | |||||
| :autoCropWidth="option.autoCropWidth" | |||||
| :autoCropHeight="option.autoCropHeight" | |||||
| :canMove="option.canMove" | |||||
| :canMoveBox="option.canMoveBox" | |||||
| :original="option.original" | |||||
| :autoCrop="option.autoCrop" | |||||
| :fixed="option.fixed" | |||||
| :fixedNumber="option.fixedNumber" | |||||
| :centerBox="option.centerBox" | |||||
| :infoTrue="option.infoTrue" | |||||
| :fixedBox="option.fixedBox" | |||||
| :high="option.high" | |||||
| :mode="option.mode" | |||||
| /> | |||||
| <van-nav-bar | |||||
| left-text="取消" | |||||
| right-text="选择" | |||||
| @click-left="onClickLeft" | |||||
| @click-right="onClickRight" | |||||
| /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { awsImgUpload } from '@/api/editModel' | |||||
| import { Toast } from 'vant' | |||||
| import { VueCropper } from 'vue-cropper' | |||||
| export default { | |||||
| name: 'uploadAva', | |||||
| components: { | |||||
| VueCropper | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean | |||||
| }, | |||||
| avaUrl: { | |||||
| default: '', | |||||
| type: String | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| ImgUrl: '', | |||||
| show: true, // 上传类型的弹窗 | |||||
| imageFileName: '', | |||||
| showCropper: false, // 裁剪的弹窗 | |||||
| option: { | |||||
| img: '', | |||||
| outputSize: 0.8, | |||||
| info: false, // 裁剪框的大小信息 | |||||
| outputType: 'jpeg', // 裁剪生成图片的格式 | |||||
| canScale: true, // 图片是否允许滚轮缩放 | |||||
| autoCrop: true, // 是否默认生成截图框 | |||||
| autoCropWidth: window.innerWidth - 100 + 'px', // 默认生成截图框宽度 | |||||
| autoCropHeight: window.innerWidth - 100 + 'px', // 默认生成截图框高度 | |||||
| high: true, // 是否按照设备的dpr 输出等比例图片 | |||||
| fixedBox: false, // 固定截图框大小 不允许改变 | |||||
| fixed: true, // 是否开启截图框宽高固定比例 | |||||
| fixedNumber: [1, 1], // 截图框的宽高比例 | |||||
| full: true, // 是否输出原图比例的截图 | |||||
| canMoveBox: true, // 截图框能否拖动 | |||||
| original: false, // 上传图片按照原始比例渲染 | |||||
| centerBox: true, // 截图框是否被限制在图片里面 | |||||
| infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | |||||
| mode: '100% auto' // 图片默认渲染方式 | |||||
| }, | |||||
| loadingShow: false // 是否展示loading | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| beforeRead(file) { | |||||
| console.log(file) | |||||
| if (file.type !== 'image/jpeg' && file.type !== 'image/png') { | |||||
| this.$toast('请上传 jpg/png 格式图片') | |||||
| return false | |||||
| } | |||||
| // console.log(111, file) | |||||
| this.showCropper = true | |||||
| this.imageToBase64(file) | |||||
| this.imageFileName = file.name | |||||
| }, | |||||
| imageToBase64(file) { | |||||
| let reader = new FileReader() | |||||
| console.log(reader) | |||||
| reader.readAsDataURL(file) | |||||
| reader.onload = () => { | |||||
| this.option.img = reader.result | |||||
| } | |||||
| }, | |||||
| onClickRight() { | |||||
| // let formData = new FormData() | |||||
| this.loadingShow = true | |||||
| console.log(this.option) | |||||
| // const AccessToken = localStorage.getItem('AccessToken') | |||||
| // this.$axios({ | |||||
| // method: 'post', | |||||
| // url: `https://smapitest.malls.iformall.com/C/api/upload/awsImgUpload`, | |||||
| // headers: { | |||||
| // // 'Content-Type': 'application/json;charset=UTF-8', | |||||
| // 'content-type': 'multipart/form-data', | |||||
| // token: AccessToken, | |||||
| // 'Access-Control-Allow-Credentials': true | |||||
| // }, | |||||
| // data: { file: this.option.img } | |||||
| // }).then((res) => { | |||||
| // console.log(res) | |||||
| // this.loadingShow = false | |||||
| // this.showCropper = false | |||||
| // Toast.success('上传成功') | |||||
| // }) | |||||
| // this.pushImg({ file: this.option.img }) | |||||
| // this.pushImg({ file: require('../assets/icon/icon-yes.png') }) | |||||
| // this.$refs.cropper.getCropBlob((data) => { | |||||
| console.log(this.$refs.cropper) | |||||
| this.$refs.cropper.getCroppedCanvas((data) => { | |||||
| this.ImgUrl = data | |||||
| console.log(data, 'blob') | |||||
| // let blob = window.URL.createObjectURL(data) | |||||
| // console.log(blob) | |||||
| // formData.append('File', data, this.imageFileName) | |||||
| // formData.append('id', this.$store.getters.user.userId) | |||||
| // console.log(formData.getAll('File')) | |||||
| // console.log(data) | |||||
| // this.pushImg({ file: blob }) | |||||
| // uploadAva(formData).then((res) => { | |||||
| // this.showCropper = false | |||||
| // this.$emit('update:showAta', false) | |||||
| // this.$emit('update:avaUrl', res.data) | |||||
| // }) | |||||
| }) | |||||
| // this.$refs.cropper.getCroppedCanvas().toBlob((blob) => { | |||||
| // const formData = new FormData() | |||||
| // formData.append('file', blob, 'avatar.png') | |||||
| // this.pushImg({ file: blob }) | |||||
| // }) | |||||
| }, | |||||
| onClickLeft() { | |||||
| this.loadingShow = false | |||||
| this.showCropper = false | |||||
| this.$parent.showPhotoUploader = false | |||||
| }, | |||||
| // 上传图片 | |||||
| async pushImg(data) { | |||||
| try { | |||||
| const res = await awsImgUpload(data) | |||||
| this.loadingShow = false | |||||
| this.showCropper = false | |||||
| Toast.success('上传成功') | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| // .uploder{ | |||||
| // overflow: hidden; | |||||
| // } | |||||
| /deep/.cropper-view-box { | |||||
| outline: 2px dashed #fff !important; | |||||
| } | |||||
| /deep/.crop-point { | |||||
| background-color: auto !important; | |||||
| } | |||||
| /deep/.van-loading { | |||||
| position: absolute; | |||||
| // color: red; | |||||
| z-index: 9999; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| margin-left: -55px; | |||||
| margin-top: -30px; | |||||
| background: rgba(0, 0, 0, 0.3); | |||||
| padding: 10px 30px; | |||||
| border-radius: 25px; | |||||
| } | |||||
| .uploadava { | |||||
| .update-avatar { | |||||
| height: 100%; | |||||
| text-align: center; | |||||
| .update-avatar-line { | |||||
| width: 100%; | |||||
| height: 1px; | |||||
| background-color: #979797; | |||||
| } | |||||
| .avatar-select-type { | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding-bottom: 4px; | |||||
| .upload-avator { | |||||
| padding: 14px; | |||||
| } | |||||
| } | |||||
| p { | |||||
| margin: 15px 0 30px; | |||||
| background-color: #fff; | |||||
| width: 346px; | |||||
| border-radius: 12px; | |||||
| padding: 15px 0 18px; | |||||
| } | |||||
| } | |||||
| .cropper-container { | |||||
| height: 94vh; | |||||
| .van-nav-bar { | |||||
| background-color: rgba(0, 0, 0, 0.87); | |||||
| :global(.van-nav-bar__text) { | |||||
| color: #fff; | |||||
| // font-size: $font-size-normal-x; | |||||
| } | |||||
| :global(.van-nav-bar__text:nth-child(2)) { | |||||
| color: #000; | |||||
| font-weight: 500; | |||||
| } | |||||
| // :global(.van-icon) { | |||||
| // color: red; | |||||
| // } | |||||
| } | |||||
| } | |||||
| .vue-cropper { | |||||
| background: #000; | |||||
| height: 100%; | |||||
| padding-top: 46px; | |||||
| box-sizing: border-box; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -34,6 +34,10 @@ | |||||
| :fixedBox="option.fixedBox" | :fixedBox="option.fixedBox" | ||||
| :high="option.high" | :high="option.high" | ||||
| :mode="option.mode" /> | :mode="option.mode" /> | ||||
| <!-- <div style="display: flex; justify-content: space-between; padding: 10px; height: 8vh"> | |||||
| <div @click="onClickLeft">取消</div> | |||||
| <div @click="onClickRight">确定</div> | |||||
| </div> --> | |||||
| <van-nav-bar left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | <van-nav-bar left-text="取消" right-text="确定" @click-left="onClickLeft" @click-right="onClickRight" /> | ||||
| </div> | </div> | ||||
| </van-popup> | </van-popup> | ||||
| @@ -40,4 +40,16 @@ p { | |||||
| } | } | ||||
| .noScroll { | .noScroll { | ||||
| overflow: hidden; | overflow: hidden; | ||||
| } | |||||
| } | |||||
| .vantLoadingBox { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| } | |||||
| .vantLoading { | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| top: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| } | |||||
| @@ -1,773 +0,0 @@ | |||||
| <template> | |||||
| <!-- 手机号13797188591 --> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | |||||
| <div class="logoBox" @click="go('/')"> | |||||
| <img src="../../assets/img/logoh.png" alt class="logo" /> | |||||
| <!-- <div class="logoTitle">metavatar</div> --> | |||||
| </div> | |||||
| <!-- 首页登录 loginType=1 --> | |||||
| <div class="loginBox" v-if="loginType == 1"> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <!-- 手机号 --> | |||||
| <el-form-item class="phone" prop="phone"> | |||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| </el-form-item> | |||||
| <!-- 密码 --> | |||||
| <el-form-item class="code" prop="password"> | |||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.password" | |||||
| placeholder="请输入密码" | |||||
| ></el-input> | |||||
| </el-form-item> | |||||
| <!-- 随机验证码 --> | |||||
| <el-form-item class="yzCode" prop="yzCode"> | |||||
| <el-col :span="12"> | |||||
| <el-input | |||||
| v-model="form.yzCode" | |||||
| placeholder="请输入验证码" | |||||
| ></el-input> | |||||
| </el-col> | |||||
| <el-col :span="9"> | |||||
| <!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||||
| <img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" /> | |||||
| </el-col> | |||||
| <el-col :span="2"> | |||||
| <i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||||
| </el-col> | |||||
| </el-form-item> | |||||
| <!-- 短信登录和忘记密码 --> | |||||
| <div class="morePage greenColor"> | |||||
| <span @click="loginType = 2">短信登录</span> | |||||
| <span @click="loginType = 3">忘记密码?</span> | |||||
| </div> | |||||
| <!-- 登录 --> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >登录/注册</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| <!-- 没有账号 --> | |||||
| <div> | |||||
| <span>没有账号?</span> | |||||
| <span class="greenColor" @click="loginType = 5">立即注册</span> | |||||
| </div> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 短信登录 loginType=2 --> | |||||
| <div class="loginBox" v-if="loginType == 2"> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <!-- 手机号 --> | |||||
| <el-form-item class="phone" prop="phone"> | |||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| </el-form-item> | |||||
| <!-- 短信验证码 --> | |||||
| <el-form-item class="code" prop="code"> | |||||
| <el-input | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.code" | |||||
| placeholder="请输入短信验证码" | |||||
| > | |||||
| <div | |||||
| v-if="!countdownState" | |||||
| @click="triggerCountdown" | |||||
| class="greenColor" | |||||
| slot="suffix" | |||||
| type="primary" | |||||
| > | |||||
| 获取验证码 | |||||
| </div> | |||||
| <div v-else slot="suffix" type="primary"> | |||||
| 验证码已发送{{ countNum }}s | |||||
| </div> | |||||
| </el-input> | |||||
| </el-form-item> | |||||
| <!-- 短信登录和忘记密码 --> | |||||
| <div class="morePage greenColor inBoxEnd"> | |||||
| <span @click="loginType = 1">账号登录</span> | |||||
| </div> | |||||
| <!-- 登录 --> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >登录</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| <!-- 没有账号 --> | |||||
| <div> | |||||
| <span>没有账号?</span> | |||||
| <span class="greenColor" @click="loginType = 5">立即注册</span> | |||||
| </div> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 忘记密码 loginType=3--> | |||||
| <div class="loginBox" v-if="loginType == 3"> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <!-- 手机号 --> | |||||
| <el-form-item class="phone" prop="phone"> | |||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| </el-form-item> | |||||
| <!-- 随机验证码 --> | |||||
| <el-form-item class="code" prop="yzCode"> | |||||
| <el-col :span="12"> | |||||
| <el-input | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.yzCode" | |||||
| placeholder="请输入验证码" | |||||
| ></el-input> | |||||
| </el-col> | |||||
| <el-col :span="9"> | |||||
| <!-- <div class="yzmImg" v-html="codeImg"></div> --> | |||||
| <img class="yzmImg" :src="codeImg" alt="" /> | |||||
| </el-col> | |||||
| <el-col :span="2"> | |||||
| <i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||||
| </el-col> | |||||
| </el-form-item> | |||||
| <div class="morePage greenColor"> | |||||
| <span @click="loginType = 1">账户登录</span> | |||||
| </div> | |||||
| <!-- 登录 --> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >获取短信验证码</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 重设密码 loginType=4 --> | |||||
| <div class="loginBox" v-if="loginType == 4"> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <!-- 短信验证码 --> | |||||
| <el-form-item class="phone" prop="code1"> | |||||
| <el-input | |||||
| v-model="form.code1" | |||||
| placeholder="请输入短信验证码" | |||||
| ></el-input> | |||||
| </el-form-item> | |||||
| <!-- 新密码1 --> | |||||
| <el-form-item class="code" prop="newPassword1"> | |||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword1" | |||||
| placeholder="请输入您的新密码" | |||||
| > | |||||
| </el-input> | |||||
| </el-form-item> | |||||
| <!-- 新密码2 --> | |||||
| <el-form-item class="code" prop="newPassword2"> | |||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword2" | |||||
| placeholder="请再次确认您的新密码" | |||||
| > | |||||
| </el-input> | |||||
| </el-form-item> | |||||
| <div class="morePage greenColor"> | |||||
| <span @click="loginType = 1">账户登录</span> | |||||
| </div> | |||||
| <!-- 登录 --> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >保存密码</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 注册 loginType=5 --> | |||||
| <div class="loginBox" v-if="loginType == 5"> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <!-- 短信验证码 --> | |||||
| <el-form-item class="phone" prop="phone"> | |||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| </el-form-item> | |||||
| <!-- 新密码1 --> | |||||
| <el-form-item class="code" prop="newPassword1"> | |||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword1" | |||||
| placeholder="请输入您的密码" | |||||
| > | |||||
| </el-input> | |||||
| </el-form-item> | |||||
| <!-- 新密码2 --> | |||||
| <el-form-item class="code" prop="newPassword2"> | |||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword2" | |||||
| placeholder="请再次确认您的密码" | |||||
| > | |||||
| </el-input> | |||||
| </el-form-item> | |||||
| <div class="morePage greenColor"> | |||||
| <span @click="loginType = 1">账户登录</span> | |||||
| </div> | |||||
| <!-- 注册 --> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >注册</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 弹出层 --> | |||||
| <van-popup v-model="showDialog">内容</van-popup> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| // 组件 | |||||
| import Vue from 'vue' | |||||
| import { Toast } from 'vant' | |||||
| import { mapState, mapActions } from 'vuex' | |||||
| // 工具 | |||||
| import { scrollToID } from '../../utils' | |||||
| // 接口 | |||||
| import { | |||||
| doLogin, | |||||
| getCodeByPhone, | |||||
| doRegisterByPhone, | |||||
| doLoginByPhone, | |||||
| doSendPhoneCode, | |||||
| doUpdPass, | |||||
| getCaptcha, | |||||
| doFindInviteCode, | |||||
| doUpdateInviteCode, | |||||
| doCodeImg | |||||
| } from '../../api/login' | |||||
| Vue.use(Toast) | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| showDialog: false, //弹出层状态 | |||||
| countNum: 60, // 倒计时 | |||||
| countdownState: false, //倒计时状态 | |||||
| codeInfo: '获取验证码', | |||||
| inPage: false, | |||||
| codeImg: '', //随机验证码图片 | |||||
| loginType: 1, //显示页面字符 | |||||
| showCodeImg: true, // 控制验证码的刷新 | |||||
| // 短信验证码登录 | |||||
| form: { | |||||
| phone: '', // 手机号 | |||||
| password: '', // 密码 | |||||
| newPassword1: '', // 新密码1 | |||||
| newPassword2: '', // 新密码2 | |||||
| phoneCode: '', // | |||||
| code: '', // 短信验证码 | |||||
| code1: '', // 忘记密码的短信验证码 | |||||
| yzCode: '' // 随机图片验证码 | |||||
| }, | |||||
| rules: { | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'blur', | |||||
| message: '请先输手机号' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = [] | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let phone = /^1[35789]\d{9}$/ | |||||
| if (value && !phone.test(value)) { | |||||
| callback('抱歉,请输入正确的手机号') | |||||
| } | |||||
| callback(errors) | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 账号密码登录 | |||||
| formII: { | |||||
| phone: '', | |||||
| pwd: '', | |||||
| code: '' | |||||
| }, | |||||
| rulesII: { | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: 'blur', | |||||
| message: '请先输手机号' | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = [] | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let phone = /^1[35789]\d{9}$/ | |||||
| if (value && !phone.test(value)) { | |||||
| callback('抱歉,请输入正确的手机号') | |||||
| } | |||||
| callback(errors) | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 短信登录 | |||||
| // 忘记密码 | |||||
| // 重设密码 | |||||
| // 注册 | |||||
| // 邀请码 | |||||
| formIII: { | |||||
| inviteCode: '' | |||||
| } | |||||
| } | |||||
| }, | |||||
| watch: { | |||||
| // type值改变,清空除手机号的其他值 | |||||
| loginType() { | |||||
| this.form = { | |||||
| phone: this.form.phone, // 手机号 | |||||
| password: '', // 密码 | |||||
| newPassword1: '', // 新密码1 | |||||
| newPassword2: '', // 新密码2 | |||||
| phoneCode: '', // | |||||
| code: '', // 短信验证码 | |||||
| code1: '', // 忘记密码的短信验证码 | |||||
| yzCode: '' // 随机图片验证码 | |||||
| } | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters | |||||
| }) | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(['setCharacters']), | |||||
| // 发送短信验证码 | |||||
| triggerCountdown() { | |||||
| //调用接口 | |||||
| this.getCode() | |||||
| // 切换文字 | |||||
| this.countdownState = !this.countdownState | |||||
| // 定时器 | |||||
| let intervalBtn = setInterval(() => { | |||||
| // 倒数自减 | |||||
| this.countNum-- | |||||
| if (this.countNum < 0) { | |||||
| // 清除定时器 | |||||
| clearInterval(intervalBtn) | |||||
| // 更改状态 | |||||
| this.countdownState = !this.countdownState | |||||
| // 重置倒计时状态 | |||||
| this.countNum = 60 | |||||
| } | |||||
| // 倒计时 | |||||
| }, 1000) | |||||
| }, | |||||
| go(url) { | |||||
| this.$router.push(url) | |||||
| }, | |||||
| // 跳过填写邀请码 | |||||
| skip() { | |||||
| this.$router.push('/myPage') | |||||
| }, | |||||
| // 获取手机短信验证码 | |||||
| getCode() { | |||||
| if (this.codeInfo != '获取验证码') { | |||||
| Toast.fail('请求过于频繁,请稍后再试') | |||||
| return | |||||
| } | |||||
| const phoneValue = this.form.phone | |||||
| // 将手机号置入本地存储 | |||||
| localStorage.setItem('phoneValue', phoneValue) | |||||
| let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ | |||||
| let phoneValide = phoneReg.test(phoneValue) | |||||
| if (!phoneValide) { | |||||
| Toast.fail('请输入正确的手机号!') | |||||
| } else { | |||||
| this.getPhoneCode(phoneValue) | |||||
| } | |||||
| }, | |||||
| // 获取随机验证码图片 | |||||
| async getCodeImg() { | |||||
| this.showCodeImg = false | |||||
| await this.$axios({ | |||||
| method: 'get', | |||||
| url: doCodeImg | |||||
| }).then((res) => { | |||||
| this.codeImg = doCodeImg | |||||
| }) | |||||
| this.showCodeImg = true | |||||
| }, | |||||
| // 点击登录 | |||||
| loginByPhoneCode() { | |||||
| // 密码登录 | |||||
| if (this.loginType == 1) { | |||||
| const data = { | |||||
| phone: this.form.phone, | |||||
| password: this.form.password, | |||||
| code: this.form.yzCode | |||||
| } | |||||
| this.LoginByPhone(data) | |||||
| return | |||||
| } | |||||
| // 手机验证码登录 | |||||
| if (this.loginType == 2) { | |||||
| const data = { | |||||
| phone: this.form.phone, | |||||
| code: this.form.code | |||||
| } | |||||
| this.LoginByPhone(data) | |||||
| return | |||||
| } | |||||
| // 忘记密码第一步 | |||||
| if (this.loginType == 3) { | |||||
| const data = { | |||||
| phone: this.form.phone, | |||||
| code: this.form.yzCode | |||||
| } | |||||
| this.sendPhoneCode(data) | |||||
| return | |||||
| } | |||||
| // 忘记密码之新密码 | |||||
| if (this.loginType == 4) { | |||||
| const data = { | |||||
| phone: this.form.phone, | |||||
| code: this.form.code1, | |||||
| pwd: this.form.newPassword1 | |||||
| } | |||||
| this.updPass(data) | |||||
| return | |||||
| } | |||||
| // 注册 | |||||
| if (this.loginType == 5) { | |||||
| if (this.form.newPassword1 != this.form.newPassword2) { | |||||
| Toast('两次输入密码不一致') | |||||
| return | |||||
| } | |||||
| const data = { | |||||
| phone: this.form.phone, | |||||
| password: this.form.newPassword1 | |||||
| } | |||||
| this.registerByPhone(data) | |||||
| return | |||||
| } | |||||
| }, | |||||
| // 注册 | |||||
| async registerByPhone(data) { | |||||
| try { | |||||
| const res = await doRegisterByPhone(data) | |||||
| console.log(res) | |||||
| this.loginType = 1 | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| }, | |||||
| // 忘记密码第一步,根据图片验证码和手机号获取短信 | |||||
| async sendPhoneCode(data) { | |||||
| try { | |||||
| const res = await doSendPhoneCode(data) | |||||
| console.log(res) | |||||
| this.loginType = 4 | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| }, | |||||
| // 忘记密码第二部,提交验证码和新密码 | |||||
| async updPass(data) { | |||||
| try { | |||||
| const res = await doUpdPass(data) | |||||
| console.log(res) | |||||
| this.loginType = 1 | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| }, | |||||
| // 提交邀请码 | |||||
| submitInviteCode() { | |||||
| const data = { | |||||
| inviteCode: this.formIII.inviteCode | |||||
| } | |||||
| this.updateInviteCode(data) | |||||
| }, | |||||
| /** | |||||
| * @description:获取手机验证码 | |||||
| */ | |||||
| async getPhoneCode(phone) { | |||||
| try { | |||||
| const res = await getCodeByPhone(phone) | |||||
| Toast.success('短信验证码发送成功!') | |||||
| this.codeInfo = 60 | |||||
| const timer = setInterval(() => { | |||||
| if (this.codeInfo != 1) { | |||||
| this.codeInfo-- | |||||
| } else { | |||||
| clearInterval(timer) | |||||
| this.codeInfo = '获取验证码' | |||||
| } | |||||
| }, 1000) | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:短信验证码登录 | |||||
| */ | |||||
| async LoginByPhone(loginParams) { | |||||
| try { | |||||
| //密码登录 | |||||
| if (this.loginType == 1) { | |||||
| const res = await doLogin(loginParams) | |||||
| console.log(res) | |||||
| } | |||||
| // 短信登录 | |||||
| if (this.loginType == 2) { | |||||
| const res = await doLoginByPhone(loginParams) | |||||
| } | |||||
| console.log(res, '登录数据') | |||||
| const token = res.data.token | |||||
| // 将token置入本地存储 | |||||
| localStorage.setItem('AccessToken', token) | |||||
| // 查询有无邀请码 | |||||
| this.checkInviteCode() | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:查询用户邀请码状态 | |||||
| */ | |||||
| async checkInviteCode() { | |||||
| try { | |||||
| const res = await doFindInviteCode() | |||||
| console.log(res, '查询用户邀请码数据') | |||||
| const status = res.data.status | |||||
| // 当没有邀请码时,切换输入验证码页面 | |||||
| if (status == 0) { | |||||
| this.loginType = 3 | |||||
| // 有邀请码直接前往我的页面 | |||||
| } else if (status == 1) { | |||||
| Toast.success('登录成功!') | |||||
| this.$router.push('/myPage') | |||||
| } | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:查询用户邀请码状态 | |||||
| */ | |||||
| async checkInviteCode() { | |||||
| this.src = '/api/captcha.jpg?t=' + Date() | |||||
| }, | |||||
| /** | |||||
| * @description:更新邀请码 | |||||
| */ | |||||
| async updateInviteCode(inviteCodeData) { | |||||
| try { | |||||
| const res = await doUpdateInviteCode(inviteCodeData) | |||||
| console.log(res, '更新邀请码数据') | |||||
| Toast.success('登录成功!') | |||||
| this.$router.push('/myPage') | |||||
| } catch (error) { | |||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| } | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| // 手机号记忆回填 | |||||
| const phoneValue = localStorage.getItem('phoneValue') | |||||
| this.form.phone = phoneValue ? phoneValue : '' | |||||
| this.getCodeImg() | |||||
| }, | |||||
| mounted() { | |||||
| this.inPage = true | |||||
| scrollToID('top') | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .shuaxin { | |||||
| margin-left: 10px; | |||||
| font-size: 25px; | |||||
| line-height: 40px; | |||||
| color: rgb(96, 208, 201); | |||||
| } | |||||
| .yzmImg { | |||||
| margin-left: 10px; | |||||
| height: 40px; | |||||
| width: 100%; | |||||
| } | |||||
| .greenColor { | |||||
| color: #5ed5c8; | |||||
| } | |||||
| .page { | |||||
| opacity: 0; | |||||
| transition: all 0.5s; // global-transition | |||||
| &.active { | |||||
| opacity: 1; | |||||
| } | |||||
| .logoBox { | |||||
| // margin-top: 10px; | |||||
| margin-left: 5px; | |||||
| margin-top: 25px; | |||||
| margin-bottom: 25px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| text-align: center; | |||||
| .logo { | |||||
| width: 240px; | |||||
| height: 70px; | |||||
| } | |||||
| } | |||||
| .loginBox { | |||||
| height: 500px; | |||||
| // background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||||
| margin: auto; | |||||
| text-align: center; | |||||
| padding-left: 30px; | |||||
| padding-right: 30px; | |||||
| .welcome { | |||||
| font-size: 18px; | |||||
| color: #000; | |||||
| font-weight: 600; | |||||
| margin-bottom: 40px; | |||||
| } | |||||
| .inBoxEnd { | |||||
| display: flex; | |||||
| justify-content: end !important; | |||||
| } | |||||
| .phone { | |||||
| position: relative; | |||||
| margin-bottom: 25px; | |||||
| .getCode { | |||||
| position: absolute; | |||||
| top: 1px; | |||||
| right: 10px; | |||||
| color: #0068b7; | |||||
| } | |||||
| } | |||||
| .code { | |||||
| position: relative; | |||||
| .inputCode { | |||||
| position: absolute; | |||||
| background-color: #fff; | |||||
| top: -5px; | |||||
| left: 12px; | |||||
| font-size: 12px; | |||||
| height: 10px; | |||||
| line-height: 10px; | |||||
| color: #0068b7; | |||||
| } | |||||
| } | |||||
| .morePage { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin-top: -9px; | |||||
| } | |||||
| .submitBtn { | |||||
| position: relative; | |||||
| // right: 10px; | |||||
| // float: right; | |||||
| color: #fff; | |||||
| font-size: 15px; | |||||
| line-height: 15px; | |||||
| border: none; | |||||
| margin-top: 25px; | |||||
| // margin-bottom: 7.5px; | |||||
| padding: 9px; | |||||
| background-color: #0068b7; | |||||
| border-radius: 5px; | |||||
| background-image: linear-gradient( | |||||
| 316deg, | |||||
| rgba(110, 228, 215, 1) 0, | |||||
| rgba(55, 196, 241, 1) 31.975823%, | |||||
| rgba(164, 154, 252, 1) 100% | |||||
| ); | |||||
| border-radius: 25px; | |||||
| width: 315px; | |||||
| height: 50px; | |||||
| // padding: 12px 138px 12px 138px; | |||||
| &.inside { | |||||
| top: 10px; | |||||
| } | |||||
| } | |||||
| .skipBtn { | |||||
| position: relative; | |||||
| top: 10px; | |||||
| left: 70px; | |||||
| right: 10px; | |||||
| width: 78px; | |||||
| height: 30px; | |||||
| color: #fff; | |||||
| font-size: 15px; | |||||
| line-height: 15px; | |||||
| border: none; | |||||
| padding: 9px; | |||||
| background-color: #0068b7; | |||||
| border-radius: 3px; | |||||
| margin-top: 160px; | |||||
| &.skip { | |||||
| background-color: #a0a0a0; | |||||
| } | |||||
| } | |||||
| .forgetPwd { | |||||
| position: relative; | |||||
| top: -10px; | |||||
| float: left; | |||||
| font-size: 12px; | |||||
| color: #0068b7; | |||||
| } | |||||
| } | |||||
| } | |||||
| ::v-deep .el-input__inner { | |||||
| height: 42px; | |||||
| border: 0px; | |||||
| background-color: #f6f6f6; | |||||
| } | |||||
| ::v-deep .el-form-item { | |||||
| margin-bottom: 25px; | |||||
| } | |||||
| </style> | |||||
| @@ -1,441 +0,0 @@ | |||||
| <template> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | |||||
| <div class="logoBox" @click="go('/')"> | |||||
| <img src="../../assets/img/logoh.png" alt class="logo" /> | |||||
| <!-- <div class="logoTitle">metavatar</div> --> | |||||
| </div> | |||||
| <!-- 短信验证码登录 --> | |||||
| <div class="loginBox" v-if="loginType == 1"> | |||||
| <div class="welcome">登录邃芒</div> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <el-form-item class="phone" prop="phone"> | |||||
| <el-input class="phoneInput" v-model="form.phone"></el-input> | |||||
| <div class="inputPhone">请输入您的手机号</div> | |||||
| <el-button class="getCode" type="text" @click="getCode">{{ | |||||
| codeInfo | |||||
| }}</el-button> | |||||
| </el-form-item> | |||||
| <el-form-item class="code" prop="code"> | |||||
| <el-input | |||||
| class="codeInput" | |||||
| v-model="form.code" | |||||
| maxlength="10" | |||||
| clearable | |||||
| ></el-input> | |||||
| <div class="inputCode">请输入短信验证码</div> | |||||
| </el-form-item> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >登录/注册</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 用户名密码登录 --> | |||||
| <div class="loginBox" v-if="loginType == 2"> | |||||
| <div class="welcome">登录邃芒</div> | |||||
| <el-form ref="form" :rules="rulesII" :model="formII"> | |||||
| <el-form-item class="phone" prop="phone"> | |||||
| <el-input class="phoneInput" v-model="formII.phone"></el-input> | |||||
| <div class="inputPhone">请输入您的手机号</div> | |||||
| <!-- <el-button class="getCode" type="text" @click="getCode">{{ | |||||
| codeInfo | |||||
| }}</el-button> --> | |||||
| </el-form-item> | |||||
| <el-form-item class="code" prop="code"> | |||||
| <el-input | |||||
| class="codeInput" | |||||
| v-model="form.pwd" | |||||
| maxlength="10" | |||||
| clearable | |||||
| ></el-input> | |||||
| <div class="inputCode">请输入密码</div> | |||||
| </el-form-item> | |||||
| <el-form-item class="code" prop="code"> | |||||
| <el-input | |||||
| class="codeInput" | |||||
| v-model="form.code" | |||||
| maxlength="10" | |||||
| clearable | |||||
| ></el-input> | |||||
| <div class="inputCode">请输入验证码</div> | |||||
| </el-form-item> | |||||
| <span class="forgetPwd">忘记密码?</span> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn inside" @click="loginByPhoneCode" | |||||
| >登录/注册</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 用户名密码登录 --> | |||||
| <div class="loginBox" v-if="loginType == 3"> | |||||
| <div class="welcome">登录邃芒</div> | |||||
| <el-form ref="form" :model="formIII"> | |||||
| <el-form-item class="code" prop="code"> | |||||
| <el-input | |||||
| class="codeInput" | |||||
| v-model="formIII.inviteCode" | |||||
| maxlength="10" | |||||
| clearable | |||||
| ></el-input> | |||||
| <div class="inputCode">请输入您的邀请码</div> | |||||
| </el-form-item> | |||||
| <el-form-item> | |||||
| <el-button class="skipBtn skip" @click="skip">跳过</el-button> | |||||
| <el-button class="skipBtn submit" @click="submitInviteCode" | |||||
| >确定</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| // 组件 | |||||
| import Vue from "vue"; | |||||
| import { Toast } from "vant"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| // 工具 | |||||
| import { scrollToID } from "../../utils"; | |||||
| // 接口 | |||||
| import { | |||||
| getCodeByPhone, | |||||
| doLoginByPhone, | |||||
| doFindInviteCode, | |||||
| doUpdateInviteCode, | |||||
| } from "../../api/login"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| codeInfo: "获取验证码", | |||||
| inPage: false, | |||||
| loginType: 1, | |||||
| // 短信验证码登录 | |||||
| form: { | |||||
| phone: "", | |||||
| code: "", | |||||
| }, | |||||
| rules: { | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "blur", | |||||
| message: "请先输手机号", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback("抱歉,请输入正确的手机号"); | |||||
| } | |||||
| callback(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // 账号密码登录 | |||||
| formII: { | |||||
| phone: "", | |||||
| pwd: "", | |||||
| code: "", | |||||
| }, | |||||
| rulesII: { | |||||
| phone: [ | |||||
| { | |||||
| required: true, | |||||
| trigger: "blur", | |||||
| message: "请先输手机号", | |||||
| }, | |||||
| { | |||||
| validator(rule, value, callback, source, options) { | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | |||||
| callback("抱歉,请输入正确的手机号"); | |||||
| } | |||||
| callback(errors); | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| }, | |||||
| // 邀请码 | |||||
| formIII: { | |||||
| inviteCode: "", | |||||
| }, | |||||
| }; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| // 跳过填写邀请码 | |||||
| skip() { | |||||
| this.$router.push("/myPage"); | |||||
| }, | |||||
| // 获取手机短信验证码 | |||||
| getCode() { | |||||
| if (this.codeInfo != "获取验证码") { | |||||
| Toast.fail("请求过于频繁,请稍后再试"); | |||||
| return; | |||||
| } | |||||
| const phoneValue = this.form.phone; | |||||
| // 将手机号置入本地存储 | |||||
| localStorage.setItem("phoneValue", phoneValue); | |||||
| let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; | |||||
| let phoneValide = phoneReg.test(phoneValue); | |||||
| if (!phoneValide) { | |||||
| Toast.fail("请输入正确的手机号!"); | |||||
| } else { | |||||
| this.getPhoneCode(phoneValue); | |||||
| } | |||||
| }, | |||||
| // 手机验证码登录 | |||||
| loginByPhoneCode() { | |||||
| const data = { | |||||
| phone: this.form.phone, | |||||
| code: this.form.code, | |||||
| }; | |||||
| this.LoginByPhone(data); | |||||
| }, | |||||
| // 提交邀请码 | |||||
| submitInviteCode() { | |||||
| const data = { | |||||
| inviteCode: this.formIII.inviteCode, | |||||
| }; | |||||
| this.updateInviteCode(data); | |||||
| }, | |||||
| /** | |||||
| * @description:获取手机验证码 | |||||
| */ | |||||
| async getPhoneCode(phone) { | |||||
| try { | |||||
| const res = await getCodeByPhone(phone); | |||||
| Toast.success("短信验证码发送成功!"); | |||||
| this.codeInfo = 60; | |||||
| const timer = setInterval(() => { | |||||
| if (this.codeInfo != 1) { | |||||
| this.codeInfo--; | |||||
| } else { | |||||
| clearInterval(timer); | |||||
| this.codeInfo = "获取验证码"; | |||||
| } | |||||
| }, 1000); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:短信验证码登录 | |||||
| */ | |||||
| async LoginByPhone(loginParams) { | |||||
| try { | |||||
| const res = await doLoginByPhone(loginParams); | |||||
| console.log(res, "登录数据"); | |||||
| const token = res.data.token; | |||||
| // 将token置入本地存储 | |||||
| localStorage.setItem("AccessToken", token); | |||||
| this.checkInviteCode(); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:查询用户邀请码状态 | |||||
| */ | |||||
| async checkInviteCode() { | |||||
| try { | |||||
| const res = await doFindInviteCode(); | |||||
| console.log(res, "查询用户邀请码数据"); | |||||
| const status = res.data.status; | |||||
| // 当没有邀请码时,切换输入验证码页面 | |||||
| if (status == 0) { | |||||
| this.loginType = 3; | |||||
| // 有邀请码直接前往我的页面 | |||||
| } else if (status == 1) { | |||||
| Toast.success("登录成功!"); | |||||
| this.$router.push("/myPage"); | |||||
| } | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:更新邀请码 | |||||
| */ | |||||
| async updateInviteCode(inviteCodeData) { | |||||
| try { | |||||
| const res = await doUpdateInviteCode(inviteCodeData); | |||||
| console.log(res, "更新邀请码数据"); | |||||
| Toast.success("登录成功!"); | |||||
| this.$router.push("/myPage"); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| }, | |||||
| created() { | |||||
| // 手机号记忆回填 | |||||
| const phoneValue = localStorage.getItem("phoneValue"); | |||||
| this.form.phone = phoneValue ? phoneValue : ""; | |||||
| }, | |||||
| mounted() { | |||||
| this.inPage = true; | |||||
| scrollToID("top"); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| opacity: 0; | |||||
| transition: all 0.5s; // global-transition | |||||
| &.active { | |||||
| opacity: 1; | |||||
| } | |||||
| .logoBox { | |||||
| // margin-top: 10px; | |||||
| margin-left: 5px; | |||||
| margin-top: 10px; | |||||
| margin-bottom: 30px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| text-align: center; | |||||
| .logo { | |||||
| width: 240px; | |||||
| height: 70px; | |||||
| } | |||||
| } | |||||
| .loginBox { | |||||
| height: 500px; | |||||
| // background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae); | |||||
| margin: auto; | |||||
| text-align: center; | |||||
| padding-left: 30px; | |||||
| padding-right: 30px; | |||||
| .welcome { | |||||
| font-size: 18px; | |||||
| color: #000; | |||||
| font-weight: 600; | |||||
| margin-bottom: 40px; | |||||
| } | |||||
| .phone { | |||||
| position: relative; | |||||
| margin-bottom: 25px; | |||||
| .inputPhone { | |||||
| position: absolute; | |||||
| background-color: #fff; | |||||
| top: -5px; | |||||
| left: 12px; | |||||
| font-size: 12px; | |||||
| height: 10px; | |||||
| line-height: 10px; | |||||
| color: #0068b7; | |||||
| } | |||||
| .getCode { | |||||
| position: absolute; | |||||
| top: 1px; | |||||
| right: 10px; | |||||
| color: #0068b7; | |||||
| } | |||||
| } | |||||
| .code { | |||||
| position: relative; | |||||
| .inputCode { | |||||
| position: absolute; | |||||
| background-color: #fff; | |||||
| top: -5px; | |||||
| left: 12px; | |||||
| font-size: 12px; | |||||
| height: 10px; | |||||
| line-height: 10px; | |||||
| color: #0068b7; | |||||
| } | |||||
| } | |||||
| .submitBtn { | |||||
| position: relative; | |||||
| right: 10px; | |||||
| float: right; | |||||
| color: #fff; | |||||
| font-size: 15px; | |||||
| line-height: 15px; | |||||
| border: none; | |||||
| padding: 9px; | |||||
| background-color: #0068b7; | |||||
| border-radius: 5px; | |||||
| &.inside { | |||||
| top: 10px; | |||||
| } | |||||
| } | |||||
| .skipBtn { | |||||
| position: relative; | |||||
| top: 10px; | |||||
| left: 70px; | |||||
| right: 10px; | |||||
| width: 78px; | |||||
| height: 30px; | |||||
| color: #fff; | |||||
| font-size: 15px; | |||||
| line-height: 15px; | |||||
| border: none; | |||||
| padding: 9px; | |||||
| background-color: #0068b7; | |||||
| border-radius: 3px; | |||||
| margin-top: 160px; | |||||
| &.skip { | |||||
| background-color: #a0a0a0; | |||||
| } | |||||
| } | |||||
| .forgetPwd { | |||||
| position: relative; | |||||
| top: -10px; | |||||
| float: left; | |||||
| font-size: 12px; | |||||
| color: #0068b7; | |||||
| } | |||||
| } | |||||
| } | |||||
| ::v-deep .el-input__inner { | |||||
| height: 42px; | |||||
| border: 1px solid #0068b7; | |||||
| } | |||||
| </style> | |||||
| @@ -12,28 +12,16 @@ | |||||
| <el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
| <!-- 手机号 --> | <!-- 手机号 --> | ||||
| <el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| <el-input v-model="form.phone" placeholder="请输入您的手机号"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 密码 --> | <!-- 密码 --> | ||||
| <el-form-item class="code" prop="password"> | <el-form-item class="code" prop="password"> | ||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.password" | |||||
| placeholder="请输入密码" | |||||
| ></el-input> | |||||
| <el-input type="password" maxlength="10" clearable v-model="form.password" placeholder="请输入密码"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 随机验证码 --> | <!-- 随机验证码 --> | ||||
| <el-form-item class="yzCode" prop="yzCode"> | <el-form-item class="yzCode" prop="yzCode"> | ||||
| <el-col :span="12"> | <el-col :span="12"> | ||||
| <el-input | |||||
| v-model="form.yzCode" | |||||
| placeholder="请输入验证码" | |||||
| ></el-input> | |||||
| <el-input v-model="form.yzCode" placeholder="请输入验证码"></el-input> | |||||
| </el-col> | </el-col> | ||||
| <el-col :span="9"> | <el-col :span="9"> | ||||
| <!-- <div class="yzmImg" v-html="codeImg"></div> --> | <!-- <div class="yzmImg" v-html="codeImg"></div> --> | ||||
| @@ -50,9 +38,7 @@ | |||||
| </div> | </div> | ||||
| <!-- 登录 --> | <!-- 登录 --> | ||||
| <el-form-item> | <el-form-item> | ||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >登录/注册</el-button | |||||
| > | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode">登录/注册</el-button> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 没有账号 --> | <!-- 没有账号 --> | ||||
| <div> | <div> | ||||
| @@ -67,31 +53,13 @@ | |||||
| <el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
| <!-- 手机号 --> | <!-- 手机号 --> | ||||
| <el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| <el-input v-model="form.phone" placeholder="请输入您的手机号"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 短信验证码 --> | <!-- 短信验证码 --> | ||||
| <el-form-item class="code" prop="code"> | <el-form-item class="code" prop="code"> | ||||
| <el-input | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.code" | |||||
| placeholder="请输入短信验证码" | |||||
| > | |||||
| <div | |||||
| v-if="!countdownState" | |||||
| @click="triggerCountdown" | |||||
| class="greenColor" | |||||
| slot="suffix" | |||||
| type="primary" | |||||
| > | |||||
| 获取验证码 | |||||
| </div> | |||||
| <div v-else slot="suffix" type="primary"> | |||||
| 验证码已发送{{ countNum }}s | |||||
| </div> | |||||
| <el-input maxlength="10" clearable v-model="form.code" placeholder="请输入短信验证码"> | |||||
| <div v-if="!countdownState" @click="triggerCountdown" class="greenColor" slot="suffix" type="primary">获取验证码</div> | |||||
| <div v-else slot="suffix" type="primary">验证码已发送{{ countNum }}s</div> | |||||
| </el-input> | </el-input> | ||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 短信登录和忘记密码 --> | <!-- 短信登录和忘记密码 --> | ||||
| @@ -100,9 +68,7 @@ | |||||
| </div> | </div> | ||||
| <!-- 登录 --> | <!-- 登录 --> | ||||
| <el-form-item> | <el-form-item> | ||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >登录</el-button | |||||
| > | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode">登录</el-button> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 没有账号 --> | <!-- 没有账号 --> | ||||
| <div> | <div> | ||||
| @@ -117,20 +83,12 @@ | |||||
| <el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
| <!-- 手机号 --> | <!-- 手机号 --> | ||||
| <el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| <el-input v-model="form.phone" placeholder="请输入您的手机号"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 随机验证码 --> | <!-- 随机验证码 --> | ||||
| <el-form-item class="code" prop="yzCode"> | <el-form-item class="code" prop="yzCode"> | ||||
| <el-col :span="12"> | <el-col :span="12"> | ||||
| <el-input | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.yzCode" | |||||
| placeholder="请输入验证码" | |||||
| ></el-input> | |||||
| <el-input maxlength="10" clearable v-model="form.yzCode" placeholder="请输入验证码"></el-input> | |||||
| </el-col> | </el-col> | ||||
| <el-col :span="9"> | <el-col :span="9"> | ||||
| <!-- <div class="yzmImg" v-html="codeImg"></div> --> | <!-- <div class="yzmImg" v-html="codeImg"></div> --> | ||||
| @@ -145,9 +103,7 @@ | |||||
| </div> | </div> | ||||
| <!-- 登录 --> | <!-- 登录 --> | ||||
| <el-form-item> | <el-form-item> | ||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >获取短信验证码</el-button | |||||
| > | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode">获取短信验证码</el-button> | |||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| </div> | </div> | ||||
| @@ -157,41 +113,22 @@ | |||||
| <el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
| <!-- 短信验证码 --> | <!-- 短信验证码 --> | ||||
| <el-form-item class="phone" prop="code1"> | <el-form-item class="phone" prop="code1"> | ||||
| <el-input | |||||
| v-model="form.code1" | |||||
| placeholder="请输入短信验证码" | |||||
| ></el-input> | |||||
| <el-input v-model="form.code1" placeholder="请输入短信验证码"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 新密码1 --> | <!-- 新密码1 --> | ||||
| <el-form-item class="code" prop="newPassword1"> | <el-form-item class="code" prop="newPassword1"> | ||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword1" | |||||
| placeholder="请输入您的新密码" | |||||
| > | |||||
| </el-input> | |||||
| <el-input type="password" maxlength="10" clearable v-model="form.newPassword1" placeholder="请输入您的新密码"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 新密码2 --> | <!-- 新密码2 --> | ||||
| <el-form-item class="code" prop="newPassword2"> | <el-form-item class="code" prop="newPassword2"> | ||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword2" | |||||
| placeholder="请再次确认您的新密码" | |||||
| > | |||||
| </el-input> | |||||
| <el-input type="password" maxlength="10" clearable v-model="form.newPassword2" placeholder="请再次确认您的新密码"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <div class="morePage greenColor"> | <div class="morePage greenColor"> | ||||
| <span @click="loginType = 1">账户登录</span> | <span @click="loginType = 1">账户登录</span> | ||||
| </div> | </div> | ||||
| <!-- 登录 --> | <!-- 登录 --> | ||||
| <el-form-item> | <el-form-item> | ||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >保存密码</el-button | |||||
| > | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode">保存密码</el-button> | |||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| </div> | </div> | ||||
| @@ -201,41 +138,22 @@ | |||||
| <el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
| <!-- 短信验证码 --> | <!-- 短信验证码 --> | ||||
| <el-form-item class="phone" prop="phone"> | <el-form-item class="phone" prop="phone"> | ||||
| <el-input | |||||
| v-model="form.phone" | |||||
| placeholder="请输入您的手机号" | |||||
| ></el-input> | |||||
| <el-input v-model="form.phone" placeholder="请输入您的手机号"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 新密码1 --> | <!-- 新密码1 --> | ||||
| <el-form-item class="code" prop="newPassword1"> | <el-form-item class="code" prop="newPassword1"> | ||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword1" | |||||
| placeholder="请输入您的密码" | |||||
| > | |||||
| </el-input> | |||||
| <el-input type="password" maxlength="10" clearable v-model="form.newPassword1" placeholder="请输入您的密码"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 新密码2 --> | <!-- 新密码2 --> | ||||
| <el-form-item class="code" prop="newPassword2"> | <el-form-item class="code" prop="newPassword2"> | ||||
| <el-input | |||||
| type="password" | |||||
| maxlength="10" | |||||
| clearable | |||||
| v-model="form.newPassword2" | |||||
| placeholder="请再次确认您的密码" | |||||
| > | |||||
| </el-input> | |||||
| <el-input type="password" maxlength="10" clearable v-model="form.newPassword2" placeholder="请再次确认您的密码"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <div class="morePage greenColor"> | <div class="morePage greenColor"> | ||||
| <span @click="loginType = 1">账户登录</span> | <span @click="loginType = 1">账户登录</span> | ||||
| </div> | </div> | ||||
| <!-- 注册 --> | <!-- 注册 --> | ||||
| <el-form-item> | <el-form-item> | ||||
| <el-button class="submitBtn" @click="loginByPhoneCode" | |||||
| >注册</el-button | |||||
| > | |||||
| <el-button class="submitBtn" @click="loginByPhoneCode">注册</el-button> | |||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| </div> | </div> | ||||
| @@ -245,22 +163,18 @@ | |||||
| <el-form ref="form" :rules="rules" :model="form"> | <el-form ref="form" :rules="rules" :model="form"> | ||||
| <!-- 短信验证码 --> | <!-- 短信验证码 --> | ||||
| <el-form-item class="phone" prop="inviteCode"> | <el-form-item class="phone" prop="inviteCode"> | ||||
| <el-input | |||||
| v-model="form.inviteCode" | |||||
| placeholder="请输入您的邀请码" | |||||
| ></el-input> | |||||
| <el-input v-model="form.inviteCode" placeholder="请输入您的邀请码"></el-input> | |||||
| </el-form-item> | </el-form-item> | ||||
| <div class="morePage greenColor"> | <div class="morePage greenColor"> | ||||
| <span @click="loginType = 1">账户登录</span> | <span @click="loginType = 1">账户登录</span> | ||||
| </div> | </div> | ||||
| <!-- 注册 --> | <!-- 注册 --> | ||||
| <el-form-item> | <el-form-item> | ||||
| <el-button class="submitBtn" @click="submitInviteCode" | |||||
| >确定</el-button | |||||
| > | |||||
| <el-button class="submitBtn" @click="submitInviteCode">确定</el-button> | |||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| </div> | </div> | ||||
| <!-- <van-toast v-model="showToast" ref="myToast">请稍后...</van-toast> --> | |||||
| <!-- 弹出层 --> | <!-- 弹出层 --> | ||||
| <van-popup v-model="showDialog">内容</van-popup> | <van-popup v-model="showDialog">内容</van-popup> | ||||
| </div> | </div> | ||||
| @@ -268,29 +182,19 @@ | |||||
| <script> | <script> | ||||
| // 组件 | // 组件 | ||||
| import Vue from 'vue' | |||||
| import { Toast } from 'vant' | |||||
| import { mapState, mapActions } from 'vuex' | |||||
| import Vue from 'vue'; | |||||
| import { Toast } from 'vant'; | |||||
| import { mapState, mapActions } from 'vuex'; | |||||
| // 工具 | // 工具 | ||||
| import { scrollToID } from '../../utils' | |||||
| import { scrollToID } from '../../utils'; | |||||
| // 接口 | // 接口 | ||||
| import { | |||||
| doLogin, | |||||
| getCodeByPhone, | |||||
| doRegisterByPhone, | |||||
| doLoginByPhone, | |||||
| doSendPhoneCode, | |||||
| doUpdPass, | |||||
| getCaptcha, | |||||
| doFindInviteCode, | |||||
| doUpdateInviteCode, | |||||
| doCodeImg | |||||
| } from '../../api/login' | |||||
| import { doLogin, getCodeByPhone, doRegisterByPhone, doLoginByPhone, doSendPhoneCode, doUpdPass, getCaptcha, doFindInviteCode, doUpdateInviteCode, doCodeImg } from '../../api/login'; | |||||
| Vue.use(Toast) | |||||
| Vue.use(Toast); | |||||
| export default { | export default { | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| showToast: true, | |||||
| showDialog: false, //弹出层状态 | showDialog: false, //弹出层状态 | ||||
| countNum: 60, // 倒计时 | countNum: 60, // 倒计时 | ||||
| countdownState: false, //倒计时状态 | countdownState: false, //倒计时状态 | ||||
| @@ -320,13 +224,13 @@ export default { | |||||
| }, | }, | ||||
| { | { | ||||
| validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
| var errors = [] | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | ||||
| let phone = /^1[35789]\d{9}$/ | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | if (value && !phone.test(value)) { | ||||
| callback('抱歉,请输入正确的手机号') | |||||
| callback('抱歉,请输入正确的手机号'); | |||||
| } | } | ||||
| callback(errors) | |||||
| callback(errors); | |||||
| } | } | ||||
| } | } | ||||
| ] | ] | ||||
| @@ -346,13 +250,13 @@ export default { | |||||
| }, | }, | ||||
| { | { | ||||
| validator(rule, value, callback, source, options) { | validator(rule, value, callback, source, options) { | ||||
| var errors = [] | |||||
| var errors = []; | |||||
| // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, | ||||
| let phone = /^1[35789]\d{9}$/ | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (value && !phone.test(value)) { | if (value && !phone.test(value)) { | ||||
| callback('抱歉,请输入正确的手机号') | |||||
| callback('抱歉,请输入正确的手机号'); | |||||
| } | } | ||||
| callback(errors) | |||||
| callback(errors); | |||||
| } | } | ||||
| } | } | ||||
| ] | ] | ||||
| @@ -366,7 +270,7 @@ export default { | |||||
| formIII: { | formIII: { | ||||
| inviteCode: '' | inviteCode: '' | ||||
| } | } | ||||
| } | |||||
| }; | |||||
| }, | }, | ||||
| watch: { | watch: { | ||||
| // type值改变,清空除手机号的其他值 | // type值改变,清空除手机号的其他值 | ||||
| @@ -381,12 +285,12 @@ export default { | |||||
| code1: '', // 忘记密码的短信验证码 | code1: '', // 忘记密码的短信验证码 | ||||
| yzCode: '', // 随机图片验证码 | yzCode: '', // 随机图片验证码 | ||||
| inviteCode: '' | inviteCode: '' | ||||
| } | |||||
| }; | |||||
| } | } | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| ...mapState({ | ...mapState({ | ||||
| characters: (state) => state.publicObj.characters | |||||
| characters: state => state.publicObj.characters | |||||
| }) | }) | ||||
| }, | }, | ||||
| @@ -395,61 +299,61 @@ export default { | |||||
| // 发送短信验证码 | // 发送短信验证码 | ||||
| triggerCountdown() { | triggerCountdown() { | ||||
| //调用接口 | //调用接口 | ||||
| this.getCode() | |||||
| this.getCode(); | |||||
| // 切换文字 | // 切换文字 | ||||
| this.countdownState = !this.countdownState | |||||
| this.countdownState = !this.countdownState; | |||||
| // 定时器 | // 定时器 | ||||
| let intervalBtn = setInterval(() => { | let intervalBtn = setInterval(() => { | ||||
| // 倒数自减 | // 倒数自减 | ||||
| this.countNum-- | |||||
| this.countNum--; | |||||
| if (this.countNum < 0) { | if (this.countNum < 0) { | ||||
| // 清除定时器 | // 清除定时器 | ||||
| clearInterval(intervalBtn) | |||||
| clearInterval(intervalBtn); | |||||
| // 更改状态 | // 更改状态 | ||||
| this.countdownState = !this.countdownState | |||||
| this.countdownState = !this.countdownState; | |||||
| // 重置倒计时状态 | // 重置倒计时状态 | ||||
| this.countNum = 60 | |||||
| this.countNum = 60; | |||||
| } | } | ||||
| // 倒计时 | // 倒计时 | ||||
| }, 1000) | |||||
| }, 1000); | |||||
| }, | }, | ||||
| go(url) { | go(url) { | ||||
| this.$router.push(url) | |||||
| this.$router.push(url); | |||||
| }, | }, | ||||
| // 跳过填写邀请码 | // 跳过填写邀请码 | ||||
| skip() { | skip() { | ||||
| this.$router.push('/myPage') | |||||
| this.$router.push('/myPage'); | |||||
| }, | }, | ||||
| // 获取手机短信验证码 | // 获取手机短信验证码 | ||||
| getCode() { | getCode() { | ||||
| if (this.codeInfo != '获取验证码') { | if (this.codeInfo != '获取验证码') { | ||||
| Toast.fail('请求过于频繁,请稍后再试') | |||||
| return | |||||
| Toast.fail('请求过于频繁,请稍后再试'); | |||||
| return; | |||||
| } | } | ||||
| const phoneValue = this.form.phone | |||||
| const phoneValue = this.form.phone; | |||||
| // 将手机号置入本地存储 | // 将手机号置入本地存储 | ||||
| localStorage.setItem('phoneValue', phoneValue) | |||||
| let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ | |||||
| let phoneValide = phoneReg.test(phoneValue) | |||||
| localStorage.setItem('phoneValue', phoneValue); | |||||
| let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; | |||||
| let phoneValide = phoneReg.test(phoneValue); | |||||
| if (!phoneValide) { | if (!phoneValide) { | ||||
| Toast.fail('请输入正确的手机号!') | |||||
| Toast.fail('请输入正确的手机号!'); | |||||
| } else { | } else { | ||||
| this.getPhoneCode(phoneValue) | |||||
| this.getPhoneCode(phoneValue); | |||||
| } | } | ||||
| }, | }, | ||||
| // 获取随机验证码图片 | // 获取随机验证码图片 | ||||
| async getCodeImg() { | async getCodeImg() { | ||||
| this.showCodeImg = false | |||||
| this.showCodeImg = false; | |||||
| await this.$axios({ | await this.$axios({ | ||||
| method: 'get', | method: 'get', | ||||
| url: doCodeImg | url: doCodeImg | ||||
| }).then((res) => { | |||||
| this.codeImg = doCodeImg | |||||
| }) | |||||
| this.showCodeImg = true | |||||
| }).then(res => { | |||||
| this.codeImg = doCodeImg; | |||||
| }); | |||||
| this.showCodeImg = true; | |||||
| }, | }, | ||||
| // 点击登录 | // 点击登录 | ||||
| @@ -460,27 +364,27 @@ export default { | |||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| password: this.form.password, | password: this.form.password, | ||||
| code: this.form.yzCode | code: this.form.yzCode | ||||
| } | |||||
| this.LoginByPhone(data) | |||||
| return | |||||
| }; | |||||
| this.LoginByPhone(data); | |||||
| return; | |||||
| } | } | ||||
| // 手机验证码登录 | // 手机验证码登录 | ||||
| if (this.loginType == 2) { | if (this.loginType == 2) { | ||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| code: this.form.code | code: this.form.code | ||||
| } | |||||
| this.LoginByPhone(data) | |||||
| return | |||||
| }; | |||||
| this.LoginByPhone(data); | |||||
| return; | |||||
| } | } | ||||
| // 忘记密码第一步 | // 忘记密码第一步 | ||||
| if (this.loginType == 3) { | if (this.loginType == 3) { | ||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| code: this.form.yzCode | code: this.form.yzCode | ||||
| } | |||||
| this.sendPhoneCode(data) | |||||
| return | |||||
| }; | |||||
| this.sendPhoneCode(data); | |||||
| return; | |||||
| } | } | ||||
| // 忘记密码之新密码 | // 忘记密码之新密码 | ||||
| if (this.loginType == 4) { | if (this.loginType == 4) { | ||||
| @@ -488,64 +392,64 @@ export default { | |||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| code: this.form.code1, | code: this.form.code1, | ||||
| pwd: this.form.newPassword1 | pwd: this.form.newPassword1 | ||||
| } | |||||
| this.updPass(data) | |||||
| return | |||||
| }; | |||||
| this.updPass(data); | |||||
| return; | |||||
| } | } | ||||
| // 注册 | // 注册 | ||||
| if (this.loginType == 5) { | if (this.loginType == 5) { | ||||
| if (this.form.newPassword1 != this.form.newPassword2) { | if (this.form.newPassword1 != this.form.newPassword2) { | ||||
| Toast('两次输入密码不一致') | |||||
| return | |||||
| Toast('两次输入密码不一致'); | |||||
| return; | |||||
| } | } | ||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| password: this.form.newPassword1 | password: this.form.newPassword1 | ||||
| } | |||||
| this.registerByPhone(data) | |||||
| return | |||||
| }; | |||||
| this.registerByPhone(data); | |||||
| return; | |||||
| } | } | ||||
| }, | }, | ||||
| // 注册 | // 注册 | ||||
| async registerByPhone(data) { | async registerByPhone(data) { | ||||
| try { | try { | ||||
| const res = await doRegisterByPhone(data) | |||||
| console.log(res) | |||||
| this.loginType = 1 | |||||
| const res = await doRegisterByPhone(data); | |||||
| console.log(res); | |||||
| this.loginType = 1; | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| // 忘记密码第一步,根据图片验证码和手机号获取短信 | // 忘记密码第一步,根据图片验证码和手机号获取短信 | ||||
| async sendPhoneCode(data) { | async sendPhoneCode(data) { | ||||
| try { | try { | ||||
| const res = await doSendPhoneCode(data) | |||||
| console.log(res) | |||||
| this.loginType = 4 | |||||
| const res = await doSendPhoneCode(data); | |||||
| console.log(res); | |||||
| this.loginType = 4; | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| // 忘记密码第二部,提交验证码和新密码 | // 忘记密码第二部,提交验证码和新密码 | ||||
| async updPass(data) { | async updPass(data) { | ||||
| try { | try { | ||||
| const res = await doUpdPass(data) | |||||
| console.log(res) | |||||
| Toast.success('修改密码成功') | |||||
| this.loginType = 1 | |||||
| const res = await doUpdPass(data); | |||||
| console.log(res); | |||||
| Toast.success('修改密码成功'); | |||||
| this.loginType = 1; | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| // 提交邀请码 | // 提交邀请码 | ||||
| submitInviteCode() { | submitInviteCode() { | ||||
| const data = { | const data = { | ||||
| inviteCode: this.form.inviteCode | inviteCode: this.form.inviteCode | ||||
| } | |||||
| this.updateInviteCode(data) | |||||
| }; | |||||
| this.updateInviteCode(data); | |||||
| }, | }, | ||||
| /** | /** | ||||
| @@ -553,20 +457,20 @@ export default { | |||||
| */ | */ | ||||
| async getPhoneCode(phone) { | async getPhoneCode(phone) { | ||||
| try { | try { | ||||
| const res = await getCodeByPhone(phone) | |||||
| Toast.success('短信验证码发送成功!') | |||||
| this.codeInfo = 60 | |||||
| const res = await getCodeByPhone(phone); | |||||
| Toast.success('短信验证码发送成功!'); | |||||
| this.codeInfo = 60; | |||||
| const timer = setInterval(() => { | const timer = setInterval(() => { | ||||
| if (this.codeInfo != 1) { | if (this.codeInfo != 1) { | ||||
| this.codeInfo-- | |||||
| this.codeInfo--; | |||||
| } else { | } else { | ||||
| clearInterval(timer) | |||||
| this.codeInfo = '获取验证码' | |||||
| clearInterval(timer); | |||||
| this.codeInfo = '获取验证码'; | |||||
| } | } | ||||
| }, 1000) | |||||
| }, 1000); | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| @@ -577,27 +481,27 @@ export default { | |||||
| try { | try { | ||||
| //密码登录 | //密码登录 | ||||
| if (this.loginType == 1) { | if (this.loginType == 1) { | ||||
| const res = await doLogin(loginParams) | |||||
| console.log(res.data.token, '登录数据') | |||||
| const token = res.data.token | |||||
| const res = await doLogin(loginParams); | |||||
| console.log(res.data.token, '登录数据'); | |||||
| const token = res.data.token; | |||||
| // 将token置入本地存储 | // 将token置入本地存储 | ||||
| localStorage.setItem('AccessToken', token) | |||||
| localStorage.setItem('AccessToken', token); | |||||
| // 查询有无邀请码 | // 查询有无邀请码 | ||||
| this.checkInviteCode() | |||||
| this.checkInviteCode(); | |||||
| } | } | ||||
| // 短信登录 | // 短信登录 | ||||
| if (this.loginType == 2) { | if (this.loginType == 2) { | ||||
| const res = await doLoginByPhone(loginParams) | |||||
| console.log(res, '登录数据') | |||||
| const token = res.data.token | |||||
| const res = await doLoginByPhone(loginParams); | |||||
| console.log(res, '登录数据'); | |||||
| const token = res.data.token; | |||||
| // 将token置入本地存储 | // 将token置入本地存储 | ||||
| localStorage.setItem('AccessToken', token) | |||||
| localStorage.setItem('AccessToken', token); | |||||
| // 查询有无邀请码 | // 查询有无邀请码 | ||||
| this.checkInviteCode() | |||||
| this.checkInviteCode(); | |||||
| } | } | ||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| @@ -606,20 +510,20 @@ export default { | |||||
| */ | */ | ||||
| async checkInviteCode() { | async checkInviteCode() { | ||||
| try { | try { | ||||
| const res = await doFindInviteCode() | |||||
| const res = await doFindInviteCode(); | |||||
| // console.log(res, '查询用户邀请码数据') | // console.log(res, '查询用户邀请码数据') | ||||
| const status = res.data.status | |||||
| const status = res.data.status; | |||||
| // 当没有邀请码时,切换输入验证码页面 | // 当没有邀请码时,切换输入验证码页面 | ||||
| if (status == 0) { | if (status == 0) { | ||||
| this.loginType = 6 | |||||
| this.loginType = 6; | |||||
| // 有邀请码直接前往我的页面 | // 有邀请码直接前往我的页面 | ||||
| } else if (status == 1) { | } else if (status == 1) { | ||||
| Toast.success('登录成功!') | |||||
| this.$router.push('/myPage') | |||||
| Toast.success('登录成功!'); | |||||
| this.$router.push('/myPage'); | |||||
| } | } | ||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| /** | /** | ||||
| @@ -633,27 +537,27 @@ export default { | |||||
| */ | */ | ||||
| async updateInviteCode(inviteCodeData) { | async updateInviteCode(inviteCodeData) { | ||||
| try { | try { | ||||
| const res = await doUpdateInviteCode(inviteCodeData) | |||||
| console.log(res, '更新邀请码数据') | |||||
| Toast.success('登录成功!') | |||||
| this.$router.push('/myPage') | |||||
| const res = await doUpdateInviteCode(inviteCodeData); | |||||
| console.log(res, '更新邀请码数据'); | |||||
| Toast.success('登录成功!'); | |||||
| this.$router.push('/myPage'); | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| // 手机号记忆回填 | // 手机号记忆回填 | ||||
| const phoneValue = localStorage.getItem('phoneValue') | |||||
| this.form.phone = phoneValue ? phoneValue : '' | |||||
| this.getCodeImg() | |||||
| const phoneValue = localStorage.getItem('phoneValue'); | |||||
| this.form.phone = phoneValue ? phoneValue : ''; | |||||
| this.getCodeImg(); | |||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true | |||||
| scrollToID('top') | |||||
| this.inPage = true; | |||||
| scrollToID('top'); | |||||
| } | } | ||||
| } | |||||
| }; | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| @@ -750,12 +654,7 @@ export default { | |||||
| padding: 9px; | padding: 9px; | ||||
| background-color: #0068b7; | background-color: #0068b7; | ||||
| border-radius: 5px; | border-radius: 5px; | ||||
| background-image: linear-gradient( | |||||
| 316deg, | |||||
| rgba(110, 228, 215, 1) 0, | |||||
| rgba(55, 196, 241, 1) 31.975823%, | |||||
| rgba(164, 154, 252, 1) 100% | |||||
| ); | |||||
| background-image: linear-gradient(316deg, rgba(110, 228, 215, 1) 0, rgba(55, 196, 241, 1) 31.975823%, rgba(164, 154, 252, 1) 100%); | |||||
| border-radius: 25px; | border-radius: 25px; | ||||
| width: 315px; | width: 315px; | ||||
| height: 50px; | height: 50px; | ||||
| @@ -1,312 +0,0 @@ | |||||
| <template> | |||||
| <div :class="inPage ? 'page active' : 'page'"> | |||||
| <div id="top"></div> | |||||
| <HeadTop /> | |||||
| <!-- <div class="chooseModel"> | |||||
| <div :class="phase == 1 ? 'active' : ''">选择模板</div> | |||||
| <div :class="phase == 2 ? 'active' : ''">录入文案</div> | |||||
| <div :class="phase == 3 ? 'active' : ''">合成视频</div> | |||||
| </div> --> | |||||
| <div class="title">选择模板</div> | |||||
| <div class="typeOutSide"> | |||||
| <div class="type"> | |||||
| <div :class="type == 0 ? 'active' : ''" @click="chooseType(0)"> | |||||
| 全部模板 | |||||
| </div> | |||||
| <div :class="type == 2 ? 'active' : ''" @click="chooseType(2)"> | |||||
| 女性模板 | |||||
| </div> | |||||
| <div :class="type == 1 ? 'active' : ''" @click="chooseType(1)"> | |||||
| 男性模板 | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="choose"> | |||||
| <div class="modeList"> | |||||
| <div | |||||
| class="model" | |||||
| :class="currentId == item.id ? 'active' : ''" | |||||
| v-if="modeList.length >= 1" | |||||
| v-for="(item, index) in modeList" | |||||
| :key="index" | |||||
| @click="selectModel(item.id)" | |||||
| > | |||||
| <img :src="item.coverImg" alt="" /> | |||||
| <div class="modelName">{{ item.title }}</div> | |||||
| <div class="setPaper">录入文案</div> | |||||
| </div> | |||||
| <div class="alt" v-if="modeList.length == 0">暂无可用模板</div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="blank" v-if="modeList.length <= 2"></div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Vue from "vue"; | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| import HeadTop from "./../../components/common/head.vue"; | |||||
| import { Toast } from "vant"; | |||||
| import { scrollToID } from "../../utils"; | |||||
| import { | |||||
| getModeList, | |||||
| getModeDetailById, | |||||
| saveOrUpdateUserVideo, | |||||
| } from "../../api/chooseModel"; | |||||
| Vue.use(Toast); | |||||
| export default { | |||||
| components: { | |||||
| HeadTop, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| inPage: false, | |||||
| type: 0, | |||||
| currentId: "", | |||||
| modeList: [], // 模板列表 | |||||
| }; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: (state) => state.publicObj.characters, | |||||
| }), | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| globalWatcher(e) { | |||||
| console.log(e, "e"); | |||||
| }, | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| }, | |||||
| chooseModel(num) { | |||||
| this.phase = num; | |||||
| }, | |||||
| chooseType(num) { | |||||
| this.type = num; | |||||
| this.loadModeList(num); | |||||
| }, | |||||
| selectModel(id) { | |||||
| if (this.currentId != id) { | |||||
| this.currentId = id; | |||||
| } else { | |||||
| this.getModeDetail(id); | |||||
| } | |||||
| }, | |||||
| // 获取模板列表 | |||||
| async loadModeList(sex) { | |||||
| try { | |||||
| sex = sex == 0 ? "" : sex; | |||||
| const res = await getModeList(sex); | |||||
| console.log(res, "获取模板列表"); | |||||
| this.modeList = res.data.list; | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| async getModeDetail(id) { | |||||
| try { | |||||
| const res = await getModeDetailById(id); | |||||
| console.log(res, "根据id获取模板详情"); | |||||
| const modelDetail = res.data; | |||||
| this.goSetPaperWork(modelDetail); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| async saveToSetPaper(data, modelDetail) { | |||||
| try { | |||||
| const res = await saveOrUpdateUserVideo(data); | |||||
| console.log(res, "保存或修改用户作品"); | |||||
| this.$router.push({ | |||||
| path: "/getPaper", | |||||
| query: { | |||||
| modelDetail: JSON.stringify(modelDetail), | |||||
| saveID: res.data.id, | |||||
| }, | |||||
| }); | |||||
| } catch (error) { | |||||
| console.log(error, "error"); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * @description:根据模板详情跳转至选择文案 | |||||
| * @param {type}modelDetail | |||||
| * @event:Go page => setPaperWork | |||||
| */ | |||||
| goSetPaperWork(modelDetail) { | |||||
| const data = { | |||||
| // id: "", | |||||
| type: 1, | |||||
| personMouldId: modelDetail.id, //模板id | |||||
| personMouldSmId: modelDetail.mouldSmId, //模板标识 | |||||
| // voiceMouldId: "", | |||||
| // voiceMouldId: "", | |||||
| }; | |||||
| this.saveToSetPaper(data, modelDetail); | |||||
| }, | |||||
| }, | |||||
| mounted() { | |||||
| this.inPage = true; | |||||
| scrollToID("top"); | |||||
| }, | |||||
| created() { | |||||
| this.loadModeList(2); | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .page { | |||||
| transform: translateX(30%); | |||||
| opacity: 0; | |||||
| transition: all 0.5s; // global-transition | |||||
| padding-bottom: 25px; | |||||
| &.active { | |||||
| opacity: 1; | |||||
| transform: translateX(0); | |||||
| } | |||||
| .chooseModel { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| width: 350px; | |||||
| height: 32px; | |||||
| margin: auto; | |||||
| margin-top: 15px; | |||||
| margin-bottom: 15px; | |||||
| div { | |||||
| width: 33.33%; | |||||
| height: 100%; | |||||
| line-height: 32px; | |||||
| text-align: center; | |||||
| border: 1px solid #46464661; | |||||
| &.active { | |||||
| background-color: #00ccff; | |||||
| color: #fff; | |||||
| } | |||||
| } | |||||
| } | |||||
| .title { | |||||
| text-align: center; | |||||
| width: 70px; | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| border-bottom: 3px solid #0068b7; | |||||
| padding-bottom: 7px; | |||||
| margin: 10px auto; | |||||
| margin-bottom: 25px; | |||||
| } | |||||
| .typeOutSide { | |||||
| position: sticky; | |||||
| top: 60px; | |||||
| z-index: 99; | |||||
| .type { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| padding: 0 25px; | |||||
| margin-bottom: 20px; | |||||
| div { | |||||
| width: 94px; | |||||
| height: 35px; | |||||
| line-height: 35px; | |||||
| color: #fff; | |||||
| border: 1px solid #bfbfbf; | |||||
| background-color: #bfbfbf; | |||||
| border-radius: 5px; | |||||
| text-align: center; | |||||
| transition: all 0.3s; | |||||
| &.active { | |||||
| color: #fff; | |||||
| border: 1px solid #0068b7; | |||||
| background-color: #0068b7; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .choose { | |||||
| margin-bottom: 40px; | |||||
| .modeList { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| flex-wrap: wrap; | |||||
| margin: auto; | |||||
| padding: 0 10px; | |||||
| .model { | |||||
| position: relative; | |||||
| text-align: left; | |||||
| margin-bottom: 25px; | |||||
| border: 1px solid #00000028; | |||||
| padding: 8px; | |||||
| border-radius: 8px; | |||||
| transition: all 0.3s; | |||||
| opacity: 0.9; | |||||
| img { | |||||
| width: 150px; | |||||
| height: 220px; | |||||
| } | |||||
| .modelName { | |||||
| margin-top: 4px; | |||||
| font-size: 13px; | |||||
| } | |||||
| .setPaper { | |||||
| position: absolute; | |||||
| top: 80%; | |||||
| left: 50%; | |||||
| transform: translate(-50%, -50%); | |||||
| color: #fff; | |||||
| font-size: 14px; | |||||
| font-weight: 600; | |||||
| background-color: #00000042; | |||||
| padding: 3px 5px; | |||||
| border-radius: 5px; | |||||
| transition: all 0.3s; | |||||
| opacity: 0; | |||||
| } | |||||
| &.active { | |||||
| transform: translateY(-3px); | |||||
| box-shadow: #60606082 0px 2px 2px 1px; | |||||
| opacity: 1; | |||||
| .setPaper { | |||||
| opacity: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .alt { | |||||
| font-size: 18px; | |||||
| margin: 80px auto; | |||||
| height: 450px; | |||||
| line-height: 450px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .blank { | |||||
| width: 1px; | |||||
| height: 1px; | |||||
| margin-bottom: 240px; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -3,30 +3,16 @@ | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <!-- 顶部tab栏 --> | <!-- 顶部tab栏 --> | ||||
| <van-tabs | |||||
| @click="chooseType1" | |||||
| class="typeOutSide" | |||||
| animated | |||||
| color="#7264F5" | |||||
| line-width="46" | |||||
| line-height="6" | |||||
| title-inactive-color="#666" | |||||
| title-active-color="#333" | |||||
| > | |||||
| <van-tab v-for="item in tabList" :key="item" :title="item"> </van-tab> | |||||
| <van-tabs @click="chooseType1" class="typeOutSide" animated color="#7264F5" line-width="46" line-height="6" title-inactive-color="#666" title-active-color="#333"> | |||||
| <van-tab v-for="item in tabList" :key="item" :title="item"></van-tab> | |||||
| </van-tabs> | </van-tabs> | ||||
| <div class="vantLoadingBox" style="height: 550px" v-show="showLoading"> | |||||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||||
| </div> | |||||
| <!-- 模板列表 --> | <!-- 模板列表 --> | ||||
| <div class="choose" v-if="showModeList"> | |||||
| <div class="choose" v-if="showModeList && !showLoading"> | |||||
| <waterfall class="modeList" :col="2" :data="modeList"> | <waterfall class="modeList" :col="2" :data="modeList"> | ||||
| <div | |||||
| class="model" | |||||
| :class="currentId == item.id ? 'active' : ''" | |||||
| v-if="modeList.length >= 1" | |||||
| v-for="(item, index) in modeList" | |||||
| :key="index" | |||||
| @click="selectModel(item.id)" | |||||
| > | |||||
| <div class="model" :class="currentId == item.id ? 'active' : ''" v-if="modeList.length >= 1" v-for="(item, index) in modeList" :key="index" @click="selectModel(item.id)"> | |||||
| <div class="model-padding"> | <div class="model-padding"> | ||||
| <img :src="item.coverImg" alt="" /> | <img :src="item.coverImg" alt="" /> | ||||
| <div class="modelName">{{ item.title }}</div> | <div class="modelName">{{ item.title }}</div> | ||||
| @@ -38,36 +24,26 @@ | |||||
| </div> | </div> | ||||
| <div class="blank" v-if="modeList.length <= 2"></div> | <div class="blank" v-if="modeList.length <= 2"></div> | ||||
| <!-- 分页 --> | <!-- 分页 --> | ||||
| <van-pagination | |||||
| v-model="currentPage" | |||||
| :total-items="total" | |||||
| :items-per-page="10" | |||||
| @change="pageChange" | |||||
| /> | |||||
| <van-pagination v-model="currentPage" :total-items="total" :items-per-page="10" @change="pageChange" /> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import Vue from 'vue' | |||||
| import { mapState, mapActions } from 'vuex' | |||||
| import HeadTop from './../../components/common/head.vue' | |||||
| import { Toast } from 'vant' | |||||
| import { scrollToID } from '../../utils' | |||||
| import { | |||||
| getModeList, | |||||
| getModeList1, | |||||
| getModeDetailById, | |||||
| saveOrUpdateUserVideo, | |||||
| personPatchApi | |||||
| } from '../../api/chooseModel' | |||||
| import Vue from 'vue'; | |||||
| import { mapState, mapActions } from 'vuex'; | |||||
| import HeadTop from './../../components/common/head.vue'; | |||||
| import { Toast } from 'vant'; | |||||
| import { scrollToID } from '../../utils'; | |||||
| import { getModeList, getModeList1, getModeDetailById, saveOrUpdateUserVideo, personPatchApi } from '../../api/chooseModel'; | |||||
| Vue.use(Toast) | |||||
| Vue.use(Toast); | |||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| HeadTop | HeadTop | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| showLoading: true, | |||||
| inPage: false, | inPage: false, | ||||
| type: 0, | type: 0, | ||||
| currentId: '', | currentId: '', | ||||
| @@ -77,11 +53,11 @@ export default { | |||||
| currentPage: 1, //当前页码 | currentPage: 1, //当前页码 | ||||
| pageSize: 10, | pageSize: 10, | ||||
| total: '' | total: '' | ||||
| } | |||||
| }; | |||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| ...mapState({ | ...mapState({ | ||||
| characters: (state) => state.publicObj.characters | |||||
| characters: state => state.publicObj.characters | |||||
| }) | }) | ||||
| }, | }, | ||||
| @@ -89,25 +65,25 @@ export default { | |||||
| ...mapActions(['setCharacters']), | ...mapActions(['setCharacters']), | ||||
| //点击tab栏选择模板列表 | //点击tab栏选择模板列表 | ||||
| chooseType1(name, title) { | chooseType1(name, title) { | ||||
| this.currentPage = 1 | |||||
| this.currentPage = 1; | |||||
| this.type = this.tabList.findIndex((item) => item == title) | |||||
| this.loadModeList(this.type, this.currentPage, this.pageSize) | |||||
| this.type = this.tabList.findIndex(item => item == title); | |||||
| this.loadModeList(this.type, this.currentPage, this.pageSize); | |||||
| }, | }, | ||||
| globalWatcher(e) { | globalWatcher(e) { | ||||
| console.log(e, 'e') | |||||
| console.log(e, 'e'); | |||||
| }, | }, | ||||
| go(url) { | go(url) { | ||||
| this.$router.push(url) | |||||
| this.$router.push(url); | |||||
| }, | }, | ||||
| chooseModel(num) { | chooseModel(num) { | ||||
| this.phase = num | |||||
| this.phase = num; | |||||
| }, | }, | ||||
| selectModel(id) { | selectModel(id) { | ||||
| this.getModeDetail(id) | |||||
| this.getModeDetail(id); | |||||
| // if (this.currentId != id) { | // if (this.currentId != id) { | ||||
| // this.currentId = id | // this.currentId = id | ||||
| // } else { | // } else { | ||||
| @@ -118,17 +94,19 @@ export default { | |||||
| // 获取模板列表 | // 获取模板列表 | ||||
| async loadModeList(sex, pageNum, pageSize) { | async loadModeList(sex, pageNum, pageSize) { | ||||
| try { | try { | ||||
| sex = sex == 0 ? '' : sex | |||||
| this.showLoading = true; | |||||
| sex = sex == 0 ? '' : sex; | |||||
| // const res = await getModeList(sex) | // const res = await getModeList(sex) | ||||
| this.showModeList = false | |||||
| const res = await getModeList1(sex, pageNum, pageSize) | |||||
| this.showModeList = true | |||||
| this.total = res.data.total | |||||
| console.log(res, '获取模板列表') | |||||
| this.modeList = res.data.list | |||||
| this.showModeList = false; | |||||
| const res = await getModeList1(sex, pageNum, pageSize); | |||||
| this.showModeList = true; | |||||
| this.total = res.data.total; | |||||
| console.log(res, '获取模板列表'); | |||||
| this.modeList = res.data.list; | |||||
| this.showLoading = false; | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| // 根据id获取模板详情 | // 根据id获取模板详情 | ||||
| @@ -136,10 +114,10 @@ export default { | |||||
| try { | try { | ||||
| // const res = await getModeDetailById(id) | // const res = await getModeDetailById(id) | ||||
| // console.log(res, '根据id获取模板详情') | // console.log(res, '根据id获取模板详情') | ||||
| const res = await personPatchApi(id) | |||||
| console.log(res, '根据id获取模板详情') | |||||
| const modelDetail = res.data | |||||
| await this.goSetPaperWork(modelDetail) | |||||
| const res = await personPatchApi(id); | |||||
| console.log(res, '根据id获取模板详情'); | |||||
| const modelDetail = res.data; | |||||
| await this.goSetPaperWork(modelDetail); | |||||
| // this.$router.push({ | // this.$router.push({ | ||||
| // path: '/previewModel', | // path: '/previewModel', | ||||
| // query: { | // query: { | ||||
| @@ -151,31 +129,31 @@ export default { | |||||
| // this.goSetPaperWork(modelDetail); | // this.goSetPaperWork(modelDetail); | ||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| async saveToSetPaper(data, modelDetail) { | async saveToSetPaper(data, modelDetail) { | ||||
| try { | try { | ||||
| console.log(modelDetail.coverImg, 11111111111111111) | |||||
| const res = await saveOrUpdateUserVideo(data) | |||||
| console.log(res, '保存或修改用户作品') | |||||
| console.log(modelDetail.coverImg, 11111111111111111); | |||||
| const res = await saveOrUpdateUserVideo(data); | |||||
| console.log(res, '保存或修改用户作品'); | |||||
| this.$router.push({ | this.$router.push({ | ||||
| // path: '/previewModel', | // path: '/previewModel', | ||||
| path: '/editModel', | path: '/editModel', | ||||
| query: { | query: { | ||||
| id: res.data.id | id: res.data.id | ||||
| } | } | ||||
| }) | |||||
| }); | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | |||||
| Toast.fail(error.message) | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | } | ||||
| }, | }, | ||||
| // 更改页码 | // 更改页码 | ||||
| pageChange() { | pageChange() { | ||||
| this.loadModeList(this.type, this.currentPage, this.pageSize) | |||||
| this.loadModeList(this.type, this.currentPage, this.pageSize); | |||||
| }, | }, | ||||
| /** | /** | ||||
| * @description:根据模板详情跳转至选择文案 | * @description:根据模板详情跳转至选择文案 | ||||
| @@ -190,18 +168,18 @@ export default { | |||||
| personMouldSmId: modelDetail.mouldSmId //模板标识 | personMouldSmId: modelDetail.mouldSmId //模板标识 | ||||
| // voiceMouldId: "", | // voiceMouldId: "", | ||||
| // voiceMouldId: "", | // voiceMouldId: "", | ||||
| } | |||||
| this.saveToSetPaper(data, modelDetail) | |||||
| }; | |||||
| this.saveToSetPaper(data, modelDetail); | |||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.inPage = true | |||||
| scrollToID('top') | |||||
| this.inPage = true; | |||||
| scrollToID('top'); | |||||
| }, | }, | ||||
| created() { | created() { | ||||
| this.loadModeList(this.type, this.currentPage, this.pageSize) | |||||
| this.loadModeList(this.type, this.currentPage, this.pageSize); | |||||
| } | } | ||||
| } | |||||
| }; | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| @@ -3,7 +3,10 @@ | |||||
| <div id="top"></div> | <div id="top"></div> | ||||
| <HeadTop /> | <HeadTop /> | ||||
| <!-- 中间内容区 --> | <!-- 中间内容区 --> | ||||
| <div class="content"> | |||||
| <div class="vantLoadingBox" style="height: 550px" v-show="contentLoading"> | |||||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||||
| </div> | |||||
| <div v-show="!contentLoading" class="content"> | |||||
| <!-- 展示图片 --> | <!-- 展示图片 --> | ||||
| <div class="shouModelImg"> | <div class="shouModelImg"> | ||||
| <div id="editPosition" class="editPosition" :class="videoType == 2 ? 'verticalmodel' : ''"> | <div id="editPosition" class="editPosition" :class="videoType == 2 ? 'verticalmodel' : ''"> | ||||
| @@ -19,7 +22,10 @@ | |||||
| </div> | </div> | ||||
| <!-- 文字 --> | <!-- 文字 --> | ||||
| <div class="addText"> | <div class="addText"> | ||||
| <div class="addText-title">添加文案</div> | |||||
| <div class="addText-title"> | |||||
| <img src="../../assets/icon/icon-text.png" alt="" /> | |||||
| 添加文案 | |||||
| </div> | |||||
| <div class="desalinate"> | <div class="desalinate"> | ||||
| <span>已录入{{ textareaContent.length }}字</span> | <span>已录入{{ textareaContent.length }}字</span> | ||||
| | | ||||
| @@ -43,29 +49,35 @@ | |||||
| <!-- 播报声音 --> | <!-- 播报声音 --> | ||||
| <div class="addText"> | <div class="addText"> | ||||
| <div class="addText-title"> | <div class="addText-title"> | ||||
| 播报声音 | |||||
| <span class="redWord">(必选)</span> | |||||
| </div> | |||||
| <div v-if="soundChoose2.speakTypeStr"> | |||||
| <!-- {{ soundChoose.subTitle }}- --> | |||||
| {{ soundChoose.title }} | |||||
| <!-- -{{soundChoose.ageTypeStr}}- --> | |||||
| — {{ soundChoose2.speakTypeStr }} | |||||
| <img src="../../assets/icon/icon-sound.png" alt="" /> | |||||
| 选择播报声音 | |||||
| <!-- <span class="redWord">(必选)</span> --> | |||||
| </div> | </div> | ||||
| <!-- 只有一级没有二级时 soundChoose.subTitle--> | |||||
| <div v-if="soundChoose.speakTypeStr && !soundChoose2">{{ soundChoose.title }} — {{ soundChoose.speakTypeStr }}</div> | |||||
| <!-- 有二级时 --> | |||||
| <div v-if="soundChoose2.speakTypeStr">{{ soundChoose2.title }} — {{ soundChoose2.speakTypeStr }}</div> | |||||
| </div> | </div> | ||||
| <button class="chooseSound" @click="clickBottomTab(1)"> | |||||
| <img class="img" src="../../assets/icon/icon-microphone.png" alt="" /> | |||||
| <span>选择声音</span> | |||||
| </button> | |||||
| <!-- 合成按钮 --> | <!-- 合成按钮 --> | ||||
| <div class="makeVideo" @click="submit(1)">立即制作</div> | <div class="makeVideo" @click="submit(1)">立即制作</div> | ||||
| <!-- 上移下移 --> | <!-- 上移下移 --> | ||||
| <div class="upAndBottomBtn"> | <div class="upAndBottomBtn"> | ||||
| <div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''"> | <div class="moveLayer" :class="videoType == 2 ? 'moveLayer1' : ''"> | ||||
| <div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | <div class="btnContent" @click="$refs.EditPosition.controlImg(3)"> | ||||
| <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="" /> | |||||
| <!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf9bff6080bf29c6886ad614d479aebfb5fc41429c11c0bea78ca695a0f0e7388" alt="" /> --> | |||||
| <img src="../../assets/icon/icon-up.png" alt="" /> | |||||
| 上移一层 | 上移一层 | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="moveLayer below" :class="videoType == 2 ? 'below1' : ''"> | <div class="moveLayer below" :class="videoType == 2 ? 'below1' : ''"> | ||||
| <div class="btnContent" @click="$refs.EditPosition.controlImg(4)"> | <div class="btnContent" @click="$refs.EditPosition.controlImg(4)"> | ||||
| <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="" /> | |||||
| <!-- <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngde1a7c84fc47b26095186ff9ee7ec07d7fe7bcd2cde90f3178f4edb8cdb08bcd" alt="" /> --> | |||||
| <img src="../../assets/icon/icon-down.png" alt="" /> | |||||
| 下移一层 | 下移一层 | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -73,14 +85,14 @@ | |||||
| </div> | </div> | ||||
| <!-- 底部导航栏 --> | <!-- 底部导航栏 --> | ||||
| <div class="bottom"> | |||||
| <div v-show="!contentLoading" class="bottom"> | |||||
| <van-tabbar class="bottom-tab"> | <van-tabbar class="bottom-tab"> | ||||
| <van-tabbar-item @click="clickBottomTab(1)"> | |||||
| <!-- <van-tabbar-item @click="clickBottomTab(1)"> | |||||
| <span>选择声音</span> | <span>选择声音</span> | ||||
| <template #icon="props"> | <template #icon="props"> | ||||
| <img src="../../assets/icon/icon-microphone.png" /> | <img src="../../assets/icon/icon-microphone.png" /> | ||||
| </template> | </template> | ||||
| </van-tabbar-item> | |||||
| </van-tabbar-item> --> | |||||
| <van-tabbar-item @click="clickBottomTab(2)"> | <van-tabbar-item @click="clickBottomTab(2)"> | ||||
| <span>更改背景</span> | <span>更改背景</span> | ||||
| <template #icon="props"> | <template #icon="props"> | ||||
| @@ -134,9 +146,13 @@ | |||||
| <van-tabs v-if="!showSoundList2" color="#7264F5" line-width="46" line-height="6" title-inactive-color="#666" title-active-color="#333" v-model="soundListAction" swipeable> | <van-tabs v-if="!showSoundList2" color="#7264F5" line-width="46" line-height="6" title-inactive-color="#666" title-active-color="#333" v-model="soundListAction" swipeable> | ||||
| <van-tab v-for="(item, index) in soundTabList" :title="item" :key="index"> | <van-tab v-for="(item, index) in soundTabList" :title="item" :key="index"> | ||||
| <!-- 展示页 --> | <!-- 展示页 --> | ||||
| <div class="list"> | |||||
| <div class="vantLoadingBox" style="height: 150px" v-show="soundLoading1"> | |||||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||||
| </div> | |||||
| <div class="list" v-show="!soundLoading1"> | |||||
| <div v-if="textareaContent.length == 0">输入文案后才可以选择声音哦~ ~</div> | <div v-if="textareaContent.length == 0">输入文案后才可以选择声音哦~ ~</div> | ||||
| <div v-if="soundItemList.length == 0 && textareaContent.length != 0">文字过少,难以识别</div> | |||||
| <div v-if="soundItemList.length == 0 && textareaContent.length != 0">{{ soundTips ? soundTips : '试试输入长一点的句子吧~ ~' }}</div> | |||||
| <template v-if="soundItemList.length != 0"> | <template v-if="soundItemList.length != 0"> | ||||
| <div @click="clickSoundItem(index, item)" class="listItem" :class="{ active: soundItemListAction == index }" v-for="(item, index) in soundItemList" :key="index"> | <div @click="clickSoundItem(index, item)" class="listItem" :class="{ active: soundItemListAction == index }" v-for="(item, index) in soundItemList" :key="index"> | ||||
| <img src="../../assets/icon/icon-earphone.png" alt="" /> | <img src="../../assets/icon/icon-earphone.png" alt="" /> | ||||
| @@ -153,7 +169,10 @@ | |||||
| <!-- 二级列表显示 --> | <!-- 二级列表显示 --> | ||||
| <div v-if="showSoundList2" class="SoundList2"> | <div v-if="showSoundList2" class="SoundList2"> | ||||
| <div class="list"> | |||||
| <div class="vantLoadingBox" style="height: 150px" v-show="soundLoading2"> | |||||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||||
| </div> | |||||
| <div class="list" v-show="!soundLoading2"> | |||||
| <div v-if="soundItemList2.length == 0">暂无数据</div> | <div v-if="soundItemList2.length == 0">暂无数据</div> | ||||
| <template v-if="soundItemList.length != 0"> | <template v-if="soundItemList.length != 0"> | ||||
| <div @click="clickSoundItem2(index, item)" class="listItem" :class="{ active: soundItemListAction2 == index }" v-for="(item, index) in soundItemList2" :key="index"> | <div @click="clickSoundItem2(index, item)" class="listItem" :class="{ active: soundItemListAction2 == index }" v-for="(item, index) in soundItemList2" :key="index"> | ||||
| @@ -198,6 +217,9 @@ | |||||
| 图片 | 图片 | ||||
| <i></i> | <i></i> | ||||
| </div> | </div> | ||||
| <!-- <div class="vantLoadingBox" style="height: 50px" v-show="bjLoading1"> | |||||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||||
| </div> --> | |||||
| <div class="myTab-show-list"> | <div class="myTab-show-list"> | ||||
| <!-- 上传 --> | <!-- 上传 --> | ||||
| <div v-if="bjAction == 1" class="myTab-show-list-upload"> | <div v-if="bjAction == 1" class="myTab-show-list-upload"> | ||||
| @@ -326,6 +348,16 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| contentLoading: true, | |||||
| soundLoading1: true, | |||||
| soundLoading2: true, | |||||
| bjLoading1: true, | |||||
| bjLoading2: true, | |||||
| scLoading1: true, | |||||
| scLoading2: true, | |||||
| soundTips: '', | |||||
| timer: null, | timer: null, | ||||
| id: null, | id: null, | ||||
| timeOuter: null, | timeOuter: null, | ||||
| @@ -346,7 +378,7 @@ export default { | |||||
| personMouldId: null, //选择数字人id | personMouldId: null, //选择数字人id | ||||
| mouldSmId: null, | mouldSmId: null, | ||||
| saveID: null, // 作品id | saveID: null, // 作品id | ||||
| inputTitle: '', // 作品标题 | |||||
| inputTitle: '您的新数字人', // 作品标题 | |||||
| textareaContent: '', // 输入框内容 | textareaContent: '', // 输入框内容 | ||||
| //底部 | //底部 | ||||
| bottomTabActive: 2, // 底部导航高亮 | bottomTabActive: 2, // 底部导航高亮 | ||||
| @@ -419,6 +451,7 @@ export default { | |||||
| }, | }, | ||||
| // 获取声音列表 | // 获取声音列表 | ||||
| async loadVoice() { | async loadVoice() { | ||||
| this.soundTips = ''; | |||||
| if (this.textareaContent.length != 0) { | if (this.textareaContent.length != 0) { | ||||
| const language = franc(this.textareaContent); | const language = franc(this.textareaContent); | ||||
| console.log(language, '语种'); | console.log(language, '语种'); | ||||
| @@ -427,10 +460,17 @@ export default { | |||||
| paperwork: this.textareaContent | paperwork: this.textareaContent | ||||
| }; | }; | ||||
| try { | try { | ||||
| this.soundLoading1 = true; | |||||
| const res = await voiceList(data); | const res = await voiceList(data); | ||||
| console.log(res, '获取声音列表'); | console.log(res, '获取声音列表'); | ||||
| this.soundItemList = res.data.list; | this.soundItemList = res.data.list; | ||||
| this.soundLoading1 = false; | |||||
| } catch (error) { | } catch (error) { | ||||
| this.soundItemList = []; | |||||
| if (error.message == '暂不支持该语种') { | |||||
| this.soundTips = error.message; | |||||
| } | |||||
| this.soundLoading1 = false; | |||||
| console.log(error, 'error'); | console.log(error, 'error'); | ||||
| Toast.fail(error.message); | Toast.fail(error.message); | ||||
| } | } | ||||
| @@ -445,6 +485,7 @@ export default { | |||||
| this.soundChoose = item; | this.soundChoose = item; | ||||
| this.showSoundList2 = true; | this.showSoundList2 = true; | ||||
| this.soundLoading2 = true; | |||||
| const res = await voiceList2Api(item.id); | const res = await voiceList2Api(item.id); | ||||
| let list = res.data.subVoiceMould ? res.data.subVoiceMould : []; | let list = res.data.subVoiceMould ? res.data.subVoiceMould : []; | ||||
| @@ -454,7 +495,7 @@ export default { | |||||
| let list2 = [{ ...obj.data }, ...list]; | let list2 = [{ ...obj.data }, ...list]; | ||||
| this.soundItemList2 = list2 || []; | this.soundItemList2 = list2 || []; | ||||
| this.soundLoading2 = false; | |||||
| // console.log(this.soundItemList2) | // console.log(this.soundItemList2) | ||||
| // this.audioUrl = res.data.videoUrl | // this.audioUrl = res.data.videoUrl | ||||
| } else { | } else { | ||||
| @@ -519,6 +560,11 @@ export default { | |||||
| }; | }; | ||||
| console.log(data, '最终提交的参数'); | console.log(data, '最终提交的参数'); | ||||
| if (type == 1) { | if (type == 1) { | ||||
| Toast.loading({ | |||||
| duration: 5000, | |||||
| message: '加载中...', | |||||
| forbidClick: true | |||||
| }); | |||||
| if (!this.textareaContent) { | if (!this.textareaContent) { | ||||
| Toast.fail('请输入文案内容!'); | Toast.fail('请输入文案内容!'); | ||||
| return; | return; | ||||
| @@ -528,6 +574,11 @@ export default { | |||||
| Toast.fail('请选择声音!'); | Toast.fail('请选择声音!'); | ||||
| return; | return; | ||||
| } | } | ||||
| // 当没有选择声音参数时 | |||||
| // if (!this.soundChoose2.id) { | |||||
| // Toast.fail('请选择声音!'); | |||||
| // return; | |||||
| // } | |||||
| // if (!this.inputTitle) { | // if (!this.inputTitle) { | ||||
| // Toast.fail('请输入文案标题!') | // Toast.fail('请输入文案标题!') | ||||
| // return | // return | ||||
| @@ -550,8 +601,10 @@ export default { | |||||
| this.createVideo({ id: this.$route.query.id }); | this.createVideo({ id: this.$route.query.id }); | ||||
| } | } | ||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| if (error.message != '视频生成中') { | |||||
| console.log(error, 'error'); | |||||
| Toast.fail(error.message); | |||||
| } | |||||
| } | } | ||||
| }, | }, | ||||
| /** | /** | ||||
| @@ -636,6 +689,7 @@ export default { | |||||
| // 根据作品ID获取信息 | // 根据作品ID获取信息 | ||||
| async getDetailById(id) { | async getDetailById(id) { | ||||
| try { | try { | ||||
| this.contentLoading = true; | |||||
| const res = await getModelDetailById(id); | const res = await getModelDetailById(id); | ||||
| // console.log(JSON.parse(res.data.personMouldSm)) | // console.log(JSON.parse(res.data.personMouldSm)) | ||||
| @@ -661,13 +715,16 @@ export default { | |||||
| // this.imgUrl = res.data.personMould.coverImg | // this.imgUrl = res.data.personMould.coverImg | ||||
| this.personMouldId = res.data.personMouldId; | this.personMouldId = res.data.personMouldId; | ||||
| this.mouldSmId = res.data.personMouldSmId; | this.mouldSmId = res.data.personMouldSmId; | ||||
| this.inputTitle = res.data.title; | |||||
| this.inputTitle = res.data.title ? res.data.title : '您的新数字人'; | |||||
| this.textareaContent = res.data.paperwork || ''; | this.textareaContent = res.data.paperwork || ''; | ||||
| this.soundChoose.id = res.data.voiceMouldId; | this.soundChoose.id = res.data.voiceMouldId; | ||||
| this.soundChoose.mouldSmId = res.data.voiceMouldSmId; | this.soundChoose.mouldSmId = res.data.voiceMouldSmId; | ||||
| // console.log(res.data.voiceMouldSm, 111111111111111); | // console.log(res.data.voiceMouldSm, 111111111111111); | ||||
| this.soundChoose.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : ''; | this.soundChoose.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : ''; | ||||
| this.soundChoose2.subTitle = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).subTitle : ''; | |||||
| this.soundChoose2.title = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).title : ''; | |||||
| this.soundChoose2.speakTypeStr = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).speakTypeStr : ''; | this.soundChoose2.speakTypeStr = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).speakTypeStr : ''; | ||||
| this.soundChoose2.id = res.data.voiceMouldSm ? JSON.parse(res.data.voiceMouldSm).id : ''; | |||||
| // console.log(this.soundChoose.title, this.soundChoose2.speakTypeStr, '112233'); | // console.log(this.soundChoose.title, this.soundChoose2.speakTypeStr, '112233'); | ||||
| if (this.textareaContent.length != 0) { | if (this.textareaContent.length != 0) { | ||||
| await this.loadVoice(); // 获取音频列表 | await this.loadVoice(); // 获取音频列表 | ||||
| @@ -675,7 +732,7 @@ export default { | |||||
| this.soundItemListAction = this.soundItemList.findIndex(item => { | this.soundItemListAction = this.soundItemList.findIndex(item => { | ||||
| return item.id == this.soundChoose.id; | return item.id == this.soundChoose.id; | ||||
| }); //高亮处理 | }); //高亮处理 | ||||
| this.contentLoading = false; | |||||
| // backgroundMouldId: '', // 背景id | // backgroundMouldId: '', // 背景id | ||||
| // backgroundMouldSmId: '', //背景标识 | // backgroundMouldSmId: '', //背景标识 | ||||
| // 如果视频生成了 | // 如果视频生成了 | ||||
| @@ -815,34 +872,62 @@ export default { | |||||
| * @description:获取系统背景图 | * @description:获取系统背景图 | ||||
| */ | */ | ||||
| async getSystemBGIList() { | async getSystemBGIList() { | ||||
| const res = await systemBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||||
| this.systemBGIList = res.data.list; | |||||
| this.showBGIList = this.systemBGIList; | |||||
| try { | |||||
| this.bjLoading1 = true; | |||||
| const res = await systemBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||||
| this.systemBGIList = res.data.list; | |||||
| this.showBGIList = this.systemBGIList; | |||||
| this.bjLoading1 = false; | |||||
| } catch (error) { | |||||
| console.log(error); | |||||
| this.bjLoading1 = false; | |||||
| } | |||||
| }, | }, | ||||
| /** | /** | ||||
| * @description:获取我上传的背景图 | * @description:获取我上传的背景图 | ||||
| */ | */ | ||||
| async getMyBGIListApi() { | async getMyBGIListApi() { | ||||
| const res = await myBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||||
| this.myBGIList = res.data.list; | |||||
| try { | |||||
| this.bjLoading2 = true; | |||||
| const res = await myBGIListApi(this.pageNum, this.pageSize, this.videoType); | |||||
| this.myBGIList = res.data.list; | |||||
| this.bjLoading2 = false; | |||||
| } catch (error) { | |||||
| console.log(error); | |||||
| this.bjLoading2 = false; | |||||
| } | |||||
| }, | }, | ||||
| /** | /** | ||||
| * @description:获取系统素材 | * @description:获取系统素材 | ||||
| */ | */ | ||||
| async getSystemScList() { | async getSystemScList() { | ||||
| const res = await systemScListApi(this.pageNum, this.pageSize); | |||||
| this.systemScList = res.data.list; | |||||
| this.showScList = this.systemScList; | |||||
| try { | |||||
| this.scLoading1 = true; | |||||
| const res = await systemScListApi(this.pageNum, this.pageSize); | |||||
| this.systemScList = res.data.list; | |||||
| this.showScList = this.systemScList; | |||||
| this.scLoading1 = false; | |||||
| } catch (error) { | |||||
| console.log(error); | |||||
| this.scLoading1 = false; | |||||
| } | |||||
| }, | }, | ||||
| /** | /** | ||||
| * @description:获取我上传的素材 | * @description:获取我上传的素材 | ||||
| */ | */ | ||||
| async getMyScListApi() { | async getMyScListApi() { | ||||
| const res = await myScListApi(this.pageNum, this.pageSize); | |||||
| this.myScList = res.data.list; | |||||
| try { | |||||
| this.scLoading2 = true; | |||||
| const res = await myScListApi(this.pageNum, this.pageSize); | |||||
| this.myScList = res.data.list; | |||||
| this.scLoading2 = false; | |||||
| } catch (error) { | |||||
| console.log(error); | |||||
| this.scLoading2 = false; | |||||
| } | |||||
| }, | }, | ||||
| /** | /** | ||||
| @@ -903,6 +988,24 @@ export default { | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .chooseSound { | |||||
| position: absolute; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| margin-top: 10px; | |||||
| width: 225px; | |||||
| height: 50px; | |||||
| text-align: center; | |||||
| font-size: 20px; | |||||
| line-height: 50px; | |||||
| border: 1px solid #85a5f9; | |||||
| .img { | |||||
| margin-top: -3px; | |||||
| margin-right: 3px; | |||||
| width: 16px; | |||||
| height: 16px; | |||||
| } | |||||
| } | |||||
| .editPosition { | .editPosition { | ||||
| position: relative; | position: relative; | ||||
| // transform: scale(0.2); | // transform: scale(0.2); | ||||
| @@ -944,7 +1047,7 @@ export default { | |||||
| position: relative; | position: relative; | ||||
| margin-top: 10px; | margin-top: 10px; | ||||
| padding: 0 10px; | padding: 0 10px; | ||||
| padding-bottom: 50px; | |||||
| padding-bottom: 190px; | |||||
| .shouModelImg { | .shouModelImg { | ||||
| display: flex; | display: flex; | ||||
| @@ -983,6 +1086,11 @@ export default { | |||||
| font-size: 16px; | font-size: 16px; | ||||
| font-weight: 600; | font-weight: 600; | ||||
| color: #000; | color: #000; | ||||
| img { | |||||
| width: 24px; | |||||
| height: 24px; | |||||
| margin-right: 5px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| @@ -1031,8 +1139,12 @@ export default { | |||||
| } | } | ||||
| .makeVideo { | .makeVideo { | ||||
| margin: 15px 20px 0; | |||||
| position: fixed; | |||||
| bottom: 70px; | |||||
| left: 50%; | |||||
| transform: translateX(-50%); | |||||
| // margin: 15px 20px 0; | |||||
| width: 325px; | |||||
| height: 50px; | height: 50px; | ||||
| text-align: center; | text-align: center; | ||||
| font-size: 20px; | font-size: 20px; | ||||
| @@ -1061,7 +1173,7 @@ export default { | |||||
| border-radius: 11px; | border-radius: 11px; | ||||
| } | } | ||||
| .moveLayer1 { | .moveLayer1 { | ||||
| top: 38% !important; | |||||
| top: 35% !important; | |||||
| left: 20% !important; | left: 20% !important; | ||||
| } | } | ||||
| img { | img { | ||||
| @@ -1075,7 +1187,7 @@ export default { | |||||
| top: 25%; | top: 25%; | ||||
| } | } | ||||
| .below1 { | .below1 { | ||||
| top: 38% !important; | |||||
| top: 35% !important; | |||||
| left: 60% !important; | left: 60% !important; | ||||
| } | } | ||||
| @@ -1119,7 +1231,10 @@ export default { | |||||
| border-radius: 12px; | border-radius: 12px; | ||||
| ::v-deep .van-button { | ::v-deep .van-button { | ||||
| float: right; | float: right; | ||||
| border-radius: 12px; | |||||
| height: 40px; | |||||
| color: #fff; | |||||
| border-radius: 40px; | |||||
| background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); | background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%); | ||||
| } | } | ||||
| .progress { | .progress { | ||||
| @@ -11,17 +11,6 @@ | |||||
| <img src="../../assets/img/myVideo.png" alt="" /> | <img src="../../assets/img/myVideo.png" alt="" /> | ||||
| 我的视频作品 | 我的视频作品 | ||||
| </div> | </div> | ||||
| <!-- <span | |||||
| v-show="listActive == 1" | |||||
| class="floatRight" | |||||
| @click="listActive = 2" | |||||
| ><img src="../../assets/icon/icon-list2.png" alt="" /></span | |||||
| ><span | |||||
| @click="listActive = 1" | |||||
| v-show="listActive == 2" | |||||
| class="floatRight" | |||||
| ><img src="../../assets/icon/icon-list1.png" alt="" | |||||
| /></span> --> | |||||
| <div class="title-change"> | <div class="title-change"> | ||||
| <div class="displayFlex"> | <div class="displayFlex"> | ||||
| <span v-show="listActive == 1" class="floatRight" :class="videoType == 1 ? 'wordColor' : ''" @click="getNewList(1)">只看竖屏</span> | <span v-show="listActive == 1" class="floatRight" :class="videoType == 1 ? 'wordColor' : ''" @click="getNewList(1)">只看竖屏</span> | ||||
| @@ -31,82 +20,84 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="vantLoadingBox" style="height: 550px" v-show="showLoading"> | |||||
| <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> | |||||
| </div> | |||||
| <!-- 具体内容 --> | <!-- 具体内容 --> | ||||
| <!-- 列表样式--大图 --> | |||||
| <div v-if="videoList.length == 0">暂无数据</div> | |||||
| <!-- <div v-if="videoList.length != 0 && !showLoading">数据加载中</div> --> | |||||
| <!-- 新 修改v-if--> | |||||
| <div v-if="waterfallBug"> | |||||
| <waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | |||||
| <div v-for="(item, index) in videoList" class="waterFall-item" :key="item.id ? item.id : index" @click="goDetail(item)"> | |||||
| <div class="waterFall-item-paddding"> | |||||
| <img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" /> | |||||
| <!-- 渐变遮罩层 --> | |||||
| <div class="waterFall-item-mask"> | |||||
| <div>{{ item.title || '无标题' }}</div> | |||||
| <div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
| <div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
| <div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||||
| <div v-show="!showLoading"> | |||||
| <!-- 列表样式--大图 --> | |||||
| <div v-if="videoList.length == 0">暂无数据</div> | |||||
| <!-- 新 修改v-if--> | |||||
| <div v-if="waterfallBug"> | |||||
| <waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList"> | |||||
| <div v-for="(item, index) in videoList" class="waterFall-item" :key="item.id ? item.id : index" @click="goDetail(item)"> | |||||
| <div class="waterFall-item-paddding"> | |||||
| <img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" /> | |||||
| <!-- 渐变遮罩层 --> | |||||
| <div class="waterFall-item-mask"> | |||||
| <div>{{ item.title || '无标题' }}</div> | |||||
| <div>视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
| <div>视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
| <div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||||
| </div> | |||||
| <!-- 视频状态 草稿还是未完成还是失败 --> | |||||
| <div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||||
| <div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||||
| <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||||
| </div> | |||||
| <!-- 删除 --> | |||||
| <div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||||
| <img src="../../assets/icon/icon-trash.png" alt="" /> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <!-- 视频状态 草稿还是未完成还是失败 --> | |||||
| <div class="waterFall-item-state" v-if="item.videoStatus == 2"> | |||||
| </div> | |||||
| </waterfall> | |||||
| </div> | |||||
| <!-- 列表样式--小图 --> | |||||
| <van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index"> | |||||
| <div class="itemList"> | |||||
| <!-- 每一项 --> | |||||
| <div v-if="videoList.length > 0" class="videoModel" :key="index"> | |||||
| <!-- 左侧图片 --> | |||||
| <div class="videoPrv" @click="goDetail(item)"> | |||||
| <img src="../../assets/img/BG@2x.png" /> | |||||
| <div v-if="item.videoStatus == 0" class="cover">草稿</div> | <div v-if="item.videoStatus == 0" class="cover">草稿</div> | ||||
| <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | ||||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | ||||
| <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | |||||
| </div> | </div> | ||||
| <!-- 删除 --> | |||||
| <div class="waterFall-item-del" @click.stop="goDelete(item.id)"> | |||||
| <img src="../../assets/icon/icon-trash.png" alt="" /> | |||||
| <!-- 中间文字 --> | |||||
| <div class="videoInfo" @click="goDetail(item)"> | |||||
| <div class="videoName"> | |||||
| {{ item.title || '无标题' }} | |||||
| </div> | |||||
| <div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
| <div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
| <div class="createTime">创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||||
| </div> | </div> | ||||
| </div> | |||||
| </div> | |||||
| </waterfall> | |||||
| </div> | |||||
| <!-- 列表样式--小图 --> | |||||
| <van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index"> | |||||
| <div class="itemList"> | |||||
| <!-- 每一项 --> | |||||
| <div v-if="videoList.length > 0" class="videoModel" :key="index"> | |||||
| <!-- 左侧图片 --> | |||||
| <div class="videoPrv" @click="goDetail(item)"> | |||||
| <img src="../../assets/img/BG@2x.png" /> | |||||
| <div v-if="item.videoStatus == 0" class="cover">草稿</div> | |||||
| <div v-if="item.videoStatus == 1" class="cover">视频生成中</div> | |||||
| <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div> | |||||
| <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> --> | |||||
| </div> | |||||
| <!-- 中间文字 --> | |||||
| <div class="videoInfo" @click="goDetail(item)"> | |||||
| <div class="videoName"> | |||||
| {{ item.title || '无标题' }} | |||||
| <!-- 右侧更多 --> | |||||
| <div class="showMore" @click.stop="showDialog(item.id)"> | |||||
| <div></div> | |||||
| <div></div> | |||||
| <div></div> | |||||
| </div> | </div> | ||||
| <div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> | |||||
| <div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> | |||||
| <div class="createTime">创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div> | |||||
| </div> | |||||
| <!-- 右侧更多 --> | |||||
| <div class="showMore" @click.stop="showDialog(item.id)"> | |||||
| <div></div> | |||||
| <div></div> | |||||
| <div></div> | |||||
| <!-- 弹出层 --> | |||||
| <van-popup v-if="clickItem == item.id" v-model="showPopup"> | |||||
| <!-- <div @click="closeDialog"> | |||||
| <i class="el-icon-edit" /> 编辑 | |||||
| </div> --> | |||||
| <div @click="goDelete(item.id)"> | |||||
| <i class="el-icon-delete" /> | |||||
| 删除 | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | </div> | ||||
| <!-- 弹出层 --> | |||||
| <van-popup v-if="clickItem == item.id" v-model="showPopup"> | |||||
| <!-- <div @click="closeDialog"> | |||||
| <i class="el-icon-edit" /> 编辑 | |||||
| </div> --> | |||||
| <div @click="goDelete(item.id)"> | |||||
| <i class="el-icon-delete" /> | |||||
| 删除 | |||||
| </div> | |||||
| </van-popup> | |||||
| <!-- 无数据处理 --> | |||||
| <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||||
| </div> | </div> | ||||
| <!-- 无数据处理 --> | |||||
| <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div> | |||||
| </div> | |||||
| </van-swipe-cell> | |||||
| </van-swipe-cell> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <!-- 分页 --> | <!-- 分页 --> | ||||
| <van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="pageChange" /> | <van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="pageChange" /> | ||||
| @@ -132,7 +123,7 @@ | |||||
| <script> | <script> | ||||
| // 组件 | // 组件 | ||||
| import Vue from 'vue'; | import Vue from 'vue'; | ||||
| import { Toast, Dialog } from 'vant'; | |||||
| import { Toast, Dialog, Loading } from 'vant'; | |||||
| import { mapState, mapActions } from 'vuex'; | import { mapState, mapActions } from 'vuex'; | ||||
| import HeadTop from '@/components/common/head.vue'; | import HeadTop from '@/components/common/head.vue'; | ||||
| // 工具 | // 工具 | ||||
| @@ -141,6 +132,7 @@ import { bytesToSize, timestampToTime, scrollToID, formatSeconds } from '../../u | |||||
| import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage'; | import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage'; | ||||
| Vue.use(Toast); | Vue.use(Toast); | ||||
| Vue.use(Loading); | |||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| HeadTop | HeadTop | ||||
| @@ -283,10 +275,8 @@ export default { | |||||
| message: '您确定要删除该作品吗?' | message: '您确定要删除该作品吗?' | ||||
| }) | }) | ||||
| .then(async () => { | .then(async () => { | ||||
| this.showLoading = true; | |||||
| await this.deleteVideoById(id); | await this.deleteVideoById(id); | ||||
| await this.loadVideoList(this.currentPage, this.pageSize, this.videoType); | await this.loadVideoList(this.currentPage, this.pageSize, this.videoType); | ||||
| this.showLoading = false; | |||||
| }) | }) | ||||
| .catch(() => { | .catch(() => { | ||||
| return; | return; | ||||
| @@ -298,15 +288,16 @@ export default { | |||||
| */ | */ | ||||
| async loadVideoList(pageNum, pageSize, videoType) { | async loadVideoList(pageNum, pageSize, videoType) { | ||||
| try { | try { | ||||
| this.showLoading = true; | |||||
| this.waterfallBug = false; | this.waterfallBug = false; | ||||
| // 根据listActive判断是不是看的草稿箱 | // 根据listActive判断是不是看的草稿箱 | ||||
| let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3]; | let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3]; | ||||
| const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss); | const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss); | ||||
| console.log(res, '获取作品列表'); | console.log(res, '获取作品列表'); | ||||
| this.videoList = res.data.list; | this.videoList = res.data.list; | ||||
| this.waterfallBug = true; | this.waterfallBug = true; | ||||
| this.total = res.data.total; | this.total = res.data.total; | ||||
| this.showLoading = false; | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error'); | console.log(error, 'error'); | ||||
| // Toast.fail(error.message) | // Toast.fail(error.message) | ||||
| @@ -372,13 +363,16 @@ export default { | |||||
| scrollToID('top'); | scrollToID('top'); | ||||
| }, | }, | ||||
| created() { | |||||
| this.loadVideoList(1, this.pageSize, this.videoType); | |||||
| async created() { | |||||
| await this.loadVideoList(1, this.pageSize, this.videoType); | |||||
| } | } | ||||
| }; | }; | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .van-pagination { | |||||
| margin-top: 10px; | |||||
| } | |||||
| .floatRight { | .floatRight { | ||||
| margin-left: 15px; | margin-left: 15px; | ||||
| img { | img { | ||||