Skip to content

U
uni-pdtravel
Commit daf3417b authored by 潘永坪's avatar 潘永坪
Browse files
Options

Merge remote-tracking branch 'remotes/origin/zhoucong' into develop 

# Conflicts:
#	pages/index/index.vue
#	unpackage/dist/dev/.sourcemap/mp-weixin/pages/vlog/myVlog/myVlog.js.map
#	unpackage/dist/dev/.sourcemap/mp-weixin/pages/vlog/photoAlbum/photoAlbum.js.map
#	unpackage/dist/dev/.sourcemap/mp-weixin/pages/vlog/scenicList/scenicList.js.map
#	unpackage/dist/dev/.sourcemap/mp-weixin/pages/vlog/share/share.js.map
#	unpackage/dist/dev/.sourcemap/mp-weixin/pages/vlog/vlogIndex/vlogIndex.js.map
#	unpackage/dist/dev/.sourcemap/mp-weixin/pages/vlog/vlogList/vlogList.js.map
#	unpackage/dist/dev/.sourcemap/mp-weixin/pages/vlog/vlogface/vlogface.js.map
parents aafab021 fd416b15
Expand all Show whitespace changes
Inline Side-by-side
Showing with 222 additions and 106 deletions
pages.json
View file @ daf3417b
{ {
"pages": [ //pages数组中第一项表示应用启动页 "pages": [ //pages数组中第一项表示应用启动页
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
...@@ -14,6 +15,17 @@ ...@@ -14,6 +15,17 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
{
"path" : "pages/vlog/orderPay/orderPay",
"style" :
{
"navigationBarTitleText": "订单支付",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle": "black"
}
} }
,{ ,{
"path" : "pages/login/login", "path" : "pages/login/login",
...@@ -238,12 +250,12 @@ ...@@ -238,12 +250,12 @@
"style" : "style" :
{ {
"navigationBarTitleText": "照片调整", "navigationBarTitleText": "照片调整",
"enablePullDownRefresh": false "enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#ffffff",
"navigationBarTextStyle": "black"
} }
} }
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "white", "navigationBarTextStyle": "white",
......
pages/index/index.vue
View file @ daf3417b
<template> <template>
<view > <view >
<!-- <view class="top"> <!-- <view class="top">
<view class="top-search"> <view class="top-search">
</view> </view>
......
pages/vlog/components/dragImg/dragImg.vue
View file @ daf3417b
...@@ -5,35 +5,80 @@ ...@@ -5,35 +5,80 @@
:class="['item', cur == index ? 'cur' : '', curZ == index ? 'zIndex' : '', itemTransition && index !== cur ? 'itemTransition' : '']" :class="['item', cur == index ? 'cur' : '', curZ == index ? 'zIndex' : '', itemTransition && index !== cur ? 'itemTransition' : '']"
v-for="(item, index) in list" :key="index" :id="'item' + index" :data-key="item.key" :data-index="index" v-for="(item, index) in list" :key="index" :id="'item' + index" :data-key="item.key" :data-index="index"
:style="{ transform: `translate3d(${index === cur ? tranX : item.tranX}px, ${index === cur ? tranY : item.tranY}px, 0px)`, width: `${100 / columns}%` }" :style="{ transform: `translate3d(${index === cur ? tranX : item.tranX}px, ${index === cur ? tranY : item.tranY}px, 0px)`, width: `${100 / columns}%` }"
@tap="itemClick(index)" @longpress="longPress" @touchmove.stop="touchMove" @touchend.stop="touchEnd"> @tap="itemClick(index,item.data.images)" @longpress="longPress" @touchmove.stop="touchMove"
@touchend.stop="touchEnd">
<!-- start:请在该区域编写自己的渲染逻辑 --> <!-- start:请在该区域编写自己的渲染逻辑 -->
<view class="info"> <view class="info">
<view class="info__item"> <view class="info__item">
<image class="image" :src="item.data.images"></image> <image class="image" :src="item.data.images" mode="widthFix"></image>
</view>
<view class="info__item_btn" @click.stop="replace(item)">
更换
</view> </view>
</view> </view>
<!-- end:请在该区域编写自己的渲染逻辑 --> <!-- end:请在该区域编写自己的渲染逻辑 -->
</view> </view>
</view> </view>
<u-popup v-model="show" mode="bottom" height="50%">
<view style="display: flex;flex-wrap: wrap;width: 100%;">
<view style="width: 25%;padding: 10rpx;" v-for="(item,index) in alternateImages" :key="index">
<image :src="item.images" style="width: 100%;" mode="widthFix" @click="changeImglist(item.images)">
</image>
</view>
</view>
</u-popup>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
listData: {// 数据源 listData: { // 数据源
type: Array, type: Array,
default: () => { default: () => {
return [] return []
} }
}, },
columns: {// 列数 columns: { // 列数
type: Number, type: Number,
default: 0 default: 0
}, },
}, },
data() { data() {
return { return {
alternateImages: [{
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'
}
], //备选图片
checkImg: "", //点击更改图片的key
show: false, //照片图库弹出层
cur: -1, // 当前激活的元素 cur: -1, // 当前激活的元素
curZ: -1, // 当前激活的元素, 用于控制激活元素z轴显示 curZ: -1, // 当前激活的元素, 用于控制激活元素z轴显示
tranX: 0, // 当前激活元素的 X轴 偏移量 tranX: 0, // 当前激活元素的 X轴 偏移量
...@@ -43,12 +88,12 @@ ...@@ -43,12 +88,12 @@
list: [], //数据 list: [], //数据
overOnePage: false, // 整个区域是否超过一个屏幕 overOnePage: false, // 整个区域是否超过一个屏幕
itemTransition: false, // item 变换是否需要过渡动画, 首次渲染不需要 itemTransition: false, // item 变换是否需要过渡动画, 首次渲染不需要
platform: "" ,//使用平台 platform: "", //使用平台
} }
}, },
watch: { watch: {
columns(newVal, oldVal) { columns(newVal, oldVal) {
this.columns=newVal this.columns = newVal
this.dataChange() this.dataChange()
}, },
}, },
...@@ -56,6 +101,21 @@ ...@@ -56,6 +101,21 @@
this.init() this.init()
}, },
methods: { methods: {
changeImglist(src) {//选择更换图片
this.checkImg.data.images = src
this.show = false
let listData = []
this.list.forEach(item => {
listData[item.key] = item.data
})
this.$emit('change', { //给父组件传递数据
listData: listData
})
},
replace(item) { //更换图片
this.checkImg = item
this.show = true
},
init() { init() {
// 空值判断, 避免获取不到节点信息报错问题 // 空值判断, 避免获取不到节点信息报错问题
if (this.listData.length == 0) { if (this.listData.length == 0) {
...@@ -85,7 +145,7 @@ ...@@ -85,7 +145,7 @@
setTimeout(() => { //需要等页面渲染完成后执行函数,否则获取不到节点信息 setTimeout(() => { //需要等页面渲染完成后执行函数,否则获取不到节点信息
let queryItem = uni.createSelectorQuery().in(this); let queryItem = uni.createSelectorQuery().in(this);
queryItem.select('.item').boundingClientRect(res => {// 获取每一项的宽高等属性 queryItem.select('.item').boundingClientRect(res => { // 获取每一项的宽高等属性
let rows = Math.ceil(this.list.length / this.columns) let rows = Math.ceil(this.list.length / this.columns)
this.item = res this.item = res
this.getPosition(this.list, false) this.getPosition(this.list, false)
...@@ -107,7 +167,7 @@ ...@@ -107,7 +167,7 @@
.exec() .exec()
}, 200) }, 200)
}, },
getPosition(data, vibrate = true) {//根据排序后 list 数据进行位移计算 getPosition(data, vibrate = true) { //根据排序后 list 数据进行位移计算
let list = data.map((item, index) => { let list = data.map((item, index) => {
item.tranX = this.item.width * (item.key % this.columns) item.tranX = this.item.width * (item.key % this.columns)
item.tranY = Math.floor(item.key / this.columns) * this.item.height item.tranY = Math.floor(item.key / this.columns) * this.item.height
...@@ -126,7 +186,7 @@ ...@@ -126,7 +186,7 @@
listData: listData listData: listData
}) })
}, },
longPress(e) {//长按触发移动排序 longPress(e) { //长按触发移动排序
// 防止多指触发 drag 动作, 如果已经在 drag 中则返回, touchstart 事件中有效果 // 防止多指触发 drag 动作, 如果已经在 drag 中则返回, touchstart 事件中有效果
if (this.dragging) return if (this.dragging) return
let { let {
...@@ -142,14 +202,14 @@ ...@@ -142,14 +202,14 @@
// 表示 drag 动作开始 // 表示 drag 动作开始
this.dragging = true this.dragging = true
let {// 获取初始化点的 pageX 和 pageY let { // 获取初始化点的 pageX 和 pageY
pageX: startPageX, pageX: startPageX,
pageY: startPageY pageY: startPageY
} = this.startTouch } = this.startTouch
if (this.columns === 1) {// 单列时候X轴初始不做位移 if (this.columns === 1) { // 单列时候X轴初始不做位移
this.tranX = 0 this.tranX = 0
} else {// 多列的时候计算X轴初始位移, 使 item 水平中心移动到点击处 } else { // 多列的时候计算X轴初始位移, 使 item 水平中心移动到点击处
this.tranX = startPageX - this.item.width / 2 - this.itemWrap.left this.tranX = startPageX - this.item.width / 2 - this.itemWrap.left
} }
// 计算Y轴初始位移, 使 item 垂直中心移动到点击处 // 计算Y轴初始位移, 使 item 垂直中心移动到点击处
...@@ -192,13 +252,13 @@ ...@@ -192,13 +252,13 @@
// 单列时候X轴初始不做位移 // 单列时候X轴初始不做位移
if (this.columns === 1) tranX = 0 if (this.columns === 1) tranX = 0
if(this.overOnePage) {// 判断是否超过一屏幕, 超过则需要判断当前位置动态滚动page的位置 if (this.overOnePage) { // 判断是否超过一屏幕, 超过则需要判断当前位置动态滚动page的位置
if(currentClientY > this.windowHeight - this.item.height) { if (currentClientY > this.windowHeight - this.item.height) {
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: currentPageY + this.item.height - this.windowHeight, scrollTop: currentPageY + this.item.height - this.windowHeight,
duration: 300 duration: 300
}); });
} else if(currentClientY < this.item.height) { } else if (currentClientY < this.item.height) {
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: currentPageY - this.item.height, scrollTop: currentPageY - this.item.height,
duration: 300 duration: 300
...@@ -246,7 +306,7 @@ ...@@ -246,7 +306,7 @@
this.curZ = -1 this.curZ = -1
}, 3000) }, 3000)
}, },
l2r(key, origin) {//正序拖动 key 值和固定项判断逻辑 l2r(key, origin) { //正序拖动 key 值和固定项判断逻辑
if (key == origin) return origin if (key == origin) return origin
// if (this.list && this.list[key] && this.list[key].fixed) { // if (this.list && this.list[key] && this.list[key].fixed) {
// return this.l2r(key - 1, origin) // return this.l2r(key - 1, origin)
...@@ -254,7 +314,7 @@ ...@@ -254,7 +314,7 @@
return key return key
// } // }
}, },
r2l(key, origin) {//倒序拖动 key 值和固定项判断逻辑 r2l(key, origin) { //倒序拖动 key 值和固定项判断逻辑
if (key == origin) return origin if (key == origin) return origin
// if (this.list && this.list[key] && this.list[key].fixed) { // if (this.list && this.list[key] && this.list[key].fixed) {
// return this.r2l(key + 1, origin) // return this.r2l(key + 1, origin)
...@@ -266,7 +326,7 @@ ...@@ -266,7 +326,7 @@
insert(origin, end) { insert(origin, end) {
this.itemTransition = true this.itemTransition = true
let list let list
if (origin < end) {// 正序拖动 if (origin < end) { // 正序拖动
list = this.list.map(item => { list = this.list.map(item => {
// if (item.fixed) return item // if (item.fixed) return item
if (item.key > origin && item.key <= end) { if (item.key > origin && item.key <= end) {
...@@ -277,7 +337,7 @@ ...@@ -277,7 +337,7 @@
return item return item
}) })
this.getPosition(list) this.getPosition(list)
} else if (origin > end) {// 倒序拖动 } else if (origin > end) { // 倒序拖动
list = this.list.map(item => { list = this.list.map(item => {
// if (item.fixed) return item // if (item.fixed) return item
if (item.key >= end && item.key < origin) { if (item.key >= end && item.key < origin) {
...@@ -315,13 +375,18 @@ ...@@ -315,13 +375,18 @@
}, 0) }, 0)
}, },
//点击每一项后触发事件 //点击每一项后触发事件
itemClick(index) { itemClick(index, src) {
let item = this.list[index] let urls = []
this.$emit('click', { urls.push(src)
oldKey: index, uni.previewImage({//点击查看大图
newKey: item.key, urls: urls,
data: item.data
}) })
// let item = this.list[index]
// this.$emit('click', {
// oldKey: index,
// newKey: item.key,
// data: item.data
// })
} }
} }
} }
...@@ -404,6 +469,20 @@ ...@@ -404,6 +469,20 @@
height: 100%; height: 100%;
} }
} }
&__item_btn {
height: 50rpx;
width: 50rpx;
position: absolute;
right: 12rpx;
bottom: 12rpx;
background-color: rgba($color: #000000, $alpha: 0.5);
border-radius: 10rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
font-size: 20rpx;
}
} }
.cell { .cell {
......
pages/vlog/orderPay/orderPay.vue 0 → 100644
View file @ daf3417b
<template>
<view class="content">
</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;}
</style>
pages/vlog/pictureFormat/pictureFormat.vue
View file @ daf3417b
<template> <template>
<view class="content"> <view class="content">
<view class="title">
<u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text>
</view>
<view class="top"> <view class="top">
<dragImg :listData="imgList" @change="changeImgList" :columns="4" @click="clickItem" ></dragImg> <dragImg :listData="imgList" @change="changeImgList" :columns="4"></dragImg>
</view>
<view class="bottom" @click="next">
下一步
</view> </view>
</view> </view>
</template> </template>
...@@ -43,62 +49,9 @@ ...@@ -43,62 +49,9 @@
}, },
{ {
images: '/static/images/swipe/10.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'
} }
] ],
sortImglist:[]
} }
}, },
onLoad() { //代替 vue 里面的 created onLoad() { //代替 vue 里面的 created
...@@ -107,10 +60,17 @@ ...@@ -107,10 +60,17 @@
}, },
methods: { methods: {
changeImgList(res) { changeImgList(res) {
console.log(res); this.sortImglist=res.listData
}, },
clickItem(res){ next(){//下一步
console.log(res); // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
this.$u.route({
// 关于此路径，请见下方"注意事项"
url:"pages/vlog/orderPay/orderPay",
// 内部已设置以下默认参数值，可不传这些参数
params: {
}
})
} }
} }
} }
...@@ -121,7 +81,20 @@ ...@@ -121,7 +81,20 @@
padding: 0 20rpx; padding: 0 20rpx;
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center;
position: relative; position: relative;
.title{
width: 100%;
height: 50rpx;
line-height: 50rpx;
color: #ABABAB;
background-color: #fff;
position: fixed;top: 0;z-index: 10;
}
.top{
margin-top: 50rpx;
border-top: 1px dashed #ccc;
margin-bottom: 100rpx;
}
.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;z-index: 10;text-align: center;}
} }
</style> </style>
pages/vlog/uploadPictures/uploadPictures.vue
View file @ daf3417b
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
export default { export default {
data() { data() {
return { return {
maxImg:12, maxImg:24,
imgList:[ imgList:[
{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",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/2.jpg",check:0},
...@@ -85,9 +85,14 @@ export default { ...@@ -85,9 +85,14 @@ export default {
}, },
methods: { methods: {
confirm(){//确定提交 confirm(){//确定提交
if(this.checkList.length<this.maxImg){
uni.showModal({title: '提示',content: '相册规格'+this.maxImg+"张,请按照标准选择确定",});
}else{
this.$u.route({ this.$u.route({
url:"pages/vlog/pictureFormat/pictureFormat" url:"pages/vlog/pictureFormat/pictureFormat"
}) })
}
}, },
del(){//删除图片 del(){//删除图片
}, },
......
pages/vlog/vlogIndex/vlogIndex.vue
View file @ daf3417b
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</navigator> </navigator>
<view class="title"> <view class="title">
<view class="shuxian"></view> <view class="shuxian"></view>
<view>定制我的相片集</view> <view>我的相片集</view>
</view> </view>
<navigator url="../product/product"> <navigator url="../product/product">
<view class="photoGallery"> <view class="photoGallery">
......
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