cnic_buyer/pages/index/address.vue

<template>
	<view>
		<view class="body">
		<view class="font">
			<!-- <uni-icons style="padding-left: 11px;color: white;" type="arrow-left" size="30" @click="back"></uni-icons> -->
			<uni-icons style="padding-left: 11px;color: white;font-weight: 100;" type="back" size="22" @click="back"></uni-icons>
			<text style="margin-left: 30%;color: white;">Ship to</text>
		</view>
			<!-- <view class="text_pop">Popular Countries/Regions</view>
			<view class="address" v-for="(item2,index2) in popularlist" :key="item2.name" >
				<text>{{ item2.name}}</text>
				<radio class="Radio"v-model="item2.name" :checked="current==item2.name"@click="Active(item2,index2)"></radio>
			</view> -->
			<view class="address1"></view>
			<view style="padding-top: 10px;">
				<view v-for ="(item,index) in list " :key="index" >
					<text class="color_red">{{ item.title}}</text>
					<view class="address" v-for="(item1,index1) in item.sur_name" :key="item1.name" >
						<text>{{ item1.name}}</text>
						<radio class="Radio"v-model="item1.name" :checked="current==item1.name"@click="Active(item1,index1)"></radio>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest2} from '../../api/index.js'
	export default {
	    data() {
	        return {
				citys:[],
				current:'',
				list:[],
				popularlist:[
					{
						name:'India'
					},
					{
						name:'United States of America'
					},
					{
						name:'Turkey'
					},
					{
						name:'United Kingdom'
					},
					{
						name:'China'
					},
				]
					
				
	            }
	    },
async onLoad() {
		await this.getaddress()
		
		},
	    methods: {
	       getaddress(){
			   let data ={
				   _action:'getregions',
				   parent_region_id:0
			   }
			   defaultRequest(data).then( res => {
				   console.log(res,'p')
				   uni.showLoading({
				   	title:''
				   })
				   if(res.error==0){
					   this.citys = res.data
					   setTimeout(() =>{
						   uni.hideLoading()
					   },2000)
				   }
				   let citys =[]
				   for(let i of this.citys){
				   	citys.push({
						sort:i.region_name.substring(0, 1),
						name:i.region_name
					}) 			  
				   }
				   var moth = [],
				       flag = 0,
				       list = citys;
				   var sortlist = {
				       title: '',
				       sur_name: ''
				   }
				   for (var i = 0; i < list.length; i++) {
				       var az = '';
				       for (var j = 0; j < moth.length; j++) {
				           if (moth[j].title == list[i]['sort']) {
				               flag = 1;
				               az = j;
				               break;
				           }
				       }
				       if (flag == 1) {
				           var ab = moth[az];
				           ab.sur_name.push(list[i]);
				           flag = 0;
				   
				       } else if (flag == 0) {
				           sortlist = {};
				           sortlist.title = list[i]['sort'];
				           sortlist.sur_name = new Array();
				           sortlist.sur_name.push(list[i]);
				           moth.push(sortlist);
				       }
				   }
				   this.list = moth
				   console.log(moth,'pppp');
				
			   })
			 
		   },
		   Active(item,index){
			   this.current = item.name
			   console.log(item.name,'fff')
			   uni.setStorageSync('country',item.name)
			   uni.navigateTo({
			   	url:'../account/myProfile?address='+item.name
			   })
		   },
		   back()
		   {
			   uni.navigateBack({
			   	delta:1
			   })
		   }
	    }
	}
</script>

<style>
	page{
		height: 100vh;
		background-color: #fff;
	}
	.body{
		margin: 0 10rpx 10rpx 10rpx;
		background-color: #fff;
		padding: 0 10rpx;
		
	}
	.font{
		display: flex;
		position: fixed;
		background-color: #000;
		width: 100%;
		z-index: 999;
		height: 42px;
		padding-top: 25px;
		text-align: center;
		top:0;
		left: 0;
		font-size: 20px;
		/* font-weight: bold; */
	}
	.address1{
		height: 50rpx;
		margin-top: 20rpx;
		align-items: center;
		background-color: #fff;
		margin-bottom: 50rpx;
	}
	.address{
		margin-top: 6rpx;
		
		height: 20rpx;
		align-items: center;
		background-color: #fff;
	}
	.color_red{
		color: #ff5f15;
	}
	.text_pop{
		 padding-top: 140rpx; 
		height:50rpx;
		/* background-color: #ff5f15; */
		color: #6b6b6b;
	}
</style>