Skip to content

U
uni-pdtravel
Commit 1dec4b4d authored by qipeng's avatar qipeng
Browse files
Options

立刻下单遮罩

parent 07f93fe6
Show whitespace changes
Inline Side-by-side
Showing with 226 additions and 6 deletions
pages/album/albumComponets/compometsBuy/compometsBuy.vue
View file @ 1dec4b4d
......@@ -11,9 +11,9 @@
<view class="title-message">
<view class="message-photo">
<!--照片-->
<image src="../static/album/myVlog.png"></image>
<image src="../../static/album/myVlog.png"></image>
<!--放大-->
<image src="../static/album/icon04.png"></image>
<image src="../../static/album/icon04.png"></image>
</view>
<view class="message-other">
<view class="other-name">单照片</view>
......@@ -48,9 +48,49 @@
<view class="compomets-commonBox">
<view class="commonBox-name">取件方式</view>
<view class="commonBox-pickUp">
<view class="pickUp-click">
现场自取
</view>
<view class="pickUp-click pickUp-clickAct">
邮寄到家
</view>
</view>
</view>
<view class="compomets-commonBox">
<view class="commonBox-name">联系电话</view>
<u--input placeholder="请输入取片人手机号码" v-model="phoneNum" type="number" border="none" clearable></u--input>
</view>
<view class="compomets-commonBox">
<view class="commonBox-name">取件地址</view>
<view class="commonBox-picker" @click="show = true">
<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
{{showAddress}}
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="compomets-commonBox">
<view class="commonBox-name">备注</view>
<u--input placeholder="请输入备注信息" v-model="remarkMes" border="none" clearable></u--input>
</view>
</view>
<!--支付方式-->
<view class="compomets-payment">
<view class="payment-mes">
<image src="../../static/album/icon11.png"></image>
<view>微信支付</view>
</view>
<view class="payment-radio">
<view></view>
</view>
</view>
<!--合计-->
<view class="compomets-total">
<view class="total-amount">
<view class="amount-unit amount-unit333">合计：</view>
<view class="amount-unit amount-unitD00">¥</view>
<view class="amount-number">20</view>
</view>
<view class="total-btn">去结算</view>
</view>
</view>
</view>
......@@ -64,10 +104,46 @@ export default {
data() {
return {
printNum:1,//打印份数
phoneNum:'',//联系电话
remarkMes:'',//备注信息
show: false,//遮罩显隐---项目
columns: [//遮罩列表---项目
[{
label: '雪月夜1',
// 其他属性值
id: 2021
// ...
}, {
label: '冷夜雨2',
id: 804
}, {
label: '冷夜雨3',
id: 804
}, {
label: '冷夜雨4',
id: 804
}, {
label: '冷夜雨5',
id: 804
}, {
label: '冷夜雨6',
id: 804
}, {
label: '冷夜雨7',
id: 804
}, {
label: '冷夜雨8',
id: 804
}]
],
showAddress:'雪月夜',//显示内容---项目
}
},
methods:{
addressFun(e){//项目选择
this.showAddress = e.value[0].label
this.show=false
},
},
}
</script>
......@@ -226,6 +302,7 @@ export default {
.compomets-commonBox:nth-last-child(1){
border-bottom: none;
}
//打印份数
/deep/ .u-number-box{
margin-right: 38rpx;
}
......@@ -239,6 +316,149 @@ export default {
width: 56rpx !important;
background-color: #fff !important;
}
//取件方式
.commonBox-pickUp{
flex: 1;
display: flex;
justify-content:flex-end;
padding-right: 40rpx;
padding-top: 24rpx;
.pickUp-click{
width: 160rpx;
height: 52rpx;
border-radius: 8rpx;
border: 2rpx solid #EEEEEE;
border-radius: 8rpx;
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 48rpx;
text-align: center;
margin-left: 20rpx;
}
.pickUp-clickAct{
background: #FFF2E9;
border: 2rpx solid #FE6600;
font-weight: 600;
color: #FE6600;
}
}
//联系电话 备注
/deep/ .u-input__content__field-wrapper__field{
height: 56rpx !important;
font-weight: 400;
font-size: 28rpx !important;
color: #333333 !important;
line-height: 56rpx !important;
text-align: right !important;
padding-right: 76rpx;
}
//取件地址
.commonBox-picker{
flex: 1;
display: flex;
justify-content: flex-end;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 56rpx;
padding: 22rpx 30rpx 0 0;
text-align: right;
position: relative;
/deep/ .u-icon--right{
height: 56rpx !important;
margin-left: 10rpx !important;
/deep/ .u-icon__icon{
font-size: 28rpx !important;
line-height: 56rpx !important;
color: #999999;
}
}
}
}
.compomets-payment{
display: flex;
justify-content: space-between;
height: 100rpx;
background-color: #fff;
padding-left: 40rpx;
border-bottom: solid 2rpx #EDEDED;
.payment-mes{
display: flex;
image{
display: block;
width: 40rpx;
height: 40rpx;
margin: 30rpx 24rpx 0 0;
}
view{
font-weight: 600;
font-size: 28rpx;
color: #333333;
line-height: 56rpx;
margin-top: 22rpx;
}
}
.payment-radio{
width: 32rpx;
height: 32rpx;
border-radius: 16rpx;
border: 2rpx solid #FE6600;
margin: 34rpx 40rpx 0 0;
position: relative;
view{
width: 16rpx;
height: 16rpx;
background: #FE6600;
border-radius: 16rpx;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
.compomets-total{
display: flex;
justify-content: space-between;
height: 120rpx;
background-color: #fff;
padding: 0 24rpx 0 24rpx;
.total-amount{
display: flex;
padding-top: 32rpx;
font-weight: 400;
line-height: 56rpx;
.amount-unit{
font-size: 24rpx;
}
.amount-unit333{
color: #333333;
}
.amount-unitD00{
color: #FF7D00;
}
.amount-number{
font-size: 40rpx;
color: #FF7D00;
line-height: 49rpx;
margin-left: 2rpx;
font-weight: bold;
}
}
.total-btn{
width: 200rpx;
height: 80rpx;
background: #FE6600;
border-radius: 40rpx;
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
line-height: 80rpx;
text-align: center;
margin-top: 20rpx;
}
}
</style>
\ No newline at end of file
pages/album/myPhotoAlbum/myPhotoAlbum.vue
View file @ 1dec4b4d
......@@ -113,7 +113,7 @@
</view>
</view>
<!--购买-->
<compometsBuy></compometsBuy>
<compometsBuy style="display: none;"></compometsBuy>
</view>
</template>
......
pages/album/static/album/icon11.png 0 → 100644
View file @ 1dec4b4d
pages/album/static/album/icon11.png

817 Bytes

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