477 lines
11 KiB
Vue
477 lines
11 KiB
Vue
<template>
|
|
<view
|
|
v-if="Display"
|
|
:class="[Display ? 'create-module' : 'close-animation ', 'Mask']"
|
|
@click="open()"
|
|
>
|
|
<view @click.stop class="containers">
|
|
<view class="container">
|
|
<image
|
|
class="Fork"
|
|
@click="open()"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Fork.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
<view class="Titlecss">
|
|
<view class="Star"></view>
|
|
<view class="Title">修改我的主播</view>
|
|
<view class="Star"></view>
|
|
</view>
|
|
|
|
<!-- <view class="Individual"> -->
|
|
<view class="NameAnchor">
|
|
<input
|
|
class="NameAnchorcss"
|
|
cursor-color="#666666"
|
|
placeholder-style="color:#666666"
|
|
@input="NameAnchor"
|
|
placeholder="主播名称"
|
|
@blur="blur"
|
|
:value="nameAnchor"
|
|
/>
|
|
<view v-if="nameAnchor === '' && Hint === true" class="Hint"
|
|
>请检查主播名称是否正确</view
|
|
>
|
|
</view>
|
|
|
|
<!-- </view> -->
|
|
|
|
<view class="Accountnumber">
|
|
<view class="Coins country">
|
|
<wht-select
|
|
style="width: 350rpx"
|
|
backgroundColor="#ffffff"
|
|
placeholderColor="#666666"
|
|
textColor="#666666"
|
|
borderColor="#ffffff"
|
|
@change="country"
|
|
:options="Country"
|
|
:filterable="filterable"
|
|
placeholder="请选择国家"
|
|
:value="countrys"
|
|
/>
|
|
<view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</view>
|
|
</view>
|
|
<view class="Gender">
|
|
<view class="Gendercs">
|
|
<view class="Gendercss">
|
|
<wht-select
|
|
style="width: 300rpx"
|
|
backgroundColor="#ffffff"
|
|
placeholderColor="#666666"
|
|
textColor="#666666"
|
|
borderColor="#ffffff"
|
|
@change="gender"
|
|
:options="Gender"
|
|
placeholder="性别"
|
|
:value="genders"
|
|
/>
|
|
</view>
|
|
<view class="Gendericoncss">
|
|
<image
|
|
v-if="genders === 0"
|
|
class="Gendericon"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image
|
|
v-if="genders === 1"
|
|
class="Gendericon"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
<image
|
|
v-if="genders === 2"
|
|
class="Gendericon"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view v-if="genders === 0 && Hint === true" class="Hintcss">请选择性别</view>
|
|
</view>
|
|
</view>
|
|
<view class="Publish">
|
|
<button @click="Publish()" class="Publishcss">修改主播信息</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import optionsArray from "../../../../components/NationalDictionary.js";
|
|
import request from "../../../../components/request.js";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
genders: 0, //性别
|
|
Gender: [
|
|
{ label: "男", value: 1 },
|
|
{ label: "女", value: 2 },
|
|
],
|
|
Country: optionsArray,
|
|
countrys: "", //国家
|
|
nameAnchor: "", //主播名称
|
|
Display: false,
|
|
Hint: false,
|
|
id: null, //用户id
|
|
filterable: true, //是否可搜索
|
|
AnchorProfilePicture: "", //主播头像
|
|
uid: null, //用户id
|
|
};
|
|
},
|
|
props: {
|
|
message: {
|
|
type: Object,
|
|
},
|
|
},
|
|
watch: {
|
|
message(newQuestion, oldQuestion) {
|
|
console.log(newQuestion);
|
|
this.id = newQuestion.id;
|
|
this.nameAnchor = newQuestion.anchorId;
|
|
this.genders = newQuestion.gender;
|
|
this.AnchorProfilePicture = newQuestion.headerIcon.split("/").pop();
|
|
this.countrys = newQuestion.country
|
|
},
|
|
},
|
|
mounted() {
|
|
uni.getStorage({
|
|
key: "userinfo",
|
|
success: (res) => {
|
|
this.uid = res.data.id;
|
|
},
|
|
});
|
|
},
|
|
methods: {
|
|
//性别
|
|
gender(item) {
|
|
this.genders = item.value;
|
|
console.log(item);
|
|
},
|
|
//国家
|
|
country(item) {
|
|
this.countrys = item.value;
|
|
console.log(item);
|
|
},
|
|
|
|
handleOverlayClick(event) {
|
|
if (event.target === this.$el) {
|
|
this.Display = false;
|
|
this.Hint = false;
|
|
}
|
|
},
|
|
open() {
|
|
if (this.Display) {
|
|
this.Display = false;
|
|
this.Hint = false;
|
|
this.nameAnchor = "";
|
|
this.genders = 0;
|
|
this.countrys = "";
|
|
} else {
|
|
this.Display = true;
|
|
}
|
|
},
|
|
//获取主播名称以及头像地址
|
|
blur(event) {
|
|
if (this.nameAnchor !== event.target.value) {
|
|
this.nameAnchor = event.target.value;
|
|
uni.showLoading({
|
|
title: "正在验证主播",
|
|
mask: true,
|
|
});
|
|
uni.request({
|
|
url: "https://python.yolojt.com/api/" + this.nameAnchor,
|
|
success: (res) => {
|
|
if (res.data.code === 200) {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "查询成功",
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
this.AnchorProfilePicture = res.data.data;
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "未查询到该主播",
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
}
|
|
},
|
|
fail: function (res) {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "网络请求失败",
|
|
icon: "none",
|
|
duration: 3000,
|
|
});
|
|
},
|
|
});
|
|
} else {
|
|
return;
|
|
}
|
|
},
|
|
async Publish() {
|
|
//判断是否为空
|
|
if (
|
|
this.nameAnchor === "" ||
|
|
this.genders === 0 ||
|
|
this.countrys === "" ||
|
|
this.AnchorProfilePicture === ""
|
|
) {
|
|
this.Hint = true;
|
|
return;
|
|
}
|
|
//发送请求
|
|
uni.showLoading({
|
|
title: "修改中...",
|
|
mask: true,
|
|
});
|
|
const res = await request({
|
|
url: "anchor/updateAnchorInfo",
|
|
method: "POST",
|
|
data: {
|
|
id:this.id,
|
|
anchorId: this.nameAnchor,
|
|
headerIcon: this.AnchorProfilePicture,
|
|
gender: this.genders,
|
|
country: this.countrys,
|
|
createUserId: this.uid,
|
|
},
|
|
userInfo: true,
|
|
}).then((res) => {
|
|
if (res.code === 200) {
|
|
this.Display = false;
|
|
this.Hint = false;
|
|
this.nameAnchor = "";
|
|
this.genders = 0;
|
|
this.AnchorProfilePicture = "";
|
|
this.country = "";
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "修改成功",
|
|
icon: "success",
|
|
duration: 2000,
|
|
});
|
|
this.$emit('Refresh');
|
|
} else {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: "修改失败" + res.msg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 定义动画 */
|
|
/* 原始进入动画 */
|
|
@keyframes slide-in {
|
|
from {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 进入动画类 */
|
|
.create-module {
|
|
animation: slide-in 0.3s ease-in-out;
|
|
}
|
|
|
|
.Mask {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #00000076;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
.Hint {
|
|
color: rgb(255, 0, 0);
|
|
font-size: 20rpx;
|
|
margin-left: 30rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.Hintcss {
|
|
color: rgb(255, 0, 0);
|
|
font-size: 20rpx;
|
|
margin-left: 30rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.containers {
|
|
background-color: #ffffff;
|
|
border-radius: 50rpx;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/bgv.png);
|
|
background-size: 100% 100%;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 1000rpx;
|
|
border-radius: 50rpx;
|
|
box-shadow: 0 0 10rpx #ccc;
|
|
}
|
|
.Fork {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-top: 20rpx;
|
|
/* margin-bottom: 40rpx; */
|
|
margin-left: 90%;
|
|
}
|
|
.Titlecss {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.Star {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/star.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
.Title {
|
|
width: 430rpx;
|
|
height: 70rpx;
|
|
/* background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Publishpk.png); */
|
|
background-size: 100% 200%;
|
|
background-position: 0 100%;
|
|
margin-left: 26rpx;
|
|
margin-right: 26rpx;
|
|
font-size: 50rpx;
|
|
line-height: 70rpx;
|
|
background: linear-gradient(135deg, #019fa1, #9ddbdc);
|
|
-webkit-background-clip: text; /* 兼容 WebKit 内核 */
|
|
background-clip: text;
|
|
color: transparent; /* 隐藏原文字颜色 */
|
|
-webkit-text-fill-color: transparent; /* Safari 兼容 */
|
|
font-weight: bold;
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
.Individual {
|
|
display: flex;
|
|
/* justify-content: center; */
|
|
}
|
|
.NameAnchor {
|
|
width: 90%;
|
|
margin: 40rpx;
|
|
}
|
|
.time {
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
margin-top: 50rpx;
|
|
}
|
|
.NameAnchorcss {
|
|
width: 99%;
|
|
height: 85rpx;
|
|
background-color: #ffffff;
|
|
border: 1rpx solid #bfbfbf;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
}
|
|
.Gender {
|
|
width: 310rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.Gendercs {
|
|
display: flex;
|
|
justify-content: center;
|
|
/* align-items: center; */
|
|
}
|
|
.Gendercss {
|
|
width: 200rpx;
|
|
height: 60rpx;
|
|
}
|
|
.Gendericoncss {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
border: 1rpx solid #ff9d0067;
|
|
margin-left: 20rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.Gendericon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
/* margin-top: 10rpx;
|
|
margin-right: 40rpx; */
|
|
}
|
|
.Accountnumber {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 60rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
.Coins {
|
|
width: 400rpx;
|
|
height: 65rpx;
|
|
/* display: flex; */
|
|
margin-right: 10rpx;
|
|
/* flex-direction: column; */
|
|
}
|
|
.country {
|
|
margin-left: 10rpx;
|
|
}
|
|
.goldCoin {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.number-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.number-box-title {
|
|
color: #191919;
|
|
font-size: 30rpx;
|
|
margin-right: 22rpx;
|
|
margin-left: 17rpx;
|
|
}
|
|
.number-box-unit {
|
|
color: #03aba8;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border: 1rpx solid #03aba8;
|
|
border-radius: 50%;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
/* color: #003cff5a; */
|
|
}
|
|
|
|
.Publish {
|
|
margin-top: 300rpx;
|
|
margin-bottom: 40rpx;
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
}
|
|
.Publishcss {
|
|
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
|
|
/* color: #33ff00; */
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
border-radius: 50rpx;
|
|
}
|
|
</style>
|