|
|
<template>
|
|
|
<page-meta :page-style="'overflow:'+(showinfo?'hidden':'visible')"></page-meta>
|
|
|
<view class="cotainer">
|
|
|
<view class="orderInfo">
|
|
|
<view class="orderInfo-img">
|
|
|
<u-image :src="require('@/static/share.jpg')" height="350"></u-image>
|
|
|
<view>您提货的商品是</view>
|
|
|
</view>
|
|
|
<view class="orderInfo-info">
|
|
|
<u-image :src="require('@/static/share.jpg')" width="100" height="100"></u-image>
|
|
|
<view>{{cardInfo.sku?cardInfo.sku.name:''}}{{cardInfo.sku?cardInfo.sku.specs:''}}</view>
|
|
|
</view>
|
|
|
<view class="orderInfo-status">
|
|
|
<view>
|
|
|
<view>卡劵状态</view>
|
|
|
<view v-html="cardInfo.status_label"></view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<view>卡劵状态</view>
|
|
|
<view v-html="cardInfo.status_label"></view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<view>今日剩余可提货量</view>
|
|
|
<u-button size="mini">99</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderForm">
|
|
|
<u-form :model="form" ref="uForm">
|
|
|
<u-form-item label="预约提货时间" required prop="send_date" label-position="top">
|
|
|
<u-input v-model="form.send_date" placeholder="请选择预约提货时间" @click="showCalendar = true"
|
|
|
type="select" />
|
|
|
</u-form-item>
|
|
|
<view class="orderForm-address">
|
|
|
<text><text>*</text>收货地址</text>
|
|
|
<u-button @click="changeLocation" size="mini">获取位置</u-button>
|
|
|
</view>
|
|
|
<u-form-item label=" " prop="area" label-position="top">
|
|
|
<u-input v-model="form.area" placeholder="请选择收货地址" @click="openArea" type="select" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="详细地址" required prop="address" label-position="top">
|
|
|
<u-input v-model="form.address" placeholder="请填写详细地址" type="textarea" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="收货人姓名" label-width="150" required prop="contact" label-position="left">
|
|
|
<u-input v-model="form.contact" placeholder="请填写收货人姓名" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="收货人电话" label-width="150" required prop="mobile" label-position="left">
|
|
|
<u-input v-model="form.mobile" placeholder="请填写收货人电话" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="备用电话" label-width="150" prop="mobile2" label-position="left">
|
|
|
<u-input v-model="form.mobile2" placeholder="请填写备用电话" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="是否本人收货" label-width="180" prop="myself" label-position="left">
|
|
|
<u-input v-model="myself" placeholder="请选择是否本人收货" @click="showIsMySelf = true" type="select" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="购买人姓名" label-width="150" prop="buy_name" label-position="left">
|
|
|
<u-input v-model="form.buy_name" placeholder="请填写购买人姓名" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="购买人电话" label-width="150" prop="buy_mobile" label-position="left">
|
|
|
<u-input v-model="form.buy_mobile" placeholder="请填写购买人电话" />
|
|
|
</u-form-item>
|
|
|
</u-form>
|
|
|
<view class="orderForm-btn">
|
|
|
<u-button type="primary" @click="submit">确认提货</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- <u-calendar max-date="2050-12-31" v-model="showCalendar" @change="changeDate" :mode="'date'"></u-calendar> -->
|
|
|
<!-- <u-picker mode="region" v-model="showArea" @confirm="changeArea"></u-picker> -->
|
|
|
<aui-picker ref="pickers" :title="'地区选择'" :data="listArea" @callback="changeArea"></aui-picker>
|
|
|
|
|
|
|
|
|
<u-select @confirm="changeDate" v-model="showCalendar" :list="listDates"></u-select>
|
|
|
|
|
|
<u-select @confirm="changeIsMySelf" v-model="showIsMySelf" :list="listIsMySelf"></u-select>
|
|
|
<!-- 确认信息 -->
|
|
|
<view class="showinfo" v-if="showinfo">
|
|
|
<view class="content">
|
|
|
<view class="showinfo-info">
|
|
|
<view>您提货的商品是</view>
|
|
|
<u-image :src="require('@/static/share.jpg')" width="450" height="450"></u-image>
|
|
|
<view>{{cardInfo.sku?cardInfo.sku.name:''}}{{cardInfo.sku?cardInfo.sku.specs:''}}</view>
|
|
|
</view>
|
|
|
<view class="showinfo-wrap">
|
|
|
<view>发货时间</view>
|
|
|
<view style="text-align: center;">{{momentDay(date)}}</view>
|
|
|
</view>
|
|
|
<view class="showinfo-wrap">
|
|
|
<view>收货信息</view>
|
|
|
<view>
|
|
|
<view>
|
|
|
<text>收货人：</text>
|
|
|
<text>{{form.contact}}</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text>收货人电话：</text>
|
|
|
<text>{{form.mobile}}</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text>收货地址：</text>
|
|
|
<text>{{form.area}}{{form.address}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="showinfo-btn">
|
|
|
<u-button @click="showinfo = false">返回修改</u-button>
|
|
|
<u-button type="primary" @click="submit">确认提货</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 选择地址 -->
|
|
|
<view class="addressinfo" v-if="showAddress">
|
|
|
<view class="content">
|
|
|
<view class="content-close" @click="showAddress=false">
|
|
|
<u-icon name="close-circle" color="#000" size="50"></u-icon>
|
|
|
</view>
|
|
|
<view class="content-wrap">
|
|
|
|
|
|
<u-radio-group v-model="addressInfo" @change="changeAddress">
|
|
|
<u-radio v-for="(item, index) in listAddress" :key="index" :name="item.id">
|
|
|
<view class="content-contact">{{item.contact}} {{item.mobile}}</view>
|
|
|
<view class="content-address">{{item.area}}{{item.address}}</view>
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
toast,
|
|
|
isMobile,
|
|
|
isNull
|
|
|
} from '@/common/util.js'
|
|
|
import solarLunar from '@/node_modules/solarlunar';
|
|
|
import auiPicker from '@/components/aui-picker.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
auiPicker
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showinfo: false,
|
|
|
showAddress: false,
|
|
|
listAddress: [],
|
|
|
addressInfo: '',
|
|
|
cardInfo: {},
|
|
|
form: {
|
|
|
card_number: '',
|
|
|
password: '',
|
|
|
send_date: '',
|
|
|
area: '',
|
|
|
address: '',
|
|
|
province_id: '',
|
|
|
city_id: '',
|
|
|
district_id: '',
|
|
|
contact: '',
|
|
|
mobile: '',
|
|
|
mobile2: '',
|
|
|
myself: 1,
|
|
|
buy_name: '',
|
|
|
buy_mobile: ''
|
|
|
},
|
|
|
listDates: [],
|
|
|
showCalendar: false,
|
|
|
date: '',
|
|
|
listArea: [],
|
|
|
showArea: false,
|
|
|
showIsMySelf: false,
|
|
|
myself: '是',
|
|
|
listIsMySelf: [{
|
|
|
value: 1,
|
|
|
label: '是'
|
|
|
}, {
|
|
|
value: 0,
|
|
|
label: '否'
|
|
|
}],
|
|
|
rules: {
|
|
|
send_date: [{
|
|
|
required: true,
|
|
|
message: '请选择预约提货时间',
|
|
|
trigger: ['change', 'blur'],
|
|
|
}],
|
|
|
area: [{
|
|
|
required: true,
|
|
|
message: '请选择收货地址',
|
|
|
trigger: ['change', 'blur'],
|
|
|
}],
|
|
|
address: [{
|
|
|
required: true,
|
|
|
message: '请填写详细地址',
|
|
|
trigger: ['blur'],
|
|
|
}],
|
|
|
contact: [{
|
|
|
required: true,
|
|
|
message: '请填写收货人姓名',
|
|
|
trigger: ['blur'],
|
|
|
}],
|
|
|
mobile: [{
|
|
|
required: true,
|
|
|
message: '请填写收货人电话',
|
|
|
trigger: ['blur'],
|
|
|
}, {
|
|
|
validator: (rule, value, callback) => {
|
|
|
return this.$u.test.mobile(value);
|
|
|
},
|
|
|
message: '手机号码不正确',
|
|
|
trigger: ['blur'],
|
|
|
}]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onReady() {
|
|
|
this.$refs.uForm.setRules(this.rules);
|
|
|
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
if (option.hasCard) {
|
|
|
this.cardInfo = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card : {}
|
|
|
this.form.card_number = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card_number : ''
|
|
|
this.form.password = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").password : ''
|
|
|
uni.removeStorageSync("vuex_card")
|
|
|
this.getAddress()
|
|
|
this.getDates()
|
|
|
this.getArea()
|
|
|
} else {
|
|
|
toast("未查询到卡券信息")
|
|
|
uni.removeStorageSync("vuex_card")
|
|
|
uni.redirectTo({
|
|
|
url: '/pages/change/change'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
async getAddress() {
|
|
|
const res = await this.$u.api.getUserAddress()
|
|
|
this.listAddress = res.address
|
|
|
this.showAddress = this.listAddress.length > 0 ? true : false
|
|
|
},
|
|
|
changeAddress(e) {
|
|
|
console.log("e", e)
|
|
|
if (e) {
|
|
|
this.listAddress.map(item => {
|
|
|
if (item.id == e) {
|
|
|
this.form.address_id = item.id
|
|
|
this.form.area = item.area
|
|
|
this.form.address = item.address
|
|
|
this.form.province_id = item.province_id
|
|
|
this.form.city_id = item.city_id
|
|
|
this.form.district_id = item.district_id
|
|
|
this.form.contact = item.contact
|
|
|
this.form.mobile = item.mobile
|
|
|
this.showAddress = false
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
async getDates() {
|
|
|
await this.$u.api.getDates({
|
|
|
card_number: this.form.card_number,
|
|
|
password: this.form.password
|
|
|
}).then(res => {
|
|
|
console.log("dare", res)
|
|
|
let data = res.card
|
|
|
if (data.open_dates) {
|
|
|
for (var k in data.open_dates) {
|
|
|
this.listDates.push({
|
|
|
label: k,
|
|
|
value: k
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}).then(res => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
changeDate(e) {
|
|
|
console.log(e)
|
|
|
if (e) {
|
|
|
// this.form.send_date = e.result
|
|
|
// this.date = e
|
|
|
this.date = e[0].label
|
|
|
this.form.send_date = e[0].value
|
|
|
}
|
|
|
},
|
|
|
async getArea() {
|
|
|
const res = await this.$u.api.getRegion()
|
|
|
this.listArea = res.regions
|
|
|
|
|
|
console.log(res)
|
|
|
console.log(this.listArea)
|
|
|
},
|
|
|
openArea() {
|
|
|
this.$refs.pickers.open().then(function() {
|
|
|
console.log('picker打开');
|
|
|
});
|
|
|
},
|
|
|
changeArea(e) {
|
|
|
console.log(e)
|
|
|
// return
|
|
|
if (e) {
|
|
|
let data = e.data
|
|
|
let _this = this
|
|
|
data.forEach(function(item, index) {
|
|
|
_this.form.area += item.value + ' ';
|
|
|
});
|
|
|
this.form.province_id = data[0] ? data[0].id : ''
|
|
|
this.form.city_id = data[1] ? data[1].id : ''
|
|
|
this.form.district_id = data[2] ? data[2].id : ''
|
|
|
console.log(this.form)
|
|
|
// this.form.area = e.province.label + e.city.label + e.area.label
|
|
|
// this.$u.api.matchRegion({
|
|
|
// province: e.province.label,
|
|
|
// city: e.city.label,
|
|
|
// district: e.area.label
|
|
|
// }).then(res => {
|
|
|
// this.form.province_id = res.province_id ? res.province_id.id : ''
|
|
|
// this.form.city_id = res.city_id ? res.city_id.id : ''
|
|
|
// this.form.district_id = res.district_id ? res.district_id.id : ''
|
|
|
// })
|
|
|
}
|
|
|
},
|
|
|
changeIsMySelf(e) {
|
|
|
console.log(e)
|
|
|
if (e) {
|
|
|
this.myself = e[0].label
|
|
|
this.form.myself = e[0].value
|
|
|
}
|
|
|
},
|
|
|
changeLocation() {
|
|
|
console.log("location")
|
|
|
let _this = this
|
|
|
uni.authorize({
|
|
|
scope: 'scope.userLocation',
|
|
|
success: (res) => {
|
|
|
console.log("authorize", res)
|
|
|
|
|
|
uni.chooseLocation({
|
|
|
success(res) {
|
|
|
console.log("res", res)
|
|
|
_this.form.area = res.address
|
|
|
_this.form.address = res.name
|
|
|
},
|
|
|
fail(res) {
|
|
|
console.log("fail", res)
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
fail(res) {
|
|
|
console.log("authorize-fail", res)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
momentDay(date) {
|
|
|
console.log(date)
|
|
|
if(date){
|
|
|
const weeks = ["周日",'周一','周二','周三','周四','周五','周六',]
|
|
|
let dateArr = date.split("-")
|
|
|
let ymd = this.$moment(date).format("YYYY年MM月DD日")
|
|
|
let week = weeks[this.$moment(date).day()]
|
|
|
console.log(this.$moment(date).format("YYYY年MM月DD日"))
|
|
|
// return
|
|
|
const solar2lunarData = solarLunar.solar2lunar(dateArr[0], dateArr[1], dateArr[2]);
|
|
|
console.log(`农历${solar2lunarData.monthCn}${solar2lunarData.dayCn}`);
|
|
|
// return this.date + " " + LL
|
|
|
return `${ymd} ${week} 农历${solar2lunarData.monthCn}${solar2lunarData.dayCn}`
|
|
|
}
|
|
|
|
|
|
},
|
|
|
submit() {
|
|
|
if ((!isNull(this.form.mobile2) && this.form.mobile2.length > 0) || (!isNull(this.form.buy_mobile) && this
|
|
|
.form.buy_mobile.length > 0)) {
|
|
|
if (!isMobile(this.form.mobile2)) {
|
|
|
toast('备用电话不正确')
|
|
|
return
|
|
|
}
|
|
|
if (!isMobile(this.form.buy_mobile)) {
|
|
|
toast('购买人电话不正确')
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
this.$refs.uForm.validate(valid => {
|
|
|
console.log('验证通过');
|
|
|
if (valid) {
|
|
|
if (!this.showinfo) {
|
|
|
this.showinfo = true
|
|
|
console.log("this.showinfo", this.showinfo)
|
|
|
} else {
|
|
|
console.log('submit');
|
|
|
this.form.show = 0
|
|
|
this.$u.api.addUserOrder(this.form).then(res => {
|
|
|
console.log("res", res)
|
|
|
uni.removeStorageSync('vuex_card')
|
|
|
toast(res.msg)
|
|
|
setTimeout(function() {
|
|
|
uni.redirectTo({
|
|
|
url: '/packages/myorder/myorder'
|
|
|
})
|
|
|
}, 2000)
|
|
|
|
|
|
}).then(res => {
|
|
|
console.log('res1', res)
|
|
|
|
|
|
})
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
console.log('验证失败');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.cotainer {
|
|
|
padding: 40rpx;
|
|
|
|
|
|
.addressinfo {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
background: rgba(0, 0, 0, .5);
|
|
|
z-index: 9999999;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
.content {
|
|
|
width: 80%;
|
|
|
height: 600rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&-wrap {
|
|
|
box-sizing: border-box;
|
|
|
background: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
overflow: scroll;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 40rpx;
|
|
|
}
|
|
|
|
|
|
&-close {
|
|
|
position: absolute;
|
|
|
top: -20rpx;
|
|
|
right: -20rpx;
|
|
|
}
|
|
|
|
|
|
.u-radio {
|
|
|
align-items: baseline;
|
|
|
}
|
|
|
|
|
|
&-contact {}
|
|
|
|
|
|
&-address {
|
|
|
color: #ccc;
|
|
|
line-height: 1.2;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.showinfo {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
background: rgba(0, 0, 0, .5);
|
|
|
z-index: 9999999;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
.content {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
padding: 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
background: #fff;
|
|
|
// border-radius: 16rpx;
|
|
|
overflow: scroll;
|
|
|
}
|
|
|
|
|
|
&-info {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
|
|
|
>view {
|
|
|
margin: 20rpx;
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
width: 350rpx;
|
|
|
color: #ccc;
|
|
|
font-size: 28rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-wrap {
|
|
|
>view {
|
|
|
&:first-child {
|
|
|
text-align: center;
|
|
|
margin: 20rpx;
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
border: 1px solid #333;
|
|
|
padding: 20rpx;
|
|
|
border-radius: 15rpx;
|
|
|
font-weight: bold;
|
|
|
|
|
|
>view {
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin: 30rpx;
|
|
|
|
|
|
u-button {
|
|
|
margin: 0 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.orderInfo {
|
|
|
&-img {
|
|
|
text-align: center;
|
|
|
|
|
|
>view {
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
>view {
|
|
|
margin-left: 30rpx;
|
|
|
padding: 0 40rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-status {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
>view {
|
|
|
width: calc(50% - 40rpx);
|
|
|
margin: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-left: 0;
|
|
|
|
|
|
&:last-child {
|
|
|
width: 100%
|
|
|
}
|
|
|
|
|
|
>view {
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.orderForm {
|
|
|
|
|
|
&-address {
|
|
|
height: 72rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
line-height: 72rpx;
|
|
|
padding-top: 20rpx;
|
|
|
position: relative;
|
|
|
|
|
|
text {
|
|
|
text {
|
|
|
position: absolute;
|
|
|
left: -16rpx;
|
|
|
vertical-align: middle;
|
|
|
color: #fa3534;
|
|
|
padding-top: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-btn {
|
|
|
margin: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
