2023-12-30

src/pages/recharge/index.vue

@@ -1,1569 +1,1515 @@
 <template>
-  <div class="order">
-    <div class="left">
-      <div class="left-top">
-        <div class="title">用户列表</div>
-      </div>
-      <div class="order-box">
-        <div class="search">
-          <Input
-            search
-            enter-button="搜索"
-            v-model="userFrom.keyword"
-            placeholder="搜索手机号/ID"
-            size="large"
-            @on-search="search"
-          />
-        </div>
-        <userList
-          v-if="userList.length"
-          :userList="userList"
-          :total="total"
-          @selectUser="selectUser"
-          @addPage="addPage"
-        ></userList>
-        <div v-else class="no-order">
-          <img src="../../assets/images/no-order.png" alt="" />
-          <span class="trip">噢～目前暂无用户</span>
-        </div>
-      </div>
-    </div>
-    <div v-if="total" class="order-data">
-      <div class="header">
-        <div
-          class="item"
-          :class="{
+	<div class="order">
+		<div class="left">
+			<div class="left-top">
+				<div class="title">用户列表</div>
+			</div>
+			<div class="order-box">
+				<div class="search">
+					<Input search enter-button="搜索" v-model="userFrom.keyword" placeholder="搜索手机号/ID" size="large"
+						@on-search="search" />
+				</div>
+				<userList v-if="userList.length" :userList="userList" :total="total" @selectUser="selectUser"
+					@addPage="addPage"></userList>
+				<div v-else class="no-order">
+					<img src="../../assets/images/no-order.png" alt="" />
+					<span class="trip">噢～目前暂无用户</span>
+				</div>
+			</div>
+		</div>
+		<div v-if="total" class="order-data">
+			<div class="header">
+				<div class="item" :class="{
             sel: sle == index,
             'neighbor-left': sle - index == 1,
             'neighbor-right': index - sle == 1,
