fangliaoxiaochengxv/subPages/storeConsumption/storeConsumption.vue

<script>
import UCodeInput from "../../components/uview-ui/components/u-code-input/u-code-input.vue";
import {
  getCustomerInfo, getUserInfo,
} from "../../common/api/user.js";
export default {
  name: "storeConsumption",
  components: {UCodeInput},
  data() {
    return {
      orderNo: '',
      goodsList: [],
      pwd:"",
      show: false,
      userInfo: {},
      customerInfo: {},
      detailData: {
        amount_discount:0,
        discount:0,
        order_no:"--",
        created_at:"--",
        amount_goods:0,
        number_item:0,
        status:1
      },
      topData: {
        top: 0,
        height: 0
      },
    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo
    console.log(
        'options',
        options
    )
    // const mData = uni.getStorageSync('selectTaskData') || undefined
  },
  onShow() {
    const topData = uni.getMenuButtonBoundingClientRect()
    this.topData.top = topData.top
    this.topData.height = topData.height
    this.expenseDetail()
    this.getUserInfo()
  },
  methods: {
    splitStr(str) {
      if (!str) return ""
      var split = str.split(';;');
      return split[split.length - 1]
    },
    async getUserInfo() {
      const data = {};
      await getUserInfo(data)
          .then((res) => {
            if (res.data) {
              this.userInfo = res.data;
            }
          });
    },
    toPay() {
      this.show = true;
      this.pwd = ""; // 清空上次输入的密码
    },
    expenseDetail() {
      getCustomerInfo().then(res => {
        this.customerInfo = res.data||{}
        if (this.customerInfo){
          this.customerInfo.balance_total = this.customerInfo.balance_total ? parseFloat(this.customerInfo.balance_total) : 0;
          this.customerInfo.balance_used = this.customerInfo.balance_used ? parseFloat(this.customerInfo.balance_used) : 0;
          this.customerInfo.balance_num = this.customerInfo.balance_total - this.customerInfo.balance_used;
        }
      })
      this.$api.expenseDetail(this.orderNo).then(res => {
        this.detailData = res.data
        this.goodsList = res.data.items || []
      })
    },
    open() {
    },
    finish(e) {
      this.$api.expensePay({order_no:this.orderNo,pay_pswd:e}).then(res => {
        uni.showToast({
          title: res.msg,
          success: (res) => {
            this.close()
            this.expenseDetail()
            uni.hideKeyboard();
          },
        });
      })
    },
    forgotPwd(){
      if (this.userInfo.pay_pswd && this.userInfo.pay_pswd.length > 0 ) {

        uni.navigateTo({
          url:  "/subPages/setting/setPwd?type=set-2",
        });
      }else{
        uni.navigateTo({
          url:  "/subPages/setting/setPwd?type=add",
        });
      }
    },
    close() {
      this.show = false
      // console.log('close');
    }
  }
}
</script>

<template>
  <view class="common-page">
    <view class="header-box" :style="{
				paddingBottom: '30rpx',
				paddingTop: '60rpx',
		  }" id="headerBox" ref="headerBox">
      <view class="success-con  fs16" v-if="detailData.status===0">
        <view class="display-flex-content-center">
          <u-icon size="50rpx" name="checkmark-circle-fill" color="#E2B98E"></u-icon>
          <text class="fw700 ml5 success-title-text">待确认</text>
        </view>
        <view class="text-center mtr20 mt5">请确认您的店内消费订单信息。</view>
      </view>
      <view class="success-con  fs16" v-else>
        <view class="display-flex-content-center">
          <u-icon size="50rpx" name="checkmark-circle-fill" color="#E2B98E"></u-icon>
          <text class="fw700 ml5 success-title-text">已确认</text>
        </view>
        <view class="text-center mtr20 mt5">您的店内消费订单已确认。</view>
      </view>
    </view>

    <view class="content-box">
      <view class="common-card">
        <view class="display-flex-center" style="justify-content: space-between;">
          <text class="fs14 fw400 color-666">用户信息：</text>
          <view class="display-flex-center">
            <text class="fs14 fw400 color-333">{{ userInfo.username }}</text>
            <text class="fs14 fw400 color-333 ml15">{{ userInfo.phone }}</text>
          </view>

        </view>
        <view class="display-flex-center mt15" style="justify-content: space-between;">
          <text class="fs14 fw400 color-666">订单编号：</text>
          <text class="fs14 fw400 color-333">{{ detailData.order_no }}</text>
        </view>
        <view class="display-flex-center mt15" style="justify-content: space-between;">
          <text class="fs14 fw400 color-666">生成时间：</text>
          <text class="fs14 fw400 color-333">{{ detailData.created_at }}</text>
        </view>
      </view>
      <!-- 订单编号 -->
      <view class="common-card">
        <view style="margin: 0 auto;" class="color-333 fw600 fs16 lh20">
          消费信息
        </view>
        <!-- 已选商品 -->
        <view class="display-flex-center" style="margin-top: 30rpx" v-for="(item, index) in goodsList" :key="index">
          <image style="width: 155rpx; height: 155rpx; border-radius: 10rpx;margin-right: 10rpx;flex-shrink: 0;"
                 :src="item.goods_cover" mode="aspectFill">
          </image>
          <view class="ml10" style=" width: 100%">
            <view class="display-flex-center mb10">
              <text class=" text-overflow-single goods-name">{{ item.goods_name||"--" }}</text>
            </view>
            <view class="display-flex-center mb10">
              <text class="color-888 flex-shrink fw400 fs12 lh16">规格：</text>
              <text class=" text-overflow-single fw400 fs12 lh16">{{ splitStr(item.goods_spec ||"--") }}</text>
            </view>
            <view class="display-flex-between " style="justify-content: space-between; width: 100%">
              <text class="fw400 color-333   fs12 mb8">￥
                <text class="fw700 color-333  fs16 mb8">{{ item.price_selling || 0 }}</text>
              </text>
              <text class="color-888">×{{ item.item_num || 0 }}</text>
            </view>
          </view>
        </view>
        <u-divider :dashed="true"></u-divider>
        <view class="goods-total display-flex-center">
          <view class="fs12 color-333 fw400">
            共{{ detailData.number_item }}件商品&nbsp;&nbsp; 总计：
            <text class=" fs12 fw400">￥</text>
            <text class="fw700 fs18">{{ detailData.amount_goods }}</text>
          </view>
        </view>
      </view>
      <view class="common-card">
        <view class="display-flex-center mt15" style="justify-content: space-between;">
          <text class="fs14 fw400 color-666">折扣</text>
          <text class="fs14 fw400 color-333">{{ detailData.discount }}</text>
        </view>
        <view class="display-flex-center mt15" style="justify-content: space-between;">
          <text class="fs14 fw400 color-666">折扣后</text>
          <text class=" fs12 fw400">￥
            <text class="fw700 fs18">{{ detailData.amount_discount }}</text>
          </text>
        </view>
      </view>
    </view>

    <!-- 底部支付区域 -->
    <view class="bottom-box " v-if="detailData.status===0" >
      <view class="balance display-flex-center" >
        <image style="width: 32rpx;height: 32rpx;" :src="require('../static/store-1.png')">
        </image>
        <text class="balance-text ml10">账户余额：￥{{ customerInfo.balance_num }}</text>
      </view>
      <view class=" display-flex-center"  style="justify-content: space-between; width:  calc(100% - 60rpx); padding: 27rpx 30rpx;">
        <view>应付：
          <text class="color-556 fs12 fw400">￥</text>
          <text class="fw700 fs20 color-556">{{ detailData.amount_discount }}</text>
        </view>
        <view class="settle-center-btn" @click="toPay">确认账单</view>
      </view>
    </view>
    <u-popup :show="show" :round="10" :closeable="true" mode="center" @close="close" @open="open">
      <view class="payment-popup">
        <view class="payment-popup-title  display-flex-content-center mt20">请输入安全密码</view>
        <view class=" display-flex-content-center mt20">
          <text class=" fs12 fw400">￥
            <text class="fw700 fs20">{{ detailData.amount_discount }}</text>
          </text>
        </view>
        <view class=" display-flex-content-center mt30">
          <u-code-input ref="codeInputRef" @finish="finish" v-model="pwd" :maxlength="6" mode="box"  dot :focus="true"></u-code-input>
        </view>
        <view class="forgot-password  display-flex-content-center mt20" @click="forgotPwd">未设置/忘记密码？</view>
      </view>
    </u-popup>
  </view>
