front-end/hdApp/src/admin/home/workbench.vue

<template>
<view>
  <block v-if="loginStyle  == 0">
    <view style="width:100vw;height:500upx;display:flex;align-items:center;justify-content:center;">
      <button class="admin-button-com big blue" @click="pageTo({url:'/admin/home/login'})">点我登录</button>
      <view style="position:absolute;top:360upx;font-size:30upx;">
        <text style="color:red;font-weight:bold;">伙伴和员工</text>
        需要登录，请联系批发店添加员工
      </view>
    </view>
  </block>
  <block v-else>
  <div class="app-main app-content" v-if="loginStyle  == 2">

<template v-if="lookMoney == 1">

    <div class="user-wrap" :style="{ backgroundImage: `url(${constant.imgUrl}/home/bg_hd_home.png)` }">
      <div class="user-top">
        <div class="app-size-28">今日概况</div>
      </div>
      <div class="income-amount" @click="pageTo({url:'/admin/stat/kdIncome'})">
        <div>收入</div>
        <div class="price">{{ $util.numberFormat(data.todayData.income) }}</div>
      </div>
      <div class="user-bottom">
        <div class="info-list" @click="goToKindStat">
          <div class="info-list-name">花束</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.bouquet) || 0 }}
          </div>
        </div>
        <navigator url="/admin/home/order" open-type="switchTab" class="info-list">
          <div class="info-list-name">订单</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.order) || 0 }}
          </div>
        </navigator>
        <div class="info-list">
          <div class="info-list-name">访客</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.visit) || 0 }}
          </div>
        </div>
      </div>
    </div>

		<div class="module-com order-wrap" @click="pageTo({url:'/admin/stat/kdIncome'})">
			<div class="total-blo">
				<div class="total-list2"> 
					<div class="app-color-3">系统收款</div>
					<div class="list-num">
						<view>{{countStat.systemCount||0}}</view>
						<view>{{countStat.systemIncome?parseFloat(countStat.systemIncome):0}}</view>
					</div>
				</div>
				<div class="total-list2"> 
					<div class="app-color-3">线下微信</div>
					<div class="list-num">
						<view>{{countStat.kfWxCount||0}}</view>
						<view>{{countStat.kfWxIncome?parseFloat(countStat.kfWxIncome):0}}</view>
					</div> 
				</div>
				<div class="total-list2"> 
					<div class="app-color-3">现金</div>
					<div class="list-num">
						<view>{{countStat.cashCount||0}}</view>
						<view>{{countStat.cashIncome?parseFloat(countStat.cashIncome):0}}</view>
					</div> 
				</div>
				<div class="total-list2"> 
					<div class="app-color-3">赊账</div>
					<div class="list-num">
						<view>{{countStat.debtCount||0}}</view>
						<view>{{countStat.debtIncome?parseFloat(countStat.debtIncome):0}}</view>
					</div> 
				</div>
			</div>
		</div>

</template>

    <div class="module-com news-wrap">
      <div class="news-list" v-for="(item, index) in data.notice" :key="index" @click="noticeFn(item)" >
        <div class="news-left">
          <i class="iconfont iconxiaoxi2 ling"></i>
          <span>{{ item.title }}</span>
        </div>
        <div class="news-right">
          <span>{{ item.action }}</span>
          <i class="iconfont iconxiangyou"></i>
        </div>
      </div>
    </div>

    <view class="module-com">
      <view class="tabs-head_bx">
				<image @click="goGd()" :src="kdSrc" mode="widthFix" ></image>
				<image @click="goShKd()" :src="shSrc" mode="widthFix"></image>
      </view>
      <div class="tabs-wrap">
        <div class="tabs-list" v-for="(item, index) in tabsData" :key="index" >
          <div @click="goPage(item)">
            <div class="tabs-img">
              <img :src="`${constant.imgUrl}/${item.img}`" alt mode="widthFix" />
            </div>
            <div class="tabs-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </view>

	<template v-if="lookMoney == 1">
      <div class="module-com total-wrap">
        <div class="total-tit">总览</div>
        <div class="total-blo">
          <div class="total-list" v-for="(item, index) in overview" :key="index" @click="pageTo(item)">
            <div class="list-num">{{ $util.numberFormat(item.value) }}</div>
            <div class="app-color-3">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </template>

  </div>
  <view class="order-page" v-else>

