liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style(店铺):界面调整

Browse Source
This commit is contained in:
lifizer
2024-03-19 17:56:50 +08:00
parent 9faa3e6355
commit c96cae1087
6 changed files with 867 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesInn/components/jin-edit/jin-edit.vue
+303
View File
@@ -0,0 +1,303 @@
<template>
<view class="container" :style="{height: height}">
<editor
class="ql-container"
:placeholder="placeholder"
:show-img-size="true"
:show-img-toolbar="true"
:show-img-resize="true"
@ready="onEditorReady"
id="editor"
@statuschange="statuschange"
@focus="editFocus"
@blur="editBlur"
ref="editot"
></editor>
<!-- 操作工具 -->
<view class="tool-view" >
<!-- 文字相关操作 -->
<view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }">
<jinIcon class="single" type="&#xe6e7;" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6fe;" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6f8;" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6e3;" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6f1;" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6ed;" title="居右" @click="setRight" :color="showRight ? activeColor : '#666666'"></jinIcon>
</view>
<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view>
<view class="setting-layer" v-if="showSettingLayer">
<view class="single" @click="release(true)">
<jinIcon class="icon" type="&#xe639;" ></jinIcon>
<view>公开发布</view>
</view>
<view class="single" @click="release(false)">
<jinIcon class="icon" type="&#xe655;" ></jinIcon>
<view>暂时保存</view>
</view>
</view>
<view class="tool">
<!-- <jinIcon class="single" type="&#xe6f3;" title="图片" @click="insertImage"></jinIcon> -->
<jinIcon class="single" type="&#xe6f9;" title="格式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6eb;" title="分割线" @click="insertDivider"></jinIcon>
<jinIcon class="single" type="&#xe6e8;" title="撤回" @click="undo"></jinIcon>
<jinIcon class="single" type="&#xe705;" title="还原" @click="redo"></jinIcon>
<!-- <jinIcon class="single" type="&#xeb8a;" title="设置" @click="showSetting"></jinIcon> -->
</view>
</view>
</view>
</template>
<script>
import jinIcon from './jin-icons.vue';
export default {
props: {
// 点击图片时显示图片大小控件
showImgSize: {
type: Boolean,
default: false
},
// 点击图片时显示工具栏控件
showImgToolbar: {
type: Boolean,
default: false
},
// 点击图片时显示修改尺寸控件
showImgResize: {
type: Boolean,
default: false
},
// 占位符
placeholder: {
type: String,
default: '开始输入...'
},
// 图片上传的地址
uploadFileUrl: {
type: String,
default: '#'
},
// 上传文件时的name
fileKeyName: {
type: String,
default: 'file'
},
// 上传图片时，http请求的header
header: {
type: Object
},
// 初始化html
html: {
type: String
},
// 整个控件的高度
height: {
type: String,
default: '25vh'
}
},
computed:{
},
data() {
return {
showMoreTool: false,
showBold: false,
showItalic: false,
showIns: false,
showHeader: false,
showCenter: false,
showRight: false,
showSettingLayer: false,
activeColor: '#F56C6C'
};
},
components: {
jinIcon
},
mounted() {
},
methods: {
onEditorReady(e) {
uni.createSelectorQuery()
.in(this)
.select('.ql-container')
.fields({
size: true,
context: true
},res => {
this.editorCtx = res.context;
this.editorCtx.setContents({
html: this.html
})
})
.exec();
},
undo() {
this.editorCtx.undo();
},
/// 插入分割线
insertDivider() {
this.editorCtx.insertDivider();
},
redo() {
this.editorCtx.redo();
},
showMore() {
this.showMoreTool = !this.showMoreTool;
this.editorCtx.setContents()
},
setBold() {
this.showBold = !this.showBold;
this.editorCtx.format('bold');
},
setItalic() {
this.showItalic = !this.showItalic;
this.editorCtx.format('italic');
},
checkStatus(name, detail, obj) {
if (detail.hasOwnProperty(name)) {
this[obj] = true;
} else {
this[obj] = false;
}
},
statuschange(e) {
var detail = e.detail;
this.checkStatus('bold', detail, 'showBold');
this.checkStatus('italic', detail, 'showItalic');
this.checkStatus('ins', detail, 'showIns');
this.checkStatus('header', detail, 'showHeader');
if (detail.hasOwnProperty('align')) {
if (detail.align == 'center') {
this.showCenter = true;
this.showRight = false;
} else if (detail.align == 'right') {
this.showCenter = false;
this.showRight = true;
} else {
this.showCenter = false;
this.showRight = false;
}
} else {
this.showCenter = false;
this.showRight = false;
}
},
setIns() {
this.showIns = !this.showIns;
this.editorCtx.format('ins');
},
setHeader() {
this.showHeader = !this.showHeader;
this.editorCtx.format('header', this.showHeader ? 'H2' : false);
},
setCenter() {
this.showCenter = !this.showCenter;
this.editorCtx.format('align', this.showCenter ? 'center' : false);
},
setRight() {
this.showRight = !this.showRight;
this.editorCtx.format('align', this.showRight ? 'right' : false);
},
showSetting() {
this.showSettingLayer = !this.showSettingLayer;
},
async editFocus(e) {
},
editBlur(e) {
this.editorCtx.getContents({
success: res => {
this.$emit('editOk', res);
}
})
},
release(isPublic) {
this.showSettingLayer = false;
this.editorCtx.getContents({
success: res => {
Object.assign(res, {
isPublic: isPublic
})
this.$emit('editOk', res);
}
})
},
}
};
</script>
<style scoped>
.container {
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
/* padding-top: 30rpx; */
}
.ql-container {
line-height: 150%;
font-size: 22rpx;
width: 100%;
height: 240px;
background: #fff;
margin: 0 auto;
flex: 1;
box-sizing: border-box;
/* padding-bottom: 5rpx; */
}
.tool-view{
width: 100%;
background: #eee;
/* margin-top: 20px; */
}
.tool {
height: 95rpx;
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
}
.font-more {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
background: rgb(235, 235, 235);
overflow: hidden;
transition: all 0.15s;
}
.setting-layer {
position: absolute;
bottom: 100rpx;
background: #fff;
width: 250rpx;
right: 20rpx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 8rpx;
}
.setting-layer .single {
height: 80rpx;
font-size: 32rpx;
padding: 0 30rpx;
display: flex;
align-items: center;
line-height: 80rpx;
flex-direction: row;
color: #666;
}
.setting-layer .single .icon {
margin-right: 20rpx;
}
.setting-layer-mask{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: transparent;
}
</style>
pagesInn/components/jin-edit/jin-icons.vue
+71
View File
@@ -0,0 +1,71 @@
<template>
<view class="content">
<view
class="icon"
:style="{color: color, fontSize: fontSize}"
v-html="type"
@click="toclick"
></view>
<view class="desc">{{ title }}</view>
</view>
</template>
<script>
export default {
props: {
type: {
type: String,
default: '&#xe644;'
},
color: {
type: String,
default: '#666666'
},
fontSize: {
type: String,
default: '32rpx'
},
title: {
type: String,
default: '说明'
}
},
methods: {
toclick() {
this.$emit('click');
}
}
}
</script>
<style scoped>
.content{
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 80upx;
min-width: 60px;
padding-bottom: 15upx;
}
.content .desc {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 8px;
color: #666;
line-height: 8px;
transform: translateY(-8px);
}
@font-face {
font-family: 'jin';
/** 阿里巴巴矢量图标库的字体库地址，可以替换自己的字体库地址 **/
src: url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype');
}
.icon {
font-family: jin !important;
}
</style>
pagesInn/components/jin-edit/readme.md
+65
View File
@@ -0,0 +1,65 @@
## jin-edit 基于editor的富文本编辑器
### 兼容性
这是一个uni-app的通用组件，兼容微信小程序端、安卓端、ios端（未测试）、H5端。作者因没有ios设备无法对ios端进行测试，其他端测试无问题。
微信小程序 | APP | H5
:--: | :--: | :--:
√ | √ | √
我的HbuilderX版本2.6.7，不同的版本可能会造成不兼容的问题。
### 使用方式
1. 将此组件进入你的项目中的 /components/ 目录中
2. 在某个页面中使用该插件
- 在 `script` 中引用组件
```javascript
import jinEdit from '../../components/jin-edit/jin-edit.vue';
export default {
data() {
return {
}
},
components: {
jinEdit
},
methods: {
// 点击发布
editOk(res) {
console.log(res);
}
}
}
```
- 在 `template` 中使用组件
```html
<jinEdit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#"></jinEdit>
```
### Demo
[uni-jin（一个uni-app组件集合）](https://github.com/wangjinxin613/uni-jin)
### 参数
属性 | 类型 | 默认值 | 说明
:--: | :--: | :--: | :--:
showImgSize | Boolean | false | 点击图片时显示图片大小控件
showImgToolbar | Boolean | false | 点击图片时显示工具栏控件
showImgResize | Boolean | false | 点击图片时显示修改尺寸控件
placeholder | String | '' | 编辑器占位符
uploadFileUrl | String | '#' | 图片上传的服务器地址
fileKeyName | String | 'file' | 图片上传时的name
header | Object | - | 图片上传http请求的header
html | String | - | 初始化的html
### 方法
方法名 | 参数 | 说明
:--: | :--: | :--:
editOk | e={html,text,delta,isPublic} | 点击发布按钮触发
以上
pagesInn/inn/innHome.vue
+295 -128
View File
@@ -10,40 +10,34 @@
transparent="auto"
color='#ffffff'
/>
<!-- 7-3-->
<image
v-if="posterUrl.length > 0"
:src="webUrl + '/20230619110913307276.png'"
class="fixed-share"
@click="changeShare"
/>
<u-popup
:show="showShare"
mode="center"
bgColor="transparent"
>
<view class="box-share">
<view class="box-img">
<image
:src="webUrl + '/20230608112219219303.png'"
class="icon"
@click="changeShare"
/>
<image :src="posterUrl" class="main-img" />
</view>
<image
:src="webUrl + '/20230608112210135038.png'"
class="btn"
@click="saveImg"
/>
</view>
</u-popup>
<view class="cover-box">
<image
v-if="inn.coverType === 1"
:src="inn.cover"
class="full-img"
mode="widthFix"
/>
<view
v-if="inn.coverType === 2"
:style="{
'width': videoStyle.width,
'height': videoStyle.height
}"
class="video-box"
>
<video
:src="inn.cover"
:autoplay="true"
:controls="false"
:loop="true"
object-fit="contain"
play-btn-position="center"
class="video"
/>
</view>
</view>
<view class="innInfoWrap">
<view class="bg-color">
<view class="box-mask flex jc-between ai-end">
<view class="inn-name flex-0 more-t">{{ inn.name }}</view>
<view
@@ -58,54 +52,58 @@
</view>
</view>
</view>
<view class="innInfoWrap flex ai-end">
<view class="inn-logo flex-0" style="">
<view class="body-cont flex ai-end">
<view class="inn-logo flex-0">
<image :src="inn.logo" v-if="inn.logo"></image>
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
</view>
<view class="a3 flex jc-between ai-end" style="width: 100%">
<view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
<view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
保证金：{{ inn.guaranteeValue }}元
</view>
<view class="flex ai-center">
<view class="flex ai-center zan-favorite-wrap">
<view class="zan-box flex flex-0 ai-end" @click="zanInn">
<template v-if="isLike">
<image :src="webUrl + '/20230828095210280991.png'"/>
<text style="font-size: 28rpx;color: #FF564A;">{{ inn.zan }}</text>
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text class="on">{{ inn.zan }}</text>
</template>
<template v-else>
<image :src="webUrl + '/20230828095217616640.png'"/>
<text style="font-size: 28rpx;color: #333333;">{{ inn.zan }}</text>
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
<text>{{ inn.zan }}</text>
</template>
</view>
<view class="flex flex-0 ai-end">
<view class="flex flex-0 ai-end favorite-box">
<image
v-if="isFavorite"
:src="webUrl + '/20240113230535491918.png'"
style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
:src="webUrl + '/icon/icon-star-on.png'"
mode="scaleToFill"
class="icon"
@click="doneFavorite"
/>
<image
v-else
:src="webUrl + '/20240122093206161576.png'"
style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
:src="webUrl + '/icon/icon-star-off.png'"
mode="scaleToFill"
class="icon"
@click="doneFavorite"
/>
<text style="font-size: 28rpx;color: #333333;">{{ favoriteCount }}</text>
<text>{{ favoriteCount }}</text>
</view>
</view>
</view>
</view>
<view style="padding: 0 32rpx;margin-top: 10rpx;">
</view>
<view class="inn-signature-wrap">
<view class="triangle"></view>
<view class="inn-signature">
<text style="font-size: 24rpx;color: #080F1A;">{{ inn.content }}</text>
{{ inn.content }}
</view>
<view class="share-btn" @click="changeShare">
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
</view>
</view>
<view
<!-- <view
v-if="inn.desc != null && inn.desc.length > 0"
style="padding: 0 32rpx;margin-top: 30rpx;"
>
@@ -113,40 +111,35 @@
<text class="fixed">简介：</text>
<rich-text :nodes="inn.desc"/>
</view>
</view>
<view class="map-wrap acea-row row-center">
<image
:src="webUrl + '/20210225151241154614.png'"
style="height: 160rpx;width: 100%;"
</view> -->
<view v-if="inn.name" class="map-wrapper">
<view class="map-cont">
<map
:longitude="inn.longitude"
:latitude="inn.latitude"
style="width: 750rpx;height: 300rpx;"
/>
<view class="address-block acea-row row-middle">
<image
:src="webUrl + '/20220901223747933873.png'"
style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
/>
<text class="address-text">{{ inn.address }}</text>
</view>
<view class="buttons-block acea-row row-middle">
<!-- call 拨打电话-->
<!-- goRoom-->
<view class="phone-block acea-row row-middle" @click="call">
<image
:src="webUrl + '/20220901223901017309.png'"
style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
/>
<text style="font-size: 24rpx;color: #41454d;">联系客服</text>
<view class="bg"></view>
<view class="map-info">
<view class="map-info-hd">
<image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
</view>
<view class="map-info-bd">
{{ inn.address }}
</view>
<view class="map-info-ft flex">
<view class="item" @click="showLocation">
<image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
<view>导航</view>
</view>
<view class="item" @click="call">
<image :src="webUrl + '/page/hotel/phone.png'" class="img" />
<view>客服</view>
</view>
<view class="vline"></view>
<view class="map-block acea-row row-middle" @click="showLocation">
<image
style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
:src="webUrl + '/20220901223401590275.png'"
/>
<text style="font-size: 24rpx;color: #41454d;">进入地图</text>
</view>
</view>
</view>
<view
class="top-tab acea-row row-middle row-center"
style="margin-top: 60rpx;border-bottom: 1px solid #f5f5f5;"
@@ -168,7 +161,6 @@
<view v-show="activeIndex === 3" class="btLine"></view>
</view>
</view>
<!-- 企业文化 -->
<view v-if="activeIndex===0" class="pics-section" style="position: relative;">
<view class="pics-list acea-row" v-if="inn.pics.length>0">
@@ -178,7 +170,6 @@
</view>
</view>
</view>
<!-- 最新资讯 -->
<view v-if="activeIndex===1" class="info-section" style="position: relative;">
<view class="info-list acea-row row-column" v-if="infoArray.length>0">
@@ -196,14 +187,12 @@
</view>
<view class="info-card" style="flex-grow: 1;">
<view class="info-title line1" @click="infoClick(info)">{{ info.name }}</view>
<template v-if="info.type==='NT_TEXT'">
<view v-if="info.type==='NT_VIDEO'" style="width: 100%;margin-top: 10rpx;">
<video style="width: 100%;height: 264rpx;" :src="info.video" controls play-btn-position="center"/>
</view>
<template v-else>
<img-box style="width: 100%;" :imgList='info.resources' :num='info.resources.length'></img-box>
</template>
<view v-else style="width: 100%;margin-top: 10rpx;">
<video style="width: 100%;height: 264rpx;" :src="info.resources[0]" controls play-btn-position="center"/>
</view>
<view class="info-media-wrap acea-row row-middle row-between" style="margin-top: 10rpx;"
@click="infoClick(info)">
<view class="acea-row row-middle">
@@ -224,7 +213,6 @@
</view>
</view>
</view>
<!-- 商家资质 -->
<view
v-if="activeIndex===2"
@@ -238,7 +226,6 @@
mode="widthFix"
/>
</view>
<!-- v4 商品列表 -->
<view v-if="activeIndex===3" class="goods-section flex flex-wrap">
<view class="item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsConByID(item)">
@@ -256,13 +243,33 @@
</view>
</view>
</view>
<view v-if="isMyInn" class="bottom-view acea-row">
<view class="bottom-btn" style="margin-right: 1px; flex: 1;" @click="publishBtnClick">发布动态</view>
<view class="bottom-btn" style="flex: 1;" @click="modifyBtnClick">修改资料</view>
</view>
<view v-if="isMyInn" class="bottom-placeholder"></view>
<!-- 分享 -->
<u-popup
:show="showShare"
mode="center"
bgColor="transparent"
>
<view class="box-share">
<view class="box-img">
<image
:src="webUrl + '/20230608112219219303.png'"
class="icon"
@click="changeShare"
/>
<image :src="posterUrl" class="main-img" />
</view>
<image
:src="webUrl + '/20230608112210135038.png'"
class="btn"
@click="saveImg"
/>
</view>
</u-popup>
</view>
</template>
@@ -301,7 +308,9 @@ export default {
inn: {
cityName: '',
pics: [],
desc: ''
desc: '',
latitude: '',
longitude: ''
},
isMyInn: false, //是否是自己的客栈
goodsList: [],
@@ -312,7 +321,11 @@ export default {
partnerId: null,
isLike: false, //点赞
isFavorite: false,
favoriteCount: 0
favoriteCount: 0,
videoStyle: {
width: '750rpx',
height: '500rpx'
}
}
},
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
@@ -595,30 +608,65 @@ export default {
}
},
fetchInnDetail: function () {
let that = this;
const that = this
let reqFn = null
if (this.isMyInn) {
getHotelDetail(that.id).then((res) => {
that.inn = res.data;
that.isLike = res.data.zanVo !== null;
that.isFavorite = res.data.hasFavorite
that.favoriteCount = res.data.favoriteCount
}).catch((err) => {
}).finally(() => {
uni.stopPullDownRefresh();
});
reqFn = getHotelDetail
} else {
getHomeHotelDetail(that.id).then((res) => {
that.inn = res.data;
that.isLike = res.data.zanVo !== null;
that.isFavorite = res.data.hasFavorite
that.favoriteCount = res.data.favoriteCount
reqFn = getHomeHotelDetail
}
reqFn(that.id).then((res) => {
const { success, data } = res
if (success) {
that.inn = data
that.isLike = data.zanVo !== null
that.isFavorite = data.hasFavorite
that.favoriteCount = data.favoriteCount
that.inn.latitude = that.inn.latitude ? parseFloat(that.inn.latitude) : 24.993587
that.inn.longitude = that.inn.longitude ? parseFloat(that.inn.longitude) : 102.779656
// coverType: 1-图片,2-视频
if (data.coverType === 2) {
uni.getSystemInfo({
success: info => {
const screenWidth = info.windowWidth
that.videoStyle.width = screenWidth + 'px'
that.videoStyle.height = screenWidth * 500 / 750 + 'px'
}
})
// 视频宽高自适应
/*
uni.downloadFile({
url: data.cover,
success: downRes => {
const { tempFilePath } = downRes
if (tempFilePath) {
uni.getVideoInfo({
src: tempFilePath,
success: videoRes => {
const { width, height } = videoRes
uni.getSystemInfo({
success: info => {
const screenWidth = info.windowWidth
that.videoStyle.width = screenWidth + 'px'
that.videoStyle.height = screenWidth * height / width + 'px'
}
})
},
fail: err => {
console.log(err)
}
})
}
}
})
*/
}
}
}).catch((err) => {
}).finally(() => {
uni.stopPullDownRefresh();
});
}
},
initPoster() {
getPoster(this.id).then(({data}) => this.posterUrl = data);
@@ -770,20 +818,10 @@ export default {
.full-img {
width: 750rpx;
}
.box-mask {
position: absolute;
bottom: 0;
right: 0;
width: 596rpx;
box-sizing: border-box;
padding: 0 20rpx 12rpx;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
.city-section {
width: 256rpx;
margin-left: 20rpx;
}
.video {
display: block;
width: 100%;
height: 100%;
}
}
@@ -796,14 +834,28 @@ export default {
font-size: 22rpx;
line-height: 1;
}
.zan-favorite-wrap {
font-size: 32rpx;
color: #333;
.on {
color: #FF564A;
}
}
.zan-box {
image {
width: 32rpx;
height: 32rpx;
.img {
width: 36rpx;
height: 36rpx;
margin: 0 8rpx 0 0;
vertical-align: middle;
}
}
.favorite-box {
.icon {
width: 36rpx;
height: 36rpx;
margin: 0 8rpx 0 30rpx;
}
}
.store-img {
width: 686rpx;
@@ -885,10 +937,37 @@ export default {
.innInfoWrap {
position: relative;
margin-top: -66rpx;
padding: 0 18*2rpx;
margin-top: -76rpx;
padding: 20rpx 36rpx;
line-height: 1;
z-index: 1;
.bg-color {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
height: 50%;
background: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
.box-mask {
position: absolute;
bottom: 0;
right: 0;
left: 166rpx;
box-sizing: border-box;
padding: 0 32rpx 12rpx 0;
.city-section {
width: 256rpx;
margin-left: 20rpx;
}
}
}
.body-cont {
position: relative;
z-index: 2;
}
}
.inn-logo {
@@ -942,12 +1021,39 @@ export default {
font-size: 10*2rpx;
color: #FFFFFF;
}
.inn-signature-wrap {
position: relative;
z-index: 5;
padding: 0 32rpx;
margin: 20rpx 0 0 0;
.triangle {
position: absolute;
top: -20rpx;
left: 72rpx;
width: 0;
height: 0;
border-left: 20rpx solid transparent;
border-right: 20rpx solid transparent;
border-bottom: 24rpx solid rgba(243,243,246,0.39);
}
.inn-signature {
background-image: url('http://admin-api.xdd618.com/file/pic/20210225101530789767.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
padding: 20rpx;
border-radius: 8rpx;
font-size: 24rpx;
color: #080F1A;
background: rgba(243,243,246,0.39);
box-shadow: 0px 6px 12px rgba(0,0,0,0.12);
}
.share-btn {
position: absolute;
right: 0;
bottom: -68rpx;
.img {
width: 212rpx;
height: 60rpx;
}
}
}
.inn-intro-bold {
@@ -1152,4 +1258,65 @@ export default {
color:#A6AAB3;
font-size:28rpx;
}
.map-wrapper {
position: relative;
z-index: 2;
height: 200rpx;
margin: 40rpx 0 0 0;
overflow: hidden;
.map-cont {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
opacity: 0.3;
transform: translateY(-50rpx);
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
height: 60rpx;
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.map-info {
position: relative;
z-index: 5;
display: flex;
align-items: center;
padding: 40rpx 32rpx;
color: #333;
font-size: 14px;
.map-info-hd {
.icon {
display: block;
width: 56rpx;
height: 56rpx;
}
}
.map-info-bd {
flex: 1;
padding: 0 60rpx 0 20rpx;
line-height: 60rpx;
}
.map-info-ft {
.item + .item {
margin: 0 0 0 36rpx;
}
.item {
text-align: center;
font-weight: bold;
.img {
display: block;
width: 72rpx;
height: 72rpx;
margin: 0 0 20rpx 0;
}
}
}
}
}
</style>
pagesInn/inn/innInfoDetail.vue
+1 -1
View File
@@ -20,7 +20,7 @@
</view>
<view class="video-box" v-if="info.type==='NT_VIDEO'">
<video style="width: 100%;height: 320rpx;" :src="info.resources[0]" controls play-btn-position="center"/>
<video style="width: 100%;height: 320rpx;" :src="info.video" controls play-btn-position="center"/>
</view>
<view class="content-box">
pagesInn/inn/innInfoPublish.vue
+87 -35
View File
@@ -1,38 +1,69 @@
<template>
<view class="page-info-publish">
<view class="tab-box flex jc-center">
<text :class="{'active':tabIndex==index}" v-for="(item,index) in tabData" :key="item"
@click="changeTab(index)">{{item.label}}</text>
<text
v-for="(item,index) in tabData"
:key="item"
:class="{
'active': tabIndex === index
}"
@click="changeTab(index)"
>{{item.label}}</text>
</view>
<form @submit="formSubmit">
<view class="form-item">
<view class="title">标题:</view>
<input v-model="title" type="text" placeholder="请输入动态标题..."
placeholder-style="font-size:24rpx;color:#C2C5CC;" />
<input
v-model="form.title"
type="text"
placeholder="请输入动态标题..."
placeholder-style="font-size:24rpx;color:#C2C5CC;"
class="inp inp-input"
/>
</view>
<view class="form-item">
<textarea class="content-style" v-model="content" placeholder="请输入动态内容..."
placeholder-style="font-size:24rpx;color:#C2C5CC;" />
<view class="title">简介:</view>
<textarea
v-model="form.intro"
placeholder="请输入简介..."
placeholder-style="font-size:24rpx;color:#C2C5CC;"
class="content-style inp"
/>
</view>
<view class="form-item" v-if="showUpload">
<tm-upload :dataList="picsArray" :upload_img_wh="uploadImgWH" :upload_max="uploadMax" :url="uploadUrl" :type='uploadType'
:header="uploadHeader" @change="uploadedImgChange" />
<view v-if="uploadType === 'image'" class="title">图片(最多9张):</view>
<view v-else class="title">视频:</view>
<tm-upload
:dataList="picsArray"
:upload_img_wh="uploadImgWH"
:upload_max="uploadMax"
:url="uploadUrl"
:type='uploadType'
:header="uploadHeader"
@change="uploadedImgChange"
/>
</view>
<view class="form-item">
<view class="title">资讯详情:</view>
<view class="inp">
<jin-edit
:html="form.content"
placeholder="请输入内容"
height="320px"
@editOk="editOk"
/>
</view>
</view>
<view class="form-btn">
<button form-type="submit">发布</button>
</view>
</form>
</view>
</template>
<script>
import tmUpload from '@/pagesInn/components/tm-upload/tm-upload.vue';
import jinEdit from '@/pagesInn/components/jin-edit/jin-edit.vue';
import {
VUE_APP_API_URL
} from "@/config";
@@ -41,7 +72,8 @@
} from "@/api/inn.js";
export default {
components: {
tmUpload
tmUpload,
jinEdit
},
data() {
return {
@@ -73,8 +105,11 @@
}
],
tabIndex: 0,
title: "",
content: ""
form: {
title: '',
intro: '',
content: ''
}
}
},
onLoad(option) {
@@ -91,38 +126,40 @@
this.showUpload = true;
},100)
},
editOk(res) {
this.form.content = res.html
},
//文件上传结果
uploadedImgChange: function(uploadedFilesList) {
this.uploadedFilesArray = uploadedFilesList;
},
formSubmit(e) {
if (this.title.length == 0) {
if (!this.form.title) {
this.$dialog.error("请输入动态标题");
return;
}
if (this.content.length == 0) {
this.$dialog.error("请输入动态内容");
if (!this.form.intro) {
this.$dialog.error("请输入简介");
return;
}
if (!this.form.content) {
this.$dialog.error("请输入资讯详情");
return;
}
if (this.uploadedFilesArray.length == 0) {
this.$dialog.error("请上传动态图片或视频");
return;
}
let param = {
hotelId: this.hotelId,
name: this.title,
content: this.content,
type: this.tabData[this.tabIndex].type,
resources: this.uploadedFilesArray.join(",")
};
uni.showLoading();
postHotelNewsAdd(param).then(res => {
postHotelNewsAdd({
hotelId: this.hotelId,
name: this.form.title,
intro: this.form.intro,
content: this.form.content,
type: this.uploadType === 'image' ? 'NT_TEXT' : 'NT_VIDEO',
resources: this.uploadType === 'image' ? this.uploadedFilesArray : [],
video: this.uploadType === 'image' ? '' : this.uploadedFilesArray[0]
}).then(res => {
uni.hideLoading();
this.$dialog.toast({
mes: "发布成功!"
@@ -141,6 +178,7 @@
<style lang="scss">
.page-info-publish {
padding: 0 0 80rpx 0;
font-size: 28rpx;
.tab-box {
@@ -173,10 +211,24 @@
background: #fff;
.content-style {
width: 100%;
height: 200rpx;
color: #C2C5CC;
box-sizing: border-box;
color: #333;
font-size: 28rpx;
}
.inp {
padding: 10rpx 16rpx;
border: 1px solid #eee;
border-radius: 6rpx;
}
.inp-input {
height: 72rpx;
line-height: 72rpx;
}
.title {
margin: 0 0 10rpx 0;
}
}
.form-btn {