|
@@ -0,0 +1,164 @@
|
|
|
+<template name="address">
|
|
|
+ <view class="address-template">
|
|
|
+ <!-- 地址信息 -->
|
|
|
+ <view class="address-section">
|
|
|
+ <view class="address-content">
|
|
|
+ <view class="address-cen">
|
|
|
+ <view class="address">
|
|
|
+ <view class="address-icon">
|
|
|
+ <text class="iconfont icon-shouhuodizhi"></text>
|
|
|
+ </view>
|
|
|
+ <view class="address-text">
|
|
|
+ {{addressData.province ? addressData.province : ''}}
|
|
|
+ {{addressData.city ? addressData.city : ''}}
|
|
|
+ {{addressData.town ? addressData.town : ''}}
|
|
|
+ {{addressData.address ? addressData.address : ''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image src="../../../static/temp/line@3x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { mapState, mapMutations } from 'vuex'
|
|
|
+ export default{
|
|
|
+ name:"address",
|
|
|
+ props:{
|
|
|
+ addressData:{
|
|
|
+ type:Object
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ initData:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.initData = this.addressData;
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['isManage'])
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .address-template{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background: #FFFFFF;
|
|
|
+ // border-top: 1px solid #F8F8F8;
|
|
|
+ image{
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ height: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address-section {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .address-empty{
|
|
|
+ width: 100%;
|
|
|
+ height: 84rpx;
|
|
|
+ line-height: 84rpx;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #fff;
|
|
|
+ float: left;
|
|
|
+ .icon-tianjiadizhi{
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin: 0 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding:20rpx 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-shouhuodizhi {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 40rpx;
|
|
|
+ color: $color-system;
|
|
|
+ font-size: 46rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .address-cen {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ .top{
|
|
|
+ padding-left: 50rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: $text-color;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
+ display: flex;
|
|
|
+ float: left;
|
|
|
+ .name{
|
|
|
+ margin-right: 48rpx;
|
|
|
+ }
|
|
|
+ .mobile{
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .address-icon{
|
|
|
+ width: 40rpx;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .address-text{
|
|
|
+ width: 650rpx;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #666666;
|
|
|
+ text-align: left;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-xiayibu {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: $text-color;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+ .a-bg {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|