商家邀请按钮覆盖文字、顶部文字按钮排列

This commit is contained in:
丁杰 2026-04-10 12:08:20 +08:00
parent fcf1a4ed5e
commit 1ed3b8eec4
8 changed files with 1248 additions and 1175 deletions

View File

@ -138,6 +138,8 @@ export default {
font-size: 30rpx;
color: var(--inactive-color);
transition: color 0.2s;
white-space: nowrap;
}
/* 激活色使用CSS变量 --active-color */

View File

@ -937,6 +937,12 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/shop/skill-detail",
"style": {
"navigationBarTitleText": "拍摄技巧"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -1,434 +1,450 @@
<template>
<view class="container">
<custom-navbar title="店铺视频" :leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="#fff"
titleColor="#000" borderBottom="none"></custom-navbar>
<view class="container-titles flex-row-center-between">
<view class="titles-left">
<view class="titles-bar"></view>
<text class="titles-title">我的资料</text>
</view>
<view class="titles-right">
<text class="titles-text">展示位置及拍摄技巧</text>
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b153e8d5-37b1-4205-a4a1-9f6603f30c2a.png" mode="widthFix" style="width: 24rpx;margin-top: 2rpx;margin-left: 6rpx;"></image>
</view>
</view>
<view class="container-card" v-for="(item,index) in cardList[type]" :key="index">
<view class="card-header flex-row-center-between">
<text class="card-title">{{ item.title }}</text>
<view class="card-header-right" @click="goList(item.id)">
<text class="card-header-right-text">查看全部</text>
<image class="card-header-right-img" src="/static/images/icons/right_gray14.png"></image>
</view>
</view>
<view class="card-content flex-row-center" v-if="type==1">
<view class="content-default" @click="goAdd(item.id)"
v-if="!(item.id == 1 && imgVideoList[item.id] && imgVideoList[item.id].length)">
<image class="content-default-img" src="/static/images/icons/addPhoto.png"></image>
<text class="content-default-text">添加照片</text>
</view>
<view class="content-photo" v-for="(item2,index2) in imgVideoList[item.id]" :key="index2"
v-if="imgVideoList[item.id]" @click="goAdd(item.id,item2)">
<image class="content-photo-img" mode="aspectFill" :src="getItem(item2).url"></image>
<view class="content-photo-title">
{{ getItem(item2).name }}
</view>
<view class="content-photo-mask" v-if="item2.apply_state==1">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/time.png"></image>
<text class="photo-mask-text">审核中</text>
</view>
<view class="content-photo-mask" v-if="item2.apply_state==3">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/close2.png"></image>
<view class="photo-mask-text">已驳回</view>
</view>
</view>
</view>
<view class="card-content flex-row-center" v-else>
<view class="content-default content-default2" @click="goAdd(item.id)"
v-if="!(item.id == 1 && imgVideoList[item.id] && imgVideoList[item.id].length)">
<image class="content-default-img" src="/static/images/icons/addPhoto.png"></image>
<text class="content-default-text">添加视频</text>
</view>
<view class="content-photo content-video" v-for="(item2,index2) in imgVideoList[item.id]" :key="index2"
v-if="imgVideoList[item.id]" @click="goAdd(item.id,item2)">
<image class="content-photo-video" mode="aspectFill" :src="getItem(item2).url"></image>
<view class="content-photo-title">
{{ getItem(item2).name }}
</view>
<view class="content-photo-play">
<image class="content-photo-play-img" mode="aspectFill" src="/static/images/icons/play.png">
</image>
</view>
<!-- <video class="content-photo-video" loop="true" :controls="false" :autoplay="true" :muted="true"
:src="item2.url || item2.auth_url">
</video> -->
<view class="content-photo-mask" v-if="item2.apply_state==1">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/time.png"></image>
<view class="photo-mask-text">审核中</view>
</view>
<view class="content-photo-mask" v-if="item2.apply_state==3">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/close2.png"></image>
<view class="photo-mask-text">已驳回</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import request from "@/utils/request";
export default {
data() {
return {
cardList: {
1: [{
title: "店铺主图",
id: 1
},
{
title: "环境图片",
id: 2
},
{
title: "作品展示",
id: 3
},
{
title: "其他",
id: 4
}
],
2: [{
title: "店铺主视频",
id: 1
},
{
title: "其他",
id: 4
}
],
},
imgVideoList: {
},
type: 2, //1 2
}
},
async onShow() {
await this.getList()
},
async onLoad(options) {
if (options.type) {
this.type = options.type
}
},
methods: {
getItem(item) {
let obj = {
name: "",
url: ""
}
if (item.apply_state == 1) {
obj.url = item.auth_url
obj.name = item.auth_name
} else {
obj.url = item.url || item.auth_url
obj.name = item.name || item.auth_name
}
if (item.type == 2) {
obj.url = obj.url + `?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto`
}
return obj
},
goList(id) {
console.log(id,'ididididididi');
<template>
<view class="container">
<custom-navbar :title="pagestitle" :leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="#fff"
titleColor="#000" borderBottom="none"></custom-navbar>
<view class="container-titles flex-row-center-between">
<view class="titles-left">
<view class="titles-bar"></view>
<text class="titles-title">我的资料</text>
</view>
<view class="titles-right" @click="todetail">
<text class="titles-text">展示位置及拍摄技巧</text>
<image
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b153e8d5-37b1-4205-a4a1-9f6603f30c2a.png"
mode="widthFix" style="width: 24rpx;margin-top: 4rpx;margin-left: 6rpx;"></image>
</view>
</view>
<view class="container-card" v-for="(item,index) in cardList[type]" :key="index">
<view class="card-header flex-row-center-between">
<text class="card-title">{{ item.title }}</text>
<view class="card-header-right" @click="goList(item.id)">
<text class="card-header-right-text">查看全部</text>
<image class="card-header-right-img" src="/static/images/icons/right_gray14.png"></image>
</view>
</view>
<view class="card-content flex-row-center" v-if="type==1">
<view class="content-default" @click="goAdd(item.id)"
v-if="!(item.id == 1 && imgVideoList[item.id] && imgVideoList[item.id].length)">
<image class="content-default-img" src="/static/images/icons/addPhoto.png"></image>
<text class="content-default-text">添加照片</text>
</view>
<view class="content-photo" v-for="(item2,index2) in imgVideoList[item.id]" :key="index2"
v-if="imgVideoList[item.id]" @click="goAdd(item.id,item2)">
<image class="content-photo-img" mode="aspectFill" :src="getItem(item2).url"></image>
<view class="content-photo-title">
{{ getItem(item2).name }}
</view>
<view class="content-photo-mask" v-if="item2.apply_state==1">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/time.png"></image>
<text class="photo-mask-text">审核中</text>
</view>
<view class="content-photo-mask" v-if="item2.apply_state==3">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/close2.png"></image>
<view class="photo-mask-text">已驳回</view>
</view>
</view>
</view>
<view class="card-content flex-row-center" v-else>
<view class="content-default content-default2" @click="goAdd(item.id)"
v-if="!(item.id == 1 && imgVideoList[item.id] && imgVideoList[item.id].length)">
<image class="content-default-img" src="/static/images/icons/addPhoto.png"></image>
<text class="content-default-text">添加视频</text>
</view>
<view class="content-photo content-video" v-for="(item2,index2) in imgVideoList[item.id]" :key="index2"
v-if="imgVideoList[item.id]" @click="goAdd(item.id,item2)">
<image class="content-photo-video" mode="aspectFill" :src="getItem(item2).url"></image>
<view class="content-photo-title">
{{ getItem(item2).name }}
</view>
<view class="content-photo-play">
<image class="content-photo-play-img" mode="aspectFill" src="/static/images/icons/play.png">
</image>
</view>
<!-- <video class="content-photo-video" loop="true" :controls="false" :autoplay="true" :muted="true"
:src="item2.url || item2.auth_url">
</video> -->
<view class="content-photo-mask" v-if="item2.apply_state==1">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/time.png"></image>
<view class="photo-mask-text">审核中</view>
</view>
<view class="content-photo-mask" v-if="item2.apply_state==3">
<image class="photo-mask-img" mode="aspectFill" src="/static/images/icons/close2.png"></image>
<view class="photo-mask-text">已驳回</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import request from "@/utils/request";
export default {
data() {
return {
cardList: {
1: [{
title: "店铺主图",
id: 1
},
{
title: "环境图片",
id: 2
},
{
title: "作品展示",
id: 3
},
{
title: "其他",
id: 4
}
],
2: [{
title: "店铺主视频",
id: 1
},
{
title: "其他",
id: 4
}
],
},
imgVideoList: {
},
type: 2, //1 2
pagestitle: '店铺图片'
}
},
async onShow() {
await this.getList()
},
async onLoad(options) {
console.log(options, 'options');
if (options.type) {
this.type = options.type
if (this.type == 1) {
this.pagestitle = '店铺图片'
} else {
this.pagestitle = "店铺视频"
}
}
},
methods: {
todetail() {
console.log('详情');
uni.navigateTo({
url: `/pages/shop/photoAlbum/videoList?id=${id}&type=${this.type}`
});
// let urls = []
// this.imgVideoList[id].forEach(item=>{
// urls.push(item.auth_url)
// })
// console.log(111111,urls)
// uni.navigateTo({
// url: `/pages/album/list?urls=${encodeURIComponent(JSON.stringify(urls))}`
// });
},
goAdd(id, item) {
if (this.type == 1) {
if ( this.imgVideoList[id] && this.imgVideoList[id].length >= 21) {
uni.showToast({
title: '最多上传20张图片',
icon: 'none',
duration: 2000
});
return
}
} else if (this.type == 2) {
if ( this.imgVideoList[id] && this.imgVideoList[id].length >= 10) {
uni.showToast({
title: '最多上传10张视频',
icon: 'none',
duration: 2000
});
return
}
}
// 1. id
if (!id) {
uni.showToast({
title: '参数异常,无法上传',
icon: 'none',
duration: 2000
});
return;
}
// // 2. auth_url
// if (item && item.auth_url) {
// uni.showToast({
// title: '',
// icon: 'none',
// duration: 2000
// });
// return
// }
// 3. id + item
// uni-app/ JSON.stringify
let url = `/pages/shop/photoAlbum/addPhoto?id=${id}&type=${this.type}`;
// itemitemid
if (item) {
url += `&item=${encodeURIComponent(JSON.stringify(item))}`;
}
// 4.
uni.navigateTo({
url: url
});
},
async getList() {
try {
const res = await request.post("/sj/imgVideo/list", {
type: this.type
});
// imgVideoList
this.imgVideoList = res.data?.list?.[this.type] || {};
// res.data.list[this.type]id
// this.imgVideoList = res.data?.list?.[this.type] || {};
} catch (err) {
// imgVideoList
console.error("获取图片/视频列表失败:", err);
this.imgVideoList = {};
}
}
}
}
</script>
<style lang="less">
.container {
.container-titles {
margin: 30rpx 30rpx 20rpx 23rpx;
.titles-left {
display: flex;
align-items: center;
.titles-bar {
width: 6rpx;
height: 30rpx;
background-color: #E8101E;
margin-right: 10rpx;
border-radius: 5rpx;
}
.titles-title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #1D2129;
line-height: 48rpx;
text-align: left;
font-style: normal;
}
}
.titles-right {
display: flex;
.titles-text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #986E4A;
line-height: 33rpx;
text-align: left;
font-style: normal;
}
}
}
.container-card {
border-radius: 20rpx;
margin: 20rpx;
padding: 20rpx 20rpx 30rpx 20rpx;
background: #fff;
.card-header {
margin-bottom: 20rpx;
.card-title {
font-weight: 500;
font-size: 28rpx;
color: #1D2129;
line-height: 48rpx;
text-align: left;
font-style: normal;
}
.card-header-right {
.card-header-right-text {
font-weight: 400;
font-size: 22rpx;
color: #999999;
line-height: 30rpx;
text-align: left;
font-style: normal;
}
.card-header-right-img {
width: 8rpx;
height: 16rpx;
margin-left: 7rpx;
}
}
}
.card-content {
gap: 14rpx;
flex-wrap: wrap;
.content-default {
width: 214rpx;
height: 214rpx;
background: #F5F5F5;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.content-default-img {
width: 42rpx;
height: 35rpx;
margin-bottom: 8rpx;
}
.content-default-text {
font-weight: 400;
font-size: 22rpx;
color: #666666;
line-height: 30rpx;
text-align: left;
font-style: normal;
display: block;
}
}
.content-default2 {
width: 328rpx;
height: 186rpx;
background: #F5F5F5;
border-radius: 17rpx;
}
.content-photo {
box-sizing: border-box;
width: 214rpx;
height: 214rpx;
border-radius: 20rpx;
position: relative;
overflow: hidden;
.content-photo-img {
width: 214rpx;
height: 214rpx;
border-radius: 20rpx;
}
.content-photo-video {
width: 328rpx;
height: 186rpx;
border-radius: 20rpx;
}
.content-photo-title {
background: rgba(51, 51, 51, 0.6);
padding: 6rpx 0 4rpx 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
font-weight: 400;
font-size: 15rpx;
color: #CACACA;
line-height: 21rpx;
text-align: center;
font-style: normal;
}
.content-photo-play {
width: 25rpx;
height: 25rpx;
position: absolute;
right: 10rpx;
top: 6rpx;
.content-photo-play-img {
width: 25rpx;
height: 25rpx;
}
}
.content-photo-mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 20rpx;
.photo-mask-img {
width: 36rpx;
height: 36rpx;
margin-bottom: 8rpx;
}
.photo-mask-text {
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 33rpx;
text-align: left;
font-style: normal;
}
}
}
.content-video {
width: 328rpx;
height: 186rpx;
}
}
}
}
url:'/pages/shop/skill-detail'
})
},
getItem(item) {
let obj = {
name: "",
url: ""
}
if (item.apply_state == 1) {
obj.url = item.auth_url
obj.name = item.auth_name
} else {
obj.url = item.url || item.auth_url
obj.name = item.name || item.auth_name
}
if (item.type == 2) {
obj.url = obj.url + `?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto`
}
return obj
},
goList(id) {
console.log(id, 'ididididididi');
uni.navigateTo({
url: `/pages/shop/photoAlbum/videoList?id=${id}&type=${this.type}`
});
// let urls = []
// this.imgVideoList[id].forEach(item=>{
// urls.push(item.auth_url)
// })
// console.log(111111,urls)
// uni.navigateTo({
// url: `/pages/album/list?urls=${encodeURIComponent(JSON.stringify(urls))}`
// });
},
goAdd(id, item) {
if (this.type == 1) {
if (this.imgVideoList[id] && this.imgVideoList[id].length >= 21) {
uni.showToast({
title: '最多上传20张图片',
icon: 'none',
duration: 2000
});
return
}
} else if (this.type == 2) {
if (this.imgVideoList[id] && this.imgVideoList[id].length >= 10) {
uni.showToast({
title: '最多上个10张视频',
icon: 'none',
duration: 2000
});
return
}
}
// 1. id
if (!id) {
uni.showToast({
title: '参数异常,无法上传',
icon: 'none',
duration: 2000
});
return;
}
// // 2. auth_url
// if (item && item.auth_url) {
// uni.showToast({
// title: '',
// icon: 'none',
// duration: 2000
// });
// return
// }
// 3. id + item
// uni-app/ JSON.stringify
let url = `/pages/shop/photoAlbum/addPhoto?id=${id}&type=${this.type}`;
// itemitemid
if (item) {
url += `&item=${encodeURIComponent(JSON.stringify(item))}`;
}
// 4.
uni.navigateTo({
url: url
});
},
async getList() {
try {
const res = await request.post("/sj/imgVideo/list", {
type: this.type
});
// imgVideoList
this.imgVideoList = res.data?.list?.[this.type] || {};
// res.data.list[this.type]id
// this.imgVideoList = res.data?.list?.[this.type] || {};
} catch (err) {
// imgVideoList
console.error("获取图片/视频列表失败:", err);
this.imgVideoList = {};
}
}
}
}
</script>
<style lang="less">
.container {
.container-titles {
margin: 30rpx 30rpx 20rpx 23rpx;
.titles-left {
display: flex;
align-items: center;
.titles-bar {
width: 6rpx;
height: 30rpx;
background-color: #E8101E;
margin-right: 10rpx;
border-radius: 5rpx;
}
.titles-title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #1D2129;
line-height: 48rpx;
text-align: left;
font-style: normal;
}
}
.titles-right {
display: flex;
.titles-text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #986E4A;
line-height: 33rpx;
text-align: left;
font-style: normal;
}
}
}
.container-card {
border-radius: 20rpx;
margin: 20rpx;
padding: 20rpx 20rpx 30rpx 20rpx;
background: #fff;
.card-header {
margin-bottom: 20rpx;
.card-title {
font-weight: 500;
font-size: 28rpx;
color: #1D2129;
line-height: 48rpx;
text-align: left;
font-style: normal;
}
.card-header-right {
.card-header-right-text {
font-weight: 400;
font-size: 22rpx;
color: #999999;
line-height: 30rpx;
text-align: left;
font-style: normal;
}
.card-header-right-img {
width: 8rpx;
height: 16rpx;
margin-left: 7rpx;
}
}
}
.card-content {
gap: 14rpx;
flex-wrap: wrap;
.content-default {
width: 214rpx;
height: 214rpx;
background: #F5F5F5;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.content-default-img {
width: 42rpx;
height: 35rpx;
margin-bottom: 8rpx;
}
.content-default-text {
font-weight: 400;
font-size: 22rpx;
color: #666666;
line-height: 30rpx;
text-align: left;
font-style: normal;
display: block;
}
}
.content-default2 {
width: 328rpx;
height: 186rpx;
background: #F5F5F5;
border-radius: 17rpx;
}
.content-photo {
box-sizing: border-box;
width: 214rpx;
height: 214rpx;
border-radius: 20rpx;
position: relative;
overflow: hidden;
.content-photo-img {
width: 214rpx;
height: 214rpx;
border-radius: 20rpx;
}
.content-photo-video {
width: 328rpx;
height: 186rpx;
border-radius: 20rpx;
}
.content-photo-title {
background: rgba(51, 51, 51, 0.6);
padding: 6rpx 0 4rpx 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
font-weight: 400;
font-size: 15rpx;
color: #CACACA;
line-height: 21rpx;
text-align: center;
font-style: normal;
}
.content-photo-play {
width: 25rpx;
height: 25rpx;
position: absolute;
right: 10rpx;
top: 6rpx;
.content-photo-play-img {
width: 25rpx;
height: 25rpx;
}
}
.content-photo-mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 20rpx;
.photo-mask-img {
width: 36rpx;
height: 36rpx;
margin-bottom: 8rpx;
}
.photo-mask-text {
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 33rpx;
text-align: left;
font-style: normal;
}
}
}
.content-video {
width: 328rpx;
height: 186rpx;
}
}
}
}
</style>

