| @@ -0,0 +1,21 @@ | |||||
| import request from '@/utils/request' | |||||
| // 得到声音试听文件 | |||||
| export function videoDetial(data) { | |||||
| return request({ | |||||
| url: `/api/userVideo/videoDetial?videoId=${data}`, | |||||
| method: 'get', | |||||
| }) | |||||
| } | |||||
| // 得到声音试听文件 | |||||
| export function awsImgUpload(data) { | |||||
| return request({ | |||||
| url: `/api/upload/awsImgUpload | |||||
| file`, | |||||
| method: 'post', | |||||
| data:data | |||||
| }) | |||||
| } | |||||
| @@ -123,5 +123,5 @@ export function doLoginOut() { | |||||
| * @description 获取图形验证码 | * @description 获取图形验证码 | ||||
| * @returns data | * @returns data | ||||
| */ | */ | ||||
| export const codeImg = | |||||
| export const doCodeImg = | |||||
| 'https://smapitest.malls.iformall.com/C/api/user/captcha.jpg' | 'https://smapitest.malls.iformall.com/C/api/user/captcha.jpg' | ||||
| @@ -0,0 +1,259 @@ | |||||
| <template> | |||||
| <div class="uploder"> | |||||
| <div class="change-photo-setter"> | |||||
| <van-uploader | |||||
| class="sett-item" | |||||
| :before-read="beforeRead" | |||||
| accept="image/*" | |||||
| > | |||||
| <div>照片图库</div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| </van-uploader> | |||||
| <van-uploader | |||||
| class="sett-item" | |||||
| :before-read="beforeRead" | |||||
| capture="camera" | |||||
| > | |||||
| <div>拍照</div> | |||||
| <img src="https://img01.yzcdn.cn/vant/leaf.jpg" alt="" /> | |||||
| </van-uploader> | |||||
| <van-uploader class="sett-item" :before-read="beforeRead"> | |||||
| <div>选取文件</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="getCropBlob" | |||||
| /> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { VueCropper } from 'vue-cropper' | |||||
| export default { | |||||
| name: 'uploadAva', | |||||
| components: { | |||||
| VueCropper | |||||
| }, | |||||
| props: { | |||||
| showAta: { | |||||
| default: false, | |||||
| type: Boolean | |||||
| }, | |||||
| avaUrl: { | |||||
| default: '', | |||||
| type: String | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| 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) { | |||||
| 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 | |||||
| } | |||||
| }, | |||||
| getCropBlob() { | |||||
| // let formData = new FormData() | |||||
| this.loadingShow = true | |||||
| console.log(this.option) | |||||
| this.$refs.cropper.getCropBlob((data) => { | |||||
| // formData.append('headFile', data, this.imageFileName) | |||||
| // formData.append('id', this.$store.getters.user.userId) | |||||
| console.log(data) | |||||
| // uploadAva(formData).then((res) => { | |||||
| // this.showCropper = false | |||||
| this.$emit('update:showAta', false) | |||||
| // this.$emit('update:avaUrl', res.data) | |||||
| // }) | |||||
| }) | |||||
| }, | |||||
| onClickLeft() { | |||||
| this.loadingShow = false | |||||
| this.showCropper = false | |||||
| this.$parent.showPhotoUploader = false | |||||
| } | |||||
| } | |||||
| } | |||||
| </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; | |||||
| } | |||||
| .change-photo-setter { | |||||
| width: 400px; | |||||
| background: #fff; | |||||
| position: absolute; | |||||
| top: 11%; | |||||
| left: 40px; | |||||
| z-index: 300; | |||||
| .sett-item { | |||||
| width: 100%; | |||||
| } | |||||
| /deep/.van-uploader__input-wrapper { | |||||
| width: 100%; | |||||
| display: flex; | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| padding: 15px; | |||||
| img { | |||||
| width: 40px; | |||||
| height: 40px; | |||||
| display: block; | |||||
| } | |||||
| } | |||||
| .sett-item:first-child { | |||||
| border-bottom: 2px solid #ccc; | |||||
| } | |||||
| } | |||||
| .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> | |||||
| @@ -52,7 +52,7 @@ request.interceptors.response.use( | |||||
| // 其他错误 | // 其他错误 | ||||
| } else { | } else { | ||||
| Toast.fail(error.message) | |||||
| return Promise.reject(response.data) | return Promise.reject(response.data) | ||||
| } | } | ||||
| } else { | } else { | ||||
| @@ -0,0 +1,773 @@ | |||||
| <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> | |||||
| @@ -37,10 +37,10 @@ | |||||
| </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> --> | ||||
| <img class="yzmImg" :src="codeImg" alt="" /> | |||||
| <img v-if="showCodeImg" class="yzmImg" :src="codeImg" alt="" /> | |||||
| </el-col> | </el-col> | ||||
| <el-col :span="2"> | <el-col :span="2"> | ||||
| <i class="el-icon-refresh-right shuaxin"></i> | |||||
| <i @click="getCodeImg" class="el-icon-refresh-right shuaxin"></i> | |||||
| </el-col> | </el-col> | ||||
| </el-form-item> | </el-form-item> | ||||
| <!-- 短信登录和忘记密码 --> | <!-- 短信登录和忘记密码 --> | ||||
| @@ -132,6 +132,13 @@ | |||||
| placeholder="请输入验证码" | placeholder="请输入验证码" | ||||
| ></el-input> | ></el-input> | ||||
| </el-col> | </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> | </el-form-item> | ||||
| <div class="morePage greenColor"> | <div class="morePage greenColor"> | ||||
| <span @click="loginType = 1">账户登录</span> | <span @click="loginType = 1">账户登录</span> | ||||
| @@ -232,6 +239,28 @@ | |||||
| </el-form-item> | </el-form-item> | ||||
| </el-form> | </el-form> | ||||
| </div> | </div> | ||||
| <!-- 邀请码 loginType=6 --> | |||||
| <div class="loginBox" v-if="loginType == 6"> | |||||
| <el-form ref="form" :rules="rules" :model="form"> | |||||
| <!-- 短信验证码 --> | |||||
| <el-form-item class="phone" prop="inviteCode"> | |||||
| <el-input | |||||
| v-model="form.inviteCode" | |||||
| placeholder="请输入您的邀请码" | |||||
| ></el-input> | |||||
| </el-form-item> | |||||
| <div class="morePage greenColor"> | |||||
| <span @click="loginType = 1">账户登录</span> | |||||
| </div> | |||||
| <!-- 注册 --> | |||||
| <el-form-item> | |||||
| <el-button class="submitBtn" @click="submitInviteCode" | |||||
| >确定</el-button | |||||
| > | |||||
| </el-form-item> | |||||
| </el-form> | |||||
| </div> | |||||
| <!-- 弹出层 --> | <!-- 弹出层 --> | ||||
| <van-popup v-model="showDialog">内容</van-popup> | <van-popup v-model="showDialog">内容</van-popup> | ||||
| </div> | </div> | ||||
| @@ -255,7 +284,7 @@ import { | |||||
| getCaptcha, | getCaptcha, | ||||
| doFindInviteCode, | doFindInviteCode, | ||||
| doUpdateInviteCode, | doUpdateInviteCode, | ||||
| codeImg | |||||
| doCodeImg | |||||
| } from '../../api/login' | } from '../../api/login' | ||||
| Vue.use(Toast) | Vue.use(Toast) | ||||
| @@ -268,7 +297,8 @@ export default { | |||||
| codeInfo: '获取验证码', | codeInfo: '获取验证码', | ||||
| inPage: false, | inPage: false, | ||||
| codeImg: '', //随机验证码图片 | codeImg: '', //随机验证码图片 | ||||
| loginType: 1, //显示页面字符 | |||||
| loginType: 6, //显示页面字符 | |||||
| showCodeImg: true, // 控制验证码的刷新 | |||||
| // 短信验证码登录 | // 短信验证码登录 | ||||
| form: { | form: { | ||||
| phone: '', // 手机号 | phone: '', // 手机号 | ||||
| @@ -278,7 +308,8 @@ export default { | |||||
| phoneCode: '', // | phoneCode: '', // | ||||
| code: '', // 短信验证码 | code: '', // 短信验证码 | ||||
| code1: '', // 忘记密码的短信验证码 | code1: '', // 忘记密码的短信验证码 | ||||
| yzCode: '' // 随机图片验证码 | |||||
| yzCode: '', // 随机图片验证码 | |||||
| inviteCode: '' //邀请码 | |||||
| }, | }, | ||||
| rules: { | rules: { | ||||
| phone: [ | phone: [ | ||||
| @@ -337,7 +368,22 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| watch: { | |||||
| // type值改变,清空除手机号的其他值 | |||||
| loginType() { | |||||
| this.form = { | |||||
| phone: this.form.phone, // 手机号 | |||||
| password: '', // 密码 | |||||
| newPassword1: '', // 新密码1 | |||||
| newPassword2: '', // 新密码2 | |||||
| phoneCode: '', // | |||||
| code: '', // 短信验证码 | |||||
| code1: '', // 忘记密码的短信验证码 | |||||
| yzCode: '', // 随机图片验证码 | |||||
| inviteCode: '' | |||||
| } | |||||
| } | |||||
| }, | |||||
| computed: { | computed: { | ||||
| ...mapState({ | ...mapState({ | ||||
| characters: (state) => state.publicObj.characters | characters: (state) => state.publicObj.characters | ||||
| @@ -395,8 +441,15 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| // 获取随机验证码图片 | // 获取随机验证码图片 | ||||
| getCodeImg() { | |||||
| this.codeImg = codeImg | |||||
| async getCodeImg() { | |||||
| this.showCodeImg = false | |||||
| await this.$axios({ | |||||
| method: 'get', | |||||
| url: doCodeImg | |||||
| }).then((res) => { | |||||
| this.codeImg = doCodeImg | |||||
| }) | |||||
| this.showCodeImg = true | |||||
| }, | }, | ||||
| // 点击登录 | // 点击登录 | ||||
| @@ -406,7 +459,7 @@ export default { | |||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| password: this.form.password, | password: this.form.password, | ||||
| yzCode: this.form.yzCode | |||||
| code: this.form.yzCode | |||||
| } | } | ||||
| this.LoginByPhone(data) | this.LoginByPhone(data) | ||||
| return | return | ||||
| @@ -420,6 +473,7 @@ export default { | |||||
| this.LoginByPhone(data) | this.LoginByPhone(data) | ||||
| return | return | ||||
| } | } | ||||
| // 忘记密码第一步 | |||||
| if (this.loginType == 3) { | if (this.loginType == 3) { | ||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| @@ -428,6 +482,7 @@ export default { | |||||
| this.sendPhoneCode(data) | this.sendPhoneCode(data) | ||||
| return | return | ||||
| } | } | ||||
| // 忘记密码之新密码 | |||||
| if (this.loginType == 4) { | if (this.loginType == 4) { | ||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| @@ -437,16 +492,31 @@ export default { | |||||
| this.updPass(data) | this.updPass(data) | ||||
| return | return | ||||
| } | } | ||||
| // 注册 | |||||
| if (this.loginType == 5) { | if (this.loginType == 5) { | ||||
| if (this.form.newPassword1 != this.form.newPassword2) { | |||||
| Toast('两次输入密码不一致') | |||||
| return | |||||
| } | |||||
| const data = { | const data = { | ||||
| phone: this.form.phone, | phone: this.form.phone, | ||||
| newPassword1: this.form.newPassword1, | |||||
| newPassword2: this.form.newPassword2 | |||||
| password: this.form.newPassword1 | |||||
| } | } | ||||
| this.LoginByPhone(data) | |||||
| this.registerByPhone(data) | |||||
| return | 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) { | async sendPhoneCode(data) { | ||||
| try { | try { | ||||
| @@ -472,7 +542,7 @@ export default { | |||||
| // 提交邀请码 | // 提交邀请码 | ||||
| submitInviteCode() { | submitInviteCode() { | ||||
| const data = { | const data = { | ||||
| inviteCode: this.formIII.inviteCode | |||||
| inviteCode: this.form.inviteCode | |||||
| } | } | ||||
| this.updateInviteCode(data) | this.updateInviteCode(data) | ||||
| }, | }, | ||||
| @@ -504,17 +574,26 @@ export default { | |||||
| */ | */ | ||||
| async LoginByPhone(loginParams) { | async LoginByPhone(loginParams) { | ||||
| try { | try { | ||||
| //密码登录 | |||||
| if (this.loginType == 1) { | if (this.loginType == 1) { | ||||
| const res = await doLogin(loginParams) | const res = await doLogin(loginParams) | ||||
| console.log(res.data.token, '登录数据') | |||||
| const token = res.data.token | |||||
| // 将token置入本地存储 | |||||
| localStorage.setItem('AccessToken', token) | |||||
| // 查询有无邀请码 | |||||
| this.checkInviteCode() | |||||
| } | } | ||||
| // 短信登录 | |||||
| if (this.loginType == 2) { | if (this.loginType == 2) { | ||||
| const res = await doLoginByPhone(loginParams) | const res = await doLoginByPhone(loginParams) | ||||
| console.log(res, '登录数据') | |||||
| const token = res.data.token | |||||
| // 将token置入本地存储 | |||||
| localStorage.setItem('AccessToken', token) | |||||
| // 查询有无邀请码 | |||||
| this.checkInviteCode() | |||||
| } | } | ||||
| console.log(res, '登录数据') | |||||
| const token = res.data.token | |||||
| // 将token置入本地存储 | |||||
| localStorage.setItem('AccessToken', token) | |||||
| this.checkInviteCode() | |||||
| } catch (error) { | } catch (error) { | ||||
| console.log(error, 'error') | console.log(error, 'error') | ||||
| Toast.fail(error.message) | Toast.fail(error.message) | ||||
| @@ -527,11 +606,11 @@ 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 = 3 | |||||
| this.loginType = 6 | |||||
| // 有邀请码直接前往我的页面 | // 有邀请码直接前往我的页面 | ||||
| } else if (status == 1) { | } else if (status == 1) { | ||||
| Toast.success('登录成功!') | Toast.success('登录成功!') | ||||
| @@ -545,9 +624,9 @@ export default { | |||||
| /** | /** | ||||
| * @description:查询用户邀请码状态 | * @description:查询用户邀请码状态 | ||||
| */ | */ | ||||
| async checkInviteCode() { | |||||
| this.src = '/api/captcha.jpg?t=' + Date() | |||||
| }, | |||||
| // async checkInviteCode1() { | |||||
| // this.src = '/api/captcha.jpg?t=' + Date() | |||||
| // }, | |||||
| /** | /** | ||||
| * @description:更新邀请码 | * @description:更新邀请码 | ||||
| */ | */ | ||||
| @@ -136,6 +136,7 @@ | |||||
| <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | <img class="yesImg" src="../../assets/icon/icon-yes.png" alt="" /> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 主要内容 --> | <!-- 主要内容 --> | ||||
| <div class="tabSheet-content"> | <div class="tabSheet-content"> | ||||
| <!-- tab栏 --> | <!-- tab栏 --> | ||||
| @@ -209,8 +210,8 @@ | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 展示 --> | <!-- 展示 --> | ||||
| <div v-if="bjLibrary.length == 0">暂无数据</div> | |||||
| <div v-if="bjLibrary.length != 0" class="myTab-show"> | |||||
| <div v-if="!bjLibrary.length == 0">暂无数据</div> | |||||
| <div v-if="!bjLibrary.length != 0" class="myTab-show"> | |||||
| <div class="myTab-show-title">图片<i></i></div> | <div class="myTab-show-title">图片<i></i></div> | ||||
| <div class="myTab-show-list"> | <div class="myTab-show-list"> | ||||
| <!-- 上传 --> | <!-- 上传 --> | ||||
| @@ -314,7 +315,7 @@ | |||||
| </van-action-sheet> | </van-action-sheet> | ||||
| <!-- 试听的mp3 --> | <!-- 试听的mp3 --> | ||||
| <!-- <audio :src="audioUrl"></audio> --> | |||||
| <audio autoplay :src="audioUrl"></audio> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| @@ -337,6 +338,7 @@ import { | |||||
| doFindInviteCode, | doFindInviteCode, | ||||
| saveOrUpdateUserVideo | saveOrUpdateUserVideo | ||||
| } from '@/api/generateVideo' | } from '@/api/generateVideo' | ||||
| import { videoDetial } from '@/api/editModel' | |||||
| import { getModelDetailById } from '../../api/getPaper.js' | import { getModelDetailById } from '../../api/getPaper.js' | ||||
| Vue.use(Toast) | Vue.use(Toast) | ||||
| @@ -346,13 +348,14 @@ export default { | |||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| audioUrl: null, // 声音试听 | |||||
| inPage: false, | inPage: false, | ||||
| imgUrl: null, | imgUrl: null, | ||||
| modelId: null, | modelId: null, | ||||
| mouldSmId: null, | mouldSmId: null, | ||||
| saveID: null, // 作品id | saveID: null, // 作品id | ||||
| inputTitle: '', | inputTitle: '', | ||||
| textareaContent: 'qweqwe', // 输入框内容 | |||||
| textareaContent: '', // 输入框内容 | |||||
| bottomTabActive: 2, // 底部导航高亮 | bottomTabActive: 2, // 底部导航高亮 | ||||
| showSubtitle: false, // 是否展示字幕 | showSubtitle: false, // 是否展示字幕 | ||||
| showSynthesisDialog: false, //合成进度条窗口显示隐藏 | showSynthesisDialog: false, //合成进度条窗口显示隐藏 | ||||
| @@ -415,10 +418,13 @@ export default { | |||||
| } | } | ||||
| }, | }, | ||||
| // 点击声音列表中的某一项 | // 点击声音列表中的某一项 | ||||
| clickSoundItem(index, item) { | |||||
| async clickSoundItem(index, item) { | |||||
| if (this.soundItemListAction != index) { | if (this.soundItemListAction != index) { | ||||
| this.soundItemListAction = index | this.soundItemListAction = index | ||||
| this.soundChoose = item | this.soundChoose = item | ||||
| // 得到试听文件 | |||||
| const res = await videoDetial(item.exampleVideoId) | |||||
| this.audioUrl = res.data.videoUrl | |||||
| } else { | } else { | ||||
| this.soundItemListAction = -1 | this.soundItemListAction = -1 | ||||
| this.soundChoose = {} | this.soundChoose = {} | ||||