football/components/page-component/app-shipping-address/app-shipping-address.vue

<template>
	<view class="app-view">
		<view class="app-information">
	<!-- 		<view class="app-contact-information main-between">
                <text>收货人：{{item.name}}</text>
                <text>{{item.mobile}}</text>
			</view>
            <text>收货地址: {{item.address}}</text> -->
			<view class="">
				<view class="felx-three">
					<view class="box-grow-2">
						参训人: {{verifyUndefined(item.name)}}
					</view>	
					<view class="box-grow-3">
						性别: {{verifyUndefined(item.sex) == ''? '':item.sex == 0 ?'未知':item.sex == 1? '男':'女'}}
					</view>	
					<view class="box-grow-4">
						联系电话: {{verifyUndefined(item.mobile)}}
					</view>
				</view>
				<view class="felx-three">
					<view class="box-grow-2">
						年龄: {{verifyUndefined(item.age)}}
					</view>	
					<view class="box-grow-3">
						体重: {{verifyUndefined(item.weight)}}
					</view>	
					<view class="box-grow-4">
						身高: {{verifyUndefined(item.height)}}
					</view>
				</view>
				<view class="felx-three">
					<view class="box-grow-5">
						身份证号码:{{verifyUndefined(item.idcard)}}
					</view>	
				</view>
			</view>
		</view>
		<view @click.stop="editStop" class="app-operating dir-left-nowrap cross-center">
            <view v-if="is_hide_default_btn" class="dir-left-nowrap cross-center">
                <view class="app-radio">
<!--	                <radio color="red" class="radio"></radio>-->
                    <app-radio @click.stop="changeDefault" width="32" height="32" v-model="item.is_default == 1"
                               type="round"></app-radio>
                </view>
                <text class="app-text app-text-color-default" v-if="item.is_default === `0`">设为默认</text>
                <text class="app-text app-text-color-selection" v-else-if="item.is_default === `1`">
                    已设为默认
                </text>
            </view>
			<view class="app-operating-view dir-left-nowrap cross-center main-between">
                <view @click.stop="edit" class="app-modify dir-left-nowrap cross-center main-between">
                    <icon class="app-icon app-modify-icon"></icon>
                    <text>编辑</text>
                </view>

                <view @click.stop="destroy" class="app-delete dir-left-nowrap cross-center main-between">
                    <icon class="app-icon app-delete-icon"></icon>
                    <text>删除</text>
                </view>
			</view>
		</view>
	</view>
</template>

<script>
    import appRadio from '../../basic-component/app-radio/app-radio.vue';

    export default {
        name: "app-shipping-address",
        components: {appRadio},
	    props: {
            item: {
                type: Object,
            },
            is_hide_default_btn: {
                type: Boolean,
                default: false,
            },
            destroy_url: {
                type: String,
                default: ''
            },
            is_refund_address: {
                type: Number,
                default: 0,
            }
	    },
        methods: {
			verifyUndefined(value){
				if(typeof(value) == 'undefined' || value == '' || value == 'undefined'){
					return ''
				}else{
					return value
				}
			},
            changeDefault() {
                const self = this;
                self.$request({
                    url: self.$api.user.address_default,
                    method: 'POST',
                    data: {
                        id: self.item.id,
                        is_default: self.item.is_default == 1 ? 0 : 1,
                    }
                }).then((info) => {
                    if (info.code === 0) {
                        self.$emit('handleAddress', 'price-sort-default.png')
                    } else {
                        uni.showToast({title: info.msg, icon: 'none'})
                    }
                }).catch(() => {
                })
            },
            edit() {
                uni.navigateTo({url: `/pages/address/address-edit?id=` + this.item.id + '&is_refund_address=' + this.is_refund_address});
            },
            editStop(){
                this.$emit('handleStop', 'editStop')
            },
            destroy() {
                const self = this;
                uni.showModal({
                    content: '确定删除报名信息吗？',
                    success: function (res) {
                        if (res.confirm) {
                            self.$request({
                                url: self.destroy_url,
                                method: 'POST',
                                data: {
                                    id: self.item.id,
                                }
                            }).then((info) => {
                                if (info.code === 0) {
                                    self.$emit('handleAddress', 'delete')
                                } else {
                                    uni.showToast({title: info.msg, icon: 'none'})
                                }
                            }).catch(() => {
                            })
                        } else if (res.cancel) {
                        }
                    }
                });
            },
        }
    }
</script>

<style scoped lang="scss">
	.felx-three{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 23rpx;
		.box-grow-2, .box-grow-3, .box-grow-4{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(100,100,100,1);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}	
		.box-grow-2{
			width: 30%;
		}
		.box-grow-3{
			width: 30%;
		}
		.box-grow-4{
			width: 40%;
		}
		.box-grow-5{
			width: 100%;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(100,100,100,1);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	text {
		font-size: #{28rpx};
		color: #353535;
	}
	.radio {
		width: #{32upx};
		height: #{32upx};
	}
	.app-view {
		margin-top: #{20rpx};
		margin-bottom: #{20rpx};
		margin-left: #{24rpx};
		margin-right: #{24rpx};
        background: #FFFFFF;
        border-radius: #{16rpx};
		.app-information {
            padding: #{32rpx} #{24rpx};
			border-bottom: #{1rpx} solid #e2e2e2;
			.app-contact-information {
				margin-bottom: #{24rpx};
			}
		}
		.app-operating {
			margin-top: #{24rpx};
            padding-bottom: #{24rpx};

			.app-radio {
				margin-left: #{24rpx};
				margin-right: #{20rpx};
			}
			.app-text {
				font-size: #{28rpx};
			}
			.app-text-color-default {
				color: #999999;
			}
			.app-text-color-selection {
				color: #ff4544;
			}
			.app-operating-view {
                margin-left: auto;
				right: #{24rpx};
				width: #{106rpx + 106rpx + 48rpx + 24rpx};
				height: #{32rpx};

                text {
                    color: #999999;
                }
				.app-modify {
					width: #{106rpx};
                }
				.app-delete {
					width: #{106rpx};
                    margin-right:#{24rpx};
				}
				.app-icon {
					width: #{32rpx};
					height: #{32rpx};
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
				.app-modify-icon {
					background-image: url("../../../static/image/icon/modify.png");
				}
				.app-delete-icon {
					background-image: url("../../../static/image/icon/delete.png");
				}
			}
		}
	}
</style>