xt / xcx-book · Commits

Go to a project

Commit 3caf02ced3304751e7a00f92daf492ade12d2bfd

Authored by vking
1 parent 261fafa9
build: skipped

taocan-share-pinglun

Inline Side-by-side
Showing 15 changed files with 356 additions and 25 deletions
  1 +// components/2.0/common/page.js
  2 +Component({
  3 + /**
  4 + * 组件的属性列表
  5 + */
  6 + properties: {
  7 + loading:{
  8 + type:Number,
  9 + value:0,//0|-1|1 加载中|加载失败|加载完成
  10 + },
  11 + loadtxt:{
  12 + type:String,
  13 + value:'',
  14 + },
  15 + hasNav:{
  16 + type:Boolean,
  17 + value:true,
  18 + },
  19 + },
  20 +
  21 + /**
  22 + * 组件的初始数据
  23 + */
  24 + data: {
  25 + },
  26 +
  27 + /**
  28 + * 组件的方法列表
  29 + */
  30 + methods: {
  31 + retry(){
  32 + //刷新当前页面
  33 + let pages=getCurrentPages();
  34 +
  35 + let p=pages[pages.length-1];
  36 + let param=[];
  37 + console.log('page-retry',p);
  38 + if(p.options){
  39 + for(let key in p.options){
  40 + param.push(key+'='+(p.options[key]
  41 + .replace(/=/,'%3D').replace(/&/,'%26')))
  42 + }
  43 + }
  44 + wx.redirectTo({
  45 + url: '/'+p.route+'?'+param.join('&')
  46 + })
  47 + },
  48 + }
  49 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {}
  4 +}
  1 +<!--components/2.0/common/page.wxml-->
  2 +<view class="view flex flex-direction justify-center align-center"
  3 + style="width: 100vw;height: calc(100vh - {{hasNav?'150rpx':'0'}});" wx:if="{{loading<1}}">
  4 + <view class="flex flex-direction justify-center align-center" wx:if="{{loading==-1}}">
  5 + <image src="http://nosqn.colorcun.com/timeout.png" style="width: 520rpx;height: 348rpx;"></image>
  6 + <view class="margin-tb-lg txt-28-h">请求超时啦～重试一下看看</view>
  7 + <view class="reflush flex justify-center align-center" bindtap="retry">点击重试</view>
  8 + </view>
  9 + <view wx:else="" class="flex flex-direction justify-center align-center">
  10 + <image src="http://nosqn.colorcun.com/loading.gif" style="width: 40rpx;height: 40rpx;"></image>
  11 + <view class="margin-top bg-white txt-24-h">加载中，请稍后…</view>
  12 + </view>
  13 +</view>
  14 +<block wx:else="">
  15 + <slot></slot>
  16 +</block>
  1 +/* components/2.0/common/page.wxss */
  2 +@import "../../../colorui/main.wxss";
  1 +// components/2.0/pinglun/stat.js
  2 +const statStr=['','差','有点差','一般','满意','非常满意']
  3 +import util from '../../../utils/util'
  4 +Component({
  5 + /**
  6 + * 组件的属性列表
  7 + */
  8 + properties: {
  9 + value:{
  10 + type:Number,
  11 + value:5,
  12 + },
  13 + disabled:{
  14 + type:Boolean,
  15 + value:false,
  16 + },
  17 + length:{//星星个数
  18 + type:Number,
  19 + value:5,
  20 + },
  21 + allowHalf:{//是否可半星
  22 + type:Boolean,
  23 + value:false,
  24 + },
  25 + },
  26 +
  27 + /**
  28 + * 组件的初始数据
  29 + */
  30 + data: {
  31 +
  32 + },
  33 + attached(){
  34 + this.statVal=Math.ceil(this.data.value)
  35 + this.setData({
  36 + statVal:this.statVal,
  37 + statStr:statStr[this.statVal]
  38 + })
  39 + this.triggerEvent('event',{value:this.statVal})
  40 + },
  41 + /**
  42 + * 组件的方法列表
  43 + */
  44 + methods: {
  45 + stat(e){
  46 + if(this.data.disabled) return;
  47 + this.statVal=util.attr(e,'val')
  48 + this.setData({
  49 + statVal:this.statVal,
  50 + statStr:statStr[this.statVal]
  51 + })
  52 + this.triggerEvent('event',{value:this.statVal})
  53 + },
  54 + }
  55 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {}
  4 +}
  1 +<!--components/2.0/pinglun/stat.wxml-->
  2 +<view class="flex {{cla}} align-center">
  3 + <view class="view stat {{statVal>=index+1?'light':''}}" wx:for="{{length}}"
  4 + catchtap="stat" data-val="{{index+1}}"></view>
  5 + <view class="stat-txt">{{statStr}}</view>
  6 +</view>
  1 +/* components/2.0/pinglun/stat.wxss */
  2 +@import "../../../colorui/main.wxss";
  3 +.stat{
  4 + width: 56rpx;
  5 + height: 56rpx;
  6 + background-image: url("http://nosqn.colorcun.com/pinglun/p%20%284%29.png");
  7 + margin-right: 20rpx;
  8 +}
  9 +.stat.light{
  10 + background-image: url("http://nosqn.colorcun.com/pinglun/p%20%283%29.png");
  11 +}
  12 +.stat-txt{
  13 + height: 44rpx;
  14 + font-size: 32rpx;
  15 + font-family: PingFangSC-Regular, PingFang SC;
  16 + font-weight: 400;
  17 + color: #666666;
  18 + line-height: 44rpx;
  19 + margin-left: 10rpx;
  20 +}
@@ -13,11 +13,6 @@ @@ -13,11 +13,6 @@
13 "version": "1.3.9", 13 "version": "1.3.9",
14 "resolved": "https://registry.npmjs.org/mta-wechat-analysis/-/mta-wechat-analysis-1.3.9.tgz", 14 "resolved": "https://registry.npmjs.org/mta-wechat-analysis/-/mta-wechat-analysis-1.3.9.tgz",
15 "integrity": "sha512-Q5OiYECoiFqBX9UzXbDPAtBar0MId5LUzf6ourgeSBBILpW1FOc0lp6SfnZlezs2KN3MjY66TOesFdgWNyiTRA==" 15 "integrity": "sha512-Q5OiYECoiFqBX9UzXbDPAtBar0MId5LUzf6ourgeSBBILpW1FOc0lp6SfnZlezs2KN3MjY66TOesFdgWNyiTRA=="
16 - },  
17 - "wechat-miniprogram-rate": {  
18 - "version": "1.0.0",  
19 - "resolved": "https://registry.npmjs.org/wechat-miniprogram-rate/-/wechat-miniprogram-rate-1.0.0.tgz",  
20 - "integrity": "sha512-xBFqh/tpoQ/3sTgf37lOGJFEcJ55Vbv0HtyYVFCq3TZr5f1muhX0vRNnI2y6U2boFz+rYkwA9hZC1UTZDWbBzA=="  
21 } 16 }
22 } 17 }
23 } 18 }
@@ -14,7 +14,6 @@ @@ -14,7 +14,6 @@
14 "license": "ISC", 14 "license": "ISC",
15 "dependencies": { 15 "dependencies": {
16 "js-sha1": "^0.6.0", 16 "js-sha1": "^0.6.0",
17 - "mta-wechat-analysis": "^1.3.7",  
18 - "wechat-miniprogram-rate": "^1.0.0" 17 + "mta-wechat-analysis": "^1.3.7"
19 } 18 }
20 } 19 }
1 // pages/pinglun/create.js 1 // pages/pinglun/create.js
  2 +import App from '../../utils/api'
  3 +import util from '../../utils/util'
