Skip to content

P
pica-professional-exam
提交 ea411015 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

Merge branch 'dev-hotfix-0715' into release 

* dev-hotfix-0715:
  去激活去激活
  去掉样式等
  弹框提示下载新版本
  代码样式问题
  请输入激活码
  代码样式问题
  样式优化等
  样式优化等
  修改样式等
  代码样式问题
  样式优化等
  请输入激活码
  样式去掉等
  样式调整等
  优化样式等
  样式优化等
上级 c3c722bb 7e504864
显示空白字符变更
内嵌 并排
正在显示 包含 219 行增加 和 9 行删除
src/components/cme/change-card copy.vue 0 → 100644
浏览文件 @ ea411015
<template>
<van-popup
v-model="isShow"
@click-overlay="cancle"
position="bottom"
>
<section class="bind-cart-wrapper">
<article class="title">
<span>激活详情</span>
<img @click="cancle" src="../../images/cme/close.png" />
</article>
<article class="tip">
<div class="left">
<img src="../../images/cme/phrase2/info.png" />
<span>激活码用于学习课程，您可以从订单详情或您的实体卡查看激活码。激活码一旦使用，不可退回。</span>
</div>
</article>
<section class="input-wrapper">
<article class="code-new">
<!-- <van-field
maxlength="26"
v-model="activationCode"
label="激活码"
placeholder="请输入激活码"
/> -->
<!-- <span>激活码</span>
<input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> -->
</article>
<span class="error">{{errorMsg}}</span>
<img v-show="!!activationCode" @click="clear" src="../../images/cme/phrase2/close.png" />
</section>
<article class="bottom">
<van-button @click="confirm" size="large" round color="#449284">确认激活</van-button>
</article>
</section>
</van-popup>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: true
},
changeErrorMsg: {
type: String,
default: ''
}
},
data() {
return {
activationCode: '',
errorMsg: ''
};
},
//
watch: {
activationCode(val) {
if(!val) {
this.errorMsg = '请输入激活码';
} else {
this.errorMsg = '';
}
this.$nextTick(() => {
this.activationCode = val.replace(/\s/g,'').replace(/.....(?!$)/g,'$& ');
});
},
changeErrorMsg(val) {
if(val) {
this.errorMsg = val;
}
},
isShow(val) {
this.activationCode = '';
this.errorMsg = '';
}
},
methods: {
cancle() {
this.$emit("cancle");
},
confirm() {
if(!this.activationCode) {
this.errorMsg = '请输入激活码';
return;
};
if(this.activationCode.length != 23) {
this.errorMsg = '请输入正确的激活码';
return;
}
let aCode = JSON.parse(JSON.stringify(this.activationCode));
aCode = aCode.replace(/\s/g,'');
this.$emit("confirm", aCode);
},
clear() {
this.activationCode = ''
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.bind-cart-wrapper {
width: 100%;
display: flex;
line-height: 1;
padding: px2rem(10px) px2rem(15px);
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 1);
// box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.title {
display: flex;
flex-direction: row;
font-size: 18px;
font-weight: 700;
align-items: center;
justify-content: center;
width: 100%;
margin-top: px2rem(20px);
img {
position: relative;
top: 0;
right: px2rem(-120px);
width: px2rem(12px);
height: px2rem(12px);
}
}
.tip {
display: flex;
margin-top: px2rem(40px);
.left {
display: flex;
line-height: 1.2;
font-size: px2rem(12px);
img {
position: relative;
top: px2rem(1px);
width: px2rem(12px);
height: px2rem(12px);
// margin: px2rem(2px) px2rem(4px) 0 px2rem(1px);
}
span {
margin-left: px2rem(4px);
}
color: #979899;
}
}
.input-wrapper {
position: relative;
.code {
display: flex;
flex-direction: column;
padding: px2rem(20px) 0;
padding-top: 0;
}
.error {
position: absolute;
top: px2rem(66px);
left: px2rem(56px);
display: inline-block;
color: red;
font-size: px2rem(12px);
}
img {
position: absolute;
top: px2rem(33px);
right: px2rem(12px);
width: px2rem(15px);
height: px2rem(15px);
}
}
.bottom {
display: flex;
margin-bottom: px2rem(40px);
}
}
</style>
\ No newline at end of file
src/components/cme/change-card.vue
浏览文件 @ ea411015
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
</article> </article>
<article class="tip"> <article class="tip">
<div class="left"> <div class="left">
<img src="../../images/cme/phrase2/info.png" /> <div class="img-wrapper"><img :class="{'android': isAndroid}" src="../../images/cme/phrase2/info.png"/></div>
<span>激活码用于学习课程，您可以从订单详情或您的实体卡查看激活码。激活码一旦使用，不可退回。</span> <span>激活码用于学习课程，您可以从订单详情或您的实体卡查看激活码。激活码一旦使用，不可退回。</span>
</div> </div>
</article> </article>
<section class="input-wrapper"> <section class="input-wrapper">
<article class="code"> <div class="code">
<van-field <van-field
maxlength="26" maxlength="26"
v-model="activationCode" v-model="activationCode"
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
/> />
<!-- <span>激活码</span> <!-- <span>激活码</span>
<input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> --> <input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> -->
</article> <div v-show="!isAndroid" class="cover"></div>
</div>
<span class="error">{{errorMsg}}</span> <span class="error">{{errorMsg}}</span>
<img v-show="!!activationCode" @click="clear" src="../../images/cme/phrase2/close.png" /> <img v-show="!!activationCode" @click="clear" src="../../images/cme/phrase2/close.png" />
</section> </section>
...@@ -51,6 +52,7 @@ export default { ...@@ -51,6 +52,7 @@ export default {
data() { data() {
return { return {
isAndroid: __isAndroid,
activationCode: '', activationCode: '',
errorMsg: '' errorMsg: ''
}; };
...@@ -137,14 +139,23 @@ export default { ...@@ -137,14 +139,23 @@ export default {
display: flex; display: flex;
line-height: 1.2; line-height: 1.2;
font-size: px2rem(12px); font-size: px2rem(12px);
.img-wrapper {
width: px2rem(20px);
// margin-right: px2rem(4px);
img { img {
position: relative; position: relative;
top: px2rem(1px); top: px2rem(1px);
width: px2rem(12px); width: px2rem(12px);
height: px2rem(12px); height: px2rem(12px);
// margin: px2rem(2px) px2rem(4px) 0 px2rem(1px);
} }
img.android {
top: px2rem(1.5px);
width: px2rem(11.5px);
}
}
span { span {
display: inline-block;
margin-left: px2rem(4px); margin-left: px2rem(4px);
} }
color: #979899; color: #979899;
...@@ -153,10 +164,21 @@ export default { ...@@ -153,10 +164,21 @@ export default {
.input-wrapper { .input-wrapper {
position: relative; position: relative;
.code { .code {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: px2rem(20px) 0; padding: px2rem(20px) 0;
padding-top: 0; padding-top: 0;
.cover {
width: px2rem(286px);
position: absolute;
top: px2rem(21.5px);
z-index: 1000;
border-top: px2rem(4px) solid #fff;
margin-left: px2rem(57px);
margin-right: px2rem(1px);
border-radius: px2rem(4px);
}
} }
.error { .error {
position: absolute; position: absolute;
...@@ -166,6 +188,7 @@ export default { ...@@ -166,6 +188,7 @@ export default {
color: red; color: red;
font-size: px2rem(12px); font-size: px2rem(12px);
} }
img { img {
position: absolute; position: absolute;
top: px2rem(33px); top: px2rem(33px);
......
src/style/global.scss
浏览文件 @ ea411015
...@@ -161,3 +161,7 @@ ...@@ -161,3 +161,7 @@
box-shadow: inset 0 0 0 rgba(0,0,0,0); box-shadow: inset 0 0 0 rgba(0,0,0,0);
background-color: #fff; background-color: #fff;
} }
.bind-cart-wrapper .van-cell:not(:last-child)::after {
border: none !important;
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或