542 lines
12 KiB
Vue
542 lines
12 KiB
Vue
<template>
|
|
<view class="container safe-area-inset-bottom">
|
|
<!-- 搜索 -->
|
|
<view class="search">
|
|
<u-search placeholder="输入药品名称" bg-color="#F5f5f5" color="#DDDDDD" border-color="#F5f5f5"
|
|
:show-action="false" maxlength="21" height="66" :clearabled="true" shape="round" v-model="keyword"
|
|
@search="toSearch">
|
|
</u-search>
|
|
</view>
|
|
|
|
<!-- 商品 -->
|
|
<!-- //药品分类左 -->
|
|
<view class="goods">
|
|
<view class="goods_left" @touchmove.stop>
|
|
<scroll-view scroll-y scroll-with-animation class="u-menu-scroll-view" :scroll-top="scrollTop"
|
|
:scroll-into-view="itemId">
|
|
<view v-for="(item,index) in drugCategoryLists" :key="item.id" class="u-tab-item"
|
|
:class="[num == item.id ? 'u-item-active' : '']" @tap.stop="changeStyle(item.id)"
|
|
@click="handleCategory1(item.id,index)">
|
|
<text class="u-line-1">{{item.category_name}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- //药品分类右 -->
|
|
<view class="goods_right">
|
|
<view class="_btn">
|
|
<scroll-view scroll-x style="white-space: nowrap;" @touchmove.stop>
|
|
<!-- <view v-for="item in drugCategoryLists" > -->
|
|
<view v-for="(item1,index) in drugCategoryLists[selectIndex].subs"
|
|
:class="current==item1.id?'btns_active' : 'btns'" @click="handleCategory2(item1.id)">
|
|
{{item1.category_name}}
|
|
</view>
|
|
<!-- </view> -->
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 药品 -->
|
|
<view class="second">
|
|
<!-- 商品列表 -->
|
|
<view class="list" v-for="(item,index) in drugLists" @click="toDetail(item.id)">
|
|
<text class="cf">{{item.is_otc=='0'?'处方药':'非处方药'}}</text>
|
|
<view class="img">
|
|
<image :src="item.image" mode=""></image>
|
|
</view>
|
|
<view class="it">
|
|
<view class="it_name">{{item.drug_name}}</view>
|
|
<view class="it_info">{{item.small_info}}</view>
|
|
<view class="it_price">
|
|
<text>{{item.drugstore_drug.price}}</text>
|
|
<image src="/static/home/gwc.png" mode=""
|
|
@tap.stop="toCartImg(item.drugstore_drug.drug_id)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 选择数量 -->
|
|
<u-popup v-model="show" mode="bottom" border-radius="28" length="55%" :safe-area-inset-bottom="true"
|
|
:closeable="true">
|
|
<view class="popup" v-for="(item,index) in drugLists" :key="item.id" v-if="item.id==drug_id">
|
|
<view class="good">
|
|
<image :src="item.image" mode=""></image>
|
|
<view class="good_">
|
|
<text>{{item.drug_name}}</text>
|
|
<text class="price">{{item.drugstore_drug.price}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="good_num">
|
|
<text>购买数量</text>
|
|
<uni-number-box :min="1" :max="9" @change="changeValue()"></uni-number-box>
|
|
</view>
|
|
|
|
<view class="btn">
|
|
<view class="to_btn" @click="toCart">
|
|
加入购物车
|
|
</view>
|
|
<view class="to_pay" @click="tocartPay">
|
|
立即购买
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
drugCategorys,
|
|
drugLists,
|
|
addCart
|
|
|
|
} from '../../request/api/api'
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: "",
|
|
scrollTop: 0, //tab标题的滚动条位置
|
|
oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
current: 1, // 预设当前项的值
|
|
num: 0,
|
|
itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
drugCategoryLists: [], //药品分类
|
|
category_first: 0, //药品分类一级id
|
|
category_second: 0,
|
|
drugLists: [],
|
|
selectIndex: 0,
|
|
drug_id: '',
|
|
qty: '',
|
|
// list: [{
|
|
// id: 1
|
|
// }, {
|
|
// id: 1
|
|
// }, {
|
|
// id: 1
|
|
// }, {
|
|
// id: 1
|
|
// }, {
|
|
// id: 1
|
|
// }, {
|
|
// id: 1
|
|
// }, {
|
|
// id: 1
|
|
// }, {
|
|
// id: 1
|
|
// }],
|
|
// tabbar: JSON.parse(uni.getStorageSync('categroy')), // 渲染的数据，放在最后供你们测试
|
|
arr: [], // 储存距离顶部高度的数组
|
|
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
show: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 搜索
|
|
toSearch() {
|
|
this.getList()
|
|
},
|
|
changeValue(value) {
|
|
this.qty = value
|
|
// console.log('返回数值：', value);
|
|
},
|
|
/*切换需要*/
|
|
changeStyle(id) {
|
|
this.num = id
|
|
},
|
|
// 详情
|
|
toDetail(e) {
|
|
uni.navigateTo({
|
|
url: '/subPackages/shop/orders-detail?id=' + e
|
|
})
|
|
},
|
|
// 加入购物车
|
|
toCart() {
|
|
this.addToCart()
|
|
uni.navigateTo({
|
|
url: '/subPackages/shop/shop-cate?id=' + this.drug_id
|
|
})
|
|
},
|
|
//图标加入购物车
|
|
toCartImg(e) {
|
|
// this.show = true
|
|
// let id=e
|
|
this.drug_id = e
|
|
if (this.drug_id) {
|
|
this.show = true
|
|
}
|
|
|
|
console.log(e, 666);
|
|
},
|
|
// 立即购买
|
|
tocartPay() {
|
|
uni.navigateTo({
|
|
url: '/subPackages/shop/shop-pay?id=' + this.drug_id
|
|
// url: '/subPackages/shop/shop-pay?id='+this.drug_id+'&&qty='+this.qty
|
|
})
|
|
},
|
|
//点击药品一级分类
|
|
handleCategory1(e, index) {
|
|
console.log('handleCategory1')
|
|
this.num = e
|
|
this.category_first = e - 1
|
|
this.selectIndex = index
|
|
if (this.selectIndex == 0) {
|
|
this.category_second = 0
|
|
} else {
|
|
this.category_second = 7
|
|
}
|
|
this.getDrugList()
|
|
console.log(e);
|
|
},
|
|
//点击药品二级分类
|
|
handleCategory2(e) {
|
|
|
|
console.log('handleCategory2', this.selectIndex, this.current)
|
|
|
|
this.current = e
|
|
this.category_second = e - 3
|
|
this.getDrugList()
|
|
console.log(e);
|
|
},
|
|
|
|
//获取药品分类
|
|
getList() {
|
|
drugCategorys({
|
|
method: "post",
|
|
data: {
|
|
store_id: uni.getStorageSync('store_id') || '11001',
|
|
}
|
|
}).then((res) => {
|
|
// console.log(res, 'list');
|
|
if (res.data.code == 0) {
|
|
console.log(res.data.data[0]);
|
|
this.drugCategoryLists = res.data.data
|
|
this.category_first = res.data.data.map(x => x.id)
|
|
this.num = res.data.data[0].id //初始选中
|
|
this.current = res.data.data[0].subs[0].id //初始选中2
|
|
// console.log(this.category_first);
|
|
}
|
|
})
|
|
},
|
|
getDrugList() {
|
|
drugLists({
|
|
method: "post",
|
|
data: {
|
|
store_id: uni.getStorageSync('store_id') || '11001',
|
|
category_first: this.category_first,
|
|
category_second: this.category_second,
|
|
}
|
|
}).then((res) => {
|
|
// console.log(res, 'list');
|
|
if (res.data.code == 0) {
|
|
this.drugLists = res.data.data
|
|
|
|
|
|
console.log(res.data)
|
|
}
|
|
|
|
})
|
|
},
|
|
//加入购物车
|
|
addToCart() {
|
|
addCart({
|
|
method: "post",
|
|
data: {
|
|
store_id: uni.getStorageSync('store_id') || '11001',
|
|
drug_id: this.drug_id,
|
|
change_qty: this.qty
|
|
// id:this.id
|
|
}
|
|
}).then((res) => {
|
|
// console.log(res, 'list');
|
|
if (res.data.code == 0) {
|
|
console.log(res);
|
|
|
|
}
|
|
|
|
})
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
this.getList();
|
|
this.getDrugList()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
background: #F6F9FB;
|
|
width: 750rpx;
|
|
max-height: 100%;
|
|
min-height: 100vh;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.search {
|
|
width: 750rpx;
|
|
background-color: #fff;
|
|
height: 98rpx;
|
|
margin: 0 auto;
|
|
padding: 16rpx 30rpx;
|
|
|
|
.u-search {
|
|
width: 686rpx;
|
|
height: 66rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.popup {
|
|
padding: 56rpx 36rpx 30rpx 60rpx;
|
|
|
|
.good {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
|
|
.good_ {
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
font-weight: bold;
|
|
color: #232323;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
color: #F93030;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.good_num {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 70rpx 0;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #232323;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.to_btn {
|
|
width: 280rpx;
|
|
height: 70rpx;
|
|
background: #D0E4FF;
|
|
border-radius: 64rpx;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
color: #1777FF;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.to_pay {
|
|
width: 280rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
background: #1777FF;
|
|
border-radius: 64rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goods {
|
|
width: 750rpx;
|
|
min-height: calc(100vh - 98rpx);
|
|
display: flex;
|
|
|
|
.goods_left {
|
|
width: 184rpx;
|
|
background: #fff;
|
|
margin-right: 16rpx;
|
|
|
|
.u-tab-item {
|
|
width: 184rpx;
|
|
height: 100rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: bold;
|
|
color: #9EA7B1;
|
|
}
|
|
|
|
.u-item-active {
|
|
width: 184rpx;
|
|
height: 100rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
background: #F6F9FB;
|
|
border-left: 4rpx solid #4175EE;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
font-weight: bold;
|
|
color: #232323;
|
|
}
|
|
}
|
|
|
|
.goods_right {
|
|
width: 530rpx;
|
|
background: #F6F9FB;
|
|
|
|
._btn {
|
|
width: 530rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
|
|
.btns {
|
|
display: inline-block;
|
|
line-height: 54rpx;
|
|
height: 54rpx;
|
|
padding: 2rpx 20rpx;
|
|
text-align: center;
|
|
background: #DFDFDF;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
font-weight: bold;
|
|
color: #666666;
|
|
margin-right: 20rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.btns_active {
|
|
display: inline-block;
|
|
line-height: 54rpx;
|
|
height: 54rpx;
|
|
padding: 2rpx 20rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
font-weight: bold;
|
|
margin-right: 20rpx;
|
|
border-radius: 8rpx;
|
|
background: #DEE8F6;
|
|
color: #4175EE;
|
|
}
|
|
}
|
|
|
|
.second {
|
|
width: 530rpx;
|
|
|
|
.list {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 0 15rpx;
|
|
width: 530rpx;
|
|
height: 248rpx;
|
|
background: #FFFFFF;
|
|
margin: 0rpx auto 20rpx;
|
|
position: relative;
|
|
|
|
.cf {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: inline-block;
|
|
width: 100rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 8rpx;
|
|
background: #D0E4FF;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #4175EE;
|
|
}
|
|
|
|
.img {
|
|
width: 140rpx;
|
|
height: 180rpx;
|
|
margin-right: 10rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.it {
|
|
flex: 1;
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
|
|
.it_name {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #232323;
|
|
}
|
|
|
|
.it_info {
|
|
padding-left: 10rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
margin: 20rpx 0 48rpx 0;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.it_price {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #F93030;
|
|
}
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
background: #4491E9;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|