123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503 |
- <template>
- <view>
- <view class="header" v-show="lotteryShow">
- <view class="pay-status">
- <text class="iconfont icon-gou"></text>
- <view class="pay-status-r">
- <text class="pay-status-text">
- 支付成功
- </text>
- <text>
- 支付金额:¥{{totalPrice}}
- </text>
- </view>
- </view>
- <view class="jump">
- <view class="jump-det" @click="orderDetails">
- 查看订单
- </view>
- <view v-if="orderInfo.pink_id" class="jump-index" @click="goPink(orderInfo.pink_id)">
- {{orderInfo.pinkStatus==2?'查看拼团':'邀请参团'}}
- </view>
- <view v-else class="jump-index" @click="goIndex">
- 返回首页
- </view>
- </view>
- </view>
- <view class="grids-top" v-show="lotteryShow">
- <image src="../static/pay-lottery-l.png" mode=""></image>
- <view class="grids-title">
- <view>恭喜您,</view>
- <view class="grids-frequency">获得{{lottery_num}}次</view>
- <view>抽奖机会</view>
- </view>
- <image src="../static/pay-lottery-r.png" mode=""></image>
- </view>
- <view class='termValidity acea-row row-center-wrapper' v-show="lotteryShow">
- <view class='timeItem acea-row row-center-wrapper'>
- <view>距有效期仅剩</view>
- <countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '"
- :minute-text="' : '" :second-text="' '" :datatime="datatime"
- style="margin-top: 4rpx;"></countDown>
- </view>
- </view>
- <view class="grids" v-show="lotteryShow">
- <image class="grids-bag" :src="imgHost + '/statics/images/pay-lottery-bag.png'" mode=""></image>
- <view class="grids-box">
- <gridsLottery class="" :prizeData="prize" :userCount='userCount' @get_winingIndex='getWiningIndex'
- @luck_draw_finish='luck_draw_finish' :lotteryType='1' :datatime="datatime">
- </gridsLottery>
- </view>
- </view>
- <lotteryAleart :aleartStatus="aleartStatus" @close="closeLottery" :alData="alData" :aleartType="aleartType">
- </lotteryAleart>
- <view class="mask" v-if="aleartStatus || addressModel"></view>
- <userAddress v-if="addressModel" :aleartStatus="addressModel" @getAddress="getAddress" @close="()=>{addressModel = false}">
- </userAddress>
-
-
-
- </view>
- </template>
- <script>
- import countDown from '@/components/countDown';
- import gridsLottery from '../components/lottery/index.vue'
- import lotteryAleart from '../components/lotteryAleart/index.vue'
- import userAddress from '../components/userAddress/index.vue'
- import {getOrderDetail} from '@/api/order.js';
- import {openOrderSubscribe} from '@/utils/SubscribeMessage.js';
- import {toLogin} from '@/libs/login.js';
- import {
- getLotteryData,
- startLottery,
- receiveLottery
- } from '@/api/lottery.js'
- import {
- mapGetters
- } from "vuex";
- import {HTTP_REQUEST_URL} from '@/config/app';
- import { postCartAdd } from '@/api/store.js';
- export default {
- components: {
- gridsLottery,
- lotteryAleart,
- userAddress,
- countDown
- },
- props: {
- options: {
- type: Object
- },
- orderPayInfo: {
- type: Object
- }
- },
- data() {
- return {
- lotteryShow: false,
- addressModel: false,
- lottery_num: 0,
- aleartType: 0,
- aleartStatus: false,
- lottery_draw_param: {
- startIndex: 3,
- totalCount: 3,
- winingIndex: 1,
- speed: 100
- },
- alData: {},
- type: '',
- prize: [],
- orderId: '',
- order_pay_info: {
- paid: 1,
- _status: {}
- },
- isAuto: false,
- isShowAuth: false,
- couponsHidden: true,
- couponList: [],
- totalPrice: 0,
- datatime:0,
- orderInfo:{},
- imgHost:HTTP_REQUEST_URL,
- userCount:{
- total:0,
- today:0
- }
- };
- },
- computed: mapGetters(['isLogin']),
- watch: {
- isLogin: {
- handler: function(newV, oldV) {
- if (newV) {}
- },
- deep: true
- },
- options: {
- handler: function(newV, oldV) {
- if (newV) {
- this.orderId = newV.order_id;
- this.totalPrice = newV.totalPrice;
- this.type = newV.type
- if(this.isLogin){
- this.getLotteryData(newV.type)
- }else{
- toLogin();
- }
- }
- },
- deep: true
- },
- orderPayInfo: {
- handler: function(newV, oldV) {
- if (newV) {
- this.orderInfo = newV
- }
- },
- deep: true
- },
- },
- created(options) {
-
- this.orderId = this.options.order_id;
- this.totalPrice = this.options.totalPrice;
- this.type = this.options.type;
-
- },
- mounted(){
-
- if (this.isLogin) {
- this.getLotteryData(this.type)
- } else {
- toLogin();
- }
-
- },
- methods: {
- onLoadFun(){
- this.getLotteryData(this.type)
- this.isShowAuth = false;
- },
-
- authColse: function(e) {
- this.isShowAuth = e
- },
-
- goPink: function(id) {
- uni.navigateTo({
- url: '/pages/activity/goods_combination_status/index?id=' + id
- });
- },
- openTap() {
- this.$set(this, 'couponsHidden', !this.couponsHidden);
- },
- orderDetails() {
- this.$emit('orderDetails')
- },
- getWiningIndex(callback) {
- this.aleartType = 0
- startLottery({
- id: this.id
- }).then(res => {
- this.prize.forEach((item, index) => {
- if (res.data.id === item.id) {
- this.alData = res.data
- this.lottery_draw_param.winingIndex = index;
- callback(this.lottery_draw_param);
- }
- })
- }).catch(err => {
- this.$util.Tips({
- title: err
- });
- })
-
- },
-
- goIndex: function(e) {
- uni.switchTab({
- url: '/pages/index/index'
- });
- },
-
- goOrderDetails: function(e) {
-
- uni.showLoading({
- title: '正在加载',
- })
- openOrderSubscribe().then(res => {
- uni.hideLoading();
- uni.navigateTo({
- url: '/pages/goods/order_details/index?order_id=' + this.orderId
- });
- }).catch(() => {
- nui.hideLoading();
- });
-
- },
- getLotteryData(type) {
- getLotteryData(type).then(res => {
- this.factor_num = res.data.lottery.factor_num
- this.id = res.data.lottery.id
- this.prize = res.data.lottery.prize
- this.lottery_num = res.data.lottery_num
- this.userCount.today = res.data.todayCount
- this.userCount.total = res.data.totalCount
- this.prize.push({
- a: 1
- })
- this.$emit('lotteryShow', true)
- this.lotteryShow = true
- this.datatime = parseInt(res.data.cache_time);
- }).catch(err => {
- this.$emit('lotteryShow', false)
- this.lotteryShow = false
- })
- },
- closeLottery(status) {
- this.aleartStatus = false
- this.getLotteryData(this.type)
- if (this.alData.type === 6) {
-
- postCartAdd({
- cartNum: 1,
- new: 1,
- is_new: 1,
- productId: this.alData.product_id,
- uniqueId: this.alData.unique,
- luckRecordId: this.alData.lottery_record_id,
- }).then(({ data }) => {
- uni.navigateTo({
- url: `/pages/goods/lottery/grids/order?luckRecordId=${this.alData.lottery_record_id}&cartId=${data.cartId}`
- });
- }).catch(err => {
- this.$util.Tips({
- title: `${err},请联系客服`
- });
- });
- }
- },
- getAddress(data) {
- let addData = data
- addData.id = this.alData.lottery_record_id
- addData.address = data.address.province + data.address.city + data.address.district + data.detail
- receiveLottery(addData).then(res => {
- this.$util.Tips({
- title: '领取成功'
- });
- this.addressModel = false
- }).catch(err => {
- this.$util.Tips({
- title: err
- });
- })
- },
- getWiningIndex(callback) {
- this.aleartType = 0
- startLottery({
- id: this.id
- }).then(res => {
- this.prize.forEach((item, index) => {
- if (res.data.id === item.id) {
- this.alData = res.data
- this.lottery_draw_param.winingIndex = index;
- callback(this.lottery_draw_param);
- }
- })
- }).catch(err => {
- this.$util.Tips({
- title: err
- });
- })
-
- },
-
- luck_draw_finish(param) {
- this.aleartType = 2
- this.aleartStatus = true
- },
- }
- }
- </script>
- <style lang="scss" scoped>
-
- /deep/.timeItem .time .styleAll{
- padding: 0 4rpx;
- font-size: 26rpx;
- color: #fff;
- background-color: var(--view-theme);
- }
-
- /deep/.timeItem .time .red{
- color: var(--view-theme);
- }
-
- .termValidity{
- margin-top: 10rpx;
- }
-
- .header {
- color: #fff;
- background-color: var(--view-theme);
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- padding: 80rpx 0;
- .pay-status {
- display: flex;
- align-items: center;
- .iconfont {
- font-size: 74rpx;
- background: rgba(#000, 0.08);
- border-radius: 50%;
- margin-right: 30rpx;
- padding: 9rpx;
- }
- .pay-status-r {
- display: flex;
- flex-direction: column;
- .pay-status-text {
- font-size: 38rpx;
- font-weight: bold;
- padding-bottom: 10rpx;
- }
- }
- }
- .grids /deep/ .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(9) {
- background: rgba(#fff, 0.2) !important;
- }
- .jump {
- display: flex;
- padding-top: 40rpx;
- .jump-det {
- background: #FFFFFF;
- opacity: 1;
- border-radius: 22px;
- color: var(--view-theme);
- padding: 10rpx 38rpx;
- margin-right: 30rpx;
- }
- .jump-index {
- border: 1px solid #FEFFFF;
- opacity: 1;
- padding: 10rpx 38rpx;
- border-radius: 22px;
- }
- }
- }
- .grids-top {
- display: flex;
- justify-content: center;
- padding: 30rpx 0 0 0;
- image {
- width: 40rpx;
- height: 40rpx;
- }
- .grids-title {
- display: flex;
- justify-content: center;
- font-size: 20px;
- color: var(--view-theme);
- z-index: 999;
- padding: 0 14rpx;
- font-weight: bold;
- .grids-frequency {}
- }
- }
- /deep/ .lottery_grid {
- background-color: var(--view-theme);
- border-radius: 12rpx;
- }
- .grids {
- width: 100%;
- // height: 800rpx;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 20rpx;
- position: relative;
- padding: 30rpx;
- .grids-bag {
- position: absolute;
- top: 0;
- left: 0;
- // #ifdef MP
- width: 710rpx;
- height: 718rpx;
- // #endif
- // #ifdef H5 || APP-PLUS
- width: 750rpx;
- height: 758rpx;
- // #endif
- padding: 20rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .grids-box {
- width: 700rpx;
- height: 700rpx;
- // z-index: 10000;
- padding: 20rpx;
- background-color: #E74435;
- }
- .winning-tips-list {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 50%;
- font-size: 20rpx;
- line-height: 40rpx;
- height: 40rpx;
- font-weight: 400;
- color: #FFF8F8;
- margin: 30rpx 0;
- z-index: 999;
- background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 51%, rgba(255, 255, 255, 0) 100%);
- .iconfont {
- font-size: 20rpx;
- margin-right: 10rpx;
- }
- }
- }
- .mask {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.8);
- z-index: 9;
- }
- </style>
|