78 lines
1.3 KiB
Vue
78 lines
1.3 KiB
Vue
<template>
|
|
<view
|
|
class="button-group"
|
|
>
|
|
<button
|
|
v-if="!pickMode"
|
|
class="download-btn btn"
|
|
type="default"
|
|
@click="openPickMode"
|
|
>
|
|
<text class="text">下载</text>
|
|
</button>
|
|
<template
|
|
v-else>
|
|
<button
|
|
class="confirm-btn btn"
|
|
type="default"
|
|
@click="confirm"
|
|
>
|
|
<text class="text">确认下载</text>
|
|
</button>
|
|
<button
|
|
class="cancel-btn btn"
|
|
type="default"
|
|
@click="cancel"
|
|
>
|
|
<text class="text">取消</text>
|
|
</button>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
pickMode: {
|
|
type: Boolean
|
|
}
|
|
},
|
|
methods: {
|
|
openPickMode () {
|
|
this.$emit('changePickMode', true);
|
|
},
|
|
confirm () {
|
|
this.$emit('downloadConfirm');
|
|
},
|
|
cancel () {
|
|
this.$emit('changePickMode', false);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.button-group
|
|
padding: 30rpx 0
|
|
flex-direction: row
|
|
justify-content: center
|
|
.btn
|
|
width: 610rpx
|
|
height: 80rpx
|
|
border-radius: 49rpx
|
|
border: 2rpx solid #FF920A;
|
|
.text
|
|
font-size: 30rpx;
|
|
color: #FF920A;
|
|
&.download-btn
|
|
width: 610rpx
|
|
&.confirm-btn
|
|
width: 290rpx
|
|
&.cancel-btn
|
|
margin-left: 30rpx
|
|
width: 290rpx
|
|
background: #F3F4F5
|
|
border: 2rpx solid transparent;
|
|
.text
|
|
color: #333
|
|
</style> |