Home Explore Help
Register Sign In
Pai2
/
pai2
Watch 2
Star 0
Fork 0

Browse Source
Mini Preview

Brightcells 6 years ago
parent
a48abfdb66
commit
b2d4700de4
5 changed files with 176 additions and 2 deletions
Show Diff Stats
  1. 12 0
      miniapp/mini_views.py
  2. 156 0
      page/templates/page/mini_preview.html
  3. 6 0
      page/urls.py
  4. 1 1
      requirements_dj.txt
  5. 1 1
      requirements_redis.txt

+ 12 - 0
miniapp/mini_views.py
View File 

@@ -0,0 +1,12 @@
1 
+# -*- coding: utf-8 -*-
2 
+
3 
+from django.conf import settings
4 
+from django.db import transaction
5 
+from django.shortcuts import render
6 
+from django_logit import logit
7 
+
8 
+
9 
+@logit
10 
+@transaction.atomic
11 
+def mini_preview(request):
12 
+    return render(request, 'page/mini_preview.html', {})

+ 156 - 0
page/templates/page/mini_preview.html
View File 

@@ -0,0 +1,156 @@
1 
+{% load staticfiles %}
2 
+
3 
+<!DOCTYPE html>
4 
+<html lang="zh-CN">
5 
+<head>
6 
+    <meta charset="utf-8">
7 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 
+    <meta name="format-detection" content="telephone=no,email=no,address=no">
9 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
10 
+    <title>图集</title>
11 
+
12 
+    <link href="//cdn.bootcss.com/photoswipe/4.1.2/photoswipe.css" rel="stylesheet">
13 
+    <link href="//cdn.bootcss.com/photoswipe/4.1.2/default-skin/default-skin.css" rel="stylesheet">
14 
+
15 
+    <style>
16 
+        .halfscreen {
17 
+            width: 49%;
18 
+            box-sizing: border-box;
19 
+        }
20 
+
21 
+        .halfscreen > img {
22 
+            width: 100%;
23 
+            box-sizing: border-box;
24 
+        }
25 
+    </style>
26 
+</head>
27 
+<body>
28 
+<div>
29 
+    <div id="photos">
30 
+        <div id="left" class="halfscreen" style="float: left;">
31 
+            <img src="https://placekitten.com/600/400" data-idx="0">
32 
+            <img src="https://placekitten.com/1200/900" data-idx="2">
33 
+        </div>
34 
+        <div id="right" class="halfscreen" style="float: right;">
35 
+            <img src="https://placekitten.com/1200/900" data-idx="1">
36 
+            <img src="https://placekitten.com/600/400" data-idx="3">
37 
+        </div>
38 
+    </div>
39 
+</div>
40 
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
41 
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
42 
+    <!-- Background of PhotoSwipe.
43 
+         It's a separate element as animating opacity is faster than rgba(). -->
44 
+    <div class="pswp__bg"></div>
45 
+    <!-- Slides wrapper with overflow:hidden. -->
46 
+    <div class="pswp__scroll-wrap">
47 
+        <!-- Container that holds slides.
48 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
49 
+            Don't modify these 3 pswp__item elements, data is added later on. -->
50 
+        <div class="pswp__container">
51 
+            <div class="pswp__item"></div>
52 
+            <div class="pswp__item"></div>
53 
+            <div class="pswp__item"></div>
54 
+        </div>
55 
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
56 
+        <div class="pswp__ui pswp__ui--hidden">
57 
+            <div class="pswp__top-bar">
58 
+                <!--  Controls are self-explanatory. Order can be changed. -->
59 
+                <div class="pswp__counter"></div>
60 
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
61 
+                <button class="pswp__button pswp__button--share" title="Share"></button>
62 
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
63 
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
64 
+                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
65 
+                <!-- element will get class pswp__preloader--active when preloader is running -->
66 
+                <div class="pswp__preloader">
67 
+                    <div class="pswp__preloader__icn">
68 
+                        <div class="pswp__preloader__cut">
69 
+                            <div class="pswp__preloader__donut"></div>
70 
+                        </div>
71 
+                    </div>
72 
+                </div>
73 
+            </div>
74 
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
75 
+                <div class="pswp__share-tooltip"></div>
76 
+            </div>
77 
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
78 
+            </button>
79 
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
80 
+            </button>
81 
+            <div class="pswp__caption">
82 
+                <div class="pswp__caption__center"></div>
83 
+            </div>
84 
+        </div>
85 
+    </div>
86 
+</div>
87 
+
88 
+<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
89 
+<script src="//cdn.bootcss.com/photoswipe/4.1.2/photoswipe.min.js"></script>
90 
+<script src="//cdn.bootcss.com/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>
91 
+<script>
92 
+    $(function () {
93 
+        var pswpElement = document.querySelectorAll('.pswp')[0];
94 
+        // build items array
95 
+        var items = [
96 
+            {
97 
+                src: 'https://placekitten.com/600/400',
98 
+                w: 600,
99 
+                h: 400,
100 
+                a: 1,
101 
+                b: 2,
102 
+            },
103 
+            {
104 
+                src: 'https://placekitten.com/1200/900',
105 
+                w: 1200,
106 
+                h: 900,
107 
+                a: 1,
108 
+                b: 2,
109 
+            },
110 
+            {
111 
+                src: 'https://placekitten.com/1200/900',
112 
+                w: 1200,
113 
+                h: 900,
114 
+                a: 1,
115 
+                b: 2,
116 
+            },
117 
+            {
118 
+                src: 'https://placekitten.com/600/400',
119 
+                w: 600,
120 
+                h: 400,
121 
+                a: 1,
122 
+                b: 2,
123 
+            },
124 
+
125 
+        ];
126 
+        // define options (if needed)
127 
+        var options = {
128 
+            // optionName: 'option value'
129 
+            // for example:
130 
+            loop: true,
131 
+            index: 1, // start at first slide
132 
+            // Tap on sliding area should close gallery'
133 
+            tapToClose: true,
134 
+        };
135 
+        // Initializes and opens PhotoSwipe
136 
+        $('#photos img').click(function () {
137 
+            options['index'] = parseInt($(this).attr('data-idx'));
138 
+            var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
139 
+            gallery.init();
140 
+        })
141 
+    })
142 
+</script>
143 
+<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
144 
+<script type="text/javascript" src="{% static 'pai2/js/jswe-0.0.4.js' %}"></script>
145 
+<script>
146 
+    V.initWxData({
147 
+        imgUrl: "http://pai.ai/static/pai2/img/paiai_96_96.png",
148 
+        link: 'http://pai.ai/w/o?r=http%3A%2F%2Fpai.ai%2Fp%2Floginqr',
149 
+        desc: "授权登录",
150 
+        title: "授权登录",
151 
+        timeLine: ""
152 
+    }, true);
153 
+    V.hideOptionMenu();
154 
+</script>
155 
+</body>
156 
+</html>

