瀏覽代碼

添加接口,未调试

master
congzc 2 年之前
父節點
當前提交
f80c458a06
共有 13 個檔案被更改,包括 10147 行新增9467 行删除
  1. +1
    -0
      package.json
  2. +67
    -1
      src/api/login.js
  3. +5
    -0
      src/styles/index.scss
  4. +2
    -0
      src/utils/request.js
  5. +273
    -0
      src/views/components/cutImg.vue
  6. +195
    -64
      src/views/login/login.vue
  7. +2
    -3
      src/views/model/chooseModel.vue
  8. +259
    -72
      src/views/model/editPosition-chatgpt.vue
  9. +129
    -45
      src/views/model/editPosition-my.vue
  10. +97
    -42
      src/views/model/editPosition.vue
  11. +130
    -18
      src/views/myPage/myPage copy.vue
  12. +8
    -3
      src/views/myPage/myPage.vue
  13. +8979
    -9219
      yarn.lock

+ 1
- 0
package.json 查看文件

@@ -19,6 +19,7 @@
"swiper": "^4.5.1", "swiper": "^4.5.1",
"vant": "^2.12.48", "vant": "^2.12.48",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-cropper": "^0.5.11",
"vue-masonry": "^0.16.0", "vue-masonry": "^0.16.0",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"


+ 67
- 1
src/api/login.js 查看文件

@@ -10,8 +10,32 @@ export function getCodeByPhone(phone) {
url: `/api/user/sendLoginPhoneCode?phone=${phone}`, url: `/api/user/sendLoginPhoneCode?phone=${phone}`,
method: 'get' method: 'get'
}) })
}

/**
* @description 获取图形验证码
* @param {object} loginParams (phone,password)
* @returns data
*/
export function getCaptcha() {
return request({
url: `/api/user/captcha.jpg`,
method: 'get',
})
} }


/**
* @description 密码登录
* @param {object} loginParams (phone,password,code)
* @returns data
*/
export function doLogin(loginParams) {
return request({
url: `/api/user/login`,
method: 'post',
data: loginParams
})
}
/** /**
* @description 短信验证码登录 * @description 短信验证码登录
* @param {object} loginParams (phone,code) * @param {object} loginParams (phone,code)
@@ -24,7 +48,42 @@ export function doLoginByPhone(loginParams) {
data: loginParams data: loginParams
}) })
} }
/**`/api/user/sendLoginPhoneCode?phone=${phone}`
* @description 忘记密码第一步,根据图片验证码和手机号获取短信
* @param {object} loginParams (phone,code)
* @returns data
*/
export function doSendPhoneCode(data) {
return request({
url: `/api/user/sendPhoneCode?phone=${data.phone}&code=${data.code}`,
method: 'get',
})
}


/**
* @description 修改密码
* @param {object} loginParams (phone,code,pwd)
* @returns data
*/
export function doUpdPass(loginParams) {
return request({
url: `/api/user/updPass`,
method: 'get',
data: loginParams
})
}
/**
* @description 注册
* @param {object} loginParams (phone,password)
* @returns data
*/
export function doRegisterByPhone(loginParams) {
return request({
url: `/api/user/doRegisterByPhone`,
method: 'post',
data: loginParams
})
}
/** /**
* @description 查询用户邀请码状态 * @description 查询用户邀请码状态
* @returns data * @returns data
@@ -58,4 +117,11 @@ export function doLoginOut() {
url: `/api/user/loginout`, url: `/api/user/loginout`,
method: 'get', method: 'get',
}) })
}
}

/**
* @description 获取图形验证码
* @returns data
*/
export const codeImg =
'https://smapitest.malls.iformall.com/C/api/user/captcha.jpg'

+ 5
- 0
src/styles/index.scss 查看文件

@@ -21,4 +21,9 @@ img {
} }
.bgcWhite { .bgcWhite {
background: #fff!important; background: #fff!important;
}
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }

+ 2
- 0
src/utils/request.js 查看文件

