OpenDoorManageMini/pages/order/userInfo.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" title="会员信息"></u-navbar>
		<view class="content">
			<view class="xy-card info-box">
				<view class="flex justify-start">
					<view class="flex justify-start">
						<view class="name">会员id：</view>
						<view>{{info.memberId}}</view>
					</view>
					<view style="margin-left: 24rpx;">
						<xbutton size="mini" @tap="copy(info.memberId)">复制</xbutton>
					</view>
				</view>
				<view class="flex justify-start">
					<view class="name">昵称：</view>
					<view>{{info.member.wechatNickname||info.member.alipayNickname||'/'}}</view>
				</view>
				<view class="flex justify-start phone">
					<view class="flex justify-start">
						<view class="name">手机：</view>
						<view>{{info.member.tel}}</view>
					</view>
					<view style="margin-left: 24rpx;">
						<xbutton size="mini" @click="block"  v-if="info.isBlacklist">解除黑名单</xbutton>
						<xbutton size="mini" @click="block" v-else>拉黑</xbutton>
					</view>
				</view>
			</view>
		</view>
		<xpopup :show="show" @close="close" @confirm="submit" :showBtn="true" title="黑名单">
			<!-- 拉黑 -->
			<view class="pop-content restart">
				是否确定拉黑该用户?
			</view>
		</xpopup>
	</view>
</template>

<script>
	import {
		userInfo,
		setBlacklist,
		removeBlackList
	} from '@/api/order/order.js'
	export default {
		data() {
			return {
				id: null,
				info: {},
				show: false,
			}
		},

		onLoad(o) {
			this.id = o.id;
			this.getInfo()
		},

		methods: {
			getInfo() {
				userInfo({
					memberId: this.id
				}).then(res => {
					this.info = res.data
				})
			},

			copy(text) {
				uni.setClipboardData({
					data: text,
					success: (data) => {
						uni.showToast({
							title: '复制成功'
						})
					},
					fail: function(err) {

					},
					complete: function(res) {

					}
				})
			},

			block() {
				// this.show = true
				if(this.info.isBlacklist){ //已拉黑，解除
					removeBlackList({
						memberId: this.id
					}).then(res => {
						this.getInfo()
						this.close()
						this.$modal.showToast('解除成功~')
					}).catch(err => {
						this.close()
					})
				}else{ //拉黑
					setBlacklist({
						memberId: this.id
					}).then(res => {
						this.getInfo()
						this.close()
						this.$modal.showToast('拉黑成功~')
					}).catch(err => {
						this.close()
					})
				}
			},

			// 关闭弹框
			close(e) {
				this.show = false
			},

			// 弹框确定
			submit() {
				if(this.info.isBlacklist){ //已拉黑，解除
					removeBlackList({
						memberId: this.id
					}).then(res => {
						this.$modal.msg('解除成功~')
						this.getInfo()
						this.close()
					}).catch(err => {
						this.close()
					})
				}else{ //拉黑
					setBlacklist({
						memberId: this.id
					}).then(res => {
						this.$modal.msg('拉黑成功~')
						this.getInfo()
						this.close()
					}).catch(err => {
						this.close()
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		.content {
			padding: 0 24rpx;
			overflow: hidden;

			.info-box {
				margin-top: 24rpx;

				>view {
					line-height: 60rpx;
				}

				.name {
					width: 120rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
				}
			}

			.phone {
				text {
					display: inline-block;
					background-color: #5b5b5b;
					color: #fff;
					font-size: 22rpx;
					padding: 0 12rpx;
					border-radius: 6rpx;
					margin-left: 12rpx;
					line-height: 36rpx;
				}
			}
		}

		.pop-content {
			padding: 24rpx;
		}
	}
</style>