2 Page({ 4 Page({
3 5
4 /** 6 /**
5 * 页面的初始数据 7 * 页面的初始数据
6 */ 8 */
7 data: { 9 data: {
8 - 10 + qnConf:{
  11 + accessKey:'uva-aaonM8dukeR6phc9yuPBrOXk9brrNW_PxLD7',
  12 + secretKey:'oZMMVN6phk49lG0J1xwmi1Ju0ETT15EnAEWcU9Cs',
  13 + token:'',
  14 + bucket:'colorcun-attr',//存储空间
  15 + fileType:'image',//image|video|audio|file def:file
  16 + region:'华东',//存储区域
  17 + domain:'http://nosqn.colorcun.com',//你绑定的域名,非必填项
  18 + },
  19 + upConf:{
  20 + prefixPath:'pinglun/images/', //上传到七牛后有一个路径前缀，可为空
  21 + loading:'ring',// none|leaf|circle|ring, def leaf 上传的loading效果; none为无，可自行在page wxml中添加
  22 + group:'image', //一个页面上多个组件的区分标识
  23 + security:false, // 开启非法检测，默认 false
  24 + //上传图片
  25 + count:6, //最多可以选择的图片张数
  26 + sizeType:['compressed'], //['original', 'compressed'] 所选的图片的尺寸,超大图片 compressed 会引起开卡顿
  27 + sourceType:['album', 'camera'], //['album', 'camera'] 选择图片的来源
  28 + },
  29 + qnConfVideo:{
  30 + accessKey:'uva-aaonM8dukeR6phc9yuPBrOXk9brrNW_PxLD7',
  31 + secretKey:'oZMMVN6phk49lG0J1xwmi1Ju0ETT15EnAEWcU9Cs',
  32 + token:'',
  33 + bucket:'colorcun-attr',//存储空间
  34 + fileType:'video',//image|video|audio|file def:file
  35 + region:'华东',//存储区域
  36 + domain:'http://nosqn.colorcun.com',//你绑定的域名,非必填项
  37 + },
  38 + upConfVideo:{
  39 + prefixPath:'pinglun/videos/', //上传到七牛后有一个路径前缀，可为空
  40 + loading:'ring',// none|leaf|circle|ring, def leaf 上传的loading效果; none为无，可自行在page wxml中添加
  41 + group:'video', //一个页面上多个组件的区分标识
  42 + security:false, // 开启非法检测，默认 false
  43 + //上传图片
  44 + count:6, //最多可以选择的图片张数
  45 + sizeType:['compressed'], //['original', 'compressed'] 所选的图片的尺寸,超大图片 compressed 会引起开卡顿
  46 + sourceType:['album', 'camera'], //['album', 'camera'] 选择图片的来源
  47 + },
  48 + files:[], //组件数据放入这里展示到页面上
  49 + hasAddFile:true,//出现上传加号
9 }, 50 },
10 51
11 /** 52 /**
@@ -59,11 +100,44 @@ Page({ @@ -59,11 +100,44 @@ Page({
59 onReachBottom: function () { 100 onReachBottom: function () {
60 101
61 }, 102 },
  103 + statVal:5,
  104 + statEvent(e){
  105 + this.statVal=e.detail.value
  106 + },
62 107
63 - /**  
64 - * 用户点击右上角分享  
65 - */  
66 - onShareAppMessage: function () {  
67 -  
68 - } 108 + qnevent(e){
  109 + console.log('qnevent',e.detail);
  110 + let files=e.detail.data
  111 + if(e.detail.act=='uploadFail'){
  112 + files[e.detail.fileCurrent].progress=Math.random().toFixed(2)
  113 + }
  114 + files.forEach(f=>{
  115 + if(f.progress==100){
  116 + if(!f.remote || !f.remote.url){
  117 + f.progress=(90+Math.random()*9).toFixed(2)
  118 + }
  119 + }
  120 + })
  121 + this.setData({
  122 + files:files,
  123 + hasAddFile:files.length<this.data.upConf.count,
  124 + scrollIntoView:'scrollIntoView',
  125 + })
  126 + },
  127 + displayImage(e){
  128 + let path=util.attr(e,'path')
  129 + wx.previewImage({
  130 + urls:[path],
  131 + })
  132 + },
  133 + deleteImage(e){
  134 + let index=util.attr(e,'index')
  135 + let files=this.data.files
  136 + files.splice(index,1)
  137 + this.setData({
  138 + files:files,
  139 + hasAddFile:files.length<6
  140 + })
  141 + util.toast('图片已删除','none')
  142 + },
69 }) 143 })
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 "navigationBarTextStyle": "black", 3 "navigationBarTextStyle": "black",
4 "usingComponents": { 4 "usingComponents": {
5 "nav":"/components/nav/nav", 5 "nav":"/components/nav/nav",
6 - "rate": "wechat-miniprogram-rate" 6 + "stat": "/components/2.0/pinglun/stat",
  7 + "qnupload": "plugin://vktool/qnupload"
7 } 8 }
8 } 9 }
1 <!--pages/pinglun/create.wxml--> 1 <!--pages/pinglun/create.wxml-->
2 <nav>{{sellername}}</nav> 2 <nav>{{sellername}}</nav>
3 -<page> 3 +<page loading="1">
4 <view class="view"> 4 <view class="view">
5 <view class="view padding-lr-lg"> 5 <view class="view padding-lr-lg">
6 <view class="view flex align-center solid-bottom" style="height: 136rpx;"> 6 <view class="view flex align-center solid-bottom" style="height: 136rpx;">
7 <view class="txt-36-h text-bold">评分</view> 7 <view class="txt-36-h text-bold">评分</view>
8 <view class="txt-36-h text-bold margin-left-xs margin-right" style="color:#FF7A00;">*</view> 8 <view class="txt-36-h text-bold margin-left-xs margin-right" style="color:#FF7A00;">*</view>
9 <view class="view"> 9 <view class="view">
10 - <view style="transform: scale(1.5);width: 10%;">  
11 - <rate disabled="{{true}}" allowHalf="{{false}}" placeholder="..." value="4"></rate>  
12 - </view> 10 + <stat value="4" bindevent="statEvent"></stat>
13 </view> 11 </view>
14 </view> 12 </view>
15 <view class="view flex align-start solid-bottom padding-bottom-sm"> 13 <view class="view flex align-start solid-bottom padding-bottom-sm">
16 <view class="txt-36-h text-bold" style="margin-top: 48rpx; min-width: 72rpx;">标签</view> 14 <view class="txt-36-h text-bold" style="margin-top: 48rpx; min-width: 72rpx;">标签</view>
17 <view class="txt-36-h text-bold margin-left-xs margin-right" style="color:#FF7A00;margin-top: 48rpx;">*</view> 15 <view class="txt-36-h text-bold margin-left-xs margin-right" style="color:#FF7A00;margin-top: 48rpx;">*</view>
18 <view class="view margin-top-lg flex flex-wrap"> 16 <view class="view margin-top-lg flex flex-wrap">
19 - <view class="view solids round padding-lr margin-bottom margin-right flex align-center" style="height: 64rpx;">包间环境好</view>  
20 - <view class="view solids round padding-lr margin-bottom margin-right flex align-center" style="height: 64rpx;">包间环境好</view>  
21 - <view class="view solids round padding-lr margin-bottom margin-right flex align-center" style="height: 64rpx;">包间环境好</view> 17 + <view class="tag-item view padding-lr margin-bottom margin-right flex align-center">包间环境好</view>
  18 + <view class="tag-item active view padding-lr margin-bottom margin-right flex align-center">包间环境好</view>
  19 + <view class="tag-item view padding-lr margin-bottom margin-right flex align-center">包间环境好</view>
