<template>
  <view>
    <view class="base-info pb20">
      <view class="content-title">{{baseData.BUSINESSPROCESS_NAME}}</view>
      <view class="main-card">
        <div class="card-title">
          <h4>{{baseData.SERVERPART_NAME}}</h4>
          <div class="card-status" :style="baseData.BUSINESSAPPROVAL_STATE!=9000 ?'color:#df7f42;':''">
            {{proStatus[baseData.BUSINESSAPPROVAL_STATE]||''}}</div>
        </div>
        <div class="base-body" style="align-items: center;">
          <i class="ico ico-user"></i><span class="item-title">申请人：</span><text>{{baseData.STAFF_NAME}}</text>
        </div>
        <div class="base-body" style="align-items: center;">
          <i class="ico ico-sjx"></i><span class="item-title">创建日期：
					</span><text>{{baseData.BUSINESS_STARTDATE}}</text>
        </div>
        <div class="base-body">
          <view class="uni-flex" style="align-items: center;">
            <i class="ico ico-bz"></i><span class="item-title">业务说明： </span>

          </view>

          <text>{{baseData.BUSINESSAPPROVAL_DESC}}</text>
        </div>
      </view>


      <view class="button-box" >
<!--        -->
        <span @tap="showPop(2000)" v-if="baseData.BUSINESSAPPROVAL_STATE<9000">
					<image src="/static/images/sh-btn.png" mode="aspectFit"></image> 审核
				</span>
<!--        -->
        <span @tap="showPop(3000)" v-if="baseData.BUSINESSAPPROVAL_STATE<9000">
					<image src="/static/images/bh-btn.png" mode="aspectFit"></image> 驳回
				</span>
      </view>

    </view>
    <view class="base-info mt20" v-if="baseData.RejectApproved && baseData.RejectApproved.length>0">
      <div class="uni-list-cell uni-collapse">
        <div class="cat-box uni-list-cell-navigate">
          <b>驳回意见</b>
        </div>
        <div class="process-box uni-collapse-content uni-active">
          <processUnit :item="baseData.RejectApproved[0]" :approveType="0" />
        </div>
      </div>
    </view>
    <view class="base-info">
      <div class="uni-list-cell uni-collapse">
        <div class="cat-box uni-list-cell-navigate"
             :class="cardShow ? ' uni-navigate-bottom' : 'uni-navigate-right'" @click="handleChangeCardShow">
          <b>审批流程</b>
        </div>
<!--        <div class="process-box uni-collapse-content" :class="cardShow ? 'uni-active' : ''" v-show="cardShow">-->
<!--          <processUnit v-for="item in baseData.ApproveList" :item="item" :key="item.APPROVED_ID"-->
<!--                       :approveType="1" />-->
<!--        </div>-->
          <view class="approveBox" v-if="cardShow">
              <view class="approveItem" v-for="(item,index) in approveMessageList" :key="index">
                  <view class="approve">
                      <view class="approveLeft">
<!--                          <i class="ico" :class=" { 'ico-bh': item.APPLYAPPROVE_TYPE===9999,'ico-tg':item.APPLYAPPROVE_TYPE===9000}"/>-->
                        <image class="typeIcon" :src="item.APPLYAPPROVE_TYPE<=9000?'/static/images/right-ico.png':item.APPLYAPPROVE_TYPE===9999?'/static/images/wrong-ico.png':''"/>
                          <text class="approveName">【{{item.APPLYAPPROVE_NAME}}】</text>
                      </view>
                      <text class="appDate">{{item.APPLYAPPROVE_DATE}}</text>
                  </view>
                  <view class="approveBottom">
                      <view class="bottomLeft">
                          <text class="leftLabel">{{item.STAFF_NAME}}</text>
                      </view>

                      <view class="bottomRight">
                          <text class="rightLabel">{{item.APPLYAPPROVE_INFO}}</text>
                      </view>
                  </view>
              </view>
          </view>
      </div>
    </view>

      <view class="page-title">{{baseData.ACCEPT_CODE == 100100 ? '商品新增' : '信息修改'}}详情</view>

      <view class="bigBox">
          <view class="pageTitleBox" v-if="WarehouseDetailList.WAREHOUSE_NAME">
              <view class="top" @click="handleChangeManager">
                  <view :class="showManager?'pageTitleBottom':'pageTitleRight'">管理处：</view>
                  <view class="bottom">{{WarehouseDetailList.WAREHOUSE_NAME}}</view>
              </view>
          </view>
          <view class="pageList" v-if="showManager">
              <div class="pageItem" v-for="(item,index) in WarehouseDetailList.DetailList" :key="index">
                  <div class="box">
                      <view class="top">
                          <text class="topTitle">{{item.COMMODITYTYPE_NAME}}</text>
                      </view>
                      <view class="headerBox">
                          <view class="shopName">{{item.COMMODITY_NAME}}</view>
                          <view class="shopPrice">售价：<text class="shopMoney">￥{{item.COMMODITY_SELLPRICE}}</text></view>
                      </view>
                      <view class="detailBox">
                          <view class="leftDetail">
                              <image class="code" src="../../static/images/txm_logo.png"/>
                              <text class="codeNumber">{{item.COMMODITY_BARCODE}}</text>
                          </view>
                          <view class="rightDetail">
                              <text class="ruleText">{{item.COMMODITY_RULE}}</text>
                              <text v-if="item.COMMODITY_RULE_ORI " class="ruleText" style="text-decoration: line-through;color: #cbcbcb">{{item.COMMODITY_RULE_ORI}}</text>
                              <text class="typeName" style="margin-left: 8rpx">{{item.COMMODITY_STATE===1?'有效':'无效'}}</text>
                          </view>
                      </view>
                  </div>
                  <div class="bottom" style="display: flex">