<view class="ghs_list_page flex-col">

  <view style="background-color:white;margin-bottom:20upx;">
    <button class="admin-button-com mini-btn blue" style="margin-left:12upx;padding-top:17upx;padding-bottom:17upx;" @click="pageTo({url:'/admin/shop/myShop'})">我的门店</button>
    <button class="admin-button-com mini-btn blue" style="margin-left:12upx;padding-top:17upx;padding-bottom:17upx;" @click="pageTo({url:'/admin/staff/list'})">我的员工</button>
    <button class="admin-button-com mini-btn blue" style="margin-left:12upx;padding-top:17upx;padding-bottom:17upx;" @click="pageTo({url:'/admin/shop/add?id='+loginInfo.shopId})">我的地址</button>
    <button class="admin-button-com mini-btn blue" style="margin-left:12upx;padding-top:17upx;padding-bottom:17upx;" @click="pageTo({url:'/admin/stat/cgItem'})">采购统计</button>
    <button class="admin-button-com mini-btn blue" style="margin-left:12upx;padding-top:17upx;padding-bottom:17upx;" @click="goMore()">更多</button>
  </view>

  <template v-if="!$util.isEmpty(ad)">
    <block v-for="(adInfo, adIndex) in ad" :key="adIndex">
      <view style="text-align:center;" @click.stop="pageTo({url:adInfo.url})">
        <image :src="adInfo.banner" mode="widthFix" style="width:97%;margin:0 auto;"></image>
      </view>
    </block>
  </template>

  <template v-if="!$util.isEmpty(supplierList)">

    <view class="ghs_list_area flex-col justify-end">

        <view class="ghs_box flex-col justify-end" v-for="(ghsInfo, index) in supplierList" :key="index">
          <view class="image-text_7 flex-row justify-between">
            <view class="section_1 flex-col">
              <image class="logo" :src="ghsInfo.avatar" @click="enterShop(ghsInfo)" />
            </view>
            <view class="text-group_7 flex-col justify-between" @click="enterShop(ghsInfo)">
              <text class="text_8">{{ghsInfo.name}}</text>
              <text class="text_9"></text>
            </view>
          </view>
          <view class="box_4 flex-col"></view>
          <view class="box_9">
            <view class="tag_2" @click="pageTo({ url: '/admin/ghs/debtChange?ghsId='+ghsInfo.id})"> <text>欠款变动记录</text> </view>
            <view class="tag_2" @click="pageTo({ url: '/admin/clear/list?ghsId='+ghsInfo.id})"> <text>结账记录</text> </view>
            <view class="tag_2" @click="pageTo({url:'/pagesPurchase/shopping'})"> <text>买花记录</text> </view>
          </view>
          <view class="box_6 flex-row" @click="settleAccounts(ghsInfo)" v-if="Number(ghsInfo.debtAmount)>0">
            <view class="show_clear_area flex-row justify-between">
              <image class="icon_2" referrerpolicy="no-referrer" src="/static/lanhu_020105gongyingshangliebiao/ps2pvfa1l5i34w5vqj2k7b3kejml3i3nmrba1421bf-caa2-491b-8773-af413df7e96d.png" />
              <text class="waite_clear_order">待结订单&nbsp;{{ghsInfo.debtNum}}笔&nbsp;¥{{ghsInfo.debtAmount?parseFloat(ghsInfo.debtAmount):0}}</text>
            </view>
            <view class="image-text_9 flex-row justify-between">
              <text class="text-group_4">去结账</text>
              <image class="icon_3" referrerpolicy="no-referrer" src="/static/lanhu_020105gongyingshangliebiao/ps83ag7scu3a8bfq22ciodg5hiu0x9cesxjbfb4c9ca-ee3f-45ec-a6d7-6f166e13d6e6.png" />
            </view>
          </view>
          <block v-if="ghsInfo.live == 1">
            <view class="button_4 flex-col" v-if="ghsInfo.isOpen == 1" @click="enterShop(ghsInfo)"><text class="text_13">买花</text></view>
            <view class="button_5 flex-col" v-else @click="enterShop(ghsInfo)"><text class="text_13">买花</text></view>
          </block>
          <block v-else>
            <view class="button_6 flex-col" @click="fillCg(ghsInfo)"><text class="text_13">录采购单</text></view>
          </block>
          <text style="position:absolute;left:646upx;top:235upx;color:#CCCCCC;" @click.stop="bpSj(ghsInfo)">屏蔽</text>
        </view>
    </view>

  </template>
  <block v-else>
    <emptyComponent title="暂无供货商" :is-empty="$util.isEmpty(supplierList)" />
  </block>
  <view style="text-align:center;margin-top:50upx;margin-bottom:80upx;color:#827171;font-size:28upx;">
    <text style="margin-right:20upx;">中花汇提供技术支持</text>
    <text style="margin-right:20upx;">|</text>
    <text @click="toPhone()">联系中花汇</text>
  </view>
  </view>

  </view>

  </block>
