uniapp 学习笔记三十二默认地址和配送地址联动选地址

谁借莪１个温暖的怀抱￠ 2024-04-05 06:23 77阅读 0赞

uniapp 学习笔记三十二 默认地址和配送地址联动选地址

![36c7de5ebbbd413f8f5ff5949b1b26a7.png][]![984106472ee74d5e896c219f114ee697.png][]

order.vue

<template>
        <view>
            <view @click="handleAddress" class="padding flex align-center justify-between">
                <view class="">
                    {
       {orderAddress.username}},{
       {orderAddress.phone}}
                    <view class="">
                        {
       {orderAddress.city}}
                        {
       {orderAddress.region}}
                        {
       {orderAddress.detail}}
                    </view>
                </view>
                <text class="cuIcon-right"></text>
            </view>
            <view class="padding">
                配送时间
            </view>
            <view class="padding flex justify-between">
                <view class="">
                    选择配送日期
                </view>
                <view class="">
                    选择配送时间
                </view>
            </view>
            <view class="flex padding" v-for="(item,index) in 1">
            	<view class="flex align-center">
            		
            		<image class="poster margin-right" :src="item.img" mode=""></image>
            	</view>
            	<view class="flex justify-between info">
            		<view class="">
            			蛋糕
            			<view class="margin-tb-xs">	Fraction	</view>
            			
            		</view>
            		<view class="flex flex-direction align-end">
            			<view class="edit margin-bottom-xs">
            				<text class="iconfont icon-bianjishuru"></text>
            			</view>
                        
                        X 
                        
            		</view>
            	</view>
            </view>
            <view class="fixed padding flex justify-between align-center">
                总计
                <view class="">
                    199
                </view>
                <button class="cu-btn bg-brown">立即支付</button>
            </view>
        </view>
    </template>
    
    <script>
        import {mapGetters} from 'vuex'
        export default {
            data() {
                return {
                    
                };
            },
            computed:{
                ...mapGetters({
                    'orderAddress':'address/orderAddress'
                })
            },
            methods:{
                handleAddress(){
                    uni.navigateTo({
                        url:'../address/address'
                    })
                }
            }
        }
    </script>
    
    <style lang="scss">
    .poster{
        width: 180upx;
        height: 180upx;
        background-color: #d8d8d8;
    }
    .info{
        width: 60%;
        .edit{
            width: 80upx;
            height: 80upx;
            text-align: center;
            line-height: 80upx;
            background-color: #e6e6e6;
            border-radius: 50%;
        }
    }
    .flex.align-end{
        min-width: 210upx;
    }
    .icon-youxiajiaogouxuan{
        color: #e7e7e7;
    }
    .cu-btn.lg{
        width: 50%;
    }
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
    }
    </style>

address.vue

<template>
        <view>
            <view 
                v-for="(item,index) in addressList" 
                class="margin-sm u-border padding"
                :class="{'default':item.isdefault}"
            >
                <view class="default-cont">默</view>
                <view class="flex justify-between">
                    <view class="flex align-center">
                        <text 
                            class="iconfont icon-checkbox-xuanzhong margin-right"
                            :class="{'color-9898':checkedIdx==index||item.isdefault}"
                            @click="handleCheckAddress(index)"
                        ></text>
                        <view class="">
                           {
       {item.username}},{
       {item.phone}}
                            <view class="">
                                {
       {item.city}}
                                {
       {item.region}}
                                {
       {item.detail}}
                            </view>
                        </view>
                    </view>
                    <view class="edit margin-bottom-sm">
                        <text class="iconfont icon-bianjishuru"></text>
                    </view>
                </view>
                <view class="flex justify-around align-center margin-top">
                    <view v-if="item.isdefault" class="">
                        默认地址
                    </view>
                    <view v-else class="" @click="handleDefault(index)">
                        设为默认
                    </view>
                    <u-line length="15" direction="col"></u-line>
                    <view class="">
                        删除地址
                    </view>
                </view>
            </view>
            <view class="text-center">
                <button class="cu-btn bg-brown">新增地址</button>
            </view>
        </view>
    </template>
    
    <script>
        import {mapState,mapMutations} from 'vuex'
        export default {
            data() {
                return {
                    
                };
            },
            computed: {
                ...mapState({
                    addressList:state=>state.address.addressList, 
                    checkedIdx:state=>state.address.checkedIdx 
                })
            },
            methods:{
                ...mapMutations({
                    'handleDefault':'address/addressDefaultMut',
                    'handleCheckAddress':'address/addressCheckMut'
                })
            }
        }
    </script>
    
    <style lang="scss">
    .edit{
        width: 80upx;
        height: 80upx;
        text-align: center;
        line-height: 80upx;
        background-color: #e6e6e6;
        border-radius: 50%;
    }
    .cu-btn.lg{
        width: 50%;
    }
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
    }
    .icon-checkbox-xuanzhong{
    	width: 50upx;
    	height: 50upx;
        font-size: 50upx;
    	text-align: center;
    	line-height: 50upx;
        color: #e6e6e6;
    	background-color: #e6e6e6;
    	border-radius: 20%;
    }
    .default{
        position: relative;
        overflow: hidden;
        .default-cont{
            padding: 20upx 10upx 10upx;
            width: 100upx;
            background-color: #fae456;
            font-size: 12upx;
            text-align: center;
            position: absolute;
            top: -20upx;
            right: -40upx;
            transform: rotate(45deg);
            display: block;
        }
    }
    .default-cont{
        display: none;
    }
    </style>

address.js

export default{
        namespaced:true,
        state(){
            return{
                checkedIdx:-1, //记录用户勾选的地址
                addressList:[
                    {
                        username:'曹国舅',
                        phone:'13010101010',
                        city:'北京',
                        region:'朝阳区',
                        detail:'朝阳路周家井',
                        isdefault:true
                    },{
                        username:'何仙姑',
                        phone:'13010101010',
                        city:'北京',
                        region:'海淀区',
                        detail:'中关村二街',
                        isdefault:false
                    },{
                        username:'吕洞宾',
                        phone:'13010101010',
                        city:'北京',
                        region:'门头沟',
                        detail:'黑山大街',
                        isdefault:false
                    }
                ]
            }
        },
        getters:{
            orderAddress(state){ // 订单中的地址
                // 根据 checkedIdx 与 isdefault 共同得到一个地址对象
                let {checkedIdx,addressList} = state
                if (checkedIdx!=-1) {
                    return addressList[checkedIdx]
                }
                let len = addressList.length
                for(let i=0;i<len;i++){
                    if(addressList[i].isdefault){
                        return addressList[i]
                    }
                }
            }
        },
        mutations:{
            addressDefaultMut(state,idx){ //设为默认
                state.addressList.forEach((item,i)=>{
                    if(i==idx){
                        item.isdefault = true
                    }else{
                        item.isdefault = false
                    }
                })
            },
            addressCheckMut(state,idx){
                //选取地址
                state.checkedIdx = idx
                //点选返回
                uni.navigateBack({
                    delta:1
                })
            }
        }
    }

[36c7de5ebbbd413f8f5ff5949b1b26a7.png]: https://img-blog.csdnimg.cn/36c7de5ebbbd413f8f5ff5949b1b26a7.png
[984106472ee74d5e896c219f114ee697.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/c255dc375a544d06a458636f786b5f75.png