购买.
This commit is contained in:
parent
0bc33789ce
commit
5644c3c0e4
|
|
@ -93,7 +93,15 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/mall/receiving-address",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
// "globalStyle": {
|
||||
// "navigationBarTextStyle": "black",
|
||||
|
|
|
|||
|
|
@ -47,7 +47,93 @@
|
|||
|
||||
<uni-popup ref="bayPop" type="bottom">
|
||||
|
||||
<view style="width: 100%; height: 1111.65rpx; background-color: #F7F7F7;">31232</view>
|
||||
<view
|
||||
style="width: 100%; height: 965.65rpx; background-color: #F7F7F7; border-radius: 15.27rpx 15.27rpx 0rpx 0rpx;">
|
||||
|
||||
<view class="" style="width: 688.93rpx; height: 100%; margin: 0 auto;">
|
||||
|
||||
<view class=""
|
||||
style="width: 100%; height: 30rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 44rpx;">
|
||||
<view class="" style="width: 24.81rpx; height: 24.81rpx;"></view>
|
||||
<text style="font-size: 26.72rpx;">确认订单</text>
|
||||
<image src="/static/ic_close.png" style="width: 24.81rpx; height: 24.81rpx;" @click="closePop"
|
||||
mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 100%; height: 227.1rpx; background-color: white; position: relative; margin-top: 42rpx; border-radius: 15.27rpx;">
|
||||
|
||||
<image src=""
|
||||
style="width: 180.12rpx; height: 180.12rpx; background-color: #D8D8D8; border-radius: 15.27rpx; position: absolute; left: 24.81rpx; top: 24.81rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<text
|
||||
style="font-size: 22.9rpx; position: absolute; left: 238.55rpx; top: 41.98rpx;">新人福利第6弹-小米音箱</text>
|
||||
|
||||
<text
|
||||
style="font-size: 19.08rpx; position: absolute; left: 238.55rpx; top: 91.6rpx; color: #999999;">类型：明信片</text>
|
||||
|
||||
<view class=""
|
||||
style="position: absolute; display: flex; flex-direction: row; left: 238.55rpx; bottom: 44rpx; align-items: center;">
|
||||
<text class=" " style="font-size: 19.08rpx; margin-top: 15rpx; color: #FF6A6A;">￥</text>
|
||||
<text class=" " style="font-size: 41.98rpx; font-weight: bold; color: #FF6A6A;">69</text>
|
||||
</view>
|
||||
|
||||
<text
|
||||
style="position: absolute; right: 24.81rpx; bottom: 41.98rpx; font-size: 19.08rpx; color: #999999;">x1</text>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="" @click="toAddress()"
|
||||
style="width: 100%; height: 82.06rpx; background-color: white; border-radius: 15.27rpx; margin-top: 28.63rpx; display: flex; align-items: center; position: relative;">
|
||||
|
||||
<text style="left: 24.81rpx; font-size: 22.9rpx; position: absolute;">地址管理</text>
|
||||
|
||||
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
||||
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 100%; height: 82.06rpx; background-color: white; border-radius: 15.27rpx; margin-top: 28.63rpx; display: flex; align-items: center; position: relative;">
|
||||
|
||||
<text style="left: 24.81rpx; font-size: 22.9rpx; position: absolute;">优惠券</text>
|
||||
|
||||
<text style="right: 45.8rpx; font-size: 19.08rpx; position: absolute; color: #999999;">未选择</text>
|
||||
|
||||
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
||||
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 100%; height: 82.06rpx; background-color: #F9F8E1; border-radius: 15.27rpx; margin-top: 28.63rpx; display: flex; align-items: center; position: relative;">
|
||||
|
||||
<text style="left: 24.81rpx; font-size: 22.9rpx; position: absolute;">售前·售后须知</text>
|
||||
|
||||
|
||||
<image src="/static/ic_arrow.png" class="arrow-icon"></image>
|
||||
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 45.8rpx;">
|
||||
|
||||
<image :src="isCheck?'/static/ic_check_s.png':'/static/ic_check.png'" @click="setCheck()"
|
||||
style="width: 24.02rpx; height: 24.02rpx;" mode=""></image>
|
||||
|
||||
<text
|
||||
style="font-size: 19.08rpx; color: #999999; margin-left: 11.45rpx;">我已满18岁，阅读并同意《用户协议》《隐私政策》</text>
|
||||
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 100%; height: 83.97rpx; background-color: #333333; border-radius: 15.27rpx; display: flex; align-items: center; justify-content: center; margin-top: 30.53rpx;">
|
||||
<text style="font-size: 22.9rpx; color: #CDEF27;">确认支付</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
|
|
@ -56,67 +142,88 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detailList: [1, 2, 3, 4, 5],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
toBack() {
|
||||
console.log("777777");
|
||||
uni.navigateBack();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detailList: [1, 2, 3, 4, 5],
|
||||
isCheck: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
toBack() {
|
||||
console.log("777777");
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
bayOpen() {
|
||||
this.$refs.bayPop.open();
|
||||
},
|
||||
closePop() {
|
||||
this.$refs.bayPop.close();
|
||||
},
|
||||
|
||||
setCheck() {
|
||||
this.isCheck = !this.isCheck;
|
||||
},
|
||||
|
||||
toAddress(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/receiving-address'
|
||||
});
|
||||
}
|
||||
|
||||
bayOpen() {
|
||||
this.$refs.bayPop.open();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.item-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 30.53rpx;
|
||||
top: 26.72rpx;
|
||||
}
|
||||
|
||||
.price-symbol-small {
|
||||
font-size: 19.08rpx;
|
||||
margin-top: 10rpx;
|
||||
color: #FF6A6A;
|
||||
}
|
||||
|
||||
.price-value-small {
|
||||
font-size: 41.98rpx;
|
||||
font-weight: bold;
|
||||
color: #FF6A6A;
|
||||
}
|
||||
|
||||
|
||||
.product-count {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
right: 30.53rpx;
|
||||
top: 40rpx;
|
||||
align-items: center;
|
||||
|
||||
.count-text {
|
||||
font-size: 15.27rpx;
|
||||
color: #6C6C6C;
|
||||
.item-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 30.53rpx;
|
||||
top: 26.72rpx;
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
width: 17.39rpx;
|
||||
height: 17.39rpx;
|
||||
margin-left: 7rpx;
|
||||
.price-symbol-small {
|
||||
font-size: 19.08rpx;
|
||||
margin-top: 10rpx;
|
||||
color: #FF6A6A;
|
||||
}
|
||||
|
||||
.price-value-small {
|
||||
font-size: 41.98rpx;
|
||||
font-weight: bold;
|
||||
color: #FF6A6A;
|
||||
}
|
||||
|
||||
|
||||
.product-count {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
right: 30.53rpx;
|
||||
top: 40rpx;
|
||||
align-items: center;
|
||||
|
||||
.count-text {
|
||||
font-size: 15.27rpx;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.box-icon {
|
||||
width: 17.39rpx;
|
||||
height: 17.39rpx;
|
||||
margin-left: 7rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 10.67rpx;
|
||||
height: 19.66rpx;
|
||||
right: 25rpx;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
pages/mall/receiving-address.vue
Normal file
128
pages/mall/receiving-address.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
|
||||
<view class="" style="width: 100%; height: 225.19rpx; position: relative; background-color: white;">
|
||||
|
||||
<view class="title">
|
||||
收货地址
|
||||
</view>
|
||||
|
||||
<view class="" @click="toBack()"
|
||||
style="width: 45.8rpx; height: 45.8rpx; position: absolute; left: 30.53rpx; bottom: 35rpx; display: flex; align-items: center; justify-content: center;">
|
||||
<image src="/static/ic_back2.png" style="width: 16.08rpx; height: 27.67rpx;" mode=""></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<scroll-view class="" scroll-y="true" style="width: 688.93rpx; margin: 34.44rpx auto; height: 1200rpx;">
|
||||
|
||||
<view class="" v-for="(item,index) in addressList"
|
||||
style="width: 100%; height: 227.1rpx; background-color: white; margin-bottom: 22.9rpx; border-radius: 15.27rpx; position: relative;">
|
||||
|
||||
|
||||
<view class=""
|
||||
style="display: flex; flex-direction: row; position: absolute; left: 32.44rpx; top: 30.53rpx;">
|
||||
|
||||
<text style="font-size: 22.9rpx;">{{item.name}}</text>
|
||||
|
||||
<text style="font-size: 22.9rpx; margin-left: 30.53rpx;">{{item.phoneNum}}</text>
|
||||
</view>
|
||||
|
||||
<text
|
||||
style="font-size: 20.99rpx; color: #575757; position: absolute; left: 32.44rpx; top: 91.6rpx;">{{item.address}}</text>
|
||||
|
||||
|
||||
<view class=""
|
||||
style="display: flex; flex-direction: row; position: absolute; right: 26.72rpx; bottom: 24.81rpx;">
|
||||
|
||||
<view class=""
|
||||
style="width: 61.07rpx; height: 34.45rpx; background-color: #EAE9E9; border-radius: 11.45rpx; display: flex; align-items: center; justify-content: center;">
|
||||
<text style="font-size: 19.08rpx; color: #333333;">删除</text>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 61.07rpx; height: 34.45rpx; background-color: #EAE9E9; border-radius: 11.45rpx; display: flex; align-items: center; justify-content: center; margin-left: 38.17rpx;">
|
||||
<text style="font-size: 19.08rpx; color: #333333;">修改</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<view class="" style="width: 100%; height: 188.94rpx; background-color: white;">
|
||||
|
||||
<view class=""
|
||||
style="width: 688.93rpx; height: 83.97rpx; background-color: #333333; border-radius: 15.27rpx; margin: 20.99rpx auto; display: flex; align-items: center; justify-content: center;">
|
||||
<text style="color: #CDEF27; font-size: 22.9rpx;">新增收货地址</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
addressList: [{
|
||||
name: "苏家辉",
|
||||
phoneNum: "130000000",
|
||||
address: "江苏省徐州市睢宁县"
|
||||
}, {
|
||||
name: "苏家辉",
|
||||
phoneNum: "130000000",
|
||||
address: "江苏省徐州市睢宁县"
|
||||
}, {
|
||||
name: "苏家辉",
|
||||
phoneNum: "130000000",
|
||||
address: "江苏省徐州市睢宁县"
|
||||
}, {
|
||||
name: "苏家辉",
|
||||
phoneNum: "130000000",
|
||||
address: "江苏省徐州市睢宁县"
|
||||
}, {
|
||||
name: "苏家辉",
|
||||
phoneNum: "130000000",
|
||||
address: "江苏省徐州市睢宁县"
|
||||
}, {
|
||||
name: "苏家辉",
|
||||
phoneNum: "130000000",
|
||||
address: "江苏省徐州市睢宁县"
|
||||
}, {
|
||||
name: "苏家辉",
|
||||
phoneNum: "130000000",
|
||||
address: "江苏省徐州市睢宁县"
|
||||
}, ],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toBack() {
|
||||
console.log("777777");
|
||||
uni.navigateBack();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32.44rpx;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
bottom: 38.17rpx;
|
||||
}
|
||||
</style>
|
||||
BIN
static/ic_back2.png
Normal file
BIN
static/ic_back2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 752 B |
BIN
static/ic_check.png
Normal file
BIN
static/ic_check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1005 B |
BIN
static/ic_check_s.png
Normal file
BIN
static/ic_check_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 636 B |
BIN
static/ic_close.png
Normal file
BIN
static/ic_close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
Loading…
Reference in New Issue
Block a user