聊天&直播

.env.production

@@ -1 +1 @@
-VUE_APP_BASE_URL=http://localhost:8080
+VUE_APP_BASE_URL=https://zhuoka.izouma.com

project.private.config.json

@@ -142,6 +142,12 @@
                     "query": "",
                     "scene": null
                 },
+                {
+                    "name": "直播商品",
+                    "pathName": "/pages/store/liveProduct",
+                    "query": "",
+                    "scene": null
+                },
                 {
                     "id": -1,
                     "name": "申请退款",

src/components/ButtonBg.vue

@@ -1,5 +1,8 @@
 <template>
-    <div @click="clickBtn" :class="`btn btn-${type} iconfont ${isRight ? 'isRight' : ''}`">
+    <div
+        @click="clickBtn"
+        :class="`btn btn-${type} iconfont ${isRight ? 'isRight' : ''} ${disabled ? 'disabled' : ''}`"
+    >
         <span><slot></slot></span>
 
         <button class="btnForm" v-if="openType" :open-type="openType"></button>
@@ -8,10 +11,12 @@
 
 <script>
 export default {
-    props: ['type', 'isRight', 'openType'],
+    props: ['type', 'isRight', 'openType', 'disabled'],
     methods: {
         clickBtn() {
-            this.$emit('click');
+            if (!this.disabled) {
+                this.$emit('click');
+            }
         }
     }
 };
@@ -63,7 +68,17 @@ export default {
 
     &:active {
         &::before {
-            color: darken(@warning, 10);
+            color: darken(@warning, 10%);
+        }
+    }
+
+    &.disabled {
+        &::before {
+            color: mix(@prim, #fff);
+        }
+
+        span {
+            color: #ffffff80;
         }
     }
 }
@@ -75,7 +90,13 @@ export default {
 
     &:active {
         &::before {
-            color: darken(@prim, 10);
+            color: darken(@prim, 10%);
+        }
+    }
+
+    &.disabled {
+        &::before {
+            color: mix(@prim, #fff);
         }
     }
 }

src/components/ProductInfo.vue

@@ -60,6 +60,10 @@ export default {
         isMine: {
             type: Boolean,
             default: false
+        },
+        startChoose: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -92,7 +96,7 @@ export default {
             this.navigateTo('/pages/store/administration?id=' + this.info.cardCaseId);
         },
         detail() {
-            if (this.isMine && this.showBtn) {
+            if (this.startChoose) {
                 this.$emit('choose', this.info.cardCaseId);
             } else {
                 this.navigateTo('/pages/details?id=' + this.info.cardCaseId, false);

src/main.js

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

src/pages/chat.vue

@@ -9,7 +9,7 @@
         <div
             id="chat-list"
             class="chat-list"
-            @click="showAttach = false"
+            @click="showAttach = ''"
             :style="{ paddingBottom: `calc(${100 + attachHeight}px + env(safe-area-inset-bottom))` }"
         >
             <chat-info
@@ -33,22 +33,36 @@
                     :boder="false"
                     placeholder="请输入需要咨询的问题"
                     :value="message"
+                    @blur="message = $event.detail.value"
                     @input="message = $event.detail"
                     @confirm="confirm"
                 />
 
-                <img src="/native/svgs/icon_liaotian_biaoqing.svg" alt="" class="icon" />
                 <img
-                    @click="showAttach = !showAttach"
+                    src="/native/svgs/icon_liaotian_biaoqing.svg"
+                    @click="showAttach = showAttach !== 'emoji' ? 'emoji' : ''"
+                    alt=""
+                    class="icon"
+                />
+                <van-button type="primary" size="small" @click="confirm('')" v-if="message"> 发送</van-button>
+                <img
+                    @click="showAttach = showAttach != 'img' ? 'img' : ''"
                     src="/native/svgs/icon_liaotian_gengduo.svg"
                     alt=""
                     class="icon"
+                    v-else
                 />
             </div>
             <div class="attach-box" :style="{ height: `${attachHeight}px` }">
-                <div class="up-btn" @click="sendImg">
+                <div class="up-btn" @click="sendImg" v-if="showAttach === 'img'">
                     <img src="/native/svgs/icon_zhaopian.svg" alt="" />
                 </div>
+
+                <div class="emojiList" v-else>
+                    <div class="emoji-item" @click="addEmoji(item)" v-for="(item, index) in connectemoji" :key="index">
+                        {{ item }}
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -70,7 +84,7 @@ export default {
     data() {
         return {
             message: '',
-            showAttach: false,
+            showAttach: '',
             topicInfo: null,
             list: [],
             toUserId: 0,
@@ -82,13 +96,49 @@ export default {
                 lastDay: 'MM/DD HH:mm', // The day before ( Yesterday at 2:30 AM )
                 lastWeek: 'MM/DD HH:mm', // Last week ( Last Monday at 2:30 AM )
                 sameElse: 'YYYY/MM/DD' // Everything else ( 7/10/2011 )
-            }
+            },
+            connectemoji: [
+                '😊',
+                '😅',
+                '😲',
+                '😭',
+                '😂',
+                '😄',
+                '😩',
+                '😞',
+                '😵',
+                '😒',
+                '😍',
+                '😤',
+                '😜',
+                '😝',
+                '😋',
+                '😘',
+                '😚',
+                '😷',
+                '😳',
+                '😃',
+                '😆',
+                '😁',
+                '😢',
+                '😨',
+                '😠',
+                '😣',
+                '😌',
+                '😖',
+                '😔',
+                '😰',
+                '😱',
+                '😪',
+                '😏',
+                '😓'
+            ]
         };
     },
     computed: {
         ...mapState(['userInfo', 'systemInfo']),
         attachHeight() {
-            return this.showAttach ? 114 : 0;
+            return this.showAttach ? 200 : 0;
         }
     },
     onLoad(options) {
@@ -172,8 +222,10 @@ export default {
                 });
         },
         confirm(e) {
-            this.newMessage(e.detail);
-            this.message = '';
+            this.$nextTick(() => {
+                this.newMessage(e ? e.detail : this.message);
+                this.message = '';
+            });
         },
         newMessage(info, isSend = true, messageType = 'TEXT', beenRead = false) {
             let data = {
@@ -192,16 +244,20 @@ export default {
             this.$http.postJson('/message/save', data).then(res => {
                 this.getList();
             });
+        },
+        addEmoji(emoji) {
+            this.message = this.message + emoji + ' ';
         }
     }
 };
 </script>
-<style lang="less">
-page {
+<style lang="less" scoped>
+/deep/ page {
     background-color: @bg;
 }
 .chat-list {
     padding: 10px 20px 100px;
+    z-index: 1;
 }
 
 .bottom-box {
@@ -242,13 +298,18 @@ page {
     input {
         font-weight: normal;
     }
+
+    .van-button {
+        --button-small-min-width: 50px;
+        margin-left: 10px;
+    }
 }
 
 .attach-box {
     transition: height ease-in-out 0.3s;
     padding: 0 20px;
     overflow: hidden;
-
+    z-index: 2;
     .up-btn {
         width: 60px;
         height: 60px;
@@ -273,4 +334,25 @@ page {
     .flex();
     justify-content: center;
 }
+.emojiList {
+    padding: 5px 0;
+    overflow: auto;
+    box-sizing: border-box;
+    height: 100%;
+    .flex();
+    flex-wrap: wrap;
+}
+.emoji-item {
+    width: 20%;
+    flex-shrink: 0;
+    text-align: center;
+    padding: 10px 0;
+    margin-top: 10px;
+    border-radius: 2px;
+    &:active {
+        background-color: #00000010;
+    }
+    font-family: 'color-emoji';
+    font-size: 25px;
+}
 </style>

src/pages/store/homePage.vue

@@ -26,6 +26,10 @@
                     <span>{{ city }}</span>
                 </div>
             </div>
+            <van-button type="primary" @click="startLive" class="live" v-if="isMineShop">
+                <img src="/native/svgs/icon_kapai_zhibo.svg" alt="" />
+                开启直播
+            </van-button>
         </div>
         <div class="list">
             <van-sticky :offset-top="offsetTop">
@@ -58,7 +62,13 @@
                         :name="checkChoose(item.cardCaseId) ? 'checked' : 'circle'"
                         size="18px"
                     />
-                    <product-info :info="item" :isMine="isMineShop" :showBtn="isManage" @choose="choose"></product-info>
+                    <product-info
+                        :info="item"
+                        :isMine="isMineShop"
+                        :startChoose="isManage"
+                        :showBtn="isManage"
+                        @choose="choose"
+                    ></product-info>
                 </div>
                 <van-empty
                     v-if="empty"
@@ -81,6 +91,10 @@
                 <button-bg type="prim" isRight v-else @click="chatWith">联系他</button-bg>
             </block>
         </div>
+
+        <van-popup :show="showImg" @close="showImg = false">
+            <img :src="imgInfo.url" class="code" alt="" />
+        </van-popup>
     </div>
 </template>
 
@@ -107,7 +121,11 @@ export default {
             isMineShop: false,
             offsetTop: 0,
             isManage: false,
-            chooseIds: []
+            chooseIds: [],
+            showImg: false,
+            imgInfo: {
+                url: ''
+            }
         };
     },
     computed: {
@@ -243,6 +261,18 @@ export default {
                 list.push(id);
             }
             this.chooseIds = list;
+        },
+        startLive() {
+            this.$http
+                .post('/live/applyAnchor', {
+                    wxUsername: 'w1529378564'
+                })
+                .then(res => {
+                    this.showImg = true;
+                    this.imgInfo = {
+                        url: res.codeurl
+                    };
+                });
         }
     },
     onPageScroll() {},
@@ -372,4 +402,27 @@ export default {
         margin-right: 5px;
     }
 }
+
+/deep/.live {
+    position: fixed;
+    right: 0;
+    top: 50%;
+
+    .van-button {
+        --button-default-height: 36px;
+        --button-line-height: 36px;
+        --button-border-radius: 18px 0px 0px 18px;
+
+        img {
+            width: 18px;
+            height: 18px;
+            vertical-align: sub;
+        }
+    }
+}
+
+.code {
+    width: 150px;
+    height: 150px;
+}
 </style>

src/pages/store/liveProduct.vue

@@ -0,0 +1,133 @@
+<config>
+{
+    "navigationBarTitleText": "选择直播商品",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black"
+}
+</config>
+<template>
+    <div class="list">
+        <div class="procuct" v-for="(item, index) in list" :key="index">
+            <van-icon
+                @click="choose(item.cardCaseId)"
+                :color="checkChoose(item.cardCaseId) ? $colors.prim : '#C8C9CC'"
+                class="check"
+                :name="checkChoose(item.cardCaseId) ? 'checked' : 'circle'"
+                size="18px"
+            />
+            <product-info :info="item" isMine :showBtn="false" startChoose @choose="choose"></product-info>
+        </div>
+        <van-empty
+            v-if="empty"
+            image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wukabao.png"
+            description="暂无卡包信息哦～"
+        >
+        </van-empty>
+
+        <div class="bottom">
+            <button-bg type="warning">全选</button-bg>
+            <button-bg type="prim" isRight :disabled="chooseIds.length === 0" @click="start">确认开启</button-bg>
+        </div>
+    </div>
+</template>
+
+<script>
+import ButtonBg from '../../components/ButtonBg.vue';
+import ProductInfo from '../../components/ProductInfo.vue';
+export default {
+    components: { ProductInfo, ButtonBg },
+    data() {
+        return {
+            list: [],
+            chooseIds: [],
+            storeInfo: {},
+            empty: false
+        };
+    },
+    methods: {
+        loginMethods() {
+            this.$store.dispatch('getUserStore').then(res => {
+                this.storeInfo = res;
+                this.getData();
+            });
+        },
+        start() {
+            this.$http
+                .post('/live/createRoom', {
+                    cardCaseId: '7638'
+                })
+                .then(res => {
+                    this.showImg = true;
+                    this.imgInfo = {
+                        url: res.codeurl
+                    };
+                });
+        },
+        checkChoose(id) {
+            let list = [...this.chooseIds];
+            return list.includes(id);
+        },
+        choose(id) {
+            console.log(id);
+            let list = [...this.chooseIds];
+            if (this.checkChoose(id)) {
+                list.splice(list.indexOf(id), 1);
+            } else {
+                list.push(id);
+            }
+            this.chooseIds = list;
+        },
+        getData() {
+            this.empty = false;
+            let data = {
+                storeId: this.storeInfo.id
+            };
+            data.caseStatuses = 'PROGRESS';
+            if (this.sort) {
+                data.sortStr = this.sort;
+            }
+            this.showLoading();
+            return this.$http.post('/store/findStoreCases', data).then(res => {
+                this.list = res.caseInfo;
+                if (res.caseInfo.length == 0) {
+                    this.empty = true;
+                }
+                this.hideLoading();
+                return Promise.resolve();
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.list {
+    padding-bottom: 100px;
+}
+.procuct {
+    padding: 20px 25px;
+
+    .flex();
+
+    .product-card {
+        flex-grow: 1;
+    }
+
+    .check {
+        margin-right: 5px;
+    }
+}
+
+.bottom {
+    background-color: #fff;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    .flex();
+    padding: 6px 20px;
+    .bottom(6px);
+    justify-content: space-between;
+    z-index: 20;
+}
+</style>

src/styles/font.less

@@ -26,7 +26,14 @@
     content: '\e61d';
 }
 
-
 .iconfont-button:before {
     content: '\e61e';
 }
+
+@font-face {
+    font-family: 'color-emoji';
+    src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol'), local('Noto Color Emoji');
+}
+article {
+    font-family: 'color-emoji';
+}