pvtfxms7o
/
yudao
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'qjh' of https://bdgit.educoder.net/pvtfxms7o/yudao

Browse Source
qjh
秦佳浩 2 months ago
parent 75009e0fab 2333852385
commit 676eeaf5ff
4 changed files with 505 additions and 369 deletions
Show Stats Download Patch File Download Diff File

81
front-end/mall4uni/src/pages/editAddress/editAddress.scss
Unescape View File

@ -1,10 +1,22 @@
/*
.container 类用于设置页面整体容器的背景颜色为白色（#fff），可能作为页面内容的基础背景样式。
*/
.container { .container {
background: #fff; background: #fff;
} }
/*
.input-box 类用于设置输入框相关区域的样式，设置了底部外边距为 50rpx，背景颜色同样为白色（#fff），并且添加了左右内边距为 20rpx，用于调整内部元素的布局空间。
其内部还有一个.section 类用于更细致地设置每一个输入项相关部分的样式。
*/
.input-box { .input-box {
margin-bottom: 50rpx; margin-bottom: 50rpx;
background: #fff; background: #fff;
padding: 0 20rpx; padding: 0 20rpx;
/*
.section 类用于输入项部分的样式设置，将内部元素设置为弹性盒子布局（display: flex），使其子元素能方便地实现水平对齐（align-items: center），宽度占满父元素（100%），设置了字体大小、上下内边距、行高以及盒子模型属性（box-sizing），并且底部添加了一条 2rpx 宽的灰色边框（#e5e5e5），用于视觉上区分不同的输入项。
内部还有针对不同类型输入元素（text、input、picker、.pca、.arrow 等）的具体样式设置。
*/
.section { .section {
display: flex; display: flex;
align-items: center; align-items: center;
@ -15,26 +27,42 @@
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 2rpx solid #e5e5e5; border-bottom: 2rpx solid #e5e5e5;
/*
text 类用于输入项的文本标签部分的样式设置，设置宽度占父元素的 20%，文字颜色为深灰色（#333），用于显示如“姓名”“手机号”等输入项的提示文字。
*/
text { text {
width: 20%; width: 20%;
color: #333; color: #333;
} }
/*
input 类用于普通文本输入框的样式设置，设置宽度占父元素的 70%，添加了左右内边距为 20rpx，文字颜色为深灰色（#333），用于用户输入具体的文本内容，如输入地址、电话号码等信息。
*/
input { input {
width: 70%; width: 70%;
padding: 0 20rpx; padding: 0 20rpx;
color: #333; color: #333;
} }
/*
picker 类用于选择器组件（如日期选择器、下拉选择器等）的样式设置，设置宽度占父元素的 70%，添加了左右内边距为 30rpx，用于控制选择器在页面中的显示宽度和内部元素的布局空间。
*/
picker { picker {
width: 70%; width: 70%;
padding: 0 30rpx; padding: 0 30rpx;
} }
/*
.pca 类同样用于某种选择器相关元素的样式设置（从类名推测可能和地址选择等相关，具体要结合实际应用场景），设置宽度占父元素的 70%，添加了左右内边距为 20rpx，用于调整其在页面中的布局空间。
*/
.pca { .pca {
width: 70%; width: 70%;
padding: 0 20rpx; padding: 0 20rpx;
} }
/*
.arrow 类用于输入项旁边的箭头图标相关的样式设置，设置了宽度和高度均为 28rpx，内部的图片元素（image）设置为宽度和高度都占满父元素（100%），并且垂直对齐方式为顶部对齐（vertical-align: top），这个箭头图标可能用于提示用户可点击展开选择器等操作。
*/
.arrow { .arrow {
width: 28rpx; width: 28rpx;
height: 28rpx; height: 28rpx;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -43,14 +71,23 @@
} }
} }
} }
/*
.btn-box 类用于按钮区域的整体样式设置，设置了上下内边距（5px 和 10px），宽度占满父元素（100%），文本对齐方式为居中对齐，并且通过 margin: auto 使其在父元素中水平居中。
内部还有针对不同按钮样式的进一步设置，如.clear.btn、.keep 等类。
*/
.btn-box { .btn-box {
padding: 5px 10px; padding: 5px 10px;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin: auto; margin: auto;
text { text {
font-size: 30rpx; font-size: 30rpx;
} }
/*
.clear.btn 类用于“清除”之类功能的按钮样式设置，设置了宽度占父元素的 60%，高度为 80rpx，通过 line-height 使内部文本垂直居中，在父元素中水平居中（margin: auto），设置了边框样式（颜色、粗细、圆角等）、阴影效果以及文字颜色（#eb2444）和半透明的背景颜色（#f8f0f1b6），用于在视觉上突出按钮并与其他按钮区分开，同时显示出其特定的功能属性（如清除操作相关按钮）。
*/
.clear.btn { .clear.btn {
width: 60%; width: 60%;
height: 80rpx; height: 80rpx;
@ -64,11 +101,18 @@
color: #eb2444; color: #eb2444;
background-color: #f8f0f1b6; background-color: #f8f0f1b6;
} }
/*
.keep 类用于特定功能（可能是保存、确认等操作）的按钮样式设置，主要设置了文字颜色为白色（#fff），背景颜色为红色（#eb2444），用于在视觉上突出该按钮的重要性和操作功能，后续应该还有对应的.keep.btn 类结合使用来进一步完善按钮的具体样式细节（如尺寸、边框等）。
*/
.keep { .keep {
color: #fff; color: #fff;
background-color: #eb2444; background-color: #eb2444;
} }
} }
/*
.keep.btn 类进一步细化了.keep 类对应的按钮的样式，设置了宽度占父元素的 60%，高度为 80rpx，通过 line-height 使内部文本垂直居中，在父元素中水平居中（margin: auto），设置了边框样式（颜色、粗细、圆角等）以及阴影效果，用于完整呈现按钮的外观样式，使其在页面中能有一个统一且符合设计要求的显示效果，方便用户识别和操作。
*/
.keep.btn { .keep.btn {
width: 60%; width: 60%;
height: 80rpx; height: 80rpx;
@ -79,12 +123,20 @@
border-radius: 50rpx; border-radius: 50rpx;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3);
} }
/*
.infoText 类用于展示提示信息文本的样式设置，设置了顶部外边距为 20rpx，文本对齐方式为居中对齐，宽度占满父元素（100%），并且设置了水平方向上的对齐方式为居中（justify-content: center，虽然这里对文本元素使用 flex 相关属性有点不太常规，但可能在特定的 HTML 结构中有其应用场景），用于在页面中合适的位置展示如操作提示、说明文字等信息。
*/
.infoText { .infoText {
margin-top: 20rpx; margin-top: 20rpx;
text-align: center; text-align: center;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
/*
picker-view 类用于选择器视图组件（如弹出式的日期选择器、多级联动选择器等的整体视图样式设置），设置了背景颜色为白色（white），去除了内边距（padding: 0），宽度占满父元素（100%），高度为 380rpx，设置为固定定位（position: fixed）使其固定在页面底部（bottom: 0），并且内部的文本元素（text）设置了相关的样式，如文字颜色为灰色（#999）、显示方式（inline-flex）、位置（通过固定定位设置在特定位置）、高度、文本对齐方式、行高以及字体相关属性等，用于控制选择器内部文本的显示效果。
*/
picker-view { picker-view {
background-color: white; background-color: white;
padding: 0; padding: 0;
@ -92,6 +144,7 @@ picker-view {
height: 380rpx; height: 380rpx;
bottom: 0; bottom: 0;
position: fixed; position: fixed;
text { text {
color: #999; color: #999;
display: inline-flex; display: inline-flex;
@ -104,6 +157,10 @@ picker-view {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
} }
/*
picker-view-column 类用于选择器视图组件中的每一列的样式设置，内部的 view 元素设置了垂直对齐方式为中间对齐（vertical-align: middle），字体大小、行高以及高度占满父元素（100%），通过弹性盒子布局使其内部元素能在垂直和水平方向上方便地居中对齐（display: flex，align-items: center，justify-content: center），用于控制选择器每一列中选项的显示样式和布局方式。
*/
picker-view-column { picker-view-column {
view { view {
vertical-align: middle; vertical-align: middle;
@ -115,6 +172,10 @@ picker-view-column {
justify-content: center; justify-content: center;
} }
} }
/*
.animation-element-wrapper 类用于创建一个覆盖整个页面的半透明背景元素的样式设置，将其设置为弹性盒子布局（display: flex），通过固定定位（position: fixed）使其覆盖整个页面（left: 0，top: 0，width: 100%，height: 100%），设置了背景颜色为半透明黑色（rgba(0, 0, 0, 0.6)），层级（z-index）设置为较高的 999，一般用于作为弹出层、动画效果等的背景遮罩，增强视觉效果和用户交互体验。
*/
.animation-element-wrapper { .animation-element-wrapper {
display: flex; display: flex;
position: fixed; position: fixed;
@ -125,6 +186,10 @@ picker-view-column {
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
z-index: 999; z-index: 999;
} }
/*
.animation-element 类用于动画元素（可能是弹出的对话框、菜单等有动画效果的组件）的样式设置，同样设置为固定定位，宽度占满父元素（100%），高度为 470rpx，使其固定在页面底部（bottom: 0），背景颜色为白色（#fff），用于定义这个动画元素的基本外观和在页面中的位置布局，后续可能通过 JavaScript 等添加动画效果来实现一些动态展示的功能。
*/
.animation-element { .animation-element {
display: flex; display: flex;
position: fixed; position: fixed;
@ -133,21 +198,37 @@ picker-view-column {
bottom: 0; bottom: 0;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
} }
/*
.animation-button 类用于动画元素中的按钮的通用样式设置，设置了顶部外边距为 20rpx，宽度为 290rpx，高度为 100rpx，并且设置了子元素在垂直方向上的对齐方式为居中对齐（align-items: center），用于为按钮提供一个基本的布局样式框架，后续通过更具体的类（如.left-bt、.right-bt 等）来进一步调整按钮在水平方向上的位置等细节样式。
*/
.animation-button { .animation-button {
top: 20rpx; top: 20rpx;
width: 290rpx; width: 290rpx;
height: 100rpx; height: 100rpx;
align-items: center; align-items: center;
} }
/*
.left-bt 类用于将按钮定位在左边的样式设置，通过设置 left 属性为 30rpx，使其相对于父元素（可能是.animation-element 之类的包含它的元素）向左偏移一定距离，一般用于多个按钮排列时，将某个按钮放置在左边位置，结合其他按钮的定位样式实现合适的布局效果。
*/
.left-bt { .left-bt {
left: 30rpx; left: 30rpx;
} }
/*
.right-bt 类用于将按钮定位在右边的样式设置，通过设置 right 属性为 20rpx 以及 top 属性为 20rpx，使其相对于父元素定位在右上角位置（通过绝对定位实现，position: absolute），并且设置了宽度为 80rpx，并且添加了!important 声明来提高该样式的优先级（可能存在样式冲突时确保该宽度设置生效），用于在页面布局中精确控制按钮的位置和尺寸，实现特定的交互界面设计要求。
*/
.right-bt { .right-bt {
right: 20rpx; right: 20rpx;
top: 20rpx; top: 20rpx;
position: absolute; position: absolute;
width: 80rpx !important; width: 80rpx !important;
} }
/*
.line 类用于绘制一条水平分割线的样式设置，设置为块级元素（display: block），通过固定定位使其固定在页面中的特定位置（这里是距离顶部 89rpx 的位置），设置了高度为 2rpx，宽度占满父元素（100%），背景颜色为浅灰色（#eee），一般用于在页面中视觉上区分不同的区域或者内容部分。
*/
.line { .line {
display: block; display: block;
position: fixed; position: fixed;

668
front-end/mall4uni/src/pages/editAddress/editAddress.vue
Unescape View File

@ -1,82 +1,77 @@
<template> <template>
<!-- 页面的最外层容器，用于包裹整个页面内容 -->
<view class="container"> <view class="container">
<!--input列表 --> <!-- input列表区域，用于展示多个输入项相关的视图 -->
<view class="input-box"> <view class="input-box">
<!-- 每个输入项的整体视图容器，这里用于展示“收货人”相关的输入项 -->
<view class="section"> <view class="section">
<!-- 输入项的文本标签，显示“收 货 人”字样，用于提示用户此处应输入的内容 -->
<text>收 货 人</text> <text>收 货 人</text>
<input <!-- 文本输入框，用于用户输入收货人姓名，设置了占位符提示（placeholder）为“姓名”，输入类型为文本（type="text"），最大输入长度为15个字符（maxlength="15"），通过 :value 绑定了名为 receiver 的响应式变量来显示和更新输入框中的值，并且绑定了 @input 事件（onReceiverInput），当用户输入内容时会触发该事件进行相应处理 -->
placeholder="姓名" <input placeholder="姓名"
type="text" type="text"
maxlength="15" maxlength="15"
:value="receiver" :value="receiver"
@input="onReceiverInput" @input="onReceiverInput">
>
</view> </view>
<!-- 用于展示“手机号码”相关的输入项的视图容器 -->
<view class="section"> <view class="section">
<!-- 输入项的文本标签，显示“手机号码”字样，提示用户此处应输入手机号码 -->
<text>手机号码</text> <text>手机号码</text>
<input <!-- 文本输入框，用于用户输入手机号码，设置了占位符提示为“11位手机号码”，输入类型为数字（type="number"），最大输入长度为11位（对应手机号码的长度要求），通过 :value 绑定了名为 mobile 的响应式变量来显示和更新输入框中的值，同时绑定了 @input 事件（onMobileInput），用于在输入时进行相关逻辑处理 -->
placeholder="11位手机号码" <input placeholder="11位手机号码"
type="number" type="number"
maxlength="11" maxlength="11"
:value="mobile" :value="mobile"
@input="onMobileInput" @input="onMobileInput">
>
</view> </view>
<view <!-- 用于展示“所在地区”相关的输入项及操作的视图容器，绑定了点击事件 translate，点击可触发地区选择相关的操作（如弹出地区选择器等） -->
class="section" <view class="section"
@tap="translate" @tap="translate">
> <!-- 输入项的文本标签，显示“所在地区”字样，提示用户此处应选择所在地区信息 -->
<text>所在地区</text> <text>所在地区</text>
<!-- 用于展示已选择的地区信息（省份、城市、区县）的视图元素，通过双括号插值表达式绑定对应的响应式变量（province、city、area）来显示具体的地区名称 -->
<view class="pca"> <view class="pca">
{{ province }} {{ city }} {{ area }} {{ province }} {{ city }} {{ area }}
</view> </view>
<view <!-- 这是一个用于实现地区选择器弹出效果的外层包装元素，通过绑定 :animation 属性（值为 animation 响应式变量）来应用相关动画效果，通过 :style 动态控制其可见性（根据 show 响应式变量的值显示或隐藏），并且绑定了 @tap.stop 事件（hiddenFloatView），点击该区域（除了内部特定元素外）可触发隐藏地区选择器浮层的操作，阻止事件冒泡 -->
class="animation-element-wrapper" <view class="animation-element-wrapper"
:animation="animation" :animation="animation"
:style="'visibility:' + (show ? 'visible':'hidden')" :style="'visibility:' + (show? 'visible':'hidden')"
@tap.stop="hiddenFloatView" @tap.stop="hiddenFloatView">
> <!-- 地区选择器浮层的主体元素，设置了 @tap.stop 事件（nono，可能用于阻止一些默认的点击行为，具体功能要结合代码逻辑看），内部包含确定按钮、分割线以及 picker-view 组件用于实际的地区选择操作 -->
<view <view class="animation-element"
class="animation-element" @tap.stop="nono">
@tap.stop="nono" <!-- 右侧的“确定”按钮，设置了类名为 right-bt，绑定了 @tap.stop 事件（hiddenFloatView），点击可触发隐藏地区选择器浮层的操作，显示“确定”字样，用于用户完成地区选择后确认操作 -->
> <text class="right-bt"
<text @tap.stop="hiddenFloatView">
class="right-bt"
@tap.stop="hiddenFloatView"
>
确定 确定
</text> </text>
<!-- 水平分割线元素，用于在视觉上区分不同区域（可能是按钮与选择器部分的区分等） -->
<view class="line" /> <view class="line" />
<picker-view <!-- picker-view 组件用于实现多级联动的地区选择功能，设置了指示器的样式（indicator-style），通过 :value 绑定 valArr 响应式变量来记录当前选择的值，绑定了 @change 事件（bindChange），当选择的值发生变化时会触发该事件进行相应的数据更新等操作，同时绑定了 @tap.stop 事件（nono）阻止一些默认点击行为 -->
indicator-style="height: 50rpx;" <picker-view indicator-style="height: 50rpx;"
:value="valArr" :value="valArr"
@change="bindChange" @change="bindChange"
@tap.stop="nono" @tap.stop="nono">
> <!-- 省选择列的视图容器，内部通过 v-for 指令循环遍历 provArray 数组（该数组存储省份相关数据），每个元素对应一个省份选项，展示省份名称 -->
<!--省-->
<picker-view-column> <picker-view-column>
<view <view v-for="(item, indexs) in provArray"
v-for="(item, indexs) in provArray" :key="indexs">
:key="indexs"
>
{{ item.areaName }} {{ item.areaName }}
</view> </view>
</picker-view-column> </picker-view-column>
<!--地级市--> <!-- 地级市选择列的视图容器，类似省选择列，通过 v-for 指令循环遍历 cityArray 数组（存储地级市相关数据），展示地级市名称 -->
<picker-view-column> <picker-view-column>
<view <view v-for="(item, indexss) in cityArray"
v-for="(item, indexss) in cityArray" :key="indexss">
:key="indexss"
>
{{ item.areaName }} {{ item.areaName }}
</view> </view>
</picker-view-column> </picker-view-column>
<!--区县--> <!-- 区县选择列的视图容器，通过 v-for 指令循环遍历 areaArray 数组（存储区县相关数据），展示区县名称 -->
<picker-view-column> <picker-view-column>
<view <view v-for="(item, indexsss) in areaArray"
v-for="(item, indexsss) in areaArray" :key="indexsss">
:key="indexsss"
>
{{ item.areaName }} {{ item.areaName }}
</view> </view>
</picker-view-column> </picker-view-column>
@ -84,350 +79,343 @@
</view> </view>
</view> </view>
<!-- 箭头图标元素，用于提示用户可点击展开地区选择器等操作，内部通过指定的路径引入图片资源（一般是一个向右的箭头图标） -->
<view class="arrow"> <view class="arrow">
<image src="@/static/images/icon/more.png" /> <image src="@/static/images/icon/more.png" />
</view> </view>
</view> </view>
<!-- 用于展示“详细地址”相关的输入项的视图容器 -->
<view class="section"> <view class="section">
<!-- 输入项的文本标签，显示“详细地址”字样，提示用户此处应输入详细的收货地址信息 -->
<text>详细地址</text> <text>详细地址</text>
<input <!-- 文本输入框，用于用户输入详细地址，设置了占位符提示为“如楼号/单元/门牌号”，通过 :value 绑定了名为 addr 的响应式变量来显示和更新输入框中的值，并且绑定了 @input 事件（onAddrInput），用于在输入时进行相关逻辑处理 -->
placeholder="如楼号/单元/门牌号" <input placeholder="如楼号/单元/门牌号"
type="text" type="text"
:value="addr" :value="addr"
@input="onAddrInput" @input="onAddrInput">
>
</view> </view>
</view> </view>
<!-- end input列表 --> <!-- input列表区域结束 -->
<!-- 功能按钮 --> <!-- 功能按钮区域，包含保存地址、删除地址等功能按钮 -->
<view class="btn-box"> <view class="btn-box">
<view <!-- “保存收货地址”按钮，设置了类名为 keep btn，绑定了点击事件 onSaveAddr，点击可触发保存当前输入的收货地址信息的操作 -->
class="keep btn" <view class="keep btn"
@tap="onSaveAddr" @tap="onSaveAddr">
>
<text>保存收货地址</text> <text>保存收货地址</text>
</view> </view>
<view <!-- 条件渲染的“删除收货地址”按钮，只有当 addrId 不等于0时才显示（可能表示当前是在编辑已有地址的场景下才显示删除按钮），设置了类名为 clear btn，绑定了点击事件 onDeleteAddr，点击可触发删除当前收货地址的操作 -->
v-if="addrId!=0" <view v-if="addrId!=0"
class="clear btn" class="clear btn"
@tap="onDeleteAddr" @tap="onDeleteAddr">
>
<text>删除收货地址</text> <text>删除收货地址</text>
</view> </view>
</view> </view>
<!-- end 功能按钮 --> <!-- 功能按钮区域结束 -->
</view> </view>
</template> </template>
<script setup> <script setup>
const addrId = ref(0) // 定义响应式变量
const city = ref('') const addrId = ref(0)
const area = ref('') const city = ref('')
const provinceId = ref(0) const area = ref('')
const cityId = ref(0) const provinceId = ref(0)
const areaId = ref(0) const cityId = ref(0)
const receiver = ref('') const areaId = ref(0)
const mobile = ref('') const receiver = ref('')
const addr = ref('') const mobile = ref('')
const province = ref('') const addr = ref('')
onLoad((options) => { const province = ref('')
if (options.addrId) {
uni.showLoading() // 页面加载时触发
onLoad((options) => {
if (options.addrId) { // 如果传入了地址ID，表示是编辑已有地址
uni.showLoading() // 显示加载中提示
http.request({
url: '/p/address/addrInfo/' + options.addrId,
method: 'GET'
})
.then(({ data }) => {
// 设置已有的地址信息到响应式变量
province.value = data.province
city.value = data.city
area.value = data.area
provinceId.value = data.provinceId
cityId.value = data.cityId
areaId.value = data.areaId
receiver.value = data.receiver
mobile.value = data.mobile
addr.value = data.addr
addrId.value = options.addrId
initCityData(data.provinceId, data.cityId, data.areaId) // 初始化地区数据
uni.hideLoading() // 隐藏加载中提示
})
} else {
initCityData(provinceId.value, cityId.value, areaId.value) // 新建地址时初始化地区数据
}
})
// 定义地区数据相关变量
const provArray = ref([])
const valArr = ref([0, 0, 0])
// 初始化地区数据
const initCityData = (provinceId, cityId, areaId) => {
uni.showLoading()
http.request({ http.request({
url: '/p/address/addrInfo/' + options.addrId, url: '/p/area/listByPid',
method: 'GET' method: 'GET',
data: {
pid: 0 // 获取所有省份
}
}) })
.then(({ data }) => { .then(({ data }) => {
province.value = data.province provArray.value = data // 设置省份数据
city.value = data.city if (provinceId) {
area.value = data.area for (const index in data) {
provinceId.value = data.provinceId if (data[index].areaId === provinceId) {
cityId.value = data.cityId valArr.value = [parseInt(index), valArr.value[1], valArr.value[2]] // 设置默认选中省份索引
areaId.value = data.areaId }
receiver.value = data.receiver }
mobile.value = data.mobile }
addr.value = data.addr getCityArray(provinceId || data[0].areaId, cityId, areaId) // 根据省份ID获取城市数据
addrId.value = options.addrId
initCityData(data.provinceId, data.cityId, data.areaId)
uni.hideLoading() uni.hideLoading()
}) })
} else {
initCityData(provinceId.value, cityId.value, areaId.value)
} }
})
const provArray = ref([]) // 地区选择器索引
const valArr = ref([0, 0, 0]) let indexArr = [18, 0, 0]
const initCityData = (provinceId, cityId, areaId) => { const areaArray = ref([])
uni.showLoading() const cityArray = ref([])
http.request({
url: '/p/area/listByPid', // 处理地区选择器滚动变化
method: 'GET', const bindChange = (e) => {
data: { const val = e.detail.value // 获取当前选中的索引
pid: 0 if (indexArr[0] != val[0]) { // 如果省份发生了变化
val[1] = 0
val[2] = 0 // 将市和区重置为第一个选项
getCityArray(provArray.value[val[0]].areaId) // 更新城市数据
} else if (indexArr[1] != val[1]) { // 如果城市发生了变化
val[2] = 0 // 将区重置为第一个选项
getAreaArray(cityArray.value[val[1]].areaId) // 更新区数据
} }
}) indexArr = val
.then(({ data }) => { valArr.value = [val[0], val[1], val[2]]
provArray.value = data // 更新显示的省市区名称和ID
if (provinceId) { province.value = provArray.value[valArr.value[0]].areaName
for (const index in data) { city.value = cityArray.value[valArr.value[1]].areaName
if (data[index].areaId === provinceId) { area.value = areaArray.value[valArr.value[2]].areaName
valArr.value = [parseInt(index), valArr.value[1], valArr.value[2]] provinceId.value = provArray.value[valArr.value[0]].areaId
} cityId.value = cityArray.value[valArr.value[1]].areaId
} areaId.value = areaArray.value[valArr.value[2]].areaId
} }
getCityArray(provinceId || data[0].areaId, cityId, areaId)
uni.hideLoading() // 显示/隐藏地区选择器
}) let t = 0
} let moveY = 200
const show = ref('')
let indexArr = [18, 0, 0] const translate = () => {
const areaArray = ref([]) if (t == 0) {
const cityArray = ref([]) moveY = 0
/** show.value = true
* 滑动事件 t = 1
*/ } else {
const bindChange = (e) => { moveY = 200
// 判断滑动的是第几个column show.value = false
const val = e.detail.value t = 0
// 若省份column做了滑动则定位到地级市和区县第一位
if (indexArr[0] != val[0]) {
val[1] = 0
val[2] = 0 // 更新数据
// 获取地级市数据
getCityArray(provArray.value[val[0]].areaId)
} else {
// 若省份column未做滑动，地级市做了滑动则定位区县第一位
if (indexArr[1] != val[1]) {
val[2] = 0 // 更新数据
getAreaArray(cityArray.value[val[1]].areaId) // 获取区县数据
} }
animationEvents(moveY, show.value)
} }
indexArr = val
valArr.value = [val[0], val[1], val[2]]
province.value = provArray.value[valArr.value[0]].areaName
city.value = cityArray.value[valArr.value[1]].areaName
area.value = areaArray.value[valArr.value[2]].areaName
provinceId.value = provArray.value[valArr.value[0]].areaId
cityId.value = cityArray.value[valArr.value[1]].areaId
areaId.value = areaArray.value[valArr.value[2]].areaId
}
let t = 0 // 隐藏地区选择器
let moveY = 200 const hiddenFloatView = () => {
const show = ref('')
/**
* 移动按钮点击事件
*/
const translate = () => {
if (t == 0) {
moveY = 0
show.value = true
t = 1
} else {
moveY = 200 moveY = 200
show.value = false show.value = false
t = 0 t = 0
animationEvents(moveY, show.value)
} }
animationEvents(moveY, show.value)
}
/** const animation = ref('')
* 隐藏弹窗浮层
*/
const hiddenFloatView = () => {
moveY = 200
show.value = false
t = 0
animationEvents(moveY, show.value)
}
const animation = ref('') // 动画事件
/** const animationEvents = (moveY, showParam) => {
* 动画事件 animation.value = uni.createAnimation({
*/ transformOrigin: '50% 50%',
const animationEvents = (moveY, showParam) => { duration: 400,
animation.value = uni.createAnimation({ timingFunction: 'ease',
transformOrigin: '50% 50%', delay: 0
duration: 400, })
timingFunction: 'ease', animation.value.translateY(moveY + 'vh').step()
delay: 0 animation.value = animation.value.export()
}) show.value = showParam
animation.value.translateY(moveY + 'vh').step() }
animation.value = animation.value.export()
show.value = showParam
}
/** // 根据省份ID获取城市数据
* 根据省份ID获取 城市数据 const getCityArray = (provinceId, cityId, areaId) => {
*/ http.request({
const getCityArray = (provinceId, cityId, areaId) => { url: '/p/area/listByPid',
http.request({ method: 'GET',
url: '/p/area/listByPid', data: {
method: 'GET', pid: provinceId // 父级ID，即省份ID
data: {
pid: provinceId
}
})
.then(({ data }) => {
cityArray.value = data
if (cityId) {
for (const index in data) {
if (data[index].areaId == cityId) {
valArr.value = [valArr.value[0], parseInt(index), valArr.value[2]]
}
}
} }
getAreaArray(cityId || data[0].areaId, areaId)
uni.hideLoading()
}) })
} .then(({ data }) => {
cityArray.value = data // 设置城市数据
if (cityId) {
for (const index in data) {
if (data[index].areaId == cityId) {
valArr.value = [valArr.value[0], parseInt(index), valArr.value[2]] // 设置默认选中城市索引
}
}
}
getAreaArray(cityId || data[0].areaId, areaId) // 根据城市ID获取区数据
uni.hideLoading()
})
}
/** // 根据城市ID获取区数据
* 根据城市ID获取 区数据 const getAreaArray = (cityId, areaId) => {
*/ http.request({
const getAreaArray = (cityId, areaId) => { url: '/p/area/listByPid',
http.request({ method: 'GET',
url: '/p/area/listByPid', data: {
method: 'GET', pid: cityId // 父级ID，即城市ID
data: { }
pid: cityId }).then(({ data }) => {
} areaArray.value = data // 设置区数据
}).then(({ data }) => { if (areaId) {
areaArray.value = data for (const _index in data) {
if (areaId) { if (data[_index].areaId == areaId) {
for (const _index in data) { valArr.value = [valArr.value[0], valArr.value[1], parseInt(_index)] // 设置默认选中区索引
if (data[_index].areaId == areaId) { }
valArr.value = [valArr.value[0], valArr.value[1], parseInt(_index)]
} }
indexArr = valArr.value
} else {
// 更新显示的省市区名称和ID
province.value = provArray.value[valArr.value[0]].areaName
city.value = cityArray.value[valArr.value[1]].areaName
area.value = areaArray.value[valArr.value[2]].areaName
provinceId.value = provArray.value[valArr.value[0]].areaId
cityId.value = cityArray.value[valArr.value[1]].areaId
areaId.value = areaArray.value[valArr.value[2]].areaId
} }
indexArr = valArr.value uni.hideLoading()
} else {
province.value = provArray.value[valArr.value[0]].areaName
city.value = cityArray.value[valArr.value[1]].areaName
area.value = areaArray.value[valArr.value[2]].areaName
provinceId.value = provArray.value[valArr.value[0]].areaId
cityId.value = cityArray.value[valArr.value[1]].areaId
areaId.value = areaArray.value[valArr.value[2]].areaId
}
uni.hideLoading()
})
}
/**
* 保存地址
*/
const onSaveAddr = () => {
const receiverParam = receiver.value
const mobileParam = mobile.value
const addrParam = addr.value
if (!receiverParam.trim()) {
receiver.value = ''
uni.showToast({
title: '请输入收货人姓名',
icon: 'none'
}) })
return
} }
if (!mobileParam) { // 保存地址
uni.showToast({ const onSaveAddr = () => {
title: '请输入手机号码', const receiverParam = receiver.value
icon: 'none' const mobileParam = mobile.value
}) const addrParam = addr.value
return
}
if (mobileParam.length != 11) { // 表单验证
uni.showToast({ if (!receiverParam.trim()) {
title: '请输入正确的手机号码', receiver.value = ''
icon: 'none' uni.showToast({
}) title: '请输入收货人姓名',
return icon: 'none'
} })
return
}
if (!addrParam.trim()) { if (!mobileParam) {
receiver.value = '' uni.showToast({
uni.showToast({ title: '请输入手机号码',
title: '请输入详细地址', icon: 'none'
icon: 'none' })
}) return
return }
}
if (mobileParam.length != 11) {
uni.showToast({
title: '请输入正确的手机号码',
icon: 'none'
})
return
}
uni.showLoading() if (!addrParam.trim()) {
let url = '/p/address/addAddr' receiver.value = ''
let method = 'POST' uni.showToast({
title: '请输入详细地址',
icon: 'none'
})
return
}
if (addrId.value != 0) { uni.showLoading()
url = '/p/address/updateAddr' let url = '/p/address/addAddr'
method = 'PUT' let method = 'POST'
} // 添加或修改地址
http.request({ if (addrId.value != 0) { // 如果存在地址ID，则更新地址
url, url = '/p/address/updateAddr'
method, method = 'PUT'
data: {
receiver: receiver.value,
mobile: mobile.value,
addr: addr.value,
province: province.value,
provinceId: provinceId.value,
city: city.value,
cityId: cityId.value,
areaId: areaId.value,
area: area.value,
userType: 0,
addrId: addrId.value
} }
})
.then(() => { http.request({
uni.hideLoading() url,
uni.navigateBack({ method,
delta: 1 data: {
}) receiver: receiver.value,
mobile: mobile.value,
addr: addr.value,
province: province.value,
provinceId: provinceId.value,
city: city.value,
cityId: cityId.value,
areaId: areaId.value,
area: area.value,
userType: 0,
addrId: addrId.value
}
}) })
} .then(() => {
const onReceiverInput = (e) => { uni.hideLoading()
receiver.value = e.detail.value uni.navigateBack({
} delta: 1 // 返回上一页
const onMobileInput = (e) => { })
mobile.value = e.detail.value })
} }
const onAddrInput = (e) => { // 输入事件处理函数
addr.value = e.detail.value const onReceiverInput = (e) => {
} receiver.value = e.detail.value
}
const onMobileInput = (e) => {
mobile.value = e.detail.value
}
const onAddrInput = (e) => {
addr.value = e.detail.value
}
/** // 删除地址
* 删除配送地址 const onDeleteAddr = () => {
*/ uni.showModal({
const onDeleteAddr = () => { title: '',
uni.showModal({ content: '确定要删除此收货地址吗？',
title: '', confirmColor: '#eb2444',
content: '确定要删除此收货地址吗？',
confirmColor: '#eb2444',
success (res) { success(res) {
if (res.confirm) { if (res.confirm) {
const addrIdParam = addrId.value const addrIdParam = addrId.value
uni.showLoading() uni.showLoading()
http.request({ http.request({
url: '/p/address/deleteAddr/' + addrIdParam, url: '/p/address/deleteAddr/' + addrIdParam,
method: 'DELETE' method: 'DELETE'
})
.then(() => {
uni.hideLoading()
uni.navigateBack({
delta: 1
})
}) })
.then(() => {
uni.hideLoading()
uni.navigateBack({
delta: 1 // 返回上一页
})
})
}
} }
} })
}) }
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

85
front-end/mall4uni/src/pages/express-delivery/express-delivery.scss
Unescape View File

@ -1,50 +1,67 @@
/* 设置页面背景颜色 */
page { page {
background: #f7f8fa; background: #f7f8fa;
} }
/* 容器高度设置为100%，确保容器占据整个页面的高度 */
.container { .container {
height: 100%; height: 100%;
} }
/* 设置顶部内边距，以适应可能存在的导航栏或其他顶部组件 */
.padding20 { .padding20 {
padding-top: 88rpx; padding-top: 88rpx; /* rpx 是相对于屏幕宽度的单位，适用于移动设备 */
} }
/* 左浮动样式 */
.f-fl { .f-fl {
float: left; float: left;
} }
/* 右浮动样式 */
.f-fr { .f-fr {
float: right; float: right;
} }
/* 导航栏包裹器，固定在页面顶部 */
.navWrap { .navWrap {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 1; /* 确保导航栏位于其他内容之上 */
overflow: hidden; overflow: hidden;
background-color: #fafafa; background-color: #fafafa;
border-bottom: 2rpx solid #f4f4f4; border-bottom: 2rpx solid #f4f4f4;
height: 92rpx; height: 92rpx;
} }
/* 导航栏内部布局 */
.nav { .nav {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap; /* 水平排列，不换行 */
} }
/* 导航栏底部滑动指示器 */
.nav-slider { .nav-slider {
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 4rpx; height: 4rpx;
background-color: #b4282d; background-color: #b4282d;
transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; /* 平滑过渡效果 */
transition: transform 0.3s, -webkit-transform 0.3s;
box-sizing: border-box; box-sizing: border-box;
} }
/* 单个导航项 */
.nav-item { .nav-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 1; flex: 1; /* 均分空间 */
float: left; float: left;
height: 88rpx; height: 88rpx;
padding: 0 16rpx; padding: 0 16rpx;
font-size: 28rpx; font-size: 28rpx;
text { text {
box-sizing: border-box; box-sizing: border-box;
color: #333; color: #333;
@ -52,14 +69,20 @@ page {
line-height: 34rpx; line-height: 34rpx;
} }
} }
/* 当前选中的导航项 */
.nav-item.active { .nav-item.active {
text { text {
color: #b4282d; color: #b4282d; /* 改变文字颜色 */
} }
} }
/* 图标对齐方式 */
.u-icon { .u-icon {
vertical-align: middle; vertical-align: middle;
} }
/* 物流信息展示区域 */
.deliveryInfo { .deliveryInfo {
height: 198rpx; height: 198rpx;
width: 100%; width: 100%;
@ -69,24 +92,23 @@ page {
display: table; display: table;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
.companyname {
.companyname, .expno { /* 快递公司名称和快递单号 */
line-height: 1; line-height: 1;
margin-left: 136rpx; margin-left: 136rpx;
font-size: 28rpx; font-size: 28rpx;
.key {
.key { /* 标签部分的颜色 */
color: #666; color: #666;
} }
} }
.expno {
line-height: 1; .expno { /* 快递单号样式 */
margin-left: 136rpx;
font-size: 28rpx;
margin-top: 16rpx; margin-top: 16rpx;
.key {
color: #666;
}
} }
} }
/* 物流图标 */
.icon-express { .icon-express {
width: 104rpx; width: 104rpx;
height: 104rpx; height: 104rpx;
@ -95,22 +117,30 @@ page {
top: 48rpx; top: 48rpx;
left: 30rpx; left: 30rpx;
} }
/* 物流信息内的文本对齐 */
.infoWarp { .infoWarp {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
/* 物流详情部分 */
.deliveryDetail { .deliveryDetail {
margin-top: 20rpx; margin-top: 20rpx;
padding-top: 40rpx; padding-top: 40rpx;
background-color: #fff; background-color: #fff;
min-height: 670rpx; min-height: 670rpx;
} }
/* 物流进度条项 */
.detailItem { .detailItem {
border-left: 1px dashed #f4f4f4; border-left: 1px dashed #f4f4f4; /* 左侧虚线 */
margin-left: 42rpx; margin-left: 42rpx;
position: relative; position: relative;
margin-bottom: 2rpx; margin-bottom: 2rpx;
} }
/* 进度点 */
.dot { .dot {
image { image {
width: 35rpx; width: 35rpx;
@ -121,29 +151,37 @@ page {
left: -18rpx; left: -18rpx;
} }
} }
/* 最新的物流信息 */
.lastest { .lastest {
.dot { .dot {
image { image {
top: -2rpx; top: -2rpx; /* 调整最新点的位置 */
} }
} }
.detail { .detail {
.desc { .desc {
color: #105c3e; color: #105c3e; /* 文字颜色 */
margin-top: 0; margin-top: 0;
} }
.time { .time {
color: #105c3e; color: #105c3e; /* 时间颜色 */
} }
border-top: 0;
border-top: 0; /* 移除上边框 */
} }
} }
/* 物流详情描述 */
.detail { .detail {
.desc { .desc {
font-size: 24rpx; font-size: 24rpx;
line-height: 30rpx; line-height: 30rpx;
margin-top: 40rpx; margin-top: 40rpx;
} }
.time { .time {
font-size: 24rpx; font-size: 24rpx;
line-height: 30rpx; line-height: 30rpx;
@ -151,11 +189,14 @@ page {
margin-top: 15rpx; margin-top: 15rpx;
margin-bottom: 39rpx; margin-bottom: 39rpx;
} }
border-top: 1px solid #f4f4f4; border-top: 1px solid #f4f4f4;
margin-left: 28rpx; margin-left: 28rpx;
overflow: hidden; overflow: hidden;
padding-right: 30rpx; padding-right: 30rpx;
} }
/* 提示信息 */
.deliveryTip { .deliveryTip {
height: 80rpx; height: 80rpx;
background-color: #fff8d8; background-color: #fff8d8;
@ -165,6 +206,8 @@ page {
line-height: 80rpx; line-height: 80rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
/* 空白占位符 */
.empty-space { .empty-space {
margin-top: 20rpx; margin-top: 20rpx;
background: #fff; background: #fff;

40
front-end/mall4uni/src/pages/express-delivery/express-delivery.vue
Unescape View File

@ -1,16 +1,21 @@
<template> <template>
<!-- 物流信息 --> <!-- 物流信息 -->
<view class="container"> <view class="container">
<!-- 主要内容包裹器 -->
<view class="wrapper"> <view class="wrapper">
<!-- 物流信息头部 -->
<view <view
class="deliveryInfo" class="deliveryInfo"
style="background:url(http://jiales.gz-yami.com/delivery-bg.png) center center no-repeat #fff;" style="background:url(http://jiales.gz-yami.com/delivery-bg.png) center center no-repeat #fff;"
> >
<!-- 物流图标 -->
<view <view
class="icon-express" class="icon-express"
style="background:url(http://jiales.gz-yami.com/delivery-car.png) no-repeat;background-size:100% 100%;" style="background:url(http://jiales.gz-yami.com/delivery-car.png) no-repeat;background-size:100% 100%;"
/> />
<!-- 物流信息文本 -->
<view class="infoWarp"> <view class="infoWarp">
<!-- 快递公司名称 -->
<view class="companyname"> <view class="companyname">
<text class="key"> <text class="key">
物流公司： 物流公司：
@ -19,6 +24,7 @@
{{ companyName }} {{ companyName }}
</text> </text>
</view> </view>
<!-- 运单编号 -->
<view class="expno"> <view class="expno">
<text class="key"> <text class="key">
运单编号： 运单编号：
@ -29,30 +35,39 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 如果有物流数据则显示物流详情 -->
<view <view
v-if="dvyData.length" v-if="dvyData.length"
class="deliveryDetail" class="deliveryDetail"
> >
<!-- 使用v-for循环渲染每个物流详情项 -->
<block <block
v-for="(item, index) in dvyData" v-for="(item, index) in dvyData"
:key="index" :key="index"
> >
<!-- 每个物流详情项，如果是最新的一条记录，则添加lastest类 -->
<view :class="'detailItem ' + (index==0?'lastest':'')"> <view :class="'detailItem ' + (index==0?'lastest':'')">
<!-- 物流进度点 -->
<view class="dot"> <view class="dot">
<!-- 根据条件加载不同的点图标 -->
<image src="@/static/images/icon/delive-dot.png" /> <image src="@/static/images/icon/delive-dot.png" />
<image src="@/static/images/icon/dot.png" /> <image src="@/static/images/icon/dot.png" />
</view> </view>
<!-- 物流详情描述 -->
<view class="detail"> <view class="detail">
<view class="desc"> <view class="desc">
{{ item.context }} {{ item.context }} <!-- 描述文字 -->
</view> </view>
<view class="time"> <view class="time">
{{ item.time }} {{ item.time }} <!-- 时间戳 -->
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
<!-- 如果没有物流数据则显示暂无配送信息 -->
<view <view
v-else v-else
class="empty-space" class="empty-space"
@ -64,30 +79,39 @@
</template> </template>
<script setup> <script setup>
const companyName = ref('') // 定义响应式变量
const dvyFlowId = ref('') const companyName = ref('') // 快递公司名称
const dvyData = ref([]) const dvyFlowId = ref('') // 运单编号
const dvyData = ref([]) // 物流详情数据数组
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad((options) => { onLoad((options) => {
// 显示加载指示器
uni.showLoading() uni.showLoading()
// 发起请求获取物流信息
http.request({ http.request({
url: '/delivery/check', url: '/delivery/check', // 请求的URL
method: 'GET', method: 'GET', // HTTP方法
data: { data: {
orderNumber: options.orderNum orderNumber: options.orderNum // 从页面加载参数中获取订单号
} }
}) })
.then(({ data }) => { .then(({ data }) => {
// 将服务器返回的数据赋值给响应式变量
companyName.value = data.companyName companyName.value = data.companyName
dvyFlowId.value = data.dvyFlowId dvyFlowId.value = data.dvyFlowId
dvyData.value = data.data dvyData.value = data.data
// 隐藏加载指示器
uni.hideLoading() uni.hideLoading()
}) })
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/* 引入本地的SCSS文件，用于定义样式 */
@use './express-delivery.scss'; @use './express-delivery.scss';
</style> </style>

Write Preview
Loading…
Cancel
Save