项目初始化
This commit is contained in:
jerry
313
pages/tabbar/components/trend/fb-popup.vue
Normal file
313
pages/tabbar/components/trend/fb-popup.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="fabu" @click="fabu">
|
||||
<u-icon name="edit-pen-fill" color="#fff" size="50"></u-icon>
|
||||
</view>
|
||||
|
||||
<tui-bottom-popup :show="openFabu" zIndex="998" @close="close">
|
||||
<view class="fabu-box">
|
||||
<view class="title">
|
||||
<text>发布动态</text>
|
||||
<view class="close-span" @click="close">
|
||||
<u-icon name="close-circle" color="#98a2a1" size="50"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-box" v-if="!edit">
|
||||
<view class="menu-btn" @click="pubText(0)">
|
||||
<view class="menu-icon red">
|
||||
<u-icon name="photo" size="50"></u-icon>
|
||||
</view>
|
||||
<view>图文</view>
|
||||
</view>
|
||||
<view class="menu-btn" @click="pubText(1)">
|
||||
<view class="menu-icon">
|
||||
<u-icon name="mic" size="50"></u-icon>
|
||||
</view>
|
||||
<view>声音</view>
|
||||
</view>
|
||||
<view class="menu-btn" @click="pubText(2)">
|
||||
<view class="menu-icon blue">
|
||||
<u-icon name="play-circle-fill" size="50"></u-icon>
|
||||
</view>
|
||||
<view>视频</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="post-box" v-if="edit">
|
||||
<view class="input-box">
|
||||
<u-input type="textarea" placeholder="请输入动态内容" v-model="form.content" />
|
||||
</view>
|
||||
<form-image v-if="form.fileType == 0" :number="6" v-model="imgList"></form-image>
|
||||
<form-voice v-if="form.fileType == 1" @sec="toSec" v-model="form.file"></form-voice>
|
||||
<form-video v-if="form.fileType == 2" v-model="form.file"></form-video>
|
||||
<form-city @select="selectClerk"></form-city>
|
||||
<view class="btn-box">
|
||||
<view class="btn" @click="submit">立即发布</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tui-bottom-popup>
|
||||
|
||||
<clerk-popup ref="clerk"></clerk-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FormImage from '@/pages/tabbar/components/trend/formImage.vue';
|
||||
import FormVideo from '@/pages/tabbar/components/trend/formVideo.vue';
|
||||
import FormVoice from '@/pages/tabbar/components/trend/formVoice.vue';
|
||||
import formCity from '@/pages/tabbar/components/trend/formCity.vue';
|
||||
import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
|
||||
import ClerkPopup from "@/pages/tabbar/components/trend/clerk-popup.vue";
|
||||
import TrendApi from '@/sheep/api/worker/trend';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
FormImage,
|
||||
FormVideo,
|
||||
FormVoice,
|
||||
formCity,
|
||||
tuiBottomPopup,
|
||||
ClerkPopup,
|
||||
},
|
||||
props:{
|
||||
btnType: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
|
||||
type: String,
|
||||
default(){
|
||||
return 'fabu'
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openFabu: false,
|
||||
|
||||
edit: false,
|
||||
|
||||
form: {
|
||||
workerClerkId: null,
|
||||
content: '',
|
||||
seconds: 0,
|
||||
file: '',
|
||||
fileType: 0,
|
||||
},
|
||||
imgList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
authType() {
|
||||
return sheep.$store('modal').auth;
|
||||
},
|
||||
clerk() {
|
||||
return sheep.$store('sys').currentClerk;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fabu() {
|
||||
this.init();
|
||||
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(!isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
|
||||
if(userInfo.visible) {
|
||||
this.openFabu = true;
|
||||
return;
|
||||
}
|
||||
// 触发小程序授权信息弹框
|
||||
// #ifdef MP-WEIXIN
|
||||
showAuthModal('mpAuthorization');
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
showAuthModal('h5Authorization');
|
||||
// #endif
|
||||
},
|
||||
init() {
|
||||
this.edit = false;
|
||||
this.form.content = '';
|
||||
this.form.file = '';
|
||||
this.imgList = [];
|
||||
},
|
||||
selectClerk() {
|
||||
this.$refs.clerk.showPopup();
|
||||
},
|
||||
close() {
|
||||
this.openFabu = false;
|
||||
},
|
||||
pubText(fileType) {
|
||||
this.edit = true;
|
||||
this.form.fileType = fileType;
|
||||
},
|
||||
toSec(e) {
|
||||
this.form.seconds = e;
|
||||
},
|
||||
submit() {
|
||||
// #ifdef MP
|
||||
// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
|
||||
this.subscribeMessage();
|
||||
// #endif
|
||||
|
||||
if(!this.form.content){
|
||||
sheep.$helper.toast('请输入动态内容');
|
||||
return;
|
||||
}
|
||||
if(this.form.fileType == 0){
|
||||
if(this.imgList.length < 1){
|
||||
sheep.$helper.toast('请上传图片');
|
||||
return;
|
||||
}else{
|
||||
this.form.file = this.imgList.join(',');
|
||||
}
|
||||
}else if(this.form.fileType == 1){
|
||||
if(!this.form.file){
|
||||
sheep.$helper.toast('请上传录音');
|
||||
return;
|
||||
}
|
||||
}else if(this.form.fileType == 2){
|
||||
if(!this.form.file){
|
||||
sheep.$helper.toast('请上传视频');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if(this.clerk.id > 0){
|
||||
this.form.workerClerkId = this.clerk.id;
|
||||
}
|
||||
TrendApi.createTrend(this.form).then((res) => {
|
||||
if(res.data){
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
},
|
||||
subscribeMessage() {
|
||||
const event = [WxaSubscribeTemplate.TREND_APPLY_SUCCESS];
|
||||
event.push(WxaSubscribeTemplate.CLERK_BLIND);
|
||||
event.push(WxaSubscribeTemplate.CLERK_ORDER);
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
|
||||
// 订阅后记录一下订阅状态
|
||||
uni.removeStorageSync(WxaSubscribeTemplate.TREND_APPLY_SUCCESS);
|
||||
uni.setStorageSync(WxaSubscribeTemplate.TREND_APPLY_SUCCESS, '已订阅');
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fabu {
|
||||
background-color: var(--ui-BG-Main);
|
||||
position: fixed;
|
||||
bottom: 220rpx;
|
||||
right: 25rpx;
|
||||
border-radius: 100%;
|
||||
height: 90rpx;
|
||||
width: 90rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 48rpx;
|
||||
color: black;
|
||||
box-shadow: 0 0 10px #cccccc;
|
||||
}
|
||||
.fabu-box {
|
||||
padding: 30rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
padding-bottom: 30rpx;
|
||||
|
||||
.close-span {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
display: flex;
|
||||
padding: 30px 55px;
|
||||
justify-content: space-between;
|
||||
|
||||
.menu-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
|
||||
.menu-icon {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #dd6161;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #37c0fe;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #909399;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.post-box {
|
||||
|
||||
.input-box {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.btn {
|
||||
background-color: var(--ui-BG-Main);
|
||||
color: #fff;
|
||||
border-radius: 40px;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user