店铺两种视角

src/main.js

@@ -57,7 +57,8 @@ export default {
             'pages/store/apply',
             'pages/store/review',
             'pages/store/homePage',
-            'pages/store/productEdit'
+            'pages/store/productEdit',
+            'pages/store/setting'
         ],
         tabBar: {
             color: '#7E7E80',

src/mixins/store.js

@@ -0,0 +1,24 @@
+export default {
+    data() {
+        return {
+            storeInfo: {}
+        };
+    },
+    computed: {
+        city() {
+            if (this.storeInfo) {
+                if (/[\u4e00-\u9fa5]/.test(this.storeInfo.city)) {
+                    let province = this.storeInfo.province.replace(/省/, '');
+                    province = province.replace(/自治区/, '');
+                    let city = this.storeInfo.city.replace(/市/, '');
+                    return province + ' ' + city;
+                }
+            }
+
+            return '';
+        },
+        storeLogo() {
+            return this.storeInfo.logo || '/native/imgs/defaultLogo.png';
+        }
+    }
+};

src/pages/changeText.vue

@@ -25,7 +25,8 @@
 export default {
     data() {
         return {
-            message: ''
+            message: '',
+            key: 'nickName'
         };
     },
     onShow() {
@@ -34,6 +35,12 @@ export default {
             eventChannel.on('message', data => {
                 this.message = data;
             });
+            eventChannel.on('title', data => {
+                wx.setNavigationBarTitle({
+                    title: data
+                });
+                this.key = 'storeName';
+            });
         }
     },
     methods: {
@@ -44,7 +51,7 @@ export default {
             wx.navigateBack({
                 success: res => {
                     prevPage.rootVM.updateInfo({
-                        nickname: this.message
+                        [this.key]: this.message
                     });
                 }
             });

src/pages/details.vue

@@ -41,13 +41,15 @@
         <div class="box-con2">
             <div class="box-con2-shop">
                 <div class="box-con2-tit">
-                    <img src="../static/imgs/icon_dianpu@3x..png" alt="" />
+                    <img :src="storeLogo" alt="" />
                     <div class="logo-shop">
-                        <p>光之城官方卡牌店铺</p>
-                        <span>浙江 杭州</span>
+                        <p>{{ storeInfo.storeName }}</p>
+                        <span>{{ city }}</span>
                     </div>
                 </div>
-                <div class="logo-btn" @click="wait">进入店铺</div>
+                <div class="logo-btn" @click="navigateTo('/pages/store/homePage?id=' + storeInfo.id, false)">
+                    进入店铺
+                </div>
             </div>
         </div>
         <h3>拼箱详情</h3>
@@ -98,9 +100,10 @@
 <script>
 import CardCase from '../components/CardCase';
 import collection from '../mixins/collection';
+import store from '../mixins/store';
 import dayjs from 'dayjs';
 export default {
-    mixins: [collection],
+    mixins: [collection, store],
     components: {
         CardCase
     },
@@ -134,6 +137,10 @@ export default {
                     this.detailsList = res.groupBoxMap;
                     this.cardCaseInfo = res.cardCaseInfo || {};
                     this.banners = res.cardCaseInfo.image.split(',');
+                    return this.$http.get('/store/get/' + res.cardCaseInfo.storeId);
+                })
+                .then(res => {
+                    this.storeInfo = res;
                 })
                 .catch(e => {
                     this.hideLoading();

src/pages/store/homePage.vue

@@ -10,7 +10,7 @@
 </config>
 <template>
     <div>
-        <nav-header>我的店铺</nav-header>
+        <nav-header>{{ isMineShop ? '我的店铺' : storeInfo.storeName }}</nav-header>
         <div class="top">
             <van-image
                 width="100%"
@@ -18,20 +18,12 @@
                 fit="widthFix"
             />
 
-            <div class="top-card">
-                <van-image
-                    :src="'/native/svgs/img_defaultphoto.svg'"
-                    width="90"
-                    height="90"
-                    round
-                    class="avatar"
-                    fit="cover"
-                >
-                </van-image>
+            <div class="top-card" @click="goNext">
+                <van-image :src="storeLogo" width="90" height="90" round class="avatar" fit="cover"> </van-image>
                 <div class="name">{{ storeInfo.storeName }}</div>
-                <div class="location">
+                <div class="location" v-if="city">
                     <img src="/native/svgs/icon_kapai_dizhi.svg" alt="" />
-                    <span>浙江 杭州</span>
+                    <span>{{ city }}</span>
                 </div>
             </div>
         </div>
@@ -75,8 +67,10 @@ import ButtonBg from '../../components/ButtonBg.vue';
 import NavHeader from '../../components/NavHeader.vue';
 import ProductInfoMine from '../../components/ProductInfoMine.vue';
 import SortItem from '../../components/SortItem.vue';
+import store from '../../mixins/store';
 export default {
     components: { ButtonBg, SortItem, NavHeader, ProductInfoMine },
+    mixins: [store],
     data() {
         return {
             option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
@@ -93,21 +87,52 @@ export default {
             list: [],
             empty: false,
             finish: false,
-            storeInfo: {}
+            isMineShop: false
         };
     },
     computed: {
         ...mapState(['systemInfo', 'userStoreInfo'])
     },
+    onShow() {
+        if (this.isLogin) {
+            this.loginMethods();
+        }
+    },
     methods: {
         loginMethods() {
             this.loading = true;
-            this.getData();
-            this.$store.dispatch('getUserStore').then(res => {
+            this.getStore().then(res => {
                 this.storeInfo = res;
+                this.getData();
             });
         },
+        getStore() {
+            console.log(this.userStoreInfo);
+            if (this.userStoreInfo) {
+                if (this.userStoreInfo.id.toString() === this.$mp.options.id || !this.$mp.options.id) {
+                    this.isMineShop = true;
+                    return this.$store.dispatch('getUserStore');
+                } else {
+                    this.isMineShop = false;
+                    return this.getStoreById(this.$mp.options.id);
+                }
+            } else {
+                return this.$store.dispatch('getUserStore').then(res => {
+                    if (res.id.toString() === this.$mp.options.id || !this.$mp.options.id) {
+                        this.isMineShop = true;
+                        return Promise.resolve(res);
+                    } else {
+                        this.isMineShop = false;
+                        return this.getStoreById(this.$mp.options.id);
+                    }
+                });
+            }
+        },
+        getStoreById(id) {
+            return this.$http.get('/store/get/' + id);
+        },
         getData() {
+            console.log(this.storeInfo.id);
             let data = {
                 page: this.page,
                 size: 20
@@ -120,13 +145,19 @@ export default {
                 this.finish = res.last;
                 this.list = [...this.list, ...res.content];
             });
+        },
+        goNext() {
+            if (this.isMineShop) {
+                this.navigateTo('/pages/store/setting');
+            }
         }
     },
     onPageScroll() {},
     onShareAppMessage() {
         return {
             title: '卓卡——' + this.storeInfo.storeName,
-            path: '/pages/store/homePage?id=' + this.storeInfo.id
+            path: '/pages/store/homePage?id=' + this.storeInfo.id,
+            imageUrl: this.storeLogo
         };
     }
 };

src/pages/store/setting.vue

@@ -0,0 +1,156 @@
+<config>
+{
+    "navigationBarTitleText": "店铺设置",
+}
+</config>
+<template>
+    <div>
+        <van-cell-group :border="false">
+            <van-cell title="LOGO" is-link @click="changeLogo" class="avatar">
+                <van-image
+                    round
+                    width="36"
+                    height="36"
+                    :src="storeInfo ? storeInfo.logo : '/native/svgs/img_defaultphoto.svg'"
+                    fit="cover"
+                />
+            </van-cell>
+            <van-cell title="店铺名称" @click="goChange" :value="storeInfo ? storeInfo.storeName : ''" is-link />
+            <van-cell title="店铺地区" is-link :class="{ not: !city }" @click="$refs.area.init()">
+                <span>{{ city || '未设置' }}</span>
+            </van-cell>
+        </van-cell-group>
+
+        <area-select ref="area" :columnsNum="2" @input="changeCity"></area-select>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import areaSelect from '../../components/areaSelect.vue';
+export default {
+    components: { areaSelect },
+    name: 'Setting',
+    data() {
+        return {
+            storeInfo: {}
+        };
+    },
+    computed: {
+        ...mapState(['userStoreInfo']),
+        city() {
+            if (this.userStoreInfo) {
+                if (/[\u4e00-\u9fa5]/.test(this.userStoreInfo.city)) {
+                    let province = this.userStoreInfo.province.replace(/省/, '');
+                    province = province.replace(/自治区/, '');
+                    let city = this.userStoreInfo.city.replace(/市/, '');
+                    return province + ' ' + city;
+                }
+            }
+
+            return '';
+        }
+    },
+    watch: {
+        userStoreInfo() {
+            this.storeInfo = { ...this.userStoreInfo };
+        }
+    },
+    onShow() {
+        let eventChannel = this.$mp.page.getOpenerEventChannel();
+        if (eventChannel && eventChannel.on) {
+            eventChannel.on('changeNick', data => {
+                this.updateInfo({
+                    nickname: data
+                });
+            });
+        }
+    },
+    methods: {
+        loginMethods() {
+            this.$store.dispatch('getUserStore').then(res => {
+                this.storeInfo = res;
+            });
+        },
+        changeCity(values) {
+            console.log(values);
+            this.updateInfo({
+                province: values[0].name,
+                city: values[1].name
+            });
+        },
+        changeLogo() {
+            this.choosePhoto().then(res => {
+                console.log(res);
+                this.updateInfo({
+                    logo: res
+                });
+            });
+        },
+        updateInfo(changeInfo = {}) {
+            let data = { ...this.userStoreInfo, ...changeInfo };
+            this.showLoading();
+            this.$http
+                .postJson('/store/save', data)
+                .then(res => {
+                    return this.$store.dispatch('getUserStore');
+                })
+                .then(() => {
+                    this.toast('更新成功', 'success');
+                });
+        },
+        goChange() {
+            wx.navigateTo({
+                url: '/pages/changeText',
+                success: res => {
+                    // success
+                    res.eventChannel.emit('message', this.userStoreInfo.storeName);
+                    res.eventChannel.emit('title', '修改店铺名称');
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .van-cell {
+    --cell-horizontal-padding: 23px;
+    --cell-vertical-padding: 20px;
+    --cell-text-color: #000;
+    --cell-value-color: #000;
+    .van-cell__value {
+        font-size: 16px;
+    }
+
+    .van-button {
+        position: absolute;
+        top: 12px;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        --button-small-height: 64px !important;
+    }
+}
+
+.avatar {
+    /deep/ .van-cell {
+        --cell-line-height: 36px;
+    }
+
+    ._van-image {
+        line-height: 0;
+        display: block;
+    }
+}
+
+/deep/ .not {
+    .van-cell {
+        --cell-value-color: #c8c9cc;
+        .van-cell__value {
+            font-size: 13px;
+        }
+    }
+}
+</style>