<template>
	<view :style="viewColor">
    <!--具体内容-->
		<view class='content-box'>
      <!-- 顶部内容 -->
      <view class="top">
        <view class="left">
          <view class="name">酒道馆：{{ point_info.title || '请选择酒道馆' }}</view>
          <view v-if="point_search.default_point_id <= 0" class="change-btn" @click="showPointPopup">
            {{ point_info.id > 0 ? '切换' : '选择' }}
          </view>
        </view>
        <!--<view class="right" @click="goMenuPage('/pages/users/online_payment/exchange/record')">兑换记录</view>-->
      </view>
      <view class="top" v-if="point_info.id > 0">
        <view class="left">
          <view class="name">操作员：{{ (staff_info.nickname || staff_info.real_name || staff_info.uid) || '请选择操作员' }}</view>
          <view class="change-btn" @click="showStaffPopup" v-if="Object.values(staff_list).length > 1 && default_staff_id <= 0">
            {{ staff_info.uid > 0 ? '切换' : '选择' }}
          </view>
        </view>
      </view>
      <!--<view class="top">
        <view class="left">
          <view class="name">消费者：{{ (consume_info.nickname || consume_info.real_name || consume_info.uid) || '请选择消费者' }}</view>
          <view class="change-btn" @click="showConsumePopup" v-if="consume_search.default_consume_id <= 0">
            {{ consume_info.uid > 0 ? '切换' : '选择' }}
          </view>
        </view>
      </view>-->
      <!-- 买单金额 -->
      <view class="money">
        <view class="top-bg-line"></view>
        <view class="money-box">
          <view class="title">提货商品总价值</view>
          <view class="input-box">
            <view class="unit">¥</view>
            <input class="money-input" v-if="default_total_money > 0" :value="pay_info.total_money" readonly disabled type='number' />
            <input class="money-input" v-else v-model.number="pay_info.total_money"  type='number' step="0.01" placeholder="0.00" />
          </view>
          <view class="info-box">
            <view class="info-title">剩余酒卡额度</view>
            <view class="info-value">{{ pointUserInfo.available }}</view>
          </view>
          <view class="info-box">
            <view class="info-title">剩余酒水卡积分</view>
            <view class="info-value">{{ pointUserInfo.available_integral }}</view>
          </view>
          <view class="info-box" v-if="pay_info.use_integral > 0">
            <view class="info-title">使用酒水卡积分</view>
            <view class="info-value">{{ pay_info.use_integral }}</view>
          </view>
          <view class="info-box" v-if="pay_info.diff_money > 0">
            <view class="info-title">差价</view>
            <view class="info-value">{{ pay_info.diff_money }}</view>
          </view>
          <view class="info-box" v-if="pay_info.diff_money_pay > 0">
            <view class="info-title">实际支付差价</view>
            <view class="info-value">{{ pay_info.diff_money_pay }}</view>
          </view>
        </view>
      </view>
      <!--支付方式-->
      <view class="pay-type" v-if="pay_info.diff_money_pay > 0">
        <view class="box-title">支付方式</view>
        <view class="box-content">
          <radio-group name="pay_type" @change="changePayType">
            <view class="pay-label" v-for="(item,index) in pay_list" :key="index" v-if="item.payStatus==1">
              <label>
                <view class="pay-item">
                  <view class="left">
                    <view :class="['iconfont','animated',item.icon]"></view>
                    <view class="pay-item-info">
                      <view class="pay-name">{{ item.name }}</view>
                      <view class='tip'>
                        {{item.title}}
                        <block v-if="item.value == 'balance'">
                          {{now_money}}
                        </block>
                      </view>
                    </view>
                  </view>
                  <view class="right">
                    <radio :value="item.value" :checked="item.value == pay_info.pay_type ? true : false" />
                  </view>
                </view>
              </label>
            </view>
          </radio-group>
        </view>
      </view>
      <!--提交按钮-->
      <view class="pay-btn" v-if="pay_info.total_money > 0 && point_info.id > 0 && staff_info.uid > 0" @click="confirmPayment">确认兑换</view>
      <view class="pay-btn not-btn" v-else>确认兑换</view>
		</view>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
    <!--店铺选择-->
    <uni-popup ref="selectedPoint" type="center">
      <view class="point-content">
        <view class="search-content">
          <input class="money-input" v-model="point_search.address" type='text' placeholder="酒道馆名称/酒道馆地址" />
          <view class="search-btn" @click="getPointList">搜索</view>
          <view class="close-btn" @click="pointClosePopup">取消</view>
        </view>
        <view class="point-list">
          <view class="point-box" v-for="(item,index) in point_list" :key="index">
            <view class="left">
              <!--<image class="image" :src="item.point_avatar || '/static/images/f.png'"></image>-->
              <view class="point-info">
                <view class="point-name">{{ item.title }}</view>
                <view class="point-address">{{ item.address }}</view>
              </view>
            </view>
            <view class="selected-btn" @click="selectedPoint(item)">选中</view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!--操作员选择-->
    <uni-popup ref="selectedStaff" type="center">
      <view class="point-content">
        <view class="point-list">
          <view class="point-box" v-for="(item,index) in staff_list" :key="index">
            <view class="left">
              <image class="image" :src="item.avatar || '/static/images/f.png'"></image>
              <view class="point-info">
                <view class="point-name">{{ item.nickname || item.real_name }}</view>
                <view class="point-address">UID：{{ item.uid }}</view>
              </view>
            </view>
            <view class="selected-btn" @click="selectedStaff(item)">选中</view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!--消费用户选择-->
    <uni-popup ref="selectedConsume" type="center">
      <view class="point-content">
        <view class="search-content">
          <input class="money-input" v-model="consume_search.search_text" type='text' placeholder="UID/用户昵称/真实姓名/电话" />
          <view class="search-btn" @click="getConsumeList">搜索</view>
          <view class="close-btn" @click="consumeClosePopup">取消</view>
        </view>
        <view class="point-list">
          <view class="point-box" v-for="(item,index) in consume_list" :key="index">
            <view class="left">
              <image class="image" :src="item.avatar || '/static/images/f.png'"></image>
              <view class="point-info">
                <view class="point-name">{{ item.nickname || item.real_name }}</view>
                <view class="point-address">UID：{{ item.uid }}</view>
              </view>
            </view>
            <view class="selected-btn" @click="selectedConsume(item)">选中</view>
          </view>
        </view>
      </view>
    </uni-popup>


	</view>
