feat: 电子药箱小程序 - 4Tab药品管理
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
This commit is contained in:
陈誉午
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-stepper": "@vant/weapp/stepper/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/* components/cart-item/cart-item.wxss */
|
||||
@import "variables";
|
||||
|
||||
.item {
|
||||
background-color: white;
|
||||
// background-color: red;
|
||||
height: 300rpx;
|
||||
margin-bottom: $primary-gap;
|
||||
border-radius: $primary-border-radius;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $primary-gap;
|
||||
|
||||
.left {
|
||||
height: 300rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
|
||||
.pic {
|
||||
border-radius: $primary-border-radius;
|
||||
overflow: hidden;
|
||||
min-width: 200rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: $primary-gap;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
height: 100rpx;
|
||||
line-height: 120rpx;
|
||||
margin-left: $primary-gap/2;
|
||||
|
||||
.delete-button {
|
||||
color: $danger-color;
|
||||
font-size: $large-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right {
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 300rpx;
|
||||
max-width: 440rpx;
|
||||
|
||||
.name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
max-width: 500rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $large-font-size;
|
||||
font-weight: 700;
|
||||
text-align: end;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: end;
|
||||
justify-content: flex-end;
|
||||
float: right;
|
||||
|
||||
.stepper {
|
||||
margin-right: $primary-gap/2;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: $large-font-size;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
.stock {
|
||||
color: $gray-color;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: $large-font-size;
|
||||
font-weight: 700;
|
||||
text-align: end;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// @ts-nocheck
|
||||
// components/cart-item/cart-item.ts
|
||||
export { }
|
||||
const app = getApp<IAppOption>();
|
||||
Component({
|
||||
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
item: {},
|
||||
shoppingCart: {},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
totalPrice: 0,
|
||||
showStock: app.globalData.showStock
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
calcTotalPrice() {
|
||||
if (!this.data.shoppingCart || !this.data.shoppingCart.data) return 0;
|
||||
const total = this.data.shoppingCart.data.reduce((sum: number, item: any) => {
|
||||
return sum + item.price * item.count;
|
||||
}, 0);
|
||||
this.setData({ totalPrice: total });
|
||||
},
|
||||
handleCountChange(e: any) {
|
||||
this.setData({ item: { ...this.data.item, count: e.detail } })
|
||||
|
||||
const target = this.data.shoppingCart.data.find(
|
||||
(item: any) => item.skuId == this.data.item.skuId
|
||||
)
|
||||
if (target) target.count = e.detail;
|
||||
let storage = wx.getStorageSync("shoppingCart") || [];
|
||||
storage = storage.map((cart: any) => {
|
||||
if (cart.mbuId == this.data.shoppingCart.mbuId) {
|
||||
return this.data.shoppingCart;
|
||||
}
|
||||
return cart;
|
||||
});
|
||||
wx.setStorageSync("shoppingCart", storage);
|
||||
this.calcTotalPrice();
|
||||
this.triggerEvent('handleCountChange', {
|
||||
totalPrice: this.data.totalPrice
|
||||
})
|
||||
},
|
||||
handleDelete() {
|
||||
this.triggerEvent('delete', {
|
||||
skuId: this.data.item.skuId
|
||||
})
|
||||
}
|
||||
},
|
||||
lifetimes: {
|
||||
created: function () {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,30 @@
|
||||
<!--components/cart-item/cart-item.wxml-->
|
||||
<view class="item">
|
||||
<view class="left">
|
||||
<view class="pic">
|
||||
<image src="{{item.picUrl}}"></image>
|
||||
</view>
|
||||
<view class="delete">
|
||||
<view bind:tap="handleDelete" class="delete-button">
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="right">
|
||||
<view class="name">{{item.name}}</view>
|
||||
<view class="price">￥ {{item.price/100}} </view>
|
||||
<!-- 这里用计数器 -->
|
||||
<view class="count">
|
||||
<!-- max="{{showStock?checkItem ? checkItem.stock : skus[0].stock :99999}}" -->
|
||||
<van-stepper integer min="1" bind:change="handleCountChange" max="{{showStock?item.stock:99999}}" value="{{item.count}}"
|
||||
class="stepper"></van-stepper>
|
||||
<view class="unit">{{item.unit}}</view>
|
||||
</view>
|
||||
|
||||
<view class="total-price">总金额:￥ {{item.price*item.count/100}}</view>
|
||||
|
||||
<view class="stock" wx:if="{{showStock}}">库存：{{item.stock}}</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user