|
@@ -0,0 +1,250 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <!-- loading -->
|
|
|
+ <view class="load" v-if="isLoading">
|
|
|
+ <van-loading type="spinner" color="#1989fa">加载中...</van-loading>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y>
|
|
|
+ <van-collapse :value="activeNames" @change="onChange">
|
|
|
+ <van-collapse-item v-for="(item,index) in dataList" :key="index" :title="item.bundleName" :name="index">
|
|
|
+ <template v-if="item.customerBundleItemList">
|
|
|
+ <view class="item-title">
|
|
|
+ <view class="list-item-left ">
|
|
|
+ <text style="font-size: 30rpx;font-weight: 600;">服务</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view v-for="(items,indexx) in item.customerBundleItemList" :key="indexx" class="list-item border-bottom-dashed">
|
|
|
+ <view class="list-item-left">
|
|
|
+ <text>{{items.itemName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-right">
|
|
|
+ <text>余{{items.itemTimes}}次</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <template v-if="item.customerBundlePartList">
|
|
|
+ <view class="item-title ">
|
|
|
+ <view class="list-item-left">
|
|
|
+ <text style="font-size: 30rpx;font-weight: 600;">配件</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view v-for="(items,indexxx) in item.customerBundlePartList" :key="indexxx" class="list-item border-bottom-dashed">
|
|
|
+ <view class="list-item-left">
|
|
|
+ <text>{{items.partName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-item-right">
|
|
|
+ <text>余{{items.quantity}} {{items.unit?items.unit:''}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view @click="intoDetail(item)" class="show-detail-box">
|
|
|
+ <view class="show-detail">
|
|
|
+ <text>查看使用明细</text>
|
|
|
+ <img src="/static/img/show.png" >
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </scroll-view>
|
|
|
+ <view v-if="isLoading && dataList.length ==0 " class="no-data">
|
|
|
+ 暂无数据
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeNames: [],
|
|
|
+ dataList:[{
|
|
|
+ bundleName: 'ceshijh',
|
|
|
+ id: 1,
|
|
|
+ customerBundleItemList: [
|
|
|
+ {
|
|
|
+ itemName: '111',
|
|
|
+ itemTimes: 1
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ customerBundlePartList: [
|
|
|
+ {
|
|
|
+ partName: '111',
|
|
|
+ quantity: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ partName: '111',
|
|
|
+ quantity: 1
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },{
|
|
|
+ bundleName: 'ceshijh',
|
|
|
+ id: 1,
|
|
|
+ customerBundleItemList: [
|
|
|
+ {
|
|
|
+ itemName: '111',
|
|
|
+ itemTimes: 1
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ customerBundlePartList: [
|
|
|
+ {
|
|
|
+ partName: '111',
|
|
|
+ quantity: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ partName: '111',
|
|
|
+ quantity: 1
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ isLoading:false , //判断页面数据是否请求完全
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 进入套餐详情
|
|
|
+ intoDetail(item) {
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/pages/packageDetail/main?customerBundleId='+item.id +'&bundleName='+item.bundleName
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 手风琴改变
|
|
|
+ onChange(event) {
|
|
|
+ console.log(event,'eeeeee')
|
|
|
+ this.activeNames = event.mp.detail
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+ .content{
|
|
|
+ padding: 15rpx 40rpx;
|
|
|
+ font-size : 14px;
|
|
|
+ background: rgb(245,245,245);
|
|
|
+ height: calc(100vh);
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ .no-data{
|
|
|
+ font-size: 36rpx;
|
|
|
+ background: rgb(245,245,245);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .load {
|
|
|
+ height: calc(100vh);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .van-collapse:before{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 0;
|
|
|
+ content: '';
|
|
|
+ -webkit-transform: scaleY(0.5);
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ }
|
|
|
+ .van-collapse-cell--open{
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .van-collapse-cell{
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: rgb(40,40,40);
|
|
|
+ border-bottom:20rpx solid rgb(245,245,245);
|
|
|
+ }
|
|
|
+ .van-collapse-cell__title{
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+ .van-collapse-cell__title :after {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0rpx;
|
|
|
+ left: 0px;
|
|
|
+ height:0rpx;
|
|
|
+ content: '';
|
|
|
+ -webkit-transform: scaleY(0.5);
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ background:rgb(245,245,245) ;
|
|
|
+ }
|
|
|
+ .show-detail-box{
|
|
|
+ height: 110rpx;
|
|
|
+ text-align:center;
|
|
|
+ line-height:110rpx;
|
|
|
+ }
|
|
|
+ .show-detail{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: grb(74,74,74);
|
|
|
+ }
|
|
|
+ .show-detail image{
|
|
|
+ width: 18rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .list-item-title{
|
|
|
+ width: 100%;
|
|
|
+ height: 120rpx;
|
|
|
+ line-height: 110rpx;
|
|
|
+ }
|
|
|
+ .list-item-left{
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .item-title{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-weight:600;
|
|
|
+ color: rgb(40,40,40);
|
|
|
+ }
|
|
|
+ .border-bottom-solid{
|
|
|
+ border-bottom: 1px solid rgb(228,228,228);
|
|
|
+ }
|
|
|
+ .border-bottom-dashed{
|
|
|
+ border-bottom: 1px dashed rgb(228,228,228);
|
|
|
+ }
|
|
|
+ .list-item{
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 90%;
|
|
|
+ height:110rpx ;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ color: rgb(40,40,40);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items:center;
|
|
|
+ }
|
|
|
+ .list-item-right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .back-img{
|
|
|
+ width: 16rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+</style>
|