caimei-applets-caimei/components/cm-module/creatOrder/sellerClubVisible.vue

<template name="Visible">
	<view class="orderVisible-template">
		<!-- 订单对机构是否可见 -->
		<view class="visible-title" @tap.stop="showPopup">
			<text class="orderVisible">订单对机构是否可见</text>
			<view class="visible-right">
				<text class="text-l">{{ orderVisibleText }}</text> <text class="iconfont icon-xiayibu"></text>
			</view>
		</view>
		<!-- 优惠券 -->
		<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box clearfix">
				<view class="tui-popup-content">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view class="uni-list-text">{{ item.name }}</view>
							<view class="uni-list-radio">
								<radio
									:value="item.value"
									:checked="index === current"
									color="#E15616"
									style="transform:scale(0.7)"
								/>
							</view>
						</label>
					</radio-group>
				</view>
				<view class="tui-right-flex tui-popup-btn">
					<view class="tui-flex-1"> <view class="tui-button" @click="hidePopup">确定</view> </view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	name: 'Visible',
	props: {},
	data() {
		return {
			StaticUrl: this.$Static, //静态图片路径
			isIphoneX: this.$store.state.isIphoneX,
			popupShow: false,
			orderVisibleText: '可见',
			orderVisibleValue: '1',
			items: [
				{
					value: '1',
					name: '可见',
					checked: 'true'
				},
				{
					value: '2',
					name: '不可见'
				}
			],
			current: 0
		}
	},
	created() {},
	methods: {
		showPopup() {
			this.popupShow = true
		},
		radioChange: function(evt) {
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i
					this.orderVisibleText = this.items[i].name
					this.orderVisibleValue = Number(this.items[i].value)
					break
				}
			}
		},
		hidePopup() {
			this.popupShow = false
			this.$emit('handleClubVisible', this.orderVisibleValue)
		}
	}
}
</script>

<style lang="scss">
.orderVisible-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	.visible-title {
		width: 702rpx;
		padding: 0 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		font-size: $font-size-28;
		font-weight: bold;
		border-bottom: 1px solid #ebebeb;
		.orderVisible {
			font-size: $font-size-28;
			color: $text-color;
			font-weight: bold;
		}
		.visible-right {
			float: right;
			color: #2a81ff;
			.text-l {
				margin-right: 40rpx;
			}
			.iconfont {
				width: 50rpx;
				height: 88rpx;
				line-height: 88rpx;
				color: #999999;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 24rpx 0 24rpx;
	.tui-popup-content {
		width: 100%;
		height: 168rpx;
		.uni-list-cell {
			width: 100%;
			height: 66rpx;
			line-height: 66rpx;
			display: block;
			.uni-list-radio {
				float: right;
				height: 66rpx;
			}
			.uni-list-text {
				float: left;
				height: 66rpx;
				font-size: $font-size-28;
				color: #333;
			}
		}
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 24rpx;
		.tui-button {
			width: 100%;
			height: 88rpx;
			background: $btn-confirm;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			font-size: $font-size-28;
			border-radius: 44rpx;
		}
	}
}
</style>