|
@@ -1,256 +1,291 @@
|
|
|
- <template>
|
|
|
- <view>
|
|
|
- <view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'tui-alert-hide']" @touchmove.stop.prevent="discard">
|
|
|
- <template v-if="beansType == 12">
|
|
|
- <view class="tui-alert-image">
|
|
|
- <image :src="bgImagePath" mode=""></image>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="tui-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
|
|
|
- <view class="tui-alert-content-text">恭喜您获得采美豆!</view>
|
|
|
- <view class="tui-alert-content-bean">
|
|
|
- <view class="tui-alert-main">
|
|
|
- <image class="tui-alert-icon" src="https://static.caimei365.com/app/img/icon/bean-icon@2x.png" mode=""></image>
|
|
|
- <view class="tui-alert-text">
|
|
|
- <text class="icon-add">+</text>
|
|
|
- <text class="icon-text">{{ beanNumber }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="tui-alert-content-tips">
|
|
|
- <view class="tips">采美豆可抵扣运费</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <text class="iconfont icon-2guanbi" :style="{bottom :beansType == 12 ? '25%' : '10%'}" @click.stop="handleClickCancel"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- name:'tuiAlert',
|
|
|
- props: {
|
|
|
- //控制显示
|
|
|
- show: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- //提示信息字体大小
|
|
|
- size: {
|
|
|
- type: Number,
|
|
|
- default: 30
|
|
|
- },
|
|
|
- //提示信息字体颜色
|
|
|
- color: {
|
|
|
- type: String,
|
|
|
- default: '#333'
|
|
|
- },
|
|
|
- //按钮字体颜色
|
|
|
- btnColor: {
|
|
|
- type: String,
|
|
|
- default: '#EB0909'
|
|
|
- },
|
|
|
- btnText:{
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- beansType:{//根据类型设置背景图片:1注册机构,2升级资质机构,3个人机构修改资料,4资质机构修改资料,5下单成功,6线上支付成功,7确认收货成功
|
|
|
- type: Number,
|
|
|
- default: 1
|
|
|
- },
|
|
|
- beanNumber:{//采美豆显示数量
|
|
|
- type:Number,
|
|
|
- default:100
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return{
|
|
|
- bgImagePath:'https://static.caimei365.com/app/img/icon/bean-icon-2@2x.png',
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.handInitType(this.beansType)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handInitType(type){
|
|
|
- this.bgImagePath = `https://static.caimei365.com/app/img/icon/bean-icon-${type}@2x.png`
|
|
|
- },
|
|
|
- handleClick(e) {
|
|
|
- console.log(e)
|
|
|
- if (!this.show) return
|
|
|
- this.$emit('click',false)
|
|
|
- },
|
|
|
- handleClickCancel() {
|
|
|
- this.$emit('cancel',false)
|
|
|
- },
|
|
|
- discard(){
|
|
|
- //丢弃
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .tui-alert-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 100%;
|
|
|
- opacity: 0;
|
|
|
- background: rgba(51,51,51,0.7);
|
|
|
- z-index: 99999;
|
|
|
- }
|
|
|
- .tui-alert-show {
|
|
|
- top: 0;
|
|
|
- opacity: 1;
|
|
|
- // animation:rundtop 0.5s;
|
|
|
- }
|
|
|
- .tui-alert-hide{
|
|
|
- top: 100%;
|
|
|
- opacity: 0;
|
|
|
- // animation:rundbottom 0.5s;
|
|
|
- }
|
|
|
- .tui-alert-image{
|
|
|
- width: 626rpx;
|
|
|
- height: 532rpx;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- image{
|
|
|
- width: 626rpx;
|
|
|
- height: 532rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-alert-content{
|
|
|
- width: 580rpx;
|
|
|
- height: 790rpx;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-top: 485rpx;
|
|
|
- background-size: cover;
|
|
|
- .tui-alert-content-text{
|
|
|
- height: 118rpx;
|
|
|
- line-height: 118rpx;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- font-size: $font-size-36;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .tui-alert-content-bean{
|
|
|
- width: 100%;
|
|
|
- height: 74rpx;
|
|
|
- line-height: 74rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .tui-alert-main{
|
|
|
- .tui-alert-icon{
|
|
|
- width: 94rpx;
|
|
|
- height: 74rpx;
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .tui-alert-text{
|
|
|
- color: $color-system;
|
|
|
- line-height: 74rpx;
|
|
|
- float: left;
|
|
|
- .icon-add{
|
|
|
- font-size:40rpx;
|
|
|
- margin:0 15rpx;
|
|
|
- }
|
|
|
- .icon-text{
|
|
|
- font-weight: bold;
|
|
|
- font-size:48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tui-alert-content-tips{
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- margin-top: 41rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .tips{
|
|
|
- width: 224rpx;
|
|
|
- height: 40rpx;
|
|
|
- background-color: rgba(226, 91, 28, 0.1);
|
|
|
- border-radius: 36rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .icon-2guanbi{
|
|
|
- display: block;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- line-height: 100rpx;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- position: absolute;
|
|
|
- bottom: 13%;
|
|
|
- left: 50%;
|
|
|
- font-size: 58rpx;
|
|
|
- margin-left: -50rpx;
|
|
|
- }
|
|
|
- .tui-alert-mask-show {
|
|
|
- visibility: visible;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- .tui-alert-btn {
|
|
|
- width: 100%;
|
|
|
- height: 90rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- }
|
|
|
- .tui-alert-btn-hover {
|
|
|
- background-color: #f7f7f7;
|
|
|
- }
|
|
|
- .tui-alert-btn::before {
|
|
|
- width: 100%;
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- border-top: 1rpx solid #E0E0E0;
|
|
|
- -webkit-transform: scaleY(0.5);
|
|
|
- transform: scaleY(0.5);
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- @keyframes rundtop{
|
|
|
- 0%{top: 100%;opacity: 0;}
|
|
|
- 100%{top:0;opacity: 1;}
|
|
|
- }
|
|
|
- @keyframes rundbottom{
|
|
|
- 0%{top: 0;opacity: 1;}
|
|
|
- 100%{top:100%;opacity: 0;}
|
|
|
- }
|
|
|
-</style>
|
|
|
+ <template>
|
|
|
+ <view>
|
|
|
+ <view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'tui-alert-hide']"
|
|
|
+ @touchmove.stop.prevent="discard" @click.stop="handleClickCancel">
|
|
|
+ <template v-if="beansType == 12">
|
|
|
+ <view class="tui-alert-image">
|
|
|
+ <image :src="bgImagePath" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="tui-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
|
|
|
+ <view class="tui-alert-content-text">恭喜您获得采美豆!</view>
|
|
|
+ <view class="tui-alert-content-bean">
|
|
|
+ <view class="tui-alert-main">
|
|
|
+ <image class="tui-alert-icon"
|
|
|
+ src="https://static.caimei365.com/app/img/icon/bean-icon@2x.png" mode=""></image>
|
|
|
+ <view class="tui-alert-text">
|
|
|
+ <text class="icon-add">+</text>
|
|
|
+ <text class="icon-text">{{ beanNumber }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-alert-content-tips">
|
|
|
+ <view class="tips">采美豆可抵扣运费</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ export default {
|
|
|
+ name: 'tuiAlert',
|
|
|
+ props: {
|
|
|
+ //控制显示
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ //提示信息字体大小
|
|
|
+ size: {
|
|
|
+ type: Number,
|
|
|
+ default: 30
|
|
|
+ },
|
|
|
+ //提示信息字体颜色
|
|
|
+ color: {
|
|
|
+ type: String,
|
|
|
+ default: '#333'
|
|
|
+ },
|
|
|
+ //按钮字体颜色
|
|
|
+ btnColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#EB0909'
|
|
|
+ },
|
|
|
+ btnText: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ beansType: { //根据类型设置背景图片:1注册机构,2升级资质机构,3个人机构修改资料,4资质机构修改资料,5下单成功,6线上支付成功,7确认收货成功
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ beanNumber: { //采美豆显示数量
|
|
|
+ type: Number,
|
|
|
+ default: 100
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bgImagePath: 'https://static.caimei365.com/app/img/icon/bean-icon-2@2x.png',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.handInitType(this.beansType)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handInitType(type) {
|
|
|
+ this.bgImagePath = `https://static.caimei365.com/app/img/icon/bean-icon-${type}@2x.png`
|
|
|
+ },
|
|
|
+ handleClick(e) {
|
|
|
+ console.log(e)
|
|
|
+ if (!this.show) return
|
|
|
+ this.$emit('click', false)
|
|
|
+ },
|
|
|
+ handleClickCancel() {
|
|
|
+ this.$emit('cancel', false)
|
|
|
+ },
|
|
|
+ discard() {
|
|
|
+ //丢弃
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss">
|
|
|
+ .tui-alert-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ background: rgba(51, 51, 51, 0.7);
|
|
|
+ z-index: 99999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-show {
|
|
|
+ top: 0;
|
|
|
+ opacity: 1;
|
|
|
+ // animation:rundtop 0.5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-hide {
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ // animation:rundbottom 0.5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-image {
|
|
|
+ width: 626rpx;
|
|
|
+ height: 532rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 626rpx;
|
|
|
+ height: 532rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-content {
|
|
|
+ width: 580rpx;
|
|
|
+ height: 790rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 485rpx;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ .tui-alert-content-text {
|
|
|
+ height: 118rpx;
|
|
|
+ line-height: 118rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-content-bean {
|
|
|
+ width: 100%;
|
|
|
+ height: 74rpx;
|
|
|
+ line-height: 74rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tui-alert-main {
|
|
|
+ .tui-alert-icon {
|
|
|
+ width: 94rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-text {
|
|
|
+ color: $color-system;
|
|
|
+ line-height: 74rpx;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ .icon-add {
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin: 0 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-text {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-content-tips {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 41rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ width: 224rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: rgba(226, 91, 28, 0.1);
|
|
|
+ border-radius: 36rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-2guanbi {
|
|
|
+ display: block;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 13%;
|
|
|
+ left: 50%;
|
|
|
+ font-size: 58rpx;
|
|
|
+ margin-left: -50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-mask-show {
|
|
|
+ visibility: visible;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-btn-hover {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tui-alert-btn::before {
|
|
|
+ width: 100%;
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border-top: 1rpx solid #E0E0E0;
|
|
|
+ -webkit-transform: scaleY(0.5);
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rundtop {
|
|
|
+ 0% {
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ top: 0;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rundbottom {
|
|
|
+ 0% {
|
|
|
+ top: 0;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|