</view>
</template>
<script>
import { mapGetters } from "vuex";
import { getWeixinId } from "@/api/invite";
import { getStat,getStrokeCount } from '@/api/console'
import { consoleIndex } from "@/api/workbench";
import NotLogin from "@/components/not-login";
import autoUpdateMixins from "@/mixins/autoUpdate";
import emptyComponent from "@/components/empty";
import { ghsList } from "@/api/purchase";
import { changeDelStatus } from "@/api/ghs";
import {currentShop} from "@/api/shop";
export default {
  name: "workbench",
  components: { NotLogin,emptyComponent },
  mixins: [autoUpdateMixins],
  data () {
    return {
      overview:[],
      ad:[],
      constant: this.$constant,
      getappIdList: {},
      data: {
        admin: {},
        asset: {},
        notice: {},
        todayData: { income:0.00, order:0, custom:0, expend:0.00 },
        isMini:0
      },
      tabsData: [
        { name: "商城", img: `ghs/home/shop.png`, url: "/admin/cg/mall",pf:1},
        { name: "花材", img: `ghs/home/hcgl.png`, url: "/admin/item/list",pf:1 },
        { name: "改价", img: `ghs/home/gj.png`, url: "/admin/changePrice/list",pf:1},
        { name: "拆散", img: `ghs/home/kcyjs.png`, url: "/admin/part/list",pf:1},
        { name: "损耗", img: `ghs/home/kcyjs.png`, url: "/admin/breakage/list",pf:1},
        { name: "任务", img: `ghs/home/kcyjs.png`, url: "/admin/work/list",pf:1 },
        { name: "供货商", img: `ghs/home/icon_ghs.png`, url: "/pagesPurchase/order",pf:1 },
        { name: "采购", img: `ghs/home/icon_caigou.png`, url: "/pagesPurchase/shopping",pf:1 },
        { name: "采购结账", img: `ghs/home/kcyjs.png`, url: "/admin/clear/list",pf:1 },
        { name: "花束", img: `ghs/home/hcgl.png`, url: "/admin/goods/list",pf:1 },
        { name: "绿植", img: `ghs/home/hcgl.png`, url: "/admin/goods/lz",pf:1 },
        { name: "绿植采购", img: `ghs/home/icon_caigou.png`, url: "/admin/goods/plantCg",pf:1}
      ],
      totalData: [
        { name: "客户数", value: 0 },
        { name: "总访客", value: 0 },
        { name: "总订单", value: 0 },
        { name: "总收入(元)", value: 0 },
        { name: "总支出(元)", value: 0 },
        { name: "总采购(元)", value: 0 }
      ],
      shSrc: `${this.$constant.imgUrl}/ghs/home/shkd.jpg`,
      kdSrc: `${this.$constant.imgUrl}/ghs/home/zzkd.jpg`,
      supplierList: [],
      //登录状态 0未登录 1登录仅用到了采购 2登录用到完整功能
      loginStyle :0,
      backAction:'',
      countStat:{systemIncome:0,systemCount:0,debtCount:0,debtIncome:0,kfWxCount:0,kfWxIncome:0},
      lookMoney:1
    };
  },
  computed: {
    ...mapGetters({ loginInfo: "getLoginInfo",dictInfo:"getDictionariesInfo" })
  },
	watch: {
		//只需要采购花材的花店不显示底部菜单
		loginInfo(newVal) {
      if(!this.$util.isEmpty(newVal.admin) && newVal.admin.currentShopId > 0){
          if(!this.$util.isEmpty(newVal.onlyCg)){
            if(Number(newVal.onlyCg) == 1){
              this.loginStyle  = 1
              uni.hideTabBar()
            }else{
              this.loginStyle  = 2
              uni.showTabBar()
            }
          }
      }
		}
	},
  onPullDownRefresh () {
    this.init();
    uni.stopPullDownRefresh();
  },
  onShow () {

      if(this.backAction == 'login'){
        this.init()
      }
      if(this.backAction == 'cacelMask'){
        console.log(this.backAction)
        this.init()
        this.backAction = ''
      }

      if(!this.$util.isEmpty(this.loginInfo.admin) && this.loginInfo.admin.currentShopId > 0){
          if(!this.$util.isEmpty(this.loginInfo.onlyCg)){
            if(Number(this.loginInfo.onlyCg) == 1){
              this.loginStyle  = 1
              uni.hideTabBar()
            }else{
              this.loginStyle  = 2
              uni.showTabBar()
            }
          }
      }

      this.showShopName()

  },
  methods: {
    toPhone(){
			uni.makePhoneCall({ phoneNumber:'15280215347' })
		},
		showShopName(){
			currentShop().then(res => {
				if(res.code == 1){
					let sjName = res.data.merchantName ? res.data.merchantName : ''
					let shopName = res.data.shopName ? res.data.shopName : ''
					let title = shopName == '首店' ? sjName : sjName+' '+shopName
					 uni.setNavigationBarTitle({ title: title })
				}
			})
		},
    goMore(){
      let that = this
      uni.showActionSheet({
        itemList: ['已屏蔽列表', '改进建议','开关商城'],
        success: function (res) {
          if(res.tapIndex == 0){
            that.$util.pageTo({url: '/pagesPurchase/pb'})
          }
          if(res.tapIndex == 1){
            that.suggest()
          }
          if(res.tapIndex == 2){
            that.$util.pageTo({url:'/pagesPurchase/open'})
          }
        }
      });
    },
    suggest(){
      let that = this
      that.$util.confirmModal({content:'请添加技术人员微信反馈',okText:'复制微信'},() => {
        uni.setClipboardData({
          data: '15280215347',
          success: function() {
            that.$msg("复制成功")
          }
        })
			})
    },
    bookItem(item){
      const { id } = item
      this.pageTo({url: '/pagesPurchase/bookProduct?id='+id})
    },
    bpSj(ghs){
      let that = this
      that.$util.confirmModal({content:'确认屏蔽此商家？',okText:'确认'},() => {
        that.confirmPb(ghs)
			})
    },
    confirmPb(ghs){
      let that = this
      changeDelStatus({delStatus:1,ghsId:ghs.id}).then(res=>{
        if(res.code == 1){
          that.getGHSList()
        }
      })
    },
    fillCg(item){
      this.pageTo({url:'/pagesPurchase/addCg?ghsId='+item.id+'&ghsName='+item.name})
    },
    enterShop(item) {
      let that = this
      if(item.isOpen == 0){
        this.$msg('已休店，请选择其它门店')
        return false
      }
      that.pageTo({url: '/pagesPurchase/ghsProduct?id='+item.id})
    },
    settleAccounts (item) {
      this.pageTo({ url: '/pagesPurchase/gathering?id='+item.id})
    },
    gotoDetails (val) {
      this.pageTo({ url: '/pagesPurchase/purDetails?status=' + val.status + '&id=' + val.id, type:2 })
    },
    getGHSList () {
      return ghsList().then(res => {
        this.supplierList = res.data.list
        this.ad = res.data.ad ? res.data.ad : []
      })
    },
    goGd(){

      //选择花材生成制作单和订单
      this.$util.pageTo({url:'/admin/order/workOrder'})
    },
    goShKd(){
      this.$util.pageTo({url:'/admin/billing/index'})
    },
    goPage (item) {
      if (item.url === '/admin/billing/priceChange') {
        this.goToMallPt('pages/pay/index')
        return true
      }
      if(this.getLoginInfo.pfShopId && Number(this.getLoginInfo.pfShopId)>0){
        if(item.pf == 0){
          this.$msg('请在批发端操作')
          return false
        }
      }
      this.$util.pageTo(item)
    },
    init () {

        this.getGHSList()

        getWeixinId().then(res => {
          this.getappIdList = res.data
        })

        // #ifdef MP-WEIXIN
        this.isMini = 1
        // #endif

        let that = this
        consoleIndex({isMini:this.isMini}).then(res => {
          this.data = res.data

          if(res.data.menu && !this.$util.isEmpty(res.data.menu)){
            this.tabsData = res.data.menu
          }
          this.lookMoney = res.data.lookMoney
        })

        getStrokeCount().then(res=>{
          if(res.code == 1){
            this.countStat = res.data
          }
        })

        getStat().then(res=>{
          if(res.code == 1){
            that.overview = res.data.overview
          }
        })

        this.showShopName()

    },
    noticeFn (item) {
      this.$util.pageTo({ url: item.page })
    },
    goToWastage () {
      this.$util.pageTo({url:'/admin/breakage/list'})
    },
    goToKindStat(){
      this.$util.pageTo({url:'/admin/stat/kind'})
    },
    goToProfit () {
      this.$util.pageTo({url:'/admin/stat/profit'})
    },
    goToMallPt (url) {
      let self = this
        uni.navigateToMiniProgram({
          appId: this.getappIdList.mall.miniAppId,
          path: url + '?account=' + self.loginInfo.shopId,
          //develop 开发版 trial 体验版 release 正式版
          envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
          extraData: {
            'hdShopAdminId': self.loginInfo.shopAdminId
          },
          success (res) {
          }
        })
    },
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  padding-bottom: 10upx;
}
.module-com {
  margin-bottom: 20upx;
  background-color: #fff;
}
.user-wrap {
  padding: 20upx 30upx 34upx 30upx;
  color: #fff;
  text-align: center;
  background-size: 100% 380upx;
  background-repeat: no-repeat;
  .user-top {
    @include disFlex(center, space-between);
    .open-bt_bx {
      display: flex;
      align-items: center;
      line-height: 1upx;
      & > button {
        padding: 0;
        line-height: auto;
        background-color: transparent;
        border: 1px solid #ffffff;
        border-radius: 22upx;
        padding: 10upx 17upx !important;
        font-size: 24upx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        & > .iconfont {
          font-size: 25upx;
          padding-right: 10upx;
        }
      }
    }
  }
  .income-amount {
    margin-top: 36upx;
    margin-bottom: 37upx;
    .price {
      font-size: 50upx;
      font-weight: bold;
      margin-top: 4upx;
    }
  }
  .user-bottom {
    @include disFlex(center, space-around);
    .info-list-name {
      color: #bfd4ff;
    }
    .info-list-value {
      font-size: 36upx;
      font-weight: bold;
      margin-top: 4upx;
    }
  }
}
// 消息
.news-wrap {
  .news-list {
    @include disFlex(center, space-between);
    padding: 30upx 24upx 30upx 30upx;
    border-bottom: 1px solid $borderColor;
    font-size: 26upx;
    color: $fontColor2;
    &:active {
      background-color: $backColor;
    }
    & > div {
      @include disFlex(center, flex-start);
    }
    .news-left {
      .iconfont {
        color: $mainColor;
        margin-right: 10upx;
      }
      .ling {
        font-size: 28upx;
      }
      span{
        font-size:29upx;
      }
    }
    .news-right {
      font-size: 26upx;
      color: $mainColor;
      transform: scale(0.9);
      @include disFlex(flex-end, flex-start);
      .iconfont {
        font-size: 24upx;
        margin-left: 10upx;
        margin-bottom: 6upx;
      }
    }
  }
}
// 总览
.total-wrap,
.order-wrap {
	.total-tit {
		padding: 18upx 0 18upx 20upx;
		border-bottom: 1upx solid $borderColor;
		font-weight: 600;
		font-size: 24upx;
		color: #333333;
	}
	.total-blo {
		@include disFlex(center, space-between);
		flex-wrap: wrap;
		padding: 20upx 0 0;
		.total-list {
			width: 33%;
			text-align: center;
			margin: 20upx 0upx;
			border-right: 1upx solid $borderColor;
			.list-num {
				margin-bottom: 8upx;
				font-size: 36upx;
				font-weight: bold;
			}
		}
		.total-list:nth-child(3n) {
			border-right: none;
		}
		.total-list:nth-child(n + 4) {
			padding-bottom: 0;
		}

		.total-list2 {
			width: 24%;
			text-align: center;
			margin: 20upx 0upx;
			border-right: 1upx solid $borderColor;
			.list-num {
				margin-top:10upx;
				margin-bottom:8upx;
				font-size:26upx;
				font-weight:normal;
			}
		}
		.total-list2:nth-child(4n) {
			border-right: none;
		}
		.total-list2:nth-child(n + 4) {
			padding-bottom: 0;
		}

	}
}
.tabs-head_bx {
  display: flex;
  align-items: center;
  padding: 20upx 15upx;
}
.tabs-wrap {
  padding: 20upx 10upx;
  @include disFlex(center, flex-start);
  flex-wrap: wrap;
  .tabs-list {
    width: 25%;
    margin-top: 50upx;
    text-align: center;
    .tabs-img {
      width: 100upx;
      height: 100upx;
      margin: 0 auto;
      img {
        height: 100%;
      }
    }
    .tabs-name {
      color:  #444444;
      margin-top: 10upx;
    }
    &:nth-child(-n + 4) {
      margin-top: 0;
    }
  }
}
// 遮罩层
.renew-wrap {
  text-align: center;
  .renew-wrap-text {
    margin-top: 30upx;
    margin-bottom: 60upx;
    font-size: 34upx;
  }
}
.order-page {
.ghs_list_page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 750upx; 
  overflow: hidden;
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-start {
      display: flex;
      justify-content: flex-start;
    }
  .justify-center {
      display: flex;
      justify-content: center;
  }
    
  .justify-end {
      display: flex;
      justify-content: flex-end;
  }
  .justify-evenly {
      display: flex;
      justify-content: space-evenly;
  }
  .justify-around {
      display: flex;
      justify-content: space-around;
  }
  .justify-between {
      display: flex;
      justify-content: space-between;
  }
  .align-start {
      display: flex;
      align-items: flex-start;
  }
  .align-center {
      display: flex;
      align-items: center;
  }
  .align-end {
      display: flex;
      align-items: flex-end;
  }

  .ghs_list_area {
    width: 750upx;
    background-color: #ece5e5;
    .group_1 {
      box-shadow: 0px 1px 0px 0px rgba(221, 221, 221, 1);
      background-color: rgba(255, 255, 255, 1);
      width: 750upx;
      height: 128upx;
      margin-top: 2upx;
      .image_1 {
        width: 727upx;
        height: 20upx;
        margin: 11upx 0 0 12upx;
      }
      .block_4 {
        width: 714upx;
        height: 64upx;
        margin: 21upx 0 12upx 24upx;
        .icon_1 {
          width: 20upx;
          height: 34upx;
          margin-top: 16upx;
        }
        .text_1 {
          width: 107upx;
          height: 34upx;
          overflow-wrap: break-word;
          color: rgba(4, 4, 4, 1);
          font-size: 36upx;
          font-family: PingFangSC-Semibold;
          text-align: left;
          white-space: nowrap;
          line-height: 24upx;
          margin: 15upx 0 0 278upx;
        }
        .applet-top-bar_1 {
          width: 174upx;
          height: 64upx;
          margin-left: 135upx;
        }
      }
    }
    .ghs_box {
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      width: 750upx;
      height: auto;
      margin-bottom:35upx;
      .image-text_7 {
        width: 674upx;
        height: 120upx;
        margin: 40upx 0 0 31upx;
        .section_1 {
          width: 120upx;
          height: 120upx;
          .logo{
            width:120upx;
            height:120upx;
            border-radius:10upx;
          }
        }
        .text-group_7 {
          width: 533upx;
          height: 99upx;
          margin-top: 5upx;
          .text_8 {
            display:inline-block;
            width: 550upx;
            height: 38upx;
            color: rgba(51, 51, 51, 1);
            font-size: 36upx;
            font-weight:bold;
            text-align: left;
            white-space: nowrap;
            line-height:38upx;
            overflow:hidden;
          }
          .text_9 {
            width: 533upx;
            height: 25upx;
            overflow-wrap: break-word;
            color: rgba(153, 153, 153, 1);
            font-size: 26upx;
            text-align: left;
            white-space: nowrap;
            line-height: 24upx;
            margin-top: 10upx;
          }
        }
      }
      .box_4 {
        background-color: rgba(238, 238, 238, 1);
        width: 750upx;
        height: 1upx;
        margin-top: 40upx;
      }
      .box_9 {
        width: 100%;
        height: 60upx;
        margin: 23upx 0 22upx 30upx;
        .tag_2 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          height: 60upx;
          line-height:60upx;
          border: 2px solid rgba(221, 221, 221, 1);
          color: rgba(51, 51, 51, 1);
          font-size: 30upx;
          margin:0 25upx 0 0;
          text-align:center;
          float:left;
          padding-left:15upx;
          padding-right:15upx;
        }
        .tag_3 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          height: 60upx;
          border: 1px solid rgba(221, 221, 221, 1);
          margin-left: 12upx;
          width: 140upx;
          .text_11 {
            width: 101upx;
            height: 25upx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 26upx;
            text-align: left;
            white-space: nowrap;
            line-height: 25upx;
            margin: 17upx 0 0 20upx;
          }
        }
        .tag_4 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          height: 60upx;
          border: 1px solid rgba(221, 221, 221, 1);
          margin-left: 12upx;
          width: 192upx;
          .text_12 {
            width: 153upx;
            height: 25upx;
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 26upx;
            text-align: left;
            white-space: nowrap;
            line-height: 25upx;
            margin: 17upx 0 0 18upx;
          }
        }
      }
      .box_6 {
        background-color: rgb(248, 242, 242);
        width: 750upx;
        height:85upx;
        .show_clear_area {
          width: 247upx;
          height: 29upx;
          margin: 26upx 0 0 30upx;
          .icon_2 {
            width: 22upx;
            height: 26upx;
            margin-top: 2upx;
          }
          .waite_clear_order {
            width: 214upx;
            height: 29upx;
            overflow-wrap: break-word;
            color: rgba(255, 40, 66, 1);
            font-size: 30upx;
            font-weight:bold;
            text-align: left;
            white-space: nowrap;
            line-height: 29upx;
          }
        }
        .image-text_9 {
          width: 134upx;
          height: 27upx;
          margin: 26upx 29upx 0 310upx;
          .text-group_4 {
            width: 111upx;
            height: 27upx;
            overflow-wrap: break-word;
            color: rgba(255, 40, 66, 1);
            font-size: 30upx;
            font-weight:bold;
            text-align: left;
            white-space: nowrap;
            line-height: 27upx;
          }
          .icon_3 {
            width: 14upx;
            height: 24upx;
            margin-top: 2upx;
          }
        }
      }
      .button_4 {
        height: 80upx;
        line-height:80upx;
        text-align:center;
        background-color:#3385FF;
        background-size: 137upx 137upx;
        width: 130upx;
        position: absolute;
        left: 570upx;
        top: 95upx;
        border-radius:39upx;
        .text_13 {
          color: rgba(255, 255, 255, 1);
          font-size: 30upx;
          font-weight:bold;
        }
      }
      .button_5 {
        height: 80upx;
        line-height:80upx;
        text-align:center;
        background-color:#CCCCCC;
        background-size: 137upx 137upx;
        width: 130upx;
        position: absolute;
        left: 570upx;
        top: 95upx;
        border-radius:39upx;
        .text_13 {
          color: rgba(255, 255, 255, 1);
          font-size: 30upx;
          font-weight:bold;
        }
      }
      .button_6 {
        height: 80upx;
        line-height:80upx;
        text-align:center;
        background-color:rgb(152, 153, 197);
        background-size: 137upx 137upx;
        width: 170upx;
        position: absolute;
        left: 540upx;
        top: 95upx;
        border-radius:39upx;
        .text_13 {
          color: rgba(255, 255, 255, 1);
          font-size: 30upx;
          font-weight:bold;
        }
      }
    }
  }
}
}
</style>