-          }"
-          v-for="(tab, index) in tabs"
-          v-show="!index || !selectUserData.delete_time"
-          :key="index"
-          @click="selectTab(index)"
-        >
-          <div class="item-wrap">
-            {{ tab }}
-          </div>
-        </div>
-        <div
-          class="box"
-          :class="{ 'neighbor-right': selectUserData.delete_time || sle == 2 }"
-        ></div>
-      </div>
-      <div class="content" :class="{ 'border-radius': sle }">
-        <div v-if="sle === 0" class="detail">
-          <div class="user">
-            <div><img class="img" :src="selectUserInfo.avatar" alt="" /></div>
-            <div class="user-content">
-              <div class="name-wrap">
-                <div class="name">{{ selectUserInfo.nickname }}</div>
-                <div v-if="selectUserInfo.vip_name" class="tag">
-                  {{ selectUserInfo.vip_name }}
-                </div>
-                <div v-if="selectUserData.delete_time">（已注销）</div>
-              </div>
-              <div class="phone-wrap">
-                <div v-if="selectUserInfo.phone" class="phone">
-                  {{ selectUserInfo.phone }}
-                </div>
-                <div>
-                  余额<span class="num">{{ selectUserInfo.now_money }}</span>
-                </div>
-                <div>
-                  积分<span class="num">{{ selectUserInfo.integral }}</span>
-                </div>
-                <div v-if="selectUserInfo.is_money_level">
-                  付费会员到期：
-                  <span class="time">{{
+          }" v-for="(tab, index) in tabs" v-show="!index || !selectUserData.delete_time" :key="index"
+					@click="selectTab(index)" v-if="index!=1">
+					<div class="item-wrap">
+						{{ tab }}
+					</div>
+				</div>
+				<div class="box" :class="{ 'neighbor-right': selectUserData.delete_time || sle == 2 }"></div>
+			</div>
+			<div class="content" :class="{ 'border-radius': sle }">
+				<div v-if="sle === 0" class="detail">
+					<div class="user">
+						<div><img class="img" :src="selectUserInfo.avatar" alt="" /></div>
+						<div class="user-content">
+							<div class="name-wrap">
+								<div class="name">{{ selectUserInfo.nickname }}</div>
+								<div v-if="selectUserInfo.vip_name" class="tag">
+									{{ selectUserInfo.vip_name }}
+								</div>
+								<div v-if="selectUserData.delete_time">（已注销）</div>
+							</div>
+							<div class="phone-wrap">
+								<div v-if="selectUserInfo.phone" class="phone">
+									{{ selectUserInfo.phone }}
+								</div>
+								<div>
+									余额<span class="num">{{ selectUserInfo.now_money }}</span>
+								</div>
+								<div>
+									积分<span class="num">{{ selectUserInfo.integral }}</span>
+								</div>
+								<div v-if="selectUserInfo.is_money_level">
+									付费会员到期：
+									<span class="time">{{
                     selectUserInfo.is_ever_level
                       ? '永久会员'
                       : selectUserInfo.overdue_time || '已过期'
                   }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <Tabs v-model="tabActive" :animated="false">
-            <TabPane
-              v-for="item in menus"
-              :key="item.value"
-              :label="item.name"
-              :name="item.value"
-              :data-name="item.component"
-            >
-              <component
-                :is="item.component"
-                :userInfo="selectUserInfo"
-                :type="item.value"
-              ></component>
-            </TabPane>
-          </Tabs>
-        </div>
-        <div v-if="sle === 1" class="member">
-          <Form :model="rechargeData" :label-width="82">
-            <FormItem label="会员时长：">
-              <template v-if="memberCheck.overdue_time">
-                <span class="num">{{ memberCheck.vip_day }}</span
-                >天（{{ memberCheck.overdue_time }} 到期）
-              </template>
-              <span v-else class="num">永久</span>
-            </FormItem>
-            <FormItem :label-width="0" class="merber-radio-group">
-              <RadioGroup v-model="rechargeData.merber_id">
-                <Radio
-                  v-for="item in memberCard"
-                  :key="item.id"
-                  :label="item.id"
-                  border
-                >
-                  <div>{{ item.title }}</div>
-                  <div>
-                    ¥<span class="num">{{ item.pre_price }}</span>
-                  </div>
-                  <div class="marking">¥{{ item.price }}</div>
-                </Radio>
-              </RadioGroup>
-            </FormItem>
-          </Form>
-        </div>
-        <div v-if="sle === 2" class="balance">
-          <Form :model="rechargeData" :label-width="82">
-            <FormItem label="充值方式：">
-              <RadioGroup v-model="rechargeType" type="button" button-style="solid">
-                <Radio :label="1">充值套餐</Radio>
-                <Radio :label="2">自定义充值</Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem v-show="rechargeType == 1" :label-width="0" class="merber-radio-group">
-              <RadioGroup v-model="rechargeData.rechar_id">
-                <Radio
-                  v-for="item in rechargeList"
-                  :key="item.id"
-                  :label="item.id"
-                  border
-                >
-                  <div class="money">
-                    ¥<span class="num">{{ item.price }}</span>
-                  </div>
-                  <div class="marking">额外赠送：¥ {{ item.give_money }}</div>
-                </Radio>
-              </RadioGroup>
-            </FormItem>
-            <FormItem v-show="rechargeType == 2">
-              <InputNumber
-                v-model="payPrice"
-                :min="1"
-                :max="9999999"
-                placeholder="0.00"
-              ></InputNumber>
-            </FormItem>
-          </Form>
-        </div>
-      </div>
-      <div v-if="sle" class="footer">
-        <Button @click="recharge">点击支付</Button>
-      </div>
-    </div>
-    <Modal
-      v-model="modalPay"
-      footer-hide
-      width="450px"
-      class="modalPay"
-      @on-cancel="yuePayClear"
-    >
-      <div class="payPage">
-        <div class="header acea-row row-center-wrapper">
-          <div class="pictrue"><img src="../../assets/images/gold.png" /></div>
-          <div class="text">应收金额(元)</div>
-        </div>
-        <div class="money">
-          ¥<span class="num">{{ rechargeData.price }}</span>
-        </div>
-        <Input
-          v-model="rechargeData.auth_code"
-          ref="rechargeNum"
-          size="large"
-          type="url"
-          placeholder="请点击输入框聚焦扫码或输入编码号"
-          style="margin-top: 16px"
-        />
-        <div class="process">
-          <div class="pictrue">
-            <img src="../../assets/images/process2.png" />
-          </div>
-          <div class="list acea-row row-between-wrapper">
-            <div class="item one">
-              <div class="name">出示付款码</div>
-              <div>支付宝/微信</div>
-            </div>
-            <div class="item two">
-              <div class="name">扫描付款码</div>
-              <div>扫码枪</div>
-            </div>
-            <div class="item three">
-              <div class="name">确认收款</div>
-              <div>收银台点击确认</div>
-            </div>
-          </div>
-        </div>
-        <Button type="primary" class="bnt" @click="confirm">确认</Button>
-      </div>
-    </Modal>
-    <Modal
-      v-model="modalCash"
-      class="cash"
-      footer-hide
-      width="770px"
-      @on-cancel="cancel"
-    >
-      <div class="cashPage acea-row">
-        <div class="left">
-          <div class="picture">
-            <img src="../../assets/images/gold.png" />
-          </div>
-          <div class="text">应收金额(元)</div>
-          <div class="money">
-            ¥<span class="num">{{ rechargeData.price || 0 }}</span>
-          </div>
-        </div>
-        <div class="right">
-          <div class="rightCon">
-            <div class="top acea-row row-between-wrapper">
-              <div>实际收款(元)</div>
-              <div class="num">{{ collection }}</div>
-            </div>
-            <div class="center acea-row row-between-wrapper">
-              <div>需找零(元)</div>
-              <div
-                v-if="$computes.Sub(collection, rechargeData.price || 0) > 0"
-                class="num"
-              >
-                {{ $computes.Sub(collection, rechargeData.price || 0) }}
-              </div>
-              <div v-else class="num">0</div>
-            </div>
-            <div class="bottom acea-row">
-              <div
-                v-for="(item, index) in numList"
-                :key="index"
-                :class="item == '.' ? 'spot' : ''"
-                class="item acea-row row-center-wrapper"
-                @click="numTap(item)"
-              >
-                {{ item }}
-              </div>
-              <div class="item acea-row row-center-wrapper" @click="delNum">
-                <Icon type="ios-backspace" />
-              </div>
-            </div>
-          </div>
-          <Button type="primary" @click="cashBnt">确认</Button>
-        </div>
-      </div>
-    </Modal>
-    <settleDrawer
-      v-model="settleVisible"
-      :list="payList"
-      :type="payType"
-      :money="rechargeData.price"
-      :collection="collection"
-      @payPrice="onPayPrice"
-      @numTap="numTap"
-      @delNum="delNum"
-      @cashBnt="cashBnt"
-    ></settleDrawer>
-  </div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<Tabs v-model="tabActive" :animated="false">
+						<TabPane v-for="item in menus" :key="item.value" :label="item.name" :name="item.value"
+							:data-name="item.component">
+							<component :is="item.component" :userInfo="selectUserInfo" :type="item.value"></component>
+						</TabPane>
+					</Tabs>
+				</div>
+				<div v-if="sle === 1" class="member">
+					<Form :model="rechargeData" :label-width="82">
+						<FormItem label="会员时长：">
+							<template v-if="memberCheck.overdue_time">
+								<span class="num">{{ memberCheck.vip_day }}</span>天（{{ memberCheck.overdue_time }} 到期）
+							</template>
+							<span v-else class="num">永久</span>
+						</FormItem>
+						<FormItem :label-width="0" class="merber-radio-group">
+							<RadioGroup v-model="rechargeData.merber_id">
+								<Radio v-for="item in memberCard" :key="item.id" :label="item.id" border>
+									<div>{{ item.title }}</div>
+									<div>
+										¥<span class="num">{{ item.pre_price }}</span>
+									</div>
+									<div class="marking">¥{{ item.price }}</div>
+								</Radio>
+							</RadioGroup>
+						</FormItem>
+					</Form>
+				</div>
+				<div v-if="sle === 2" class="balance">
+					<Form :model="rechargeData" :label-width="82">
+						<FormItem label="充值方式：">
+							<RadioGroup v-model="rechargeType" type="button" button-style="solid">
+								<Radio :label="1">充值套餐</Radio>
+								<Radio :label="2">自定义充值</Radio>
+							</RadioGroup>
+						</FormItem>
+						<FormItem v-show="rechargeType == 1" :label-width="0" class="merber-radio-group">
+							<RadioGroup v-model="rechargeData.rechar_id">
+								<Radio v-for="item in rechargeList" :key="item.id" :label="item.id" border>
+									<div class="money">
+										¥<span class="num">{{ item.price }}</span>
+									</div>
+									<div class="marking">额外赠送：¥ {{ item.give_money }}</div>
+								</Radio>
+							</RadioGroup>
+						</FormItem>
+						<FormItem v-show="rechargeType == 2" label="充值金额：">
+							<InputNumber v-model="payPrice" :min="1" :max="9999999" placeholder="0.00"></InputNumber>
+						</FormItem>
+						<FormItem  label="邀请会员：">
+							<InputNumber v-model="usercodeid" placeholder="请扫码或者输入会员码"></InputNumber>
+						</FormItem>
+					</Form>
+				</div>
+			</div>
+			<div v-if="sle" class="footer">
+				<Button @click="recharge">点击支付</Button>
+			</div>
+		</div>
+		<Modal v-model="modalPay" footer-hide width="450px" class="modalPay" @on-cancel="yuePayClear">
+			<div class="payPage">
+				<div class="header acea-row row-center-wrapper">
+					<div class="pictrue"><img src="../../assets/images/gold.png" /></div>
+					<div class="text">应收金额(元)</div>
+				</div>
+				<div class="money">
+					¥<span class="num">{{ rechargeData.price }}</span>
+				</div>
+				<Input v-model="rechargeData.auth_code" ref="rechargeNum" size="large" type="url"
+					placeholder="请点击输入框聚焦扫码或输入编码号" style="margin-top: 16px" />
+				<div class="process">
+					<div class="pictrue">
+						<img src="../../assets/images/process2.png" />
+					</div>
+					<div class="list acea-row row-between-wrapper">
+						<div class="item one">
+							<div class="name">出示付款码</div>
+							<div>支付宝/微信</div>
+						</div>
+						<div class="item two">
+							<div class="name">扫描付款码</div>
+							<div>扫码枪</div>
+						</div>
+						<div class="item three">
+							<div class="name">确认收款</div>
+							<div>收银台点击确认</div>
+						</div>
+					</div>
+				</div>
+				<Button type="primary" class="bnt" @click="confirm">确认</Button>
+			</div>
+		</Modal>
+		<Modal v-model="modalCash" class="cash" footer-hide width="770px" @on-cancel="cancel">
+			<div class="cashPage acea-row">
+				<div class="left">
+					<div class="picture">
+						<img src="../../assets/images/gold.png" />
+					</div>
+					<div class="text">应收金额(元)</div>
+					<div class="money">
+						¥<span class="num">{{ rechargeData.price || 0 }}</span>
+					</div>
+				</div>
+				<div class="right">
+					<div class="rightCon">
+						<div class="top acea-row row-between-wrapper">
+							<div>实际收款(元)</div>
+							<div class="num">{{ collection }}</div>
+						</div>
+						<div class="center acea-row row-between-wrapper">
+							<div>需找零(元)</div>
+							<div v-if="$computes.Sub(collection, rechargeData.price || 0) > 0" class="num">
+								{{ $computes.Sub(collection, rechargeData.price || 0) }}
+							</div>
+							<div v-else class="num">0</div>
+						</div>
+						<div class="bottom acea-row">
+							<div v-for="(item, index) in numList" :key="index" :class="item == '.' ? 'spot' : ''"
+								class="item acea-row row-center-wrapper" @click="numTap(item)">
+								{{ item }}
+							</div>
+							<div class="item acea-row row-center-wrapper" @click="delNum">
+								<Icon type="ios-backspace" />
+							</div>
+						</div>
+					</div>
+					<Button type="primary" @click="cashBnt">确认</Button>
+				</div>
+			</div>
+		</Modal>
+		<settleDrawer v-model="settleVisible" :list="payList" :type="payType" :money="rechargeData.price"
+			:collection="collection" @payPrice="onPayPrice" @numTap="numTap" @delNum="delNum" @cashBnt="cashBnt">
+		</settleDrawer>
+	</div>
 </template>
 
 <script>
-import userInfo from './components/userInfo.vue';
-import userTable from './components/userTable.vue';
-import userList from './components/userList';
-import goodsList from '@/pages/hang/components/goodsList';
-import userOrder from '@/pages/order/components/userOrder';
-import orderDetails from '@/pages/order/components/orderDetails';
-import orderRecord from '@/components/orderRecord';
-import settleDrawer from "@/components/settleDrawer";
-import { getRechargeData } from '@/api/recharge';
-import '../../assets/js/core.js';
-import {
-  userListApi,
-  userSaveApi,
-  checkOrderApi,
-  readUserInfo,
-  getMemberCard,
-  memberRecharge,
-} from '@api/user';
-
-export default {
-  components: {
-    userList,
-    goodsList,
-    userOrder,
-    orderDetails,
-    orderRecord,
-    userInfo,
-    userTable,
-    settleDrawer,
-  },
-  data() {
-    return {
-      userList: [],
-      // orderListData: [{}],
-      tabs: ['会员详情', '付费会员', '余额充值'],
-      sle: 0,
-      // filterModal: false,
-      rechargeList: [],
-      searchData: {
-        type: 0,
-        status: 0,
-        time: 0,
-        people: 0,
-      },
-      rechargeData: {
-        uid: 0,
-        price: 0,
-        rechar_id: 0,
-        merber_id: 0,
-        pay_type: 3,
-        auth_code: '',
-      },
-      // selTypeIndex: 0,
-      payPrice: 1,
-      payNum: 0,
-      total: 0,
-      modalPay: false,
-      userFrom: {
-        keyword: '',
-        page: 1,
-        limit: 15,
-        field_key: 'all',
-      },
-      selectUserData: {},
-      selectUserInfo: {},
-      menus: [
-        {
-          name: '用户信息',
-          value: 'info',
-          component: 'userInfo',
-        },
-        {
-          name: '消费记录',
-          value: 'order',
-          component: 'userTable',
-        },
-        {
-          name: '积分明细',
-          value: 'integral',
-          component: 'userTable',
-        },
-        {
-          name: '持有优惠券',
-          value: 'coupon',
-          component: 'userTable',
-        },
-        {
-          name: '余额变动',
-          value: 'balance_change',
-          component: 'userTable',
-        },
-        {
-          name: '浏览足迹',
-          value: 'visit',
-          component: 'userTable',
-        },
-        {
-          name: '推广人变更记录',
-          value: 'spread_change',
-          component: 'userTable',
-        },
-      ],
-      tabActive: 'info',
-      memberCard: [],
-      rechargeType: 1,
-      modalCash: false,
-      collectionArray: [],
-      collection: 0,
-      numList: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '.'],
-      isOrderCreate: 0,
-      settleVisible: false,
-      payType: '',
-      payList: [
-        {
-          label: '微信/支付宝',
-          value: '',
-          status: true,
-        },
-        {
-          label: '现金收款',
-          value: 'cash',
-          status: true,
-        },
-      ],
-    };
-  },
-  computed: {
-    memberCheck() {
-      let member = this.memberCard.find(
-        (item) => item.id == this.rechargeData.merber_id
-      );
-      return member || {};
-    },
-    balanceCheck() {
-      let balance = this.rechargeList.find(
-        (item) => item.id == this.rechargeData.rechar_id
-      );
-      return balance || {};
-    },
-  },
-  watch: {
-    'selectUserData.uid'(value) {
-      if (value) {
-        this.readUserInfo();
-        this.getMemberCard();
-      }
-    },
-    total(value) {
-      if (value) {
-        this.getRechargeData();
-      } else {
-        this.selectUserInfo = this.selectUserData = {};
-        this.sle = 0;
-        this.rechargeType = 1;
-        this.payPrice = 1;
-      }
-    },
-    payPrice(value) {
-      this.$nextTick(() => {
-        if (typeof value != 'number') {
-          return;
-        }
-        if (parseFloat(value) == parseInt(value)) {
-          return;
-        }
-        if (value.toString().length - (value.toString().indexOf('.') + 1) > 2) {
-          this.payPrice = Number(value.toFixed(2));
-        }
-      });
-    },
-  },
-  created() {
-    this.userListApi();
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  },
-  methods: {
-    jsToJava() {
-      try {
-        window.Jsbridge.invoke(
-          'openCacheBox',
-          JSON.stringify({ 'p1-key': 'p1-value' }),
-          this.myFunction()
-        );
-      } catch (e) {}
-    },
-    // 监听键盘函数
-    keyboard() {
-      let that = this;
-
-      function delNums(item) {
-        that.collectionArray.pop();
-        that.collection = that.collectionArray.length
-          ? that.collectionArray.join('')
-          : 0;
-      }
-
-      function numTaps(item) {
-        if (that.defaultcalc === false) {
-          that.collection = '';
-          that.defaultcalc = true;
-        }
-        let x = String(that.collection).indexOf('.') + 1;
-        let y = String(that.collection).length - x;
-        if (x === 0 || y < 2) {
-          if (that.collectionArray.join('') <= 9999999) {
-            that.collectionArray.push(item);
-          }
-          that.collection =
-            that.collectionArray.join('') > 99999999
-              ? 99999999
-              : that.collectionArray.join('');
-        }
-      }
-
-      document.onkeydown = function (event) {
-        let e = event || window.event;
-        let key = e.keyCode;
-        if (that.modalCash) {
-          event.stopPropagation(); // 阻止事件冒泡传递
-          event.preventDefault(); //阻止默认事件原有功能
-        }
-        switch (key) {
-          case 96:
-          case 48:
-            numTaps(0);
-            break;
-          case 97:
-          case 49:
-            numTaps(1);
-            break;
-          case 98:
-          case 50:
-            numTaps(2);
-            break;
-          case 99:
-          case 51:
-            numTaps(3);
-            break;
-          case 100:
-          case 52:
-            numTaps(4);
-            break;
-          case 101:
-          case 53:
-            numTaps(5);
-            break;
-          case 102:
-          case 54:
-            numTaps(6);
-            break;
-          case 103:
-          case 55:
-            numTaps(7);
-            break;
-          case 104:
-          case 56:
-            numTaps(8);
-            break;
-          case 105:
-          case 57:
-            numTaps(9);
-            break;
-          case 110:
-            numTaps('.');
-            break;
-          case 190:
-            numTaps('.');
-            break;
-          case 8:
-            delNums();
-            break;
-        }
-      };
-    },
-    //现金收款创建订单并支付
-    cashBnt(payNum) {
-      if (this.cashBntLoading) return;
-      this.cashBntLoading = true;
-      if (this.payType) {
-        this.rechargeData.pay_type = 4;
-      } else {
-        this.rechargeData.pay_type = 3;
-        this.rechargeData.auth_code = payNum;
-      }
-      this.confirm();
-      setTimeout(() => {
-        this.cashBntLoading = false;
-      }, 1000);
-      return
-      // if (this.isOrderCreate) {
-      //   this.getCashierPay('cash');
-      // } else {
-      //   this.confirm();
-      // }
-    },
-    //清除计算机输入的数字
-    delNum() {
-      this.collectionArray.pop();
-      this.collection = this.collectionArray.length
-        ? this.collectionArray.join('')
-        : 0;
-    },
-    //输入实际收款金额
-    numTap(item) {
-      if (this.defaultcalc === false) {
-        this.collection = '';
-        this.defaultcalc = true;
-      }
-      let x = String(this.collection).indexOf('.') + 1;
-      let y = String(this.collection).length - x;
-      if (x === 0 || y < 2) {
-        if (this.collectionArray.join('') <= 9999999) {
-          this.collectionArray.push(item);
-        }
-        this.collection =
-          this.collectionArray.join('') > 99999999
-            ? 99999999
-            : this.collectionArray.join('');
-      }
-    },
-    cancel() {
-      this.collection = 0;
-      this.collectionArray = [];
-    },
-    // 付费会员充值
-    memberRecharge() {
-      let rechargeData = { ...this.rechargeData };
-      delete rechargeData.rechar_id;
-      if (
-        this.rechargeData.pay_type == 4 &&
-        this.rechargeData.price > Number(this.collection)
-      ) {
-        return this.$Message.error('您付款金额不足');
-      }
-      memberRecharge(rechargeData)
-        .then((res) => {
-          const { status, data } = res.data;
-          switch (status) {
-            case 'SUCCESS':
-              this.$Message.success('支付成功');
-              this.settleVisible = false;
-              this.search();
-              this.payPrice = 1;
-              if (this.rechargeData.pay_type == 4) {
-                // this.modalCash = false;
-                this.jsToJava();
-              } else {
-                // this.modalPay = false;
-                this.rechargeData.auth_code = '';
-              }
-              break;
-            case 'PAY_ING':
-              let msg = this.$Message.loading({
-                content: '等待支付中...',
-                duration: 0,
-              });
-              this.checkOrderTime(data.order_id, msg);
-              break;
-            default:
-              this.$Message.warning('支付失败');
-              break;
-          }
-        })
-        .catch((err) => {
-          this.$Message.warning(err.msg);
-        });
-    },
-    // 获取付费会员类型
-    getMemberCard() {
-      let { is_money_level, overdue_time } = this.selectUserData;
-      getMemberCard({
-        is_money_level,
-        overdue_time,
-      }).then((res) => {
-        this.memberCard = res.data;
-      });
-    },
-    readUserInfo() {
-      readUserInfo(this.selectUserData.uid).then((res) => {
-        this.selectUserInfo = res.data.ps_info;
-      });
-    },
-    addPage() {
-      if (this.userList.length < this.total) this.userFrom.page++;
-      this.userListApi();
-    },
-    search() {
-      this.userList = [];
-      this.userFrom.page = 1;
-      this.userListApi();
-    },
-    // 用户列表
-    userListApi() {
-      this.loading = true;
-      userListApi(this.userFrom)
-        .then((res) => {
-          this.loading = false;
-          this.total = res.data.count;
-          if (this.userFrom.page === 1) {
-            this.selectUserData = res.data.list.length ? res.data.list[0] : {};
-            this.rechargeData.uid = res.data.list.length
-              ? res.data.list[0].uid
-              : '';
-          }
-          this.userList = this.userList.concat(res.data.list);
-          let cashierUser = window.localStorage.getItem('cashierUser');
-          if (cashierUser) {
-            cashierUser = JSON.parse(cashierUser);
-            if (
-              Object.prototype.toString.call(cashierUser) === '[object Object]'
-            ) {
-              for (const userItem of this.userList) {
-                if (cashierUser.uid === userItem.uid) {
-                  cashierUser.now_money = userItem.now_money;
-                  window.localStorage.setItem(
-                    'cashierUser',
-                    JSON.stringify(cashierUser)
-                  );
-                  break;
-                }
-              }
-            }
-          }
-        })
-        .catch((err) => {
-          this.loading = false;
-          this.$Message.error(err.msg);
-        });
-    },
-    keyupEvent(val) {
-      if (val) {
-        var re = /^\D*([0-9]\d*\.?\d{0,2})?.*$/;
-        let price = val.toString().replace(re, '$1');
-        this.payPrice = Number(price);
-      } else {
-        this.payPrice = '';
-      }
-    },
-    selectTab(index) {
-      this.sle = index;
-      if (index == 1) {
-        if (this.memberCard.length) {
-          this.rechargeData.merber_id = this.memberCard[0].id;
-        }
-      } else if (index == 2) {
-        this.rechargeType = 1;
-        if (this.rechargeList.length) {
-          this.rechargeData.rechar_id = this.rechargeList[0].id;
-        }
-      }
-    },
-    clear() {
-      this.payPrice = 0;
-      this.sel = 0;
-    },
-    yuePayClear() {
-      this.$Message.destroy();
-      if (this.timer) {
-        clearInterval(this.timer);
-        this.timer = null;
-      }
-    },
-    getRechargeData() {
-      getRechargeData().then((res) => {
-        this.rechargeList = res.data.recharge_quota;
-      });
-    },
-    // 确认充值
-    confirm() {
-      if (this.sle == 1) {
-        return this.memberRecharge();
-      }
-      let rechargeData = { ...this.rechargeData };
-      if (this.rechargeType == 2) {
-        delete rechargeData.rechar_id;
-      }
-      userSaveApi(rechargeData)
-        .then((res) => {
-          this.payNum = '';
-          let status = res.data.status;
-          let orderId = res.data.data.order_id;
-          switch (status) {
-            case 'SUCCESS':
-              this.$Message.success('支付成功');
-              this.settleVisible = false;
-              // this.modalPay = false;
-              // this.modal = false;
-              this.search();
-              // this.rechargeData.auth_code = '';
-              this.payPrice = 1;
-              this.$emit('getSuccess', this.totalPrice);
-              if (this.rechargeData.pay_type == 4) {
-                // this.modalCash = false;
-                this.jsToJava();
-              } else {
-                // this.modalPay = false;
-                this.rechargeData.auth_code = '';
-              }
-              break;
-            case 'PAY_ING':
-              let msg = this.$Message.loading({
-                content: '等待支付中...',
-                duration: 0,
-              });
-              this.checkOrderTime(orderId, msg);
-              break;
-            default:
-              this.$Message.warning('支付失败');
-              break;
-          }
-        })
-        .catch((err) => {
-          this.payNum = '';
-          this.rechargeData.auth_code = '';
-          this.$Message.error(err.msg);
-        });
-    },
-    checkOrderTime(orderId, msg) {
-      let that = this;
-      let num = 1;
-      let timer = (this.timer = setInterval(function () {
-        that.checkOrder(orderId, timer, msg);
-        num++;
-        if (num >= 60) {
-          clearInterval(timer);
-          msg();
-          that.$Message.success('支付失败');
-        }
-      }, 1000));
-    },
-    checkOrder(orderId, timer, msg) {
-      checkOrderApi(this.sle == 2 ? 1 : 2, { order_id: orderId })
-        .then((res) => {
-          if (res.data.status == true) {
-            msg();
-            this.$Message.success('支付成功');
-            this.$emit('getSuccess', this.totalPrice);
-            this.modalPay = false;
-            this.modal = false;
-            clearInterval(timer);
-            this.readUserInfo();
-          }
-        })
-        .catch((err) => {
-          msg();
-          this.$Message.error(err.msg);
-        });
-    },
-    selectUser(data) {
-      this.selectUserData = data;
-      this.rechargeData.uid = data.uid;
-      this.sle = 0;
-      this.rechargeData.rechar_id = 0;
-      // this.selTypeIndex = 0;
-      this.payPrice = 1;
-    },
-    // 点击充值按钮
-    recharge(type) {
-      if (!this.selectUserData.uid) {
-        return this.$Message.error('请先选择会员');
-      }
-      if (this.sle == 1) {
-        this.rechargeData.price = Number(this.memberCheck.pre_price);
-      } else {
-        if (this.rechargeType == 1) {
-          this.rechargeData.price = this.balanceCheck.price;
-        } else {
-          if (!this.payPrice) {
-            return this.$Message.error('请先输入金额');
-          }
-          this.rechargeData.price = this.payPrice;
-        }
-      }
-      this.collection = this.rechargeData.price;
-      // this.payType = type;
-      this.settleVisible = true;
-      // if (type) {
-      //   // this.modalCash = true;
-      //   this.rechargeData.pay_type = 4;
-      //   this.keyboard();
-      // } else {
-      //   // this.modalPay = true;
-      //   this.rechargeData.pay_type = 3;
-      //   // this.$nextTick(() => {
-      //   //   this.$refs.rechargeNum.focus();
-      //   // });
-      // }
-    },
-    onPayPrice(type) {
-      this.payType = type;
-      this.rechargeData.auth_code = '';
-    },
-  },
-};
+	import userInfo from './components/userInfo.vue';
+	import userTable from './components/userTable.vue';
+	import userList from './components/userList';
+	import goodsList from '@/pages/hang/components/goodsList';
+	import userOrder from '@/pages/order/components/userOrder';
+	import orderDetails from '@/pages/order/components/orderDetails';
+	import orderRecord from '@/components/orderRecord';
+	import settleDrawer from "@/components/settleDrawer";
+	import {
+		getRechargeData
+	} from '@/api/recharge';
+	import '../../assets/js/core.js';
+	import {
+		userListApi,
+		userSaveApi,
+		checkOrderApi,
+		readUserInfo,
+		getMemberCard,
+		memberRecharge,
+	} from '@api/user';
+
+	export default {
+		components: {
+			userList,
+			goodsList,
+			userOrder,
+			orderDetails,
+			orderRecord,
+			userInfo,
+			userTable,
+			settleDrawer,
+		},
+		data() {
+			return {
+				// 邀请充值用户id
+				usercodeid: '',
+				userList: [],
+				// orderListData: [{}],
+				tabs: ['会员详情', '付费会员', '余额充值'],
+				sle: 0,
+				// filterModal: false,
+				rechargeList: [],
+				searchData: {
+					type: 0,
+					status: 0,
+					time: 0,
+					people: 0,
+				},
+				rechargeData: {
+					uid: 0,
+					price: 0,
+					rechar_id: 0,
+					merber_id: 0,
+					pay_type: 3,
+					auth_code: '',
+				},
+				// selTypeIndex: 0,
+				payPrice: 1,
+				payNum: 0,
+				total: 0,
+				modalPay: false,
+				userFrom: {
+					keyword: '',
+					page: 1,
+					limit: 15,
+					field_key: 'all',
+				},
+				selectUserData: {},
+				selectUserInfo: {},
+				menus: [{
+						name: '用户信息',
+						value: 'info',
+						component: 'userInfo',
+					},
+					{
+						name: '消费记录',
+						value: 'order',
+						component: 'userTable',
+					},
+					{
+						name: '积分明细',
+						value: 'integral',
+						component: 'userTable',
+					},
+					{
+						name: '持有优惠券',
+						value: 'coupon',
+						component: 'userTable',
+					},
+					{
+						name: '余额变动',
+						value: 'balance_change',
+						component: 'userTable',
+					},
+					{
+						name: '浏览足迹',
+						value: 'visit',
+						component: 'userTable',
+					},
+					{
+						name: '推广人变更记录',
+						value: 'spread_change',
+						component: 'userTable',
+					},
+				],
+				tabActive: 'info',
+				memberCard: [],
+				rechargeType: 1,
+				modalCash: false,
+				collectionArray: [],
+				collection: 0,
+				numList: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '.'],
+				isOrderCreate: 0,
+				settleVisible: false,
+				payType: '',
+				payList: [{
+						label: '微信/支付宝',
+						value: '',
+						status: true,
+					},
+					{
+						label: '现金收款',
+						value: 'cash',
+						status: true,
+					},
+				],
+			};
+		},
+		computed: {
+			memberCheck() {
+				let member = this.memberCard.find(
+					(item) => item.id == this.rechargeData.merber_id
+				);
+				return member || {};
+			},
+			balanceCheck() {
+				let balance = this.rechargeList.find(
+					(item) => item.id == this.rechargeData.rechar_id
+				);
+				return balance || {};
+			},
+		},
+		watch: {
+			'selectUserData.uid'(value) {
+				if (value) {
+					this.readUserInfo();
+					this.getMemberCard();
+				}
+			},
+			total(value) {
+				if (value) {
+					this.getRechargeData();
+				} else {
+					this.selectUserInfo = this.selectUserData = {};
+					this.sle = 0;
+					this.rechargeType = 1;
+					this.payPrice = 1;
+				}
+			},
+			payPrice(value) {
+				this.$nextTick(() => {
+					if (typeof value != 'number') {
+						return;
+					}
+					if (parseFloat(value) == parseInt(value)) {
+						return;
+					}
+					if (value.toString().length - (value.toString().indexOf('.') + 1) > 2) {
+						this.payPrice = Number(value.toFixed(2));
+					}
+				});
+			},
+		},
+		created() {
+			this.userListApi();
+		},
+		beforeDestroy() {
+			clearInterval(this.timer);
+		},
+		methods: {
+			jsToJava() {
+				try {
+					window.Jsbridge.invoke(
+						'openCacheBox',
+						JSON.stringify({
+							'p1-key': 'p1-value'
+						}),
+						this.myFunction()
+					);
+				} catch (e) {}
+			},
+			// 监听键盘函数
+			keyboard() {
+				let that = this;
+
+				function delNums(item) {
+					that.collectionArray.pop();
+					that.collection = that.collectionArray.length ?
+						that.collectionArray.join('') :
+						0;
+				}
+
+				function numTaps(item) {
+					if (that.defaultcalc === false) {
+						that.collection = '';
+						that.defaultcalc = true;
+					}
+					let x = String(that.collection).indexOf('.') + 1;
+					let y = String(that.collection).length - x;
+					if (x === 0 || y < 2) {
+						if (that.collectionArray.join('') <= 9999999) {
+							that.collectionArray.push(item);
+						}
+						that.collection =
+							that.collectionArray.join('') > 99999999 ?
+							99999999 :
+							that.collectionArray.join('');
+					}
+				}
+
+				document.onkeydown = function(event) {
+					let e = event || window.event;
+					let key = e.keyCode;
+					if (that.modalCash) {
+						event.stopPropagation(); // 阻止事件冒泡传递
+						event.preventDefault(); //阻止默认事件原有功能
+					}
+					switch (key) {
+						case 96:
+						case 48:
+							numTaps(0);
+							break;
+						case 97:
+						case 49:
+							numTaps(1);
+							break;
+						case 98:
+						case 50:
+							numTaps(2);
+							break;
+						case 99:
+						case 51:
+							numTaps(3);
+							break;
+						case 100:
+						case 52:
+							numTaps(4);
+							break;
+						case 101:
+						case 53:
+							numTaps(5);
+							break;
+						case 102:
+						case 54:
+							numTaps(6);
+							break;
+						case 103:
+						case 55:
+							numTaps(7);
+							break;
+						case 104:
+						case 56:
+							numTaps(8);
+							break;
+						case 105:
+						case 57:
+							numTaps(9);
+							break;
+						case 110:
+							numTaps('.');
+							break;
+						case 190:
+							numTaps('.');
+							break;
+						case 8:
+							delNums();
+							break;
+					}
+				};
+			},
+			//现金收款创建订单并支付
+			cashBnt(payNum) {
+				if (this.cashBntLoading) return;
+				this.cashBntLoading = true;
+				if (this.payType) {
+					this.rechargeData.pay_type = 4;
+				} else {
+					this.rechargeData.pay_type = 3;
+					this.rechargeData.auth_code = payNum;
+				}
+				this.confirm();
+				setTimeout(() => {
+					this.cashBntLoading = false;
+				}, 1000);
+				return
+				// if (this.isOrderCreate) {
+				//   this.getCashierPay('cash');
+				// } else {
+				//   this.confirm();
+				// }
+			},
+			//清除计算机输入的数字
+			delNum() {
+				this.collectionArray.pop();
+				this.collection = this.collectionArray.length ?
+					this.collectionArray.join('') :
+					0;
+			},
+			//输入实际收款金额
+			numTap(item) {
+				if (this.defaultcalc === false) {
+					this.collection = '';
+					this.defaultcalc = true;
+				}
+				let x = String(this.collection).indexOf('.') + 1;
+				let y = String(this.collection).length - x;
+				if (x === 0 || y < 2) {
+					if (this.collectionArray.join('') <= 9999999) {
+						this.collectionArray.push(item);
+					}
+					this.collection =
+						this.collectionArray.join('') > 99999999 ?
+						99999999 :
+						this.collectionArray.join('');
+				}
+			},
+			cancel() {
+				this.collection = 0;
+				this.collectionArray = [];
+			},
+			// 付费会员充值
+			memberRecharge() {
+				let rechargeData = {
+					...this.rechargeData
+				};
+				delete rechargeData.rechar_id;
+				if (
+					this.rechargeData.pay_type == 4 &&
+					this.rechargeData.price > Number(this.collection)
+				) {
+					return this.$Message.error('您付款金额不足');
+				}
+				memberRecharge(rechargeData)
+					.then((res) => {
+						const {
+							status,
+							data
+						} = res.data;
+						switch (status) {
+							case 'SUCCESS':
+								this.$Message.success('支付成功');
+								this.settleVisible = false;
+								this.search();
+								this.payPrice = 1;
+								if (this.rechargeData.pay_type == 4) {
+									// this.modalCash = false;
+									this.jsToJava();
+								} else {
+									// this.modalPay = false;
+									this.rechargeData.auth_code = '';
+								}
+								break;
+							case 'PAY_ING':
+								let msg = this.$Message.loading({
+									content: '等待支付中...',
+									duration: 0,
+								});
+								this.checkOrderTime(data.order_id, msg);
+								break;
+							default:
+								this.$Message.warning('支付失败');
+								break;
+						}
+					})
+					.catch((err) => {
+						this.$Message.warning(err.msg);
+					});
+			},
+			// 获取付费会员类型
+			getMemberCard() {
+				let {
+					is_money_level,
+					overdue_time
+				} = this.selectUserData;
+				getMemberCard({
+					is_money_level,
+					overdue_time,
+				}).then((res) => {
+					this.memberCard = res.data;
+				});
+			},
+			readUserInfo() {
+				readUserInfo(this.selectUserData.uid).then((res) => {
+					this.selectUserInfo = res.data.ps_info;
+				});
+			},
+			addPage() {
+				if (this.userList.length < this.total) this.userFrom.page++;
+				this.userListApi();
+			},
+			search() {
+				this.userList = [];
+				this.userFrom.page = 1;
+				this.userListApi();
+			},
+			// 用户列表
+			userListApi() {
+				this.loading = true;
+				userListApi(this.userFrom)
+					.then((res) => {
+						this.loading = false;
+						this.total = res.data.count;
+						if (this.userFrom.page === 1) {
+							this.selectUserData = res.data.list.length ? res.data.list[0] : {};
+							this.rechargeData.uid = res.data.list.length ?
+								res.data.list[0].uid :
+								'';
+						}
+						this.userList = this.userList.concat(res.data.list);
+						let cashierUser = window.localStorage.getItem('cashierUser');
+						if (cashierUser) {
+							cashierUser = JSON.parse(cashierUser);
+							if (
+								Object.prototype.toString.call(cashierUser) === '[object Object]'
+							) {
+								for (const userItem of this.userList) {
+									if (cashierUser.uid === userItem.uid) {
+										cashierUser.now_money = userItem.now_money;
+										window.localStorage.setItem(
+											'cashierUser',
+											JSON.stringify(cashierUser)
+										);
+										break;
+									}
+								}
+							}
+						}
+					})
+					.catch((err) => {
+						this.loading = false;
+						this.$Message.error(err.msg);
+					});
+			},
+			keyupEvent(val) {
+				if (val) {
+					var re = /^\D*([0-9]\d*\.?\d{0,2})?.*$/;
+					let price = val.toString().replace(re, '$1');
+					this.payPrice = Number(price);
+				} else {
+					this.payPrice = '';
+				}
+			},
+			selectTab(index) {
+				this.sle = index;
+				if (index == 1) {
+					if (this.memberCard.length) {
+						this.rechargeData.merber_id = this.memberCard[0].id;
+					}
+				} else if (index == 2) {
+					this.rechargeType = 1;
+					if (this.rechargeList.length) {
+						this.rechargeData.rechar_id = this.rechargeList[0].id;
+					}
+				}
+			},
+			clear() {
+				this.payPrice = 0;
+				this.sel = 0;
+			},
+			yuePayClear() {
+				this.$Message.destroy();
+				if (this.timer) {
+					clearInterval(this.timer);
+					this.timer = null;
+				}
+			},
+			getRechargeData() {
+				getRechargeData().then((res) => {
+					this.rechargeList = res.data.recharge_quota;
+				});
+			},
+			// 确认充值
+			confirm() {
+				if (this.sle == 1) {
+					return this.memberRecharge();
+				}
+				let rechargeData = {
+					...this.rechargeData
+				};
+				if (this.rechargeType == 2) {
+					delete rechargeData.rechar_id;
+				}
+				userSaveApi(rechargeData)
+					.then((res) => {
+						this.payNum = '';
+						let status = res.data.status;
+						let orderId = res.data.data.order_id;
+						switch (status) {
+							case 'SUCCESS':
+								this.$Message.success('支付成功');
+								this.settleVisible = false;
+								// this.modalPay = false;
+								// this.modal = false;
+								this.search();
+								// this.rechargeData.auth_code = '';
+								this.payPrice = 1;
+								this.$emit('getSuccess', this.totalPrice);
+								if (this.rechargeData.pay_type == 4) {
+									// this.modalCash = false;
+									this.jsToJava();
+								} else {
+									// this.modalPay = false;
+									this.rechargeData.auth_code = '';
+								}
+								break;
+							case 'PAY_ING':
+								let msg = this.$Message.loading({
+									content: '等待支付中...',
+									duration: 0,
+								});
+								this.checkOrderTime(orderId, msg);
+								break;
+							default:
+								this.$Message.warning('支付失败');
+								break;
+						}
+					})
+					.catch((err) => {
+						this.payNum = '';
+						this.rechargeData.auth_code = '';
+						this.$Message.error(err.msg);
+					});
+			},
+			checkOrderTime(orderId, msg) {
+				let that = this;
+				let num = 1;
+				let timer = (this.timer = setInterval(function() {
+					that.checkOrder(orderId, timer, msg);
+					num++;
+					if (num >= 60) {
+						clearInterval(timer);
+						msg();
+						that.$Message.success('支付失败');
+					}
+				}, 1000));
+			},
+			checkOrder(orderId, timer, msg) {
+				checkOrderApi(this.sle == 2 ? 1 : 2, {
+						order_id: orderId
+					})
+					.then((res) => {
+						if (res.data.status == true) {
+							msg();
+							this.$Message.success('支付成功');
+							this.$emit('getSuccess', this.totalPrice);
+							this.modalPay = false;
+							this.modal = false;
+							clearInterval(timer);
+							this.readUserInfo();
+						}
+					})
+					.catch((err) => {
+						msg();
+						this.$Message.error(err.msg);
+					});
+			},
+			selectUser(data) {
+				this.selectUserData = data;
+				this.rechargeData.uid = data.uid;
+				this.sle = 0;
+				this.rechargeData.rechar_id = 0;
+				// this.selTypeIndex = 0;
+				this.payPrice = 1;
+			},
+			// 点击充值按钮
+			recharge(type) {
+				if (!this.selectUserData.uid) {
+					return this.$Message.error('请先选择会员');
+				}
+				if(this.sle == 2){
+					this.rechargeData.bar_code = this.usercodeid;
+				}else{
+					this.rechargeData.bar_code = '';
+				}
+				if (this.sle == 1) {
+					this.rechargeData.price = Number(this.memberCheck.pre_price);
+				} else {
+					if (this.rechargeType == 1) {
+						this.rechargeData.price = this.balanceCheck.price;
+					} else {
+						if (!this.payPrice) {
+							return this.$Message.error('请先输入金额');
+						}
+						this.rechargeData.price = this.payPrice;
+					}
+				}
+				this.collection = this.rechargeData.price;
+				// this.payType = type;
+				this.settleVisible = true;
+				// if (type) {
+				//   // this.modalCash = true;
+				//   this.rechargeData.pay_type = 4;
+				//   this.keyboard();
+				// } else {
+				//   // this.modalPay = true;
+				//   this.rechargeData.pay_type = 3;
+				//   // this.$nextTick(() => {
+				//   //   this.$refs.rechargeNum.focus();
+				//   // });
+				// }
+			},
+			onPayPrice(type) {
+				this.payType = type;
+				this.rechargeData.auth_code = '';
+			},
+		},
+	};
 </script>
 <style scoped lang="stylus">
