forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.0 KiB
74 lines
2.0 KiB
4 years ago
|
<template>
|
||
|
|
<view
|
||
|
|
class="absolute shadow-2xl shadow-2xl"
|
||
|
|
style="z-index: 1000"
|
||
|
|
:style="{
|
||
|
|
left: client.left + 'px',
|
||
|
|
top: height - client.top > 110 ? client.top + 'px' : '',
|
||
|
|
bottom: height - client.top > 110 ? '' : '10px',
|
||
|
|
}"
|
||
|
|
id="u-icard"
|
||
|
|
>
|
||
|
|
<u-card
|
||
|
|
:title="title"
|
||
|
|
style="width: 500rpx; margin: 0 !important"
|
||
|
|
v-if="showTips"
|
||
|
|
titleSize="28"
|
||
|
|
:headStyle="headStyle"
|
||
|
|
:footStyle="footStyle"
|
||
|
|
>
|
||
|
|
<view class="" slot="body"> {{ tipsContent }} </view>
|
||
|
|
<view class="flex ustify-between" slot="foot">
|
||
|
|
<u-button size="mini" @tap="clickCancel">取消</u-button>
|
||
|
|
<u-button v-if="status === 1" size="mini" @tap="clickCancel">暂停</u-button>
|
||
|
|
<u-button v-if="status === 2" size="mini" @tap="clickCancel">继续</u-button>
|
||
|
|
<u-button v-if="status === 1 || status === 2" size="mini" @tap="clickCancel">重新开始</u-button>
|
||
|
|
<u-button v-if="status === 1 || status === 2" type="primary" size="mini" @tap="clickCancel">结束</u-button>
|
||
|
|
<u-button v-if="status === 0 || status === 3" type="primary" size="mini" @tap="clickOk">确定</u-button>
|
||
|
|
</view>
|
||
|
|
</u-card>
|
||
|
|
<u-toast ref="uToast" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState, mapMutations } from 'vuex';
|
||
|
|
export default {
|
||
|
|
name: 'Tips',
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
default: '提示',
|
||
|
|
type: String,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: mapState('home', ['client', 'showTips', 'status', 'tipsContent']),
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
footStyle: { padding: '4px 15px' },
|
||
|
|
headStyle: { paddingTop: '8px', paddingBottom: '8px' },
|
||
|
|
height: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.height = window.screen.height;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapMutations('home', ['setTips']),
|
||
|
|
clickOk() {
|
||
|
|
this.$refs.uToast.show({
|
||
|
|
title: '点击了确定',
|
||
|
|
type: 'success',
|
||
|
|
});
|
||
|
|
this.setTips(false);
|
||
|
|
},
|
||
|
|
clickCancel() {
|
||
|
|
this.$refs.uToast.show({
|
||
|
|
title: '点击了取消',
|
||
|
|
type: 'error',
|
||
|
|
});
|
||
|
|
this.setTips(false);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|