Commit 4cc207e5 authored by shilei's avatar shilei

feat: 配置、列表

parent e2e6e70c
export default {
// 首页
// 列表
// 产业园列表
parkList: '/postcard/api/parkInfo/v1.0/page',
// 土地列表
landList: '/postcard/api/land/v1.0/page',
// 载体列表
carrierList: '/postcard/api/carrier/v1.0/page'
}
This diff is collapsed.
<template>
<view class="item-main" :style="height ? 'height:' + height + 'rpx;' : ''">
<view class="item-list">
<scroll-view class="item-left" scroll-y="true">
<view
class="item-left-list"
v-for="(item, index) in newList"
:key="index"
:style="
selectLeftIndex == index
? 'background: #F2F2F2;border-radius:0rpx;'
: ''
"
@click.stop="selectLeft(index)"
>{{ item.description }}
</view>
</scroll-view>
<scroll-view class="item-middle" scroll-y="true">
<view
v-if="
newList[selectLeftIndex] &&
newList[selectLeftIndex].child.length > 0
"
>
<view
class="item-middle-list"
v-for="(mess, inx) in newList[selectLeftIndex].child"
:key="inx"
:style="
selectMiddleIndex == inx
? 'background: #F2F2F2;border-radius:0rpx;'
: ''
"
@click.stop="selectMiddle(inx)"
>
<view class="item-middle-list-name">
{{ mess.description }}
</view>
<!-- <image
v-if="mess.chooseState"
class="item-middle-list-img"
src="/static/dropDown/select.png"
>
</image> -->
</view>
</view>
<view class="no-data" v-else>暂无数据</view>
</scroll-view>
<scroll-view class="item-right" scroll-y="true">
<view
v-if="
newList[selectLeftIndex] &&
newList[selectLeftIndex].child.length > 0 &&
newList[selectLeftIndex].child[selectMiddleIndex].child.length > 0
"
>
<view
class="item-right-list"
v-for="(mess, inx) in newList[selectLeftIndex].child[
selectMiddleIndex
].child"
:key="inx"
@click.stop="selectRight(mess)"
>
<view class="item-right-list-name">
{{ mess.description }}
</view>
<image
v-if="mess.chooseState"
class="item-right-list-img"
src="/static/dropDown/select.png"
>
</image>
</view>
</view>
<view class="no-data" v-else>暂无数据</view>
</scroll-view>
</view>
<view class="btn-list">
<view class="btn-reset" @click.stop="reset">重置</view>
<view
class="btn-complete"
:style="'background: ' + themeColor"
@click.stop="complete"
>完成</view
>
</view>
</view>
</template>
<script>
export default {
props: {
//数据源
itemList: {
type: Array,
default: () => {
return [];
},
},
//是否多选
isMultiple: {
type: Boolean,
default: false,
},
//主题色
themeColor: {
type: String,
default: "#FD430E",
},
},
data() {
return {
selectLeftIndex: 0,
selectMiddleIndex: 0,
height: 0,
newList: [],
selectItem: [],
};
},
watch: {
itemList: {
deep: true,
immediate: true,
handler(newArr) {
if (newArr.length) {
this.newList = newArr;
}
},
},
},
mounted() {
this.$nextTick(() => {
if (this.itemList.length >= this.itemList[0].child.length) {
this.height = this.itemList.length * 72 + 108;
} else {
this.height = this.itemList[0].child.length * 72 + 108;
}
});
},
methods: {
selectLeft(index) {
this.selectLeftIndex = index;
this.selectMiddleIndex = 0;
if (
this.newList.length >= this.newList[this.selectLeftIndex].child.length
) {
this.height = this.newList.length * 72 + 108;
} else {
this.height =
this.newList[this.selectLeftIndex].child.length * 72 + 108;
}
},
selectMiddle(index) {
this.selectMiddleIndex = index;
// if (
// this.newList.length >= this.newList[this.selectLeftIndex].child.length
// ) {
// this.height = this.newList.length * 72 + 108;
// } else {
// this.height =
// this.newList[this.selectLeftIndex].child.length * 72 + 108;
// }
},
selectRight(item) {
if (!this.isMultiple) this.initial();
item.chooseState = !item.chooseState;
this.selectItem = item;
this.newList = JSON.parse(JSON.stringify(this.newList));
},
initial() {
this.newList.forEach((res) => {
res.child.forEach((item) => {
item.child.forEach((e) => {
e.chooseState = false;
});
});
});
},
//重置
reset() {
this.initial();
this.selectItem = null;
this.newList = JSON.parse(JSON.stringify(this.newList));
},
//完成
complete() {
console.log(this.newList);
this.$emit("complete", {
type: 1,
list: this.newList,
item: this.selectItem,
});
},
},
};
</script>
<style>
/deep/ ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
</style>
<style scoped lang="scss">
.item-main {
width: 100%;
position: relative;
box-sizing: border-box;
padding-bottom: 102rpx;
max-height: 60vh;
.item-list {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
.item-left {
width: 240rpx;
height: 100%;
background-color: #ffffff;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
.item-left-list {
box-sizing: border-box;
padding: 23rpx 40rpx;
width: 100%;
// height: 72rpx;
background: #ffffff;
border-radius: 0rpx 8rpx 8rpx 0rpx;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 28rpx;
color: #4d4d4d;
}
}
.item-middle {
width: 240rpx;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
background-color: #ffffff;
.item-middle-list {
width: 100%;
box-sizing: border-box;
// height: 72rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 23rpx 32rpx;
.item-middle-list-name {
font-size: 28rpx;
color: #4d4d4d;
}
.item-middle-list-img {
width: 34rpx;
height: 34rpx;
}
}
.no-data {
width: 100%;
height: 100%;
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
justify-content: center;
}
}
.item-right {
width: calc(100% - 240rpx - 240rpx);
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
background-color: #f2f2f2;
.item-right-list {
width: 100%;
box-sizing: border-box;
min-height: 80rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0rpx 32rpx;
.item-right-list-name {
font-size: 28rpx;
color: #4d4d4d;
}
.item-right-list-img {
width: 80rpx;
height: 80rpx;
}
}
.no-data {
width: 100%;
height: 100%;
font-size: 28rpx;
color: #999999;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.btn-list {
position: absolute;
bottom: 0rpx;
width: 100%;
height: 102rpx;
background: #fefffe;
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-around;
.btn-reset {
width: 320rpx;
height: 72rpx;
background: #ffffff;
border-radius: 10rpx;
border: 2rpx solid #e6e6e6;
font-size: 30rpx;
color: #3e3e3e;
display: flex;
align-items: center;
justify-content: center;
}
.btn-complete {
width: 320rpx;
height: 76rpx;
border-radius: 10rpx;
font-size: 30rpx;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
This diff is collapsed.
<template>
<view class="item-main" :style="height ? 'height:' + height + 'rpx;' : ''">
<scroll-view class="item-right" scroll-y="true">
<view
class="item-right-list"
v-if="newList.length > 0"
v-for="(item, index) in newList"
:key="index"
@click.stop="selectRight(item)"
:style="item.chooseState ? 'background: #F2F2F2' : ''"
>
<view class="item-right-list-name">{{ item.description }} </view>
<image
v-if="item.chooseState"
class="item-right-list-img"
src="/static/dropDown/select.png"
>
</image>
</view>
</scroll-view>
<view class="btn-list">
<view class="btn-reset" v-if="!hideReset" @click.stop="reset">重置</view>
<view
class="btn-complete"
:style="'background: ' + themeColor"
@click.stop="complete"
>完成</view
>
</view>
</view>
</template>
<script>
export default {
props: {
//数据源
itemList: {
type: Array,
default: () => {
return [];
},
},
//是否多选
isMultiple: {
type: Boolean,
default: false,
},
//主题色
themeColor: {
type: String,
default: "#FD430E",
},
hideReset: {
type: Boolean,
default: false,
},
},
data() {
return {
selectLeftIndex: 0,
height: 0,
newList: [],
};
},
watch: {
itemList: {
deep: true,
immediate: true,
handler(newArr) {
if (newArr.length) {
this.newList = newArr;
}
this.$nextTick(() => {
this.height = this.itemList.length * 80 + 108;
});
},
},
},
mounted() {
this.$nextTick(() => {
this.height = this.itemList.length * 80 + 108;
});
},
methods: {
selectRight(item) {
if (!this.isMultiple) this.initial();
item.chooseState = !item.chooseState;
this.newList = JSON.parse(JSON.stringify(this.newList));
},
initial() {
this.newList.forEach((item) => {
item.chooseState = false;
});
},
//重置
reset() {
this.initial();
this.newList = JSON.parse(JSON.stringify(this.newList));
},
//完成
complete() {
this.$emit("complete", {
type: 2,
list: this.newList,
});
},
},
};
</script>
<style>
/deep/ ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
</style>
<style scoped lang="scss">
.item-main {
width: 100%;
position: relative;
box-sizing: border-box;
padding-bottom: 102rpx;
max-height: 60vh;
.item-left {
width: 100%;
height: 100%;
background-color: #f4f4f4;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
.item-left-list {
box-sizing: border-box;
padding: 0 40rpx;
width: 100%;
height: 80rpx;
background: #f4f4f4;
border-radius: 0rpx 8rpx 8rpx 0rpx;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 28rpx;
color: #383838;
}
}
.item-right {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
background-color: #ffffff;
.item-right-list {
width: 100%;
box-sizing: border-box;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 32rpx;
.item-right-list-name {
font-size: 28rpx;
color: #333333;
}
.item-right-list-img {
position: absolute;
right: 22rpx;
width: 80rpx;
height: 80rpx;
}
}
}
.btn-list {
position: absolute;
bottom: 0rpx;
width: 100%;
height: 102rpx;
background: #fefffe;
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-around;
.btn-reset {
width: 320rpx;
height: 80rpx;
background: #ffffff;
border-radius: 10rpx;
border: 2rpx solid #e6e6e6;
font-size: 30rpx;
color: #3e3e3e;
display: flex;
align-items: center;
justify-content: center;
}
.btn-complete {
width: 320rpx;
height: 76rpx;
border-radius: 10rpx;
font-size: 30rpx;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
<template>
<view class="item-main" :style="height?'height:'+height+'rpx;':''">
<scroll-view class="item-list" scroll-y="true">
<view class="list-info" v-for="(item,index) in newList" :key="index">
<view class="item-title" v-if="item.childs.length>0">{{item.name}}</view>
<view class="list-mess">
<view class="mess-name" @click.stop="selectRight(mess)"
:style="mess.chooseState?'color:'+themeColor+';border-color: '+themeColor:''"
v-for="(mess,inx) in item.childs">{{mess.name}}
</view>
</view>
</view>
</scroll-view>
<view class="btn-list">
<view class="btn-reset" @click.stop="reset">重置</view>
<view class="btn-complete" :style="'background: '+themeColor" @click.stop="complete">完成</view>
</view>
</view>
</template>
<script>
export default {
props: {
//数据源
itemList: {
type: Array,
default: () => {
return []
}
},
//是否多选
isMultiple: {
type: Boolean,
default: false
},
//主题色
themeColor: {
type: String,
default: '#FD430E',
},
},
data() {
return {
height: 0,
newList: []
}
},
watch: {
itemList: {
deep: true,
immediate: true,
handler(newArr) {
if (newArr.length) {
this.newList = newArr
}
},
}
},
mounted() {
this.$nextTick(() => {
let view = uni.createSelectorQuery().in(this).select(".item-list")
view.boundingClientRect(res => {
this.height = this.px2rpx(res.height) + 108
}).exec()
})
},
methods: {
px2rpx(px) {
const systemInfo = uni.getSystemInfoSync()
return px / (systemInfo.screenWidth / 750)
},
selectRight(item) {
if (!this.isMultiple) this.initial()
item.chooseState = !item.chooseState
this.newList = JSON.parse(JSON.stringify(this.newList))
},
initial() {
this.newList.forEach(res => {
res.childs.forEach(item => {
item.chooseState = false
})
})
},
//重置
reset() {
this.initial()
this.newList = JSON.parse(JSON.stringify(this.newList))
},
//完成
complete() {
this.$emit('complete', {
type: 1,
list: this.newList
})
},
}
}
</script>
<style>
/deep/ ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
</style>
<style scoped lang="scss">
.item-main {
width: 100%;
position: relative;
box-sizing: border-box;
padding-bottom: 102rpx;
max-height: 60vh;
.item-list {
width: 100%;
height: 100%;
background-color: #FFFFFF;
box-sizing: border-box;
padding: 6rpx 16rpx;
.list-info {
height: auto;
.item-title {
padding: 0 8rpx;
font-size: 28rpx;
color: #333333;
height: 56rpx;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 6rpx;
font-weight: bold;
}
.list-mess {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
.mess-name {
padding: 0 32rpx;
height: 54rpx;
background: #F4F4F4;
border: solid #F4F4F4 1rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #333333;
margin: 0 8rpx 16rpx 8rpx;
}
}
}
}
.btn-list {
position: absolute;
bottom: 0rpx;
width: 100%;
height: 102rpx;
background: #FEFFFE;
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-around;
.btn-reset {
width: 320rpx;
height: 72rpx;
background: #FFFFFF;
border-radius: 40rpx;
border: 2rpx solid #E6E6E6;
font-size: 30rpx;
color: #3E3E3E;
display: flex;
align-items: center;
justify-content: center;
}
.btn-complete {
width: 320rpx;
height: 76rpx;
border-radius: 40rpx;
font-size: 30rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
\ No newline at end of file
This diff is collapsed.
<template>
<view v-if="hasBtn" class="bottom-cell">
<view class="edit-btn" @click.stop="handleEdit">
<img class="icon-info" src="/static/img/new-info.png" alt="" />
<view class="btn-text">{{ editBtnText }}</view>
<img class="icon-right" src="/static/img/btn-right.png" alt="" />
</view>
</view>
</template>
<script>
export default {
name: "BottomCell",
props: {
// 去编辑
showEdit: {
type: Boolean,
default: false,
},
// 继续编辑
showContinueEdit: {
type: Boolean,
default: false,
},
},
computed: {
hasBtn() {
return this.showEdit;
},
editBtnText() {
if (this.showEdit) {
return "去编辑";
} else if (this.showContinueEdit) {
return "继续编辑";
} else {
return "";
}
},
},
methods: {
handleEdit(e) {
this.$emit("edit", e);
},
},
};
</script>
<style lang="scss" scoped>
.bottom-cell {
display: flex;
justify-content: flex-end;
margin-top: 20rpx;
padding-top: 20rpx;
height: 104rpx - 30rpx;
border-top: 2rpx solid #dfdfdf;
box-sizing: border-box;
}
.edit-btn {
display: flex;
align-items: center;
justify-content: space-between;
height: 54rpx;
width: 190rpx;
padding: 0 15rpx;
color: #c0322b;
border: 2rpx solid;
border-radius: 71rpx;
background-color: white;
}
.btn-text {
font-size: 24rpx;
line-height: 28rpx;
font-weight: 500;
font-family: PingFang SC-Medium, PingFang SC;
}
.icon-info {
$r: 28rpx;
width: $r;
height: $r;
}
.icon-right {
width: 16rpx;
height: 34rpx;
}
</style>
<template>
<view>
<div class="media">
<div class="flex">
<div class="media-left">
<image :src="img" alt="" class="thumb" mode="aspectFill"></image>
</div>
<div class="media-right">
<view class="right-title flex align-center justify-between">
<div>
<slot name="title">
<p :style="{ maxWidth: titleWidth }" class="ell2">
<um-texthighlight
:text="title || '--'"
:keyword="keyWords"
color="#c0322b"
></um-texthighlight>
</p>
</slot>
</div>
</view>
<slot name="rightMedia"></slot>
</div>
</div>
<view>
<slot name="rightFooter"></slot>
</view>
</div>
</view>
</template>
<script>
import umTexthighlight from "../um-texthighlight/um-texthighlight.vue";
import API from "@/api/url/index";
export default {
components: { umTexthighlight },
data() {
return {};
},
props: {
img: {
type: String,
required: true,
},
title: {
type: String,
required: false,
},
isHeightLight: {
type: Boolean,
default: false,
},
keyWords: {
type: String,
default: "",
},
isCollected: {
type: Boolean,
default: false,
},
collectType: {
default: 0,
},
cardId: {
default: 0,
},
titleWidth: {
default: "448rpx",
},
hideCollect: {
default: false,
},
},
methods: {
// 收藏
collection() {
this.$fetch({
url: API.collection,
data: {
isCollection: this.isCollected ? 0 : 1,
collectId: this.cardId,
type: this.collectType,
},
}).then((res) => {
// this.isCollected = !this.isCollected;
this.$emit("changeCollecte", !this.isCollected);
// this.setRefreshCollection(new Date().getTime());
wx.showToast({
title: !this.isCollected ? "收藏成功" : "取消收藏",
icon: "none",
duration: 1500,
});
});
},
},
};
</script>
<style lang="less" scoped>
.media /deep/ .uni-fav {
width: auto;
}
</style>
<style>
.media {
border-radius: 10rpx;
padding: 20rpx;
background-color: #fff;
box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
}
.thumb {
width: 178rpx;
height: 134rpx;
overflow: hidden;
}
.media-left {
height: 178rpx;
}
.media-right {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 30rpx;
padding-top: 5rpx;
width: 424rpx;
}
.right-title {
color: #333;
font-weight: 500;
font-size: 28rpx;
line-height: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
margin-bottom: 15rpx;
}
</style>
<template>
<media-card
:img="areaInfo.imgUrl"
:title="areaInfo.name"
:cardId="areaInfo.id"
>
<template v-slot:rightMedia>
<view>
<div class="flex right-media f24">
<div style="margin-left: 24rpx; width: 200rpx" class="ell">
<span class="c80">面积:</span>{{ areaInfo.planArea || "--" }}k㎡
</div>
</div>
<div class="f24 flex right-footer">
<div style="width: 200rpx" class="ell">
<span class="c80">载体类型:</span>
<span>{{ areaInfo.levelName || "--" }}</span>
</div>
<div style="margin-left: 24rpx; width: 200rpx" class="ell">
<span class="c80">建筑结构:</span>{{ areaInfo.type || "--" }}
</div>
</div>
</view>
</template>
</media-card>
</template>
<script>
import umTexthighlight from "../um-texthighlight/um-texthighlight.vue";
import mediaCard from "./card.vue";
export default {
components: { mediaCard, umTexthighlight },
props: {
isHeightLight: {
type: Boolean,
default: false,
},
detail: {
type: Object,
default: {},
},
keyWords: {
type: String,
default: "",
},
hideCollect: {
default: false,
},
showUpdateTime: {
default: false,
},
showBtn: {
type: Boolean,
default: false,
},
form: {
type: String,
default: '',
},
},
data() {
return {
areaInfo: {},
};
},
mounted() {
this.areaInfo = this.detail;
},
methods: {
changeCollecte(e) {
this.areaInfo.isCollection = e;
},
handleEdit() {
const params = {
id: this.area.id,
from: this.from,
};
const query = Object.entries(params).reduce((pre, [key, value]) => {
return `${pre}&${key}=${value}`;
}, '');
uni.navigateTo({
url: "/pages/writeData/develop?" + query,
});
},
},
watch: {},
};
</script>
<style lang="scss" scoped>
.right-media {
color: #4d4d4d;
line-height: 34rpx;
margin-bottom: 10rpx;
}
.right-footer {
color: #4d4d4d;
line-height: 34rpx;
}
.c80 {
color: #808080;
}
</style>
<template>
<media-card
:img="parkInfo.imgUrl"
:title="parkInfo.name"
:keyWords="keyWords"
:cardId="parkInfo.id"
>
<template v-slot:rightMedia>
<view class="cell">
<view class="line">
<view class="info">
<view class="title">土地类型:</view>
<view class="content">{{ detail.provinceName }}</view>
</view>
<view class="info">
<view class="title">占地面积</view>
<view class="content ell">{{}}</view>
</view>
</view>
</view>
</template>
</media-card>
</template>
<script>
import mediaCard from "./card.vue";
export default {
name: "AreaCard",
components: {mediaCard},
props: {
detail: {
type: Object,
default: () => ({}),
},
},
};
</script>
<style lang="scss" scoped>
.cell {
padding: 44rpx 30rpx 20rpx 30rpx;
background: white;
border-radius: 10rpx;
box-shadow: 0 4rpx 5rpx 0 rgba(0, 0, 0, 0.15);
}
.line {
display: flex;
align-items: center;
& + & {
margin-top: 30rpx;
}
}
.info {
flex: 1;
display: flex;
align-items: center;
font-size: 28rpx;
overflow: hidden;
}
.title {
margin-right: 10rpx;
color: #808080;
}
.content {
flex: 1;
color: 4d4d4d;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
<template>
<media-card
:img="parkInfo.imgUrl"
:title="parkInfo.name"
:keyWords="keyWords"
:cardId="parkInfo.id"
>
<template v-slot:rightMedia>
<view>
<div class="f24 flex right-footer">
<div style="width: 200rpx">
<span class="c80">级别:</span>
<span>{{ parkInfo.levelName || "--" }}</span>
</div>
<div style="margin-left: 10rpx">
<span class="c80">面积:</span
>{{ parkInfo.coverArea ? parkInfo.coverArea + "亩" : "--" }}
</div>
</div>
</view>
</template>
</media-card>
</template>
<script>
import mediaCard from "./card.vue";
export default {
components: { mediaCard },
props: {
isHeightLight: {
type: Boolean,
default: false,
},
detail: {
type: Object,
default: {},
},
keyWords: {
type: String,
default: "",
},
hideCollect: {
default: false,
},
showUpdateTime: {
default: false,
},
showBtn: {
type: Boolean,
default: false,
},
from: {
type: String,
default: '',
},
},
data() {
return {
parkInfo: {},
};
},
mounted() {
this.parkInfo = this.detail;
},
methods: {
changeCollecte(e) {
this.parkInfo.isCollection = e;
},
handleEdit() {
const params = {
id: this.park.id,
from: this.from,
};
const query = Object.entries(params).reduce((pre, [key, value]) => {
return `${pre}&${key}=${value}`;
}, '');
uni.navigateTo({
url: "/pages/writeData/industry?" + query,
});
},
},
};
</script>
<style lang="scss" scoped>
.right-media {
color: #4d4d4d;
line-height: 34rpx;
margin-bottom: 10rpx;
}
.right-footer {
color: #4d4d4d;
line-height: 34rpx;
}
.c80 {
color: #808080;
}
</style>
<template>
<view :style="{ maxWidth: maxWidth || '' }">
<block
v-for="(item, index) in getHilightStrArray(text, keyword)"
:key="index"
>
<text :style="item == keyword ? 'color:' + color : ''">{{ item }}</text>
</block>
<slot></slot>
</view>
</template>
<script>
export default {
props: {
// 需要显示的文本
text: {
type: String,
},
// 需要高亮的关键字
keyword: {
type: String,
},
// 高亮的颜色
color: {
type: String,
default: "#C0322B",
},
maxWidth: {
type: String,
default: "",
},
},
methods: {
/**
* 将文本和关键字分割成数组
* @param str 待处理字符串
* @param key 关键字字符串
* @returns 将关键字分割后的数组
*/
getHilightStrArray(str, key) {
return str.replace(new RegExp(`${key}`, "g"), `%%${key}%%`).split("%%");
},
},
};
</script>
......@@ -4,7 +4,7 @@ switch (process.env.VUE_APP_ENV) {
baseUrl = 'https://prod.techbook.com.cn:9445'
break;
case 'development':
baseUrl = 'https://test.techbook.com.cn:8445'
baseUrl = 'https://test.postcard-api.liyeyun.com.cn'
break;
}
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment