yovinchen/sl-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
shuhongfan
2023-09-04 16:40:17 +08:00
commit cf5ac25c14
8267 changed files with 1305066 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
project-wl-yonghuduan-uniapp-vue3/subPages/account-rules/index.scss Normal file
View File

@@ -0,0 +1,69 @@
.account-rules{
background-color: white;
height: 100vh;
padding: 72rpx 51rpx 0;
.top{
display: flex;
justify-content: space-around;
background-color: #F8F9FB;
padding:22rpx 46rpx 38rpx 36rpx ;
margin-bottom: 50rpx;
.top-item{
text-align: center;
.top-img{
width:116rpx ;
height:116rpx ;
}
.top-title{
font-size: 24rpx;
color: #151515;
text-align: center;
}
.top-subTitle{
font-size: 20rpx;
color: #888888;
text-align: center;
}
}
.top-item:first-child{
.top-img{
margin-left: 10rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url('../../static/kouhong.png');
}
}
.top-item:nth-child(2){
.top-img{
margin-left: 15rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url('../../static/xiong.png');
}
}
.top-item:last-child{
.top-img{
margin-left: 30rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url('../../static/bingxiang.png');
}
}
}
.first-content,.second-content,.third-content,.fourth-content{
.title{
font-size:24rpx;
color:#151515 ;
font-weight: bold;
}
.content{
font-size:24rpx;
color:#151515 ;
line-height: 40rpx;
}
}
.second-content,.third-content,.fourth-content{
margin-top:36rpx ;
}
}

71
project-wl-yonghuduan-uniapp-vue3/subPages/account-rules/index.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<!-- 头部导航栏 -->
<nav-bar title='计费规则'></nav-bar>
<view class="account-rules">
<view class="top">
<view class="top-item" :key="index" v-for="(item,index) in topList">
<view class="top-img" ></view>
<view class="top-title">{{item.title}}</view>
<view class="top-subTitle">{{item.subTitle}}</view>
</view>
</view>
<view class="first-content">
<view class="title">一、重量计算方法</view>
<view class="content">
托寄物的计费重量取体积重量与实际重量两者之间的较大值。体积重量的计算方法为：长(cm)x宽(cm)x高(cm)/轻抛系数。
</view>
<view class="content">
1.神领即日/神领特快：同城、省内件以及经济区域内互寄(京津冀/江浙沪皖/川渝/黑吉辽)，轻抛系数为12000；省外、跨经济区域互寄，轻抛系数为6000。
</view>
<view class="content">
2.神领标快：中国内地大部分流向互寄，轻抛系数为12000;中国内地其他地区与昌都市互寄、华南、华北至西藏流向，轻抛系数为6000。
</view>
<view class="content">
3.神领卡航：轻抛系数为6000。
</view>
</view>
<view class="second-content">
<view class="title">二、计费重量小数点规则</view>
<view class="content">
中国内地互寄业务：10kg以下，续重以0.1kg为计重单位；10-100kg,续重以0.5kg为计重单位；100kg及以上，四舍五入取整数。其他范围的重量处理规则详细查询神领官网。
</view>
</view>
<view class="third-content">
<view class="title">三、总运费小数点规则</view>
<view class="content">
运费计算结果按四舍五入取整数值。
</view>
</view>
<view class="fourth-content">
<view class="content">
以上计费规则可能因服务（产品）或所在地区不同而有所差异，详情请与当地神领快递员进行咨询。
</view>
</view>
</view>
</template>
<script setup>
import {
reactive
} from 'vue';
const topList = reactive([
{
title:'重量小体积小',
subTitle:'按重量计费'
},
{
title:'重量小体积大',
subTitle:'按体积计费'
},
{
title:'重量大体积大',
subTitle:'重量体积取高计费'
}
])
</script>
<style src="./index.scss" lang="scss" scoped></style>

130
project-wl-yonghuduan-uniapp-vue3/subPages/address-info/components/selectArea.scss Normal file
View File

@@ -0,0 +1,130 @@
.selectArea{
::v-deep .uni-popup__wrapper {
height: 1160rpx;
background-color: white !important;
border-radius: 24rpx 24rpx 0 0;
}
.header {
display: flex;
height: 56rpx;
padding: 30rpx 38rpx;
align-items: center;
justify-content: space-between;
border-radius: 24rpx 24rpx 0 0;
.header-title {
font-size: 32rpx;
color: #151515;
font-weight: bold;
}
.close {
width: 24rpx;
height: 24rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url('../../../static/icon21.png');
}
}
.seachBox{
::v-deep .uni-searchbar{
padding-left: 38rpx!important;
.uni-searchbar__box{
border-radius: 34rpx!important;
}
}
.search-icon{
width: 40rpx;
height: 40rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url('../../../static/search.png');
}
}
.hot-city{
margin-top: 31rpx;
border-bottom: 2rpx solid #F4F4F4;
padding-bottom: 40rpx;
margin: 0 38rpx;
.title{
font-size: 24rpx;
color: #888;
}
.city-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.city-item{
font-size: 24rpx;
height: 64rpx;
background: #F4F4F4;
border-radius: 34rpx;
min-width: 148rpx;
margin-top: 18rpx;
text-align: center;
line-height: 64rpx;
}
.city-item.active{
border: 2rpx solid #E84134;
color: #E84134;
background-color: white;
}
}
}
.province-city-area{
margin-top: -10rpx;
.picker-view {
width: 750rpx;
height: 600rpx;
margin-top: 20rpx;
}
.item {
height: 50px;
align-items: center;
justify-content: center;
text-align: center;
display: flex;
}
::v-deep .uni-picker-view-wrapper{
.uni-picker-view-mask{
display: none;
}
.uni-picker-view-indicator{
top: 46%!important;
}
}
.label-box{
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 90rpx;
.label{
font-size: 30rpx;
font-weight: bold;
}
}
}
.footer{
height: 168rpx;
width: 100%;
background-color: white;
position: fixed;
bottom: 0;
left: 0;
padding-top: 80rpx;
display: flex;
align-items: center;
.btn{
width: 404rpx;
height: 88rpx;
background: #E84134;
border-radius: 44rpx;
color:white ;
text-align: center;
line-height: 88rpx;
font-size: 30rpx;
margin: 0 auto;
}
}
}

258
project-wl-yonghuduan-uniapp-vue3/subPages/address-info/components/selectArea.vue Normal file
View File

