|
|
@@ -1,64 +1,237 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 旅游向导详情 -->
|
|
|
- <view class="cooperativeImgBox">
|
|
|
- <image :src="loadImgSrc('/snbj.png')" class="cooperativeImg"></image>
|
|
|
- </view>
|
|
|
- <view class="itemBox" v-for="(item, index) in list" :key="index">
|
|
|
- <view class="item">
|
|
|
- <span>
|
|
|
- {{ item.title }}：
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- {{ item.content }}
|
|
|
- </span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <!-- 旅游向导详情 -->
|
|
|
+ <view class="container">
|
|
|
+ <h1 class="title">{{fromData.titleName}}</h1>
|
|
|
+ <view class="wenzhangLy">
|
|
|
+ <!-- 头像昵称 -->
|
|
|
+ <view class="txTime">
|
|
|
+ <img class="uni-header-image"
|
|
|
+ :src="initInfo.headImg == null || initInfo.headImg == '' ? 'http://116.142.80.12:9000/10_03.png' : initInfo.headImg" />
|
|
|
+ <view class="time">
|
|
|
+ <p>{{initInfo.wechatName}}</p>
|
|
|
+ <span>{{fromData.createTime}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="wenzhangCont">
|
|
|
+ <view v-html="fromData.textDetails"></view>
|
|
|
+ <view v-for="(item, index) in fromData.pictureList" :key="index">
|
|
|
+ <image :src="loadImgSrcLocalhost(item)"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="fengexian"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [
|
|
|
- {
|
|
|
- title: "名称",
|
|
|
- content: "第十三号旅游向导",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "地址",
|
|
|
- content: "十三号街区地下研究所",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "负责人",
|
|
|
- content: "高耀",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "负责人电话",
|
|
|
- content: "13178945612",
|
|
|
- }
|
|
|
- ],
|
|
|
- cooperative: {
|
|
|
- name:"旅游向导1",
|
|
|
- address:"旅游向导地址1",
|
|
|
- chargePeople:"负责人1",
|
|
|
- chargePhone:"13103215236",
|
|
|
- imgUrl:"/profile/upload/2024/03/01/nacos_20240301145836A002.png"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- /**
|
|
|
- * 生命周期函数--监听页面加载
|
|
|
- */,
|
|
|
- onLoad(options) {
|
|
|
- console.log(666)
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- }
|
|
|
-};
|
|
|
+ import {
|
|
|
+ getDetails
|
|
|
+ } from '@/api/travelGuide/travelGuide.js';
|
|
|
+ import {
|
|
|
+ getUserInfo
|
|
|
+ } from '@/api/me/me.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ parentId: "",
|
|
|
+ fromData: {},
|
|
|
+ content: "",
|
|
|
+ initInfo: {
|
|
|
+ userId: null,
|
|
|
+ scoreNum: 0,
|
|
|
+ wechatName: "微信用户",
|
|
|
+ name: null,
|
|
|
+ headImg: null,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取数据
|
|
|
+ getDetails() {
|
|
|
+ getDetails(this.parentId).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.fromData = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUserInfoByUserId(userId) {
|
|
|
+ getUserInfo(userId).then(res => {
|
|
|
+ this.initInfo = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ */
|
|
|
+ ,
|
|
|
+ onLoad(options) {
|
|
|
+ this.parentId = options.id
|
|
|
+ this.getDetails()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady() {
|
|
|
+ this.userId = getApp().globalData.userId
|
|
|
+ this.getUserInfoByUserId(this.userId)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow() {},
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ onHide() {},
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload() {},
|
|
|
+ /**
|
|
|
+ * 页面相关事件处理函数--监听用户下拉动作
|
|
|
+ */
|
|
|
+ onPullDownRefresh() {},
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
+ onReachBottom() {},
|
|
|
+ /**
|
|
|
+ * 用户点击右上角分享
|
|
|
+ */
|
|
|
+ onShareAppMessage() {},
|
|
|
+ };
|
|
|
</script>
|
|
|
-<style>
|
|
|
-@import './details.css';
|
|
|
-</style>
|
|
|
+<style lang="scss">
|
|
|
+ @import './travelGuideDetails.css';
|
|
|
+
|
|
|
+ .collect {
|
|
|
+ .icon-shoucang:before {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .not-collect {}
|
|
|
+
|
|
|
+ .effectBix {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 50px;
|
|
|
+ font-family: 'Bebas Neue', cursive;
|
|
|
+ background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
|
|
|
+ border: 0;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56px;
|
|
|
+ outline: transparent;
|
|
|
+ position: absolute;
|
|
|
+ transform: rotate(-30deg);
|
|
|
+ right: 3%;
|
|
|
+ top: -5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .effectBox,
|
|
|
+ .effectBox::after {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'Bebas Neue', cursive;
|
|
|
+ background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
|
|
|
+ border: 0;
|
|
|
+ color: #fff;
|
|
|
+ opacity: 1;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56px;
|
|
|
+ outline: transparent;
|
|
|
+ position: relative;
|
|
|
+ left: 78%;
|
|
|
+ top: 113%;
|
|
|
+ transform: rotate(-30deg);
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .effectBox::after {
|
|
|
+ --slice-0: inset(50% 50% 50% 50%);
|
|
|
+ --slice-1: inset(80% -6px 0 0);
|
|
|
+ --slice-2: inset(50% -6px 30% 0);
|
|
|
+ --slice-3: inset(10% -6px 85% 0);
|
|
|
+ --slice-4: inset(40% -6px 43% 0);
|
|
|
+ --slice-5: inset(80% -6px 5% 0);
|
|
|
+
|
|
|
+ content: 'AVAILABLE NOW';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
|
|
|
+ text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
|
|
|
+ clip-path: var(--slice-0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .effectBox:hover::after {
|
|
|
+ animation: 1s glitch;
|
|
|
+ animation-timing-function: steps(2, end);
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes glitch {
|
|
|
+ 0% {
|
|
|
+ clip-path: var(--slice-1);
|
|
|
+ transform: translate(-20px, -10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 10% {
|
|
|
+ clip-path: var(--slice-3);
|
|
|
+ transform: translate(10px, 10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 20% {
|
|
|
+ clip-path: var(--slice-1);
|
|
|
+ transform: translate(-10px, 10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 30% {
|
|
|
+ clip-path: var(--slice-3);
|
|
|
+ transform: translate(0px, 5px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 40% {
|
|
|
+ clip-path: var(--slice-2);
|
|
|
+ transform: translate(-5px, 0px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ clip-path: var(--slice-3);
|
|
|
+ transform: translate(5px, 0px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 60% {
|
|
|
+ clip-path: var(--slice-4);
|
|
|
+ transform: translate(5px, 10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 70% {
|
|
|
+ clip-path: var(--slice-2);
|
|
|
+ transform: translate(-10px, 10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 80% {
|
|
|
+ clip-path: var(--slice-5);
|
|
|
+ transform: translate(20px, -10px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 90% {
|
|
|
+ clip-path: var(--slice-1);
|
|
|
+ transform: translate(-10px, 0px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ clip-path: var(--slice-1);
|
|
|
+ transform: translate(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
lchao