-::-webkit-scrollbar {
-  display: none;
-}
-
-.order {
-  display: flex;
-  height: calc(100vh - 66px);
-  padding: 20px;
-  background-color: #F5F5F5;
-
-  .left {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    width: 460px;
-    border-radius: 20px;
-    background: #FFFFFF;
-
-    .left-top {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 24px;
-
-      .title {
-        color: rgba(0, 0, 0, 0.85);
-        font-weight: 600;
-        font-size: 20px;
-      }
-
-      .sx {
-        color: #666666;
-
-        .ios-funnel-outline {
-          font-weight: bold;
-          font-size: 12px;
-        }
-      }
-    }
-
-    .order-box {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      font-size: 18px;
-
-      .search {
-        padding: 0 24px 24px;
-
-        /deep/.ivu-input {
-          padding-left: 14px;
-          border-color: #DDDDDD;
-          border-radius: 20px 0 0 20px;
-        }
-
-        /deep/.ivu-input-search {
-          border-radius: 0px 20px 20px 0px;
-          background: #1890FF !important;
-          font-size: 14px;
-          line-height: normal;
-        }
-      }
-
-      .pending-user {
-        flex: 1;
-      }
-    }
-  }
-
-  .order-data {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    border-radius: 20px;
-    margin-left: 20px;
-
-    .content {
-      flex: 1;
-      padding: 24px;
-      border-radius: 0 20px 20px;
-      background: #FFFFFF;
-      overflow-x: hidden;
-    }
-
-    .border-radius {
-      border-radius: 20px 20px 0 0;
-    }
-
-    .header {
-      display: flex;
-      background: #FFFFFF;
-      font-size: 18px;
-
-      .box {
-        flex: 1;
-        background: #F5F5F5;
-      }
-
-      .item {
-        cursor: pointer;
-        background-color: #F5F5F5;
-        transition: all 0.1s;
-      }
-
-      .item-wrap {
-        padding: 16px 29px;
-        border-radius: 20px 20px 0px 0px;
-      }
-
-      .sel {
-        color: rgba(0, 0, 0, 0.85);
-        font-weight: 500;
-
-        .item-wrap {
-          background: #FFFFFF;
-        }
-      }
-
-      .neighbor-left {
-        border-bottom-right-radius: 20px;
-      }
-
-      .neighbor-right {
-        border-bottom-left-radius: 20px;
-      }
-    }
-
-    .recharge {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 10px;
-
-      .item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        border-radius: 10px;
-        border: 1px solid #1890FF;
-        padding: 24px 34px;
-        width: 30%;
-        height: 102px;
-        margin: 1%;
-        cursor: pointer;
-
-        .price {
-          font-size: 24px;
-          color: #1890FF;
-        }
-
-        .give-price {
-          color: #999999;
-          font-size: 14px;
-          white-space: nowrap;
-        }
-      }
-
-      .item.sel {
-        background-color: #1890FF;
-        color: #fff;
-
-        .price {
-          font-size: 24px;
-          color: #fff;
-        }
-
-        .give-price {
-          color: #fff;
-        }
-      }
-    }
-
-    .diy-recharge {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      margin-top: 200px;
-
-      .text {
-        font-size: 20px;
-      }
-
-      .inputNum {
-        width: 45%;
-        margin: 28px 0 14px 0;
-        height: 66px;
-      }
-
-      /deep/ .ivu-input-number-large {
-        height: 66px;
-        font-size: 30px;
-      }
-
-      /deep/ .ivu-input-number-input-wrap {
-        height: 66px;
-      }
-
-      /deep/ .ivu-input-number-handler-wrap {
-        display: none;
-      }
-
-      /deep/ .ivu-input-number-large input {
-        height: 66px;
-        line-height: 66px;
-      }
-
-      .tip {
-        font-size: 13px;
-        color: rgba(153, 153, 153, 0.85);
-        margin-top: 15px;
-      }
-    }
-
-    .footer {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      height: 88px;
-      padding: 0 88px;
-      border-radius: 0 0 20px 20px;
-      background: #FFFFFF;
-      box-shadow: 0 -1px 11px 0 rgba(0, 0, 0, 0.06);
-
-      .ivu-btn {
-        width: 100%;
-        height: 50px;
-        border-color: #1890FF;
-        border-radius: 25px;
-        background: #1890FF;
-        font-size: 18px !important;
-        color: #FFFFFF;
-
-        &:focus {
-          box-shadow: none;
-        }
-      }
-    }
-  }
-}
-
-.payPage {
-  text-align: center;
-  padding: 16px;
-
-  /deep/ .ivu-input {
-    width: 394px !important;
-    text-align: center;
-  }
-
-  .header {
-    margin: 35px 0 3px 0;
-  }
-
-  .process {
-    width: 394px;
-    height: 158px;
-    border: 1px dashed #D8D8D8;
-    border-top: 1px dashed #fff;
-    margin: -1px auto 0 auto;
-
-    &.on {
-      border-top: 1px dashed #D8D8D8;
-      margin-top: 20px;
-
-      .list {
-        padding-left: 14px !important;
-      }
-    }
-
-    .list {
-      padding: 6px 10px 0 18px;
-
-      .item {
-        font-size: 12px;
-        color: #666;
-
-        .name {
-          color: #333;
-          font-size: 13px;
-          font-weight: bold;
-        }
-      }
-    }
-
-    .pictrue {
-      width: 362px;
-      height: 68px;
-      margin: 24px auto 0 auto;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .pictrue {
-    width: 18px;
-    height: 18px;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    margin-right: 7px;
-  }
-
-  .text {
-    color: rgba(0, 0, 0, 0.45);
-    font-size: 14px;
-  }
-
-  .money {
-    font-size: 18px;
-    color: rgba(0, 0, 0, 0.85);
-
-    .num {
-      font-size: 32px;
-      margin-left: 5px;
-    }
-  }
-
-  .tip {
-    width: 310px;
-    height: 26px;
-    background: rgba(255, 126, 0, 0.1);
-    border-radius: 13px;
-    font-size: 13px;
-    color: #FF7E00;
-    margin: 10px auto 0 auto;
-
-    .icon {
-      font-size: 16px;
-      margin-right: 5px;
-    }
-  }
-
-  .bnt {
-    width: 394px;
-    height: 38px;
-    margin: 28px 0 15px 0;
-  }
-}
-
-.detail {
-  .user {
-    display: flex;
-    align-items: center;
-    padding: 18px;
-    border-radius: 10px;
-    background: rgba(24, 144, 255, 0.05);
-
-    .img {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      margin-right: 20px;
-      object-fit: cover;
-    }
-
-    .user-content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .name-wrap {
-      display: flex;
-      align-items: center;
-    }
-
-    .name {
-      font-weight: 600;
-      font-size: 18px;
-      color: rgba(0, 0, 0, 0.85);
-    }
-
-    .tag {
-      padding: 0 5px;
-      border: 1px solid #1890FF;
-      border-radius: 3px;
-      margin-left: 6px;
-      font-size: 12px;
-      line-height: 16px;
-      color: #1890FF;
-    }
-
-    .phone-wrap {
-      display: flex;
-      align-items: center;
-      margin-top: 12px;
-      font-size: 12px;
-      color: rgba(51, 51, 51, 0.85);
-    }
-
-    .phone {
-      margin-right: 20px;
-    }
-
-    .num {
-      margin: 0 20px 0 4px;
-      font-weight: 600;
-      font-size: 17px;
-      color: #F5222D;
-    }
-
-    .time {
-      font-size: 14px;
-      color: #1890FF;
-    }
-  }
-
-  .tabbar {
-    display: flex;
-    padding: 17px 0;
-
-    .item {
-      height: 36px;
-      padding: 0 19px;
-      border-radius: 18px;
-      font-size: 14px;
-      line-height: 36px;
-      color: #999999;
-      cursor: pointer;
-
-      &.active {
-        background-color: #1890FF;
-        font-weight: 500;
-        color: #FFFFFF;
-      }
-    }
-  }
-}
-
-.member {
-  >>>.ivu-form-item-content {
-    font-size: 14px !important;
-  }
-
-  .num {
-    color: #1890FF;
-  }
-
-  >>>.ivu-radio-border {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 180px;
-    height: 110px;
-    border: 1px solid #1890FF;
-    border-radius: 10px;
-    margin: 0 15px 15px 0;
-    box-shadow: 0 0 14px 0 rgba(0, 84, 161, 0.18);
-    font-weight: 500;
-    font-size: 16px !important;
-    color: #1890FF;
-
-    &.ivu-radio-wrapper-checked {
-      background-color: #1890FF;
-      color: #FFFFFF;
-
-      .num {
-        color: #FFFFFF;
-      }
-
-      .marking {
-        color: #FFFFFF;
-      }
-    }
-
-    .ivu-radio {
-      display: none;
-    }
-
-    .num {
-      font-size: 24px;
-    }
-  }
-
-  .marking {
-    text-decoration: line-through;
-    font-weight: normal;
-    font-size: 14px;
-    color: #999999;
-  }
-}
-
-.balance {
-  >>>.ivu-radio-border {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 180px;
-    height: 110px;
-    border: 1px solid #1890FF;
-    border-radius: 10px;
-    margin: 0 15px 15px 0;
-    box-shadow: 0 0 14px 0 rgba(0,84,161,0.18);
-
-    &.ivu-radio-wrapper-checked {
-      background-color: #1890FF;
-      color: #FFFFFF;
-
-      .num {
-        color: #FFFFFF;
-      }
-
-      .marking {
-        color: #FFFFFF;
-      }
-    }
-
-    .ivu-radio {
-      display: none;
-    }
-  }
-
-  .money {
-    font-weight: 500;
-    font-size: 16px;
-    color: #1890FF;
-  }
-
-  .num {
-    font-size: 24px;
-  }
-
-  .marking {
-    font-size: 14px;
-    color: #999999;
-  }
-
-  .ivu-input-number {
-    width: 460px;
-    height: 36px;
-  }
-
-  >>>.ivu-input-number-input-wrap {
-    height: 36px;
-  }
-
-  >>>.ivu-input-number-input {
-    height: 36px;
-    line-height: 36px;
-  }
-}
-
->>>.ivu-tabs {
-  .ivu-tabs-bar {
-    padding: 20px 0 17px;
-    border-bottom-color: #F4F4F4;
-    margin-bottom: 0;
-  }
-
-  .ivu-tabs-ink-bar {
-    display: none;
-  }
-
-  .ivu-tabs-tab {
-    padding: 10px 19px;
-    margin-right: 5px;
-    line-height: 16px;
-    color: #999999;
-
-    &.ivu-tabs-tab-active {
-      border-radius: 18px;
-      background-color: #1890FF;
-      color: #FFFFFF;
-    }
-  }
-}
-
-.cash {
-  /deep/ .ivu-modal-body {
-    padding: 0 !important;
-  }
-}
-
-.cashPage {
-  text-align: center;
-
-  .right {
-    width: 488px;
-    background: #F5F5F5;
-    padding: 16px 16px 16px 0;
-    border-radius: 0 6px 6px 0;
-
-    /deep/ .ivu-btn-primary {
-      width: 100px;
-    }
-
-    .rightCon {
-      width: 388px;
-      height: 506px;
-      margin: 35px auto 20px auto;
-      background-color: #fff;
-      border-radius: 14px;
-
-      .top {
-        height: 80px;
-        color: rgba(0, 0, 0, 0.65);
-        font-size: 13px;
-        padding: 0 20px;
-
-        .num {
-          font-size: 42px;
-          color: rgba(0, 0, 0, 0.85);
-        }
-      }
-
-      .center {
-        width: 100%;
-        height: 46px;
-        background-color: #1890FF;
-        font-size: 13px;
-        color: #fff;
-        padding: 0 20px;
-
-        .num {
-          font-size: 27px;
-        }
-      }
-
-      .bottom {
-        padding: 10px 0 0 8px;
-
-        .item {
-          width: 108px;
-          height: 62px;
-          background: #FAFAFA;
-          border-radius: 9px;
-          border: 1px solid rgba(0, 0, 0, 0.15);
-          color: #1890FF;
-          font-size: 32px;
-          margin-left: 12px;
-          margin-top: 12px;
-          cursor: pointer;
-
-          &.on {
-            background: #1890FF;
-            color: #FFFFFF;
-            font-size: 20px;
-          }
-
-          &.spot {
-            padding-bottom: 15px;
-          }
-        }
-      }
-    }
-  }
-
-  .left {
-    width: 282px;
-    padding: 16px 0 16px 16px;
-
-    .picture {
-      width: 110px;
-      height: 110px;
-      margin: 180px auto 0 auto;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .text {
-      color: rgba(0, 0, 0, 0.45);
-      font-size: 14px;
-      margin-top: 14px;
-    }
-
-    .money {
-      color: rgba(0, 0, 0, 0.85);
-      font-size: 18px;
-
-      .num {
-        font-size: 32px;
-        margin-left: 5px;
-      }
-    }
-  }
-}
-.merber-radio-group {
-  margin: 0 -15px -15px 0;
-}
-</style>
+	::-webkit-scrollbar {
+		display: none;
+	}
+
+	.order {
+		display: flex;
+		height: calc(100vh - 66px);
+		padding: 20px;
+		background-color: #F5F5F5;
+
+		.left {
+			flex-shrink: 0;
+			display: flex;
+			flex-direction: column;
+			width: 460px;
+			border-radius: 20px;
+			background: #FFFFFF;
+
+			.left-top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 24px;
+
+				.title {
+					color: rgba(0, 0, 0, 0.85);
+					font-weight: 600;
+					font-size: 20px;
+				}
+
+				.sx {
+					color: #666666;
+
+					.ios-funnel-outline {
+						font-weight: bold;
+						font-size: 12px;
+					}
+				}
+			}
+
+			.order-box {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				min-height: 0;
+				font-size: 18px;
+
+				.search {
+					padding: 0 24px 24px;
+
+					/deep/.ivu-input {
+						padding-left: 14px;
+						border-color: #DDDDDD;
+						border-radius: 20px 0 0 20px;
+					}
+
+					/deep/.ivu-input-search {
+						border-radius: 0px 20px 20px 0px;
+						background: #1890FF !important;
+						font-size: 14px;
+						line-height: normal;
+					}
+				}
+
+				.pending-user {
+					flex: 1;
+				}
+			}
+		}
+
+		.order-data {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-width: 0;
+			border-radius: 20px;
+			margin-left: 20px;
+
+			.content {
+				flex: 1;
+				padding: 24px;
+				border-radius: 0 20px 20px;
+				background: #FFFFFF;
+				overflow-x: hidden;
+			}
+
+			.border-radius {
+				border-radius: 20px 20px 0 0;
+			}
+
+			.header {
+				display: flex;
+				background: #FFFFFF;
+				font-size: 18px;
+
+				.box {
+					flex: 1;
+					background: #F5F5F5;
+				}
+
+				.item {
+					cursor: pointer;
+					background-color: #F5F5F5;
+					transition: all 0.1s;
+				}
+
+				.item-wrap {
+					padding: 16px 29px;
+					border-radius: 20px 20px 0px 0px;
+				}
+
+				.sel {
+					color: rgba(0, 0, 0, 0.85);
+					font-weight: 500;
+
+					.item-wrap {
+						background: #FFFFFF;
+					}
+				}
+
+				.neighbor-left {
+					border-bottom-right-radius: 20px;
+				}
+
+				.neighbor-right {
+					border-bottom-left-radius: 20px;
+				}
+			}
+
+			.recharge {
+				display: flex;
+				flex-wrap: wrap;
+				padding: 10px;
+
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					border-radius: 10px;
+					border: 1px solid #1890FF;
+					padding: 24px 34px;
+					width: 30%;
+					height: 102px;
+					margin: 1%;
+					cursor: pointer;
+
+					.price {
+						font-size: 24px;
+						color: #1890FF;
+					}
+
+					.give-price {
+						color: #999999;
+						font-size: 14px;
+						white-space: nowrap;
+					}
+				}
+
+				.item.sel {
+					background-color: #1890FF;
+					color: #fff;
+
+					.price {
+						font-size: 24px;
+						color: #fff;
+					}
+
+					.give-price {
+						color: #fff;
+					}
+				}
+			}
+
+			.diy-recharge {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				margin-top: 200px;
+
+				.text {
+					font-size: 20px;
+				}
+
+				.inputNum {
+					width: 45%;
+					margin: 28px 0 14px 0;
+					height: 66px;
+				}
+
+				/deep/ .ivu-input-number-large {
+					height: 66px;
+					font-size: 30px;
+				}
+
+				/deep/ .ivu-input-number-input-wrap {
+					height: 66px;
+				}
+
+				/deep/ .ivu-input-number-handler-wrap {
+					display: none;
+				}
+
+				/deep/ .ivu-input-number-large input {
+					height: 66px;
+					line-height: 66px;
+				}
+
+				.tip {
+					font-size: 13px;
+					color: rgba(153, 153, 153, 0.85);
+					margin-top: 15px;
+				}
+			}
+
+			.footer {
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+				height: 88px;
+				padding: 0 88px;
+				border-radius: 0 0 20px 20px;
+				background: #FFFFFF;
+				box-shadow: 0 -1px 11px 0 rgba(0, 0, 0, 0.06);
+
+				.ivu-btn {
+					width: 100%;
+					height: 50px;
+					border-color: #1890FF;
+					border-radius: 25px;
+					background: #1890FF;
+					font-size: 18px !important;
+					color: #FFFFFF;
+
+					&:focus {
+						box-shadow: none;
+					}
+				}
+			}
+		}
+	}
+
+	.payPage {
+		text-align: center;
+		padding: 16px;
+
+		/deep/ .ivu-input {
+			width: 394px !important;
+			text-align: center;
+		}
+
+		.header {
+			margin: 35px 0 3px 0;
+		}
+
+		.process {
+			width: 394px;
+			height: 158px;
+			border: 1px dashed #D8D8D8;
+			border-top: 1px dashed #fff;
+			margin: -1px auto 0 auto;
+
+			&.on {
+				border-top: 1px dashed #D8D8D8;
+				margin-top: 20px;
+
+				.list {
+					padding-left: 14px !important;
+				}
+			}
+
+			.list {
+				padding: 6px 10px 0 18px;
+
+				.item {
+					font-size: 12px;
+					color: #666;
+
+					.name {
+						color: #333;
+						font-size: 13px;
+						font-weight: bold;
+					}
+				}
+			}
+
+			.pictrue {
+				width: 362px;
+				height: 68px;
+				margin: 24px auto 0 auto;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+		.pictrue {
+			width: 18px;
+			height: 18px;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+
+			margin-right: 7px;
+		}
+
+		.text {
+			color: rgba(0, 0, 0, 0.45);
+			font-size: 14px;
+		}
+
+		.money {
+			font-size: 18px;
+			color: rgba(0, 0, 0, 0.85);
+
+			.num {
+				font-size: 32px;
+				margin-left: 5px;
+			}
+		}
+
+		.tip {
+			width: 310px;
+			height: 26px;
+			background: rgba(255, 126, 0, 0.1);
+			border-radius: 13px;
+			font-size: 13px;
+			color: #FF7E00;
+			margin: 10px auto 0 auto;
+
+			.icon {
+				font-size: 16px;
+				margin-right: 5px;
+			}
+		}
+
+		.bnt {
+			width: 394px;
+			height: 38px;
+			margin: 28px 0 15px 0;
+		}
+	}
+
+	.detail {
+		.user {
+			display: flex;
+			align-items: center;
+			padding: 18px;
+			border-radius: 10px;
+			background: rgba(24, 144, 255, 0.05);
+
+			.img {
+				width: 80px;
+				height: 80px;
+				border-radius: 50%;
+				margin-right: 20px;
+				object-fit: cover;
+			}
+
+			.user-content {
+				flex: 1;
+				min-width: 0;
+			}
+
+			.name-wrap {
+				display: flex;
+				align-items: center;
+			}
+
+			.name {
+				font-weight: 600;
+				font-size: 18px;
+				color: rgba(0, 0, 0, 0.85);
+			}
+
+			.tag {
+				padding: 0 5px;
+				border: 1px solid #1890FF;
+				border-radius: 3px;
+				margin-left: 6px;
+				font-size: 12px;
+				line-height: 16px;
+				color: #1890FF;
+			}
+
+			.phone-wrap {
+				display: flex;
+				align-items: center;
+				margin-top: 12px;
+				font-size: 12px;
+				color: rgba(51, 51, 51, 0.85);
+			}
+
+			.phone {
+				margin-right: 20px;
+			}
+
+			.num {
+				margin: 0 20px 0 4px;
+				font-weight: 600;
+				font-size: 17px;
+				color: #F5222D;
+			}
+
+			.time {
+				font-size: 14px;
+				color: #1890FF;
+			}
+		}
+
+		.tabbar {
+			display: flex;
+			padding: 17px 0;
+
+			.item {
+				height: 36px;
+				padding: 0 19px;
+				border-radius: 18px;
+				font-size: 14px;
+				line-height: 36px;
+				color: #999999;
+				cursor: pointer;
+
+				&.active {
+					background-color: #1890FF;
+					font-weight: 500;
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
+
+	.member {
+		>>>.ivu-form-item-content {
+			font-size: 14px !important;
+		}
+
+		.num {
+			color: #1890FF;
+		}
+
+		>>>.ivu-radio-border {
+			display: inline-flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			width: 180px;
+			height: 110px;
+			border: 1px solid #1890FF;
+			border-radius: 10px;
+			margin: 0 15px 15px 0;
+			box-shadow: 0 0 14px 0 rgba(0, 84, 161, 0.18);
+			font-weight: 500;
+			font-size: 16px !important;
+			color: #1890FF;
+
+			&.ivu-radio-wrapper-checked {
+				background-color: #1890FF;
+				color: #FFFFFF;
+
+				.num {
+					color: #FFFFFF;
+				}
+
+				.marking {
+					color: #FFFFFF;
+				}
+			}
+
+			.ivu-radio {
+				display: none;
+			}
+
+			.num {
+				font-size: 24px;
+			}
+		}
+
+		.marking {
+			text-decoration: line-through;
+			font-weight: normal;
+			font-size: 14px;
+			color: #999999;
+		}
+	}
+
+	.balance {
+		>>>.ivu-radio-border {
+			display: inline-flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			width: 180px;
+			height: 110px;
+			border: 1px solid #1890FF;
+			border-radius: 10px;
+			margin: 0 15px 15px 0;
+			box-shadow: 0 0 14px 0 rgba(0, 84, 161, 0.18);
+
+			&.ivu-radio-wrapper-checked {
+				background-color: #1890FF;
+				color: #FFFFFF;
+
+				.num {
+					color: #FFFFFF;
+				}
+
+				.marking {
+					color: #FFFFFF;
+				}
+			}
+
+			.ivu-radio {
+				display: none;
+			}
+		}
+
+		.money {
+			font-weight: 500;
+			font-size: 16px;
+			color: #1890FF;
+		}
+
+		.num {
+			font-size: 24px;
+		}
+
+		.marking {
+			font-size: 14px;
+			color: #999999;
+		}
+
+		.ivu-input-number {
+			width: 460px;
+			height: 36px;
+		}
+
+		>>>.ivu-input-number-input-wrap {
+			height: 36px;
+		}
+
+		>>>.ivu-input-number-input {
+			height: 36px;
+			line-height: 36px;
+		}
+	}
+
+	>>>.ivu-tabs {
+		.ivu-tabs-bar {
+			padding: 20px 0 17px;
+			border-bottom-color: #F4F4F4;
+			margin-bottom: 0;
+		}
+
+		.ivu-tabs-ink-bar {
+			display: none;
+		}
+
+		.ivu-tabs-tab {
+			padding: 10px 19px;
+			margin-right: 5px;
+			line-height: 16px;
+			color: #999999;
+
+			&.ivu-tabs-tab-active {
+				border-radius: 18px;
+				background-color: #1890FF;
+				color: #FFFFFF;
+			}
+		}
+	}
+
+	.cash {
+		/deep/ .ivu-modal-body {
+			padding: 0 !important;
+		}
+	}
+
+	.cashPage {
+		text-align: center;
+
+		.right {
+			width: 488px;
+			background: #F5F5F5;
+			padding: 16px 16px 16px 0;
+			border-radius: 0 6px 6px 0;
+
+			/deep/ .ivu-btn-primary {
+				width: 100px;
+			}
+
+			.rightCon {
+				width: 388px;
+				height: 506px;
+				margin: 35px auto 20px auto;
+				background-color: #fff;
+				border-radius: 14px;
+
+				.top {
+					height: 80px;
+					color: rgba(0, 0, 0, 0.65);
+					font-size: 13px;
+					padding: 0 20px;
+
+					.num {
+						font-size: 42px;
+						color: rgba(0, 0, 0, 0.85);
+					}
+				}
+
+				.center {
+					width: 100%;
+					height: 46px;
+					background-color: #1890FF;
+					font-size: 13px;
+					color: #fff;
+					padding: 0 20px;
+
+					.num {
+						font-size: 27px;
+					}
+				}
+
+				.bottom {
+					padding: 10px 0 0 8px;
+
+					.item {
+						width: 108px;
+						height: 62px;
+						background: #FAFAFA;
+						border-radius: 9px;
+						border: 1px solid rgba(0, 0, 0, 0.15);
+						color: #1890FF;
+						font-size: 32px;
+						margin-left: 12px;
+						margin-top: 12px;
+						cursor: pointer;
+
+						&.on {
+							background: #1890FF;
+							color: #FFFFFF;
+							font-size: 20px;
+						}
+
+						&.spot {
+							padding-bottom: 15px;
+						}
+					}
+				}
+			}
+		}
+
+		.left {
+			width: 282px;
+			padding: 16px 0 16px 16px;
+
+			.picture {
+				width: 110px;
+				height: 110px;
+				margin: 180px auto 0 auto;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.text {
+				color: rgba(0, 0, 0, 0.45);
+				font-size: 14px;
+				margin-top: 14px;
+			}
+
+			.money {
+				color: rgba(0, 0, 0, 0.85);
+				font-size: 18px;
+
+				.num {
+					font-size: 32px;
+					margin-left: 5px;
+				}
+			}
+		}
+	}
+
+	.merber-radio-group {
+		// margin: 0 -15px -15px 0;
+	}
+</style>