项目初始化
This commit is contained in:
jerry
132
pages/tabbar/components/trend/clerk-popup.vue
Normal file
132
pages/tabbar/components/trend/clerk-popup.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
|
||||
<view class="order-box">
|
||||
<view class="avatar-box">
|
||||
<view class="title">切换店员</view>
|
||||
<view class="close-span" @click="hiddenPopup">
|
||||
<u-icon name="close-circle" color="var(--ui-BG-Main)" size="50"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view style="height: 700rpx;" scroll-y>
|
||||
<view class="page-box">
|
||||
<view @click="change(item)" class="item" :key="item.id" v-for="(item,index) in clerkList">
|
||||
<view class="avatar-span">
|
||||
<u-avatar :src="item.avatar"></u-avatar>
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon size="44" v-if="clerk.id == item.id" name="checkmark-circle-fill" color="var(--ui-BG-Main)"></u-icon>
|
||||
<u-icon size="44" v-else name="checkmark-circle" color="var(--ui-BG-Main)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</tui-bottom-popup>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
|
||||
import RewardApi from '@/sheep/api/worker/reward';
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
tuiBottomPopup,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupShow: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
clerkList() {
|
||||
return sheep.$store('sys').clerkList;
|
||||
},
|
||||
clerk() {
|
||||
return sheep.$store('sys').currentClerk;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//调用此方法显示弹层
|
||||
showPopup() {
|
||||
ClerkApi.getClerkList().then((res) => {
|
||||
if(res.data[0]){
|
||||
sheep.$store('sys').setCurrentClerk(res.data[0]);
|
||||
sheep.$store('sys').setClerkList(res.data);
|
||||
}else{
|
||||
sheep.$store('sys').setCurrentClerk({
|
||||
id: -1,
|
||||
avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg',
|
||||
});
|
||||
sheep.$store('sys').setClerkList([]);
|
||||
}
|
||||
this.popupShow = true;
|
||||
});
|
||||
},
|
||||
hiddenPopup() {
|
||||
this.popupShow = false;
|
||||
},
|
||||
change(e) {
|
||||
sheep.$store('sys').setCurrentClerk(e);
|
||||
this.hiddenPopup();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-box {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.close-span {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page-box {
|
||||
padding: 15px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.avatar-span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
font-size: 24rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
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>
|
||||
55
pages/tabbar/components/trend/formCity.vue
Normal file
55
pages/tabbar/components/trend/formCity.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="form-item">
|
||||
<view class="label">关联店员</view>
|
||||
<u-input @click="citySelect" input-align="right" type="select" placeholder="请选择店员" v-model="city" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
city() {
|
||||
return sheep.$store('sys').currentClerk.nickname;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
citySelect() {
|
||||
this.$emit('select');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
pages/tabbar/components/trend/formImage.vue
Normal file
68
pages/tabbar/components/trend/formImage.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<view>
|
||||
<shmily-drag-image :number="number" :cols="cols" v-model="imgList"></shmily-drag-image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
number: {
|
||||
type: Number,
|
||||
default: 6
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgList: [],
|
||||
cols: 4,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.imgList = this.modelValue;
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
imgList: {
|
||||
handler: function(newVal, oldVal) {
|
||||
this.$emit('update:modelValue', newVal);
|
||||
}
|
||||
},
|
||||
modelValue: {
|
||||
handler: function(newVal, oldVal) {
|
||||
this.imgList = newVal;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
71
pages/tabbar/components/trend/formVideo.vue
Normal file
71
pages/tabbar/components/trend/formVideo.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view>
|
||||
<htz-image-upload :dataType="1" :max="1" mediaType="video" name="file" :chooseNum="1" v-model="imageDataType1" @chooseSuccess="ceshiChooseSuccessDataType1"></htz-image-upload>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
export default {
|
||||
components: {
|
||||
htzImageUpload,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imageDataType1: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
ceshiChooseSuccessDataType1(tempFilePaths, e) {
|
||||
tempFilePaths.forEach(path => {
|
||||
uni.getFileInfo({
|
||||
filePath: path,
|
||||
success: (infoRes) => {
|
||||
const fileSize = infoRes.size; // 获取文件大小（字节）
|
||||
if (fileSize > 1024 * 1024 * 10) { // 假设设置的文件大小限制为5MB
|
||||
uni.showToast({
|
||||
title: '文件大小限制为10MB',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 文件大小符合要求，可以执行上传操作
|
||||
this.uploadVoice(e, path);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('获取文件信息失败', err);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
async uploadVoice(e, path) {
|
||||
|
||||
|
||||
var res = await FileApi.uploadFile(path);
|
||||
this.$emit('update:modelValue', res.data);
|
||||
var thisData = {
|
||||
type: e,
|
||||
url: path
|
||||
};
|
||||
this.imageDataType1.push(thisData);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
256
pages/tabbar/components/trend/formVoice.vue
Normal file
256
pages/tabbar/components/trend/formVoice.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="form-bg">
|
||||
<view class="form-item">
|
||||
<view class="label">录音</view>
|
||||
<view class="bubble-box">
|
||||
<u-input @click="topBubble" input-align="right" type="select" :placeholder="voice.name" />
|
||||
<tui-bubble-popup :show="show" :mask="false" position="absolute" direction="right" triangleRight="-22rpx" triangleTop="30rpx" @close="topBubble" :flexEnd="false">
|
||||
<view @click="change(item)" class="tui-menu-item" v-for="(item,index) in list">{{item.name}}</view>
|
||||
</tui-bubble-popup>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="voice-box" v-if="voice.type == 'voice'">
|
||||
<view v-if="voiceUrl" @click="playAudio" class="upload-btn-box">
|
||||
<view class="icon">
|
||||
<u-icon v-if="play" name="pause" color="#fff" size="70"></u-icon>
|
||||
<u-icon v-else name="play-right-fill" color="#fff" size="70"></u-icon>
|
||||
</view>
|
||||
<view class="upload-btn" v-if="play">停止播放</view>
|
||||
<view class="upload-btn" v-else>播放录音</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<all-speech :maxTime="maxTime" ref="speech" @okClick="voiceOk"></all-speech>
|
||||
</view>
|
||||
<view v-if="voiceUrl" @click="reloadBtn" class="reload-btn">
|
||||
<u-icon name="reload" size="30"></u-icon>
|
||||
<text class="text">重录</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="voice-box" v-if="voice.type == 'upload'">
|
||||
<view v-if="voiceUrl" @click="playAudio" class="upload-btn-box">
|
||||
<view class="icon">
|
||||
<u-icon v-if="play" name="pause" color="#fff" size="70"></u-icon>
|
||||
<u-icon v-else name="play-right-fill" color="#fff" size="70"></u-icon>
|
||||
</view>
|
||||
<view class="upload-btn" v-if="play">停止播放</view>
|
||||
<view class="upload-btn" v-else>播放录音</view>
|
||||
</view>
|
||||
<view v-else @click="chooseVoice" class="upload-btn-box">
|
||||
<view class="icon">
|
||||
<u-icon name="plus" color="#fff" size="70"></u-icon>
|
||||
</view>
|
||||
<view class="upload-btn">上传录音文件</view>
|
||||
</view>
|
||||
<view v-if="voiceUrl" @click="reloadBtn" class="reload-btn">
|
||||
<u-icon name="reload" size="30"></u-icon>
|
||||
<text class="text">重录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileApi from '@/sheep/api/infra/file';
|
||||
import tuiBubblePopup from "@/components/thorui/tui-bubble-popup/tui-bubble-popup.vue"
|
||||
const audio = uni.createInnerAudioContext();
|
||||
export default {
|
||||
components: {
|
||||
tuiBubblePopup,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
voice: {
|
||||
|
||||
},
|
||||
maxTime: 60,
|
||||
list: [
|
||||
{
|
||||
name: '直接录音',
|
||||
type: 'voice',
|
||||
},
|
||||
],
|
||||
current: 0,
|
||||
voicePath: '',
|
||||
show: false,
|
||||
play: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.voice = this.list[this.current];
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
var voiceType = {
|
||||
name: '上传手机音频',
|
||||
type: 'upload',
|
||||
};
|
||||
this.list.push(voiceType);
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
voiceUrl(){
|
||||
return this.modelValue;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
topBubble() {
|
||||
this.show = !this.show;
|
||||
},
|
||||
change(e) {
|
||||
this.reloadBtn();
|
||||
this.topBubble();
|
||||
this.voice = e;
|
||||
},
|
||||
reloadBtn() {
|
||||
this.play = false;
|
||||
this.$emit('update:modelValue', "");
|
||||
this.$emit('sec', "");
|
||||
},
|
||||
playAudio() {
|
||||
if(this.play){
|
||||
this.play = false;
|
||||
audio.stop();
|
||||
}else{
|
||||
this.play = true;
|
||||
//语音自然播放结束
|
||||
audio.onEnded((res) => {
|
||||
this.play = false;
|
||||
});
|
||||
audio.src = this.modelValue;
|
||||
audio.play();
|
||||
}
|
||||
},
|
||||
chooseVoice() {
|
||||
var that = this;
|
||||
|
||||
uni.chooseFile({
|
||||
count: 1, //默认100
|
||||
extension:['.mp3','.m4a'],
|
||||
success: function (res) {
|
||||
var fileSize = res.tempFiles[0].size;
|
||||
if (fileSize > 1024 * 1024 * 10) { // 假设设置的文件大小限制为5MB
|
||||
uni.showToast({
|
||||
title: '文件大小限制为10MB',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
that.voicePath = res.tempFilePaths[0];
|
||||
console.log(JSON.stringify(res.tempFilePaths));
|
||||
that.uploadVoice(that.voicePath);
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadVoice(path) {
|
||||
FileApi.uploadFile(path).then((res) => {
|
||||
this.$emit('update:modelValue', res.data);
|
||||
});
|
||||
},
|
||||
voiceOk(e) {
|
||||
this.voicePath = e.path;
|
||||
this.uploadVoice(this.voicePath);
|
||||
this.$emit('sec', e.sec);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-bg {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-box {
|
||||
position: relative;
|
||||
|
||||
.tui-menu-item {
|
||||
width: 100%;
|
||||
padding: 30rpx 20rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tui-menu-item:after {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
pointer-events: none;
|
||||
top: 0%;
|
||||
right: 10%;
|
||||
bottom: 0%;
|
||||
left: 10%;
|
||||
border: 0 solid #ebedf0;
|
||||
border-color: #646566;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.tui-menu-item:last-child:after {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.voice-box {
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
background-color: #3cc9a4;
|
||||
border-radius: 100%;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-btn-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
font-size: 34rpx;
|
||||
color: #aaa;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.reload-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
font-size: 30rpx;
|
||||
color: #3cc9a4;
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
pages/tabbar/components/trend/imgBox.vue
Normal file
149
pages/tabbar/components/trend/imgBox.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="img-box" v-if="imgList.length == 1">
|
||||
<u-image @click="onPreviewTap(file)" border-radius="10" width="460rpx" height="560rpx" :src="file"></u-image>
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="isAd" class="lock-box2" @click="onAdPreviewTap(file)">
|
||||
<u-icon name="lock" size="36"></u-icon>
|
||||
<text class="text">观看视频解锁</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="img-box" v-if="imgList.length > 1">
|
||||
<block v-for="(img,index) in imgList">
|
||||
<view @click="onPreviewTap(img)" class="img" v-if="index < 2">
|
||||
<u-image border-radius="10" width="270rpx" height="270rpx" :src="img"></u-image>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="more" v-if="imgList.length > 2">
|
||||
<u-icon name="photo"></u-icon>
|
||||
<text>+{{imgList.length-2}}</text>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="isAd" class="lock-box" @click="onAdPreviewTap(file)">
|
||||
<u-icon name="lock" size="36"></u-icon>
|
||||
<text class="text">观看视频解锁</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
ad: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAd: this.ad
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
imgList() {
|
||||
return this.file.split(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 预览图片
|
||||
onPreviewTap(url) {
|
||||
uni.previewImage({
|
||||
current: url,
|
||||
urls: this.imgList,
|
||||
})
|
||||
},
|
||||
// 预览图片
|
||||
onAdPreviewTap(url) {
|
||||
this.$emit('preAd', (res)=> {
|
||||
if(res){
|
||||
this.isAd = false;
|
||||
uni.previewImage({
|
||||
current: url,
|
||||
urls: this.imgList,
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.img-box {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
|
||||
.img {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 10rpx;
|
||||
background-color: #333333a6;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.lock-box {
|
||||
position: absolute;
|
||||
background-color: #00000094;
|
||||
left: 0;
|
||||
right: 10rpx;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
border-radius: 6rpx;
|
||||
flex-direction: column;
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-box2 {
|
||||
position: absolute;
|
||||
background-color: #00000094;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
border-radius: 6rpx;
|
||||
flex-direction: column;
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
179
pages/tabbar/components/trend/layout.vue
Normal file
179
pages/tabbar/components/trend/layout.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<!-- 虚拟列表演示(不使用内置列表)(vue) -->
|
||||
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
|
||||
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
|
||||
<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
|
||||
<z-paging ref="paging" defaultPageSize="20" use-virtual-list :force-close-inner-list="true" auto-show-back-to-top :paging-style="{ paddingTop: paddingTop + 'px', paddingBottom: paddingBottom + 'rpx' }" cell-height-mode="dynamic" @virtualListChange="virtualListChange" @query="queryList">
|
||||
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
||||
<template #top>
|
||||
<nav-bar :title="title" @changeClerk="changeClerk" @tabsChange="tabsChange" @initNav="initNav"></nav-bar>
|
||||
</template>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="showSubscribeBtn" class="subscribe-box">
|
||||
<u-icon name="bell-fill" color="var(--ui-BG-Main)" size="44"></u-icon>
|
||||
<view class="info">获取实时动态提醒</view>
|
||||
<view class="sub-btn" @tap="subscribeMessage">立即订阅</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<user-card v-if="friendEnabled"></user-card>
|
||||
|
||||
|
||||
<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
|
||||
<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
|
||||
<view class="main-box">
|
||||
<post-list :virtualList="virtualList"></post-list>
|
||||
</view>
|
||||
|
||||
<!-- 自定义返回顶部view -->
|
||||
<template #backToTop>
|
||||
<custom-back-to-top></custom-back-to-top>
|
||||
</template>
|
||||
|
||||
</z-paging>
|
||||
|
||||
<fb-popup></fb-popup>
|
||||
<clerk-popup ref="clerk"></clerk-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FbPopup from "@/pages/tabbar/components/trend/fb-popup.vue";
|
||||
import ClerkPopup from "@/pages/tabbar/components/trend/clerk-popup.vue";
|
||||
import NavBar from '@/pages/tabbar/components/trend/navBar.vue';
|
||||
import UserCard from '@/pages/tabbar/components/trend/userCard.vue';
|
||||
import PostList from '@/pages/tabbar/components/trend/postList.vue';
|
||||
import TrendApi from '@/sheep/api/worker/trend';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
FbPopup,
|
||||
ClerkPopup,
|
||||
UserCard,
|
||||
PostList,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
|
||||
virtualList: [],
|
||||
paddingTop: 0,
|
||||
paddingBottom: 100,
|
||||
height: 0,
|
||||
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
userId: null,
|
||||
queryType: '2',
|
||||
},
|
||||
|
||||
showSubscribeBtn: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
friendEnabled() {
|
||||
return sheep.$store('user').tradeConfig.friendEnabled
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// #ifdef MP
|
||||
// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
|
||||
this.autoSubscribeMessage();
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
initNav(e) {
|
||||
this.height = e.height;
|
||||
this.paddingTop = this.height;
|
||||
},
|
||||
// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
|
||||
virtualListChange(vList) {
|
||||
this.virtualList = vList;
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
this.queryParams.pageNo = pageNo;
|
||||
this.queryParams.pageSize = pageSize;
|
||||
this.queryParams.userId = this.userInfo.id;
|
||||
|
||||
TrendApi.getTrendPage(this.queryParams).then(res => {
|
||||
// 将请求的结果数组传递给z-paging
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
}).catch(res => {
|
||||
// 如果请求失败写this.$refs.paging.complete(false);
|
||||
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
||||
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
||||
this.$refs.paging.complete(false);
|
||||
})
|
||||
},
|
||||
tabsChange(e) {
|
||||
this.queryParams.queryType = e;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
changeClerk() {
|
||||
this.$refs.clerk.showPopup();
|
||||
},
|
||||
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, '已订阅');
|
||||
// 隐藏订阅按钮
|
||||
this.showSubscribeBtn = false;
|
||||
});
|
||||
},
|
||||
async autoSubscribeMessage() {
|
||||
// 1. 校验是否手动订阅过
|
||||
const subscribeBtnStatus = uni.getStorageSync(WxaSubscribeTemplate.TREND_APPLY_SUCCESS);
|
||||
if (!subscribeBtnStatus) {
|
||||
this.showSubscribeBtn = true;
|
||||
return;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-box {
|
||||
|
||||
}
|
||||
|
||||
.subscribe-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
|
||||
.info {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
131
pages/tabbar/components/trend/navBar.vue
Normal file
131
pages/tabbar/components/trend/navBar.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
|
||||
<view class="tab-box">
|
||||
<view class="avatar-box" @click="changeClerk">
|
||||
<u-avatar size="44" :src="clerk.avatar"></u-avatar>
|
||||
<view class="icon">
|
||||
<u-icon name="qiehuan1" size="20" color="#fff" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhong">
|
||||
<view class="tab-box">
|
||||
<view class="title-label" @click="tabsChange" :data-i="i" v-for="(item,i) in tabList" :key="i">
|
||||
<text
|
||||
:style="{fontWeight:current==i?'bold':'',fontSize:current==i?'36rpx':'28rpx'}">
|
||||
{{item.name}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tui-navigation-bar>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
tuiNavigationBar,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 1,
|
||||
height: 0,
|
||||
scrollTop: 0.5,
|
||||
|
||||
tabList: [
|
||||
{
|
||||
name: '达人',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
name: '最新',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
name: '推荐',
|
||||
value: '1',
|
||||
},
|
||||
],
|
||||
current: 1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
clerk: {
|
||||
get() {
|
||||
return sheep.$store('sys').currentClerk;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initNavigation(e) {
|
||||
this.height = e.height;
|
||||
this.opacity = e.opacity;
|
||||
this.top = e.top;
|
||||
this.$emit('initNav', e);
|
||||
},
|
||||
opacityChange(e) {
|
||||
this.opacity = e.opacity;
|
||||
},
|
||||
tabsChange(e) {
|
||||
this.current = e.currentTarget.dataset.i;
|
||||
this.$emit('tabsChange', this.tabList[this.current].value);
|
||||
},
|
||||
changeClerk() {
|
||||
this.$emit('changeClerk');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zhong {
|
||||
//width: 230rpx;
|
||||
}
|
||||
|
||||
.tab-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-box .title-label {
|
||||
height: 44px;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
//font-size: 34rpx;
|
||||
}
|
||||
|
||||
.tab-box .title-label text {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
512
pages/tabbar/components/trend/postList.vue
Normal file
512
pages/tabbar/components/trend/postList.vue
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList">
|
||||
<view class="card">
|
||||
<view @click="detail(item)" class="left">
|
||||
<view class="avatar-img">
|
||||
<u-avatar class="img" :src="item.avatar"></u-avatar>
|
||||
</view>
|
||||
<!-- <view class="avatar" v-else>
|
||||
<image class="img" :src="item.avatar"></image>
|
||||
<image class="gif" src="@/static/images/avatar.gif"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="card-header">
|
||||
<view class="box3">
|
||||
<view class="box1">
|
||||
<view class="box2">
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
<view class="sex-box" v-if="item.sex == 1">
|
||||
<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
|
||||
<view class="age">{{item.age}}</view>
|
||||
</view>
|
||||
<view class="sex-box nan" v-if="item.sex == 0">
|
||||
<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
|
||||
<view class="age">{{item.age}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag-list">
|
||||
<view class="tag" v-if="item.trendType == 1">Ta是店员</view>
|
||||
<view class="tag" v-if="friendEnabled">发布于 {{item.createTimeStr}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="fans" @click="fans(item)">
|
||||
<u-icon v-if="item.fans" name="star-fill" size="40"></u-icon>
|
||||
<u-icon v-else name="star" size="40"></u-icon>
|
||||
</view> -->
|
||||
<view v-if="item.trendType == 0" class="chat-btn" @click="chat(item)">
|
||||
<u-icon name="chat" size="28" color="#fff"></u-icon>
|
||||
<view class="text">密聊</view>
|
||||
</view>
|
||||
<view v-if="item.trendType == 1" class="chat-btn" @click="detail(item)">
|
||||
<u-icon name="phone" size="28" color="#fff"></u-icon>
|
||||
<view class="text">下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-content">
|
||||
<view class="text-box">
|
||||
<rich-text :nodes="item.content"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="image-box" v-if="item.fileType == 0">
|
||||
<img-box @preAd="preAd" :ad="item.adStatus" :file="item.file"></img-box>
|
||||
</view>
|
||||
<view class="voice-box" v-if="item.fileType == 1">
|
||||
<voice-play :sec="item.seconds" @tap.stop="playAudio(item)" :isPlay="item.id == playId"></voice-play>
|
||||
</view>
|
||||
<view class="video-box" v-if="item.fileType == 2">
|
||||
<video-box :file="item.file"></video-box>
|
||||
</view>
|
||||
<view class="topic-list" v-if="friendEnabled">
|
||||
<view class="topic" @click="toCity(item)">
|
||||
<u-icon name="map-fill" size="40" color="#3cc9a4"></u-icon>
|
||||
<view class="tag-text">{{item.city}}</view>
|
||||
<u-icon name="arrow-right" size="24" color="#3cc9a4"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<!-- <view class="toolbar">
|
||||
<u-icon name="pinglun" size="38" custom-prefix="iconfont"></u-icon>
|
||||
<view class="toolbar-text">22</view>
|
||||
</view> -->
|
||||
<view class="toolbar" @click="thumb(item)">
|
||||
<u-icon v-if="item.like" name="thumb-up-fill" color="var(--ui-BG-Main)" size="40"></u-icon>
|
||||
<u-icon v-else name="thumb-up" size="40"></u-icon>
|
||||
<view class="toolbar-text" v-if="item.likeNum > 0">{{item.likeNum}}</view>
|
||||
<view class="text" v-else>点赞</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs';
|
||||
import isToday from "dayjs/plugin/isToday";
|
||||
import isYesterday from "dayjs/plugin/isYesterday";
|
||||
dayjs.extend(isToday);
|
||||
dayjs.extend(isYesterday);
|
||||
import ImgBox from '@/pages/tabbar/components/trend/imgBox.vue';
|
||||
import VideoBox from '@/pages/tabbar/components/trend/videoBox.vue';
|
||||
import VoicePlay from '@/pages/tabbar/components/trend/voicePlay.vue';
|
||||
import sheep from '@/sheep';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import adVideoUtils from '@/sheep/util/adVideoUtils';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import TrendApi from '@/sheep/api/worker/trend';
|
||||
const audio = uni.createInnerAudioContext();
|
||||
export default {
|
||||
components: {
|
||||
ImgBox,
|
||||
VideoBox,
|
||||
VoicePlay,
|
||||
},
|
||||
props: {
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playId: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
authType() {
|
||||
return sheep.$store('modal').auth;
|
||||
},
|
||||
orderList() {
|
||||
this.virtualList.forEach((order) => order.createTimeStr = this.showDayTime(order.createTime));
|
||||
return this.virtualList;
|
||||
},
|
||||
tradeConfig() {
|
||||
return sheep.$store('user').tradeConfig;
|
||||
},
|
||||
friendEnabled() {
|
||||
return sheep.$store('user').tradeConfig.friendEnabled
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showDayTime(datetime) {
|
||||
if (!datetime) return "";
|
||||
const weeks = [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
];
|
||||
// 当天 显示时分
|
||||
if (dayjs(datetime).isToday()) {
|
||||
return dayjs(datetime).format("HH:mm");
|
||||
}
|
||||
// 昨天 昨天+时分
|
||||
if (dayjs(datetime).isYesterday()) {
|
||||
return `昨天 ${dayjs(datetime).format("HH:mm")}`;
|
||||
}
|
||||
// 本周 显示周几+时分
|
||||
if (dayjs().isSame(datetime, "week")) {
|
||||
const weekIndex = dayjs().day();
|
||||
return `${weeks[weekIndex]} ${dayjs(datetime).format("HH:mm")}`;
|
||||
}
|
||||
// 本周之前 显示年月日
|
||||
if (dayjs(datetime).isBefore(new Date(), "week")) {
|
||||
return dayjs(datetime).format("YYYY-MM-DD");
|
||||
}
|
||||
},
|
||||
playAudio(e) {
|
||||
if(this.playId == e.id){
|
||||
this.playId = null;
|
||||
audio.stop();
|
||||
return;
|
||||
}
|
||||
this.playId = e.id;
|
||||
//语音自然播放结束
|
||||
audio.onEnded((res) => {
|
||||
this.playId = null;
|
||||
});
|
||||
audio.src = e.file;
|
||||
audio.play();
|
||||
},
|
||||
thumb(e) {
|
||||
TrendApi.createTrendLike({
|
||||
trendId: e.id,
|
||||
}).then((res) => {
|
||||
if(res) {
|
||||
if(e.like){
|
||||
e.like = false;
|
||||
e.likeNum = e.likeNum-1;
|
||||
sheep.$helper.toast('取消点赞');
|
||||
}else{
|
||||
e.like = true;
|
||||
e.likeNum = e.likeNum+1;
|
||||
sheep.$helper.toast('点赞成功');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
preAd(run) {
|
||||
adVideoUtils.videoAdInit(this.tradeConfig.adUnitId);
|
||||
adVideoUtils.videoAdShow()
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
run(true);
|
||||
} else {
|
||||
console.log('广告提前退出')
|
||||
run(false);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('广告加载失败')
|
||||
run(false);
|
||||
});
|
||||
},
|
||||
fans(e) {
|
||||
TrendApi.createClerkFans({
|
||||
workerClerkId: e.workerClerkId,
|
||||
}).then((res) => {
|
||||
if(res){
|
||||
if(e.fans){
|
||||
sheep.$helper.toast('取消收藏');
|
||||
e.fans = false;
|
||||
}else{
|
||||
sheep.$helper.toast('收藏成功');
|
||||
e.fans = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
detail(e) {
|
||||
if(e.workerClerkId){
|
||||
this.$u.route({
|
||||
url: 'pages/clerk/detail/index',
|
||||
params: {
|
||||
id: e.workerClerkId,
|
||||
}
|
||||
});
|
||||
}else{
|
||||
sheep.$router.go('/pages/user/detail/index',{id: e.userId});
|
||||
}
|
||||
},
|
||||
toCity(e) {
|
||||
this.$u.route({
|
||||
url: 'pages/trend/city/list',
|
||||
params: {
|
||||
city: e.city,
|
||||
}
|
||||
});
|
||||
},
|
||||
chat(e) {
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(!isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
|
||||
if(userInfo.visible) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.subscribeMessage();
|
||||
// #endif
|
||||
|
||||
ImConversationApi.createMemberConversation({
|
||||
userId: e.userId,
|
||||
groupType: 1,
|
||||
lastMessageContentType: 1,
|
||||
}).then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: e.userId});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 触发小程序授权信息弹框
|
||||
// #ifdef MP-WEIXIN
|
||||
showAuthModal('mpAuthorization');
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
showAuthModal('h5Authorization');
|
||||
// #endif
|
||||
},
|
||||
subscribeMessage() {
|
||||
const event = [WxaSubscribeTemplate.UNREAD_MESSAGE];
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
|
||||
// 订阅后记录一下订阅状态
|
||||
uni.removeStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
|
||||
uni.setStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE, '已订阅');
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-img{
|
||||
margin-right: 5px;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8rpx;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar{
|
||||
margin-right: 5px;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.gif {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box1 {
|
||||
.tag-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
color: #666666;
|
||||
margin-top: 4rpx;
|
||||
|
||||
.tag::after {
|
||||
content: '·';
|
||||
padding: 0 10rpx; /* 添加一些间隔 */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tag-list .tag:last-child::after {
|
||||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.box2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 40rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
|
||||
.sex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #d06b8d1f;
|
||||
border-radius: 20px;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 10rpx;
|
||||
color: #d06b8d;
|
||||
line-height: 24rpx;
|
||||
margin: 0 5px;
|
||||
|
||||
.age {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nan {
|
||||
background-color: #007aff1a;
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
|
||||
.box3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fans {
|
||||
width: 60rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
height: 60rpx;
|
||||
align-items: center;
|
||||
color: var(--ui-BG-Main);
|
||||
font-size: 24rpx;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.chat-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--ui-BG-Main);
|
||||
justify-content: center;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 5px;
|
||||
|
||||
.text {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.text-box {
|
||||
font-size: 26rpx;
|
||||
line-height: 180%;
|
||||
white-space: pre-wrap;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.topic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
margin-right: 20rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
font-weight: bold;
|
||||
|
||||
.tag-text {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #666666;
|
||||
width: 80rpx;
|
||||
height: 40rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar-text {
|
||||
font-size: 26rpx;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 24rpx;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
190
pages/tabbar/components/trend/userCard.vue
Normal file
190
pages/tabbar/components/trend/userCard.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view class="user-card-box">
|
||||
<view class="user-card">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="huo" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<text class="text">置顶用户</text>
|
||||
</view>
|
||||
<scroll-view class="scroll-box" scroll-x>
|
||||
<view class="user-swiper">
|
||||
|
||||
<view @click="detail(item)" class="user-box" v-for="(item,i) in hotList">
|
||||
<view class="avatar-box">
|
||||
<u-avatar mode="square" size="140" :src="item.avatar"></u-avatar>
|
||||
<view v-if="item.onlineStatus" class="badge"></view>
|
||||
<view class="count-down">
|
||||
<u-count-down :timestamp="item.timestamp" format="HH时mm分ss秒"></u-count-down>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hotList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getHomeData();
|
||||
},
|
||||
methods: {
|
||||
getHomeData() {
|
||||
UserApi.getHomeData().then(res => {
|
||||
this.hotList = res.data.memberHotList;
|
||||
|
||||
this.hotList.forEach((order) => order.timestamp = order.slashedTime ? sheep.$helper.parseTimeData(order.slashedTime) : 0);
|
||||
});
|
||||
},
|
||||
detail(e) {
|
||||
sheep.$router.go('/pages/user/detail/index',{id: e.id});
|
||||
},
|
||||
chat(e) {
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(!isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
|
||||
if(userInfo.visible) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.subscribeMessage();
|
||||
// #endif
|
||||
ImConversationApi.createMemberConversation({
|
||||
userId: e.id,
|
||||
groupType: 1,
|
||||
lastMessageContentType: 1,
|
||||
}).then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: e.id});
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 触发小程序授权信息弹框
|
||||
// #ifdef MP-WEIXIN
|
||||
showAuthModal('mpAuthorization');
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
showAuthModal('h5Authorization');
|
||||
// #endif
|
||||
},
|
||||
subscribeMessage() {
|
||||
const event = [WxaSubscribeTemplate.UNREAD_MESSAGE];
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
|
||||
// 订阅后记录一下订阅状态
|
||||
uni.removeStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
|
||||
uni.setStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE, '已订阅');
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-card-box {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 10px 0;
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
padding-left: 20px;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 15px;
|
||||
|
||||
.icon {
|
||||
background-color: #ddd;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-swiper {
|
||||
display: flex;
|
||||
|
||||
.avatar-box {
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
.badge {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.count-down {
|
||||
font-size: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 140rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-swiper .user-box:first-child{
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
44
pages/tabbar/components/trend/videoBox.vue
Normal file
44
pages/tabbar/components/trend/videoBox.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view class="video-box">
|
||||
<video :autoplay="false" :src="file" :show-fullscreen-btn="true"></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-box {
|
||||
width: 460rpx;
|
||||
height: 560rpx;
|
||||
}
|
||||
|
||||
.video-box video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
184
pages/tabbar/components/trend/voicePlay.vue
Normal file
184
pages/tabbar/components/trend/voicePlay.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<view class="voice-btn" @click="playBtn" :class="play?'audioplaying':''">
|
||||
<img class="play-btn" src="@/static/images/audio.png"></img>
|
||||
<view class="audio-box">
|
||||
<view class="audio1 wave1"></view>
|
||||
<view class="audio2 wave2"></view>
|
||||
<view class="audio3 wave3"></view>
|
||||
<view class="audio2 wave2"></view>
|
||||
<view class="audio1 wave1"></view>
|
||||
<view class="audio2 wave2"></view>
|
||||
<view class="audio3 wave3"></view>
|
||||
<view class="audio2 wave2"></view>
|
||||
<view class="audio1 wave1"></view>
|
||||
<view class="audio2 wave2"></view>
|
||||
<view class="audio3 wave3"></view>
|
||||
<view class="audio2 wave2"></view>
|
||||
</view>
|
||||
<view>{{sec}}"</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
emits: ['playAudio'],
|
||||
props: {
|
||||
isPlay: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
sec: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
play: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
isPlay: {
|
||||
handler(newVal) {
|
||||
this.play = newVal;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
playBtn() {
|
||||
/* if(this.play){
|
||||
this.play = false;
|
||||
}else{
|
||||
this.play = true;
|
||||
} */
|
||||
this.$emit('playAudio');
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
view{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.voice-btn {
|
||||
background-color: #3cc9a4;
|
||||
width: 340rpx;
|
||||
border-radius: 20px;
|
||||
padding: 16rpx 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.audio-box {
|
||||
height: 34rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio1{
|
||||
margin-right: 8rpx;
|
||||
width: 6rpx;
|
||||
height: 33.3%;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.audio2{
|
||||
margin-right: 8rpx;
|
||||
width: 6rpx;
|
||||
height: 66.6%;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.audio3{
|
||||
margin-right: 8rpx;
|
||||
width: 6rpx;
|
||||
height: 100%;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.audioplaying .wave1 {
|
||||
animation: wave1 1s linear 0s infinite;
|
||||
}
|
||||
|
||||
.audioplaying .wave2 {
|
||||
animation: wave2 1s linear 0s infinite;
|
||||
}
|
||||
|
||||
.audioplaying .wave3 {
|
||||
animation: wave3 1s linear 0s infinite;
|
||||
}
|
||||
|
||||
@keyframes wave1{
|
||||
0% {
|
||||
width: 6rpx;
|
||||
height: 33%;
|
||||
}
|
||||
25% {
|
||||
width: 6rpx;
|
||||
height: 66%;
|
||||
}
|
||||
50% {
|
||||
width: 6rpx;
|
||||
height: 100%;
|
||||
}
|
||||
75% {
|
||||
width: 6rpx;
|
||||
height: 66%;
|
||||
}
|
||||
100% {
|
||||
width: 6rpx;
|
||||
height: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave2{
|
||||
0% {
|
||||
width: 6rpx;
|
||||
height: 66%;
|
||||
}
|
||||
25% {
|
||||
width: 6rpx;
|
||||
height: 33%;
|
||||
}
|
||||
50% {
|
||||
width: 6rpx;
|
||||
height: 66%;
|
||||
}
|
||||
75% {
|
||||
width: 6rpx;
|
||||
height: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 6rpx;
|
||||
height: 66%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave3{
|
||||
0% {
|
||||
width: 6rpx;
|
||||
height: 100%;
|
||||
}
|
||||
50% {
|
||||
width: 6rpx;
|
||||
height: 33%;
|
||||
}
|
||||
100% {
|
||||
width: 6rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user