You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
436 lines
9.7 KiB
436 lines
9.7 KiB
<template>
|
|
|
|
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="luckylog_wrapper">
|
|
<!-- <view class="tab color-bg">
|
|
<view class="tab-left">
|
|
<picker mode="date" :value="searchType.check_time" @change="bindDateChange" fields="month">
|
|
<view class="uni-input">
|
|
{{ date }}
|
|
<text class="iconfont icon-iconangledown"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view> -->
|
|
|
|
<mescroll-uni @getData="getLuckyLog" class="member-point" ref="mescroll">
|
|
<view slot="list">
|
|
<!-- <view class="tab color-bg"> -->
|
|
<view class="tab-left">
|
|
<picker mode="date" :value="searchType.check_time" @change="bindDateChange" fields="month">
|
|
<view class="uni-input">
|
|
{{ date }}
|
|
<text class="iconfont icon-iconangledown"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<!-- </view> -->
|
|
<block v-if="luckyLogList.length">
|
|
<view class="detailed-wrap">
|
|
<view class="cont">
|
|
<view class="detailed-item" v-for="(item, index) in luckyLogList" :key="index"
|
|
@click="exchangeGoods(item)">
|
|
<image class="logImg" :src="$util.img(item.image)"></image>
|
|
<view class="logText">
|
|
<view class="left">
|
|
<view class="title">{{ item.title }}</view>
|
|
<view class="time">{{ item.create_time }}</view>
|
|
</view>
|
|
<view class="right">
|
|
<!-- // 1普通商品 2优惠券 3积分 4余额 0未中奖 -->
|
|
<view v-show="item.type == 0">
|
|
未中奖
|
|
</view>
|
|
<view v-show="item.type == 1" class="color-base-text">
|
|
<view class="color-base-text" style="text-align: right;">
|
|
普通商品
|
|
</view>
|
|
<view style="text-align: right;color:#2979ff">
|
|
详情
|
|
</view>
|
|
</view>
|
|
<view v-show="item.type == 2" class="color-base-text">
|
|
优惠券
|
|
</view>
|
|
<view v-show="item.type == 3" class="color-base-text">
|
|
积分
|
|
</view>
|
|
<view v-show="item.type == 4" class="color-base-text">
|
|
余额
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<block v-else>
|
|
<view class="cart-empty"><ns-empty></ns-empty></view>
|
|
</block>
|
|
</view>
|
|
</mescroll-uni>
|
|
|
|
|
|
<u-modal :show="exchangeModal" :showCancelButton="true" cancelText="取消" confirmText="确认"
|
|
@cancel="exchangeModal=false" @confirm="confirmExchange()">
|
|
|
|
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
|
|
<u-form-item label="收货人" prop="name" ref="item1" labelWidth="80">
|
|
<u--input placeholder="请输入收货人" v-model="formData.name"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="联系电话" prop="phone" ref="item1" labelWidth="80">
|
|
<u--input placeholder="请输入联系电话" type="number" v-model="formData.phone"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label=" 收货地址" prop="address" ref="item1" labelWidth="80">
|
|
<u--textarea placeholder="请输入收货地址" v-model="formData.address"></u--textarea>
|
|
</u-form-item>
|
|
</u--form>
|
|
|
|
|
|
</u-modal>
|
|
|
|
<u-overlay :show="logisticsModal" @click="logisticsModal = false">
|
|
<view class="warp">
|
|
<view class="rect" @tap.stop>
|
|
<view class="cont">
|
|
<view class="title">
|
|
发货信息
|
|
</view>
|
|
<view class="">
|
|
<view class="titleTip">
|
|
备注：
|
|
</view>
|
|
<u--textarea height="100" disabled v-if="itemData.remark" border="none"
|
|
placeholder="11111111" v-model="itemData.remark"
|
|
placeholderStyle="font-size:28rpx"></u--textarea>
|
|
</view>
|
|
<!-- <view class="">
|
|
<view class="titleTip">
|
|
待发货：
|
|
</view>
|
|
<text style="color: #aaa;"> 暂无物流信息 </text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-overlay>
|
|
|
|
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
const currentDate = this.getDate({
|
|
format: true
|
|
});
|
|
return {
|
|
exchangeModal: false, //收货地址弹框
|
|
logisticsModal: false, //物流弹框
|
|
date: currentDate,
|
|
searchType: {
|
|
check_time: ''
|
|
},
|
|
luckyLogList: [],
|
|
itemData: {},
|
|
formData: {
|
|
name: '',
|
|
phone: '',
|
|
address: '',
|
|
},
|
|
rules: {
|
|
name: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写收货人',
|
|
trigger: 'blur',
|
|
},
|
|
phone: {
|
|
required: true,
|
|
message: '请填写联系方式',
|
|
trigger: 'blur'
|
|
},
|
|
address: {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写收货地址',
|
|
trigger: 'blur'
|
|
},
|
|
|
|
},
|
|
};
|
|
},
|
|
onShow() {},
|
|
onLoad() {},
|
|
methods: {
|
|
bindDateChange: function(e) {
|
|
var temp = e.target.value;
|
|
var tempArr = temp.split('-');
|
|
this.date = tempArr[0] + '年' + tempArr[1] + '月';
|
|
this.searchType.check_time = e.target.value;
|
|
this.$refs.mescroll.refresh();
|
|
console.log(this.searchType.check_time);
|
|
},
|
|
getDate(type) {
|
|
const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
if (type === 'start') {
|
|
year = year - 60;
|
|
} else if (type === 'end') {
|
|
year = year + 2;
|
|
}
|
|
month = month > 9 ? month : '0' + month;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}年${month}月`;
|
|
},
|
|
getLuckyLog(mescroll) {
|
|
this.$api.sendRequest({
|
|
url: '/api/draw/getLogList',
|
|
data: {
|
|
page_size: mescroll.size,
|
|
page: mescroll.num,
|
|
check_time: this.searchType.check_time
|
|
},
|
|
success: res => {
|
|
let newArr = [];
|
|
let msg = res.message;
|
|
if (res.code == 0 && res.data) {
|
|
newArr = res.data.list;
|
|
} else {
|
|
this.$util.showToast({
|
|
title: msg
|
|
});
|
|
}
|
|
mescroll.endSuccess(newArr.length);
|
|
//设置列表数据
|
|
if (mescroll.num == 1) {
|
|
this.luckyLogList = []; //如果是第一页需手动制空列表
|
|
this.related_id = 0;
|
|
}
|
|
this.luckyLogList = this.luckyLogList.concat(newArr); //追加新数据
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
},
|
|
fail: res => {
|
|
mescroll.endErr();
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
});
|
|
},
|
|
exchangeGoods(item) {
|
|
this.itemData = {};
|
|
if (item.type == 1) {
|
|
this.itemData = item;
|
|
if (!Object.keys(this.itemData.address_info).length) {
|
|
this.exchangeModal = true;
|
|
} else {
|
|
this.logisticsModal = true
|
|
|
|
}
|
|
console.log(this.itemData);
|
|
}
|
|
},
|
|
confirmExchange() {
|
|
if (!this.formData.name) {
|
|
this.$util.showToast({
|
|
title: '请填写收货人'
|
|
});
|
|
return;
|
|
}
|
|
if (!this.formData.phone) {
|
|
this.$util.showToast({
|
|
title: '请填写联系方式'
|
|
});
|
|
return;
|
|
}
|
|
if (!this.formData.address) {
|
|
this.$util.showToast({
|
|
title: '请填写收货地址'
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
if (!uni.$u.test.mobile(this.formData.phone)) {
|
|
this.$util.showToast({
|
|
title: '请输入正确的手机号'
|
|
});
|
|
return;
|
|
}
|
|
console.log(this.itemData.id, JSON.stringify(this.formData));
|
|
this.$api.sendRequest({
|
|
headers: {
|
|
'Context-Type': 'application/json'
|
|
},
|
|
url: '/api/draw/doLogAddress',
|
|
data: {
|
|
id: this.itemData.id,
|
|
address_info: JSON.stringify(this.formData),
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.exchangeModal = false;
|
|
}
|
|
},
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/ .fixed {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
|
|
.warp {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.rect {
|
|
width: calc(100vw - 60rpx);
|
|
min-height: 100rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
|
|
.cont {
|
|
padding: 30rpx;
|
|
|
|
.u-textarea--disabled {
|
|
// background: none;
|
|
}
|
|
|
|
.u-textarea {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.titleTip {
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
.luckylog_wrapper {
|
|
.tab-left {
|
|
display: flex;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.tab {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 80rpx;
|
|
background-color: $color-bg;
|
|
|
|
view {
|
|
flex: 1;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
|
|
text {
|
|
margin-left: 10rpx;
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
|
|
.tab-left {
|
|
display: flex;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.tab-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-right: 40rpx;
|
|
}
|
|
}
|
|
|
|
.cart-empty {
|
|
margin-top: 208rpx !important;
|
|
}
|
|
|
|
.detailed-wrap {
|
|
background: #fff;
|
|
position: relative;
|
|
z-index: 9;
|
|
padding-top: 80rpx;
|
|
|
|
.head {
|
|
display: flex;
|
|
height: 90rpx;
|
|
|
|
&>view {
|
|
flex: 1;
|
|
text-align: left;
|
|
padding: 0 $padding;
|
|
line-height: 90rpx;
|
|
}
|
|
}
|
|
|
|
.cont {
|
|
background: #fff;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
|
|
.detailed-item {
|
|
padding: 30rpx 0 32rpx;
|
|
margin: 0 32rpx;
|
|
border-bottom: 2rpx solid $color-line;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
|
|
.logImg {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.logText {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
.logType {}
|
|
|
|
.time {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|