From c6bac585288a7841b1d1f5fd774b7c765955815b Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Thu, 24 Dec 2020 16:09:42 +0800
Subject: [PATCH] 商品订单联调
---
hive-app/pages/workbench/selectCustomer.vue | 1
hive-app/common/jssdk/filters.js | 16 +
hive-app/pages/workbench/selectService.vue | 11
hive-app/static/images/no-img.png | 0
hive-app/pages/member/detail.vue | 10
hive-app/pages/workbench/selectProduct/index.vue | 260 ++++++++++++++++++-------
hive-app/pages/workbench/customerInfo.vue | 19 +
hive-app/main.js | 11 +
hive-app/pages/workbench/confirmOrder.vue | 17 +
hive-app/pages/workbench/selectProduct/shoppingCart.vue | 143 +++++++------
hive-app/common/styles/index.css | 4
hive-app/components/filterDropdown/index.vue | 1
hive-app/pages/mine/index.vue | 37 ++
hive-app/pages/member/index.vue | 1
hive-app/components/noRecord/index.vue | 23 ++
15 files changed, 378 insertions(+), 176 deletions(-)
diff --git a/hive-app/common/jssdk/filters.js b/hive-app/common/jssdk/filters.js
new file mode 100644
index 0000000..1a49f35
--- /dev/null
+++ b/hive-app/common/jssdk/filters.js
@@ -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;
\ No newline at end of file
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index 4a2e383..ddf03c4 100644
--- a/hive-app/common/styles/index.css
+++ b/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{
diff --git a/hive-app/components/filterDropdown/index.vue b/hive-app/components/filterDropdown/index.vue
index b73b26e..ff04547 100644
--- a/hive-app/components/filterDropdown/index.vue
+++ b/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;
diff --git a/hive-app/components/noRecord/index.vue b/hive-app/components/noRecord/index.vue
new file mode 100644
index 0000000..db3308b
--- /dev/null
+++ b/hive-app/components/noRecord/index.vue
@@ -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>
diff --git a/hive-app/main.js b/hive-app/main.js
index 692e40e..e5d4d3a 100644
--- a/hive-app/main.js
+++ b/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'
diff --git a/hive-app/pages/member/detail.vue b/hive-app/pages/member/detail.vue
index 29c4d53..b92d361 100644
--- a/hive-app/pages/member/detail.vue
+++ b/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>
diff --git a/hive-app/pages/member/index.vue b/hive-app/pages/member/index.vue
index e397c34..37866de 100644
--- a/hive-app/pages/member/index.vue
+++ b/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>
diff --git a/hive-app/pages/mine/index.vue b/hive-app/pages/mine/index.vue
index 19cfa5d..2c18582 100644
--- a/hive-app/pages/mine/index.vue
+++ b/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()
}
}
}
diff --git a/hive-app/pages/workbench/confirmOrder.vue b/hive-app/pages/workbench/confirmOrder.vue
index c45dd58..d7b9c6d 100644
--- a/hive-app/pages/workbench/confirmOrder.vue
+++ b/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:{
}
diff --git a/hive-app/pages/workbench/customerInfo.vue b/hive-app/pages/workbench/customerInfo.vue
index 5a69135..9ed791c 100644
--- a/hive-app/pages/workbench/customerInfo.vue
+++ b/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;
+ }
}
})
}
diff --git a/hive-app/pages/workbench/selectCustomer.vue b/hive-app/pages/workbench/selectCustomer.vue
index ef2017f..144fae1 100644
--- a/hive-app/pages/workbench/selectCustomer.vue
+++ b/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>
diff --git a/hive-app/pages/workbench/selectProduct/index.vue b/hive-app/pages/workbench/selectProduct/index.vue
index 47d7715..298d203 100644
--- a/hive-app/pages/workbench/selectProduct/index.vue
+++ b/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>
+ <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-14 blue ml-10">¥110.00</text>
+ <text class="font-16 blue">¥{{totalAmount}}</text>
</view>
- <navigator url="../confirmOrder">
- <button class="blue-btn btn mr-0">提交订单</button>
- </navigator>
+ <button class="blue-btn btn mr-0" @click="submit" :disabled="isEnableSumbit">提交订单</button>
</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{
- padding: 10px 10px;
- box-shadow:0 6px 100px rgba(237,234,244,1);
- }
- .shopping-icon{
- font-size: 28px;
+ .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-num{
- width: 20px;
- height: 20px;
- background: #518EFF;
- border-radius: 50%;
- color: #FFFFFF;
+ .footer .icon-car-wrap{
+ position: relative;
+ margin-right: 15px;
+ }
+ .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;
diff --git a/hive-app/pages/workbench/selectProduct/shoppingCart.vue b/hive-app/pages/workbench/selectProduct/shoppingCart.vue
index 81a57bc..43f56fe 100644
--- a/hive-app/pages/workbench/selectProduct/shoppingCart.vue
+++ b/hive-app/pages/workbench/selectProduct/shoppingCart.vue
@@ -1,96 +1,109 @@
<template>
<!-- 购物车 -->
- <view class="popup-content">
- <view class="popup-header flex justify-between">
- <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>
- </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>
- </view>
+ <uni-popup ref="popup" type="bottom">
+ <view class="popup-content">
+ <view class="popup-header">
+ <text class="blue">已选商品</text>
+ <view class="flex align-center">
+ <text class="iconfont iconlajixiang_huaban1 gray"></text>
+ <text class="gray font-14" @click="_reset">清空</text>
</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 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>
- <text class="font-14 blue ml-10">¥110.00</text>
- </view>
- <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
+ </scroll-view>
</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>
diff --git a/hive-app/pages/workbench/selectService.vue b/hive-app/pages/workbench/selectService.vue
index 3d432d7..a437d22 100644
--- a/hive-app/pages/workbench/selectService.vue
+++ b/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()
}
}
}
diff --git a/hive-app/static/images/no-img.png b/hive-app/static/images/no-img.png
new file mode 100644
index 0000000..3f50ff6
--- /dev/null
+++ b/hive-app/static/images/no-img.png
Binary files differ
--
Gitblit v1.9.1