商品订单联调

queenwuli

2020-12-24 c6bac585288a7841b1d1f5fd774b7c765955815b

商品订单联调

 hive-app/common/jssdk/filters.js

New file
@@ -0,0 +1,16 @@
/**
 * filters 工具类
 * */
 
 const filters = {
    // 格式化数字，每3位加逗号
    formatNum(val) {
        val = (val || 0).toString();
        if(val.indexOf('.')>-1){
            val = Number(val).toFixed(2)
        }
        return val.replace(/\B(?=(\d{3})+(?!\d))/g,',')

    },
 }
 export default filters;

 hive-app/common/styles/index.css

@@ -244,6 +244,10 @@
    border-radius: 20px;
    text-align: center;
}
uni-button[disabled]:not([type]), uni-button[disabled][type=default]{
    color: #FFFFFF;
    background-color: rgba(36, 131, 255, 0.4);
}

/* 固定底部 */
.sticky-footer{

 hive-app/components/filterDropdown/index.vue

@@ -101,6 +101,7 @@
        height: 100%;
        background: rgba(0,0,0,0.4);
        transition: all 0.2s;
        z-index: 999;
    }
    .dropdown-wrap-close .mask{
        display: none;

 hive-app/components/noRecord/index.vue

New file
@@ -0,0 +1,23 @@
<template>
    <view class="no-record">
        <image src="../../static/images/no-data.png" mode="widthFix"></image>
        <text>暂无数据</text>
    </view>
</template>

<script>
</script>

<style>
    .no-record{
        text-align: center;
        font-size: 14px;
        color: rgb(171, 177, 204);
        margin-top: 30%;
    }
    .no-record image{
        display: block;
        width: 170px;
        margin: 0 auto 10px;
    }
</style>

 hive-app/main.js

@@ -3,11 +3,22 @@
import httpUtils from './common/jssdk/httpUtils.js'
import utils from './common/jssdk/utils.js'
import toast from './common/jssdk/toast.js'
import filters from './common/jssdk/filters.js'

import noRecord from './components/noRecord/index';  

Vue.prototype.$httpUtils = httpUtils
Vue.prototype.$utils = utils
Vue.prototype.$toast = toast

// 注册全局过滤器
Object.keys(filters).map(v => {
    Vue.filter(v, filters[v])
})

// 注册全局组件
Vue.component('noRecord', noRecord);

Vue.config.productionTip = false

App.mpType = 'app'

 hive-app/pages/member/detail.vue

@@ -21,15 +21,15 @@
        <view class="content">
            <view class="content-row flex justify-around">
                <view class="center">
                    <text class="font-18 red">{{memberInfo.totalBalance}}</text>
                    <text class="font-18 red">{{memberInfo.totalBalance | formatNum}}</text>
                    <text class="font-14 mt-10 block">余额</text>
                </view>
                <view class="center">
                    <text class="font-18 green">{{memberInfo.giftBalance}}</text>
                    <text class="font-18 green">{{memberInfo.giftBalance | formatNum}}</text>
                    <text class="font-14 mt-10 block">赠送余额</text>
                </view>
                <view class="center">
                    <text class="font-18 blue">{{memberInfo.totalShopping}}</text>
                    <text class="font-18 blue">{{memberInfo.totalShopping | formatNum}}</text>
                    <text class="font-14 mt-10 block">累计消费</text>
                </view>
            </view>
@@ -83,10 +83,10 @@
            </view>
        </view>
        <view class="sticky-footer flex justify-between">
            <navigator url="../workbench/selectProduct/index" class="btn">
            <navigator :url="'../workbench/selectProduct/index?id='+id+'&vipName='+memberInfo.vipName" class="btn">
                <button class="white-btn">开单</button>
            </navigator>
            <navigator url="../workbench/selectService" class="btn">
            <navigator :url="'../workbench/selectService?id='+id+'&vipName='+memberInfo.vipName" class="btn">
                <button class="blue-btn">预约</button>
            </navigator>
        </view>

 hive-app/pages/member/index.vue

@@ -30,6 +30,7 @@
                        </view>
                    </view>
                </navigator>
                <no-record v-if="!list.length"></no-record>
            </view>
            <indexed-list></indexed-list>
        </view>

 hive-app/pages/mine/index.vue

@@ -31,7 +31,9 @@
            <view class="tab-box">
                <h-tabs 
                    class="tab"
                    :activeIndex="type-1"
                    :tabData="tabs" 
                    @tabClick="tabChange"
                    :config="{
                        color: '#abb1cc',
                        activeColor: '#518EFF',
@@ -45,29 +47,29 @@
                <view class="performance-content">
                    <view class="flex justify-around">
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 red">600.00</text>
                            <text class="font-16 red">{{userAchieve.orderCash | formatNum}}</text>
                            <text class="mt-5">订单业绩</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 green">600.00</text>
                            <text class="font-16 green">{{userAchieve.cash | formatNum}}</text>
                            <text class="mt-5">现金业绩</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 purple">600.00</text>
                            <text class="font-16 purple">{{userAchieve.cardUse | formatNum}}</text>
                            <text class="mt-5">划扣业绩</text>
                        </view>
                    </view>
                    <view class="flex justify-around mt-15">
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 blueness">600.00</text>
                            <text class="mt-5">本金业绩</text>
                            <text class="font-16 blueness">{{userAchieve.hisConsume | formatNum}}</text>
                            <text class="mt-5">本金消耗</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 orange">600.00</text>
                            <text class="font-16 orange">{{userAchieve.freeConsume | formatNum}}</text>
                            <text class="mt-5">赠送消耗</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 yellow">600.00</text>
                            <text class="font-16 yellow">{{userAchieve.projCommission | formatNum}}</text>
                            <text class="mt-5">服务提成</text>
                        </view>
                    </view>
@@ -111,18 +113,35 @@
                        name: '上月'
                    },
                ],
                userAchieve: {}
          }  
        },
        onShow() {
            this.getUserInfo()
            this.getUserAchieve()
        },
        methods: {
            getUserInfo(){
                this.$httpUtils.request('/api/user/findUserAchieve/'+this.type).then((res) => {
                    if(res.status == 200){
						
                        let {achieve} = res.mapInfo;
                        this.userAchieve = achieve || {};
                    }
                })
            },
            getUserAchieve(){
                this.$httpUtils.request('/api/user/findUserAchieve/'+this.type).then((res) => {
                    if(res.status == 200){
                        let {achieve} = res.mapInfo;
                        this.userAchieve = achieve || {};
                    }else{
                        this.userAchieve = {};
                    }
                })
            },
            tabChange(e){
                console.log(e)
                this.type = e + 1;
                this.getUserAchieve()
            }
        }
    }

 hive-app/pages/workbench/confirmOrder.vue

