202 lines
3.7 KiB
Vue
202 lines
3.7 KiB
Vue
<template>
|
|
<view>
|
|
<u-popup key="1" :show="pricespop" :round="10" @close="closePup">
|
|
<view class="proListPrice" v-if="proPriceList.length > 0">
|
|
<view class="title">
|
|
请选择
|
|
</view>
|
|
<view class="list">
|
|
<view :class="['item',curProId == item.productId ? 'active' : '']"
|
|
v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
|
|
{{item.productName}} - ￥{{item.price}}
|
|
</view>
|
|
</view>
|
|
<view class="tbn flexbox" style="padding-bottom: 20px;">
|
|
<view class="saveBtnss buybtn flexbox" @click="oprate('buy')">
|
|
<u-icon name="bag" color="#fff" size="28"></u-icon>
|
|
<text>立即购买</text>
|
|
</view>
|
|
<!-- <view class="saveBtnss gouwuche flexbox" @click="oprate('gouwuche')">
|
|
<uni-icons type="cart" size="28" style="color: #666;"></uni-icons>
|
|
<text>加入购物车</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"buyPup",
|
|
props:['proPriceList'],
|
|
data() {
|
|
return {
|
|
pricespop:true,
|
|
curProId:null,
|
|
curPro:{}
|
|
};
|
|
},methods:{
|
|
closePup() {
|
|
this.pricespop = false
|
|
this.$emit('closePup')
|
|
|
|
},
|
|
choosePrice(item) {
|
|
console.log(item, 'choosePrice')
|
|
this.curProId = item.productId
|
|
this.curPro = item
|
|
},
|
|
oprate(val){
|
|
if(!this.curProId){
|
|
uni.showToast({
|
|
title:'请选择您的课程',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
if(val=='buy'){
|
|
console.log('直接购买');
|
|
this.$emit('oprate',{name:val,item:this.curPro})
|
|
}else if(val == 'gouwuche'){
|
|
console.log('加入购物车');
|
|
this.$emit('oprate',{name:val,item:this.curPro})
|
|
}
|
|
this.closePup()
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/style/mixin.scss';
|
|
.flexbox {
|
|
display: flex;
|
|
}
|
|
.saveBtn {
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
background-color: #00d8df;
|
|
// width: 46%;
|
|
overflow: hidden;
|
|
border-radius: 30rpx;
|
|
|
|
text {
|
|
padding-left: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.vipBtn {
|
|
@include theme("vipbtnbg");
|
|
border-radius: 100rpx;
|
|
justify-content: center;
|
|
width: 150px;
|
|
color: #fff;
|
|
margin: 10rpx auto;
|
|
}
|
|
|
|
.buyBox {
|
|
// position: fixed;
|
|
// z-index: 2;
|
|
// bottom: 100rpx;
|
|
// left: 0;
|
|
@include pleft_right(4px);
|
|
// @include mshadow(10px, 1);
|
|
padding: 20rpx 10rpx;
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
flex-wrap: wrap;
|
|
background-image: linear-gradient(60deg, #e0e9f6 0%,#ece6fa 30%,#d7e8f0 60%, #fff 100%);
|
|
// background: rgba(255, 255, 255, 0.9);
|
|
|
|
.item {
|
|
width: 100%;
|
|
text-align: center; line-height: 70rpx !important;
|
|
|
|
}
|
|
|
|
.tbn {
|
|
align-items: center;
|
|
}
|
|
|
|
.buybtn {
|
|
color: #fff;
|
|
}
|
|
}
|
|
.proListPrice {
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.list {
|
|
padding: 0 10px;
|
|
padding-bottom: 20rpx;
|
|
|
|
.item {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
padding-top:20rpx ;
|
|
padding-bottom:20rpx ;
|
|
line-height:40rpx;
|
|
border-radius: 50rpx;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.item.active {
|
|
color: $themeColor;
|
|
border: 1px solid $themeColor;
|
|
}
|
|
|
|
.item:last-child {
|
|
// border-bottom: none
|
|
}
|
|
}
|
|
|
|
.tbn {
|
|
justify-content: center;
|
|
}
|
|
|
|
.buybtn { padding: 0 20rpx;
|
|
background-color: #00d8df;
|
|
margin: 0;
|
|
margin-right: 20rpx;
|
|
|
|
text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.saveBtnss {
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
|
|
// width: 46%;
|
|
overflow: hidden;
|
|
border-radius: 50rpx;
|
|
|
|
text {
|
|
padding-left: 10rpx;
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.gouwuche {
|
|
border: 1px solid #666;
|
|
padding-right: 20rpx;
|
|
|
|
text {
|
|
// color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style> |