Skip to content

U
uni-pdtravel
Commit 34e173bf authored by zhoucong's avatar zhoucong
Browse files
Options

vlog相册界面优化

parent efbb4c50
Show whitespace changes
Inline Side-by-side
Showing with 79 additions and 38 deletions
pages/vlog/components/dragImg/dragImg.vue
View file @ 34e173bf
...@@ -455,7 +455,7 @@ ...@@ -455,7 +455,7 @@
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 50rpx; line-height: 50rpx;
font-size: 20rpx; font-size: 18rpx;
} }
} }
......
pages/vlog/orderPay/orderPay.vue
View file @ 34e173bf
...@@ -31,9 +31,7 @@ ...@@ -31,9 +31,7 @@
<view class="price"> <view class="price">
￥{{allprice | money}} ￥{{allprice | money}}
</view> </view>
<view class="confirm"> <view class="confirm" @click="confirm">确认订单</view>
<u-button type="success" style="background-color: red;" @click="confirm">确认订单</u-button>
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -128,6 +126,12 @@ ...@@ -128,6 +126,12 @@
orderId: res.data.id orderId: res.data.id
}) })
uni.hideLoading(); uni.hideLoading();
}else{
uni.showModal({
showCancel: false,
title: '提示',
content: res.message,
});
} }
}) })
}, },
...@@ -275,6 +279,8 @@ ...@@ -275,6 +279,8 @@
} }
.bottom { .bottom {
border-top: 1upx solid #e8e8e8;
height: 98upx;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
...@@ -290,11 +296,14 @@ ...@@ -290,11 +296,14 @@
} }
.confirm { .confirm {
height: 98upx;
background-color: #FFE600; background-color: #FFE600;
width: 200upx; width: 200upx;
font-size: 32upx;
line-height: 98upx;
font-weight: bold;
float: right; float: right;
text-align: center; text-align: center;
border-radius: 10upx;
} }
.price { .price {
......
pages/vlog/pictureFormat/pictureFormat.vue
View file @ 34e173bf
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text> <u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text>
</view> </view>
<view class="top"> <view class="top">
<dragImg :alternateImages="alternateImages" :listData="imgList" @change="changeImgList" :columns="4"></dragImg> <dragImg :alternateImages="alternateImages" :listData="imgList" @change="changeImgList" :columns="3"></dragImg>
</view> </view>
<view class="bottom" @click="next"> <view class="bottom" @click="next">
下一步 下一步
...@@ -85,10 +85,10 @@ ...@@ -85,10 +85,10 @@
color: #ABABAB; color: #ABABAB;
background-color: #fff; background-color: #fff;
position: fixed;top: 0;z-index: 10; position: fixed;top: 0;z-index: 10;
border-bottom: 1upx dashed #ccc;
} }
.top{ .top{
margin-top: 50rpx; margin-top: 50rpx;
border-top: 1px dashed #ccc;
margin-bottom: 100rpx; 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;} .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;}
......
pages/vlog/productDetails/productDetails.vue
View file @ 34e173bf
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text> <text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
</view> </view>
<image src="../../../static/img/vlog/icon/fengexian.png" style="width: 100%;height: 15rpx;"></image> <image src="../../../static/img/vlog/icon/fengexian.png" style="width: 100%;height: 15rpx;"></image>
<view style="display: flex;justify-content: space-around;margin-top: 20rpx;"> <view style="display: flex;justify-content: space-around;margin-bottom: 20upx;width: 75%;margin: 20upx auto;">
<button type="default" class="btnn" :class="current===0?'active':'noactive'" <button type="default" class="btnn" :class="current===0?'active':'noactive'"
@click="current=0">封面</button> @click="current=0">封面</button>
<button type="default" class="btnn" :class="current===1?'active':'noactive'" <button type="default" class="btnn" :class="current===1?'active':'noactive'"
...@@ -25,10 +25,10 @@ ...@@ -25,10 +25,10 @@
</view> </view>
<view v-if="current===0"> <view v-if="current===0">
<view class="cover"> <view class="cover">
<view class="coverItem" v-for="(item,index) in imgList2" :key="index"> <view class="coverItem1" v-for="(item,index) in imgList2" :key="index">
<image class="img" :src="item.url" @click="changeCover(item.url)"></image> <image class="img" :src="item.url" @click="changeCover(item.url)"></image>
<u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" <image v-if="cover===item.url" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
size="50"></u-icon> <!-- <u-icon v-if="cover===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -36,8 +36,8 @@ ...@@ -36,8 +36,8 @@
<view class="cover"> <view class="cover">
<view class="coverItem" v-for="(item,index) in imgList3" :key="index"> <view class="coverItem" v-for="(item,index) in imgList3" :key="index">
<image class="img" :src="item.url" @click="changeinsidePages(item.url)"></image> <image class="img" :src="item.url" @click="changeinsidePages(item.url)"></image>
<u-icon v-if="insidePages===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" <image v-if="insidePages===item.url" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
size="50"></u-icon> <!-- <u-icon v-if="insidePages===item.url" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -46,8 +46,7 @@ ...@@ -46,8 +46,7 @@
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text> <text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
</view> </view>
<image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image> <image src="../../../static/img/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 15rpx;"></image>
<image :src="item.url" mode="widthFix" v-for="(item,index) in imgList1" :key="index" <image :src="item.url" mode="widthFix" v-for="(item,index) in imgList1" :key="index" style="width: 100%;border-radius: 10rpx;"></image>
style="width: 100%;border-radius: 10rpx;"></image>
<view class="bottom" @click="beginMaking">上传照片制作</view> <view class="bottom" @click="beginMaking">上传照片制作</view>
</view> </view>
<view v-else> <view v-else>
...@@ -158,19 +157,22 @@ ...@@ -158,19 +157,22 @@
.item { .item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 30rpx 20rpx 20rpx 20rpx; padding: 15rpx 56rpx 52rpx 15rpx;
image { image {
width: 48%; width: 412rpx;
height: 220rpx; height: 288rpx;
border-radius: 10rpx; border-radius: 10rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
} }
.title { .title {
color: #999999;
font-size: 28upx;
width: 48%; width: 48%;
height: 220rpx; height: 220rpx;
padding-top: 10rpx; padding-top: 10rpx;
margin-top: 20rpx; margin-top: 60rpx;
} }
} }
...@@ -191,13 +193,37 @@ ...@@ -191,13 +193,37 @@
.cover { .cover {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-around;
padding-bottom: 40upx;
.coverItem { .coverItem {
width: 48.5%; width: 328upx;
height: 220rpx; height: 231upx;
position: relative;
margin-top: 20rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.icon {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 10rpx;
right: 10rpx;
}
}
.coverItem1 {
width: 556upx;
height: 396upx;
margin: 0 auto;
position: relative; position: relative;
padding-top: 20rpx; margin-top: 20rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
.img { .img {
width: 100%; width: 100%;
...@@ -206,9 +232,11 @@ ...@@ -206,9 +232,11 @@
} }
.icon { .icon {
width: 40rpx;
height: 40rpx;
position: absolute; position: absolute;
top: 25rpx; top: 10rpx;
right: 5rpx; right: 10rpx;
} }
} }
} }
...@@ -217,11 +245,11 @@ ...@@ -217,11 +245,11 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 100rpx; height: 98rpx;
background-color: #FFE600; background-color: #FFE600;
right: 0; right: 0;
line-height: 100rpx; line-height: 100rpx;
font-size: 32rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
border-top-left-radius: 10rpx; border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx; border-top-right-radius: 10rpx;
...@@ -230,10 +258,10 @@ ...@@ -230,10 +258,10 @@
.btnn { .btnn {
background-color: #ECF4FF; background-color: #ECF4FF;
width: 25%; width: 180upx;
height: 60rpx; height: 64rpx;
line-height: 60rpx; line-height: 64rpx;
font-size: 26rpx; font-size: 28rpx;
} }
.active { .active {
......
pages/vlog/uploadPictures/uploadPictures.vue
View file @ 34e173bf
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
<block v-for="(item,index) in imgList" :key="index"> <block v-for="(item,index) in imgList" :key="index">
<view class="imgItem" @click="changeImg(item,index)"> <view class="imgItem" @click="changeImg(item,index)">
<image :src="imgUrl+item.url"></image> <image :src="imgUrl+item.url"></image>
<u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"> <image v-if="item.check===1" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
</u-icon> <!-- <u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon> -->
</view> </view>
</block> </block>
</view> </view>
...@@ -196,11 +196,13 @@ ...@@ -196,11 +196,13 @@
display: inline-block; display: inline-block;
border-radius: 15rpx; border-radius: 15rpx;
background-color: #FFE600; background-color: #FFE600;
width: 150rpx; width: 180rpx;
height: 60rpx; height: 64rpx;
line-height: 60rpx; line-height: 64rpx;
margin-top: 70rpx; margin-top: 70rpx;
margin-left: 200rpx; margin-left: 200rpx;
font-size: 28upx;
font-weight: bold;
} }
} }
...@@ -222,8 +224,10 @@ ...@@ -222,8 +224,10 @@
.icon { .icon {
position: absolute; position: absolute;
top: 10rpx; top: 15rpx;
right: 10rpx; right: 15rpx;
width: 40rpx;
height: 40rpx;
} }
} }
} }
......
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