chunwan/components/dashan.vue

<template>
	<view>
		<u-popup v-model="isDashan" mode="center"  border-radius="20" :mask-close-able="false">
			<view class="dashan">
				<view class="titles">选择搭讪语<image @click="closePopup" src="@/static/cha.png"></image></view>
				<view class="content">
					<view class="a">
						<view class="txt">选择搭讪语：</view>
						<view class="box">
							<input :value="content" @input="inputValue" type="text" :class="isErr?'on':''" placeholder="请输入" />
						</view>
					</view>
					<view class="b">
						<view class="txt">系统推荐：</view>
						<view class="list" v-if="list && list.length>0">
							<view class="item" v-for="(a,i) in list" :class="tabIndex == i?'item-on':''" >
								<view class="text" @click="tabItem(1,i)">{{a.content}}</view>
								<view class="anniu anniu-on" v-if="a.isDefault == 1">默认</view>
								<view class="anniu" v-else @click="tabItem(2,i)">设为默认</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fd">
					<view class="btn" @click="send">发送</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"dashan",
		props: {
			isDashan: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object,
				default: {}
			}
		},
		watch: {
			isDashan: function (val, oldVal) {
			  if(val == true){
				  this.getList()
			  }
			}
		},
		data() {
			return {
				tabIndex: -1,
				list: [],
				isErr: false,
				content: ""
			}
		},
		methods: {
			//获取搭讪列表
			async getList() {
				const { code, data } = await this.$api.findAccost({
					userId: uni.getStorageSync("userInfo").id
				}) 
				if(code == 200){
					this.list = data;
				}
			},
			//设置默认
			async toSet(index) {
				const { code, data } = await this.$api.setAccostDefault({
					userId: uni.getStorageSync("userInfo").id,
					id: this.list[index].id
				}) 
				if(code == 200){
					uni.showToast({
						title: "设置成功"
					})
					this.getList();
				}
			},
			//检查次数
			async userBalance() {
				const { code, data } = await this.$api.userBalance({
					userId: uni.getStorageSync("userInfo").id
				}) 
				if(code == 200){
					if(uni.getStorageSync("userInfo").sex == 1){
						if(data.wordCoins >= 1){
							this.chat()
						}else{
							uni.$emit("closeSharePopup",false)
							this.tabIndex = -1;
							this.content = "";
							this.isErr = false;
							uni.$emit("openCoinsPopup",true)
						}
					}else{
						this.chat()
					}
				}
			},
			//结算
			async socialConsumption() {
				await this.$api.socialConsumption({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: this.info.userid,
					type: 3,
					duration: ""
				}) 
			},
			//发送
			async chat() {
				const { code, data } = await this.$api.chat({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: this.info.userid,
					type: 3,
					message: this.content
				}) 
				if(code == 200){
					this.socialConsumption();
					uni.$emit("closeSharePopup",false)
					this.tabIndex = -1;
					this.content = "";
					this.isErr = false;
					uni.showToast({
						title: "搭讪成功！"
					})
				}
			},
			tabItem(type,index) {
				if(type == 1){
					this.content = this.list[index].content
					this.tabIndex = index;
				}else{
					this.toSet(index);
				}
			},
			inputValue(e){
				this.tabIndex = -1;
				this.isErr = false;
				this.content = e.detail.value
			},
			closePopup() {
				this.tabIndex = -1;
				this.content = "";
				this.isErr = false;
				uni.$emit("closeSharePopup",false)
			},
			send() {
				if(!this.content){
					this.isErr = true
					return ;
				}
				this.userBalance();
			}
		}
	}
</script>

<style scoped lang="scss">
.dashan{
	width: 670rpx;
	min-height: 270rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	.fd{
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		.btn{
			width: 300rpx;
			text-align: center;
			line-height: 80rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 80rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
	.titles{
		padding: 35rpx 20rpx 25rpx;
		border-bottom: 1px solid #EAEAEA;
		text-align: center;
		image{
			float: right;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.content{
		padding: 0 30rpx;
		overflow: hidden;
		.txt{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			margin-top: 20rpx;
		}
		.box{
			width: 100%;
			margin-top: 20rpx;
			input{
				width: 610rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1px solid #E5E5E5;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 26rpx;
				color: #212121;
				&.on{
					border-color: #ff0000;
				}
			}
		}
		.list{
			.item{
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.text{
					width: 460rpx;
					height: 80rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					font-weight: 500;
					font-size: 26rpx;
					border: 1px solid #F5F5F5;
					color: #222222;
					line-height: 80rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
				.anniu{
					font-weight: 500;
					font-size: 26rpx;
					color: #222222;
					&-on{
						width: 130rpx;
						height: 50rpx;
						background: linear-gradient(0deg, #000000, #3D3B38);
						box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
						border-radius: 50rpx;
						text-align: center;
						line-height: 50rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				&-on{
					.text{
						
						border: 1px solid #000000;
					}
					.anniu{
						&-on{
							display: block;
						}
					}
				}
			}
		}
	}
}
</style>