shop-applet/components/release/release.vue

<template>
	<view class="mark" v-if="isShow" @click="close">

		<view class="release">
			<view class="release_content" v-for="(item,i) in list" :key="i" @click="navigtion(item)">
				<view class="release_content_left">
					<view :class="i==1?'release_imga':'release_img'">
						<image :src="item.img" mode="aspectFit"></image>
					</view>

					<view class="title">
						<view class="title1">
							{{item.title1}}
						</view>
						<view class="title2">
							{{item.title2}}
						</view>
					</view>
				</view>
				<view class="release_content_right  ">
					<text class="iconfont icon-xiangyou"></text>
				</view>
			</view>

			<view class="release_close" @click="close">
				<image src="@/static/images/trad-close.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		navigateTo
	} from '../../libs/uniApi'
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			// 子组件接收一个布尔类型的bottom，如果为true则弹窗则在页面的底部，false为默认居中显示
			bottom: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				list: [{
						img: require('@/static/images/season.png'),
						title1: '发布调货商品',
						title2: '镇街店铺快捷调货',
					},
					{
						img: require('@/static/images/discounts.png'),
						title1: '发布打折商品',
						title2: '发布店铺打折商品',
					}
				]
			}
		},
		methods: {
			navigtion(item) {

				if (item.title1 == '发布调货商品') {
					uni.navigateTo({
						url: '/pages/trading_hall/transfer_goods/index'
					})
				} else {

					uni.navigateTo({
						url: '/pages/trading_hall/adddiscounts/index'
					})
				}
			},
			close() {
				this.$emit('close')
			},
			cancel() {
				this.$emit('cancel')
			},
			confirm() {
				this.$emit('confirm')
			},
		}
	}
</script>

<style lang="scss">
	.mark {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.release {
		position: absolute;
		bottom: 0px;
	}

	.release_content {
		width: 694rpx;
		height: 137rpx;
		background: #FCF3EE;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		margin-bottom: 21rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 26rpx;

		.release_content_left {
			display: flex;

		}

		.release_content_right {
			height: 137rpx;
			line-height: 137rpx;

		}

		.release_img {
			width: 111rpx;
			height: 96rpx;
			margin-top: 21rpx;
			margin-right: 19rpx;


			image {
				width: 111rpx;
				height: 96rpx;
			}
		}

		.release_imga {

			width: 76rpx;
			height: 113rpx;

			margin-top: 5rpx;
			margin-right: 50rpx;

			image {
				width: 76rpx;
				height: 113rpx;
			}
		}

		.title {
			margin-top: 23rpx;
		}

		.title1 {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.title2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin-top: 11rpx;
		}
	}

	.release_close {
		width: 248rpx;
		height: 248rpx;
		margin: 0 auto;

		image {
			width: 248rpx;
			height: 248rpx;
		}
	}
</style>