+ 6 - 0
page/urls.py
View File 

@@ -4,6 +4,7 @@ from django.conf.urls import url
4 4
5 5 
 from account import tourguide_views
6 6 
 from group import lensman_views
7 
+from miniapp import mini_views
7 8 
 from page import oauth_views, page_views
8 9
9 10 
 
@@ -28,3 +29,8 @@ urlpatterns += [
28 29 
 urlpatterns += [
29 30 
     url(r'^t/submit$', tourguide_views.tourguide_submit_api, name='tourguide_submit_api'),  # 导游信息提交
30 31 
 ]
32 
+
33 
+# 小程序相关
34 
+urlpatterns += [
35 
+    url(r'^mini$', mini_views.mini_preview, name='mini_preview'),  #
36 
+]

+ 1 - 1
requirements_dj.txt
View File 

@@ -2,7 +2,7 @@ Django==1.11.13
2 2 
 django-admin==1.3.0
3 3 
 django-curtail-uuid==1.0.4
4 4 
 django-detect==1.0.5
5 
-django-file==1.0.2
5 
+django-file==1.0.3
6 6 
 django-ip==1.0.2
7 7 
 django-json-render==1.0.1
8 8 
 django-json-response==1.1.5

+ 1 - 1
requirements_redis.txt
View File 

@@ -1,3 +1,3 @@
1 1 
 hiredis==0.2.0
2 2 
 redis==2.10.6
3 
-redis-extensions==1.2.2
3 
+redis-extensions==1.2.3