167 lines
4.2 KiB
Vue
167 lines
4.2 KiB
Vue
<template>
|
||
<view v-if="isPop" class="treeActive">
|
||
<template v-if="isTree">
|
||
<view class="pop-bg" style="z-index: 106;" @click.stop="closeTree('isTree')"></view>
|
||
<view class="pop-content o-h" style="padding: 0;z-index: 107;">
|
||
<view class="pr">
|
||
<view class="d-e-c" @click.stop="closeTree('isTree')"
|
||
style="position: absolute;top: 20rpx;z-index: 2;left: 0;right: 20rpx;">
|
||
<u-icon name="close" size="28rpx" color="#999999"></u-icon>
|
||
</view>
|
||
<view class="tc fb f64 p20"
|
||
style="color: #055316;position: absolute;top: 0;z-index: 1;left: 0;right: 0;">
|
||
{{treeModel.actName}}
|
||
</view>
|
||
<image :src="treeModel.cover" mode="widthFix"></image>
|
||
<view class="d-c-c" style="position: absolute;bottom: 60rpx;z-index: 2;left: 0;right: 20rpx;"
|
||
@click="gotoTree">
|
||
<u-icon name="/static/icon/tree/zhongzhi.png" width="221rpx" height="73rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="treePop">
|
||
<view class="pop-bg" style="z-index: 106;" @click.stop="closeTree('treePop')"></view>
|
||
<view class="pop-content" style="z-index: 107;">
|
||
<view class="d-e-c" @click.stop="closeTree('treePop')">
|
||
<u-icon name="close" size="28rpx" color="#999999"></u-icon>
|
||
</view>
|
||
<view>
|
||
<view class="tc p20" style="font-size: 56rpx;">{{$t('w_0283')}}</view>
|
||
<view class="d-c d-b-c mt40">
|
||
<view class="d-c-c mb20" style="width: 60%;">
|
||
<view class="f32">{{$t('MY_TH_2')}}：</view>
|
||
<view class="d-c-c flex-1">
|
||
<view class="d-c-c counter-add reduce" @click="reduceTree()">
|
||
<u-icon name="minus" size="26rpx" color="#666"></u-icon>
|
||
</view>
|
||
<view class="counter-num">{{ treeNum }}</view>
|
||
<view class="d-c-c counter-add" @click="AddTree()">
|
||
<u-icon name="plus" size="26rpx" color="#666"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-c-c" style="width: 60%;">
|
||
<view class="f32 ">{{$t('w_0287')}}：</view>
|
||
<view class="f48 domation flex-1 d-c-c">{{currencyIcon()}}{{treeNum * treeModel.price}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<button class="small-btn"
|
||
@click="gotoPage('/pages/index/tree-recharge?pkBaseId='+treeModel.pkBaseId+'&pkTreeRule='+treeModel.pkTreeRule+'&shopQuantity='+treeNum)">{{$t('w_0035')}}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isTree: false,
|
||
treePop: false,
|
||
treeNum: 0
|
||
}
|
||
},
|
||
props: ['isPop', 'num', 'treeModel'],
|
||
created() {
|
||
console.log('isPop')
|
||
this.isTree = true;
|
||
this.treeNum = this.num * 1;
|
||
console.log(this.treeNum)
|
||
},
|
||
methods: {
|
||
gotoTree() {
|
||
this.isTree = false;
|
||
this.treeNum = this.num * 1;
|
||
this.treePop = true;
|
||
},
|
||
reduceTree() {
|
||
let self = this;
|
||
if (self.treeNum > 1) {
|
||
self.treeNum --;
|
||
}
|
||
},
|
||
AddTree() {
|
||
let self = this;
|
||
self.treeNum ++;
|
||
},
|
||
closeTree(name) {
|
||
this[name] = false;
|
||
this.$emit('close')
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.treeActive {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 105;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.pop-content {
|
||
// position: fixed;
|
||
width: 80%;
|
||
box-sizing: border-box;
|
||
z-index: 102;
|
||
// left: 0;
|
||
// right: 0;
|
||
// top: 10%;
|
||
// margin: auto;
|
||
background-color: #ffffff;
|
||
border-radius: 15rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.counter-add {
|
||
height: 60rpx;
|
||
width: 70rpx;
|
||
flex-shrink: 0;
|
||
font-size: 26rpx;
|
||
background-color: rgb(235, 236, 238);
|
||
color: rgb(50, 50, 51);
|
||
font-weight: bold;
|
||
border-radius: 0 8rpx 8rpx 0;
|
||
}
|
||
|
||
.counter-add.reduce {
|
||
border-radius: 8rpx 0 0 8rpx;
|
||
}
|
||
|
||
.counter-num {
|
||
height: 60rpx;
|
||
min-width: 70rpx;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
color: rgb(50, 50, 51);
|
||
background-color: rgb(235, 236, 238);
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.small-btn {
|
||
margin: 0 auto;
|
||
background: #c8161d;
|
||
color: #fff;
|
||
width: 150px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
border-radius: 20px;
|
||
margin-top: 40px;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
</style>
|