<!--                      <text v-if="item.COMMODITY_SELLPRICE_ORI">折扣前：-->
<!--                          <text class="priceBefore">￥{{item.COMMODITY_SELLPRICE}}</text>-->
<!--                          <text style="text-decoration: line-through;color: #cbcbcb">￥{{item.COMMODITY_SELLPRICE_ORI}}</text>-->
<!--                        <b class="uni-icon"-->
<!--                           :class="(item.COMMODITY_SELLPRICE_ORI < item.COMMODITY_SELLPRICE) ?'uni-icon-arrowthinup': ' uni-icon-arrowthindown'"></b>-->
<!--                      </text>-->
                      <view style="display: inline-block;width: 50%">折扣前：
                        <text class="priceBefore">￥{{item.COMMODITY_SELLPRICE }}</text>
                        <text v-if="item.COMMODITY_SELLPRICE_ORI" style="text-decoration: line-through;color: #cbcbcb">￥{{item.COMMODITY_SELLPRICE_ORI }}</text>
                        <b v-if="item.COMMODITY_SELLPRICE_ORI && item.COMMODITY_SELLPRICE"
                            class="uni-icon"
                           :class="(item.COMMODITY_SELLPRICE_ORI < item.COMMODITY_SELLPRICE) ?'uni-icon-arrowthinup': ' uni-icon-arrowthindown'"></b>
                      </view>
                      <view style="display: inline-block;width: 50%">折扣后：
                        <text class="priceBefore">￥{{item.COMMODITY_PURCHASEPRICE }}</text>
                        <text v-if="item.COMMODITY_PURCHASEPRICE_ORI" style="text-decoration: line-through;color: #cbcbcb">￥{{item.COMMODITY_PURCHASEPRICE_ORI }}</text>
                        <b v-if="item.COMMODITY_PURCHASEPRICE_ORI && item.COMMODITY_PURCHASEPRICE"
                            class="uni-icon"
                           :class="(item.COMMODITY_PURCHASEPRICE_ORI < item.COMMODITY_PURCHASEPRICE) ?'uni-icon-arrowthinup': ' uni-icon-arrowthindown'"></b>
                      </view>
                  </div>
              </div>
          </view>

          <view class="pageTitleBox" v-if="serverShopList.WAREHOUSE_NAME">
              <view class="top" @click="handleChangeShowService">
                  <view :class="showService?'pageTitleBottom':'pageTitleRight'">服务区：</view>
                  <view class="bottom">{{serverShopList.WAREHOUSE_NAME}}</view>
              </view>
          </view>
          <view class="pageList" v-if="showService">
              <div class="pageItem" v-for="(item,index) in serverShopList.DetailList.slice(0,showPage*20)" :key="index">
                  <div class="box">
                      <view class="top">
                          <text class="topTitle">{{item.COMMODITYTYPE_NAME}}</text>
                      </view>
                      <view class="headerBox">
                          <text  class="shopName">{{item.COMMODITY_NAME}}</text>
                          <text  class="shopPrice">售价：<text class="shopMoney">￥{{item.COMMODITY_SELLPRICE }}</text></text>
                      </view>
                      <view class="detailBox">
                          <view class="leftDetail">
                              <image class="code" src="../../static/images/txm_logo.png"/>
                              <text class="codeNumber">{{item.COMMODITY_BARCODE}}</text>
                          </view>
                          <view class="rightDetail">
                            <text class="ruleText">{{item.COMMODITY_RULE}}</text>
                            <text v-if="item.COMMODITY_RULE_ORI " class="ruleText" style="text-decoration: line-through;color: #cbcbcb">{{item.COMMODITY_RULE_ORI}}</text>
                              <text  class="typeName" style="margin-left: 8rpx">{{item.COMMODITY_STATE===1?'有效':'无效'}}</text>
                          </view>
                      </view>
                  </div>
                  <div class="bottom" v-if="item.COMMODITY_SELLPRICE">
                      <view v-if="item.COMMODITY_SELLPRICE_ORI">售价：
                          <text class="priceBefore">￥{{item.COMMODITY_SELLPRICE }}</text>
                          <text style="text-decoration: line-through;color: #cbcbcb">￥{{item.COMMODITY_SELLPRICE_ORI}}</text>
                        <b  v-if="item.COMMODITY_SELLPRICE_ORI && item.COMMODITY_SELLPRICE"
                            class="uni-icon"
                           :class="(item.COMMODITY_SELLPRICE_ORI < item.COMMODITY_SELLPRICE) ?'uni-icon-arrowthinup': ' uni-icon-arrowthindown'"></b>
                      </view>
                      <!--                  <text v-else>售价：<text class="priceBefore">￥{{item.COMMODITY_SELLPRICE}}</text></text>-->
                      <!--                  <text>折扣后：<text class="priceAfter">￥{{item.COMMODITY_PURCHASEPRICE}}</text></text>-->
                  </div>
              </div>
            <view class="load-more" v-if="serverShopList.DetailList && serverShopList.DetailList.length>showPage*20">
              <text @click="handleGetMore">{{'点击加载更多'}}</text>
            </view>
          </view>
      </view>

      <div class="opinion2" v-show="showOptionBox">
          <div>
              <p class="opinion2-title"><span>{{isback? '驳回':'确认'}}意见</span></p>
              <textarea v-model="PURCHASEDESC" :placeholder="'请填写'+(isback? '驳回':'确认')+'意见'" class="text-content check-reason" />
          </div>
          <div class="check-btn-box">
              <div class="check-btn no-check" @click="handleCloseShow(false)">取消</div>
              <div class="check-btn" @click="handleCloseShow(true)">确定</div>
          </div>
      </div>
      <div v-show="showOptionBox" class="shenhe-mask" @click.stop="maskFn()"></div>

  </view>
