Style(店铺):界面调整

pagesInn/components/jin-edit/jin-edit.vue

@@ -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

@@ -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

@@ -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

@@ -10,102 +10,100 @@
       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 class="box-mask flex jc-between ai-end">
+      <view
-        <view class="inn-name flex-0 more-t">{{ inn.name }}</view>
+        v-if="inn.coverType === 2"
-        <view
+        :style="{
-          v-if="inn.cityName != undefined && inn.cityName.length > 0"
+          'width': videoStyle.width,
-          class="city-section flex jc-end ai-center"
+          'height': videoStyle.height
-        >
+        }"
-          <image
+        class="video-box"
-            :src="webUrl + '/20210807215539157727.png'"
+      >
-            style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
+        <video
-          />
+          :src="inn.cover"
-          <text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
+          :autoplay="true"
-        </view>
+          :controls="false"
+          :loop="true"
+          object-fit="contain"
+          play-btn-position="center"
+          class="video"
+        />
       </view>
     </view>
-    <view class="innInfoWrap flex ai-end">
+    <view class="innInfoWrap">
-      <view class="inn-logo flex-0" style="">
+      <view class="bg-color">
-        <image :src="inn.logo" v-if="inn.logo"></image>
+        <view class="box-mask flex jc-between ai-end">
-        <image :src="webUrl + '/20230609145651814148.png'" v-else/>
+          <view class="inn-name flex-0 more-t">{{ inn.name }}</view>
-      </view>
+          <view
-
+            v-if="inn.cityName != undefined && inn.cityName.length > 0"
-      <view class="a3 flex jc-between ai-end" style="width:100%">
+            class="city-section flex jc-end ai-center"
-        <view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
+          >
-        <view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
+            <image
-          保证金：{{ inn.guaranteeValue }}元
+              :src="webUrl + '/20210807215539157727.png'"
-        </view>
+              style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
-        <view class="flex ai-center">
+            />
-          <view class="zan-box flex flex-0 ai-end" @click="zanInn">
+            <text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
-            <template v-if="isLike">
-              <image :src="webUrl + '/20230828095210280991.png'"/>
-              <text style="font-size: 28rpx;color: #FF564A;">{{ inn.zan }}</text>
-            </template>
-            <template v-else>
-              <image :src="webUrl + '/20230828095217616640.png'"/>
-              <text style="font-size: 28rpx;color: #333333;">{{ inn.zan }}</text>
-            </template>
           </view>
-          <view class="flex flex-0 ai-end">
+        </view>
-            <image
+      </view>
-              v-if="isFavorite"
+      <view class="body-cont  flex ai-end">
-              :src="webUrl + '/20240113230535491918.png'"
+        <view class="inn-logo flex-0">
-              style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
+          <image :src="inn.logo" v-if="inn.logo"></image>
-              mode="scaleToFill"
+          <image :src="webUrl + '/20230609145651814148.png'" v-else/>
-              @click="doneFavorite"
+        </view>
-            />
+        <view class="a3 flex jc-between ai-end" style="width: 100%">
-            <image
+          <view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
-              v-else
+          <view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
-              :src="webUrl + '/20240122093206161576.png'"
+            保证金：{{ inn.guaranteeValue }}元
-              style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
+          </view>
-              mode="scaleToFill"
+          <view class="flex ai-center zan-favorite-wrap">
-              @click="doneFavorite"
+            <view class="zan-box flex flex-0 ai-end" @click="zanInn">
-            />
+              <template v-if="isLike">
-            <text style="font-size: 28rpx;color: #333333;">{{ favoriteCount }}</text>
+                <image :src="webUrl + '/icon/icon-like.png'" class="img" />
+                <text class="on">{{ inn.zan }}</text>
+              </template>
+              <template v-else>
+                <image :src="webUrl + '/icon/icon-like.png'" class="img" />
+                <text>{{ inn.zan }}</text>
+              </template>
+            </view>
+            <view class="flex flex-0 ai-end favorite-box">
+              <image
+                v-if="isFavorite"
+                :src="webUrl + '/icon/icon-star-on.png'"
+                mode="scaleToFill"
+                class="icon"
+                @click="doneFavorite"
+              />
+              <image
+                v-else
+                :src="webUrl + '/icon/icon-star-off.png'"
+                mode="scaleToFill"
+                class="icon"
+                @click="doneFavorite"
+              />
+              <text>{{ favoriteCount }}</text>
+            </view>
           </view>
         </view>
       </view>
     </view>
