<template> <u-popup v-model="show" mode="bottom" closeable border-radius="14" safe-area-inset-bottom :duration="100"> <!-- 内容列表 --> <view class="content-wrapper"> <tabs :current="active" @change="changeTabs" height="100" :is-scroll="false" width="400rpx" :showBar="false" :async="isAsync"> <tab name="宝贝"> <goods @change="handleGoods" v-model="goodsData" :i="0" :index="active"></goods> </tab> <tab name="店铺"> <shop @change="handleShop" v-model="shopData" :i="1" :index="active"></shop> </tab> </tabs> </view> <!-- 底部 --> <view class="recommend-footer flex"> <button class="white br60 bg-primary btn" @click="confirm">确认</button> </view> </u-popup> </template> <script> import Goods from "./goods.vue" import Shop from "./shop.vue" export default { name: "recommend", components: { Goods, Shop }, props: { value: { type: Boolean }, goods: { type: [Object, Array] }, shop: { type: [Object, Array] } }, data() { return { list: [{ name: '宝贝' }, { name: '店铺' }], active: 0, goodsData: [], shopData: [], isAsync: true // 是否异步 } }, computed: { // 弹窗Popup显示状态 show: { get: function() { return this.value }, set: function(value) { this.$emit('input', value) } } }, watch: { goods(val) { this.active = 0; this.goodsData = val; console.log(this.goodsData) }, shop(val) { this.active = 1; this.shopData = val } }, methods: { changeTabs(event) { if(this.goodsData.length!=0 || this.shopData.length!=0) return this.$toast({title: '不能同时选择宝贝/店铺'}) this.isAsync = false this.active = event this.isAsync = true }, handleGoods(event) { this.goodsData = event; }, handleShop(event) { this.shopData = event; }, confirm() { if( this.active == 0 ) { this.$emit('change', { type: 0, data: this.goodsData }) } else { this.$emit('change', { type: 1, data: this.shopData }) } this.$emit('input', false) } } } </script> <style lang="scss"> .bb { border-bottom: 1px solid $-color-body; } .content-wrapper { height: 900rpx; } .recommend-footer { width: 100%; height: 100rpx; padding: 0 30rpx; box-shadow: 0 -4rpx 10rpx rgba(#000000, .1); .btn { width: 100%; height: 82rpx; font-size: 32rpx; line-height: 82rpx; } } </style>