@@ -1,7 +1,7 @@
<template>
    <!-- 确认订单 -->
    <view class="container">
        <view class="header flex align-center mt-10">
        <view class="header flex align-center">
            <image class="header-img" src="../../static/images/head-img.jpg"></image>
            <view class="ml-10">
                <view class="font-16">
@@ -12,16 +12,16 @@
            </view>
        </view>
        <view class="content flex flex-v mt-10">
            <view class="content-row flex justify-between align-center flex-1" v-for="item in 4">
            <view class="content-row flex justify-between align-center flex-1" v-for="item in list">
                <view class="flex align-center">
                    <image class="centent-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
                    <view class="flex flex-v font-12 ml-10">
                        <text>[项目] 肽妍氨基酸平衡基础洁面乳</text>
                        <text class="gray">×1</text>
                        <text>{{item.name}}</text>
                        <text class="gray">×{{item.num}}</text>
                    </view>
                </view>
                <view>
                    <text>￥400.00</text>
                    <text>￥{{item.price}}</text>
                </view>
            </view>
            <view class="content-row flex justify-between">
@@ -41,7 +41,12 @@
<script>
    export default{
        data(){
            return{}
            return{
                list: []
            }
        },
        onLoad(options) {
            this.list = JSON.parse(decodeURIComponent(options.list))
        },
        methods:{
        }

 hive-app/pages/workbench/customerInfo.vue

@@ -20,15 +20,15 @@
            </view>
            <view class="list-row">
                <text class="font-14">总余额</text>
                <text class="font-14 gray">￥{{memberInfo.totalBalance}}</text>
                <text class="font-14 gray">￥{{memberInfo.totalBalance | formatNum}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">赠送余额</text>
                <text class="font-14 gray">￥{{memberInfo.giftBalance}}</text>
                <text class="font-14 gray">￥{{memberInfo.giftBalance | formatNum}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">剩余积分</text>
                <text class="font-14 gray">{{memberInfo.integral}}</text>
                <text class="font-14 gray">{{memberInfo.integral | formatNum}}</text>
            </view>
            <view class="list-row">
                <text class="font-14">所属门店</text>
@@ -45,16 +45,13 @@
    export default{
        data(){
            return{
                type: 1,
                memberInfo: {},
                url: './selectProduct/index'
            }
        },
        onLoad(options) {
            if(options.type==1){
                this.url = './selectProduct/index';
            } else {
                this.url = './selectService';
            }
            this.type = options.type;
            this.loadMemberInfo(options.id);
        },
        methods:{
@@ -62,6 +59,12 @@
                this.$httpUtils.request('/api/vip/findVipInfoById/'+id).then((res) => {
                    if(res.status == 200){
                        this.memberInfo = res.mapInfo.vipInfo;
                        const {vipName} = this.memberInfo;
                        if(this.type==1){
                            this.url = './selectProduct/index?id='+id+'&vipName='+vipName;
                        } else {
                            this.url = './selectService?id='+id+'&vipName='+vipName;
                        }
                    }
                })
            }

 hive-app/pages/workbench/selectCustomer.vue

@@ -19,6 +19,7 @@
                        </view>
                    </view>
                </navigator>
                <no-record v-if="!list.length"></no-record>
            </view>
            <indexed-list></indexed-list>
        </view>

 hive-app/pages/workbench/selectProduct/index.vue

@@ -4,64 +4,51 @@
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <search-bar :placeholder="placeholder" class="ml-10 mr-10"></search-bar>
        <view class="list flex">
            <scroll-view class="list-left" scroll-y>
                <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
                    <text class="font-14">{{item}}</text>
        <search-bar placeholder="商品名称、编号、拼音" class="search-bar"></search-bar>
        <view class="list">
            <scroll-view class="list-left" scroll-y="true">
                <view class="list-left-row" 
                    v-for="(item,index) in goodsTypeList" 
                    v-if="item.parentId===0"
                    :class="index==selectIndex?'active':''"
                    @click="changeGoodsType(item.id, index)">
                        <text>{{item.name}}</text>
                </view>
            </scroll-view>
            <scroll-view class="list-right" scroll-y>
                <navigator url="../productDetail/index">
                    <view class="flex align-center list-right-row">
                        <image class="product-img mr-5" mode="aspectFill" src="../../../static/images/product.jpg"></image>
                        <view>
                            <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                            <text class="font-10 gray flex justify-start">物品描述</text>
                            <view class="flex justify-between align-center mt-15">
                                <text class="flex justify-start font-12 red mt-10">￥400.00</text>
                                <view class="flex align-center justify-end mt-10">
                                    <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                                    <text>1</text>
                                    <text class="iconfont iconjia blue-btn-circle ml-10"></text>
            <scroll-view class="list-right" scroll-y="true">
                <navigator url="../productDetail/index" hover-class="none" v-for="item in goodsList">
                    <view class="list-right-row">
                        <image class="product-img" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
                        <view class="flex-1">
                            <text>{{item.name}}</text>
                            <view class="flex justify-between mt-15">
                                <text class="price">￥{{item.price}}</text>
                                <view class="right">
                                    <template v-if="item.num">
                                        <text class="iconfont iconjian blue-outline-btn-circle mr-10" 
                                            @click.stop="decreaseGoods(item)"></text>
                                            <text>{{item.num}}</text>
                                    </template>
                                    <text class="iconfont iconjia blue-btn-circle ml-10" 
                                        @click.stop="addGoods(item)"></text>
                                </view>
                            </view>
                        </view>
                    </view>
                </navigator>
                <view class="flex align-center list-right-row">
                    <image class="product-img mr-5" mode="aspectFill" src="../../../static/images/product.jpg"></image>
                    <view>
                        <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                        <text class="font-10 gray flex justify-start">物品描述</text>
                        <view class="flex justify-between align-center mt-15">
                            <text class="flex justify-start font-12 red mt-10">￥400.00</text>
                            <view class="flex align-center justify-end mt-10">
                                <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                                <text>1</text>
                                <text class="iconfont iconjia blue-btn-circle ml-10"></text>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="shopping flex align-center justify-between">
            <view class="flex align-center">
                <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
                    <view class="shopping-icon-num flex align-center justify-center">
                        <text class="font-10">19</text>
        <view class="footer">
            <view class="flex align-center" @click="openShoppingCart">
                <view class="icon-car-wrap">
                    <text class="iconfont iconicongouwuche icon-car gray"></text>
                    <text class="count" v-if="totalCount">{{totalCount}}</text>
                    </view>
                <text class="font-16 blue">¥{{totalAmount}}</text>
                </view>
                <text class="font-14 blue ml-10">¥110.00</text>
            <button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
            </view>
            <navigator url="../confirmOrder">
                <button class="blue-btn btn mr-0">提交订单</button>
            </navigator>
        </view>
        <uni-popup ref="popup" type="bottom">
            <shopping-cart></shopping-cart>
        </uni-popup>
        <shopping-cart ref="shopCart" :list="selectItems" @addGoods="addGoods" @decreaseGoods="decreaseGoods" @reset="clearShopCart"></shopping-cart>
    </view>
</template>

@@ -77,17 +64,111 @@
        },
        data(){
            return{
                placeholder:'商品名称、编号、拼音',
                list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
                select:'0'
                id: '',
                goodsTypeList: [], 
                goodsList: [],
                selectIndex: 0,
                cateId: null,//当前产品类别id
                selectItems: []
            }
        },
        methods:{
            active(index){
                this.select=index
        computed:{
            // 购物车总数量
            totalCount(){
                let count = 0;
                this.selectItems.forEach((item) => {
                    count += item.num;
                })
                return count;
            },
            // 购物车总金额
            totalAmount(){
                let amount = 0;
                this.selectItems.forEach((item) => {
                    amount += item.price * item.num;
                })
                return amount;
            },
            isEnableSumbit(){
                return !this.selectItems.length
            }
        },
        onLoad(options) {
            this.id = options.id;
            uni.setNavigationBarTitle({
                title: '当前客户：' + options.vipName
            });
            this.loadGoodsTypeList()
        },
        methods:{
            openShoppingCart(){
                this.$refs.popup.open()
                if(!this.selectItems.length){
                    return;
                }
                this.$refs.shopCart.show()
            },
            loadGoodsTypeList(){
                this.$httpUtils.request('/api/order/findShoppingGoodsType').then((res) => {
                    if(res.status == 200){
                        let result = res.rows;
                        this.goodsTypeList = result;
                        if(result.length){
                            this.cateId = result[0].id;
                            this.loadGoodsList();
                        }
                    }
                })
            },
            loadGoodsList(){
                this.$httpUtils.request('/api/order/findShoppingGoods',{
                    cateId: this.cateId,
                    pageNum: 1,
                    pageSize: 100,
                    queryKey: ''
                },'POST').then((res) => {
                    if(res.status == 200){
                        this.goodsList = res.rows.map((item) => {
                            return Object.assign(item, {num: 0});
                        });
                    }
                })
            },
            // 切换商品类型
            changeGoodsType(id, index){
                this.selectIndex = index;
                this.cateId = id;
                this.loadGoodsList();
            },
            addGoods(goods){
                let index = this.selectItems.indexOf(goods);
                goods.num++;
                // 该商品若已在购物车，则购物车数量上+1,否则加入购物车
                if(index > -1){
                    this.selectItems[index].num = goods.num;
                }else{
                    this.selectItems.push(goods);
                }
            },
            decreaseGoods(goods){
                let index = this.selectItems.indexOf(goods);
                goods.num = goods.num <= 0 ? 0 : goods.num - 1;
                // 该商品若已在购物车，则购物车数量上-1,否则从购物车删除
                if(index > -1 && this.selectItems[index].num >= 1){
                    this.selectItems[index].num = goods.num;
                }else{
                    this.selectItems.splice(index, 1);
                }
            },
            clearShopCart(){
                this.selectItems = [];
                this.goodsList.forEach((item) => {
                    item.num = 0;
                });
            },
            submit(){
                uni.navigateTo({
                    url: '../confirmOrder?id='+this.id+'&list='+encodeURIComponent(JSON.stringify(this.selectItems))
                });
            }
        }
    }
@@ -104,61 +185,82 @@
        padding: 10px 0 0;
        box-sizing: border-box;
    }
    .search-bar{
        margin-left: 10px;
        margin-right: 10px;
    }
    .list{
        flex: 1;
        display: flex;
        overflow: hidden;
    }
    .list-left{
        width: 25%;
        height: 100%;
        text-align: center;
        width: 170rpx;
        background: #F6F6F8;
        border-radius: 4px;
    }
    .list-right{
        width: 75%;
        text-align: center;
        padding: 0px 10px;
        flex: 1;
    }
    .list-left-row{
        padding: 10px;
        color: #8c9fad;
        font-size: 13px;
    }
    .active{
    .list-left-row.active{
        background: #FFFFFF;
        color: #000000;
    }
    .list-right-row{
        display: flex;
        align-items: center;
        padding: 10px;
        margin: 0 10px 10px;
        border: 1px solid #EDEAF4;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
        border-radius: 4px;
        padding: 10px;
        font-size: 13px;
    }
    .list-right-row:not(:first-child){
        margin-top: 10px;
    .list-right-row .product-img{
        width: 66px;
        height: 66px;
        margin-right: 5px;
    }
    .product-img{
        width: 81px;
        height: 81px;
    .list-right-row .price{
        display: block;
        color: #FA5151;
        font-size: 15px;
    }
    .shopping{
    .footer{
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        background: #FFFFFF;
        padding: 10px 10px;
        box-shadow:0 6px 100px rgba(237,234,244,1);
    }
    .shopping-icon{
        font-size: 28px;
    .footer .icon-car-wrap{
        position: relative;
        margin-right: 15px;
    }
    .shopping-icon-num{
        width: 20px;
        height: 20px;
        background: #518EFF;
        border-radius: 50%;
        color: #FFFFFF;
    .footer .icon-car{
        font-size: 28px;
    }
    .footer .count{
        position: absolute;
        right: -10px;
        top: -10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        background: #518EFF;
        border-radius: 50%;
        color: #FFFFFF;
        font-size: 12px;
        text-align: center;
    }
    .btn{
    .footer .btn{
        border-radius: 20px;
        line-height: 34px;
        padding: 0 24px;

 hive-app/pages/workbench/selectProduct/shoppingCart.vue

@@ -1,96 +1,109 @@
<template>
    <!-- 购物车 -->
    <uni-popup ref="popup" type="bottom">
    <view class="popup-content">
        <view class="popup-header flex justify-between">
            <view class="popup-header">
            <text class="blue">已选商品</text>
            <view class="flex align-center">
                <view class="popup-header-icon iconfont iconlajixiang_huaban1 gray"></view>
                <text class="gray font-14">清空</text>
                    <text class="iconfont iconlajixiang_huaban1 gray"></text>
                    <text class="gray font-14" @click="_reset">清空</text>
            </view>
        </view>
        <view class="popup-row flex align-center"v-for="item in 3">
            <image class="popup-row-img" mode="aspectFill" src="../../../static/images/product.jpg"></image>
            <view class="popup-row-right">
                <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                <view class="flex justify-between align-center">
                    <text class="flex justify-start font-12 red">￥400.00</text>
                    <view class="flex align-center justify-end">
                        <text class="iconfont iconjian blue-outline-btn-circle mr-10 center"></text>
                        <text>1</text>
                        <text class="iconfont iconjia blue-btn-circle ml-10 center"></text>
            <scroll-view scroll-y="true" class="popup-row-wrap">
                <view class="popup-row"v-for="item in list">
                    <image class="popup-row-img" mode="aspectFill" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
                    <view class="flex-1">
                        <text>{{item.name}}</text>
                        <view class="flex justify-between">
                            <text class="price">￥{{item.price}}</text>
                            <view class="right">
                                <template v-if="item.num">
                                    <text class="iconfont iconjian blue-outline-btn-circle mr-10" 
                                        @click.stop="_decreaseGoods(item)"></text>
                                        <text>{{item.num}}</text>
                                </template>
                                <text class="iconfont iconjia blue-btn-circle ml-10" 
                                    @click.stop="_addGoods(item)"></text>
                    </view>
                </view>
            </view>
        </view>
        <view class="popup-end flex align-center justify-between">
            <view class="flex align-center">
                <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
                    <view class="shopping-icon-num flex align-center justify-center">
                        <text class="font-10">19</text>
            </scroll-view>
                    </view>
                </view>
                <text class="font-14 blue ml-10">¥110.00</text>
            </view>
            <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
        </view>
    </view>
    </uni-popup>
</template>

<script>
    import uniPopup from '@/components/uni-popup/uni-popup.vue'
    export default{
        components:{
            uniPopup
        },
        props:{
            list: {
                default: []
            }
        },
        methods:{
            show(){
                this.$refs.popup.open();
            },
            hide(){
                this.$refs.popup.close();
            },
            _addGoods(item){
                this.$emit('addGoods', item);
            },
            _decreaseGoods(item){
                this.$emit('decreaseGoods', item);
                if(!this.list.length){
                    this.hide()
                }
            },
            _reset(){
                this.$emit('reset');
                this.hide()
            }
        }
    }
</script>

<style>
    .shopping{
        padding: 10px 10px;
        box-shadow:0 6px 100px rgba(237,234,244,1);
    }
    .shopping-icon{
        font-size: 28px;
        position: relative;
    }
    .shopping-icon-num{
        width: 20px;
        height: 20px;
        background: #518EFF;
        border-radius: 50%;
        color: #FFFFFF;
        position: absolute;
        right: -10px;
        top: -10px;
    }
    .btn{
        border-radius: 20px;
        line-height: 34px;
        padding: 0 24px;
        font-size: 14px;
    }
	
    .popup-content{
        background: #FFFFFF;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        padding: 0 10px;
        padding-bottom: 54px;
    }
    .popup-header{
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #EDEAF4;
        font-size: 16px;
    }
    .popup-header-icon{
    .popup-header .iconfont{
        font-size: 22px;
        vertical-align: middle;
    }
    .popup-row-wrap{
        max-height: 330px;
        padding: 7px 0;
    }
    .popup-row{
        padding: 10px 0;
        display: flex;
        align-items: center;
        padding: 7px 10px;
        font-size: 12px;
    }
    .popup-row-img{
        width: 40px;
        height: 40px;
        width: 42px;
        height: 42px;
        margin-right: 10px;
    }
    .popup-row-right{
        width: 100%;
    }
    .popup-end{
        padding: 10px 0;
    .popup-row .price{
        color: #FA5151;
        font-size: 14px;
        margin-top: 5px;
    }
</style>

 hive-app/pages/workbench/selectService.vue

@@ -70,9 +70,7 @@
                <button class="blue-btn btn mr-0">提交订单</button>
            </navigator>
        </view>
        <uni-popup ref="popup" type="bottom">
            <shopping-cart></shopping-cart>
        </uni-popup>
        <shopping-cart ref="shopCart"></shopping-cart>
    </view>
</template>

@@ -90,9 +88,14 @@
            return{
            }
        },
        onLoad(options) {
            uni.setNavigationBarTitle({
                title: '当前客户：' + options.vipName
            });
        },
        methods:{
            openShoppingCart(){
                this.$refs.popup.open()
                this.$refs.shopCart.show()
            }
        }
    }

 hive-app/static/images/no-img.png