</template>

<script>

import { pointList,pointUserInfo,confirmExchange,consumeList } from '@/api/exchange.js';
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import emptyPage from '@/components/emptyPage.vue';
import spread from "@/libs/spread";
import {getUserInfo} from "@/api/user";

const app = getApp();
export default {
  components: {
    authorize,
    emptyPage,
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      pointUserInfo: {},
      // 商户相关
      point_info:{},
      point_list: {},
      point_search: {
        address: '',
        uid: '',
        default_point_id: 0,
      },
      // 操作员
      staff_info: {},
      staff_list: {},
      default_staff_id: 0,
      default_total_money: 0,
      // 消费用户
      consume_info: {},
      consume_list: {},
      consume_search: {
        search_text: '',
        default_consume_id: 0,
      },
      // 提交信息
      pay_info: {
        // 兑换信息
        total_money: 0.00,
        use_integral: 0.00,
        diff_money: 0.00,
        diff_money_pay: 0.00,
        // 支付信息
        pay_type: 'weixin',
        // #ifdef H5
        return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
        // #endif
      },
      //支付方式
      pay_list: [
        {
          "name": "微信支付",
          "icon": "icon-weixin2",
          value: 'weixin',
          title: '微信快捷支付',
          payStatus: 1,
        },
        {
          name: "支付宝支付",
          icon: "icon-icon34",
          // #ifdef H5 || APP-PLUS
          value: 'alipay',
          // #endif
          // #ifdef MP
          value: 'alipayQr',
          // #endif
          title: '支付宝支付',
          payStatus: this.$store.getters.globalData.alipay_open
        },
        {
          "name": "余额支付",
          "icon": "icon-icon-test",
          value: 'balance',
          title: '可用余额:',
          payStatus: this.$store.getters.globalData.yue_pay_status,
        },
        {
          "name": "线下支付",
          "icon": "icon-yinhangqia",
          value: 'offline',
          title: '线下支付',
          payStatus: 2,
        },
      ],
      now_money: 0,
    };
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  onLoad(options) {
    if(options.scene){
      // console.log('转换前参数：',options.scene)
      // 由于微信长度限制问题 suid=staff_id；pid=point_id；tmy=total_money
      var scene = this.$util.getUrlParams(decodeURIComponent(options.scene));
      console.log("接收参数",scene)
      this.point_search.default_point_id = scene.pid || 0;
      this.consume_search.default_consume_id = scene.consume_uid || 0;
      this.default_staff_id = scene.suid || 0;
      this.default_total_money = Number(scene.tmy) || 0;
      // 判断：如果存在消费用户  则当前登录用户为操作员
      if(Number(this.consume_search.default_consume_id) > 0){
        this.default_staff_id = this.userInfo.uid || 0;
        this.point_search.uid = this.userInfo.uid || 0;
      }
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
    // 关系处理
    if(options.spread) spread(options.spread, this.isLogin)
  },
  onReachBottom: function () {},
  watch: {
    'pay_info.total_money': {
      handler(val) {
        let totalMoney = this.pay_info.total_money.toFixed(2);
        // console.log('总价值', totalMoney)
        // 判断酒卡额度是否足够
        if(Number(totalMoney) > Number(this.pointUserInfo.available)){
          this.$util.Tips({
            title: '总价值不能超过剩余酒卡额度'
          });
          this.pay_info.total_money = 0;
          return false;
        }
        // 计算使用的相关信息
        // console.log('可用酒水卡积分',Number(this.pointUserInfo.available_integral))
        if(Number(totalMoney) > Number(this.pointUserInfo.available_integral)){
          // 酒水卡积分不足
          this.pay_info.use_integral = Number(this.pointUserInfo.available_integral);
          this.pay_info.diff_money = (Number(totalMoney) - Number(this.pay_info.use_integral)).toFixed(2);
          this.pay_info.diff_money_pay = (Number(this.pay_info.diff_money) * Number(this.pointUserInfo.diff_rate) / 100).toFixed(2);
        }else{
          // 酒水卡积分充足
          this.pay_info.use_integral = Number(totalMoney);
          this.pay_info.diff_money_pay = this.pay_info.diff_money = 0;
        }
      },
      deep: false
    },
    'consume_info.uid':{
      handler() {
        this.getUserInfo();
      },
      deep: false
    }
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authColse(e) {
      this.isShowAuth = e
    },
    // 授权成功 获取用户信息
    init () {
      let _this = this;
      // 获取用户信息
      this.getUserInfo();
      // 提货点选择初始化
      let pointId = _this.point_info.id || 0;
      if(pointId <= 0) _this.showPointPopup();
      // 获取用户信息
      getUserInfo().then(res => {
        _this.now_money = res.data.now_money
      });
    },
    // 获取用户持有信息
    getUserInfo(){
      let _this = this;
      let params = {
        consume_uid: _this.consume_info.uid
      };
      pointUserInfo(params)
          .then(res => {
            _this.pointUserInfo = res.data || {};
            // 是否存在默认价值
            _this.pay_info.total_money = Number(_this.default_total_money) || 0;
          })
          .catch(err => {
            this.$util.Tips({
              title: err
            });
          });
    },
    // 提货点选择 - 显示弹框
    showPointPopup(){
      if(Object.keys(this.point_list).length <= 0) this.getPointList();
      // 不存在默认选中  显示弹框
      if(Number(this.point_search.default_point_id) <= 0) this.$refs.selectedPoint.open('center');
    },
    // 提货点选择 - 隐藏弹框
    pointClosePopup(){
      this.$refs.selectedPoint.close();
    },
    // 提货点选择 - 获取列表
    getPointList(){
      let _this = this;
      pointList(this.point_search)
          .then(res => {
            _this.point_list = res.data || {};
            // 判断：是否不存在提货点
            if(Object.values(_this.point_list).length <= 0){
              this.$util.Tips({
                title: '非操作员，无操作权限！',
              },{tab:1,url:'/pages/user/index'});
              return false;
            }
            // 判断：是否只有一个提货点-是则选中
            if(Object.values(_this.point_list).length == 1){
              _this.selectedPoint(_this.point_list[0]);
            }
            // 判断：是否存在默认选中提货点
            else if(_this.point_search.default_point_id > 0){
              _this.selectedPoint(_this.point_list[0]);
            }
          })
          .catch(err => {
            this.$util.Tips({
              title: err
            });
          });
    },
    // 提货点选择 - 选中
    selectedPoint(item){
      this.staff_info = this.$options.data().staff_info;
      this.staff_list = Object.values(item.user_list);
      this.point_info = item;
      this.pointClosePopup();
      // 判断：是否需要选择操作员
      if(Number(this.default_staff_id) > 0){
        // 存在默认 默认选中
        this.selectedStaff(item.user_list[this.default_staff_id]);
        // this.staff_info = item.user_list[this.default_staff_id];
      }else if(Object.values(this.staff_list).length > 1){
        // 存在多个 需要选中
        this.showStaffPopup();
      }else{
        // 存在单个 默认选中
        // this.staff_info = this.staff_list[0];
        this.selectedStaff(this.staff_list[0]);
      }
    },
    // 操作员选择 - 显示弹框
    showStaffPopup(){
      this.$refs.selectedStaff.open('center');
    },
    // 操作员选择 - 隐藏弹框
    staffClosePopup(){
      this.$refs.selectedStaff.close();
    },
    // 操作员选择 - 选中
    selectedStaff(item){
      this.staff_info = item;
      this.staffClosePopup();
      // 选择消费者
      let consumeUid = this.consume_info.uid || 0;
      if(consumeUid <= 0) this.showConsumePopup();
    },
    // 兑换用户选择 - 显示弹框
    showConsumePopup(){
      // todo  逻辑修改，不在选择消费用户
      // if(Object.keys(this.consume_list).length <= 0) this.getConsumeList();
      // 不存在默认选中  显示弹框
      // if(Number(this.consume_search.default_consume_id) <= 0) this.$refs.selectedConsume.open('center');
    },
    // 兑换用户选择 - 隐藏弹框
    consumeClosePopup(){
      this.$refs.selectedConsume.close();
    },
    // 兑换用户选择 - 获取列表
    getConsumeList(){
      let _this = this;
      consumeList(this.consume_search)
          .then(res => {
            _this.consume_list = res.data || {};
            // 判断：是否只有一个提货点-是则选中
            if(Object.values(_this.consume_list).length == 1){
              _this.selectedConsume(_this.consume_list[0]);
            }
            // 判断：是否存在默认选中提货点
            else if(_this.consume_search.default_consume_id > 0){
              _this.selectedConsume(_this.consume_list[0]);
            }
          })
          .catch(err => {
            this.$util.Tips({
              title: err
            });
          });
    },
    // 兑换用户选择 - 选中
    selectedConsume(item){
      this.consume_info = item;
      this.consumeClosePopup();
    },
    // 确认付款
    confirmPayment(){
      let _this = this;
      let payInfo = Object.assign({},_this.pay_info);
      payInfo.point_id = this.point_info.id;
      payInfo.staff_uid = this.staff_info.uid;
      // payInfo.consume_uid = this.consume_info.uid;
      // 订单支付相关内容
      console.log('支付类型',payInfo.pay_type)
      if (payInfo.pay_type == 'weixin') {
        // #ifdef H5
        payInfo.pay_type = _this.$wechat.isWeixin() ? 'weixin' : 'h5'
        // #endif
        // #ifdef MP
        payInfo.pay_type = 'routine'
        // #endif
        // #ifdef APP-PLUS
        payInfo.pay_type = 'weixin'
        // #endif
      }
      // 发起请求
      uni.showLoading({
        title: '处理中...',
        mask: true
      });
      confirmExchange(payInfo).then(res => {
        uni.hideLoading();
        if(payInfo.diff_money_pay > 0){
          let status = res.data.status,
              orderId = res.data.result.order_id,
              callback_key = res.data.result.pay_key,
              jsConfig = res.data.result.config,
              goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
          _this.orderPay = true;
          uni.hideLoading();
          switch (status) {
            case 'ORDER_EXIST':
            case 'EXTEND_ORDER':
            case 'PAY_ERROR':
            case 'error':
              return _this.$util.Tips({
                title: res.message
              }, {
                tab: 5,
                url: goPages
              });
              break;
            case 'success':
              return _this.$util.Tips({
                title: res.message,
                icon: 'success'
              }, {
                tab: 5,
                url: goPages
              });
              break;
            case 'alipay':
            case "alipayQr":
              uni.navigateTo({
                url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' +
                    jsConfig
              })
              return;
              break;
              // #ifndef MP
            case "wechat":
            case "weixin":
            case "weixinApp":
              jsConfig.timeStamp = jsConfig.timestamp;
              // #ifndef APP-PLUS
              this.$wechat.pay(jsConfig).then(res => {
                return _this.$util.Tips({
                  title: res.message,
                  icon: 'success'
                }, {
                  tab: 4,
                  url: goPages
                });
              }).catch(res => {
                if (res.errMsg == 'chooseWXPay:cancel') return _this.$util.Tips({
                  title: '取消支付'
                }, {
                  tab: 5,
                  url: goPages + '&status=0'
                });
              })
              // #endif
              // #ifdef APP-PLUS
              let mp_pay_name=''
              if(uni.requestOrderPayment){
                mp_pay_name='requestOrderPayment'
              }else{
                mp_pay_name='requestPayment'
              }
              uni[mp_pay_name]({
                provider: 'wxpay',
                orderInfo: jsConfig,
                success: (e) => {
                  let url = '/pages/order_pay_status/index?order_id=' + orderId +
                      '&msg=支付成功';
                  return _this.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                  }, {
                    tab: 4,
                    url: url
                  });
                },
                fail: (e) => {
                  let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
                  return _this.$util.Tips({
                    title: '取消支付',
                  }, {
                    tab: 4,
                    url: url
                  });
                },
                complete: () => {
                  let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
                  return _this.$util.Tips({
                    title: '',
                  }, {
                    tab: 4,
                    url: url
                  });
                },
              });
              // #endif
              break;
              // #endif
              // #ifdef MP
            case "routine":
              jsConfig.timeStamp = jsConfig.timestamp;
              _this.toPay = true;
              let mp_pay_name=''
              if(uni.requestOrderPayment){
                mp_pay_name='requestOrderPayment'
              }else{
                mp_pay_name='requestPayment'
              }
              uni[mp_pay_name]({
                ...jsConfig,
                success: function(res) {
                  uni.hideLoading();
                  return _this.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                  }, {
                    tab: 5,
                    url: goPages
                  });
                },
                fail: function(e) {
                  let pages = '/pages/order_pay_status/index?order_id=' +
                      orderId + '&msg=取消支付'
                  return _this.$util.Tips({
                    title: '取消支付'
                  }, {
                    tab: 5,
                    url: pages + '&status=0'
                  });
                },
              })
              break;
              // #endif
            case "balance":
              //余额
              return _this.$util.Tips({
                title: res.msg
              }, {
                tab: 5,
                url: goPages + '&status=1'
              });
              break;
              // #ifdef H5
            case 'h5':
              let host = window.location.protocol + "//" + window.location.host;
              let url = `${host}/pages/order_pay_status/index?order_id=${orderId}&msg=${res.message}`
              let eUrl = encodeURIComponent(url)
              let jsurl = jsConfig.mweb_url || jsConfig.h5_url
              let locations = `${jsurl}&redirect_url=${eUrl}`
              setTimeout(() => {
                location.href = locations;
              }, 100);
              break;
              // #endif
              // #ifdef APP-PLUS
            case 'alipayApp':
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: jsConfig,
                success: (e) => {
                  return _this.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                  }, {
                    tab: 5,
                    url: goPages
                  });
                },
                fail: (e) => {
                  let pages = '/pages/order_pay_status/index?order_id=' +
                      orderId + '&msg=支付失败'
                  return _this.$util.Tips({
                    title: '支付失败'
                  }, {
                    tab: 5,
                    url: pages
                  });
                },
                complete: () => {
                  uni.hideLoading();
                  let pages = '/pages/order_pay_status/index?order_id=' +
                      orderId + '&msg=取消支付'
                  return _this.$util.Tips({
                    title: ''
                  }, {
                    tab: 5,
                    url: pages
                  });
                },
              });
              break;
              // #endif
            default:
              let pages = '/pages/order_pay_status/index?order_id=' +
                  orderId + '&msg=取消支付'
              return _this.$util.Tips({
                title: '取消支付'
              }, {
                tab: 5,
                url: pages + '&status=0'
              });
          }
        }else{
          this.$util.Tips({
            title: '操作成功！',
            icon: 'success'
          },{tab:1,url:'/pages/user/index'});
        }
      }).catch(err => {
        uni.hideLoading();
        this.$util.Tips({
          title: err
        });
      });
    },
    // 跳转
    goMenuPage(url) {
      console.log(url)
      if (this.isLogin) {
        uni.navigateTo({
          url
        })
      } else {
        this.openAuto()
      }
    },
    // 修改支付方式
    changePayType(e){
      this.pay_info.pay_type = e.detail.value || e.target.value;
    },

  },
  // #ifdef MP
  // 分享给好友
  onShareAppMessage () {
    let pages = getCurrentPages();
    let page = pages[pages.length - 1]
    let shareData = {
      title: '在线买单',
      path: page.$page.fullPath || '/' + page.route,
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // 分享到朋友圈
  onShareTimeline() {
    let shareData = {
      title: '在线买单',
      query: {},
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.query.spread = this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // #endif
}
</script>

<style scoped lang="scss">
.content-box{
  width: 100vw;
  min-height: 100vh;
  background-color: orange;
  padding: 20rpx;
  background: linear-gradient(to bottom, #1b79ff, #f6f6f6) no-repeat;
  background-size: 100% 300rpx;
  background-color: #f6f6f6;

  // 公共内容
  .box-title{
    margin: 30rpx 0;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    padding-left: 20rpx;
    font-weight: bold;
    position: relative;
  }
  .box-title:after{
    content: "";
    position: absolute;
    left: 0;
    top: calc((50rpx - 30rpx) / 2);
    width: 10rpx;
    height: 30rpx;
    background: #1777ff;
  }
  // 顶部内容
  .top{
    width: 100%;
    height: 90rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    .left{
      width: calc(100% - 150rpx);
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      .image{
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        margin-right: 15rpx;
      }
      .name{
        max-width: calc(100% - (70rpx + 15rpx + 80rpx + 15rpx));
        font-size: 30rpx;
        font-weight: bold;
        color: #FFFFFF;
      }
      .change-btn{
        width: 80rpx;
        height: 40rpx;
        text-align: center;
        font-size: 24rpx;
        border-radius: 40rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        background-color: #409eff;
        color: #fff;
        margin-left: 15rpx;
      }
    }
    .right{
      width: 140rpx;
      height: 46rpx;
      line-height: 44rpx;
      border-radius: 45rpx;
      text-align: center;
      font-size: 26rpx;
      border: 2rpx solid #ffffff;
      color: #FFFFFF;
    }
  }
  // 买单金额
  .money{
    position: relative;
    padding: 15rpx;
    .top-bg-line{
      width: 100%;
      background-color: #1256ad;
      height: 20rpx;
      border-radius: 50rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
    .money-box{
      background: #FFFFFF;
      position: relative;
      width: 100%;
      top: -5rpx;
      border-radius: 15rpx;
      padding: 20rpx;
      box-shadow: 0px 3px 5px 0px #ececec;
      .title{
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        font-weight: bold;
      }
      .input-box{
        height: 70rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        font-size: 50rpx;
        font-weight: bold;
        margin: 20rpx 0 30rpx 0;
        .unit{
          margin-right: 15rpx;
        }
        .money-input{
          height: 70rpx;
        }
      }
      .info-box{
        width: 100%;
        height: 60rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .info-title{
          font-size: 30rpx;
          font-weight: bold;
        }
        .info-value{
          font-size: 30rpx;
        }
      }
    }
  }
  // 支付方式
  .pay-type{

    .box-content{
      .pay-label:not(:last-child){
        margin-bottom: 20rpx;
      }
      .pay-item{
        height: 120rpx;
        padding: 20rpx;
        width: 100%;
        border: 2rpx solid #d9dce4;
        border-radius: 15rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-around;
        .left{
          width: calc(100% - 80rpx);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .animated{
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 44rpx;
            background-color: #fe960f;
            color: #fff;
            font-size: 30rpx;
            margin-right: 15rpx;
          }
          .icon-weixin2 {
            background-color: #41b035;
          }
          .icon-icon34 {
            background-color: #4295D5;
          }
          .pay-item-info{
            .pay-name{
              text-align: left;
              border-right: 1px solid #eee;
              justify-content: left;
            }
            .tip{
              text-align: left;
              font-size: 26rpx;
              color: #aaa;
            }
          }
        }
        .right{
          width: 80rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
  // 确认支付
  .pay-btn{
    width: calc(100% - (20rpx * 2));
    background: #1777ff;
    color: #FFFFFF;
    border-radius: 15rpx;
    font-size: 30rpx;
    text-align: center;
    height: 70rpx;
    line-height: 70rpx;
    position: absolute;
    left: 20rpx;
    bottom: 150rpx;
  }
  .not-btn{
    background-color: #909399;
    color: #fff;
  }
}
.point-content{
  background: #FFFFFF;
  width: 90vw!important;
  height: 90vh!important;
  padding: 15rpx;
  border-radius: 20rpx;

  .search-content{
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    .money-input{
      width: calc(100% - (100rpx * 2)) !important;
      height: 60rpx;
      line-height: 60rpx;
    }
    .search-btn{
      width: 100rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #409eff;
      color: #fff;
    }
    .close-btn{
      width: 100rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #f56c6c;
      color: #fff;
    }
  }
  .point-list{
    overflow: auto;
    height: calc(100% - 60rpx);
    .point-box{
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      width: 100%;
      .left{
        width: calc(100% - 110rpx);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        .image{
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
        .point-info{
          width: calc(100% - 90rpx);
          .point-name{
            height: 50rpx;
            line-height: 50rpx;
            font-size: 30rpx;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .point-address{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 26rpx;
            color: #cccccc;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .selected-btn{
        width: 100rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 28rpx;
        background-color: #67c23a;
        color: #fff;
        border-radius: 50rpx;
      }
    }
    .point-box:not(:last-child){
      border: 2rpx solid #f6f6f6;
    }
  }
}
</style>
