mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面优化

Browse Source
This commit is contained in:
DESKTOP-GMUNQ1B\k 2024-03-01 11:05:53 +08:00
parent bfc6e0b415
commit bf0e339fe8
3 changed files with 54 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages.json
View File

@ -119,8 +119,7 @@
{ {
"path": "pages/payment/settlement", "path": "pages/payment/settlement",
"style": { "style": {
"navigationBarTitleText": "支付", "navigationBarTitleText": "支付"
"navigationStyle": "custom"
} }
}, },
{ {

102
pages/payment/get_payment.vue
View File

@ -1,20 +1,16 @@
<template> <template>
<view class="container" v-if="merchantInfo"> <view class="container" v-if="merchantInfo">
<view style="height: var(--status-bar-height);"></view>
<view class="v-navbar"> <view class="v-navbar">
<u-navbar title="面对面收款" :autoBack="true" :fixed="false" bgColor="transparent" leftIconColor="#fff" <u-navbar title="面对面收款" :safeAreaInsetTop="false" :fixed="false" :autoBack="true" bgColor="transparent"
:titleStyle="{color:'#fff',fontWeight:'bold',fontSize:'32rpx'}"> leftIconColor="#fff" :titleStyle="{color:'#fff',fontWeight:'bold',fontSize:'34rpx'}">
</u-navbar> </u-navbar>
</view> </view>
<view class="v-desc"> <view class="v-desc">
<view>
<view class="v-desc-main">付款给商家</view> <view class="v-desc-main">付款给商家</view>
<view class="v-desc-sub">{{merchantInfo.merchant.mer_name}}</view> <view class="v-desc-sub">{{merchantInfo.merchant.mer_name}}</view>
</view> </view>
<!-- 店铺图片 -->
<view class="v-shop-img">
<u-image :showLoading="true" :src="merchantInfo.merchant.mer_avatar" width="182rpx" height="182rpx" <u-image :showLoading="true" :src="merchantInfo.merchant.mer_avatar" width="182rpx" height="182rpx"
:radius="10" /> :radius="10" />
</view> </view>
@ -39,6 +35,10 @@
<view class="v-wrap-desc-sub">即买即用</view> <view class="v-wrap-desc-sub">即买即用</view>
</view> </view>
</view> </view>
</view>
<view class="v-btn-wrap">
<view class="v-btn" @click="submitOrder">提交订单</view> <view class="v-btn" @click="submitOrder">提交订单</view>
</view> </view>
</view> </view>
@ -77,7 +77,7 @@
}, },
onLoad(opt) { onLoad(opt) {
this.getProductInfoByMerid(opt.mer_id); this.getProductInfoByMerid(opt.mer_id || 31);
}, },
methods: { methods: {
@ -177,23 +177,27 @@
<style lang="scss" scoped> <style lang="scss" scoped>
page { page {
background-color: #FCE9B2; background-color: #FCDFAD;
} }
.container { .container {
position: relative; position: relative;
height: 100vh;
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c582c202402291601584806.webp"); background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c582c202402291601584806.webp");
background-size: 100% auto; background-size: 100% auto;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-bottom: 20rpx; padding-top: var(--status-bar-height);
.v-navbar {
margin-bottom: 54rpx;
}
.v-desc { .v-desc {
margin-left: 30rpx; position: absolute;
margin-bottom: 124rpx; top: 196rpx;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 20rpx;
background: transparent;
.v-desc-main { .v-desc-main {
margin-bottom: 30rpx; margin-bottom: 30rpx;
@ -209,49 +213,11 @@
} }
} }
.v-qrcode {
display: flex;
justify-content: center;
margin-bottom: 158rpx;
}
.v-btn {
display: flex;
align-items: center;
justify-content: center;
width: 690rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(255, 94, 12, 0.32);
border-radius: 55rpx 55rpx 55rpx 55rpx;
margin: 0 auto;
image {
width: 32rpx;
height: 32rpx;
margin-right: 6rpx;
}
text {
font-weight: 600;
font-size: 32rpx;
color: #FF5E0C;
line-height: 16rpx;
text-align: center;
font-style: normal;
text-transform: none;
margin-top: 2rpx;
}
}
.v-shop-img {
position: absolute;
top: 196rpx;
right: 40rpx;
}
.v-con { .v-con {
position: relative; position: absolute;
top: 436rpx;
left: 50%;
transform: translateX(-50%);
width: 710rpx; width: 710rpx;
height: 1166rpx; height: 1166rpx;
background: linear-gradient(180deg, #FEB992 0%, #FFFFFF 31%, #FFFFFF 100%); background: linear-gradient(180deg, #FEB992 0%, #FFFFFF 31%, #FFFFFF 100%);
@ -269,10 +235,6 @@
line-height: 16rpx; line-height: 16rpx;
} }
/deep/.u-text__value--tips {
color: #2E2E2E;
}
.v-con-input { .v-con-input {
display: flex; display: flex;
align-items: center; align-items: center;
@ -324,10 +286,21 @@
} }
} }
} }
}
.v-btn-wrap {
position: fixed;
z-index: 11;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 140rpx;
background-color: #FCDFAD;
.v-btn { .v-btn {
position: absolute;
bottom: 96rpx;
width: 650rpx; width: 650rpx;
height: 100rpx; height: 100rpx;
line-height: 100rpx; line-height: 100rpx;
@ -338,6 +311,7 @@
font-weight: 600; font-weight: 600;
font-size: 32rpx; font-size: 32rpx;
color: #FFFFFF; color: #FFFFFF;
text-align: center;
&:active { &:active {
opacity: .8; opacity: .8;

1
pages/payment/settlement.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<view :style="viewColor"> <view :style="viewColor">
<view style="height: var(--status-bar-height);"></view>
<view class='order-submission'> <view class='order-submission'>
<!-- 商品信息 --> <!-- 商品信息 -->
<view class="storeinfo-wrapper"> <view class="storeinfo-wrapper">