123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <template>
- <view v-show="data.bundlePartList || data.bundleItemList" class="bundle_detail_wrap">
- <view class="uni-col-10" >
- <view class="list-title flex align_center justify_between" hover-class="navigator-hover">
- <view class="bundle-name">{{data.name}}</view>
- </view>
- <!-- 套餐包含服务项 -->
- <view v-show="serverList.length" class="bundle-list flex flex_column" v-for="item in serverList" :key="item.id">
- <view class="line-height font32">
- {{item.itemName}}-{{item.itemClsName}}
- </view>
- <view class="flex align_end justify_between">
- <view class="uni-col-6 flex flex_column">
- <text class="line-height">服务价格:¥{{item.itemPrice||0}}</text>
- <text class="line-height">次数<text style="padding: 0 2px;">{{item.times}}</text>次</text>
- </view>
- <view class="line-height">
- 价值<text style="padding: 0 2px;font-weight: bold;">{{ item.itemPrice * item.times || 0 }}</text>元
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props:{
- data: {
- type: Object,
- default: function(){
- return {}
- }
- },
- // 父级页面 detail:套餐详情 sellOrder:购买套餐
- parentPage: {
- type: String,
- default: ''
- }
- },
- watch:{
- data (newV,oldV){
- this.partList = newV ? newV.bundlePartList : []
- this.serverList = newV ? newV.bundleItemList : []
- }
- },
- data() {
- return {
- partList: this.data.bundlePartList ,
- serverList: this.data.bundleItemList
- }
- },
- onLoad() {
-
- },
- methods: {
-
- }
- }
- </script>
- <style lang="scss">
- .bundle_detail_wrap{
- background-color: white;
- padding: 20rpx;
- margin-bottom: 20rpx;
- .flex{
- display: flex;
- }
- .align_end{
- align-items: flex-end;
- }
- .justify_between{
- justify-content: space-between;
- }
- .flex_column{
- flex-direction: column;
- }
- .bundle-name{
- font-size: 30rpx;
- font-weight: bold;
- }
- .pack-num{
- color: #8b8b8b;
- font-size: 28rpx;
- margin-left: 40rpx;
- }
- .price{
- color: red;
- font-size: 30rpx;
- }
- .bundle-list{
- padding: 10rpx 0 20rpx ;
- font-size: 28rpx;
- border-bottom: 1px solid #eee;
- }
- .bundle-list:last-child{
- border-bottom: none;
- }
- .list-title{
- padding-bottom: 20rpx;
- border-bottom: 1px solid #eee;
- }
- .line-height {
- line-height: 60rpx;
- }
- .vip-text{
- font-size: 28rpx;
- font-style: oblique;
- margin-left: 3px;
- color: #fff;
- padding: 6rpx 12rpx 6rpx 10rpx;
- background-color: #ff5500;
- border-radius: 10rpx;
- }
- }
- </style>
|