-    <view style="padding: 0 32rpx;margin-top: 10rpx;">
+    <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> -->
-    <view class="map-wrap acea-row row-center">
+    <view v-if="inn.name" class="map-wrapper">
-      <image
+      <view class="map-cont">
-        :src="webUrl + '/20210225151241154614.png'"
+        <map
-        style="height: 160rpx;width: 100%;"
+          :longitude="inn.longitude"
-      />
+          :latitude="inn.latitude"
-      <view class="address-block acea-row row-middle">
+          style="width: 750rpx;height: 300rpx;"
-        <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">
+      <view class="bg"></view>
-        <!-- call 拨打电话-->
+      <view class="map-info">
-        <!--        goRoom-->
+        <view class="map-info-hd">
-        <view class="phone-block acea-row row-middle" @click="call">
+          <image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
-          <image
-            :src="webUrl + '/20220901223901017309.png'"
-            style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
-          />
-          <text style="font-size: 24rpx;color: #41454d;">联系客服</text>
         </view>
-        <view class="vline"></view>
+        <view class="map-info-bd">
-        <view class="map-block acea-row row-middle" @click="showLocation">
+          {{ inn.address }}
-          <image
+        </view>
-            style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
+        <view class="map-info-ft flex">
-            :src="webUrl + '/20220901223401590275.png'"
+          <view class="item" @click="showLocation">
-          />
+            <image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
-          <text style="font-size: 24rpx;color: #41454d;">进入地图</text>
+            <view>导航</view>
+          </view>
+          <view class="item" @click="call">
+            <image :src="webUrl + '/page/hotel/phone.png'" class="img" />
+            <view>客服</view>
+          </view>
         </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>
-
+            <view v-if="info.type==='NT_VIDEO'" style="width: 100%;margin-top: 10rpx;">
-            <template v-if="info.type==='NT_TEXT'">
+              <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) => {
+        reqFn = getHotelDetail
-          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();
-        });
       } else {
-        getHomeHotelDetail(that.id).then((res) => {
+        reqFn = getHomeHotelDetail
-          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(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;
   }
-
+  .video {
-  .box-mask {
+    display: block;
-    position: absolute;
+    width: 100%;
-    bottom: 0;
+    height: 100%;
-    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;
-    }
   }
 }
 
@@ -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 {
+  .img {
-    width: 32rpx;
+    width: 36rpx;
-    height: 32rpx;
+    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;
+  margin-top: -76rpx;
-  padding: 0 18*2rpx;
+  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 {
-.inn-signature {
+  position: relative;
-  background-image: url('http://admin-api.xdd618.com/file/pic/20210225101530789767.png');
+  z-index: 5;
-  background-repeat: no-repeat;
+  padding: 0 32rpx;
-  background-size: 100% 100%;
+  margin: 20rpx 0 0 0;
-  padding: 20rpx;
+  .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 {
+    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

@@ -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

@@ -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"
+      <text
-        @click="changeTab(index)">{{item.label}}</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="请输入动态标题..."
+        <input
-          placeholder-style="font-size:24rpx;color:#C2C5CC;" />
+          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="请输入动态内容..."
+        <view class="title">简介:</view>
-          placeholder-style="font-size:24rpx;color:#C2C5CC;" />
+        <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'
+        <view v-if="uploadType === 'image'" class="title">图片(最多9张):</view>
-          :header="uploadHeader" @change="uploadedImgChange" />
+        <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: "",
+        form: {
-        content: ""
+          title: '',
+          intro: '',
+          content: ''
+        }
       }
     },
     onLoad(option) {
@@ -83,46 +118,48 @@
     methods: {
       changeTab(index) {
         this.tabIndex = index;
-        this.showUpload=false;
+        this.showUpload = false;
-        this.uploadType= this.tabData[index].uploadType;
+        this.uploadType = this.tabData[index].uploadType;
-        this.uploadCount= this.tabData[index].uploadCount;
+        this.uploadCount = this.tabData[index].uploadCount;
         
         setTimeout(()=>{
-          this.showUpload=true;
+          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.form.intro) {
-        if (this.content.length == 0) {
+          this.$dialog.error("请输入简介");
-          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 {