9 changed files with 470 additions and 11 deletions
-
1src/js/api.js
-
6src/pages.json
-
96src/pages/write_off/all_components/list_item.vue
-
67src/pages/write_off/all_components/period_picker.vue
-
76src/pages/write_off/all_components/stadium_picker.vue
-
175src/pages/write_off/douyin/poi_list.vue
-
25src/pages/write_off/menu/menu.vue
-
1src/pages/write_off/operate/operate.vue
-
34src/uni.scss
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<view class="list-item"> |
|||
<!-- <view class="i-name">{{ e.extension.stadium_name || '-' }}</view> --> |
|||
<view class="i-lines"> |
|||
<view class="il-view"> |
|||
<view class="iv-txt">订单编号：{{ orderNo || '-' }}</view> |
|||
</view> |
|||
<view class="il-view"> |
|||
<view class="iv-txt">用户信息：{{ userPhone || '-' }}</view> |
|||
</view> |
|||
<view class="il-view"> |
|||
<view class="iv-txt">券码：{{ verifyCode || '-' }}</view> |
|||
</view> |
|||
<view class="il-view"> |
|||
<view class="iv-txt">验证方式：{{ verifyMethod || '-' }}</view> |
|||
</view> |
|||
<view class="il-view"> |
|||
<view class="iv-txt">核销时间：{{ verifyTime || '-'}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
stadiumName: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
orderNo: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
userPhone: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
nickname: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
verifyCode: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
verifyMethod: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
verifyTime: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.list-item{ |
|||
position: relative; |
|||
padding: 20upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
.i-name{ |
|||
height: 100upx; |
|||
line-height: 98upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
font-weight: 500; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
.i-lines{ |
|||
padding-top: 8upx; |
|||
.il-view{ |
|||
display: flex; |
|||
>.iv-txt{ |
|||
min-width: 0; |
|||
line-height: 52upx; |
|||
font-size: 28upx; |
|||
color: #9c9c9f; |
|||
@include tHide; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<view class="mol-date"> |
|||
<view class="md-txt">核销日期</view> |
|||
<view class="md-picker"> |
|||
<picker mode="date" @change="stChange"> |
|||
<view class="mp-view"> |
|||
<input class="mv-ipt" :value="startTime" disabled placeholder="请选择时间" /> |
|||
<image class="mv-img" mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="md-txt">至</view> |
|||
<view class="md-picker"> |
|||
<picker mode="date" @change="edChange"> |
|||
<view class="mp-view"> |
|||
<input class="mv-ipt" :value="endTime" disabled placeholder="请选择时间" /> |
|||
<image class="mv-img" mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.mol-date{ |
|||
padding: 0 28upx; |
|||
height: 148upx; |
|||
background-color: #fff; |
|||
@include ctf(flex-start); |
|||
.md-txt{ |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #1a1a1a; |
|||
} |
|||
.md-picker{ |
|||
margin: 0 20upx; |
|||
width: 226upx; |
|||
border: 2upx solid #D8D8D8; |
|||
border-radius: 10upx; |
|||
overflow: hidden; |
|||
.mp-view{ |
|||
padding: 0 10upx; |
|||
height: 88upx; |
|||
background-color: #f2f2f7; |
|||
@include ctf(space-between); |
|||
>.mv-ipt{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
>.mv-img{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
width: 22upx; |
|||
height: 22upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<view class="nop-store-name"> |
|||
<picker :range="stadiumList" range-key="name" @change="stadiumChange"> |
|||
<view class="nsn-frame"> |
|||
<input class="nf-ipt" placeholder="请选择店铺" :value="curStadium.name" disabled /> |
|||
<image class="nf-img" mode="aspectFit" src="/static/images/icon/arrow_c33.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
stadiumList: { |
|||
type: Array, |
|||
default: [] |
|||
}, |
|||
}, |
|||
watch:{ |
|||
// stadiumList: { |
|||
// handler(val){ |
|||
// if(!val?.length)return; |
|||
// let _cur = val[0]; |
|||
// this.initCurStadium(_cur); |
|||
// }, |
|||
// immediate: true, |
|||
// deep: true |
|||
// } |
|||
}, |
|||
data() { |
|||
return { |
|||
curStadium: {}, |
|||
} |
|||
}, |
|||
methods: { |
|||
stadiumChange(e){ |
|||
let { stadiumList } = this; |
|||
let _cur = stadiumList?.[e?.detail?.value] || null; |
|||
if(!_cur?.id)return util.showFail('店铺信息有误！'); |
|||
this.initCurStadium(_cur); |
|||
}, |
|||
initCurStadium(stadium){ |
|||
this.curStadium = stadium; |
|||
this.$emit('change:stadium', stadium); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.nop-store-name{ |
|||
height: 144upx; |
|||
@include ctf(center); |
|||
.nsn-frame{ |
|||
padding: 0 20upx; |
|||
width: 702upx; |
|||
height: 92upx; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
@include ctf(space-between); |
|||
>.nf-ipt{ |
|||
flex-grow: 1; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1A1A1A; |
|||
} |
|||
>.nf-img{ |
|||
flex-shrink: 0; |
|||
margin-left: 20upx; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<view class="dy-poi-ls"> |
|||
<view class="dpl-header"> |
|||
<stadium-picker |
|||
:stadium-list="stadiumList" |
|||
@change:stadium="stadiumChange" |
|||
></stadium-picker> |
|||
<!-- <period-picker></period-picker> --> |
|||
<view class="dh-number">核销数量：{{ totalNum || 0 }}</view> |
|||
</view> |
|||
<view class="dpl-list"> |
|||
<view class="dl-item" v-for="(e, i) in writeOffList" :key="i"> |
|||
<list-item |
|||
:order-no="e.order_no" |
|||
:user-phone="e.user_phone" |
|||
:verify-code="e.verify_code" |
|||
:verify-method="e.verify_method" |
|||
:verify-time="e.verify_time" |
|||
></list-item> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="r-bottom-btn"><view @click="toOperate">核销团购券</view></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import periodPicker from "../all_components/period_picker.vue"; |
|||
import stadiumPicker from "../all_components/stadium_picker.vue"; |
|||
import listItem from "../all_components/list_item.vue"; |
|||
import { API } from '../../../js/api'; |
|||
import { servers } from '../../../js/server'; |
|||
import util from '../../../utils/util'; |
|||
import { mapState } from 'vuex'; |
|||
import { WRITE_OFF_STORE_NAME } from '../../../js/once_name'; |
|||
export default { |
|||
computed: { |
|||
...mapState([ 'brandInfo' ]), |
|||
}, |
|||
components: { |
|||
periodPicker, |
|||
stadiumPicker, |
|||
listItem |
|||
}, |
|||
data() { |
|||
return { |
|||
totalNum: 0, |
|||
writeOffList: [], |
|||
stadiumList: [], |
|||
curStadium: {}, |
|||
page: 1, |
|||
} |
|||
}, |
|||
async onLoad() { |
|||
let _brand_id = this.brandInfo?.brand?.id || 63; |
|||
let _list = await this.getStoreList({ brand_id: _brand_id }); |
|||
this.stadiumList = _list || []; |
|||
this.getList({ brand_id: _brand_id }); |
|||
|
|||
}, |
|||
onReachBottom(){ |
|||
let { page, curStadium } = this; |
|||
this.getList({ |
|||
brand_id: curStadium?.brand_id, |
|||
stadium_id: curStadium?.id, |
|||
page: page + 1, |
|||
}) |
|||
}, |
|||
methods: { |
|||
toOperate(){ |
|||
let { stadiumList, curStadium } = this; |
|||
util.$_emit(WRITE_OFF_STORE_NAME, { |
|||
stadiumList, |
|||
curStadium, |
|||
}) |
|||
util.routeTo(`/pages/write_off/operate/operate?type=dypoi`, 'rT'); |
|||
}, |
|||
stadiumChange(stadium){ |
|||
this.curStadium = stadium; |
|||
this.page = 1; |
|||
this.totalNum = 0; |
|||
this.writeOffList = []; |
|||
this.getList({ |
|||
brand_id: stadium?.brand_id, |
|||
stadium_id: stadium?.id, |
|||
}) |
|||
}, |
|||
getList({ brand_id, stadium_id = '', date = '', page = 1, page_size = 20, order_status = 'used' }){ |
|||
util.showLoad(); |
|||
servers.get({ |
|||
url: API.writeOff.dyPoiOrderList, |
|||
data: { brand_id, stadium_id, date, page, page_size, order_status }, |
|||
failMsg: '加载失败！', |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.totalNum = res.total || 0; |
|||
let _list = (res.list || []).map(e=>this.formating(e)); |
|||
if(page == 1)return this.writeOffList = _list; |
|||
if(!_list.length)return util.showNone('没有更多！'); |
|||
this.page = page; |
|||
this.writeOffList = [...this.writeOffList, ..._list]; |
|||
}) |
|||
}, |
|||
formating(data){ |
|||
let _code = data?.order_codes?.find(e=>e?.code_status == 'used'); |
|||
return { |
|||
order_no: data?.order_no || '', |
|||
user_phone: data?.mobile || '', |
|||
verify_code: _code?.code || '', |
|||
verify_method: _code?.verification_method || '', |
|||
verify_time: _code?.verification_time || '', |
|||
} |
|||
}, |
|||
getStoreList({ |
|||
page=1, |
|||
page_size=9999, |
|||
brand_id='', |
|||
}){ |
|||
return servers.get({ |
|||
url: API.stadiumList, |
|||
data: { |
|||
page, |
|||
page_size, |
|||
brand_id, |
|||
}, |
|||
failMsg: '获取列表失败！' |
|||
}) |
|||
.then(res=>res.list || []) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.dy-poi-ls{ |
|||
@include isPd(150upx); |
|||
} |
|||
.dpl-header{ |
|||
position: sticky; |
|||
padding-bottom: 24upx; |
|||
background: #fff; |
|||
.dh-number{ |
|||
padding: 0 24upx; |
|||
text-align: right; |
|||
@include flcw(32upx, 44upx); |
|||
@include tHide; |
|||
} |
|||
} |
|||
.dpl-list{ |
|||
padding: 24upx; |
|||
.dl-item+ .dl-item{ |
|||
margin-top: 24upx; |
|||
} |
|||
} |
|||
.r-bottom-btn{ |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
padding: 10upx 24upx; |
|||
padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
background-color: #f2f2f7; |
|||
>view{ |
|||
height: 112upx; |
|||
line-height: 112upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
border-radius: 10upx; |
|||
color: #fff; |
|||
background-color: $mColor; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue