wangyifang
/
xietaitai-shop-wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单

Browse Source
master
lion 2 years ago
parent 02cda241c4
commit 59cfec762e
3 changed files with 379 additions and 101 deletions
Show Stats Download Patch File Download Diff File

164
components/date-picker/date-picker.vue
Unescape View File

@ -0,0 +1,164 @@
<template>
<view>
<u-popup v-model="show" mode="bottom">
<view class="date">
<view class="date-title">
<view>配送</view>
<view>
<u-icon name="close-circle-fill" color="#f0efed" size="32"></u-icon>
</view>
</view>
<view class="date-express">
<view v-for="(item,index) in express">
<view @click="chooseExpress(index)" :class="{'date-express-item':true,'date-express-item_active':expressIndex==index}" v-if="item.value">{{item.value}}</view>
</view>
</view>
<view class="date-stitle">送货时间</view>
<view class="date-list">
<view class="date-list-left">
<view v-for="(item,index) in data">
<view @click="chooseDate(index,item)"
:class="{'date-list-item':true,'date-list-item_active':dateIndex==index}"
v-if="item">
{{item.ymd}}[{{item.week}}]
</view>
</view>
</view>
<view class="date-list-right">
<view class="lunarData">
{{dateObj.lunarData?dateObj.lunarData:''}}
</view>
<view class="hh">
<view class="" v-for="(item,index) in hhList">
{{item}}
</view>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
// 日期
data: {
type: Array,
default () {
return []
}
},
// 快递
express: {
type: Array,
default () {
return []
}
}
},
data() {
return {
show: true,
expressIndex:-1,
dateIndex:-1,
dateObj:{},
hhList:['09:00-15:00','15:00-21:00']
}
},
methods:{
chooseExpress(index){
this.expressIndex = index
},
chooseDate(index,item){
this.dateIndex = index
this.dateObj = item
}
}
}
</script>
<style lang="scss" scoped>
.u-drawer-content-visible{
border-radius: 30rpx 30rpx 0 0;
}
.date {
padding: 35rpx 0;
padding-right: 35rpx;
&-title {
font-size: 32rpx;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 35rpx;
}
&-express{
padding-left: 35rpx;
display: flex;
align-items: center;
margin-top:35rpx;
margin-bottom:15rpx;
&-item{
font-size: 24rpx;
color:#000;
background-color: #f0efed;
height:57rpx;
line-height: 55rpx;
text-align: center;
min-width: 180rpx;
border:1px solid transparent;
border-radius: 30rpx;
margin-right:20rpx;
margin-bottom:20rpx;
}
&-item_active{
color:#ba8b45;
background-color: #fef8ee;
border:1px solid #ba8b45;
}
}
&-stitle{
font-size: 24rpx;
color:#000;
padding-left:35rpx;
margin-bottom:35rpx;
}
&-list{
display: flex;
height:510rpx;
&-left{
width:235rpx;
height:510rpx;
overflow-y: scroll;
font-size: 0;
}
&-item{
font-size: 24rpx;
color:#787877;
background-color: #f0efed;
width:235rpx;
height:72rpx;
text-align: center;
line-height: 72rpx;
}
&-item_active{
background-color: #fff;
color:#000;
}
&-right{
width:calc(100% - 235rpx);
padding-top:15rpx;
padding-left:75rpx;
}
}
}
</style>

298
packages/order/order.vue
Unescape View File

@ -2,73 +2,101 @@
<page-meta :page-style="'overflow:'+(showinfo?'hidden':'visible')"></page-meta> <page-meta :page-style="'overflow:'+(showinfo?'hidden':'visible')"></page-meta>
<view class="cotainer"> <view class="cotainer">
<view class="orderInfo"> <view class="orderInfo">
<view class="orderInfo-img"> <view class="orderInfo-title">
<u-image :src="require('@/static/share.jpg')" height="350"></u-image> <view>{{cardInfo.sku?cardInfo.sku.name:''}}</view>
<view>您提货的商品是</view>
</view> </view>
<view class="orderInfo-info"> <view class="orderInfo-info">
<u-image :src="require('@/static/share.jpg')" width="100" height="100"></u-image> <image :src="require('@/static/share.jpg')"></image>
<view>{{cardInfo.sku?cardInfo.sku.name:''}}{{cardInfo.sku?cardInfo.sku.specs:''}}</view>
</view>
<view class="orderInfo-status">
<view> <view>
<view>卡劵状态</view> <view>
<view v-html="cardInfo.status_label"></view> {{cardInfo.sku?cardInfo.sku.specs:''}}
</view> </view>
<view> <view>
<view>卡劵状态</view> <view>今日剩余可提货量</view>
<view v-html="cardInfo.status_label"></view> <view>99</view>
</view>
<view>
<view>卡券状态</view>
<view class="status" v-html="cardInfo.status_label"></view>
</view>
</view> </view>
<view> </view>
<view>今日剩余可提货量</view> <view class="orderInfo-status">
<u-button size="mini">99</u-button> <view>提货时间</view>
<view @click="openDatePicker">
<view class="">
<view>顺丰快递</view>
<view>9月28日 [周三] 09:00-15:00</view>
</view>
<view>
<u-icon name="arrow-down-fill" color="#ccc" size='28'></u-icon>
</view>
</view> </view>
</view> </view>
</view> </view>
<date-picker ref="datePickers" :data="listDates" :express="listExpress"></date-picker>
<view class="orderForm"> <view class="orderForm">
<u-form :model="form" ref="uForm"> <u-form :model="form" ref="uForm" :error-type="['border-bottom']">
<u-form-item label="预约提货时间" required prop="send_date" label-position="top"> <!-- <u-form-item label="预约提货时间" required prop="send_date" label-position="top">
<u-input v-model="form.send_date" placeholder="请选择预约提货时间" @click="showCalendar = true" <u-input v-model="form.send_date" placeholder="请选择预约提货时间" @click="showCalendar = true"
type="select" /> type="hidden" />
</u-form-item> </u-form-item> -->
<view class="orderForm-address"> <view class="orderForm-wrap">
<u-form-item label="收货人" label-width="180" prop="contact" label-position="left">
<u-input v-model="form.contact" placeholder="请填写收货人姓名" />
</u-form-item>
<u-form-item label="手机号码" label-width="180" prop="mobile" label-position="left">
<u-input v-model="form.mobile" placeholder="请填写手机号码" />
</u-form-item>
<u-form-item label="备用号码" label-width="180" prop="mobile2" label-position="left">
<u-input v-model="form.mobile2" placeholder="请填写备用号码" />
</u-form-item>
<u-form-item label="所在地区" prop="area" label-width="180" label-position="left">
<u-input v-model="form.area" placeholder="请选择所在地区" @click="openArea" />
<view slot="right" class="arearight" @click="changeLocation">
<u-icon name="map"></u-icon>
定位
</view>
</u-form-item>
<u-form-item label="详细地址" label-width="180" prop="address" label-position="left">
<u-input v-model="form.address" placeholder="请填写详细地址" />
</u-form-item>
<u-form-item label="设置默认地址" :border-bottom="false" label-width="180" prop="checked"
label-position="left">
<u-switch slot="right" v-model="form.checked" active-color="#ba8b45" inactive-color="#adadac"
size="40"></u-switch>
</u-form-item>
</view>
<!-- <view class="orderForm-address">
<text><text>*</text>收货地址</text> <text><text>*</text>收货地址</text>
<u-button @click="changeLocation" size="mini">获取位置</u-button> <u-button @click="changeLocation" size="mini">获取位置</u-button>
</view> -->
<view class="orderForm-wrap">
<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="180" prop="buy_name" label-position="left">
<u-input v-model="form.buy_name" placeholder="选填" />
</u-form-item>
<u-form-item label="购买人电话" :border-bottom="false" label-width="180" prop="buy_mobile"
label-position="left">
<u-input v-model="form.buy_mobile" placeholder="选填" />
</u-form-item>
</view> </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> </u-form>
<view class="orderForm-btn"> <view class="orderForm-btn">
<u-button type="primary" @click="submit">确认提货</u-button> <view @click="submit">点击提货</view>
</view> </view>
</view> </view>
<!-- <u-calendar max-date="2050-12-31" v-model="showCalendar" @change="changeDate" :mode="'date'"></u-calendar> --> <!-- <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> --> <!-- <u-picker mode="region" v-model="showArea" @confirm="changeArea"></u-picker> -->
<aui-picker ref="pickers" :title="'地区选择'" :data="listArea" @callback="changeArea"></aui-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="changeDate" v-model="showCalendar" :list="listDates"></u-select>
<u-select @confirm="changeIsMySelf" v-model="showIsMySelf" :list="listIsMySelf"></u-select> <u-select @confirm="changeIsMySelf" v-model="showIsMySelf" :list="listIsMySelf"></u-select>
@ -136,9 +164,11 @@
} from '@/common/util.js' } from '@/common/util.js'
import solarLunar from '@/node_modules/solarlunar'; import solarLunar from '@/node_modules/solarlunar';
import auiPicker from '@/components/aui-picker.vue'; import auiPicker from '@/components/aui-picker.vue';
import datePicker from '@/components/date-picker/date-picker.vue'
export default { export default {
components: { components: {
auiPicker auiPicker,
datePicker
}, },
data() { data() {
return { return {
@ -159,10 +189,18 @@
contact: '', contact: '',
mobile: '', mobile: '',
mobile2: '', mobile2: '',
checked: false,
myself: 1, myself: 1,
buy_name: '', buy_name: '',
buy_mobile: '' buy_mobile: ''
}, },
listExpress:[{
id:0,
value:'顺丰快递'
},{
id:1,
value:'中通快递'
}],
listDates: [], listDates: [],
showCalendar: false, showCalendar: false,
date: '', date: '',
@ -213,7 +251,7 @@
} }
}, },
onReady() { onReady() {
this.$refs.uForm.setRules(this.rules); // this.$refs.uForm.setRules(this.rules);
}, },
onLoad(option) { onLoad(option) {
@ -221,7 +259,7 @@
this.cardInfo = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card : {} 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.card_number = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").card_number : ''
this.form.password = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").password : '' this.form.password = uni.getStorageSync("vuex_card") ? uni.getStorageSync("vuex_card").password : ''
uni.removeStorageSync("vuex_card") // uni.removeStorageSync("vuex_card")
this.getAddress() this.getAddress()
this.getDates() this.getDates()
this.getArea() this.getArea()
@ -257,25 +295,43 @@
}) })
} }
}, },
async getDates() { async getDates() {
await this.$u.api.getDates({ await this.$u.api.getDates({
card_number: this.form.card_number, card_number: this.form.card_number,
password: this.form.password password: this.form.password,
}).then(res => { }).then(res => {
console.log("dare", res) console.log("dare", res)
let data = res.card let data = res.card
if (data.open_dates) { if (data.open_dates) {
for (var k in data.open_dates) { for (var k in data.open_dates) {
this.listDates.push({ let _k = this.momentDay(k)
label: k, this.listDates.push(_k)
value: k
})
} }
} }
console.log("this.listDates",this.listDates)
}).then(res => { }).then(res => {
}) })
}, },
momentDay(date) {
if (date) {
const weeks = ["周日", '周一', '周二', '周三', '周四', '周五', '周六', ]
let dateArr = date.split("-")
let ymd = this.$moment(date).format("M月DD日")
let week = weeks[this.$moment(date).day()]
const solar2lunarData = solarLunar.solar2lunar(dateArr[0], dateArr[1], dateArr[2]);
return {
ymd:ymd,
week:week,
lunarData:`农历${solar2lunarData.monthCn}${solar2lunarData.dayCn}`,
}
}
},
openDatePicker(){
this.$refs.datePickers.show = true
},
changeDate(e) { changeDate(e) {
console.log(e) console.log(e)
if (e) { if (e) {
@ -354,22 +410,6 @@
} }
}) })
}, },
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() { submit() {
if ((!isNull(this.form.mobile2) && this.form.mobile2.length > 0) || (!isNull(this.form.buy_mobile) && this if ((!isNull(this.form.mobile2) && this.form.mobile2.length > 0) || (!isNull(this.form.buy_mobile) && this
.form.buy_mobile.length > 0)) { .form.buy_mobile.length > 0)) {
@ -419,8 +459,9 @@
<style lang="scss"> <style lang="scss">
.cotainer { .cotainer {
padding: 40rpx; padding: 29rpx 54rpx;
background-color: #f0efed;
padding-bottom: 200rpx;
.addressinfo { .addressinfo {
position: fixed; position: fixed;
top: 0; top: 0;
@ -542,49 +583,105 @@
} }
.orderInfo { .orderInfo {
&-img { padding: 40rpx 24rpx;
text-align: center; border-radius: 10rpx;
background-color: #fff;
font-size: 24rpx;
color: #000;
&-title {
>view { >view {
padding: 20rpx; font-size: 24rpx;
font-weight: bolder;
margin-bottom: 20rpx;
} }
} }
&-info { &-info {
display: flex; display: flex;
align-items: center;
font-weight: normal;
margin-bottom: 40rpx;
image {
width: 150rpx;
height: 150rpx;
border: 1px solid #ba8b45;
border-radius: 10rpx;
margin-right: 20rpx;
}
>view { >view {
margin-left: 30rpx; &:last-child {
padding: 0 40rpx; width: calc(100% - 170rpx);
font-weight: bold;
>view {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.status {
background-color: #ba8b45;
color: #fff;
padding: 5rpx 20rpx;
border-radius: 10rpx;
}
}
}
} }
} }
&-status { &-status {
display: flex; display: flex;
align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
>view { >view {
width: calc(50% - 40rpx);
margin: 20rpx;
display: flex;
align-items: center;
margin-left: 0;
&:last-child { &:last-child {
width: 100% text-align: right;
} display: flex;
align-items: center;
>view {
&:first-child {
view {
margin-bottom: 15rpx;
&:last-child {
margin-bottom: 0rpx
}
}
}
>view { &:last-child {
margin-right: 20rpx; margin-left: 20rpx
}
}
} }
} }
} }
} }
.orderForm { .orderForm {
&-wrap {
padding: 40rpx 24rpx;
border-radius: 10rpx;
background-color: #fff;
font-size: 24rpx;
color: #000;
margin-top: 24rpx;
.u-form-item {
padding-bottom: 0
}
.arearight {
color: #000
}
}
&-address { &-address {
height: 72rpx; height: 72rpx;
@ -607,7 +704,24 @@
} }
&-btn { &-btn {
margin: 40rpx; background: #fff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 40rpx;
z-index: 9;
>view {
background-color: #ba8b45;
color: #fff;
border-radius: 40rpx;
width: 60%;
margin: 0 auto;
height: 75rpx;
text-align: center;
line-height: 75rpx;
}
} }
} }
} }

6
pages.json
Unescape View File

@ -28,7 +28,7 @@
"pages": [{ "pages": [{
"path": "order/order", "path": "order/order",
"style": { "style": {
"navigationBarTitleText": "提货" "navigationBarTitleText": "填写订单"
} }
}, { }, {
"path": "myorder/myorder", "path": "myorder/myorder",
@ -93,8 +93,8 @@
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "蟹太太", "navigationBarTitleText": "蟹太太",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F8F8F8" "backgroundColor": "#FFFFFF"
}, },
"tabBar": { "tabBar": {
"color": "#666666", "color": "#666666",

Write Preview
Loading…
Cancel
Save