View File

@ -183,7 +183,7 @@
} else if (this.type == 2) {
if (this.imgVideoList.length >= 10) {
uni.showToast({
title: '最多上传10张视频',
title: '最多上10个视频',
icon: 'none',
duration: 2000
});

View File

@ -0,0 +1,26 @@
<template>
<view>
</view>
</template>
<script>
import request from "@/utils/request";
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -12,7 +12,7 @@
<searchBox placeholder="请输入员工手机号" class="searchBox" v-model="queryData.phone" bgClor="transparent" @confirm="search"
@search="search">
</searchBox>
<scroll-view scroll-y :style="{ height:`calc(100vh - ${statusBarHeight + 200}rpx)`} ">
<scroll-view :style="{ height:`calc(100vh - ${statusBarHeight + 200}rpx)`} ">
<view class="page-container" v-if="sryDetail && sryDetail.id">
<!-- 个人信息栏 -->
<view class="user-info">
@ -75,6 +75,7 @@
<view class="agreement-footer" @click="sjinvitesyr" v-if="sryDetail && sryDetail.id && sryDetail.bind_state!=1">
<view class="agreement-btn">邀请员工</view>
</view>
<!-- <view class="" style="height: 98rpx;background-color: aquamarine;"></view> -->
</scroll-view>
</view>
</template>
@ -428,7 +429,6 @@
right: 0;
bottom: 0;
background-color: #ffffff;
.agreement-btn {
width: 710rpx;
height: 98rpx;

View File

@ -69,7 +69,7 @@
if (options.syrid) {
this.sjservers(Number(options.syrid));
} else {
this.serviceList = this.$store.state.sjServiceList;
this.serviceList = JSON.parse(JSON.stringify(this.$store.state.sjServiceList))
}
this.sjfirstclass();
},
@ -80,8 +80,10 @@
},
methods: {
changeType(item){
if(this.isBack==0){
item.is_choice = !item.is_choice
console.log(this.$store.state.sjServiceList,'this.$store.state.sjServiceList');
}
},