收货地址

This commit is contained in:
18631081161 2025-07-22 22:57:04 +08:00
parent 2bd2293384
commit 15fcb75f60
6 changed files with 369 additions and 205 deletions

View File

@ -1,5 +1,5 @@
<template>
<view class="content bg" style="background-image: url('@@:static/bags_bg.png');">
<view class="content bg myZt-500w" style="background-image: url('@@:static/bags_bg.png');">
<view class="" style="width: 100%; overflow: auto;">
@ -52,7 +52,7 @@
<view class=""
style="width: 164.58rpx; height: 68.75rpx; position: relative; margin-right: 19.44rpx; display: flex; align-items: center; justify-content: center;">
<image src="https://guyu-1308826010.cos.ap-shanghai.myqcloud.com/static/pay_bg.png" style="width: 100%; height: 100%;position: absolute;" mode=""></image>
<text style="position: absolute; font-size: 20.83rpx; color: #66594E;">结算 ({{checkNum}})</text>
<text class="myZt-600w" style="position: absolute; font-size: 20.83rpx; color: #66594E;">结算 ({{checkNum}})</text>
</view>
<text style="font-size: 29.13rpx; color: #6E5B51; margin-right: 30.56rpx;">{{sumPrice}}</text>

View File

@ -9,8 +9,8 @@
<view class="" style="width: 100%; margin-top: 96.53rpx;">
<view class=""
style="width: 230.56rpx; height: 71.53rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 50rpx; display: flex; align-items: center;">
<image src="@@:static/ic_search.png"
style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;" mode=""></image>
<image src="@@:static/ic_search.png" style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;"
mode=""></image>
</view>
</view>
@ -18,8 +18,8 @@
<view class=""
style="width:100%; height: 57.64rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 20rpx; margin-top: 33.33rpx; display: flex; align-items: center;">
<image src="@@:static/ic_notice.png"
style="width: 23.61rpx; height: 22.92rpx; margin-left: 24.31rpx;" mode=""></image>
<image src="@@:static/ic_notice.png" style="width: 23.61rpx; height: 22.92rpx; margin-left: 24.31rpx;"
mode=""></image>
<view class="news-text">
<uni-notice-bar scrollable single :style="{ width: `100%` }" :speed="8"
background-color="transparent" color="#6B5E4B" text="感谢您的理解与支持"></uni-notice-bar>
@ -51,7 +51,7 @@
:style="{ border: `2px solid ${item.color}` }">
</view>
<text class="myZt-300w"
<text class="myZt-500w"
style="text-align: center; margin-top: 13.19rpx; font-size: 22.22rpx; color: #685952; width: 159.72rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ item.title }}</text>
</view>
@ -80,14 +80,15 @@
<text class="myZt-500w"
style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{ item.title }}</text>
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{ item.title }}
</text>
<text style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
<text class="myZt-300w" style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
<view class="" style="display: flex; flex-direction: row; margin-left: 20.31rpx;">
<text class="myZt-500w" style="font-size: 29.17rpx; color: #87644E;">{{ item.price }}</text>
<text style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> / </text>
<text class="myZt-500w" style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> / </text>
</view>
</view>
@ -107,194 +108,195 @@
</template>
<script>
export default {
data() {
return {
currendIndex: 0,
swiperList: [1, 2, 3, 4],
dataList: [{
id: 1,
title: "坂本日常",
color: "#90BB76",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#FDA6AA",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#96ABEB",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#F9D051",
url: ""
}
],
export default {
data() {
return {
currendIndex: 0,
swiperList: [1, 2, 3, 4],
dataList: [{
id: 1,
title: "坂本日常",
color: "#90BB76",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#FDA6AA",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#96ABEB",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#F9D051",
url: ""
}
],
tabList: [{
id: 1,
title: "全部"
}, {
id: 1,
title: "吧唧"
},
{
id: 1,
title: "立牌"
},
{
id: 1,
title: "色纸"
},
{
id: 1,
title: "拍立得"
}
],
goodsLsit: [{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
}
]
}
},
methods: {
clickTab(index) {
this.currendIndex = index;
},
setTabBg(index) {
if (this.currendIndex == index) {
return {
backgroundColor: '#F5D677',
border: '1rpx solid transparent'
}
} else {
return {
backgroundColor: 'transparent',
border: '1rpx solid #9A8F79'
}
tabList: [{
id: 1,
title: "全部"
}, {
id: 1,
title: "吧唧"
},
{
id: 1,
title: "立牌"
},
{
id: 1,
title: "色纸"
},
{
id: 1,
title: "拍立得"
}
],
goodsLsit: [{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
},
{
id: 1,
title: "坂本日常坂本日常坂本日常坂本日常",
imgUrl: "",
type: "",
price: "20"
}
]
}
},
methods: {
clickTab(index) {
this.currendIndex = index;
},
setTabBg(index) {
if (this.currendIndex == index) {
return {
backgroundColor: '#F5D677',
border: '1rpx solid transparent'
}
} else {
return {
backgroundColor: 'transparent',
border: '1rpx solid #9A8F79'
}
}
},
toDetails(id) {
uni.navigateTo({
url: '/pages/home/product-details?id=' + id
});
}
toDetails(id) {
uni.navigateTo({
url: '/pages/home/product-details?id=' + id
});
}
}
}
</script>
<style lang="scss">
.content {
width: 693.06rpx;
height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
.content {
width: 693.06rpx;
height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
position: relative;
align-items: center;
}
.news-text {
width: 600rpx;
height: 57.64rpx;
display: flex;
align-items: center;
margin-left: 18rpx;
padding-top: 20rpx;
::v-deep.uni-noticebar__content-text {
font-size: 22.22rpx;
}
}
.grid-container {
width: 100%;
display: grid;
/* 3列等宽 */
grid-template-columns: repeat(2, 1fr);
/* 间距 */
gap: 34.72rpx;
padding: 20rpx;
}
.news-text {
width: 600rpx;
height: 57.64rpx;
display: flex;
align-items: center;
margin-left: 18rpx;
padding-top: 20rpx;
::v-deep.uni-noticebar__content-text {
font-size: 22.22rpx;
font-family: "JiangChengYuanTi-300W", sans-serif;
}
}
.grid-container {
width: 100%;
display: grid;
/* 3列等宽 */
grid-template-columns: repeat(2, 1fr);
/* 间距 */
gap: 34.72rpx;
padding: 20rpx;
}
</style>

View File

@ -5,7 +5,7 @@
<image src="@@:static/ic_back.png" mode=""></image>
</view>
<view class="title bg" style=" background-image: url('@@:static/title_bg.png');">
<view class="title bg myZt-500w" style=" background-image: url('@@:static/title_bg.png');">
<text>坂本日常 吧唧</text>
</view>
@ -28,7 +28,7 @@
</view>
<view class="tip">
<view class="tip myZt-500w">
<image src="@@:static/ic_prompt.png" style="width: 513.89rpx; height: 51.39rpx; position: absolute;">
</image>
<text style="position: absolute; font-size: 20.83rpx; color: #8C8574;">运费10元 满100包邮 3-5个工作日发货</text>
@ -39,7 +39,7 @@
<view class="pay" @click="openPayPop()">
<image src="@@:static/ic_pay.png" mode=""></image>
<view class="price">
<text>20</text>
<text class="myZt-600w">20</text>
</view>
</view>
@ -52,7 +52,7 @@
<view class="detailsPop bg" style="background-image: url('@@:static/specifics_bg.png');">
<view class="popTitle">
<view style="width: 30rpx;"></view>
<text style="font-size: 31.25rpx; color: #695C4E;">商品详情</text>
<text class="myZt-600w" style="font-size: 31.25rpx; color: #695C4E;">商品详情</text>
<view class="popClose" style="" @click="closeDetailsPop()">
<image src="@@:static/ic_close.png" style="" mode=""></image>
</view>
@ -61,15 +61,15 @@
<image class="detailsImg" src="" mode="">
</image>
<text class="detailsBrand">品牌</text>
<text class="detailsSize">尺寸直径约56mm</text>
<text class="detailsBrand myZt-600w">品牌</text>
<text class="detailsSize myZt-600w">尺寸直径约56mm</text>
</view>
</uni-popup>
<!-- 购买弹窗 -->
<uni-popup ref="payPop" type="bottom" :safe-area='false'>
<view class="payPop bg" style=" background-image: url('@@:static/pay_pop_bg.png');">
<view class="payPop bg myZt-500w" style=" background-image: url('@@:static/pay_pop_bg.png');">
<view class="popTitle">
<view style="width: 30rpx;"></view>
@ -81,7 +81,7 @@
<!-- 地址 -->
<view class="payPopAddress">
<view class="payPopAddress" @click="toAddress()">
<image class="image1" src="@@:static/ic_address.png" mode=""></image>
@ -125,6 +125,11 @@
<text style="margin-left: 20.14rpx;">支付方式</text>
<text style="margin-right: 20.14rpx;">微信支付</text>
</view>
<!-- 优惠券 -->
<view class="payPopPayment">
<text style="margin-left: 20.14rpx;">优惠券</text>
<text style="margin-right: 20.14rpx;">无可用 </text>
</view>
<!-- 消费说明 -->
<view class="payExplain">
@ -214,6 +219,13 @@
},
//
toAddress() {
uni.navigateTo({
url: '/pages/me/address-page'
});
}
}
}
</script>
@ -520,7 +532,7 @@
.conPay {
width: 561.81rpx;
height: 161.11rpx;
margin: 86.11rpx auto 0;
margin: 30.56rpx auto 0;
}

View File

@ -1,6 +1,44 @@
<template>
<view>
<view class="content bg" style="background-image: url('@@:static/bags_bg.png');">
<view class="title myZt-600w">
<view class="back" @click="toBack()">
<image src="@@:static/ic_back.png" mode=""></image>
</view>
<text>收货地址</text>
<view class="back"></view>
</view>
<view class="" style="width: 100%; margin-top: 41.67rpx; overflow: auto;">
<view class="" v-for="(item,index) in dataList" :style="setBorder(index)" @click="selectAdd(index)"
style="width: 695.83rpx; height: 136.81rpx; background-color: white; margin: 0 auto 12.5rpx; border-radius: 16rpx; display: flex; align-items: center;">
<view class="column myZt-500w" style="margin-left: 45.14rpx; flex: 1;">
<text style="font-size: 19.44rpx; color: #8C8574;">{{item.economize}}</text>
<text style="font-size: 22.22rpx; color: #6E5B51; margin-top: 10.97rpx;">{{item.community}}</text>
<text style="font-size: 19.44rpx; color: #8C8574; margin-top: 10.67rpx;">{{item.phone}}</text>
</view>
<image src="@@:static/ic_modify.png" @click="addressPopOpen()" style="width: 22.92rpx; height: 22.92rpx; margin-right: 12.5rpx;"
mode=""></image>
</view>
<image src="@@:static/add_address.png"
style="width: 561.81rpx; height: 122.92rpx; margin: 10rpx auto 20rpx; margin-left: 50%; transform: translateX(-50%);"
mode=""></image>
</view>
<uni-popup ref="addressPop" type="bottom" :safe-area='false'>
<view class="bg" style="width: 100%; height: 825rpx; background-image: url('@@:static/address_bg.png');">
</view>
</uni-popup>
</view>
</template>
@ -8,15 +46,127 @@
export default {
data() {
return {
selectAddress: 0,
dataList: [{
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
}, {
id: 1,
economize: "河南省 某某市 某某区 某某街道",
community: "某某小区某号楼",
phone: "某某 13333333333"
},
]
}
},
methods: {
toBack() {
uni.navigateBack();
},
selectAdd(index) {
this.selectAddress = index;
},
setBorder(index) {
if (this.selectAddress == index) {
return {
border: '1rpx solid #FEA4AC'
}
} else {
return {
border: '1rpx solid transparent'
}
}
},
addressPopOpen() {
this.$refs.addressPop.open()
},
addressPopClose() {
this.$refs.addressPop.cloes()
},
}
}
</script>
<style>
<style lang="scss">
.content {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
.title {
width: 688.88rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 119.44rpx;
text {
font-size: 29.17rpx;
color: #6E5B51;
}
}
.back {
width: 40rpx;
height: 40rpx;
image {
width: 14.58rpx;
height: 27.08rpx;
}
}
</style>

View File

@ -11,12 +11,12 @@
<view class=""
style="display: flex; flex-direction: row; position: absolute; align-items: center; left: 186.81rpx; top: 35.42rpx;">
<text style="font-size: 29.17rpx; color: #6E5B51;">坂本日常</text>
<text class="myZt-600w" style="font-size: 29.17rpx; color: #6E5B51;">坂本日常</text>
<image src="@@:static/ic_modify.png" style="width: 22.92rpx; height: 22.92rpx; margin-left: 13.16rpx;"
mode=""></image>
</view>
<text
<text class="myZt-500w"
style="position: absolute; left: 186.81rpx; bottom: 35.42rpx; font-size: 19.42rpx; color: #8C8574;">ID:3232321323</text>
</view>

View File

@ -1,7 +1,7 @@
/**
全局css
*/
$baseurl: "@@:static/";
$baseurl: "https://guyu-1308826010.cos.ap-shanghai.myqcloud.com/static/";
@font-face {
font-family: "JiangChengYuanTi-300W";