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/selectProduct/shoppingCart.vue | 143 ++++++++++++++++++++++++++---------------------
1 files changed, 78 insertions(+), 65 deletions(-)
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>
--
Gitblit v1.9.1