123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670 |
- <template>
- <view class="content">
- <view class="header">
- <view class="header-row">
- <text>单据信息</text>
- </view>
- <view class="header-row r2">
- <view><text>购买日期:</text>{{panelData.orderDate}}</view>
- <view><text>使用门店:</text>{{panelData.useStoreName}}</view>
- </view>
- <view class="header-row r2">
- <view><text>客户名称:</text>{{panelData.orderBundle.customName||'--'}}</view>
- <view><text>手机号:</text>{{panelData.orderBundle.customMobile}}</view>
- </view>
- <view class="header-row">
- <view><text>套餐名称:</text>{{panelData.orderBundle.bundleName}}</view>
- </view>
- <view class="header-row r2">
- <view><text>套餐价格:</text>¥{{panelData.orderBundle.bundlePrice}}</view>
- </view>
- <view class="header-row">
- <view>
- <text>优惠金额:</text>
- ¥{{panelData.orderBundle.couponAmount+(panelData.orderBundle.ticketCouponAmount?panelData.orderBundle.ticketCouponAmount:0)}}
- <text class="couponText" v-if="panelData.orderBundle.couponAmount || panelData.orderBundle.ticketCouponAmount">
- (其中:
- <text class="couponText" v-if="usedCouponList.length" v-for="(item,index) in usedCouponList" :key="index">【{{item.title}}】使用 {{item.usedCount}}张,</text>
- <text class="couponText">【员工自主优惠】{{panelData.orderBundle.couponAmount}}元) </text>
- </text>
- </view>
- </view>
- <v-select ref="payType" v-show="false" :code="'PAY_PROCUCT_TYPE'"></v-select>
- <view class="header-row r2">
- <view><text>实际收款:</text>¥{{panelData.orderBundle.totalAmount}}</view>
- <view><text>支付方式:</text>{{filterpayType(panelData.orderBundle.payType)}}</view>
- </view>
- <view class="header-row r2">
- <view><text>销售渠道:</text>{{panelData.orderBundle.sellChannel}}</view>
- <view><text>销售人员:</text>{{panelData.orderBundle.sellerName}}</view>
- </view>
- <view class="header-row">
- <view><text>销售门店:</text>{{panelData.orderBundle.storeName}}</view>
- </view>
- <view class="header-row">
- <view><text>工单号:</text>{{panelData.orderBundle.number}}</view>
- </view>
- <view class="header-row">
- <view><text>创建渠道:</text>{{panelData.orderBundle.createChannel||'--'}}</view>
- </view>
-
- </view>
- <view class="tabs">
- <view class="need-treament" @click="cur = 0" :class="{ active: cur == 0 }">套餐内容</view>
- <view class="pay-close" @click="cur = 1" :class="{ active: cur == 1 }">使用记录</view>
- </view>
- <view class="cont-list" v-show="cur == 0">
- <view class="check-order-list" v-for="item in itemData" :key="item.id">
- <view class="check-row">
- <view>{{item.name}}</view>
- <view>
- 剩余:{{item.amount}}
- </view>
- </view>
- </view>
- <view v-if="itemData.length==0">
- <view class="noDate">暂无数据</view>
- </view>
- </view>
- <view class="cont-list" v-show="cur == 1">
- <view
- class="check-order-list"
- v-for="item in useHistoryData"
- :key="item.id"
- >
- <view class="check-row" >
- <view>{{item.startDate}}</view>
- <view>
- {{item.vehicleNumber}}
- </view>
- </view>
- <view class="check-row" >
- <view >
- {{item.name}}
- </view>
- <view>
- 使用:{{item.useNum}}
- </view>
- </view>
- <view class="check-row" >
- <view class="flex flex_column justify_center">
- <view >
- 服务门店:{{item.companyName}}
- </view>
- </view>
- </view>
- <view class="check-row" >
- <view class="flex flex_column justify_center">
- <view>
- 工单:{{item.number}}
- </view>
- </view>
- </view>
-
- </view>
- <view v-if="useHistoryData.length==0">
- <view class="noDate">暂无数据</view>
- </view>
- </view>
- <view class="footer flex align_center" v-show="showCancelBuy && (panelData.orderBundle.refundStatus==undefined || panelData.orderBundle.refundStatus == 1)">
- <u-button v-if="panelData.orderBundle.orderStatus=='PAED'" @click="cancelBuy()" size="medium" type="primary">取消购买</u-button>
- </view>
- </view>
- </template>
- <script>
- import _ from 'lodash'
- import vSelect from '@/components/select/v-select.vue'
- import { customerBundleDetail, customerBundleUseHistory, cancelBuy } from '@/api/customerBundle'
- export default {
- components: {
- vSelect,
- },
- data() {
- return {
- payTypeList: [], // 付款方式
- usedCouponList: [], // 已使用优惠券列表
- cur: 0,
- id: '',
- panelData: {
- orderBundle: {}
- },
- showCancelBuy: false,
- storeList: [],
- itemData: [],
- useHistoryData: []
- };
- },
- onLoad(opts) {
- console.log(opts);
- this.id = opts.id;
- this.getCustomerBundleDetail();
- this.getCustomerBundleHistory();
- this.payTypeList = this.$store.state.vuex_paymentTypeList
- },
- methods: {
- filterpayType (val) {
- let dataList = this.payTypeList
- let _value = ''
- for (let i = 0; i < dataList.length; i++) {
- if (val == dataList[i].code) {
- _value = dataList[i].dispName
- break
- }
- }
- return _value
- },
- message(title){
- uni.showToast({
- icon:'none',
- title: title
- })
- },
- // 获取套餐信息
- getCustomerBundleDetail (){
- let _this = this
- customerBundleDetail({
- id: this.id
- }).then(res => {
- this.panelData = res.data
- let list = []
- _.forEach(res.data.customerBundleItemList, (item) => {
- list.push({
- name: item.itemName,
- amount: item.itemTimes + '次'
- })
- })
- _.forEach(res.data.customerBundlePartList, (item) => {
- list.push({
- name: item.partName,
- amount: item.quantity + (item.spec || '')
- })
- })
- this.itemData = list
- })
- },
- // 获取套餐使用记录
- getCustomerBundleHistory(){
- customerBundleUseHistory({
- id: this.id
- }).then(res => {
- let list = []
- if (res.data){
- _.forEach(res.data.orderItemList, (item) => {
- if (_.has(item, 'order')) {
- list.push({
- ...item.order,
- name: item.itemName,
- companyName: item.storeName,
- useNum: item.itemTimes + '次'
- })
- }
- })
- _.forEach(res.data.orderPartList, (item) => {
- if (_.has(item, 'order')) {
- list.push({
- ...item.order,
- name: item.partName,
- companyName: item.storeName,
- useNum: item.quantity + (item.spec || '')
- })
- }
- })
- }
- this.useHistoryData = list
- this.showCancelBuy = list.length == 0
- })
- },
- // 取消购买
- cancelBuy () {
- let _this = this
- clzConfirm({
- title: '提示',
- content: '取消购买套餐后,该套餐将无法再使用。确认取消购买吗?',
- success: function (res) {
- if (res.confirm||res.index==0) {
- cancelBuy({
- id: _this.id
- }).then(res => {
- console.log(res)
- if (res.status == 200) {
- uni.$emit('refreshBundle',{msg:'页面更新'})
- _this.message('取消购买成功')
- uni.navigateBack()
- } else {
- _this.message(res.message)
- }
- })
- } else if (res.cancel) {
- console.log('用户点击取消');
- }
- }
- })
- }
- },
- onShareAppMessage() {}
- };
- </script>
- <style lang="scss">
- page{
- height: 100%;
- }
- .content {
- padding: 0;
- display: flex;
- flex-direction: column;
- height: 100%;
- }
- .cont-list{
- // padding: 0upx 20upx;
- flex: 1;
- overflow-y: scroll;
- > view{
- &:last-child{
- border: 0;
- }
- }
- .check-order-list{
- background: #ffffff;
- padding: 10upx 20upx;
- margin: 15upx 25upx;
- border-radius: 6upx;
- box-shadow: 1px 1px 3px #EEEEEE;
- .check-row{
- display: flex;
- align-items: center;
- padding: 15upx 10upx;
- font-size: 30upx;
- word-break: break-all;
- &:first-child{
- color: #666;
- }
- > view{
- &:first-child{
- flex-grow: 1;
- width: 60%;
- }
- }
- .action{
- margin: 0 6rpx;
- padding: 0 20rpx;
- color: #fff;
- }
- .edit{
- background-color: #f9ba09;
- }
- .view{
- background-color: #ff7801;
- }
- .del{
- background-color: #f72525;
- }
- .finish{
- background-color: #2d8cf0;
- }
- .pay{
- background-color: #10c71e;
- }
- .check-btns{
- width: '50%';
- display: flex;
- align-items: center;
- justify-content: flex-end;
- > view{
- margin-left: 35upx;
- font-size: 28upx;
- }
- }
- .u-tag{
- border-radius: 0;
- }
- .uni-icons{
- margin: 0 5upx;
- }
- }
- }
- }
- .footer{
- padding: 20upx;
- }
- .noDate {
- font-size: 32rpx;
- color: #999;
- text-align: center;
- padding: 60rpx 0;
- }
- .header {
- position: relative;
- background: #FFFFFF;
- padding: 10upx 20upx;
- font-size: 30upx;
- }
- .header-row{
- display: flex;
- align-items: center;
- padding: 10upx 0;
- color: #666666;
- .couponText{
- font-size: 28rpx;
- color: #666;
- }
- &:first-child{
- font-size: 32upx;
- color: #333333;
- }
- > view{
- &:first-child{
- margin-left: 20upx;
- }
- text{
- color: #333333;
- }
- }
- }
- .header-row.r3{
- > view{
- width: 33%;
- }
- }
- .header-row.r2{
- > view{
- width: 50%;
- }
- }
- .img-box > image {
- width: 25%;
- height: 160rpx;
- float: left;
- padding: 20rpx;
- }
-
- .carImage {
- width: 104rpx;
- height: 104rpx;
- text-align: center;
- padding: 15rpx;
- }
- .little-img {
- width: 104rpx;
- height: 104rpx;
- }
- .text {
- font-size: 36rpx;
- }
- .text1 {
- color: rab(40, 40, 40);
- font-size: 30rpx;
- }
-
- .tabs {
- width: 100%;
- background: #fff;
- margin: 20rpx auto 0 auto;
- border-radius: 10rpx;
- }
- .need-treament,
- .pay-close,
- .good-condition {
- font-size: 28rpx;
- color: rgb(74, 74, 74);
- display: inline-block;
- text-align: center;
- padding: 20rpx 0;
- width: 25%;
- }
-
- .need-treament-tab1 {
- margin: 20rpx auto 0 auto;
- background: #fff;
- display: flex;
- border-bottom: 1rpx solid rgb(228, 228, 228);
- width: 100%;
- align-items: center;
- }
- .oil {
- flex-grow: 1;
- padding: 0 16rpx;
- font-size: 30rpx;
- display: flex;
- align-items: center;
- }
- .jiyou {
- width: 44rpx;
- height: 44rpx;
- margin-right: 16rpx;
- }
- .zhang {
- width: 20%;
- }
- .zhang-logo {
- height: 72rpx;
- width: 110rpx;
- display: inline-block;
- }
- .intruce {
- font-size: 36rpx;
- display: inline-block;
- margin: 36rpx 0 0 -60rpx;
- width: 14%;
- text-align: center;
- }
- .list {
- width: 80%;
- }
- .matter {
- background: #fff;
- border-bottom: 1rpx dashed rgb(228, 228, 227);
- display: flex;
- padding: 30rpx;
- }
- .matter .red {
- background: #f2711c;
- }
- .matter .blue {
- background: #07cc04;
- }
- .matter .green {
- background: #239ff2;
- }
- .problem {
- font-size: 24rpx;
- background: #fefefe;
- width: 90rpx;
- text-align: center;
- border-radius: 10rpx;
- padding: 6rpx;
- color: #fff;
- }
- .num-left {
- width: 20%;
- }
- .num-right {
- width: 80%;
- color: rgb(74, 74, 74);
- padding-top: 6rpx;
- }
- .num-right > view {
- display: flex;
- align-items: center;
- font-size: 24rpx;
- margin-bottom: 20rpx;
- }
- .num-right > view:last-child {
- margin-bottom: 0;
- }
- .num-right .uni-badge {
- margin: 0 10rpx;
- }
- .number {
- font-size: 26rpx;
- background: #ccc;
- border-radius: 50rpx;
- text-align: center;
- width: 40rpx;
- height: 40rpx;
- display: inline-block;
- margin: 0 8rpx 0 0;
- }
- .num-list {
- font-size: 30rpx;
- display: inline-block;
- color: rgb(74, 74, 74);
- }
- .cle {
- clear: both;
- }
- .instructions-box {
- width: 100%;
- background: #fff;
- margin: 0 auto;
- }
- .instructions {
- width: 16%;
- font-size: 24rpx;
- background: rgb(252, 232, 41);
- width: 90rpx;
- text-align: center;
- border-radius: 10rpx;
- color: rgb(74, 74, 74);
- padding: 6rpx;
- }
- .elaborate {
- width: 76%;
- font-size: 24rpx;
- color: rgb(74, 74, 74);
- float: right;
- margin: -50rpx 0 30rpx 0;
- }
- .int {
- padding: 30rpx 0 0 30rpx;
- }
- .del {
- clear: both;
- }
- .illustrations {
- width: 100%;
- margin: 0 auto;
- }
- .banner {
- width: 100%;
- height: 150rpx;
- }
- .horn {
- width: 96%;
- background: #ffffff;
- margin: 10rpx auto 0 auto;
- border-bottom: 1rpx solid rgb(228, 228, 227);
- }
- .laba {
- width: 44rpx;
- height: 44rpx;
- margin: 20rpx 0 10rpx 20rpx;
- }
- .uni-collapse-cell__title-text {
- font-size: 24rpx !important;
- }
- .right-text {
- font-size: 24rpx;
- }
- .video-box {
- padding: 20rpx;
- text-align: center;
- }
- .horn-text {
- font-size: 36rpx;
- float: right;
- margin: -64rpx 550rpx 0 0;
- }
- .instructions-box4 {
- width: 96%;
- background: #fff;
- margin: 30rpx auto 0 auto;
- border-bottom: 1rpx dashed rgb(228, 228, 227);
- }
- .condition {
- background: #fff;
- margin: 30rpx auto 0 auto;
- }
- .dianchi-img {
- width: 60rpx;
- height: 60rpx;
- background: #aaff7f;
- border-radius: 100%;
- padding: 20rpx;
- }
- .battery-box {
- width: 100%;
- padding-bottom: 20rpx;
- }
- .bateery {
- font-size: 26rpx;
- padding: 10rpx 0;
- }
- .condit-title {
- font-size: 30rpx;
- color: rgb(40, 40, 40);
- border-bottom: 1rpx solid rgb(228, 228, 227);
- padding: 20rpx 0 20rpx 20rpx;
- }
- .lis-img {
- display: inline-block;
- width: 25%;
- text-align: center;
- margin: 30rpx 0 0 0;
- color: rgb(74, 74, 74);
- }
- .note {
- padding: 30rpx;
- font-size: 26rpx;
- color: rgb(74, 74, 74);
- }
- .note-text {
- padding: 20rpx 0 0 0;
- line-height: 45rpx;
- color: #666;
- }
- .disclaimer {
- padding: 30rpx;
- font-size: 26rpx;
- color: rgb(74, 74, 74);
- }
- .disclaimer > view {
- margin-bottom: 20rpx;
- line-height: 45rpx;
- }
- .active {
- border-bottom: 6rpx solid rgb(85, 170, 255);
- color: #009AE1;
- }
- .uni-badge {
- margin: 8rpx 16rpx 0 16rpx;
- }
- </style>
|