</template>

<script>
const json = {
  COMMODITY_NAME: '品名',
  COMMODITY_BARCODE: '条码',
  COMMODITYTYPE_NAME: '类别',
  COMMODITY_UNIT: '单位',
  COMMODITY_RULE: '规格',
  COMMODITY_STATE_NAME: '状态',
  COMMODITY_ORI: '产地',
  COMMODITY_RETAILPRICE: '售价',
  COMMODITY_PURCHASEPRICE: '进价',
  BUSINESSTYPE_NAME: '业态',
  COMMODITY_GRADE_NAME: '质量等级',
  ISBULK_NAME: '是否散装',
  METERINGMETHOD_NAME: '称重方式',
}

import {
  mapGetters, mapState
} from 'vuex'
import processUnit from '@/components/auditingProcess/item.vue'
import filesUnit from '@/components/filesComponent/fileUnit.vue'

export default {

  components: {
    filesUnit,
    processUnit
  },
  computed: {
    ...mapGetters({
      'users': 'getUser'
    }),
    ...mapState({
      user: (state)=>{
        return {
          UserId: state.userData.UserId,
          UserName: state.userData.UserName,
          Membership_Phone: state.userData.Membership_Phone,
          Membership_Id: state.userData.Membership_Id,
          Membership_Type: state.userData.Membership_Type
        }
      },
      toDoMsg: (state)=>{
        return state.toDoMsg
      },
      menus: (state)=> {
        return state.userData.AuthorityInfo
      }
    }),
  },
  data() {

    return {
      baseData: {},
      pageData: [],
      changeList: [],
      cateArr: [],
      cardShowMap: {},
      commodityTree: {},
      cardShow: true,
      doUser: false,
      proStatus: {
          2000: '待我处理',
          3000: '待我处理',
          9000: '已审结',
          9999: '已否决',
      },
      serverShopList:{
          WAREHOUSE_NAME:'',
          DetailList:''
      },
        WarehouseDetailList:{
            WAREHOUSE_NAME:'',
            DetailList:''
        },
        showManager:false,
        showService:false,
        approveMessageList:[],
        showOptionBox:false,
        isback:'',
        PURCHASEDESC:'',
      showPage:1,// 显示页数
    }
  },
  methods: {
    isShowCate(item) {

      this.cardShowMap[item.id] = !this.cardShowMap[item.id]
    },
    getYes(val) {
      return val === 1 ? '是 ' : '否'
    },
    handleGetMore(){
      this.showPage = this.showPage+1
    },
    handleChangeCardShow(){
      this.cardShow = !this.cardShow
    },
    maskFn(){
    },
    handleCloseShow(type){
      console.log('user',this.users)
      console.log('baseData',this.baseData)
      let _this = this
      if (type){
        if (this.isback){
          if (!_this.PURCHASEDESC){
            uni.showModal({
              title:'请输入驳回意见',
              showCancel:false
            })
            return
          }
          uni.showModal({
            title:'提示',
            content:'确认否决该申请？',
            success:function (res){
              if (res.confirm){
                _this.$request.$webGet('EShangApiMain/Seller/RejectUniformProinst',{
                  businessApprovalID:_this.baseData.BUSINESSAPPROVAL_ID,
                  approveedStaffId:_this.users.UserId,
                  approveedStaffName:_this.users.UserName,
                  approveedInfo: _this.PURCHASEDESC
                }).then(()=>{
                  uni.hideLoading()
                  uni.showToast({
                    title:res.Result_Desc,
                    icon:'none'
                  })
                  setTimeout(()=>{
                    _this.handleBack()
                  },500)
                })
              }
            }
          })
        }else{
          // 提交审批
          uni.showModal({
            title:'提示',
            content:'确认同意该申请？',
            success:function (res){
              console.log('res',res)
              if(res.confirm){
                uni.showLoading({
                  title:'正在加载'
                })
                _this.$request.$webGet('EShangApiMain/Seller/ApproveUniformProinst',{
                  businessApprovalID:_this.baseData.BUSINESSAPPROVAL_ID,
                  //
                  curProinstState:_this.baseData.BUSINESSAPPROVAL_STATE,
                  approveedStaffId:_this.users.UserId,
                  approveedStaffName:_this.users.UserName,
                  approveedInfo: _this.PURCHASEDESC
                }).then((rs)=>{
                  uni.hideLoading()
                  uni.showToast({
                    title:rs.Result_Desc,
                    icon:'none'
                  })
                  setTimeout(()=>{
                    _this.handleBack()
                  },500)
                })
              }
            }
          })
        }

      }else{
        this.showOptionBox = false
      }

    },
    handleBack(){
      uni.redirectTo({
        url: '/pages/businessApproval/newApproval'
      });
    },
    showPop(type) {
        if (type===2000){
            this.isback = false
        }else{
            this.isback = true
        }
        this.showOptionBox = true

      // let _this = this
      // let url = ''
      // switch (type) {
      //   case 4000:
      //     url = '/pages/auditingPop/transfer?businessType=2000&PROINST_ID=' + _this.baseData
      //         .HIGHWAYPROINST_ID + '&NOWACTINST_ID=' + _this.baseData.NOWACTINST_ID
      //     break;
      //   case 2000:
      //     url = '/pages/auditingPop/toExamine?businessType=2000&PROINST_ID=' + _this.baseData
      //         .HIGHWAYPROINST_ID + '&NOWACTINST_ID=' + _this.baseData.NOWACTINST_ID + '&ApproName=' + _this
      //         .baseData.ACTINST_NAME + '&NeedApproved=1'
      //     break;
      //   case 3000:
      //     url = '/pages/auditingPop/reject?businessType=2000&PROINST_ID=' + _this.baseData
      //         .HIGHWAYPROINST_ID + '&NOWACTINST_ID=' + _this.baseData.NOWACTINST_ID
      //     break;
      // }
      // this.$util.toNextRoute('navigateTo', url)
    },
      handleChangeManager(){
        console.log('1')
        this.showManager = !this.showManager
      },
      handleChangeShowService(){
        console.log('2',this.serverShopList.DetailList)
        this.showService = !this.showService
        console.log('this.showService',this.showService)
      },
    getDetail(id) {
      let _this = this
      // _this.$request.$get("GetCommodityFlowDetail", {
      //   HIGHWAYPROINST_ID: id
      // }).
        this.$request.$webGet('EShangApiMain/Seller/GetUniformProinstDetail', {
            businessApprovalID: id
        }).then(rs => {
        console.log('rs',rs)
        if (!rs.Result_Code || rs.Result_Code != '100') {
          _this.isShow = false
        } else {
          _this.isShow = true
        }

        uni.hideLoading()
        let _data = rs.Result_Data
        _this.baseData = _data.businessApprovalModel
        console.log('_this.baseData',_this.baseData)
        _this.serverShopList = _data.ServerpartDetail
        console.log('_this.baseData',_this.baseData)
            _this.approveMessageList = _data.APPLYAPPROVEList
            _this.WarehouseDetailList = _data.WarehouseDetail
            // 解析附件信息
        if (_data.FileList) {
          _data.FileList.map(v => {
            let name = v.ATTACHMENT_URL.split('.')
            v.type = name[name.length - 1]
            v.name = v.ATTACHMENT_DESC
            v.path = v.ATTACHMENT_URL
          })
        }
        // 解析资质文件信息
        if (_data.QualificationList) {
          _data.QualificationList.map(v => {
            let name = v.IMAGE_URL.split('.')
            v.type = name[name.length - 1]
            v.name = v.IMAGE_TITLE
            v.path = v.IMAGE_URL
          })
        }
        _this.getChange()
        _this.$forceUpdate()
      })
    },
    getChange() { // 获取调整过的商品参数
      let _this = this
      let itemName = Object.keys(json) // 数据名称
      let changeItem = {} //
      let map = {}
      let cateArr = []
      let cardShowMap = {}

      _this.baseData.CommodityList.forEach(item => {

        if (!map[item.COMMODITY_TYPE]) {
          map[item.COMMODITY_TYPE] = []
          cardShowMap[item.COMMODITY_TYPE] = true
          cateArr.push({
            id: item.COMMODITY_TYPE,
            name: item.COMMODITYTYPE_NAME,
            child: map[item.COMMODITY_TYPE]
          })

        }

        map[item.COMMODITY_TYPE].push(item)
        itemName.forEach(el => {
          let fName = 'F_' + el

          // item[el] 现参数值 item[fName] 原参数值
          if (item[fName] && item[el] !== item[fName]) {

            if (!changeItem[item.COMMODITY_ID]) {
              changeItem[item.COMMODITY_ID] = []
            }
            let originValue = item[fName]
            let nowValue = item[el]
            let arr = {
              changeName: json[el],
              org: originValue,
              nowV: nowValue,
              isprice: false
            }
            if (json[el].indexOf('价') > -1) {
              arr.org = _this.$util.fmoney(originValue, 2)
              arr.nowV = _this.$util.fmoney(nowValue, 2)
              arr.isprice = true
            }
            changeItem[item.COMMODITY_ID].push(arr)
          }
        })
      })
      _this.changeList = changeItem
      // _this.commodityTree = map
      _this.cateArr = cateArr
      _this.cardShowMap = cardShowMap

    }

  },
  onLoad(option) {
    let _this = this
    uni.showLoading({
      title: '正在加载'
    })
    this.getDetail(option.id)

    uni.$on('2000', function(data) {
      if (data) {
        uni.showLoading({
          title: '正在加载'
        })
        _this.pageData.pageIndex = 1
        _this.pageData.isEnd = false
        _this.getDetail(_this.baseData.HIGHWAYPROINST_ID)

      }
    });
  },
  onUnload() {
    this.$util.addUserBehavior()
    uni.$off('2000');
  },
  onShow() {

  },
  onHide() {

  }
}
</script>