</template>


<style lang="scss" scoped>
.payment-popup {
  width: 500rpx;
  height: 408rpx;
  padding: 0 30rpx;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
}

.payment-popup-title {
  font-weight: 400;
  font-size: 32rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.forgot-password{
  font-weight: 400;
  font-size: 24rpx;
  color: #888888;
  line-height: 32rpx;
  text-align: justify;
  font-style: normal;
  text-transform: none;
}
.common-page {
  height: 100vh;
  overflow-y: auto;
  // padding: 20rpx;
  color: #2C2C2C;
  padding-bottom: 188rpx;
  box-sizing: border-box;
}

.coupon-list {
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}

.bottom-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 242rpx;
  padding: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1000;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
}
.balance{
  position: relative;
  width: 100%;
  height: 72rpx;
  padding: 0 30rpx;
}
.balance::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
  border-radius: 0;
  opacity: 0.1;
  z-index: -1;
}
.balance-text{
  font-weight: 400;
  font-size: 28rpx;
  color: #C29556;
  line-height: 36rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.settle-center-btn {
  height: 76rpx;
  line-height: 78rpx;
  width: 170rpx;
  padding: 0 29rpx;
  color: #fff;
  background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
  border-radius: 292rpx 292rpx 292rpx 292rpx;
  font-size: 32rpx;
  text-align: center;
  margin-left: 30rpx;
}

.goods-name {
  font-family: PingFang SC-Bold;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  // 加粗
  font-weight: bold;
}

.content-box {
  padding: 20rpx;
}

.goods-price {
  font-family: D-DIN-Regular;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 48rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.navbar-box {
  position: relative;
}

.success-title-text {
  font-size: 40rpx;
  color: #333333;
  line-height: 50rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  // 加粗
  font-weight: bold;
}

.text-center {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  line-height: 40rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.good-card {
  padding: 38rpx 22rpx;
  color: #7A7A7A;

  ::v-deep {
    .u-textarea {
      background: #F6F6F6;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: none;
      padding: 18rpx;

      .u-textarea__count {
        background-color: transparent !important;
      }
    }
  }
}

.goods-list {
  margin: 0 30rpx;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.goods-total {
  justify-content: flex-end;
  margin: 27rpx 20rpx;
}
</style>