@@ -35,6 +35,7 @@ request.interceptors.response.use(
let code = response.data.code let code = response.data.code
// 当token过期或损坏时 // 当token过期或损坏时
if (code == 1052) { if (code == 1052) {
// if (1==1) {
router.push("/login"); router.push("/login");
Toast.fail("登录过期,请重新登录!"); Toast.fail("登录过期,请重新登录!");
return return
@@ -51,6 +52,7 @@ request.interceptors.response.use(


// 其他错误 // 其他错误
} else { } else {
Toast.fail(error.message)
return Promise.reject(response.data) return Promise.reject(response.data)
} }
} else { } else {


+ 273
- 0
src/views/components/cutImg.vue 查看文件

@@ -0,0 +1,273 @@
<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-overlay :show="show" @click="$emit('update:showAta', false),show = false">
<div class="update-avatar">
<ul class="avatar-select-type" @click.stop>
<van-uploader :before-read="beforeRead" capture="camera">
<li class="select-type-photo upload-avator">拍摄</li>
</van-uploader>
<li class="update-avatar-line"></li>
<van-uploader :before-read="beforeRead">
<li class="select-type-album upload-avator">从手机相册选择</li>
</van-uploader>
</ul>
<p @click.stop="show = false,$emit('update:showAta', false)">取消</p>
</div>
</van-overlay> -->
<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>

+ 195
- 64
src/views/login/login.vue 查看文件

@@ -20,32 +20,44 @@
<!-- 密码 --> <!-- 密码 -->
<el-form-item class="code" prop="password"> <el-form-item class="code" prop="password">
<el-input <el-input
type="password"
maxlength="10" maxlength="10"
clearable clearable
v-model="form.code"
v-model="form.password"
placeholder="请输入密码" placeholder="请输入密码"
></el-input> ></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.code" placeholder="请输入验证码"></el-input>
<el-input
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 class="el-icon-refresh-right shuaxin"></i>
</el-col> </el-col>
</el-form-item> </el-form-item>
<!-- 短信登录和忘记密码 --> <!-- 短信登录和忘记密码 -->
<div class="morePage greenColor"> <div class="morePage greenColor">
<span @click="loginType=2">短信登录</span>
<span @click="loginType=3">忘记密码?</span>
<span @click="loginType = 2">短信登录</span>
<span @click="loginType = 3">忘记密码?</span>
</div> </div>
<!-- 登录 --> <!-- 登录 -->
<el-form-item> <el-form-item>
<el-button class="submitBtn" @click="loginByPhoneCode" <el-button class="submitBtn" @click="loginByPhoneCode"
>登录/注册</el-button>
>登录/注册</el-button
>
</el-form-item> </el-form-item>
<!-- 没有账号 --> <!-- 没有账号 -->
<div> <div>
<span>没有账号?</span> <span>没有账号?</span>
<span class="greenColor" @click="loginType=5">立即注册</span>
<span class="greenColor" @click="loginType = 5">立即注册</span>
</div> </div>
</el-form> </el-form>
</div> </div>
@@ -61,30 +73,41 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<!-- 短信验证码 --> <!-- 短信验证码 -->
<el-form-item class="code" prop="phoneCode">
<el-form-item class="code" prop="code">
<el-input <el-input
maxlength="10" maxlength="10"
clearable clearable
v-model="form.code" v-model="form.code"
placeholder="请输入短信验证码" 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>
<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> </el-form-item>
<!-- 短信登录和忘记密码 --> <!-- 短信登录和忘记密码 -->
<div class="morePage greenColor inBoxEnd"> <div class="morePage greenColor inBoxEnd">
<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 class="submitBtn" @click="loginByPhoneCode"
>登录</el-button>
>登录</el-button
>
</el-form-item> </el-form-item>
<!-- 没有账号 --> <!-- 没有账号 -->
<div> <div>
<span>没有账号?</span> <span>没有账号?</span>
<span class="greenColor" @click="loginType=5">立即注册</span>
<span class="greenColor" @click="loginType = 5">立即注册</span>
</div> </div>
</el-form> </el-form>
</div> </div>
@@ -102,19 +125,22 @@
<!-- 随机验证码 --> <!-- 随机验证码 -->
<el-form-item class="code" prop="yzCode"> <el-form-item class="code" prop="yzCode">
<el-col :span="12"> <el-col :span="12">
<el-input <el-input
maxlength="10" maxlength="10"
clearable clearable
v-model="form.code"
v-model="form.yzCode"
placeholder="请输入验证码" placeholder="请输入验证码"
></el-input> ></el-input>
</el-col> </el-col>
</el-form-item> </el-form-item>
<div class="morePage greenColor">
<span @click="loginType = 1">账户登录</span>
</div>
<!-- 登录 --> <!-- 登录 -->
<el-form-item> <el-form-item>
<el-button class="submitBtn" @click="loginByPhoneCode" <el-button class="submitBtn" @click="loginByPhoneCode"
>获取短信验证码</el-button>
>获取短信验证码</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@@ -123,18 +149,19 @@
<div class="loginBox" v-if="loginType == 4"> <div class="loginBox" v-if="loginType == 4">
<el-form ref="form" :rules="rules" :model="form"> <el-form ref="form" :rules="rules" :model="form">
<!-- 短信验证码 --> <!-- 短信验证码 -->
<el-form-item class="phone" prop="phoneCode">
<el-form-item class="phone" prop="code1">
<el-input <el-input
v-model="form.phone"
v-model="form.code1"
placeholder="请输入短信验证码" placeholder="请输入短信验证码"
></el-input> ></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 <el-input
type="password"
maxlength="10" maxlength="10"
clearable clearable
v-model="form.code"
v-model="form.newPassword1"
placeholder="请输入您的新密码" placeholder="请输入您的新密码"
> >
</el-input> </el-input>
@@ -142,19 +169,23 @@
<!-- 新密码2 --> <!-- 新密码2 -->
<el-form-item class="code" prop="newPassword2"> <el-form-item class="code" prop="newPassword2">
<el-input <el-input
type="password"
maxlength="10" maxlength="10"
clearable clearable
v-model="form.code"
v-model="form.newPassword2"
placeholder="请再次确认您的新密码" placeholder="请再次确认您的新密码"
> >
</el-input> </el-input>
</el-form-item> </el-form-item>
<div class="morePage greenColor">
<span @click="loginType = 1">账户登录</span>
</div>
<!-- 登录 --> <!-- 登录 -->
<el-form-item> <el-form-item>
<el-button class="submitBtn" @click="loginByPhoneCode" <el-button class="submitBtn" @click="loginByPhoneCode"
>保存密码</el-button>
>保存密码</el-button
>
</el-form-item> </el-form-item>

</el-form> </el-form>
</div> </div>


@@ -171,9 +202,10 @@
<!-- 新密码1 --> <!-- 新密码1 -->
<el-form-item class="code" prop="newPassword1"> <el-form-item class="code" prop="newPassword1">
<el-input <el-input
type="password"
maxlength="10" maxlength="10"
clearable clearable
v-model="form.code"
v-model="form.newPassword1"
placeholder="请输入您的密码" placeholder="请输入您的密码"
> >
</el-input> </el-input>
@@ -181,19 +213,23 @@
<!-- 新密码2 --> <!-- 新密码2 -->
<el-form-item class="code" prop="newPassword2"> <el-form-item class="code" prop="newPassword2">
<el-input <el-input
type="password"
maxlength="10" maxlength="10"
clearable clearable
v-model="form.code"
v-model="form.newPassword2"
placeholder="请再次确认您的密码" placeholder="请再次确认您的密码"
> >
</el-input> </el-input>
</el-form-item> </el-form-item>
<div class="morePage greenColor">
<span @click="loginType = 1">账户登录</span>
</div>
<!-- 注册 --> <!-- 注册 -->
<el-form-item> <el-form-item>
<el-button class="submitBtn" @click="loginByPhoneCode" <el-button class="submitBtn" @click="loginByPhoneCode"
>注册</el-button>
>注册</el-button
>
</el-form-item> </el-form-item>

</el-form> </el-form>
</div> </div>
<!-- 弹出层 --> <!-- 弹出层 -->
@@ -210,31 +246,39 @@ import { mapState, mapActions } from 'vuex'
import { scrollToID } from '../../utils' import { scrollToID } from '../../utils'
// 接口 // 接口
import { import {
doLogin,
getCodeByPhone, getCodeByPhone,
doRegisterByPhone,
doLoginByPhone, doLoginByPhone,
doSendPhoneCode,
doUpdPass,
getCaptcha,
doFindInviteCode, doFindInviteCode,
doUpdateInviteCode
doUpdateInviteCode,
codeImg
} from '../../api/login' } from '../../api/login'


Vue.use(Toast) Vue.use(Toast)
export default { export default {
data() { data() {
return { return {
showDialog:false,//弹出层状态
countNum: 60,// 倒计时
countdownState:false,//倒计时状态
showDialog: false, //弹出层状态
countNum: 60, // 倒计时
countdownState: false, //倒计时状态
codeInfo: '获取验证码', codeInfo: '获取验证码',
inPage: false, inPage: false,
loginType: 1, //显示页面字符
codeImg: '', //随机验证码图片
loginType: 1, //显示页面字符
// 短信验证码登录 // 短信验证码登录
form: { form: {
phone: '',
password: '',
newPassword1:'',
newPassword2:'',
phoneCode:'',
code: '',
yzCode: ''
phone: '', // 手机号
password: '', // 密码
newPassword1: '', // 新密码1
newPassword2: '', // 新密码2
phoneCode: '', //
code: '', // 短信验证码
code1: '', // 忘记密码的短信验证码
yzCode: '' // 随机图片验证码
}, },
rules: { rules: {
phone: [ phone: [
@@ -283,7 +327,7 @@ export default {
] ]
}, },
// 短信登录 // 短信登录
// 忘记密码 // 忘记密码
// 重设密码 // 重设密码
// 注册 // 注册
@@ -307,21 +351,21 @@ export default {
//调用接口 //调用接口
this.getCode() this.getCode()
// 切换文字 // 切换文字
this.countdownState = !this.countdownState;
this.countdownState = !this.countdownState
// 定时器 // 定时器
let intervalBtn = setInterval(() => { let intervalBtn = setInterval(() => {
// 倒数自减
this.countNum--;
if(this.countNum < 0) {
// 清除定时器
clearInterval(intervalBtn)
// 更改状态
this.countdownState =! this.countdownState;
// 重置倒计时状态
this.countNum = 60;
};
// 倒计时
}, 1000);
// 倒数自减
this.countNum--
if (this.countNum < 0) {
// 清除定时器
clearInterval(intervalBtn)
// 更改状态
this.countdownState = !this.countdownState
// 重置倒计时状态
this.countNum = 60
}
// 倒计时
}, 1000)
}, },
go(url) { go(url) {
this.$router.push(url) this.$router.push(url)
@@ -350,16 +394,81 @@ export default {
this.getPhoneCode(phoneValue) this.getPhoneCode(phoneValue)
} }
}, },
// 获取随机验证码图片
getCodeImg() {
this.codeImg = codeImg
},


// 手机验证码登录
// 点击登录
loginByPhoneCode() { loginByPhoneCode() {
const data = {
phone: this.form.phone,
code: this.form.code
// 密码登录
if (this.loginType == 1) {
const data = {
phone: this.form.phone,
password: this.form.password,
yzCode: 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) {
const data = {
phone: this.form.phone,
newPassword1: this.form.newPassword1,
newPassword2: this.form.newPassword2
}
this.LoginByPhone(data)
return
}
},
// 忘记密码第一步,根据图片验证码和手机号获取短信
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)
} }
this.LoginByPhone(data)
}, },

// 提交邀请码 // 提交邀请码
submitInviteCode() { submitInviteCode() {
const data = { const data = {
@@ -395,7 +504,12 @@ export default {
*/ */
async LoginByPhone(loginParams) { async LoginByPhone(loginParams) {
try { try {
const res = await doLoginByPhone(loginParams)
if (this.loginType == 1) {
const res = await doLogin(loginParams)
}
if (this.loginType == 2) {
const res = await doLoginByPhone(loginParams)
}
console.log(res, '登录数据') console.log(res, '登录数据')
const token = res.data.token const token = res.data.token
// 将token置入本地存储 // 将token置入本地存储
@@ -428,7 +542,12 @@ export default {
Toast.fail(error.message) Toast.fail(error.message)
} }
}, },

/**
* @description:查询用户邀请码状态
*/
async checkInviteCode() {
this.src = '/api/captcha.jpg?t=' + Date()
},
/** /**
* @description:更新邀请码 * @description:更新邀请码
*/ */
@@ -448,6 +567,7 @@ export default {
// 手机号记忆回填 // 手机号记忆回填
const phoneValue = localStorage.getItem('phoneValue') const phoneValue = localStorage.getItem('phoneValue')
this.form.phone = phoneValue ? phoneValue : '' this.form.phone = phoneValue ? phoneValue : ''
this.getCodeImg()
}, },
mounted() { mounted() {
this.inPage = true this.inPage = true
@@ -457,6 +577,17 @@ export default {
</script> </script>


<style lang="scss" scoped> <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 { .greenColor {
color: #5ed5c8; color: #5ed5c8;
} }
@@ -494,8 +625,8 @@ export default {
margin-bottom: 40px; margin-bottom: 40px;
} }
.inBoxEnd { .inBoxEnd {
display: flex;
justify-content: end !important;
display: flex;
justify-content: end !important;
} }
.phone { .phone {
position: relative; position: relative;
@@ -587,6 +718,6 @@ export default {
background-color: #f6f6f6; background-color: #f6f6f6;
} }
::v-deep .el-form-item { ::v-deep .el-form-item {
margin-bottom: 25px;
margin-bottom: 25px;
} }
</style> </style>

+ 2
- 3
src/views/model/chooseModel.vue 查看文件

@@ -33,7 +33,7 @@
</div> --> </div> -->
<!-- 模板列表 --> <!-- 模板列表 -->
<div class="choose"> <div class="choose">
<div class="modeList" v-masonry item-selector=".model" column-width="175">
<div class="modeList" v-masonry item-selector=".model" column-width="170">
<div <div
v-masonry-tile v-masonry-tile
class="model" class="model"
@@ -277,7 +277,6 @@ export default {
} }
} }
} }

.choose { .choose {
padding-top: 20px; padding-top: 20px;
margin-bottom: 40px; margin-bottom: 40px;
@@ -289,7 +288,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
// margin: auto; // margin: auto;
// padding: 0 23px; // padding: 0 23px;
padding-left: 20px;
padding-left: 15px;
width: 100%; width: 100%;
margin-right: -20px; margin-right: -20px;




+ 259
- 72
src/views/model/editPosition-chatgpt.vue 查看文件

@@ -1,93 +1,280 @@
<template> <template>
<div
class="image-container"
ref="container"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
>
<img
:src="imageUrl"
ref="image"
:style="{
transform:
'scale(' + scale + ') translate(' + offsetX + 'px, ' + offsetY + 'px)'
}"
/>
<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-overlay :show="show" @click="$emit('update:showAta', false),show = false">
<div class="update-avatar">
<ul class="avatar-select-type" @click.stop>
<van-uploader :before-read="beforeRead" capture="camera">
<li class="select-type-photo upload-avator">拍摄</li>
</van-uploader>
<li class="update-avatar-line"></li>
<van-uploader :before-read="beforeRead">
<li class="select-type-album upload-avator">从手机相册选择</li>
</van-uploader>
</ul>
<p @click.stop="show = false,$emit('update:showAta', false)">取消</p>
</div>
</van-overlay> -->
<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> </div>
</template> </template>

<script> <script>
import { VueCropper } from 'vue-cropper'
export default { export default {
name: 'uploadAva',
components: {
VueCropper
},
props: {
showAta: {
default: false,
type: Boolean
},
avaUrl: {
default: '',
type: String
}
},
data() { data() {
return { return {
imageUrl: 'https://picsum.photos/600/400',
lastX: 0,
lastY: 0,
isDragging: false,
startX: 0,
startY: 0,
scale: 1,
lastScale: 1,
offsetX: 0,
offsetY: 0
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: { methods: {
onTouchStart(event) {
if (event.touches.length === 2) {
this.lastX = (event.touches[0].clientX + event.touches[1].clientX) / 2
this.lastY = (event.touches[0].clientY + event.touches[1].clientY) / 2
this.lastScale = this.scale
this.isDragging = false
} else if (event.touches.length === 1) {
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
this.isDragging = true
// 点击上传按钮
beforeRead(file) {
console.log(file, '111')
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
}, },
onTouchMove(event) {
if (event.touches.length === 2) {
const x = (event.touches[0].clientX + event.touches[1].clientX) / 2
const y = (event.touches[0].clientY + event.touches[1].clientY) / 2
const deltaX = x - this.lastX
const deltaY = y - this.lastY
const scale =
(event.touches[0].clientX - event.touches[1].clientX) /
(this.lastX - this.lastY)
this.scale = this.lastScale * scale
this.offsetX += deltaX
this.offsetY += deltaY
this.lastX = x
this.lastY = y
} else if (event.touches.length === 1 && this.isDragging) {
const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY
this.offsetX += deltaX
this.offsetY += deltaY
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
// 转64
imageToBase64(file) {
let reader = new FileReader()
console.log(reader)
reader.readAsDataURL(file)
reader.onload = () => {
console.log(reader.result, '222')
this.option.img = reader.result
} }
}, },
onTouchEnd(event) {
this.isDragging = false
// 处理图片,
getCropBlob() {
// let formData = new FormData()
this.loadingShow = true
console.log(this.option)
console.log(this.$refs.cropper)
// cropper插件上的getCropBlob()方法,data就是截图的图片
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> </script>

<style>
.image-container {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
<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;
}
} }

img {
max-width: 100%;
max-height: 100%;
.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> </style>

+ 129
- 45
src/views/model/editPosition-my.vue 查看文件

@@ -1,46 +1,40 @@
<template> <template>
<div :class="inPage ? 'page active' : 'page'"> <div :class="inPage ? 'page active' : 'page'">
<div id="top"></div> <div id="top"></div>
<div @touchmove="onMouseMove" class="content">
<!-- <div
v-for="(item, index) in materialList"
:key="index"
class="material"
style="
{
top: item.x + 'px';
left: item.y + 'px';
transform: scale(item.scale);
}
"
>
<img :src="item.url" alt="" />
<div>11233</div>
</div> -->
<div class="content" ref="fatherBox">
<!-- 控制框 -->
<div class="control">
<div @click="controlImg(1)">放大</div>
<div @click="controlImg(2)">缩小</div>
<div @click="controlImg(3)">上移一层</div>
<div @click="controlImg(4)">下移一层</div>
</div>


<!-- <div
<div
:id="'item' + index"
@touchmove="onMouseMove(index)"
@touchstart="onMouseDown(index)"
@touchend="onMouseUp(index)"
v-for="(item, index) in materialList" v-for="(item, index) in materialList"
:key="index" :key="index"
class="material" class="material"
:style="{ top: item.x, left: item.y }"
>
<div>{{ item.text }}</div>
</div> -->
<div
@touchstart="onMouseDown"
@touchend="onMouseUp"
class="material"
:style="{ :style="{
transform: transform:
'scale(' + 'scale(' +
scale +
item.scale +
') translate(' + ') translate(' +
offsetX +
item.x +
'px, ' + 'px, ' +
offsetY +
'px)'
item.y +
'px)',
zIndex: item.zIndex
}" }"
></div>
>
<div>{{ item.text }}</div>
<img :src="item.url" alt="" />
<!-- 边框 -->
<div :class="domIndex == index ? 'active' : ''"></div>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -61,10 +55,10 @@ export default {
dragging: false, dragging: false,
startX: 0, startX: 0,
startY: 0, // 鼠标位置x y startY: 0, // 鼠标位置x y
windowWidth: 0,
windowHeight: 0,
scale: 1, scale: 1,
lastScale: 1,
offsetX: 200,
offsetY: 200,
domIndex: -1, //当前点击的图片
materialList: [ materialList: [
{ {
text: '小div1', text: '小div1',
@@ -93,9 +87,9 @@ export default {
}, },
{ {
text: '小div4', text: '小div4',
url: '@/assets/icon/icon-trash',
x: '100px',
y: '100px',
url: '../../assets/icon/icon-trash',
x: 100,
y: 100,
scale: 1, scale: 1,
zIndex: 10 zIndex: 10
}, },
@@ -110,33 +104,92 @@ export default {
] ]
} }
}, },

computed: { computed: {
...mapState({ ...mapState({
characters: (state) => state.publicObj.characters characters: (state) => state.publicObj.characters
}) })
// imageStyles() {
// return this.images.map((image, index) => {
// return {
// zIndex: index,
// width: `${image.width}px`,
// height: `${image.height}px`,
// position: 'absolute',
// top: `${image.y}px`,
// left: `${image.x}px`,
// };
// });
// },
}, },


methods: { methods: {
...mapActions(['setCharacters']), ...mapActions(['setCharacters']),
// 鼠标按下事件 // 鼠标按下事件
onMouseDown(event) {
onMouseDown(index) {
this.dragging = true this.dragging = true
this.domIndex = index
// 记录点击瞬间的鼠标坐标
this.startX = event.touches[0].clientX this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY this.startY = event.touches[0].clientY
}, },
// 鼠标抬起 // 鼠标抬起
onMouseUp() {
onMouseUp(index) {
this.dragging = false this.dragging = false
// this.domIndex = -1
}, },
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
onMouseMove(event) {
onMouseMove(index) {
// 禁止默认事件--下拉
event.preventDefault()
if (!this.dragging) return if (!this.dragging) return
if (this.domIndex != index) return
// console.log(event.touches[0])
const deltaX = event.touches[0].clientX - this.startX const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY const deltaY = event.touches[0].clientY - this.startY
this.offsetX += deltaX
this.offsetY += deltaY
this.materialList[index].x += deltaX
this.materialList[index].y += deltaY

this.startX = event.touches[0].clientX this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY this.startY = event.touches[0].clientY
// 得到父子盒子信息
const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
const sonRect = document
.getElementById(`item${index}`)
.getBoundingClientRect()
console.log(fatherRect)
console.log(sonRect)
// 限制X轴
if (this.materialList[index].x < 0) {
this.materialList[index].x = 0
}
if (sonRect.left > fatherRect.width - sonRect.width / 2) {
this.materialList[index].x = fatherRect.width - sonRect.width
}
// 限制Y轴
if (this.materialList[index].y < 0) {
this.materialList[index].y = 0
}
if (sonRect.top > fatherRect.height - sonRect.height / 2) {
this.materialList[index].y = fatherRect.height - sonRect.height
}
},
controlImg(type) {
if (this.domIndex == -1) {
Toast('请选择素材')
}
if (type == 1) {
this.materialList[this.domIndex].scale += 0.1
}
if (type == 2) {
this.materialList[this.domIndex].scale -= 0.1
}
if (type == 3) {
this.materialList[this.domIndex].zIndex += 1
}
if (type == 4) {
this.materialList[this.domIndex].zIndex -= 1
}
}, },
go(url) { go(url) {
this.$router.push(url) this.$router.push(url)
@@ -151,6 +204,23 @@ export default {
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
* {
box-sizing: content-box !important;
}
.control {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #fff;
z-index: 999999;
}
.page { .page {
transform: translateX(30%); transform: translateX(30%);
opacity: 0; opacity: 0;
@@ -159,18 +229,32 @@ export default {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
} }
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
} }
.content { .content {
position: relative; position: relative;
width: 375px;
height: 667px;
width: 100vw;
height: 100vh;
background-color: green; background-color: green;
overflow: hidden;
.active {
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border: 10px solid rgba(0, 0, 0, 0.5);
}
.material { .material {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 50px;
height: 40px;
width: 150px;
height: 140px;
background-color: red; background-color: red;
img { img {
width: 30px; width: 30px;


+ 97
- 42
src/views/model/editPosition.vue 查看文件

@@ -1,32 +1,17 @@
<template> <template>
<div :class="inPage ? 'page active' : 'page'"> <div :class="inPage ? 'page active' : 'page'">
<div id="top"></div> <div id="top"></div>
<div class="content">
<!-- <div
v-for="(item, index) in materialList"
:key="index"
class="material"
style="
{
top: item.x + 'px';
left: item.y + 'px';
transform: scale(item.scale);
}
"
>
<img :src="item.url" alt="" />
<div>11233</div>
</div> -->
<div class="content" ref="fatherBox">
<!-- 控制框 -->
<div class="control">
<div @click="controlImg(1)">放大</div>
<div @click="controlImg(2)">缩小</div>
<div @click="controlImg(3)">上移一层</div>
<div @click="controlImg(4)">下移一层</div>
</div>


<!-- <div
v-for="(item, index) in materialList"
:key="index"
class="material"
:style="{ top: item.x, left: item.y }"
>
<div>{{ item.text }}</div>
</div> -->
<div <div
:id="'item' + index"
@touchmove="onMouseMove(index)" @touchmove="onMouseMove(index)"
@touchstart="onMouseDown(index)" @touchstart="onMouseDown(index)"
@touchend="onMouseUp(index)" @touchend="onMouseUp(index)"
@@ -34,19 +19,16 @@
:key="index" :key="index"
class="material" class="material"
:style="{ :style="{
transform:
'scale(' +
item.scale +
') translate(' +
item.x +
'px, ' +
item.y +
'px)',
zIndex: item.zIndex
transform: 'scale(' + item.scale + ') ',
zIndex: item.zIndex,
top: item.y + 'px',
left: item.x + 'px'
}" }"
> >
<img :src="item.url" alt="" />
<div>{{ item.text }}</div> <div>{{ item.text }}</div>
<img :src="item.url" alt="" />
<!-- 边框 -->
<div :class="domIndex == index ? 'active' : ''"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -68,11 +50,10 @@ export default {
dragging: false, dragging: false,
startX: 0, startX: 0,
startY: 0, // 鼠标位置x y startY: 0, // 鼠标位置x y
windowWidth: 0,
windowHeight: 0,
scale: 1, scale: 1,
lastScale: 1,
domIndex: -1, //当前点击的图片 domIndex: -1, //当前点击的图片
offsetX: 200,
offsetY: 200,
materialList: [ materialList: [
{ {
text: '小div1', text: '小div1',
@@ -143,30 +124,74 @@ export default {
onMouseDown(index) { onMouseDown(index) {
this.dragging = true this.dragging = true
this.domIndex = index this.domIndex = index
// 记录点击瞬间的鼠标坐标
this.startX = event.touches[0].clientX this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY this.startY = event.touches[0].clientY
}, },
// 鼠标抬起 // 鼠标抬起
onMouseUp(index) { onMouseUp(index) {
this.dragging = false this.dragging = false
this.domIndex = -1
// this.domIndex = -1
}, },
// 鼠标在父盒子移动时,判断是否按下,然后再走逻辑 // 鼠标在父盒子移动时,判断是否按下,然后再走逻辑
onMouseMove(index) { onMouseMove(index) {
// 禁止默认事件--下拉
event.preventDefault()
if (!this.dragging) return if (!this.dragging) return
if (this.domIndex != index) return if (this.domIndex != index) return
console.log(event.touches[0])

const deltaX = event.touches[0].clientX - this.startX const deltaX = event.touches[0].clientX - this.startX
const deltaY = event.touches[0].clientY - this.startY const deltaY = event.touches[0].clientY - this.startY
console.log(deltaX)
this.materialList[index].x += deltaX this.materialList[index].x += deltaX
this.materialList[index].y += deltaY this.materialList[index].y += deltaY

this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
// 得到父子盒子信息
const fatherRect = this.$refs.fatherBox.getBoundingClientRect()
const sonRect = document
.getElementById(`item${index}`)
.getBoundingClientRect()
// 限制X轴
if (this.materialList[index].x < 0) { if (this.materialList[index].x < 0) {
this.materialList[index].x = 0 this.materialList[index].x = 0
} }
if (sonRect.left > fatherRect.width - sonRect.width / 2) {
this.materialList[index].x = fatherRect.width - sonRect.width
this.exceed()
}
// 限制Y轴
if (this.materialList[index].y < 0) { if (this.materialList[index].y < 0) {
this.materialList[index].y = 0 this.materialList[index].y = 0
} }
this.startX = event.touches[0].clientX
this.startY = event.touches[0].clientY
if (sonRect.top > fatherRect.height - sonRect.height / 2) {
this.materialList[index].y = fatherRect.height - sonRect.height
this.exceed()
}
},
// 控制台
controlImg(type) {
if (this.domIndex == -1) {
Toast('请选择素材')
}
if (type == 1) {
this.materialList[this.domIndex].scale += 0.1
}
if (type == 2) {
this.materialList[this.domIndex].scale -= 0.1
}
if (type == 3) {
this.materialList[this.domIndex].zIndex += 1
}
if (type == 4) {
this.materialList[this.domIndex].zIndex -= 1
}
},
// 素材超出显示范围
exceed() {
Toast('素材超出显示范围')
}, },
go(url) { go(url) {
this.$router.push(url) this.$router.push(url)
@@ -181,6 +206,23 @@ export default {
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
* {
box-sizing: content-box !important;
}
.control {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #fff;
z-index: 999999;
}
.page { .page {
transform: translateX(30%); transform: translateX(30%);
opacity: 0; opacity: 0;
@@ -189,13 +231,26 @@ export default {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
} }
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
} }
.content { .content {
position: relative; position: relative;
width: 375px;
height: 667px;
width: 100vw;
height: 100vh;
background-color: green; background-color: green;
overflow: hidden; overflow: hidden;
.active {
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border: 10px solid rgba(0, 0, 0, 0.5);
}
.material { .material {
position: absolute; position: absolute;
top: 0; top: 0;


+ 130
- 18
src/views/myPage/myPage copy.vue 查看文件

@@ -9,10 +9,61 @@
<div class="title"> <div class="title">
<img src="../../assets/img/myVideo.png" alt="" /> <img src="../../assets/img/myVideo.png" alt="" />
我的视频作品 我的视频作品
<span class="floatRight" style="float: right">草稿箱</span>
<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>
<span class="floatRight">只看竖屏</span>
<span class="floatRight">只看横屏</span>
</div> </div>
<!-- 具体内容 --> <!-- 具体内容 -->
<!-- 列表样式--大图 -->
<div
v-show="listActive == 1"
v-masonry
class="waterFall"
item-selector=".waterFall-item"
column-width="170"
>
<div
v-masonry-tile
v-for="(item, index) in videoList"
class="waterFall-item"
:key="item.id ? item.id : index"
@click="goDetail(item)"
>
<img :src="index == 1 ? 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">
<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>
<!-- 列表样式--小图 -->
<van-swipe-cell <van-swipe-cell
v-show="listActive == 2"
loading loading
v-for="(item, index) in videoList" v-for="(item, index) in videoList"
:key="item.id ? item.id : index" :key="item.id ? item.id : index"
@@ -60,28 +111,12 @@
<i class="el-icon-delete" />&nbsp;删除 <i class="el-icon-delete" />&nbsp;删除
</div> </div>
</van-popup> </van-popup>

<!-- <van-dialog class="dialog"
v-model="clickItem==item?showTrue:showFalse">
<div @click="closeDialog"><i class="el-icon-edit" />&nbsp;&nbsp;&nbsp;编辑</div>
<div><i class="el-icon-delete" />&nbsp;&nbsp;&nbsp; 删除</div>
</van-dialog> -->
</div> </div>
<!-- 无数据处理 --> <!-- 无数据处理 -->
<div v-if="videoList.length <= 0" class="noWork"> <div v-if="videoList.length <= 0" class="noWork">
您还没有视频作品 您还没有视频作品
</div> </div>
</div> </div>
<!-- 右滑 -->
<!-- <template #right>
<van-button
square
text="删除"
type="danger"
class="delete-button"
@click="goDelete(item.id)"
/>
</template> -->
</van-swipe-cell> </van-swipe-cell>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
@@ -152,7 +187,10 @@ export default {
currentPage: 1, currentPage: 1,
pageSize: 4, pageSize: 4,
prePage: '', prePage: '',
total: ''
total: '',
defaultImg: require('@/assets/img/BG@2x.png'), //默认图片
defaultImg1: require('@/assets/img/bg.png'), //默认图片
listActive: 1 // 显示列表样式
} }
}, },
computed: { computed: {
@@ -218,6 +256,7 @@ export default {
path: '/editModel', path: '/editModel',
query: { query: {
saveID: item.id, saveID: item.id,
id: item.id,
imgUrl: item.id, imgUrl: item.id,
modelId: item.id, modelId: item.id,
mouldSmId: item.id, mouldSmId: item.id,
@@ -351,6 +390,14 @@ export default {
</script> </script>


<style lang="scss" scoped> <style lang="scss" scoped>
.floatRight {
margin-left: 15px;
img {
vertical-align: bottom !important;
margin-top: 2px !important;
color: red;
}
}
.page { .page {
transform: translateX(30%); transform: translateX(30%);
opacity: 0; opacity: 0;
@@ -624,4 +671,69 @@ export default {
height: 100%; height: 100%;
} }
} }

// 瀑布流
.waterFall {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-right: -20px;
width: 100%;
&-item {
// max-width: 355px; //非瀑布流
max-width: 170px;
max-height: 300px;
// background-color: red;
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
// background-color: red;
}
&-mask {
position: absolute;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 5px 8px 5px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
height: 80px;
width: 100%;
color: #f7dcdc;
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&-state {
position: absolute;
top: 0px;
left: 0px;
padding: 7.5px;
border-radius: 0 0 12px 0;
color: #f7dcdc;
background-color: rgba(0, 0, 0, 0.3);
}
&-del {
position: absolute;
top: 0px;
right: 0px;
height: 30px;
width: 30px;
padding: 7.5px;
border-radius: 0 0 0 12px;
background-color: rgba(0, 0, 0, 0.3);
img {
height: 15px;
width: 15px;
}
}
}
}
</style> </style>

+ 8
- 3
src/views/myPage/myPage.vue 查看文件

@@ -30,7 +30,7 @@
v-masonry v-masonry
class="waterFall" class="waterFall"
item-selector=".waterFall-item" item-selector=".waterFall-item"
column-width="175"
column-width="170"
> >
<div <div
v-masonry-tile v-masonry-tile
@@ -391,7 +391,7 @@ export default {


<style lang="scss" scoped> <style lang="scss" scoped>
.floatRight { .floatRight {
margin-left: 20px;
margin-left: 15px;
img { img {
vertical-align: bottom !important; vertical-align: bottom !important;
margin-top: 2px !important; margin-top: 2px !important;
@@ -700,11 +700,16 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
padding: 5px 8px 0;
padding: 5px 8px 5px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
height: 80px; height: 80px;
width: 100%; width: 100%;
color: #f7dcdc; color: #f7dcdc;
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
&-state { &-state {
position: absolute; position: absolute;


+ 8979
- 9219
yarn.lock
文件差異過大導致無法顯示
查看文件


Loading…
取消
儲存