@@ -0,0 +1,258 @@
<template>
<view class="selectArea">
<uni-popup ref="popup" type="bottom">
<view class="header">
<view class="header-title">选择省市区</view>
<view class="close" @click="handleCancel"></view>
</view>
<!-- 搜索框 -->
<!-- <view class="seachBox">
<uni-search-bar placeholder="请输入城市/区县/街道名称搜索" cancelButton="none" @confirm="search" :focus="true"
v-model="searchValue" @blur="blur" @focus="focus" @input="input">
<template v-slot:searchIcon>
<view class="search-icon"></view>
</template>
</uni-search-bar>
</view> -->
<!-- 热门城市 -->
<view class="hot-city">
<view class="title">热门城市</view>
<view class="city-box">
<view class="city-item" :class="index===hotCityIndex?'active':''" v-for="(item,index) in cityList" :key="index"
@click="handleHotCityClick(item,index)">
{{item.label}}
</view>
</view>
</view>
<!-- 省市区三级联动 -->
<view class="province-city-area">
<view class="label-box">
<view class="label">省份</view>
<view class="label">城市</view>
<view class="label">区县</view>
</view>
<picker-view :value="areaIndex.data" :indicator-style="`height: 50px;`" @change="bindChange"
@pickstart="handlePickStart" class="picker-view">
<picker-view-column>
<view class="item" v-for="(item,index) in province.data" :key="index">{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in city.data" :key="index">{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in area.data" :key="index">{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
<!-- 底部 -->
<view class="footer">
<view class="btn" @click="confirm">确定</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
nextTick,
computed,
watch
} from 'vue';
import {
getArea
} from '@/pages/api/order.js'
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
const emits = defineEmits(["@getAreaData"]);
const popup = ref()
let props = defineProps({
provinceId: {
type: String,
default: '',
},
cityId: {
type: String,
default: '',
},
countyId: {
type: String,
default: '',
}
})
//省数据
let province = reactive({
data: []
})
let selectedProvince = reactive({
data: {
name: '北京市',
id: '1'
}
})
//市数据
const city = reactive({
data: []
})
let selectedCity = reactive({
data: {
name: '直辖市',
id: '2'
}
})
//区域数据
const area = reactive({
data: []
})
let selectedArea = reactive({
data: {
name: '东城区',
id: '3'
}
})
//记录三级联动每项的index以及默认展示
let areaIndex = reactive({
data: [0, 0, 0]
})
//记录热门城市选中的索引
let hotCityIndex = ref('')
const cityList = reactive([{
label: '北京',
provinceId: "1",
cityId: "2",
countyId: "3"
},
{
label: '上海',
provinceId: "161792",
cityId: "161793",
countyId: "161794"
},
{
label: '广州',
provinceId: "483250",
cityId: "483251",
countyId: "483252"
},
{
label: '深圳',
provinceId: "483250",
cityId: "487721",
countyId: "487722"
}
])
//负责记录组件中选中的三级对应的id
let placeIdItem = reactive({
provinceId: '',
cityId: '',
countyId: ''
})
//区分热门城市点击还是滑动三级组件
let chooseType = ref('select')
// 监听后台获取的详情
watch(props, (newValue, oldValue) => {
placeIdItem.provinceId = newValue.provinceId
placeIdItem.cityId = newValue.cityId
placeIdItem.countyId = newValue.countyId
})
const handleHotCityClick = (item,index) => {
placeIdItem.provinceId = item.provinceId
placeIdItem.cityId = item.cityId
placeIdItem.countyId = item.countyId
getAreaInfo('', province)
getAreaInfo(placeIdItem.provinceId, city)
getAreaInfo(placeIdItem.cityId, area)
chooseType.value = 'click'
hotCityIndex.value = index
}
const getList = () => {
getAreaInfo('', province)
getAreaInfo(placeIdItem.provinceId || 1, city)
getAreaInfo(placeIdItem.cityId || 2, area)
}
//获取省市区
const getAreaInfo = (parentId, type) => {
getArea({
parentId
}).then((res) => {
type.data = res.data
if (type === province) {
//用于解决响应式状态变更但是dom不更新的问题
nextTick(() => {
selectedProvince.data = res.data.filter(item => item.id == placeIdItem.provinceId)[0]|| res.data[0]
areaIndex.data[0] = res.data.findIndex(item => item.id == placeIdItem.provinceId)
})
} else if (type === city) {
nextTick(() => {
selectedCity.data = res.data.filter(item => item.id == placeIdItem.cityId)[0]|| res.data[0]
areaIndex.data[1] = res.data.findIndex(item => item.id == placeIdItem.cityId)
})
} else if (type === area) {
nextTick(() => {
selectedArea.data = res.data.filter(item => item.id == placeIdItem.countyId)[0]|| res.data[0]
areaIndex.data[2] = res.data.findIndex(item => item.id == placeIdItem.countyId)
})
}
})
}
const handlePickStart = () => {
chooseType.value = 'select'
}
//选择省市区
const bindChange = (event) => {
if(chooseType.value ==='click') return
//二级地址获取
if (areaIndex.data[0] !== event.detail.value[0]) {
getAreaInfo(province.data[event.detail.value[0]].id, city)
getAreaInfo(Number(province.data[event.detail.value[0]].id) + 1, area)
selectedProvince.data = province.data[event.detail.value[0]]
} else if (areaIndex.data[1] !== event.detail.value[1]) {
//三级地址获取
getAreaInfo(city.data[event.detail.value[1]].id, area)
selectedCity.data = city.data[event.detail.value[1]]
} else {
selectedArea.data = area.data[event.detail.value[2]]
}
areaIndex.data = event.detail.value
hotCityIndex.value = ''
}
// 打开弹层
const handleOpen = () => {
popup.value.open('bottom');
};
// 关闭弹层
const handleCancel = () => {
popup.value.close('bottom');
}
//确认选择省市区
const confirm = () => {
handleCancel()
emits("getAreaData", {
province: selectedProvince.data,
city: selectedCity.data,
area: selectedArea.data
})
}
// 暴漏给父组件
defineExpose({
handleOpen,
getList
});
</script>
<style src="./selectArea.scss" lang="scss" scoped></style>

166
project-wl-yonghuduan-uniapp-vue3/subPages/address-info/index.scss Normal file
View File

@@ -0,0 +1,166 @@
.address-info{
background-color: #F3F5F9 !important;
height: 85vh;
.approve-tips{
height: 90rpx;
background: #FAF4DE;
padding: 5rpx 18rpx 8rpx 24rpx;
display: flex;
align-items: center;
.circle{
width: 10rpx;
height: 10rpx;
background-color:#E88649 ;
border-radius: 50%;
margin-right: 20rpx;
display: inline-block;
vertical-align: middle;
}
.content{
font-size: 22rpx;
color:#EA8A57 ;
display: inline-block;
vertical-align: middle;
width: 515rpx;
margin-right: 20rpx;
}
.content.active{
width: 650rpx;
}
.btn{
width: 132rpx;
height: 44rpx;
background: #EA8A57;
border-radius: 22rpx;
color:white ;
text-align: center;
line-height: 44rpx;
font-size: 22rpx;
display: inline-block;
vertical-align: middle;
}
}
.approve-tips.isRealNameAuth{
height: 60rpx;
.content{
width: 100%;
}
}
.address-box{
height: 510rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: 19rpx 19rpx 0rpx 19rpx;
padding:32rpx 28rpx 0rpx ;
.address-title{
font-size: 32rpx;
font-weight: bold;
}
.uni-input{
width: 400rpx;
}
.uni-input.active{
font-weight: bold;
}
.send-get-title{
display: flex;
align-items: center;
.toAddress{
width: 104rpx;
height: 46rpx;
border: 2rpx solid #888888;
border-radius: 22rpx;
text-align: center;
line-height: 46rpx;
margin-left: 20rpx;
font-size: 22rpx;
}
.send,.get{
width: 38rpx;
height: 38rpx;
border-radius: 50%;
font-size: 24rpx;
color: white;
text-align: center;
margin-right: 20rpx;
}
.send{
background-color:#000000 ;
}
.get{
background-color:#E63E32 ;
}
.subTitle{
font-weight: bold;
}
}
.name-number{
display: flex;
margin-top: 56rpx;
border-bottom: 2rpx solid #F4F4F4;
padding-bottom: 29rpx;
}
.city-area{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #F4F4F4;
padding: 36rpx 0;
.label{
font-size: 30rpx;
color: #888;
}
.active.label{
color: #151515;
font-weight: bold;
}
.arrow{
width: 12rpx;
height: 20rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url('../../static/icon15.png');
}
}
.address-detail{
border-bottom: 2rpx solid #F4F4F4;
padding: 36rpx 0;
}
.footer{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 30rpx;
.save-address{
display: flex;
align-items: center;
.label{
font-size: 30rpx;
color: #888;
}
.active,.checkbox{
width: 40rpx;
height: 40rpx;
background-repeat: no-repeat;
background-size: contain;
margin-right: 10rpx;
}
.checkbox{
background-image: url('../../static/checkbox.png');
}
.active{
background-image: url('../../static/checkboxActive.png');
}
}
.reset-btn{
font-size: 30rpx;
color: #888;
}
.reset-btn.active{
color: #151515;
}
}
}
}

301
project-wl-yonghuduan-uniapp-vue3/subPages/address-info/index.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<!-- 头部导航栏 -->
<nav-bar :title='title' :handleToLink="handleToLink"></nav-bar>
<view class="address-info">
<!-- 实名认证 -->
<view v-if="type !== 'get' && editOrAdd!=='add'" class="approve-tips"
:class="isRealNameAuth?'isRealNameAuth':''">
<view class="circle"></view>
<view class="content" :class="[type === 'get'?'active':'']">
{{
!isRealNameAuth?'根据国家法律法规要求，寄件人名称须与实名信息一致。您可以在下单前认证或现场出示证件':'根据国家法律法规要求，寄件人名称须与实名信息一致。'
}}
</view>
<view class="btn" @click="handleTorealName" v-if="!isRealNameAuth && type!=='get'">实名认证</view>
</view>
<!-- 地址信息 -->
<view class="address-box">
<view class="title">
<view class="address-title" v-if="type === 'address'">联系人信息</view>
<view class="send-get-title" v-else>
<view class="send" v-if="type==='send'">寄</view>
<view class="get" v-else-if="type==='get'">收</view>
<view class="subTitle">
{{type==='send'?'寄':'收'}}件人信息
</view>
<view class="toAddress" @click="toAddress">
地址簿
</view>
</view>
</view>
<!-- 姓名，电话 -->
<view class="name-number">
<input placeholder-class="phcolor" class="uni-input" :class="formName!==''?'active':''" placeholder="姓名"
@input="handleFormName" :value="formName" maxlength="10" />
<input placeholder-class="phcolor" class="uni-input" type='number' :class="formPhone!==''?'active':''"
placeholder="电话" @input="handleFormPhone" :value="formPhone" />
</view>
<!-- 城市/地区 -->
<view class="city-area" @click="handledSelectArea">
<view class="label" :class="areaLabel!=='城市/地区'?'active':''">{{areaLabel}}</view>
<view class="arrow"></view>
</view>
<!-- 详细地址 -->
<view class="address-detail">
<input placeholder-class="phcolor" class="uni-input" :class="formAddressInfo!==''?'active':''"
placeholder="详细地址（例如：**街**号）" :value="formAddressInfo" @input="handleFormAddressInfo"
maxlength="33" />
</view>
<!-- 底部按钮区域 -->
<view class="footer">
<view class="save-address" @click="handleSaveToAddress">
<view class="checkbox" :class="{active:isFromAddress?isDefaultAddress:isSaveToAddress}"></view>
<view class="label"> {{isFromAddress?'设为默认寄件地址':'保存到地址簿'}}</view>
</view>
<view class="reset-btn" @click="reset" :class="isReset?'active':''">清空</view>
</view>
</view>
<BtnFooter btnText='确定' :isActive="isConfirm" @confirm="submit"></BtnFooter>
<!-- 选择省市区弹窗 -->
<SelectArea ref='selectArea' @getAreaData="getAreaData" :provinceId="provinceId" :cityId="cityId"
:countyId="countyId" :editOrAdd="editOrAdd"></SelectArea>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
// onLoad
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import BtnFooter from '@/components/BtnFooter/index.vue'
import SelectArea from './components/selectArea.vue'
import {
addAddress,
getAddressInfoDetail,
editAddress
} from '@/pages/api/address.js'
import {
getUserInfo,
} from '@/pages/api/my.js';
const formName = ref('')
const formPhone = ref('')
const formAddressInfo = ref('')
let provinceId = ref('')
let cityId = ref('')
let countyId = ref('')
let title = ref('') //导航栏标题
const isSaveToAddress = ref(false) //是否保存到地址簿
const isDefaultAddress = ref(false) //是否设置为默认地址
const isFromAddress = ref() //是否来自地址簿
const selectArea = ref()
const type = ref('send') //寄件人，收件人，地址簿
const addressType = ref() //寄件，收件
const editOrAdd = ref()
const id = ref('') //查询地址详情的id
const isConfirm = computed(() => {
return (Boolean(formName.value) && Boolean(formPhone.value) && Boolean(formAddressInfo.value) && areaLabel
.value !== '城市/地区')
}) //是否可以提交确定
const isReset = computed(() => {
return Boolean(formName.value) || Boolean(formPhone.value) || Boolean(formAddressInfo.value) || Boolean(
provinceId.value)
})
const areaLabel = ref('城市/地区') //省市区选择的值
const isRealNameAuth = ref(true) //用户是否进行了实名认证
onLoad((options) => {
if (options.id) {
getAddressInfo(options.id)
}
editOrAdd.value = options.editOrAdd
id.value = options.id || ''
type.value = options.type
isFromAddress.value = options.isFromAddress
title.value = options.type === 'address' ? '编辑地址' : options.type === 'send' ? '寄件人地址填写' : '收件人地址填写'
isDefaultAddress.value = options.isDefault === '0' ? false : true
})
onMounted(() => {
if (editOrAdd.value === 'add') {
selectArea.value.getList()
}
isRealName()
})
//跳转到地址簿
const toAddress = () => {
uni.navigateTo({
url: '/pages/address/index?type=' + type.value
})
}
//跳转到实名认证
const handleTorealName = () => {
uni.navigateTo({
url: '/subPages/realName-authentication/index'
});
}
//获取用户是否实名认证了
const isRealName = () => {
getUserInfo().then((res) => {
if (res) {
isRealNameAuth.value = Boolean(res.data.idCardNoVerify)
}
})
}
//查询地址簿详情
const getAddressInfo = async (id) => {
await getAddressInfoDetail(id).then((res) => {
const {
name,
phoneNumber,
address,
city,
county,
province,
isShow,
isDefault
} = res.data
formName.value = name
formPhone.value = phoneNumber
formAddressInfo.value = address
areaLabel.value = province.name + ' ' + city.name + ' ' + county.name
provinceId.value = province.id
cityId.value = city.id
countyId.value = county.id
isSaveToAddress.value = isShow
isDefaultAddress.value = isDefault
})
selectArea.value.getList()
}
//是否保存到地址簿、是否设置为默认地址
const handleSaveToAddress = () => {
if (isFromAddress.value) {
isDefaultAddress.value = !isDefaultAddress.value
} else {
isSaveToAddress.value = !isSaveToAddress.value
}
}
//打开选择省市区弹窗
const handledSelectArea = () => {
selectArea.value.handleOpen()
}
//处理姓名表单输入
const handleFormName = (event) => {
formName.value = event.detail.value
}
//处理电话表单输入
const handleFormPhone = (event) => {
formPhone.value = event.detail.value
}
//处理详细地址表单输入
const handleFormAddressInfo = (event) => {
formAddressInfo.value = event.detail.value
}
//获取省市区组件的值
const getAreaData = (value) => {
provinceId.value = value.province.id
cityId.value = value.city.id
countyId.value = value.area.id
areaLabel.value = value.province.name + ' ' + value.city.name + ' ' + value.area.name
}
//重置表单
const reset = () => {
formAddressInfo.value = ''
formName.value = ''
formPhone.value = ''
areaLabel.value = '城市/地区'
}
const handleToLink = () => {
uni.navigateBack()
}
//提交表单
const submit = () => {
console.log()
if (!isConfirm.value) {
uni.showToast({
title: '请将信息填写完整',
icon: 'none'
})
} else if (!(/^1[3456789]\d{9}$/.test(formPhone.value))) {
uni.showToast({
title: '请填写正确的手机号码格式',
icon: 'none'
})
} else if (formName.value.length < 2) {
uni.showToast({
title: '姓名字数长度为2-10',
icon: 'none'
})
} else {
if (editOrAdd.value === 'add' && !id.value) {
addAddress({
name: formName.value,
phoneNumber: formPhone.value,
address: formAddressInfo.value,
provinceId: provinceId.value,
cityId: cityId.value,
countyId: countyId.value,
type: type.value === 'send' ? 1 : 2,
isShow: isFromAddress.value ? 1 : isSaveToAddress.value ? 1 : 0,
isDefault: isDefaultAddress.value ? 1 : 0
}).then((res) => {
uni.showToast({
title: '操作成功',
icon: 'success'
})
if (isFromAddress.value === 'true') {
uni.redirectTo({
url: '/pages/address/index'
})
} else {
uni.redirectTo({
url: '/pages/express-delivery/index?id=' + res.data.id + '&type=' + type
.value
})
}
})
} else if (editOrAdd.value === 'edit' && id.value) {
editAddress({
name: formName.value,
phoneNumber: formPhone.value,
address: formAddressInfo.value,
provinceId: provinceId.value,
cityId: cityId.value,
countyId: countyId.value,
type: addressType.value,
isShow: isFromAddress.value ? 1 : isSaveToAddress.value ? 1 : 0,
id: id.value,
isDefault: isDefaultAddress.value ? 1 : 0
}).then((res) => {
uni.showToast({
title: '操作成功',
icon: 'success'
})
if (isFromAddress.value === 'true') {
uni.redirectTo({
url: '/pages/address/index'
})
} else {
uni.redirectTo({
url: '/pages/express-delivery/index?id=' + res.data.id + '&type=' + type
.value
})
}
})
}
}
}
</script>
<style src="./index.scss" lang="scss" scoped></style>
<style src="./components/selectArea.scss" lang="scss"></style>

117
project-wl-yonghuduan-uniapp-vue3/subPages/authentication-success/index.scss Normal file
View File

@@ -0,0 +1,117 @@
.goBack{
position: absolute;
width: 40rpx;
height: 40rpx;
z-index: 2;
left: 26rpx;
}
.authentication-success{
position: relative;
image{
width: 100%;
height: 540rpx;
}
.tips{
position: absolute;
left: 66rpx;
font-size: 26rpx;
font-weight: bold;
color: white;
width: 480rpx;
height: 72rpx;
top: 188rpx;
}
.info{
position: relative;
bottom: 230rpx;
height: 278rpx;
background: #FFFFFF;
box-shadow: 0 4rpx 38rpx 0 rgba(66,77,84,0.00);
border-radius: 24rpx;
margin: 0 30rpx;
position: relative;
.bg{
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.info-top{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: relative;
z-index: 3;
.success{
width: 152rpx;
height: 122rpx;
margin: 22rpx 16rpx 0 0;
}
.info-person{
display: flex;
margin: 50rpx 0 0 32rpx;
.headUrl{
height: 116rpx;
width: 116rpx;
margin-right: 32rpx;
}
.info-box{
.name{
font-size: 32rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 14rpx;
}
.identify-num{
font-size: 26rpx;
color: #919191;
}
}
}
}
.info-title{
position: absolute;
bottom: 40rpx;
left: 27rpx;
display: flex;
align-items: center;
font-size:24rpx ;
color:#919191 ;
image{
width:40rpx ;
height:40rpx ;
margin-right: 6rpx;
}
}
}
.btn{
width: 560rpx;
height: 90rpx;
background: #FFFFFF;
border-radius: 44rpx;
margin: 82rpx auto 0;
font-size: 30rpx;
font-weight: bold;
text-align: center;
line-height: 90rpx;
position: relative;
bottom: 230rpx;
}
::v-deep .uni-popup-dialog{
.uni-button-color{
color: #E84134!important;
}
.uni-dialog-content{
font-size: 28rpx;
color:#919191 ;
text-align: center;
}
.uni-dialog-title{
.uni-dialog-title-text {
font-size: 32rpx;
color: #323233;
}
}
}
}

98
project-wl-yonghuduan-uniapp-vue3/subPages/authentication-success/index.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<!-- 头部导航栏 -->
<image class="goBack" :src='src' @click="handleTo" :style="{'top':capsuleTop+9+'px'}"></image>
<view class="authentication-success">
<image src='../../static/shiming-success.png'></image>
<view class="tips">本人寄件时仅需出示有效身份证件共查阅确认即可，无需再次采集</view>
<view class="info">
<image src='../../static/shiming-success-bg.png' class="bg"></image>
<view class="info-top">
<view class="info-person">
<image class="headUrl" src='../../static/head.png'></image>
<view class="info-box">
<view class="name">{{name}}</view>
<view class="identify-num">{{idCard}}</view>
</view>
</view>
<image src='../../static/shiming-success-img.png' class="success"></image>
</view>
<view class="info-title">
<image src='../../static/anquan.png'></image>
<view>神领速运保障您的信息安全</view>
</view>
</view>
<view class="btn" @click="handleDelete">删除认证信息</view>
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog type="info" cancelColor="red" cancelText="取消" confirmText="确定" title="确定删除实名信息吗？" content="删除后，寄件时需出示身份证件供
快递员重新采集身份信息" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script setup>
import {
ref,
} from 'vue';
import {getRealNameStatusApi} from '@/pages/api/my.js'
import {
onLoad,
} from '@dcloudio/uni-app';
let src = ref('../../static/idcard-goback.png')
let idCard = ref('')
let name = ref('')
let alertDialog = ref('')
//胶囊顶部距离头部的距离
let capsuleTop = ref()
onLoad((options)=>{
idCard.value = options.idCard || ''
name.value = options.name
uni.getSystemInfo({
success: (res) => {
capsuleTop.value = uni.getMenuButtonBoundingClientRect().top
}
})
})
const handleTo = ()=>{
uni.navigateBack()
}
const handleDelete = () => {
alertDialog.value.open()
}
const dialogConfirm =()=>{
getRealNameStatusApi({
flag:0
}).then((res)=>{
if (res.code !== 200) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
} else {
uni.showToast({
title: '删除成功',
icon: 'none',
duration: 1000,
})
setTimeout(() => {
uni.switchTab({
url: '/pages/my/index'
})
}, 2000)
}
})
.catch(()=>{
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
});
})
}
const dialogClose = ()=>{
alertDialog.value.close()
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

119
project-wl-yonghuduan-uniapp-vue3/subPages/electronic-stub/index.scss Normal file
View File

@@ -0,0 +1,119 @@
.electronic-stub{
background-color: #F3F5F9 !important;
.content{
background: #FFFFFF;
border-radius: 10px;
margin: 14rpx 18rpx 0;
padding-bottom: 50rpx;
overflow: hidden;
.code-box{
margin: 40rpx 60rpx;
margin-bottom: 10rpx;
.code-url{
width: 600rpx;
height: 100rpx;
}
.order-num{
font-size: 24rpx;
color:#000000 ;
text-align: center;
}
}
.address-box{
height: 284rpx;
background: #FFFFFF;
border-radius: 20rpx;
display: flex;
padding: 42rpx 0;
margin: 0 28rpx;
border-bottom: 2rpx solid #F4F4F4;
padding-bottom: 0rpx;
.left{
margin-right: 20rpx;
margin-top: 5rpx;
.send,.get{
width: 40rpx;
height: 40prx;
border-radius: 50%;
text-align: center;
line-height: 40rpx;
font-size: 24rpx;
}
.send{
background: #000000;
color: white;
}
.get{
background: #E63E32;
color: white;
}
.line{
width: 2rpx;
height: 120rpx;
border-left: 2rpx dashed #D5D1D1;
margin-left: 18rpx;
}
}
.right{
width: 100%;
position: relative;
.send-people,.get-people{
display: flex;
align-items: center;
justify-content: space-between;
.send-sub-title{
color: #151515;
font-size: 32rpx;
margin-bottom: 6rpx;
font-weight: bold;
display: flex;
align-items: center;
.user-phone{
color: #888888;
font-size: 24rpx;
font-weight: normal;
margin-left: 10rpx;
}
image{
width: 40rpx;
height: 40rpx;
margin-left: 10rpx;
}
}
.send-desc{
color: #888888;
font-size: 24rpx;
}
}
.get-people{
margin-top:80rpx ;
}
.line{
position: absolute;
width: 100%;
height: 2rpx;
background-color: #F4F4F4;
top: 44%;
left: 0;
}
}
}
.order-info{
margin-top: 40rpx;
padding:0 32rpx ;
.order-item{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28rpx;
.label{
color: #888888;
font-size: 24rpx;
}
.value{
font-size: 24rpx;
}
}
}
}
}

165
project-wl-yonghuduan-uniapp-vue3/subPages/electronic-stub/index.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<!-- 头部导航栏 -->
<nav-bar title='电子存根'></nav-bar>
<view class="electronic-stub">
<view class="content">
<view class="code-box">
<image class="code-url" :src="orderInfo.barCode" />
<view class="order-num">{{orderInfo.transportOrderId}}</view>
</view>
<!-- 运单地点信息 -->
<view class="address-box">
<view class="left">
<view class="send">寄</view>
<view class="line"></view>
<view class="get">收</view>
</view>
<view class="right">
<view class="send-people">
<view class="send-title">
<view class="send-sub-title">
{{orderInfo.senderName}}
<text class="user-phone">{{sendIsOpen?orderInfo.senderPhone:orderInfo.senderPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
<image :src="sendIsOpen?'../../static/zhengkai.png':'../../static/biyan.png'" @click="sendClick"></image>
</view>
<view class="send-desc">{{orderInfo.senderAddress}}</view>
</view>
</view>
<view class="line"></view>
<view class="get-people">
<view class="send-title">
<view class="send-sub-title">
{{orderInfo.receiverName}}
<text class="user-phone">{{getIsOpen?orderInfo.receiverPhone:orderInfo.receiverPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
<image :src="getIsOpen?'../../static/zhengkai.png':'../../static/biyan.png'" @click="getClick"></image>
</view>
<view class="send-desc">{{orderInfo.receiverAddress}}</view>
</view>
</view>
</view>
</view>
<!-- 运单详情 -->
<view class="order-info">
<view class="order-item">
<view class="label">物品</view>
<view class="value">{{orderInfo.goods}}</view>
</view>
<view class="order-item">
<view class="label">计费重量</view>
<view class="value">{{orderInfo.goodsWeight}}kg</view>
</view>
<view class="order-item">
<view class="label">数量</view>
<view class="value">1</view>
</view>
<view class="order-item">
<view class="label">付费方式</view>
<view class="value">{{orderInfo.paymentMethod}}</view>
</view>
<view class="order-item">
<view class="label">基础运费</view>
<view class="value">{{orderInfo.amount}}元</view>
</view>
<view class="order-item">
<view class="label">下单时间</view>
<view class="value">{{orderInfo.createTime}}</view>
</view>
<view class="order-item">
<view class="label">运单号</view>
<view class="value">{{orderInfo.transportOrderId}}</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive
} from 'vue';
import {
doOrder,
getOrderDetail
} from '@/pages/api/order.js'
import {
onLoad
} from '@dcloudio/uni-app';
let orderId = ref()
let orderInfo = reactive({
estimatedArrivalTime: '',
receiverName: '',
receiverAddress: '',
receiverProvince: '',
receiverPhone: '',
senderName: '',
senderAddress: '',
senderProvince: '',
senderPhone: '',
goods: '',
goodsWeight: '',
paymentMethod: '',
amount: '',
barCode: '',
transportOrderId: ''
})
let sendIsOpen = ref(false)
let getIsOpen = ref(false)
onLoad((options) => {
orderId.value = options.orderId
getOrderDetailFunc()
})
const getClick = ()=>{
getIsOpen.value = !getIsOpen.value
}
const sendClick = ()=>{
sendIsOpen.value = !sendIsOpen.value
}
//获取订单详情
const getOrderDetailFunc = () => {
getOrderDetail(orderId.value).then((res) => {
const {
estimatedArrivalTime,
receiverName,
senderName,
receiverProvince,
receiverCity,
receiverCounty,
receiverAddress,
senderProvince,
senderCity,
senderCounty,
senderAddress,
orderCargoVOS,
paymentMethod,
amount,
senderPhone,
receiverPhone,
createTime,
barCode,
transportOrderId
} = res.data
orderInfo.estimatedArrivalTime = estimatedArrivalTime
orderInfo.receiverName = receiverName
orderInfo.senderName = senderName
orderInfo.receiverAddress = receiverProvince.name + receiverCity.name + receiverCounty.name +
receiverAddress
orderInfo.senderAddress = senderProvince.name + senderCity.name + senderCounty.name + senderAddress
orderInfo.goods = orderCargoVOS[0].name + (orderCargoVOS[0].goodsType ? ('(' + orderCargoVOS[0]
.goodsType.name + ')') : '')
orderInfo.goodsWeight = orderCargoVOS[0].totalWeight
orderInfo.paymentMethod = paymentMethod === 1 ? '寄付' : '到付'
orderInfo.amount = amount
orderInfo.receiverPhone = receiverPhone
orderInfo.senderPhone = senderPhone
orderInfo.receiverProvince = receiverProvince.name
orderInfo.senderProvince = senderProvince.name
orderInfo.createTime = createTime
orderInfo.barCode = barCode
orderInfo.transportOrderId = transportOrderId
})
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

61
project-wl-yonghuduan-uniapp-vue3/subPages/order-cancel/index.scss Normal file
View File

@@ -0,0 +1,61 @@
.order-cancel{
background-color:#F3F5F9 ;
.orderCancel-bg{
width: 100%;
height: 236rpx;
}
.cancel{
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 20rpx;
padding: 29rpx;
.customerBox,.senderBox{
border-bottom: 2rpx solid #F5F5F5;
padding-bottom: 46rpx;
.title{
font-size: 26rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.reason-item{
display: flex;
align-items: center;
margin-top: 26rpx;
font-size: 28rpx;
.label{
margin-left: 9rpx;
}
}
}
.senderBox{
margin-top: 28rpx;
border-bottom: none;
}
}
.footer{
height: 164rpx;
background-color: white;
display: flex;
position: fixed;
bottom: 0;
width: 100%;
justify-content: center;
.cancel-btn,.confirm-btn{
width: 276rpx;
height: 88rpx;
border-radius: 44rpx;
text-align: center;
line-height: 88rpx;
margin-top: 17rpx;
}
.cancel-btn{
border: 2rpx solid #191919;
margin-right: 20rpx;
}
.confirm-btn{
background: #E84134;
color: white;
margin-left: 20rpx;
}
}
}

128
project-wl-yonghuduan-uniapp-vue3/subPages/order-cancel/index.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<!-- 头部导航栏 -->
<nav-bar title='取消订单'></nav-bar>
<view class="order-cancel">
<image class="orderCancel-bg" src='../../static/order-cancel-bg.png'></image>
<view class="cancel">
<view class="customerBox">
<view class="title">客户相关</view>
<view class="reason-item" v-for='(item,index) in customerReason' :key="index"
@click="checkbox(item.value)">
<view class="checkRadio">
<radio style="transform:scale(0.8)" color="#E44232" :value="String(item.value)"
:checked="item.value === defaultReason" />
</view>
<view class="label">{{item.label}}</view>
</view>
</view>
<view class="senderBox">
<view class="title">快递员/服务相关</view>
<view class="reason-item" v-for='(item,index) in senderReason' :key="index"
@click="checkbox(item.value)">
<view class="checkRadio">
<radio style="transform:scale(0.8)" color="#E44232" :value="String(item.value)"
:checked="item.value === defaultReason" />
</view>
<view class="label">{{item.label}}</view>
</view>
</view>
</view>
<view class="footer">
<view class="cancel-btn" @click="handleNoCancel">暂不取消</view>
<view class="confirm-btn" @click="handleConfirmCancel">确定取消</view>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
cancelOrder
} from '@/pages/api/order.js'
const orderId = ref()
let defaultReason = ref(1)
onLoad((options) => {
orderId.value = options.orderId
})
const customerReason = reactive([{
value: 1,
label: '计划有变，不需要寄了'
},
{
value: 2,
label: '换个时间再寄'
},
{
value: 3,
label: '去服务点自寄'
}
])
const senderReason = reactive(
[{
value: 4,
label: '送达时间不能达到我的要求'
},
{
value: 5,
label: '运费太贵了'
},
{
value: 6,
label: '快递员未及时取件'
},
{
value: 7,
label: '快递员不上门'
},
{
value: 8,
label: '快递员服务态度差'
}
])
//确定取消订单
const handleConfirmCancel = () => {
cancelOrder(orderId.value).then((res) => {
uni.showToast({
title: '取消成功',
icon: 'none',
success: () => {
},
duration: 2000
})
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
}, 2500)
}
).catch(()=>{
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
});
})
}
//暂不取消
const handleNoCancel = () => {
uni.navigateBack()
}
const checkbox = (value) => {
defaultReason.value = value
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

332
project-wl-yonghuduan-uniapp-vue3/subPages/order-info/index.scss Normal file
View File

@@ -0,0 +1,332 @@
.order-box{
height: 100vh;
background-color:white ;
}
.map-contain{
width: 500rpx;
height: 500rpx;
}
.order-info{
min-height: 80vh;
background-color:#F3F5F9 ;
overflow: hidden;
.order-header{
margin: 40rpx;
border-radius: 24rpx;
background: #FEFFFE;
height: 198rpx;
.header-bg{
padding: 12rpx 20rpx 11rpx;
border-radius: 24rpx 24rpx 0 0;
height: 32rpx;
display:flex;
align-items: center;
justify-content: space-between;
background-image: linear-gradient(269deg, #8D95AC 0%, #232031 92%);
color: white;
font-size: 22rpx;
.toElectronicStub{
display: flex;
align-items: center;
}
.order-num{
font-weight: bold;
display: flex;
align-items: center;
.copy{
width: 25rpx;
height: 25rpx;
margin-left: 20rpx;
}
}
}
.order-status{
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx 60rpx 32rpx 27rpx;
position: relative;
.line{
width: 2rpx;
height:96rpx ;
background-color: #F5F5F5;
position: absolute;
left: 312rpx;
top: 24rpx;
}
.status{
text-align: center;
.status-label{
font-size: 32rpx;
font-weight: bold;
margin-bottom: 8rpx;
}
.status-tips{
font-size: 22rpx;
color:#878787 ;
}
}
.area{
font-size: 24rpx;
font-weight: bold;
display: flex;
align-items: center;
.arrow{
width: 80rpx;
height: 12rpx;
background-repeat: no-repeat;
background-size: contain;
}
.green-arrow{
background-image: url(data:image/png;base64,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);
}
.red-arrow{
background-image: url(data:image/png;base64,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);
}
.gray-arrow{
background-image: url('data:image/png;base64,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');
}
}
}
}
.logistics-info{
border-radius: 20rpx 20rpx 0 0;
background: #FFFFFF;
height: calc(100% - 198rpx);
padding:40rpx 48rpx 120rpx;
padding-bottom: 40rpx;
.order-detail{
display: flex;
.left{
margin-right: 20rpx;
.send,.get{
width: 40rpx;
height: 40prx;
border-radius: 50%;
text-align: center;
line-height: 40rpx;
font-size: 24rpx;
}
.send{
background: #000000;
color: white;
}
.get{
background: #E63E32;
color: white;
}
.line{
width: 2rpx;
height: 136rpx;
border-left: 2rpx dashed #D5D1D1;
margin-left: 18rpx;
}
.active{
height: 159rpx;
}
}
.right{
width: 100%;
position: relative;
.send-people,.get-people{
display: flex;
align-items: center;
justify-content: space-between;
.send-title{
height: 100%;
}
.send-sub-title{
color: #151515;
font-size: 32rpx;
margin-bottom: 12rpx;
font-weight: bold;
}
.send-desc{
color: #888888;
font-size: 24rpx;
}
.address-enter{
font-weight: bold;
border-left: 2rpx solid #F4F4F4;
padding-left: 28rpx;
font-size: 24rpx;
}
}
.get-people{
margin-bottom: 40rpx;
}
.send-people{
margin-bottom: 40rpx;
}
.line{
width: 100%;
height: 2rpx;
background-color: #F4F4F4;
margin-bottom: 40rpx;
}
}
}
.price-detail{
border-top: 2rpx solid #F3F4F7;
padding: 40rpx 0;
.goods,.weight,.payType,.base-price{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28rpx;
.label,.value{
font-size: 24rpx;
}
.label{
color: #888;
}
}
.goods{
margin-top: 0rpx;
}
}
.logistics-orderInfo{
.logistics-orderInfo-item.active{
.logistics-orderInfo-left{
.circle{
background-color:#E63E32!important;
}
}
}
.logistics-orderInfo-item{
display: flex;
.logistics-orderInfo-left{
.gray.circle{
background-color:#818181 ;
}
.circle{
position: relative;
right: 0rpx;
width: 52rpx;
height: 52rpx;
text-align: center;
line-height: 52rpx;
border-radius: 50%;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
color: white;
image{
width:40rpx ;
height:40rpx ;
}
}
.point{
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color:#818181 ;
margin-right: 40rpx;
position: relative;
left: 20rpx;
}
.line{
height: 154rpx;
width: 2rpx;
border-left: 2rpx dashed #DFDFDF;
position: relative;
left: 24rpx;
}
.line.short{
height:120rpx ;
}
}
.logistics-orderInfo-right{
margin-left: 20rpx;
.status{
font-size: 32rpx;
color:#2A2929 ;
font-weight: bold;
margin-bottom: 6rpx;
}
.time{
margin-bottom: 6rpx;
}
.time,.desc{
font-size: 24rpx;
color:#818181 ;
}
.desc.active{
font-weight: bold;
color: #2A2929;
}
}
}
}
}
.BtnFooter{
position: fixed;
bottom: 0;
height: 172rpx;
width: 100%;
background-color: white;
.waiting-box,.pay-box{
display: flex;
.btn{
width: 276rpx;
height: 88rpx;
background: #CCCCCC;
border-radius: 44rpx;
color: white;
font-size: 30rpx;
text-align: center;
line-height: 88rpx;
margin: 24rpx auto 0;
}
.share-btn{
background-color:#E84134;
margin-left: 20rpx;
}
.cancel-order-btn{
background-color: white;
color: #191919;
border: 2rpx solid #191919;
margin-right: 20rpx;
}
.pay-btn{
width: 400rpx;
background-color:#E84134;
color: white;
}
}
}
}
//地图标记
::v-deep .customCallout{
display: flex;
.content,.areaContent{
width: 108rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
font-size: 30rpx;
}
.content{
background-color:#fff ;
border-radius: 16rpx 0rpx 0rpx 16rpx;
}
.areaContent{
background-color:#F6EEEC ;
border-radius: 0 16rpx 16rpx 0;
}
.courier{
width: 206rpx;
height: 60rpx;
border-radius:20rpx ;
background-color: #fff;
font-size: 28rpx;
color:#20232A ;
text-align: center;
line-height:60rpx ;
}
}

652
project-wl-yonghuduan-uniapp-vue3/subPages/order-info/index.vue Normal file
View File

@@ -0,0 +1,652 @@
<template>
<view class="order-box">
<!-- 头部导航栏 -->
<nav-bar title='订单详情'></nav-bar>
<view class="map-box" v-if="[23001,23005,23008,23009,23010].includes(orderStatus)">
<!-- include-points在微信开发者工具无法正常显示，在真机可以 -->
<map :include-points="covers.data.filter(item=>item.latitude)" scale="6"
style="width: 100%; height: 780rpx;" :polyline="polyline.data" :markers="covers.data">
<cover-view slot="callout">
<block v-for="(item,index) in covers.data" :key="index">
<cover-view v-if="[1,2].includes(item.id)" class="customCallout" :marker-id="item.id">
<cover-view class="content">
{{item.title}}
</cover-view>
<cover-view class="areaContent">
{{item.areaName}}
</cover-view>
</cover-view>
<cover-view v-else-if="[3].includes(item.id)" class="customCallout" :marker-id="item.id">
<cover-view class="courier">
快递员上门中
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
<view class="order-info" v-if="netStatus">
<view class="order-header">
<view class="header-bg">
<view class="order-num">
{{[23000,22000,230011].includes(orderStatus)?'订':'运'}}单号：{{[23000,22000,230011].includes(orderStatus)?orderInfo.id:orderInfo.transportOrderId}}
<image src="../../../static/orderInfo-copy.png" class="copy"
@click.stop="handleCopy([23000,22000,230011].includes(orderStatus)?orderInfo.id:orderInfo.transportOrderId)">
</image>
</view>
<view class="toElectronicStub" @click="handleToElectronicStub"
v-if="[23001,23005,23008,23009,23010].includes(orderStatus)">
电子存根
<uni-icons type="right" size="15" color="white"></uni-icons>
</view>
</view>
<view class="order-status">
<view class="status">
<view class="status-label">
{{showOrderStatus(orderStatus)}}
</view>
<view class="status-tips">
<view class="time" v-if="[230011,22000,23009,23010].includes(orderStatus)">
{{
(orderStatus===230011?'取消':orderStatus===22000?'关闭':orderStatus===23009?'签收':'拒签')
}}时间:
{{handleTimeToStrTime(orderInfo.updated) }}
</view>
<view class="timeing" v-else>
{{orderInfo.estimatedStartTime?
orderStatus === 23000?
'预计'+handleTimeToStrTime(orderInfo.estimatedStartTime)+'前上门'
:'预计'+handleTimeToStrTime(orderInfo.estimatedArrivalTime)+'前送达'
:''}}
</view>
</view>
</view>
<view class="line"></view>
<view class="area">
<view class="start-area">
{{orderInfo.senderProvince}}
</view>
<view class="arrow" :class="
[[21000,23000,23001,23005,23008].includes(orderStatus)?'green-arrow':'',
[23009,23010].includes(orderStatus)?'red-arrow':'',
[230011,22000].includes(orderStatus)?'gray-arrow':'']
"></view>
<view class="end-area">
{{orderInfo.receiverProvince}}
</view>
</view>
</view>
</view>
<!-- 物流信息 -->
<view class="logistics-info">
<!-- 待取件，已取消，已关闭物流信息展示 -->
<view class="only-orderInfo" v-if='[23000,230011,22000].includes(orderStatus)' :style="scrollHeight">
<view class="order-detail">
<view class="left">
<view class="send">寄</view>
<view class="line" :class="{active:twoLine>=2}"></view>
<view class="get">收</view>
</view>
<view class="right">
<view class="send-people">
<view class="send-title">
<view class="send-sub-title">
{{orderInfo.senderName}}
<text>{{orderInfo.senderPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
</view>
<view class="send-desc">{{orderInfo.senderAddress}}</view>
</view>
</view>
<view class="line"></view>
<view class="get-people">
<view class="send-title">
<view class="send-sub-title">
{{orderInfo.receiverName}}
<text>{{orderInfo.receiverPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
</view>
<view class="send-desc">{{orderInfo.receiverAddress}}</view>
</view>
</view>
</view>
</view>
<view class="price-detail">
<view class="goods">
<view class="label">物品</view>
<view class="value">{{orderInfo.goods}}</view>
</view>
<view class="weight">
<view class="label">计费重量</view>
<view class="value">{{orderInfo.goodsWeight}}kg</view>
</view>
<view class="payType">
<view class="label">付费方式</view>
<view class="value">{{orderInfo.paymentMethod}}</view>
</view>
<view class="base-price">
<view class="label">基础运费</view>
<view class="value">{{orderInfo.amount}}元</view>
</view>
</view>
</view>
<!-- 已取件，运送中，派送中，已签收，已拒收物流信息展示 -->
<scroll-view scroll-y :style="scrollHeight" v-else>
<view class="logistics-orderInfo">
<view class="logistics-orderInfo-item" :class="[index===0?'active':'']" :key="index"
v-for='(item,index) in logisticsInfo.data'>
<view class="logistics-orderInfo-left">
<view class="circle gray" v-if="['已拒收','已签收','已取件'].includes(item.status)">
{{item.status==='已拒收'?'拒':item.status==='已签收'?'签':'取'}}
</view>
<view class="circle gray"
v-else-if="index ===0 &&['运送中','派送中'].includes(item.status) || index>0 && logisticsInfo.data[index-1].status !=='运送中'">
<image
:src="item.status==='派送中'?'../../static/paisong.png':'../../static/yunshuzhong.png'">
</image>
</view>
<view class="point" v-else-if="index>0 && logisticsInfo.data[index-1].status==='运送中'">
</view>
<view class="line" v-if='!(index === logisticsInfo.data.length - 1)'
:class="item.status==='运送中'?'short':''"></view>
</view>
<view class="logistics-orderInfo-right">
<view class="status"
v-if='!(index>0 && logisticsInfo.data[index-1].status==="运送中" &&item.status==="运送中")'>
{{item.status}}
</view>
<view class="time">{{item.created}}</view>
<view class="desc" :class="index === 0 || item.status === 23010?'active':''"
v-html="strInit(item.info)">
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="BtnFooter" v-if="[23000].includes(orderStatus)">
<view class="waiting-box" v-if='orderStatus === 23000'>
<view class="cancel-order-btn btn" @click="handleOrderCancel">取消订单</view>
<view class="share-btn btn" @click="handleSecondQi">分享</view>
</view>
<!-- <view class="pay-box" v-if='[23001,23008].includes(orderStatus)'>
<view class="pay-btn btn" @click="handlePay">
支付运费：{{orderInfo.amount}}
</view>
</view> -->
</view>
</view>
<!-- 断网显示的页面 -->
<net-fail v-else :handleToRefresh="handleToRefresh"></net-fail>
</view>
</template>
<script setup>
import {
ref,
reactive,
nextTick
} from 'vue';
import {
getOrderDetail,
payOrder,
getOrderLine
} from '@/pages/api/order.js'
import {
onLoad,
} from '@dcloudio/uni-app';
import {
handleSecondQi,
handleTimeToStrTime
} from '@/utils/index.js'
import {
useStore
} from 'vuex';
const twoLine = ref()
let scrollHeight = ref('')
const store = useStore(); //vuex获取、储存数据
const orderStatus = ref()
const orderId = ref()
const orderInfo = reactive({
estimatedStartTime: '',
estimatedArrivalTime: '',
receiverName: '',
receiverAddress: '',
receiverProvince: '',
receiverPhone: '',
senderName: '',
senderAddress: '',
senderProvince: '',
senderPhone: '',
goods: '',
goodsWeight: '',
paymentMethod: '',
amount: '',
transportOrderId: '',
id: ''
})
const netStatus = ref(true)
let transportOrderId = ref('') //运单号
let haveDriveredLine = reactive([]) //已经走过的路线
let notHaveDriveredLine = reactive([]) //未走过的路线
let points = reactive([])
let carLocation = reactive({
data: {
lng: '',
lat: ''
}
})
let polyline = reactive({
data: []
})
//地图上的标记点
let covers = reactive({
data: []
})
onLoad((options) => {
orderId.value = options.orderId
transportOrderId.value = options.transportOrderId
getOrderDetailFunc(options.transportOrderId)
uni.getSystemInfo({
success: (res) => {
scrollHeight.value = 'height:' + (res.screenHeight - 290) + 'px'
}
})
})
//获取订单轨迹
const getOrderLineFunc = () => {
getOrderLine(transportOrderId.value).then((res) => {
if (res.data.lastPoint) {
carLocation.data = {
longitude: res.data.lastPoint.lng,
latitude: res.data.lastPoint.lat
}
}
points = res.data.pointList.map((item) => {
return {
longitude: item.lng,
latitude: item.lat
}
})
if (res.data.status === 1) {
// 没有上报的坐标点，规划路线均为虚线
notHaveDriveredLine = points
polyline.data = [{
points: points,
color: "#000000",
width: 5,
dottedLine: true
}]
covers.data = [
//起始
{
id: 2,
latitude: points[0].latitude,
longitude: points[0].longitude,
iconPath: '../../static/startPoint.png',
height: 18,
width: 18,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
title: '始发地',
areaName: orderInfo.senderProvince
},
//终点
{
id: 1,
latitude: points[points.length - 1].latitude,
longitude: points[points.length - 1].longitude,
iconPath: '../../static/endPoint.png',
height: 18,
width: 18,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
title: '目的地',
areaName: orderInfo.receiverProvince
},
]
} else if (res.data.status === 2) {
// 有上报的坐标点，并且是在运输状态,显示小车
findPoint()
covers.data = [
//起始
{
id: 2,
latitude: points[0].latitude,
longitude: points[0].longitude,
iconPath: '../../static/startPoint.png',
height: 18,
width: 18,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
title: '始发地',
areaName: orderInfo.senderProvince
},
//终点
{
id: 1,
latitude: points[points.length - 1].latitude,
longitude: points[points.length - 1].longitude,
iconPath: '../../static/endPoint.png',
height: 18,
width: 18,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
title: '目的地',
areaName: orderInfo.receiverProvince
},
//小车
{
id: 4,
latitude: res.data.lastPoint ? res.data.lastPoint.lat : '',
longitude: res.data.lastPoint ? res.data.lastPoint.lng : '',
iconPath: '../../static/carPoint.png',
height: 40,
width: 40,
}
]
} else if (res.data.status === 3) {
// 有上报的坐标点，并且是在派件状态,显示快递员
findPoint()
covers.data = [
//终点
{
id: 1,
latitude: points[points.length - 1].latitude,
longitude: points[points.length - 1].longitude,
iconPath: '../../static/endPoint.png',
height: 18,
width: 18,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
title: '目的地',
areaName: orderInfo.receiverProvince
},
//快递员
{
id: 3,
latitude: res.data.lastPoint ? res.data.lastPoint.lat : '',
longitude: res.data.lastPoint ? res.data.lastPoint.lng : '',
iconPath: '../../static/courierPoint.png',
height: 40,
width: 40,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
}
]
} else {
// 整个流程结束，规划路线均为实线
haveDriveredLine = points
polyline.data = [{
points: points,
color: "#E25433",
width: 5,
}]
covers.data = [
//起始
{
id: 2,
latitude: points[0].latitude,
longitude: points[0].longitude,
iconPath: '../../static/startPoint.png',
height: 18,
width: 18,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
title: '始发地',
areaName: orderInfo.senderProvince
},
//终点
{
id: 1,
latitude: points[points.length - 1].latitude,
longitude: points[points.length - 1].longitude,
iconPath: '../../static/endPoint.png',
height: 18,
width: 18,
customCallout: {
anchorY: 0,
anchorX: 0,
display: "ALWAYS"
},
title: '目的地',
areaName: orderInfo.receiverProvince
},
]
}
})
}
// 根据一个坐标点找出数组中离该坐标点最近的点
const findPoint = () => {
const distanceList = []
let pointIndex = null
points.map((item) => {
distanceList.push(GetDistance(item.latitude, item.longitude, carLocation.data.latitude, carLocation
.data
.longitude))
})
const minNum = Math.min(...distanceList)
pointIndex = distanceList.indexOf(minNum)
haveDriveredLine = [{
points: points.slice(0, pointIndex),
color: "#E25433",
width: 5,
}]
notHaveDriveredLine = [{
points: points.slice(pointIndex, points.length - 1),
color: "#000",
width: 5,
dottedLine: true
}]
polyline.data = [haveDriveredLine[0], notHaveDriveredLine[0]]
}
// 计算两个坐标点之间的距离
const GetDistance = (lat1, lng1, lat2, lng2) => {
var radLat1 = lat1 * Math.PI / 180.0
var radLat2 = lat2 * Math.PI / 180.0
var a = radLat1 - radLat2
var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
s = s * 6378.137 // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000
return s
}
//复制
const handleCopy = (value) => {
uni.setClipboardData({
data: value,
showToast: false,
success: () => {
uni.hideToast(); // 隐藏弹出提示
uni.hideKeyboard(); // 隐藏软键盘
uni.showToast({
title: '复制成功',
icon: 'success',
duration: 1000
})
}
});
}
const handleToRefresh = () => {
getOrderDetailFunc()
}
//跳转到取消订单页面
const handleOrderCancel = () => {
uni.navigateTo({
url: '/subPages/order-cancel/index?orderId=' + orderId.value
})
}
//将后端传来的字符串中的数字变为红色
const strInit = (value) => {
let strText = value
let replaceText = []
for (let i = 0; i <= 10; i++) {
replaceText.push('' + i)
}
// 转换成html形式解析
for (let i = 0; i < replaceText.length; i++) {
var replaceString = '<span style="color: red;">' + replaceText[i] + "</span>"
strText = strText.replace(RegExp(replaceText[i], 'g'), replaceString)
}
// 这里再把这个红色替换成你想要的颜色
// 由于在循环体里面数字会被替换，所以用了一个单词（red）来当成初始色
strText = strText.replace(RegExp('red', 'g'), '#E63E32')
return strText
}
//根据状态去显示对应的运单状态文案
const showOrderStatus = (status) => {
switch (status) {
case 21000:
return '待支付';
case 23000:
return '待取件';
case 230011:
return '已取消';
case 23001:
return '已取件';
case 23005:
return '运送中';
case 22000:
return '已关闭';
case 23008:
return '派送中';
case 23009:
return '已签收';
case 23010:
return '已拒收';
}
}
const logisticsInfo = reactive({
data: []
})
//进入电子存根页面
const handleToElectronicStub = () => {
uni.navigateTo({
url: '/subPages/electronic-stub/index?orderId=' + orderId.value
});
}
//获取订单详情
const getOrderDetailFunc = (params) => {
getOrderDetail(orderId.value).then((res) => {
orderStatus.value = res.data.status
const {
estimatedArrivalTime,
estimatedStartTime,
receiverName,
senderName,
receiverProvince,
receiverCity,
receiverCounty,
receiverAddress,
senderProvince,
senderCity,
senderCounty,
senderAddress,
orderCargoVOS,
paymentMethod,
amount,
senderPhone,
receiverPhone,
transportOrderId,
updated,
transportOrderPointVOS,
id
} = res.data
orderInfo.estimatedStartTime = estimatedStartTime
orderInfo.estimatedArrivalTime = estimatedArrivalTime
orderInfo.receiverName = receiverName
orderInfo.senderName = senderName
orderInfo.receiverAddress = receiverProvince.name + receiverCity.name + receiverCounty.name +
receiverAddress
orderInfo.senderAddress = senderProvince.name + senderCity.name + senderCounty.name + senderAddress
orderInfo.goods = orderCargoVOS[0].name + (orderCargoVOS[0].goodsType ? ('(' + orderCargoVOS[0]
.goodsType.name + ')') : '')
orderInfo.goodsWeight = orderCargoVOS[0].totalWeight
orderInfo.paymentMethod = paymentMethod === 1 ? '寄付' : '到付'
orderInfo.amount = amount
orderInfo.receiverPhone = receiverPhone
orderInfo.senderPhone = senderPhone
orderInfo.receiverProvince = receiverCity.name
orderInfo.senderProvince = senderCity.name
orderInfo.transportOrderId = transportOrderId
orderInfo.updated = updated
orderInfo.id = id
logisticsInfo.data = transportOrderPointVOS.reverse()
if ([23000, 230011, 22000].includes(orderStatus.value)) {
nextTick(() => {
//用来获取详细地址有几行，从而适配寄和收之间竖线的高度
uni.createSelectorQuery().select('.send-desc').boundingClientRect(res => {
let height = res.height;
let line = height / 15
twoLine.value = line
}).exec();
})
}
if (params && params !== 'null') getOrderLineFunc()
})
.catch((err) => {
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
});
netStatus.value = false
})
}
//支付
const handlePay = () => {
payOrder({
enterpriseId: 1561414331,
tradingAmount: orderInfo.amount,
payMethod: 2,
productOrderNo: orderId.value
}).then((res) => {
const params = JSON.parse(res.data.placeOrderJson)
uni.requestPayment({
timeStamp: String(params.timeStamp),
nonceStr: params.nonceStr,
package: params.package,
paySign: params.paySign,
signType: "RSA",
})
})
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

178
project-wl-yonghuduan-uniapp-vue3/subPages/order-success/index.scss Normal file
View File

@@ -0,0 +1,178 @@
.order-success{
background-color:#F3F5F9 ;
height: 90vh;
.header{
margin: 40rpx 50rpx;
margin-top: 0rpx;
padding-top: 40rpx;
.title{
display: flex;
align-items: center;
margin-bottom: 26rpx;
font-size: 42rpx;
font-weight:bold;
.success-img{
margin-right: 18rpx;
width: 60rpx;
height: 60rpx;
background-repeat: no-repeat;
background-size: contain;
background-image: url('../../static/order-success.png');
}
uni-text{
font-size: 42rpx;
font-weight: bold;
}
}
.send-time{
font-size: 32rpx;
uni-text:first-child{
margin-right:36rpx ;
}
}
.tips{
font-size: 24rpx;
color: #888;
margin-top: 10rpx;
}
}
.orderBox{
background: #FFFFFF;
border-radius: 20rpx;
padding: 40rpx 28rpx;
margin: 0 18rpx;
.order-detail{
display: flex;
.left{
margin-right: 20rpx;
.send,.get{
width: 40rpx;
height: 40prx;
border-radius: 50%;
text-align: center;
line-height: 40rpx;
font-size: 24rpx;
}
.send{
background: #000000;
color: white;
}
.get{
background: #E63E32;
color: white;
}
.line{
width: 2rpx;
height: 123rpx;
border-left: 2rpx dashed #D5D1D1;
margin-left: 18rpx;
}
.active{
height: 155rpx;
}
}
.right{
width: 100%;
position: relative;
.send-people,.get-people{
display: flex;
align-items: center;
justify-content: space-between;
.send-title{
height: 100%;
}
.send-sub-title{
color: #151515;
font-size: 32rpx;
margin-bottom: 12rpx;
font-weight: bold;
}
.send-desc{
color: #888888;
font-size: 24rpx;
}
.address-enter{
font-weight: bold;
border-left: 2rpx solid #F4F4F4;
padding-left: 28rpx;
font-size: 24rpx;
}
}
.get-people{
margin-bottom: 40rpx;
}
.send-people{
margin-bottom: 40rpx;
}
.line{
width: 100%;
height: 2rpx;
background-color: #F4F4F4;
margin-bottom: 40rpx;
}
}
}
.price-detail{
border-bottom: 2rpx solid #F3F4F7;
border-top: 2rpx solid #F3F4F7;
padding: 40rpx 0;
.goods,.weight,.payType,.base-price{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28rpx;
.label,.value{
font-size: 24rpx;
}
.label{
color: #888;
}
}
.goods{
margin-top: 0rpx;
}
}
.all-account{
display: flex;
justify-content: flex-end;
align-items: center;
color: #888;
font-size: 24rpx;
margin-top: 41rpx;
text{
color: #E84134;
font-size: 28rpx;
font-weight: bold;
}
}
}
.feature{
display: flex;
margin-left: 81rpx;
margin-top: 48rpx;
.order-info,.order-share,.order-again{
display: flex;
flex-wrap: wrap;
justify-content: center;
.img-box{
width: 76rpx;
height: 76rpx;
background: #FFFFFF;
border-radius: 50%;
margin-bottom: 10rpx;
display: flex;
align-items: center;
justify-content: center;
image{
width:76rpx ;
height:76rpx ;
}
}
.title{
font-size: 24rpx;
}
margin-right: 80rpx;
}
}
}

207
project-wl-yonghuduan-uniapp-vue3/subPages/order-success/index.vue Normal file
View File

@@ -0,0 +1,207 @@
<template>
<!-- 头部导航栏 -->
<nav-bar title='下单成功' :handleToLink="handleToLink" src="../../static/order-success-goBack.png"></nav-bar>
<view class="order-success">
<!-- 头部 -->
<view class="header">
<view class="title">
<view class="success-img"></view>
<text>下单成功！</text>
</view>
<view class="send-time">
<text>快递员上门时间 </text>
<text v-if="orderInfo.estimatedStartTime">{{handleTimeToStrTime(orderInfo.estimatedStartTime)}}</text>
</view>
<view class="tips">根据国家法律规定，如没有实名认证，寄件需出示身份证</view>
</view>
<!-- 运单信息 -->
<view class="orderBox">
<view class="order-detail">
<view class="left">
<view class="send">寄</view>
<view class="line" :class="{active:twoLine>=2}"></view>
<view class="get">收</view>
</view>
<view class="right">
<view class="send-people">
<view class="send-title">
<view class="send-sub-title">
{{orderInfo.senderName}}
<text>{{orderInfo.senderPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
</view>
<view class="send-desc">{{orderInfo.senderAddress}}</view>
</view>
</view>
<view class="line"></view>
<view class="get-people">
<view class="send-title">
<view class="send-sub-title">
{{orderInfo.receiverName}}
<text>{{orderInfo.receiverPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
</view>
<view class="send-desc">{{orderInfo.receiverAddress}}</view>
</view>
</view>
</view>
</view>
<view class="price-detail">
<view class="goods">
<view class="label">物品</view>
<view class="value">{{orderInfo.goods}}</view>
</view>
<view class="weight">
<view class="label">计费重量</view>
<view class="value">{{orderInfo.goodsWeight}}kg</view>
</view>
<view class="payType">
<view class="label">付费方式</view>
<view class="value">{{orderInfo.paymentMethod}}</view>
</view>
<view class="base-price">
<view class="label">基础运费</view>
<view class="value">{{orderInfo.amount}}元</view>
</view>
</view>
<view class="all-account">
预估总价：
<text>¥{{orderInfo.amount}}</text>
</view>
</view>
<!-- 功能区域 -->
<view class="feature">
<view class="order-info" @click="handleToOrderInfo">
<view class="img-box">
<image src='../../static/btn-dingdanxiangqing.png'/>
</view>
<view class="title">订单详情</view>
</view>
<view class="order-share" @click="handleSecondQi">
<view class="img-box">
<image src='../../static/btn-fenxiang.png' />
</view>
<view class="title">分享</view>
</view>
<view class="order-again" @click="handleSecondQi">
<view class="img-box">
<image src='../../static/btn-zaijiyijian.png'/>
</view>
<view class="title">再寄一件</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed,
nextTick
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
doOrder,
getOrderDetail
} from '@/pages/api/order.js'
import {
handleTimeToStrTime
} from '@/utils/index.js'
const orderId = ref()
const twoLine = ref()
const orderInfo = reactive({
estimatedStartTime: '',
receiverName: '',
receiverAddress: '',
receiverPhone:'',
senderName: '',
senderAddress: '',
senderPhone:'',
goods: '',
goodsWeight: '',
paymentMethod:'',
amount:''
})
onMounted(()=>{
})
onLoad((options) => {
orderId.value = options.orderId
getOrderDetailFun()
})
const handleToLink = ()=>{
uni.switchTab({
url: '/pages/index/index'
});
}
//跳转到订单详情页面
const handleToOrderInfo = (event,id) => {
uni.navigateTo({
url: '/subPages/order-info/index?orderId=' + orderId.value
});
}
const handleSecondQi = ()=>{
uni.showToast({
title: "程序员哥哥正在实现中",
icon: "none",
duration: 1000,
});
}
//获取订单详情
const getOrderDetailFun = () => {
getOrderDetail(orderId.value).then((res) => {
const {
estimatedStartTime,
receiverName,
senderName,
receiverProvince,
receiverCity,
receiverCounty,
receiverAddress,
senderProvince,
senderCity,
senderCounty,
senderAddress,
orderCargoVOS,
paymentMethod,
amount,
senderPhone,
receiverPhone
} = res.data
orderInfo.estimatedStartTime = estimatedStartTime
orderInfo.receiverName = receiverName
orderInfo.senderName = senderName
orderInfo.receiverAddress = receiverProvince.name + receiverCity.name + receiverCounty.name +
receiverAddress
orderInfo.senderAddress = senderProvince.name + senderCity.name + senderCounty.name + senderAddress
orderInfo.goods = orderCargoVOS[0].name + (orderCargoVOS[0].goodsType ? ('(' + orderCargoVOS[0]
.goodsType.name + ')') : '')
orderInfo.goodsWeight = orderCargoVOS[0].totalWeight
orderInfo.paymentMethod = paymentMethod === 1?'寄付':'到付'
orderInfo.amount = amount
orderInfo.receiverPhone = receiverPhone
orderInfo.senderPhone = senderPhone
nextTick(()=>{
//用来获取详细地址有几行，从而适配寄和收之间竖线的高度
uni.createSelectorQuery().select('.send-desc').boundingClientRect(res => {
let height = res.height;
let line = height / 15
twoLine.value = line
}).exec();
})
})
}
</script>
<style src="./index.scss" lang="scss" scoped></style>

83
project-wl-yonghuduan-uniapp-vue3/subPages/realName-authentication/index.scss Normal file
View File

@@ -0,0 +1,83 @@
.realName-authentication{
.tips{
height: 60rpx;
width: 100%;
background: #FAF4DE;
color: #EA8A57;
font-size: 22rpx;
display: flex;
align-items: center;
}
.tips::before{
content: '';
display: block;
width:10rpx ;
height: 10rpx;
border-radius: 50%;
background: #E88649;
margin: 0 20rpx;
}
.content{
height: 136rpx;
background: #FFFFFF;
border-radius: 24rpx;
border-radius: 20rpx;
font-size: 24rpx;
color: #919191;
margin: 21rpx;
padding: 40rpx 36rpx;
}
.form{
background: #FFFFFF;
border-radius: 24rpx;
border-radius: 20rpx;
padding: 0 24rpx;
margin: 0 21rpx;
.name-item,.identify-item{
display: flex;
align-items: center;
justify-content: space-between;
height: 104rpx;
.label{
font-size: 30rpx;
font-weight: bold;
}
.input-box{
display: flex;
.uni-input{
text-align: right;
}
.uni-icon{
width: 48rpx;
height: 48rpx;
}
}
}
.name-item{
border-bottom: 2rpx solid #F4F4F4;
}
}
.footer{
position: fixed;
width: 100%;
height: 164rpx;
background: #FFFFFF;
bottom: 0;
.btn{
width: 400rpx;
height:88rpx;
background: #CCCCCC;
border-radius: 44rpx;
text-align: center;
line-height: 88rpx;
color: white;
font-size: 30rpx;
margin: 17rpx auto;
}
.btn.active{
background-color:#E84134 ;
color: white;
}
}
}

151
project-wl-yonghuduan-uniapp-vue3/subPages/realName-authentication/index.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<!-- 头部导航栏 -->
<nav-bar title='实名认证'></nav-bar>
<view class="realName-authentication">
<view class="tips">当前仅支持持有中国内地居民身份证的用户进行线上实名认证</view>
<view class="content">
根据《邮件快件实名收寄管理办法》等相关法律法规的要求，为了更好地向您提供邮件快件的收寄件服务，需您提供真实的身份信息。后续您本人寄件时仅需出示有效身份证件供查阅确认即可，无需再次采集。
</view>
<view class="form">
<view class="name-item">
<view class="label">姓名</view>
<view class="input-box">
<input @input="clearInputName" :value="nameInputValue" placeholder-class="phcolor" class="uni-input" :placeholder="namePlaceholder" />
<image class="uni-icon" src='../../static/shanchu.png' v-if="showClearIconName"
@click="clearIconName" />
</view>
</view>
<view class="identify-item">
<view class="label">身份证号</view>
<view class="input-box">
<input @input="clearInput" :value="inputClearValue" placeholder-class="phcolor" class="uni-input" :placeholder="idcardPlaceholder" />
<image class="uni-icon" src='../../static/shanchu.png' v-if="showClearIcon" @click="clearIcon" />
</view>
</view>
</view>
<view class="footer">
<view class="btn" :class="isCanAuth?'active':''" @click="doAuth">开始认证</view>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue';
import {
validateIdentityCard
} from '@/utils/validate.js'
import {
getRealNameStatusApi
} from '@/pages/api/my.js'
let namePlaceholder = ref('请填写')
let idcardPlaceholder = ref('请填写')
let showClearIconName = ref(false)
let showClearIcon = ref(false)
let nameInputValue = ref('')
let inputClearValue = ref('')
//是否可以开始认证
const isCanAuth = computed(() => {
return validateIdentityCard(inputClearValue.value) && nameInputValue.value
})
//聚焦时清空占位字
const clearNamePlaceholder = ()=>{
namePlaceholder.value = ''
if(!nameInputValue.value){
idcardPlaceholder.value ='请填写'
}
}
const clearIdcardPlaceholder = ()=>{
idcardPlaceholder.value = ''
if(!inputClearValue.value){
namePlaceholder.value ='请填写'
}
}
const clearInput = (event) => {
inputClearValue.value = event.detail.value;
if (event.detail.value.length > 0) {
showClearIcon.value = true;
} else {
showClearIcon.value = false;
idcardPlaceholder.value = '请填写'
}
}
const clearInputName = (event) => {
nameInputValue.value = event.detail.value;
if (event.detail.value.length > 0) {
showClearIconName.value = true;
} else {
showClearIconName.value = false;
namePlaceholder.value = '请填写'
}
}
const clearIconName = () => {
nameInputValue.value = '';
showClearIconName.value = false;
namePlaceholder.value = '请填写'
if(!inputClearValue.value){
idcardPlaceholder.value = '请填写'
}
}
const clearIcon = () => {
inputClearValue.value = '';
showClearIcon.value = false;
idcardPlaceholder.value = '请填写'
if(!nameInputValue.value){
namePlaceholder.value = '请填写'
}
}
//开始身份认证
const doAuth = () => {
if (!isCanAuth.value) {
return uni.showToast({
title: '信息填写不完整',
icon: 'none',
duration: 1000
})
}
getRealNameStatusApi({
flag: 1,
idCard: inputClearValue.value,
name: nameInputValue.value
}).then((res) => {
if (res.code !== 200) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
} else {
uni.showToast({
title: '认证成功',
icon: 'none',
duration: 1000,
})
setTimeout(() => {
uni.switchTab({
url: '/pages/my/index'
})
}, 2000)
}
}).catch(()=>{
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
});
})
}
</script>
<style src="./index.scss" lang="scss" scoped></style>