<style scoped>
.mt20 {
  margin-top: 10upx;
}

.uni-icon {
  font-size: 28upx;
  font-weight: bold;
}

.uni-text-gray {
  font-size: 24upx;
}

.uni-icon-arrowthindown {
  color: #50b045;
}

.uni-icon-arrowthinup {
  color: #ff4952;
}

.no-show {
  display: none;
}

.pb20 {
  padding-bottom: 40upx;
}

.pb8 {
  padding-bottom: 8upx;
}

.lh28 {
  line-height: 54upx;
}

.file-body {
  padding: 12rpx 26rpx;
}

.imgBox {
  padding: 0 28rpx;
}

.base-info {
  background-color: #fff;
}

.base-info+.base-info {
  margin-top: 20upx;
}

.content-title {
  height: 115upx;
  line-height: 115upx;
  text-align: center;
  position: relative;
}

.main-card {
  /* border: 1upx solid #ddd; */
  border-radius: 6upx;
  box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.1);
  margin-left: 24upx;
  margin-right: 24upx;
  margin-top: 2rpx;
}

.main-card+.main-card {
  margin-top: 20upx;
}

.uni-collapse-content .main-card:nth-last-child(1) {
  margin-bottom: 40upx;

}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title h4 {
  padding: 20upx 0 15upx 20upx;
}

