ws

nnzwminiapp/pagesPublic/pages/tdcr/details/detail.js

@@ -1,5 +1,5 @@
 // pagesPublic/pages/tdcr/details/detail.js
-const {imgUrl} = require('../../api/request')
+const { imgUrl } = require('../../api/request')
 Page({
 
   /**
@@ -18,19 +18,107 @@ Page({
     }, {
       label: '其他地块',
     }],
-    tabActive: 1,
+    tabActive: 0,
     map: {
       longitude: 106.644341,
       latitude: 29.501202
-    }
+    },
+    dataIndex: 0,
+    list: [{
+      longitude: 106.596361,
+      latitude: 29.579387,
+      name: '中西医结合医院地块',
+      img: 'zsyy.png',
+      time: '2024年4月',
+      description: '项目位于南岸区弹子石组团，南靠重庆卷烟厂，北邻弹子石新街，项目范围面积2.44公顷（36.6亩） 。项目周边以住宅小区为主，东北侧分布有弹子石、长嘉汇商业购物中心，其他主要以沿街生活配套性商业为主；周边2KM范围内分布有三所小学、四所中学、两处医院，公共配套设施较为完善。',
+      area: 36.6,
+      status: '已开始供地',
+      contstructionArea: 5.58,
+      use: '居民用地',
+      progress: '在第五人民医院搬迁至新址后，计划将中西医结合医院搬迁至原第五人民医院院区，目前第五人民医院新址办公楼正在修建，中西医结合医院预计2024年8月进行搬迁。地块内涉及2处未定级文保单位（文幼章故居、老教会楼），私房约300户(住宅291户，非住宅9户)，面积住宅17428平方米，非住宅2321平方米。',
+      rate: 4,
+      dutyUnit: '区土储中心',
+      phoneNum: 12345,
+      polygon: [
+        {
+          longitude: 106.594297,
+          latitude: 29.578465
+        },
+        {
+          longitude: 106.594452,
+          latitude: 29.578218
+        },
+        {
+          longitude: 106.595821,
+          latitude: 29.577567
+        },
+        {
+          longitude: 106.596113,
+          latitude: 29.577515
+        },
+        {
+          longitude: 106.596965,
+          latitude: 29.578226
+        },
+        {
+          longitude: 106.597249,
+          latitude: 29.578383
+        },
+        {
+          longitude: 106.597334,
+          latitude: 29.578465
+        },
+        {
+          longitude: 106.597334,
+          latitude: 29.57869
+        },
+        {
+          longitude: 106.597275,
+          latitude: 29.578839
+        },
+        {
+          longitude: 106.597375,
+          latitude: 29.579041
+        },
+        {
+          longitude: 106.597103,
+          latitude: 29.579513
+        },
+        {
+          longitude: 106.595184,
+          latitude: 29.579925
+        },
+        {
+          longitude: 106.594943,
+          latitude: 29.57982
+        }
+      ],
+      "surroundingFacilities": [
+        {
+          "name": "重庆市第11中学", "type": "教育"
+        }, {
+          "name": "弹子石老街景区", "type": "商业"
+        }, {
+          "name": "泽科弹子石中心", "type": "商业"
+        }
+      ]
+    }]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    const _this = this
     this.setData({
-      headerStyle: wx.getMenuButtonBoundingClientRect()
+      headerStyle: wx.getMenuButtonBoundingClientRect(),
+      dataIndex: options.index,
+      polygons: [{
+        dashArray: [10, 10],
+        strokeColor: '#ffe20063',
+        fillColor: '#ffe20063',
+        points: _this.data.list[options.index].polygon
+      }]
     })
   },
 
@@ -89,5 +177,11 @@ Page({
   },
   goBack() {
     wx.navigateBack()
+  },
+  callPhone() {
+    const _this = this
+    wx.makePhoneCall({
+      phoneNumber: _this.data.list[_this.data.dataIndex].phoneNum
+    })
   }
 })

nnzwminiapp/pagesPublic/pages/tdcr/details/detail.wxml

@@ -2,7 +2,7 @@
 <view class="main" style="background-image: url({{imgPath}}/index/bg.png);">
   <view class="header" style="height: {{headerStyle.height}}px;line-height: {{headerStyle.height}}px;margin-top: {{headerStyle.top}}px;"><image class="go-back" bindtap="goBack" src="{{imgPath}}/details/back.png" />{{title}}</view>
   <view class="map-content" style="background-image: url({{imgPath}}/details/map-border.png);">
-    <map class="map" enable-satellite="true" longitude="{{map.longitude}}" latitude="{{map.latitude}}"></map>
+    <map class="map" enable-satellite="true" longitude="{{list[dataIndex].longitude}}" latitude="{{list[dataIndex].latitude}}" polygons="{{polygons}}"></map>
   </view>
   <view class="tab">
     <view class="tab-item" wx:for="{{tabs}}" style="{{tabActive == index ? 'background-image: url(' + imgPath + '/details/tab-bg.png);' : ''}}" data-index="{{index}}" bindtap="tabEvent">{{item.label}}</view>
@@ -13,7 +13,7 @@
     <include wx:if="{{tabActive == 2}}" src="./wxml/periphery.wxml"/>
     <include wx:if="{{tabActive == 3}}" src="./wxml/other.wxml"/>
   </view>
-  <view class="bottom-btn" style="background-image: url({{imgPath}}/details/btn-bg.png);">
+  <view class="bottom-btn" bindtap="callPhone" style="background-image: url({{imgPath}}/details/btn-bg.png);">
     <image src="{{imgPath}}/details/icon-phone.png"/>
     <text>与我联系</text>
   </view>

nnzwminiapp/pagesPublic/pages/tdcr/details/wxml/info.wxml

@@ -1,7 +1,7 @@
 <view class="info-content">
-  <view class="i-title">廖家山地块</view>
+  <view class="i-title">{{list[dataIndex].name}}</view>
   <view class="i-introduce">基本介绍</view>
-  <view class="i-introduce-content">廖家山地块位于南岸区海棠溪街道，根据 2024年供地计划，由区土储中心作为项目业主负责该地块出让工作，该地块拟于2024年3月底前出让，计划供应面积约26亩，规划用地性质为居住用地，容积率 2.5，总计容建筑面积约4.2万平方米。</view>
+  <view class="i-introduce-content">{{list[dataIndex].description}}</view>
   <view class="i-hr"></view>
   <view class="i-introduce">核心卖点</view>
   <view class="i-introduce-content">项目周边城市功能丰富、设施配套完善。</view>

nnzwminiapp/pagesPublic/pages/tdcr/details/wxml/survey.wxml

@@ -1,38 +1,38 @@
 <view class="survey-content">
-  <view class="s-title">廖家山地块</view>
-  <text class="s-type">已开始供地</text>
-  <image class="s-img" src="{{imgPath}}/details/1711353373724.png" />
+  <view class="s-title">{{list[dataIndex].name}}</view>
+  <text class="s-type">{{list[dataIndex].status}}</text>
+  <image class="s-img" src="{{imgPath}}/details/img/{{list[dataIndex].img}}" />
   <view class="s-list">
     <view class="s-item">
-      <view class="s-item-t"><text class="s-item-num">26</text>亩</view>
+      <view class="s-item-t"><text class="s-item-num">{{list[dataIndex].area}}</text>亩</view>
       <view class="s-item-f">供应面积</view>
     </view>
     <view class="s-item">
-      <view class="s-item-t"><text class="s-item-num">26万</text>㎡</view>
+      <view class="s-item-t"><text class="s-item-num">{{list[dataIndex].contstructionArea}}</text>㎡</view>
       <view  class="s-item-f">建筑面积</view>
     </view>
     <view class="s-item">
-      <view class="s-item-t"><text class="s-item-num">26</text></view>
+      <view class="s-item-t"><text class="s-item-num">{{list[dataIndex].rate}}</text></view>
       <view  class="s-item-f">容积率</view>
     </view>
   </view>
-  <view class="s-use">计划供地用途<text>居住用地</text></view>
+  <view class="s-use">计划供地用途<text>{{list[dataIndex].use}}</text></view>
   <view class="s-hr"></view>
   <view class="s-footer">
     <view class="s-f-item">
       <image src="{{imgPath}}/details/icon-order.png"/>
       <text>征地拆迁整治情况：</text>
-      <text class="s-f-i-txt">区已完成征收，公交首末站未搬迁</text>
+      <text class="s-f-i-txt">{{list[dataIndex].progress}}</text>
     </view>
     <view class="s-f-item">
       <image src="{{imgPath}}/details/icon-time.png"/>
       <text>计划供地情况：</text>
-      <text class="s-f-i-txt">2024年3月</text>
+      <text class="s-f-i-txt">{{list[dataIndex].time}}</text>
     </view>
     <view class="s-f-item">
       <image src="{{imgPath}}/details/icon-h.png"/>
       <text>责任单位：</text>
-      <text class="s-f-i-txt">区土储中心</text>
+      <text class="s-f-i-txt">{{list[dataIndex].dutyUnit}}</text>
     </view>
   </view>
 </view>

nnzwminiapp/pagesPublic/pages/tdcr/index.js

@@ -63,20 +63,27 @@ Page({
       flag: 0,
       lastX: 0,
       lastY: 0
-    }
+    },
+    animationData: {},
+    currentIndex: 0,
+    isAnimating: false
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
-
+    this.initAnimations();
+    setTimeout(() => {
+     this.startAnimationLoop();
+    }, 500);
   },
 
   /**
@@ -169,5 +176,72 @@ Page({
       touchData
     })
   },
-
+  initAnimations: function() {
+    const list = this.data.list;
+    list.forEach((item, index) => {
+      this.createAnimation(index);
+    });
+  },
+  createAnimation: function(index) {
+    const animation = wx.createAnimation({
+      duration: 1000, // 动画持续时间
+      timingFunction: 'ease', // 动画效果
+    });
+  
+    this.setData({
+      ['animationData[' + index + ']']: animation.export(),
+    });
+  },
+  startAnimationLoop: function() {
+    const list = this.data.list;
+    const currentIndex = this.data.currentIndex;
+    
+    if (currentIndex < list.length) {
+      if (this.data.isAnimating) return;
+      this.setData({
+        isAnimating: true
+      })
+      // 获取当前索引的动画对象
+      const animation = wx.createAnimation({
+        duration: 1000,
+        timingFunction: 'linear',
+      });
+  
+      // 放大动画
+      animation.scale(1.2, 1.2).step();
+  
+      // 更新动画数据
+      this.setData({
+        ['animationData[' + currentIndex + ']']: animation.export(),
+        isAnimating: this.data.isAnimating
+      });
+  
+      // 设置动画结束后回调
+      setTimeout(() => {
+        // 恢复到原始大小
+        const restoreAnimation = wx.createAnimation({
+          duration: 1000,
+          timingFunction: 'linear',
+        });
+        restoreAnimation.scale(1, 1).step();
+  
+        this.setData({
+          ['animationData[' + currentIndex + ']']: restoreAnimation.export(),
+          isAnimating: false
+        });
+  
+        // 动画结束后，索引递增，如果到达列表末尾，则重置为0
+        this.setData({
+          currentIndex: (currentIndex + 1) % list.length,
+        });
+        if ((currentIndex + 1) % list.length == 0 && currentIndex != 0) {
+          setTimeout(() => {
+            this.startAnimationLoop();
+          }, 2000);
+        } else {
+          this.startAnimationLoop();
+        }
+      }, 1500);
+    }
+  },
 })

nnzwminiapp/pagesPublic/pages/tdcr/index.wxml

@@ -19,7 +19,7 @@
     </view>
   </view>
   <view class="list">
-    <view class="list-item" wx:for="{{list}}" style="margin-left: {{item.left}}vw;margin-top: {{item.top}}vh;">
+    <view class="list-item" wx:for="{{list}}" wx:key="index" animation="{{animationData[index]}}" style="margin-left: {{item.left}}vw;margin-top: {{item.top}}vh;">
       <image class="list-item-img" src="{{imgPath}}/index/{{item.icon}}"/>
       <view class="list-item-txt"><text>{{item.txt}}</text></view>
     </view>

nnzwminiapp/pagesPublic/pages/tdcr/index.wxss

@@ -71,4 +71,4 @@
   text-align: center;
   margin: 0 auto;
   margin-top: 3vh;
-}
+}

nnzwminiapp/pagesPublic/pages/tdcr/tdcr-list/index.js

@@ -15,7 +15,92 @@ Page({
     flag: 0,
     lastX: 0,
     lastY: 0
-  }
+  },
+  list: [{
+    left: 18.5,
+    top: 23,
+    nameStyle: {
+      txt: '中西医结合医院',
+      img: 'tdcrlist7.png'
+    },
+    lineStyle: {
+      height: 25,
+      left: 3,
+      top: -0.5
+    },
+    postionStyle: {
+      top: -0.5,
+      left: 0.5
+    }
+  }, {
+    left: 27,
+    top: 29.5,
+    nameStyle: {
+      txt: '廖家山地块',
+      img: 'tdcrlist7.png'
+    },
+    lineStyle: {
+      height: 13,
+      left: 3,
+      top: -0.5
+    },
+    postionStyle: {
+      top: -0.5,
+      left: 0.5
+    }
+  }, {
+    left: 30,
+    top: 36.5,
+    nameStyle: {
+      txt: '南坪东路588号',
+      img: 'tdcrlist8.png',
+      color: '#0F2887',
+      x: 2
+    },
+    lineStyle: {
+      height: 18,
+      left: 5,
+      top: -0.5
+    },
+    postionStyle: {
+      top: -0.5,
+      left: 2.5
+    }
+  }, {
+    left: 41,
+    top: 49,
+    nameStyle: {
+      txt: '四公里片区',
+      img: 'tdcrlist7.png',
+      top: 24.5
+    },
+    lineStyle: {
+      height: 8,
+      left: 3,
+      top: 12
+    },
+    postionStyle: {
+      top: -0.5,
+      left: 0.5
+    }
+  }, {
+    left: 27,
+    top: 47.5,
+    nameStyle: {
+      txt: '双峰山1号地块',
+      img: 'tdcrlist7.png',
+      top: 33
+    },
+    lineStyle: {
+      height: 12,
+      left: 3,
+      top: 16
+    },
+    postionStyle: {
+      top: -0.5,
+      left: 0.5
+    }
+  }]
   },
 
   /**
@@ -121,9 +206,10 @@ Page({
       touchData
     })
   },
-  gotoDetail() {
+  gotoDetail(e) {
+    if (e.target.dataset.index != 0) return
     wx.navigateTo({
-      url: '../details/detail',
+      url: '../details/detail?index=' + e.target.dataset.index,
     })
   }
 })

nnzwminiapp/pagesPublic/pages/tdcr/tdcr-list/index.wxml

@@ -3,40 +3,12 @@
   capture-bind:touchmove="handleTouchmove"
   capture-bind:touchstart="handleTouchstart"
   capture-catch:touchend="handleTouchend"
- class="list_main" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist3.png'); background-size: 100% 100%;">
-	<view style="height: 14vh;"></view>
-	<view class="map-block" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist1.png'); background-repeat: no-repeat; ">
-	
-		<view class="block-name1" style="background-image:url('{{imgUrl}}tdcrlist/tdcrlist7.png');">
-			中西医结合医院
-		</view>
-		<view class="block-name2" style="background-image:url('{{imgUrl}}tdcrlist/tdcrlist7.png');">
-			廖家山地块
-		</view>
-		<view class="block-name3" style="background-image:url('{{imgUrl}}tdcrlist/tdcrlist8.png');" bindtap="gotoDetail">
-			南坪东路588号
-		</view>
-		<view class="block-name4" style="background-image:url('{{imgUrl}}tdcrlist/tdcrlist7.png');">
-			四公里片区
-		</view>
-		<view class="block-name5" style="background-image:url('{{imgUrl}}tdcrlist/tdcrlist7.png');">
-			双峰山1号地块
-		</view>
-		<view class="jt postion1" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist11.png');">
-		</view>
-		<view class="jt postion2" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist11.png');">
-		</view>
-		<view class="jt postion3" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist11.png');">
-		</view>
-		<view class="jt postion4" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist11.png');">
-		</view>
-		<view class="jt postion5" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist11.png');">
-		</view>
-		<view class="line line1"></view>
-		<view class="line line2"></view>
-		<view class="line line3"></view>
-		<view class="line line4"></view>
-		<view class="line line5"></view>
+  class="main" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist3.png');">
+	<view class="map-block" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist1.png');">
+    <view class="map-block-item" wx:for="{{list}}" style="top: {{item.top}}vh;left: {{item.left}}vw;">
+      <view bindtap="gotoDetail" data-index="{{index}}" class="item-name" style="background-image:url('{{imgUrl}}tdcrlist/{{item.nameStyle.img}}');{{item.nameStyle.color ? 'color: ' + item.nameStyle.color + ';' : ''}}{{item.nameStyle.top ? 'top: ' + item.nameStyle.top + 'vh;' : ''}}{{item.nameStyle.left ? 'left: ' + item.nameStyle.left + 'vw;' : ''}}{{item.nameStyle.x ? 'background-position-x: ' + item.nameStyle.x + 'vw;' : ''}}">{{item.nameStyle.txt}}</view>
+      <view class="item-line" style="height: {{item.lineStyle.height}}vh;left: {{item.lineStyle.left}}vw;top: {{item.lineStyle.top}}vh;"></view>
+      <view class="item-postion" style="background-image: url('{{imgUrl}}tdcrlist/tdcrlist11.png');left: {{item.postionStyle.left}}vw;top: {{item.postionStyle.top}}vh;"></view>
+    </view>
 	</view>
-
 </view>

nnzwminiapp/pagesPublic/pages/tdcr/tdcr-list/index.wxss

@@ -1,167 +1,43 @@
 /* pagesPublic/pages/tdcr/tdcr-list/index.wxss */
 
-.list_main {
+.main {
 	width: 100%;
 	height: 100vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-
+  background-size: 100% 100%;
 }
 
 .map-block {
 	width: 80%;
-	height: 100vw;
-	background-size: 100% 100%;
-}
-
-.block-name1 {
-	width: 258rpx;
-	height: 85rpx;
-	line-height: 85rpx;
-	font-size: 30rpx;
-	font-weight: bold;
-	color: #00FFFF;
-	padding-left: 46rpx;
-	background-size: 100%;
-	background-repeat: no-repeat;
-	position: relative;
-	left: 68rpx;
-	top: -9rpx;
+	height: 47vh;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 }
-
-.block-name2 {
-	width: 234rpx;
-	height: 85rpx;
-	line-height: 85rpx;
-	font-size: 30rpx;
-	font-weight: bold;
-	color: #00FFFF;
-	padding-left: 61rpx;
-	background-size: 100%;
-	background-repeat: no-repeat;
-	position: relative;
-	left: 125rpx;
-	top: -2rpx;
+.map-block-item {
+  position: absolute;
 }
-
-.block-name3 {
-	width: 300rpx;
-	height: 85rpx;
-	line-height: 85rpx;
+.map-block-item .item-name {
+  width: 258rpx;
+  height: 85rpx;
+  line-height: 85rpx;
 	font-size: 30rpx;
 	font-weight: bold;
-	color: #0F2887;
-	padding-left: 46rpx;
-	background-size: 100%;
-	background-repeat: no-repeat;
-	position: relative;
-	left: 159rpx;
-	top: 0rpx;
-}
-
-.block-name4 {
-	width: 213rpx;
-	/* height: 85rpx; */
-	line-height: 78rpx;
-	font-size: 30rpx;
-	font-weight: bold;
-	color: #00FFFF;
-	padding-left: 46rpx;
-	background-size: 100%;
-	background-repeat: no-repeat;
-	position: relative;
-	left: 223rpx;
-	bottom: -480rpx;
-}
-
-.block-name5 {
-	width: 234rpx;
-	/* height: 85rpx; */
-	line-height: 85rpx;
-	font-size: 30rpx;
-	font-weight: bold;
-	color: #00FFFF;
-	padding-left: 46rpx;
-	background-size: 100%;
-	background-repeat: no-repeat;
-	position: relative;
-	left: 120rpx;
-	bottom: -485rpx;
-}
-
-.jt {
-	width: 40rpx;
+  color: #00FFFF;
+  background-size: 100% 100%;
+  position: relative;
+  text-align: center;
+  padding: 5rpx 20rpx;
+}
+.map-block-item .item-line {
+  border-left: dashed 1px #00FFFF;
+  width: 1rpx;
+  position: relative;
+}
+.map-block-item .item-postion {
+  width: 40rpx;
 	height: 40rpx;
-	background-size: 100%;
-	position: relative;
-	z-index: 40;
-}
-
-.postion1 {
-	top: -68rpx;
-	left: 133rpx;
-	z-index: 45;
-}
-
-.postion2 {
-	top: -26rpx;
-	left: 70rpx;
-	z-index: 45;
-}
-
-.postion3 {
-	top: 36rpx;
-	left: 172rpx;
-	z-index: 45;
-}
-
-.postion4 {
-	top: 46rpx;
-	left: 235rpx;
-	z-index: 45;
-}
-
-.postion5 {
-	top: 38rpx;
-	left: 135rpx;
-	z-index: 45;
-}
-
-.line {
-	border-left: dashed 1px #00FFFF;
-	width: 1rpx;
-	
-	position: relative;
-}
-
-.line1 {
-	height: 39vw;
-    top: -371rpx;
-    left: 191rpx;
-    z-index: 30;
-}
-.line2 {
-	height: 48vw;
-    top: -840rpx;
-    left: 88rpx;
-	z-index: 30;
-}
-.line3 {
-	height: 26vw;
-    top: -1113rpx;
-    left: 151rpx;
-	z-index: 30;
-}
-.line4 {
-	height: 15vw;
-    top: -827rpx;
-    left: 254rpx;
-	z-index: 30;
-}
-.line5 {
-	height: 20vw;
-    top: -903rpx;
-    left: 150rpx;
-	z-index: 30;
+  background-size: 100%;
+  position: relative;
 }