9 changed files with 1399 additions and 29 deletions
@ -0,0 +1,126 @@ |
|||
{ |
|||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages |
|||
{ |
|||
"path": "pages/login/login", |
|||
"style": { |
|||
"navigationBarTitleText": "", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_detail", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_detail2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_booking", |
|||
"style": { |
|||
"navigationBarTitleText": "预约提货", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_record", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_bind", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
// 扫码进入 |
|||
{ |
|||
"path": "pages/card/card_bind2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, { |
|||
"path": "pages/index/BindPhone", |
|||
"style": { |
|||
"navigationBarTitleText": "绑定账号", |
|||
"navigationStyle": "custom", |
|||
"app-plus": { |
|||
"scrollIndicator": false //禁用原生导航栏, |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/UserFragment", |
|||
"style": { |
|||
"navigationBarTitleText": "绑定账号", |
|||
"navigationStyle": "custom", |
|||
"app-plus": { |
|||
"scrollIndicator": false //禁用原生导航栏, |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_record_detail", |
|||
"style": { |
|||
"navigationBarTitleText": "预约详情", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/record/recordList", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/good/goodsDetail", |
|||
"style": { |
|||
"navigationBarTitleText": "商品详情", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/SelectAddressActivity", |
|||
"style": { |
|||
"navigationBarTitleText": "提货点列表", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "white", |
|||
"navigationBarTitleText": "uni-app", |
|||
"navigationBarBackgroundColor": "#FE9039", |
|||
"backgroundColor": "#FE9039" |
|||
}, |
|||
"tabBar": { |
|||
"color": "#7A7E83", |
|||
"selectedColor": "#191919", |
|||
"borderStyle": "black", |
|||
"backgroundColor": "#ffffff", |
|||
"list": [{ |
|||
"pagePath": "pages/card/card", |
|||
"text": "礼包", |
|||
"iconPath": "static/bomicon/bom_notPack.png", |
|||
"selectedIconPath": "static/bomicon/bom_pack.png" |
|||
}, { |
|||
"pagePath": "pages/record/recordList", |
|||
"text": "预约记录", |
|||
"iconPath": "static/bomicon/bom_notRecord.png", |
|||
"selectedIconPath": "static/bomicon/bom_record.png" |
|||
}] |
|||
}, |
|||
"uniIdRouter": {} |
|||
} |
|||
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<view> |
|||
<view style="position: sticky;top: 0;background-color: #FE9039;"> |
|||
<view class="search-container"> |
|||
<!-- 搜索框 --> |
|||
<view class="search-container-bar"> |
|||
<!-- :cancelText="keyBoardPopup ? '取消' : '搜索'" --> |
|||
<uni-search-bar ref="searchBar" style="flex:1;margin-left: 20rpx;" radius="100" |
|||
v-model="associativeText" :focus="focus" :placeholder="hotWorld" clearButton="auto" |
|||
cancelButton="none" @clear="clear" /> |
|||
<view v-if="stringIsNotEmpty(associativeText) && associativeText!=page.key" @click="search" |
|||
style="margin-right: 10px;font-size: 13px; color: #FED6B5;">搜索</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="search-body"> |
|||
<view |
|||
style="font-size: 26rpx;padding-left: 50rpx;padding-right: 40rpx;padding-top: 10rpx;padding-bottom: 20rpx;color: #FED6B5;"> |
|||
输入关键字筛选提货点 |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
|
|||
<loading-state ref="pageView" @request="request"> |
|||
<!-- 搜索联想 --> |
|||
<view style="display: flex;flex-direction: column;background: #FFFFFF; |
|||
border-top-left-radius: 30px;border-top-right-radius: 30px; padding:10px 20px;margin-top: 10px;box-sizing: border-box;padding-bottom: 0px;" |
|||
v-for="(item,index) in dataList" :key="index"> |
|||
<!-- |
|||
<view |
|||
style="display: flex;flex-direction: row;width: 100%;box-sizing: border-box;width: 100%;margin-top:10rpx ;align-items: center;"> |
|||
<image src="../static/address_name.png" style="width: 50rpx;height: 50rpx;flex-shrink: 0;"> |
|||
</image> |
|||
<text |
|||
style="font-size: 31.5rpx;margin-left: 18rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.name}} |
|||
</text> |
|||
</view> |
|||
|
|||
<text |
|||
style="font-size: 24rpx;color: #999999;margin-top: 6rpx;box-sizing: border-box;width: 100%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">营业时间：{{item.businessHours}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 22rpx;"> |
|||
<image v-if="false" |
|||
style="width: 120rpx;height: 120rpx;border-radius: 20rpx;flex-shrink: 0;background-color: #fafafa;"> |
|||
</image> |
|||
<view style="display: flex;flex: 1;flex-direction: column;margin-left: 20rpx;margin-top: 10rpx;"> |
|||
<view style="display: flex;flex-direction: row;"> |
|||
<image src="../static/address_location.png" |
|||
style="width: 16px;height: 16px;flex-shrink: 0;margin-right: 3px;"> |
|||
</image> |
|||
<view style="color: #666666;font-size: 29.5rpx;">{{item.address}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;margin-top: 22rpx;"> |
|||
<image src="../static/address_phone.png" |
|||
style="width: 16px;height: 16px;margin-right: 3px;flex-shrink: 0;"> |
|||
</image> |
|||
<view style="color: #5259D7;font-size: 29.5rpx;">{{item.phone}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid;"> |
|||
<view style="flex: 1;"></view> |
|||
|
|||
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;" |
|||
@click.stop="phone(item.phone)"> |
|||
<image src="../static/address_phone2.png" style="width: 18px;height: 18px;"></image> |
|||
<view style="font-size: 13px;margin-left: 6px;">电话</view> |
|||
</view> |
|||
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;" |
|||
@click.stop="confirm(item)"> |
|||
<image src="../static/address_confirm.png" style="width: 18px;height: 18px;"></image> |
|||
<view style="font-size: 13px;margin-left: 6px;">确定</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: 333;">{{item.name}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">营业时间：{{item.businessHours}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/location.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;flex: 1;">门店地址：{{item.address}}</text> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/navigation.png" |
|||
style="width: 20px;height: 20px; margin-right: 20px;"></image> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid; justify-content: space-between; |
|||
padding-left: 30px;padding-right:30px;"> |
|||
|
|||
<view class="btn" @click.stop="phone(item.phone)"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/phone.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 14px; color: #666;">电话咨询</text> |
|||
</view> |
|||
|
|||
<view class="btn" @click.stop="confirm(item)"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/user.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 14px; color: #666;">预约自提</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</loading-state> |
|||
<view style="height: 20px;"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
key: '' |
|||
}, |
|||
associativeText: '', |
|||
hotWorld: '输入关键字搜索提货点', // 搜索热词，如果没有输入即回车，则搜索热词，但是不会加入搜索记录 |
|||
focus: true, // 是否自动聚焦 |
|||
dataList: [] |
|||
} |
|||
}, |
|||
created() { |
|||
// 首次请求 |
|||
this.request() |
|||
|
|||
// #ifdef APP-PLUS |
|||
uni.onKeyboardHeightChange((res) => { |
|||
this.keyBoardPopup = res.height !== 0; |
|||
}) |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.page.key = this.associativeText |
|||
this.request() |
|||
}, |
|||
phone(num) { |
|||
uni.makePhoneCall({ |
|||
phoneNumber: num |
|||
}); |
|||
}, |
|||
confirm(item) { |
|||
uni.$emit('address', item) |
|||
uni.navigateBack() |
|||
}, |
|||
request() { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
let _this = this |
|||
_this.$api.address({ |
|||
'name': this.page.key |
|||
}).then((resp) => { |
|||
_this.dataList = resp |
|||
if (resp.length == 0) { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(100) |
|||
}) |
|||
} else { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
} |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
clear(res) { |
|||
this.page.key = '' |
|||
this.request() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss"> |
|||
uni-page-body, |
|||
page { |
|||
background: #f3f4f6; |
|||
} |
|||
|
|||
.btn { |
|||
margin-top: 10px; |
|||
border: 1px solid #FEA561; |
|||
border-radius: 20px; |
|||
display: flex;flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 5px 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.search-body { |
|||
background-color: #FE9039; |
|||
border-bottom-right-radius: 10px; |
|||
border-bottom-left-radius: 10px; |
|||
} |
|||
|
|||
@mixin uni-flex { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
} |
|||
|
|||
$search-bar-height: 52px; |
|||
$word-container_header-height: 72rpx; |
|||
|
|||
.search-container { |
|||
height: $search-bar-height; |
|||
@include uni-flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
background: white; |
|||
|
|||
@at-root { |
|||
#{&}-bar { |
|||
@include uni-flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #FE9039; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,249 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="首页" :showIcon="false" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view style="display: flex;flex-direction: column;align-items: center;"> |
|||
<view class="btn" @click="bind"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/binding.png" style="width: 15px;height: 15px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> |
|||
|
|||
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false"> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px; " |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)"> |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }" |
|||
style="display: flex;flex-direction: row; width: 80%; padding: 16px;margin-left: 9px;margin-right: 9px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row; align-items: center; flex: 1;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: column; flex: 1;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;padding-right: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: column; flex: 1;"> |
|||
<text style="font-size: 13px;color: #333;">卡号: {{item.serialNumber}}</text> |
|||
<text style="font-size: 12px;color: #999;margin-top: 5px;"> {{item.time}}</text> |
|||
</view> |
|||
|
|||
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0; |
|||
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px; width: 100%;justify-content: space-between;"> |
|||
<text style="font-size: 15px;color: #FF7100;text-overflow: -o-ellipsis-lastline;padding-right: 10px; flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 8px; font-size: 12px; color: #FF6000;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view style="display: flex;flex-direction: column;padding-right: 10px;"> |
|||
|
|||
<text style="font-size: 13px;color: #333;"> {{item.name}}</text> |
|||
<text style="font-size: 12px;color: #999;margin-top: 5px;"> {{item.time}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 13px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 6px; font-size: 12px; color: #FF6000;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
</view> --> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0; |
|||
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> --> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</z-paging> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.cardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
dialogInputConfirm(val) { |
|||
// 网络请求 绑定 |
|||
}, |
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_bind' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
|
|||
if (!item.showBtn) { |
|||
// 失效 不正常 |
|||
// 详情2 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail2?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 详情 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
booking(item) { |
|||
|
|||
if (!item.notRese) { |
|||
this.shortToast("该卡商品已全部预约。") |
|||
return |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_booking?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/hmoe_bj.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.showBtn { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.use { |
|||
display: flex; |
|||
flex-direction: row; |
|||
border-top-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
color: #FFF; |
|||
align-items: center; |
|||
background: linear-gradient(89.8deg, rgba(218, 51, 33, 1) -3.76%, rgba(237, 113, 53, 0) 300.05%); |
|||
} |
|||
|
|||
.gray { |
|||
filter: grayscale(100%); |
|||
-webkit-filter: grayscale(100%); |
|||
transition: filter 0.2s; |
|||
} |
|||
|
|||
|
|||
|
|||
.oragin {} |
|||
|
|||
uni-page-body, |
|||
page { |
|||
background: #FFFFFF; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,351 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view style="display: flex;flex-direction: column;margin-top: 25vw; margin-left: 5vw;"> |
|||
<view style="font-size: 17px;color: #fff;height: 8vw;line-height: 8vw;margin-top: 5vw;"> |
|||
{{data.state}} |
|||
</view> |
|||
<view |
|||
style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;box-sizing: border-box;"> |
|||
卡号：{{data.serialNumber}} |
|||
</view> |
|||
<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;"> |
|||
{{data.time}} |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: center; |
|||
background-color: #fff;height: 25vw; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftpack.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
</view> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;">商品明细</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view v-for="(item,index) in data.goodsVos" :key="index" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;background-color: #fff;padding: 10px 15px; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;"> |
|||
<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1;"> |
|||
<text class="text" style="font-weight: 500;">{{item.goods}} |
|||
</text> |
|||
<view style="font-size: 12px;color: #666666;margin-top: 5px;">{{item.remarks}}</view> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 5px;"> |
|||
<text |
|||
style="font-size: 12px;color: #666666;margin-right: 10px;">总数：{{item.num}}{{item.unitName}} |
|||
</text> |
|||
<view style="font-size: 12px;color: #666666;">可预约：{{item.lnum}}{{item.unitName}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;">预约记录</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view v-for="(item,index) in data.orderCardVoList" :key="index" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: column;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">提货时间：{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/location.png" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">提货地点：{{item.store}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/user2.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="margin-left: 5px;font-size: 12px; color: #999;">提 货 人：{{item.userName}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/phone2.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">联系电话：{{item.userPhone}}</text> |
|||
</view> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="height: 50px;"></view> |
|||
|
|||
|
|||
|
|||
</loading-state> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: { |
|||
time: "", |
|||
name: "", |
|||
pname: "", |
|||
state: "", |
|||
notRese:false, |
|||
showBtn: false, |
|||
showRecord: false, |
|||
goodsVos: [], |
|||
value: "", |
|||
userName: "", |
|||
userPhone: "", |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
uni.$on("order2", (e) => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order2'); |
|||
}, |
|||
methods: { |
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.cardDetail(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/abnormal.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.text { |
|||
white-space: normal; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
uni-page-body, |
|||
page { |
|||
background: #F1F2F3; |
|||
} |
|||
|
|||
.btn { |
|||
border: 1px solid; |
|||
padding-left: 30rpx; |
|||
padding-right: 30rpx; |
|||
padding-top: 12rpx; |
|||
padding-bottom: 12rpx; |
|||
border-radius: 50rpx; |
|||
height: 15px; |
|||
margin-left: 25rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
/* 弹窗样式 */ |
|||
.model { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #000; |
|||
z-index: 999; |
|||
opacity: 0.5; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.modalDlg { |
|||
/* 设置超出滚动 */ |
|||
overflow: auto; |
|||
width: 90%; |
|||
position: fixed; |
|||
top: 50vw; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 9999; |
|||
margin: 0 auto; |
|||
padding: 35rpx; |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
} |
|||
|
|||
.windowRow { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-bottom: 15rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.userTitle { |
|||
font-size: 42rpx; |
|||
} |
|||
|
|||
.back { |
|||
text-align: center; |
|||
color: #f0a500; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.wishName { |
|||
width: 100%; |
|||
justify-content: center; |
|||
flex-direction: row; |
|||
display: flex; |
|||
margin: 40rpx 0rpx; |
|||
} |
|||
|
|||
.wish_put { |
|||
width: 100%; |
|||
border: #ededef 1rpx solid; |
|||
background-color: #f6f7fb; |
|||
border-radius: 12rpx; |
|||
padding: 30rpx 20rpx; |
|||
margin: 20rpx 0rpx; |
|||
} |
|||
|
|||
.holder_cls { |
|||
color: #909399; |
|||
} |
|||
|
|||
.wishbnt { |
|||
background-color: #fec600; |
|||
text-align: center; |
|||
border-radius: 50rpx; |
|||
padding: 25rpx; |
|||
color: white; |
|||
} |
|||
|
|||
/*弹窗样式结束*/ |
|||
|
|||
/* 下面的姓名样式，不要也没什么影响 */ |
|||
.jiantou { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.fenge { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.xian { |
|||
border-bottom: #e5e5e5 1rpx solid; |
|||
} |
|||
|
|||
.yellow { |
|||
color: #f0a500; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.box { |
|||
background-color: white; |
|||
padding: 0rpx 25rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.row { |
|||
height: 120rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.you { |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.zhushi { |
|||
font-size: 28rpx; |
|||
color: #808080; |
|||
} |
|||
|
|||
/* 下面的姓名样式结束 */ |
|||
</style> |
|||
Loading…
Reference in new issue