.card-status {
  font-size: 22upx;
  color: #999;
  padding-right: 16upx;
}

.base-body {
  font-size: 24upx;
  display: flex;
  justify-content: flex-start;
  padding: 15upx 20upx;
  align-items: flex-start;
}

.item-title {
  color: #777;
  width: 120upx;
  /* text-align: justify; */
  height: 40upx;
  font-size: 24upx;
  /* white-space: nowrap; */
}

.item-title:after {
  display: inline-block;
  content: '';
  padding-left: 100%;
}

.base-body+.base-body {
  border-top: 1upx dashed #eee;
}
.page-title {
    padding: 15upx 0 15upx 30upx;
    font-size: 26upx;
    color: #949494;
    background-color: #eee;
}

.bigBox{
    width:100%;
    background: #fff;
}
.pageTitleBox .top{
}
.pageTitleBox .top .bottom{
  width: calc(100% - 60upx);
  margin-left:  30upx;
}
.pageTitleRight,.pageTitleBottom {
    width: 100%;
    box-sizing: border-box;
    padding: 15upx 0 15upx 30upx;
    font-size: 26upx;
    color: #949494;
    background-color: #fff;
    position: relative;
}
.pageTitleRight:after{
    font-family: uniicons;
    content: '\e583';
    position: absolute;
    right: 24rpx;
    top: 15upx;
    color: #bbb;
    //-webkit-transform: translateY(-50%);
    //transform: translateY(-50%);
}
.pageTitleBottom:after{
    font-family: uniicons;
    content: '\e581';
    position: absolute;
    right: 24rpx;
    top: 50%;
    color: #bbb;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.pageList{
    width: 100%;
    background: #fff;
    padding-top: 8rpx;
}
.pageItem{
    width: calc(100% - 32rpx);
    margin-left: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.1);
}
.pageItem .box{
  width:100%;
  box-sizing: border-box;
  padding: 0 16rpx;
    border-bottom: 1px solid #fefefe;
}
.pageItem .box .top .topTitle{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 400rpx;
  font-size: 34rpx;
  padding-bottom: 8rpx;
}
.pageItem .box .headerBox{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pageItem .box .headerBox .shopName{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 400rpx;
  font-size: 30rpx;
  padding-bottom: 8rpx;
}
.pageItem .box .headerBox .shopPrice{
  color: #696969;
  font-size: 24rpx;
}
.pageItem .box .headerBox .shopPrice .shopMoney{
  color: #ee8437;
  margin-left: 10rpx;
  font-size: 28rpx;
}

.pageItem .box .detailBox{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pageItem .box .detailBox .leftDetail{
  display: flex;
  align-items: center;
}
.pageItem .box .detailBox .leftDetail .code{
  width: 28rpx;
  height: 28rpx;
    margin-right: 8rpx;
}

.pageItem .box .detailBox .leftDetail .codeNumber{
  color: #696969;
  font-size: 24rpx;
}
.pageItem .box .detailBox .rightDetail .ruleText{
  color: #696969;
  font-size: 24rpx;
}

.pageItem .box .detailBox .rightDetail .typeName{
  color: #6dbf9c;
  font-size: 24rpx;
}
.pageItem .bottom{
    width: 100%;
    box-sizing: border-box;
    padding: 16rpx;
  border-top: 1rpx dashed #eee;
}
.pageItem .bottom .priceBefore{
  font-size: 28rpx;
  color: #ee8437;
}
.cat-card {
  padding: 30upx 0;
}

.cat-box {
  justify-content: space-between;
  display: flex;
  margin-left: 30upx;
  margin-right: 30upx;
}

.cat-title {
  font-weight: bold;
}

.card-top {

  padding: 16upx 24upx;
}

.card-top .product-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 400upx;
  font-size: 30upx;
  padding-bottom: 8upx;
}
.opinion2 {
    width: 100%;
    padding-top: 30rpx;
    text-align: center;
    background-color: #fff;
    border-radius: 2px 2px 0 0;
    position: fixed;
    z-index: 999;
    width: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12rpx;
    box-sizing: border-box;
}

.opinion2 {
    text-align: left;
    padding: 30rpx;
    min-height: 400rpx;
}

.opinion2-title {
    margin-bottom: 20rpx;
}

.opinion-title,
.opinion2-title {
    font-size: 26rpx;
    font-weight: bolder;
}

.card-top .pro-name-box {
  flex: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail {
  color: #696969;
  font-size: 24upx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.card-top .pro-orther-box {
  flex: 1;
}

.card-top .pro-orther-box .product-detail {
  justify-content: flex-end;
}

.product-price {
  color: #ee8437;
  margin-left: 10upx;
}

.product-status {
  color: #6dbf9c;
  font-size: 24upx;
}

.card-detail {
  border-top: 1upx dashed #eee;
  display: flex;
  flex-wrap: wrap;
  padding: 0 24upx 24upx 24upx;
}

.card-detail li {
  padding-top: 20upx;
  line-height: 30upx;
  /* flex: 33.3%; */
  font-size: 24upx;
  color: #888;
}

.card-change-detail {
  border-top: 1upx dashed #eee;
  padding: 0 20upx 20upx 20upx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.card-change-detail li {
  padding-top: 20upx;
  line-height: 30upx;
  font-size: 25upx;
  padding-right: 20upx;
  display: flex;
  align-items: center;
}

.card-change-detail .through-line {
  text-decoration: line-through;
  color: #cbcbcb;
  margin-left: 16upx;
}

.text-b9 {
  color: #b9b9b9
}

.process-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
}

.uni-list-cell:after {
  height: 0;
}
.approveBox{
    width: 100%;
}
.approveBox .approveItem{
    width:100%;
    box-sizing: border-box;
    padding: 22rpx 30rpx;
}
.approveBox .approveItem .approve{
  width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.approveItem .approve .approveLeft{
    display: flex;
    align-items: center;
}
.approve .approveLeft .typeIcon{
    width: 30rpx;
    height: 30rpx;
}
.approve .approveLeft .approveName{
  font-size: 24rpx;
}
.approveItem .approve .appDate{
  font-size: 24rpx;
  color: #8b8a8a;
}
.approveItem .approveBottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.approveItem .approveBottom .bottomLeft .leftLabel{
  color: #676767;
  font-size: 24rpx;
}
.approveItem .approveBottom .bottomRight .rightLabel{
  font-size: 24rpx;
  color: #8b8a8a;
}
.button-box {
  padding-top: 36upx;
  display: flex;
  /* padding-bottom: 40upx; */
  justify-content: space-around;
  padding-bottom: 6upx;
}

.button-box image {
  width: 100upx;
  height: 100upx;
}

.button-box span {
  font-size: 24upx;
  display: flex;
  flex-direction: column;

  text-align: center;
}

.ico-user:before {
  background-image: url('../../static/images/tender/lxr.png');
}

.ico-sjx:before {
  background-image: url('../../static/images/expense/sjx.png');
}

.ico-cate:before {
  width: 26upx;
  height: 25upx;
  background-image: url('../../static/images/txm_logo.png');
}
.shenhe-mask {
    position: fixed;
    z-index: 998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
}
.check-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;

}
.check-btn {
    flex: 1;
    text-align: center;
    margin: 0 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    font-size: 30rpx;
    background-color: #64a0e6;
    border-radius: 10rpx;
}
.no-check {
    background-color: #fff;
    color: #666;
    border: 1px solid #d2d2d2;
}
.text-content {
    max-height: 150rpx;
    height: 400rpx!important;
    width: 100%;
    font-size: 28rpx;
    line-height: 1.5;
}
.check-reason {
    background-color: #f8f9fa;
    padding: 16rpx 20rpx;
    box-sizing: border-box;
    border-radius: 14rpx 14rpx 0 0;
}
</style>
