|
|
- <!-- 抽奖弹框 -->
- <template>
- <view class="prizeDraw">
- <uni-popup ref="popup">
- <view class="popup-content">
- <view class="title">{{ $t('page.prizeDraw.title') }}</view>
-
- <view class="project">
- <view class="img-box">
- <image :src="orderInfo.image" mode="widthFix"></image>
- </view>
- <view class="project-base">
- <view class="project-name">{{ orderInfo.subTitle }}</view>
- </view>
- </view>
-
- <view class="todoy-info">
- <view class="todoy-info-main">
- <view class="today-info-l">
- <view class="today-income">{{ $t('page.prizeDraw.recharge') }}</view>
- <div class="money">
- <text class="number">{{ orderInfo.price }}</text>
- <text class="unit">{{ $store.state.unit }}</text>
- </div>
- </view>
-
- <div class="booking-info-r">
- <view class="booking-income">{{ $t('page.prizeDraw.commission') }}</view>
- <div class="booking-data">
- <text class="number">{{ orderInfo.giveMoney + $store.state.unit }}</text>
- </div>
- </div>
- </view>
- </view>
-
- <view class="order-time">
- <view class="title">{{ $t('page.prizeDraw.time') }}</view>
- <div class="content">{{ orderInfo.createTime }}</div>
- </view>
-
- <view class="order-number">
- <div class="title">{{ $t('page.prizeDraw.number') }}</div>
- <div class="content">{{ orderInfo.id }}</div>
- </view>
-
- <div @click="orderPay" class="submit">{{ $t('page.prizeDraw.submit') }}</div>
-
- </view>
- </uni-popup>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- type: 'center',
- orderInfo : {},
- userInfo : {}, //用户信息
- }
- },
- methods: {
- toggle(order) {
- this.getUserInfo()
- this.orderInfo = order
- this.$refs.popup.open(this.type)
- },
-
- //用户点击确定按钮(创建订单)
- orderPay(){
- this.$emit('orderPay',this.orderInfo.id)
- },
-
- //获取用户信息
- getUserInfo() {
- this.request('userInfo').then(res => {
- if (res.code == 200) {
- this.userInfo = res.result.userInfo
- }
- })
- },
-
- //关闭
- close(){
- this.$refs.popup.close(this.type)
- }
- },
- }
- </script>
-
- <style lang="scss" scoped>
- .prizeDraw {
-
- .popup-content {
- width: 700rpx;
- margin: 0rpx auto;
- background: white;
- border-radius: 20rpx;
- box-sizing: border-box;
- padding: 20rpx;
-
- .title {
- font-size: 32rpx;
- }
-
- .project {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- min-height: 150rpx;
-
- .img-box {
- display: flex;
- align-items: center;
- width: 150rpx;
- height: 150rpx;
- margin-right: 2%;
- overflow: hidden;
- border-radius: 10rpx;
-
- image {
- border-radius: 10rpx;
- width: 100%;
- }
- }
-
- .project-base {
- width: 73%;
- }
- }
- }
-
- .todoy-info {
- box-sizing: border-box;
- height: 140rpx;
-
- .todoy-info-main {
- display: flex;
- flex-wrap: wrap;
- height: 100%;
- // background-color: rgba(0, 208, 234, 0.1);
- border-radius: 20rpx;
- margin: 20rpx 0rpx;
- box-sizing: border-box;
- padding: 0rpx 30rpx;
-
- .today-info-l,
- .booking-info-r {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 50%;
- font-size: 28rpx;
-
- .today-income,
- .booking-income {
- // color: #8e8e98;
- }
-
- .money,
- .booking-data {
- font-weight: bold;
- margin-top: 10rpx;
- }
- }
- }
- }
-
- .order-time,
- .order-number {
- display: flex;
- justify-content: space-between;
- margin-top: 30rpx;
- font-size: 30rpx;
- }
-
- .submit{
- height: 80rpx;
- border-radius: 100rpx;
- background-color: #f33;
- color: white;
- font-size: 30rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 30rpx;
- }
- }
- </style>
|