22 </view> 20 </view>
23 </view> 21 </view>
24 <textarea 22 <textarea
25 - class="margin-top-lg" style="height: 294rpx;" 23 + class="margin-top-lg" style="height: 294rpx; font-size: 30rpx;"
26 placeholder="从包间环境、菜品口味、服务来评价餐厅，可以帮助更多想要订这家餐厅的人哦～"></textarea> 24 placeholder="从包间环境、菜品口味、服务来评价餐厅，可以帮助更多想要订这家餐厅的人哦～"></textarea>
27 </view> 25 </view>
  26 + <scroll-view class="view"
  27 + scroll-into-view="{{scrollIntoView}}"
  28 + scroll-x="true" style="height: 192rpx;width: 100%;white-space: nowrap;">
  29 + <block wx:for="{{files}}" wx:key="fileskey">
  30 + <qnupload qnConf="{{qnConf}}" upConf="{{upConf}}"
  31 + file="{{item}}" files="{{files}}"
  32 + bindevent="qnevent" class="view qnupload">
  33 + <view class="view scroll-block flex flex-direction justify-center align-center" catchtap="displayImage" data-path="{{item.path}}">
  34 + <image class="view image" src="{{item.path}}"></image>
  35 + <view class="view image-delete" catchtap="deleteImage" data-index="{{index}}"></view>
  36 + <image class="view image-up" src=""></image>
  37 + <view class="view image-text"></view>
  38 + </view>
  39 + </qnupload>
  40 + </block>
  41 + <block wx:if="{{hasAddFile}}">
  42 + <qnupload
  43 + qnConf="{{qnConf}}" upConf="{{upConf}}"
  44 + file="{{item}}" files="{{files}}"
  45 + bindevent="qnevent" class="view qnupload">
  46 + <view class="view scroll-block flex flex-direction justify-center align-center">
  47 + <image class="view image-up" src="http://nosqn.colorcun.com/pinglun/p%20%2817%29.png"></image>
  48 + <view class="view image-text">上传图片</view>
  49 + </view>
  50 + </qnupload>
  51 + <qnupload
  52 + qnConf="{{qnConfVideo}}" upConf="{{upConfVideo}}"
  53 + file="{{item}}" files="{{files}}"
  54 + bindevent="qnevent" class="view qnupload">
  55 + <view class="view scroll-block flex flex-direction justify-center align-center">
  56 + <image class="view image" src="{{item.path}}"></image>
  57 + <image class="view image-up" src="http://nosqn.colorcun.com/pinglun/p%20%2818%29.png"></image>
  58 + <view class="view image-text">上传视频</view>
  59 + </view>
  60 + </qnupload>
  61 + </block>
  62 +
  63 + <view id="scrollIntoView" class="qnupload" style="width: 0;"></view>
  64 + </scroll-view>
