1003 lines
26 KiB
Vue
1003 lines
26 KiB
Vue
<template>
|
||
<view class="qualification-page">
|
||
<view class="section">
|
||
<view class="section-title">
|
||
<view class="title-bar"></view>
|
||
<text class="title-text">门店信息</text>
|
||
</view>
|
||
|
||
<view class="form-item-one box-cont">
|
||
<view class="label-wrapper">
|
||
<text class="label required">店铺名称</text>
|
||
</view>
|
||
<input type="text" v-model="formData.name" placeholder="请输入营业执照的店铺名称" placeholder-class="placeholder"
|
||
class="input" @input="saveFormDataToLocalDebounce" />
|
||
</view>
|
||
<view class="form-item-two box-cont" @click="showLocationPopup">
|
||
<text class="label required">门店所在地</text>
|
||
<view class="picker-content">
|
||
<text :class="formData.dependency ? 'picker-value' : 'placeholder'">
|
||
{{ formData.dependency || '请选择' }}
|
||
</text>
|
||
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3"
|
||
class="arrow-right" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="form-item-two box-cont" @click="getAddressInfo">
|
||
<text class="label required">门店详细地址</text>
|
||
<view class="picker-content">
|
||
<text :class="formData.address ? 'picker-value' : 'placeholder'">
|
||
{{ formData.address || '请选择' }}
|
||
</text>
|
||
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3"
|
||
class="arrow-right" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<view class="section-title">
|
||
<view class="title-bar"></view>
|
||
<text class="title-text">联系人信息</text>
|
||
</view>
|
||
|
||
<view class="form-item box-cont">
|
||
<text class="label required">您的身份</text>
|
||
<view class="radio-group">
|
||
<view class="radio-item" @click="setContactType('1')">
|
||
<view class="radio" :class="{ checked: formData.contact_type === '1' }">
|
||
<image v-if="formData.contact_type === '1'"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cb185ec8-9d30-4e53-b5dc-14b546013a60"
|
||
class="radio-icon-image" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="radio-label">法人</text>
|
||
</view>
|
||
<view class="radio-item" @click="setContactType('2')">
|
||
<view class="radio" :class="{ checked: formData.contact_type === '2' }">
|
||
<image v-if="formData.contact_type === '2'"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cb185ec8-9d30-4e53-b5dc-14b546013a60"
|
||
class="radio-icon-image" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="radio-label">其他</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item-one box-cont">
|
||
<text class="label required">联系人</text>
|
||
<input type="text" v-model="formData.contact_name" placeholder="请输入" placeholder-class="placeholder"
|
||
class="input" @input="saveFormDataToLocalDebounce" />
|
||
</view>
|
||
|
||
<view class="form-item-one box-cont">
|
||
<text class="label required">联系人电话</text>
|
||
<input type="number" v-model="formData.contact_phone" placeholder="请输入联系电话" placeholder-class="placeholder"
|
||
class="input" @input="saveFormDataToLocalDebounce" />
|
||
</view>
|
||
|
||
<view class="form-item-one box-cont">
|
||
<text class="label">备用联系人电话</text>
|
||
<input type="number" v-model="formData.backup_phone" placeholder="请输入备用联系电话" placeholder-class="placeholder"
|
||
class="input" @input="saveFormDataToLocalDebounce" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<view class="section-title">
|
||
<view class="title-bar"></view>
|
||
<text class="title-text">其他信息</text>
|
||
</view>
|
||
|
||
<view class="form-item-one box-cont">
|
||
<text class="label required">邀请码</text>
|
||
<input type="text" v-model="formData.invite_code" placeholder="请输入邀请码" placeholder-class="placeholder"
|
||
class="input" @input="saveFormDataToLocalDebounce" />
|
||
</view>
|
||
<view class="invite-tip box-cont">
|
||
<text class="invite-tip-text">请填写邀请人的邀请码，若没有邀请人请填写13131313</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup" :class="{ show: showLocationPopupFlag }">
|
||
<view class="popup-mask" @click="hideLocationPopup"></view>
|
||
<view class="popup-content">
|
||
<view class="popup-header">
|
||
<text class="popup-title">选择所在地</text>
|
||
<text class="popup-close" @click="hideLocationPopup">×</text>
|
||
</view>
|
||
<view class="region-body">
|
||
<picker-view @change="bindChangeLocation" class="picker-scroll" :indicator-style="indicatorStyle"
|
||
:value="locationValue">
|
||
<picker-view-column>
|
||
<view class="picker-item" v-for="(item, index) in ChinaCitys" :key="index">
|
||
{{ item.province }}
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="picker-item" v-for="(item, index) in locatinCitys" :key="index">
|
||
{{ item.city }}
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view class="picker-item" v-for="(item, index) in locationAreas" :key="index">
|
||
{{ item.area }}
|
||
</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
<view class="popup-footer">
|
||
<view class="popup-btn cancel" @click="hideLocationPopup">
|
||
<text class="btn-text">取消</text>
|
||
</view>
|
||
<view class="popup-btn confirm" @click="confirmLocationSelect">
|
||
<text class="btn-text">确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tip-popup" :class="{ show: showTipPopupFlag }">
|
||
<view class="tip-popup-mask" @click="hideTipPopup"></view>
|
||
<view class="tip-popup-content">
|
||
<image class="tip-popup-bg"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ab410a5d-5819-47f2-a0fc-3fd6b90d6770"
|
||
mode="aspectFit"></image>
|
||
|
||
<view class="tip-popup-body">
|
||
<view class="tip-title">{{ tipTitle }}</view>
|
||
<view class="tip-image-container">
|
||
<image class="tip-image" :src="tipImage" mode="widthFix"></image>
|
||
</view>
|
||
<view class="tip-buttons">
|
||
<view class="tip-btn cancel" @click="hideTipPopup">
|
||
<text class="btn-text">取消</text>
|
||
</view>
|
||
<view class="tip-btn confirm" @click="hideTipPopup">
|
||
<text class="btn-text">我已了解</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
import { debounce } from '@/utils/debounce.js';
|
||
import ChinaCitys from '../../static/data/ChinaCitys.json';
|
||
|
||
export default {
|
||
data() {
|
||
const loadedData = this.loadFormDataFromLocal();
|
||
|
||
return {
|
||
userId: null,
|
||
formData: loadedData || {
|
||
name: '',
|
||
contact_type: '1',
|
||
contact_name: '',
|
||
contact_phone: '',
|
||
backup_phone: '',
|
||
invite_code: '',
|
||
dependency: '',
|
||
address: '',
|
||
dependency_code: '',
|
||
dependency_province: '',
|
||
dependency_city: '',
|
||
longitude: '',
|
||
latitude: ''
|
||
},
|
||
showTipPopupFlag: false,
|
||
indicatorStyle: 'height: 68rpx;',
|
||
tipTitle: '',
|
||
tipImage: '',
|
||
isSubmit: false,
|
||
identity: 2,
|
||
|
||
ChinaCitys: ChinaCitys,
|
||
locatinCitys: [],
|
||
locationAreas: [],
|
||
locationValue: [0, 0, 0],
|
||
showLocationPopupFlag: false
|
||
}
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
|
||
watch: {
|
||
'formData.name'(newVal) {
|
||
this.saveFormDataToLocalDebounce();
|
||
},
|
||
'formData.contact_name'(newVal) {
|
||
this.saveFormDataToLocalDebounce();
|
||
},
|
||
'formData.contact_phone'(newVal) {
|
||
this.saveFormDataToLocalDebounce();
|
||
},
|
||
'formData.backup_phone'(newVal) {
|
||
this.saveFormDataToLocalDebounce();
|
||
},
|
||
'formData.invite_code'(newVal) {
|
||
this.saveFormDataToLocalDebounce();
|
||
},
|
||
'formData.dependency'(newVal) {
|
||
this.saveFormDataToLocalDebounce();
|
||
},
|
||
'formData.address'(newVal) {
|
||
this.saveFormDataToLocalDebounce();
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.getUserInfo();
|
||
this.checkGlobalData();
|
||
this.setupAddressListener();
|
||
},
|
||
|
||
onShow() {
|
||
const localData = this.loadFormDataFromLocal();
|
||
if (localData) {
|
||
this.formData = {
|
||
...this.formData,
|
||
...localData
|
||
};
|
||
}
|
||
|
||
this.checkGlobalData();
|
||
this.checkAddressData();
|
||
},
|
||
|
||
onUnload() {
|
||
this.saveFormDataToLocal();
|
||
},
|
||
|
||
beforeDestroy() {
|
||
if (this.addressListener) {
|
||
uni.$off('address-selected', this.addressListener);
|
||
}
|
||
if (this.sjAddressListener) {
|
||
uni.$off('address-selected-for-sj', this.sjAddressListener);
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.locatinCitys = this.ChinaCitys[0].citys;
|
||
this.locationAreas = this.locatinCitys[0].areas;
|
||
},
|
||
|
||
onHide() {
|
||
this.saveFormDataToLocal();
|
||
},
|
||
|
||
methods: {
|
||
checkGlobalData() {
|
||
if (getApp().globalData.qualificationData) {
|
||
this.formData = {
|
||
...this.formData,
|
||
...getApp().globalData.qualificationData
|
||
};
|
||
this.saveFormDataToLocal();
|
||
getApp().globalData.qualificationData = null;
|
||
}
|
||
},
|
||
|
||
loadFormDataFromLocal() {
|
||
try {
|
||
const stored = uni.getStorageSync('qualification_form_data');
|
||
if (stored) {
|
||
console.log('从本地存储加载数据:', stored);
|
||
return stored;
|
||
}
|
||
} catch (e) {
|
||
console.log('读取本地存储失败:', e);
|
||
}
|
||
return null;
|
||
},
|
||
|
||
saveFormDataToLocalDebounce: debounce(function () {
|
||
this.saveFormDataToLocal();
|
||
}, 500),
|
||
|
||
saveFormDataToLocal() {
|
||
try {
|
||
uni.setStorageSync('qualification_form_data', this.formData);
|
||
console.log('数据已保存到本地存储');
|
||
} catch (e) {
|
||
console.log('保存数据失败:', e);
|
||
}
|
||
},
|
||
|
||
clearFormDataLocal() {
|
||
try {
|
||
uni.removeStorageSync('qualification_form_data');
|
||
console.log('已清空本地存储数据');
|
||
} catch (e) {
|
||
console.log('清空数据失败:', e);
|
||
}
|
||
},
|
||
|
||
getUserInfo() {
|
||
return new Promise((resolve, reject) => {
|
||
request.post('/sj/user/getuser').then(result => {
|
||
if (result.state === 1) {
|
||
this.userId = result.data.id;
|
||
console.log('用户ID获取成功:', this.userId);
|
||
resolve(this.userId);
|
||
} else {
|
||
console.error('获取用户信息失败:', result.msg);
|
||
reject(result.msg);
|
||
}
|
||
}).catch(error => {
|
||
console.error('获取用户信息接口错误:', error);
|
||
reject(error);
|
||
});
|
||
});
|
||
},
|
||
|
||
getFormData() {
|
||
return { ...this.formData };
|
||
},
|
||
|
||
saveFormData() {
|
||
if (!this.formData.name) {
|
||
uni.showToast({ title: '请输入店铺名称', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.formData.dependency) {
|
||
uni.showToast({ title: '请选择门店所在地', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.formData.address) {
|
||
uni.showToast({ title: '请选择门店详细地址', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.formData.contact_name) {
|
||
uni.showToast({ title: '请输入联系人', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.formData.contact_phone) {
|
||
uni.showToast({ title: '请输入联系人电话', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!/^1[3-9]\d{9}$/.test(this.formData.contact_phone)) {
|
||
uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.formData.invite_code) {
|
||
uni.showToast({ title: '请输入邀请码', icon: 'none' });
|
||
return false;
|
||
}
|
||
this.saveFormDataToLocal();
|
||
return true;
|
||
},
|
||
|
||
setContactType(type) {
|
||
this.$set(this.formData, 'contact_type', type);
|
||
this.saveFormDataToLocal();
|
||
},
|
||
|
||
showTipPopup(field) {
|
||
const tipConfig = {
|
||
'name': {
|
||
title: '如何找到店铺名称',
|
||
image: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4fb3e0a2-4c1a-4433-a181-b7a1dfefd030'
|
||
}
|
||
};
|
||
|
||
if (tipConfig[field]) {
|
||
this.tipTitle = tipConfig[field].title;
|
||
this.tipImage = tipConfig[field].image;
|
||
this.showTipPopupFlag = true;
|
||
}
|
||
},
|
||
|
||
hideTipPopup() {
|
||
this.showTipPopupFlag = false;
|
||
},
|
||
|
||
showLocationPopup() {
|
||
this.showLocationPopupFlag = true;
|
||
},
|
||
|
||
hideLocationPopup() {
|
||
this.showLocationPopupFlag = false;
|
||
},
|
||
|
||
bindChangeLocation(e) {
|
||
this.locationValue = e.detail.value;
|
||
let index1 = e.detail.value[0] || 0;
|
||
let index2 = e.detail.value[1] || 0;
|
||
this.locatinCitys = this.ChinaCitys[index1].citys;
|
||
this.locationAreas = this.locatinCitys[index2].areas;
|
||
},
|
||
|
||
confirmLocationSelect() {
|
||
let valueArr = this.locationValue;
|
||
let index1 = valueArr[0] || 0;
|
||
let index2 = valueArr[1] || 0;
|
||
let index3 = valueArr[2] || 0;
|
||
let province = this.ChinaCitys[index1].province;
|
||
let city = this.locatinCitys[index2].city;
|
||
let area = this.locationAreas[index3].area;
|
||
this.formData.dependency = province + '-' + city + '-' + area;
|
||
|
||
this.formData.address = '';
|
||
this.formData.longitude = '';
|
||
this.formData.latitude = '';
|
||
|
||
if (this.ChinaCitys[index1] && this.ChinaCitys[index1].code) {
|
||
let provinceCode = this.ChinaCitys[index1].code.toString();
|
||
this.formData.dependency_province = provinceCode.substring(0, 6);
|
||
}
|
||
if (this.locatinCitys[index2] && this.locatinCitys[index2].code) {
|
||
let cityCode = this.locatinCitys[index2].code.toString();
|
||
this.formData.dependency_city = cityCode.substring(0, 6);
|
||
}
|
||
if (this.locationAreas[index3] && this.locationAreas[index3].code) {
|
||
let areaCode = this.locationAreas[index3].code.toString();
|
||
this.formData.dependency_code = areaCode.substring(0, 6);
|
||
}
|
||
|
||
this.saveFormDataToLocal();
|
||
this.hideLocationPopup();
|
||
},
|
||
|
||
buildRegionTextForSearch() {
|
||
const dependency = String(this.formData.dependency || '').trim();
|
||
if (!dependency) return '';
|
||
|
||
const parts = dependency.split('-');
|
||
const province = parts[0] || '';
|
||
const city = parts[1] || '';
|
||
const district = parts[2] || '';
|
||
|
||
let regionText = '';
|
||
if (province) regionText += province;
|
||
if (city && city !== province) regionText += city;
|
||
if (district) regionText += district;
|
||
|
||
return regionText;
|
||
},
|
||
|
||
getAddressValueForSearch() {
|
||
const rawAddress = String(this.formData.address || '').trim();
|
||
if (!rawAddress) return '';
|
||
|
||
const dependencyText = String(this.formData.dependency || '').trim();
|
||
const regionText = this.buildRegionTextForSearch();
|
||
|
||
let detail = rawAddress;
|
||
|
||
if (regionText && detail.indexOf(regionText) === 0) {
|
||
detail = detail.slice(regionText.length).trim();
|
||
} else if (dependencyText && detail.indexOf(dependencyText) === 0) {
|
||
detail = detail.slice(dependencyText.length).trim();
|
||
}
|
||
|
||
detail = detail.replace(/^[\s,-]+/, '').trim();
|
||
|
||
return detail || rawAddress;
|
||
},
|
||
|
||
getAddressInfo() {
|
||
this.saveFormDataToLocal();
|
||
|
||
const dependency = String(this.formData.dependency || '').trim();
|
||
const dependencyCode = String(this.formData.dependency_code || '').trim();
|
||
const address = this.getAddressValueForSearch();
|
||
const longitude = String(this.formData.longitude || '').trim();
|
||
const latitude = String(this.formData.latitude || '').trim();
|
||
|
||
const hasDependency = !!dependency;
|
||
const hasAddress = !!address;
|
||
const hasLocation = !!(longitude && latitude);
|
||
|
||
let params = 'source=sj_info';
|
||
|
||
if (hasDependency) {
|
||
params += `&dependency=${encodeURIComponent(dependency)}`;
|
||
if (dependencyCode) {
|
||
params += `&dependency_code=${dependencyCode}`;
|
||
}
|
||
}
|
||
|
||
if (hasAddress) {
|
||
params += `&address=${encodeURIComponent(address)}`;
|
||
}
|
||
|
||
if (hasLocation) {
|
||
params += `&longitude=${longitude}&latitude=${latitude}`;
|
||
}
|
||
|
||
if (!hasDependency && !hasAddress && !hasLocation) {
|
||
params += '&init_current_location=1&silent_locate=1';
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/address/search?${params}`
|
||
});
|
||
},
|
||
|
||
setupAddressListener() {
|
||
this.addressListener = (addressData) => {
|
||
this.handleAddressSelected(addressData);
|
||
};
|
||
this.sjAddressListener = (addressData) => {
|
||
this.handleAddressSelected(addressData);
|
||
};
|
||
uni.$on('address-selected', this.addressListener);
|
||
uni.$on('address-selected-for-sj', this.sjAddressListener);
|
||
},
|
||
|
||
checkAddressData() {
|
||
try {
|
||
const storedAddress = uni.getStorageSync('sj_selected_address');
|
||
if (storedAddress) {
|
||
this.handleAddressSelected(storedAddress);
|
||
uni.removeStorageSync('sj_selected_address');
|
||
return;
|
||
}
|
||
} catch (e) { }
|
||
|
||
if (getApp().globalData && getApp().globalData.selectedAddress) {
|
||
this.handleAddressSelected(getApp().globalData.selectedAddress);
|
||
delete getApp().globalData.selectedAddress;
|
||
}
|
||
|
||
try {
|
||
const selectedAddress = uni.getStorageSync('selectedAddress');
|
||
if (selectedAddress) {
|
||
this.handleAddressSelected(selectedAddress);
|
||
uni.removeStorageSync('selectedAddress');
|
||
}
|
||
} catch (e) { }
|
||
},
|
||
|
||
handleAddressSelected(addressData) {
|
||
if (!addressData) return;
|
||
|
||
let detailAddress = '';
|
||
if (addressData.address) {
|
||
detailAddress = String(addressData.address).trim();
|
||
} else if (addressData.name) {
|
||
detailAddress = String(addressData.name).trim();
|
||
|
||
const regionParts = [];
|
||
if (addressData.pname) regionParts.push(addressData.pname);
|
||
if (addressData.cityname && addressData.cityname !== addressData.pname) regionParts.push(addressData.cityname);
|
||
if (addressData.adname) regionParts.push(addressData.adname);
|
||
|
||
const regionText = regionParts.join('');
|
||
|
||
if (regionText && detailAddress.indexOf(regionText) === 0) {
|
||
detailAddress = detailAddress.slice(regionText.length).trim();
|
||
}
|
||
|
||
detailAddress = detailAddress.replace(/^[\s,-]+/, '').trim();
|
||
}
|
||
|
||
this.formData.address = detailAddress;
|
||
|
||
if (addressData.location) {
|
||
const [longitude, latitude] = String(addressData.location).split(',');
|
||
this.formData.longitude = longitude || '';
|
||
this.formData.latitude = latitude || '';
|
||
}
|
||
|
||
if (addressData.pname || addressData.cityname || addressData.adname) {
|
||
const locationParts = [];
|
||
if (addressData.pname) locationParts.push(addressData.pname);
|
||
if (addressData.cityname) locationParts.push(addressData.cityname);
|
||
if (addressData.adname) locationParts.push(addressData.adname);
|
||
this.formData.dependency = locationParts.join('-');
|
||
}
|
||
|
||
this.formData.dependency_province = addressData.provinceCode || '';
|
||
this.formData.dependency_city = addressData.cityCode || '';
|
||
this.formData.dependency_code = addressData.districtCode || '';
|
||
|
||
this.saveFormDataToLocal();
|
||
this.$forceUpdate();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.qualification-page {}
|
||
|
||
.section {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 30rpx;
|
||
background-color: #E8101E;
|
||
margin-right: 7rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.title-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #1D2129;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.section-title text {
|
||
font-size: 36rpx;
|
||
color: #1D2129;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.box-cont {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 24rpx;
|
||
margin-left: 8rpx;
|
||
margin-right: 8rpx;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.form-item-one {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.form-item-two {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.form-item-two>text.label {
|
||
flex-shrink: 0;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.label-wrapper {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
}
|
||
|
||
.label-icon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-left: 8rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.required::before {
|
||
content: '*';
|
||
color: #FF0000;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.picker-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
}
|
||
|
||
.picker-content text {
|
||
margin-right: 19rpx;
|
||
}
|
||
|
||
.arrow-right {
|
||
width: 14rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.picker-value {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
text-align: right;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.radio-group {
|
||
display: flex;
|
||
}
|
||
|
||
.radio-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 130rpx;
|
||
}
|
||
|
||
.radio {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border: 2rpx solid #DDDDDD;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.radio.checked {
|
||
background-color: #E8101E;
|
||
border-color: #E8101E;
|
||
}
|
||
|
||
.radio-icon-image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.radio-label {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.invite-tip {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.invite-tip-text {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.popup {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.popup.show {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
|
||
.popup-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.popup-content {
|
||
position: relative;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 32rpx;
|
||
transform: translateY(100%);
|
||
transition: transform 0.3s ease;
|
||
max-height: 70vh;
|
||
}
|
||
|
||
.popup.show .popup-content {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.popup-title {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.popup-close {
|
||
font-size: 40rpx;
|
||
color: #999999;
|
||
padding: 16rpx;
|
||
}
|
||
|
||
.popup-footer {
|
||
margin-top: 32rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
padding: 0 24rpx 24rpx;
|
||
}
|
||
|
||
.popup-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
}
|
||
|
||
.popup-btn.cancel {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.popup-btn.confirm {
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
}
|
||
|
||
.popup-btn .btn-text {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.popup-btn.cancel .btn-text {
|
||
color: #666666;
|
||
}
|
||
|
||
.popup-btn.confirm .btn-text {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.region-body {
|
||
height: 400rpx;
|
||
}
|
||
|
||
.picker-scroll {
|
||
height: 400rpx;
|
||
}
|
||
|
||
.picker-item {
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tip-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tip-popup.show {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
|
||
.tip-popup-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.tip-popup-content {
|
||
position: relative;
|
||
width: 620rpx;
|
||
height: 810rpx;
|
||
}
|
||
|
||
.tip-popup-bg {
|
||
width: 620rpx;
|
||
height: 810rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tip-popup-body {
|
||
position: relative;
|
||
flex-direction: column;
|
||
padding: 80rpx 20rpx 40rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tip-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-top: 107rpx;
|
||
margin-bottom: 37rpx;
|
||
}
|
||
|
||
.tip-image-container {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.tip-image {
|
||
width: 90%;
|
||
max-height: 400rpx;
|
||
}
|
||
|
||
.tip-buttons {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 28rpx;
|
||
}
|
||
|
||
.tip-btn {
|
||
width: 250rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tip-btn.cancel {
|
||
border: #E8101E 2rpx solid;
|
||
background-color: transparent;
|
||
color: #e8101e;
|
||
}
|
||
|
||
.tip-btn.confirm {
|
||
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.tip-btn .btn-text {
|
||
color: inherit;
|
||
}
|
||
</style>
|