forked from TALL/check-work
7 changed files with 525 additions and 22 deletions
@ -0,0 +1,229 @@ |
|||
<template> |
|||
<div> |
|||
<a-button type="primary" @click="showModal" style="height: 100%; width: 100%" :style="value === 1 ? 'font-size:30px' : ''"> |
|||
{{ str }} |
|||
</a-button> |
|||
<a-modal width="50%" :title="title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel"> |
|||
<p v-show="value !== 1" style="text-align: center"> |
|||
<a-radio-group v-model="value" style="margin-bottom: 20px !important"> |
|||
<a-radio :value="2" style="margin-right: 100px"> 实体空间 </a-radio> |
|||
<a-radio :value="3"> 虚拟空间 </a-radio> |
|||
</a-radio-group> |
|||
</p> |
|||
<a-form :form="form"> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称"> |
|||
<a-input v-model.trim="platform.companyName" placeholder="请输入公司名称..." /> |
|||
</a-form-item> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required> |
|||
<a-input v-model.trim="platform.manName" placeholder="请输入联系人..." /> |
|||
</a-form-item> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required> |
|||
<a-input @change="changePhone" type="tel" v-decorator="['tel', { rules: phoneRules }]" placeholder="请输入联系电话.." /> |
|||
</a-form-item> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required> |
|||
<div class="d-flex flex-nowrap"> |
|||
<a-input placeholder="图片验证码" type="number" v-model="codeNum" /> |
|||
<img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" /> |
|||
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button> |
|||
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> --> |
|||
</div> |
|||
</a-form-item> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required> |
|||
<div class="d-flex flex-nowrap"> |
|||
<a-input placeholder="请输入验证码" type="number" v-model="platform.code" /> |
|||
<a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button> |
|||
<a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else> |
|||
获取验证码 |
|||
</a-button> |
|||
</div> |
|||
</a-form-item> |
|||
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="合作信息简述" required> |
|||
<a-textarea v-model.trim="platform.describe" style="height: 120px" placeholder="请输入合作信息简述..." /> |
|||
</a-form-item> |
|||
</a-form> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapActions } from 'vuex'; |
|||
import { JoinPlatform } from 'config/api'; |
|||
const formItemLayout = { |
|||
labelCol: { span: 5 }, |
|||
wrapperCol: { span: 18 }, |
|||
}; |
|||
const formTailLayout = { |
|||
labelCol: { span: 6 }, |
|||
wrapperCol: { span: 18, offset: 6 }, |
|||
}; |
|||
export default { |
|||
name: 'AddModel', |
|||
props: { |
|||
value: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
form: this.$form.createForm(this, { name: 'submit' }), |
|||
visible: false, |
|||
title: '申请加入', |
|||
str: '申请加入', |
|||
formItemLayout, |
|||
formTailLayout, |
|||
confirmLoading: false, |
|||
platform: { |
|||
companyName: '', // 公司名称 |
|||
manName: '', // 联系人 |
|||
tel: '', // 联系电话 |
|||
describe: '', // 项目描述 |
|||
code: '', // 验证码 |
|||
isTel: false, |
|||
}, |
|||
codeRules: [ |
|||
{ required: true, message: '请输入验证码' }, |
|||
{ min: 4, max: 4, message: '请输入4位短信验证码' }, |
|||
], |
|||
codeNum: '', |
|||
showInterval: false, |
|||
codeTimer: null, |
|||
interval: 120, // 验证码有效时间倒计时 |
|||
phoneRules: [ |
|||
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' }, |
|||
], |
|||
}; |
|||
}, |
|||
computed: mapState('user', ['picCode']), |
|||
async created() { |
|||
this.sendPicCode(); |
|||
await this.getUserSer(); |
|||
if (this.userSer) { |
|||
if (this.userSer.name) { |
|||
this.platform.manName = this.userSer.name; |
|||
} |
|||
if (this.userSer.phone) { |
|||
this.platform.tel = this.userSer.phone; |
|||
} |
|||
if (this.userSer.companyName) { |
|||
this.platform.companyName = this.userSer.companyName; |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions('user', ['sendCode', 'sendPicCode']), |
|||
...mapActions('home', ['getUserSer']), |
|||
// 显示表单输入框 |
|||
showModal() { |
|||
this.visible = true; |
|||
}, |
|||
// 取消显示 |
|||
handleCancel(e) { |
|||
this.visible = false; |
|||
}, |
|||
// 验证电话 |
|||
changePhone(e) { |
|||
this.platform.tel = e.target.value; |
|||
this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel); |
|||
}, |
|||
// 点击确定 |
|||
handleOk() { |
|||
if (!this.platform.manName) { |
|||
this.$message.error('请输入联系人'); |
|||
} else if (!this.platform.tel) { |
|||
this.$message.error('请输入联系电话'); |
|||
} else if (!this.platform.code) { |
|||
this.$message.error('请输入验证码'); |
|||
} else if (!this.platform.describe) { |
|||
this.$message.error('请输入项目信息简述'); |
|||
} else { |
|||
if (this.platform.isTel) { |
|||
this.subMitAdd(); |
|||
} else { |
|||
this.$message.error('请输入正确的联系电话'); |
|||
} |
|||
} |
|||
}, |
|||
// 加入接口 |
|||
async subMitAdd() { |
|||
this.confirmLoading = true; |
|||
try { |
|||
const params = { |
|||
param: { |
|||
code: this.platform.code, |
|||
companyName: this.platform.companyName, |
|||
contactName: this.platform.manName, |
|||
contactPhone: this.platform.tel, |
|||
description: this.platform.describe, |
|||
type: this.value, |
|||
}, |
|||
}; |
|||
const res = await JoinPlatform(params); |
|||
const { code, msg, data } = res.data; |
|||
if (code === 200) { |
|||
this.$message.success('申请成功'); |
|||
this.visible = false; |
|||
this.confirmLoading = false; |
|||
for (let key in this.platform) { |
|||
this.platform[key] = ''; |
|||
} |
|||
this.platform.isTel = false; |
|||
} else { |
|||
throw msg; |
|||
this.confirmLoading = false; |
|||
} |
|||
} catch (error) { |
|||
this.$message.error(error); |
|||
this.confirmLoading = false; |
|||
} |
|||
}, |
|||
// 获取验证码 |
|||
async getCode() { |
|||
console.log(111); |
|||
try { |
|||
const params = { |
|||
phone: this.platform.tel, |
|||
verificationCodeId: this.picCode.verificationCodeId, |
|||
verificationCodeValue: this.codeNum, |
|||
}; |
|||
await this.sendCode(params); |
|||
this.getCodeInterval(); |
|||
} catch (error) { |
|||
// throw new Error(`SignIn.vue method getCode: ${error}`); |
|||
console.log(error); |
|||
} |
|||
}, |
|||
|
|||
// 验证码倒计时 |
|||
getCodeInterval() { |
|||
this.showInterval = true; |
|||
this.codeTimer = setInterval(() => { |
|||
if (this.interval === 0) { |
|||
clearInterval(this.codeTimer); |
|||
this.codeTimer = null; |
|||
this.showInterval = false; |
|||
this.interval = 120; |
|||
return; |
|||
} |
|||
this.interval = this.interval - 1; |
|||
}, 1000); |
|||
}, |
|||
|
|||
// 刷新验证码 |
|||
changePicCode() { |
|||
this.sendPicCode(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.must-color { |
|||
color: red; |
|||
} |
|||
|
|||
.code_img { |
|||
height: 32px; |
|||
width: 120px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<div class="transition_test"> |
|||
<h2>过渡效果</h2> |
|||
|
|||
<button @click="show = !show">click</button> |
|||
<!-- <transition name="slide-fade"> |
|||
<div v-if="show" class="circle"></div> |
|||
</transition> --> |
|||
<div> |
|||
图片放大效果: |
|||
<transition name="img-fade"> |
|||
<img |
|||
class="bigimg" |
|||
v-if="show" |
|||
src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg" |
|||
alt="" |
|||
/> |
|||
</transition> |
|||
</div> |
|||
<div class="shop_cart"> |
|||
加入购物车动画(css实现): |
|||
<div class="add"> |
|||
<button @click="addShopCart">add</button> |
|||
<transition name="shop_cart"> |
|||
<img |
|||
class="add_img" |
|||
v-if="addShow" |
|||
src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg" |
|||
alt="" |
|||
/> |
|||
</transition> |
|||
</div> |
|||
<div class="cart"> |
|||
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg" alt="" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="shop_cart"> |
|||
加入购物车动画(JavaScript钩子函数实现): |
|||
<div class="add"> |
|||
<button @click="addShopCart1">add</button> |
|||
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"> |
|||
<img |
|||
class="add_img_js" |
|||
v-if="addShow1" |
|||
src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg" |
|||
alt="" |
|||
/> |
|||
</transition> |
|||
</div> |
|||
<div class="cart"> |
|||
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1672824262,2727256094&fm=111&gp=0.jpg" alt="" /> |
|||
</div> |
|||
</div> |
|||
<!-- 动画数组效果 --> |
|||
<ul class="group_list"> |
|||
<button @click="addItem">addItem</button> |
|||
<button @click="removeItem">removeItem</button> |
|||
<transition-group name="list"> |
|||
<li class="group_item" v-for="item in list" :key="item">{{ item }}</li> |
|||
</transition-group> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'myTransition', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
show: false, |
|||
addShow: false, |
|||
addShow1: false, |
|||
list: [1, 2, 3], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
|
|||
methods: { |
|||
addShopCart() { |
|||
this.addShow = true; |
|||
setTimeout(() => { |
|||
this.addShow = false; |
|||
}, 1000); |
|||
}, |
|||
addShopCart1() { |
|||
this.addShow1 = true; |
|||
}, |
|||
|
|||
// 动画钩子函数 |
|||
// 进入前状态 |
|||
beforeEnter(el) { |
|||
el.style.left = '-20px'; |
|||
el.style.top = '-15px'; |
|||
el.style.transform = 'scale(1)'; |
|||
}, |
|||
// 进入中 |
|||
enter(el, done) { |
|||
// 需要调用元素的offset操作,才有过渡的效果,否则会马上实现过渡 |
|||
el.offsetWidth; |
|||
el.style.left = '600px'; |
|||
el.style.top = '-160px'; |
|||
el.style.transform = 'scale(.5)'; |
|||
done(); |
|||
}, |
|||
// 进入后 |
|||
afterEnter() { |
|||
this.addShow1 = false; |
|||
}, |
|||
|
|||
// 新增 |
|||
addItem() { |
|||
this.list.push(this.list.length + 1); |
|||
}, |
|||
// 删除 |
|||
removeItem() { |
|||
if (this.list.length > 1) { |
|||
this.list.pop(); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.transition_test { |
|||
text-align: left; |
|||
padding-bottom: 300px; |
|||
} |
|||
.circle { |
|||
width: 100px; |
|||
height: 100px; |
|||
border-radius: 50%; |
|||
background-color: aquamarine; |
|||
} |
|||
.slide-fade-enter-active, |
|||
.slide-fade-leave-active { |
|||
transition: all 0.5s ease-out; |
|||
} |
|||
.slide-fade-enter, |
|||
.slide-fade-leave-to { |
|||
/* transform: translateX(500px); */ |
|||
opacity: 0; |
|||
} |
|||
.bigimg { |
|||
width: 300px; |
|||
} |
|||
|
|||
.img-fade-enter-active { |
|||
transition: all 1s ease-out; |
|||
} |
|||
.img-fade-enter { |
|||
transform: scale(0.5); |
|||
/* width: 50px; */ |
|||
} |
|||
|
|||
.shop_cart { |
|||
padding: 20px; |
|||
} |
|||
.shop_cart .add { |
|||
position: relative; |
|||
margin-top: 100px; |
|||
width: 500px; |
|||
display: inline-block; |
|||
} |
|||
.shop_cart .add button { |
|||
position: absolute; |
|||
z-index: 99; |
|||
} |
|||
.shop_cart .cart { |
|||
width: 300px; |
|||
display: inline-block; |
|||
} |
|||
.shop_cart .cart img { |
|||
width: 100%; |
|||
} |
|||
.shop_cart .add_img { |
|||
width: 100px; |
|||
position: absolute; |
|||
left: 600px; |
|||
top: -160px; |
|||
} |
|||
/* 动画效果实现 */ |
|||
/* @keyframes bounce-in { |
|||
0% { |
|||
transform: scale(1); |
|||
transform: translate(-610px, 100px); |
|||
} |
|||
100% { |
|||
transform: scale(.5); |
|||
transform: translate(0px, 0px); |
|||
} |
|||
} |
|||
.shop_cart-enter-active { |
|||
animation: bounce-in 1s; |
|||
} */ |
|||
|
|||
/* CSS类名实现 */ |
|||
.shop_cart-enter-active { |
|||
transition: all 1s ease-out; |
|||
} |
|||
.shop_cart-enter { |
|||
opacity: 0; |
|||
transform: scale(0.5); |
|||
transform: translate(-610px, 100px); |
|||
} |
|||
.shop_cart .add_img_js { |
|||
width: 100px; |
|||
position: absolute; |
|||
left: 600px; |
|||
top: -160px; |
|||
transition: all 1s; |
|||
} |
|||
.group_list { |
|||
padding: 30px; |
|||
} |
|||
.group_list .group_item { |
|||
width: 200px; |
|||
height: 100px; |
|||
border: 1px solid orangered; |
|||
margin: 10px; |
|||
} |
|||
.list-enter-active, |
|||
.list-leave-active { |
|||
transition: all 0.8s; |
|||
} |
|||
.list-enter, |
|||
.list-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(40px); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue