项目初始化
This commit is contained in:
jerry
220
pages/tabbar/components/home/actionSheet.vue
Normal file
220
pages/tabbar/components/home/actionSheet.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<view @touchmove.stop.prevent>
|
||||
<view class="tui-actionsheet" :class="{'tui-actionsheet-show':show,'tui-actionsheet-radius':radius}"
|
||||
:style="{zIndex:getZIndex}">
|
||||
<view class="tui-actionsheet-tips" :style="{fontSize:size+'rpx',color:color}" v-if="tips">
|
||||
{{tips}}
|
||||
</view>
|
||||
<view :class="[isCancel?'tui-operate-box':'']">
|
||||
<scroll-view class="scroll-box" :style="{height: scrollHeight}" scroll-y>
|
||||
<block v-for="(item,index) in itemList" :key="index">
|
||||
<view class="tui-actionsheet-btn"
|
||||
:class="index == 0 ? 'top' : ''"
|
||||
hover-class="tui-actionsheet-hover" :hover-stay-time="150" :data-index="index"
|
||||
:style="{color:item.color || '#2B2B2B'}" @tap="handleClickItem">{{item.text}}</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="tui-actionsheet-btn tui-actionsheet-cancel" hover-class="tui-actionsheet-hover"
|
||||
:hover-stay-time="150" v-if="isCancel" @tap="handleClickCancel">取消</view>
|
||||
</view>
|
||||
<view class="tui-actionsheet-mask" :class="{'tui-mask-show':show}" :style="{background:maskColor,zIndex:zIndex}"
|
||||
@tap="handleClickMask"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tuiActionsheet",
|
||||
emits: ['click', 'cancel'],
|
||||
props: {
|
||||
//显示操作菜单
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
|
||||
itemList: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [{
|
||||
text: "确定",
|
||||
color: "#2B2B2B"
|
||||
}]
|
||||
}
|
||||
},
|
||||
//点击遮罩 是否可关闭
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//v2.1.0
|
||||
maskColor: {
|
||||
type: String,
|
||||
default: "rgba(0, 0, 0, 0.6)"
|
||||
},
|
||||
//提示文字
|
||||
tips: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
//提示文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: "#808080"
|
||||
},
|
||||
//提示文字大小 rpx
|
||||
size: {
|
||||
type: Number,
|
||||
default: 26
|
||||
},
|
||||
//是否需要圆角
|
||||
radius: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否需要取消按钮
|
||||
isCancel: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 998
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getZIndex() {
|
||||
return Number(this.zIndex) + 2
|
||||
},
|
||||
scrollHeight() {
|
||||
var num = 7
|
||||
if(this.itemList.length <= num){
|
||||
num = this.itemList.length-1;
|
||||
}
|
||||
var h = 100*num;
|
||||
return h + 'rpx';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickMask() {
|
||||
if (!this.maskClosable) return;
|
||||
this.handleClickCancel();
|
||||
},
|
||||
handleClickItem(e) {
|
||||
if (!this.show) return;
|
||||
const index = Number(e.currentTarget.dataset.index);
|
||||
this.$emit('click', {
|
||||
index: index,
|
||||
...this.itemList[index]
|
||||
});
|
||||
},
|
||||
handleClickCancel() {
|
||||
this.$emit('cancel');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-box {
|
||||
padding-top: 100rpx;
|
||||
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-actionsheet {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transform-origin: center;
|
||||
transition: all 0.25s ease-in-out;
|
||||
background-color: #F7F7F7;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
.tui-actionsheet-radius {
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tui-actionsheet-show {
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.tui-actionsheet-tips {
|
||||
width: 100%;
|
||||
padding: 40rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tui-operate-box {
|
||||
padding-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.tui-actionsheet-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tui-btn-last {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tui-actionsheet-divider::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-bottom: 1rpx solid #E7E7E7;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.tui-actionsheet-cancel {
|
||||
color: #1a1a1a;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tui-actionsheet-hover {
|
||||
background-color: #f7f7f9;
|
||||
}
|
||||
|
||||
.tui-actionsheet-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tui-mask-show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
448
pages/tabbar/components/home/cardList.vue
Normal file
448
pages/tabbar/components/home/cardList.vue
Normal file
@@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- #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 -->
|
||||
|
||||
<view :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList" class="user-card">
|
||||
<view class="avatar-box" @click="detail(item)">
|
||||
<u-avatar size="180" :src="item.avatar"></u-avatar>
|
||||
</view>
|
||||
<view class="right-box">
|
||||
<view class="top-box">
|
||||
<view class="nickname-box">
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
<view class="sex-nv" v-if="item.sex == 2">
|
||||
<u-icon name="ziyuan2" size="22" custom-prefix="iconfont"></u-icon>
|
||||
<text>{{item.age}}</text>
|
||||
</view>
|
||||
<view class="sex-nan" v-if="item.sex == 1">
|
||||
<u-icon name="ziyuan3" size="22" custom-prefix="iconfont"></u-icon>
|
||||
<text>{{item.age}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="map-box">
|
||||
<u-icon name="map" size="32" color="#aaa"></u-icon>
|
||||
<view class="city" v-if="item.city">
|
||||
<text class="text">{{item.city}}</text>
|
||||
</view>
|
||||
<text v-else>未知</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="oline-box">
|
||||
<view class="tag-box">
|
||||
<span class="tag">已注册{{item.day}}天</span>
|
||||
<span class="tag" v-if="item.qrcode && item.qrcodeShow == 0">可交换名片</span>
|
||||
</view>
|
||||
<view class="badge-box">
|
||||
<view v-if="item.qrcode && item.qrcodeShow == 0" class="weixin-btn" @click="getWeixin(item)">
|
||||
<u-icon name="weixin-fill" size="28" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag-list">
|
||||
<img-box :file="item.photo"></img-box>
|
||||
<view class="chat-btn" @click="chat(item)">
|
||||
<u-icon name="chat" size="28" color="#fff"></u-icon>
|
||||
<view class="text">密聊</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
|
||||
import ImgBox from '@/pages/tabbar/components/home/friend/imgBox.vue';
|
||||
import sheep from '@/sheep';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
dayjs.extend(relativeTime);
|
||||
const audio = uni.createInnerAudioContext();
|
||||
export default {
|
||||
components: {
|
||||
TuiBadge,
|
||||
ImgBox,
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playId: null,
|
||||
|
||||
showSubscribeBtn: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
authType() {
|
||||
return sheep.$store('modal').auth;
|
||||
},
|
||||
orderList() {
|
||||
this.virtualList.forEach((order) => order.time = this.showDayTime(order.updateTime));
|
||||
return this.virtualList;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// #ifdef MP
|
||||
// 订阅只能由用户主动触发，只能包一层 showModal 诱导用户点击
|
||||
this.autoSubscribeMessage();
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
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.sound;
|
||||
audio.play();
|
||||
},
|
||||
detail(e) {
|
||||
sheep.$router.go('/pages/user/detail/index',{id: e.id});
|
||||
},
|
||||
getWeixin(e) {
|
||||
var that = this;
|
||||
uni.showModal({
|
||||
title: '交换名片',
|
||||
content: '确认交换名片吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.queryWeixin(e);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
queryWeixin(e) {
|
||||
UserApi.getQrcodeByUserId(e.id).then(res => {
|
||||
if(res.data){
|
||||
uni.previewImage({
|
||||
current: 0, //预览图片的下标
|
||||
urls: [res.data], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
|
||||
indicator: 'number',
|
||||
loop: true
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
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, '已订阅');
|
||||
// 隐藏订阅按钮
|
||||
this.showSubscribeBtn = false;
|
||||
});
|
||||
},
|
||||
async autoSubscribeMessage() {
|
||||
// 1. 校验是否手动订阅过
|
||||
const subscribeBtnStatus = uni.getStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
|
||||
if (!subscribeBtnStatus) {
|
||||
this.showSubscribeBtn = true;
|
||||
return;
|
||||
}
|
||||
},
|
||||
showDayTime(datetime) {
|
||||
if (!datetime) return "";
|
||||
return dayjs(datetime).fromNow();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-card {
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.voice-play {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.nickname-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
font-weight: bolder;
|
||||
margin-right: 4px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
|
||||
.sex-nv {
|
||||
background-color: #d5656f;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
.sex-nan {
|
||||
background-color: #0081ff;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
|
||||
.city {
|
||||
display: flex;
|
||||
|
||||
.text {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 88rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oline-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.img-icon {
|
||||
width: 40rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-color: #ff5ebd;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
line-height: 22rpx;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
.badge-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #aaa;
|
||||
|
||||
.online {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
background-color: #eef2f2;
|
||||
border-radius: 3px;
|
||||
color: #aaa;
|
||||
font-size: 24rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
padding: 5px 0;
|
||||
|
||||
.tag {
|
||||
white-space: nowrap;
|
||||
padding: 5px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid #aaa;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tag:last-child:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.note-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #aaa;
|
||||
font-size: 24rpx;
|
||||
|
||||
.text {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.text {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.weixin-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #19be6b;
|
||||
justify-content: center;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 5px;
|
||||
|
||||
.text {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
|
||||
.info {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.sub-btn {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
pages/tabbar/components/home/categoryCard.vue
Normal file
181
pages/tabbar/components/home/categoryCard.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<view class="user-card-box">
|
||||
|
||||
<view class="user-card">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="grid-fill" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<text class="text">技能分类</text>
|
||||
</view>
|
||||
|
||||
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="swiperList" :current="current" :dots-styles="dotsStyles" field="content">
|
||||
<swiper class="swiper-box" :class="dataList.length > 4 ? '' : 'line'" @change="change" :current="swiperDotIndex">
|
||||
<swiper-item v-for="(swiper,si) in swiperList">
|
||||
<view class="user-swiper">
|
||||
<view @click="tabClick(item)" class="user-box" v-for="(item,i) in swiper.list">
|
||||
<view class="avatar-box">
|
||||
<u-image border-radius="10" height="140" width="140" :src="item.thumb"></u-image>
|
||||
</view>
|
||||
<view class="nickname">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiperDotIndex: 0,
|
||||
current: 0,
|
||||
dotsStyles: {
|
||||
backgroundColor: '#ddd',
|
||||
border: '1px #ddd solid',
|
||||
color: '#fff',
|
||||
selectedBackgroundColor: 'var(--ui-BG-Main)',
|
||||
selectedBorder: '1px var(--ui-BG-Main) solid'
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
swiperList() {
|
||||
return this.getSwiperList(this.dataList);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
getSwiperList(dataList) {
|
||||
var swiperList = [];
|
||||
var categoryList = [];
|
||||
for(var i=0;i<dataList.length;i++){
|
||||
var category = dataList[i];
|
||||
categoryList.push(category);
|
||||
if((i+1)%8 == 0 || (i+1) == dataList.length){
|
||||
var swiper = {
|
||||
list: categoryList
|
||||
};
|
||||
swiperList.push(swiper);
|
||||
categoryList = [];
|
||||
}
|
||||
}
|
||||
return swiperList;
|
||||
},
|
||||
clickItem(e) {
|
||||
this.swiperDotIndex = e
|
||||
},
|
||||
tabClick(e) {
|
||||
this.$emit('tabClick', e);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-card-box {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 460rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 10px 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.title {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 5px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
width: 25%;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 140rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
67
pages/tabbar/components/home/categorySheet.vue
Normal file
67
pages/tabbar/components/home/categorySheet.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view>
|
||||
<action-sheet zIndex="9999" :show="showActionSheet" :item-list="categoryList" @click="itemClick" @cancel="closeActionSheet"></action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActionSheet from '@/pages/tabbar/components/home/actionSheet.vue';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
ActionSheet,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showActionSheet: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
categoryList() {
|
||||
var cateList = [];
|
||||
var cate = {
|
||||
text: "全部",
|
||||
label: '项目分类',
|
||||
value: '',
|
||||
color: "#2B2B2B"
|
||||
};
|
||||
cateList.push(cate);
|
||||
var dataList = sheep.$store('sys').categoryList;
|
||||
for(var i=0;i<dataList.length;i++){
|
||||
var category = {
|
||||
text: "",
|
||||
label: '',
|
||||
value: '',
|
||||
color: "#2B2B2B"
|
||||
};
|
||||
category.text = dataList[i].name;
|
||||
category.label = dataList[i].name;
|
||||
category.value = dataList[i].id;
|
||||
cateList.push(category);
|
||||
}
|
||||
return cateList;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//隐藏组件
|
||||
closeActionSheet() {
|
||||
this.showActionSheet = false
|
||||
},
|
||||
//调用此方法显示组件
|
||||
openActionSheet() {
|
||||
this.showActionSheet = true;
|
||||
},
|
||||
itemClick(e) {
|
||||
this.$emit('categoryOk', e);
|
||||
this.closeActionSheet();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
49
pages/tabbar/components/home/dazi.vue
Normal file
49
pages/tabbar/components/home/dazi.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="data-box">
|
||||
<card-list :virtualList="virtualList"></card-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBox from '@/pages/tabbar/components/home/topBox.vue';
|
||||
import CardList from '@/pages/tabbar/components/home/cardList.vue';
|
||||
export default {
|
||||
components: {
|
||||
topBox,
|
||||
CardList,
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
55
pages/tabbar/components/home/friend.vue
Normal file
55
pages/tabbar/components/home/friend.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-box @tabClick="tabClick" @search="search" :scrollTop="scrollTop" :stickyTop="stickyTop"></top-box>
|
||||
<view class="data-box">
|
||||
<card-list :virtualList="virtualList"></card-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBox from '@/pages/tabbar/components/home/friend/topBox.vue';
|
||||
import CardList from '@/pages/tabbar/components/home/cardList.vue';
|
||||
export default {
|
||||
components: {
|
||||
topBox,
|
||||
CardList,
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
tabClick(e) {
|
||||
this.$emit('tabClick', e);
|
||||
},
|
||||
search(e) {
|
||||
this.$emit('search', e);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
86
pages/tabbar/components/home/friend/imgBox.vue
Normal file
86
pages/tabbar/components/home/friend/imgBox.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="img-box" v-if="imgList.length > 0">
|
||||
<block v-for="(img,index) in imgList">
|
||||
<view @click="onPreviewTap(img)" class="img" v-if="index < 3">
|
||||
<u-image border-radius="10" width="70rpx" height="70rpx" :src="img"></u-image>
|
||||
<view class="more" v-if="imgList.length > 3">
|
||||
<text>+{{imgList.length-3}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view>暂未上传相册</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
file: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
imgList() {
|
||||
if(this.file){
|
||||
return this.file.split(',');
|
||||
}else{
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 预览图片
|
||||
onPreviewTap(url) {
|
||||
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: 10rpx;
|
||||
bottom: 0;
|
||||
background-color: #333333a6;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
246
pages/tabbar/components/home/friend/rankBox.vue
Normal file
246
pages/tabbar/components/home/friend/rankBox.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view class="rank-box">
|
||||
<view class="tab-box">
|
||||
<tui-tabs width="200" unlined :tabs="tabList" badgeBgColor="var(--ui-BG-Main)" selectedColor="var(--ui-BG-Main)" sliderBgColor="var(--ui-BG-Main)" :currentTab="current" @change="change"></tui-tabs>
|
||||
</view>
|
||||
<view class="user-box">
|
||||
<view class="avatar-box two" @click="detail(1)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[1]" class="img" :src="list[1].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/03072abb5a8c90a4f457549b8394d3c3db2a652410692d732b5c25f2478e3a85.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[1]">{{list[1].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
<view class="avatar-box one" @click="detail(0)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[0]" class="img" :src="list[0].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d191aec3b3d6e95c1dcb3bace7bffe28834f4fb062a9675aeaa1ae42a9bbc366.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[0]">{{list[0].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
<view class="avatar-box three" @click="detail(2)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[2]" class="img" :src="list[2].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/27209281e1b0e00dcc112bae4d06c14b089ec2f74db14b62eca4cbc0cf741cff.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[2]">{{list[2].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-box">更新时间: {{updateTime}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
|
||||
import sheep from '@/sheep';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
components: {
|
||||
tuiTabs
|
||||
},
|
||||
props: {
|
||||
maleWeekTopList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
femaleWeekTopList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
current: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
updateTime() {
|
||||
this.list = this.femaleWeekTopList;
|
||||
|
||||
// 获取当前日期和时间
|
||||
const now = dayjs();
|
||||
const nowDays = now.format('MM/DD');
|
||||
const sevenDaysAgo = now.subtract(7, 'day').format('MM/DD');
|
||||
return sevenDaysAgo + '-' + nowDays
|
||||
},
|
||||
tabList() {
|
||||
return [{
|
||||
name: '女神榜',
|
||||
list: this.femaleWeekTopList,
|
||||
},{
|
||||
name: '男神榜',
|
||||
list: this.maleWeekTopList,
|
||||
}];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.index;
|
||||
this.list = this.tabList[e.index].list;
|
||||
},
|
||||
detail(e) {
|
||||
var user = this.list[e];
|
||||
sheep.$router.go('/pages/user/detail/index',{id: user.id});
|
||||
},
|
||||
chat(e) {
|
||||
var user = this.list[e];
|
||||
if(!user){
|
||||
return;
|
||||
}
|
||||
|
||||
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: user.id,
|
||||
groupType: 1,
|
||||
lastMessageContentType: 1,
|
||||
}).then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: user.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>
|
||||
.rank-box {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 5px;
|
||||
|
||||
.tab-box {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.nickname {
|
||||
margin-top: 10px;
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 160rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.point {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.two-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.one{
|
||||
color: #fed530;
|
||||
|
||||
.img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border: 2px solid #fed530;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.two {
|
||||
color: #d8d8d8;
|
||||
|
||||
.img {
|
||||
border: 2px solid #d8d8d8;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.three {
|
||||
color: #ef9e3f;
|
||||
|
||||
.img {
|
||||
border: 2px solid #ef9e3f;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.time-box {
|
||||
padding-top: 15px;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
109
pages/tabbar/components/home/friend/stickyBox.vue
Normal file
109
pages/tabbar/components/home/friend/stickyBox.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tag-box">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="account-fill" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<text class="text">更多用户</text>
|
||||
</view>
|
||||
<view class="sticky-box">
|
||||
<view class="btn-tag" @click="searchTab">
|
||||
<text class="text">筛选</text>
|
||||
<u-icon name="shaixuan" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import $store from '@/sheep/store';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
searchTab() {
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(!isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
$store('modal').$patch((state) => {
|
||||
state.search = true;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background-color: #fafafa;
|
||||
height: 100rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
background-color: #ddd;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-box {
|
||||
display: flex;
|
||||
|
||||
.btn-tag {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
margin-left: 5px;
|
||||
padding: 0px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
height: 48rpx;
|
||||
|
||||
.text {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
260
pages/tabbar/components/home/friend/topBox.vue
Normal file
260
pages/tabbar/components/home/friend/topBox.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="main-box">
|
||||
<view class="notice-box">
|
||||
<notice-bar></notice-bar>
|
||||
</view>
|
||||
|
||||
<!-- <view class="blind-box">
|
||||
<view class="blind-card">
|
||||
<view class="icon">
|
||||
<image style="width: 88rpx;height: 88rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/1d291d514fe8833f941924f273a5deb8f2cc8c06680fd49b6c08c58b16338c93.png"></image>
|
||||
</view>
|
||||
<view class="avatar-box">
|
||||
<image style="width: 320rpx;height: 64rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/41888275859ee7d4663bfcbd322a55ac3da9bbfc3621ca8a1137f39b2fde47bd.png"></image>
|
||||
<view @click="blindOrder" class="btn">快速匹配</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view>
|
||||
<rank-box :femaleWeekTopList="femaleWeekTopList" :maleWeekTopList="maleWeekTopList"></rank-box>
|
||||
</view> -->
|
||||
|
||||
<view class="card-box">
|
||||
<user-card :newList="newList" :hotList="hotList"></user-card>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<sticky-box @tabClick="tabClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></sticky-box>
|
||||
</view>
|
||||
|
||||
<view class="menu-btn">
|
||||
<view class="icon" @click="slashed">
|
||||
<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/097d1fd05a1176fe93df9de64e416e771ff8ccba72330d90d905783dff66c376.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- <view class="icon" @click="blindOrder">
|
||||
<image class="img" src="http://cos.duopei.feiniaowangluo.com/2065/shop/navbar/1727183771735mx5tNxqRg6.jpg"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NoticeBar from '@/pages/tabbar/components/home/noticeBar.vue';
|
||||
import StickyBox from '@/pages/tabbar/components/home/friend/stickyBox.vue';
|
||||
import RankBox from '@/pages/tabbar/components/home/friend/rankBox.vue';
|
||||
import UserCard from '@/pages/tabbar/components/home/friend/userCard.vue';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
NoticeBar,
|
||||
RankBox,
|
||||
StickyBox,
|
||||
UserCard,
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actionStyle: {
|
||||
backgroundColor: 'var(--ui-BG-Main)',
|
||||
borderRadius: '40px',
|
||||
padding: '7px',
|
||||
color: '#fff',
|
||||
fontSize: '28rpx',
|
||||
width: '80px',
|
||||
},
|
||||
keyword: '',
|
||||
categoryList: [],
|
||||
newList: [],
|
||||
hotList: [],
|
||||
maleWeekTopList: [],
|
||||
femaleWeekTopList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getInitData();
|
||||
},
|
||||
methods: {
|
||||
tabClick(e) {
|
||||
this.$emit('tabClick', e);
|
||||
},
|
||||
getInitData() {
|
||||
this.getHomeData();
|
||||
|
||||
UserApi.getWeekTopList().then(res => {
|
||||
this.maleWeekTopList = res.data.maleWeekTopList;
|
||||
this.femaleWeekTopList = res.data.femaleWeekTopList;
|
||||
});
|
||||
|
||||
},
|
||||
search() {
|
||||
this.$emit('search', this.keyword);
|
||||
},
|
||||
blindOrder() {
|
||||
this.chat();
|
||||
},
|
||||
slashed() {
|
||||
var that = this;
|
||||
uni.showModal({
|
||||
title: '首页置顶',
|
||||
content: '每次置顶3小时，可以累计置顶时间。累计时间越多，排名越靠前',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.submitSlashed();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
getHomeData() {
|
||||
UserApi.getHomeData().then(res => {
|
||||
this.newList = res.data.memberNewList;
|
||||
this.hotList = res.data.memberHotList;
|
||||
});
|
||||
},
|
||||
submitSlashed() {
|
||||
UserApi.slashed().then(res => {
|
||||
if(res.data){
|
||||
this.getHomeData();
|
||||
}
|
||||
});
|
||||
},
|
||||
chat() {
|
||||
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.getRandomMemberConversation().then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data.groupId, receiveUserId: res.data.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>
|
||||
.main-box {
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
padding: 3px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.notice-box {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
padding: 15px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.blind-box {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.blind-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40px;
|
||||
padding: 5px 10px;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-btn {
|
||||
position: fixed;
|
||||
bottom: 220rpx;
|
||||
right: 25rpx;
|
||||
z-index: 1;
|
||||
|
||||
.icon {
|
||||
background-color: #ffff;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 10px #cccccc;
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
210
pages/tabbar/components/home/friend/userCard.vue
Normal file
210
pages/tabbar/components/home/friend/userCard.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="user-card-box">
|
||||
<view class="user-card">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="tuijian" 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 newList">
|
||||
<view class="avatar-box">
|
||||
<u-avatar mode="square" size="140" :src="item.avatar"></u-avatar>
|
||||
<view v-if="item.onlineStatus" class="badge"></view>
|
||||
</view>
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<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 orderList">
|
||||
<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 { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
newList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
hotList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderList() {
|
||||
this.hotList.forEach((order) => order.timestamp = order.slashedTime ? sheep.$helper.parseTimeData(order.slashedTime) : 0);
|
||||
return this.hotList;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
78
pages/tabbar/components/home/navBar - 副本.vue
Normal file
78
pages/tabbar/components/home/navBar - 副本.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fafafa" color="#333">
|
||||
<view>
|
||||
<view class="nav-box">
|
||||
<view style="width: 200px;">
|
||||
<u-tabs :list="list" bg-color="#fafafa" font-size="36" active-color="var(--ui-BG-Main)" :is-scroll="false" v-model="current" @change="change"></u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tui-navigation-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
|
||||
export default {
|
||||
components: {
|
||||
tuiNavigationBar,
|
||||
},
|
||||
props: {
|
||||
currentValue: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
name: '搭子'
|
||||
}, {
|
||||
name: '服务'
|
||||
}, {
|
||||
name: '社交',
|
||||
}],
|
||||
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 1,
|
||||
height: 0,
|
||||
scrollTop: 0.5,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current() {
|
||||
return this.currentValue;
|
||||
},
|
||||
},
|
||||
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;
|
||||
},
|
||||
change(index) {
|
||||
this.$emit('change', index);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-box {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #fafafa;
|
||||
flex-direction: column;
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
106
pages/tabbar/components/home/navBar.vue
Normal file
106
pages/tabbar/components/home/navBar.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop">
|
||||
<view class="tab-box">
|
||||
<view class="zhong">
|
||||
<view class="tab-box">
|
||||
<block v-for="(item,i) in tabList" :key="i">
|
||||
<view v-if="item.enabled" class="title-label" @click="tabsChange" :data-i="i" >
|
||||
<text
|
||||
:style="{fontWeight:current==i?'bold':'',fontSize:current==i?'36rpx':'28rpx'}">
|
||||
{{item.name}}
|
||||
</text>
|
||||
</view>
|
||||
</block>
|
||||
</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: {
|
||||
tabList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 1,
|
||||
height: 0,
|
||||
scrollTop: 0.5,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current: {
|
||||
get() {
|
||||
return sheep.$store('sys').homeTabIndex;
|
||||
},
|
||||
},
|
||||
},
|
||||
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) {
|
||||
var current = e.currentTarget.dataset.i;
|
||||
sheep.$store('sys').setHomeTabIndex(current);
|
||||
this.$emit('change', current);
|
||||
},
|
||||
}
|
||||
}
|
||||
</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>
|
||||
112
pages/tabbar/components/home/noticeBar.vue
Normal file
112
pages/tabbar/components/home/noticeBar.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<view class="tui-rolling-news">
|
||||
<view class="title">
|
||||
<u-icon name="bell-fill" size="26" color='#fff'></u-icon>
|
||||
<text class="text">最新消息</text>
|
||||
</view>
|
||||
<swiper vertical autoplay circular interval="3000" class="tui-swiper">
|
||||
<swiper-item v-for="(item,index) in newsList" :key="index" class="tui-swiper-item">
|
||||
<view class="tui-news-item">{{item}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
newsList() {
|
||||
var giftList = sheep.$store('sys').giftList;
|
||||
var newsList = [];
|
||||
var that = this;
|
||||
giftList.forEach(function(item){
|
||||
var news = "【"+item.nickname+"】收到了好友赠送 "+ that.fen2yuan(item.payMoney)+" 颗"
|
||||
if(item.rewardType){
|
||||
news = "【"+item.nickname+"】收到好友赠送 "+item.name+" x"+item.count;
|
||||
}
|
||||
newsList.push(news);
|
||||
})
|
||||
return newsList;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fen2yuan(price) {
|
||||
var f = 0;
|
||||
var p = (price / 100.0).toFixed(0);
|
||||
var p1 = (price / 100.0).toFixed(1);
|
||||
var p2 = (price / 100.0).toFixed(2);
|
||||
if(p*100 == price){
|
||||
f = 0;
|
||||
}else if(p1*100 == price){
|
||||
f = 1;
|
||||
}else if(p2*100 == price){
|
||||
f = 2;
|
||||
}
|
||||
return (price / 100.0).toFixed(f)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tui-rolling-news {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
height: 30px;
|
||||
|
||||
.title {
|
||||
background-color: var(--ui-BG-Main);
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 24rpx;
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tui-swiper {
|
||||
font-size: 24rpx;
|
||||
height: 50rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tui-swiper-item {
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.tui-news-item {
|
||||
line-height: 24rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
58
pages/tabbar/components/home/peiwan.vue
Normal file
58
pages/tabbar/components/home/peiwan.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<view>
|
||||
<top-box @tabClick="tabClick" @search="search" @categoryClick="categoryClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></top-box>
|
||||
<view class="data-box">
|
||||
<user-list :virtualList="virtualList"></user-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topBox from '@/pages/tabbar/components/home/topBox.vue';
|
||||
import UserList from '@/pages/tabbar/components/home/userList.vue';
|
||||
export default {
|
||||
components: {
|
||||
topBox,
|
||||
UserList,
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
tabClick(e) {
|
||||
this.$emit('tabClick', e);
|
||||
},
|
||||
search(e) {
|
||||
this.$emit('search', e);
|
||||
},
|
||||
categoryClick(e) {
|
||||
this.$emit('categoryClick', e);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
198
pages/tabbar/components/home/rankBox.vue
Normal file
198
pages/tabbar/components/home/rankBox.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<view class="rank-box">
|
||||
<view class="tab-box">
|
||||
<tui-tabs width="200" unlined :tabs="tabList" badgeBgColor="var(--ui-BG-Main)" selectedColor="var(--ui-BG-Main)" sliderBgColor="var(--ui-BG-Main)" :currentTab="current" @change="change"></tui-tabs>
|
||||
</view>
|
||||
<view class="user-box">
|
||||
<view class="avatar-box two" @click="detail(1)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[1]" class="img" :src="list[1].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/03072abb5a8c90a4f457549b8394d3c3db2a652410692d732b5c25f2478e3a85.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[1]">{{list[1].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
<view class="avatar-box one" @click="detail(0)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[0]" class="img" :src="list[0].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d191aec3b3d6e95c1dcb3bace7bffe28834f4fb062a9675aeaa1ae42a9bbc366.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[0]">{{list[0].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
<view class="avatar-box three" @click="detail(2)">
|
||||
<view class="img-box">
|
||||
<img v-if="list[2]" class="img" :src="list[2].avatar"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a0b0a27972615aee024a6e36f0a7e9e399e477ae55b7eec2b32032a6cc8bb268.png"></img>
|
||||
<img class="two-icon" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/27209281e1b0e00dcc112bae4d06c14b089ec2f74db14b62eca4cbc0cf741cff.png"></img>
|
||||
</view>
|
||||
<view class="nickname" v-if="list[2]">{{list[2].nickname}}</view>
|
||||
<view class="nickname" v-else>???</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-box">更新时间: {{updateTime}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
|
||||
import dayjs from 'dayjs';
|
||||
export default {
|
||||
components: {
|
||||
tuiTabs
|
||||
},
|
||||
props: {
|
||||
maleWeekTopList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
femaleWeekTopList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
current: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
updateTime() {
|
||||
this.list = this.femaleWeekTopList;
|
||||
|
||||
// 获取当前日期和时间
|
||||
const now = dayjs();
|
||||
const nowDays = now.format('MM/DD');
|
||||
const sevenDaysAgo = now.subtract(7, 'day').format('MM/DD');
|
||||
return sevenDaysAgo + '-' + nowDays
|
||||
},
|
||||
tabList() {
|
||||
return [{
|
||||
name: '女神榜',
|
||||
list: this.femaleWeekTopList,
|
||||
}, {
|
||||
name: '男神榜',
|
||||
list: this.maleWeekTopList,
|
||||
}];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.index;
|
||||
this.list = this.tabList[e.index].list;
|
||||
},
|
||||
detail(e) {
|
||||
if(this.list[e]){
|
||||
this.$u.route({
|
||||
url: 'pages/clerk/detail/index',
|
||||
params: {
|
||||
id: this.list[e].id,
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rank-box {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 5px;
|
||||
|
||||
.tab-box {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.nickname {
|
||||
margin-top: 10px;
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 160rpx;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.two-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.one{
|
||||
color: #fed530;
|
||||
|
||||
.img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border: 2px solid #fed530;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.two {
|
||||
color: #d8d8d8;
|
||||
|
||||
.img {
|
||||
border: 2px solid #d8d8d8;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.three {
|
||||
color: #ef9e3f;
|
||||
|
||||
.img {
|
||||
border: 2px solid #ef9e3f;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.time-box {
|
||||
padding-top: 15px;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
pages/tabbar/components/home/sexSheet.vue
Normal file
61
pages/tabbar/components/home/sexSheet.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-actionsheet zIndex="9999"
|
||||
:show="showActionSheet"
|
||||
:item-list="itemList"
|
||||
@click="itemClick"
|
||||
@cancel="closeActionSheet">
|
||||
</tui-actionsheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiActionsheet from "@/components/thorui/tui-actionsheet/tui-actionsheet.vue"
|
||||
export default {
|
||||
components: {
|
||||
tuiActionsheet,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showActionSheet: false,
|
||||
itemList: [{
|
||||
text: "全部",
|
||||
label: '性别',
|
||||
value: '',
|
||||
color: "#2B2B2B"
|
||||
}, {
|
||||
text: "男生",
|
||||
label: '性别：男',
|
||||
value: '0',
|
||||
color: "#2B2B2B"
|
||||
}, {
|
||||
text: "女生",
|
||||
label: '性别：女',
|
||||
value: '1',
|
||||
color: "#2B2B2B"
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//隐藏组件
|
||||
closeActionSheet() {
|
||||
this.showActionSheet = false
|
||||
},
|
||||
//调用此方法显示组件
|
||||
openActionSheet() {
|
||||
this.showActionSheet = true;
|
||||
},
|
||||
itemClick(e) {
|
||||
this.$emit('sexOk', e);
|
||||
this.closeActionSheet();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
118
pages/tabbar/components/home/stickyBox.vue
Normal file
118
pages/tabbar/components/home/stickyBox.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tag-box">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="account-fill" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<text class="text">更多达人</text>
|
||||
</view>
|
||||
<view class="sticky-box">
|
||||
<view class="btn-tag" @click="tabClick('category')">
|
||||
<text class="text">{{searchTabs.categoryLabel}}</text>
|
||||
<u-icon name="arrow-down" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<view class="btn-tag" @click="tabClick('sex')">
|
||||
<text class="text">{{searchTabs.sexLabel}}</text>
|
||||
<u-icon name="arrow-down" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
<!-- <view class="btn-tag" @click="tabClick('level')">
|
||||
<text class="text">等级</text>
|
||||
<u-icon name="arrow-down" size="20" color="#aaa"></u-icon>
|
||||
</view> -->
|
||||
<!-- <view class="btn-tag" @click="tabClick('city')">
|
||||
<text class="text">城市</text>
|
||||
<u-icon name="arrow-down" size="20" color="#aaa"></u-icon>
|
||||
</view> -->
|
||||
<!-- <view class="btn-tag" @click="tabClick('city')">
|
||||
<text class="text">筛选</text>
|
||||
<u-icon name="shaixuan" custom-prefix="iconfont" size="20" color="#aaa"></u-icon>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
searchTabs() {
|
||||
return sheep.$store('sys').searchTabs;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
tabClick(e) {
|
||||
this.$emit('tabClick', e);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background-color: #fafafa;
|
||||
height: 100rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
background-color: #ddd;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-box {
|
||||
display: flex;
|
||||
|
||||
.btn-tag {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
margin-left: 5px;
|
||||
padding: 0px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
height: 48rpx;
|
||||
|
||||
.text {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
pages/tabbar/components/home/topBox.vue
Normal file
183
pages/tabbar/components/home/topBox.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="main-box">
|
||||
<view class="search-box">
|
||||
<u-search @custom="search" placeholder="可搜索达人名称/标签" bg-color="#fff" input-align="left" :action-style="actionStyle" v-model="keyword"></u-search>
|
||||
</view>
|
||||
|
||||
<view class="notice-box">
|
||||
<notice-bar></notice-bar>
|
||||
</view>
|
||||
|
||||
<view class="blind-box">
|
||||
<view class="blind-card">
|
||||
<view class="icon">
|
||||
<image style="width: 88rpx;height: 88rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/1d291d514fe8833f941924f273a5deb8f2cc8c06680fd49b6c08c58b16338c93.png"></image>
|
||||
</view>
|
||||
<view class="avatar-box">
|
||||
<image style="width: 320rpx;height: 64rpx;" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/41888275859ee7d4663bfcbd322a55ac3da9bbfc3621ca8a1137f39b2fde47bd.png"></image>
|
||||
<view @click="blindOrder" class="btn">随机下单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<rank-box :femaleWeekTopList="femaleWeekTopList" :maleWeekTopList="maleWeekTopList"></rank-box>
|
||||
</view>
|
||||
|
||||
<view class="card-box">
|
||||
<user-card :newList="newList" :hotList="hotList"></user-card>
|
||||
</view>
|
||||
|
||||
<view class="category-box">
|
||||
<category-card @tabClick="getCategory" :dataList="categoryList"></category-card>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<sticky-box @tabClick="tabClick" :scrollTop="scrollTop" :stickyTop="stickyTop"></sticky-box>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NoticeBar from '@/pages/tabbar/components/home/noticeBar.vue';
|
||||
import StickyBox from '@/pages/tabbar/components/home/stickyBox.vue';
|
||||
import RankBox from '@/pages/tabbar/components/home/rankBox.vue';
|
||||
import UserCard from '@/pages/tabbar/components/home/userCard.vue';
|
||||
import CategoryCard from '@/pages/tabbar/components/home/categoryCard.vue';
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import RewardApi from '@/sheep/api/worker/reward';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
NoticeBar,
|
||||
RankBox,
|
||||
StickyBox,
|
||||
UserCard,
|
||||
CategoryCard,
|
||||
},
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: uni.upx2px(80),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actionStyle: {
|
||||
backgroundColor: 'var(--ui-BG-Main)',
|
||||
borderRadius: '40px',
|
||||
padding: '7px',
|
||||
color: '#fff',
|
||||
fontSize: '28rpx',
|
||||
width: '80px',
|
||||
},
|
||||
keyword: '',
|
||||
categoryList: [],
|
||||
newList: [],
|
||||
hotList: [],
|
||||
maleWeekTopList: [],
|
||||
femaleWeekTopList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getInitData();
|
||||
},
|
||||
methods: {
|
||||
tabClick(e) {
|
||||
this.$emit('tabClick', e);
|
||||
},
|
||||
getCategory(e) {
|
||||
ClerkApi.getCategoryListByParentId(e.id).then(res => {
|
||||
this.$emit('categoryClick', e);
|
||||
if(res.data.length > 0){
|
||||
sheep.$store('sys').setCategoryList(res.data);
|
||||
}else{
|
||||
sheep.$store('sys').setCategoryList(this.categoryList);
|
||||
}
|
||||
});
|
||||
},
|
||||
getInitData() {
|
||||
ClerkApi.getHomeData().then(res => {
|
||||
this.categoryList = res.data.categoryList;
|
||||
this.newList = res.data.clerkNewList;
|
||||
this.hotList = res.data.clerkHotList;
|
||||
sheep.$store('sys').setCategoryList(this.categoryList);
|
||||
});
|
||||
|
||||
ClerkApi.getWeekTopList().then(res => {
|
||||
this.maleWeekTopList = res.data.maleWeekTopList;
|
||||
this.femaleWeekTopList = res.data.femaleWeekTopList;
|
||||
});
|
||||
|
||||
},
|
||||
search() {
|
||||
this.$emit('search', this.keyword);
|
||||
},
|
||||
blindOrder() {
|
||||
sheep.$router.go('/pages/worker/blind/index');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-box {
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
padding: 3px;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.notice-box {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
padding: 15px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.blind-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.blind-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40px;
|
||||
padding: 5px 10px;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
153
pages/tabbar/components/home/userCard.vue
Normal file
153
pages/tabbar/components/home/userCard.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="user-card-box">
|
||||
<view class="user-card">
|
||||
<view class="title">
|
||||
<view class="icon">
|
||||
<u-icon name="tuijian" 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 newList">
|
||||
<view class="avatar-box">
|
||||
<u-avatar mode="square" size="140" :src="item.avatar"></u-avatar>
|
||||
<view v-if="item.onlineStatus" class="badge"></view>
|
||||
</view>
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<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>
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
newList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
hotList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
detail(e) {
|
||||
this.$u.route({
|
||||
url: 'pages/clerk/detail/index',
|
||||
params: {
|
||||
id: e.id,
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
379
pages/tabbar/components/home/userList.vue
Normal file
379
pages/tabbar/components/home/userList.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<view @click="detail(item)" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in virtualList" class="user-card">
|
||||
<view class="avatar-box">
|
||||
<u-avatar mode="square" size="180" :src="item.avatar"></u-avatar>
|
||||
<view class="voice-play" v-if="item.sound">
|
||||
<voice-play :sec="item.soundTime" @tap.stop="playAudio(item)" :isPlay="item.id == playId"></voice-play>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-box">
|
||||
<view class="top-box">
|
||||
<view class="nickname-box">
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
<view class="sex-nv" v-if="item.sex == 1">
|
||||
<u-icon name="ziyuan2" size="22" custom-prefix="iconfont"></u-icon>
|
||||
<text>{{item.age}}</text>
|
||||
</view>
|
||||
<view class="sex-nan" v-if="item.sex == 0">
|
||||
<u-icon name="ziyuan3" size="22" custom-prefix="iconfont"></u-icon>
|
||||
<text>{{item.age}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="map-box">
|
||||
<u-icon name="map" size="32" color="#aaa"></u-icon>
|
||||
<view class="city" v-if="item.city">
|
||||
<text class="text">{{item.city}}</text>
|
||||
</view>
|
||||
<text v-else>未知</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="oline-box">
|
||||
<view v-if="item.clerkLevel">
|
||||
<view class="img-icon" v-if="item.clerkLevel.img">
|
||||
<img style="width: 100%;height: 100%;" :src="item.clerkLevel.img"></img>
|
||||
</view>
|
||||
<view class="icon" v-else>
|
||||
<u-icon name="wode_duanwei" size="36" custom-prefix="iconfont"></u-icon>
|
||||
<text>{{item.clerkLevel.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="badge-box">
|
||||
<view class="online" v-if="item.onlineStatus">
|
||||
<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
|
||||
<text class="text">在线</text>
|
||||
</view>
|
||||
<view class="online" v-else>
|
||||
<tui-badge :scaleRatio="0.8" type="gray" dot></tui-badge>
|
||||
<text class="text">离线</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag-list">
|
||||
<view class="tag-box">
|
||||
<span class="tag" v-for="(categoryName,index) in item.categoryNameList">{{categoryName}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="note-box">
|
||||
<u-icon name="tingkebiji" custom-prefix="iconfont" size="36" color="#3cc9a4"></u-icon>
|
||||
<view class="text">{{item.intro}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-btn">
|
||||
|
||||
<!-- <view class="icon" @click="toApply">
|
||||
<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/9966c9c45969e2b33987642950d9061c0471c1fa352f9a60825a4e88595090b8.png"></image>
|
||||
</view>
|
||||
|
||||
<view class="icon" @click="fenxiao">
|
||||
<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/8225510a565cf510a4ee26c6997aa2d967de4bc35f05e12558dae9e42ce8581a.png"></image>
|
||||
</view> -->
|
||||
|
||||
<!-- <view class="icon" @click="xiadan">
|
||||
<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/c50c079a74fcf57d5fbadc3b3354316eab6ce6de7ac382d5e0bb587bbffabbcf.png"></image>
|
||||
</view>
|
||||
|
||||
<view class="icon" @click="toKaidian">
|
||||
<image class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/4f453e94e7bccc7a0361e4baa004beafdec4f287db010d044d860863f969f3bb.png"></image>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VoicePlay from '@/pages/tabbar/components/home/voicePlay.vue';
|
||||
import TuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
|
||||
import sheep from '@/sheep';
|
||||
const audio = uni.createInnerAudioContext();
|
||||
export default {
|
||||
components: {
|
||||
VoicePlay,
|
||||
TuiBadge,
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playId: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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.sound;
|
||||
audio.play();
|
||||
},
|
||||
detail(e) {
|
||||
this.$u.route({
|
||||
url: 'pages/clerk/detail/index',
|
||||
params: {
|
||||
id: e.id,
|
||||
}
|
||||
});
|
||||
},
|
||||
toApply() {
|
||||
uni.showModal({
|
||||
title: '达人申请',
|
||||
content: '请确认是否成年，未成年禁止申请，申请后会有客服添加进行微信实名认证！',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/clerk/apply/index');
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
toKaidian() {
|
||||
uni.showModal({
|
||||
title: '搭建同款',
|
||||
content: '搭建同款请联系客服微信：rbtnet',
|
||||
success: function (res) {
|
||||
|
||||
},
|
||||
});
|
||||
},
|
||||
xiadan() {
|
||||
sheep.$router.go('/pages/worker/blind/index');
|
||||
},
|
||||
fenxiao() {
|
||||
uni.showModal({
|
||||
title: '分销申请',
|
||||
content: '点击邀请海报，生成海报，生成邀请码，邀请一人下单，可得下单20%佣金！',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/commission/index');
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-card {
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.voice-play {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
min-width: 0;
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.nickname-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
font-weight: bolder;
|
||||
margin-right: 4px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
|
||||
.sex-nv {
|
||||
background-color: #d5656f;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
.sex-nan {
|
||||
background-color: #0081ff;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
|
||||
.city {
|
||||
display: flex;
|
||||
|
||||
.text {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 88rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oline-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.img-icon {
|
||||
width: 40rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-color: #ff5ebd;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
line-height: 22rpx;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
.badge-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #aaa;
|
||||
|
||||
.online {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
background-color: #eef2f2;
|
||||
border-radius: 3px;
|
||||
color: #aaa;
|
||||
font-size: 24rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
padding: 5px 0;
|
||||
|
||||
.tag {
|
||||
white-space: nowrap;
|
||||
padding: 5px 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid #aaa;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tag:last-child:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.note-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #aaa;
|
||||
font-size: 24rpx;
|
||||
|
||||
.text {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-btn {
|
||||
position: fixed;
|
||||
bottom: 220rpx;
|
||||
right: 25rpx;
|
||||
|
||||
.icon {
|
||||
background-color: #ffff;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 10px #cccccc;
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
184
pages/tabbar/components/home/voicePlay.vue
Normal file
184
pages/tabbar/components/home/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: 140rpx;
|
||||
border-radius: 20px;
|
||||
padding: 8rpx 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.audio-box {
|
||||
height: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.audio1{
|
||||
margin-right: 2rpx;
|
||||
width: 1px;
|
||||
height: 33.3%;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.audio2{
|
||||
margin-right: 2rpx;
|
||||
width: 1px;
|
||||
height: 66.6%;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.audio3{
|
||||
margin-right: 2rpx;
|
||||
width: 1px;
|
||||
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: 1px;
|
||||
height: 33%;
|
||||
}
|
||||
25% {
|
||||
width: 1px;
|
||||
height: 66%;
|
||||
}
|
||||
50% {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
75% {
|
||||
width: 1px;
|
||||
height: 66%;
|
||||
}
|
||||
100% {
|
||||
width: 1px;
|
||||
height: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave2{
|
||||
0% {
|
||||
width: 1px;
|
||||
height: 66%;
|
||||
}
|
||||
25% {
|
||||
width: 1px;
|
||||
height: 33%;
|
||||
}
|
||||
50% {
|
||||
width: 1px;
|
||||
height: 66%;
|
||||
}
|
||||
75% {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 1px;
|
||||
height: 66%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave3{
|
||||
0% {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
50% {
|
||||
width: 1px;
|
||||
height: 33%;
|
||||
}
|
||||
100% {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
233
pages/tabbar/components/member/layout.vue
Normal file
233
pages/tabbar/components/member/layout.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<!-- 虚拟列表演示(不使用内置列表)(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" use-virtual-list :force-close-inner-list="true" :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" @initNav="initNav">
|
||||
<template v-if="$slots.navLeft" #left>
|
||||
<slot name="navLeft"></slot>
|
||||
</template>
|
||||
|
||||
<template v-if="$slots.navContent" #content>
|
||||
<slot name="navContent"></slot>
|
||||
</template>
|
||||
</nav-bar>
|
||||
</template>
|
||||
|
||||
<view>
|
||||
<slot name="top"></slot>
|
||||
</view>
|
||||
|
||||
<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
|
||||
<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
|
||||
<view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in virtualList">
|
||||
<view-item :index="index" :item="item" @onLongPress="onLongPress"></view-item>
|
||||
</view>
|
||||
</z-paging>
|
||||
|
||||
<view class="shade" v-show="showShade" @tap="hidePop">
|
||||
<view class="pop" :style="popStyle" :class="{'show':showPop}">
|
||||
<view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@/pages/tabbar/components/member/navBar.vue';
|
||||
import ViewItem from '@/pages/tabbar/components/member/viewItem.vue';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
ViewItem,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
|
||||
virtualList: [],
|
||||
winSize: {},
|
||||
/* 显示遮罩 */
|
||||
showShade: false,
|
||||
/* 显示操作弹窗 */
|
||||
showPop: false,
|
||||
/* 弹窗按钮列表 */
|
||||
popButton: ["标为关注", "置顶聊天", "删除该聊天"],
|
||||
/* 弹窗定位样式 */
|
||||
popStyle: "",
|
||||
/* 选择的用户下标 */
|
||||
pickerUserIndex: -1,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 100,
|
||||
navSwiper: false,
|
||||
navSwiperH: 80,
|
||||
navNotice: false,
|
||||
navNoticeH: 90,
|
||||
height: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initNav(e) {
|
||||
this.height = e.height;
|
||||
this.paddingTop = this.height;
|
||||
|
||||
if(this.navSwiper){
|
||||
this.paddingTop = this.paddingTop + this.navSwiperH;
|
||||
}
|
||||
|
||||
if(this.navNotice){
|
||||
this.paddingTop = this.paddingTop + this.navNoticeH;
|
||||
}
|
||||
},
|
||||
// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
|
||||
virtualListChange(vList) {
|
||||
this.virtualList = vList;
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
random: this.tabIndex === 1
|
||||
}
|
||||
UserApi.getUserPage(params).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);
|
||||
})
|
||||
},
|
||||
/* 获取窗口尺寸 */
|
||||
getWindowSize() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.winSize = {
|
||||
"witdh": res.windowWidth,
|
||||
"height": res.windowHeight
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/* 长按监听 */
|
||||
onLongPress(e) {
|
||||
let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];
|
||||
|
||||
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
|
||||
if (touches.clientY > (this.winSize.height / 2)) {
|
||||
style = `bottom:${this.winSize.height-touches.clientY}px;`;
|
||||
} else {
|
||||
style = `top:${touches.clientY}px;`;
|
||||
}
|
||||
if (touches.clientX > (this.winSize.witdh / 2)) {
|
||||
style += `right:${this.winSize.witdh-touches.clientX}px`;
|
||||
} else {
|
||||
style += `left:${touches.clientX}px`;
|
||||
}
|
||||
|
||||
this.popStyle = style;
|
||||
this.pickerUserIndex = Number(index);
|
||||
this.showShade = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showPop = true;
|
||||
}, 10);
|
||||
});
|
||||
},
|
||||
/* 隐藏弹窗 */
|
||||
hidePop() {
|
||||
this.showPop = false;
|
||||
this.pickerUserIndex = -1;
|
||||
setTimeout(() => {
|
||||
this.showShade = false;
|
||||
}, 250);
|
||||
},
|
||||
/* 选择菜单 */
|
||||
pickerMenu(e) {
|
||||
let index = Number(e.currentTarget.dataset.index);
|
||||
console.log(`第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`);
|
||||
// 在这里开启你的代码秀
|
||||
|
||||
uni.showToast({
|
||||
title: `第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`,
|
||||
icon: "none",
|
||||
mask: true,
|
||||
duration: 600
|
||||
});
|
||||
|
||||
/*
|
||||
因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
|
||||
如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
|
||||
*/
|
||||
this.hidePop();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.shade {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
.pop {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
width: 260rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28upx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
line-height: 80upx;
|
||||
transition: transform 0.15s ease-in-out 0s;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
transform: scale(0, 0);
|
||||
|
||||
&.show {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
&>view {
|
||||
padding: 0 20upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
&:active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
pages/tabbar/components/member/navBar.vue
Normal file
94
pages/tabbar/components/member/navBar.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
|
||||
<view>
|
||||
<view class="nav-box">
|
||||
<view class="action">
|
||||
<slot v-if="$slots.left" name="left"></slot>
|
||||
</view>
|
||||
|
||||
<slot v-if="$slots.content" name="content"></slot>
|
||||
<view class="title" v-else>
|
||||
<text class="nickname">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<slot name="card-swiper"></slot>
|
||||
</view>
|
||||
<view>
|
||||
<slot name="card-notice"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</tui-navigation-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
|
||||
export default {
|
||||
components: {
|
||||
tuiNavigationBar,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 1,
|
||||
height: 0,
|
||||
scrollTop: 0.5,
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-box {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
flex-direction: column;
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
.action {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
padding: 0 5px;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
216
pages/tabbar/components/member/viewItem.vue
Normal file
216
pages/tabbar/components/member/viewItem.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 用户消息 -->
|
||||
<view class="msg-list" @click="toChat(item)" :data-index="index">
|
||||
<view class="msg-user">
|
||||
<view class="avatar">
|
||||
<image class="img" :src="item.avatar"></image>
|
||||
<view class="badge"></view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="text-black">
|
||||
<view class="text-nickname">
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
<view class="sex-badge" v-if="item.sex == 1">
|
||||
<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<view class="sex-man" v-if="item.sex == 0">
|
||||
<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<image class="vip-img" src="@/static/images/vip.png"></image>
|
||||
</view>
|
||||
<text class="time">19:39</text>
|
||||
</view>
|
||||
<view class="text-gray">
|
||||
<view class="text-msg">
|
||||
<view>[已读]</view>
|
||||
<view>希望打个赏哦</view>
|
||||
</view>
|
||||
<view v-if="item.slashed == 1">
|
||||
<u-icon name="bell-slash" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-if="item.unreadMessageCount > 0">
|
||||
<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
export default {
|
||||
components: {
|
||||
tuiBadge,
|
||||
},
|
||||
props: {
|
||||
index: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
dd: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toChat(e) {
|
||||
ImConversationApi.createMemberConversation({
|
||||
userId: e.id,
|
||||
groupType: 1,
|
||||
lastMessageContentType: 1,
|
||||
}).then(res => {
|
||||
this.$u.route({
|
||||
url: 'pages/im/index',
|
||||
params: {
|
||||
groupId: res.data,
|
||||
receiveUserId: e.id,
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.msg-list {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
||||
.msg-user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.badge {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 1px solid #fff;
|
||||
position: absolute;
|
||||
background-color: #dd514c;
|
||||
border-radius: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
|
||||
.new {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background-color: #dd514c;
|
||||
border-radius: 85px;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #aaaaaa;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.text-nickname {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #aaaaaa;
|
||||
|
||||
.text-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #735fed;
|
||||
}
|
||||
|
||||
.sex-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e03997;
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
font-size: 8px;
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.sex-man {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0081ff;
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
font-size: 8px;
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.vip-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
.svip-img {
|
||||
width: 60rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
</style>
|
||||
208
pages/tabbar/components/message/friend.vue
Normal file
208
pages/tabbar/components/message/friend.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
|
||||
<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
|
||||
<view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList">
|
||||
<view-item :index="index" :item="item" @onLongPress="onLongPress"></view-item>
|
||||
</view>
|
||||
|
||||
<view class="shade" v-show="showShade" @tap="hidePop">
|
||||
<view class="pop" :style="popStyle" :class="{'show':showPop}">
|
||||
<view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ViewItem from '@/pages/tabbar/components/message/viewItem.vue';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
dayjs.extend(relativeTime);
|
||||
export default {
|
||||
components: {
|
||||
ViewItem,
|
||||
},
|
||||
props: {
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
winSize: {},
|
||||
/* 显示遮罩 */
|
||||
showShade: false,
|
||||
/* 显示操作弹窗 */
|
||||
showPop: false,
|
||||
/* 弹窗按钮列表 */
|
||||
popButton: [],
|
||||
/* 弹窗定位样式 */
|
||||
popStyle: "",
|
||||
/* 选择的用户下标 */
|
||||
pickerUserIndex: -1,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 100,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderList() {
|
||||
this.virtualList.forEach((order) => order.time = this.showDayTime(order.lastMessageTime));
|
||||
return this.virtualList;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getWindowSize();
|
||||
this.$emit('reload');
|
||||
},
|
||||
methods: {
|
||||
/* 获取窗口尺寸 */
|
||||
getWindowSize() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.winSize = {
|
||||
"witdh": res.windowWidth,
|
||||
"height": res.windowHeight
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/* 长按监听 */
|
||||
onLongPress(e) {
|
||||
let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];
|
||||
|
||||
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
|
||||
if (touches.clientY > (this.winSize.height / 2)) {
|
||||
style = `bottom:${this.winSize.height-touches.clientY}px;`;
|
||||
} else {
|
||||
style = `top:${touches.clientY}px;`;
|
||||
}
|
||||
if (touches.clientX > (this.winSize.witdh / 2)) {
|
||||
style += `right:${this.winSize.witdh-touches.clientX}px`;
|
||||
} else {
|
||||
style += `left:${touches.clientX}px`;
|
||||
}
|
||||
|
||||
this.popStyle = style;
|
||||
this.pickerUserIndex = Number(index);
|
||||
var conversation = this.orderList[this.pickerUserIndex];
|
||||
if(conversation.pinned == '0'){
|
||||
this.popButton = ["置顶聊天", "删除该聊天", "拉黑该用户"];
|
||||
}else{
|
||||
this.popButton = ["取消置顶", "删除该聊天", "拉黑该用户"];
|
||||
}
|
||||
this.showShade = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showPop = true;
|
||||
}, 10);
|
||||
});
|
||||
},
|
||||
pinned(id, pinned) {
|
||||
var form = {
|
||||
pinned: pinned,
|
||||
id: id,
|
||||
};
|
||||
ImConversationApi.pinnedMemberConversation(form).then(res => {
|
||||
this.$emit('reload');
|
||||
this.$refs.paging.reload();
|
||||
});
|
||||
},
|
||||
delete(id) {
|
||||
ImConversationApi.deleteMemberConversation(id).then(res => {
|
||||
this.$emit('reload');
|
||||
});
|
||||
},
|
||||
slashed(id) {
|
||||
ImConversationApi.slashedMemberConversation(id).then(res => {
|
||||
this.$emit('reload');
|
||||
});
|
||||
},
|
||||
/* 隐藏弹窗 */
|
||||
hidePop() {
|
||||
this.showPop = false;
|
||||
this.pickerUserIndex = -1;
|
||||
setTimeout(() => {
|
||||
this.showShade = false;
|
||||
}, 250);
|
||||
},
|
||||
/* 选择菜单 */
|
||||
pickerMenu(e) {
|
||||
let index = Number(e.currentTarget.dataset.index);
|
||||
console.log(`第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`);
|
||||
var conversation = this.orderList[this.pickerUserIndex];
|
||||
|
||||
if(index == 0){
|
||||
if(conversation.pinned == '0'){
|
||||
this.pinned(conversation.id, '1');
|
||||
}else{
|
||||
this.pinned(conversation.id, '0');
|
||||
}
|
||||
}else if(index == 1){
|
||||
this.delete(conversation.id);
|
||||
}else if(index == 2){
|
||||
this.slashed(conversation.id);
|
||||
}
|
||||
|
||||
this.hidePop();
|
||||
},
|
||||
showDayTime(datetime) {
|
||||
if (!datetime) return "";
|
||||
return dayjs(datetime).fromNow();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.shade {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
.pop {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
width: 260rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28upx;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
line-height: 80upx;
|
||||
transition: transform 0.15s ease-in-out 0s;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
transform: scale(0, 0);
|
||||
|
||||
&.show {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
&>view {
|
||||
padding: 0 20upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
&:active {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
149
pages/tabbar/components/message/gameBox.vue
Normal file
149
pages/tabbar/components/message/gameBox.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="option-box">
|
||||
<view class="tag-box">
|
||||
<u-icon name="tags" color="#88e6b4" size="34"></u-icon>
|
||||
<view class="name">服务类型</view>
|
||||
</view>
|
||||
<view class="span-box">
|
||||
<view @click="changeGame(option)" class="span" :class="catId == option.id ? 'active': '' " v-for="(option,t) in optionList">{{option.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="option-box" v-if="categoryList.length > 0">
|
||||
<view class="tag-box">
|
||||
<u-icon name="tags" color="#88e6b4" size="34"></u-icon>
|
||||
<view class="name">选项</view>
|
||||
</view>
|
||||
<view class="span-box">
|
||||
<view @click="changeCategory(option)" class="span" :class="gameId == option.id ? 'active': '' " v-for="(option,t) in categoryList">{{option.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="option-box" v-if="goodsList.length > 0">
|
||||
<view class="tag-box">
|
||||
<u-icon name="tags" color="#88e6b4" size="34"></u-icon>
|
||||
<view class="name">选项</view>
|
||||
</view>
|
||||
<view class="span-box">
|
||||
<view @click="changeGoods(option)" class="span" :class="goodsId == option.id ? 'active': '' " v-for="(option,t) in goodsList">{{option.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
optionList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
catId: -1,
|
||||
gameId: -1,
|
||||
goodsId: -1,
|
||||
categoryList: [],
|
||||
goodsList: [],
|
||||
goodsList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeGame(e) {
|
||||
this.gameId = -1;
|
||||
this.goodsId = -1;
|
||||
|
||||
this.catId = e.id;
|
||||
if(e.categoryList){
|
||||
this.goodsList = [];
|
||||
this.categoryList = e.categoryList;
|
||||
}else{
|
||||
this.categoryList = [];
|
||||
this.goodsList = e.goodsList;
|
||||
}
|
||||
|
||||
var node = {
|
||||
catId: this.catId,
|
||||
gameId: this.gameId,
|
||||
goodsId: this.goodsId,
|
||||
price: 0,
|
||||
}
|
||||
this.$emit('update:modelValue', node);
|
||||
},
|
||||
changeCategory(e) {
|
||||
this.goodsId = -1;
|
||||
this.gameId = e.id;
|
||||
this.goodsList = e.goodsList;
|
||||
|
||||
var node = {
|
||||
catId: this.catId,
|
||||
gameId: this.gameId,
|
||||
goodsId: this.goodsId,
|
||||
price: 0,
|
||||
}
|
||||
this.$emit('update:modelValue', node);
|
||||
},
|
||||
changeGoods(e) {
|
||||
this.goodsId = e.id;
|
||||
var node = {
|
||||
catId: this.catId,
|
||||
gameId: this.gameId,
|
||||
goodsId: this.goodsId,
|
||||
price: e.price,
|
||||
}
|
||||
this.$emit('update:modelValue', node);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.option-box {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tag-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.span-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.span {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-width: 120rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
margin-right: 7px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--ui-BG-Main);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
pages/tabbar/components/message/navBar.vue
Normal file
106
pages/tabbar/components/message/navBar.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop">
|
||||
<view class="tab-box">
|
||||
<view class="zhong">
|
||||
<view class="tab-box">
|
||||
<block v-for="(item,i) in tabList" :key="i">
|
||||
<view v-if="item.enabled" class="title-label" @click="tabsChange" :data-i="i" >
|
||||
<text
|
||||
:style="{fontWeight:current==i?'bold':'',fontSize:current==i?'36rpx':'28rpx'}">
|
||||
{{item.name}}
|
||||
</text>
|
||||
</view>
|
||||
</block>
|
||||
</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: {
|
||||
tabList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 1,
|
||||
height: 0,
|
||||
scrollTop: 0.5,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current: {
|
||||
get() {
|
||||
return sheep.$store('sys').messageTabIndex;
|
||||
},
|
||||
},
|
||||
},
|
||||
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) {
|
||||
var current = e.currentTarget.dataset.i;
|
||||
sheep.$store('sys').setMessageTabIndex(current);
|
||||
this.$emit('change', current);
|
||||
},
|
||||
}
|
||||
}
|
||||
</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>
|
||||
346
pages/tabbar/components/message/peiwan.vue
Normal file
346
pages/tabbar/components/message/peiwan.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<view class="page-box">
|
||||
<view class="game-card">
|
||||
<view class="title">
|
||||
<u-icon name="tags" color="#f5736a" size="34"></u-icon>
|
||||
<view class="name">店员性别</view>
|
||||
</view>
|
||||
|
||||
<view class="sex-option">
|
||||
<view class="sex-tab" @click="sexChange(1)">
|
||||
<view class="img-span">
|
||||
<img v-if="form.sex == 1" class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/16d050d0b229f12a8997a8118ca815c936bdb9b580db48ab8b2737181ca8518a.png"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/15c4eb12397fb3374be6e8bf38854b708abb09f61fb076eaa0c23d5f92cc9583.png"></img>
|
||||
<view class="sex-ok" v-if="form.sex == 1">
|
||||
<u-icon name="checkmark-circle-fill" color="#fe8497" size="34"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="name">小姐姐</view>
|
||||
</view>
|
||||
|
||||
<view class="sex-tab" @click="sexChange(0)">
|
||||
<view class="img-span">
|
||||
<img v-if="form.sex == 0" class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/74e49dd19affb2c8016df4805d3947bab3a93af83236e4f875b5ea18bf57d8b3.png"></img>
|
||||
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d0757757a5b4c0559f1bc1d373ab983902bd056bda7ca4be6c2fa04553b4665d.png"></img>
|
||||
<view class="sex-ok" v-if="form.sex == 0">
|
||||
<u-icon name="checkmark-circle-fill" color="#6497f8" size="34"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="name">小哥哥</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="title">
|
||||
<u-icon name="tags" color="#e475e5" size="34"></u-icon>
|
||||
<view class="name">店员等级</view>
|
||||
</view>
|
||||
|
||||
<view class="level-option">
|
||||
<view @click="levelChange(option)" class="tab" :class="option.id == form.workerClerkLevelId ? 'active' : ''" v-for="(option,t) in levelList">{{option.name}}</view>
|
||||
</view>
|
||||
|
||||
<game-box v-model="game" :optionList="goodsList"></game-box>
|
||||
|
||||
<view class="input-box">
|
||||
<view class="title">
|
||||
<u-icon name="tags" color="#e475e5" size="34"></u-icon>
|
||||
<view class="name">购买数量</view>
|
||||
</view>
|
||||
<view class="step-span">
|
||||
<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="form.num" @change="change"></tui-numberbox>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-box">
|
||||
<view class="title">
|
||||
<u-icon name="tags" color="#e475e5" size="34"></u-icon>
|
||||
<view class="name">排除下单过的店员</view>
|
||||
</view>
|
||||
<view class="step-span">
|
||||
<u-switch active-color="var(--ui-BG-Main)" size="40" v-model="form.blind"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bottom-box">
|
||||
<view class="price-box">
|
||||
<text>总价：</text>
|
||||
<text class="price">{{ fen2yuan(game.price*form.num) }}</text>
|
||||
<text>钻石</text>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="pay-btn" @click="confirm">立即下单</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gameBox from '@/pages/tabbar/components/message/gameBox.vue';
|
||||
import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
gameBox,
|
||||
tuiNumberbox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
num: 1,
|
||||
goodsId: -1,
|
||||
price: 0,
|
||||
sex: 2,
|
||||
workerClerkLevelId: 0,
|
||||
blind: false,
|
||||
},
|
||||
|
||||
game: {
|
||||
goodsId: -1,
|
||||
price: 0,
|
||||
},
|
||||
|
||||
goodsList: [],
|
||||
|
||||
levelList: [
|
||||
{
|
||||
id: 0,
|
||||
name: '金牌',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '银牌',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '铜牌',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
ClerkApi.getClerkBlind().then(res => {
|
||||
this.goodsList = res.data.goodsList;
|
||||
this.levelList = res.data.clerkLevelList;
|
||||
});
|
||||
},
|
||||
sexChange(e) {
|
||||
this.form.sex = e;
|
||||
},
|
||||
levelChange(e) {
|
||||
this.form.workerClerkLevelId = e.id;
|
||||
},
|
||||
change(e) {
|
||||
this.form.num = e.value
|
||||
},
|
||||
fen2yuan(price) {
|
||||
var f = 0;
|
||||
var p = (price / 100.0).toFixed(0);
|
||||
var p1 = (price / 100.0).toFixed(1);
|
||||
var p2 = (price / 100.0).toFixed(2);
|
||||
if(p*100 == price){
|
||||
f = 0;
|
||||
}else if(p1*100 == price){
|
||||
f = 1;
|
||||
}else if(p2*100 == price){
|
||||
f = 2;
|
||||
}
|
||||
return (price / 100.0).toFixed(f)
|
||||
},
|
||||
confirm() {
|
||||
this.form.goodsId = this.game.goodsId,
|
||||
this.form.price = this.game.price*this.form.num
|
||||
if(this.form.sex > 1) {
|
||||
sheep.$helper.toast('请选择店员性别');
|
||||
return;
|
||||
}
|
||||
if(this.form.workerClerkLevelId < 1) {
|
||||
sheep.$helper.toast('请选择店员等级');
|
||||
return;
|
||||
}
|
||||
if(this.form.goodsId < 0) {
|
||||
sheep.$helper.toast('请选择服务类型');
|
||||
return;
|
||||
}
|
||||
if(this.form.price < 1) {
|
||||
sheep.$helper.toast('价格不能为0');
|
||||
return;
|
||||
}
|
||||
var data = {
|
||||
workerClerkLevelId: this.form.workerClerkLevelId,
|
||||
sex: this.form.sex,
|
||||
blind: this.form.blind,
|
||||
items : [
|
||||
{
|
||||
skuId: this.form.goodsId,
|
||||
count: this.form.num,
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
sheep.$router.go('/pages/order/blind/confirm',{data: JSON.stringify(data)});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-box {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.sex-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 15px 0px;
|
||||
|
||||
.sex-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-right: 30px;
|
||||
|
||||
.img-span {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sex-ok {
|
||||
background-color: #fff;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
padding-top: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.level-option {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tab {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-width: 120rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
margin-right: 7px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
background: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.step-span {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100rpx;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
|
||||
.price-box {
|
||||
color: #fb932c;
|
||||
font-size: 28rpx;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.price {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
width: 50%;
|
||||
padding-left: 15px;
|
||||
|
||||
.pay-btn {
|
||||
background-color: var(--ui-BG-Main);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 40px;
|
||||
font-size: 28rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
265
pages/tabbar/components/message/viewItem.vue
Normal file
265
pages/tabbar/components/message/viewItem.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 系统消息 -->
|
||||
<view class="msg-list" v-if="item.groupType == 3">
|
||||
<view class="msg-user">
|
||||
<view class="avatar">
|
||||
<!-- <image class="img" src="@/static/images/bell.png"></image> -->
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="text-black">
|
||||
<view class="text-nickname">
|
||||
<view class="nickname green">通知助手</view>
|
||||
</view>
|
||||
<text class="time">前天</text>
|
||||
</view>
|
||||
<view class="text-gray">
|
||||
<view class="text-msg">
|
||||
<view>希望打个赏哦</view>
|
||||
</view>
|
||||
<view v-if="item.slashed == 1">
|
||||
<u-icon name="bell-slash" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-if="item.unreadMessageCount > 0">
|
||||
<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<view class="msg-list" @longpress="onLongPress" :data-index="index" v-if="item.groupType == 1">
|
||||
<view class="msg-user">
|
||||
<view class="avatar" @click="detail(item)">
|
||||
<image class="img" :src="item.avatar"></image>
|
||||
<view class="badge" v-if="item.online"></view>
|
||||
</view>
|
||||
<view class="content" @click="toChat(item)">
|
||||
<view class="text-black">
|
||||
<view class="text-nickname">
|
||||
<view class="nickname">{{item.nickname}}</view>
|
||||
<view class="sex-badge" v-if="item.sex == 2">
|
||||
<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<view class="sex-man" v-if="item.sex == 1">
|
||||
<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<!-- <image class="vip-img" src="@/static/images/vip.png"></image> -->
|
||||
</view>
|
||||
<text class="time">{{item.time}}</text>
|
||||
</view>
|
||||
<view class="text-gray">
|
||||
<view class="text-msg">
|
||||
<view v-if="item.lastMessageReadStatus == '1'">已读</view>
|
||||
<view class="text" v-if="item.lastMessageContentType == 1">{{item.lastMessageContent}}</view>
|
||||
<view v-if="item.lastMessageContentType == 3">[语音消息]</view>
|
||||
<view v-if="item.lastMessageContentType == 4">[图片消息]</view>
|
||||
</view>
|
||||
<view v-if="item.slashed == 1">
|
||||
<u-icon name="bell-slash" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-if="item.unreadMessageCount > 0">
|
||||
<tui-badge :scaleRatio="0.8" type="green">{{item.unreadMessageCount}}</tui-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
|
||||
export default {
|
||||
components: {
|
||||
tuiBadge,
|
||||
},
|
||||
props: {
|
||||
index: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
dd: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLongPress(e) {
|
||||
this.$emit('onLongPress', e);
|
||||
},
|
||||
detail(e) {
|
||||
sheep.$router.go('/pages/user/detail/index',{id: e.userId});
|
||||
},
|
||||
toChat(e) {
|
||||
e.unreadMessageCount = 0;
|
||||
this.$u.route({
|
||||
url: 'pages/im/index',
|
||||
params: {
|
||||
groupId: e.groupId,
|
||||
receiveUserId: e.userId,
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.msg-list {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
||||
.msg-user{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
background-color: #ddd;
|
||||
border-radius: 100%;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.badge {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 1px solid #fff;
|
||||
position: absolute;
|
||||
background-color: #dd514c;
|
||||
border-radius: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
|
||||
.new {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background-color: #dd514c;
|
||||
border-radius: 85px;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #aaaaaa;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.text-nickname {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #aaaaaa;
|
||||
|
||||
.text-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 340rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #735fed;
|
||||
}
|
||||
|
||||
.sex-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e03997;
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
font-size: 8px;
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.sex-man {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0081ff;
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
font-size: 8px;
|
||||
height: 30rpx;
|
||||
width: 30rpx;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.vip-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
.svip-img {
|
||||
width: 60rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
</style>
|
||||
62
pages/tabbar/components/mine/bgBox.vue
Normal file
62
pages/tabbar/components/mine/bgBox.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="bg-box">
|
||||
<!-- <view class="tip-btn">
|
||||
<view class="text">Tip: 完善资料，更能吸引异性的关注哦~</view>
|
||||
</view> -->
|
||||
<u-image width="100%" height="400rpx" :fade="false" :src="userInfo.avatar ? userInfo.avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg'"></u-image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg-box {
|
||||
background-color: red;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.tip-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
|
||||
.text {
|
||||
background-color: #3333334a;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40px;
|
||||
padding: 3px 10px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
96
pages/tabbar/components/mine/layout.vue
Normal file
96
pages/tabbar/components/mine/layout.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<!-- 普通模式演示(vue) -->
|
||||
<template>
|
||||
<view class="content">
|
||||
<z-paging ref="paging" v-model="dataList" @scroll="scroll" :paging-style="{ paddingTop: 0 + 'px', paddingBottom: paddingBottom + 'rpx' }" @query="queryList">
|
||||
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
||||
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
||||
<template #top>
|
||||
<nav-bar :scrollTop="scrollTop" @initNav="initNav"></nav-bar>
|
||||
</template>
|
||||
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
||||
<view>
|
||||
<bg-box></bg-box>
|
||||
<main-box></main-box>
|
||||
</view>
|
||||
<!-- 自定义没有更多数据view -->
|
||||
<template #empty>
|
||||
<view></view>
|
||||
</template>
|
||||
<!-- 自定义没有更多数据view -->
|
||||
<template #loadingMoreNoMore>
|
||||
<view></view>
|
||||
</template>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@/pages/tabbar/components/mine/navBar.vue';
|
||||
import BgBox from '@/pages/tabbar/components/mine/bgBox.vue';
|
||||
import MainBox from '@/pages/tabbar/components/mine/mainBox.vue';
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
BgBox,
|
||||
MainBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
paddingTop: 0,
|
||||
paddingBottom: 100,
|
||||
height: 0,
|
||||
scrollTop: 0.5,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const isLogin = sheep.$store('user').isLogin;
|
||||
if(isLogin) {
|
||||
this.getClerk();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initNav(e) {
|
||||
this.height = e.height;
|
||||
this.paddingTop = this.height;
|
||||
},
|
||||
tabChange(index) {
|
||||
this.tabIndex = index;
|
||||
// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
type: this.tabIndex + 1
|
||||
}
|
||||
this.$refs.paging.complete([]);
|
||||
},
|
||||
scroll(e) {
|
||||
this.scrollTop = e.detail.scrollTop;
|
||||
},
|
||||
getClerk() {
|
||||
ClerkApi.getClerkList().then((res) => {
|
||||
if(res.data[0]){
|
||||
sheep.$store('sys').setCurrentClerk(res.data[0]);
|
||||
}else{
|
||||
sheep.$store('sys').setCurrentClerk({
|
||||
id: -1,
|
||||
avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
502
pages/tabbar/components/mine/mainBox.vue
Normal file
502
pages/tabbar/components/mine/mainBox.vue
Normal file
@@ -0,0 +1,502 @@
|
||||
<template>
|
||||
<view class="main-box">
|
||||
<view class="info-box">
|
||||
<view class="avatar-box">
|
||||
<u-avatar @click="editUser" size="160" :src="isLogin ? userInfo.avatar : ''"></u-avatar>
|
||||
<view class="nickname-box">
|
||||
<view class="vip-box">
|
||||
<view class="nickname">{{ userInfo?.nickname || nickname }}</view>
|
||||
<!-- <image class="vip-img" src="@/static/images/vip.png"></image> -->
|
||||
</view>
|
||||
<view class="id-box" @click="onCopy(userInfo.id)">
|
||||
<text class="text">ID: {{ userInfo?.id || 88888 }}</text>
|
||||
<u-icon v-if="userInfo.id" name="outline-copy" custom-prefix="iconfont" size="28"></u-icon>
|
||||
</view>
|
||||
<view class="tag-box">
|
||||
<view class="tag-btn" @click="wallet">
|
||||
<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/c9cec930606ecf028e61bce7415a2587e8089abd5d4144bb52b7bd487daedc26.png"></image>
|
||||
<text>钻石</text>
|
||||
</view>
|
||||
<!-- <view class="tag-btn">
|
||||
<image class="icon-img" src="@/static/images/shop.png"></image>
|
||||
<text>礼物</text>
|
||||
</view> -->
|
||||
<view class="tag-btn" v-if="friendEnabled" @click="point">
|
||||
<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/ab8540e145165ed31ba32f8673cc3e6bddf72161b20789a7c0ecfc36fcbf67d8.png"></image>
|
||||
<text>积分</text>
|
||||
</view>
|
||||
<view class="tag-btn" @click="toTrend">
|
||||
<image class="icon-img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/06d4ac22b8acbdb021f698531ddc0091f8b1a4c1b938c4189025edccc7a4beed.png"></image>
|
||||
<text>动态</text>
|
||||
</view>
|
||||
<view class="tag-btn" @click="toGift">
|
||||
<text>礼物</text>
|
||||
<u-icon name="arrow-right" size="20" color="#aaa"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="fans-box">
|
||||
<view class="tag">
|
||||
<text class="tag-num">2.3万</text>
|
||||
<text>获赞</text>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<text class="tag-num">22.3万</text>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<text class="tag-num">223.3万</text>
|
||||
<text>粉丝</text>
|
||||
</view>
|
||||
<view class="tag">
|
||||
<text class="tag-num">1000.3万</text>
|
||||
<text>信用分</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="vip-box" v-if="isPass && friendEnabled" @click="toVip">
|
||||
<vip-card></vip-card>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="card-box" v-if="isPass">
|
||||
<view class="title">我的订单</view>
|
||||
<view class="card-item">
|
||||
<view class="item" @click="myOrder(1)">
|
||||
<u-icon name="outline-empty-wallet-time" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">待付款</view>
|
||||
<tui-badge v-if="numData.orderCount['unpaidCount'] > 0" absolute top="30rpx" right="30rpx" :scaleRatio="0.8" type="green">{{numData.orderCount['unpaidCount']}}</tui-badge>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="myOrder(2)">
|
||||
<u-icon name="outline-timer-1" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">待服务</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="myOrder(3)">
|
||||
<u-icon name="outline-timer-start" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">服务中</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="myOrder(4)">
|
||||
<u-icon name="vuesax-outline-task-square" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">已完成</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-box" v-if="isPass && peiwanEnabled && clerk.id > 0">
|
||||
<view class="title">接单中心</view>
|
||||
<view class="card-item">
|
||||
|
||||
<view class="item" @click="receiveOrder">
|
||||
<u-icon name="jiedan" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">接单中心</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="blindOrder">
|
||||
<u-icon name="snatch" custom-prefix="iconfont" size="56"></u-icon>
|
||||
<view class="name">抢单中心</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="workerList">
|
||||
<u-icon name="dianyuan" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">达人资料</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="reward">
|
||||
<u-icon name="zhaopiandashangjilu" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">打赏记录</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="item">
|
||||
<u-icon name="shimingrenzheng" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">实名认证</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-box">
|
||||
<view class="title">常用工具</view>
|
||||
|
||||
<view class="card-item">
|
||||
<!-- <view class="item">
|
||||
<u-icon name="dashang" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">打赏店员</view>
|
||||
</view> -->
|
||||
|
||||
<view class="item" v-if="isPass && peiwanEnabled" @click="toApply">
|
||||
<u-icon name="dianyuan1" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">达人申请</view>
|
||||
</view>
|
||||
|
||||
<view v-if="brokerageEnabled" class="item" @click="fenxiao">
|
||||
<u-icon name="fenxiaozhongxin2" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">分销中心</view>
|
||||
</view>
|
||||
|
||||
<view class="item" v-if="friendEnabled" @click="sign">
|
||||
<u-icon name="calendar" size="50"></u-icon>
|
||||
<view class="name">签到有礼</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="toFans">
|
||||
<u-icon name="xingxing" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">收藏达人</view>
|
||||
</view>
|
||||
|
||||
<view class="item" v-if="friendEnabled" @click="youhuiquan">
|
||||
<u-icon name="youhuiquan" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">优惠券</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="toChat">
|
||||
<u-icon name="kefuzhongxin" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">购买授权</view>
|
||||
</view>
|
||||
|
||||
<view class="item" @click="cashApply">
|
||||
<u-icon name="tixian" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">申请提现</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="item">
|
||||
<u-icon name="mianfei-liwutujian" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">礼物图鉴</view>
|
||||
</view>
|
||||
|
||||
<view class="item">
|
||||
<u-icon name="kaidian" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">我要开店</view>
|
||||
</view>
|
||||
|
||||
<view class="item">
|
||||
<u-icon name="outline-timer-1" custom-prefix="iconfont" size="50"></u-icon>
|
||||
<view class="name">合作推广</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<view class="co-right">尔加科技版权所有</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
|
||||
import VipCard from '@/pages/tabbar/components/mine/vipCard.vue';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
export default {
|
||||
components: {
|
||||
VipCard,
|
||||
tuiBadge,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nickname: '请先登陆',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
isLogin: {
|
||||
get() {
|
||||
return sheep.$store('user').isLogin;
|
||||
},
|
||||
},
|
||||
numData: {
|
||||
get() {
|
||||
return sheep.$store('user').numData;
|
||||
},
|
||||
},
|
||||
clerk() {
|
||||
return sheep.$store('sys').currentClerk;
|
||||
},
|
||||
brokerageEnabled() {
|
||||
return sheep.$store('user').tradeConfig.brokerageEnabled;
|
||||
},
|
||||
peiwanEnabled() {
|
||||
return sheep.$store('user').tradeConfig.peiwanEnabled;
|
||||
},
|
||||
friendEnabled() {
|
||||
return sheep.$store('user').tradeConfig.friendEnabled
|
||||
},
|
||||
isPass() {
|
||||
return sheep.$store('user').tradeConfig.weixinEnabled;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toApply() {
|
||||
uni.showModal({
|
||||
title: '达人申请',
|
||||
content: '请确认是否成年，未成年禁止申请，申请后会有客服添加进行微信实名认证！',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/worker/workerList/index');
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
toFans() {
|
||||
sheep.$router.go('/pages/clerk/fans/list');
|
||||
},
|
||||
toVip() {
|
||||
sheep.$router.go('/pages/user/vip');
|
||||
},
|
||||
receiveOrder() {
|
||||
sheep.$router.go('/pages/order/worker/list');
|
||||
},
|
||||
blindOrder() {
|
||||
sheep.$router.go('/pages/order/blind/list');
|
||||
},
|
||||
myOrder(type) {
|
||||
sheep.$router.go('/pages/order/my/list', {type: type});
|
||||
},
|
||||
cashApply() {
|
||||
sheep.$router.go('/pages/commission/wallet');
|
||||
},
|
||||
fenxiao() {
|
||||
uni.showModal({
|
||||
title: '分销申请',
|
||||
content: '点击邀请海报，生成海报，生成邀请码，邀请一人下单，可得下单20%佣金！',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/commission/index');
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
workerList() {
|
||||
sheep.$router.go('/pages/worker/workerList/index');
|
||||
},
|
||||
youhuiquan() {
|
||||
sheep.$router.go('/pages/coupon/list',{type: 'all'});
|
||||
},
|
||||
wallet() {
|
||||
sheep.$router.go('/pages/user/wallet/money')
|
||||
},
|
||||
point() {
|
||||
sheep.$router.go('/pages/user/wallet/score')
|
||||
},
|
||||
sign() {
|
||||
sheep.$router.go('/pages/app/sign')
|
||||
},
|
||||
toGift() {
|
||||
sheep.$router.go('/pages/reward/list')
|
||||
},
|
||||
toTrend() {
|
||||
sheep.$router.go('/pages/trend/my/list')
|
||||
},
|
||||
reward() {
|
||||
sheep.$router.go('/pages/reward/list')
|
||||
},
|
||||
// 复制
|
||||
onCopy(text) {
|
||||
if(text){
|
||||
sheep.$helper.copyText(text+"");
|
||||
}
|
||||
},
|
||||
toChat() {
|
||||
//sheep.$router.go('/pages/chat/index');
|
||||
uni.showModal({
|
||||
title: '购买授权',
|
||||
content: '客服微信：rbtnet',
|
||||
success: function (res) {
|
||||
|
||||
},
|
||||
});
|
||||
},
|
||||
toKaidian() {
|
||||
uni.showModal({
|
||||
title: '搭建同款',
|
||||
content: '搭建同款请联系客服微信：rbtnet',
|
||||
success: function (res) {
|
||||
|
||||
},
|
||||
});
|
||||
},
|
||||
async editUser() {
|
||||
if(!this.friendEnabled){
|
||||
sheep.$router.go('/pages/user/info')
|
||||
return;
|
||||
}
|
||||
|
||||
if(this.isLogin){
|
||||
if(this.isPass){
|
||||
await sheep.$store('user').getInfo();
|
||||
showAuthModal('chatAuthorization');
|
||||
}
|
||||
}else{
|
||||
showAuthModal();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-box {
|
||||
margin-top: 300rpx;
|
||||
background-color: #fafafa;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
|
||||
.info-box {
|
||||
//background-color: #fff;
|
||||
padding: 15px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.nickname-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.vip-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vip-img {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.id-box {
|
||||
margin: 5px 0;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
|
||||
.text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag-btn {
|
||||
background-color: #efe4e4;
|
||||
border-radius: 10px;
|
||||
padding: 3px 5px;
|
||||
font-size: 10px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-img {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fans-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
padding-top: 0;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
|
||||
.tag-num {
|
||||
margin-bottom: 5px;
|
||||
font-size: 32rpx;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.card-box {
|
||||
background-color: #fff;
|
||||
margin: 30rpx;
|
||||
margin-top: 0;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.title {
|
||||
font-size: 15px;
|
||||
font-weight: bolder;
|
||||
padding: 38rpx 0 10rpx 40rpx;
|
||||
color: #1f2122;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25%;
|
||||
padding: 30rpx 0;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
margin-top: 10rpx;
|
||||
font-size: 11px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 320rpx;
|
||||
}
|
||||
|
||||
.co-right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
108
pages/tabbar/components/mine/navBar.vue
Normal file
108
pages/tabbar/components/mine/navBar.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
|
||||
<view class="content-bpx">
|
||||
<view class="left-box">
|
||||
<view @click="setBtn" class="set-btn">
|
||||
<u-icon name="setting" :color="opacity > 0.85 ? '#333' : '#fff'" size="48"></u-icon>
|
||||
</view>
|
||||
<view @click="editUser" class="set-btn" v-show="opacity < 1">
|
||||
<u-icon name="edit-pen" size="48"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="opacity > 0.85" class="nickname">{{userInfo.nickname}}</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: '',
|
||||
},
|
||||
//滚动条滚动距离
|
||||
scrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 0,
|
||||
height: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
},
|
||||
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;
|
||||
},
|
||||
setBtn() {
|
||||
sheep.$router.go('/pages/public/setting')
|
||||
},
|
||||
editUser() {
|
||||
sheep.$router.go('/pages/user/info')
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-bpx {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
justify-content: center;
|
||||
|
||||
.left-box {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: bolder;
|
||||
color: #1f2122;
|
||||
}
|
||||
|
||||
.set-btn {
|
||||
padding: 0 15px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
109
pages/tabbar/components/mine/vipCard.vue
Normal file
109
pages/tabbar/components/mine/vipCard.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="vip-card">
|
||||
<view class="vip-content">
|
||||
<view>
|
||||
<view class="name">VIP<text class="text">会员中心</text></view>
|
||||
<view class="remark">成为VIP尊享会员可享受更多权益~</view>
|
||||
</view>
|
||||
<view class="vip-btn" v-if="userInfo.isVip">
|
||||
<u-icon name="eye-fill" size="26"></u-icon>
|
||||
<text class="text">查看特权</text>
|
||||
</view>
|
||||
<view class="vip-btn" v-else>
|
||||
<u-icon name="lock-fill" size="26"></u-icon>
|
||||
<text class="text">立即开通</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-card {
|
||||
background: linear-gradient(-120deg, #2bab89, #388772, #3e8472, #227761);
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.vip-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0px 15px;
|
||||
|
||||
.name {
|
||||
color: #a8f9e4;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.remark {
|
||||
font-size: 10px;
|
||||
color: #0fe3ac;
|
||||
}
|
||||
|
||||
.vip-btn {
|
||||
background: linear-gradient(-120deg, #2c8970, #3c8975, #39a287, #0eb68b);
|
||||
padding: 7px 10px;
|
||||
border-radius: 40px;
|
||||
font-size: 10px;
|
||||
|
||||
.text {
|
||||
margin-left: 2px;
|
||||
color: #dafff5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vip-card:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
244
pages/tabbar/home.vue
Normal file
244
pages/tabbar/home.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="content">
|
||||
<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
|
||||
<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
|
||||
<z-paging ref="paging" :auto="false" defaultPageSize="20" use-virtual-list :force-close-inner-list="true" :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 :tabList="tabList" @initNav="initNav" @change="change"></nav-bar>
|
||||
</template>
|
||||
|
||||
<peiwan @tabClick="tabClick" @search="search" @categoryClick="categoryClick" v-if="tabType == 'peiwan'" :stickyTop="paddingTop" :scrollTop="scrollTop" :virtualList="virtualList"></peiwan>
|
||||
<friend @tabClick="tabClick" @search="search" v-if="tabType == 'friend'" :stickyTop="paddingTop" :scrollTop="scrollTop" :virtualList="virtualList"></friend>
|
||||
|
||||
</z-paging>
|
||||
|
||||
<sex-sheet ref="sexSheet" @sexOk="sexOk"></sex-sheet>
|
||||
<su-region-picker :show="cityShow" @cancel="cityShow = false" @confirm="cityOk" />
|
||||
<category-sheet ref="categorySheet" @categoryOk="categoryOk"></category-sheet>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@/pages/tabbar/components/home/navBar.vue';
|
||||
import peiwan from '@/pages/tabbar/components/home/peiwan.vue';
|
||||
import friend from '@/pages/tabbar/components/home/friend.vue';
|
||||
import SexSheet from '@/pages/tabbar/components/home/sexSheet.vue';
|
||||
import CategorySheet from '@/pages/tabbar/components/home/categorySheet.vue';
|
||||
import sheep from '@/sheep';
|
||||
import ClerkApi from '@/sheep/api/worker/clerk';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
peiwan,
|
||||
friend,
|
||||
SexSheet,
|
||||
CategorySheet,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
|
||||
virtualList: [],
|
||||
scrollTop: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 100,
|
||||
height: 0,
|
||||
|
||||
cityShow: false,
|
||||
params: {
|
||||
province: true,
|
||||
city: true,
|
||||
area: false
|
||||
},
|
||||
|
||||
tabList: [
|
||||
{
|
||||
name: '达人',
|
||||
enabled: false,
|
||||
type: 'peiwan',
|
||||
},{
|
||||
name: '交友',
|
||||
enabled: false,
|
||||
type: 'friend',
|
||||
},],
|
||||
|
||||
tabType: '',
|
||||
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
sex: '',
|
||||
city: '',
|
||||
isCity: 1,
|
||||
maxAge: 50,
|
||||
minAge: 18,
|
||||
keyword: '',
|
||||
categoryId: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
current: {
|
||||
get() {
|
||||
return sheep.$store('sys').homeTabIndex;
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getTradeConfig();
|
||||
},
|
||||
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;
|
||||
this.getDataPageList(this.queryParams);
|
||||
},
|
||||
getDataPageList(params) {
|
||||
switch(this.tabType){
|
||||
case 'peiwan':
|
||||
ClerkApi.getClerkPage(params).then(res => {
|
||||
this.queryParams.keyword = '';
|
||||
// 将请求的结果数组传递给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);
|
||||
});
|
||||
break;
|
||||
case 'friend':
|
||||
if(this.queryParams.sex == ''){
|
||||
params.sex = this.userInfo.sex;
|
||||
}
|
||||
UserApi.getUserPage(params).then(res => {
|
||||
this.queryParams.keyword = '';
|
||||
// 将请求的结果数组传递给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);
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
break;
|
||||
}
|
||||
},
|
||||
change(e) {
|
||||
sheep.$store('sys').setHomeTabIndex(e);
|
||||
this.tabChange();
|
||||
this.scrollTop = 0;
|
||||
this.queryParams.sex = "";
|
||||
sheep.$store('sys').setSexLabel("性别");
|
||||
sheep.$store('sys').setSex2Label("性别");
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
tabChange() {
|
||||
this.tabList = this.tabList.filter(function(tab) {
|
||||
return tab.enabled;
|
||||
});
|
||||
if(this.tabList[this.current]){
|
||||
this.tabType = this.tabList[this.current].type;
|
||||
}else{
|
||||
sheep.$store('sys').setHomeTabIndex(0);
|
||||
this.tabType = this.tabList[0].type;
|
||||
}
|
||||
},
|
||||
getTradeConfig() {
|
||||
TradeConfigApi.getTradeConfig().then(res => {
|
||||
this.tabList[0].enabled = res.data.peiwanEnabled;
|
||||
this.tabList[1].enabled = res.data.friendEnabled;
|
||||
this.tabChange();
|
||||
this.$refs.paging.reload();
|
||||
});
|
||||
},
|
||||
tabClick(e) {
|
||||
if('city' == e){
|
||||
this.cityShow = true;
|
||||
}else if('sex2' == e){
|
||||
this.$refs.sex2Sheet.openActionSheet();
|
||||
}else if('sex' == e){
|
||||
this.$refs.sexSheet.openActionSheet();
|
||||
}else if('category' == e){
|
||||
this.$refs.categorySheet.openActionSheet();
|
||||
}else if('level' == e){
|
||||
|
||||
}
|
||||
},
|
||||
search(e) {
|
||||
this.queryParams.keyword = e;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
categoryOk(e) {
|
||||
sheep.$store('sys').setCategoryLabel(e.label);
|
||||
this.queryParams.categoryId = e.value;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
cityOk(e) {
|
||||
this.cityShow = false;
|
||||
this.queryParams.city = e.city_name;
|
||||
sheep.$store('sys').setCityLabel(e.city_name);
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
categoryClick(e) {
|
||||
sheep.$store('sys').setCategoryLabel(e.name);
|
||||
this.queryParams.categoryId = e.id;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
sexOk(e) {
|
||||
sheep.$store('sys').setSexLabel(e.label);
|
||||
this.queryParams.sex = e.value;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
sex2Ok(e) {
|
||||
sheep.$store('sys').setSex2Label(e.label);
|
||||
this.queryParams.sex = e.value;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
queryUser(e) {
|
||||
this.queryParams.sex = e.sex;
|
||||
this.queryParams.isCity = e.isCity;
|
||||
this.queryParams.maxAge = e.maxAge;
|
||||
this.queryParams.minAge = e.minAge;
|
||||
this.queryParams.city = e.city;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
height: calc(100vh);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
395
pages/tabbar/index.vue
Normal file
395
pages/tabbar/index.vue
Normal file
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<view class="page-app theme-light main-green font-1">
|
||||
<view v-if="currentIndex === 0" :style="{display: currentIndex === 0 ? '' : 'none'}">
|
||||
<home ref="home"></home>
|
||||
</view>
|
||||
<view v-if="currentIndex === 1" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
||||
<trend></trend>
|
||||
</view>
|
||||
<view v-if="currentIndex === 2" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
||||
<message></message>
|
||||
</view>
|
||||
<view v-if="currentIndex === 3" :style="{display: currentIndex === 3 ? '' : 'none'}">
|
||||
<mine></mine>
|
||||
</view>
|
||||
<tui-tabbar zIndex="997" :current="currentIndex" backdropFilter backgroundColor="#fff" :tabBar="tabbarList" color="#333" selectedColor="#aaaaaa" @click="tabbarSwitch"></tui-tabbar>
|
||||
|
||||
|
||||
<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
|
||||
<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='1' :auto-play="false" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
|
||||
<view class="close-btn" @click="closeSvga">
|
||||
<view class="bottom-box">
|
||||
<view class="title">
|
||||
<text class="username">{{gift.username}}</text>
|
||||
<text class="unit">赠送</text>
|
||||
<text class="nickname">{{gift.nickname}}</text>
|
||||
<text class="name">{{gift.name}}</text>
|
||||
<text class="count">x{{gift.count}}</text>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn" @click="cannel">关闭</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<s-auth-modal />
|
||||
<qrcode-modal />
|
||||
<search-modal @query="query" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import home from "@/pages/tabbar/home.vue"
|
||||
import trend from "@/pages/tabbar/trend.vue"
|
||||
import message from "@/pages/tabbar/message.vue"
|
||||
import mine from "@/pages/tabbar/mine.vue"
|
||||
import RewardApi from '@/sheep/api/worker/reward';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import qrcodeModal from '@/components/qrcode-modal/qrcode-modal.vue';
|
||||
import searchModal from '@/components/search-modal/search-modal.vue';
|
||||
import sheep from '@/sheep';
|
||||
import $share from '@/sheep/platform/share';
|
||||
import _ from 'lodash-es';
|
||||
import AreaApi from '@/sheep/api/system/area';
|
||||
import tuiTabbar from "@/components/thorui/tui-tabbar/tui-tabbar.vue"
|
||||
export default {
|
||||
components: {
|
||||
home,
|
||||
trend,
|
||||
message,
|
||||
mine,
|
||||
searchModal,
|
||||
qrcodeModal,
|
||||
tuiTabbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabberPageLoadFlag: [],
|
||||
currentIndex: 0,
|
||||
tabbarList: [
|
||||
{
|
||||
pagePath: '/pages/chat/chat',
|
||||
text: '首页',
|
||||
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/5c3dd70b602fa866a431e42cf23a584f12da91dd9675468090f69d1f74fac11f.png',
|
||||
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d3803064e60b0e2a0610b62bb48f0ff5c75c8c08bcd090d09bc9f67cb51e7ed9.png'
|
||||
},
|
||||
{
|
||||
pagePath: '/pages/chat/chat',
|
||||
text: '动态',
|
||||
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/e7f56870666bea98fef3e9323773b37e5dccfe48db51dcd63e306b1c8f400605.png',
|
||||
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/3ef2198fcbb01321b59b822292345e75a58c32e6d2504238fd4675b4a529be51.png'
|
||||
},
|
||||
{
|
||||
pagePath: '',
|
||||
text: '滴滴',
|
||||
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/810802ecdce16ff51b71d1d3de894350062ca9c1ee148053dd0c80db301c23e8.png',
|
||||
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/52e3b3bb2a3cc4dd003b4024f21b2d28a5844cd5c3ffb636a6858d9c6c09e610.png'
|
||||
},
|
||||
/* {
|
||||
pagePath: '',
|
||||
text: '消息',
|
||||
num: 2,
|
||||
isDot: true,
|
||||
iconPath: '/static/tabbar/find.png',
|
||||
selectedIconPath: '/static/tabbar/find_cur.png'
|
||||
}, */
|
||||
{
|
||||
pagePath: '/pages/tabbar/my/my',
|
||||
text: '我的',
|
||||
iconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/6c4098dbe1982ad7d6ee23f46e28bc21d4abc22fcdb42f75a9fe58da0a53c8cd.png',
|
||||
selectedIconPath: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a1c7d19aa554fed74be5ecaba6545633c7e3f4f6c36d68b3b61213ba28233621.png',
|
||||
verify: false
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
giftFlag: false,
|
||||
src: '',
|
||||
canvasId: 'myCanvas',
|
||||
};
|
||||
},
|
||||
// 分享小程序
|
||||
onShareAppMessage(res) {
|
||||
return {
|
||||
title: this.shareInfo.title,
|
||||
path: this.shareInfo.path,
|
||||
imageUrl: this.shareInfo.image,
|
||||
};
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.shareInfo.title,
|
||||
path: this.shareInfo.path,
|
||||
imageUrl: this.shareInfo.image,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.initData(options);
|
||||
|
||||
this.getGiftList();
|
||||
|
||||
this.getTradeConfig();
|
||||
|
||||
this.getAreaData();
|
||||
|
||||
const index = Number(options.index || this.currentIndex);
|
||||
this.currentIndex = index;
|
||||
// 根据底部tabbar菜单列表设置对应页面的加载情况
|
||||
this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
|
||||
return index === tabbar_index
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
gift() {
|
||||
return sheep.$store('sys').gift;
|
||||
},
|
||||
shareInfo() {
|
||||
return sheep.$platform.share.getShareInfo();
|
||||
},
|
||||
isLogin: {
|
||||
get() {
|
||||
return sheep.$store('user').isLogin;
|
||||
},
|
||||
},
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
friendEnabled() {
|
||||
return sheep.$store('user').tradeConfig.friendEnabled
|
||||
},
|
||||
clerk() {
|
||||
return sheep.$store('sys').currentClerk;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initData(options) {
|
||||
// #ifdef MP
|
||||
// 小程序识别二维码
|
||||
if (options.scene) {
|
||||
const sceneParams = decodeURIComponent(options.scene).split('=');
|
||||
console.log("sceneParams=>",sceneParams);
|
||||
options[sceneParams[0]] = sceneParams[1];
|
||||
}
|
||||
// 小程序场景值
|
||||
const config = uni.getLaunchOptionsSync();
|
||||
if(config.scene){
|
||||
sheep.$store('sys').setScene(config.scene);
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 预览模板
|
||||
if (options.templateId) {
|
||||
sheep.$store('app').init(options.templateId);
|
||||
}
|
||||
|
||||
// 解析分享信息
|
||||
if (options.spm) {
|
||||
$share.decryptSpm(options.spm);
|
||||
}
|
||||
|
||||
// 进入指定页面(完整页面路径)
|
||||
if (options.page) {
|
||||
sheep.$router.go(decodeURIComponent(options.page));
|
||||
}
|
||||
},
|
||||
tabbarSwitch(e) {
|
||||
//获取登录状态，此处默认未登录
|
||||
//跳转切换逻辑需自行实现
|
||||
let isLogin = false;
|
||||
if (e.verify && !isLogin) {
|
||||
this.$u.toast('您还未登录，请先登录');
|
||||
} else {
|
||||
this.tabberPageLoadFlag[e.index] = true
|
||||
this.currentIndex = e.index;
|
||||
this.getGiftList();
|
||||
this.getTradeConfig();
|
||||
}
|
||||
},
|
||||
onFinished() {
|
||||
this.giftFlag = false;
|
||||
console.log('动画停止播放时回调');
|
||||
},
|
||||
onFrame(frame) {//动画播放至某帧后回调
|
||||
// console.log(frame);
|
||||
},
|
||||
onPercentage(percentage) { //动画播放至某进度后回调
|
||||
// console.log(percentage);
|
||||
},
|
||||
onLoaded() {
|
||||
this.$refs.cSvgaRef.call('setContentMode', 'AspectFill');
|
||||
console.log('加载完成');
|
||||
this.$refs.cSvgaRef.call('startAnimation');
|
||||
},
|
||||
closeSvga() {
|
||||
this.src = "";
|
||||
this.$refs.cSvgaRef.call('stopAnimation');
|
||||
this.giftFlag = false;
|
||||
},
|
||||
fen2yuan(price) {
|
||||
var f = 0;
|
||||
var p = (price / 100.0).toFixed(0);
|
||||
var p1 = (price / 100.0).toFixed(1);
|
||||
var p2 = (price / 100.0).toFixed(2);
|
||||
if(p*100 == price){
|
||||
f = 0;
|
||||
}else if(p1*100 == price){
|
||||
f = 1;
|
||||
}else if(p2*100 == price){
|
||||
f = 2;
|
||||
}
|
||||
return (price / 100.0).toFixed(f)
|
||||
},
|
||||
cannel() {
|
||||
this.closeSvga();
|
||||
},
|
||||
ok() {
|
||||
this.closeSvga();
|
||||
},
|
||||
sendGift(e) {
|
||||
if(e.giftType != 1){
|
||||
// 普通礼物不播放
|
||||
return;
|
||||
}
|
||||
sheep.$store('sys').setGift(e);
|
||||
|
||||
this.src = e.pic;
|
||||
this.giftFlag = true;
|
||||
},
|
||||
getGiftList() {
|
||||
RewardApi.getTopList().then(res => {
|
||||
var gift = res.data[0];
|
||||
if(gift){
|
||||
if(this.gift.id != gift.id){
|
||||
// 播放特效
|
||||
this.sendGift(gift);
|
||||
}
|
||||
sheep.$store('sys').setGiftList(res.data);
|
||||
}
|
||||
});
|
||||
},
|
||||
getTradeConfig() {
|
||||
TradeConfigApi.getTradeConfig(this.userInfo.id).then(res => {
|
||||
sheep.$store('user').setTradeConfig(res.data);
|
||||
});
|
||||
},
|
||||
// 获得地区数据
|
||||
getAreaData() {
|
||||
if (_.isEmpty(uni.getStorageSync('areaData'))) {
|
||||
AreaApi.getAreaTree().then((res) => {
|
||||
if (res.code === 0) {
|
||||
uni.setStorageSync('areaData', res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
query(e) {
|
||||
this.$refs.home.queryUser(e);
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.svga-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999999999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
|
||||
.close-btn {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 999999999;
|
||||
padding: 5px 10px;
|
||||
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100rpx;
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.username {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin: 10rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: yellow;
|
||||
margin: 10rpx;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.btn {
|
||||
border: 1px solid #fff;
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx 110rpx;
|
||||
border-radius: 40px;
|
||||
margin: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid var(--ui-BG-Main);
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svga-hide {
|
||||
/* #ifdef MP */
|
||||
transform: translate(-100%, 0);
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef MP */
|
||||
display: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.svga-show {
|
||||
/* #ifdef MP */
|
||||
transform: translate(0, 0);
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef MP */
|
||||
display: block;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
147
pages/tabbar/message.vue
Normal file
147
pages/tabbar/message.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="content">
|
||||
<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
|
||||
<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
|
||||
<z-paging ref="paging" :auto="false" defaultPageSize="20" use-virtual-list :auto-clean-list-when-reload="false" :force-close-inner-list="true" :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 :tabList="tabList" @initNav="initNav" @change="change"></nav-bar>
|
||||
</template>
|
||||
|
||||
<friend v-if="tabType == 'friend'" :virtualList="virtualList" @reload="reload"></friend>
|
||||
<peiwan v-if="tabType == 'peiwan'"></peiwan>
|
||||
|
||||
<!-- 自定义没有更多数据view -->
|
||||
<template #empty v-if="showLoad">
|
||||
<view></view>
|
||||
</template>
|
||||
<!-- 自定义没有更多数据view -->
|
||||
<template #loadingMoreNoMore v-if="showLoad">
|
||||
<view></view>
|
||||
</template>
|
||||
</z-paging>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavBar from '@/pages/tabbar/components/message/navBar.vue';
|
||||
import friend from '@/pages/tabbar/components/message/friend.vue';
|
||||
import peiwan from '@/pages/tabbar/components/message/peiwan.vue';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
NavBar,
|
||||
friend,
|
||||
peiwan,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
name: '达人',
|
||||
enabled: false,
|
||||
type: 'peiwan',
|
||||
},{
|
||||
name: '交友',
|
||||
enabled: false,
|
||||
type: 'friend',
|
||||
},],
|
||||
|
||||
tabType: '',
|
||||
|
||||
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
|
||||
virtualList: [],
|
||||
|
||||
paddingTop: 0,
|
||||
paddingBottom: 100,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTradeConfig();
|
||||
},
|
||||
computed: {
|
||||
showLoad() {
|
||||
return this.tabType == 'peiwan';
|
||||
},
|
||||
current: {
|
||||
get() {
|
||||
return sheep.$store('sys').messageTabIndex;
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initNav(e) {
|
||||
this.height = e.height;
|
||||
this.paddingTop = this.height;
|
||||
},
|
||||
// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
|
||||
virtualListChange(vList) {
|
||||
this.virtualList = vList;
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
if(this.tabType == 'peiwan'){
|
||||
this.$refs.paging.complete(true);
|
||||
return;
|
||||
}
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
random: this.tabIndex === 1
|
||||
}
|
||||
ImConversationApi.getMemberConversationPage(params).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);
|
||||
})
|
||||
},
|
||||
change(e) {
|
||||
sheep.$store('sys').setMessageTabIndex(e);
|
||||
this.tabChange();
|
||||
},
|
||||
tabChange() {
|
||||
this.tabList = this.tabList.filter(function(tab) {
|
||||
return tab.enabled;
|
||||
});
|
||||
if(this.tabList[this.current]){
|
||||
this.tabType = this.tabList[this.current].type;
|
||||
}else{
|
||||
sheep.$store('sys').setMessageTabIndex(0);
|
||||
this.tabType = this.tabList[0].type;
|
||||
}
|
||||
},
|
||||
reload() {
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
getTradeConfig() {
|
||||
TradeConfigApi.getTradeConfig().then(res => {
|
||||
this.tabList[0].enabled = res.data.peiwanEnabled;
|
||||
this.tabList[1].enabled = res.data.friendEnabled;
|
||||
this.tabChange();
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
height: calc(100vh);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
38
pages/tabbar/mine.vue
Normal file
38
pages/tabbar/mine.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<layout>
|
||||
|
||||
</layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import layout from '@/pages/tabbar/components/mine/layout.vue';
|
||||
export default {
|
||||
components: {
|
||||
layout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
height: calc(100vh);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
38
pages/tabbar/social.vue
Normal file
38
pages/tabbar/social.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<layout title="用户列表">
|
||||
|
||||
</layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import layout from '@/pages/tabbar/components/member/layout.vue';
|
||||
export default {
|
||||
components: {
|
||||
layout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #fafafa;
|
||||
height: calc(100vh);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
38
pages/tabbar/trend.vue
Normal file
38
pages/tabbar/trend.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<layout title="动态">
|
||||
|
||||
</layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import layout from '@/pages/tabbar/components/trend/layout.vue';
|
||||
export default {
|
||||
components: {
|
||||
layout,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #fff;
|
||||
height: calc(100vh);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user