882 lines
20 KiB
Vue
882 lines
20 KiB
Vue
<template>
|
||
<view class="report-box">
|
||
<navigation-bar-vue style="width: 100%;" title="报名" background-color="#FFFFFF"
|
||
title-color="#3D3D3D"></navigation-bar-vue>
|
||
<view class="notice-detail-last-box">
|
||
<view class="dl-notice-title">
|
||
<image class="dl-image" :src="'/static/platform/'+noticeDetail.platformCode+'.png'" mode="aspectFit">
|
||
</image>
|
||
<view class="dl-text">{{noticeDetail.title||''}}</view>
|
||
</view>
|
||
<view class="end-date-box">
|
||
<view class="end-date">截止日期：{{noticeDetail.endDate||''}}</view>
|
||
</view>
|
||
<!-- 主体内容区域 -->
|
||
<view class="main-content">
|
||
<!-- 会员开通 -->
|
||
<view class="dl-member-box" @click="goMemberCard()" v-if="!rightInfo.manyCardReport">
|
||
<view class="dl-left">
|
||
<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
|
||
<text>开通会员 添加更多名片</text>
|
||
</view>
|
||
<view class="dl-right">
|
||
<view class="dl-go-view">立即开通</view>
|
||
</view>
|
||
</view>
|
||
<!-- 添加更多名片 -->
|
||
<view class="add-more-card" @click="goSignCard()" v-else>
|
||
<view class="dl-left">
|
||
<image class="dl-icon" src="@/static/detail/card.png" mode="aspectFit"></image>
|
||
<text>添加更多名片</text>
|
||
</view>
|
||
<view class="dl-right">
|
||
<view class="dl-go-view">立即添加</view>
|
||
</view>
|
||
</view>
|
||
<!-- 名片 -->
|
||
<view class="member-card-box" v-for="(item,index) in cardList">
|
||
<view class="card-title">
|
||
<!-- 需要根据平台code取对应的图片 TODO -->
|
||
<image :src="'/static/platform/'+item.platformCode+'.png'" mode="aspectFit"></image>
|
||
<text>{{item.platformName+'博主'}}</text>
|
||
<view class="change-dom" @click="goSignCard()">切换</view>
|
||
</view>
|
||
<view class="card-content">
|
||
<view class="card-person-info">
|
||
<view class="card-name">
|
||
<view>{{item.accountName}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-fans-dom">
|
||
<view class="fans-box">
|
||
<image src="@/static/mine/fans.png" mode="aspectFit"></image>
|
||
<view class="fans-num">{{ formatNumberWithUnits(item.fansNum) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-bottom">
|
||
<view class="item-field-row" v-if="noticeDetail.isSelfPrice=='1'">
|
||
<view class="item-lable is-required">
|
||
自报价
|
||
</view>
|
||
<view class="item-value">
|
||
<input class="uni-input" v-model="item.selfPrice" type="number" placeholder="请输入" />
|
||
</view>
|
||
</view>
|
||
<view class="item-field-row">
|
||
<view class="item-lable is-required">
|
||
附言
|
||
</view>
|
||
<view class="item-value">
|
||
<textarea class="uni-input" placeholder="请输入" v-model="item.remark"></textarea>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 自定义表单 -->
|
||
<view class="custom-form-box">
|
||
<view class="form-title">报名前请填写以下信息：</view>
|
||
<view class="form-warn">
|
||
<image src="@/static/detail/warn.png" mode="aspectFit"></image>
|
||
<text>注意：为了您的信息安全，平台不建议填写您的银行卡号、身份证号、密码等隐私信息。</text>
|
||
</view>
|
||
<view class="field-form-box">
|
||
<uni-forms>
|
||
<uni-forms-item v-for="(it,idx) in signFormData.customForm" :label="it.label" required
|
||
labelWidth="100">
|
||
<uni-easyinput v-model="signFormData.customForm[idx].value" placeholder="请输入" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 收件地址 -->
|
||
<view class="custom-addr-box" v-if="userAddr">
|
||
<view class="left-text">收件地址</view>
|
||
<view class="right-text">
|
||
<text>{{userAddr.cityName}}</text>
|
||
<text>{{userAddr.detail}}</text>
|
||
<text>{{userAddr.name}}</text>
|
||
<text>{{userAddr.tel}}</text>
|
||
</view>
|
||
<view class="change-addr-dom" @click="goSignAddr()">切换</view>
|
||
</view>
|
||
</view>
|
||
<!-- 去报名，始终浮动下方 -->
|
||
<view class="dl-bottom-box" v-show="showBottom">
|
||
<view class="supper-report" @click="submit('1')">
|
||
超级报名
|
||
<image class="dl-vip" src="@/static/index/vip.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="report-dom" @click="submit('0')">
|
||
报名
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
formatNumberWithUnits
|
||
} from '@/utils/common.js'
|
||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||
import {
|
||
getSignCard,
|
||
userSign
|
||
} from '@/api/business/signCard.js'
|
||
import {
|
||
getNoticeDetail
|
||
} from '@/api/business/notice';
|
||
import {
|
||
hasRights
|
||
} from '@/utils/common.js'
|
||
import rightsCode from '@/utils/rightsCode.js'
|
||
import {
|
||
getUserAddress
|
||
} from '@/api/business/member.js'
|
||
export default {
|
||
components: {
|
||
navigationBarVue
|
||
},
|
||
data() {
|
||
return {
|
||
signRules: {
|
||
// 对联系方式字段进行必填验证
|
||
tel: {
|
||
// tel 字段的校验规则
|
||
rules: [
|
||
// 校验 tel 不能为空
|
||
{
|
||
required: true,
|
||
errorMessage: '请填写联系方式',
|
||
}
|
||
]
|
||
}
|
||
},
|
||
noticeId: null,
|
||
//使用的会员卡数组
|
||
cardList: [],
|
||
// 基础表单数据
|
||
// 联系方式表单
|
||
signFormData: {
|
||
customForm: []
|
||
},
|
||
//通告详情
|
||
noticeDetail: {
|
||
id: "",
|
||
title: "",
|
||
endDate: null,
|
||
feeDown: null,
|
||
feeUp: null,
|
||
needNum: null,
|
||
userId: null,
|
||
brand: null,
|
||
fansDown: null,
|
||
fansUp: null,
|
||
city: null,
|
||
bloggerTypes: null,
|
||
updateTime: null,
|
||
approvalStatus: '0',
|
||
viewNum: 0,
|
||
detail: null,
|
||
platformCode: "",
|
||
platformName: "",
|
||
//通告产品图
|
||
imageArray: []
|
||
},
|
||
// 校验规则
|
||
rules: {
|
||
name: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '姓名不能为空'
|
||
}]
|
||
},
|
||
age: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '年龄不能为空'
|
||
}, {
|
||
format: 'number',
|
||
errorMessage: '年龄只能输入数字'
|
||
}]
|
||
}
|
||
},
|
||
rightInfo: {
|
||
manyCardReport: false,
|
||
superReport: false
|
||
},
|
||
userAddr: null
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getRightsCode()
|
||
},
|
||
onLoad(params) {
|
||
this.noticeId = params.noticeId
|
||
if (this.noticeId) {
|
||
this.getDetail()
|
||
}
|
||
this.getCard()
|
||
this.userAddress()
|
||
let that = this
|
||
uni.$on('updateCard', function(data) {
|
||
that.updateCard(data)
|
||
})
|
||
uni.$on('updateAddr', function(data) {
|
||
that.updateAddr(data)
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
userAddress() {
|
||
getUserAddress().then(res => {
|
||
if (res.data && res.data.length > 0) {
|
||
this.userAddr = res.data[0]
|
||
}
|
||
})
|
||
},
|
||
updateAddr(data) {
|
||
this.userAddr = data
|
||
},
|
||
updateCard(data) {
|
||
|
||
this.cardList = data
|
||
},
|
||
/**
|
||
* 跳转名片列表
|
||
*/
|
||
goMyCard() {
|
||
this.$tab.navigateTo('/pages/mine/card/my-card?ifChoose=true¬iceId=' + this.noticeId)
|
||
},
|
||
/**
|
||
* 数值单位转换
|
||
* @param {Object} number
|
||
*/
|
||
formatNumberWithUnits(number) {
|
||
return formatNumberWithUnits(number)
|
||
},
|
||
getRightsCode() {
|
||
let info = hasRights(rightsCode.manyCardReport)
|
||
if (!info) {
|
||
this.rightInfo.manyCardReport = false
|
||
} else {
|
||
this.rightInfo.manyCardReport = true
|
||
}
|
||
},
|
||
goSignCard() {
|
||
this.$tab.navigateTo('/pages/mine/card/my-card?ifChoose=true¬iceId=' +
|
||
this.noticeId)
|
||
},
|
||
goSignAddr() {
|
||
this.$tab.navigateTo('/pages/mine/addr/addr-list?ifChoose=true')
|
||
},
|
||
goMemberCard() {
|
||
this.$tab.navigateTo('/pages/mine/member/member-card')
|
||
},
|
||
getDetail() {
|
||
getNoticeDetail({
|
||
noticeId: this.noticeId
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
this.noticeDetail = res.data.noticeDetail
|
||
if (this.noticeDetail.customForm.length > 0) {
|
||
this.noticeDetail.customForm.forEach(it => {
|
||
this.signFormData.customForm.push({
|
||
label: it,
|
||
value: ''
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}).catch((e) => {
|
||
this.isTriggered = false
|
||
uni.showToast({
|
||
icon: 'error',
|
||
duration: 2000,
|
||
title: e
|
||
});
|
||
})
|
||
},
|
||
/**
|
||
* 报名
|
||
*/
|
||
getCard() {
|
||
getSignCard({
|
||
noticeId: this.noticeId
|
||
}).then(res => {
|
||
if (this.cardList.length == 0) {
|
||
this.cardList.push(res.data.list[0])
|
||
}
|
||
|
||
}).catch((e) => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
duration: 2000,
|
||
title: e
|
||
});
|
||
})
|
||
},
|
||
submit(isSuper) {
|
||
if (isSuper == '1') {
|
||
let flag = hasRights(rightsCode.superReport)
|
||
if (!flag) {
|
||
uni.showToast({
|
||
title: '无超级报名权益',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return
|
||
}
|
||
}
|
||
//判断自报价是否填写
|
||
if (this.noticeDetail.isSelfPrice == '1') {
|
||
let flag1 = false
|
||
this.cardList.forEach(it => {
|
||
if (!it.selfPrice) {
|
||
flag1 = true
|
||
}
|
||
|
||
})
|
||
|
||
if (flag1) {
|
||
|
||
uni.showToast({
|
||
title: '请进行报价',
|
||
icon: 'none',
|
||
duration: 1000
|
||
})
|
||
return;
|
||
|
||
}
|
||
}
|
||
|
||
//处理卡片
|
||
this.signFormData.noticeId = this.noticeId
|
||
this.signFormData.cardList = this.cardList
|
||
if (this.userAddr) {
|
||
this.signFormData.addressId = this.userAddr.id
|
||
}
|
||
this.signFormData.isSuper = isSuper
|
||
userSign(this.signFormData).then(res => {
|
||
uni.showToast({
|
||
title: '报名成功',
|
||
duration: 1000
|
||
})
|
||
|
||
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000);
|
||
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.report-box {
|
||
padding-top: calc(90rpx + var(--status-bar-height));
|
||
width: 100%;
|
||
color: #363636;
|
||
background-color: white;
|
||
font-size: 30rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: start;
|
||
position: relative;
|
||
|
||
.notice-detail-last-box {
|
||
width: 100%;
|
||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 90rpx);
|
||
padding-bottom: 115rpx;
|
||
overflow-y: scroll;
|
||
background-color: #F6F6F6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: start;
|
||
position: relative;
|
||
|
||
.dl-notice-title {
|
||
padding: 25rpx;
|
||
display: flex;
|
||
background-color: white;
|
||
border-top: 1rpx solid #F2F2F2;
|
||
width: 100%;
|
||
padding-bottom: 10rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.dl-image {
|
||
flex: none;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.dl-text {
|
||
margin-left: 10rpx;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
font-weight: bold;
|
||
|
||
}
|
||
}
|
||
|
||
.end-date-box {
|
||
background-color: white;
|
||
width: 100%;
|
||
font-size: 20rpx;
|
||
padding: 0 25rpx 25rpx 25rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
|
||
.end-date {
|
||
border-radius: 10rpx;
|
||
padding: 6rpx 10rpx;
|
||
background-color: #FFF4F5;
|
||
color: #FC1F3E;
|
||
}
|
||
}
|
||
|
||
.dl-bottom-box {
|
||
border-top: 1rpx solid #EAEAEA;
|
||
color: #363636;
|
||
position: fixed;
|
||
height: 115rpx;
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
bottom: 0;
|
||
background-color: #F7F7F7;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.supper-report {
|
||
text-align: center;
|
||
background-color: #F0CCA2;
|
||
color: #181D24;
|
||
padding: 13rpx;
|
||
margin-right: 10rpx;
|
||
flex: 1;
|
||
border-radius: 15rpx;
|
||
position: relative;
|
||
|
||
.dl-vip {
|
||
position: absolute;
|
||
height: 25rpx;
|
||
width: 70rpx;
|
||
top: -10rpx;
|
||
right: -7px;
|
||
}
|
||
}
|
||
|
||
.report-dom {
|
||
text-align: center;
|
||
border-radius: 15rpx;
|
||
background-color: #FC1F3E;
|
||
padding: 13rpx;
|
||
margin-left: 10rpx;
|
||
color: white;
|
||
flex: 1;
|
||
}
|
||
|
||
}
|
||
|
||
.main-content {
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.dl-member-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
border-radius: 35rpx;
|
||
justify-content: center;
|
||
padding-right: 30rpx;
|
||
height: 100rpx;
|
||
width: 100%;
|
||
background: url('/static/index/member-bg.png');
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
/* 图片居中显示 */
|
||
background-repeat: no-repeat;
|
||
/* 不重复背景图片 */
|
||
|
||
.dl-left {
|
||
display: flex;
|
||
flex: 1;
|
||
padding-left: 30rpx;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
color: #623109;
|
||
justify-content: left;
|
||
|
||
.dl-icon {
|
||
width: 60rpx;
|
||
height: 56rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.dl-right {
|
||
.dl-go-view {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #F5D8A5;
|
||
color: #623109;
|
||
padding: 10rpx 25rpx;
|
||
float: right;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-more-card {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
border-radius: 35rpx;
|
||
justify-content: center;
|
||
padding-right: 30rpx;
|
||
height: 100rpx;
|
||
width: 100%;
|
||
background-image: linear-gradient(to right, #FFE9EC, #FFFFFF);
|
||
|
||
.dl-left {
|
||
display: flex;
|
||
flex: 1;
|
||
padding-left: 30rpx;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
color: #FC1F3E;
|
||
justify-content: left;
|
||
|
||
.dl-icon {
|
||
width: 45rpx;
|
||
height: 56rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.dl-right {
|
||
.dl-go-view {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-image: linear-gradient(to right, #F88894, #F92D41);
|
||
color: white;
|
||
padding: 10rpx 25rpx;
|
||
float: right;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.member-card-box {
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 30rpx;
|
||
margin-top: 20rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: white;
|
||
border-radius: 20rpx;
|
||
background: url('/static/detail/bg.png');
|
||
background-size: 100% 100%;
|
||
/* 让背景图片覆盖整个元素，同时保持图片的比例 */
|
||
background-position: center;
|
||
/* 确保图片在元素中居中 */
|
||
background-repeat: no-repeat;
|
||
|
||
.card-title {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
text {
|
||
padding-left: 10rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.edit-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
width: 150rpx;
|
||
}
|
||
|
||
.change-dom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 8rpx 30rpx;
|
||
font-size: 26rpx;
|
||
background-color: #FC1F3E;
|
||
color: white;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
|
||
.card-content {
|
||
margin-top: 10rpx;
|
||
width: 100%;
|
||
padding-bottom: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
border-bottom: 1rpx solid #F2F2F2;
|
||
|
||
.card-person-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
|
||
.card-name {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: flex-start;
|
||
|
||
.nickname-dom {
|
||
margin-left: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-fans-dom {
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
|
||
.fans-box {
|
||
max-width: 200rpx;
|
||
margin-right: 10rpx;
|
||
font-size: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #FEF4EF;
|
||
padding: 5rpx 15rpx;
|
||
color: #FE9860;
|
||
border-radius: 20rpx;
|
||
|
||
image {
|
||
height: 20rpx;
|
||
width: 20rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-bottom {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
margin-top: 20rpx;
|
||
position: relative;
|
||
|
||
.item-field-row {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: self-start;
|
||
justify-content: start;
|
||
padding-bottom: 15rpx;
|
||
padding-top: 15rpx;
|
||
border-bottom: 1rpx solid #F2F2F2;
|
||
|
||
.img-upload {
|
||
width: 50%;
|
||
margin: 10rpx 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.is-required {
|
||
image {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.item-lable {
|
||
width: 210rpx;
|
||
padding: 15rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
|
||
}
|
||
|
||
.item-value {
|
||
flex: 1;
|
||
padding-left: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
input {
|
||
width: 100%;
|
||
padding-left: 20rpx;
|
||
line-height: 1;
|
||
height: 70rpx;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.choose-add {
|
||
color: #686868;
|
||
padding: 10rpx 0 10rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
color: #686868;
|
||
padding: 10rpx 0 10rpx 20rpx;
|
||
border: 1rpx solid #dcdfe6;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.custom-form-box {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
padding: 25rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
background-color: white;
|
||
|
||
.form-title {
|
||
width: 100%;
|
||
font-weight: bold;
|
||
padding-bottom: 15rpx;
|
||
}
|
||
|
||
.form-warn {
|
||
width: 100%;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
background-color: #FDECD9;
|
||
color: #FF6627;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
text {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
}
|
||
}
|
||
|
||
.field-form-box {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.custom-addr-box {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
padding: 25rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
background-color: white;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
|
||
.left-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: start;
|
||
width: 160rpx;
|
||
}
|
||
|
||
.right-text {
|
||
flex: 1;
|
||
color: #363636;
|
||
padding-left: 10rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: self-start;
|
||
justify-content: center;
|
||
}
|
||
|
||
.change-addr-dom {
|
||
position: absolute;
|
||
width: 150rpx;
|
||
height: 75rpx;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #FC1F3E;
|
||
color: white;
|
||
border-radius: 20rpx 0 20rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|