地区

project.config.json

@@ -101,6 +101,18 @@
                     "name": "我的钱包",
                     "pathName": "/pages/wallet",
                     "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "授权登陆",
+                    "pathName": "/pages/authorized",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "常见问题",
+                    "pathName": "/pages/questions",
+                    "scene": null
                 }
             ]
         }

src/App.vue

@@ -1,6 +1,32 @@
 <script>
 export default {
     onLaunch(options) {
+        wx.login({
+            success: res => {
+                console.log(res);
+                this.$http
+                    .post('/auth/maLogin', { code: res.code })
+                    .then(res => {
+                        this.$http.setToken(res.token);
+                        this.$store.commit('setSessionKey', res.sessionKey);
+                        this.$store
+                            .dispatch('getUserInfo')
+                            .then(() => {
+                                this.globalData.initialize = true;
+                                console.log(this.globalData);
+                                if (this.globalData.initializeCallback) {
+                                    this.globalData.initializeCallback();
+                                }
+                            })
+                            .catch(() => {
+                                this.globalData.initialize = true;
+                            });
+                    })
+                    .catch(e => {
+                        console.log(e);
+                    });
+            }
+        });
         wx.getSystemInfo({
             success: res => {
                 this.$store.commit('setSystemInfo', res);

src/components/areaSelect.vue

@@ -0,0 +1,57 @@
+<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.show = false;
+        }
+    }
+};
+</script>
+
+<style></style>

src/main.js

@@ -41,7 +41,10 @@ export default {
             'pages/order',
             'pages/chat',
             'pages/setting',
-            'pages/wallet'
+            'pages/wallet',
+            'pages/authorized',
+            'pages/questions',
+            'pages/rule'
         ],
         tabBar: {
             color: '#7E7E80',
@@ -100,6 +103,7 @@ export default {
             'van-steps': '/vant/steps/index',
             'van-rate': '/vant/rate/index',
             'van-popup': '/vant/popup/index',
+            'van-area': '/vant/area/index',
             'van-goods-action': 'vant/goods-action/index',
             'van-goods-action-icon': 'vant/goods-action-icon/index',
             'van-goods-action-button': 'vant/goods-action-button/index'

src/mixins/common.js

@@ -7,6 +7,11 @@ export default {
                 });
             }
         },
+        navigateBack(num = 1) {
+            wx.navigateBack({
+                delta: num
+            });
+        },
         preview(img, urls = []) {
             if (!img) {
                 return;

src/native/svgs/icon_a.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_a</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="常见问题" transform="translate(-36.000000, -206.000000)">
+            <g id="编组" transform="translate(36.000000, 170.000000)">
+                <g id="icon/问答A" transform="translate(0.000000, 36.000000)">
+                    <path d="M8,0 L14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 5.41083001e-16,12.418278 0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="矩形" fill="#939599"></path>
+                    <path d="M11.4316406,12.3374023 C11.7617188,12.3374023 12.0029297,12.1279297 12.0029297,11.8359375 C12.0029297,11.753418 11.9838867,11.6582031 11.9331055,11.5185547 L8.98144531,3.54589844 C8.84179688,3.17138672 8.61328125,3 8.26416016,3 C7.88964844,3 7.65478516,3.17773438 7.51513672,3.55224609 L4.56982422,11.5185547 C4.51904297,11.6582031 4.5,11.753418 4.5,11.8359375 C4.5,12.1279297 4.74121094,12.3374023 5.07128906,12.3374023 C5.35693359,12.3374023 5.52197266,12.2041016 5.62988281,11.8994141 L6.43603516,9.62695312 L10.0605469,9.62695312 L10.8730469,11.8994141 C10.980957,12.2041016 11.1459961,12.3374023 11.4316406,12.3374023 Z M9.73681641,8.65576172 L6.76611328,8.65576172 L8.23242188,4.47900391 L8.27050781,4.47900391 L9.73681641,8.65576172 Z" id="A" fill="#FFFFFF" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/native/svgs/icon_q.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_q</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="常见问题" transform="translate(-36.000000, -174.000000)">
+            <g id="编组" transform="translate(36.000000, 170.000000)">
+                <g id="icon/问答Q" transform="translate(0.000000, 4.000000)">
+                    <path d="M8,0 C12.418278,-8.11624501e-16 16,3.581722 16,8 L16,14 C16,15.1045695 15.1045695,16 14,16 L8,16 C3.581722,16 5.41083001e-16,12.418278 0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="矩形" fill="#FF6C00"></path>
+                    <g id="编组-2" transform="translate(4.000000, 4.000000)" stroke="#FFFFFF">
+                        <circle id="椭圆形" cx="4" cy="4" r="4"></circle>
+                        <line x1="5.5" y1="5.5" x2="8.5" y2="8.5" id="直线" stroke-linecap="round" stroke-linejoin="round"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/pages/authorized.vue

@@ -0,0 +1,73 @@
+<config>
+{
+'navigationBarTitleText': '',
+'disableScroll': true
+}
+</config>
+<template>
+    <div class="container">
+        <div class="top">
+            <van-icon name="warning" size="67" :color="$colors.prim" />
+            <h2>请授权登陆</h2>
+            <p>请授权微信快捷登录</p>
+        </div>
+
+        <div class="btn-content">
+            <div>
+                <van-button type="primary" block :radius="4" @click="login">微信快捷登录</van-button>
+            </div>
+            <div style="margin-top: 20px;">
+                <van-button block :radius="4" @click="navigateBack">返回</van-button>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    methods: {
+        login() {
+            wx.getUserProfile({
+                desc: '获取信息绑定账号',
+                success: res => {
+                    console.log(res);
+                    this.$http
+                        .post('/user/getMaUserInfo', {
+                            sessionKey: this.$store.state.sessionKey,
+                            rawData: res.rawData,
+                            signature: res.signature,
+                            encryptedData: res.encryptedData,
+                            iv: res.iv
+                        })
+                        .then(() => {});
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    .top {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        h2 {
+            padding: 36px 0 16px;
+            font-size: 18px;
+        }
+    }
+}
+.btn-content {
+    width: 240px;
+}
+
+/deep/.btn-content .van-button {
+    --button-default-border-color: @prim;
+}
+</style>

src/pages/mine.vue

@@ -14,7 +14,7 @@
             <van-image src="/native/svgs/img_defaultphoto.svg" width="90" height="90" round class="avatar" fit="cover">
             </van-image>
 
-            <van-button type="primary">点击授权登录</van-button>
+            <van-button type="primary" @click="login">点击授权登录</van-button>
             <van-image
                 class="authentication"
                 width="100%"
@@ -37,7 +37,7 @@
         </van-grid>
 
         <van-grid class="menu menu-l" column-num="3" :border="false" clickable>
-            <van-grid-item text="我的钱包">
+            <van-grid-item text="我的钱包" url="/pages/wallet">
                 <img class="gird-icon" src="/native/svgs/info_icon_qianbao.svg" slot="icon" alt="" />
             </van-grid-item>
             <van-grid-item text="我的关注">
@@ -46,7 +46,7 @@
             <van-grid-item text="个人设置" url="/pages/setting">
                 <img class="gird-icon" src="/native/svgs/info_icon_shezhi.svg" slot="icon" alt="" />
             </van-grid-item>
-            <van-grid-item text="常见问题">
+            <van-grid-item text="常见问题" url="/pages/questions">
                 <img class="gird-icon" src="/native/svgs/info_icon_wenti.svg" slot="icon" alt="" />
             </van-grid-item>
             <van-grid-item>
@@ -56,7 +56,7 @@
                     <button class="grid-btn" open-type="contact" />
                 </div>
             </van-grid-item>
-            <van-grid-item text="交易规范">
+            <van-grid-item text="交易规范" url="/pages/rule">
                 <img class="gird-icon" src="/native/svgs/info_icon_jiaoyi.svg" slot="icon" alt="" />
             </van-grid-item>
         </van-grid>
@@ -73,7 +73,31 @@
 </template>
 
 <script>
-export default {};
+export default {
+    name: 'Mine',
+    methods: {
+        login() {
+            wx.getUserProfile({
+                desc: '获取信息绑定账号',
+                success: res => {
+                    this.$http
+                        .post('/user/getMaUserInfo', {
+                            sessionKey: this.$store.state.sessionKey,
+                            rawData: res.rawData,
+                            signature: res.signature,
+                            encryptedData: res.encryptedData,
+                            iv: res.iv
+                        })
+                        .then(() => {
+                            this.$store.dispatch('getUserInfo').then(() => {
+                                this.navigateBack();
+                            });
+                        });
+                }
+            });
+        }
+    }
+};
 </script>
 
 <style lang="less" scoped>

src/pages/questions.vue

@@ -0,0 +1,112 @@
+<config>
+{
+    "navigationBarTitleText": "常见问题",
+    "backgroundColor":"#F5F7FA"
+}
+</config>
+<template>
+    <div class="page">
+        <div class="container">
+            <div class="page-title">卡牌集换问题说明</div>
+
+            <div class="question-item" v-for="(item, index) in list" :key="index">
+                <div class="text1 text">
+                    <img src="/native/svgs/icon_q.svg" alt="" />
+                    <span>{{ item.title }}</span>
+                </div>
+                <div class="text2 text">
+                    <img src="/native/svgs/icon_a.svg" alt="" />
+                    <span>{{ item.value }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Questions',
+    data() {
+        return {
+            list: [
+                {
+                    title: '付款后可以取消订单吗?',
+                    value:
+                        '如果卖家未发货，买家可在订单页「申请退款」，建议先与卖家沟通协商。如果卖家同意退款，订单将关闭，钱款返回小程序余额。如果卖家已发货请联系客服，平台需向双方确认，才可以操作退款'
+                },
+                {
+                    title: '发货问题',
+                    value:
+                        '若未付款，卖家没有及时回复信息，建议可以更换其他卖家;若已付款，只要未确认收货，钱款都是安全的 '
+                },
+                {
+                    title: '为什么我在卖的商品，在市场上无法显示?',
+                    value:
+                        '市场会根据价格、浏览量、同城与否等多方面因素，综合为用户推荐商品。如果有扰乱市场价格的情况，如标价非真实卖价、发布求购信息、仅记录不出售、假货等，平台会进行降权处理'
+                },
+                {
+                    title: '付款后可以取消订单吗?',
+                    value:
+                        '买家收货并点击「确认收货」后，款项才会发放到卖家账户。查看方式 : 小程序「个人中心」-「余额」'
+                }
+            ]
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ page {
+    background-color: @bg;
+}
+
+.page {
+    padding: 16px 20px 0;
+}
+.container {
+    background-color: #fff;
+    padding: 0 16px 100px;
+    border-radius: 12px;
+}
+.page-title {
+    padding: 20px 0;
+    text-align: center;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #000000;
+    line-height: 26px;
+}
+
+.question-item + .question-item {
+    margin-top: 20px;
+}
+
+.text {
+    .flex();
+    align-items: flex-start;
+    img {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        margin-top: 4px;
+    }
+
+    span {
+        font-size: 14px;
+        color: #666666;
+        line-height: 24px;
+        margin-left: 6px;
+    }
+
+    &.text1 {
+        span {
+            color: #000;
+            font-weight: bold;
+        }
+    }
+    &.text2 {
+        margin-top: 8px;
+    }
+}
+</style>

src/pages/rule.vue

@@ -0,0 +1,96 @@
+<config>
+{
+    "navigationBarTitleText": "交易规范",
+    "backgroundColor":"#F5F7FA"
+}
+</config>
+<template>
+    <div class="page">
+        <div class="container">
+            <div class="page-title">交易纠纷处理规范</div>
+
+            <div class="question-item" v-for="(item, index) in list" :key="index">
+                <div class="text1 text">
+                    {{ item.title }}
+                </div>
+                <div class="text2 text">
+                    {{ item.value }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'rule',
+    data() {
+        return {
+            list: [
+                {
+                    title: '第一条',
+                    value:
+                        '如果卖家未发货，买家可在订单页「申请退款」，建议先与卖家沟通协商。如果卖家同意退款，订单将关闭，钱款返回小程序余额。如果卖家已发货请联系客服，平台需向双方确认，才可以操作退款'
+                },
+                {
+                    title: '第二条',
+                    value:
+                        '若未付款，卖家没有及时回复信息，建议可以更换其他卖家;若已付款，只要未确认收货，钱款都是安全的 '
+                },
+                {
+                    title: '第三条',
+                    value:
+                        '市场会根据价格、浏览量、同城与否等多方面因素，综合为用户推荐商品。如果有扰乱市场价格的情况，如标价非真实卖价、发布求购信息、仅记录不出售、假货等，平台会进行降权处理'
+                },
+                {
+                    title: '付款后可以取消订单吗?',
+                    value:
+                        '买家收货并点击「确认收货」后，款项才会发放到卖家账户。查看方式 : 小程序「个人中心」-「余额」'
+                }
+            ]
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ page {
+    background-color: @bg;
+}
+
+.page {
+    padding: 16px 20px 0;
+}
+.container {
+    background-color: #fff;
+    padding: 0 16px 100px;
+    border-radius: 12px;
+}
+.page-title {
+    padding: 20px 0;
+    text-align: center;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #000000;
+    line-height: 26px;
+}
+
+.question-item + .question-item {
+    margin-top: 20px;
+}
+
+.text {
+    font-size: 14px;
+    color: #666666;
+    line-height: 24px;
+
+    &.text1 {
+        color: #000;
+        font-weight: bold;
+    }
+    &.text2 {
+        margin-top: 8px;
+    }
+}
+</style>

src/pages/setting.vue

@@ -11,19 +11,28 @@
             </van-cell>
             <van-cell title="昵称" value="粉条" is-link />
             <van-cell title="性别" is-link @click="chooseSex" />
-            <van-cell title="地区" is-link />
+            <van-cell title="地区" is-link @click="$refs.area.init()">
+                <span>{{ province }}{{ city }}{{ region }}</span>
+            </van-cell>
             <van-cell title="收货地址" is-link />
             <van-cell title="手机号" class="not" value="未绑定" is-link />
         </van-cell-group>
+
+        <area-select ref="area" :province.sync="province" :city.sync="city" :region.sync="region"></area-select>
     </div>
 </template>
 
 <script>
-import { areaList } from '@vant/area-data';
+import areaSelect from '../components/areaSelect.vue';
 export default {
+    components: { areaSelect },
     name: 'Setting',
     data() {
-        return {};
+        return {
+            province: '',
+            city: '',
+            region: ''
+        };
     },
     methods: {
         chooseSex() {

src/pages/wallet.vue

@@ -109,5 +109,14 @@ export default {
     --dropdown-menu-title-font-size: 13px;
     border-radius: 4px;
     overflow: hidden;
+
+    .van-cell__value {
+        &::after {
+            content: '';
+        }
+        &::before {
+            content: '';
+        }
+    }
 }
 </style>

src/plugins/http.js

@@ -13,22 +13,11 @@ function parseUrl(url) {
     return _baseUrl + url;
 }
 const http = {
-    waitList: [],
-    _token: null,
-    get token() {
-        if (!this._token) {
-            try {
-                this._token = wx.getStorageSync('token');
-            } catch (e) {}
-        }
-        return this._token;
-    },
-    set token(x) {
-        wx.setStorageSync('token', x);
-        this._token = x;
-        this.waitList.forEach(i => i());
-    },
     parseUrl: parseUrl,
+    setToken(token) {
+        wx.setStorageSync('token', token);
+        this.token = token;
+    },
     clearToken() {
         this.token = '';
         wx.removeStorageSync('token');
@@ -42,131 +31,88 @@ const http = {
         }
         return this.token;
     },
-    waitForToken() {
-        if (this.token) {
-            return Promise.resolve();
-        } else {
-            return new Promise((resolve, reject) => {
-                this.waitList.push(resolve);
-            });
-        }
-    },
     get(url, params, options) {
         options = options || {};
         return new Promise((resolve, reject) => {
-            this.waitForToken().then(() => {
-                wx.request({
-                    method: 'GET',
-                    url: parseUrl(url),
-                    data: params,
-                    dataType: 'json',
-                    header: {
-                        Accept: 'application/json',
-                        Authorization: this.token ? 'Bearer ' + this.token : '',
-                        ...(options.header || {})
-                    },
-                    success(res) {
-                        if (res && res.statusCode === 200) {
-                            resolve(res.data);
-                        } else {
-                            reject(res.data || res);
-                        }
-                    },
-                    fail(err) {
-                        reject(err.data || err);
-                    }
-                });
-            });
-        });
-    },
-    post(url, data, options) {
-        options = options || {};
-        return new Promise((resolve, reject) => {
-            this.waitForToken().then(() => {
-                wx.request({
-                    method: 'post',
-                    url: parseUrl(url),
-                    data: data,
-                    dataType: 'json',
-                    header: {
-                        Accept: 'application/json',
-                        'content-type': 'application/x-www-form-urlencoded',
-                        Authorization: this.token ? 'Bearer ' + this.token : '',
-                        ...(options.header || {})
-                    },
-                    success(res) {
-                        if (res && res.statusCode === 200) {
-                            resolve(res.data);
-                        } else {
-                            reject(res.data || res);
-                        }
-                    },
-                    fail(err) {
-                        reject(err.data || err);
+            wx.request({
+                method: 'GET',
+                url: parseUrl(url),
+                data: params,
+                dataType: 'json',
+                header: {
+                    Accept: 'application/json',
+                    Authorization: this.getToken() ? 'Bearer ' + this.getToken() : 'Bearer ',
+                    ...(options.header || {})
+                },
+                success(res) {
+                    if (res && res.statusCode === 200) {
+                        resolve(res.data);
+                    } else {
+                        reject(res.data || res);
                     }
-                });
+                },
+                fail(err) {
+                    reject(err.data || err);
+                }
             });
         });
     },
-    postJson(url, data, options) {
+    post(url, data, options, backHeader = false) {
+        console.log('post');
         options = options || {};
         return new Promise((resolve, reject) => {
-            this.waitForToken().then(() => {
-                wx.request({
-                    method: 'post',
-                    url: parseUrl(url),
-                    data: data,
-                    dataType: 'json',
-                    header: {
-                        Accept: 'application/json',
-                        'Content-Type': 'application/json',
-                        Authorization: this.token ? 'Bearer ' + this.token : '',
-                        ...(options.header || {})
-                    },
-                    success(res) {
-                        if (res && res.statusCode === 200) {
-                            resolve(res.data);
-                        } else {
-                            reject(res.data || res);
-                        }
-                    },
-                    fail(err) {
-                        reject(err.data || err);
+            wx.request({
+                method: 'post',
+                url: parseUrl(url),
+                data: data,
+                dataType: 'json',
+                header: {
+                    Accept: 'application/json',
+                    'content-type': 'application/x-www-form-urlencoded',
+                    Authorization: this.getToken() ? 'Bearer ' + this.getToken() : '',
+                    ...(options.header || {})
+                },
+                success(res) {
+                    if (res && res.statusCode === 200) {
+                        resolve(backHeader ? res : res.data);
+                    } else {
+                        reject(res.data || res);
                     }
-                });
+                },
+                fail(err) {
+                    reject(err.data || err);
+                }
             });
         });
     },
     uploadFile(filePath, options) {
         options = options || {};
         return new Promise((resolve, reject) => {
-            this.waitForToken().then(() => {
-                wx.uploadFile({
-                    url: baseUrl + '/upload/file',
-                    filePath: filePath,
-                    name: 'file',
-                    header: {
-                        Accept: 'application/json',
-                        'content-type': 'application/x-www-form-urlencoded',
-                        Authorization: this.token ? 'Bearer ' + this.token : '',
-                        ...(options.header || {})
-                    },
-                    formData: options.formData || {},
-                    success(res) {
-                        if (res && res.statusCode === 200) {
-                            try {
-                                resolve(JSON.parse(res.data));
-                            } catch (e) {
-                                resolve(res.data);
-                            }
-                        } else {
-                            reject(res);
+            wx.uploadFile({
+                url: baseUrl + '/upload/file',
+                filePath: filePath,
+                name: 'file',
+                header: {
+                    Accept: 'application/json',
+                    'content-type': 'application/x-www-form-urlencoded',
+                    Authorization: this.getToken() ? 'Bearer ' + this.getToken() : '',
+                    ...(options.header || {})
+                },
+                formData: options.formData || {},
+                success(res) {
+                    if (res && res.statusCode === 200) {
+                        try {
+                            resolve(res.data);
+                        } catch (e) {
+                            reject(e);
                         }
-                    },
-                    fail(err) {
-                        reject(err);
+                    } else {
+                        reject(res);
                     }
-                });
+                },
+                fail(err) {
+                    reject(err);
+                }
             });
         });
     }