Skip to content

U
uni-pdtravel
Commit ce564048 authored by cc_inu's avatar cc_inu
Browse files
Options

vlog相册静态页面

parent fa7ebe9d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2715 additions and 196 deletions
.gitignore 0 → 100644
View file @ ce564048
# Mac
.DS_Store
**/.DS_Store
# vim/vi
*.swp
# JavaScript
node_modules/
.node_modules/
.eslintcache
unpackage/dist/build/
unpackage/dist/dev/
# python
*.pyc
App.vue
View file @ ce564048
......@@ -14,7 +14,6 @@
url: "/pages/login/login"
})
},300)
}
//#ifdef MP-ALIPAY
if (options.query && options.query.qrCode) {
......
pages.json
View file @ ce564048
......@@ -118,23 +118,25 @@
"path" : "pages/vlog/vlogIndex/vlogIndex",
"style" : {
"navigationBarTitleText": "VLOG",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle": "black"
}
}
,{
"path" : "pages/vlog/vlogface/vlogface",
"style" : {
"navigationBarTitleText": "扫脸获取视频",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle": "black"
}
}
,{
"path" : "pages/vlog/scenicList/scenicList",
"style" : {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#192033",
"navigationBarTextStyle": "#F8F8F8"
"backgroundColor":"#192033"
}
}
,{
......@@ -142,15 +144,16 @@
"style" : {
"navigationBarTitleText": "我的Vlog集",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#192033",
"navigationBarTextStyle": "#F8F8F8"
"backgroundColor":"#192033"
}
}
,{
"path" : "pages/vlog/photoAlbum/photoAlbum",
"style" : {
"navigationBarTitleText": "我的照片集",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
}
,{
......@@ -164,14 +167,61 @@
"path" : "pages/vlog/myVlog/myVlog",
"style" : {
"navigationBarTitleText": "我的Vlog集",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
}
,{
"path" : "pages/vlog/product/product",
"style" : {
"navigationBarTitleText": "产品",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
}
,{
"path" : "pages/vlog/productDetails/productDetails",
"style" : {
"navigationBarTitleText": "产品详情",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
}
,{
"path" : "pages/vlog/uploadPictures/uploadPictures",
"style" : {
"navigationBarTitleText": "上传照片",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
}
,{
"path": "pages/vlog/u-avatar-cropper/u-avatar-cropper",
"style": {
"navigationBarTitleText": "照片裁剪",
"navigationBarBackgroundColor": "#000000"
}
},
{
"path" : "pages/vlog/pictureFormat/pictureFormat",
"style" :
{
"navigationBarTitleText": "照片调整",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#192033",
"backgroundColor": "#F8F8F8"
},
"condition" : { //模式配置，仅开发期间生效
......
pages/index/index.vue
View file @ ce564048
......@@ -68,9 +68,6 @@
<!--#endif-->
<!-- <button @click="getUserInfo()"> 授权获取头像昵称 </button> -->
<view class="bottom">
<navigator url="../vlog/vlogIndex/vlogIndex">
<button type="default">vlog</button>
</navigator>
<!-- <web-view src="https://wx.pangdly.com"></web-view> -->
</view>
</view>
......
pages/vlog/components/dragImg/dragImg.vue 0 → 100644
View file @ ce564048
This diff is collapsed.
pages/vlog/myVlog/myVlog.vue
View file @ ce564048
<template>
<view class="content">
<view v-if="1" style="padding-top: 90rpx;">
<view class="">
<view v-if="vlogList.length>0 && show===false" class="noEmpty">
<view style="height: 20rpx;"></view>
<u-search bg-color="#434957" color="#ffffff" placeholder="景区/关键词搜索" v-model="search" :clearabled="true" @search="query" :show-action="false" ></u-search>
<view class="body">
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
<navigator url="../vlogList/vlogList" class="item">
<image src="https://cdn.uviewui.com/uview/swiper/2.jpg" mode=""></image>
<text>长江索道</text>
</navigator>
</view>
</view>
<view v-else class="empty">
<view class="empty1">
<view v-else-if="vlogList.length===0 && show===false" class="empty">
<view class="row">
<text>啊哦。。。没找到呢</text>
<image src="../../../static/img/vlog/icon/icon_thereisnovideo.png"></image>
</view>
......@@ -14,6 +35,7 @@
<view>点击获取我的Vlog</view>
</navigator>
</view>
<view v-else ></view>
</view>
</template>
......@@ -21,86 +43,56 @@
export default {
data() {
return {
aa: 1,
value: 1,
show:false,
list: [{
label: '默认排序',
value: 1,
},
{
label: '距离优先',
value: 2,
},
{
label: '价格优先',
value: 3,
}
],
show:true,//显示默认页面
vlogList:[],//我的vlog集合
}
},
onReady() {
},
onLoad(res){
if(!res){
uni.setNavigationBarColor({//动态更改导航条颜色
frontColor: '#ffffff',
backgroundColor: '#192033',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
}
onLoad(){
setTimeout(res=>{
this.vlogList=[1]//模拟请求数据
if(this.vlogList.length>0){//如果有数据
this.show=false
uni.setNavigationBarColor({//动态更改导航条颜色
frontColor: '#ffffff',
backgroundColor: '#192033',
animation: {
duration: 1,
timingFunc: 'easeIn'
}
})
uni.setBackgroundColor({backgroundColor:"#192033"});
}else{//数据为空
this.show=false
}
},1)
},
methods: {
query(e){
console.log(e)
},
}
}
</script>
<style lang="scss" scoped>
.content{
padding: 0 20rpx;
height: 100%;
width: 100%;
text-align: center;
// background-color: #192033;
.empty {
text-align: center;
padding-top: 30rpx;
.empty1 {
height: 200rpx;
background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);
line-height: 200rpx;
border-radius: 10rpx;
margin-bottom: 300rpx;
text {
font-weight: bold;
font-size: 32rpx;
float: left;
margin-left: 120rpx;
}
image {
height: 180rpx;
width: 200rpx;
float: right;
margin-right: 50rpx;
.content{height: 100%;width: 100%;text-align: center;
.noEmpty{color:#fff;height: 100%;width: 100%;background-color: #192033;padding: 0 20rpx;
.body{width: 100%;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 30rpx;
.item{width: 49%;height: 250rpx;margin-top: 20rpx;
image{width: 100%;height: 80%;border-radius: 10rpx;}
text{font-weight: bold;}
}
}
}
.empty {height: 100%;width: 100%;background-color: #fff;padding: 0 20rpx;text-align: center;padding-top: 30rpx;
.row {height: 200rpx;background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);line-height: 200rpx;border-radius: 10rpx;margin-bottom: 300rpx;
text {font-weight: bold;font-size: 32rpx;float: left;margin-left: 120rpx;}
image {height: 180rpx;width: 200rpx;float: right;margin-right: 50rpx;}
}
.btnn {
display: inline-block;
font-size: 28rpx;
border-radius: 40rpx;
text-align: center;
background-color: #FFE600;
padding: 20rpx 40rpx;
margin: 30rpx 0;
font-weight: bold;
.btnn {display: inline-block;font-size: 28rpx;border-radius: 40rpx;background-color: #FFE600;padding: 20rpx 40rpx;margin: 30rpx 0;font-weight: bold;
}
}
}
......
pages/vlog/photoAlbum/photoAlbum.vue
View file @ ce564048
<template>
<view class="content">
升级中.....
</view>
</template>
<script>
......
pages/vlog/pictureFormat/pictureFormat.vue 0 → 100644
View file @ ce564048
<template>
<view class="content">
<view class="top">
<dragImg :listData="imgList" @change="changeImgList" :columns="4" @click="clickItem" ></dragImg>
</view>
</view>
</template>
<script>
import dragImg from "../components/dragImg/dragImg.vue"
export default {
components:{
dragImg
},
data() {
return {
imgList: [{
images: '/static/images/swipe/1.png'
},
{
images: '/static/images/swipe/2.png'
},
{
images: '/static/images/swipe/3.png'
},
{
images: '/static/images/swipe/4.png'
},
{
images: '/static/images/swipe/5.png'
},
{
images: '/static/images/swipe/6.png'
},
{
images: '/static/images/swipe/7.png'
},
{
images: '/static/images/swipe/8.png'
},
{
images: '/static/images/swipe/9.png'
},
{
images: '/static/images/swipe/10.png'
},
{
images: '/static/images/swipe/1.png'
},
{
images: '/static/images/swipe/2.png'
},
{
images: '/static/images/swipe/3.png'
},
{
images: '/static/images/swipe/4.png'
},
{
images: '/static/images/swipe/5.png'
},
{
images: '/static/images/swipe/6.png'
},
{
images: '/static/images/swipe/7.png'
},
{
images: '/static/images/swipe/8.png'
},
{
images: '/static/images/swipe/9.png'
},
{
images: '/static/images/swipe/10.png'
},
{
images: '/static/images/swipe/1.png'
},
{
images: '/static/images/swipe/2.png'
},
{
images: '/static/images/swipe/3.png'
},
{
images: '/static/images/swipe/4.png'
},
{
images: '/static/images/swipe/5.png'
},
{
images: '/static/images/swipe/6.png'
},
{
images: '/static/images/swipe/7.png'
},
{
images: '/static/images/swipe/8.png'
}
]
}
},
onLoad() { //代替 vue 里面的 created
},
onReady() { //代替 vue 里面的 mounted
},
methods: {
changeImgList(res) {
console.log(res);
},
clickItem(res){
console.log(res);
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 0 20rpx;
height: 100%;
width: 100%;
text-align: center;
position: relative;
}
</style>
pages/vlog/product/product.vue 0 → 100644
View file @ ce564048
<template>
<view class="content">
<view class="item">
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
<view class="title">
<text>我的VLOG照片</text>
<navigator url="../productDetails/productDetails" class="btnn" style="margin-top: 40rpx;">
<view>点击查看</view>
</navigator>
</view>
</view>
<block>
<view class="item">
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
<view class="title">
<text>欢乐集</text>
<view style="margin: 15rpx 0;">
<text class="noprice">¥88</text>
<text class="price">¥88</text>
</view>
<navigator url="../productDetails/productDetails" class="btnn">
<view>开始制作</view>
</navigator>
</view>
</view>
<view class="item">
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
<view class="title">
<text>心语摆台</text>
<view style="margin: 15rpx 0;">
<text class="noprice">¥88</text>
<text class="price">¥88</text>
</view>
<navigator url="../productDetails/productDetails" class="btnn">
<view>开始制作</view>
</navigator>
</view>
</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(){//代替 vue 里面的 created
},
onReady() {//代替 vue 里面的 mounted
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.content{padding: 0 20rpx;box-sizing: border-box;margin: 0 auto;
.item{display: flex;justify-content: space-between;padding: 20rpx 0;height: 220rpx;
image{width: 48%;height: 100%; border-radius: 10rpx;}
.title{width: 48%;height: 100%;text-align: center;font-weight: bold;
.btnn {display: inline-block;border-radius: 15rpx;background-color: #FFE600;font-weight: bold;padding: 15rpx 20rpx;}
}
}
}
.noprice{font-size: 24rpx; text-decoration: line-through;color: #ccc;}
.price{font-size: 32rpx;color: #DE6F26;margin-left: 10rpx;}
</style>
\ No newline at end of file
pages/vlog/productDetails/productDetails.vue 0 → 100644
View file @ ce564048
<template>
<view class="content">
<view class="item">
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image>
<view class="title" style="padding-top: 35rpx;">
<text>规格:24张</text>
<view style="margin-top: 30rpx;">
<text class="noprice">¥88</text>
<text class="price">¥88</text>
</view>
</view>
</view>
<view class="" style="display: flex;">
<u-section title="模板选择" :right="false" color="#303133" ></u-section><text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
</view>
<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image>
<view style="display: flex;justify-content: space-around;margin-top: 20rpx;">
<button type="default" class="btnn" :class="current===0?'active':'noactive'" @click="current=0">封面</button>
<button type="default" class="btnn" :class="current===1?'active':'noactive'" @click="current=1">内页</button>
</view>
<view v-if="current===0">
<view class="cover">
<view class="coverItem" v-for="(item,index) in coverList" :key="index">
<image class="img" :src="item.url" mode="" @click="changeCover(item.url)"></image>
<u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon>
</view>
</view>
</view>
<view class="" v-else>
<view class="cover">
<view class="coverItem" v-for="(item,index) in insidePagesList" :key="index">
<image class="img" :src="item.url" mode="" @click="changeinsidePages(item.url)"></image>
<u-icon v-if="insidePages===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon>
</view>
</view>
</view>
<view style="display: flex;margin-top: 30rpx;">
<u-section title="详细参数" :right="false" color="#303133" ></u-section><text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
</view>
<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image>
<view class="parameter">
<view class="parameterItem">
<view>产品品牌:</view>
<view>产品名称:</view>
<view>产品规格:</view>
<view>内页数量:</view>
<view>入册数量:</view>
<view>内页尺寸:</view>
</view>
<view class="parameterItem">
<view>相册工艺:</view>
<view>产品封面:</view>
<view>内页材质:</view>
<view>装订方式:</view>
<view>产品配送:</view>
</view>
</view>
<view class="bottom" @click="beginMaking">
上传照片制作
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,//封面内页切换
cover:"",//封面
coverList:[
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg"},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg"},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg"},
],//封面列表
insidePages:"",//内页
insidePagesList:[
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg"},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg"},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg"}
],//内页列表
list:[
{name:"封面"},
{name:"内页"}
],
}
},
onLoad(){//代替 vue 里面的 created
uni.setNavigationBarTitle({title:"欢乐集"})
},
onReady() {//代替 vue 里面的 mounted
},
methods: {
changeCover(url){//选择封面
this.cover=url
},
changeinsidePages(url){//选择内页
this.insidePages=url
},
beginMaking(){
if(this.cover===""){
return uni.showModal({title: '提示',content: '请选择封面',});
}
if(this.insidePages===""){
return uni.showModal({title: '提示',content: '请选择内页',});
}
this.$u.route({
url:'pages/vlog/uploadPictures/uploadPictures',
params:{
cover:this.cover,
insidePages:this.insidePages
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content{padding: 0 20rpx;box-sizing: border-box;margin-bottom:100rpx;text-align: center;
.item{display: flex;justify-content: space-between;padding: 30rpx 20rpx 20rpx 20rpx;
image{width: 48%;height: 220rpx; border-radius: 10rpx;}
.title{width: 48%;height: 220rpx;padding-top: 10rpx;margin-top: 20rpx;}
}
.noprice{font-size: 24rpx; text-decoration: line-through;color: #ccc;}
.price{font-size: 32rpx;color: #DE6F26;margin-left: 10rpx;}
.cover{display: flex;flex-wrap: wrap;justify-content: space-between;
.coverItem{width: 48.5%;height: 200rpx; position: relative;padding-top: 20rpx;
.img{width: 100%;height: 100%;border-radius: 10rpx;}
.icon{position: absolute;top: 25rpx;right: 5rpx;}
}
}
.parameter{display: flex;justify-content: space-between;
.parameterItem{width: 50%;text-align: left;color: #ccc;
view{margin: 10rpx 0;}
}
}
.bottom{position: fixed;bottom: 0;width: 100%;height: 100rpx;background-color:#FFE600;right: 0;line-height: 100rpx;font-size: 32rpx;font-weight: bold;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;}
}
.btnn{background-color: #ECF4FF;width: 25%;height: 60rpx;line-height: 60rpx;font-size: 26rpx;}
.active{background-color: #2979FF;color: #fff;}
.noactive{color: #2979FF;}
</style>
\ No newline at end of file
pages/vlog/u-avatar-cropper/u-avatar-cropper.vue 0 → 100644
View file @ ce564048
<template>
<view class="content">
<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
<canvas
class="cropper"
:disable-scroll="true"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
canvas-id="cropper"
id="cropper"
></canvas>
<canvas
class="cropper"
:disable-scroll="true"
:style="{
position: 'fixed',
top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
height: `${cropperOpt.height * cropperOpt.pixelRatio}`
}"
canvas-id="targetId"
id="targetId"
></canvas>
</view>
<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
<!-- #ifdef H5 -->
<view class="upload" @tap="uploadTap">选择图片</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="upload" @tap="uploadTap">重新选择</view>
<!-- #endif -->
<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
</view>
</view>
</template>
<script>
import WeCropper from './weCropper.js';
export default {
props: {
// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
boundStyle: {
type: Object,
default() {
return {
lineWidth: 4,
borderColor: 'rgb(245, 245, 245)',
mask: 'rgba(0, 0, 0, 0.35)'
};
}
}
// // 裁剪框宽度，单位rpx
// rectWidth: {
// type: [String, Number],
// default: 400
// },
// // 裁剪框高度，单位rpx
// rectHeight: {
// type: [String, Number],
// default: 400
// },
// // 输出图片宽度，单位rpx
// destWidth: {
// type: [String, Number],
// default: 400
// },
// // 输出图片高度，单位rpx
// destHeight: {
// type: [String, Number],
// default: 400
// },
// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
// fileType: {
// type: String,
// default: 'jpg',
// },
// // 生成的图片质量
// // H5上无效，目前不考虑使用此参数
// quality: {
// type: [Number, String],
// default: 1
// }
},
data() {
return {
// 底部导航的高度
bottomNavHeight: 50,
originWidth: 200,
width: 0,
height: 0,
cropperOpt: {
id: 'cropper',
targetId: 'targetCropper',
pixelRatio: 1,
width: 0,
height: 0,
scale: 2.5,
zoom: 8,
cut: {
x: (this.width - this.originWidth) / 2,
y: (this.height - this.originWidth) / 2,
width: this.originWidth,
height: this.originWidth
},
boundStyle: {
lineWidth: uni.upx2px(this.boundStyle.lineWidth),
mask: this.boundStyle.mask,
color: this.boundStyle.borderColor
}
},
// 裁剪框和输出图片的尺寸，高度默认等于宽度
// 输出图片宽度，单位px
destWidth: 200,
// 输出图片高度，单位px
destHeight:200,
// 裁剪框宽度，单位px
rectWidth: 200,
// 裁剪框高度，单位px
rectHeight:200,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg',
src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片
};
},
onLoad(option) {
let rectInfo = uni.getSystemInfoSync();
this.width = rectInfo.windowWidth;
this.height = rectInfo.windowHeight - this.bottomNavHeight;
this.cropperOpt.width = this.width;
this.cropperOpt.height = this.height;
this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
if (option.destWidth) this.destWidth = option.destWidth;
if (option.destHeight) this.destHeight = option.destHeight;
if (option.rectWidth && option.rectHeight) {
let rectWidth = option.rectWidth*1;
let rectHeight = option.rectHeight*1;
this.cropperOpt.cut = {
x: (this.width - rectWidth) / 2,
y: (this.height - rectHeight) / 2,
width: rectWidth,
height: rectHeight
};
}
this.rectWidth = option.rectWidth;
this.rectHeight = option.rectHeight;
if (option.fileType) this.fileType = option.fileType;
// 初始化
this.cropper = new WeCropper(this.cropperOpt)
.on('ready', ctx => {
// wecropper is ready for work!
})
.on('beforeImageLoad', ctx => {
// before picture loaded, i can do something
})
.on('imageLoad', ctx => {
// picture loaded
})
.on('beforeDraw', (ctx, instance) => {
// before canvas draw,i can do something
});
// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#000000'
});
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
this.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
this.cropper.pushOrign(this.src);
}
});
},
methods: {
touchStart(e) {
this.cropper.touchStart(e);
},
touchMove(e) {
this.cropper.touchMove(e);
},
touchEnd(e) {
this.cropper.touchEnd(e);
},
getCropperImage(isPre = false) {
if(!this.src) return this.$u.toast('请先选择图片再裁剪');
let cropper_opt = {
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
destWidth: Number(this.destHeight),
fileType: this.fileType
};
this.cropper.getCropperImage(cropper_opt, (path, err) => {
if (err) {
uni.showModal({
title: '温馨提示',
content: err.message
});
} else {
if (isPre) {
uni.previewImage({
current: '', // 当前显示图片的 http 链接
urls: [path] // 需要预览的图片 http 链接列表
});
} else {
uni.$emit('uAvatarCropper', path);
this.$u.route({
type: 'back'
});
}
}
});
},
uploadTap() {
const self = this;
uni.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: (res) => {
self.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
self.cropper.pushOrign(this.src);
}
});
}
}
};
</script>
<style scoped lang="scss">
@import '../../../uview-ui/libs/css/style.components.scss';
.content {
background: rgba(255, 255, 255, 1);
}
.cropper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 11;
}
.cropper-buttons {
background-color: #000000;
color: #eee;
}
.cropper-wrapper {
position: relative;
@include vue-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #000;
}
.cropper-buttons {
width: 100vw;
@include vue-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
font-size: 28rpx;
}
.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
width: 50%;
text-align: center;
}
.cropper-buttons .upload {
text-align: left;
padding-left: 50rpx;
}
.cropper-buttons .getCropperImage {
text-align: right;
padding-right: 50rpx;
}
</style>
pages/vlog/u-avatar-cropper/weCropper.js 0 → 100644
View file @ ce564048
This diff is collapsed.
pages/vlog/uploadPictures/uploadPictures.vue 0 → 100644
View file @ ce564048
<template>
<view class="content">
<view class="top">
<view class="upload" @click="chooseAvatar">
<u-icon class="icon" name="plus-circle" size="80" color="#999999"></u-icon>
</view>
<view class="check">
已选{{checkList.length}}/24
</view>
</view>
<view style="border: 1rpx dashed #ccc;opacity: 0.3;margin-top: 230rpx;"></view>
<view class="img">
<block v-for="(item,index) in imgList" :key="index">
<view class="imgItem" @click="changeImg(item,index)">
<image :src="item.url" mode=""></image>
<u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon>
</view>
</block>
</view>
<view class="bottom">
<view class="del" @click="del">
删除
</view>
<view class="confirm" @click="confirm">
确定
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
maxImg:12,
imgList:[
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
],
checkList:[]
}
},
onLoad(){//代替 vue 里面的 created
// 监听从裁剪页发布的事件，获得裁剪结果
uni.$on('uAvatarCropper', path => {
this.avatar = path;
// 可以在此上传到服务端
uni.uploadFile({
url: 'http://www.example.com/upload',
filePath: path,
name: 'file',
complete: (res) => {
console.log(res);
}
});
})
},
onReady() {//代替 vue 里面的 mounted
},
methods: {
confirm(){//确定提交
this.$u.route({
url:"pages/vlog/pictureFormat/pictureFormat"
})
},
del(){//删除图片
},
changeImg(item,index){//选择图片
if(item.check===0){
if(this.checkList.length<this.maxImg){
item.check=1;
this.checkList.push(index)
}else{
uni.showModal({title: '提示',content: '最多选取'+this.maxImg+"张",});
}
}else{
item.check=0;
this.checkList.splice(this.checkList.indexOf(index),1)
}
},
chooseAvatar() {
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
this.$u.route({
// 关于此路径，请见下方"注意事项"
url:"pages/vlog/u-avatar-cropper/u-avatar-cropper",
// 内部已设置以下默认参数值，可不传这些参数
params: {
// 输出图片宽高，单位px
destWidth: 1000,
destHeight: 1000,
// 裁剪框宽高，单位px
rectWidth: 300,
rectHeight: 300,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg',
}
})
},
}
}
</script>
<style lang="scss" scoped>
.content{padding: 0 20rpx;box-sizing: border-box;margin-bottom:100rpx;text-align: center;
.top{display: flex;position: fixed;top: 0;z-index: 10;background-color: #fff;width: 100%;padding-bottom: 20rpx;
.upload{height: 200rpx;width: 200rpx;border-radius: 20rpx;background-color: #ECECEC;
.icon{margin-top:60rpx;}
}
.check{display: inline-block;border-radius: 15rpx;background-color: #FFE600;width: 150rpx;height: 60rpx;line-height: 60rpx;margin-top: 70rpx;margin-left: 200rpx;}
}
.img{display: flex;flex-wrap: wrap;margin-top: 10rpx;
.imgItem{width: 33.33%;padding: 10rpx; position: relative;
image{width: 100%;height: 200rpx;border-radius: 10rpx;}
.icon{position: absolute;top: 10rpx;right: 10rpx;}
}
}
.bottom{position: fixed;bottom: 0;width: 100%;height: 80rpx;line-height: 80rpx; right: 0;display: flex;justify-content: space-around;background-color: #fff;align-items: center;
view{width: 35%;border-radius: 10rpx;height: 60rpx;line-height: 60rpx;}
.del{background: #ccc;}
.confirm{background-color: #FFE600;}
}
}
</style>
\ No newline at end of file
pages/vlog/vlogIndex/vlogIndex.vue
View file @ ce564048
<template>
<view class="content">
<u-search placeholder="景区/关键词搜索" v-model="search" :clearabled="true" @change="query" :show-action="true" action-text="搜索" :animation="true"></u-search>
<view style="height: 20rpx;"></view>
<u-search placeholder="景区/关键词搜索" v-model="search" :clearabled="true" @search="query" :show-action="true" action-text="搜索" :animation="true"></u-search>
<view class="swiper">
<u-swiper :list="list"></u-swiper>
</view>
......@@ -24,7 +25,7 @@
<view class="shuxian"></view>
<view>定制我的相片集</view>
</view>
<navigator url="../photoAlbum/photoAlbum">
<navigator url="../product/product">
<view class="photoGallery">
<image class="img" src="../../../static/img/vlog/icon/bg.jpg"></image>
<view class="access"></view>
......@@ -66,13 +67,6 @@ export default {
return {
userInfo:"",//用户信息
scenicList:[],//景区列表
share:{
title:'vlog1231231',
path:'/pages/index/index',
imageUrl:'',
desc:'',
content:''
},
search:"",//景区
list: [
{
......@@ -95,9 +89,6 @@ export default {
},
onReady() {//代替 vue 里面的 mounted
},
onShareAppMessage(res){//分享
success:(res=>{console.log(res);})
},
methods: {
getUserInfo(){//获取用户信息
this.$request('wechatUser/wxUser/findWxUser',{
......@@ -146,57 +137,6 @@ export default {
}
})
},
handleDownload() { // 下载功能
uni.showLoading({title:"下载中",mask:true})
let fileName = new Date().valueOf();//获取时间戳
uni.downloadFile({//下载文件资源到本地
url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',//filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
success: res => {//下载到本地成功
let filePath = res.filePath;
uni.saveVideoToPhotosAlbum({//保存视频到系统相册。
filePath,
success: file => {//保存成功
//删除本地缓存
let fileMgr = uni.getFileSystemManager();
fileMgr.unlink({
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
})
uni.showToast({title:"下载成功",icon:"success",mask:true})
},
fail: err => {
uni.hideLoading();
//拒绝授权时显示
if (err.errMsg === 'saveVideoToPhotosAlbum:fail auth deny') {
uni.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: data => {
//打开权限设置
uni.openSetting({
success: setting => {
if (setting.authSetting['scope.writePhotosAlbum']) {
uni.showModal({title: '提示',content: '获取权限成功,再次点击下载即可保存',showCancel: false,})
} else {
uni.showModal({title: '提示',ontent: '获取权限失败，将无法保存到相册哦',showCancel: false})
}
},
})
}
})
}
}
})
},
fail: err => {//下载失败
uni.hideLoading();
if (err.errMsg == 'downloadFile:fail createDownloadTask:fail url not in domain list') {
uni.showToast({title: '服务器错误，请联系相关管理员',icon: 'none',mask:true})
}
}
})
},
openCamera(){//用户首次进入打开权限
uni.authorize({//摄像头
scope:'scope.camera',
......
pages/vlog/vlogList/vlogList.vue
View file @ ce564048
......@@ -4,12 +4,21 @@
<view class="item">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="error" controls @play="playing(1)" id="d1"></video>
<button class="btnn" open-type="share">分享下载</button>
<view class="">
<button class="btnn" open-type="share">分享下载</button>
<text class="price">¥<text>0</text></text>
</view>
<view style="clear: both;">
</view>
</view>
<view class="item">
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="error" controls @play="playing(2)" id="d2"></video>
<button class="btnn" open-type="share">分享下载</button>
<view class="">
<button class="btnn" open-type="share">下载</button>
<text class="price">¥<text>5</text></text>
</view>
</view>
</view>
</view>
......@@ -31,6 +40,7 @@
}
},
onHide() {},
onReady() {},
onShareAppMessage(res) { //发送给朋友
console.log(res);
if (res.from === "button") {
......@@ -43,6 +53,57 @@
}
},
methods: {
handleDownload() { // 下载功能
uni.showLoading({title:"下载中",mask:true})
let fileName = new Date().valueOf();//获取时间戳
uni.downloadFile({//下载文件资源到本地
url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',//filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
success: res => {//下载到本地成功
let filePath = res.filePath;
uni.saveVideoToPhotosAlbum({//保存视频到系统相册。
filePath,
success: file => {//保存成功
//删除本地缓存
let fileMgr = uni.getFileSystemManager();
fileMgr.unlink({
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
})
uni.showToast({title:"下载成功",icon:"success",mask:true})
},
fail: err => {
uni.hideLoading();
//拒绝授权时显示
if (err.errMsg === 'saveVideoToPhotosAlbum:fail auth deny') {
uni.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: data => {
//打开权限设置
uni.openSetting({
success: setting => {
if (setting.authSetting['scope.writePhotosAlbum']) {
uni.showModal({title: '提示',content: '获取权限成功,再次点击下载即可保存',showCancel: false,})
} else {
uni.showModal({title: '提示',ontent: '获取权限失败，将无法保存到相册哦',showCancel: false})
}
},
})
}
})
}
}
})
},
fail: err => {//下载失败
uni.hideLoading();
if (err.errMsg == 'downloadFile:fail createDownloadTask:fail url not in domain list') {
uni.showToast({title: '服务器错误，请联系相关管理员',icon: 'none',mask:true})
}
}
})
},
error(e) { //视频播放出错触发函数
uni.showModal({
content: e.target.errMsg,
......@@ -55,51 +116,26 @@
} else {
uni.createVideoContext("d1").pause()
}
// let trailer = this.video_list;
// trailer.forEach(function(item, index) { // 获取json对象并遍历, 停止非当前视频
// if (item.videoUrl != null && item.videoUrl != "") {
// let temp = item.pgcId;
// if (temp != currentId) {
// uni.createVideoContext(temp).pause(); //暂停视频播放事件
// }
// }
// })
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 0 20rpx;
height: 100%;
width: 100%;
text-align: center;
background-color: #192033;
.content {padding: 0 20rpx;height: 100%;width: 100%;text-align: center;background-color: #192033;
.item {
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
padding: 0 10rpx;
border-radius: 10rpx;
background-color: #192033;
margin-bottom: 30rpx;
text-align: center;
.video {
height: 350rpx;
border-radius: 10rpx;
width: 100%;
}
.btnn {
display: inline-block;
font-size: 28rpx;
border-radius: 40rpx;
text-align: center;
background-color: #FFE600;
margin: 30rpx 0;
font-weight: bold;
}
margin-bottom: 40rpx;
.video {height: 350rpx;border-radius: 10rpx;width: 100%;}
view{margin: 20rpx 0;
.btnn {float: left;width: 150rpx; background-color: #CCCCCA;font-weight: bold;border-radius: 30rpx;line-height: 30rpx;font-size: 24rpx;padding: 10rpx 15rpx;}
.price{float: right;color: #DE6F26;font-size: 22rpx;
text{font-size: 32rpx;margin-left: 5rpx;font-weight: bold;}
}
}
}
}
</style>
static/img/vlog/icon/debug.log 0 → 100644
View file @ ce564048
[0817/091631:ERROR:tcp_socket_win.cc(647)] closesocket: 应用程序没有调用 WSAStartup，或者 WSAStartup 失败。 (0x276D)
uview-ui/components/u-dropdown-item/u-dropdown-item.vue
View file @ ce564048
......@@ -68,7 +68,7 @@
return {
active: false, // 当前项是否处于展开状态
activeColor: '#2979ff', // 激活时左边文字和右边对勾图标的颜色
inactiveColor: '#606266', // 未激活时左边文字和右边对勾图标的颜色
inactiveColor: '#606266' // 未激活时左边文字和右边对勾图标的颜色
}
},
computed: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment