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 090b6fcf85 1317228f5b
commit 75009e0fab
2 changed files with 154 additions and 106 deletions
Show Stats Download Patch File Download Diff File

49
front-end/mall4uni/src/pages/delivery-address/delivery-address.scss
Unescape View File

@ -1,30 +1,53 @@
/*
.container 类用于设置页面整体容器的样式。
设置了背景颜色为浅灰色（#f4f4f4），顶部添加了一条 2rpx 宽的灰色边框（#e9eaec），并且设置最小高度为视口高度（100vh），确保页面在内容较少时也能占满整个屏幕高度。
*/
.container { .container {
background-color: #f4f4f4; background-color: #f4f4f4;
border-top: 2rpx solid #e9eaec; border-top: 2rpx solid #e9eaec;
min-height: 100vh; min-height: 100vh;
} }
/*
.main 类用于页面主体部分的样式设置。
设置了顶部外边距为 20rpx，底部内边距为 150rpx，通过这两个属性来调整主体内容在页面中的位置以及预留底部空间（可能用于放置其他固定在底部的元素等情况）。
*/
.main { .main {
margin-top: 20rpx; margin-top: 20rpx;
padding-bottom: 150rpx; padding-bottom: 150rpx;
} }
/*
.address 类用于地址相关区域的整体样式设置，该区域宽度占满父元素（100%），背景颜色为白色（#fff），底部有一条 2rpx 宽的灰色边框（#e9eaec），并且设置了底部外边距为 15rpx，用于与下方元素隔开一定距离。
其内部还有多个子元素的样式设置，用于更细致地布局和展示地址相关信息。
*/
.address { .address {
margin-bottom: 15rpx; margin-bottom: 15rpx;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
border-bottom: 2rpx solid #e9eaec; border-bottom: 2rpx solid #e9eaec;
/*
.personal 类是 address 内部用于个人信息相关部分的样式设置，设置了相对定位，方便内部的一些元素基于该元素进行定位，同时设置了上下和左右的内边距，并且底部添加了一条 3rpx 宽的虚线边框（#e9eaec），用于视觉上区分不同部分的信息。
其内部还有更细化的子元素样式设置。
*/
.personal { .personal {
position: relative; position: relative;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
border-bottom: 3rpx dashed #e9eaec; border-bottom: 3rpx dashed #e9eaec;
/*
.info-tit 类用于个人信息标题部分的样式设置，内部包含姓名（.name）、电话（.tel）等信息以及一个图片元素的样式设置，用于展示相关图标等情况，通过不同的样式属性来控制它们的布局、字体大小、显示方式等。
*/
.info-tit { .info-tit {
.name { .name {
margin-right: 30rpx; margin-right: 30rpx;
font-size: 32rpx; font-size: 32rpx;
display: inline-block; display: inline-block;
} }
.tel { .tel {
font-size: 30rpx; font-size: 30rpx;
} }
image { image {
position: absolute; position: absolute;
right: 30rpx; right: 30rpx;
@ -36,21 +59,31 @@
} }
} }
} }
/*
.select-btn 类用于地址选择按钮相关部分的样式设置，设置了上下和左右的内边距，通过弹性盒子布局（display: flex），使其内部子元素能方便地实现水平对齐（align-items: center）以及两端对齐（justify-content: space-between），一般用于放置如选择、编辑等按钮之类的元素，并且对内部的文本元素（.box）设置了字体大小。
*/
.select-btn { .select-btn {
padding: 15rpx 30rpx; padding: 15rpx 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.box { .box {
font-size: 26rpx; font-size: 26rpx;
} }
} }
} }
/*
.personal 类下的.addr 类用于地址详细内容部分的样式设置，设置了字体大小以及上下外边距，其中顶部外边距相对大一些（20rpx），用于调整与上方元素的间距，并且内部的.addr-get 类用于具体地址文本的样式设置，设置为行内块元素（display: inline-block），文字颜色为灰色（#999），宽度占满父元素（100%），并设置了文本换行方式（word-break: break-word），确保长地址文本能正确换行显示。
这里出现了两次.personal 类，可能在 HTML 结构中有不同的嵌套层级对应不同的样式应用场景，具体要结合 HTML 来看。
*/
.personal { .personal {
.addr { .addr {
font-size: 26rpx; font-size: 26rpx;
margin: 10rpx 0; margin: 10rpx 0;
margin-top: 20rpx; margin-top: 20rpx;
.addr-get { .addr-get {
display: inline-block; display: inline-block;
color: #999; color: #999;
@ -59,6 +92,10 @@
} }
} }
} }
/*
.footer 类用于页面底部固定栏的样式设置，设置为固定定位（position: fixed），使其固定在页面底部（bottom: 0），宽度占满父元素（100%），高度为 100rpx，并且设置了行高与高度相等，使内部文本垂直居中，文本对齐方式为居中对齐（text-align: center），背景颜色为白色（#fff），添加了一个淡淡的阴影效果，用于在视觉上与页面主体区分开，内部文本元素（text）设置了字体大小和颜色（红色，#eb2444）。
*/
.footer { .footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -68,15 +105,24 @@
text-align: center; text-align: center;
background-color: #fff; background-color: #fff;
box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05); box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);
text { text {
font-size: 32rpx; font-size: 32rpx;
color: #eb2444; color: #eb2444;
} }
} }
/*
.empty 类用于当某个区域内容为空时的整体样式设置，内部包含图片（.img）和文本（.txt）两部分的样式设置，用于展示提示信息，告知用户该区域暂无内容等情况。
*/
.empty { .empty {
/*
.img 类用于空内容提示区域中图片部分的样式设置，设置文本对齐方式为居中对齐，顶部外边距为 130rpx，使图片在垂直方向上处于合适位置，内部的图片元素（image）设置了宽度、高度以及显示方式（display: block 和 margin: auto），确保图片能在该区域内水平居中显示。
*/
.img { .img {
text-align: center; text-align: center;
margin-top: 130rpx; margin-top: 130rpx;
image { image {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
@ -84,6 +130,9 @@
margin: auto; margin: auto;
} }
} }
/*
.txt 类用于空内容提示区域中文本部分的样式设置，设置了顶部外边距为 30rpx，字体大小以及文本对齐方式为居中对齐，文字颜色为灰色（#999），用于展示相应的提示文字内容。
*/
.txt { .txt {
margin-top: 30rpx; margin-top: 30rpx;
font-size: 24rpx; font-size: 24rpx;

125
front-end/mall4uni/src/pages/delivery-address/delivery-address.vue
Unescape View File

@ -1,59 +1,63 @@
<template> <template>
<!-- 页面的最外层容器，用于包裹整个页面内容 -->
<view class="container"> <view class="container">
<!-- 页面主体内容区域 -->
<view class="main"> <view class="main">
<view <!-- 当地址列表（addressList）长度为0时，显示此区域，用于提示用户还没有收货地址 -->
v-if="addressList.length===0" <view v-if="addressList.length===0"
class="empty" class="empty">
>
<view class="img"> <view class="img">
<!-- 展示一个表示无收货地址的图片 -->
<image src="http://jiales.gz-yami.com/addr.png" /> <image src="http://jiales.gz-yami.com/addr.png" />
</view> </view>
<view class="txt"> <view class="txt">
您还没有收货地址 您还没有收货地址
</view> </view>
</view> </view>
<!-- radio-group 组件用于创建一组单选按钮，这里用于管理收货地址相关的单选操作（比如设置默认地址等情况） -->
<radio-group class="radio-group"> <radio-group class="radio-group">
<block <!-- 使用v-for指令循环遍历addressList数组，index为当前项的索引，每个元素对应一个收货地址信息 -->
v-for="(item, index) in addressList" <block v-for="(item, index) in addressList"
:key="index" :key="index">
> <!-- 每个收货地址的整体视图容器 -->
<view class="address"> <view class="address">
<view <!-- 个人信息及地址详情展示区域，点击可触发选择该地址用于下单的操作（通过@tap绑定selAddrToOrder方法） -->
class="personal" <view class="personal"
@tap="selAddrToOrder(item)" @tap="selAddrToOrder(item)">
> <!-- 地址信息标题部分，包含收件人姓名、电话号码以及修改地址的图标 -->
<view class="info-tit"> <view class="info-tit">
<!-- 展示收件人姓名，通过双括号插值表达式绑定地址对象中的receiver属性 -->
<text class="name"> <text class="name">
{{ item.receiver }} {{ item.receiver }}
</text> </text>
<!-- 展示收件人电话号码，通过双括号插值表达式绑定地址对象中的mobile属性 -->
<text class="tel"> <text class="tel">
{{ item.mobile }} {{ item.mobile }}
</text> </text>
<image <!-- 修改地址的图标，通过指定的路径引入图片资源，绑定了点击事件toEditAddress，并传递当前地址的ID（通过自定义属性data-addrid），@tap.stop用于阻止事件冒泡 -->
src="@/static/images/icon/revise.png" <image src="@/static/images/icon/revise.png"
:data-addrid="item.addrId" :data-addrid="item.addrId"
@tap.stop="toEditAddress" @tap.stop="toEditAddress" />
/>
</view> </view>
<!-- 详细地址展示区域 -->
<view class="addr"> <view class="addr">
<!-- 展示完整的地址信息，通过拼接地址对象中的省份（province）、城市（city）、区域（area）和详细地址（addr）属性来显示 -->
<text class="addr-get"> <text class="addr-get">
{{ item.province }}{{ item.city }}{{ item.area }}{{ item.addr }} {{ item.province }}{{ item.city }}{{ item.area }}{{ item.addr }}
</text> </text>
</view> </view>
</view> </view>
<view <!-- 设置默认地址相关的操作区域，绑定了点击事件onDefaultAddr，并传递当前地址的ID（通过自定义属性data-addrid） -->
class="select-btn" <view class="select-btn"
:data-addrid="item.addrId" :data-addrid="item.addrId"
@tap="onDefaultAddr" @tap="onDefaultAddr">
>
<view class="box"> <view class="box">
<radio <!-- 单选按钮，用于设置默认地址操作，绑定了一些属性 -->
:value="item.prodId" <radio :value="item.prodId"
:checked="item.commonAddr==1" :checked="item.commonAddr==1"
color="#eb2444" color="#eb2444"
:data-addrid="item.addrId" :data-addrid="item.addrId"
@tap="onDefaultAddr" @tap="onDefaultAddr" />
/>
设为默认地址 设为默认地址
</view> </view>
</view> </view>
@ -61,59 +65,57 @@
</block> </block>
</radio-group> </radio-group>
</view> </view>
<view <!-- 页面底部的按钮区域，点击可触发新增收货地址的操作（通过@tap绑定onAddAddr方法） -->
class="footer" <view class="footer"
@tap="onAddAddr" @tap="onAddAddr">
>
<text>新增收货地址</text> <text>新增收货地址</text>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
const order = ref(-1) // 使用ref函数创建一个响应式变量order，初始值为 -1，可能用于记录与订单相关的状态或标识等信息（从后续代码看，可能与页面跳转来源有关）
onLoad((option) => { const order = ref(-1)
// 生命周期函数 - 在页面加载时触发，用于获取从其他页面传递过来的参数（option），如果参数中包含order属性，则将其值赋给order响应式变量
onLoad((option) => {
if (option.order) { if (option.order) {
order.value = option.order order.value = option.order
} }
}) })
// 使用ref函数创建一个响应式数组addressList，用于存储收货地址列表数据，初始值为空数组
const addressList = ref([])
const addressList = ref([]) // 生命周期函数 - 在页面显示时触发，一般用于加载初始化数据等操作，这里调用onGetList函数获取收货地址列表数据
/** onShow(() => {
* 加载地址列表
*/
onShow(() => {
onGetList() onGetList()
}) })
/** // 获取收货地址列表的函数，通过发送HTTP请求到指定接口（/p/address/list）获取地址列表数据
* 获取收获列表接口 const onGetList = () => {
*/ // 显示加载提示框，告知用户正在加载数据
const onGetList = () => {
uni.showLoading() uni.showLoading()
http.request({ http.request({
url: '/p/address/list', url: '/p/address/list',
method: 'GET' method: 'GET'
}) })
.then(({ data }) => { .then(({ data }) => {
// 将获取到的地址列表数据赋值给addressList响应式变量
addressList.value = data addressList.value = data
// 隐藏加载提示框
uni.hideLoading() uni.hideLoading()
}) })
} }
/** // 新增收货地址的函数，通过uni.navigateTo实现页面跳转，跳转到指定的编辑地址页面（/pages/editAddress/editAddress），一般用于用户添加新的收货地址
* 新增收货地址 const onAddAddr = () => {
*/
const onAddAddr = () => {
uni.navigateTo({ uni.navigateTo({
url: '/pages/editAddress/editAddress' url: '/pages/editAddress/editAddress'
}) })
} }
/** // 设置默认地址的函数，根据点击操作获取当前要设置为默认地址的地址ID（从事件对象e中获取自定义属性data-addrid的值），然后发送HTTP PUT请求到指定接口（/p/address/defaultAddr/ + addrId），传递地址ID数据，用于将对应地址设置为默认地址，请求成功后隐藏加载提示框
* 设置为默认地址 const onDefaultAddr = (e) => {
*/
const onDefaultAddr = (e) => {
const addrId = e.currentTarget.dataset.addrid const addrId = e.currentTarget.dataset.addrid
uni.showLoading() uni.showLoading()
http.request({ http.request({
@ -126,22 +128,18 @@ const onDefaultAddr = (e) => {
.then(() => { .then(() => {
uni.hideLoading() uni.hideLoading()
}) })
} }
/** // 修改地址的函数，根据点击操作获取当前要修改的地址ID（从事件对象e中获取自定义属性data-addrid的值），然后通过uni.navigateTo实现页面跳转，跳转到指定的编辑地址页面（/pages/editAddress/editAddress）并传递地址ID参数，方便在编辑页面加载对应地址信息进行修改
* 修改地址 const toEditAddress = (e) => {
*/
const toEditAddress = (e) => {
const addrId = e.currentTarget.dataset.addrid const addrId = e.currentTarget.dataset.addrid
uni.navigateTo({ uni.navigateTo({
url: '/pages/editAddress/editAddress?addrId=' + addrId url: '/pages/editAddress/editAddress?addrId=' + addrId
}) })
} }
/** // 选择地址并跳转回提交订单页的函数，首先判断order.value的值是否为0（可能表示从特定的提交订单页面过来等情况），如果是，则通过获取当前页面栈（getCurrentPages）获取到上一页面（prevPage），然后将当前选择的地址信息（item）赋值给上一页面的相关变量（item和selAddress），最后通过uni.navigateBack实现返回上一页面（delta: 1表示返回一层页面栈），将选择的地址信息传递回去用于后续操作（比如在提交订单时使用选择的收货地址）
* 选择地址 跳转回提交订单页 const selAddrToOrder = (item) => {
*/
const selAddrToOrder = (item) => {
if (order.value == 0) { if (order.value == 0) {
const pages = getCurrentPages() // 当前页面 const pages = getCurrentPages() // 当前页面
const prevPage = pages[pages.length - 2] // 上一页面 const prevPage = pages[pages.length - 2] // 上一页面
@ -152,9 +150,10 @@ const selAddrToOrder = (item) => {
delta: 1 delta: 1
}) })
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@use './delivery-address.scss'; // 导入外部的SCSS样式文件delivery-address.scss，该文件中应该定义了与当前组件相关的更多具体样式规则，通过scoped属性，使得样式仅作用于当前组件内部的元素
@use './delivery-address.scss';
</style> </style>

Write Preview
Loading…
Cancel
Save