首页

src/components/AddressInfo.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="address" @click="choose">
+        <div class="info">
+            <span class="text1">收货人</span>
+            <span class="text2">{{ info.name }} {{ info.phone }}</span>
+        </div>
+        <div class="info">
+            <span class="text1">收货地址</span>
+            <span class="text2">{{ info.province }} {{ info.city }} {{ info.district }} {{ info.detail }}</span>
+        </div>
+
+        <div class="btn-list">
+            <div class="default">{{ info.enabled ? '默认地址' : '' }}</div>
+            <div class="dele">删除</div>
+            <van-button @click.stop="edit" plain :radius="0" type="info" size="mini">编辑</van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Address',
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    methods: {
+        edit() {
+            this.navigateTo('/pages/receiving?id=' + this.info.id);
+        },
+        choose() {
+            this.$emit('choose', this.info);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.address {
+    padding: 20px 16px;
+    background-color: #fff;
+    border-radius: 12px;
+}
+.info {
+    .flex();
+    align-items: flex-start;
+    .text1 {
+        font-size: 14px;
+        color: #c8c9cc;
+        line-height: 24px;
+        min-width: 56px;
+        margin-right: 12px;
+    }
+
+    .text2 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+    }
+}
+.info + .info {
+    margin-top: 8px;
+}
+.btn-list {
+    .flex();
+    margin-top: 16px;
+    .default {
+        flex-grow: 1;
+        font-size: 13px;
+        color: #000000;
+        line-height: 18px;
+    }
+    .dele {
+        border: 1px solid #ccc;
+        width: 60px;
+        color: #ccc;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        margin-right: 16px;
+        border-radius: 8px;
+    }
+    /deep/ .van-button--mini {
+        border: 1px solid #159eff;
+        color: #159eff;
+        line-height: 32px;
+        font-size: 13px;
+    }
+}
+</style>

src/components/add.vue

@@ -1,16 +0,0 @@
-<template>
-    <div><van-button type="primary" @click="add">子组件</van-button></div>
-</template>
-<script>
-export default {
-    data() {
-        return {};
-    },
-    methods: {
-        add() {
-            this.$emit('adds');
-        }
-    }
-};
-</script>
-<style lang="less" scoped></style>

src/components/areaSelect.vue

@@ -0,0 +1,59 @@
+<template>
+    <van-popup :show="show" round position="bottom" @close="show = false">
+        <van-area :area-list="areaList" :columns-num="columnsNum" @confirm="select" @cancel="show = false" />
+    </van-popup>
+</template>
+
+<script>
+import { areaList } from '@vant/area-data';
+export default {
+    props: {
+        province: {
+            //省
+            type: String,
+            default: ''
+        },
+        city: {
+            //市
+            type: String,
+            default: ''
+        },
+        region: {
+            //区
+            type: String,
+            default: ''
+        },
+        columnsNum: {
+            type: Number,
+            default: 3
+        }
+    },
+    name: 'Area',
+    data() {
+        return { areaList, show: false };
+    },
+    methods: {
+        init() {
+            this.show = true;
+        },
+        select(e) {
+            let values = e.detail.values;
+            if (values.length > 0) {
+                this.$emit('update:province', values[0].name);
+            }
+            if (values.length > 1) {
+                this.$emit('update:city', values[1].name);
+            }
+            if (values.length > 2) {
+                this.$emit('update:region', values[2].name);
+            }
+
+            this.$emit('input', values);
+
+            this.show = false;
+        }
+    }
+};
+</script>
+
+<style></style>

src/main.js

@@ -27,22 +27,30 @@ app.$mount();
 export default {
     config: {
         // pages 的首个页面会被编译成首页
-        pages: ['pages/Home', 'pages/news', 'pages/mine', 'pages/setting', 'pages/changeText'],
+        pages: [
+            'pages/Home',
+            'pages/news',
+            'pages/mine',
+            'pages/setting',
+            'pages/changeText',
+            'pages/chooseAddress',
+            'pages/receiving'
+        ],
         tabBar: {
             color: '#333',
             selectedColor: '#007d37',
             list: [
                 {
                     pagePath: 'pages/Home',
-                    text: 'home',
-                    iconPath: 'native/tabbar/home.png',
-                    selectedIconPath: 'native/tabbar/home_on.png'
+                    text: '首页',
+                    iconPath: 'native/tabbar/tabbar_icon_01@3x.png',
+                    selectedIconPath: 'native/tabbar/tabbar_icon_01_pre@3x.png'
                 },
                 {
                     pagePath: 'pages/news',
-                    text: 'news',
-                    iconPath: 'native/tabbar/mine.png',
-                    selectedIconPath: 'native/tabbar/mine_on.png'
+                    text: '消息',
+                    iconPath: 'native/tabbar/tabbar_icon_02@3x.png',
+                    selectedIconPath: 'native/tabbar/tabbar_icon_02_pre@3x.png'
                 },
                 {
                     pagePath: 'pages/mine',

src/pages/Home.vue

@@ -1,69 +1,107 @@
 <config>
 {
-    "navigationBarTitleText": "首页",
-    "backgroundColor":"#F5F7FA"
+   "backgroundTextStyle":"light",
+    "navigationStyle": "custom",
 }
 </config>
 <template>
-    <div class="con">
-        <van-button type="primary" @click="flag = false">父组件</van-button>
-        <van-cell-group :border="false" class="form">
-            <van-field
-                label="卡牌售价"
-                type="digit"
-                :value="form.boxPrice"
-                @input="form.boxPrice = $event.detail"
-                placeholder="请输入金额"
-            >
-                <span slot="right-icon">元</span>
-            </van-field>
-        </van-cell-group>
-        <div v-if="flag">外卖</div>
-        <add @adds="adds"></add>
+    <div class="container">
+        <img class="mytest" src="../native/imgs/img_home_top@3x.png" alt="" />
+        <div class="top">
+            <div class="address">
+                <img
+                    class="avatar"
+                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg"
+                />
+                <div>
+                    <div class="text1">南京***大学</div>
+                    <div class="text1">江宁校区</div>
+                </div>
+            </div>
+            <div class="search">
+                <van-field
+                    @confirm="searchData"
+                    :value="searchVal"
+                    @change="change"
+                    type="text"
+                    clearable
+                    placeholder="搜索"
+                />
+            </div>
+            <swiper class="swiper" :autoplay="true" :indicator-dots="true">
+                <swiper-item v-for="(item, index) in banners" :key="index">
+                    <img :src="item" alt="" />
+                </swiper-item>
+            </swiper>
+        </div>
     </div>
 </template>
 <script>
-import add from '../components/add.vue';
 export default {
-    components: { add },
     data() {
         return {
-            form: { boxPrice: '' },
-            flag: false
+            banners: [
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-40-54wLiqaRNi.png',
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-10-17-31-24egsujwUw.jpg'
+            ]
         };
     },
-    methods: {
-        adds() {
-            this.flag = true;
-        }
-    }
+    methods: {}
 };
 </script>
-<style lang="less">
-.con {
-    // background: @success;
-    /deep/.form {
-        position: relative;
-        .van-cell {
-            --cell-vertical-padding: 23px;
-            --cell-horizontal-padding: 20px;
-            --field-label-color: #000000;
-            --cell-text-color: #000;
-            .van-field__label,
-            .van-cell__title {
-                font-weight: bold;
-                width: 70px;
-                max-width: 70px !important;
-                min-width: 70px !important;
-                flex-shrink: 0;
-                margin-right: 10px !important;
+<style lang="less" scoped>
+.container {
+    margin: 0 16px;
+    .mytest {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 100%;
+        height: 288px;
+        z-index: -1;
+        img {
+            width: 100vw;
+            display: block;
+        }
+    }
+    .top {
+        margin-top: 60px;
+        .address {
+            .flex();
+            .avatar {
+                margin-right: 6px;
+                width: 48px;
+                height: 48px;
+                border-radius: 8px !important;
             }
-            .van-cell__value {
-                text-align: left;
+            .text1 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 20px;
             }
-
-            &::after {
-                left: 100px !important;
+        }
+        .search {
+            margin: 15px 0 20px 0;
+            /deep/ .van-cell {
+                --cell-vertical-padding: 4px;
+                width: 100%;
+                text-align: center;
+                color: #fff !important;
+                height: 32px;
+                border-radius: 21px;
+                opacity: 0.29;
+            }
+        }
+        .swiper {
+            width: 100%;
+            height: 160px;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 8px;
             }
         }
     }

src/pages/chooseAddress.vue

@@ -0,0 +1,117 @@
+<config>
+{
+    "navigationBarTitleText": "选择地址",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
+}
+</config>
+<template>
+    <div class="container">
+        <van-empty v-if="empty" description="你还没有收货地址哦～">
+            <van-button type="primary" block @click="navigateTo('/pages/receiving')">新增地址</van-button>
+        </van-empty>
+
+        <template v-else>
+            <div class="list">
+                <address-info
+                    @choose="choose"
+                    :info="item"
+                    v-for="(item, index) in addressList"
+                    :key="index"
+                ></address-info>
+            </div>
+
+            <div class="bottom">
+                <van-button type="primary" block @click="navigateTo('/pages/receiving')">新增地址</van-button>
+            </div>
+        </template>
+    </div>
+</template>
+<script>
+import AddressInfo from '../components/AddressInfo.vue';
+export default {
+    components: { AddressInfo },
+    data() {
+        return {
+            addressList: [
+                {
+                    name: '张山',
+                    phone: '18119706666',
+                    province: '北京市',
+                    city: '北京市',
+                    district: '鸟巢',
+                    detail: '鸟巢'
+                }
+            ],
+            empty: false,
+            pageType: 'list'
+        };
+    },
+    methods: {
+        addRess() {
+            this.showLoading();
+            this.empty = false;
+        },
+        // 添加到确认订单
+        add(item) {
+            let pages = getCurrentPages();
+            let prevPage = pages[pages.length - 2];
+            prevPage.rootVM.userAddressId = item.id;
+            prevPage.rootVM.addressList = item;
+            wx.navigateBack();
+        },
+        choose(info) {
+            if (this.pageType === 'order') {
+                let pages = getCurrentPages();
+                let prevPage = pages[pages.length - 2];
+                prevPage.rootVM.userAddressId = info.id;
+                prevPage.rootVM.addressList = info;
+                wx.navigateBack();
+            }
+        }
+    }
+    // onShow() {
+    //     this.addRess();
+    // },
+    // onLoad(options) {
+    //     if (options.type === 'order') {
+    //         this.pageType = 'order';
+    //     }
+    // }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .van-button {
+    --button-primary-background-color: #159eff;
+    --button-primary-border-color: #159eff;
+}
+.container {
+}
+
+.list {
+    background-color: @bg;
+    padding: 16px;
+    min-height: 90vh;
+
+    .address + .address {
+        margin-top: 16px;
+    }
+
+    .address {
+        &:last-child {
+            margin-bottom: 100px;
+        }
+    }
+}
+
+.bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 6px 43px;
+    background-color: #fff;
+    .bottom(6px);
+}
+</style>

src/pages/mine.vue

@@ -14,18 +14,26 @@
             <img class="mytest" src="../native/tabbar/img_home_top@3x.png" alt="" />
             <div class="top">
                 <img class="avatar" v-if="userInfo" :src="userInfo.avatar" alt="" />
-                <div>
-                    <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
-                    <div class="txt2" v-if="userInfo">{{ userInfo.phone }}</div>
+                <div class="right">
+                    <div>
+                        <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
+                        <div class="txt2" v-if="userInfo">{{ Phone }}</div>
+                    </div>
+                    <img
+                        @click="navigateTo('/pages/setting')"
+                        style="margin-top:30px"
+                        class="setting"
+                        src="../native/tabbar/icon_bianji@3x.png"
+                        alt=""
+                    />
                 </div>
-                <!-- <img src="../native/tabbar/info_icon_shezhi@3x.png" alt="" /> -->
             </div>
             <div class="mine">
                 <van-grid class="menu" column-num="3" :border="false" clickable>
                     <van-grid-item text="购物车">
                         <img class="gird-icon" src="../native/tabbar/info_icon_gouwuche@3x.png" slot="icon" alt="" />
                     </van-grid-item>
-                    <van-grid-item text="地址">
+                    <van-grid-item text="地址" @click="navigateTo('/pages/chooseAddress')">
                         <img class="gird-icon" src="../native/tabbar/info_icon_dizhi@3x.png" slot="icon" alt="" />
                     </van-grid-item>
                     <van-grid-item text="消息">
@@ -33,7 +41,7 @@
                     </van-grid-item>
                 </van-grid>
             </div>
-            <div class="con">
+            <div class="content">
                 <div class="text1 text2">
                     <div class="right">
                         <img src="../native/tabbar/info_icon_shoucang@3x.png" alt="" />
@@ -59,7 +67,10 @@ export default {
         return {};
     },
     computed: {
-        ...mapState(['userInfo'])
+        ...mapState(['userInfo']),
+        Phone() {
+            return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
+        }
     },
     methods: {},
     created() {
@@ -82,8 +93,8 @@ export default {
         right: 0;
         margin: auto;
         width: 100%;
+        height: 290px;
         z-index: -1;
-
         img {
             width: 100vw;
             height: 280px;
@@ -93,25 +104,34 @@ export default {
     .top {
         .flex();
         padding-top: 100px;
-        margin-bottom: 10px;
+        margin-bottom: 28px;
         .avatar {
             width: 80px;
             height: 80px;
             border-radius: 50%;
             margin: 0 16px;
         }
-        .txt1 {
-            font-size: 24px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 33px;
-        }
-        .txt2 {
-            font-size: 14px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 20px;
-            margin-top: 6px;
+        .right {
+            .flex();
+            justify-content: space-between;
+            width: 66.5%;
+            .txt1 {
+                font-size: 24px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 33px;
+            }
+            .txt2 {
+                font-size: 14px;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 20px;
+                margin-top: 6px;
+            }
+            .setting {
+                width: 30px;
+                height: 30px;
+            }
         }
     }
     .mine {
@@ -129,10 +149,8 @@ export default {
             }
         }
     }
-    .con {
+    .content {
         margin: 0 16px;
-        height: 50%;
-
         .text1 {
             width: 343px;
             height: 74px;

src/pages/receiving.vue

@@ -0,0 +1,245 @@
+<config>
+{
+    "navigationBarTitleText": "新增地址",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
+}
+</config>
+<template>
+    <div class="container">
+        <van-cell-group>
+            <van-field
+                :value="form.name"
+                @input="form.name = $event.detail"
+                placeholder="请填写您的姓名"
+                label="联系人"
+            />
+            <van-field
+                type="number"
+                :value="form.phone"
+                @input="form.phone = $event.detail"
+                placeholder="请填写您的手机号码"
+                label="手机号"
+            />
+            <van-field
+                @click="$refs.area.init()"
+                :value="showCity"
+                readonly
+                is-link
+                placeholder="请选择省市区"
+                label="地区"
+            />
+            <van-field
+                :value="form.detail"
+                @input="form.detail = $event.detail"
+                placeholder="请填写您的详细地址"
+                label="详细地址"
+                type="textarea"
+                autosize
+            />
+        </van-cell-group>
+        <div class="box-but">
+            <div class="default">
+                <van-checkbox :checked-color="$colors.info" :value="form.enabled" @change="form.enabled = $event.detail"
+                    >设为默认地址</van-checkbox
+                >
+            </div>
+
+            <div class="box-but-con">
+                <van-button :color="$colors.prim" :disabled="!canSubmit" block @click="addRess">确认</van-button>
+                <div class="container-cancel" @click="refWx">获取微信地址</div>
+            </div>
+        </div>
+        <area-select
+            ref="area"
+            :province.sync="form.province"
+            :city.sync="form.city"
+            :region.sync="form.district"
+        ></area-select>
+    </div>
+</template>
+<script>
+import areaSelect from '../components/areaSelect.vue';
+export default {
+    name: 'detail',
+    components: { areaSelect },
+    data() {
+        return {
+            form: {
+                enabled: false,
+                name: '',
+                phone: '',
+                city: '',
+                detail: '',
+                province: '',
+                district: ''
+            }
+        };
+    },
+    computed: {
+        showCity() {
+            return this.form.province + this.form.city + this.form.district;
+        },
+        canSubmit() {
+            if (this.form.name && this.form.phone && this.form.city && this.form.detail) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    },
+    methods: {
+        addRess() {
+            if (!this.form.name) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '收货人不能为空'
+                });
+                return;
+            }
+            if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
+                this.toast('请输入正确手机号');
+                return;
+            }
+            if (!this.form.city) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '地区不能为空'
+                });
+                return;
+            }
+            if (!this.form.detail) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '详细地址不能为空'
+                });
+                return;
+            }
+            // let form = { ...this.form };
+            // if (!form.id) {
+            //     form.userId = this.$store.state.userInfo.id;
+            // }
+            // this.$http
+            //     .post('/address/save', form, { body: 'json' })
+            //     .then(res => {
+            //         console.log(res);
+            //         wx.hideLoading();
+            //         wx.showToast({
+            //             title: '保存成功'
+            //         });
+            //         setTimeout(() => {
+            //             this.navigateBack();
+            //         }, 1500);
+            //     })
+            //     .catch(e => {
+            //         wx.hideLoading();
+            //         wx.showToast({
+            //             icon: 'none',
+            //             title: e.error
+            //         });
+            //     });
+        },
+        refWx() {
+            wx.chooseAddress({
+                success: res => {
+                    this.form = {
+                        enabled: false,
+                        name: res.userName,
+                        phone: res.telNumber,
+                        city: res.cityName,
+                        detail: res.detailInfo,
+                        province: res.provinceName,
+                        district: res.countyName
+                    };
+                },
+                fail: function(err) {
+                    console.log(JSON.stringify(err));
+                }
+            });
+        }
+    },
+    onLoad(options) {
+        // if (options.id) {
+        //     wx.setNavigationBarTitle({
+        //         title: '编辑地址'
+        //     });
+        //     this.$http.get('/address/get/' + options.id).then(res => {
+        //         this.form = res;
+        //     });
+        // }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .van-cell {
+    --cell-vertical-padding: 23px;
+    --cell-horizontal-padding: 20px;
+    --field-label-color: #000000;
+    --cell-text-color: #000;
+    .van-field__label,
+    .van-cell__title {
+        font-weight: bold;
+        width: 70px;
+        max-width: 70px !important;
+        min-width: 70px !important;
+        flex-shrink: 0;
+        margin-right: 10px !important;
+    }
+    .van-cell__value {
+        text-align: left;
+    }
+
+    &::after {
+        left: 100px !important;
+    }
+}
+/deep/ .van-button {
+    background: #159eff !important;
+    border-color: #159eff !important;
+}
+.container {
+    .box-but {
+        background: #f5f7fa;
+        width: 100%;
+        height: 500px;
+        .box-img {
+            display: flex;
+            align-items: center;
+            padding: 16px 0 0 20px;
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+            }
+            p {
+                height: 18px;
+                font-size: 13px;
+                font-weight: 400;
+                color: #000000;
+                line-height: 18px;
+                padding-left: 2px;
+            }
+        }
+        .box-but-con {
+            margin: 0 43px;
+            .container-cancel {
+                margin-top: 20px;
+                width: 290px;
+                height: 48px;
+                border-radius: 12px;
+                border: 1px solid #159eff;
+                font-size: 16px;
+                font-weight: 400;
+                color: #159eff;
+                text-align: center;
+                line-height: 48px;
+            }
+        }
+    }
+}
+
+.default {
+    padding: 17px 20px;
+}
+</style>