Browse Source

'修改个人中心用户头像标识不联动【推广身份没有显示,文字加样式变化】

.我的二维码无法分享,无法保存。二维码页面上边有个战斗世界?【分享按钮加颜色】等'
master
Lj 3 weeks ago
parent
commit
a5595ba241
6 changed files with 313 additions and 57 deletions
  1. +36
    -12
      pages/component/home.vue
  2. +42
    -3
      pages/component/my.vue
  3. +36
    -3
      pages/component/recycle.vue
  4. +39
    -35
      pages/subcomponent/inspection-report.vue
  5. +2
    -2
      pages/subcomponent/promo-qrcode.vue
  6. +158
    -2
      pages/subcomponent/promotion.vue

+ 36
- 12
pages/component/home.vue View File

@ -273,13 +273,28 @@
},
computed: {
cityListStr() {
// 8...
const names = this.cityList.map(c => c.name)
const max = 8
if (names.length > max) {
return names.slice(0, max).join('、') + '...'
// 2
const cityNames = []
//
this.cityList.forEach(province => {
if (province.children && Array.isArray(province.children)) {
province.children.forEach(city => {
// ""使
const cityName = city.name.replace(/市$/, '')
if (cityName && !cityNames.includes(cityName)) {
cityNames.push(cityName)
}
})
}
})
//
const maxDisplay = 6 // 6
if (cityNames.length > maxDisplay) {
return cityNames.slice(0, maxDisplay).join('、') + '...'
}
return names.join('、')
return cityNames.join('、')
},
address_cion() {
console.log(getApp().globalData.configData, 'home-getApp().globalData.configData')
@ -403,10 +418,10 @@
getFreeCityList() {
this.$api('getFreeCityList', {}, res => {
if (res && res.code === 200 && Array.isArray(res.result)) {
// childrenname
this.cityList = res.result.map(item => ({
name: item.name
})).filter(item => item.name)
// --2
this.cityList = res.result.filter(province =>
province.children && Array.isArray(province.children) && province.children.length > 0
)
} else {
this.cityList = []
}
@ -904,8 +919,17 @@
}
.city-list {
font-size: 24rpx;
color: #999;
font-size: 26rpx;
color: #333;
font-weight: bold;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
width: 100%;
max-width: 100%;
display: block;
}
}


+ 42
- 3
pages/component/my.vue View File

@ -25,7 +25,7 @@
<view class="user-info">
<view class="avatar-badge-box">
<image class="avatar" :src="userInfo.headImage" mode="aspectFill"></image>
<view class="avatar-badge">{{ userTypeText }}</view>
<view class="avatar-badge" :class="userTypeBadgeClass">{{ userTypeText }}</view>
</view>
<view class="info">
<text class="name">{{ userInfo.nickName }}</text>
@ -365,8 +365,27 @@ export default {
return item ? item.keyContent : ''
},
userTypeText() {
if (this.userInfo.isUser == 'Y') return this.userInfo.isTuiTypeTitle
return '普通用户'
// isTuiType
// 0: 1广2广使
switch (this.userInfo.isTuiType) {
case 1:
return '推广达人'
case 2:
return '推广大使'
default:
return '用户'
}
},
userTypeBadgeClass() {
//
switch (this.userInfo.isTuiType) {
case 1:
return 'avatar-badge-expert' // 广
case 2:
return 'avatar-badge-ambassador' // 广使
default:
return 'avatar-badge-user' //
}
},
},
onLoad() {
@ -498,6 +517,26 @@ export default {
font-weight: 400;
letter-spacing: 2rpx;
z-index: 2;
//
&.avatar-badge-user {
background: rgba(238, 238, 238, 0.95);
color: #999;
}
// 广
&.avatar-badge-expert {
background: linear-gradient(90deg, #ff8917, #ffd01e);
color: #fff;
font-weight: 600;
}
// 广使
&.avatar-badge-ambassador {
background: linear-gradient(90deg, #b2f08d, #39e9d2);
color: #fff;
font-weight: 600;
}
}
.info {


+ 36
- 3
pages/component/recycle.vue View File

@ -55,7 +55,7 @@
<view class="goods-info-wrap">
<view class="goods-header">
<text class="goods-name">{{item.name}}</text>
<view class="brand-check-placeholder" >
<view class="brand-check-placeholder" v-ifan class="s">="item.isPin === 'Y'">
<view class="brand-check" @click="checkBrand(index)">
<text>查看品牌</text>
<uni-icons type="right" size="12" color="#ff7a0e"></uni-icons>
@ -106,7 +106,7 @@
<view class="fixed-bottom-wrap" v-if="!showDetailPanel" >
<view class="green-tip-bar">
回收范围仅支持回收以上品类按件回收预计比称重回收多
<text class="tip-highlight"> 3.76</text>
<text class="tip-highlight"> {{extraRecycleAmount.display}}</text>
</view>
<view class="bottom-bar">
<view class="bottom-left">
@ -130,7 +130,7 @@
<view class="detail-popup-close" @click="toggleDetailPanel">×</view>
<view class="green-tip-bar popup-green-tip">
回收范围仅支持回收以上品类按件回收预计比称重回收多
<text class="tip-highlight"> 3.76</text>
<text class="tip-highlight"> {{extraRecycleAmount.display}}</text>
</view>
<view class="panel-header">
<text class="panel-title">已选商品明细</text>
@ -503,6 +503,39 @@ export default {
const config = getApp().globalData.configData || [];
const item = config.find(i => i.keyName === 'min_money');
return item ? parseFloat(item.keyContent) : 0;
},
// - ( * 0.066)
extraRecycleAmount() {
const minPrice = parseFloat(this.priceRange.min) || 0;
const maxPrice = parseFloat(this.priceRange.max) || 0;
if (minPrice === 0 && maxPrice === 0) {
return {
min: '0.00',
max: '0.00',
display: '0.00元'
};
}
// 6.6%
const minExtra = minPrice - (minPrice * 0.066);
const maxExtra = maxPrice - (maxPrice * 0.066);
//
if (minPrice === maxPrice) {
return {
min: minExtra.toFixed(2),
max: maxExtra.toFixed(2),
display: `${minExtra.toFixed(2)}`
};
}
//
return {
min: minExtra.toFixed(2),
max: maxExtra.toFixed(2),
display: `${minExtra.toFixed(2)}-${maxExtra.toFixed(2)}`
};
}
},
methods: {


+ 39
- 35
pages/subcomponent/inspection-report.vue View File

@ -1,40 +1,38 @@
<template>
<view class="inspection-page">
<!-- 顶部渐变导航栏 -->
<view class="nav-bar" :style="{height: navBarTotalHeight + 'px', paddingTop: statusBarHeight + 'px'}">
<view class="nav-bar-inner">
<view class="back-icon" @tap="navigateBack">
<uni-icons type="left" size="22" color="#fff" />
</view>
<view class="nav-bar-title">质检报告</view>
<view class="nav-bar-right">
<uni-icons type="more-filled" size="22" color="#fff" />
<!-- 固定顶部区域 -->
<view class="fixed-header">
<!-- 顶部渐变导航栏 -->
<view class="nav-bar" :style="{height: navBarTotalHeight + 'px', paddingTop: statusBarHeight + 'px'}">
<view class="nav-bar-inner">
<view class="back-icon" @tap="navigateBack">
<uni-icons type="left" size="22" color="#fff" />
</view>
<view class="nav-bar-title">质检报告</view>
<view class="nav-bar-right">
<uni-icons type="more-filled" size="22" color="#fff" />
</view>
</view>
</view>
</view>
<!-- 打钩标签区及说明 -->
<view class="feature-area" :style="{marginTop: navBarTotalHeight+statusBarHeight + 'px'}">
<view class="feature-desc">该报告由{{ applet_title }}质检查验出具</view>
<view class="feature-tags">
<view class="tag" v-for="(t, i) in featureTags" :key="i">
<text class="check"></text>
<text class="text">{{t}}</text>
<!-- 打钩标签区及说明 -->
<view class="feature-area">
<view class="feature-desc">该报告由{{ applet_title }}质检查验出具</view>
<view class="feature-tags">
<view class="tag" v-for="(t, i) in featureTags" :key="i">
<text class="check"></text>
<text class="text">{{t}}</text>
</view>
</view>
</view>
</view>
<!-- <view class="">
<image src="https://oss.budingxiaoshuo.com/upload/质检报告_1748937704910.png"
style="width: 100%;"
mode="widthFix"></image>
</view> -->
<!-- 主内容区卡片悬浮覆盖打钩区 -->
<scroll-view
scroll-y
class="main-content"
enhanced
:show-scrollbar="false"
>
<view class="content-wrapper">
<view v-if="showQualified && goodsList.length" class="inspection-card">
@ -113,6 +111,7 @@ export default {
showQualified: false,
showProblem: false,
orderId : 0,
fixedHeaderHeight: 0, //
}
},
computed: {
@ -131,6 +130,10 @@ export default {
},
problemAmount() {
return this.problemList.reduce((sum, item) => sum + item.total, 0).toFixed(1)
},
fixedHeaderHeight() {
// + + (140rpxpx)
return this.statusBarHeight + this.navBarHeight + 70
}
},
onLoad(options) {
@ -252,12 +255,16 @@ export default {
position: relative;
}
.nav-bar {
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #422525;
}
.nav-bar {
width: 100vw;
background: #422525;
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
@ -301,11 +308,8 @@ export default {
.feature-area {
margin: 0 32rpx;
margin-top: 0;
margin-bottom: 0;
background:#422525;
border-radius: 32rpx;
// box-shadow: 0 4rpx 24rpx rgba(60, 167, 250, 0.08);
padding: 18rpx 24rpx 18rpx 24rpx;
display: flex;
flex-direction: column;
@ -364,22 +368,22 @@ export default {
}
.main-content {
margin-top: 20rpx;
background: linear-gradient(180deg, #fef7e6 0%, #fff 50%);
height: calc(100vh - 200rpx);
width: 100vw;
box-sizing: border-box;
position: relative;
z-index: 11;
position: absolute;
top: 220rpx;
left: 0;
right: 0;
bottom: 0;
border-radius: 40rpx 40rpx 0 0;
z-index: 11;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx 0;
padding-bottom: calc(env(safe-area-inset-bottom) + 60rpx);
min-height: 100%;
}
.inspection-card {
@ -387,7 +391,7 @@ export default {
border-radius: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.08);
padding: 40rpx 32rpx 32rpx 32rpx;
margin: 24rpx auto 0 auto;
margin: 150rpx auto 0 auto;
width: calc(100vw - 64rpx);
max-width: 700rpx;
display: flex;


+ 2
- 2
pages/subcomponent/promo-qrcode.vue View File

@ -296,8 +296,8 @@
border: none;
&.gray {
background: linear-gradient(90deg, #f7f7f7, #f2f2f2);
color: #888;
background: linear-gradient(90deg, #b2f08d, #39e9d2);
color: #fff;
}
&.green {


+ 158
- 2
pages/subcomponent/promotion.vue View File

@ -87,7 +87,7 @@
<!-- 联系客服二维码 -->
<view class="qrcode-section">
<view class="qrcode-title">联系客服</view>
<image class="qrcode-img" :src="qrcodeUrl" mode="aspectFit" />
<image class="qrcode-img" :src="qrcodeUrl" mode="aspectFit" @click="openQrcodeModal" />
</view>
</view>
<!-- 底部按钮区 -->
@ -113,6 +113,33 @@
<button class="progress-modal-btn" @tap="showProgressModal = false">我知道了</button>
</view>
</view>
<!-- 客服二维码放大弹窗 -->
<view v-if="showQrcodeModal" class="qrcode-modal-mask" @click="closeQrcodeModal">
<view class="qrcode-modal-content" @click.stop>
<view class="qrcode-modal-header">
<text class="qrcode-modal-title">联系客服</text>
<view class="qrcode-modal-close" @click="closeQrcodeModal">
<uni-icons type="close" size="24" color="#999"></uni-icons>
</view>
</view>
<view class="qrcode-modal-body">
<image
v-if="qrcodeUrl"
:src="qrcodeUrl"
mode="aspectFit"
class="qrcode-modal-img"
:show-menu-by-longpress="true"
@longpress="onQrcodeLongPress"
/>
<view v-else class="qrcode-placeholder">
<text>二维码加载中...</text>
</view>
<text class="qrcode-modal-tip">长按识别二维码添加客服微信</text>
<text class="qrcode-modal-benefit">添加客服可以获取更多推广福利</text>
</view>
</view>
</view>
</view>
</template>
@ -139,7 +166,8 @@ export default {
rankList: [
],
status: 0,
showProgressModal: false
showProgressModal: false,
showQrcodeModal: false
}
},
computed: {
@ -236,6 +264,28 @@ export default {
},
goToFaq() {
uni.navigateTo({ url: '/pages/subcomponent/admin_faq' })
},
//
openQrcodeModal() {
this.showQrcodeModal = true;
},
//
closeQrcodeModal() {
this.showQrcodeModal = false;
},
//
onQrcodeLongPress() {
console.log('长按二维码');
// show-menu-by-longpress="true"
//
uni.showToast({
title: '长按识别二维码',
icon: 'none',
duration: 1500
});
}
}
}
@ -618,6 +668,12 @@ export default {
background: #fff;
border-radius: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
cursor: pointer;
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
}
@ -744,4 +800,104 @@ export default {
justify-content: center;
border: none;
}
//
.qrcode-modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
backdrop-filter: blur(5rpx);
}
.qrcode-modal-content {
background: #fff;
border-radius: 24rpx;
width: 600rpx;
max-width: 90vw;
animation: fadeInScale 0.3s ease;
overflow: hidden;
}
.qrcode-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 40rpx 20rpx 40rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.qrcode-modal-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.qrcode-modal-close {
padding: 10rpx;
margin: -10rpx;
}
.qrcode-modal-body {
padding: 40rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.qrcode-modal-img {
width: 400rpx;
height: 400rpx;
border-radius: 16rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}
.qrcode-placeholder {
width: 400rpx;
height: 400rpx;
border-radius: 16rpx;
margin-bottom: 30rpx;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
text {
color: #999;
font-size: 28rpx;
}
}
.qrcode-modal-tip {
font-size: 28rpx;
color: #666;
text-align: center;
line-height: 1.4;
margin-bottom: 10rpx;
}
.qrcode-modal-benefit {
font-size: 26rpx;
color: #13ac47;
text-align: center;
font-weight: bold;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>

Loading…
Cancel
Save