项目初始化
This commit is contained in:
jerry
221
pages/user/detail/components/detail-navbar.vue
Normal file
221
pages/user/detail/components/detail-navbar.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
|
||||
<su-status-bar />
|
||||
<view
|
||||
class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
||||
>
|
||||
<!-- 左 -->
|
||||
<view class="icon-box ss-flex">
|
||||
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||
<text :class="tabOpacityVal > 0.4 ? 'black' : ''" class="sicon-back" v-if="hasHistory" />
|
||||
<text :class="tabOpacityVal > 0.4 ? 'black' : ''" class="sicon-home" v-else />
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
|
||||
<text :class="tabOpacityVal > 0.4 ? 'black' : ''" class="sicon-more" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 中 -->
|
||||
<view class="detail-tab-card ss-flex-1" :style="[{ opacity: tabOpacityVal }]">
|
||||
<view class="tab-box ss-flex ss-col-center ss-row-around">
|
||||
<view
|
||||
class="tab-item ss-flex-1 ss-flex ss-row-center ss-col-center"
|
||||
v-for="item in tabList"
|
||||
:key="item.value"
|
||||
@tap="onTab(item)"
|
||||
>
|
||||
<view class="tab-title" :class="currentTab === item.value ? 'cur-tab-title' : ''">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
<view v-show="currentTab === item.value" class="tab-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<view :style="[capsuleStyle]"></view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//滚动条滚动距离
|
||||
scrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sys_navBar: sheep.$platform.navbar,
|
||||
sys_statusBar: sheep.$platform.device.statusBarHeight,
|
||||
hasHistory: sheep.$router.hasHistory(),
|
||||
tabList: [
|
||||
{
|
||||
label: '礼物墙',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '动态',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
capsuleStyle: {
|
||||
width: sheep.$platform.capsule.width + 'px',
|
||||
height: sheep.$platform.capsule.height + 'px',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabOpacityVal() {
|
||||
return this.scrollTop > sheep.$platform.navbar ? 1 : this.scrollTop * 0.01;;
|
||||
},
|
||||
currentTab() {
|
||||
return sheep.$store('sys').userTabIndex;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
if (this.hasHistory) {
|
||||
sheep.$router.back();
|
||||
} else {
|
||||
sheep.$router.go('/pages/tabbar/index');
|
||||
}
|
||||
},
|
||||
onClickRight() {
|
||||
showMenuTools();
|
||||
},
|
||||
onTab(e) {
|
||||
this.$emit('onTab', e.value);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-box {
|
||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||
border-radius: 30rpx;
|
||||
width: 134rpx;
|
||||
height: 56rpx;
|
||||
margin-left: 8rpx;
|
||||
border: 1px solid rgba(#fff, 0.4);
|
||||
.line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: #e5e5e7;
|
||||
}
|
||||
.sicon-back {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.sicon-home {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.sicon-more {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 67rpx;
|
||||
height: 56rpx;
|
||||
&-left:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 30rpx 0px 0px 30rpx;
|
||||
}
|
||||
&-right:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0px 30rpx 30rpx 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-box {
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(#fff, 0.6);
|
||||
border: 1rpx solid #ebebeb;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
position: relative;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.circle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(#ffffff, 0.6);
|
||||
border: 1rpx solid #ebebeb;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.detail-tab-card {
|
||||
width: 50%;
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
316
pages/user/detail/components/giftList.vue
Normal file
316
pages/user/detail/components/giftList.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<view v-show="showPop" class="gift-box">
|
||||
<scroll-view style="height: 100%;" scroll-y>
|
||||
<view class="top-box">
|
||||
<view class="title">选择礼物</view>
|
||||
<view class="btn-box" @click="close">
|
||||
<u-icon name="close"></u-icon>
|
||||
<view class="text">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view v-for="(item,index) in dataList" class="gift" @click="sendGift(item)">
|
||||
<view class="img-box">
|
||||
<img class="img" :src="item.img"></img>
|
||||
<view class="tag" v-if="item.giftType == 1">
|
||||
<text>特效</text>
|
||||
<text v-if="item.tag">·{{item.tag}}</text>
|
||||
</view>
|
||||
<view class="tag" v-if="item.giftType == 0 && item.tag">
|
||||
<text>{{item.tag}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="name">{{item.name}}</view>
|
||||
<view class="price">{{ fen2yuan(item.money) }} 钻石</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
|
||||
<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='0' :auto-play="false" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
|
||||
<view class="close-btn">
|
||||
<view class="bottom-box">
|
||||
<view class="title">{{gift.name}}</view>
|
||||
<view class="price">{{ fen2yuan(gift.money) }} 钻石</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn" @click="cannel">取消</view>
|
||||
<view class="btn active" @click="ok">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
showPop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
},
|
||||
emits: ["close", "update:modelValue"],
|
||||
data() {
|
||||
return {
|
||||
giftFlag: false,
|
||||
src: '',
|
||||
canvasId: 'myCanvas2',
|
||||
|
||||
gift: {},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
sendGift(e) {
|
||||
this.gift = e;
|
||||
|
||||
if(e.giftType == 0){
|
||||
// 普通礼物不播放
|
||||
this.close();
|
||||
this.$emit('update:modelValue', this.gift);
|
||||
return;
|
||||
}
|
||||
|
||||
this.src = e.pic;
|
||||
this.giftFlag = true;
|
||||
},
|
||||
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();
|
||||
this.close();
|
||||
this.$emit('update:modelValue', this.gift);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gift-box {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
padding: 15px;
|
||||
border-top-right-radius: 20rpx;
|
||||
border-top-left-radius: 20rpx;
|
||||
padding-bottom: 0;
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
top: 200rpx;
|
||||
padding: 0 15px;
|
||||
border-top-right-radius: 20rpx;
|
||||
border-top-left-radius: 20rpx;
|
||||
height: 110rpx;
|
||||
z-index: 1;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
background-color: var(--ui-BG-Main);
|
||||
padding: 7px 15px;
|
||||
font-size: 24rpx;
|
||||
border-radius: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.text {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 60rpx;
|
||||
|
||||
.gift {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20rpx 0px;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.img{
|
||||
max-width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 16rpx;
|
||||
color: #fff;
|
||||
background-color: var(--ui-BG-Main);
|
||||
border-radius: 40px;
|
||||
padding: 2rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 160rpx;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 20rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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>
|
||||
445
pages/user/detail/components/giftPopup.vue
Normal file
445
pages/user/detail/components/giftPopup.vue
Normal file
@@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
|
||||
<view class="order-box">
|
||||
<view class="avatar-box">
|
||||
<u-image width="140" height="140" border-radius="20" :src="clerk.avatar"></u-image>
|
||||
<view class="close-span" @click="hiddenPopup">
|
||||
<u-icon name="close-circle" color="#98a2a1" size="50"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view style="height: 700rpx;" scroll-y>
|
||||
<view class="page-box">
|
||||
|
||||
<view class="form-box">
|
||||
|
||||
<view class="input-box">
|
||||
<view class="tag-box">
|
||||
<view class="name">赠送类型</view>
|
||||
</view>
|
||||
<view class="tab-span">
|
||||
<!-- <view @click="changeTab(0)" class="btn" :class="form.rewardType == 0 ? 'active' : ''">赠送</view> -->
|
||||
<view @click="changeTab(1)" class="btn" :class="form.rewardType == 1 ? 'active' : ''">赠礼</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="input-box" v-if="form.rewardType == 0">
|
||||
<view class="tag-box">
|
||||
<view class="name">打赏金额</view>
|
||||
</view>
|
||||
<view class="input-span">
|
||||
<u-input v-model="payMoney" type="number" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入赠送金额"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-box" v-if="form.rewardType == 1">
|
||||
<view class="tag-box">
|
||||
<view class="name">赠送礼物</view>
|
||||
</view>
|
||||
<view class="select-span" @click="openGift">
|
||||
<view v-if="gift.id > 0">已选【{{gift.name}}】</view>
|
||||
<view v-else>点击选择礼物</view>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-box" v-if="gift.id > 0">
|
||||
<view class="tag-box">
|
||||
<view class="name">礼物数量</view>
|
||||
</view>
|
||||
<view class="step-span">
|
||||
<img class="img" :src="gift.img"></img>
|
||||
<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="form.count" @change="change"></tui-numberbox>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-box">
|
||||
<view class="textarea-box">
|
||||
<view class="name">心动留言</view>
|
||||
</view>
|
||||
<view class="textarea-span">
|
||||
<u-input v-model="form.msg" type="textarea" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入心动留言"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input-box" v-if="isPass">
|
||||
<view class="tag-box">
|
||||
<view class="name">您的微信号</view>
|
||||
</view>
|
||||
<view class="input-span">
|
||||
<u-input v-model="form.weixin" :placeholder-style="`fontSize: 24rpx; color: #cbced5;`" placeholder="请输入正确的微信号"></u-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="bottom-box2" v-if="form.rewardType == 0">
|
||||
<view class="btn-box">
|
||||
<view class="pay-btn" @click="confirm">立即赠送</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-box" v-if="form.rewardType == 1">
|
||||
<view class="price-box">
|
||||
<text>总价：</text>
|
||||
<text class="price">{{ fen2yuan(gift.money*form.count) }}</text>
|
||||
<text>钻石</text>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="pay-btn" @click="confirm">立即赠送</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tui-bottom-popup>
|
||||
|
||||
<gift-list :showPop="giftFlag" :dataList="giftList" v-model="gift" @close="closeGift"></gift-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
|
||||
import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
|
||||
import GiftList from '@/pages/user/detail/components/giftList.vue';
|
||||
import RewardApi from '@/sheep/api/worker/reward';
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
tuiBottomPopup,
|
||||
tuiNumberbox,
|
||||
GiftList,
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
popupShow: false,
|
||||
|
||||
gift: {
|
||||
id: -1,
|
||||
money: 0,
|
||||
},
|
||||
|
||||
giftFlag: false,
|
||||
|
||||
giftList: [],
|
||||
|
||||
payMoney: '',
|
||||
|
||||
form: {
|
||||
rewardType: 1,
|
||||
count: 1,
|
||||
giftId: -1,
|
||||
money: '',
|
||||
weixin: '',
|
||||
msg: '',
|
||||
workerUserId: 0,
|
||||
payMoney: '',
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
clerk() {
|
||||
return sheep.$store('sys').user;
|
||||
},
|
||||
userInfo() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
isPass() {
|
||||
return sheep.$store('user').tradeConfig.weixinEnabled;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//调用此方法显示弹层
|
||||
showPopup() {
|
||||
this.form.weixin = this.userInfo.weixin;
|
||||
RewardApi.getGiftList().then(res => {
|
||||
this.giftList = res.data;
|
||||
this.popupShow = true
|
||||
});
|
||||
},
|
||||
showGiftPopup(e) {
|
||||
this.gift = e;
|
||||
this.form.rewardType = 1;
|
||||
this.form.weixin = this.userInfo.weixin;
|
||||
RewardApi.getGiftList().then(res => {
|
||||
this.giftList = res.data;
|
||||
this.popupShow = true
|
||||
});
|
||||
},
|
||||
hiddenPopup() {
|
||||
this.popupShow = false
|
||||
},
|
||||
change(e) {
|
||||
this.form.count = e.value
|
||||
},
|
||||
changeTab(e) {
|
||||
this.form.rewardType = e;
|
||||
this.gift = {
|
||||
id: -1,
|
||||
money: 0,
|
||||
};
|
||||
},
|
||||
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)
|
||||
},
|
||||
yuan2fen(price) {
|
||||
return (price * 100.0).toFixed(0)
|
||||
},
|
||||
openGift() {
|
||||
this.giftFlag = true;
|
||||
},
|
||||
closeGift() {
|
||||
this.form.count = 1;
|
||||
this.giftFlag = false;
|
||||
},
|
||||
confirm() {
|
||||
if(this.isPass && !this.form.weixin){
|
||||
sheep.$helper.toast('请输入正确的微信');
|
||||
return;
|
||||
}
|
||||
if(this.form.rewardType == 0){
|
||||
this.form.payMoney = this.yuan2fen(this.payMoney);
|
||||
if(this.form.payMoney < 1){
|
||||
sheep.$helper.toast('请输入打赏金额');
|
||||
return;
|
||||
}
|
||||
}else{
|
||||
this.form.giftId = this.gift.id;
|
||||
if(this.form.giftId < 1){
|
||||
sheep.$helper.toast('请选择打赏礼物');
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.form.workerUserId = this.clerk.id;
|
||||
RewardApi.createRewardOrder(this.form).then(res => {
|
||||
// 跳转到支付页面
|
||||
this.$u.route({
|
||||
url: 'pages/pay/reward/index',
|
||||
params: {
|
||||
id: res.data.payOrderId,
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar-box {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.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;
|
||||
|
||||
.form-box {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tag-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 180rpx;
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-box {
|
||||
height: 20px;
|
||||
display: flex;
|
||||
width: 180rpx;
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
|
||||
.input-span {
|
||||
background-color: #f6f6f6;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.select-span {
|
||||
font-size: 24rpx;
|
||||
background-color: #f6f6f6;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 12px 12px;
|
||||
border-radius: 10rpx;
|
||||
color: #aaaaaa;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tab-span {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
background-color: #f6f6f6;
|
||||
font-size: 24rpx;
|
||||
padding: 7px 0;
|
||||
border-radius: 40px;
|
||||
min-width: 120rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-span {
|
||||
background-color: #f6f6f6;
|
||||
margin-left: 15px;
|
||||
flex: 1;
|
||||
padding: 2px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.step-span {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 6px 0 #ccc;
|
||||
|
||||
.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: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bottom-box2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 6px 0 #ccc;
|
||||
|
||||
.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%;
|
||||
|
||||
.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: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
286
pages/user/detail/components/layout.vue
Normal file
286
pages/user/detail/components/layout.vue
Normal file
@@ -0,0 +1,286 @@
|
||||
<!-- 虚拟列表演示(不使用内置列表)(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" :auto="false" :show-loading-more-no-more-view="showLoad" :show-default-loading-more-text="showLoad" use-virtual-list :force-close-inner-list="true" :paging-style="{ paddingTop: 0 + 'px', paddingBottom: paddingBottom + 'rpx' }" cell-height-mode="dynamic" @scroll="scroll" @virtualListChange="virtualListChange" @query="queryList">
|
||||
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
||||
<template #top>
|
||||
<nav-bar :title="title" :scrollTop="scrollTop" @onTab="change" @initNav="initNav"></nav-bar>
|
||||
</template>
|
||||
|
||||
<view>
|
||||
<user-box :clerk="user" :paddingTop="paddingTop"></user-box>
|
||||
<sticky-box :trendNum="total" @change="change"></sticky-box>
|
||||
</view>
|
||||
|
||||
<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
|
||||
<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
|
||||
<view class="data-box">
|
||||
<star-list v-if="currentTab == 0" @openGift="openGift" :virtualList="giftList"></star-list>
|
||||
<post-list v-if="currentTab == 1" :virtualList="virtualList"></post-list>
|
||||
</view>
|
||||
|
||||
<template #bottom>
|
||||
<view v-if="isGift" class="bottom-box">
|
||||
<view class="order" @click="doGift">赠礼</view>
|
||||
<view class="gift" @click="chat">密聊</view>
|
||||
</view>
|
||||
<view v-else class="bottom-box">
|
||||
<view class="order-btn" @click="chat">密聊</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</z-paging>
|
||||
|
||||
<gift-popup ref="giftPopup"></gift-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserBox from '@/pages/user/detail/components/userBox.vue';
|
||||
import StickyBox from '@/pages/user/detail/components/stickyBox.vue';
|
||||
import StarList from '@/pages/user/detail/components/starList.vue';
|
||||
import PostList from '@/pages/user/detail/components/postList.vue';
|
||||
import NavBar from '@/pages/user/detail/components/navBar.vue';
|
||||
import GiftPopup from '@/pages/user/detail/components/giftPopup.vue';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import TrendApi from '@/sheep/api/worker/trend';
|
||||
import RewardApi from '@/sheep/api/worker/reward';
|
||||
import ImConversationApi from '@/sheep/api/im/memberConversation';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
import dayjs from 'dayjs';
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
dayjs.extend(relativeTime);
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
UserBox,
|
||||
StickyBox,
|
||||
StarList,
|
||||
PostList,
|
||||
NavBar,
|
||||
GiftPopup,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
|
||||
virtualList: [],
|
||||
scrollTop: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
height: 0,
|
||||
|
||||
user: {},
|
||||
userId: 0,
|
||||
giftList: [],
|
||||
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentTab() {
|
||||
return sheep.$store('sys').userTabIndex;
|
||||
},
|
||||
showLoad() {
|
||||
return sheep.$store('sys').userTabIndex > 1;
|
||||
},
|
||||
isLogin: {
|
||||
get() {
|
||||
return sheep.$store('user').isLogin;
|
||||
},
|
||||
},
|
||||
userInfo: {
|
||||
get() {
|
||||
return sheep.$store('user').userInfo;
|
||||
},
|
||||
},
|
||||
isGift() {
|
||||
return sheep.$store('user').tradeConfig.giftEnabled;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
initNav(e) {
|
||||
this.height = e.height;
|
||||
this.paddingTop = this.height;
|
||||
},
|
||||
initData(options) {
|
||||
this.userId = options.id;
|
||||
this.getUserInfo();
|
||||
|
||||
RewardApi.getRewardGiftList({
|
||||
workerUserId: options.id,
|
||||
}).then(res => {
|
||||
this.giftList = res.data;
|
||||
});
|
||||
},
|
||||
getUserInfo() {
|
||||
UserApi.getUserInfoById(this.userId).then(res => {
|
||||
this.user = res.data;
|
||||
this.user.time = this.showDayTime(this.user.updateTime);
|
||||
sheep.$store('sys').setUser(this.user);
|
||||
|
||||
this.$refs.paging.reload();
|
||||
});
|
||||
},
|
||||
showDayTime(datetime) {
|
||||
if (!datetime) return "";
|
||||
return dayjs(datetime).fromNow();
|
||||
},
|
||||
scroll(e) {
|
||||
this.scrollTop = e.detail.scrollTop;
|
||||
},
|
||||
// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
|
||||
virtualListChange(vList) {
|
||||
this.virtualList = vList;
|
||||
},
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
queryType: '2',
|
||||
workerUserId: this.userId,
|
||||
}
|
||||
|
||||
TrendApi.getTrendPage(params).then(res => {
|
||||
this.total = res.data.total;
|
||||
// 将请求的结果数组传递给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').setUserTabIndex(e);
|
||||
this.scrollTop = 0;
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
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.createMemberConversation({
|
||||
userId: this.userId,
|
||||
groupType: 1,
|
||||
lastMessageContentType: 1,
|
||||
}).then(res => {
|
||||
if(res.data){
|
||||
sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: this.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, '已订阅');
|
||||
});
|
||||
},
|
||||
doGift() {
|
||||
if(this.isLogin){
|
||||
this.$refs.giftPopup.showPopup();
|
||||
}else{
|
||||
showAuthModal();
|
||||
}
|
||||
},
|
||||
openGift(e) {
|
||||
if(this.isLogin){
|
||||
this.$refs.giftPopup.showGiftPopup(e);
|
||||
}else{
|
||||
showAuthModal();
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-box {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 30px;
|
||||
box-shadow: 0 0 6px 0 #ccc;
|
||||
|
||||
.order {
|
||||
background-color: var(--ui-BG-Main);
|
||||
padding: 10px;
|
||||
border-top-left-radius: 40px;
|
||||
border-bottom-left-radius: 40px;
|
||||
color: #fff;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
background-color: var(--ui-BG-Main);
|
||||
padding: 10px;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.gift {
|
||||
background-color: #eef3f2;
|
||||
padding: 10px;
|
||||
border-top-right-radius: 40px;
|
||||
border-bottom-right-radius: 40px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
color: #aaa;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
89
pages/user/detail/components/navBar.vue
Normal file
89
pages/user/detail/components/navBar.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view>
|
||||
<tui-navigation-bar @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
|
||||
<detailNavbar @onTab="onTab" :scrollTop="scrollTop" />
|
||||
</tui-navigation-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
|
||||
import detailNavbar from '@/pages/user/detail/components/detail-navbar.vue';
|
||||
export default {
|
||||
components: {
|
||||
tuiNavigationBar,
|
||||
detailNavbar,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//滚动条滚动距离
|
||||
scrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: 0, //标题图标距离顶部距离
|
||||
opacity: 0,
|
||||
height: 0,
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
onTab(e) {
|
||||
this.$emit('onTab', e);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</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>
|
||||
50
pages/user/detail/components/photoBox.vue
Normal file
50
pages/user/detail/components/photoBox.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<view class="photo-box">
|
||||
<scroll-view scroll-x>
|
||||
<view class="scroll-box">
|
||||
<view class="img-box" @click="showImage(item)" v-for="(item,index) in dataList">
|
||||
<u-image border-radius="20" width="170rpx" height="170rpx" :src="item"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showImage(src) {
|
||||
uni.previewImage({
|
||||
indicator: "none",
|
||||
current: src,
|
||||
urls: this.dataList,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.photo-box {
|
||||
.scroll-box {
|
||||
display: flex;
|
||||
}
|
||||
.img-box {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
362
pages/user/detail/components/postList.vue
Normal file
362
pages/user/detail/components/postList.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<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 class="right">
|
||||
<view class="card-header">
|
||||
<view class="box3">
|
||||
<view class="box1">
|
||||
<view class="tag-list">
|
||||
<!-- <view class="tag">Ta爱玩王者荣耀</view> -->
|
||||
<view class="tag">发布于 {{item.createTimeStr}}</view>
|
||||
</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">
|
||||
<view class="topic">
|
||||
<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 color="#f880ab" name="presentfill" size="38" custom-prefix="iconfont"></u-icon>
|
||||
<view class="toolbar-text">3</view>
|
||||
</view> -->
|
||||
<!-- <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 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 adVideoUtils from '@/sheep/util/adVideoUtils';
|
||||
import sheep from '@/sheep';
|
||||
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: {
|
||||
orderList() {
|
||||
this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM'));
|
||||
return this.virtualList;
|
||||
},
|
||||
tradeConfig() {
|
||||
return sheep.$store('user').tradeConfig;
|
||||
},
|
||||
},
|
||||
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.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) {
|
||||
this.$u.route({
|
||||
url: 'pages/clerk/detail/index',
|
||||
params: {
|
||||
id: e.workerClerkId,
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 30rpx 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
display: flex;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
310
pages/user/detail/components/starList.vue
Normal file
310
pages/user/detail/components/starList.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="isGift" class="star-box">
|
||||
<view class="title-box">
|
||||
<view class="title">礼物墙</view>
|
||||
<view class="num">(已点亮：{{starNum}}/{{total}})</view>
|
||||
</view>
|
||||
|
||||
<view class="list-box">
|
||||
<view @click="sendGift(item)" v-for="(item,index) in virtualList" :key="item.id" class="gift">
|
||||
<view class="img-box">
|
||||
<img class="img" :class="item.playStatus == 0 ? 'hui' : ''" :src="item.img"></img>
|
||||
<view class="tag" v-if="item.giftType == 1">
|
||||
<text>特效</text>
|
||||
<text v-if="item.tag">·{{item.tag}}</text>
|
||||
</view>
|
||||
<view class="tag" v-if="item.giftType == 0 && item.tag">
|
||||
<text>{{item.tag}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="name">{{item.name}}</view>
|
||||
<view class="price">x {{item.playNum}}</view>
|
||||
<view class="btn" @tap.stop="openGift(item)" v-if="item.playStatus == 0">点亮</view>
|
||||
<view class="btn" @tap.stop="openGift(item)" v-if="item.playStatus == 1">赠送</view>
|
||||
<view class="btn" v-if="item.playStatus == 2">已下架</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
|
||||
<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='0' :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">{{gift.name}}</view>
|
||||
<view class="price">{{ fen2yuan(gift.money) }} 钻石</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn" @click="cannel">取消</view>
|
||||
<view v-if="gift.playStatus == 0" class="btn active" @click="ok">点亮</view>
|
||||
<view v-if="gift.playStatus == 1" class="btn active" @click="ok">赠送</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
virtualList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
giftFlag: false,
|
||||
src: '',
|
||||
canvasId: 'myCanvas',
|
||||
|
||||
gift: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
starNum() {
|
||||
var count = 0;
|
||||
this.virtualList.forEach(e => {
|
||||
if(e.playStatus > 0){
|
||||
count ++;
|
||||
}
|
||||
});
|
||||
return count;
|
||||
},
|
||||
total() {
|
||||
return this.virtualList.length;
|
||||
},
|
||||
isGift() {
|
||||
return sheep.$store('user').tradeConfig.giftEnabled;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sendGift(e) {
|
||||
this.gift = e;
|
||||
|
||||
if(e.giftType == 0){
|
||||
// 普通礼物不播放
|
||||
this.$emit('openGift', this.gift);
|
||||
return;
|
||||
}
|
||||
|
||||
this.src = e.pic;
|
||||
this.giftFlag = true;
|
||||
},
|
||||
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();
|
||||
this.$emit('openGift', this.gift);
|
||||
},
|
||||
openGift(e) {
|
||||
this.$emit('openGift', e);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.star-box {
|
||||
padding: 30rpx 20rpx;
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 30rpx;
|
||||
|
||||
.gift {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20rpx 0px;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
.img{
|
||||
max-width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.hui {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 16rpx;
|
||||
color: #fff;
|
||||
background-color: var(--ui-BG-Main);
|
||||
border-radius: 40px;
|
||||
padding: 2rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 150rpx;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 20rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid var(--ui-BG-Main);
|
||||
border-radius: 40px;
|
||||
color: var(--ui-BG-Main);
|
||||
padding: 8rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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>
|
||||
59
pages/user/detail/components/stickyBox.vue
Normal file
59
pages/user/detail/components/stickyBox.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="sticky-box">
|
||||
<view>
|
||||
<tui-tabs :tabs="tabList" badgeBgColor="var(--ui-BG-Main)" selectedColor="var(--ui-BG-Main)" sliderBgColor="var(--ui-BG-Main)" :currentTab="currentTab" @change="change"></tui-tabs>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
|
||||
import sheep from '@/sheep';
|
||||
export default {
|
||||
components: {
|
||||
tuiTabs,
|
||||
},
|
||||
props: {
|
||||
trendNum: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabList() {
|
||||
var tabs = [{
|
||||
name: '礼物墙'
|
||||
},{
|
||||
name: '动态',
|
||||
num: this.trendNum,
|
||||
}];
|
||||
return tabs;
|
||||
},
|
||||
currentTab() {
|
||||
return sheep.$store('sys').userTabIndex;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.$emit('change', e.index);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sticky-box {
|
||||
background-color: #fff;
|
||||
padding: 5px 0;
|
||||
}
|
||||
</style>
|
||||
308
pages/user/detail/components/userBox.vue
Normal file
308
pages/user/detail/components/userBox.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view class="user-box" :style="`background-size: contain;background-image: url(${clerk.avatar});`">
|
||||
<view class="info-box" :style="{ paddingTop: paddingTop + 20 + 'px'}">
|
||||
<view class="avatar-box">
|
||||
<view class="avatar-span">
|
||||
<u-image width="100%" height="100%" shape="circle" :src="clerk.avatar"></u-image>
|
||||
<!-- <view class="fans-btn" @click="fans(clerk)">
|
||||
<u-icon v-if="clerk.isFans" color="var(--ui-BG-Main)" name="checkmark-circle-fill" size="46"></u-icon>
|
||||
<u-icon v-else color="var(--ui-BG-Main)" name="plus-circle-fill" size="46"></u-icon>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="right-box">
|
||||
<view class="nickname-box">
|
||||
<view class="nickname">{{clerk.nickname}}</view>
|
||||
<view class="icon">
|
||||
<u-icon name="wode_duanwei" size="36" custom-prefix="iconfont"></u-icon>
|
||||
<text>L1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="badge-box">
|
||||
<view v-if="clerk.hasQrcode" class="weixin-btn" @click="getWeixin(clerk)">
|
||||
<u-icon name="weixin-fill" size="28" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sex-box">
|
||||
<view class="span" v-if="clerk.sex == 2">
|
||||
<u-icon name="ziyuan2" color="#f898c5" size="34" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<view class="span" v-if="clerk.sex == 1">
|
||||
<u-icon name="ziyuan3" color="#0081ff" size="34" custom-prefix="iconfont"></u-icon>
|
||||
</view>
|
||||
<view class="span">{{clerk.age}}</view>
|
||||
<view class="span">{{clerk.city}}</view>
|
||||
</view>
|
||||
<view class="sign-box">{{clerk.intro}}</view>
|
||||
<view class="voice-box">
|
||||
<!-- <view class="voice-span">
|
||||
<voice-play :sec="clerk.soundTime" :src="clerk.sound"></voice-play>
|
||||
</view> -->
|
||||
<view class="span">已注册{{clerk.day}}天</view>
|
||||
<span class="span" v-if="clerk.hasQrcode">可交换名片</span>
|
||||
</view>
|
||||
<view class="tag-list">
|
||||
<view class="tag-box">
|
||||
<span class="tag" v-for="(categoryName,index) in clerk.categoryNameList">{{categoryName}}</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="tags-box">
|
||||
<view class="span">搞笑</view>
|
||||
<view class="span">风骚走位</view>
|
||||
<view class="span">乖巧懂事🍑 极致体验</view>
|
||||
</view> -->
|
||||
|
||||
<photo-box v-if="clerk.photo" :dataList="clerk.photo.split(',')"></photo-box>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PhotoBox from '@/pages/user/detail/components/photoBox.vue';
|
||||
import sheep from '@/sheep';
|
||||
import UserApi from '@/sheep/api/member/user';
|
||||
import TrendApi from '@/sheep/api/worker/trend';
|
||||
export default {
|
||||
components: {
|
||||
PhotoBox,
|
||||
},
|
||||
props: {
|
||||
paddingTop: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
clerk: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
photo: 'http://cos.duopei.feiniaowangluo.com/34/clerk/1707236152609pJKyvtedS9.jpg,http://cos.duopei.feiniaowangluo.com/34/clerk/1720278125689P34fP9MU1c.jpg?imageView2/1/w/200/h/200',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fans(e) {
|
||||
TrendApi.createClerkFans({
|
||||
workerClerkId: e.id,
|
||||
}).then((res) => {
|
||||
if(res){
|
||||
if(e.isFans){
|
||||
sheep.$helper.toast('取消关注');
|
||||
e.isFans = false;
|
||||
}else{
|
||||
sheep.$helper.toast('关注成功');
|
||||
e.isFans = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info-box {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 15px;
|
||||
|
||||
.avatar-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar-span {
|
||||
border-radius: 100%;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border: 2px solid #fff;
|
||||
position: relative;
|
||||
|
||||
.fans-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 320rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 10px;
|
||||
width: 110rpx;
|
||||
}
|
||||
|
||||
.online {
|
||||
border-bottom: 1px solid #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sex-box {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 30px;
|
||||
|
||||
.span {
|
||||
margin-right: 5px;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sign-box {
|
||||
color: #cfcfcf;
|
||||
font-size: 28rpx;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.voice-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
.voice-span {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.span {
|
||||
padding: 10rpx 20rpx;
|
||||
background-color: rgba(132, 167, 164, .81);
|
||||
border-radius: 20px;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
|
||||
.span {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background-color: #000000;
|
||||
border-radius: 999px;
|
||||
padding: 3px 10px;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
background-color: #eef2f26e;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
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 #fff;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tag:last-child:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user