28 </view> 65 </view>
  66 + <view class="bg-blue-blue submit text-bold txt-36-h round flex align-center justify-center" bindtap="submit">发布评价</view>
29 </page> 67 </page>
1 /* pages/pinglun/create.wxss */ 1 /* pages/pinglun/create.wxss */
2 -@import "../../colorui/main.wxss";  
  2 +@import "../../colorui/main.wxss";
  3 +.qnupload{
  4 + display: inline-block;
  5 + margin-right: 20rpx;
  6 + padding-top: 12rpx;
  7 +}
  8 +.scroll-block{
  9 + width: 180rpx;
  10 + height: 180rpx;
  11 + background: #F1F1F1;
  12 + border-radius: 10rpx;
  13 + position: relative;
  14 +}
  15 +.qnupload:first-child{
  16 + margin-left: 40rpx;
  17 +}
  18 +.scroll-block .image{
  19 + width: 180rpx;
  20 + height: 180rpx;
  21 + border-radius: 10rpx;
  22 + position: absolute;
  23 +}
  24 +.image-up{
  25 + width: 52rpx;
  26 + height: 52rpx;
  27 +}
  28 +.image-text{
  29 + height: 34rpx;
  30 + font-size: 24rpx;
  31 + font-family: PingFangSC-Regular, PingFang SC;
  32 + font-weight: 400;
  33 + color: #999999;
  34 + line-height: 34rpx;
  35 +}
  36 +.image-delete{
  37 + position: absolute;
  38 + top:-12rpx;
  39 + right: -12rpx;
  40 + width: 40rpx;
  41 + height: 40rpx;
  42 + background-image: url("http://nosqn.colorcun.com/pinglun/p%20%286%29.png");
  43 + background-size: 100% 100%;
  44 +}
  45 +.submit{
  46 + position: fixed;
  47 + width: calc(100% - 80rpx);
  48 + left:40rpx;
  49 + bottom: 40rpx;
  50 + height: 84rpx;
  51 +}
  52 +.tag-item{
  53 + height: 64rpx;
  54 + background: #F1F1F1;
  55 + border-radius: 32rpx;
  56 +
  57 + font-size: 28rpx;
  58 + font-family: PingFangSC-Regular, PingFang SC;
  59 + font-weight: 400;
  60 + color: #666666;
  61 + line-height: 64rpx;
  62 +}
  63 +.tag-item.active{
  64 + background: #F4FAFF;
  65 + border-radius: 32rpx;
  66 + border: 2rpx solid #5EB2FF;
  67 + color: #42A5FF;
  68 +}
@@ -31,7 +31,9 @@ @@ -31,7 +31,9 @@
31 "projectname": "c%E7%AB%AF%E9%A2%84%E5%AE%9A", 31 "projectname": "c%E7%AB%AF%E9%A2%84%E5%AE%9A",
32 "isGameTourist": false, 32 "isGameTourist": false,
33 "simulatorType": "wechat", 33 "simulatorType": "wechat",
34 - "simulatorPluginLibVersion": {}, 34 + "simulatorPluginLibVersion": {
  35 + "qywx_simulator_plugin": "1.2.0"
  36 + },
35 "skeleton-config": { 37 "skeleton-config": {
36 "global": { 38 "global": {
37 "loading": "chiaroscuro", 39 "loading": "chiaroscuro",