uniapp 学习笔记三十一地址列表页面结构搭建渲染及设为默认功能交互

た入场券 2024-04-05 06:03 81阅读 0赞

uniapp 学习笔记三十一 地址列表页面结构搭建渲染及设为默认功能交互

![d69cf78df8f645f393efd64ba49d2ed5.png][]

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"></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 
                })
            },
            methods:{
                ...mapMutations({
                    'handleDefault':'address/addressDefaultMut'
                })
            }
        }
    </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>

index.js

import Vue from "vue"
    import Vuex from "vuex"
    import count from './count.js'
    import condition from './condition.js'
    import user from './user.js'
    import cart from './cart.js'
    import address from './address.js'
    Vue.use(Vuex)
    const store = new Vuex.Store({
        // 定义状态对象
        // state:{
        //     num:100
        // }
        modules:{
            count,
            condition,
            user,
            cart,
            address
        }
    })
    export default store

address.js

export default{
        namespaced:true,
        state(){
            return{
                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
                    }
                ]
            }
        },
        mutations:{
            addressDefaultMut(state,idx){ //设为默认
                state.addressList.forEach((item,i)=>{
                    if(i==idx){
                        item.isdefault = true
                    }else{
                        item.isdefault = false
                    }
                })
            }
        }
    }

[d69cf78df8f645f393efd64ba49d2ed5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/2de7ba8da11d41daa5ff91c80a2bf606.png