miniprogram / ruiwang · 提交

转到一个项目

作者 朱振飞
提交 9af503fc49d0491e0e40cae4c37c53baecc56a10 1 个父辈 bf7f3467

commit

内嵌 并排对比
正在显示 36 个修改的文件 包含 418 行增加 和 34 行删除
@@ -20,26 +20,31 @@ Page({ @@ -20,26 +20,31 @@ Page({
20 currentSwiper: 0, 20 currentSwiper: 0,
21 }, 21 },
22 changeIndicatorDots(e) { 22 changeIndicatorDots(e) {
  23 + console.log(e)
23 this.setData({ 24 this.setData({
24 indicatorDots: !this.data.indicatorDots 25 indicatorDots: !this.data.indicatorDots
25 }) 26 })
26 }, 27 },
27 changeAutoplay(e) { 28 changeAutoplay(e) {
  29 + consolle.log(e)
28 this.setData({ 30 this.setData({
29 autoplay: !this.data.autoplay 31 autoplay: !this.data.autoplay
30 }) 32 })
31 }, 33 },
32 intervalChange(e) { 34 intervalChange(e) {
  35 + console.log(e)
33 this.setData({ 36 this.setData({
34 interval: e.detail.value 37 interval: e.detail.value
35 }) 38 })
36 }, 39 },
37 durationChange(e) { 40 durationChange(e) {
  41 + console.log(e)
38 this.setData({ 42 this.setData({
39 duration: e.detail.value 43 duration: e.detail.value
40 }) 44 })
41 }, 45 },
42 swiperChange: function (e) { 46 swiperChange: function (e) {
  47 + conosle.log(e)
43 this.setData({ 48 this.setData({
44 currentSwiper: e.detail.current 49 currentSwiper: e.detail.current
45 }) 50 })
@@ -87,6 +92,7 @@ Page({ @@ -87,6 +92,7 @@ Page({
87 wx.navigateTo({ 92 wx.navigateTo({
88 url: '../about/about' 93 url: '../about/about'
89 }) 94 })
  95 + console.log(1)
90 } 96 }
91 // 向右滑动 97 // 向右滑动
92 if (touchMove - touchDot >= 40 && time < 10) { 98 if (touchMove - touchDot >= 40 && time < 10) {
1 <!--pages/application/application.wxml--> 1 <!--pages/application/application.wxml-->
2 -<view class='app_lication_banner' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >  
3 - <swiper  
4 - bindchange='swiperChange'  
5 - autoplay="{{autoplay}}"  
6 - interval="{{interval}}"  
7 - duration="{{duration}}"  
8 - circular="{{circular}}"  
9 - > 2 +<view class='app_lication_banner'>
  3 + <swiper bindchange='swiperChange' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
10 <block wx:for="{{imgUrls}}" wx:key="index"> 4 <block wx:for="{{imgUrls}}" wx:key="index">
11 - <swiper-item catchtouchmove="stopTouchMove"> 5 + <swiper-item>
  6 + <!-- catchtouchmove="stopTouchMove" -->
12 <image src="{{item.url}}" class="slide-image" width="100%" height="100%" /> 7 <image src="{{item.url}}" class="slide-image" width="100%" height="100%" />
13 </swiper-item> 8 </swiper-item>
14 </block> 9 </block>
@@ -19,11 +14,7 @@ @@ -19,11 +14,7 @@
19 </block> 14 </block>
20 </view> 15 </view>
21 16
22 - <!-- 跳转下一页 -->  
23 - <view class='drop_img'>  
24 - <image src='http://pjq0ww1cj.bkt.clouddn.com/left.png' bindtap='backFun' style='margin-right:200rpx;'></image>  
25 - <image src='http://pjq0ww1cj.bkt.clouddn.com/right.png' bindtap="jumpFun"></image>  
26 - </view> 17 +
27 18
28 <!-- 客服 --> 19 <!-- 客服 -->
29 <view class='chat_peo'> 20 <view class='chat_peo'>
1 <!--pages/case/case.wxml--> 1 <!--pages/case/case.wxml-->
2 -<view class='case_wrap' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" > 2 +<view class='case_wrap' >
3 <!--banner --> 3 <!--banner -->
4 <view class='case_banner_box'> 4 <view class='case_banner_box'>
5 <swiper bindchange='swiperChange' 5 <swiper bindchange='swiperChange'
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 </view> 22 </view>
23 23
24 <!--案例类型 --> 24 <!--案例类型 -->
25 - <view class='case_box'> 25 + <view class='case_box' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
26 <view class='case_title'> 26 <view class='case_title'>
27 <view class='case_title_content'> 27 <view class='case_title_content'>
28 <view class='case_contnet_line'></view> 28 <view class='case_contnet_line'></view>
1 //index.js 1 //index.js
2 //获取应用实例 2 //获取应用实例
3 const app = getApp() 3 const app = getApp()
4 -var touchDot = 0;//触摸时的原点  
5 -var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动  
6 -var interval = "";// 记录/清理时间记录 4 +var touchDot = 0; //触摸时的原点
  5 +var time = 0; // 时间记录，用于滑动时且时间小于1s则执行左右滑动
  6 +var interval = ""; // 记录/清理时间记录
7 Page({ 7 Page({
8 data: { 8 data: {
9 - 9 + currentSwiper: 0,
  10 + autoplay: true,
  11 + interval: 5000,
  12 + duration: 1000,
  13 + circular: true,
  14 + contact: false
10 }, 15 },
11 //事件处理函数 16 //事件处理函数
12 - bindViewTap: function () { 17 + bindViewTap: function() {
13 18
14 }, 19 },
15 - onLoad: function () { 20 + firstChange(e){
  21 + let title = e.detail.current == '0' ? '锐网科技案例集锦' : e.detail.current == '1' ? '锐网科技':'政府案例';
  22 + if (e.detail.current == '2'){
  23 + this.setData({
  24 + contact: true
  25 + })
  26 + }else{
  27 + this.setData({
  28 + contact: false
  29 + })
  30 + }
  31 + wx.setNavigationBarTitle({
  32 + title: title,
  33 + })
  34 + },
  35 + onLoad: function() {
16 //首先获取小程序实例，访问app.js中的函数 36 //首先获取小程序实例，访问app.js中的函数
17 //调用show函数，传参 37 //调用show函数，传参
18 //注意：查看上面show函数定义查看参数含义 38 //注意：查看上面show函数定义查看参数含义
@@ -22,21 +42,21 @@ Page({ @@ -22,21 +42,21 @@ Page({
22 //第四个参数是需要修改为的透明度，这里是1，表示从初始的class="init"中定义的透明度0修改到1 42 //第四个参数是需要修改为的透明度，这里是1，表示从初始的class="init"中定义的透明度0修改到1
23 app.slideupshow(this, 'slide_up1', 0, 1); 43 app.slideupshow(this, 'slide_up1', 0, 1);
24 app.sliderightshow(this, 'slide_up2', 0, 1); 44 app.sliderightshow(this, 'slide_up2', 0, 1);
  45 + this.getlist()
25 }, 46 },
26 // 触摸开始事件 47 // 触摸开始事件
27 - touchStart: function (e) { 48 + touchStart: function(e) {
28 touchDot = e.touches[0].pageX; // 获取触摸时的原点 49 touchDot = e.touches[0].pageX; // 获取触摸时的原点
29 // 使用js计时器记录时间 50 // 使用js计时器记录时间
30 - interval = setInterval(function () { 51 + interval = setInterval(function() {
31 time++; 52 time++;
32 }, 100); 53 }, 100);
33 }, 54 },
34 // 触摸移动事件 55 // 触摸移动事件
35 - touchMove: function (e) { 56 + touchMove: function(e) {
36 var touchMove = e.touches[0].pageX; 57 var touchMove = e.touches[0].pageX;
37 console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot)); 58 console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
38 // 向左滑动 59 // 向左滑动
39 - console.log(time)  
40 if (touchMove - touchDot <= -40 && time < 10) { 60 if (touchMove - touchDot <= -40 && time < 10) {
41 wx.navigateTo({ 61 wx.navigateTo({
42 url: '../case/case' 62 url: '../case/case'
@@ -51,15 +71,40 @@ Page({ @@ -51,15 +71,40 @@ Page({
51 // }); 71 // });
52 } 72 }
53 }, 73 },
  74 + getlist() {
  75 + let url = 'portal/Api/index';
  76 + app.post(url, {}).then((res) => {
  77 + // console.log('res',res);
  78 + if (res.type) {
  79 + this.setData({
  80 + imgUrls: res.banner
  81 + })
  82 + }
  83 +
  84 +
  85 + }).catch((err) => {
  86 + console.log(err);
  87 + })
  88 + },
  89 + caseDetailFun(e) {
  90 + wx.navigateTo({
  91 + url: '../caseDetail/caseDetail?id=' + e.currentTarget.dataset.id
  92 + })
  93 + },
  94 + goFun(e) {
  95 + wx.navigateTo({
  96 + url: '../caseList/caseList?html=' + e.currentTarget.dataset.html + '&&id=' + e.currentTarget.dataset.id
  97 + })
  98 + },
54 // 触摸结束事件 99 // 触摸结束事件
55 - touchEnd: function (e) { 100 + touchEnd: function(e) {
56 clearInterval(interval); // 清除setInterval 101 clearInterval(interval); // 清除setInterval
57 time = 0; 102 time = 0;
58 }, 103 },
59 - getUserInfo: function (e) { 104 + getUserInfo: function(e) {
60 105
61 }, 106 },
62 - tapName: function (e) { 107 + tapName: function(e) {
63 wx.navigateTo({ 108 wx.navigateTo({
64 url: '../case/case' 109 url: '../case/case'
65 }) 110 })
@@ -67,13 +112,13 @@ Page({ @@ -67,13 +112,13 @@ Page({
67 /** 112 /**
68 * 生命周期函数--监听页面显示 113 * 生命周期函数--监听页面显示
69 */ 114 */
70 - onShow: function () { 115 + onShow: function() {
71 116
72 }, 117 },
73 /** 118 /**
74 * 页面上拉触底事件的处理函数 119 * 页面上拉触底事件的处理函数
75 */ 120 */
76 - onReachBottom: function () { 121 + onReachBottom: function() {
77 122
78 }, 123 },
79 124
1 <!--index.wxml--> 1 <!--index.wxml-->
2 -<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" > 2 +<view class="container">
  3 + <swiper bindchange='firstChange' indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="1500" circular="true" vertical='true'>
  4 +
  5 + <swiper-item>
3 <view class='imgPolytope'> 6 <view class='imgPolytope'>
4 <image src='http://pjq0ww1cj.bkt.clouddn.com/shouye.png'></image> 7 <image src='http://pjq0ww1cj.bkt.clouddn.com/shouye.png'></image>
5 </view> 8 </view>
@@ -10,5 +13,107 @@ @@ -10,5 +13,107 @@
10 <view class='drop_img' bindtap="tapName"> 13 <view class='drop_img' bindtap="tapName">
11 <image src='http://pjq0ww1cj.bkt.clouddn.com/right.png'></image> 14 <image src='http://pjq0ww1cj.bkt.clouddn.com/right.png'></image>
12 </view> 15 </view>
  16 + </swiper-item>
  17 + <!-- 第二屏 -->
  18 + <swiper-item>
  19 + <view class='case_wrap'>
  20 + <!--banner -->
  21 + <view class='case_banner_box'>
  22 + <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
  23 + <block wx:for="{{imgUrls}}" wx:key>
  24 + <swiper-item>
  25 + <image src="{{item.url}}" data-id='{{item.category_id}}' bindtap='caseDetailFun' class="slide-image" width="100%" height="100%" />
  26 + </swiper-item>
  27 + </block>
  28 + </swiper>
  29 + <view class="dots">
  30 + <block wx:for="{{imgUrls}}" wx:key="">
  31 + <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
  32 + </block>
  33 + </view>
  34 + </view>
13 35
  36 + <!--案例类型 -->
  37 + <view class='case_box' >
  38 + <view class='case_title'>
  39 + <view class='case_title_content'>
  40 + <view class='case_contnet_line'></view>
  41 + <view class='case_title_text'>案例类型</view>
  42 + </view>
  43 + </view>
  44 + <view class='case_content'>
  45 + <view class='case_list' data-html="政府案例" data-id='1' bindtap='goFun'>
  46 + <image src='http://pjq0ww1cj.bkt.clouddn.com/zhengfu.png'></image>
  47 + <view class='case_list_text'>政府</view>
  48 + </view>
  49 + <view class='case_list' data-html="地产案例" data-id='3' bindtap='goFun'>
  50 + <image src='http://pjq0ww1cj.bkt.clouddn.com/dichan.png'></image>
  51 + <view class='case_list_text'>地产</view>
  52 + </view>
  53 + <view class='case_list' data-html="制造案例" data-id='2' bindtap='goFun'>
  54 + <image src='http://pjq0ww1cj.bkt.clouddn.com/zhizao.png'></image>
  55 + <view class='case_list_text'>制造</view>
  56 + </view>
  57 + <view class='case_list' data-html="教育案例" data-id='5' bindtap='goFun'>
  58 + <image src='http://pjq0ww1cj.bkt.clouddn.com/jiaoyu.png'></image>
  59 + <view class='case_list_text'>教育</view>
  60 + </view>
  61 + <view class='case_list' data-html="物流案例" data-id='4' bindtap='goFun'>
  62 + <image src='http://pjq0ww1cj.bkt.clouddn.com/jinrong.png'></image>
  63 + <view class='case_list_text'>物流</view>
  64 + </view>
  65 + <view class='case_list' data-html="零售案例" data-id='6' bindtap='goFun'>
  66 + <image src='http://pjq0ww1cj.bkt.clouddn.com/lingshou.png'></image>
  67 + <view class='case_list_text'>零售</view>
  68 + </view>
  69 + </view>
  70 + <view class='drop_img'>
  71 + <image src='http://pjq0ww1cj.bkt.clouddn.com/left.png' style='margin-right:200rpx;' bindtap='backFun'></image>
  72 + <image src='http://pjq0ww1cj.bkt.clouddn.com/right.png' bindtap="jumpFun"></image>
  73 + </view>
  74 + </view>
  75 + <!-- 客服 -->
  76 + <view class='chat_peo'>
  77 + <button open-type="contact" class='contacButton'>
  78 + <!-- <button open-type="contact" class='contacButton'> -->
  79 + <image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
  80 + <!-- </button> -->
  81 + </button>
  82 + </view>
  83 +
  84 + </view>
  85 + </swiper-item>
  86 + <!-- 第三屏 -->
  87 + <swiper-item style='position: relative'>
  88 + <view class='app_lication_banner'>
  89 + <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
  90 + <block wx:for="{{imgUrls}}" wx:key="index">
  91 + <swiper-item>
  92 + <!-- catchtouchmove="stopTouchMove" -->
  93 + <image src="{{item.url}}" class="slide-image" width="100%" height="100%" />
  94 + </swiper-item>
  95 + </block>
  96 + </swiper>
  97 + <!-- <view class="dots">
  98 + <block wx:for="{{imgUrls}}" wx:key="index">
  99 + <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
  100 + </block>
  101 + </view> -->
  102 +
  103 +
  104 +
  105 + <!-- 客服 -->
  106 + <view class='chat_peo'>
  107 + <button open-type="contact" class='contacButton'>
  108 + <image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
  109 + </button>
  110 + </view>
  111 +
  112 + </view>
  113 + </swiper-item>
  114 + </swiper>
  115 +
  116 + <view class='aboutUs' wx:if='{{contact}}'>
  117 + 了解我们
  118 + </view>
14 </view> 119 </view>
1 /**index.wxss**/ 1 /**index.wxss**/
  2 +swiper{
  3 + height: 100%;
  4 + width: 100%;
  5 +}
2 .container { 6 .container {
3 width: 100%; 7 width: 100%;
4 height: 100%; 8 height: 100%;
@@ -7,12 +11,15 @@ @@ -7,12 +11,15 @@
7 .imgPolytope { 11 .imgPolytope {
8 width: 519rpx; 12 width: 519rpx;
9 height: 577rpx; 13 height: 577rpx;
10 - margin: 190rpx 0 0; 14 + margin: 190rpx auto;
11 } 15 }
12 .imgPolytope image { 16 .imgPolytope image {
13 width: 100%; 17 width: 100%;
14 height: 100%; 18 height: 100%;
15 } 19 }
  20 +.index_title{
  21 + text-align: center;
  22 +}
16 .index_title .title { 23 .index_title .title {
17 color: #000; 24 color: #000;
18 font-size: 46rpx; 25 font-size: 46rpx;
@@ -31,3 +38,220 @@ @@ -31,3 +38,220 @@
31 transform: translateX(1000px); 38 transform: translateX(1000px);
32 } 39 }
33 40
  41 +.drop_img{
  42 + display: none;
  43 +}
  44 +
  45 +/* 第二屏 */
  46 +
  47 +/* pages/case/case.wxss */
  48 +
  49 +.case_wrap {
  50 + width: 100%;
  51 + height: 100%;
  52 + background: #F0EEED;
  53 + position: relative;
  54 +}
  55 +.case_wrap .case_banner_box {
  56 + width: 100%;
  57 + height: 540rpx;
  58 + background: #fff;
  59 + position: relative;
  60 +}
  61 +.case_wrap .case_banner_box swiper {
  62 + width: 100%;
  63 + height: 487rpx;
  64 +}
  65 +.case_wrap .case_banner_box image {
  66 + width: 100%;
  67 + height: 100%;
  68 +}
  69 +.dots{
  70 +/* width: 156rpx; */
  71 +/* height: 36rpx; */
  72 +display: flex;
  73 +flex-direction: row;
  74 +position: absolute;
  75 +left: 320rpx;
  76 +bottom: 20rpx;
  77 +/* margin-top: -18rpx; */
  78 +}
  79 +/*未选中时的小圆点样式 */
  80 +.dot{
  81 +width: 16rpx;
  82 +height: 16rpx;
  83 +border-radius: 50%;
  84 +margin-right: 26rpx;
  85 +background-color:#CCCCCC;
  86 +}
  87 +/*选中以后的小圆点样式 */
  88 +.active{
  89 +width: 16rpx;
  90 +height: 16rpx;
  91 +border-radius:8rpx;
  92 +background-color: #FB7F47;
  93 +}
  94 +
  95 +/*案例css */
  96 +.case_box {
  97 + width: 100%;
  98 + height: 647rpx;
  99 + background: #fff;
  100 + position: absolute;
  101 + bottom: 0;
  102 + left: 0;
  103 + display: flex;
  104 + flex-direction: column;
  105 +}
  106 +.case_title {
  107 + width: 100%;
  108 + height: 112rpx;
  109 + display: flex;
  110 + justify-content: center;
  111 + align-items: center;
  112 +}
  113 +.case_title .case_title_content {
  114 + width:276rpx;
  115 + height: 100%;
  116 + position: relative;
  117 +}
  118 +.case_title_content .case_contnet_line {
  119 + position: absolute;
  120 + width:100%;
  121 + height:1rpx;
  122 + background:linear-gradient(90deg,rgba(240,131,12,1),rgba(230,0,18,1));
  123 + opacity:0.5;
  124 + left: 0;
  125 + top: 50%;
  126 +}
  127 +.case_title_content .case_title_text {
  128 + width: 142rpx;
  129 + height: 100%;
  130 + display: flex;
  131 + justify-content: center;
  132 + align-items: center;
  133 + position: absolute;
  134 + top: 0;
  135 + left: 50%;
  136 + margin-left: -76rpx;
  137 + background-color: #fff;
  138 + color: #000000;
  139 + font-size: 30rpx;
  140 +}
  141 +.case_content {
  142 + display: flex;
  143 + flex-wrap: wrap;
  144 +}
  145 +.case_content .case_list {
  146 + width: 194rpx;
  147 + height: 194rpx;
  148 + display: flex;
  149 + justify-content: center;
  150 + align-items: center;
  151 + color: #333333;
  152 + font-weight: 500;
  153 + font-size: 26rpx;
  154 + position: relative;
  155 + margin: 0 28rpx 30rpx;
  156 + border-radius:10rpx;
  157 +}
  158 +.case_list image {
  159 + position: absolute;
  160 + left: 0;
  161 + top: 0;
  162 + width: 100%;
  163 + height: 100%;
  164 + /* z-index: 0; */
  165 +}
  166 +.case_list_text {
  167 + position: absolute;
  168 + /* top: 50%;
  169 + left: 50%; */
  170 +}
  171 +
  172 +/* 第三屏 */
  173 +.app_lication_banner {
  174 + width: 100%;
  175 + height: 100%;
  176 + position: relative;
  177 +}
  178 +swiper {
  179 + width: 100%;
  180 + height: 100%;
  181 +}
  182 +swiper image {
  183 + width: 100%;
  184 + height: 100%;
  185 +}
  186 +
  187 +.dots{
  188 +/* width: 156rpx; */
  189 +height: 36rpx;
  190 +display: flex;
  191 +flex-direction: row;
  192 +position: absolute;
  193 +left: 325rpx;
  194 +bottom: 100rpx;
  195 +}
  196 +/*未选中时的小圆点样式 */
  197 +.dot{
  198 +width: 16rpx;
  199 +height: 16rpx;
  200 +border-radius: 50%;
  201 +margin-right: 26rpx;
  202 +background-color:#CCCCCC;
  203 +}
  204 +/*选中以后的小圆点样式 */
  205 +.active{
  206 +width: 16rpx;
  207 +height: 16rpx;
  208 +border-radius:8rpx;
  209 +background-color: #FB7F47;
  210 +}
  211 +
  212 +/* 跳转下一页 */
  213 +.drop_img {
  214 + position: absolute;
  215 + bottom: 40rpx;
  216 + left: 50%;
  217 + margin-left: -146rpx;
  218 +}
  219 +
  220 +.aboutUs{
  221 + height: 70rpx;
  222 + width: 220rpx;
  223 + font-size: 28rpx;
  224 + color: #FFF;
  225 + background-color: #FFA333;
  226 + border-radius: 35rpx;
  227 + display: flex;
  228 + align-items: center;
  229 + justify-content: center;
  230 + position: fixed;
  231 + bottom: 100rpx;
  232 + left: 50%;
  233 + transform: translateX(-50%);
  234 + -webkit-transform: translateX(-50%);
  235 + z-index: 15;
  236 +}
  237 +
  238 +
  239 +
  240 +
  241 +
  242 +
  243 +
  244 +
  245 +
  246 +
  247 +
  248 +
  249 +
  250 +
  251 +
  252 +
  253 +
  254 +
  255 +
  256 +
  257 +
@@ -20,9 +20,22 @@ @@ -20,9 +20,22 @@
20 "current": -1, 20 "current": -1,
21 "list": [] 21 "list": []
22 }, 22 },
23 - "miniprogram": { 23 + "plugin": {
24 "current": -1, 24 "current": -1,
25 "list": [] 25 "list": []
  26 + },
  27 + "game": {
  28 + "list": []
  29 + },
  30 + "miniprogram": {
  31 + "current": 0,
  32 + "list": [
  33 + {
  34 + "id": -1,
  35 + "name": "slider",
  36 + "pathName": "pages/application/application"
  37 + }
  38 + ]
26 } 39 }
27 } 40 }
28 } 41 }