@ -1,16 +1,16 @@ |
|||
/* 左右联动props */ |
|||
export interface ICateItem { |
|||
id: number; |
|||
name: string; |
|||
icon: string; |
|||
goods_list: IGood[]; |
|||
[key: string]: any; |
|||
id: number |
|||
name: string |
|||
icon: string |
|||
goods_list: IGood[] |
|||
[key: string]: any |
|||
} |
|||
|
|||
export interface IGood { |
|||
id: number; |
|||
content: string; |
|||
name: string; |
|||
images: string; |
|||
[key: string]: any; |
|||
id: number |
|||
content: string |
|||
name: string |
|||
images: string |
|||
[key: string]: any |
|||
} |
|||
@ -1,420 +1,422 @@ |
|||
<template> |
|||
<view class="zh-wrapper"> |
|||
<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y> |
|||
<view class="wrapper"> |
|||
<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id == curCateId}" |
|||
v-for="(item, index) in goods" :key="index" @tap="handleMenuTap(item.id)"> |
|||
<view class="changeicon" v-if="item.id == curCateId"> |
|||
|
|||
</view> |
|||
<text class="menutitle">{{ item.name }}</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" |
|||
@scroll="handleGoodsScroll"> |
|||
<view class="wrapper"> |
|||
<view class="list"> |
|||
<!-- category begin --> |
|||
<view class="category" v-for="(item, index) in goods" :key="index" :id="`cate-${item.id}`"> |
|||
<view class="title"> |
|||
<image :src="baseurl+item.icon_path" class="icon"></image> |
|||
<text class="fristtitle">{{ item.name }}</text> |
|||
</view> |
|||
<view class="items"> |
|||
<!-- 商品 begin --> |
|||
<view class="good" v-for="(good, key) in item.list" :key="key" @click="goxdbdetail(good.id)"> |
|||
<slot name="custom" :data="good"> |
|||
<!-- <image :src="good.images" class="image"></image> --> |
|||
<!-- <view class="title"> --> |
|||
<!-- <image :src="baseurl+good.icon_path" class="icon"></image> --> |
|||
<text class="name">{{ good.title }}</text> |
|||
<!-- </view> --> |
|||
<image class="lefticon" src="@/static/img/icon2.png" mode=""></image> |
|||
<!-- <view class="right"> --> |
|||
<!-- <text class="tips">{{ good.content }}</text> --> |
|||
<!-- </view> --> |
|||
</slot> |
|||
</view> |
|||
<!-- 商品 end --> |
|||
</view> |
|||
</view> |
|||
<!-- category end --> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="zh-wrapper"> |
|||
<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y> |
|||
<view class="wrapper"> |
|||
<view |
|||
class="menu" |
|||
:id="`menu-${item.id}`" |
|||
:class="{ current: item.id == curCateId }" |
|||
v-for="(item, index) in goods" |
|||
:key="index" |
|||
@tap="handleMenuTap(item.id)" |
|||
> |
|||
<view class="changeicon" v-if="item.id == curCateId"></view> |
|||
<text class="menutitle">{{ item.name }}</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" @scroll="handleGoodsScroll"> |
|||
<view class="wrapper"> |
|||
<view class="list"> |
|||
<!-- category begin --> |
|||
<view class="category" v-for="(item, index) in goods" :key="index" :id="`cate-${item.id}`"> |
|||
<view class="title"> |
|||
<image :src="baseurl + item.icon_path" class="icon"></image> |
|||
<text class="fristtitle">{{ item.name }}</text> |
|||
</view> |
|||
<view class="items"> |
|||
<!-- 商品 begin --> |
|||
<view class="good" v-for="(good, key) in item.list" :key="key" @click="goxdbdetail(good.id)"> |
|||
<slot name="custom" :data="good"> |
|||
<!-- <image :src="good.images" class="image"></image> --> |
|||
<!-- <view class="title"> --> |
|||
<!-- <image :src="baseurl+good.icon_path" class="icon"></image> --> |
|||
<text class="name">{{ good.title }}</text> |
|||
<!-- </view> --> |
|||
<image class="lefticon" src="@/static/img/icon2.png" mode=""></image> |
|||
<!-- <view class="right"> --> |
|||
<!-- <text class="tips">{{ good.content }}</text> --> |
|||
<!-- </view> --> |
|||
</slot> |
|||
</view> |
|||
<!-- 商品 end --> |
|||
</view> |
|||
</view> |
|||
<!-- category end --> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, nextTick, getCurrentInstance, watch } from "vue"; |
|||
import { ICateItem } from "./interface"; |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL+'/') |
|||
const props = defineProps<{ |
|||
scrollList: ICateItem[], |
|||
searchVal: string, |
|||
}>() |
|||
const instance = getCurrentInstance(); |
|||
const menuScrollIntoView = ref(""); |
|||
const cateScrollTop = ref(0); |
|||
// 计算高度状态 |
|||
const sizeCalcState = ref(false); |
|||
const goods = ref<ICateItem[]>([]); |
|||
const curCateId = ref(0); |
|||
|
|||
watch( |
|||
() => props.scrollList, |
|||
newVal => { |
|||
goods.value = newVal; |
|||
curCateId.value = goods.value[0]?.id |
|||
nextTick(() => { |
|||
if (newVal && newVal.length > 0) { |
|||
calcSize(); |
|||
} |
|||
}) |
|||
}, |
|||
{ |
|||
immediate: true, |
|||
deep: true |
|||
} |
|||
) |
|||
|
|||
// 点击左侧菜单 |
|||
function handleMenuTap(id: number) { |
|||
if (!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
|
|||
curCateId.value = id |
|||
|
|||
nextTick(() => { |
|||
cateScrollTop.value = goods.value.find(item => item.id == id).top |
|||
}) |
|||
} |
|||
|
|||
function fuzzyMatchGoods(goodsArray, searchTerm) { |
|||
const term = searchTerm.trim().toLowerCase(); |
|||
return goodsArray.filter(goodsItem => |
|||
goodsItem.children.some(child => |
|||
(child.name?.toLowerCase() ?? '').includes(term) |
|||
) |
|||
); |
|||
} |
|||
|
|||
//搜索跳转 |
|||
function searchleMenuTap(search: string) { |
|||
if (!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
try { |
|||
nextTick(() => { |
|||
const arr = fuzzyMatchGoods(goods.value,search) |
|||
console.log(arr[0]); |
|||
curCateId.value = arr[0]?.id |
|||
cateScrollTop.value = arr[0].top |
|||
}) |
|||
} catch(error) { |
|||
uni.showToast({ |
|||
title: '搜索为空' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// |
|||
function handleGoodsScroll({ detail }) { |
|||
if(!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
const { scrollTop } = detail |
|||
// 此处scrollTop + 1为了处理scrolltop的偏差值 |
|||
let tabs = goods.value.filter(item=> item.top <= (scrollTop + 1)).reverse() |
|||
if(tabs.length > 0){ |
|||
curCateId.value = tabs[0].id |
|||
} |
|||
} |
|||
|
|||
function calcSize() { |
|||
let h = 10 |
|||
|
|||
goods.value.forEach(item => { |
|||
let view = uni.createSelectorQuery().in(instance).select(`#cate-${item.id}`) |
|||
view.fields({ |
|||
size: true |
|||
}, (data: any) => { |
|||
item.top = h |
|||
h += data.height |
|||
item.bottom = h |
|||
}).exec() |
|||
}) |
|||
sizeCalcState.value = true |
|||
} |
|||
|
|||
const goxdbdetail = (id: string) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/shophelpDetail?id='+id |
|||
}) |
|||
} |
|||
|
|||
defineExpose({ |
|||
searchleMenuTap |
|||
}) |
|||
import { ref, nextTick, getCurrentInstance, watch } from 'vue' |
|||
import { ICateItem } from './interface' |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
const props = defineProps<{ |
|||
scrollList: ICateItem[] |
|||
searchVal: string |
|||
}>() |
|||
const instance = getCurrentInstance() |
|||
const menuScrollIntoView = ref('') |
|||
const cateScrollTop = ref(0) |
|||
// 计算高度状态 |
|||
const sizeCalcState = ref(false) |
|||
const goods = ref<ICateItem[]>([]) |
|||
const curCateId = ref(0) |
|||
|
|||
watch( |
|||
() => props.scrollList, |
|||
(newVal) => { |
|||
goods.value = newVal |
|||
curCateId.value = goods.value[0]?.id |
|||
nextTick(() => { |
|||
if (newVal && newVal.length > 0) { |
|||
calcSize() |
|||
} |
|||
}) |
|||
}, |
|||
{ |
|||
immediate: true, |
|||
deep: true |
|||
} |
|||
) |
|||
|
|||
// 点击左侧菜单 |
|||
function handleMenuTap(id: number) { |
|||
if (!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
|
|||
curCateId.value = id |
|||
|
|||
nextTick(() => { |
|||
cateScrollTop.value = goods.value.find((item) => item.id == id).top |
|||
}) |
|||
} |
|||
|
|||
function fuzzyMatchGoods(goodsArray, searchTerm) { |
|||
const term = searchTerm.trim().toLowerCase() |
|||
console.log(goodsArray) |
|||
return goodsArray.filter((goodsItem) => goodsItem.list.some((child) => (child.title?.toLowerCase() ?? '').includes(term))) |
|||
} |
|||
|
|||
//搜索跳转 |
|||
function searchleMenuTap(search: string) { |
|||
if (!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
try { |
|||
nextTick(() => { |
|||
const arr = fuzzyMatchGoods(goods.value, props.searchVal) |
|||
console.log(arr[0]) |
|||
curCateId.value = arr[0]?.id |
|||
cateScrollTop.value = arr[0].top |
|||
}) |
|||
} catch (error) { |
|||
uni.showToast({ |
|||
title: '搜索为空' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// |
|||
function handleGoodsScroll({ detail }) { |
|||
if (!sizeCalcState.value) { |
|||
calcSize() |
|||
} |
|||
const { scrollTop } = detail |
|||
// 此处scrollTop + 1为了处理scrolltop的偏差值 |
|||
let tabs = goods.value.filter((item) => item.top <= scrollTop + 1).reverse() |
|||
if (tabs.length > 0) { |
|||
curCateId.value = tabs[0].id |
|||
} |
|||
} |
|||
|
|||
function calcSize() { |
|||
let h = 10 |
|||
|
|||
goods.value.forEach((item) => { |
|||
let view = uni.createSelectorQuery().in(instance).select(`#cate-${item.id}`) |
|||
view.fields( |
|||
{ |
|||
size: true |
|||
}, |
|||
(data: any) => { |
|||
item.top = h |
|||
h += data.height |
|||
item.bottom = h |
|||
} |
|||
).exec() |
|||
}) |
|||
sizeCalcState.value = true |
|||
} |
|||
|
|||
const goxdbdetail = (id: string) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/shophelpDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
defineExpose({ |
|||
searchleMenuTap |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
height: 100%; |
|||
} |
|||
.zh-wrapper { |
|||
height: calc(100% - 66rpx); |
|||
overflow: hidden; |
|||
width: 100%; |
|||
display: flex; |
|||
|
|||
.menus { |
|||
width: 200rpx; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #F1F3F9; |
|||
|
|||
.wrapper { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.menu { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
padding: 30rpx 20rpx; |
|||
font-size: 26rpx; |
|||
color: #3D3D3D; |
|||
position: relative; |
|||
|
|||
&:nth-last-child(1) { |
|||
margin-bottom: 130rpx; |
|||
} |
|||
|
|||
&.current { |
|||
background-color: #ffffff; |
|||
color: #0072FF; |
|||
} |
|||
|
|||
.dot { |
|||
position: absolute; |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
line-height: 34rpx; |
|||
font-size: 22rpx; |
|||
// background-color: $uni-color-primary; |
|||
color: #ffffff; |
|||
top: 16rpx; |
|||
right: 10rpx; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
} |
|||
.menutitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.changeicon { |
|||
width: 20rpx; |
|||
height: 40rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
position: fixed; |
|||
left: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.goods { |
|||
flex: 1; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #ffffff; |
|||
|
|||
.wrapper { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 20rpx; |
|||
|
|||
.list { |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
padding-bottom: 130rpx; |
|||
|
|||
.category { |
|||
width: 100%; |
|||
|
|||
.title { |
|||
padding: 10rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #0C092A; |
|||
|
|||
.icon { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
} |
|||
.fristtitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 530; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-bottom: -30rpx; |
|||
|
|||
:deep(.good) { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 30rpx; |
|||
padding-left: 40rpx; |
|||
.name { |
|||
max-width: 100%; |
|||
margin-left: 10rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
color: #606266; |
|||
overflow: hidden; /* 隐藏溢出内容 */ |
|||
white-space: nowrap; /* 禁止换行 */ |
|||
text-overflow: ellipsis; /* 显示省略号 */ |
|||
|
|||
} |
|||
.icon { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
} |
|||
.lefticon { |
|||
width: 16rpx; |
|||
height: 28rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
// .image { |
|||
// width: 160rpx; |
|||
// height: 160rpx; |
|||
// margin-right: 20rpx; |
|||
// border-radius: 8rpx; |
|||
// } |
|||
|
|||
// .right { |
|||
// flex: 1; |
|||
// height: 160rpx; |
|||
// overflow: hidden; |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// align-items: flex-start; |
|||
// justify-content: space-between; |
|||
// padding-right: 14rpx; |
|||
|
|||
// .name { |
|||
// font-family: Source Han Sans; |
|||
// font-size: 28rpx; |
|||
// font-weight: 300; |
|||
// line-height: 48rpx; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// letter-spacing: normal; |
|||
// color: #606266; |
|||
// } |
|||
|
|||
// .tips { |
|||
// width: 100%; |
|||
// height: 40rpx; |
|||
// line-height: 40rpx; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// white-space: nowrap; |
|||
// font-size: 28rpx; |
|||
// color: #606266; |
|||
// margin-bottom: 10rpx; |
|||
// } |
|||
|
|||
// .price_and_action { |
|||
// width: 100%; |
|||
// display: flex; |
|||
// justify-content: space-between; |
|||
// align-items: center; |
|||
|
|||
// .price { |
|||
// font-size: #606266; |
|||
// font-weight: 600; |
|||
// } |
|||
|
|||
// .btn-group { |
|||
// display: flex; |
|||
// justify-content: space-between; |
|||
// align-items: center; |
|||
// position: relative; |
|||
|
|||
// .btn { |
|||
// padding: 0 20rpx; |
|||
// box-sizing: border-box; |
|||
// font-size: 28rpx; |
|||
// height: 44rpx; |
|||
// line-height: 44rpx; |
|||
|
|||
// &.property_btn { |
|||
// border-radius: 24rpx; |
|||
// } |
|||
|
|||
// &.add_btn, |
|||
// &.reduce_btn { |
|||
// padding: 0; |
|||
// width: 44rpx; |
|||
// border-radius: 44rpx; |
|||
// } |
|||
// } |
|||
|
|||
// .dot { |
|||
// position: absolute; |
|||
// background-color: #ffffff; |
|||
// color: #606266; |
|||
// font-size: 28rpx; |
|||
// width: 36rpx; |
|||
// height: 36rpx; |
|||
// line-height: 36rpx; |
|||
// text-align: center; |
|||
// border-radius: 100%; |
|||
// right: -12rpx; |
|||
// top: -10rpx; |
|||
// } |
|||
|
|||
// .number { |
|||
// width: 44rpx; |
|||
// height: 44rpx; |
|||
// line-height: 44rpx; |
|||
// text-align: center; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
page { |
|||
height: 100%; |
|||
} |
|||
.zh-wrapper { |
|||
height: calc(100% - 66rpx); |
|||
overflow: hidden; |
|||
width: 100%; |
|||
display: flex; |
|||
|
|||
.menus { |
|||
width: 200rpx; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #f1f3f9; |
|||
|
|||
.wrapper { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.menu { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
padding: 30rpx 20rpx; |
|||
font-size: 26rpx; |
|||
color: #3d3d3d; |
|||
position: relative; |
|||
|
|||
&:nth-last-child(1) { |
|||
margin-bottom: 130rpx; |
|||
} |
|||
|
|||
&.current { |
|||
background-color: #ffffff; |
|||
color: #0072ff; |
|||
} |
|||
|
|||
.dot { |
|||
position: absolute; |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
line-height: 34rpx; |
|||
font-size: 22rpx; |
|||
// background-color: $uni-color-primary; |
|||
color: #ffffff; |
|||
top: 16rpx; |
|||
right: 10rpx; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
} |
|||
.menutitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
.changeicon { |
|||
width: 20rpx; |
|||
height: 40rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007fff 0%, #99ccff 100%); |
|||
position: fixed; |
|||
left: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.goods { |
|||
flex: 1; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #ffffff; |
|||
|
|||
.wrapper { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 20rpx; |
|||
|
|||
.list { |
|||
width: 100%; |
|||
font-size: 28rpx; |
|||
padding-bottom: 130rpx; |
|||
|
|||
.category { |
|||
width: 100%; |
|||
|
|||
.title { |
|||
padding: 10rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #0c092a; |
|||
|
|||
.icon { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
} |
|||
.fristtitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 530; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.items { |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-bottom: -30rpx; |
|||
|
|||
:deep(.good) { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 30rpx; |
|||
padding-left: 40rpx; |
|||
.name { |
|||
max-width: 100%; |
|||
margin-left: 10rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
color: #606266; |
|||
overflow: hidden; /* 隐藏溢出内容 */ |
|||
white-space: nowrap; /* 禁止换行 */ |
|||
text-overflow: ellipsis; /* 显示省略号 */ |
|||
} |
|||
.icon { |
|||
width: 38rpx; |
|||
height: 38rpx; |
|||
} |
|||
.lefticon { |
|||
width: 16rpx; |
|||
height: 28rpx; |
|||
margin-right: 6rpx; |
|||
} |
|||
|
|||
// .image { |
|||
// width: 160rpx; |
|||
// height: 160rpx; |
|||
// margin-right: 20rpx; |
|||
// border-radius: 8rpx; |
|||
// } |
|||
|
|||
// .right { |
|||
// flex: 1; |
|||
// height: 160rpx; |
|||
// overflow: hidden; |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// align-items: flex-start; |
|||
// justify-content: space-between; |
|||
// padding-right: 14rpx; |
|||
|
|||
// .name { |
|||
// font-family: Source Han Sans; |
|||
// font-size: 28rpx; |
|||
// font-weight: 300; |
|||
// line-height: 48rpx; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// letter-spacing: normal; |
|||
// color: #606266; |
|||
// } |
|||
|
|||
// .tips { |
|||
// width: 100%; |
|||
// height: 40rpx; |
|||
// line-height: 40rpx; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// white-space: nowrap; |
|||
// font-size: 28rpx; |
|||
// color: #606266; |
|||
// margin-bottom: 10rpx; |
|||
// } |
|||
|
|||
// .price_and_action { |
|||
// width: 100%; |
|||
// display: flex; |
|||
// justify-content: space-between; |
|||
// align-items: center; |
|||
|
|||
// .price { |
|||
// font-size: #606266; |
|||
// font-weight: 600; |
|||
// } |
|||
|
|||
// .btn-group { |
|||
// display: flex; |
|||
// justify-content: space-between; |
|||
// align-items: center; |
|||
// position: relative; |
|||
|
|||
// .btn { |
|||
// padding: 0 20rpx; |
|||
// box-sizing: border-box; |
|||
// font-size: 28rpx; |
|||
// height: 44rpx; |
|||
// line-height: 44rpx; |
|||
|
|||
// &.property_btn { |
|||
// border-radius: 24rpx; |
|||
// } |
|||
|
|||
// &.add_btn, |
|||
// &.reduce_btn { |
|||
// padding: 0; |
|||
// width: 44rpx; |
|||
// border-radius: 44rpx; |
|||
// } |
|||
// } |
|||
|
|||
// .dot { |
|||
// position: absolute; |
|||
// background-color: #ffffff; |
|||
// color: #606266; |
|||
// font-size: 28rpx; |
|||
// width: 36rpx; |
|||
// height: 36rpx; |
|||
// line-height: 36rpx; |
|||
// text-align: center; |
|||
// border-radius: 100%; |
|||
// right: -12rpx; |
|||
// top: -10rpx; |
|||
// } |
|||
|
|||
// .number { |
|||
// width: 44rpx; |
|||
// height: 44rpx; |
|||
// line-height: 44rpx; |
|||
// text-align: center; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,275 +1,285 @@ |
|||
<template> |
|||
<view class="dialog-container" v-if="visible"> |
|||
<view class="dialog-mask" @click="close">×</view> |
|||
<view class="dialog-content" :style="{height: isdx?'88%':'686rpx'}"> |
|||
<view class="butss"> |
|||
<image style="width: 40rpx;height: 40rpx;" @click="dxclick" :src="isdx?'/static/img/sx.png':'/static/img/fd.png'" mode=""></image> |
|||
</view> |
|||
<scroll-view class="message-box" scroll-y> |
|||
<view class="akstart" v-if="showfirst"> |
|||
<view v-for="(msg,index) in messages" :key="index" :class="['message', msg.role]"> |
|||
<image class="aicon" src="@/static/img/aiicon.png" mode=""></image> |
|||
<view class="bubble"> |
|||
<text>{{ msg.content }}</text> |
|||
</view> |
|||
</view> |
|||
<view v-if="loading" class="loading">AI思考中...</view> |
|||
</view> |
|||
<view class="cnxw" v-else> |
|||
<view class="message assistant"> |
|||
<image class="aicon" src="@/static/img/aiicon.png" mode=""></image> |
|||
<view class="bubble"> |
|||
<text class="cwtitle">猜你想问</text> |
|||
<u-line color="#99CCFF" margin="20rpx 0"></u-line> |
|||
<text class="cwtxt" @click="askClcik('小微企业优惠政策')">小微企业优惠政策</text> |
|||
<text class="cwtxt" @click="askClcik('2025年最新小微企业优惠政策')">2025年最新小微企业优惠政策</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="input-box" v-if="showfirst"> |
|||
<input v-model="inputText" placeholder="请输入问题" @confirm="send" /> |
|||
<button @click="send" :disabled="loading">发送</button> |
|||
</view> |
|||
<view class="inputbox" @click="showfirst = true" v-else> |
|||
<image style="width: 28rpx;height: 26rpx;margin-right: 8rpx;" src="@/static/img/daan.png" mode=""> |
|||
</image> |
|||
找不到答案,点此提问 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="dialog-container" v-if="visible"> |
|||
<view class="dialog-mask" @click="close">×</view> |
|||
<view class="dialog-content" :style="{ height: isdx ? '88%' : '686rpx' }"> |
|||
<view class="butss"> |
|||
<image |
|||
style="width: 152rpx; margin-left: 20rpx; top: -120rpx; left: -2rpx; position: absolute" |
|||
src="@/static/img/aiimg.png" |
|||
mode="widthFix" |
|||
></image> |
|||
<view style="display: flex; align-items: center"> |
|||
<view style="font-size: 50rpx; color: #007fff" @click="close">×</view> |
|||
<image |
|||
style="width: 40rpx; height: 40rpx; margin-left: 40rpx" |
|||
@click="dxclick" |
|||
:src="isdx ? '/static/img/sx.png' : '/static/img/fd.png'" |
|||
mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<scroll-view class="message-box" scroll-y :style="{ height: isdx ? '80%' : '70%' }"> |
|||
<view class="akstart" v-if="showfirst"> |
|||
<view v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]"> |
|||
<image class="aicon" src="@/static/img/aiicon.png" mode=""></image> |
|||
<view class="bubble"> |
|||
<text>{{ msg.content }}</text> |
|||
</view> |
|||
</view> |
|||
<view v-if="loading" class="loading">AI思考中...</view> |
|||
</view> |
|||
<view class="cnxw" v-else> |
|||
<view class="message assistant"> |
|||
<image class="aicon" src="@/static/img/aiicon.png" mode="widthFix"></image> |
|||
<view class="bubble"> |
|||
<text class="cwtitle">猜你想问</text> |
|||
<u-line color="#99CCFF" margin="20rpx 0"></u-line> |
|||
<text class="cwtxt" @click="askClcik('小微企业优惠政策')">小微企业优惠政策</text> |
|||
<text class="cwtxt" @click="askClcik('2025年最新小微企业优惠政策')">2025年最新小微企业优惠政策</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="input-box" v-if="showfirst"> |
|||
<input v-model="inputText" placeholder="请输入问题" @confirm="send" /> |
|||
<button @click="send" :disabled="loading">发送</button> |
|||
</view> |
|||
<view class="inputbox" @click="showfirst = true" v-else> |
|||
<image style="width: 28rpx; height: 26rpx; margin-right: 8rpx" src="@/static/img/daan.png" mode=""></image> |
|||
找不到答案,点此提问 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue' |
|||
import { |
|||
ai |
|||
} from '@/api/index' |
|||
|
|||
const showfirst = ref(false) |
|||
|
|||
const props = defineProps({ |
|||
visible: Boolean, |
|||
}) |
|||
const emit = defineEmits(['close']) |
|||
|
|||
const messages = ref([]) |
|||
const inputText = ref('') |
|||
const loading = ref(false) |
|||
|
|||
const close = () => emit('close') |
|||
|
|||
const send = async () => { |
|||
if (!inputText.value.trim()) return |
|||
|
|||
// 用户消息(右侧) |
|||
messages.value.push({ |
|||
role: 'user', |
|||
content: inputText.value |
|||
}) |
|||
|
|||
const question = inputText.value |
|||
inputText.value = '' |
|||
loading.value = true |
|||
|
|||
try { |
|||
const { |
|||
data |
|||
} = await ai({ |
|||
"messages": question |
|||
}) |
|||
|
|||
// AI回复(左侧) |
|||
messages.value.push({ |
|||
role: 'assistant', |
|||
content: data.content |
|||
}) |
|||
} catch (e) { |
|||
messages.value.push({ |
|||
role: 'system', |
|||
content: '服务异常,请稍后重试' |
|||
}) |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
const askClcik = (val) => { |
|||
showfirst.value = true |
|||
inputText.value = val |
|||
} |
|||
|
|||
const isdx = ref(false) |
|||
const dxclick = () => { |
|||
isdx.value = !isdx.value |
|||
} |
|||
import { ref } from 'vue' |
|||
import { ai } from '@/api/index' |
|||
|
|||
const showfirst = ref(false) |
|||
|
|||
const props = defineProps({ |
|||
visible: Boolean |
|||
}) |
|||
const emit = defineEmits(['close']) |
|||
|
|||
const messages = ref([]) |
|||
const inputText = ref('') |
|||
const loading = ref(false) |
|||
|
|||
const close = () => emit('close') |
|||
|
|||
const send = async () => { |
|||
if (!inputText.value.trim()) return |
|||
|
|||
// 用户消息(右侧) |
|||
messages.value.push({ |
|||
role: 'user', |
|||
content: inputText.value |
|||
}) |
|||
|
|||
const question = inputText.value |
|||
inputText.value = '' |
|||
loading.value = true |
|||
|
|||
try { |
|||
const { data } = await ai({ |
|||
messages: question |
|||
}) |
|||
|
|||
// AI回复(左侧) |
|||
messages.value.push({ |
|||
role: 'assistant', |
|||
content: data.content |
|||
}) |
|||
} catch (e) { |
|||
messages.value.push({ |
|||
role: 'system', |
|||
content: '服务异常,请稍后重试' |
|||
}) |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
const askClcik = (val) => { |
|||
showfirst.value = true |
|||
inputText.value = val |
|||
} |
|||
|
|||
const isdx = ref(false) |
|||
const dxclick = () => { |
|||
isdx.value = !isdx.value |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.dialog-container { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.dialog-mask { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.dialog-content { |
|||
position: absolute; |
|||
width: 100%; |
|||
bottom: 0; |
|||
background: #E7F3FF; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid #FFFFFF; |
|||
box-shadow: 0rpx -30rpx 20rpx 0rpx rgba(0, 0, 0, 0.2); |
|||
border-radius: 96rpx 0rpx 0rpx 0rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.message-box { |
|||
height: 85%; |
|||
padding: 30rpx 30rpx 10rpx 30rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.message { |
|||
margin-bottom: 30rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
.message.user { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.message.assistant { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.bubble { |
|||
max-width: 75%; |
|||
padding: 20rpx 30rpx; |
|||
border-radius: 10rpx; |
|||
background-color: aliceblue; |
|||
} |
|||
|
|||
.user { |
|||
.bubble { |
|||
background: #95ec69; |
|||
} |
|||
|
|||
.aicon { |
|||
width: 0; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
.assistant { |
|||
.aicon { |
|||
width: 74rpx; |
|||
height: 64rpx; |
|||
} |
|||
|
|||
.bubble { |
|||
background: #FFFFFF; |
|||
margin-left: 20rpx; |
|||
|
|||
text { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.input-box { |
|||
height: 15%; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 20rpx; |
|||
border-radius: 40rpx 40rpx 0rpx 0rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
input { |
|||
flex: 1; |
|||
padding: 16rpx 24rpx; |
|||
border: 2rpx solid #ddd; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
button { |
|||
margin-left: 20rpx; |
|||
padding: 0 30rpx; |
|||
background: #007aff; |
|||
color: white; |
|||
height: 70rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.loading { |
|||
text-align: center; |
|||
color: #999; |
|||
} |
|||
|
|||
.cwtitle { |
|||
color: #007FFF !important; |
|||
} |
|||
|
|||
.cwtxt { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #666666; |
|||
} |
|||
|
|||
.inputbox { |
|||
height: 15%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 20rpx; |
|||
border-radius: 40rpx 40rpx 0rpx 0rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.05); |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007FFF; |
|||
} |
|||
.butss { |
|||
width: 100%; |
|||
text-align: end; |
|||
padding: 20rpx; |
|||
} |
|||
.dialog-container { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.dialog-mask { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.dialog-content { |
|||
position: absolute; |
|||
width: 100%; |
|||
bottom: 0; |
|||
background: #e7f3ff; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid #ffffff; |
|||
box-shadow: 0rpx -30rpx 20rpx 0rpx rgba(0, 0, 0, 0.2); |
|||
border-radius: 96rpx 0rpx 0rpx 0rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.message-box { |
|||
padding: 30rpx 30rpx 10rpx 30rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.message { |
|||
margin-bottom: 30rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
.message.user { |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.message.assistant { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.bubble { |
|||
max-width: 75%; |
|||
padding: 20rpx 30rpx; |
|||
border-radius: 10rpx; |
|||
background-color: aliceblue; |
|||
} |
|||
|
|||
.user { |
|||
.bubble { |
|||
background: #95ec69; |
|||
} |
|||
|
|||
.aicon { |
|||
width: 0; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
.assistant { |
|||
.aicon { |
|||
width: 64rpx; |
|||
} |
|||
|
|||
.bubble { |
|||
background: #ffffff; |
|||
margin-left: 20rpx; |
|||
|
|||
text { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.input-box { |
|||
width: 100%; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 25rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 40rpx 40rpx 0rpx 0rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
input { |
|||
flex: 1; |
|||
padding: 16rpx 24rpx; |
|||
border: 2rpx solid #ddd; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
button { |
|||
margin-left: 20rpx; |
|||
padding: 0 30rpx; |
|||
background: #007aff; |
|||
color: white; |
|||
height: 70rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.loading { |
|||
text-align: center; |
|||
color: #999; |
|||
} |
|||
|
|||
.cwtitle { |
|||
color: #007fff !important; |
|||
} |
|||
|
|||
.cwtxt { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #666666; |
|||
} |
|||
|
|||
.inputbox { |
|||
height: 15%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 20rpx; |
|||
border-radius: 40rpx 40rpx 0rpx 0rpx; |
|||
background: #ffffff; |
|||
box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.05); |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 48rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007fff; |
|||
} |
|||
|
|||
.butss { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
padding: 20rpx; |
|||
} |
|||
</style> |
|||
@ -1,158 +1,152 @@ |
|||
<template> |
|||
<image style="width: 100%;height: 352rpx;" :src="baseurl + detaildata.index_pic" mode=""></image> |
|||
<view class="container"> |
|||
<text class="headtxt">{{detaildata.title}}</text> |
|||
<text class="address">活动地点:{{detaildata.address}}</text> |
|||
<view class="adressnum"> |
|||
<text class="time">活动时间:{{detaildata.activity_time}}</text> |
|||
<view class="ydl"> |
|||
<text class="time">阅读量:</text> |
|||
<text class="value"> |
|||
{{detaildata.count}} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">活动详情</text> |
|||
</view> |
|||
<u-parse :content="detaildata.content"></u-parse> |
|||
<text class="certetime">{{detaildata.create_time}}</text> |
|||
</view> |
|||
<image style="width: 100%; height: 352rpx" :src="baseurl + detaildata.index_pic" mode=""></image> |
|||
<view class="container"> |
|||
<text class="headtxt">{{ detaildata.title }}</text> |
|||
<text class="address">活动地点:{{ detaildata.address }}</text> |
|||
<view class="adressnum"> |
|||
<text class="time">活动时间:{{ detaildata.activity_time }}</text> |
|||
<view class="ydl"> |
|||
<text class="time">阅读量:</text> |
|||
<text class="value"> |
|||
{{ detaildata.count }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">活动详情</text> |
|||
</view> |
|||
<u-parse :content="detaildata.content"></u-parse> |
|||
<text class="certetime">{{ detaildata.create_time }}</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
activityInfo |
|||
} from '@/api/index' |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import { activityInfo } from '@/api/index' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
const detaildata = ref({}) |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
const detaildata = ref({}) |
|||
|
|||
onLoad(async (param) => { |
|||
await activityInfo(param.id).then((res) => { |
|||
if (res.code === 1) { |
|||
detaildata.value = res.data |
|||
} |
|||
}) |
|||
}) |
|||
onLoad(async (param) => { |
|||
await activityInfo(param.id).then((res) => { |
|||
if (res.code === 1) { |
|||
detaildata.value = res.data |
|||
} |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 352rpx); |
|||
width: 100%; |
|||
padding: 40rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 352rpx); |
|||
width: 100%; |
|||
padding: 40rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
|
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 30rpx; |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 30rpx; |
|||
|
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007fff 0%, #99ccff 100%); |
|||
} |
|||
|
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072ff; |
|||
} |
|||
} |
|||
|
|||
.headtxt { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.headtxt { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.address { |
|||
margin-top: 28rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.address { |
|||
margin-top: 28rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
|
|||
.adressnum { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.adressnum { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.ydl { |
|||
display: flex; |
|||
align-items: center; |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.value { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007FFF |
|||
} |
|||
} |
|||
} |
|||
.certetime { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 80rpx; |
|||
letter-spacing: normal; |
|||
color: #A1A1A1; |
|||
} |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.ydl { |
|||
display: flex; |
|||
align-items: center; |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.value { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007fff; |
|||
} |
|||
} |
|||
} |
|||
.certetime { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 80rpx; |
|||
letter-spacing: normal; |
|||
color: #a1a1a1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,182 +1,190 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<u-search @search="search" @clickIcon="clickIcon" @clear="clear" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#A9D4FF" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx" bgColor="#FFFFFF"></u-search> |
|||
|
|||
<scroll-view scroll-y="auto" class="main" @scrolltolower="onloadmore"> |
|||
<view class="ztone" v-for="(item,index) in ztList" :key="index" @click="godetail(item.id)"> |
|||
<image style="width: 150rpx;height: 150rpx;border-radius: 8rpx;flex: 1;" :src="baseurl+item.index_pic" mode=""> |
|||
</image> |
|||
<view class="rightpart"> |
|||
<view class="splace"> |
|||
{{item.title}} |
|||
</view> |
|||
<view class="titlepart"> |
|||
<text class="title">{{item.activity_time}}</text> |
|||
<image style="width: 32rpx;height: 44rpx;" src="@/static/img/Icon.png" mode="aspectFill"> |
|||
</image> |
|||
</view> |
|||
<view class="ms"> |
|||
{{item.address}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="container"> |
|||
<u-search |
|||
@search="search" |
|||
@clickIcon="clickIcon" |
|||
@clear="clear" |
|||
shape="square" |
|||
placeholder="请输入搜索内容" |
|||
placeholder-color="#A9D4FF" |
|||
v-model="keyword" |
|||
search-icon="/static/img/search.png" |
|||
search-icon-size="14" |
|||
:show-action="false" |
|||
height="40" |
|||
margin="40rpx 24rpx 24rpx 24rpx" |
|||
bg-color="#FFFFFF" |
|||
></u-search> |
|||
|
|||
<scroll-view scroll-y="auto" class="main" @scrolltolower="onloadmore"> |
|||
<view class="ztone" v-for="(item, index) in ztList" :key="index" @click="godetail(item.id)"> |
|||
<image style="width: 150rpx; height: 150rpx; border-radius: 8rpx; flex: 1" :src="baseurl + item.index_pic" mode=""></image> |
|||
<view class="rightpart"> |
|||
<view class="splace"> |
|||
{{ item.title }} |
|||
</view> |
|||
<view class="titlepart"> |
|||
<text class="title">{{ item.activity_time }}</text> |
|||
<image style="width: 32rpx; height: 44rpx" src="@/static/img/Icon.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="ms"> |
|||
{{ item.address }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { activityList } from '@/api/index' |
|||
import { onShow } from '@dcloudio/uni-app'; |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
const page = ref(1) |
|||
const pagesize = ref(7) |
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 7 |
|||
await getActivityList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 7 |
|||
await getActivityList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 7 |
|||
await getActivityList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const ztList = ref([]) |
|||
|
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
'title': keyword.value, |
|||
'page': page.value, |
|||
'limit': pagesize.value |
|||
} |
|||
await activityList(params).then((res) => { |
|||
ztList.value = [...ztList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/active/activeDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const getActivityList = async (name, page, limit) => { |
|||
let params = { |
|||
'title': name, |
|||
'page': page, |
|||
'limit': limit |
|||
} |
|||
await activityList(params).then((res) => { |
|||
ztList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
onShow(async() => { |
|||
await getActivityList('',1,7) |
|||
}) |
|||
import { ref } from 'vue' |
|||
import { activityList } from '@/api/index' |
|||
import { onShow } from '@dcloudio/uni-app' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref('') |
|||
const page = ref(1) |
|||
const pagesize = ref(7) |
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 7 |
|||
await getActivityList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 7 |
|||
await getActivityList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 7 |
|||
await getActivityList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const ztList = ref([]) |
|||
|
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
title: keyword.value, |
|||
page: page.value, |
|||
limit: pagesize.value |
|||
} |
|||
await activityList(params).then((res) => { |
|||
ztList.value = [...ztList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/active/activeDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const getActivityList = async (name, page, limit) => { |
|||
let params = { |
|||
title: name, |
|||
page: page, |
|||
limit: limit |
|||
} |
|||
await activityList(params).then((res) => { |
|||
ztList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
onShow(async () => { |
|||
keyword.value = '' |
|||
await getActivityList('', 1, 7) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgba(129, 179, 222, 0.5) 88%); |
|||
height: 100vh; |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
|
|||
.main { |
|||
margin-top: 10rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.ztone { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
margin-top: 20rpx; |
|||
padding: 10rpx; |
|||
border-radius: 8rpx; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid rgba(0, 127, 255, 0.12); |
|||
|
|||
.rightpart { |
|||
width: 100%; |
|||
margin-left: 20rpx; |
|||
flex: 3; |
|||
display: grid; |
|||
|
|||
.titlepart { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
letter-spacing: normal; |
|||
color: #666666; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.splace { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.ms { |
|||
margin-top: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
letter-spacing: normal; |
|||
color: #666666; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
.container { |
|||
background: linear-gradient(0deg, #f1f3f9 72%, rgba(129, 179, 222, 0.5) 88%); |
|||
height: 100vh; |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
|
|||
.main { |
|||
margin-top: 10rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.ztone { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
margin-top: 20rpx; |
|||
padding: 10rpx; |
|||
border-radius: 8rpx; |
|||
background: #ffffff; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid rgba(0, 127, 255, 0.12); |
|||
|
|||
.rightpart { |
|||
width: 100%; |
|||
margin-left: 20rpx; |
|||
flex: 3; |
|||
display: grid; |
|||
|
|||
.titlepart { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
letter-spacing: normal; |
|||
color: #666666; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.splace { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.ms { |
|||
margin-top: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 300; |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
letter-spacing: normal; |
|||
color: #666666; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
</style> |
|||
@ -1,199 +1,203 @@ |
|||
<template> |
|||
<u-navbar title="金融帮" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<u-search @search="search" @clickIcon="clickIcon" @clear="clear" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#A9D4FF" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx" bgColor="#FFFFFF"></u-search> |
|||
<view class="main"> |
|||
<scroll-view scroll-y="auto" class="hyonne" @scrolltolower="onloadmore"> |
|||
<view class="ztone" v-for="(item,index) in ztList" :key="index" @click="godetail(item.id)"> |
|||
<image style="width: 150rpx;height: 150rpx;border-radius: 28rpx;flex: 1;" :src="baseurl+item.index_pic" mode=""> |
|||
</image> |
|||
<view class="rightpart"> |
|||
<view class="splace"> |
|||
{{item.bank}} |
|||
</view> |
|||
<view class="titlepart"> |
|||
<text class="title">{{item.name}}</text> |
|||
<image style="width: 32rpx;height: 44rpx;" src="@/static/img/Icon.png" mode="aspectFill"> |
|||
</image> |
|||
</view> |
|||
<view class="ms"> |
|||
{{item.branch}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
<liuDragButton :widthPx="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</liuDragButton> |
|||
<u-navbar title="金融帮" placeholder="true" bg-color="#F1F3F9" :auto-back="true"></u-navbar> |
|||
<view class="container"> |
|||
<u-search |
|||
@search="search" |
|||
@clickIcon="clickIcon" |
|||
@clear="clear" |
|||
shape="square" |
|||
placeholder="请输入搜索内容" |
|||
placeholder-color="#A9D4FF" |
|||
v-model="keyword" |
|||
search-icon="/static/img/search.png" |
|||
search-icon-size="14" |
|||
:show-action="false" |
|||
height="40" |
|||
margin="40rpx 24rpx 24rpx 24rpx" |
|||
bg-color="#FFFFFF" |
|||
></u-search> |
|||
<view class="main"> |
|||
<scroll-view scroll-y="auto" class="hyonne" @scrolltolower="onloadmore"> |
|||
<view class="ztone" v-for="(item, index) in ztList" :key="index" @click="godetail(item.id)"> |
|||
<image style="width: 150rpx; height: 150rpx; border-radius: 28rpx; flex: 1" :src="baseurl + item.index_pic" mode=""></image> |
|||
<view class="rightpart"> |
|||
<view class="splace"> |
|||
{{ item.bank }} |
|||
</view> |
|||
<view class="titlepart"> |
|||
<text class="title">{{ item.name }}</text> |
|||
<image style="width: 32rpx; height: 44rpx" src="@/static/img/Icon.png" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="ms"> |
|||
{{ item.branch }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
<liuDragButton :width-px="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</liuDragButton> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
financeList |
|||
} from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
const page = ref(1) |
|||
const pagesize = ref(6) |
|||
|
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getfinanceList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getfinanceList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getfinanceList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const ztList = ref([]) |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/jrbDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
const getfinanceList = async (name, page, limit) => { |
|||
let params = { |
|||
'keyword': name, |
|||
'page': page, |
|||
'limit': limit |
|||
} |
|||
await financeList(params).then((res) => { |
|||
ztList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
'keyword': keyword.value, |
|||
'page': page.value, |
|||
'limit': pagesize.value |
|||
} |
|||
await financeList(params).then((res) => { |
|||
ztList.value = [...ztList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
onShow(async() => { |
|||
await getfinanceList('',1,6) |
|||
}) |
|||
import { ref } from 'vue' |
|||
import { financeList } from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref('') |
|||
const page = ref(1) |
|||
const pagesize = ref(6) |
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getfinanceList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getfinanceList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getfinanceList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const ztList = ref([]) |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/jrbDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
const getfinanceList = async (name, page, limit) => { |
|||
let params = { |
|||
keyword: name, |
|||
page: page, |
|||
limit: limit |
|||
} |
|||
await financeList(params).then((res) => { |
|||
ztList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
keyword: keyword.value, |
|||
page: page.value, |
|||
limit: pagesize.value |
|||
} |
|||
await financeList(params).then((res) => { |
|||
ztList.value = [...ztList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
onShow(async () => { |
|||
await getfinanceList('', 1, 6) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgba(129, 179, 222, 0.5) 88%); |
|||
height: calc(100vh - 178rpx); |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
.hyonne { |
|||
max-height: calc(100vh - 350rpx); |
|||
overflow-y: auto; |
|||
} |
|||
.main { |
|||
margin-top: 10rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: hidden; |
|||
|
|||
.ztone { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 210rpx; |
|||
margin-top: 30rpx; |
|||
padding: 30rpx; |
|||
border-radius: 20rpx; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid rgba(0, 127, 255, 0.12); |
|||
|
|||
.rightpart { |
|||
width: 100%; |
|||
margin-left: 40rpx; |
|||
flex: 3; |
|||
display: grid; |
|||
|
|||
.titlepart { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
font-family: Poppins; |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
line-height: 34rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Dark/Base 1 */ |
|||
color: #161719; |
|||
margin-top: 13rpx; |
|||
} |
|||
} |
|||
|
|||
.splace { |
|||
font-family: Poppins; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
line-height: 34rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Dark/Base 1 */ |
|||
color: #161719; |
|||
} |
|||
|
|||
.ms { |
|||
margin-top: 13rpx; |
|||
font-family: Poppins; |
|||
font-size: 20rpx; |
|||
font-weight: normal; |
|||
line-height: 28rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Light/Base 3 */ |
|||
color: #91919F; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
.container { |
|||
background: linear-gradient(0deg, #f1f3f9 72%, rgba(129, 179, 222, 0.5) 88%); |
|||
height: calc(100vh - 178rpx); |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
.hyonne { |
|||
max-height: calc(100vh - 350rpx); |
|||
overflow-y: auto; |
|||
} |
|||
.main { |
|||
margin-top: 10rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: hidden; |
|||
|
|||
.ztone { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 210rpx; |
|||
margin-top: 30rpx; |
|||
padding: 30rpx; |
|||
border-radius: 20rpx; |
|||
background: #ffffff; |
|||
box-sizing: border-box; |
|||
border: 2rpx solid rgba(0, 127, 255, 0.12); |
|||
|
|||
.rightpart { |
|||
width: 100%; |
|||
margin-left: 40rpx; |
|||
flex: 3; |
|||
display: grid; |
|||
|
|||
.titlepart { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.title { |
|||
font-family: Poppins; |
|||
font-size: 24rpx; |
|||
font-weight: 600; |
|||
line-height: 34rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Dark/Base 1 */ |
|||
color: #161719; |
|||
margin-top: 13rpx; |
|||
} |
|||
} |
|||
|
|||
.splace { |
|||
font-family: Poppins; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
line-height: 34rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Dark/Base 1 */ |
|||
color: #161719; |
|||
} |
|||
|
|||
.ms { |
|||
margin-top: 13rpx; |
|||
font-family: Poppins; |
|||
font-size: 20rpx; |
|||
font-weight: normal; |
|||
line-height: 28rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/Colors/Light/Base 3 */ |
|||
color: #91919f; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 212rpx; |
|||
height: 86rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
</style> |
|||
@ -1,354 +1,359 @@ |
|||
<template> |
|||
<u-navbar :title="'帖子详情'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<scroll-view class="cardbox"> |
|||
<view class="dhone"> |
|||
<view class="head"> |
|||
<image style="height: 96rpx;width: 96rpx;border-radius: 50%;" |
|||
:src="baseurl + '/' + listdata.member_head_pic" mode=""> |
|||
</image> |
|||
<view class="namepart"> |
|||
<text class="name">{{listdata.member_nickname}}</text> |
|||
<text class="date">{{listdata.create_time}}</text> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{listdata.content}}</text> |
|||
<view class="bottom"> |
|||
<view class="left"> |
|||
<image style="width: 36rpx;height: 34rpx;" |
|||
:src="listdata.is_like?'/static/img/ydz.png':'/static/img/dz.png'" |
|||
@click="dzClick(listdata.is_like,listdata.posts_id)" mode=""> |
|||
</image> |
|||
<text class="value">{{listdata.like_count}}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image style="width: 36rpx;height: 36rpx;" src="@/static/img/pl.png" mode=""></image> |
|||
<text class="value">{{listdata.comment_count}}</text> |
|||
</view> |
|||
</view> |
|||
<scroll-view style="max-height: 60vh;" scroll-y="true" @scrolltolower="scrolltolower"> |
|||
<view class="ypl" v-for="(item,index) in pllist" :key="index"> |
|||
<view class="head"> |
|||
<view class="left"> |
|||
<image style="height: 40rpx;width: 40rpx;border-radius: 50%;" |
|||
:src="baseurl + '/' + item.member_head_pic" mode=""></image> |
|||
<text class="name">{{item.member_nickname}}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<text class="value">{{item.like_count}}</text> |
|||
<image style="width: 24rpx;height: 24rpx;margin-left: 8rpx;" |
|||
:src="item.is_like?'/static/img/ydz.png':'/static/img/dz.png'" |
|||
@click="pldzClick(item.is_like,item.comments_id)" mode=""> |
|||
</image> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{item.content}}</text> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="plpart"> |
|||
<u-textarea class="textarea" v-model="plvalue" height="20" placeholder="请输入内容" autoHeight></u-textarea> |
|||
<view class="butt" @click="pullmess">发布</view> |
|||
</view> |
|||
</view> |
|||
<u-navbar :title="'帖子详情'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" /> |
|||
<view class="container"> |
|||
<scroll-view class="cardbox" style="max-height: 80vh" scroll-y="true"> |
|||
<view class="dhone"> |
|||
<view class="head"> |
|||
<image style="height: 96rpx; width: 96rpx; border-radius: 50%" :src="baseurl + '/' + listdata.member_head_pic" mode=""></image> |
|||
<view class="namepart"> |
|||
<text class="name">{{ listdata.member_nickname }}</text> |
|||
<text class="date">{{ listdata.create_time }}</text> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{ listdata.content }}</text> |
|||
<view class="bottom"> |
|||
<view class="left"> |
|||
<image |
|||
style="width: 36rpx; height: 34rpx" |
|||
:src="listdata.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'" |
|||
@click="dzClick(listdata.is_like, listdata.posts_id)" |
|||
mode="" |
|||
></image> |
|||
<text class="value">{{ listdata.like_count }}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image style="width: 36rpx; height: 36rpx" src="@/static/img/pl.png" mode=""></image> |
|||
<text class="value">{{ listdata.comment_count }}</text> |
|||
</view> |
|||
</view> |
|||
<scroll-view @scrolltolower="scrolltolower"> |
|||
<view class="ypl" v-for="(item, index) in pllist" :key="index"> |
|||
<view class="head"> |
|||
<view class="left"> |
|||
<image |
|||
style="height: 40rpx; width: 40rpx; border-radius: 50%" |
|||
:src="baseurl + '/' + item.member_head_pic" |
|||
mode="" |
|||
></image> |
|||
<text class="name">{{ item.member_nickname }}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<text class="value">{{ item.like_count }}</text> |
|||
<image |
|||
style="width: 24rpx; height: 24rpx; margin-left: 8rpx" |
|||
:src="item.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'" |
|||
@click="pldzClick(item.is_like, item.comments_id)" |
|||
mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{ item.content }}</text> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="plpart"> |
|||
<u-textarea class="textarea" v-model="plvalue" height="20" placeholder="请输入内容" auto-height></u-textarea> |
|||
<view class="butt" @click="pullmess">发布</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
postsInfo, |
|||
commentsList, |
|||
likesPosts, |
|||
commentsPosts |
|||
} from '@/api/shop' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
const listdata = ref({}) |
|||
|
|||
const plvalue = ref('') |
|||
|
|||
const dzClick = (like, id) => { |
|||
if (userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
listdata.value.is_like = !like |
|||
if (!like) { |
|||
listdata.value.like_count++ |
|||
} else { |
|||
listdata.value.like_count-- |
|||
} |
|||
likesPosts({ |
|||
target_id: id, |
|||
type: 'posts' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const pldzClick = (like, id) => { |
|||
if (userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
pllist.value.forEach((ele) => { |
|||
if (ele.comments_id === id) { |
|||
ele.is_like = !ele.is_like |
|||
if (ele.is_like) { |
|||
ele.like_count++ |
|||
} else { |
|||
ele.like_count-- |
|||
} |
|||
likesPosts({ |
|||
target_id: id, |
|||
type: 'comments' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
const postsid = ref(0) |
|||
const page = ref(1) |
|||
const limit = ref(6) |
|||
const pllist = ref([]) |
|||
const getplList = async (id) => { |
|||
await commentsList({ |
|||
page: page.value, |
|||
limit: limit.value, |
|||
posts_id: postsid.value |
|||
}).then((res) => { |
|||
if (res.code === 1) { |
|||
pllist.value = [...pllist.value,...res.data.data] |
|||
} |
|||
}) |
|||
} |
|||
const scrolltolower = async () => { |
|||
page.value++ |
|||
await getplList() |
|||
} |
|||
|
|||
const pullmess = async () => { |
|||
await commentsPosts({ |
|||
posts_id: postsid.value, |
|||
content: plvalue.value |
|||
}).then((res) => { |
|||
if (res.code === 1) { |
|||
uni.showToast({ |
|||
title: '评论成功', |
|||
duration: 1000, |
|||
success: async () => { |
|||
plvalue.value = '' |
|||
page.value = 1 |
|||
await postsInfo(postsid.value).then((res) => { |
|||
listdata.value = res.data |
|||
}) |
|||
await getplList() |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
onLoad(async (param) => { |
|||
postsid.value = param.id |
|||
page.value = 1 |
|||
await postsInfo(param.id).then((res) => { |
|||
listdata.value = res.data |
|||
}) |
|||
await getplList() |
|||
}) |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import { postsInfo, commentsList, likesPosts, commentsPosts } from '@/api/shop' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
const listdata = ref({}) |
|||
|
|||
const plvalue = ref('') |
|||
|
|||
const dzClick = (like, id) => { |
|||
if (userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
listdata.value.is_like = !like |
|||
if (!like) { |
|||
listdata.value.like_count++ |
|||
} else { |
|||
listdata.value.like_count-- |
|||
} |
|||
likesPosts({ |
|||
target_id: id, |
|||
type: 'posts' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const pldzClick = (like, id) => { |
|||
if (userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
pllist.value.forEach((ele) => { |
|||
if (ele.comments_id === id) { |
|||
ele.is_like = !ele.is_like |
|||
if (ele.is_like) { |
|||
ele.like_count++ |
|||
} else { |
|||
ele.like_count-- |
|||
} |
|||
likesPosts({ |
|||
target_id: id, |
|||
type: 'comments' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
const postsid = ref(0) |
|||
const page = ref(1) |
|||
const limit = ref(6) |
|||
const pllist = ref([]) |
|||
const getplList = async (id) => { |
|||
await commentsList({ |
|||
page: page.value, |
|||
limit: limit.value, |
|||
posts_id: postsid.value |
|||
}).then((res) => { |
|||
if (res.code === 1) { |
|||
pllist.value = [...pllist.value, ...res.data.data] |
|||
} |
|||
}) |
|||
} |
|||
const scrolltolower = async () => { |
|||
page.value++ |
|||
await getplList() |
|||
} |
|||
|
|||
const pullmess = async () => { |
|||
await commentsPosts({ |
|||
posts_id: postsid.value, |
|||
content: plvalue.value |
|||
}).then((res) => { |
|||
if (res.code === 1) { |
|||
uni.showToast({ |
|||
title: '评论成功', |
|||
duration: 1000, |
|||
success: async () => { |
|||
plvalue.value = '' |
|||
page.value = 1 |
|||
await postsInfo(postsid.value).then((res) => { |
|||
listdata.value = res.data |
|||
}) |
|||
page.value = 1 |
|||
limit.value = 6 |
|||
await commentsList({ |
|||
page: page.value, |
|||
limit: limit.value, |
|||
posts_id: postsid.value |
|||
}).then((res) => { |
|||
if (res.code === 1) { |
|||
pllist.value = res.data.data |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
onLoad(async (param) => { |
|||
postsid.value = param.id |
|||
page.value = 1 |
|||
await postsInfo(param.id).then((res) => { |
|||
listdata.value = res.data |
|||
}) |
|||
await getplList() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
overflow-y: hidden; |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
|
|||
.cardbox { |
|||
|
|||
.dhone { |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
padding: 40rpx; |
|||
display: grid; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background: #FFFFFF; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.namepart { |
|||
margin-left: 20rpx; |
|||
display: grid; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.date { |
|||
margin-top: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 30rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
margin-top: 24rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.bottom { |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ypl { |
|||
width: 100%; |
|||
border-radius: 8rpx; |
|||
background: #F8F9FA; |
|||
padding: 24rpx; |
|||
margin-top: 22rpx; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.name { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
|
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 20rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: normal; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.plpart { |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 20px 15px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.textarea {} |
|||
|
|||
.butt { |
|||
margin-left: 10px; |
|||
padding: 9px 8px; |
|||
box-sizing: border-box; |
|||
background-color: #5AC725; |
|||
border-radius: 5px; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
.container { |
|||
overflow-y: hidden; |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
|
|||
.cardbox { |
|||
.dhone { |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
padding: 40rpx; |
|||
display: grid; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background: #ffffff; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.namepart { |
|||
margin-left: 20rpx; |
|||
display: grid; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.date { |
|||
margin-top: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 30rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
margin-top: 24rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.bottom { |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ypl { |
|||
width: 100%; |
|||
border-radius: 8rpx; |
|||
background: #f8f9fa; |
|||
padding: 24rpx; |
|||
margin-top: 22rpx; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.name { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 20rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: normal; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.plpart { |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 20px 15px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.textarea { |
|||
} |
|||
|
|||
.butt { |
|||
margin-left: 10px; |
|||
padding: 9px 8px; |
|||
box-sizing: border-box; |
|||
background-color: #5ac725; |
|||
border-radius: 5px; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,343 +1,344 @@ |
|||
<template> |
|||
<u-navbar :title="'互动专区'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<u-tabs :list="list1" @click="click"></u-tabs> |
|||
<scroll-view class="cardbox" scroll-y="true" @scrolltolower="scrolltolower"> |
|||
<view class="dhone" v-for="(item,index) in datalist" :key="index"> |
|||
<view class="head"> |
|||
<image style="height: 96rpx;width: 96rpx;border-radius: 50%;" :src="url + '/' + item.member_head_pic" mode=""> |
|||
</image> |
|||
<view class="namepart"> |
|||
<text class="name">{{item.member_nickname}}</text> |
|||
<text class="date">{{item.create_time}}</text> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{item.content}}</text> |
|||
<view class="ypl" v-if="item.comments"> |
|||
<view class="head"> |
|||
<view class="left"> |
|||
<image style="height: 40rpx;width: 40rpx;border-radius: 50%;" :src="url + '/' + item.comments?.member_head_pic" |
|||
mode=""></image> |
|||
<text class="name">{{item.comments?.member_nickname}}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<text class="value">{{item.comments?.like_count}}</text> |
|||
<image style="width: 24rpx;height: 24rpx;margin-left: 8rpx;" :src="item.comments.is_like?'/static/img/ydz.png':'/static/img/dz.png'" |
|||
mode="" @click="pldzClick(item.posts_id,item.comments.is_like,item.comments.comments_id)"></image> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{item.comments?.content}}</text> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class="left"> |
|||
<image style="width: 36rpx;height: 34rpx;" |
|||
:src="item.is_like?'/static/img/ydz.png':'/static/img/dz.png'" @click="dzClick(item.is_like,item.posts_id)" mode=""> |
|||
</image> |
|||
<text class="value">{{item.like_count}}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image style="width: 36rpx;height: 36rpx;" src="@/static/img/pl.png" mode="" |
|||
@click="godetail(item.posts_id)"></image> |
|||
<text class="value">{{item.comment_count}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<liuDragButton :widthPx="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/fbhd.png" mode="" @click="goxzhdzq"></image> |
|||
</liuDragButton> |
|||
<u-navbar :title="'互动专区'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" /> |
|||
<view class="container"> |
|||
<u-tabs :list="list1" @click="click"></u-tabs> |
|||
<scroll-view class="cardbox" scroll-y="true" @scrolltolower="scrolltolower"> |
|||
<view class="dhone" v-for="(item, index) in datalist" :key="index"> |
|||
<view class="head"> |
|||
<image style="height: 96rpx; width: 96rpx; border-radius: 50%" :src="url + '/' + item.member_head_pic" mode=""></image> |
|||
<view class="namepart"> |
|||
<text class="name">{{ item.member_nickname }}</text> |
|||
<text class="date">{{ item.create_time }}</text> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{ item.content }}</text> |
|||
<view class="ypl" v-if="item.comments"> |
|||
<view class="head"> |
|||
<view class="left"> |
|||
<image |
|||
style="height: 40rpx; width: 40rpx; border-radius: 50%" |
|||
:src="url + '/' + item.comments?.member_head_pic" |
|||
mode="" |
|||
></image> |
|||
<text class="name">{{ item.comments?.member_nickname }}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<text class="value">{{ item.comments?.like_count }}</text> |
|||
<image |
|||
style="width: 24rpx; height: 24rpx; margin-left: 8rpx" |
|||
:src="item.comments.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'" |
|||
mode="" |
|||
@click="pldzClick(item.posts_id, item.comments.is_like, item.comments.comments_id)" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<text class="pl">{{ item.comments?.content }}</text> |
|||
</view> |
|||
<view class="bottom"> |
|||
<view class="left"> |
|||
<image |
|||
style="width: 36rpx; height: 34rpx" |
|||
:src="item.is_like ? '/static/img/ydz.png' : '/static/img/dz.png'" |
|||
@click="dzClick(item.is_like, item.posts_id)" |
|||
mode="" |
|||
></image> |
|||
<text class="value">{{ item.like_count }}</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image style="width: 36rpx; height: 36rpx" src="@/static/img/pl.png" mode="" @click="godetail(item.posts_id)"></image> |
|||
<text class="value">{{ item.comment_count }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<liuDragButton :width-px="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/fbhd.png" mode="" @click="goxzhdzq"></image> |
|||
</liuDragButton> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { postsList, likesPosts } from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const url = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
|
|||
|
|||
// 创建响应式数据 |
|||
const list1 = reactive([{ |
|||
name: '小店帮', |
|||
id: 1 |
|||
}, |
|||
{ |
|||
name: '金融帮', |
|||
id: 2 |
|||
}, |
|||
{ |
|||
name: '媒体帮', |
|||
id: 3 |
|||
}, |
|||
{ |
|||
name: '企业帮', |
|||
id: 4 |
|||
} |
|||
]); |
|||
|
|||
|
|||
const typeid = ref(1) |
|||
// 定义方法 |
|||
const click = async(item) => { |
|||
page.value = 1 |
|||
typeid.value = item.id |
|||
datalist.value = [] |
|||
await getpostsList() |
|||
} |
|||
|
|||
|
|||
const dzClick = (like,id) => { |
|||
if(userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
datalist.value.forEach((ele)=> { |
|||
if(ele.posts_id === id) { |
|||
ele.is_like = !ele.is_like |
|||
if(ele.is_like) { |
|||
ele.like_count++ |
|||
} else { |
|||
ele.like_count-- |
|||
} |
|||
likesPosts({target_id: id, type: 'posts'}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const scrolltolower = async() => { |
|||
page.value++ |
|||
await getpostsList() |
|||
} |
|||
|
|||
const goxzhdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/makeAssistance' |
|||
}) |
|||
} |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveDetail?id='+id |
|||
}) |
|||
} |
|||
|
|||
const page = ref(1) |
|||
const limit = ref(4) |
|||
const datalist = ref([]) |
|||
const getpostsList = async() => { |
|||
await postsList({page: page.value, limit: limit.value, type_id: typeid.value}).then((res)=> { |
|||
if(res.code === 1) { |
|||
datalist.value = [...datalist.value, ...res.data.data] |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const pldzClick = (postid, like, id) => { |
|||
if (userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
datalist.value.forEach((ele) => { |
|||
if (ele.posts_id === postid) { |
|||
ele.comments.is_like = !like |
|||
if (ele.comments.is_like) { |
|||
ele.comments.like_count++ |
|||
} else { |
|||
ele.comments.like_count-- |
|||
} |
|||
likesPosts({ |
|||
target_id: id, |
|||
type: 'comments' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
onLoad(async(e)=> { |
|||
page.value = 1 |
|||
datalist.value = [] |
|||
await getpostsList() |
|||
console.log(userStore.cometype); |
|||
}) |
|||
import { postsList, likesPosts } from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const url = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
|
|||
// 创建响应式数据 |
|||
const list1 = reactive([ |
|||
{ |
|||
name: '小店帮', |
|||
id: 1 |
|||
}, |
|||
{ |
|||
name: '金融帮', |
|||
id: 2 |
|||
}, |
|||
{ |
|||
name: '媒体帮', |
|||
id: 3 |
|||
}, |
|||
{ |
|||
name: '企业帮', |
|||
id: 4 |
|||
} |
|||
]) |
|||
|
|||
const typeid = ref(1) |
|||
// 定义方法 |
|||
const click = async (item) => { |
|||
page.value = 1 |
|||
typeid.value = item.id |
|||
datalist.value = [] |
|||
await getpostsList() |
|||
} |
|||
|
|||
const dzClick = (like, id) => { |
|||
if (userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
datalist.value.forEach((ele) => { |
|||
if (ele.posts_id === id) { |
|||
ele.is_like = !ele.is_like |
|||
if (ele.is_like) { |
|||
ele.like_count++ |
|||
} else { |
|||
ele.like_count-- |
|||
} |
|||
likesPosts({ target_id: id, type: 'posts' }) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const scrolltolower = async () => { |
|||
page.value++ |
|||
await getpostsList() |
|||
} |
|||
|
|||
const goxzhdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/makeAssistance' |
|||
}) |
|||
} |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const page = ref(1) |
|||
const limit = ref(4) |
|||
const datalist = ref([]) |
|||
const getpostsList = async () => { |
|||
await postsList({ page: page.value, limit: limit.value, type_id: typeid.value }).then((res) => { |
|||
if (res.code === 1) { |
|||
datalist.value = [...datalist.value, ...res.data.data] |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const pldzClick = (postid, like, id) => { |
|||
if (userStore.userInfo.moblie === undefined) { |
|||
uni.showToast({ |
|||
title: '请登录后操作!', |
|||
icon: 'none' |
|||
}) |
|||
} else { |
|||
datalist.value.forEach((ele) => { |
|||
if (ele.posts_id === postid) { |
|||
ele.comments.is_like = !like |
|||
if (ele.comments.is_like) { |
|||
ele.comments.like_count++ |
|||
} else { |
|||
ele.comments.like_count-- |
|||
} |
|||
likesPosts({ |
|||
target_id: id, |
|||
type: 'comments' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onLoad(async (e) => { |
|||
page.value = 1 |
|||
datalist.value = [] |
|||
await getpostsList() |
|||
console.log(userStore.cometype) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #F1F3F9; |
|||
height: calc(100vh - 96px); |
|||
overflow: hidden; |
|||
width: 100%; |
|||
|
|||
.cardbox { |
|||
max-height: calc(100vh - 150px); |
|||
|
|||
.dhone { |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
padding: 40rpx; |
|||
display: grid; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background: #FFFFFF; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.namepart { |
|||
margin-left: 20rpx; |
|||
display: grid; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.date { |
|||
margin-top: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 30rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
margin-top: 24rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.bottom { |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ypl { |
|||
width: 100%; |
|||
border-radius: 8rpx; |
|||
background: #F8F9FA; |
|||
padding: 24rpx; |
|||
margin-top: 22rpx; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.name { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
|
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 20rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: normal; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 108rpx; |
|||
height: 108rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 75%; |
|||
} |
|||
|
|||
.container { |
|||
background-color: #f1f3f9; |
|||
height: calc(100vh - 96px); |
|||
overflow: hidden; |
|||
width: 100%; |
|||
|
|||
.cardbox { |
|||
max-height: calc(100vh - 150px); |
|||
|
|||
.dhone { |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
padding: 40rpx; |
|||
display: grid; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background: #ffffff; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.namepart { |
|||
margin-left: 20rpx; |
|||
display: grid; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.date { |
|||
margin-top: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 30rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
margin-top: 24rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.bottom { |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ypl { |
|||
width: 100%; |
|||
border-radius: 8rpx; |
|||
background: #f8f9fa; |
|||
padding: 24rpx; |
|||
margin-top: 22rpx; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.name { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 26rpx; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 20rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pl { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: normal; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 108rpx; |
|||
height: 108rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 75%; |
|||
} |
|||
</style> |
|||
@ -1,106 +1,100 @@ |
|||
<template> |
|||
<u-navbar :title="'金融帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">产品说明</text> |
|||
</view> |
|||
<image style="width: 100%;height: 286rpx;margin-top: 40rpx;" :src="baseurl + listdata.index_pic" mode=""></image> |
|||
<u-parse :content="listdata.content"></u-parse> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">联系方式</text> |
|||
</view> |
|||
<view class="people"> |
|||
<text class="text">{{listdata.listdata}} {{listdata.tel}}</text> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">微信二维码</text> |
|||
</view> |
|||
<image style="width: 338rpx;height: 338rpx;margin-top: 28rpx;margin-left: 24%;" :src="baseurl+listdata.code_pic" mode=""></image> |
|||
</view> |
|||
<u-navbar :title="'金融帮'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" /> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">产品说明</text> |
|||
</view> |
|||
<image style="width: 100%; height: 286rpx; margin-top: 40rpx" :src="baseurl + listdata.index_pic" mode=""></image> |
|||
<u-parse :content="listdata.content"></u-parse> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">联系方式</text> |
|||
</view> |
|||
<view class="people"> |
|||
<text class="text">{{ listdata.listdata }} {{ listdata.tel }}</text> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">微信二维码</text> |
|||
</view> |
|||
<image style="width: 338rpx; height: 338rpx; margin-top: 28rpx; margin-left: 24%" :src="baseurl + listdata.code_pic" mode=""></image> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
financeInfo |
|||
} from '@/api/shop' |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import { financeInfo } from '@/api/shop' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
const listdata = ref({}) |
|||
const listdata = ref({}) |
|||
|
|||
onLoad(async(param) => { |
|||
await financeInfo(param.id).then((res) => { |
|||
listdata.value = res.data |
|||
}) |
|||
}) |
|||
onLoad(async (param) => { |
|||
await financeInfo(param.id).then((res) => { |
|||
listdata.value = res.data |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 40rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon{ |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
} |
|||
} |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 40rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007fff 0%, #99ccff 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072ff; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,162 +1,174 @@ |
|||
<template> |
|||
<view class="boxhdzq"> |
|||
<view class="xzzq"> |
|||
<view class="left"> |
|||
<image style="width: 28rpx;height: 28rpx;" src="@/static/img/xzzq.png" mode=""></image> |
|||
<text class="txt">选择专区</text> |
|||
</view> |
|||
<view class="right"> |
|||
<input style="text-align: end;" v-model="xzvalue" type="text" placeholder="请选择您要提问的专区" |
|||
placeholder-class="placlass" disabled @tap="showxz = true" /> |
|||
<u-action-sheet :actions="list" @select="selectClick" @close="showxz = false" :show="showxz" |
|||
closeOnClickOverlay="true"></u-action-sheet> |
|||
<image style="width: 16rpx;height: 28rpx;margin-left: 8rpx;" src="@/static/img/right.png" mode=""> |
|||
</image> |
|||
</view> |
|||
</view> |
|||
<u-textarea v-model="nrvalue" placeholder="请输入您的内容...." count autoHeight maxlength="200" height="266" |
|||
border="none"></u-textarea> |
|||
<view class="buts"> |
|||
<view class="button" @click="submit" |
|||
:style="nrvalue===''?'background: linear-gradient(90deg, rgba(0, 127, 255, 0.3) 0%, rgba(153, 204, 255, 0.3) 100%)':''"> |
|||
发布 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="boxhdzq"> |
|||
<view class="xzzq"> |
|||
<view class="left"> |
|||
<image style="width: 28rpx; height: 28rpx" src="@/static/img/xzzq.png" mode=""></image> |
|||
<text class="txt">选择专区</text> |
|||
</view> |
|||
<view class="right"> |
|||
<input |
|||
style="text-align: end" |
|||
v-model="xzvalue" |
|||
type="text" |
|||
placeholder="请选择您要提问的专区" |
|||
placeholder-class="placlass" |
|||
disabled |
|||
@tap="showxz = true" |
|||
/> |
|||
<u-action-sheet |
|||
:actions="list" |
|||
@select="selectClick" |
|||
@close="showxz = false" |
|||
:show="showxz" |
|||
close-on-click-overlay="true" |
|||
></u-action-sheet> |
|||
<image style="width: 16rpx; height: 28rpx; margin-left: 8rpx" src="@/static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<u-textarea v-model="nrvalue" placeholder="请输入您的内容...." count auto-height maxlength="200" height="266" border="none"></u-textarea> |
|||
<view class="buts"> |
|||
<view |
|||
class="button" |
|||
@click="submit" |
|||
:style="nrvalue === '' ? 'background: linear-gradient(90deg, rgba(0, 127, 255, 0.3) 0%, rgba(153, 204, 255, 0.3) 100%)' : ''" |
|||
> |
|||
发布 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { addPosts } from '@/api/shop' |
|||
import { ref } from 'vue' |
|||
import { addPosts } from '@/api/shop' |
|||
|
|||
const list = ref([{ |
|||
name: '小店帮', |
|||
id: 1 |
|||
}, |
|||
{ |
|||
name: '金融帮', |
|||
id: 2 |
|||
}, |
|||
{ |
|||
name: '媒体帮', |
|||
id: 3 |
|||
}, |
|||
{ |
|||
name: '企业帮', |
|||
id: 4 |
|||
} |
|||
]); |
|||
const list = ref([ |
|||
{ |
|||
name: '小店帮', |
|||
id: 1 |
|||
}, |
|||
{ |
|||
name: '金融帮', |
|||
id: 2 |
|||
}, |
|||
{ |
|||
name: '媒体帮', |
|||
id: 3 |
|||
}, |
|||
{ |
|||
name: '企业帮', |
|||
id: 4 |
|||
} |
|||
]) |
|||
|
|||
const showxz = ref(false) |
|||
const xzvalue = ref('') |
|||
const xzid = ref(1) |
|||
const nrvalue = ref('') |
|||
const showxz = ref(false) |
|||
const xzvalue = ref('') |
|||
const xzid = ref(1) |
|||
const nrvalue = ref('') |
|||
|
|||
const selectClick = (index) => { |
|||
xzvalue.value = index.name |
|||
xzid.value = index.id |
|||
showxz.value = false |
|||
}; |
|||
const selectClick = (index) => { |
|||
xzvalue.value = index.name |
|||
xzid.value = index.id |
|||
showxz.value = false |
|||
} |
|||
|
|||
const submit = () => { |
|||
if (nrvalue.value !== '') { |
|||
let params = { |
|||
type_id: xzid.value, |
|||
content: nrvalue.value |
|||
} |
|||
addPosts(params).then((res)=> { |
|||
if(res.code === 1) { |
|||
uni.showToast({ |
|||
title: '发布成功', |
|||
duration: 1500, |
|||
success() { |
|||
setTimeout(()=> { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
},1500) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
const submit = () => { |
|||
if (nrvalue.value !== '') { |
|||
let params = { |
|||
type_id: xzid.value, |
|||
content: nrvalue.value |
|||
} |
|||
addPosts(params).then((res) => { |
|||
if (res.code === 1) { |
|||
uni.showToast({ |
|||
title: '发布成功', |
|||
duration: 1500, |
|||
success() { |
|||
setTimeout(() => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
}, 1500) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.boxhdzq { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #F1F3F9; |
|||
.boxhdzq { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: #f1f3f9; |
|||
|
|||
.xzzq { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 28rpx 40rpx; |
|||
background: #FFFFFF; |
|||
border-bottom: 4rpx solid #F1F3F9; |
|||
.xzzq { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 28rpx 40rpx; |
|||
background: #ffffff; |
|||
border-bottom: 4rpx solid #f1f3f9; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.txt { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
} |
|||
} |
|||
.txt { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
line-height: normal; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
} |
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
.buts { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
.buts { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
|
|||
.button { |
|||
margin-top: 108rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
width: 576rpx; |
|||
height: 96rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
.button { |
|||
margin-top: 108rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007fff 0%, #99ccff 100%); |
|||
width: 576rpx; |
|||
height: 96rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.placlass { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #D3D3D3; |
|||
} |
|||
.placlass { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #d3d3d3; |
|||
} |
|||
</style> |
|||
@ -1,170 +1,174 @@ |
|||
<template> |
|||
<u-navbar :title="'媒体帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<image style="width: 100%;height: 300rpx;" src="@/static/img/ztback.png" mode=""></image> |
|||
<view class="main"> |
|||
<view class="head"> |
|||
<image class="toux" :src="baseurl + userData.head_pic" mode=""></image> |
|||
<text class="name">{{userData.name}}</text> |
|||
<text class="type">{{userData.member_tag_title || userData.tag_name}}</text> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">{{userData.introduce?'个人介绍':'助企案例'}}</text> |
|||
</view> |
|||
<text class="message" v-if="userData.introduce">{{userData.introduce}}</text> |
|||
<u-parse v-if="userData.content" :content="userData.content"></u-parse> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">联系方式</text> |
|||
</view> |
|||
<view class="people"> |
|||
<text class="text">{{userData.moblie||userData.tel}}</text> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">微信二维码</text> |
|||
</view> |
|||
<image style="width: 338rpx;height: 338rpx;margin-top: 28rpx;margin-left: 24%;" v-if="userData.wx_code" :src="baseurl + userData.wx_code" mode=""></image> |
|||
<image style="width: 338rpx;height: 338rpx;margin-top: 28rpx;margin-left: 24%;" v-if="userData.code_pic" :src="baseurl + userData.code_pic" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<u-navbar :title="'媒体帮'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" /> |
|||
<view class="container"> |
|||
<image style="width: 100%; height: 300rpx" src="@/static/img/ztback.png" mode=""></image> |
|||
<view class="main"> |
|||
<view class="head"> |
|||
<image class="toux" :src="baseurl + userData.head_pic" mode=""></image> |
|||
<text class="name">{{ userData.name }}</text> |
|||
<text class="type">{{ userData.member_tag_title || userData.tag_name }}</text> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">{{ userData.introduce ? '个人介绍' : '助企案例' }}</text> |
|||
</view> |
|||
<text class="message" v-if="userData.introduce">{{ userData.introduce }}</text> |
|||
<u-parse v-if="userData.content" :content="userData.content"></u-parse> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">联系方式</text> |
|||
</view> |
|||
<view class="people"> |
|||
<text class="text">{{ userData.moblie || userData.tel }}</text> |
|||
</view> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">微信二维码</text> |
|||
</view> |
|||
<image |
|||
style="width: 338rpx; height: 338rpx; margin-top: 28rpx; margin-left: 24%" |
|||
v-if="userData.wx_code" |
|||
:src="baseurl + userData.wx_code" |
|||
mode="" |
|||
></image> |
|||
<image |
|||
style="width: 338rpx; height: 338rpx; margin-top: 28rpx; margin-left: 24%" |
|||
v-if="userData.code_pic" |
|||
:src="baseurl + userData.code_pic" |
|||
mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { memberCenterInfo } from '@/api/memberCenter' |
|||
import { |
|||
mediumInfo |
|||
} from '@/api/shop' |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import { memberCenterInfo } from '@/api/memberCenter' |
|||
import { mediumInfo } from '@/api/shop' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
const userData = ref({}) |
|||
const userData = ref({}) |
|||
|
|||
onLoad(async(param) => { |
|||
if(param.type === 'mt') { |
|||
await mediumInfo(param.id).then((res)=> { |
|||
if(res.code === 1) { |
|||
userData.value = res.data |
|||
} |
|||
}) |
|||
} else { |
|||
await memberCenterInfo(param.id).then((res)=> { |
|||
console.log(res); |
|||
if(res.code === 1) { |
|||
userData.value = res.data |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
onLoad(async (param) => { |
|||
if (param.type === 'mt') { |
|||
await mediumInfo(param.id).then((res) => { |
|||
if (res.code === 1) { |
|||
userData.value = res.data |
|||
} |
|||
}) |
|||
} else { |
|||
await memberCenterInfo(param.id).then((res) => { |
|||
console.log(res) |
|||
if (res.code === 1) { |
|||
userData.value = res.data |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
.main { |
|||
width: 100%; |
|||
margin-top: -200rpx; |
|||
.head { |
|||
width: 100%; |
|||
display: grid; |
|||
justify-items: center; |
|||
.toux { |
|||
width: 316rpx; |
|||
height: 316rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 50%; |
|||
/* White */ |
|||
border: 8rpx solid #FFFFFF; |
|||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(101, 101, 101, 0.15); |
|||
} |
|||
.name { |
|||
margin-top: 32rpx; |
|||
font-family: Inter; |
|||
font-size: 60rpx; |
|||
font-weight: 520; |
|||
line-height: 84rpx; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
color: #000000; |
|||
} |
|||
.type { |
|||
margin-top: 4rpx; |
|||
font-family: Inter; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
.content { |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
} |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon{ |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
} |
|||
} |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
.main { |
|||
width: 100%; |
|||
margin-top: -200rpx; |
|||
.head { |
|||
width: 100%; |
|||
display: grid; |
|||
justify-items: center; |
|||
.toux { |
|||
width: 316rpx; |
|||
height: 316rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 50%; |
|||
/* White */ |
|||
border: 8rpx solid #ffffff; |
|||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(101, 101, 101, 0.15); |
|||
} |
|||
.name { |
|||
margin-top: 32rpx; |
|||
font-family: Inter; |
|||
font-size: 60rpx; |
|||
font-weight: 520; |
|||
line-height: 84rpx; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
color: #000000; |
|||
} |
|||
.type { |
|||
margin-top: 4rpx; |
|||
font-family: Inter; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
.content { |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
} |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007fff 0%, #99ccff 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072ff; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,257 +1,256 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<u-navbar title="媒体帮" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<u-search @search="search" @clickIcon="clickIcon" @clear="clear" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#a4c7ff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search> |
|||
<scroll-view scroll-y="auto" class="mtlist" @scrolltolower="onloadmore"> |
|||
<view class="mtone" v-for="(item,index) in mtList" :key="index" @click="gomtbdetail(item.id)"> |
|||
<view class="headpart"> |
|||
<u-avatar :src="baseurl+item.head_pic" size="44"></u-avatar> |
|||
<view class="right"> |
|||
<text class="name">{{item.name}}</text> |
|||
<view class="tab"> |
|||
{{item.tag_name}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image style="width: 100%;height: 400rpx;margin-top: 30rpx;" :src="baseurl+item.publicize_pic" mode=""> |
|||
</image> |
|||
<view class="bottompart"> |
|||
<view class="part"> |
|||
<image style="width: 22rpx;height: 24rpx;" src="@/static/img/dh.png" mode=""></image> |
|||
<text class="text">{{item.tel}}</text> |
|||
</view> |
|||
<view class="part"> |
|||
<image style="width: 22rpx;height: 24rpx;" src="@/static/img/yx.png" mode=""></image> |
|||
<text class="text">{{item.email}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="fbxxbutton"> |
|||
<view class="button" @click="gofbxx"> |
|||
发布信息 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<liuDragButton :widthPx="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</liuDragButton> |
|||
<view class="container"> |
|||
<u-navbar title="媒体帮" placeholder="true" bg-color="#F1F3F9" :auto-back="true"></u-navbar> |
|||
<u-search |
|||
@search="search" |
|||
@clickIcon="clickIcon" |
|||
@clear="clear" |
|||
shape="square" |
|||
placeholder="请输入搜索内容" |
|||
placeholder-color="#a4c7ff" |
|||
v-model="keyword" |
|||
search-icon="/static/img/search.png" |
|||
search-icon-size="14" |
|||
:show-action="false" |
|||
height="40" |
|||
margin="40rpx 24rpx 24rpx 24rpx" |
|||
></u-search> |
|||
<scroll-view scroll-y="auto" class="mtlist" @scrolltolower="onloadmore"> |
|||
<view class="mtone" v-for="(item, index) in mtList" :key="index" @click="gomtbdetail(item.id)"> |
|||
<view class="headpart"> |
|||
<u-avatar :src="baseurl + item.head_pic" size="44"></u-avatar> |
|||
<view class="right"> |
|||
<text class="name">{{ item.name }}</text> |
|||
<view class="tab" v-if="item.tag_name !== ''"> |
|||
{{ item.tag_name }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<image style="width: 100%; height: 400rpx; margin-top: 30rpx" :src="baseurl + item.publicize_pic" mode=""></image> |
|||
<view class="bottompart"> |
|||
<view class="part"> |
|||
<image style="width: 22rpx; height: 24rpx" src="@/static/img/dh.png" mode=""></image> |
|||
<text class="text">{{ item.tel }}</text> |
|||
</view> |
|||
<view class="part"> |
|||
<image style="width: 22rpx; height: 24rpx" src="@/static/img/yx.png" mode=""></image> |
|||
<view class="text">{{ item.email }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="fbxxbutton"> |
|||
<view class="button" @click="gofbxx">发布信息</view> |
|||
</view> |
|||
</view> |
|||
<liuDragButton :width-px="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</liuDragButton> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
mediumList |
|||
} from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
import { ref } from 'vue' |
|||
import { mediumList } from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref('') |
|||
const page = ref(1) |
|||
const pagesize = ref(2) |
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 2 |
|||
await getmediumList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
const page = ref(1) |
|||
const pagesize = ref(2) |
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 2 |
|||
await getmediumList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 2 |
|||
await getmediumList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 2 |
|||
await getmediumList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 2 |
|||
await getmediumList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
const mtList = ref([]) |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 2 |
|||
await getmediumList(keyword.value, page.value, pagesize.value) |
|||
} |
|||
const gomtbdetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mediaDetail?id=' + id + '&type=' + 'mt' |
|||
}) |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
const gofbxx = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mtbmakeMessage' |
|||
}) |
|||
} |
|||
|
|||
const mtList = ref([]) |
|||
const getmediumList = async (name, page, limit) => { |
|||
let params = { |
|||
name: name, |
|||
page: page, |
|||
limit: limit |
|||
} |
|||
await mediumList(params).then((res) => { |
|||
mtList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
const gomtbdetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mediaDetail?id='+id +'&type='+'mt' |
|||
}) |
|||
} |
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
name: keyword.value, |
|||
page: page.value, |
|||
limit: pagesize.value |
|||
} |
|||
await mediumList(params).then((res) => { |
|||
mtList.value = [...mtList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
const gofbxx = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mtbmakeMessage' |
|||
}) |
|||
} |
|||
|
|||
const getmediumList = async (name, page, limit) => { |
|||
let params = { |
|||
'name': name, |
|||
'page': page, |
|||
'limit': limit |
|||
} |
|||
await mediumList(params).then((res) => { |
|||
mtList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
'name': keyword.value, |
|||
'page': page.value, |
|||
'limit': pagesize.value |
|||
} |
|||
await mediumList(params).then((res) => { |
|||
mtList.value = [...mtList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
onShow(async() => { |
|||
await getmediumList('',1,2) |
|||
}) |
|||
onShow(async () => { |
|||
await getmediumList('', 1, 2) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgba(62, 146, 249, 0.2) 88%); |
|||
width: 100%; |
|||
overflow: hidden; |
|||
.mtlist { |
|||
margin-top: 8rpx; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
height: 100vh; |
|||
max-height: calc(100vh - 336rpx); |
|||
padding-bottom: 168rpx; |
|||
.container { |
|||
background: linear-gradient(0deg, #f1f3f9 72%, rgba(62, 146, 249, 0.2) 88%); |
|||
width: 100%; |
|||
overflow: hidden; |
|||
.mtlist { |
|||
margin-top: 8rpx; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
height: 100vh; |
|||
max-height: calc(100vh - 336rpx); |
|||
padding-bottom: 168rpx; |
|||
|
|||
.mtone { |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
height: 666rpx; |
|||
border-radius: 24rpx; |
|||
background: #FFFFFF; |
|||
display: grid; |
|||
padding: 40rpx 24rpx; |
|||
box-sizing: border-box; |
|||
.mtone { |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
height: 666rpx; |
|||
border-radius: 24rpx; |
|||
background: #ffffff; |
|||
display: grid; |
|||
padding: 40rpx 24rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.headpart { |
|||
display: flex; |
|||
align-items: center; |
|||
.headpart { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.right { |
|||
margin-left: 16rpx; |
|||
display: grid; |
|||
justify-items: baseline; |
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 350; |
|||
line-height: 43.2rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
text-transform: capitalize; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.tab { |
|||
margin-top: 8rpx; |
|||
padding: 6rpx 20rpx; |
|||
border-radius: 0rpx 4rpx 20rpx 0rpx; |
|||
background: linear-gradient(70deg, #312984 -45%, #867BF5 99%); |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #FFFFFF; |
|||
text-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
} |
|||
} |
|||
.right { |
|||
margin-left: 16rpx; |
|||
display: grid; |
|||
justify-items: baseline; |
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 350; |
|||
line-height: 43.2rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
text-transform: capitalize; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
.tab { |
|||
margin-top: 8rpx; |
|||
padding: 6rpx 20rpx; |
|||
border-radius: 0rpx 4rpx 20rpx 0rpx; |
|||
background: linear-gradient(70deg, #312984 -45%, #867bf5 99%); |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #ffffff; |
|||
text-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottompart { |
|||
margin-top: 26rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.bottompart { |
|||
margin-top: 26rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.part { |
|||
display: flex; |
|||
align-items: center; |
|||
.part { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.text { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
line-height: 33.6rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
text-transform: capitalize; |
|||
letter-spacing: normal; |
|||
color: #606266; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.text { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
line-height: 33.6rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #606266; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
.hdzq { |
|||
width: 212rpx; |
|||
height: 86rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
|
|||
.fbxxbutton { |
|||
width: 100%; |
|||
height: 168rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
background: #FFFFFF; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.fbxxbutton { |
|||
width: 100%; |
|||
height: 168rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
background: #ffffff; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.button { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.button { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007fff 0%, #99ccff 100%); |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,332 +1,361 @@ |
|||
<template> |
|||
<u-navbar :title="'媒体帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<view class="formlist"> |
|||
<u-form :model="form" ref="uFormRef" labelPosition="top" :rules="rules"> |
|||
<u-form-item label="头像" prop="head_pic"> |
|||
<u-upload class="uploadbox" @afterRead="txafterRead" :maxCount="1" :imageMode="'heightFix'" |
|||
:width="auto" :height="144"> |
|||
<view class="yyzz" v-if="form.head_pic === ''"> |
|||
<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传头像 |
|||
</view> |
|||
<image v-else style="width: 100%;height: 288rpx;margin-top: 12rpx;" |
|||
:src="baseurl+ '/' + form.head_pic" mode="scaleToFill"></image> |
|||
</u-upload> |
|||
</u-form-item> |
|||
<u-form-item label="姓名" prop="name"> |
|||
<u-input v-model="form.name" placeholder="请输入真实姓名" placeholderStyle="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
<u-form-item label="标签" prop="type"> |
|||
<u-input v-model="form.type" placeholder="请选择" placeholderStyle="color: #D3D3D3;" |
|||
suffixIcon="arrow-down" @focus="show=true" /> |
|||
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show=false" keyName="name"></u-picker> |
|||
</u-form-item> |
|||
<u-form-item label="联系方式" prop="tel"> |
|||
<u-input v-model="form.tel" placeholder="请输入联系方式" placeholderStyle="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
<u-form-item label="微信二维码" prop="code_pic"> |
|||
<u-upload class="uploadbox" @afterRead="codeafterRead" :maxCount="1" :imageMode="'heightFix'" |
|||
:width="auto" :height="144"> |
|||
<view class="yyzz" v-if="form.code_pic === ''"> |
|||
<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传微信二维码 |
|||
</view> |
|||
<image v-else style="width: 100%;height: 288rpx;margin-top: 12rpx;" |
|||
:src="baseurl+ '/' + form.code_pic" mode="scaleToFill"></image> |
|||
</u-upload> |
|||
</u-form-item> |
|||
<u-form-item label="邮箱" prop="email"> |
|||
<u-input v-model="form.email" placeholder="请输入邮箱地址" placeholderStyle="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
<u-form-item label="宣传封面" prop="publicize_pic"> |
|||
<u-upload class="uploadbox" @afterRead="afterRead" :maxCount="1" :imageMode="'heightFix'" |
|||
:width="auto" :height="144"> |
|||
<view class="yyzz" v-if="form.publicize_pic === ''"> |
|||
<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传宣传封面 |
|||
</view> |
|||
<image v-else style="width: 100%;height: 288rpx;margin-top: 12rpx;" |
|||
:src="baseurl+ '/' + form.publicize_pic" mode="scaleToFill"></image> |
|||
</u-upload> |
|||
</u-form-item> |
|||
<u-form-item label="助企案例" prop="content"> |
|||
<u-input v-model="form.content" placeholder="请输入真实案例" placeholderStyle="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
</u-form> |
|||
</view> |
|||
<view class="sumitbotton"> |
|||
<view class="button" @click="submit"> |
|||
确认提交 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<u-navbar :title="'媒体帮'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" /> |
|||
<view class="container"> |
|||
<view class="formlist"> |
|||
<u-form :model="form" ref="uFormRef" label-position="top" :rules="rules"> |
|||
<u-form-item label="头像" prop="head_pic"> |
|||
<u-upload class="uploadbox" @afterRead="txafterRead" :max-count="1" :image-mode="'heightFix'" :width="auto" :height="144"> |
|||
<view class="yyzz" v-if="form.head_pic === ''"> |
|||
<image style="width: 40rpx; height: 40rpx" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传头像 |
|||
</view> |
|||
<image |
|||
v-else |
|||
style="width: 100%; height: 288rpx; margin-top: 12rpx" |
|||
:src="baseurl + '/' + form.head_pic" |
|||
mode="scaleToFill" |
|||
></image> |
|||
</u-upload> |
|||
</u-form-item> |
|||
<u-form-item label="姓名" prop="name"> |
|||
<u-input v-model="form.name" placeholder="请输入真实姓名" placeholder-style="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
<u-form-item label="标签" prop="type"> |
|||
<u-input |
|||
v-model="form.type" |
|||
placeholder="请选择" |
|||
placeholder-style="color: #D3D3D3;" |
|||
suffix-icon="arrow-down" |
|||
@focus="show = true" |
|||
/> |
|||
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false" key-name="name"></u-picker> |
|||
</u-form-item> |
|||
<u-form-item label="联系方式" prop="tel"> |
|||
<u-input v-model="form.tel" placeholder="请输入联系方式" placeholder-style="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
<u-form-item label="微信二维码" prop="code_pic"> |
|||
<u-upload class="uploadbox" @afterRead="codeafterRead" :max-count="1" :image-mode="'heightFix'" :width="auto" :height="144"> |
|||
<view class="yyzz" v-if="form.code_pic === ''"> |
|||
<image style="width: 40rpx; height: 40rpx" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传微信二维码 |
|||
</view> |
|||
<image |
|||
v-else |
|||
style="width: 100%; height: 288rpx; margin-top: 12rpx" |
|||
:src="baseurl + '/' + form.code_pic" |
|||
mode="scaleToFill" |
|||
></image> |
|||
</u-upload> |
|||
</u-form-item> |
|||
<u-form-item label="邮箱" prop="email"> |
|||
<u-input v-model="form.email" placeholder="请输入邮箱地址" placeholder-style="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
<u-form-item label="宣传封面" prop="publicize_pic"> |
|||
<u-upload class="uploadbox" @afterRead="afterRead" :max-count="1" :image-mode="'heightFix'" :width="auto" :height="144"> |
|||
<view class="yyzz" v-if="form.publicize_pic === ''"> |
|||
<image style="width: 40rpx; height: 40rpx" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传宣传封面 |
|||
</view> |
|||
<image |
|||
v-else |
|||
style="width: 100%; height: 288rpx; margin-top: 12rpx" |
|||
:src="baseurl + '/' + form.publicize_pic" |
|||
mode="scaleToFill" |
|||
></image> |
|||
</u-upload> |
|||
</u-form-item> |
|||
<u-form-item label="助企案例" prop="content"> |
|||
<u-input v-model="form.content" placeholder="请输入真实案例" placeholder-style="color: #D3D3D3;" /> |
|||
</u-form-item> |
|||
</u-form> |
|||
</view> |
|||
<view class="sumitbotton"> |
|||
<view class="button" @click="submit">确认提交</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
mediumAdd |
|||
} from '@/api/shop' |
|||
import { ref } from 'vue' |
|||
import { mediumAdd } from '@/api/shop' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
|
|||
// 响应式表单数据 |
|||
const form = ref({ |
|||
name: '', |
|||
type: '', |
|||
tag: '', |
|||
tel: '', |
|||
email: '', |
|||
publicize_pic: '', |
|||
content: '', |
|||
code_pic: '', |
|||
head_pic: '', |
|||
}); |
|||
// 响应式表单数据 |
|||
const form = ref({ |
|||
name: '', |
|||
type: '', |
|||
tag: '', |
|||
tel: '', |
|||
email: '', |
|||
publicize_pic: '', |
|||
content: '', |
|||
code_pic: '', |
|||
head_pic: '' |
|||
}) |
|||
|
|||
const show = ref(false) |
|||
const columns = reactive([ |
|||
[ |
|||
{ |
|||
id: 1, |
|||
name: '自媒体' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '达人' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '网红' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: '孵化机构' |
|||
}, |
|||
{ |
|||
id: 5, |
|||
name: '陪跑机构' |
|||
} |
|||
] |
|||
]) |
|||
|
|||
const show = ref(false); |
|||
const columns = reactive([[{ |
|||
'id': 1, |
|||
'name': '自媒体' |
|||
}, |
|||
{ |
|||
'id': 2, |
|||
'name': '达人' |
|||
}, |
|||
{ |
|||
'id': 3, |
|||
'name': '网红' |
|||
}, |
|||
{ |
|||
'id': 4, |
|||
'name': '孵化机构' |
|||
}, |
|||
{ |
|||
'id': 5, |
|||
'name': '陪跑机构' |
|||
}] |
|||
]); |
|||
// 校验规则 |
|||
const rules = { |
|||
name: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入姓名', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
], |
|||
type: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择标签', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
], |
|||
tel: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入联系方式', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
], |
|||
email: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入邮箱地址', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
], |
|||
publicize_pic: [ |
|||
{ |
|||
required: true, |
|||
message: '请上传宣传封面', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
], |
|||
code_pic: [ |
|||
{ |
|||
required: true, |
|||
message: '请上传微信二维码', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
], |
|||
head_pic: [ |
|||
{ |
|||
required: true, |
|||
message: '请上传头像', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
], |
|||
content: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入真实案例', |
|||
trigger: ['blur', 'change'] |
|||
} |
|||
] |
|||
} |
|||
|
|||
// 校验规则 |
|||
const rules = { |
|||
name: [{ |
|||
required: true, |
|||
message: '请输入姓名', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
type: [{ |
|||
required: true, |
|||
message: '请输入标签', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
tel: [{ |
|||
required: true, |
|||
message: '请输入联系方式', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
email: [{ |
|||
required: true, |
|||
message: '请输入邮箱地址', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
publicize_pic: [{ |
|||
required: true, |
|||
message: '请上传宣传封面', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
code_pic: [{ |
|||
required: true, |
|||
message: '请上传微信二维码', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
head_pic: [{ |
|||
required: true, |
|||
message: '请上传头像', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
content: [{ |
|||
required: true, |
|||
message: '请输入真实案例', |
|||
trigger: ['blur', 'change'], |
|||
}, ], |
|||
}; |
|||
const afterRead = async (e) => { |
|||
console.log(e) |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
token: uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
if (JSON.parse(val.data).data.url) { |
|||
console.log(JSON.parse(val.data).data.url) |
|||
form.value.publicize_pic = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const afterRead = async (e) => { |
|||
console.log(e); |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
'token': uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
if (JSON.parse(val.data).data.url) { |
|||
console.log(JSON.parse(val.data).data.url); |
|||
form.value.publicize_pic = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res); |
|||
} |
|||
}) |
|||
} |
|||
const txafterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
token: uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
if (JSON.parse(val.data).data.url) { |
|||
console.log(JSON.parse(val.data).data.url) |
|||
form.value.head_pic = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const txafterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
'token': uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
if (JSON.parse(val.data).data.url) { |
|||
console.log(JSON.parse(val.data).data.url); |
|||
form.value.head_pic = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res); |
|||
} |
|||
}) |
|||
} |
|||
const codeafterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
token: uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
if (JSON.parse(val.data).data.url) { |
|||
console.log(JSON.parse(val.data).data.url) |
|||
form.value.code_pic = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const codeafterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
'token': uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
if (JSON.parse(val.data).data.url) { |
|||
console.log(JSON.parse(val.data).data.url); |
|||
form.value.code_pic = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res); |
|||
} |
|||
}) |
|||
} |
|||
// 表单引用 |
|||
const uFormRef = ref(null) |
|||
|
|||
// 表单引用 |
|||
const uFormRef = ref(null); |
|||
const confirm = (val) => { |
|||
console.log(val.value[0]) |
|||
form.value.type = val.value[0].name |
|||
form.value.tag = val.value[0].id |
|||
show.value = false |
|||
} |
|||
|
|||
const confirm = (val) => { |
|||
console.log(val.value[0]); |
|||
form.value.type = val.value[0].name |
|||
form.value.tag = val.value[0].id |
|||
show.value = false |
|||
} |
|||
|
|||
// 提交方法 |
|||
function submit() { |
|||
uFormRef.value.validate().then(valid => { |
|||
if (valid) { |
|||
uni.$u.toast('校验通过') |
|||
delete form.value.type |
|||
mediumAdd(form.value).then((res)=> { |
|||
if(res.code === 1) { |
|||
uni.navigateBack() |
|||
} |
|||
}) |
|||
} else { |
|||
uni.$u.toast('请填写完整') |
|||
} |
|||
}).catch(() => { |
|||
// 处理验证错误 |
|||
uni.$u.toast('请填写完整') |
|||
}); |
|||
} |
|||
// 提交方法 |
|||
function submit() { |
|||
uFormRef.value |
|||
.validate() |
|||
.then((valid) => { |
|||
if (valid) { |
|||
uni.$u.toast('校验通过') |
|||
delete form.value.type |
|||
mediumAdd(form.value).then((res) => { |
|||
if (res.code === 1) { |
|||
uni.navigateBack() |
|||
} |
|||
}) |
|||
} else { |
|||
uni.$u.toast('请填写完整') |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
// 处理验证错误 |
|||
uni.$u.toast('请填写完整') |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
.container { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
overflow-y: hidden; |
|||
|
|||
.formlist { |
|||
width: 100%; |
|||
height: calc(100vh - 346rpx); |
|||
background: #e9ecf3; |
|||
padding: 40rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
} |
|||
.formlist { |
|||
width: 100%; |
|||
height: calc(100vh - 346rpx); |
|||
background: #e9ecf3; |
|||
padding: 40rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.sumitbotton { |
|||
width: 100%; |
|||
height: 168rpx; |
|||
background: #FFFFFF; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: fixed; |
|||
bottom: 0; |
|||
.sumitbotton { |
|||
width: 100%; |
|||
height: 168rpx; |
|||
background: #ffffff; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: fixed; |
|||
bottom: 0; |
|||
|
|||
.button { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
.button { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007fff 0%, #99ccff 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.yyzz { |
|||
margin-top: 12rpx; |
|||
width: 100%; |
|||
height: 288rpx; |
|||
border-radius: 16rpx; |
|||
background: #FFFFFF; |
|||
display: grid; |
|||
align-content: center; |
|||
justify-items: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 70rpx; |
|||
letter-spacing: normal; |
|||
color: #CCCCCC; |
|||
} |
|||
.yyzz { |
|||
margin-top: 12rpx; |
|||
width: 100%; |
|||
height: 288rpx; |
|||
border-radius: 16rpx; |
|||
background: #ffffff; |
|||
display: grid; |
|||
align-content: center; |
|||
justify-items: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 70rpx; |
|||
letter-spacing: normal; |
|||
color: #cccccc; |
|||
} |
|||
|
|||
:deep(.u-upload) { |
|||
.u-upload__wrap { |
|||
view { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
:deep(.u-upload) { |
|||
.u-upload__wrap { |
|||
view { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style> |
|||
.u-input { |
|||
background-color: #FFFFFF; |
|||
height: 100rpx !important; |
|||
} |
|||
.u-input { |
|||
background-color: #ffffff; |
|||
height: 100rpx !important; |
|||
} |
|||
|
|||
.u-form-item__body__left__content__label { |
|||
white-space: nowrap; |
|||
} |
|||
.u-form-item__body__left__content__label { |
|||
white-space: nowrap; |
|||
} |
|||
</style> |
|||
@ -1,73 +1,77 @@ |
|||
<template> |
|||
<u-navbar title="小店帮" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<u-search @search="search" @clickIcon="clickIcon" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#a4c7ff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search> |
|||
<zh-scroll ref="zhscrollRel" :scrollList="goods" :searchVal="keyword"></zh-scroll> |
|||
</view> |
|||
<liuDragButton :widthPx="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="" @click="gohdzq"></image> |
|||
</liuDragButton> |
|||
<u-navbar title="开店帮" placeholder="true" bg-color="#F1F3F9" :auto-back="true"></u-navbar> |
|||
<view class="container"> |
|||
<u-search |
|||
@search="search" |
|||
@clickIcon="clickIcon" |
|||
shape="square" |
|||
placeholder="请输入搜索内容" |
|||
placeholder-color="#a4c7ff" |
|||
v-model="keyword" |
|||
search-icon="/static/img/search.png" |
|||
search-icon-size="14" |
|||
:show-action="false" |
|||
height="40" |
|||
margin="40rpx 24rpx 24rpx 24rpx" |
|||
></u-search> |
|||
<zh-scroll ref="zhscrollRel" :scroll-list="goods" :search-val="keyword"></zh-scroll> |
|||
</view> |
|||
<liuDragButton :width-px="'145rpx'"> |
|||
<image class="hdzq" src="@/static/img/hdzq.png" mode="aspectFill" @click="gohdzq"></image> |
|||
</liuDragButton> |
|||
</template> |
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { ref } from 'vue' |
|||
|
|||
import zhScroll from '@/components/zh-scroll/zh-scroll.vue'; |
|||
import { storeList } from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
import zhScroll from '@/components/zh-scroll/zh-scroll.vue' |
|||
import { storeList } from '@/api/shop' |
|||
import liuDragButton from '@/uni_modules/liu-drag-button/components/liu-drag-button/liu-drag-button.vue' |
|||
|
|||
const zhscrollRel = ref(null) |
|||
const zhscrollRel = ref(null) |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
// 响应式数据 |
|||
const keyword = ref('') |
|||
|
|||
const goods = ref([]); |
|||
const goods = ref([]) |
|||
|
|||
const search = (val) => { |
|||
zhscrollRel.value.searchleMenuTap(keyword.value) |
|||
} |
|||
const search = (val) => { |
|||
zhscrollRel.value.searchleMenuTap(keyword.value) |
|||
} |
|||
|
|||
const clickIcon = () => { |
|||
zhscrollRel.value.searchleMenuTap(keyword.value) |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
|
|||
onShow(async() => { |
|||
await storeList({}).then((res)=> { |
|||
goods.value = res.data |
|||
}) |
|||
}) |
|||
const clickIcon = () => { |
|||
zhscrollRel.value.searchleMenuTap(keyword.value) |
|||
} |
|||
|
|||
const gohdzq = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/interactiveZone' |
|||
}) |
|||
} |
|||
|
|||
onShow(async () => { |
|||
await storeList({}).then((res) => { |
|||
goods.value = res.data |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 254rpx); |
|||
width: 100%; |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 254rpx); |
|||
width: 100%; |
|||
|
|||
.cate-tab { |
|||
height: calc(100vh - 254rpx); |
|||
} |
|||
} |
|||
.cate-tab { |
|||
height: calc(100vh - 254rpx); |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
.hdzq { |
|||
width: 212rpx; |
|||
height: 86rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
</style> |
|||
@ -1,153 +1,147 @@ |
|||
<template> |
|||
<u-navbar :title="'小店帮'" placeholder="true" bgColor="#F1F3F9" :autoBack="true" /> |
|||
<view class="container"> |
|||
<text class="title">{{xdbData.title}}</text> |
|||
<text class="fbr">发布人:{{xdbData.publisher}}</text> |
|||
<view class="readtime"> |
|||
<text class="time">{{xdbData.create_time}}</text> |
|||
<view class="readnum"> |
|||
阅读量:<text class="num">{{xdbData.count}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="nrxq"> |
|||
<view class="icon"> |
|||
</view> |
|||
<text class="nrtitle">内容详情</text> |
|||
</view> |
|||
<u-parse :content="xdbData.content"></u-parse> |
|||
</view> |
|||
<u-navbar :title="'开店帮'" placeholder="true" bg-color="#F1F3F9" :auto-back="true" /> |
|||
<view class="container"> |
|||
<text class="title">{{ xdbData.title }}</text> |
|||
<text class="fbr">发布人:{{ xdbData.publisher }}</text> |
|||
<view class="readtime"> |
|||
<text class="time">{{ xdbData.create_time }}</text> |
|||
<view class="readnum"> |
|||
阅读量: |
|||
<text class="num">{{ xdbData.count }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="nrxq"> |
|||
<view class="icon"></view> |
|||
<text class="nrtitle">内容详情</text> |
|||
</view> |
|||
<u-parse :content="xdbData.content"></u-parse> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
storeInfo |
|||
} from '@/api/shop' |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import { storeInfo } from '@/api/shop' |
|||
|
|||
const xdbData = ref({}) |
|||
const xdbData = ref({}) |
|||
|
|||
onLoad(async (param) => { |
|||
await storeInfo(param.id).then((res) => { |
|||
if (res.code === 1) { |
|||
xdbData.value = res.data |
|||
} |
|||
}) |
|||
}) |
|||
onLoad(async (param) => { |
|||
await storeInfo(param.id).then((res) => { |
|||
if (res.code === 1) { |
|||
xdbData.value = res.data |
|||
} |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 60rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 60rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.fbr { |
|||
margin-top: 28rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.fbr { |
|||
margin-top: 28rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
|
|||
.readtime { |
|||
margin-top: 28rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.readtime { |
|||
margin-top: 28rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
|
|||
.readnum { |
|||
display: flex; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 阅读量: */ |
|||
color: #858494; |
|||
.readnum { |
|||
display: flex; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 阅读量: */ |
|||
color: #858494; |
|||
|
|||
.num { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 2 */ |
|||
color: #007FFF; |
|||
} |
|||
} |
|||
} |
|||
.num { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 48rpx; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 2 */ |
|||
color: #007fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.nrxq { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 60rpx; |
|||
margin-bottom: 40rpx; |
|||
.nrxq { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 60rpx; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007fff 0%, #99ccff 100%); |
|||
} |
|||
|
|||
.nrtitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.nrtitle { |
|||
margin-left: 20rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072ff; |
|||
} |
|||
} |
|||
|
|||
.message { |
|||
margin-top: 40rpx; |
|||
} |
|||
} |
|||
.message { |
|||
margin-top: 40rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,86 +1,83 @@ |
|||
<template> |
|||
<u-navbar :title="titleData.special_id_name?'“'+ titleData.special_id_name +'”'+'专题':''" placeholder="true" bgColor="#F1F3F9" :autoBack="true"> |
|||
</u-navbar> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<image style="width: 8rpx;height: 1em;" src="@/static/img/Fill1.png" mode=""></image> |
|||
<image style="width: 8rpx;height: 1em;margin-left: 6rpx;" src="@/static/img/Fill2.png" mode=""></image> |
|||
<text class="title">{{titleData.title}}</text> |
|||
</view> |
|||
<!-- <image style="width: 100%;height: 436rpx;margin-top: 48rpx;" src="@/static/img/Bitmap.png" mode=""></image> --> |
|||
<rich-text :nodes="titleData.content"></rich-text> |
|||
<view class="fbtime">{{titleData.create_time}}</view> |
|||
</view> |
|||
<u-navbar |
|||
:title="titleData.special_id_name ? '“' + titleData.special_id_name + '”' + '专题' : ''" |
|||
placeholder="true" |
|||
bg-color="#F1F3F9" |
|||
:auto-back="true" |
|||
></u-navbar> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<image style="width: 8rpx; height: 1em" src="@/static/img/Fill1.png" mode=""></image> |
|||
<image style="width: 8rpx; height: 1em; margin-left: 6rpx" src="@/static/img/Fill2.png" mode=""></image> |
|||
<text class="title">{{ titleData.title }}</text> |
|||
</view> |
|||
<!-- <image style="width: 100%;height: 436rpx;margin-top: 48rpx;" src="@/static/img/Bitmap.png" mode=""></image> --> |
|||
<rich-text :nodes="titleData.content"></rich-text> |
|||
<view class="fbtime">{{ titleData.create_time }}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
specialListInfo, |
|||
bannerInfo |
|||
} from '@/api/index' |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import { specialListInfo, bannerInfo } from '@/api/index' |
|||
|
|||
const titleData = ref([]) |
|||
const titleData = ref([]) |
|||
|
|||
|
|||
onLoad(async(param) => { |
|||
if(param.type === 'zt') { |
|||
const res = await specialListInfo(param.id) |
|||
if(res.code === 1) { |
|||
titleData.value = res.data |
|||
} |
|||
} else { |
|||
const res = await bannerInfo(param.id) |
|||
if(res.code === 1) { |
|||
console.log(res); |
|||
titleData.value = res.data |
|||
} |
|||
} |
|||
}) |
|||
onLoad(async (param) => { |
|||
if (param.type === 'zt') { |
|||
const res = await specialListInfo(param.id) |
|||
if (res.code === 1) { |
|||
titleData.value = res.data |
|||
} |
|||
} else { |
|||
const res = await bannerInfo(param.id) |
|||
if (res.code === 1) { |
|||
console.log(res) |
|||
titleData.value = res.data |
|||
} |
|||
} |
|||
titleData.value.content = titleData.value.content.replace(/<img/g, '<img style="width: 100%; max-width: 100%; height: auto;"') |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 48rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 40rpx; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-weight: 550; |
|||
font-size: 36rpx; |
|||
color: #0C092A; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.text { |
|||
margin-top: 32rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.fbtime { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 142rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/SCMP Grey/nobel */ |
|||
/* 样式描述:06 Small Grey txt */ |
|||
color: #A1A1A1; |
|||
} |
|||
} |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 48rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 40rpx; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-weight: 550; |
|||
font-size: 36rpx; |
|||
color: #0c092a; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.text { |
|||
margin-top: 32rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
.fbtime { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 142rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/SCMP Grey/nobel */ |
|||
/* 样式描述:06 Small Grey txt */ |
|||
color: #a1a1a1; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,250 +1,246 @@ |
|||
<template> |
|||
<view class="pagebox"> |
|||
<view class="vidoepart" v-if="detailData.s_type === 1"> |
|||
<video class="myVideo" :src="baseurl + detailData.video_path" @error="videoErrorCallback" |
|||
@timeupdate="onTimeUpdate"></video> |
|||
</view> |
|||
<view class="main"> |
|||
<text class="title" v-if="detailData.s_type === 2">{{detailData.title}}</text> |
|||
<view class="peopnum"> |
|||
<view class="left"> |
|||
<image style="width: 26rpx;height: 28rpx;" src="@/static/img/gkrs.png" mode=""></image> |
|||
<text class="txt">观看人数:</text> |
|||
<text class="num">{{detailData.watch_count}}</text> |
|||
</view> |
|||
<view class="left"> |
|||
<image style="width: 28rpx;height: 28rpx;" :src="issc?'/static/img/scrs.png':'/static/img/sc.png'" |
|||
mode="" @click="scClick"></image> |
|||
<text class="txt">收藏人数:</text> |
|||
<text class="num">{{detailData.collect_count}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="shqy"> |
|||
<view class="head"> |
|||
<image style="width: 12rpx;height: 32rpx;" src="@/static/img/shqy.png" mode=""></image> |
|||
<text class="text">适合企业</text> |
|||
</view> |
|||
<view class="cards"> |
|||
<view class="card" v-for="(item,index) in JSON.parse(detailData.suitable)" :key="index"> |
|||
<text class="lcxb">{{item.title}}</text> |
|||
<text class="bz">{{item.describe}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<text class="title" v-if="detailData.s_type === 1">{{detailData.title}}</text> |
|||
<text class="message">{{detailData.introduction}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="pagebox"> |
|||
<view class="vidoepart" v-if="detailData.s_type === 1"> |
|||
<video class="myVideo" :src="baseurl + detailData.video_path" @error="videoErrorCallback" @timeupdate="onTimeUpdate"></video> |
|||
</view> |
|||
<view class="main"> |
|||
<text class="title" v-if="detailData.s_type === 2">{{ detailData.title }}</text> |
|||
<view class="peopnum"> |
|||
<view class="left"> |
|||
<image style="width: 26rpx; height: 28rpx" src="@/static/img/gkrs.png" mode=""></image> |
|||
<text class="txt">观看人数:</text> |
|||
<text class="num">{{ detailData.watch_count }}</text> |
|||
</view> |
|||
<view class="left"> |
|||
<image |
|||
style="width: 28rpx; height: 28rpx" |
|||
:src="issc ? '/static/img/scrs.png' : '/static/img/sc.png'" |
|||
mode="" |
|||
@click="scClick" |
|||
></image> |
|||
<text class="txt">收藏人数:</text> |
|||
<text class="num">{{ detailData.collect_count }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="shqy"> |
|||
<view class="head"> |
|||
<image style="width: 12rpx; height: 32rpx" src="@/static/img/shqy.png" mode=""></image> |
|||
<text class="text">适合企业</text> |
|||
</view> |
|||
<view class="cards"> |
|||
<view class="card" v-for="(item, index) in JSON.parse(detailData.suitable)" :key="index"> |
|||
<text class="lcxb">{{ item.title }}</text> |
|||
<text class="bz">{{ item.describe }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<text class="title" v-if="detailData.s_type === 1">{{ detailData.title }}</text> |
|||
<text class="message">{{ detailData.introduction }}</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
studyCenterDetail, |
|||
watchCount, |
|||
studyRecord, |
|||
isCollect, |
|||
collect, |
|||
removeCollect |
|||
} from '@/api/learningCenter' |
|||
|
|||
const baseurl = import.meta.env.VITE_APP_BASE_URL + '/' |
|||
|
|||
const detailData = ref({}) |
|||
|
|||
const issc = ref(false) |
|||
|
|||
const kcid = ref(0) |
|||
|
|||
const videoErrorCallback = (e) => { |
|||
uni.showModal({ |
|||
content: e.target.errMsg, |
|||
showCancel: false |
|||
}) |
|||
} |
|||
|
|||
const scClick = async() => { |
|||
issc.value = !issc.value |
|||
if(issc.value) { |
|||
await collect({"item_id": kcid.value}) |
|||
} else { |
|||
await removeCollect({"item_id": kcid.value}) |
|||
} |
|||
} |
|||
|
|||
const percent = ref('') |
|||
const onTimeUpdate = (e) => { |
|||
const currentTime = e.detail.currentTime; |
|||
const duration = e.detail.duration; |
|||
percent.value = (currentTime / duration * 100).toFixed(2); // 保留两位小数 |
|||
} |
|||
onLoad(async (param) => { |
|||
detailData.value = [] |
|||
kcid.value = param.id |
|||
await watchCount({ |
|||
'id': param.id |
|||
}) |
|||
await studyCenterDetail(param.id).then(async (res) => { |
|||
if (res.code === 1) { |
|||
detailData.value = res.data |
|||
if (res.data.s_type === 1) { |
|||
|
|||
} else { |
|||
await studyRecord({ |
|||
'id': param.id, |
|||
'progress': '100' |
|||
}) |
|||
} |
|||
await isCollect({"id": param.id}).then((res1)=> { |
|||
issc.value = res1.data |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
onBeforeUnmount(async ()=> { |
|||
if(detailData.value.s_type === 1) { |
|||
await studyRecord({ |
|||
'id': kcid.value, |
|||
'progress': percent.value |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
import { studyCenterDetail, watchCount, studyRecord, isCollect, collect, removeCollect } from '@/api/learningCenter' |
|||
|
|||
const baseurl = import.meta.env.VITE_APP_BASE_URL + '/' |
|||
|
|||
const detailData = ref({}) |
|||
|
|||
const issc = ref(false) |
|||
|
|||
const kcid = ref(0) |
|||
|
|||
const videoErrorCallback = (e) => { |
|||
uni.showModal({ |
|||
content: e.target.errMsg, |
|||
showCancel: false |
|||
}) |
|||
} |
|||
|
|||
const scClick = async () => { |
|||
issc.value = !issc.value |
|||
if (issc.value) { |
|||
detailData.value.collect_count += 1 |
|||
await collect({ item_id: kcid.value }) |
|||
} else { |
|||
detailData.value.collect_count -= 1 |
|||
await removeCollect({ item_id: kcid.value }) |
|||
} |
|||
} |
|||
|
|||
const percent = ref('') |
|||
const onTimeUpdate = (e) => { |
|||
const currentTime = e.detail.currentTime |
|||
const duration = e.detail.duration |
|||
percent.value = ((currentTime / duration) * 100).toFixed(2) // 保留两位小数 |
|||
} |
|||
onLoad(async (param) => { |
|||
detailData.value = [] |
|||
kcid.value = param.id |
|||
await watchCount({ |
|||
id: param.id |
|||
}) |
|||
await studyCenterDetail(param.id).then(async (res) => { |
|||
if (res.code === 1) { |
|||
detailData.value = res.data |
|||
if (res.data.s_type === 1) { |
|||
} else { |
|||
await studyRecord({ |
|||
id: param.id, |
|||
progress: '100' |
|||
}) |
|||
} |
|||
await isCollect({ id: param.id }).then((res1) => { |
|||
issc.value = res1.data |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
onBeforeUnmount(async () => { |
|||
if (detailData.value.s_type === 1) { |
|||
await studyRecord({ |
|||
id: kcid.value, |
|||
progress: percent.value |
|||
}) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.pagebox { |
|||
height: 100vh; |
|||
|
|||
.vidoepart { |
|||
.myVideo { |
|||
width: 100vw; |
|||
} |
|||
} |
|||
|
|||
.main { |
|||
padding: 30rpx 40rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.peopnum { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 40rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.txt { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 观看人数: */ |
|||
color: #858494; |
|||
} |
|||
|
|||
.num { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 观看人数: */ |
|||
color: #007FFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.shqy { |
|||
display: grid; |
|||
|
|||
.head { |
|||
margin-top: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.text { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
|
|||
.cards { |
|||
margin-top: 32rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 20rpx; |
|||
|
|||
.card { |
|||
flex: 0 1 calc(50% - 13rpx); |
|||
height: 144rpx; |
|||
border-radius: 24rpx; |
|||
background: #FAFDFF; |
|||
box-sizing: border-box; |
|||
border: 8rpx solid #DBEDFF; |
|||
display: grid; |
|||
justify-items: center; |
|||
align-items: center; |
|||
|
|||
.lcxb { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: normal; |
|||
letter-spacing: normal; |
|||
color: #007FFF; |
|||
} |
|||
|
|||
.bz { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 80rpx; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.message { |
|||
margin-top: 40rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 300; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
line-height: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
.pagebox { |
|||
height: 100vh; |
|||
|
|||
.vidoepart { |
|||
.myVideo { |
|||
width: 100vw; |
|||
} |
|||
} |
|||
|
|||
.main { |
|||
padding: 30rpx 40rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.peopnum { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 40rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.txt { |
|||
margin-left: 8rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 观看人数: */ |
|||
color: #858494; |
|||
} |
|||
|
|||
.num { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
/* 观看人数: */ |
|||
color: #007fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.shqy { |
|||
display: grid; |
|||
|
|||
.head { |
|||
margin-top: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.text { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072ff; |
|||
} |
|||
} |
|||
|
|||
.cards { |
|||
margin-top: 32rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 20rpx; |
|||
|
|||
.card { |
|||
flex: 0 1 calc(50% - 13rpx); |
|||
height: 144rpx; |
|||
border-radius: 24rpx; |
|||
background: #fafdff; |
|||
box-sizing: border-box; |
|||
border: 8rpx solid #dbedff; |
|||
display: grid; |
|||
justify-items: center; |
|||
align-items: center; |
|||
|
|||
.lcxb { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: normal; |
|||
letter-spacing: normal; |
|||
color: #007fff; |
|||
} |
|||
|
|||
.bz { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 80rpx; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.message { |
|||
margin-top: 40rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 300; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
line-height: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,400 +1,406 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="xxqd"> |
|||
<view class="head"> |
|||
你的学习清单 |
|||
</view> |
|||
<view class="main"> |
|||
<view class="text"> |
|||
距离上次学习已经 |
|||
<text class="hongzi"> {{learntime.days}}</text>天 |
|||
<text class="hongzi"> {{learntime.hours}}</text>时 |
|||
<text class="hongzi"> {{learntime.minutes}}</text>分 |
|||
</view> |
|||
<view class="xxls" v-if="xxList.length !== 0"> |
|||
<view class="xxone" v-for="(item,index) in xxList.slice(0,3)" :key="index" @click="kcClick('h',item)"> |
|||
<u-image style="width: 100%;height: 238rpx;border-radius: 16rpx;" |
|||
:src="baseurl + '/' +item.study_center_index_pic" mode="" width="100%" height="238rpx" radius="4"> |
|||
<template v-slot:else> |
|||
<image v-if="item.s_type === 1" style="width: 55rpx;height: 55rpx;" src="@/static/img/bof.png" mode=""></image> |
|||
</template> |
|||
</u-image> |
|||
<view class="xxjd"> |
|||
已学{{item.progress}}% |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="xxls" v-else> |
|||
无学习历史记录 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<u-tabs :list="tabList" :lineWidth="34" :lineHeight="4" lineColor="#007FFF" |
|||
:activeStyle="{color: '#0C092A',fontWeight: '600',fontSize: '34rpx'}" |
|||
:inactiveStyle="{color: '#858494',fontWeight: '350',fontSize: '30rpx'}" @click="tabClick"></u-tabs> |
|||
<u-search @search="search" @clickIcon="clickIcon" @clear="clear" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#088cff" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx"></u-search> |
|||
|
|||
<view class="KClist"> |
|||
<view class="kcone" v-for="(item,index) in kcList" :key="index" @click="kcClick('l',item)"> |
|||
<image class="img" :src="baseurl + item.index_pic" mode=""></image> |
|||
<view class="right"> |
|||
<text class="title">{{item.title}}</text> |
|||
<text class="txt">{{item.introduction}}</text> |
|||
<view class="bottompart"> |
|||
<text class="gtsy">{{item.publisher}}</text> |
|||
<text class="data">{{ item.create_time.slice(0,10)}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="container"> |
|||
<view class="xxqd"> |
|||
<view class="head">你的学习清单</view> |
|||
<view class="main"> |
|||
<view class="text"> |
|||
距离上次学习已经 |
|||
<text class="hongzi">{{ learntime.days }}</text> |
|||
天 |
|||
<text class="hongzi">{{ learntime.hours }}</text> |
|||
时 |
|||
<text class="hongzi">{{ learntime.minutes }}</text> |
|||
分 |
|||
</view> |
|||
<view class="xxls" v-if="xxList.length !== 0"> |
|||
<view class="xxone" v-for="(item, index) in xxList.slice(0, 3)" :key="index" @click="kcClick('h', item)"> |
|||
<u-image |
|||
style="width: 100%; height: 238rpx; border-radius: 16rpx" |
|||
:src="baseurl + '/' + item.study_center_index_pic" |
|||
mode="" |
|||
width="100%" |
|||
height="238rpx" |
|||
radius="4" |
|||
> |
|||
<template v-slot:else> |
|||
<image v-if="item.s_type === 1" style="width: 55rpx; height: 55rpx" src="@/static/img/bof.png" mode=""></image> |
|||
</template> |
|||
</u-image> |
|||
<view class="xxjd">已学{{ item.progress }}%</view> |
|||
</view> |
|||
</view> |
|||
<view class="xxls" v-else>无学习历史记录</view> |
|||
</view> |
|||
</view> |
|||
<u-tabs |
|||
:list="tabList" |
|||
:line-width="34" |
|||
:line-height="4" |
|||
line-color="#007FFF" |
|||
key-name="title" |
|||
:active-style="{ color: '#0C092A', fontWeight: '600', fontSize: '34rpx' }" |
|||
:inactive-style="{ color: '#858494', fontWeight: '350', fontSize: '30rpx' }" |
|||
@click="tabClick" |
|||
></u-tabs> |
|||
<u-search |
|||
@search="search" |
|||
@clickIcon="clickIcon" |
|||
@clear="clear" |
|||
shape="square" |
|||
placeholder="请输入搜索内容" |
|||
placeholder-color="#088cff" |
|||
v-model="keyword" |
|||
search-icon="/static/img/search.png" |
|||
search-icon-size="14" |
|||
:show-action="false" |
|||
height="40" |
|||
margin="40rpx 24rpx 24rpx 24rpx" |
|||
></u-search> |
|||
|
|||
<view class="KClist"> |
|||
<view class="kcone" v-for="(item, index) in kcList" :key="index" @click="kcClick('l', item)"> |
|||
<image class="img" :src="baseurl + item.index_pic" mode=""></image> |
|||
<view class="right"> |
|||
<text class="title">{{ item.title }}</text> |
|||
<text class="txt">{{ item.introduction }}</text> |
|||
<view class="bottompart"> |
|||
<text class="gtsy">{{ item.publisher }}</text> |
|||
<text class="data">{{ item.create_time.slice(0, 10) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
watch |
|||
} from 'vue' |
|||
import { |
|||
myStudy, |
|||
studyCenter |
|||
} from '@/api/learningCenter' |
|||
|
|||
const baseurl = import.meta.env.VITE_APP_BASE_URL + '/' |
|||
|
|||
const learntime = ref({ |
|||
days: 0, |
|||
hours: 0, |
|||
minutes: 0 |
|||
}) |
|||
|
|||
const xxList = ref([]) |
|||
const keyword = ref('') |
|||
|
|||
const tabIndex = ref('') |
|||
const tabList = ref([{ |
|||
name: '推荐' |
|||
}, |
|||
{ |
|||
name: '视频课' |
|||
}, |
|||
{ |
|||
name: '图文课' |
|||
} |
|||
]) |
|||
|
|||
const kcList = ref([]) |
|||
|
|||
|
|||
const tabClick = (item) => { |
|||
keyword.value = '' |
|||
if(item.index === 0) { |
|||
tabIndex.value = '' |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
tabIndex.value = item.index |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
|
|||
} |
|||
|
|||
const search = (val) => { |
|||
if(tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
} |
|||
|
|||
const clickIcon = () => { |
|||
if(tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
} |
|||
|
|||
const clear = () => { |
|||
keyword.value = '' |
|||
if(tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
} |
|||
|
|||
const kcClick = (type,item) => { |
|||
if(type === 'h') { |
|||
uni.navigateTo({ |
|||
url: '/pages/learningCenter/detail?id=' + item.study_center_id |
|||
}) |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/learningCenter/detail?id=' + item.id |
|||
}) |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
const useTimeDiff = (targetDateStr) => { |
|||
const days = ref(0); |
|||
const hours = ref(0); |
|||
const minutes = ref(0); |
|||
|
|||
const targetDate = new Date(targetDateStr.replace(/-/g, '/')); |
|||
const now = new Date(); |
|||
const diffMs = now - targetDate; |
|||
|
|||
days.value = Math.max(0, Math.floor(diffMs / 86400000)); |
|||
hours.value = Math.max(0, Math.floor((diffMs % 86400000) / 3600000)); |
|||
minutes.value = Math.max(0, Math.floor((diffMs % 3600000) / 60000)); |
|||
|
|||
return { |
|||
days, |
|||
hours, |
|||
minutes |
|||
} |
|||
} |
|||
|
|||
const getcenterList = async (recommend, title, type, page, limit) => { |
|||
await studyCenter(recommend, title, type, page, limit).then((res) => { |
|||
if (res.code === 1) { |
|||
kcList.value = res.data.data |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const spliceval = (val,f,l) => { |
|||
return val.splice(f,l) |
|||
} |
|||
|
|||
|
|||
onShow(async () => { |
|||
const res = await myStudy() |
|||
if (res.code === 1) { |
|||
xxList.value = res.data |
|||
if (res.data.length !== 0) { |
|||
const { |
|||
days, |
|||
hours, |
|||
minutes |
|||
} = useTimeDiff(res.data[0]?.update_time); |
|||
learntime.value.days = days.value |
|||
learntime.value.hours = hours.value |
|||
learntime.value.minutes = minutes.value |
|||
} |
|||
} |
|||
if(tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
}) |
|||
import { ref, watch } from 'vue' |
|||
import { myStudy, studyCenter, studyCenterCategory } from '@/api/learningCenter' |
|||
|
|||
const baseurl = import.meta.env.VITE_APP_BASE_URL + '/' |
|||
|
|||
const learntime = ref({ |
|||
days: 0, |
|||
hours: 0, |
|||
minutes: 0 |
|||
}) |
|||
|
|||
const xxList = ref([]) |
|||
const keyword = ref('') |
|||
|
|||
const tabIndex = ref('') |
|||
const tabList = ref([ |
|||
{ |
|||
id: '', |
|||
title: '推荐' |
|||
} |
|||
]) |
|||
|
|||
const kcList = ref([]) |
|||
|
|||
const tabClick = (item) => { |
|||
keyword.value = '' |
|||
if (item.index === 0) { |
|||
tabIndex.value = '' |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
tabIndex.value = item.id |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
} |
|||
|
|||
const search = (val) => { |
|||
if (tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
} |
|||
|
|||
const clickIcon = () => { |
|||
if (tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
} |
|||
|
|||
const clear = () => { |
|||
keyword.value = '' |
|||
if (tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
} |
|||
|
|||
const kcClick = (type, item) => { |
|||
if (type === 'h') { |
|||
uni.navigateTo({ |
|||
url: '/pages/learningCenter/detail?id=' + item.study_center_id |
|||
}) |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/learningCenter/detail?id=' + item.id |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const useTimeDiff = (targetDateStr) => { |
|||
const days = ref(0) |
|||
const hours = ref(0) |
|||
const minutes = ref(0) |
|||
|
|||
const targetDate = new Date(targetDateStr.replace(/-/g, '/')) |
|||
const now = new Date() |
|||
const diffMs = now - targetDate |
|||
|
|||
days.value = Math.max(0, Math.floor(diffMs / 86400000)) |
|||
hours.value = Math.max(0, Math.floor((diffMs % 86400000) / 3600000)) |
|||
minutes.value = Math.max(0, Math.floor((diffMs % 3600000) / 60000)) |
|||
|
|||
return { |
|||
days, |
|||
hours, |
|||
minutes |
|||
} |
|||
} |
|||
|
|||
const getcenterList = async (recommend, title, type, page, limit) => { |
|||
await studyCenter(recommend, title, type, page, limit).then((res) => { |
|||
if (res.code === 1) { |
|||
kcList.value = res.data.data |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const spliceval = (val, f, l) => { |
|||
return val.splice(f, l) |
|||
} |
|||
|
|||
onShow(async () => { |
|||
const res = await myStudy() |
|||
if (res.code === 1) { |
|||
xxList.value = res.data |
|||
if (res.data.length !== 0) { |
|||
const { days, hours, minutes } = useTimeDiff(res.data[0]?.update_time) |
|||
learntime.value.days = days.value |
|||
learntime.value.hours = hours.value |
|||
learntime.value.minutes = minutes.value |
|||
} |
|||
} |
|||
if (tabIndex.value !== '') { |
|||
getcenterList('', keyword.value, tabIndex.value, 1, 10) |
|||
} else { |
|||
getcenterList(1, keyword.value, tabIndex.value, 1, 10) |
|||
} |
|||
|
|||
studyCenterCategory().then((rre) => { |
|||
tabList.value = [...tabList.value, ...rre.data] |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
padding: 24rpx; |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgba(241, 243, 249, 0.2) 88%); |
|||
height: 100vh; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.xxqd { |
|||
display: grid; |
|||
justify-items: center; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.head { |
|||
width: 272rpx; |
|||
height: 60rpx; |
|||
background-image: url(@/static/img/xxqd.png); |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 30rpx; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.main { |
|||
width: 100%; |
|||
height: 410rpx; |
|||
border-radius: 48rpx; |
|||
background: #FFFAF7; |
|||
box-sizing: border-box; |
|||
border: 12rpx solid #DBEDFF; |
|||
padding: 60rpx 24rpx 54rpx 24rpx; |
|||
margin-top: -40rpx; |
|||
display: grid; |
|||
justify-items: center; |
|||
align-items: flex-start; |
|||
|
|||
.text { |
|||
display: flex; |
|||
align-items: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 28rpx; |
|||
letter-spacing: normal; |
|||
/* 距离上次学习已经 */ |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.hongzi { |
|||
margin-left: 6rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 28rpx; |
|||
letter-spacing: normal; |
|||
/* 距离上次学习已经 */ |
|||
color: #FE0000; |
|||
} |
|||
|
|||
.xxls { |
|||
display: flex; |
|||
margin-top: 20rpx; |
|||
gap: 26rpx; |
|||
|
|||
.xxone { |
|||
display: grid; |
|||
align-items: center; |
|||
width: 192rpx; |
|||
|
|||
.xxjd { |
|||
z-index: 1; |
|||
margin-top: -34rpx; |
|||
width: 100%; |
|||
height: 34rpx; |
|||
border-radius: 0rpx 0rpx 16rpx 16rpx; |
|||
background: #000000; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
line-height: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
display: grid; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.KClist { |
|||
display: grid; |
|||
|
|||
.kcone { |
|||
width: 100%; |
|||
height: 284rpx; |
|||
border-radius: 32rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
margin-top: 30rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.img { |
|||
width: 234rpx; |
|||
height: 284rpx; |
|||
border-radius: 20rpx 0 0 20rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.right { |
|||
flex: 2; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 20rpx 28rpx 20rpx 20rpx; |
|||
box-sizing: border-box; |
|||
display: grid; |
|||
align-items: center; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.txt { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
|
|||
.bottompart { |
|||
margin-top: 42rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
|
|||
.gtsy { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007FFF; |
|||
} |
|||
|
|||
.data { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.container { |
|||
padding: 24rpx; |
|||
background: linear-gradient(0deg, #f1f3f9 72%, rgba(241, 243, 249, 0.2) 88%); |
|||
height: 100vh; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.xxqd { |
|||
display: grid; |
|||
justify-items: center; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.head { |
|||
width: 272rpx; |
|||
height: 60rpx; |
|||
background-image: url(@/static/img/xxqd.png); |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
line-height: 30rpx; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.main { |
|||
width: 100%; |
|||
height: 410rpx; |
|||
border-radius: 48rpx; |
|||
background: #fffaf7; |
|||
box-sizing: border-box; |
|||
border: 12rpx solid #dbedff; |
|||
padding: 60rpx 24rpx 54rpx 24rpx; |
|||
margin-top: -40rpx; |
|||
display: grid; |
|||
justify-items: center; |
|||
align-items: flex-start; |
|||
|
|||
.text { |
|||
display: flex; |
|||
align-items: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 28rpx; |
|||
letter-spacing: normal; |
|||
/* 距离上次学习已经 */ |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.hongzi { |
|||
margin-left: 6rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 28rpx; |
|||
letter-spacing: normal; |
|||
/* 距离上次学习已经 */ |
|||
color: #fe0000; |
|||
} |
|||
|
|||
.xxls { |
|||
display: flex; |
|||
margin-top: 20rpx; |
|||
gap: 26rpx; |
|||
|
|||
.xxone { |
|||
display: grid; |
|||
align-items: center; |
|||
width: 192rpx; |
|||
|
|||
.xxjd { |
|||
z-index: 1; |
|||
margin-top: -34rpx; |
|||
width: 100%; |
|||
height: 34rpx; |
|||
border-radius: 0rpx 0rpx 16rpx 16rpx; |
|||
background: #000000; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
line-height: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
display: grid; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.KClist { |
|||
display: grid; |
|||
|
|||
.kcone { |
|||
width: 100%; |
|||
height: 284rpx; |
|||
border-radius: 32rpx; |
|||
background: #ffffff; |
|||
display: flex; |
|||
margin-top: 30rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.img { |
|||
width: 234rpx; |
|||
height: 284rpx; |
|||
border-radius: 20rpx 0 0 20rpx; |
|||
flex: 1; |
|||
} |
|||
|
|||
.right { |
|||
flex: 2; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 20rpx 28rpx 20rpx 20rpx; |
|||
box-sizing: border-box; |
|||
display: grid; |
|||
align-items: center; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.txt { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
|
|||
.bottompart { |
|||
margin-top: 42rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
|
|||
.gtsy { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007fff; |
|||
} |
|||
|
|||
.data { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style> |
|||
.u-search { |
|||
margin: 20rpx 0rpx 0 0 !important; |
|||
} |
|||
|
|||
.u-search__content { |
|||
background-color: #FFFFFF !important; |
|||
border-radius: 16rpx !important; |
|||
height: 90rpx !important; |
|||
} |
|||
|
|||
.u-search__content__input { |
|||
background-color: #FFFFFF !important; |
|||
} |
|||
.u-search { |
|||
margin: 20rpx 0rpx 0 0 !important; |
|||
} |
|||
|
|||
.u-search__content { |
|||
background-color: #ffffff !important; |
|||
border-radius: 16rpx !important; |
|||
height: 90rpx !important; |
|||
} |
|||
|
|||
.u-search__content__input { |
|||
background-color: #ffffff !important; |
|||
} |
|||
</style> |
|||
@ -1,31 +1,27 @@ |
|||
|
|||
import { ref, onMounted, onUnmounted } from 'vue'; |
|||
import { ref, onMounted, onUnmounted } from 'vue' |
|||
|
|||
export default function useTimeDiff(targetDateStr) { |
|||
const days = ref(0); |
|||
const hours = ref(0); |
|||
const minutes = ref(0); |
|||
|
|||
const calculateDiff = () => { |
|||
const targetDate = new Date(targetDateStr.replace(/-/g, '/')); |
|||
const now = new Date(); |
|||
const diffMs = now - targetDate; |
|||
|
|||
days.value = Math.max(0, Math.floor(diffMs / 86400000)); |
|||
hours.value = Math.max(0, Math.floor((diffMs % 86400000) / 3600000)); |
|||
minutes.value = Math.max(0, Math.floor((diffMs % 3600000) / 60000)); |
|||
}; |
|||
|
|||
let timer; |
|||
|
|||
onMounted(() => { |
|||
calculateDiff(); |
|||
timer = setInterval(calculateDiff, 60000); |
|||
}); |
|||
|
|||
onUnmounted(() => { |
|||
clearInterval(timer); |
|||
}); |
|||
|
|||
return { days, hours, minutes }; |
|||
const days = ref(0) |
|||
const hours = ref(0) |
|||
const minutes = ref(0) |
|||
const calculateDiff = () => { |
|||
const targetDate = new Date(targetDateStr.replace(/-/g, '/')) |
|||
const now = new Date() |
|||
const diffMs = now - targetDate |
|||
days.value = Math.max(0, Math.floor(diffMs / 86400000)) |
|||
hours.value = Math.max(0, Math.floor((diffMs % 86400000) / 3600000)) |
|||
minutes.value = Math.max(0, Math.floor((diffMs % 3600000) / 60000)) |
|||
} |
|||
|
|||
let timer |
|||
onMounted(() => { |
|||
calculateDiff() |
|||
timer = setInterval(calculateDiff, 60000) |
|||
}) |
|||
|
|||
onUnmounted(() => { |
|||
clearInterval(timer) |
|||
}) |
|||
|
|||
return { days, hours, minutes } |
|||
} |
|||
|
|||
@ -1,122 +1,124 @@ |
|||
<script setup lang="ts"> |
|||
import { debounce } from 'feng-uniapp-exploit/utils/index' |
|||
import { mobileAuth } from '@/api/login' |
|||
import { debounce } from 'feng-uniapp-exploit/utils/index' |
|||
import { mobileAuth } from '@/api/login' |
|||
|
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const loginCode = ref('') |
|||
const loginCode = ref('') |
|||
|
|||
// 获取微信登录 code |
|||
const getLoginCode = async () : Promise<string> => { |
|||
try { |
|||
const res = await uni.login({ provider: 'weixin' }) |
|||
loginCode.value = res.code |
|||
return res.code |
|||
} catch (error) { |
|||
console.error('获取登录code失败:', error) |
|||
throw error |
|||
} |
|||
} |
|||
// 获取微信登录 code |
|||
const getLoginCode = async (): Promise<string> => { |
|||
try { |
|||
const res = await uni.login({ provider: 'weixin' }) |
|||
loginCode.value = res.code |
|||
return res.code |
|||
} catch (error) { |
|||
console.error('获取登录code失败:', error) |
|||
throw error |
|||
} |
|||
} |
|||
|
|||
// 处理获取手机号 |
|||
// 处理获取手机号 |
|||
|
|||
interface phoneEvent { |
|||
detail : { errMsg : string; iv : string; encryptedData : string; code : string } |
|||
} |
|||
const onGetPhoneNumber = debounce(async (e : phoneEvent) => { |
|||
if (e.detail.errMsg.includes('fail')) { |
|||
uni.showToast({ title: '用户拒绝授权', icon: 'none' }) |
|||
return |
|||
} |
|||
try { |
|||
if (!loginCode.value) { |
|||
await getLoginCode() |
|||
} |
|||
if (!userStore.openId) { |
|||
await userStore.getopenid({ code: loginCode.value }) |
|||
} |
|||
interface phoneEvent { |
|||
detail: { errMsg: string; iv: string; encryptedData: string; code: string } |
|||
} |
|||
const onGetPhoneNumber = debounce(async (e: phoneEvent) => { |
|||
if (e.detail.errMsg.includes('fail')) { |
|||
uni.showToast({ title: '用户拒绝授权', icon: 'none' }) |
|||
return |
|||
} |
|||
try { |
|||
if (!loginCode.value) { |
|||
await getLoginCode() |
|||
} |
|||
if (!userStore.openId) { |
|||
await userStore.getopenid({ code: loginCode.value }) |
|||
} |
|||
|
|||
mobileAuth({ openid: userStore.openId, code: e.detail.code }) |
|||
.then((res : any) => { |
|||
const { data: moblie } = res as { data : string } |
|||
userStore.mobile = moblie |
|||
uni.setStorageSync('access_token', res.data.token) |
|||
userStore.getUserInfo() |
|||
onLoginSuccess() |
|||
}) |
|||
.catch(() => { |
|||
uni.showToast({ title: '登录失败!', icon: 'none' }) |
|||
}) |
|||
} catch (error) { |
|||
uni.showToast({ title: '登录失败', icon: 'none' }) |
|||
} |
|||
}) |
|||
mobileAuth({ openid: userStore.openId, code: e.detail.code }) |
|||
.then((res: any) => { |
|||
const { data: moblie } = res as { data: string } |
|||
userStore.mobile = moblie |
|||
uni.setStorageSync('access_token', res.data.token) |
|||
userStore.getUserInfo() |
|||
onLoginSuccess() |
|||
}) |
|||
.catch(() => { |
|||
uni.showToast({ title: '登录失败!', icon: 'none' }) |
|||
}) |
|||
} catch (error) { |
|||
uni.showToast({ title: '登录失败', icon: 'none' }) |
|||
} |
|||
}) |
|||
|
|||
const onLoginSuccess = () => { |
|||
uni.showToast({ |
|||
title: '登录成功', |
|||
icon: 'none', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
userStore.showtoast = false |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}) |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} |
|||
const onLoginSuccess = () => { |
|||
uni.showToast({ |
|||
title: '登录成功', |
|||
icon: 'none', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
userStore.showtoast = false |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}) |
|||
}, 1000) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const goback = ()=> { |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}) |
|||
} |
|||
onLoad((options : any) => { |
|||
const goback = () => { |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}) |
|||
} |
|||
onLoad((options: any) => {}) |
|||
|
|||
}) |
|||
|
|||
onShow(() => { |
|||
// if (userStore.mobile) { |
|||
// onLoginSuccess() |
|||
// } |
|||
}) |
|||
onShow(() => { |
|||
// if (userStore.mobile) { |
|||
// onLoginSuccess() |
|||
// } |
|||
}) |
|||
</script> |
|||
<template> |
|||
<view class="login"> |
|||
<!-- <image class="logo-img" src="@/static/logo.png" mode="widthFix" /> --> |
|||
<text>惠企帮欢迎您</text> |
|||
<view class="btn_box"> |
|||
<u-button @getphonenumber="onGetPhoneNumber" text="手机号登录" icon-color="#fff" open-type="getPhoneNumber" |
|||
color="linear-gradient(270deg, rgba(232, 123, 7, 1) 0%, rgba(247, 205, 77, 1) 100%)" shape="circle" /> |
|||
<view class="backindex" @click="goback"> |
|||
返回主页 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="login"> |
|||
<!-- <image class="logo-img" src="@/static/logo.png" mode="widthFix" /> --> |
|||
<text>惠企帮欢迎您</text> |
|||
<view class="btn_box"> |
|||
<u-button |
|||
@getphonenumber="onGetPhoneNumber" |
|||
text="手机号登录" |
|||
icon-color="#fff" |
|||
open-type="getPhoneNumber" |
|||
color="linear-gradient(270deg, rgba(232, 123, 7, 1) 0%, rgba(247, 205, 77, 1) 100%)" |
|||
shape="circle" |
|||
/> |
|||
<view class="backindex" @click="goback">返回主页</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
.login { |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
position: relative; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
padding: 500rpx 30rpx 0; |
|||
background-color: #fff; |
|||
.login { |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
position: relative; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
padding: 500rpx 30rpx 0; |
|||
background-color: #fff; |
|||
|
|||
.logo-img { |
|||
width: 220rpx; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
} |
|||
.btn_box { |
|||
margin-top: 60rpx; |
|||
} |
|||
.backindex { |
|||
margin-top: 20px; |
|||
} |
|||
.logo-img { |
|||
width: 220rpx; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
} |
|||
.btn_box { |
|||
margin-top: 60rpx; |
|||
} |
|||
.backindex { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -1,250 +1,267 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<u-navbar title="会员中心" placeholder="true" bgColor="#F1F3F9" leftIcon="man-add-fill" leftIconSize="24" |
|||
leftText="申请入会" @leftClick="leftClick"> |
|||
</u-navbar> |
|||
<u-search @search="search" @clickIcon="clickIcon" @clear="clear" shape="square" placeholder="请输入搜索内容" |
|||
placeholderColor="#A9D4FF" v-model="keyword" searchIcon="/static/img/search.png" searchIconSize="14" |
|||
:showAction="false" height="40" margin="40rpx 24rpx 24rpx 24rpx" bgColor="#FFFFFF"></u-search> |
|||
|
|||
<u-tabs :list="filterTabs" :activeStyle="{color: '#0C092A',fontsize: '30rpx'}" keyName="title" |
|||
@click="handleTabSelect"></u-tabs> |
|||
<view class="main"> |
|||
<scroll-view scroll-y="auto" class="hyonne" @scrolltolower="onloadmore"> |
|||
<view class="hyCard" v-for="(item,index) in hyList" :key="index" @click="godetail(item.id)"> |
|||
<view class="left"> |
|||
<u-avatar :src="baseurl+item.head_pic" size="64"></u-avatar> |
|||
<view class="textpart"> |
|||
<view class="namepart"> |
|||
<text class="name">{{item.name}}</text> |
|||
<view class="biaoq" |
|||
:style="{background: `linear-gradient(0deg, ${item.member_tag_color} 0%, #dcdcdc70 100%)`}"> |
|||
{{item.member_tag_title}} |
|||
</view> |
|||
</view> |
|||
<text class="company">{{item.enterprise?item.enterprise[0].title:'无'}}</text> |
|||
</view> |
|||
</view> |
|||
<image style="width: 48rpx;height: 48rpx;" src="@/static/img/Icon.png" mode=""></image> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view class="container"> |
|||
<u-navbar |
|||
title="会员中心" |
|||
placeholder="true" |
|||
bg-color="#F1F3F9" |
|||
left-icon="man-add-fill" |
|||
left-icon-size="24" |
|||
left-text="申请入会" |
|||
@leftClick="leftClick" |
|||
></u-navbar> |
|||
<u-search |
|||
@search="search" |
|||
@clickIcon="clickIcon" |
|||
@clear="clear" |
|||
shape="square" |
|||
placeholder="请输入搜索内容" |
|||
placeholder-color="#A9D4FF" |
|||
v-model="keyword" |
|||
search-icon="/static/img/search.png" |
|||
search-icon-size="14" |
|||
:show-action="false" |
|||
height="40" |
|||
margin="40rpx 24rpx 24rpx 24rpx" |
|||
bg-color="#FFFFFF" |
|||
></u-search> |
|||
|
|||
<u-tabs |
|||
:list="filterTabs" |
|||
:current="current" |
|||
:active-style="{ color: '#0C092A', fontsize: '30rpx' }" |
|||
key-name="title" |
|||
@click="handleTabSelect" |
|||
></u-tabs> |
|||
<view class="main"> |
|||
<scroll-view scroll-y="auto" class="hyonne" @scrolltolower="onloadmore"> |
|||
<view class="hyCard" v-for="(item, index) in hyList" :key="index" @click="godetail(item.id)"> |
|||
<view class="left"> |
|||
<u-avatar :src="baseurl + item.head_pic" size="64"></u-avatar> |
|||
<view class="textpart"> |
|||
<view class="namepart"> |
|||
<text class="name">{{ item.name }}</text> |
|||
<view class="biaoq" :style="{ background: `linear-gradient(0deg, ${item.member_tag_color} 0%, #dcdcdc70 100%)` }"> |
|||
{{ item.member_tag_title }} |
|||
</view> |
|||
</view> |
|||
<text class="company">{{ item.enterprise ? item.enterprise[0].title : '无' }}</text> |
|||
</view> |
|||
</view> |
|||
<image style="width: 48rpx; height: 48rpx" src="@/static/img/Icon.png" mode=""></image> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import tabsComm from '../index/tabsComm.vue' |
|||
import { |
|||
memberTagList, |
|||
memberCenter |
|||
} from '@/api/memberCenter' |
|||
|
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
|
|||
// 响应式数据 |
|||
const keyword = ref(''); |
|||
const page = ref(1) |
|||
const pagesize = ref(6) |
|||
|
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getMemberCenter(currentTab.value.id, keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getMemberCenter(currentTab.value.id, keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getMemberCenter(currentTab.value.id, keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const hyList = ref([]) |
|||
|
|||
const currentTab = ref('全部'); |
|||
|
|||
// 选项卡配置(第一个必须是"全部") |
|||
const filterTabs = ref([{ |
|||
id: 0, |
|||
title: '全部' |
|||
}]); |
|||
|
|||
const leftClick = () => { |
|||
if (uni.getStorageSync('access_token') === '') { |
|||
uni.showToast({ |
|||
title: '请登录', |
|||
icon: 'fail' |
|||
}) |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/memberCenter/inpart' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 处理选项卡选择 |
|||
const handleTabSelect = async (tab) => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
currentTab.value = tab; |
|||
// 这里可以添加数据加载逻辑 |
|||
await getMemberCenter(tab.id, '', page.value, pagesize.value) |
|||
}; |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mediaDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const getbqlist = async () => { |
|||
filterTabs.value = [{ |
|||
id: 0, |
|||
title: '全部' |
|||
}] |
|||
await memberTagList().then((res) => { |
|||
filterTabs.value = [...filterTabs.value, ...res.data] |
|||
console.log(res.data); |
|||
}) |
|||
} |
|||
|
|||
const getMemberCenter = async (id, name, page, limit) => { |
|||
let params = { |
|||
'member_tag_id': id, |
|||
'name': name, |
|||
'page': page, |
|||
'limit': limit |
|||
} |
|||
await memberCenter(params).then((res) => { |
|||
hyList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
'member_tag_id': currentTab.value.id, |
|||
'name': keyword.value, |
|||
'page': page.value, |
|||
'limit': pagesize.value |
|||
} |
|||
await memberCenter(params).then((res) => { |
|||
hyList.value = [...hyList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
onShow(async () => { |
|||
await getbqlist() |
|||
await getMemberCenter('', '', page.value, pagesize.value) |
|||
}) |
|||
import { ref } from 'vue' |
|||
import tabsComm from '../index/tabsComm.vue' |
|||
import { memberTagList, memberCenter } from '@/api/memberCenter' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/') |
|||
|
|||
// 响应式数据 |
|||
const keyword = ref('') |
|||
const page = ref(1) |
|||
const pagesize = ref(6) |
|||
const current = ref(0) |
|||
|
|||
const search = async (val) => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getMemberCenter(currentTab.value, keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clickIcon = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getMemberCenter(currentTab.value, keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const clear = async () => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
await getMemberCenter(currentTab.value, keyword.value, page.value, pagesize.value) |
|||
} |
|||
|
|||
const hyList = ref([]) |
|||
|
|||
const currentTab = ref('0') |
|||
|
|||
// 选项卡配置(第一个必须是"全部") |
|||
const filterTabs = ref([ |
|||
{ |
|||
id: 0, |
|||
title: '全部' |
|||
} |
|||
]) |
|||
|
|||
const leftClick = () => { |
|||
if (uni.getStorageSync('access_token') === '') { |
|||
uni.showToast({ |
|||
title: '请登录', |
|||
icon: 'fail' |
|||
}) |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/memberCenter/inpart' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 处理选项卡选择 |
|||
const handleTabSelect = async (tab) => { |
|||
page.value = 1 |
|||
pagesize.value = 6 |
|||
currentTab.value = tab.id |
|||
// 这里可以添加数据加载逻辑 |
|||
await getMemberCenter(tab.id, '', page.value, pagesize.value) |
|||
} |
|||
|
|||
const godetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/shoppage/mediaDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
const getbqlist = async () => { |
|||
filterTabs.value = [ |
|||
{ |
|||
id: 0, |
|||
title: '全部' |
|||
} |
|||
] |
|||
await memberTagList().then((res) => { |
|||
filterTabs.value = [...filterTabs.value, ...res.data] |
|||
console.log(res.data) |
|||
}) |
|||
} |
|||
|
|||
const getMemberCenter = async (id, name, page, limit) => { |
|||
let params = { |
|||
member_tag_id: id, |
|||
name: name, |
|||
page: page, |
|||
limit: limit |
|||
} |
|||
await memberCenter(params).then((res) => { |
|||
hyList.value = res.data.data |
|||
}) |
|||
} |
|||
|
|||
const onloadmore = async () => { |
|||
page.value++ |
|||
let params = { |
|||
member_tag_id: currentTab.value.id, |
|||
name: keyword.value, |
|||
page: page.value, |
|||
limit: pagesize.value |
|||
} |
|||
await memberCenter(params).then((res) => { |
|||
hyList.value = [...hyList.value, ...res.data.data] |
|||
}) |
|||
} |
|||
|
|||
onLoad(async () => { |
|||
await getbqlist() |
|||
await getMemberCenter('', '', page.value, pagesize.value) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgba(129, 179, 222, 0.5) 88%); |
|||
height: 100vh; |
|||
width: 100%; |
|||
overflow-y: auto; |
|||
|
|||
.main { |
|||
width: 100%; |
|||
display: grid; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: hidden; |
|||
|
|||
.hyCard { |
|||
margin-top: 24rpx; |
|||
width: 100%; |
|||
height: 160rpx; |
|||
border-radius: 24rpx; |
|||
background: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.textpart { |
|||
margin-left: 32rpx; |
|||
display: grid; |
|||
justify-content: left; |
|||
|
|||
.namepart { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 150%; |
|||
letter-spacing: normal; |
|||
/* 外部/Neutral/Black */ |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.biaoq { |
|||
padding: 10rpx; |
|||
height: 40.5rpx; |
|||
border-radius: 0rpx 4rpx 20rpx 0rpx; |
|||
margin-left: 16rpx; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
text-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
} |
|||
|
|||
.company { |
|||
margin-top: 12rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 150%; |
|||
letter-spacing: normal; |
|||
/* 外部/Neutral/Grey 2 */ |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.u-icon__icon) { |
|||
color: #007FFF !important; |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
.container { |
|||
background: linear-gradient(0deg, #f1f3f9 72%, rgba(129, 179, 222, 0.5) 88%); |
|||
height: 100vh; |
|||
width: 100%; |
|||
overflow-y: auto; |
|||
|
|||
.main { |
|||
width: 100%; |
|||
display: grid; |
|||
padding: 0 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: hidden; |
|||
|
|||
.hyCard { |
|||
margin-top: 24rpx; |
|||
width: 100%; |
|||
height: 160rpx; |
|||
border-radius: 24rpx; |
|||
background: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
box-sizing: border-box; |
|||
padding: 0 20rpx; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.textpart { |
|||
margin-left: 32rpx; |
|||
display: grid; |
|||
justify-content: left; |
|||
|
|||
.namepart { |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.name { |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 150%; |
|||
letter-spacing: normal; |
|||
/* 外部/Neutral/Black */ |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.biaoq { |
|||
padding: 10rpx; |
|||
height: 40.5rpx; |
|||
border-radius: 0rpx 4rpx 20rpx 0rpx; |
|||
margin-left: 16rpx; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
text-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
} |
|||
|
|||
.company { |
|||
margin-top: 12rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 300; |
|||
line-height: 150%; |
|||
letter-spacing: normal; |
|||
/* 外部/Neutral/Grey 2 */ |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.u-icon__icon) { |
|||
color: #007fff !important; |
|||
} |
|||
} |
|||
|
|||
.hdzq { |
|||
width: 182rpx; |
|||
height: 80rpx; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 70%; |
|||
margin-right: -14rpx; |
|||
} |
|||
</style> |
|||
@ -1,93 +1,88 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<text class="texttitle">内蒙古数心科技有限公司</text> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">公司简介</text> |
|||
</view> |
|||
<image style="width: 100%;height: 400rpx;margin-top: 40rpx;" src="@/static/img/Bitmap.png" mode=""></image> |
|||
<text class="message">说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</text> |
|||
</view> |
|||
<view class="container"> |
|||
<text class="texttitle">内蒙古数心科技有限公司</text> |
|||
<view class="titlepart"> |
|||
<view class="icon"></view> |
|||
<text class="title">公司简介</text> |
|||
</view> |
|||
<image style="width: 100%; height: 400rpx; margin-top: 40rpx" src="@/static/img/Bitmap.png" mode=""></image> |
|||
<text class="message"> |
|||
说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明 |
|||
</text> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
|
|||
|
|||
onLoad(() => { |
|||
|
|||
}) |
|||
onLoad(() => {}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 40rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon{ |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007FFF 0%, #99CCFF 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072FF; |
|||
} |
|||
} |
|||
.texttitle { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3D3D3D; |
|||
} |
|||
} |
|||
} |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 40rpx 40rpx 0 40rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
margin-top: 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
.icon { |
|||
width: 12rpx; |
|||
height: 32rpx; |
|||
border-radius: 0rpx 32rpx 32rpx 0rpx; |
|||
/* 蓝色渐变 */ |
|||
background: linear-gradient(0deg, #007fff 0%, #99ccff 100%); |
|||
} |
|||
.title { |
|||
margin-left: 18rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0072ff; |
|||
} |
|||
} |
|||
.texttitle { |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: normal; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
.message { |
|||
margin-top: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
.people { |
|||
margin-top: 28rpx; |
|||
display: flex; |
|||
.text { |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,86 +1,72 @@ |
|||
<template> |
|||
<view class="classbox"> |
|||
<view class="classone" v-for="(item,index) in classList" :key="index"> |
|||
<text class="title">{{item.title}}</text> |
|||
<!-- <text class="text">关联时间:{{item.time}}</text> --> |
|||
</view> |
|||
</view> |
|||
<view class="classbox"> |
|||
<view class="classone" v-for="(item, index) in classList" :key="index"> |
|||
<text class="title">{{ item.title }}</text> |
|||
<!-- <text class="text">关联时间:{{item.time}}</text> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
onShow |
|||
} from '@dcloudio/uni-app'; |
|||
import { ref } from 'vue' |
|||
import { onShow } from '@dcloudio/uni-app' |
|||
|
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const classList = ref([{ |
|||
id: 1, |
|||
title: '内蒙古数心科技有限公司', |
|||
time: '2025-04-17' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
title: '内蒙古数心科技有限公司', |
|||
time: '2025-04-17' |
|||
}, |
|||
]) |
|||
const classList = ref([]) |
|||
|
|||
const goDetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/associatedDetail?id=' + id |
|||
}) |
|||
} |
|||
const goDetail = (id) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/associatedDetail?id=' + id |
|||
}) |
|||
} |
|||
|
|||
onShow(() => { |
|||
classList.value = userStore.userInfo.enterprise |
|||
}) |
|||
onShow(() => { |
|||
classList.value = userStore.userInfo.enterprise |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.classbox { |
|||
height: 100vh; |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgb(202 202 204 / 20%) 88%); |
|||
padding: 6rpx 24rpx 40rpx 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
.classbox { |
|||
height: 100vh; |
|||
background: linear-gradient(0deg, #f1f3f9 72%, rgb(202 202 204 / 20%) 88%); |
|||
padding: 6rpx 24rpx 40rpx 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
|
|||
.classone { |
|||
width: 100%; |
|||
height: 144rpx; |
|||
border-radius: 20rpx; |
|||
background: #FFFFFF; |
|||
display: grid; |
|||
align-items: center; |
|||
padding: 32rpx 28rpx; |
|||
margin-top: 30rpx; |
|||
.classone { |
|||
width: 100%; |
|||
height: 144rpx; |
|||
border-radius: 20rpx; |
|||
background: #ffffff; |
|||
display: grid; |
|||
align-items: center; |
|||
padding: 32rpx 28rpx; |
|||
margin-top: 30rpx; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.text { |
|||
margin-top: 24rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
.text { |
|||
margin-top: 24rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,284 +1,295 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="cardbox"> |
|||
<view v-for="(group, index) in inputGroups" :key="index" class="input-group"> |
|||
<view class="inputs" @click="beforeRead(index)"> |
|||
公司性质 |
|||
<input class="inputclass" placeholder-class="inputplacla" :value="group.type==1 ? '其他(自由职业者等)' : (group.type===2 ? '个体工商户' : (group.type===3 ? '民营企业' : '') )" |
|||
placeholder="民营企业、个体工商户、其它(自由职业者等)" disabled disabledColor="#ffffff" @tap="qyshow = true" /> |
|||
<u-action-sheet :actions="qylist" title="请选择关联企业类型" :show="qyshow" @select="qyClick" |
|||
@close="qyshow = false"></u-action-sheet> |
|||
公司名称 |
|||
<input class="inputclass" placeholder-class="inputplacla" v-model="group.title" |
|||
placeholder="请输入真实公司名称" /> |
|||
营业执照 |
|||
<u-upload class="uploadbox" @afterRead="afterRead" :maxCount="1" |
|||
:imageMode="'heightFix'" :width="auto" :height="144"> |
|||
<view class="yyzz" v-if="group.license === ''"> |
|||
<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传营业执照 |
|||
</view> |
|||
<image v-else @click="beforeRead(index)" style="width: 100%;height: 288rpx;margin-top: 12rpx;" :src="baseurl+ '/' + group.license" mode="scaleToFill"></image> |
|||
</u-upload> |
|||
</view> |
|||
<view v-if="index > 0" class="remove-btn" @click="removeGroup(index)">-</view> |
|||
</view> |
|||
<button @click="addGroup" class="add-btn">+ 添加一组</button> |
|||
</view> |
|||
</view> |
|||
<view class="buts"> |
|||
<view class="but" @click="submit"> |
|||
确认提交 |
|||
</view> |
|||
</view> |
|||
<view class="container"> |
|||
<view class="cardbox"> |
|||
<view v-for="(group, index) in inputGroups" :key="index" class="input-group"> |
|||
<view class="inputs" @click="beforeRead(index)"> |
|||
公司性质 |
|||
<input |
|||
class="inputclass" |
|||
placeholder-class="inputplacla" |
|||
:value="group.type == 1 ? '其他(自由职业者等)' : group.type === 2 ? '个体工商户' : group.type === 3 ? '民营企业' : ''" |
|||
placeholder="民营企业、个体工商户、其它(自由职业者等)" |
|||
disabled |
|||
disabledColor="#ffffff" |
|||
@tap="qyshow = true" |
|||
/> |
|||
<u-action-sheet |
|||
:actions="qylist" |
|||
title="请选择关联企业类型" |
|||
:show="qyshow" |
|||
@select="qyClick" |
|||
@close="qyshow = false" |
|||
></u-action-sheet> |
|||
公司名称 |
|||
<input class="inputclass" placeholder-class="inputplacla" v-model="group.title" placeholder="请输入真实公司名称" /> |
|||
营业执照 |
|||
<u-upload class="uploadbox" @afterRead="afterRead" :max-count="1" :image-mode="'heightFix'" :width="auto" :height="144"> |
|||
<view class="yyzz" v-if="group.license === ''"> |
|||
<image style="width: 40rpx; height: 40rpx" src="@/static/img/yyzz.png" mode=""></image> |
|||
上传营业执照 |
|||
</view> |
|||
<image |
|||
v-else |
|||
@click="beforeRead(index)" |
|||
style="width: 100%; height: 288rpx; margin-top: 12rpx" |
|||
:src="baseurl + '/' + group.license" |
|||
mode="scaleToFill" |
|||
></image> |
|||
</u-upload> |
|||
</view> |
|||
<view v-if="index > 0" class="remove-btn" @click="removeGroup(index)">-</view> |
|||
</view> |
|||
<button @click="addGroup" class="add-btn">+ 添加一组</button> |
|||
</view> |
|||
</view> |
|||
<view class="buts"> |
|||
<view class="but" @click="submit">确认提交</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue' |
|||
import { |
|||
modifyField1, |
|||
} from '@/api/mine' |
|||
import { ref } from 'vue' |
|||
import { modifyField1 } from '@/api/mine' |
|||
|
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
|
|||
const inputGroups = ref([{ |
|||
type: '', |
|||
title: '', |
|||
license: '' |
|||
}]) |
|||
const inputGroups = ref([ |
|||
{ |
|||
type: '', |
|||
title: '', |
|||
license: '' |
|||
} |
|||
]) |
|||
|
|||
const addGroup = () => { |
|||
inputGroups.value.push({ |
|||
type: '', |
|||
title: '', |
|||
license: '' |
|||
}) |
|||
} |
|||
const addGroup = () => { |
|||
inputGroups.value.push({ |
|||
type: '', |
|||
title: '', |
|||
license: '' |
|||
}) |
|||
} |
|||
|
|||
const qyshow = ref(false) |
|||
const qylist = ref([{ |
|||
id: 1, |
|||
name: '其他(自由职业者等)', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '个体工商户', |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '民营企业', |
|||
} |
|||
]); |
|||
const qyClick = async (val) => { |
|||
inputGroups.value[upclickindex.value].type = val.id |
|||
} |
|||
const qyshow = ref(false) |
|||
const qylist = ref([ |
|||
{ |
|||
id: 1, |
|||
name: '其他(自由职业者等)' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '个体工商户' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '民营企业' |
|||
} |
|||
]) |
|||
const qyClick = async (val) => { |
|||
inputGroups.value[upclickindex.value].type = val.id |
|||
} |
|||
|
|||
const removeGroup = (index) => { |
|||
inputGroups.value.splice(index, 1) |
|||
} |
|||
const removeGroup = (index) => { |
|||
inputGroups.value.splice(index, 1) |
|||
} |
|||
|
|||
const upclickindex = ref(0) |
|||
const beforeRead = (index) =>{ |
|||
upclickindex.value = index |
|||
} |
|||
const upclickindex = ref(0) |
|||
const beforeRead = (index) => { |
|||
upclickindex.value = index |
|||
} |
|||
|
|||
const afterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
'token': uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
inputGroups.value[upclickindex.value].license = '' |
|||
if (JSON.parse(val.data).data.url) { |
|||
inputGroups.value[upclickindex.value].license = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res); |
|||
} |
|||
}) |
|||
} |
|||
const submit = async () => { |
|||
let data = [] |
|||
await inputGroups.value.forEach(async(obj) => { |
|||
if(obj.type == ''||obj.title == ''||obj.license == '') { |
|||
uni.showToast({ |
|||
title: '请填写完整', |
|||
icon: 'fail' |
|||
}) |
|||
}else { |
|||
data.push(obj) |
|||
} |
|||
}) |
|||
console.log(data); |
|||
if(data.length !== 0) { |
|||
await modifyField1('enterprise',{"value":`${JSON.stringify(data)}`}).then((res) => { |
|||
if (res.code === 1) { |
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: '提交成功!', |
|||
icon: 'success' |
|||
}) |
|||
uni.switchTab({ |
|||
url: '/pages/mine/index' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '提交失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
|
|||
} |
|||
} |
|||
const afterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
token: uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
inputGroups.value[upclickindex.value].license = '' |
|||
if (JSON.parse(val.data).data.url) { |
|||
inputGroups.value[upclickindex.value].license = JSON.parse(val.data).data.url |
|||
} |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res) |
|||
} |
|||
}) |
|||
} |
|||
const submit = async () => { |
|||
let data = [] |
|||
await inputGroups.value.forEach(async (obj) => { |
|||
if (obj.type == '' || obj.title == '' || obj.license == '') { |
|||
uni.showToast({ |
|||
title: '请填写完整', |
|||
icon: 'fail' |
|||
}) |
|||
} else { |
|||
data.push(obj) |
|||
} |
|||
}) |
|||
console.log(data) |
|||
if (data.length !== 0) { |
|||
await modifyField1('enterprise', { value: `${JSON.stringify(data)}` }).then((res) => { |
|||
if (res.code === 1) { |
|||
setTimeout(() => { |
|||
uni.showToast({ |
|||
title: '提交成功!', |
|||
icon: 'success' |
|||
}) |
|||
uni.switchTab({ |
|||
url: '/pages/mine/index' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '提交失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
height: calc(100vh - 168rpx); |
|||
width: 100%; |
|||
background: #F1F3F9; |
|||
overflow-y: auto; |
|||
.container { |
|||
height: calc(100vh - 168rpx); |
|||
width: 100%; |
|||
background: #f1f3f9; |
|||
overflow-y: auto; |
|||
|
|||
.cardbox { |
|||
box-sizing: border-box; |
|||
} |
|||
.cardbox { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.input-group { |
|||
padding: 40rpx; |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 20rpx; |
|||
background-color: #e2e2e2; |
|||
} |
|||
.input-group { |
|||
padding: 40rpx; |
|||
margin-top: 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 20rpx; |
|||
background-color: #e2e2e2; |
|||
} |
|||
|
|||
.inputs { |
|||
flex: 9; |
|||
} |
|||
.inputs { |
|||
flex: 9; |
|||
} |
|||
|
|||
input { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
border: 2rpx solid #ddd; |
|||
padding: 0 20rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
input { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
border: 2rpx solid #ddd; |
|||
padding: 0 20rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
.remove-btn, |
|||
.add-btn { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #f0f0f0; |
|||
border-radius: 8rpx; |
|||
} |
|||
.remove-btn, |
|||
.add-btn { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #f0f0f0; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.remove-btn { |
|||
margin-left: 20rpx; |
|||
border-radius: 50%; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
color: #ff0000; |
|||
border: 2rpx solid #ff0000; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: center; |
|||
} |
|||
.remove-btn { |
|||
margin-left: 20rpx; |
|||
border-radius: 50%; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
color: #ff0000; |
|||
border: 2rpx solid #ff0000; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.add-btn { |
|||
width: auto; |
|||
padding: 0 30rpx; |
|||
background: #4CAF50; |
|||
color: white; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
} |
|||
.add-btn { |
|||
width: auto; |
|||
padding: 0 30rpx; |
|||
background: #4caf50; |
|||
color: white; |
|||
margin-bottom: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.buts { |
|||
height: 168rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: #FFFFFF; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.buts { |
|||
height: 168rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: #ffffff; |
|||
/* 标签栏投影 */ |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.but { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
.but { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007fff 0%, #99ccff 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 350; |
|||
line-height: 32rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.inputclass { |
|||
margin-top: 12rpx; |
|||
margin-bottom: 36rpx; |
|||
margin-right: 0 !important; |
|||
height: 100rpx !important; |
|||
border-radius: 10rpx; |
|||
background: #FFFFFF; |
|||
} |
|||
.inputclass { |
|||
margin-top: 12rpx; |
|||
margin-bottom: 36rpx; |
|||
margin-right: 0 !important; |
|||
height: 100rpx !important; |
|||
border-radius: 10rpx; |
|||
background: #ffffff; |
|||
} |
|||
|
|||
:deep(.inputplacla) { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 32.76rpx; |
|||
letter-spacing: normal; |
|||
color: #D3D3D3; |
|||
} |
|||
:deep(.inputplacla) { |
|||
font-family: Source Han Sans; |
|||
font-size: 24rpx; |
|||
font-weight: 350; |
|||
line-height: 32.76rpx; |
|||
letter-spacing: normal; |
|||
color: #d3d3d3; |
|||
} |
|||
|
|||
.yyzz { |
|||
margin-top: 12rpx; |
|||
width: 100%; |
|||
height: 288rpx; |
|||
border-radius: 16rpx; |
|||
background: #FFFFFF; |
|||
display: grid; |
|||
align-content: center; |
|||
justify-items: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 70rpx; |
|||
letter-spacing: normal; |
|||
color: #CCCCCC; |
|||
} |
|||
.yyzz { |
|||
margin-top: 12rpx; |
|||
width: 100%; |
|||
height: 288rpx; |
|||
border-radius: 16rpx; |
|||
background: #ffffff; |
|||
display: grid; |
|||
align-content: center; |
|||
justify-items: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 30rpx; |
|||
font-weight: 350; |
|||
line-height: 70rpx; |
|||
letter-spacing: normal; |
|||
color: #cccccc; |
|||
} |
|||
|
|||
:deep(.u-upload) { |
|||
.u-upload__wrap { |
|||
view { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
:deep(.u-upload) { |
|||
.u-upload__wrap { |
|||
view { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,189 +1,188 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<image style="width: 100%;" src="@/static/img/ztback.png" mode="widthFix"></image> |
|||
<view class="main"> |
|||
<view class="head"> |
|||
<view class="left"> |
|||
<u-avatar v-if="userStore.userInfo.moblie" |
|||
:src="url + '/' + userStore.userInfo.head_pic" |
|||
:size="72"></u-avatar> |
|||
<img v-else style="width: 72px;height: 72px;border-radius: 50%;" src="@/static/img/qdl.png" alt="" /> |
|||
<text class="name">{{userStore.userInfo.name}}</text> |
|||
</view> |
|||
<image v-if="userStore.userInfo.moblie" style="width: 48rpx;height: 48rpx;" src="@/static/img/setting.png" mode="" |
|||
@click="goeditinfo('')"></image> |
|||
</view> |
|||
<view class="editlist"> |
|||
<view class="editone" @click="goeditinfo('关联企业')"> |
|||
<view class="left"> |
|||
<image style="width: 74rpx;height: 74rpx;" src="@/static/img/glqy.png" mode=""></image> |
|||
<text class="txt">关联企业</text> |
|||
</view> |
|||
<image style="width: 14.14rpx;height: 14.14rpx;" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
<view class="editone" @click="goeditinfo('我的申请')"> |
|||
<view class="left"> |
|||
<image style="width: 74rpx;height: 74rpx;" src="@/static/img/wdsq.png" mode=""></image> |
|||
<text class="txt">我的申请</text> |
|||
</view> |
|||
<image style="width: 14.14rpx;height: 14.14rpx;" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
<view class="editone" @click="goeditinfo('我的课程')"> |
|||
<view class="left"> |
|||
<image style="width: 74rpx;height: 74rpx;" src="@/static/img/wdkc.png" mode=""></image> |
|||
<text class="txt">我的课程</text> |
|||
</view> |
|||
<image style="width: 14.14rpx;height: 14.14rpx;" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="buts"> |
|||
<view class="but" @click="outLogin"> |
|||
{{userStore.userInfo.moblie?'退出登录':'登录'}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="container"> |
|||
<image style="width: 100%" src="@/static/img/ztback.png" mode="widthFix"></image> |
|||
<view class="main"> |
|||
<view class="head"> |
|||
<view class="left"> |
|||
<u-avatar v-if="userStore.userInfo.moblie" :src="url + '/' + userStore.userInfo.head_pic" :size="72"></u-avatar> |
|||
<img v-else style="width: 72px; height: 72px; border-radius: 50%" src="@/static/img/qdl.png" alt="" /> |
|||
<text class="name">{{ userStore.userInfo.name }}</text> |
|||
</view> |
|||
<image |
|||
v-if="userStore.userInfo.moblie" |
|||
style="width: 48rpx; height: 48rpx" |
|||
src="@/static/img/setting.png" |
|||
mode="" |
|||
@click="goeditinfo('')" |
|||
></image> |
|||
</view> |
|||
<view class="editlist"> |
|||
<view class="editone" @click="goeditinfo('关联企业')"> |
|||
<view class="left"> |
|||
<image style="width: 74rpx; height: 74rpx" src="@/static/img/glqy.png" mode=""></image> |
|||
<text class="txt">关联企业</text> |
|||
</view> |
|||
<image style="width: 14.14rpx; height: 14.14rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
<view class="editone" @click="goeditinfo('我的申请')"> |
|||
<view class="left"> |
|||
<image style="width: 74rpx; height: 74rpx" src="@/static/img/wdsq.png" mode=""></image> |
|||
<text class="txt">我的申请</text> |
|||
</view> |
|||
<image style="width: 14.14rpx; height: 14.14rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
<view class="editone" @click="goeditinfo('我的课程')"> |
|||
<view class="left"> |
|||
<image style="width: 74rpx; height: 74rpx" src="@/static/img/wdkc.png" mode=""></image> |
|||
<text class="txt">我的课程</text> |
|||
</view> |
|||
<image style="width: 14.14rpx; height: 14.14rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="buts"> |
|||
<view class="but" @click="outLogin"> |
|||
{{ userStore.userInfo.moblie ? '退出登录' : '登录' }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app'; |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const url = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
const url = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
|
|||
const goeditinfo = (val) => { |
|||
if (val === '关联企业') { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/associatedEnterprise' |
|||
}) |
|||
} else if (val === '我的申请') { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/myApplication' |
|||
}) |
|||
} else if (val === '我的课程') { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/myCourses' |
|||
}) |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/porsonalinfo' |
|||
}) |
|||
} |
|||
} |
|||
const goeditinfo = (val) => { |
|||
if (val === '关联企业') { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/associatedEnterprise' |
|||
}) |
|||
} else if (val === '我的申请') { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/myApplication' |
|||
}) |
|||
} else if (val === '我的课程') { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/myCourses' |
|||
}) |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/porsonalinfo' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const outLogin = () => { |
|||
userStore.logOut() |
|||
} |
|||
onShow(() => { |
|||
// if (uni.getStorageSync('access_token') === '') { |
|||
// uni.navigateTo({ |
|||
// url: '/pages/login/login' |
|||
// }) |
|||
// } else { |
|||
userStore.getUserInfo() |
|||
// } |
|||
}) |
|||
const outLogin = () => { |
|||
userStore.logOut() |
|||
} |
|||
onShow(() => { |
|||
// if (uni.getStorageSync('access_token') === '') { |
|||
// uni.navigateTo({ |
|||
// url: '/pages/login/login' |
|||
// }) |
|||
// } else { |
|||
userStore.getUserInfo() |
|||
// } |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #FFFFFF; |
|||
height: 100vh; |
|||
width: 100%; |
|||
display: grid; |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: 100vh; |
|||
width: 100%; |
|||
display: grid; |
|||
|
|||
.main { |
|||
border-radius: 60rpx 60rpx 0rpx 0rpx; |
|||
background: #FFFFFF; |
|||
margin-top: -350rpx; |
|||
height: calc(100vh - 350rpx); |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
.main { |
|||
border-radius: 60rpx 60rpx 0rpx 0rpx; |
|||
background: #ffffff; |
|||
margin-top: -350rpx; |
|||
height: calc(100vh - 350rpx); |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.head { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: -50rpx; |
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: -50rpx; |
|||
|
|||
.name { |
|||
margin-top: 50rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 40rpx; |
|||
font-weight: 350; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
/* 文本/正文 */ |
|||
color: #1A1A1A; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
.name { |
|||
margin-top: 50rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 40rpx; |
|||
font-weight: 350; |
|||
text-align: center; |
|||
letter-spacing: normal; |
|||
/* 文本/正文 */ |
|||
color: #1a1a1a; |
|||
margin-left: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.editlist { |
|||
margin-top: 24rpx; |
|||
.editlist { |
|||
margin-top: 24rpx; |
|||
|
|||
.editone { |
|||
width: 100%; |
|||
height: 120rpx; |
|||
background: #FFFFFF; |
|||
border-bottom: 2rpx solid #f3f3f3; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.editone { |
|||
width: 100%; |
|||
height: 120rpx; |
|||
background: #ffffff; |
|||
border-bottom: 2rpx solid #f3f3f3; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.txt { |
|||
margin-left: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.txt { |
|||
margin-left: 36rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.buts { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
.buts { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.but { |
|||
margin-top: 160rpx; |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.but { |
|||
margin-top: 160rpx; |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007fff 0%, #99ccff 100%); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,196 +1,181 @@ |
|||
<template> |
|||
<view class="classbox"> |
|||
|
|||
<view class="pass"> |
|||
<view class="head"> |
|||
申请通过 |
|||
</view> |
|||
<view class="main"> |
|||
<view class="classone" v-for="(item,index) in passList" :key="index"> |
|||
<text class="title">{{item.name}}</text> |
|||
<view class="jindu"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/timeicon.png" mode=""></image> |
|||
<text class="time">{{item.create_time}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="reject"> |
|||
<view class="head"> |
|||
申请驳回 |
|||
</view> |
|||
<view class="main"> |
|||
<view class="classone" v-for="(item,index) in rejectList" :key="index"> |
|||
<text class="title">{{item.name}}</text> |
|||
<view class="jindu"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/timeicon.png" mode=""></image> |
|||
<text class="time">{{item.create_time}}</text> |
|||
</view> |
|||
<text class="result">{{item.remark||item.reject_reason}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="classbox"> |
|||
<view class="pass"> |
|||
<view class="head">申请通过</view> |
|||
<view class="main"> |
|||
<view class="classone" v-for="(item, index) in passList" :key="index"> |
|||
<text class="title">{{ item.name }}</text> |
|||
<view class="jindu"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/timeicon.png" mode=""></image> |
|||
<text class="time">{{ item.create_time }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="reject"> |
|||
<view class="head">申请驳回</view> |
|||
<view class="main"> |
|||
<view class="classone" v-for="(item, index) in rejectList" :key="index"> |
|||
<text class="title">{{ item.name }}</text> |
|||
<view class="jindu"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/timeicon.png" mode=""></image> |
|||
<text class="time">{{ item.create_time }}</text> |
|||
</view> |
|||
<text class="result">{{ item.remark || item.reject_reason }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
myMemberApply |
|||
} from '@/api/memberCenter' |
|||
import { |
|||
myMedium |
|||
} from '@/api/shop' |
|||
|
|||
import { onShow } from '@dcloudio/uni-app'; |
|||
|
|||
|
|||
const passList = ref([]) |
|||
|
|||
const rejectList = ref([]) |
|||
|
|||
onShow(async() => { |
|||
await myMemberApply().then((res)=>{ |
|||
res.data.forEach((ele)=> { |
|||
if(ele.status === 2) { |
|||
passList.value.push(ele) |
|||
} |
|||
else if(ele.status === 3) { |
|||
rejectList.value.push(ele) |
|||
} |
|||
}) |
|||
}) |
|||
await myMedium().then((res)=> { |
|||
console.log(res,55555); |
|||
res.data.data.forEach((ele)=> { |
|||
if(ele.status === 1) { |
|||
passList.value.push(ele) |
|||
} |
|||
else if(ele.status === 2) { |
|||
rejectList.value.push(ele) |
|||
} |
|||
}) |
|||
}) |
|||
}) |
|||
import { ref } from 'vue' |
|||
import { myMemberApply } from '@/api/memberCenter' |
|||
import { myMedium } from '@/api/shop' |
|||
|
|||
import { onShow } from '@dcloudio/uni-app' |
|||
|
|||
const passList = ref([]) |
|||
|
|||
const rejectList = ref([]) |
|||
|
|||
onShow(async () => { |
|||
await myMemberApply().then((res) => { |
|||
res.data.forEach((ele) => { |
|||
if (ele.status === 2) { |
|||
passList.value.push(ele) |
|||
} else if (ele.status === 3) { |
|||
rejectList.value.push(ele) |
|||
} |
|||
}) |
|||
}) |
|||
await myMedium().then((res) => { |
|||
console.log(res, 55555) |
|||
res.data.data.forEach((ele) => { |
|||
if (ele.status === 1) { |
|||
passList.value.push(ele) |
|||
} else if (ele.status === 2) { |
|||
rejectList.value.push(ele) |
|||
} |
|||
}) |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.classbox { |
|||
height: 100vh; |
|||
background: #FFFFFF; |
|||
padding: 40rpx 34rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
|
|||
.pass { |
|||
width: 100%; |
|||
|
|||
.head { |
|||
width: 100%; |
|||
height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #007FFF; |
|||
font-family: Lato; |
|||
font-size: 32rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
/* System Background Primary Light */ |
|||
color: #FFFFFF; |
|||
padding-left: 32rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.main { |
|||
background: #F1F3F9; |
|||
padding: 5rpx 16rpx 24rpx 16rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 0rpx 0rpx 24rpx 24rpx; |
|||
} |
|||
} |
|||
|
|||
.reject { |
|||
margin-top: 40rpx; |
|||
width: 100%; |
|||
|
|||
.head { |
|||
width: 100%; |
|||
height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #FFC36F; |
|||
font-family: Lato; |
|||
font-size: 32rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
/* System Background Primary Light */ |
|||
color: #FFFFFF; |
|||
padding-left: 32rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.main { |
|||
background: #F1F3F9; |
|||
padding: 5rpx 16rpx 24rpx 16rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 0rpx 0rpx 24rpx 24rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.classone { |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
background: #FFFFFF; |
|||
display: grid; |
|||
align-items: center; |
|||
padding: 16rpx 32rpx; |
|||
margin-top: 20rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
color: #0C092A; |
|||
} |
|||
|
|||
.jindu { |
|||
margin-top: 16rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.time { |
|||
font-family: Lato; |
|||
font-size: 20rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
margin-left: 16rpx; |
|||
} |
|||
} |
|||
.result { |
|||
margin-top: 12rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
color: #FE0000; |
|||
} |
|||
} |
|||
.classbox { |
|||
height: 100vh; |
|||
background: #ffffff; |
|||
padding: 40rpx 34rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
|
|||
.pass { |
|||
width: 100%; |
|||
|
|||
.head { |
|||
width: 100%; |
|||
height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #007fff; |
|||
font-family: Lato; |
|||
font-size: 32rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
/* System Background Primary Light */ |
|||
color: #ffffff; |
|||
padding-left: 32rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.main { |
|||
background: #f1f3f9; |
|||
padding: 5rpx 16rpx 24rpx 16rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 0rpx 0rpx 24rpx 24rpx; |
|||
} |
|||
} |
|||
|
|||
.reject { |
|||
margin-top: 40rpx; |
|||
width: 100%; |
|||
|
|||
.head { |
|||
width: 100%; |
|||
height: 72rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #ffc36f; |
|||
font-family: Lato; |
|||
font-size: 32rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
/* System Background Primary Light */ |
|||
color: #ffffff; |
|||
padding-left: 32rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.main { |
|||
background: #f1f3f9; |
|||
padding: 5rpx 16rpx 24rpx 16rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 0rpx 0rpx 24rpx 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.classone { |
|||
width: 100%; |
|||
border-radius: 16rpx; |
|||
background: #ffffff; |
|||
display: grid; |
|||
align-items: center; |
|||
padding: 16rpx 32rpx; |
|||
margin-top: 20rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
color: #0c092a; |
|||
} |
|||
|
|||
.jindu { |
|||
margin-top: 16rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.time { |
|||
font-family: Lato; |
|||
font-size: 20rpx; |
|||
font-weight: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
margin-left: 16rpx; |
|||
} |
|||
} |
|||
.result { |
|||
margin-top: 12rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: 0.76rpx; |
|||
color: #fe0000; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,104 +1,101 @@ |
|||
<template> |
|||
<view class="classbox"> |
|||
<view class="classone" v-for="(item,index) in classList" :key="index" @click="godetail(item)"> |
|||
<text class="title">{{item.study_center_title}}</text> |
|||
<text class="text">{{item.introduction}}</text> |
|||
<view class="jindu"> |
|||
<text class="learn">已学 {{item.progress}}%</text> |
|||
<text class="time">{{item.update_time.slice(0,10)}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="classbox"> |
|||
<view class="classone" v-for="(item, index) in classList" :key="index" @click="godetail(item)"> |
|||
<text class="title">{{ item.study_center_title }}</text> |
|||
<text class="text">{{ item.introduction }}</text> |
|||
<view class="jindu"> |
|||
<text class="learn">已学 {{ item.progress }}%</text> |
|||
<text class="time">{{ item.update_time.slice(0, 10) }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
import { |
|||
myStudy |
|||
} from '@/api/learningCenter' |
|||
import { ref } from 'vue' |
|||
import { myStudy } from '@/api/learningCenter' |
|||
|
|||
const classList = ref([]) |
|||
|
|||
const classList = ref([]) |
|||
const godetail = (item) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/learningCenter/detail?id=' + item.study_center_id |
|||
}) |
|||
} |
|||
|
|||
const godetail = (item) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/learningCenter/detail?id=' + item.study_center_id |
|||
}) |
|||
} |
|||
|
|||
onShow(async () => { |
|||
const res = await myStudy() |
|||
if (res.code === 1) { |
|||
classList.value = res.data |
|||
} |
|||
}) |
|||
onShow(async () => { |
|||
const res = await myStudy() |
|||
if (res.code === 1) { |
|||
classList.value = res.data |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.classbox { |
|||
height: 100vh; |
|||
background: linear-gradient(0deg, #F1F3F9 72%, rgb(202 202 204 / 20%) 88%); |
|||
padding: 6rpx 24rpx 40rpx 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
.classbox { |
|||
height: 100vh; |
|||
background: linear-gradient(0deg, #f1f3f9 72%, rgb(202 202 204 / 20%) 88%); |
|||
padding: 6rpx 24rpx 40rpx 24rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
|
|||
.classone { |
|||
width: 100%; |
|||
border-radius: 20rpx; |
|||
background: #FFFFFF; |
|||
display: grid; |
|||
align-items: center; |
|||
padding: 30rpx 28rpx; |
|||
margin-top: 30rpx; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0C092A; |
|||
} |
|||
.text { |
|||
margin-top: 16rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.jindu { |
|||
margin-top: 32rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.learn { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 500; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007FFF; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.classone { |
|||
width: 100%; |
|||
border-radius: 20rpx; |
|||
background: #ffffff; |
|||
display: grid; |
|||
align-items: center; |
|||
padding: 30rpx 28rpx; |
|||
margin-top: 30rpx; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 350; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #0c092a; |
|||
} |
|||
.text { |
|||
margin-top: 16rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
.jindu { |
|||
margin-top: 32rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.learn { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 500; |
|||
text-align: justify; /* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #007fff; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.time { |
|||
font-family: Source Han Sans; |
|||
font-size: 20rpx; |
|||
font-weight: 350; |
|||
text-align: right; |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #858494; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,381 +1,373 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="editbox"> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/tx.png" mode=""></image> |
|||
<text class="txt">头像</text> |
|||
</view> |
|||
<view class="right"> |
|||
<u-upload :fileList="form.fileList" @afterRead="afterRead" :maxCount="1" :accept="'file'"> |
|||
<image :src='url + `/` + userStore.userInfo.head_pic' mode="" |
|||
style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image> |
|||
</u-upload> |
|||
<!-- <image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
|||
<view class="container"> |
|||
<view class="editbox"> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/tx.png" mode=""></image> |
|||
<text class="txt">头像</text> |
|||
</view> |
|||
<view class="right"> |
|||
<u-upload :file-list="form.fileList" @afterRead="afterRead" :max-count="1"> |
|||
<image :src="url + `/` + userStore.userInfo.head_pic" mode="" style="width: 80rpx; height: 80rpx; border-radius: 50%"></image> |
|||
</u-upload> |
|||
<!-- <image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" |
|||
mode=""></image> --> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/yhm.png" mode=""></image> |
|||
<text class="txt">用户名</text> |
|||
</view> |
|||
<view class="right" @click="openpopup('用户名')"> |
|||
<u-popup :show="usershow" @close="usershow = false"> |
|||
<view class="popupbox"> |
|||
<text class="title">{{popupTitle}}</text> |
|||
<u-input type="text" v-model="userValue" /> |
|||
<view class="buts"> |
|||
<view class="jujue" @click="usershow = false"> |
|||
取消 |
|||
</view> |
|||
<view class="yunxu" @click="sureClick(typeValue)"> |
|||
确认 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
<text class="value">{{userStore.userInfo.nickname}}</text> |
|||
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/xb.png" mode=""></image> |
|||
<text class="txt">性别</text> |
|||
</view> |
|||
<view class="right" @click="sexshow = true"> |
|||
<text class="value">{{userStore.userInfo.sex_name}}</text> |
|||
<u-action-sheet :actions="sexlist" title="请选择性别" :show="sexshow" @select="selectClick" |
|||
@close="sexshow = false"></u-action-sheet> |
|||
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/sjh.png" mode=""></image> |
|||
<text class="txt">绑定手机号</text> |
|||
</view> |
|||
<view class="right" @click="openpopup('手机号')"> |
|||
<text class="value">{{userStore.userInfo.moblie}}</text> |
|||
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/zsxm.png" mode=""></image> |
|||
<text class="txt">真实姓名</text> |
|||
</view> |
|||
<view class="right" @click="openpopup('姓名')"> |
|||
<text class="value">{{userStore.userInfo.name}}</text> |
|||
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx;height: 32rpx;" src="@/static/img/szqy.png" mode=""></image> |
|||
<text class="txt">关联企业</text> |
|||
</view> |
|||
<view class="right" @click="qyshow = true"> |
|||
<text class="value">{{userStore.userInfo.identity_name}}</text> |
|||
<u-action-sheet :actions="qylist" title="请选择关联企业类型" :show="qyshow" @select="qyClick" |
|||
@close="qyshow = false"></u-action-sheet> |
|||
<image style="width: 18rpx;height: 18rpx;margin-left: 16rpx;" src="@/static/img/Group13.png" mode="" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/yhm.png" mode=""></image> |
|||
<text class="txt">用户名</text> |
|||
</view> |
|||
<view class="right" @click="openpopup('用户名')"> |
|||
<u-popup :show="usershow" @close="usershow = false"> |
|||
<view class="popupbox"> |
|||
<text class="title">{{ popupTitle }}</text> |
|||
<u-input type="text" v-model="userValue" /> |
|||
<view class="buts"> |
|||
<view class="jujue" @click="usershow = false">取消</view> |
|||
<view class="yunxu" @click="sureClick(typeValue)">确认</view> |
|||
</view> |
|||
</view> |
|||
</u-popup> |
|||
<text class="value">{{ userStore.userInfo.nickname }}</text> |
|||
<image style="width: 18rpx; height: 18rpx; margin-left: 16rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/xb.png" mode=""></image> |
|||
<text class="txt">性别</text> |
|||
</view> |
|||
<view class="right" @click="sexshow = true"> |
|||
<text class="value">{{ userStore.userInfo.sex_name }}</text> |
|||
<u-action-sheet |
|||
:actions="sexlist" |
|||
title="请选择性别" |
|||
:show="sexshow" |
|||
@select="selectClick" |
|||
@close="sexshow = false" |
|||
></u-action-sheet> |
|||
<image style="width: 18rpx; height: 18rpx; margin-left: 16rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/sjh.png" mode=""></image> |
|||
<text class="txt">绑定手机号</text> |
|||
</view> |
|||
<view class="right" @click="openpopup('手机号')"> |
|||
<text class="value">{{ userStore.userInfo.moblie }}</text> |
|||
<image style="width: 18rpx; height: 18rpx; margin-left: 16rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/zsxm.png" mode=""></image> |
|||
<text class="txt">真实姓名</text> |
|||
</view> |
|||
<view class="right" @click="openpopup('姓名')"> |
|||
<text class="value">{{ userStore.userInfo.name }}</text> |
|||
<image style="width: 18rpx; height: 18rpx; margin-left: 16rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="editone"> |
|||
<view class="left"> |
|||
<image style="width: 32rpx; height: 32rpx" src="@/static/img/szqy.png" mode=""></image> |
|||
<text class="txt">关联企业</text> |
|||
</view> |
|||
<view class="right" @click="qyshow = true"> |
|||
<text class="value">{{ userStore.userInfo.identity_name }}</text> |
|||
<u-action-sheet |
|||
:actions="qylist" |
|||
title="请选择关联企业类型" |
|||
:show="qyshow" |
|||
@select="qyClick" |
|||
@close="qyshow = false" |
|||
></u-action-sheet> |
|||
<image style="width: 18rpx; height: 18rpx; margin-left: 16rpx" src="@/static/img/Group13.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref |
|||
} from 'vue'; |
|||
import { |
|||
modifyField |
|||
} from '@/api/mine' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
import { ref } from 'vue' |
|||
import { modifyField } from '@/api/mine' |
|||
import useUserStore from '@/store/user' |
|||
const userStore = useUserStore() |
|||
|
|||
const url = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
const url = ref(import.meta.env.VITE_APP_BASE_URL) |
|||
|
|||
const sexshow = ref(false) |
|||
const sexlist = ref([{ |
|||
name: '男', |
|||
}, |
|||
{ |
|||
name: '女', |
|||
}, |
|||
]); |
|||
const selectClick = async (val) => { |
|||
await modifyField('sex', val.name === '男' ? 1 : 2).then((res) => { |
|||
if (res.code === 1) { |
|||
usershow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
const sexshow = ref(false) |
|||
const sexlist = ref([ |
|||
{ |
|||
name: '男' |
|||
}, |
|||
{ |
|||
name: '女' |
|||
} |
|||
]) |
|||
const selectClick = async (val) => { |
|||
await modifyField('sex', val.name === '男' ? 1 : 2).then((res) => { |
|||
if (res.code === 1) { |
|||
usershow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
} |
|||
const qyshow = ref(false) |
|||
const qylist = ref([ |
|||
{ |
|||
id: 1, |
|||
name: '其他(自由职业者等)' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '个体工商户' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '民营企业' |
|||
} |
|||
]) |
|||
const qyClick = async (val) => { |
|||
await modifyField('identity', val.id).then((res) => { |
|||
if (res.code === 1) { |
|||
qyshow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
if (val.id === 2 || val.id === 3) { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/completeInformation' |
|||
}) |
|||
} |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const qyshow = ref(false) |
|||
const qylist = ref([{ |
|||
id: 1, |
|||
name: '其他(自由职业者等)', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '个体工商户', |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '民营企业', |
|||
} |
|||
]); |
|||
const qyClick = async (val) => { |
|||
await modifyField('identity', val.id).then((res) => { |
|||
if (res.code === 1) { |
|||
qyshow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
if(val.id === 2||val.id === 3) { |
|||
uni.navigateTo({ |
|||
url: '/pages/mine/completeInformation' |
|||
}) |
|||
} |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
const usershow = ref(false) |
|||
const popupTitle = ref('') |
|||
|
|||
}) |
|||
} |
|||
const userValue = ref('') |
|||
const typeValue = ref('') |
|||
|
|||
const form = ref({ |
|||
fileList: [], |
|||
username: '', |
|||
sex: '', |
|||
num: '', |
|||
name: '', |
|||
company: '' |
|||
}) |
|||
|
|||
const usershow = ref(false) |
|||
const popupTitle = ref('') |
|||
const openpopup = (type) => { |
|||
userValue.value = '' |
|||
usershow.value = true |
|||
typeValue.value = type |
|||
if (type === '用户名') { |
|||
popupTitle.value = '请输入用户名' |
|||
} else if (type === '手机号') { |
|||
popupTitle.value = '请输入手机号' |
|||
} else if (type === '姓名') { |
|||
popupTitle.value = '请输入真实姓名' |
|||
} |
|||
} |
|||
|
|||
const sureClick = async (type) => { |
|||
let res = {} |
|||
if (type === '用户名') { |
|||
res = await modifyField('nickname', userValue.value) |
|||
} else if (type === '手机号') { |
|||
res = await modifyField('moblie', userValue.value) |
|||
} else if (type === '姓名') { |
|||
res = await modifyField('name', userValue.value) |
|||
} |
|||
if (res.code === 1) { |
|||
usershow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const userValue = ref('') |
|||
const typeValue = ref('') |
|||
|
|||
const form = ref({ |
|||
fileList: [], |
|||
username: '', |
|||
sex: '', |
|||
num: '', |
|||
name: '', |
|||
company: '' |
|||
}) |
|||
|
|||
const openpopup = (type) => { |
|||
userValue.value = '' |
|||
usershow.value = true |
|||
typeValue.value = type |
|||
if (type === '用户名') { |
|||
popupTitle.value = '请输入用户名' |
|||
} else if (type === '手机号') { |
|||
popupTitle.value = '请输入手机号' |
|||
} else if (type === '姓名') { |
|||
popupTitle.value = '请输入真实姓名' |
|||
} |
|||
} |
|||
|
|||
const sureClick = async (type) => { |
|||
let res = {} |
|||
if (type === '用户名') { |
|||
res = await modifyField('nickname', userValue.value) |
|||
} else if (type === '手机号') { |
|||
res = await modifyField('moblie', userValue.value) |
|||
} else if (type === '姓名') { |
|||
res = await modifyField('name', userValue.value) |
|||
} |
|||
if (res.code === 1) { |
|||
usershow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
|
|||
const afterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL+'/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
'token': uni.getStorageSync('access_token') |
|||
}, |
|||
success: async(val) => { |
|||
await modifyField('head_pic',JSON.parse(val.data).data.url).then((res) => { |
|||
if (res.code === 1) { |
|||
qyshow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败',res); |
|||
} |
|||
}) |
|||
} |
|||
const afterRead = async (e) => { |
|||
uni.uploadFile({ |
|||
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image', |
|||
filePath: e.file.url, |
|||
name: 'file', |
|||
header: { |
|||
token: uni.getStorageSync('access_token') |
|||
}, |
|||
success: async (val) => { |
|||
await modifyField('head_pic', JSON.parse(val.data).data.url).then((res) => { |
|||
if (res.code === 1) { |
|||
qyshow.value = false |
|||
setTimeout(() => { |
|||
userStore.getUserInfo() |
|||
uni.showToast({ |
|||
title: '修改成功!', |
|||
icon: 'success' |
|||
}) |
|||
}, 500) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '修改失败!', |
|||
icon: 'fail' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
fail: (res) => { |
|||
console.log('失败', res) |
|||
} |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
height: 100vh; |
|||
width: 100%; |
|||
background: #F1F3F9; |
|||
.container { |
|||
height: 100vh; |
|||
width: 100%; |
|||
background: #f1f3f9; |
|||
|
|||
.editbox { |
|||
background: #FFFFFF; |
|||
padding: 0 72rpx 0 62rpx; |
|||
.editbox { |
|||
background: #ffffff; |
|||
padding: 0 72rpx 0 62rpx; |
|||
|
|||
.editone { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 120rpx; |
|||
background: #FFFFFF; |
|||
border-bottom: 2rpx solid #EBEBEB; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.editone { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 120rpx; |
|||
background: #ffffff; |
|||
border-bottom: 2rpx solid #ebebeb; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.txt { |
|||
margin-left: 16rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
} |
|||
} |
|||
.txt { |
|||
margin-left: 16rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.value { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.value { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.popupbox { |
|||
display: grid; |
|||
align-items: center; |
|||
justify-items: center; |
|||
padding-bottom: 60rpx; |
|||
.popupbox { |
|||
display: grid; |
|||
align-items: center; |
|||
justify-items: center; |
|||
padding-bottom: 60rpx; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
line-height: 34rpx; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
padding: 30rpx 0; |
|||
} |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
font-weight: 300; |
|||
line-height: 34rpx; |
|||
text-align: right; |
|||
letter-spacing: normal; |
|||
color: #273847; |
|||
padding: 30rpx 0; |
|||
} |
|||
|
|||
.buts { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 30rpx; |
|||
.buts { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 30rpx; |
|||
|
|||
.yunxu { |
|||
margin-left: 40rpx; |
|||
width: 180rpx; |
|||
height: 70rpx; |
|||
border-radius: 10rpx; |
|||
background: #07C160; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.yunxu { |
|||
margin-left: 40rpx; |
|||
width: 180rpx; |
|||
height: 70rpx; |
|||
border-radius: 10rpx; |
|||
background: #07c160; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #ffffff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.jujue { |
|||
width: 180rpx; |
|||
height: 70rpx; |
|||
border-radius: 10rpx; |
|||
background: #dadada; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #393939; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
.jujue { |
|||
width: 180rpx; |
|||
height: 70rpx; |
|||
border-radius: 10rpx; |
|||
background: #dadada; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
text-align: justify; |
|||
/* 浏览器可能不支持 */ |
|||
display: flex; |
|||
align-items: center; |
|||
letter-spacing: normal; |
|||
color: #393939; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 925 B |
|
After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 750 B After Width: | Height: | Size: 680 B |