xiongmao/pages/my/information-material/information-material.vue

<!-- 资讯素材 -->
<template>
	<view class="wrap">

		<view class="header">
			<view class="tab-list">
				<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
					:key="index" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>


		<view class="list">
			<view class="item">
				<image src="../../../static/img-4.png" class="item-img" mode="aspectFill"></image>
				<view class="row-between">
					<view class="name">焦糖玛奇朵</view>
					<button type="default" class="btn" @click="showShare">
						<image src="../../../static/icon-4.png" mode="widthFix"></image>
						分享
					</button>
				</view>
			</view>
			<view class="item">
				<image src="../../../static/img-4.png" class="item-img" mode="aspectFill"></image>
				<view class="row-between">
					<view class="name">焦糖玛奇朵</view>
					<button type="default" class="btn" @click="showShare">
						<image src="../../../static/icon-4.png" mode="widthFix"></image>
						分享
					</button>
				</view>
			</view>
			<view class="item">
				<image src="../../../static/img-4.png" class="item-img" mode="aspectFill"></image>
				<view class="row-between">
					<view class="name">焦糖玛奇朵</view>
					<button type="default" class="btn" @click="showShare">
						<image src="../../../static/icon-4.png" mode="widthFix"></image>
						分享
					</button>
				</view>
			</view>
			<!-- 无内容时显示 -->
			<!-- <view class="normal-box">
				<image src="../../../static/normal-8.png" mode="widthFix"></image>
				暂无资讯素材
			</view> -->
		</view>
		
		<!-- 分享-弹窗 -->
		<view v-show="isShowShare">
			<view class="mask" @tap="closeShare"></view>
			<view class="window">
				<view class="window-label">分享到</view>
				<view class="window-list">
					<view class="window-item">
						<image src="../../../static/share-1.png" mode=""></image>
						微信
					</view>
					<view class="window-item">
						<image src="../../../static/share-2.png" mode=""></image>
						保存相册
					</view>
				</view>
				<view class="window-bottom">
					<button type="default" @click="closeShare">取消分享</button>
				</view>
			</view>
		</view>
		<!-- 分享-弹窗  -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '线上素材',
				}, {
					index: 1,
					title: "线下素材",
				}],
				
				//分享弹窗
				isShowShare:true
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},

			//分享弹窗-弹窗
			showShare() {
				this.isShowShare = true;
			},
			closeShare() {
				this.isShowShare = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./information-material.css";
</style>