65 changed files with 8981 additions and 1758 deletions
@ -0,0 +1,3 @@ |
|||
import Vue from 'vue' |
|||
const bus = new Vue() |
|||
export default bus |
|||
@ -0,0 +1,205 @@ |
|||
<template> |
|||
|
|||
<!-- 扫码进入 携带参数 --> |
|||
|
|||
<view style="display: flex;flex-direction: column;background-color: #fff;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="绑定企业卡" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/bind_bj3.png" mode="scaleToFill" |
|||
style="width: 100%;height: 70vw"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view style="display: flex;flex-direction: column;margin-top: -10vw;box-sizing: border-box;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;border-radius: 20rpx;background: #FFFFFF;z-index: 1;align-items: center;box-sizing: border-box;"> |
|||
<view style="margin: 15px;">绑定云菜窖卡</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;"> |
|||
<input maxlength="20" placeholder="请输入/扫码 提货编码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;margin-right: 10px;padding-left: 10px;" |
|||
type="number" :value="page.code" @input="onKeyInput1" /> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;" @click="scan" /> |
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="margin: 30px;background-color: #fd3655;width: calc(100% - 60px);border-radius: 100rpx;height: 80rpx;display: flex;flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" |
|||
@click="save"> |
|||
绑定</view> --> |
|||
|
|||
<view style="display: flex;flex-direction: column;padding:20px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #5C9EFD; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #89DAFB; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text style="margin-left: 8px;font-size: 18px;color: #333;">绑定企业卡</text> |
|||
</view> |
|||
|
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货编码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px;box-sizing: border-box; |
|||
width: calc(100vw -40px);align-items: center; padding:10px 0px;margin-top: 5px;"> |
|||
<input maxlength="20" placeholder="请输入/扫码" |
|||
style="font-size: 30rpx;flex: 1;margin-right: 20px;padding-left: 10px;" type="number" |
|||
:value="page.code" @input="onKeyInput1" /> |
|||
<view style="width: 1px;height: 20px;background: #ccc; margin-right: 10px;"></view> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;margin-right: 10px;" |
|||
@click="scan" /> |
|||
</view> |
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货密码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px; padding:10px 0px; |
|||
box-sizing: border-box;width: calc(100vw - 40px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" style="font-size: 30rpx;flex: 1;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
|
|||
<view style="background: -webkit-linear-gradient(left,#89DAFB,#5C9EFD); position: absolute; bottom: 30px; |
|||
width: 90%;border-radius: 100rpx;height: 80rpx;display: flex; |
|||
flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" @click="save"> |
|||
绑定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
code: '', |
|||
codeKey: '', |
|||
customerSid: '' |
|||
} |
|||
} |
|||
}, |
|||
onUnload() { |
|||
let pages = getCurrentPages().length - 1; |
|||
wx.navigateBack({ |
|||
delta: pages |
|||
}) |
|||
}, |
|||
onLoad(options) { |
|||
let _this = this; |
|||
wx.login({ |
|||
success: function(res) { |
|||
uni.request({ |
|||
// 组装请求地址 |
|||
url: getApp().globalData.wxSilentLoginURL + "?wxCode=" + res.code, |
|||
method: "GET", |
|||
header: { |
|||
'content-type': "application/x-www-form-urlencoded" |
|||
}, |
|||
data: { |
|||
"wxCode": res.code |
|||
}, |
|||
success: res => { |
|||
if (res.statusCode == 200) { |
|||
if (!res.data.success) { |
|||
if (res.data.code == "110") { |
|||
// 需要绑定手机号 |
|||
uni.reLaunch({ |
|||
url: '/pages/index/BindPhone?openid=' + |
|||
res.data.data.wxMpOpenid |
|||
}) |
|||
} else { |
|||
// _this.status = 'more' |
|||
} |
|||
} else { |
|||
// 成功后跳转主页 |
|||
getApp().globalData.sid = res.data.data.sid |
|||
getApp().globalData.token = res.data.data.token |
|||
uni.setStorageSync("satoken",res.data.data.token) |
|||
console.log("人员sid", res.data.data.sid); |
|||
console.log("token", res.data.data.token); |
|||
_this.page.customerSid = getApp().globalData.sid |
|||
} |
|||
} else { |
|||
// _this.status = 'more' |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
// _this.status = 'more' |
|||
} |
|||
}); |
|||
}, |
|||
fail: function(res) { |
|||
// _this.status = 'more' |
|||
} |
|||
}); |
|||
|
|||
if (options) { |
|||
console.log("options", options) |
|||
|
|||
const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容 |
|||
console.log("二维码原始链接内容", q) |
|||
|
|||
var code = q.split('=')[1] |
|||
|
|||
// var code = this.getQueryString(q, 'code');// code是你二维码链接里面的参数名 |
|||
|
|||
console.log("提货卡编码", code) |
|||
this.page.code = code |
|||
} |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
onKeyInput1: function(event) { |
|||
this.page.code = event.target.value |
|||
}, |
|||
onKeyInput2: function(event) { |
|||
this.page.codeKey = event.target.value |
|||
}, |
|||
scan() { |
|||
// 只允许通过相机扫码 |
|||
let _this = this |
|||
uni.scanCode({ |
|||
onlyFromCamera: true, |
|||
success: function(res) { |
|||
_this.page.code = res.result.substring(res.result.length - 20, res.result.length) |
|||
} |
|||
}); |
|||
}, |
|||
save() { |
|||
if (this.stringIsEmpty(this.page.code) || this.page.code.length != 20) { |
|||
this.shortToast('请输入或扫描20位提货编码') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.page.codeKey) || this.page.codeKey.length != 6) { |
|||
this.shortToast('请输入6位提货密码') |
|||
return |
|||
} |
|||
let _this = this |
|||
_this.$api.empcardBind(this.page).then((resp) => { |
|||
bus.$emit('order3', "监听回调"); |
|||
uni.switchTab({ |
|||
url: '/pages/home/corporateCard' |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<view style="display: flex;flex-direction: column;background-color: #fff;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="绑定云菜窖卡" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/bind_bj2.png" mode="scaleToFill" |
|||
style="width: 100%;height: 70vw"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view style="display: flex;flex-direction: column;margin-top: -10vw;box-sizing: border-box;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;border-radius: 20rpx;background: #FFFFFF;z-index: 1;align-items: center;box-sizing: border-box;"> |
|||
<view style="margin: 15px;">绑定云菜窖卡</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;"> |
|||
<input maxlength="20" placeholder="请输入/扫码 提货编码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;margin-right: 10px;padding-left: 10px;" |
|||
type="number" :value="page.code" @input="onKeyInput1" /> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;" @click="scan" /> |
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="margin: 30px;background-color: #fd3655;width: calc(100% - 60px);border-radius: 100rpx;height: 80rpx;display: flex;flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" |
|||
@click="save"> |
|||
绑定</view> --> |
|||
|
|||
<view style="display: flex;flex-direction: column;padding:20px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #FF3F22; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF8585; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text style="margin-left: 8px;font-size: 18px;color: #333;">绑定福礼卡</text> |
|||
</view> |
|||
|
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货编码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px;box-sizing: border-box; |
|||
width: calc(100vw -40px);align-items: center; padding:10px 0px;margin-top: 5px;"> |
|||
<input maxlength="20" placeholder="请输入/扫码" |
|||
style="font-size: 30rpx;flex: 1;margin-right: 20px;padding-left: 10px;" type="number" |
|||
:value="page.code" @input="onKeyInput1" /> |
|||
<view style="width: 1px;height: 20px;background: #ccc; margin-right: 10px;"></view> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;margin-right: 10px;" |
|||
@click="scan" /> |
|||
</view> |
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货密码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px; padding:10px 0px; |
|||
box-sizing: border-box;width: calc(100vw - 40px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" style="font-size: 30rpx;flex: 1;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
|
|||
<view style="background: -webkit-linear-gradient(left,#FF8585,#FF3F22); position: absolute; bottom: 30px; |
|||
width: 90%;border-radius: 100rpx;height: 80rpx;display: flex; |
|||
flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" @click="save"> |
|||
绑定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
code: '', |
|||
codeKey: '', |
|||
customerSid: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
this.page.code = options.code |
|||
this.page.codeKey = options.codeKey |
|||
|
|||
|
|||
this.page.customerSid = getApp().globalData.sid |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
methods: { |
|||
onKeyInput1(event) { |
|||
this.page.code = event.target.value |
|||
}, |
|||
onKeyInput2(event) { |
|||
this.page.codeKey = event.target.value |
|||
}, |
|||
scan() { |
|||
// 只允许通过相机扫码 |
|||
let _this = this |
|||
uni.scanCode({ |
|||
onlyFromCamera: true, |
|||
success(res) { |
|||
_this.page.code = res.result.substring(res.result.length - 20, res.result.length) |
|||
} |
|||
}); |
|||
}, |
|||
save() { |
|||
if (this.stringIsEmpty(this.page.code) || this.page.code.length != 20) { |
|||
this.shortToast('请输入或扫描20位提货编码') |
|||
return |
|||
} |
|||
|
|||
if (this.stringIsEmpty(this.page.codeKey) || this.page.codeKey.length != 6) { |
|||
this.shortToast('请输入6位提货密码') |
|||
return |
|||
} |
|||
let _this = this |
|||
_this.$api.cardBind(this.page).then((resp) => { |
|||
bus.$emit('order2', "监听回调"); |
|||
const pages = getCurrentPages() |
|||
// 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回 |
|||
if (pages.length > 1) { |
|||
uni.navigateBack(1) |
|||
return; |
|||
} else { |
|||
uni.switchTab({ |
|||
url: '/pages/home/giftCard' |
|||
}) |
|||
} |
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
height: 70vw; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
|
|||
<!-- 扫码进入 携带参数 --> |
|||
|
|||
<view style="display: flex;flex-direction: column;background-color: #fff;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="绑定云菜窖卡" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/bind_bj2.png" mode="scaleToFill" |
|||
style="width: 100%;height: 70vw"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view style="display: flex;flex-direction: column;margin-top: -10vw;box-sizing: border-box;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;border-radius: 20rpx;background: #FFFFFF;z-index: 1;align-items: center;box-sizing: border-box;"> |
|||
<view style="margin: 15px;">绑定云菜窖卡</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;"> |
|||
<input maxlength="20" placeholder="请输入/扫码 提货编码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;margin-right: 10px;padding-left: 10px;" |
|||
type="number" :value="page.code" @input="onKeyInput1" /> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;" @click="scan" /> |
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="margin: 30px;background-color: #fd3655;width: calc(100% - 60px);border-radius: 100rpx;height: 80rpx;display: flex;flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" |
|||
@click="save"> |
|||
绑定</view> --> |
|||
|
|||
<view style="display: flex;flex-direction: column;padding:20px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #FF3F22; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF8585; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text style="margin-left: 8px;font-size: 18px;color: #333;">绑定福礼卡</text> |
|||
</view> |
|||
|
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货编码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px;box-sizing: border-box; |
|||
width: calc(100vw -40px);align-items: center; padding:10px 0px;margin-top: 5px;"> |
|||
<input maxlength="20" placeholder="请输入/扫码" |
|||
style="font-size: 30rpx;flex: 1;margin-right: 20px;padding-left: 10px;" type="number" |
|||
:value="page.code" @input="onKeyInput1" /> |
|||
<view style="width: 1px;height: 20px;background: #ccc; margin-right: 10px;"></view> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;margin-right: 10px;" |
|||
@click="scan" /> |
|||
</view> |
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货密码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px; padding:10px 0px; |
|||
box-sizing: border-box;width: calc(100vw - 40px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" style="font-size: 30rpx;flex: 1;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
|
|||
<view style="background: -webkit-linear-gradient(left,#FF8585,#FF3F22); position: absolute; bottom: 30px; |
|||
width: 90%;border-radius: 100rpx;height: 80rpx;display: flex; |
|||
flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" @click="save"> |
|||
绑定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
code: '', |
|||
codeKey: '', |
|||
customerSid: '' |
|||
} |
|||
} |
|||
}, |
|||
onUnload() { |
|||
let pages = getCurrentPages().length - 1; |
|||
wx.navigateBack({ |
|||
delta: pages |
|||
}) |
|||
}, |
|||
onLoad(options) { |
|||
let _this = this; |
|||
wx.login({ |
|||
success: function(res) { |
|||
uni.request({ |
|||
// 组装请求地址 |
|||
url: getApp().globalData.wxSilentLoginURL + "?wxCode=" + res.code, |
|||
method: "GET", |
|||
header: { |
|||
'content-type': "application/x-www-form-urlencoded" |
|||
}, |
|||
data: { |
|||
"wxCode": res.code |
|||
}, |
|||
success: res => { |
|||
if (res.statusCode == 200) { |
|||
if (!res.data.success) { |
|||
if (res.data.code == "110") { |
|||
// 需要绑定手机号 |
|||
uni.reLaunch({ |
|||
url: '/pages/index/BindPhone?openid=' + |
|||
res.data.data.wxMpOpenid |
|||
}) |
|||
} else { |
|||
// _this.status = 'more' |
|||
} |
|||
} else { |
|||
// 成功后跳转主页 |
|||
getApp().globalData.sid = res.data.data.sid |
|||
_this.page.customerSid = getApp().globalData.sid |
|||
console.log("用户sid", getApp().globalData.sid) |
|||
} |
|||
} else { |
|||
// _this.status = 'more' |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
// _this.status = 'more' |
|||
} |
|||
}); |
|||
}, |
|||
fail: function(res) { |
|||
// _this.status = 'more' |
|||
} |
|||
}); |
|||
|
|||
if (options) { |
|||
console.log("options", options) |
|||
|
|||
const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容 |
|||
console.log("二维码原始链接内容", q) |
|||
|
|||
var code = q.split('=')[1] |
|||
|
|||
// var code = this.getQueryString(q, 'code');// code是你二维码链接里面的参数名 |
|||
|
|||
console.log("提货卡编码", code) |
|||
this.page.code = code |
|||
} |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
onKeyInput1: function(event) { |
|||
this.page.code = event.target.value |
|||
}, |
|||
onKeyInput2: function(event) { |
|||
this.page.codeKey = event.target.value |
|||
}, |
|||
scan() { |
|||
// 只允许通过相机扫码 |
|||
let _this = this |
|||
uni.scanCode({ |
|||
onlyFromCamera: true, |
|||
success: function(res) { |
|||
_this.page.code = res.result.substring(res.result.length - 20, res.result.length) |
|||
} |
|||
}); |
|||
}, |
|||
save() { |
|||
if (this.stringIsEmpty(this.page.code) || this.page.code.length != 20) { |
|||
this.shortToast('请输入或扫描20位提货编码') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.page.codeKey) || this.page.codeKey.length != 6) { |
|||
this.shortToast('请输入6位提货密码') |
|||
return |
|||
} |
|||
let _this = this |
|||
_this.$api.cardBind(this.page).then((resp) => { |
|||
bus.$emit('order2', "监听回调"); |
|||
uni.switchTab({ |
|||
url: '/pages/home/giftCard' |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<view style="display: flex;flex-direction: column;background-color: #fff;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="绑定云菜窖卡" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/bind_bj.png" mode="scaleToFill" |
|||
style="width: 100%;height: 70vw"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view style="display: flex;flex-direction: column;margin-top: -10vw;box-sizing: border-box;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;border-radius: 20rpx;background: #FFFFFF;z-index: 1;align-items: center;box-sizing: border-box;"> |
|||
<view style="margin: 15px;">绑定云菜窖卡</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;"> |
|||
<input maxlength="20" placeholder="请输入/扫码 提货编码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;margin-right: 10px;padding-left: 10px;" |
|||
type="number" :value="page.code" @input="onKeyInput1" /> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;" @click="scan" /> |
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="margin: 30px;background-color: #fd3655;width: calc(100% - 60px);border-radius: 100rpx;height: 80rpx;display: flex;flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" |
|||
@click="save"> |
|||
绑定</view> --> |
|||
|
|||
<view style="display: flex;flex-direction: column;padding:20px;"> |
|||
|
|||
<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: 18px;color: #333;">绑定云菜窖卡</text> |
|||
</view> |
|||
|
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货编码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px;box-sizing: border-box; |
|||
width: calc(100vw -40px);align-items: center; padding:10px 0px;margin-top: 5px;"> |
|||
<input maxlength="20" placeholder="请输入/扫码" |
|||
style="font-size: 30rpx;flex: 1;margin-right: 20px;padding-left: 10px;" type="number" |
|||
:value="page.code" @input="onKeyInput1" /> |
|||
<view style="width: 1px;height: 20px;background: #ccc; margin-right: 10px;"></view> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;margin-right: 10px;" |
|||
@click="scan" /> |
|||
</view> |
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货密码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px; padding:10px 0px; |
|||
box-sizing: border-box;width: calc(100vw - 40px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" style="font-size: 30rpx;flex: 1;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
|
|||
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); position: absolute; bottom: 30px; |
|||
width: 90%;border-radius: 100rpx;height: 80rpx;display: flex; |
|||
flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" @click="save"> |
|||
绑定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
code: '', |
|||
codeKey: '', |
|||
customerSid: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
this.page.code = options.code |
|||
this.page.codeKey = options.codeKey |
|||
|
|||
|
|||
this.page.customerSid = getApp().globalData.sid |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
methods: { |
|||
onKeyInput1(event) { |
|||
this.page.code = event.target.value |
|||
}, |
|||
onKeyInput2(event) { |
|||
this.page.codeKey = event.target.value |
|||
}, |
|||
scan() { |
|||
// 只允许通过相机扫码 |
|||
let _this = this |
|||
uni.scanCode({ |
|||
onlyFromCamera: true, |
|||
success(res) { |
|||
_this.page.code = res.result.substring(res.result.length - 20, res.result.length) |
|||
} |
|||
}); |
|||
}, |
|||
save() { |
|||
if (this.stringIsEmpty(this.page.code) || this.page.code.length != 20) { |
|||
this.shortToast('请输入或扫描20位提货编码') |
|||
return |
|||
} |
|||
|
|||
if (this.stringIsEmpty(this.page.codeKey) || this.page.codeKey.length != 6) { |
|||
this.shortToast('请输入6位提货密码') |
|||
return |
|||
} |
|||
let _this = this |
|||
_this.$api.pickUpCardBind(this.page).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
// setTimeout(() => { |
|||
// uni.$emit('order', "监听回调") |
|||
// }, 500) |
|||
const pages = getCurrentPages() |
|||
// 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回 |
|||
if (pages.length > 1) { |
|||
uni.navigateBack(1) |
|||
return; |
|||
} else { |
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
} |
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
height: 70vw; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
|
|||
<!-- 扫码进入 携带参数 --> |
|||
|
|||
<view style="display: flex;flex-direction: column;background-color: #fff;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="绑定云菜窖卡" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/bind_bj.png" mode="scaleToFill" |
|||
style="width: 100%;height: 70vw"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view style="display: flex;flex-direction: column;margin-top: -10vw;box-sizing: border-box;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;border-radius: 20rpx;background: #FFFFFF;z-index: 1;align-items: center;box-sizing: border-box;"> |
|||
<view style="margin: 15px;">绑定云菜窖卡</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;"> |
|||
<input maxlength="20" placeholder="请输入/扫码 提货编码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;margin-right: 10px;padding-left: 10px;" |
|||
type="number" :value="page.code" @input="onKeyInput1" /> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;" @click="scan" /> |
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="margin: 30px;background-color: #fd3655;width: calc(100% - 60px);border-radius: 100rpx;height: 80rpx;display: flex;flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" |
|||
@click="save"> |
|||
绑定</view> --> |
|||
|
|||
<view style="display: flex;flex-direction: column;padding:20px;"> |
|||
|
|||
<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: 18px;color: #333;">绑定云菜窖卡</text> |
|||
</view> |
|||
|
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货编码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px;box-sizing: border-box; |
|||
width: calc(100vw -40px);align-items: center; padding:10px 0px;margin-top: 5px;"> |
|||
<input maxlength="20" placeholder="请输入/扫码" |
|||
style="font-size: 30rpx;flex: 1;margin-right: 20px;padding-left: 10px;" type="number" |
|||
:value="page.code" @input="onKeyInput1" /> |
|||
<view style="width: 1px;height: 20px;background: #ccc; margin-right: 10px;"></view> |
|||
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;margin-right: 10px;" |
|||
@click="scan" /> |
|||
</view> |
|||
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货密码</text> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
background: #F8F8F8;border-radius: 5px; padding:10px 0px; |
|||
box-sizing: border-box;width: calc(100vw - 40px);align-items: center;margin-top: 10px;"> |
|||
<input maxlength="6" placeholder="请输入提货密码" style="font-size: 30rpx;flex: 1;padding-left: 10px;" |
|||
type="number" :value="page.codeKey" @input="onKeyInput2" /> |
|||
</view> |
|||
|
|||
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); position: absolute; bottom: 30px; |
|||
width: 90%;border-radius: 100rpx;height: 80rpx;display: flex; |
|||
flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" @click="save"> |
|||
绑定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
code: '', |
|||
codeKey: '', |
|||
customerSid: '' |
|||
} |
|||
} |
|||
}, |
|||
onUnload() { |
|||
let pages = getCurrentPages().length - 1; |
|||
wx.navigateBack({ |
|||
delta: pages |
|||
}) |
|||
}, |
|||
onLoad(options) { |
|||
let _this = this; |
|||
wx.login({ |
|||
success: function(res) { |
|||
uni.request({ |
|||
// 组装请求地址 |
|||
url: getApp().globalData.wxSilentLoginURL + "?wxCode=" + res.code, |
|||
method: "GET", |
|||
header: { |
|||
'content-type': "application/x-www-form-urlencoded" |
|||
}, |
|||
data: { |
|||
"wxCode": res.code |
|||
}, |
|||
success: res => { |
|||
if (res.statusCode == 200) { |
|||
if (!res.data.success) { |
|||
if (res.data.code == "110") { |
|||
// 需要绑定手机号 |
|||
uni.reLaunch({ |
|||
url: '/pages/index/BindPhone?openid=' + |
|||
res.data.data.wxMpOpenid |
|||
}) |
|||
} else { |
|||
// _this.status = 'more' |
|||
} |
|||
} else { |
|||
// 成功后跳转主页 |
|||
getApp().globalData.sid = res.data.data.sid |
|||
_this.page.customerSid = getApp().globalData.sid |
|||
console.log("用户sid", getApp().globalData.sid) |
|||
} |
|||
} else { |
|||
// _this.status = 'more' |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
// _this.status = 'more' |
|||
} |
|||
}); |
|||
}, |
|||
fail: function(res) { |
|||
// _this.status = 'more' |
|||
} |
|||
}); |
|||
|
|||
if (options) { |
|||
console.log("options", options) |
|||
|
|||
const q = decodeURIComponent(options.q) // 获取到二维码原始链接内容 |
|||
console.log("二维码原始链接内容", q) |
|||
|
|||
var code = q.split('=')[1] |
|||
|
|||
// var code = this.getQueryString(q, 'code');// code是你二维码链接里面的参数名 |
|||
|
|||
console.log("提货卡编码", code) |
|||
this.page.code = code |
|||
} |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
onKeyInput1: function(event) { |
|||
this.page.code = event.target.value |
|||
}, |
|||
onKeyInput2: function(event) { |
|||
this.page.codeKey = event.target.value |
|||
}, |
|||
scan() { |
|||
// 只允许通过相机扫码 |
|||
let _this = this |
|||
uni.scanCode({ |
|||
onlyFromCamera: true, |
|||
success: function(res) { |
|||
_this.page.code = res.result.substring(res.result.length - 20, res.result.length) |
|||
} |
|||
}); |
|||
}, |
|||
save() { |
|||
if (this.stringIsEmpty(this.page.code) || this.page.code.length != 20) { |
|||
this.shortToast('请输入或扫描20位提货编码') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.page.codeKey) || this.page.codeKey.length != 6) { |
|||
this.shortToast('请输入6位提货密码') |
|||
return |
|||
} |
|||
let _this = this |
|||
_this.$api.pickUpCardBind(this.page).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,401 +0,0 @@ |
|||
<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;"> |
|||
|
|||
|
|||
<view |
|||
style=" display: flex;flex-direction: row;align-items: center;justify-content: center;padding-top: 5vw;"> |
|||
|
|||
<view style="margin-right: 8vw;" :class="(currentTab!=0)?'tab-bj2':'tab-bj1'" @click="tab(0)">提货卡 |
|||
</view> |
|||
|
|||
<view style="margin-left: 8vw;" :class="(currentTab!=0)?'tab-bj1':'tab-bj2'" @click="tab(1)"> |
|||
福礼卡</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 页面内容 --> |
|||
<swiper class="tab-box" :current="currentTab" duration="300" bindchange="switchTab" @change="tabChange"> |
|||
|
|||
<swiper-item class="tab-content"> |
|||
<z-paging ref="paging" v-model="data" @query="queryList" :refresher-enabled="true"> |
|||
|
|||
<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 }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<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> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text lass="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<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;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
</swiper-item> |
|||
|
|||
<swiper-item class="tab-content"> |
|||
|
|||
<z-paging ref="paging2" v-model="data2" @query="queryList2" :refresher-enabled="true"> |
|||
|
|||
<view v-for="(item,index) in data2" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;" |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail2(item)"> |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/welfare_Card.png" |
|||
mode="aspectFill" v-show="item.showBtn" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/welfare_Card2.png" |
|||
mode="aspectFill" v-show="!item.showBtn" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text class="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<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;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;">福礼卡</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
data2: [], |
|||
currentTab: 0, |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
uni.$on("order3", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging2.reload(true); |
|||
}) |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
uni.$off('order3'); |
|||
}, |
|||
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); |
|||
}) |
|||
}, |
|||
|
|||
// 分页的请求 |
|||
queryList2(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.gifcardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging2.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging2.complete(false); |
|||
}) |
|||
}, |
|||
|
|||
dialogInputConfirm(val) { |
|||
// 网络请求 绑定 |
|||
}, |
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_bind' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
detail2(item) { |
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/welfare_card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/welfare_card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
}, |
|||
booking(item) { |
|||
|
|||
if (!item.notRese) { |
|||
this.shortToast("该卡商品已全部预约。") |
|||
return |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_booking?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
tab(index) { |
|||
this.currentTab = index |
|||
|
|||
}, |
|||
tabChange(event) { |
|||
console.log("eeee", event.detail.current) |
|||
this.currentTab = event.detail.current |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.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%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.tab-box { |
|||
box-sizing: border-box; |
|||
height: 100vw; |
|||
} |
|||
|
|||
.tab-content { |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.tab-bj1 { |
|||
background: #FFF6EF; |
|||
color: #FF7200; |
|||
font-size: 16px; |
|||
border-radius: 25px; |
|||
border: 1px solid #FF7200; |
|||
padding: 5px 30px; |
|||
} |
|||
|
|||
.tab-bj2 { |
|||
background: #E7E7E7; |
|||
color: #9D9D9D; |
|||
font-size: 16px; |
|||
border-radius: 25px; |
|||
padding: 5px 30px; |
|||
border: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,198 @@ |
|||
1<template> |
|||
|
|||
<view style="display: flex;flex-direction: column; height: 100%;box-sizing: border-box ;" id="page"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view |
|||
style="margin-top: -15vh; background-color: #fff;height: 20vh;border-top-left-radius: 25px;border-top-right-radius: 25px;"> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row; |
|||
margin:20px 20px 0px 20px;padding-bottom: 20px; border-bottom: 2px #EFEFEF solid; justify-content: space-between;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #FF9900; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FFCC7F; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text |
|||
style="margin-left: 8px;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;">{{page.name}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-right: 10px;"> |
|||
<view style="color: #888;font-size: 12px;">我要定 </view> |
|||
<input type="number" @input="numbers" v-model="page.number" maxlength="3" |
|||
style="font-size: 12px; border: 1px #AEAEAE solid;border-radius: 5px;text-align: center; width: 25px;margin-left: 5px;margin-right: 5px;padding-left: 3px;padding-right: 3px;" /> |
|||
<view style="color: #888;font-size: 12px;">个云窖菜</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view v-for="(item,index) in data.goods" :key="index" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: column;margin-top: 14px; " > |
|||
|
|||
<view :style="{'border-bottom':(index===data.goods.length-1 ? 'none':'1px #EFEFEF solid')}" style="display: flex;flex-direction: column; |
|||
margin-left: 20px;margin-right: 20px;padding-bottom: 10px;"> |
|||
|
|||
<view |
|||
style=" display: flex;flex-direction: row;align-items: center; margin-right: 10px;margin-top: 5px; margin-left: 10px;"> |
|||
|
|||
<image :src='item.iconUrl' style="width: 60px;height: 70px;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-left: 20px;width: 100%;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<text |
|||
style="flex: 1;margin-right: 10px;color: #000;font-size: 16px;">{{item.name}}</text> |
|||
<text style="color: #888;font-size: 14px;">{{item.goodsNumber}}份</text> |
|||
</view> |
|||
|
|||
|
|||
<text style="color: #AEAEAE;font-size: 14px;margin-top: 5px;">{{item.remark}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;"> |
|||
<text style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 14px; |
|||
margin-right: 20px;padding: 0px 8px;">{{item.jprice}}元/{{item.specificationUnit}}</text> |
|||
<text |
|||
style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 14px;;padding: 0px 8px;">{{item.weight}}斤/{{item.unitName}}</text> |
|||
</view> |
|||
|
|||
|
|||
<text style="color: #FF5006;font-size: 14px;">￥{{item.totalValue}}</text> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
<view v-show="data.goods.length>0" style="height: 100px;background: #f1f2f3; "></view> |
|||
|
|||
<view style="background-color: #fff; padding: 10px 20px;position: fixed;bottom: 0;overflow:hidden; |
|||
display: flex;flex-direction: row; width: 100%;flex-shrink: 1;"> |
|||
|
|||
<view style="flex: 1; display: flex;flex-direction: row;align-items: center; margin-right: 30px; |
|||
justify-content: space-between;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<text style="color: #888;font-size: 14px;">合计：</text> |
|||
<text style="color: #F0752F;font-size: 18px;">{{page.price}}元</text> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<text |
|||
style="background: #EE752F; text-align: center; color: #fff; border-radius: 5px;padding: 5px 20px; margin-right: 40px; ">结算</text> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</loading-state> |
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '', |
|||
name: "", |
|||
startHeight: 0, |
|||
endHeight: 0, |
|||
number: "1", |
|||
price: "" |
|||
}, |
|||
data: { |
|||
goods: [] |
|||
} |
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.page.name = options.name |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
|
|||
this.request() |
|||
|
|||
}, |
|||
methods: { |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
request() { |
|||
let _this = this |
|||
// _this.$nextTick(() => { |
|||
// _this.$refs.pageView.setLoadState(2) |
|||
// }) |
|||
// this.getPrice() |
|||
|
|||
|
|||
_this.$api.getGiftBagBySid(this.page.sid).then((resp) => { |
|||
|
|||
_this.data = resp |
|||
this.getPrice() |
|||
|
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
numbers(event) { |
|||
this.page.number = event.target.value |
|||
this.getPrice() |
|||
}, |
|||
getPrice() { |
|||
|
|||
if (this.data.price && this.page.number) |
|||
|
|||
this.page.price = Number(this.data.price * this.page.number).toFixed(2) |
|||
else |
|||
this.page.price = "0.00" |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 95vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,227 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column; height: 100%;box-sizing: border-box ;" id="page"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view |
|||
style="margin-top: -15vh; background-color: #fff;height: 20vh;border-top-left-radius: 25px;border-top-right-radius: 25px;"> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: column; |
|||
margin:20px 20px 0px 20px;padding-bottom: 20px; border-bottom: 2px #EFEFEF solid;"> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center; justify-content: space-between;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #FF9900; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FFCC7F; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text |
|||
style="margin-left: 8px;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;">自选云菜窖</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-right: 10px;"> |
|||
<view style="color: #888;font-size: 12px;">我要定 </view> |
|||
<input type="number" @input="numbers" v-model="page.number" maxlength="3" |
|||
style="font-size: 12px; border: 1px #AEAEAE solid;border-radius: 5px;text-align: center; width: 25px;margin-left: 5px;margin-right: 5px;padding-left: 3px;padding-right: 3px;" /> |
|||
<view style="color: #888;font-size: 12px;">个云窖菜</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="color: #888;font-size: 12px;">您已经定制了</view> |
|||
<view style="color: #FF5006;font-size: 18px;">{{page.weight}}斤</view> |
|||
<view style="color: #888;font-size: 12px;">，满200斤可定制云菜窖</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: column;margin-top: 14px; "> |
|||
|
|||
<view :style="{'border-bottom':(index===data.length-1 ? 'none':'1px #EFEFEF solid')}" style="display: flex;flex-direction: column; |
|||
margin-left: 20px;margin-right: 20px;padding-bottom: 10px;"> |
|||
|
|||
<view |
|||
style=" display: flex;flex-direction: row;align-items: center; margin-right: 10px;margin-top: 5px; margin-left: 10px;"> |
|||
|
|||
<image :src='item.iconUrl' style="width: 60px;height: 70px;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-left: 20px;width: 100%;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<text |
|||
style="flex: 1;margin-right: 10px;color: #000;font-size: 16px;">{{item.name}}</text> |
|||
<uni-number-box ref="box" :showTextView="true" background="#fff" |
|||
v-model="item.goodsNumber" @change="numberChange($event,item)"></uni-number-box> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<text style="color: #AEAEAE;font-size: 14px;margin-top: 5px;">{{item.remark}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;"> |
|||
<text style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 14px; |
|||
margin-right: 20px;padding: 0px 8px;">{{item.jprice}}元/{{item.specificationUnit}}</text> |
|||
<text |
|||
style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 14px;;padding: 0px 8px;">{{item.weight}}斤/{{item.unitName}}</text> |
|||
</view> |
|||
|
|||
|
|||
<text style="color: #FF5006;font-size: 14px;">￥{{item.price}}</text> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
<view v-show="data.length>0" style="height: 100px;background: #f1f2f3; "></view> |
|||
|
|||
<view style="background-color: #fff; padding: 10px 20px;position: fixed;bottom: 0;overflow:hidden; |
|||
display: flex;flex-direction: row; width: 100%;flex-shrink: 1;"> |
|||
|
|||
<view style="flex: 1; display: flex;flex-direction: row;align-items: center; margin-right: 30px; |
|||
justify-content: space-between;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<text style="color: #888;font-size: 14px;">合计：</text> |
|||
<text style="color: #F0752F;font-size: 18px;">{{page.price}}元</text> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<text |
|||
style="background: #EE752F; text-align: center; color: #fff; border-radius: 5px;padding: 5px 20px; margin-right: 40px; ">结算</text> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</loading-state> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '', |
|||
name: "", |
|||
price: "", |
|||
startHeight: 0, |
|||
endHeight: 0, |
|||
number: "1", |
|||
weight: "--", |
|||
}, |
|||
data: [] |
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
|
|||
this.request() |
|||
|
|||
}, |
|||
methods: { |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
numberChange(event, item) { |
|||
console.log("event", event) |
|||
console.log("item", item) |
|||
this.getallPrice() |
|||
this.getweight() |
|||
this.getPrice(item) |
|||
}, |
|||
request() { |
|||
let _this = this |
|||
|
|||
_this.$api.getAllGiftBag().then((resp) => { |
|||
|
|||
_this.data = resp |
|||
this.getallPrice() |
|||
this.getweight() |
|||
|
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
numbers(event) { |
|||
this.page.number = event.target.value |
|||
this.getallPrice() |
|||
this.getweight() |
|||
}, |
|||
getallPrice() { |
|||
|
|||
let num = 0; |
|||
for (var i = 0; i < this.data.length; i++) { |
|||
num += Number(this.data[i].price) * Number(this.data[i].goodsNumber); |
|||
} |
|||
|
|||
console.log("num", num) |
|||
|
|||
this.page.price = Number(num * this.page.number).toFixed(2) |
|||
}, |
|||
getPrice(item) { |
|||
|
|||
if (item.goodsNumber > 0) |
|||
|
|||
item.price = Number(item.goodsNumber * item.jprice * item.weight).toFixed(2) |
|||
|
|||
}, |
|||
getweight() { |
|||
|
|||
let num = 0; |
|||
for (var i = 0; i < this.data.length; i++) { |
|||
num += Number(this.data[i].weight) * Number(this.data[i].goodsNumber); |
|||
|
|||
} |
|||
this.page.weight = num |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 95vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,732 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;" id="page"> |
|||
|
|||
<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/detail_affeection.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<view style="width: 50%; margin-left: 20vw; |
|||
display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center; |
|||
justify-content: space-between;"> |
|||
<text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text> |
|||
|
|||
<text v-if="data.notRese" |
|||
style="background: #fff ; border-radius: 25px;color: #FF7201;padding: 3px 10px;" |
|||
@click="showDialog2">转赠亲友</text> |
|||
|
|||
<text v-if="!data.notRese" |
|||
style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view style="background-color: #fff;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 style="margin-bottom: 10px;"> |
|||
<view v-for="(item,index) in data.orderCardVoList" :key="index" |
|||
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> |
|||
|
|||
<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;" id='the-id'> |
|||
|
|||
<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 style="margin-bottom: 50px;"> |
|||
|
|||
<view v-for="(item,index) in data.empCardGifts" :key="index" |
|||
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; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" |
|||
style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;width: 100%;"> |
|||
|
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">亲情卡编码：{{item.code}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;"> |
|||
<text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text> |
|||
|
|||
<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item" |
|||
open-type="share">分享卡</button> |
|||
<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item" |
|||
open-type="share">已分享</button> |
|||
<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="height: 50px; "></view> |
|||
|
|||
<view v-if="data.notRese" style="width: 100%; background-color: #fff;height: 15vw;position: fixed;bottom: 0;overflow:hidden; |
|||
display: flex;flex-direction: row;"> |
|||
|
|||
<!-- <text |
|||
style="flex: 1;color: #B3B3B3; padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;"> |
|||
可选择就近网点进行预约提货 > |
|||
</text> --> |
|||
<view style="flex: 1;"></view> |
|||
<text style=" width: 20vw;font-size: 16px;color: #fff; background-color: #FFC104; |
|||
padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog">预约提货</text> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</loading-state> |
|||
|
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal' @click.stop="colseDialog()"></view> |
|||
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'> |
|||
|
|||
<scroll-view scroll-y="true" style="height: 100%;width: 100%; padding: 20px; " bindscrolltoupper="upper" |
|||
bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;"> |
|||
<text>提货地点</text> |
|||
<view |
|||
style="margin-top: 10px;background:#F5F5F5 ; display: flex;flex-direction: row;justify-content: space-between;width: 89.5%;border-radius: 4px;min-height: 35px;align-items: center;" |
|||
@click="address"> |
|||
<view v-if="stringIsEmpty(data.addressName)" |
|||
style="color: #666;font-size: 12px;margin-left: 10px;"> |
|||
请选择提货点</view> |
|||
<view v-if="stringIsNotEmpty(data.addressName)" |
|||
style="color: #666;font-size: 12px;margin-left: 10px;">{{data.addressName}}</view> |
|||
<uni-icons type="bottom" size="14" color="#999" style="flex-direction: 0;margin: 0px 5px;" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;"> |
|||
<text>提货时间</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<uni-datetime-picker type="date" v-model="data.reserveDate" style="flex: 1;background: #F8F8F8;" |
|||
:start="data.start" :end="data.end" @showing='showing' :disabledDate="disabledDate" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;"> |
|||
<text>提货人</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入提货人" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
:value="data.userName" @input="onKeyInput1" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;"> |
|||
<text>联系电话</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input maxlength="11" placeholder="请输入联系电话" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="data.userPhone" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="background: #F5F5F5; border-radius: 5px;margin-top: 15px;width: 89.5%;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end; |
|||
padding: 10px;"> |
|||
<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}} |
|||
</text> |
|||
<text class="text" |
|||
style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0" |
|||
:max="item.lnum" v-model="item.select"></uni-number-box> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center; margin-top: 100px;width: 100%;"> |
|||
|
|||
<text |
|||
style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;" |
|||
@click.stop="colseDialog()">取消</text> |
|||
<text |
|||
style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FFC104; padding: 5px 30px;margin-left: 20px;" |
|||
@click="save">确认</text> |
|||
|
|||
</view> |
|||
<view style="height: 50px;"> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal2' @click.stop="colseDialog2()"></view> |
|||
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal2'> |
|||
<scroll-view scroll-y="true" style="height: 100%; width: 100%; box-sizing: border-box; |
|||
" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>卡券数量</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入卡券数量" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;" |
|||
type="number" :value="info.count" @input="onKeyInput3" /> |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>商品列表</text> |
|||
<view style="background: #F5F5F5; border-radius: 5px;margin-top: 6px;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end; |
|||
padding: 10px;"> |
|||
<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}} |
|||
</text> |
|||
<text class="text" |
|||
style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0" |
|||
:max="item.lnum" v-model="item.select"></uni-number-box> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>备注说明</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;" |
|||
:value="info.remarks" @input="onKeyInput4" /> |
|||
<!-- <textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px; |
|||
line-height: 20px;padding: 10px; |
|||
white-space: pre-wrap; |
|||
height: auto;min-height: 30px; |
|||
word-wrap: break-word;" :value="info.remarks" @input="onKeyInput2" /> --> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 100px;width: 100%;"> |
|||
|
|||
<text |
|||
style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;" |
|||
@click.stop="colseDialog2()">取消</text> |
|||
<text |
|||
style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FF9D33; padding: 5px 30px;margin-left: 20px;" |
|||
@click="save2()">确认</text> |
|||
|
|||
</view> |
|||
<view style="height: 50px;"> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
showModal: false, |
|||
showModal2: false, |
|||
page: { |
|||
sid: '', |
|||
showTextView: false, |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: { |
|||
time: "", |
|||
name: "", |
|||
pname: "", |
|||
state: "", |
|||
notRese: false, |
|||
showBtn: false, |
|||
showRecord: false, |
|||
goodsVos: [], |
|||
value: "", |
|||
userName: "", |
|||
userPhone: "", |
|||
}, |
|||
disabledDate: [ |
|||
// '2023-12-16' |
|||
], |
|||
info: { |
|||
count: "1", |
|||
empCardSid: "", |
|||
remarks: "", |
|||
goodsVoList: [] |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
this.getSun() |
|||
this.$bus.$on('order', msg => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
uni.$on("address", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.data.value = e.sid; |
|||
this.data.addressName = e.name; |
|||
}) |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
uni.$off('address'); |
|||
}, |
|||
onPageScroll(e) { |
|||
// console.log("aaa",e.scrollTop); |
|||
}, |
|||
methods: { |
|||
showDialog() { |
|||
this.showModal = true |
|||
}, |
|||
colseDialog() { |
|||
this.showModal = false |
|||
}, |
|||
showDialog2() { |
|||
this.showModal2 = true |
|||
}, |
|||
colseDialog2() { |
|||
this.showModal2 = false |
|||
}, |
|||
address() { |
|||
uni.navigateTo({ |
|||
url: '/pages/SelectAddressActivity' |
|||
}) |
|||
}, |
|||
onKeyInput1: function(event) { |
|||
this.data.userName = event.target.value |
|||
}, |
|||
onKeyInput2: function(event) { |
|||
this.data.userPhone = event.target.value |
|||
}, |
|||
onKeyInput3: function(event) { |
|||
this.info.count = event.target.value |
|||
|
|||
}, |
|||
onKeyInput4: function(event) { |
|||
this.info.remarks = event.target.value |
|||
}, |
|||
showing(e) { |
|||
this.page.showTextView = e |
|||
}, |
|||
save() { |
|||
if (this.stringIsEmpty(this.data.value)) { |
|||
this.shortToast('请选择提货地点') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.reserveDate)) { |
|||
this.shortToast('请选择提货时间') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.userName)) { |
|||
this.shortToast('请输入提货人员') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.userPhone)) { |
|||
this.shortToast('请输入手机号码') |
|||
return |
|||
} |
|||
if (this.data.userPhone.length != 11) { |
|||
this.shortToast('手机号码格式不对') |
|||
return |
|||
} |
|||
|
|||
|
|||
let num = 0; |
|||
for (var i = 0; i < this.data.goodsVos.length; i++) { |
|||
num += Number(this.data.goodsVos[i].select); |
|||
} |
|||
if (num == 0) { |
|||
this.shortToast('您未选择任何商品') |
|||
return |
|||
} |
|||
|
|||
let _this = this |
|||
_this.$api.gifcardBookingSave(this.data).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
uni.navigateBack() |
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
save2() { |
|||
this.pageScroll() |
|||
this.colseDialog2() |
|||
|
|||
let num = 0; |
|||
for (var i = 0; i < this.data.goodsVos.length; i++) { |
|||
num += Number(this.data.goodsVos[i].select); |
|||
} |
|||
if (num == 0) { |
|||
this.shortToast('您未选择任何商品') |
|||
return |
|||
} |
|||
|
|||
let _this = this |
|||
|
|||
this.info.empCardSid = this.page.sid, |
|||
this.info.goodsVoList = this.data.goodsVos, |
|||
|
|||
console.log("info>>", this.info); |
|||
|
|||
_this.$api.generateEmpCardGift(this.info).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
// uni.navigateBack() |
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
}, |
|||
pageScroll() { |
|||
|
|||
//获取容器高度，使页面滚动到容器底部 #xxx就是view的id名 |
|||
wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) { |
|||
console.log('rect', rect); |
|||
console.log('rectheight', rect.height); |
|||
/* 将页面移动到最底部（用xxx的height定位） */ |
|||
wx.pageScrollTo({ |
|||
scrollTop: rect.height |
|||
}) |
|||
}).exec() |
|||
|
|||
}, |
|||
|
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.gifcardDetail(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
getSun() { |
|||
let _this = this |
|||
_this.$api.isSaturAndSun2(this.page.sid).then((resp) => { |
|||
|
|||
// console.log("aaa",resp) |
|||
|
|||
this.disabledDate = resp |
|||
|
|||
}).catch(e => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
showRecord(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_record?sid=' + sid |
|||
}) |
|||
}, |
|||
booking(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_booking?sid=' + sid |
|||
}) |
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
onShareAppMessage: function(res) { |
|||
console.log("res", res) |
|||
console.log("data", res.target.dataset) |
|||
var data = res.target.dataset.info |
|||
this.shareCard(data.sid) |
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
path: '/pages/bind/bind_pickUpCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。 |
|||
success: function(res) { |
|||
console.log('aaaa', "分享成功") |
|||
}, |
|||
fail: function(res) { |
|||
// 转发失败 |
|||
console.log('aaaa', "用户点击了取消") |
|||
} |
|||
} |
|||
}, |
|||
|
|||
shareCard(sid) { |
|||
let _this = this |
|||
|
|||
_this.$api.shareEmpCard(sid).then((resp) => { |
|||
|
|||
var item = _this.data.empCardGiftVos.find(item => item.sid === sid) |
|||
|
|||
console.log("item", item); |
|||
|
|||
item.share = '2' |
|||
|
|||
}).catch(e => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.canvas-code { |
|||
width: 39vw !important; |
|||
height: 39vw !important; |
|||
} |
|||
|
|||
.sharebtn { |
|||
background: #FF4727; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
width: 30vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn3::after { |
|||
border: none; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj1.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: 100%; |
|||
position: fixed; |
|||
top: 50vw; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 9999; |
|||
background-color: #fff; |
|||
border-top-right-radius: 20px; |
|||
border-top-left-radius: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,495 @@ |
|||
<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/detail_affeection.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<view style="width: 55%; margin-left: 20vw; |
|||
display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center; |
|||
justify-content: space-between;"> |
|||
<text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text> |
|||
|
|||
<text |
|||
style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view style="background-color: #fff;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 style="margin-bottom: 10px;"> |
|||
<view v-for="(item,index) in data.orderCardVoList" :key="index" |
|||
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> |
|||
|
|||
<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 style="margin-bottom: 50px;"> |
|||
|
|||
<view v-for="(item,index) in data.empCardGifts" :key="index" |
|||
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; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" |
|||
style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;width: 100%;"> |
|||
|
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">亲情卡编码：{{item.code}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;"> |
|||
<text |
|||
style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text> |
|||
|
|||
<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item" |
|||
open-type="share">分享卡</button> |
|||
<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item" |
|||
open-type="share">已分享</button> |
|||
<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</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() |
|||
this.$bus.$on('order', msg => { |
|||
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('order'); |
|||
}, |
|||
methods: { |
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.gifcardDetail(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
onShareAppMessage: function(res) { |
|||
console.log("res", res) |
|||
console.log("data", res.target.dataset) |
|||
var data = res.target.dataset.info |
|||
this.shareCard(data.sid) |
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
path: '/pages/bind/bind_pickUpCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。 |
|||
success: function(res) { |
|||
console.log('aaaa', "分享成功") |
|||
}, |
|||
fail: function(res) { |
|||
// 转发失败 |
|||
console.log('aaaa', "用户点击了取消") |
|||
} |
|||
} |
|||
}, |
|||
|
|||
shareCard(sid) { |
|||
let _this = this |
|||
|
|||
_this.$api.shareEmpCard(sid).then((resp) => { |
|||
|
|||
var item = _this.data.empCardGiftVos.find(item => item.sid === sid) |
|||
|
|||
console.log("item", item); |
|||
|
|||
item.share = '2' |
|||
|
|||
}).catch(e => {}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
.canvas-code { |
|||
width: 39vw !important; |
|||
height: 39vw !important; |
|||
} |
|||
|
|||
.sharebtn { |
|||
background: #FF4727; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
width: 30vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn3::after { |
|||
border: none; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj4.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> |
|||
@ -0,0 +1,746 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;" id="page"> |
|||
|
|||
<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/detail_enterprise.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<view style="width: 55%; margin-left: 20vw; |
|||
display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center; |
|||
justify-content: space-between;"> |
|||
<text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text> |
|||
|
|||
<text v-if="data.notRese" |
|||
style="background: #fff ; border-radius: 25px;color: #FF7201;padding: 3px 10px;" |
|||
@click="showDialog">转赠亲友</text> |
|||
|
|||
<text v-if="!data.notRese" |
|||
style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text> |
|||
</view> |
|||
|
|||
</view> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view style="background-color: #fff;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 style="margin-bottom: 10px;"> |
|||
<view v-for="(item,index) in data.orderCardVoList" :key="index" |
|||
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> |
|||
|
|||
<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;" id='the-id'> |
|||
|
|||
<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 style="margin-bottom: 50px;"> |
|||
<view v-for="(item,index) in data.empCardGiftVos" :key="index" |
|||
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; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" |
|||
style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;width: 100%;"> |
|||
|
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">福礼卡编码：{{item.code}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;"> |
|||
<text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text> |
|||
|
|||
<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item" |
|||
open-type="share">分享卡</button> |
|||
<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item" |
|||
open-type="share">已分享</button> |
|||
<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view style="height: 50px;"></view> |
|||
|
|||
<view v-if="data.notRese" style="width: 100%; background-color: #fff;height: 15vw;position: fixed;bottom: 0;overflow:hidden; |
|||
display: flex;flex-direction: row;"> |
|||
<!-- <text |
|||
style="flex: 1;color: #B3B3B3; padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;"> |
|||
可选择就近网点进行预约提货 > |
|||
</text> --> |
|||
<view style="flex: 1;"></view> |
|||
<text style=" width: 20vw;font-size: 16px;color: #fff; background-color: #FE3F00; |
|||
padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog2">预约提货</text> |
|||
|
|||
</view> |
|||
|
|||
</loading-state> |
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal' @click.stop="colseDialog()"></view> |
|||
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'> |
|||
<scroll-view scroll-y="true" style="height: 100%; width: 100%; box-sizing: border-box; |
|||
" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<!-- <view |
|||
style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 20px;"> |
|||
|
|||
<view style="width: 43vw; height: 43vw;margin-top: 10px;padding: 5px; |
|||
display: flex;justify-content: center;align-items: center;" class="boeder"> |
|||
<canvas class="canvas-code" canvas-id="canvas" style="width: 39vw; height: 39vw;" /> |
|||
</view> |
|||
|
|||
|
|||
<text |
|||
style="font-size: 16px;color: #333; width: 100%;text-align: center;margin-top: 20px;">福礼卡编码：{{data.giftCode}}</text> |
|||
<text |
|||
style="font-size: 16px; color: #333;width: 100%;text-align: center;margin-top: 5px;">提货密码：{{data.giftCodeKey}}</text> |
|||
</view> --> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>卡券数量</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入卡券数量" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;" |
|||
type="number" :value="info.count" @input="onKeyInput1" /> |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>商品列表</text> |
|||
<view style="background: #F5F5F5; border-radius: 5px;margin-top: 6px;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end; |
|||
padding: 10px;"> |
|||
<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}} |
|||
</text> |
|||
<text class="text" |
|||
style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0" |
|||
:max="item.lnum" v-model="item.select"></uni-number-box> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>备注说明</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;" |
|||
:value="info.remarks" @input="onKeyInput2" /> |
|||
<!-- <textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px; |
|||
line-height: 20px;padding: 10px; |
|||
white-space: pre-wrap; |
|||
height: auto;min-height: 30px; |
|||
word-wrap: break-word;" :value="info.remarks" @input="onKeyInput2" /> --> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 100px;width: 100%;"> |
|||
|
|||
<text |
|||
style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;" |
|||
@click.stop="colseDialog()">取消</text> |
|||
<text |
|||
style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FE3F00; padding: 5px 30px;margin-left: 20px;" |
|||
@click="save">确认</text> |
|||
|
|||
</view> |
|||
<view style="height: 50px;"> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal2' @click.stop="colseDialog2()"></view> |
|||
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal2'> |
|||
<scroll-view scroll-y="true" style="height: 100%;width: 100%; padding: 20px; " bindscrolltoupper="upper" |
|||
bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;"> |
|||
<text>提货地点</text> |
|||
<view |
|||
style="margin-top: 10px;background:#F5F5F5 ; display: flex;flex-direction: row;justify-content: space-between;width: 89.5%;border-radius: 4px;min-height: 35px;align-items: center;" |
|||
@click="address"> |
|||
<view v-if="stringIsEmpty(data.addressName)" |
|||
style="color: #666;font-size: 12px;margin-left: 10px;"> |
|||
请选择提货点</view> |
|||
<view v-if="stringIsNotEmpty(data.addressName)" |
|||
style="color: #666;font-size: 12px;margin-left: 10px;">{{data.addressName}}</view> |
|||
<uni-icons type="bottom" size="14" color="#999" style="flex-direction: 0;margin: 0px 5px;" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;"> |
|||
<text>提货时间</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<uni-datetime-picker type="date" v-model="data.reserveDate" style="flex: 1;background: #F8F8F8;" |
|||
:start="data.start" :end="data.end" :disabledDate="disabledDate" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;"> |
|||
<text>提货人</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入提货人" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
:value="data.userName" @input="onKeyInput3" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;"> |
|||
<text>联系电话</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input maxlength="11" placeholder="请输入联系电话" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="data.userPhone" @input="onKeyInput4" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="background: #F5F5F5; border-radius: 5px;margin-top: 15px;width: 89.5%;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end; |
|||
padding: 10px;"> |
|||
<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}} |
|||
</text> |
|||
<text class="text" |
|||
style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0" |
|||
:max="item.lnum" v-model="item.select"></uni-number-box> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center; margin-top: 100px;width: 100%;"> |
|||
|
|||
<text |
|||
style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;" |
|||
@click.stop="colseDialog2()">取消</text> |
|||
<text |
|||
style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FE3F00; padding: 5px 30px;margin-left: 20px;" |
|||
@click="save2">确认</text> |
|||
|
|||
</view> |
|||
<view style="height: 50px;"> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import QRCode from '@/utils/weapp-qrcode.js' |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
showModal: false, |
|||
showModal2: false, |
|||
page: { |
|||
sid: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: {}, |
|||
info: { |
|||
count: "1", |
|||
empCardSid: "", |
|||
remarks: "", |
|||
goodsVoList: [] |
|||
}, |
|||
disabledDate: [ |
|||
// '2023-12-16' |
|||
], |
|||
// qrcode: null, |
|||
|
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
this.getSun() |
|||
this.$bus.$on('order', msg => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
|
|||
uni.$on("address", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.data.value = e.sid; |
|||
this.data.addressName = e.name; |
|||
}) |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
|
|||
// let long = info.windowWidth*0.39; |
|||
|
|||
// this.qrcode = new QRCode('canvas', { |
|||
// usingIn: this, |
|||
// text: "https://github.com/tomfriwel/weapp-qrcode", |
|||
// width: long, |
|||
// height: long, |
|||
// colorDark: "#000000", |
|||
// colorLight: "#ffffff", |
|||
// correctLevel: QRCode.CorrectLevel.H, |
|||
// }) |
|||
|
|||
|
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
uni.$off('address'); |
|||
}, |
|||
onPageScroll(e) { |
|||
// console.log("aaa",e.scrollTop); |
|||
}, |
|||
methods: { |
|||
showDialog() { |
|||
// this.qrcode.makeCode(this.data.qrCode) |
|||
this.showModal = true |
|||
}, |
|||
colseDialog() { |
|||
this.showModal = false |
|||
}, |
|||
showDialog2() { |
|||
// this.qrcode.makeCode(this.data.qrCode) |
|||
this.showModal2 = true |
|||
}, |
|||
colseDialog2() { |
|||
this.showModal2 = false |
|||
}, |
|||
address() { |
|||
uni.navigateTo({ |
|||
url: '/pages/SelectAddressActivity' |
|||
}) |
|||
}, |
|||
onKeyInput1: function(event) { |
|||
this.info.count = event.target.value |
|||
}, |
|||
onKeyInput2: function(event) { |
|||
this.info.remarks = event.target.value |
|||
}, |
|||
onKeyInput3: function(event) { |
|||
this.data.userName = event.target.value |
|||
}, |
|||
onKeyInput4: function(event) { |
|||
this.data.userPhone = event.target.value |
|||
}, |
|||
getSun() { |
|||
let _this = this |
|||
_this.$api.isSaturAndSun3(this.page.sid).then((resp) => { |
|||
|
|||
// console.log("aaa",resp) |
|||
|
|||
this.disabledDate = resp |
|||
|
|||
}).catch(e => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
pageScroll() { |
|||
|
|||
//获取容器高度，使页面滚动到容器底部 #xxx就是view的id名 |
|||
wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) { |
|||
console.log('rect', rect); |
|||
console.log('rectheight', rect.height); |
|||
/* 将页面移动到最底部（用xxx的height定位） */ |
|||
wx.pageScrollTo({ |
|||
scrollTop: rect.height |
|||
}) |
|||
}).exec() |
|||
|
|||
}, |
|||
|
|||
|
|||
save() { |
|||
this.pageScroll() |
|||
this.colseDialog2() |
|||
let num = 0; |
|||
for (var i = 0; i < this.data.goodsVos.length; i++) { |
|||
num += Number(this.data.goodsVos[i].select); |
|||
} |
|||
if (num == 0) { |
|||
this.shortToast('您未选择任何商品') |
|||
return |
|||
} |
|||
|
|||
let _this = this |
|||
|
|||
this.info.empCardSid = this.page.sid, |
|||
this.info.goodsVoList = this.data.goodsVos, |
|||
|
|||
console.log("info>>", this.info); |
|||
|
|||
_this.$api.empcardSave(this.info).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
// uni.navigateBack() |
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
save2() { |
|||
|
|||
if (this.stringIsEmpty(this.data.value)) { |
|||
this.shortToast('请选择提货地点') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.reserveDate)) { |
|||
this.shortToast('请选择提货时间') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.userName)) { |
|||
this.shortToast('请输入提货人员') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.userPhone)) { |
|||
this.shortToast('请输入手机号码') |
|||
return |
|||
} |
|||
if (this.data.userPhone.length != 11) { |
|||
this.shortToast('手机号码格式不对') |
|||
return |
|||
} |
|||
|
|||
|
|||
let num = 0; |
|||
for (var i = 0; i < this.data.goodsVos.length; i++) { |
|||
num += Number(this.data.goodsVos[i].select); |
|||
} |
|||
if (num == 0) { |
|||
this.shortToast('您未选择任何商品') |
|||
return |
|||
} |
|||
|
|||
let _this = this |
|||
_this.$api.empcardBookingSave(this.data).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
uni.navigateBack() |
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.empCardDetail(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
// _this.qrcode.makeCode(_this.data.qrCode) |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
onShareAppMessage: function(res) { |
|||
console.log("res", res) |
|||
console.log("data", res.target.dataset) |
|||
var data = res.target.dataset.info |
|||
this.shareCard(data.sid) |
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
path: '/pages/bind/bind_pickUpCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。 |
|||
success: function(res) { |
|||
console.log('aaaa', "分享成功") |
|||
}, |
|||
fail: function(res) { |
|||
// 转发失败 |
|||
console.log('aaaa', "用户点击了取消") |
|||
} |
|||
} |
|||
}, |
|||
|
|||
shareCard(sid) { |
|||
let _this = this |
|||
|
|||
_this.$api.shareEmpCard(sid).then((resp) => { |
|||
|
|||
var item = _this.data.empCardGiftVos.find(item => item.sid === sid) |
|||
|
|||
console.log("item", item); |
|||
|
|||
item.share = '2' |
|||
|
|||
}).catch(e => {}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.canvas-code { |
|||
width: 39vw !important; |
|||
height: 39vw !important; |
|||
} |
|||
|
|||
.sharebtn { |
|||
background: #FF4727; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
width: 30vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn3::after { |
|||
border: none; |
|||
} |
|||
|
|||
.boeder { |
|||
/* 加载背景图 */ |
|||
background-image: url(../../static/border.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj1.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: 100%; |
|||
position: fixed; |
|||
top: 50vw; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 9999; |
|||
margin: 0 auto; |
|||
background-color: #fff; |
|||
border-top-left-radius: 20px; |
|||
border-top-right-radius: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
box-sizing: content-box; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,489 @@ |
|||
<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/detail_enterprise.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<view style="width: 55%; margin-left: 20vw; |
|||
display: flex;flex-direction: row;margin-top:9vw;position: absolute;z-index: 10;align-items: center; |
|||
justify-content: space-between;"> |
|||
<text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text> |
|||
|
|||
<text |
|||
style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text> |
|||
</view> |
|||
|
|||
</view> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view style="background-color: #fff;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 style="margin-bottom: 10px;"> |
|||
<view v-for="(item,index) in data.orderCardVoList" :key="index" |
|||
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> |
|||
|
|||
<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 style="margin-bottom: 50px;"> |
|||
<view v-for="(item,index) in data.empCardGiftVos" :key="index" |
|||
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; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" |
|||
style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;width: 100%;"> |
|||
|
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">福礼卡编码：{{item.code}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;"> |
|||
<text |
|||
style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text> |
|||
|
|||
<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item" |
|||
open-type="share">分享卡</button> |
|||
<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item" |
|||
open-type="share">已分享</button> |
|||
<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</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() |
|||
this.$bus.$on('order', msg => { |
|||
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('order'); |
|||
}, |
|||
methods: { |
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.empCardDetail(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
tapName(event) { |
|||
console.log("event", event) |
|||
}, |
|||
onShareAppMessage: function(res) { |
|||
console.log("res", res) |
|||
console.log("data", res.target.dataset) |
|||
var data = res.target.dataset.info |
|||
this.shareCard(data.sid) |
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
path: '/pages/bind/bind_pickUpCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。 |
|||
success: function(res) { |
|||
console.log('aaaa',"分享成功") |
|||
}, |
|||
fail: function(res) { |
|||
// 转发失败 |
|||
console.log('aaaa',"用户点击了取消") |
|||
} |
|||
} |
|||
}, |
|||
|
|||
shareCard(sid){ |
|||
let _this = this |
|||
|
|||
_this.$api.shareEmpCard(sid).then((resp) => { |
|||
|
|||
var item = _this.data.empCardGiftVos.find(item=>item.sid===sid) |
|||
|
|||
console.log("item",item); |
|||
|
|||
item.share='2' |
|||
|
|||
}).catch(e => { |
|||
}) |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.sharebtn { |
|||
background: #FF4727; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
width: 30vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn3::after { |
|||
border: none; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj4.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> |
|||
@ -0,0 +1,734 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;" id="page"> |
|||
|
|||
<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/detail_family.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<view style="width: 55%; margin-left: 20vw; |
|||
display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center; |
|||
justify-content: space-between;"> |
|||
<text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text> |
|||
|
|||
<text v-if="data.notRese" |
|||
style="background: #fff ; border-radius: 25px;color: #FF7201;padding: 3px 10px;" |
|||
@click="showDialog2">转赠亲友</text> |
|||
|
|||
<text v-if="!data.notRese" |
|||
style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text> |
|||
</view> |
|||
|
|||
</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 style="margin-bottom: 10px;"> |
|||
<view v-for="(item,index) in data.orderCardVoList" :key="index" |
|||
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> |
|||
|
|||
<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;" id='the-id'> |
|||
|
|||
<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 style="margin-bottom: 50px;"> |
|||
|
|||
<view v-for="(item,index) in data.empCardGifts" :key="index" |
|||
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; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" |
|||
style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;width: 100%;"> |
|||
|
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">亲情卡编码：{{item.code}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;"> |
|||
<text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text> |
|||
|
|||
<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item" |
|||
open-type="share">分享卡</button> |
|||
<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item" |
|||
open-type="share">已分享</button> |
|||
<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="height: 50px;"></view> |
|||
|
|||
<view v-if="data.notRese" style="width: 100%; background-color: #fff;height: 15vw;position: fixed;bottom: 0;overflow:hidden; |
|||
display: flex;flex-direction: row;"> |
|||
<!-- <text |
|||
style="flex: 1;color: #B3B3B3; padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;"> |
|||
可选择就近网点进行预约提货 > |
|||
</text> --> |
|||
<view style="flex: 1;"></view> |
|||
<text style=" width: 20vw;font-size: 16px;color: #fff; background-color: #FF9D33; |
|||
padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog">预约提货</text> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</loading-state> |
|||
|
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal' @click.stop="colseDialog()"></view> |
|||
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'> |
|||
<scroll-view scroll-y="true" style="height: 100%;width: 100%; padding: 20px; " bindscrolltoupper="upper" |
|||
bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;"> |
|||
<text>提货地点</text> |
|||
<view |
|||
style="margin-top: 10px;background:#F5F5F5 ; display: flex;flex-direction: row;justify-content: space-between;width: 89.5%;border-radius: 4px;min-height: 35px;align-items: center;" |
|||
@click="address"> |
|||
<view v-if="stringIsEmpty(data.addressName)" |
|||
style="color: #666;font-size: 12px;margin-left: 10px;"> |
|||
请选择提货点</view> |
|||
<view v-if="stringIsNotEmpty(data.addressName)" |
|||
style="color: #666;font-size: 12px;margin-left: 10px;">{{data.addressName}}</view> |
|||
<uni-icons type="bottom" size="14" color="#999" style="flex-direction: 0;margin: 0px 5px;" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;"> |
|||
<text>提货时间</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;width: 89.5%;"> |
|||
<uni-datetime-picker type="date" v-model="data.reserveDate" style="flex: 1;background: #F8F8F8;" |
|||
:start="data.start" :end="data.end" :disabledDate="disabledDate" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;"> |
|||
<text>提货人</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;width: 89.5%;"> |
|||
<input placeholder="请输入提货人" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
:value="data.userName" @input="onKeyInput1" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 10px;"> |
|||
<text>联系电话</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;width: 89.5%;"> |
|||
<input maxlength="11" placeholder="请输入联系电话" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;" |
|||
type="number" :value="data.userPhone" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="background: #F5F5F5; border-radius: 5px;margin-top: 15px;width: 89.5%;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end; |
|||
padding: 10px;"> |
|||
<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}} |
|||
</text> |
|||
<text class="text" |
|||
style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0" |
|||
:max="item.lnum" v-model="item.select"></uni-number-box> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 100px;width: 100%;"> |
|||
|
|||
<text |
|||
style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;" |
|||
@click.stop="colseDialog()">取消</text> |
|||
<text |
|||
style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FF9D33; padding: 5px 30px;margin-left: 20px;" |
|||
@click="save">确认</text> |
|||
|
|||
</view> |
|||
|
|||
<view style="height: 50px;"> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal2' @click.stop="colseDialog2()"></view> |
|||
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal2'> |
|||
<scroll-view scroll-y="true" style="height: 100%; width: 100%; box-sizing: border-box; |
|||
" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>卡券数量</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入卡券数量" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;" |
|||
type="number" :value="info.count" @input="onKeyInput3" /> |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>商品列表</text> |
|||
<view style="background: #F5F5F5; border-radius: 5px;margin-top: 6px;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end; |
|||
padding: 10px;"> |
|||
<text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}} |
|||
</text> |
|||
<text class="text" |
|||
style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0" |
|||
:max="item.lnum" v-model="item.select"></uni-number-box> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>备注说明</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<input placeholder="请输入" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;" |
|||
:value="info.remarks" @input="onKeyInput4" /> |
|||
<!-- <textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px; |
|||
line-height: 20px;padding: 10px; |
|||
white-space: pre-wrap; |
|||
height: auto;min-height: 30px; |
|||
word-wrap: break-word;" :value="info.remarks" @input="onKeyInput2" /> --> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 100px;width: 100%;"> |
|||
|
|||
<text |
|||
style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;" |
|||
@click.stop="colseDialog2()">取消</text> |
|||
<text |
|||
style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FF9D33; padding: 5px 30px;margin-left: 20px;" |
|||
@click="save2()">确认</text> |
|||
|
|||
</view> |
|||
<view style="height: 50px;"> |
|||
|
|||
</view> |
|||
|
|||
</scroll-view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
showModal: false, |
|||
showModal2: false, |
|||
page: { |
|||
sid: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: { |
|||
time: "", |
|||
name: "", |
|||
pname: "", |
|||
state: "", |
|||
notRese: false, |
|||
showBtn: false, |
|||
showRecord: false, |
|||
goodsVos: [], |
|||
value: "", |
|||
userName: "", |
|||
userPhone: "", |
|||
}, |
|||
disabledDate: [ |
|||
// '2023-12-16' |
|||
], |
|||
info: { |
|||
count: "1", |
|||
empCardSid: "", |
|||
remarks: "", |
|||
goodsVoList: [] |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$bus.$on('order', msg => { |
|||
this.request(); |
|||
this.$nextTick(() => { |
|||
|
|||
this.$refs.pageView.setLoadState(0) |
|||
|
|||
}) |
|||
|
|||
}) |
|||
|
|||
uni.$on("address", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.data.value = e.sid; |
|||
this.data.addressName = e.name; |
|||
}) |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
uni.$off('address'); |
|||
}, |
|||
onPageScroll(e) { |
|||
console.log("aaa", e.scrollTop); |
|||
}, |
|||
methods: { |
|||
showDialog() { |
|||
this.showModal = true |
|||
}, |
|||
showDialog2() { |
|||
this.showModal2 = true |
|||
|
|||
}, |
|||
colseDialog() { |
|||
this.showModal = false |
|||
}, |
|||
colseDialog2() { |
|||
this.showModal2 = false |
|||
}, |
|||
address() { |
|||
uni.navigateTo({ |
|||
url: '/pages/SelectAddressActivity' |
|||
}) |
|||
}, |
|||
onKeyInput1: function(event) { |
|||
this.data.userName = event.target.value |
|||
}, |
|||
onKeyInput2: function(event) { |
|||
this.data.userPhone = event.target.value |
|||
}, |
|||
onKeyInput3: function(event) { |
|||
this.info.count = event.target.value |
|||
|
|||
}, |
|||
onKeyInput4: function(event) { |
|||
this.info.remarks = event.target.value |
|||
}, |
|||
save() { |
|||
if (this.stringIsEmpty(this.data.value)) { |
|||
this.shortToast('请选择提货地点') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.reserveDate)) { |
|||
this.shortToast('请选择提货时间') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.userName)) { |
|||
this.shortToast('请输入提货人员') |
|||
return |
|||
} |
|||
if (this.stringIsEmpty(this.data.userPhone)) { |
|||
this.shortToast('请输入手机号码') |
|||
return |
|||
} |
|||
if (this.data.userPhone.length != 11) { |
|||
this.shortToast('手机号码格式不对') |
|||
return |
|||
} |
|||
|
|||
|
|||
let num = 0; |
|||
for (var i = 0; i < this.data.goodsVos.length; i++) { |
|||
num += Number(this.data.goodsVos[i].select); |
|||
} |
|||
if (num == 0) { |
|||
this.shortToast('您未选择任何商品') |
|||
return |
|||
} |
|||
|
|||
let _this = this |
|||
_this.$api.cardBookingSave(this.data).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
// setTimeout(() => { |
|||
// uni.$emit('order', "监听回调") |
|||
// }, 500) |
|||
uni.navigateBack() |
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
save2() { |
|||
this.colseDialog2() |
|||
this.pageScroll() |
|||
let num = 0; |
|||
for (var i = 0; i < this.data.goodsVos.length; i++) { |
|||
num += Number(this.data.goodsVos[i].select); |
|||
} |
|||
if (num == 0) { |
|||
this.shortToast('您未选择任何商品') |
|||
return |
|||
} |
|||
|
|||
let _this = this |
|||
|
|||
this.info.empCardSid = this.page.sid, |
|||
this.info.goodsVoList = this.data.goodsVos, |
|||
|
|||
console.log("info>>", this.info); |
|||
_this.$api.generateEmpCard(this.info).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
// uni.navigateBack() |
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
}, |
|||
pageScroll() { |
|||
|
|||
//获取容器高度，使页面滚动到容器底部 #xxx就是view的id名 |
|||
wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) { |
|||
console.log('rect', rect); |
|||
console.log('rectheight', rect.height); |
|||
/* 将页面移动到最底部（用xxx的height定位） */ |
|||
wx.pageScrollTo({ |
|||
scrollTop: rect.height |
|||
}) |
|||
}).exec() |
|||
|
|||
}, |
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.cardDetail(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.$nextTick(() => { |
|||
|
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
_this.getSun() |
|||
|
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
getSun() { |
|||
let _this = this |
|||
_this.$api.isSaturAndSun(this.page.sid).then((resp) => { |
|||
|
|||
// console.log("aaa",resp) |
|||
|
|||
this.disabledDate = resp |
|||
|
|||
}).catch(e => { |
|||
|
|||
}) |
|||
}, |
|||
|
|||
showRecord(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_record?sid=' + sid |
|||
}) |
|||
}, |
|||
booking(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_booking?sid=' + sid |
|||
}) |
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
onShareAppMessage: function(res) { |
|||
console.log("res", res) |
|||
console.log("data", res.target.dataset) |
|||
var data = res.target.dataset.info |
|||
this.shareCard(data.sid) |
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
path: '/pages/bind/bind_pickUpCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。 |
|||
success: function(res) { |
|||
console.log('aaaa', "分享成功") |
|||
}, |
|||
fail: function(res) { |
|||
// 转发失败 |
|||
console.log('aaaa', "用户点击了取消") |
|||
} |
|||
} |
|||
}, |
|||
|
|||
shareCard(sid) { |
|||
let _this = this |
|||
|
|||
_this.$api.shareEmpCard(sid).then((resp) => { |
|||
|
|||
var item = _this.data.empCardGiftVos.find(item => item.sid === sid) |
|||
|
|||
console.log("item", item); |
|||
|
|||
item.share = '2' |
|||
|
|||
}).catch(e => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.canvas-code { |
|||
width: 39vw !important; |
|||
height: 39vw !important; |
|||
} |
|||
|
|||
.sharebtn { |
|||
background: #FF4727; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
width: 30vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn3::after { |
|||
border: none; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj1.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: 100%; |
|||
position: fixed; |
|||
top: 50vw; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 9999; |
|||
background-color: #fff; |
|||
border-top-right-radius: 20px; |
|||
border-top-left-radius: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,497 @@ |
|||
<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/detail_family.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<view style="width: 50%; margin-left: 20vw; |
|||
display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center; |
|||
justify-content: space-between;"> |
|||
<text |
|||
style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text> |
|||
|
|||
<text |
|||
style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</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 style="margin-bottom: 10px;"> |
|||
<view v-for="(item,index) in data.orderCardVoList" :key="index" |
|||
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> |
|||
|
|||
<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 style="margin-bottom: 50px;"> |
|||
|
|||
<view v-for="(item,index) in data.empCardGifts" :key="index" |
|||
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; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" |
|||
style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;width: 100%;"> |
|||
|
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">亲情卡编码：{{item.code}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text> |
|||
<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;"> |
|||
<text |
|||
style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text> |
|||
|
|||
<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item" |
|||
open-type="share">分享卡</button> |
|||
<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item" |
|||
open-type="share">已分享</button> |
|||
<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
<view style="height: 50px;"></view> |
|||
|
|||
|
|||
|
|||
</loading-state> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
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() |
|||
this.$bus.$on('order', msg => { |
|||
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('order'); |
|||
}, |
|||
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) |
|||
}) |
|||
}) |
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
onShareAppMessage: function(res) { |
|||
console.log("res", res) |
|||
console.log("data", res.target.dataset) |
|||
var data = res.target.dataset.info |
|||
this.shareCard(data.sid) |
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
path: '/pages/bind/bind_pickUpCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。 |
|||
success: function(res) { |
|||
console.log('aaaa', "分享成功") |
|||
}, |
|||
fail: function(res) { |
|||
// 转发失败 |
|||
console.log('aaaa', "用户点击了取消") |
|||
} |
|||
} |
|||
}, |
|||
|
|||
shareCard(sid) { |
|||
let _this = this |
|||
|
|||
_this.$api.shareEmpCard(sid).then((resp) => { |
|||
|
|||
var item = _this.data.empCardGiftVos.find(item => item.sid === sid) |
|||
|
|||
console.log("item", item); |
|||
|
|||
item.share = '2' |
|||
|
|||
}).catch(e => {}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.canvas-code { |
|||
width: 39vw !important; |
|||
height: 39vw !important; |
|||
} |
|||
|
|||
.sharebtn { |
|||
background: #FF4727; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
width: 30vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 30vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn3::after { |
|||
border: none; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj4.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> |
|||
@ -1,194 +0,0 @@ |
|||
<template> |
|||
<view style="background-color: #FE9039;padding-top: 5vw;"> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: column;background: #fff; border-radius: 25px; align-items: center; margin-left: 5vw;margin-right: 5vw;"> |
|||
<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 |
|||
style="display: flex;flex-direction: column; background-color: #fff; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: 5vw;"> |
|||
|
|||
<z-paging ref="paging" :pagingStyle='styleObject' v-model="data" @query="queryList" :refresher-enabled="true"> |
|||
<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 }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/welfare_Card.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/welfare_Card2.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: column;"> |
|||
|
|||
<view style="display: flex;flex-direction: row; width: 100%;"> |
|||
<view style="flex: 1; display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text class="_ellipsis" |
|||
style="font-size: 12px;color: #FF7100;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
礼包名称：{{item.pname}}</text> |
|||
</view> |
|||
|
|||
<text :class="(item.showBtn)?'state1':'state2'"> |
|||
{{item.state}}</text> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
<text style="font-size: 12px;color: #FF7200;margin-top: 5px;" |
|||
v-show="item.showBtn">企业卡内的商品及数量可以派生出“福礼卡”</text> |
|||
<text style="font-size: 12px;color: #999;margin-top: 5px;" |
|||
v-show="!item.showBtn">当前卡片已失效</text> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<view v-show="item.showBtn" style="font-size: 12px;color:#fff;flex-shrink: 0; |
|||
text-align: center;margin-top: 5px; |
|||
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">发放福礼卡</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> --> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
data: [], |
|||
styleObject:{ |
|||
'margin-top': '22vw' |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order2", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.empcardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_bind3' |
|||
}) |
|||
}, |
|||
detail(item){ |
|||
|
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/corporate_card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/corporate_card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.gray { |
|||
filter: grayscale(100%); |
|||
-webkit-filter: grayscale(100%); |
|||
transition: filter 0.2s; |
|||
} |
|||
|
|||
|
|||
|
|||
.oragin {} |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.state1 { |
|||
height: 17px; |
|||
border: 1px #FED4B3 solid; |
|||
margin-left: 10px; |
|||
border-radius: 15px; |
|||
padding: 3px 10px; |
|||
font-size: 12px; |
|||
color: #FF6000; |
|||
flex-shrink: 0; |
|||
} |
|||
.state2 { |
|||
height: 17px; |
|||
border: 1px #D9D9D9 solid; |
|||
margin-left: 10px; |
|||
border-radius: 15px; |
|||
padding: 3px 10px; |
|||
font-size: 12px; |
|||
color: #7E7E7E; |
|||
flex-shrink: 0; |
|||
} |
|||
</style> |
|||
@ -1,165 +0,0 @@ |
|||
<template> |
|||
<view class="page"> |
|||
|
|||
<view class="top"> |
|||
|
|||
<image class="img" :src="baseUrl" @click="chooseImage"></image> |
|||
|
|||
<view class="top_right"> |
|||
|
|||
<text class="top_right_text1">{{name}}</text> |
|||
<text class="top_right_text2">{{orgName}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/wdxm.png' text="我的项目" @click="click" clickId="0"> |
|||
</UserItem> |
|||
</view> --> |
|||
|
|||
<!-- <view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/smxx.png' text="实名信息" notes="完善信息" @click="click" clickId="1"></UserItem> |
|||
|
|||
</view> --> |
|||
|
|||
<!-- <view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/sz.png' text="设置" @click="click" clickId="2"> |
|||
</UserItem> |
|||
</view> |
|||
|
|||
<view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/wdxm.png' text="关注公众号" @click="click" clickId="8"> |
|||
</UserItem> |
|||
</view> --> |
|||
|
|||
<!-- #ifdef APP-PLUS --> |
|||
<!-- <view class="user-item-bg"> --> |
|||
<!-- <UserItem src='https://supervise.yxtsoft.com/img/user/zzjg.png' text="组织结构" @click="click" clickId="3"></UserItem> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/xmgl.png' text="项目管理" @click="click" clickId="4"></UserItem> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/ycgl.png' text="云仓管理" @click="click" clickId="5"></UserItem> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/xtgl.png' text="系统管理" @click="click" clickId="6"></UserItem> --> |
|||
<!-- <UserItem src='https://supervise.yxtsoft.com/img/user/xtgl.png' text="检查更新" :notes="version" @click="click" |
|||
clickId="7"> |
|||
</UserItem> --> |
|||
<!-- </view> --> |
|||
<!-- #endif --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
baseUrl: "", |
|||
name: "", |
|||
}; |
|||
}, |
|||
onShow() { |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
chooseImage() { |
|||
// uni.navigateTo({ |
|||
// url: '../index/SetUp2' |
|||
// }); |
|||
}, |
|||
click(id) { |
|||
|
|||
switch (id) { |
|||
case "0": |
|||
uni.navigateTo({ |
|||
url: '../index/MyProject' |
|||
}); |
|||
break; |
|||
case "1": |
|||
break; |
|||
case "2": |
|||
uni.navigateTo({ |
|||
url: '../index/SetUp' |
|||
}); |
|||
|
|||
// uni.navigateTo({ |
|||
// url: '../index/DeviceException?sid=994d75b6-eb29-4733-bd48-dcfdf9f7dd47' |
|||
// }); |
|||
break; |
|||
case "3": |
|||
break; |
|||
case "4": |
|||
break; |
|||
case "5": |
|||
break; |
|||
case "6": |
|||
break; |
|||
case "7": |
|||
APPUpdate(true); |
|||
break; |
|||
case "8": |
|||
uni.navigateTo({ |
|||
url: '../index/interestAccount' |
|||
}) |
|||
break; |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.page { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.top { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding: 15px 25px; |
|||
|
|||
.img { |
|||
margin-top: 10px; |
|||
margin-left: 10px; |
|||
width: 60px; |
|||
height: 60px; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.top_right { |
|||
margin-top: 10px; |
|||
flex: 1; |
|||
margin-left: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.top_right_text1 { |
|||
width: 100%; |
|||
font-size: 20px; |
|||
font-weight: 800; |
|||
font-family: sans-serif; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
|
|||
} |
|||
|
|||
.top_right_text2 { |
|||
margin-top: 5px; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.user-item-bg { |
|||
background-color: #FFFFFF; |
|||
margin-top: 26rpx; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,249 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;height: 100#;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view class="topText"> |
|||
冬储文化是中国传统文化的一部分，是古人顺应自然、因时而食的智慧体现，是刻在老一辈骨子里的温暖记忆! |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view |
|||
style="display: flex;flex-direction: column; height: 30vw; width: 100vw;background: #ff0;z-index: 1000; position: fixed; top:61vw "> |
|||
--> |
|||
|
|||
|
|||
<z-paging ref="paging" v-model="data" :pagingStyle='styleObject' @query="queryList" :refresher-enabled="true"> |
|||
|
|||
<view style="display: flex;flex-direction: row;justify-content: space-between; |
|||
margin:5px 20px 0px 20px;padding-bottom: 20px; border-bottom: 2px #EFEFEF solid;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<view style="background: #FF9900; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FFCC7F; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<text |
|||
style="margin-left: 8px;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;">家庭云菜窖</text> |
|||
</view> |
|||
|
|||
<view style="border: 1px #FF9900 solid;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;border-radius: 15px; |
|||
padding:5px 15px;" @click="optionalClick()"> |
|||
+ 自选菜窖 |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" |
|||
style="display: flex;flex-direction: column;margin-top: 14px;width: 100%;" |
|||
@click="detail(item)"> |
|||
|
|||
<view :style="{'border-bottom':(index===data.length-1 ? 'none':'1px #EFEFEF solid')}" style="display: flex;flex-direction: column; |
|||
margin-left: 20px;margin-right: 20px;padding-bottom: 10px;flex: 1;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%; "> |
|||
<text style="flex: 1;margin-right: 10px;color: #000;font-size: 16px;">{{item.name}}</text> |
|||
<image src="@/static/right_icon.png" style="width: 15px;height: 15px;"></image> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center; margin-right: 10px;margin-top: 5px; width: 100%; "> |
|||
|
|||
<image :src='item.iconUrl' style="width: 60px;height: 70px;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-left: 20px;flex: 1; width: 100%;"> |
|||
|
|||
<text style="color: #999;font-size: 14px;width: 100%;">{{item.remarks}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;"> |
|||
<text |
|||
style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 14px; |
|||
margin-right: 10px;padding: 0px 8px;" |
|||
v-show="item.isRecommend=='1'">推荐</text> |
|||
<text |
|||
style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 14px;;padding: 0px 8px;">{{item.count}}</text> |
|||
</view> |
|||
|
|||
|
|||
<text style="color: #FF5006;font-size: 14px;">￥{{item.price}}</text> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
|
|||
<!-- </view> --> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject: { |
|||
// 'position': 'fixed', |
|||
// 'top':'80vw', |
|||
'margin-top': '78vw', |
|||
// 'border-top-left-radius': '25px', |
|||
// 'border-top-right-radius': '25px', |
|||
'background': '#fff', |
|||
'padding-top': '10px', |
|||
}, |
|||
page: { |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
|
|||
} |
|||
}, |
|||
created() { |
|||
this.$bus.$on('order', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
}, |
|||
onLoad() { |
|||
|
|||
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.appletGiftBagList().then((resp) => { |
|||
// 添加数据源 |
|||
// this.$refs.paging.complete(resp.records) |
|||
this.$refs.paging.complete(resp) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
|
|||
detail(item) { |
|||
// 详情 |
|||
uni.navigateTo({ |
|||
url: '/pages/cloud/detail_cloudCard?sid=' + item.sid+"&name="+item.name |
|||
}) |
|||
}, |
|||
optionalClick(){ |
|||
uni.navigateTo({ |
|||
url: '/pages/cloud/optionalCard' |
|||
}) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png); |
|||
/* background-image: url(../../static/clound_bj1.png); */ |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.topText { |
|||
margin-top: 60vw; |
|||
margin-left: 7vw; |
|||
margin-right: 7vw; |
|||
border-radius: 15px; |
|||
background-color: #FFF0E5; |
|||
padding: 10px 10px; |
|||
font-size: 12px; |
|||
color: #FF9900; |
|||
font-weight: 600; |
|||
font-family: sans-serif; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
height: 13vw; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/carPerson.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.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,260 @@ |
|||
<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/binding2.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #fff;margin-left: 11px;">绑定企业卡</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- |
|||
<view |
|||
style="display: flex;flex-direction: column;background: #fff;height:55vh;border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;"> |
|||
--> |
|||
|
|||
<z-paging ref="paging" :pagingStyle='styleObject' v-model="data" @query="queryList" :refresher-enabled="true"> |
|||
<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 }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseNormal.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseLose.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: column;"> |
|||
|
|||
<view style="display: flex;flex-direction: row; width: 100%;"> |
|||
<view style="flex: 1; display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text class="_ellipsis" |
|||
style="font-size: 12px;color: ##6FADFF;margin-top: 5px;width: calc(100vw - 182px);">{{item.pname}}</text> |
|||
</view> |
|||
|
|||
<text :class="(item.showBtn)?'state1':'state2'"> |
|||
{{item.state}}</text> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
<text style="font-size: 12px;color: ##6FADFF;margin-top: 5px;" |
|||
v-show="item.showBtn">企业卡内的商品及数量可以派生出“福礼卡”</text> |
|||
<text style="font-size: 12px;color: #999;margin-top: 5px;" |
|||
v-show="!item.showBtn">当前卡片已失效</text> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<view v-show="item.showBtn" style="font-size: 12px;color:#fff;flex-shrink: 0; |
|||
text-align: center;margin-top: 5px; |
|||
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#0473FF,#A4CDFF);">发放福礼卡</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> --> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
<!-- </view> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
data: [], |
|||
styleObject: { |
|||
'margin-top': '78vw', |
|||
'border-top-left-radius': '25px', |
|||
'border-top-right-radius': '25px', |
|||
'background': '#fff', |
|||
'padding-top': '10px', |
|||
}, |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
} |
|||
}, |
|||
created() { |
|||
this.$bus.$on('order3', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
}, |
|||
onLoad() { |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.empcardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/bind/bind_enterpriseCard' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
|
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/corporate_card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/corporate_card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj3.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; |
|||
height: 13vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj3.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/cardEnterprise.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.state1 { |
|||
height: 17px; |
|||
border: 1px #6FADFF solid; |
|||
margin-left: 10px; |
|||
border-radius: 15px; |
|||
padding: 3px 10px; |
|||
font-size: 12px; |
|||
color: #6FADFF; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.state2 { |
|||
height: 17px; |
|||
border: 1px #D9D9D9 solid; |
|||
margin-left: 10px; |
|||
border-radius: 15px; |
|||
padding: 3px 10px; |
|||
font-size: 12px; |
|||
color: #7E7E7E; |
|||
flex-shrink: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,245 @@ |
|||
<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/binding2.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #fff;margin-left: 11px;">绑定福礼卡</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- |
|||
<view |
|||
style="display: flex;flex-direction: column;background: #fff;height:55vh;border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;"> |
|||
--> |
|||
|
|||
<z-paging ref="paging2" v-model="data2" :pagingStyle='styleObject' @query="queryList2" :refresher-enabled="true"> |
|||
|
|||
<view v-for="(item,index) in data2" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;" |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail2(item)"> |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftNormal.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftLose.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text class="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<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;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF2B00,#FA6B54);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF2B00;">福礼卡</text> |
|||
<text |
|||
style="border: 1px #FF2B00 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF2B00;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
|
|||
<!-- </view> --> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject:{ |
|||
'margin-top': '78vw', |
|||
'border-top-left-radius': '25px', |
|||
'border-top-right-radius': '25px', |
|||
'background': '#fff', |
|||
'padding-top': '10px', |
|||
}, |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
data2: [], |
|||
currentTab: 0, |
|||
} |
|||
}, |
|||
created() { |
|||
this.$bus.$on('order2', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging2.reload(true); |
|||
}); |
|||
}, |
|||
onLoad() { |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order2'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList2(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.gifcardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging2.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging2.complete(false); |
|||
}) |
|||
}, |
|||
|
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/bind/bind_giftCard' |
|||
}) |
|||
}, |
|||
detail2(item) { |
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/welfare_card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/enterprise/welfare_card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
height: 13vw; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/cardGift.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.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,244 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;height: 100#;"> |
|||
|
|||
<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/binding2.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #fff;margin-left: 11px;">绑定个人卡</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- <view |
|||
style="display: flex;flex-direction: column;background: #f0f; height: auto; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;"> --> |
|||
<z-paging ref="paging" v-model="data" :pagingStyle='styleObject' @query="queryList" :refresher-enabled="true"> |
|||
|
|||
<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 }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/personNormal.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/peronLose.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text lass="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<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;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
|
|||
<!-- </view> --> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject:{ |
|||
'margin-top': '78vw', |
|||
'border-top-left-radius': '25px', |
|||
'border-top-right-radius': '25px', |
|||
'background': '#fff', |
|||
'padding-top': '10px', |
|||
}, |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
data2: [], |
|||
currentTab: 0, |
|||
} |
|||
}, |
|||
created() { |
|||
this.$bus.$on('order', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
}, |
|||
onLoad() { |
|||
|
|||
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); |
|||
}) |
|||
}, |
|||
|
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/bind/bind_personCard' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
height: 13vw; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/carPerson.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/caradLose.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.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,435 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;height: 100#;"> |
|||
|
|||
<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: row;"> |
|||
<!-- <view class="btn" @click="bind"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/binding.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px;font-weight: 600; text-align: center;color: #FF7100;margin-left: 11px;">绑定新卡</text> |
|||
</view> --> |
|||
<view style="flex: 1;"></view> |
|||
<text style="color: #fff;margin-top: 60vw; margin-right: 25px;" @click="bind">绑定新卡</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<!-- <view |
|||
style="display: flex;flex-direction: column;background: #f0f; height: auto; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.1vw;"> --> |
|||
<z-paging ref="paging" v-model="data" :pagingStyle='styleObject' @query="queryList" :refresher-enabled="true"> |
|||
|
|||
<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 v-show="item.type=='1'" > |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_family.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_notFamily.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text lass="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<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;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;flex: 1;"> {{item.pname}}</text> |
|||
<text |
|||
style="margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 亲情卡--> |
|||
<view v-show="item.type=='2'"> |
|||
|
|||
<view class="item3" :class="{ item4: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_notAffection.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text lass="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<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;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;flex: 1;"> {{item.pname}}</text> |
|||
<text |
|||
style="margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<!-- 企业卡--> |
|||
<view v-show="item.type=='3'"> |
|||
|
|||
<view class="item5" :class="{ item6: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_enterprise.png" mode="aspectFill" |
|||
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_notEnterprise.png" mode="aspectFill" |
|||
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号:{{item.serialNumber}}</text> |
|||
<text lass="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<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;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;flex: 1;"> {{item.pname}}</text> |
|||
<text |
|||
style="margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</z-paging> |
|||
|
|||
<!-- </view> --> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject: { |
|||
'margin-top': '68vw', |
|||
'border-top-left-radius': '25px', |
|||
'border-top-right-radius': '25px', |
|||
'background': '#fff', |
|||
'padding-top': '10px', |
|||
}, |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
data2: [], |
|||
currentTab: 0, |
|||
} |
|||
}, |
|||
created() { |
|||
this.$bus.$on('order', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
}, |
|||
onLoad() { |
|||
|
|||
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.pickUpCardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
|
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/bind/bind_pickUpCard' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
console.log("aaa",item); |
|||
if (item.showBtn) { |
|||
// 正常 |
|||
|
|||
if(item.type=='1'){ |
|||
console.log("111",item); |
|||
// 家庭卡 |
|||
uni.navigateTo({ |
|||
url: '/pages/detail/detail_family?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
if(item.type=='2'){ |
|||
console.log("222",item); |
|||
// 亲情卡 |
|||
uni.navigateTo({ |
|||
url: '/pages/detail/detail_affeection?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
if(item.type=='3'){ |
|||
console.log("333",item); |
|||
// 企业卡 |
|||
uni.navigateTo({ |
|||
url: '/pages/detail/detail_enterprise?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
|
|||
} else { |
|||
// 过期 已完成 |
|||
if(item.type=='1'){ |
|||
// 家庭卡 |
|||
uni.navigateTo({ |
|||
url: '/pages/detail/detail_family2?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
if(item.type=='2'){ |
|||
// 亲情卡 |
|||
uni.navigateTo({ |
|||
url: '/pages/detail/detail_affeection2?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
if(item.type=='3'){ |
|||
// 企业卡 |
|||
uni.navigateTo({ |
|||
url: '/pages/detail/detail_enterprise2?sid=' + item.sid |
|||
}) |
|||
} |
|||
} |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_bj1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
/* height: 13vw; */ |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
/* 加载背景图 */ |
|||
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/bindBtn_bj1.png); */ |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
/* background-size: 100% 100%; */ |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_family.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 5px); |
|||
|
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 5px); |
|||
} |
|||
|
|||
.item3 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_affection.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 5px); |
|||
} |
|||
|
|||
.item4 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 5px); |
|||
|
|||
} |
|||
|
|||
|
|||
.item5 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_enterprise.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 5px); |
|||
} |
|||
|
|||
.item6 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 5px); |
|||
} |
|||
|
|||
|
|||
.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,268 @@ |
|||
<template> |
|||
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|||
<z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'> |
|||
|
|||
<view v-for="(item,index) in data" |
|||
style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;"> |
|||
|
|||
<view v-show="item.type=='1'" > |
|||
<view class="item" :class="{ item2: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 25px 15px; "> |
|||
|
|||
<view style="margin-left: 10px; margin-right: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/personNormal.png" mode="aspectFill" |
|||
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/peronLose.png" mode="aspectFill" |
|||
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view style=" display: flex;flex-direction: column;margin-right: 10px;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态：</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view v-show="item.type=='2'"> |
|||
<view class="item3" :class="{ item4: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 25px 15px;"> |
|||
|
|||
<view style="margin-left: 10px; margin-right: 10px;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftNormal.png" mode="aspectFill" |
|||
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftLose.png" mode="aspectFill" |
|||
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
</view> |
|||
|
|||
<view style=" display: flex;flex-direction: column; margin-right: 10px;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态：</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view v-show="item.type=='3'"> |
|||
<view class="item5" :class="{ item6: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 25px 15px;"> |
|||
|
|||
<view style="margin-left: 10px; margin-right: 10px;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseNormal.png" mode="aspectFill" |
|||
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/enterpriseLose.png" mode="aspectFill" |
|||
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
</view> |
|||
|
|||
<view style=" display: flex;flex-direction: column; margin-right: 10px;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态：</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</z-paging> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject:{ |
|||
'padding-top': '10px', |
|||
}, |
|||
data: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.$bus.$on('order', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
this.$bus.$on('order2', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.orderListByUserSid({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"userSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
detail(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_record_detail?sid=' + sid |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_perosn_item1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_person_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item3 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_gift_item3.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item4 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_gift_item4.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item5 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item5.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item6 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item6.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,271 @@ |
|||
<template> |
|||
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|||
<z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'> |
|||
|
|||
<view v-for="(item,index) in data" |
|||
style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;"> |
|||
|
|||
<view v-show="item.type=='1'"> |
|||
<view class="item" :class="{ item2: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 25px 15px; "> |
|||
|
|||
<view style="margin-left: 10px; margin-right: 10px;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_family.png" mode="aspectFill" |
|||
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_notFamily.png" mode="aspectFill" |
|||
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view style=" display: flex;flex-direction: column;margin-right: 10px;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态：</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view v-show="item.type=='2'"> |
|||
<view class="item3" :class="{ item4: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 25px 15px;"> |
|||
|
|||
|
|||
<view style="margin-left: 10px; margin-right: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png" mode="aspectFill" |
|||
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_notAffection.png" mode="aspectFill" |
|||
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
</view> |
|||
|
|||
<view style=" display: flex;flex-direction: column; margin-right: 10px;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态：</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view v-show="item.type=='3'"> |
|||
<view class="item5" :class="{ item6: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 25px 15px;"> |
|||
|
|||
<view style="margin-left: 10px; margin-right: 10px;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_enterprise.png" mode="aspectFill" |
|||
v-show="item.state=='未提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/home_notEnterprise.png" mode="aspectFill" |
|||
v-show="item.state=='已提货'" style="width: 50px;height: 50px;" /> |
|||
|
|||
</view> |
|||
|
|||
<view style=" display: flex;flex-direction: column; margin-right: 10px;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态：</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</z-paging> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject: { |
|||
'padding-top': '10px', |
|||
}, |
|||
data: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.$bus.$on('order', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
this.$bus.$on('order2', msg => { |
|||
console.log("aaaaaaaaaaa4", msg) |
|||
this.$refs.paging.reload(true); |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.orderListByUserSid({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"userSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
detail(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_record_detail?sid=' + sid |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_family_item1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
|
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_family_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item3 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_affection_item1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item4 { |
|||
|
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_affection_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item5 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item1.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item6 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_enterprise_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
</style> |
|||
@ -1,149 +0,0 @@ |
|||
<template> |
|||
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|||
<z-paging ref="paging" v-model="data" @query="queryList" :auto='true'> |
|||
|
|||
<view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-top: 15px;margin-left: 10px;margin-right: 10px;"> |
|||
<!-- <view |
|||
style="display: flex;flex-direction: column;border: 1px solid #e29a68;width: 100%;border-radius: 20rpx;margin-top: 8px;" |
|||
@click="detail(item.orderSid)"> |
|||
|
|||
<view class="use"> |
|||
<image style="width: 70rpx;height: 70rpx;position: absolute;right: 40px;" |
|||
src="../../static/card_line.png"></image> |
|||
<image src="../../static/gift.png" style="width: 30px;height: 30px;padding-left: 6px;"></image> |
|||
<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;"> |
|||
<view style="font-size: 14px;padding: 2px;padding-left: 5px;padding-top: 7px;">{{item.code}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex-shrink: 0;padding: 9px;font-size: 13px;z-index: 1;font-weight: 600;">{{item.reserveDate}} |
|||
</view> |
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: column; padding: 10px;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;background-color: #fdf0ee;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;"> |
|||
<text>礼包类型：</text> |
|||
<text>{{item.bagName}}</text> |
|||
</view> |
|||
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text>提货门店：</text> |
|||
<text>{{item.store}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> --> |
|||
|
|||
<view class="item" :class="{ item2: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 15px 5px;" |
|||
> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill" v-show="item.state=='未提货'" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill" v-show="item.state=='已提货'" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<view style=" display: flex;flex-direction: column;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话：</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态：</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</z-paging> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
data: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.orderListByUserSid({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"userSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
detail(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_record_detail?sid=' + sid |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.item{ |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item2{ |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
|
Before Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 363 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 363 B |
|
After Width: | Height: | Size: 507 B |
|
After Width: | Height: | Size: 880 B |
|
Before Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 558 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 562 B |
|
After Width: | Height: | Size: 689 B |
|
Before Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 166 B |
Loading…
Reference in new issue