liupopo
1 year ago
commit
5a66559820
466 changed files with 78084 additions and 0 deletions
@ -0,0 +1,131 @@ |
|||
# ---> Node |
|||
# Logs |
|||
logs |
|||
*.log |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
lerna-debug.log* |
|||
.pnpm-debug.log* |
|||
|
|||
# Diagnostic reports (https://nodejs.org/api/report.html) |
|||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json |
|||
|
|||
# Runtime data |
|||
pids |
|||
*.pid |
|||
*.seed |
|||
*.pid.lock |
|||
|
|||
# Directory for instrumented libs generated by jscoverage/JSCover |
|||
lib-cov |
|||
|
|||
# Coverage directory used by tools like istanbul |
|||
coverage |
|||
*.lcov |
|||
|
|||
# nyc test coverage |
|||
.nyc_output |
|||
|
|||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) |
|||
.grunt |
|||
|
|||
# Bower dependency directory (https://bower.io/) |
|||
bower_components |
|||
|
|||
# node-waf configuration |
|||
.lock-wscript |
|||
|
|||
# Compiled binary addons (https://nodejs.org/api/addons.html) |
|||
build/Release |
|||
|
|||
# Dependency directories |
|||
node_modules/ |
|||
jspm_packages/ |
|||
|
|||
# Snowpack dependency directory (https://snowpack.dev/) |
|||
web_modules/ |
|||
|
|||
# TypeScript cache |
|||
*.tsbuildinfo |
|||
|
|||
# Optional npm cache directory |
|||
.npm |
|||
|
|||
# Optional eslint cache |
|||
.eslintcache |
|||
|
|||
# Microbundle cache |
|||
.rpt2_cache/ |
|||
.rts2_cache_cjs/ |
|||
.rts2_cache_es/ |
|||
.rts2_cache_umd/ |
|||
|
|||
# Optional REPL history |
|||
.node_repl_history |
|||
|
|||
# Output of 'npm pack' |
|||
*.tgz |
|||
|
|||
# Yarn Integrity file |
|||
.yarn-integrity |
|||
|
|||
# dotenv environment variables file |
|||
.env |
|||
.env.test |
|||
.env.production |
|||
|
|||
# parcel-bundler cache (https://parceljs.org/) |
|||
.cache |
|||
.parcel-cache |
|||
|
|||
# Next.js build output |
|||
.next |
|||
out |
|||
|
|||
# Nuxt.js build / generate output |
|||
.nuxt |
|||
dist |
|||
|
|||
# Gatsby files |
|||
.cache/ |
|||
# Comment in the public line in if your project uses Gatsby and not Next.js |
|||
# https://nextjs.org/blog/next-9-1#public-directory-support |
|||
# public |
|||
|
|||
# vuepress build output |
|||
.vuepress/dist |
|||
|
|||
# Serverless directories |
|||
.serverless/ |
|||
|
|||
# FuseBox cache |
|||
.fusebox/ |
|||
|
|||
# DynamoDB Local files |
|||
.dynamodb/ |
|||
|
|||
# TernJS port file |
|||
.tern-port |
|||
|
|||
# Stores VSCode versions used for testing VSCode extensions |
|||
.vscode-test |
|||
|
|||
# yarn v2 |
|||
.yarn/cache |
|||
.yarn/unplugged |
|||
.yarn/build-state.yml |
|||
.yarn/install-state.gz |
|||
.pnp.* |
|||
|
|||
**/.idea/ |
|||
**/target/ |
|||
*.iml |
|||
*.ipr |
|||
*.iws |
|||
*.log |
|||
|
|||
### VS Code ### |
|||
.vscode/ |
|||
.hbuilderx/ |
|||
unpackage/ |
|||
@ -0,0 +1,97 @@ |
|||
<script> |
|||
import config from "common/config.js"; |
|||
import { |
|||
navParams |
|||
} from "common/nav-calc-utils.js"; |
|||
export default { |
|||
globalData: { |
|||
wxSilentLoginURL: config.baseUrl + "/lpkcustomer/wxSilentLogin", |
|||
sid: "", |
|||
token: "", |
|||
navInfo: { |
|||
|
|||
} |
|||
}, |
|||
onLaunch: function() { |
|||
|
|||
const updateManager = uni.getUpdateManager(); |
|||
|
|||
updateManager.onCheckForUpdate(function(res) { |
|||
// 请求完新版本信息的回调 |
|||
console.log(res.hasUpdate); |
|||
}); |
|||
|
|||
updateManager.onUpdateReady(function(res) { |
|||
uni.showModal({ |
|||
title: '更新提示', |
|||
content: '新版本已经准备好，是否重启应用？', |
|||
success(res) { |
|||
if (res.confirm) { |
|||
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 |
|||
updateManager.applyUpdate(); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
updateManager.onUpdateFailed(function(res) { |
|||
// 新的版本下载失败 |
|||
}); |
|||
|
|||
|
|||
this.globalData.navInfo = navParams() |
|||
|
|||
// let _this = this; |
|||
// wx.login({ |
|||
// success: function(res) { |
|||
// uni.request({ |
|||
// // 组装请求地址 |
|||
// url:_this.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 { |
|||
// // 成功后跳转主页 |
|||
// _this.globalData.sid = res.data.data.sid |
|||
// console.log("用户sid",_this.globalData.sid) |
|||
// } |
|||
// } else { |
|||
// } |
|||
// }, |
|||
// fail: (err) => { |
|||
// } |
|||
// }); |
|||
// }, |
|||
// fail: function(res) { |
|||
// } |
|||
// }); |
|||
}, |
|||
onShow: function() { |
|||
console.log('App Show') |
|||
}, |
|||
onHide: function() { |
|||
console.log('App Hide') |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
/*每个页面公共css */ |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
# yxt-yyth-ui-miniprogram |
|||
|
|||
预约提货系统小程序 |
|||
@ -0,0 +1,130 @@ |
|||
/** |
|||
* 这里是uni-app内置的常用样式变量 |
|||
* |
|||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 |
|||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App |
|||
* |
|||
*/ |
|||
|
|||
/** |
|||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 |
|||
* |
|||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 |
|||
*/ |
|||
|
|||
/* 颜色变量 */ |
|||
|
|||
/* 行为相关颜色 */ |
|||
$uni-color-primary: #007aff; |
|||
$uni-color-success: #4cd964; |
|||
$uni-color-warning: #f0ad4e; |
|||
$uni-color-error: #dd524d; |
|||
|
|||
/* 文字基本颜色 */ |
|||
$uni-text-color: #333; //基本色 |
|||
$uni-text-color-inverse: #fff; //反色 |
|||
$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息 |
|||
$uni-text-color-placeholder: #808080; |
|||
$uni-text-color-disable: #c0c0c0; |
|||
|
|||
/* 背景颜色 */ |
|||
$uni-bg-color: #ffffff; |
|||
$uni-bg-color-grey: #f8f8f8; |
|||
$uni-bg-color-hover: #f1f1f1; //点击状态颜色 |
|||
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色 |
|||
|
|||
/* 边框颜色 */ |
|||
$uni-border-color: #c8c7cc; |
|||
|
|||
/* 尺寸变量 */ |
|||
|
|||
/* 文字尺寸 */ |
|||
$uni-font-size-sm: 12px; |
|||
$uni-font-size-base: 14px; |
|||
$uni-font-size-lg: 16; |
|||
|
|||
/* 图片尺寸 */ |
|||
$uni-img-size-sm: 20px; |
|||
$uni-img-size-base: 26px; |
|||
$uni-img-size-lg: 40px; |
|||
|
|||
/* Border Radius */ |
|||
$uni-border-radius-sm: 2px; |
|||
$uni-border-radius-base: 3px; |
|||
$uni-border-radius-lg: 6px; |
|||
$uni-border-radius-circle: 50%; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-row-sm: 5px; |
|||
$uni-spacing-row-base: 10px; |
|||
$uni-spacing-row-lg: 15px; |
|||
|
|||
/* 垂直间距 */ |
|||
$uni-spacing-col-sm: 4px; |
|||
$uni-spacing-col-base: 8px; |
|||
$uni-spacing-col-lg: 12px; |
|||
|
|||
/* 透明度 */ |
|||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 |
|||
|
|||
/* 文章场景相关 */ |
|||
$uni-color-title: #2c405a; // 文章标题颜色 |
|||
$uni-font-size-title: 20px; |
|||
$uni-color-subtitle: #555555; // 二级标题颜色 |
|||
$uni-font-size-subtitle: 26px; |
|||
$uni-color-paragraph: #3f536e; // 文章段落颜色 |
|||
$uni-font-size-paragraph: 15px; |
|||
|
|||
/** |
|||
* 下面为当前APP自己定义的公共样式 |
|||
*/ |
|||
.app-container { |
|||
padding: 20px; |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
} |
|||
|
|||
.u-block { |
|||
padding: 14px; |
|||
&__section { |
|||
margin-bottom: 10px; |
|||
} |
|||
&__title { |
|||
margin-top: 10px; |
|||
font-size: 15px; |
|||
color: $u-content-color; |
|||
margin-bottom: 10px; |
|||
} |
|||
&__flex { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
} |
|||
} |
|||
|
|||
// 使用了cell组件的icon图片样式 |
|||
.u-cell-icon { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.u-page { |
|||
padding: 15px 15px 40px 15px; |
|||
} |
|||
|
|||
.u-demo-block { |
|||
flex: 1; |
|||
margin-bottom: 23px; |
|||
|
|||
&__content { |
|||
@include flex(column); |
|||
} |
|||
|
|||
&__title { |
|||
font-size: 14px; |
|||
color: rgb(143, 156, 162); |
|||
margin-bottom: 8px; |
|||
@include flex; |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
import Vue from 'vue' |
|||
const bus = new Vue() |
|||
export default bus |
|||
@ -0,0 +1,15 @@ |
|||
/** |
|||
* config 配置项说明 |
|||
* baseUrl = "", // 接口的根地址
|
|||
* tokenName = "Authorization", // 请求头中token的名字，与服务器端对应
|
|||
* loginTimeoutCode : "5000", // 登录超时或失效的情况下，服务器端返回的错误码
|
|||
* loginTimeoutPage = "/pages/login/index", // 登录超时或失效的情况下，跳转到的登录页面
|
|||
*/ |
|||
module.exports = { |
|||
// baseUrl: 'http://192.168.2.106:7201', // 本地
|
|||
// baseUrl: 'https://lpk.yyundong.com/lpkapi', // 测试服务器
|
|||
baseUrl: 'https://supervise.yxtsoft.com/lpkapi', // 正式服务器
|
|||
tokenName: "Authorization", // 请求头中token的名字，与服务器端对应
|
|||
loginTimeoutCode: "5001", // 登录超时或失效的情况下，服务器端返回的错误码
|
|||
loginTimeoutPage: "/pages/login/index", // 登录超时或失效的情况下，跳转到的登录页面
|
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
function stringIsEmpty(str) { |
|||
return str === undefined || str === null || str === '' |
|||
} |
|||
|
|||
function stringIsNotEmpty(str) { |
|||
return !stringIsEmpty(str) |
|||
} |
|||
|
|||
export { |
|||
stringIsEmpty, |
|||
stringIsNotEmpty |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
/** |
|||
* getQueryString 二维码参数转换提取 |
|||
* 参数 |
|||
* url 二维码参数 |
|||
* name 需要提取的参数 |
|||
*/ |
|||
function getQueryString(url, name) { |
|||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)",'i'); |
|||
var r = url.substr(1).match(reg) |
|||
|
|||
if (r != null) { |
|||
|
|||
return r[2] |
|||
|
|||
} |
|||
|
|||
return null; |
|||
} |
|||
|
|||
export { |
|||
getQueryString |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,84 @@ |
|||
function navParams() { |
|||
|
|||
let params = { |
|||
// 是否支持自定义导航栏(小程序 pc版 false)
|
|||
supportCustomBar: true, |
|||
// 胶囊
|
|||
menuButton: { |
|||
width: 0, |
|||
height: 0 |
|||
}, |
|||
// 导航栏
|
|||
// 可自定义，wx小程序会强制更改
|
|||
navBar: { |
|||
height: 0, |
|||
// 导航栏字体大小 wx小程序 ios：13，Android：17
|
|||
fontSize: 0, |
|||
// 导航栏样式 wx小程序时：ios：center，Android：left
|
|||
style: '', |
|||
// 导航栏可用宽度 wx小程序时 ios，Android：屏幕宽-胶囊
|
|||
enableWidth: 0, |
|||
// 导航栏不可用宽度 wx小程序时 ios，Android：胶囊+胶囊距离屏幕右侧边界的距离
|
|||
disableWidth: 0 |
|||
}, |
|||
window: { |
|||
width: 0, |
|||
height: 0 |
|||
}, |
|||
os: { |
|||
osName: '' |
|||
}, |
|||
// 导航栏+状态栏高度
|
|||
navStatusHeight: '0px', |
|||
// 状态栏高度
|
|||
statusBarHeight: 0, |
|||
unit: 'px' |
|||
} |
|||
|
|||
// 同步获取信息
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
// 状态栏高度
|
|||
params.statusBarHeight = info.statusBarHeight; |
|||
params.window.width = info.screenWidth |
|||
params.window.height = info.screenHeight |
|||
params.os.osName = info.osName |
|||
|
|||
// 获取胶囊相关内容
|
|||
// #ifdef MP-WEIXIN
|
|||
let menuButton = uni.getMenuButtonBoundingClientRect(); |
|||
params.menuButton.width = menuButton.width; |
|||
params.menuButton.height = menuButton.height; |
|||
let paddingTop = menuButton.top - params.statusBarHeight; |
|||
let paddingBottom = 0; |
|||
if (params.os.osName === 'ios') { |
|||
paddingBottom = paddingTop * 2; |
|||
params.navBar.fontSize = 13; |
|||
params.navBar.style = 'center'; |
|||
} else if (params.os.osName === 'android') { |
|||
paddingBottom = paddingTop; |
|||
params.navBar.fontSize = 17; |
|||
params.navBar.style = 'left'; |
|||
} else if (params.os.osName === 'windows' || params.os.osName === 'mac') { |
|||
params.supportCustomBar = false; |
|||
} else { |
|||
// 未知系统按照Android处理
|
|||
paddingBottom = paddingTop; |
|||
params.navBar.fontSize = 17; |
|||
params.navBar.style = 'left'; |
|||
} |
|||
params.navBar.height = params.menuButton.height + paddingTop + paddingBottom; |
|||
// 导航栏可用宽度 屏幕左边界到胶囊左边界
|
|||
params.navBar.enableWidth = menuButton.left; |
|||
params.navBar.disableWidth = params.window.width - params.navBar.enableWidth; |
|||
// #endif
|
|||
|
|||
params.navStatusHeight = params.statusBarHeight + params.navBar.height |
|||
|
|||
console.log(params); |
|||
return params |
|||
} |
|||
|
|||
export { |
|||
navParams |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
// 10.00 10.60
|
|||
function convertPrice(str) { |
|||
if (str == undefined || str == null || str == '') |
|||
return '' |
|||
if (str.endsWith('.00')) { |
|||
return str.substring(0, str.length - 3) |
|||
} else if (str.endsWith('0') && str.includes('.')) { |
|||
return str.substring(0, str.length - 1) |
|||
} |
|||
|
|||
return str |
|||
} |
|||
export { |
|||
convertPrice |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
uni.$u.props.gap.bgColor = '#f3f4f6' |
|||
uni.$u.props.gap.height = '10' |
|||
@ -0,0 +1,16 @@ |
|||
const { |
|||
http |
|||
} = uni.$u |
|||
|
|||
export default { |
|||
login: (params, config = {}) => http.post('/login', params, { |
|||
custom: { |
|||
catchError: true, |
|||
showFailMessage: true |
|||
} |
|||
}), |
|||
sayhello: (params = {}) => http.get("/sayb", params), |
|||
|
|||
// 查看预警信息
|
|||
selectBusinessRiskInfo: (params = {}) => http.post("/v1/businessData/selectBusinessRiskInfo", params) |
|||
} |
|||
@ -0,0 +1,72 @@ |
|||
import request from '@/utils/requester.js' |
|||
|
|||
export default { |
|||
login: (params = {}) => request.post("/wxmpapi/sysuser/login", params), |
|||
wxBindMobile: (params = {}) => request.post("/lpkcustomer/wxBindMobile", params), |
|||
// 不显示loading true
|
|||
// 提货卡列表
|
|||
cardList: (params = {}) => request.post("/lpkgiftcard/gifCardByCustomerSid", params, {}, {}, true), |
|||
// 福礼卡列表
|
|||
gifcardList: (params = {}) => request.post("/empcardgift/gifCardByCustomerSid", params, {}, {}, true), |
|||
// 企业卡列表
|
|||
empcardList: (params = {}) => request.post("/empcard/getEmpCardByCustomerSid", params, {}, {}, true), |
|||
// 提货卡详情
|
|||
cardDetail: (params = {}) => request.get("/lpkgiftcard/getGifCardBySid/" + params, params, {}, {}, true), |
|||
// 福礼卡详情
|
|||
gifcardDetail: (params = {}) => request.get("/empcardgift/getGifCardBySid/" + params, params, {}, {}, true), |
|||
// 企业卡详情
|
|||
empCardDetail: (params = {}) => request.get("/empcard/getEmpCardBySid/" + params, params, {}, {}, true), |
|||
// 福礼卡分享 改变卡状态
|
|||
shareEmpCard: (params = {}) => request.get("/empcardgift/shareEmpCard/" + params, params, {}, {}, true), |
|||
// 提货日期 周六日的日期组合
|
|||
isSaturAndSun: (params = {}) => request.get("/lpkgiftcard/isSaturAndSun/" + params, params, {}, {}, true), |
|||
// 提货日期 周六日的日期组合
|
|||
isSaturAndSun2: (params = {}) => request.get("/empcardgift/isSaturAndSun/" + params, params, {}, {}, true), |
|||
// 提货日期 周六日的日期组合
|
|||
isSaturAndSun3: (params = {}) => request.get("/empcard/isSaturAndSun/" + params, params, {}, {}, true), |
|||
// 提货卡预约初始化
|
|||
cardBooking: (params = {}) => request.get("/lpkgiftcard/getReservationBySid/" + params, params, {}, {}, true), |
|||
// 提货卡预约保存
|
|||
cardBookingSave: (params = {}) => request.post("/lpksreservoorder/submission", params), |
|||
// 提货卡转赠保存
|
|||
generateEmpCard: (params = {}) => request.post("/empcardgift/generateEmpCard", params), |
|||
// 福礼卡预约保存
|
|||
gifcardBookingSave: (params = {}) => request.post("/empsreservoorder/submission", params), |
|||
// 福利卡转赠保存
|
|||
generateEmpCardGift: (params = {}) => request.post("/empcardgift/generateEmpCardGift", params), |
|||
// 企业卡生成福利卡
|
|||
empcardSave: (params = {}) => request.post("/empcardgift/generateCard", params), |
|||
// 企业卡预约保存
|
|||
empcardBookingSave: (params = {}) => request.post("/empsreservoorder/submissionEmp", params), |
|||
// 绑定提货卡
|
|||
cardBind: (params = {}) => request.post("/lpkgiftcard/bindCard", params), |
|||
// 绑定企业卡
|
|||
empcardBind: (params = {}) => request.post("/empcard/bindCard", params), |
|||
// 单一提货卡预约记录
|
|||
orderByCardSid: (params = {}) => request.get("/lpksreservoorder/orderByCardSid/" + params, params, {}, {}, true), |
|||
// 预约记录
|
|||
orderListByUserSid: (params = {}) => request.post("/lpksreservoorder/orderListByUserSid", params, {}, {}, true), |
|||
// 预约记录详情
|
|||
orderDetails: (params = {}) => request.get("/lpksreservoorder/orderDetails/" + params, params, {}, {}, true), |
|||
// 商品详情
|
|||
goodsDetail: (params = {}) => request.get("/lpkgoods/goodsDetails/" + params, params, {}, {}, true), |
|||
// 提货点
|
|||
address: (params = {}) => request.post("/lpkstore/getAllStoreByQuery", params, {}, {}, true), |
|||
|
|||
|
|||
// 2024-1-13 新需求接口 所有卡数据整合到一个页面
|
|||
// 新提货卡列表
|
|||
pickUpCardList: (params = {}) => request.post("/lpkgiftcard/gifCardsByCustomerSid", params, {}, {}, true), |
|||
// 新绑定提货卡
|
|||
pickUpCardBind: (params = {}) => request.post("/lpkgiftcard/bindAllCard", params), |
|||
|
|||
// 云菜窖列表
|
|||
appletGiftBagList: (params = {}) => request.get("/appletgiftbag/appletGiftBagList", params), |
|||
// 云菜窖列表
|
|||
getGiftBagBySid: (params = {}) => request.get("/appletgiftbag/getGiftBagBySid/"+params, params), |
|||
// 自选菜窖 商品信息
|
|||
getAllGiftBag: (params = {}) => request.get("/lpkgoods/getAllGiftBag", params), |
|||
// 結算商品
|
|||
createOrder: (params = {}) => request.post("/empsreservoorder/createOrder", params), |
|||
|
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
function shortToast(str) { |
|||
uni.showToast({ |
|||
title: str, |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
|
|||
function longToast(str) { |
|||
uni.showToast({ |
|||
title: str, |
|||
icon: 'none', |
|||
duration: 3500 |
|||
}) |
|||
} |
|||
|
|||
export { |
|||
shortToast, |
|||
longToast |
|||
} |
|||
@ -0,0 +1,240 @@ |
|||
<template> |
|||
|
|||
<view> |
|||
|
|||
<!-- 左侧布局 --> |
|||
<view v-if="navStyle==='left'" class="_navLayout" |
|||
:style="{'background': navBackground,'height':navStatusHeight}"> |
|||
<!-- 状态栏 --> |
|||
<view :style="{'height':statusBarHeight}"></view> |
|||
<!-- 导航栏,去掉了不可用的宽度 --> |
|||
<view class="_nav-real" |
|||
:style="{'height':navHeight,'width':'calc('+enableWidth+' - 9px)' ,'margin-left':'9px'}"> |
|||
<view class="_navIcon2"> |
|||
<image v-if="showIcon" src="../../static/wx_back.png" |
|||
style="width: 20px;height: 20px;padding-right: 6px;" @click="clickIcon"></image> |
|||
</view> |
|||
<!-- 标题布局 --> |
|||
<view class="_nav-title2" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}"> |
|||
{{navTitle}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 居中布局 --> |
|||
<!-- ②这里不使用props改用data --> |
|||
<view v-if="navStyle==='center'&&supportCustomBar" class="_navLayout" |
|||
:style="{'background': navBackground,'height':navStatusHeight}"> |
|||
<!-- 状态栏 --> |
|||
<view :style="{'height':statusBarHeight}"></view> |
|||
<!-- 导航栏,去掉了不可用的宽度 --> |
|||
<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}"> |
|||
<!-- 按键区域，占用为不可用的宽度 --> |
|||
<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}"> |
|||
<image v-if="showIcon" src="../../static/wx_back.png" style="width: 23px;height: 23px;" |
|||
@click="clickIcon"></image> |
|||
</view> |
|||
<!-- 标题布局 --> |
|||
<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}"> |
|||
{{navTitle}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 占位的前提，必须支持自定义导航栏 --> |
|||
<view v-if="supportCustomBar"> |
|||
<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* 全局默认背景透明，supportChange= false 会对默认色变成不透明 |
|||
*/ |
|||
const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)"; |
|||
|
|||
export default { |
|||
name: "NavBar", |
|||
props: { |
|||
color: { |
|||
type: String, |
|||
default: "white" |
|||
}, |
|||
// 标题 |
|||
navTitle: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 是否支持透明 |
|||
supportChange: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 背景色 |
|||
// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明 |
|||
navBg: { |
|||
type: String, |
|||
default: defaultTransparentBg |
|||
}, |
|||
// 渐变开始的高度 0->1 |
|||
startChangeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 渐变停止的高度 |
|||
// ->1 |
|||
endChangeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 显示icon |
|||
showIcon: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// ①用一个新的变量接收props属性 |
|||
navBackground: this.navBg, |
|||
navStatusHeight: 0, |
|||
statusBarHeight: 0, |
|||
navHeight: 0, |
|||
disableWidth: 0, |
|||
enableWidth: 0, |
|||
fontSize: 0, |
|||
navStyle: 'left', |
|||
supportCustomBar: true, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// mounted能拿到data值 |
|||
if (!this.supportChange) { |
|||
if (this.navBg === defaultTransparentBg) { |
|||
// 使用默认的时候由于是全透明，需要改成不透明 |
|||
// ③达到修改props属性的结果 |
|||
this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)") |
|||
} |
|||
} |
|||
// 赋值样式 |
|||
this.navStyle = getApp().globalData.navInfo.navBar.style |
|||
}, |
|||
created() { |
|||
// create阶段能拿取到了props的值,需要使用this.变量名 |
|||
// 但是拿不到data的值 |
|||
// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用 |
|||
let navInfo = getApp().globalData.navInfo |
|||
// 总高度 |
|||
this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit |
|||
this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit |
|||
this.navHeight = navInfo.navBar.height + navInfo.unit |
|||
this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit |
|||
this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit |
|||
this.fontSize = navInfo.navBar.fontSize + navInfo.unit |
|||
this.supportCustomBar = navInfo.supportCustomBar |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 自定义颜色渐变的值 |
|||
*/ |
|||
alpha(res) { |
|||
if (!this.supportChange) |
|||
return '1.0' |
|||
if (res.scrollTop > this.startChangeHeight) { |
|||
// 可以开始变化了 |
|||
if (res.scrollTop < this.endChangeHeight) { |
|||
return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + '' |
|||
} else { |
|||
// 保持长显示 |
|||
return '1.0' |
|||
} |
|||
} else { |
|||
// 保持无色 |
|||
return '0.0' |
|||
} |
|||
}, |
|||
/** |
|||
* 提供默认的颜色变化功能 |
|||
*/ |
|||
defaultColorBgAlpha(res) { |
|||
let x = this.alpha(res) |
|||
this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x + |
|||
") 0.75%,rgba(255,177,118," + x + ") 99.78%)" |
|||
}, |
|||
clickIcon() { |
|||
// uni.navigateBack() |
|||
|
|||
const pages = getCurrentPages() |
|||
// 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回 |
|||
if (pages.length > 1) { |
|||
uni.navigateBack(1) |
|||
return; |
|||
}else{ |
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
} |
|||
|
|||
return; |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._navLayout { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
z-index: 999; |
|||
top: 0; |
|||
position: fixed; |
|||
} |
|||
|
|||
._nav-real { |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
|
|||
._nav-title { |
|||
text-align: center; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
color: white; |
|||
} |
|||
|
|||
._nav-title2 { |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
color: white; |
|||
padding-left: 5px; |
|||
flex: 1; |
|||
} |
|||
|
|||
._navIcon { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding-left: 3px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
._navIcon2 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
flex-shrink: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,101 @@ |
|||
<template> |
|||
|
|||
<view class="user-item-content" @click="click"> |
|||
<view class="user-item-left"> |
|||
<image :src="src" style="width: 40rpx;height: 40rpx;" mode="aspectFit"></image> |
|||
<text class="user-item-textBlack">{{text}}</text> |
|||
</view> |
|||
<view class="user-item-right"> |
|||
<text class="user-item-textBlack2">{{notes}}</text> |
|||
<image class="user-item-right_img" src="../../static/baseIcon/zy.png"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
src: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
text: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
notes: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
clickId: { |
|||
type: String, |
|||
default: "0" |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
}, |
|||
methods: { |
|||
click() { |
|||
var clickId = this.$props.clickId; |
|||
this.$emit("click", clickId) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.user-item-content { |
|||
width: 100%; |
|||
height: 120rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding-left: 40rpx; |
|||
justify-content: space-between; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
box-sizing: border-box; |
|||
|
|||
.user-item-left { |
|||
display: flex; |
|||
flex-direction: row; |
|||
height: 89rpx; |
|||
align-items: center; |
|||
flex: 1; |
|||
box-sizing: border-box; |
|||
|
|||
.user-item-textBlack { |
|||
color: #333333; |
|||
margin-left: 15px; |
|||
font-size: 30rpx; |
|||
height: 89rpx; |
|||
line-height: 89rpx; |
|||
} |
|||
} |
|||
|
|||
.user-item-right { |
|||
display: flex; |
|||
flex-direction: row; |
|||
height: 89rpx; |
|||
align-items: center; |
|||
|
|||
.user-item-right_img { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
margin-right: 35rpx; |
|||
} |
|||
|
|||
.user-item-textBlack2 { |
|||
color: #ccc; |
|||
font-size: 25rpx; |
|||
height: 89rpx; |
|||
line-height: 89rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<script> |
|||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
|||
CSS.supports('top: constant(a)')) |
|||
document.write( |
|||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + |
|||
(coverSupport ? ', viewport-fit=cover' : '') + '" />') |
|||
</script> |
|||
<title></title> |
|||
<!--preload-links--> |
|||
<!--app-context--> |
|||
</head> |
|||
<body> |
|||
<div id="app"><!--app-html--></div> |
|||
<script type="module" src="/main.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,52 @@ |
|||
import App from './App' |
|||
import Vue from 'vue' |
|||
|
|||
// vuex
|
|||
import store from './store' |
|||
|
|||
import api from '@/common/request.api.js' |
|||
Vue.prototype.$api = api |
|||
|
|||
Vue.config.productionTip = false |
|||
App.mpType = 'app' |
|||
|
|||
import { |
|||
stringIsEmpty, |
|||
stringIsNotEmpty |
|||
} from "@/common/empty.js" |
|||
Vue.prototype.stringIsEmpty = stringIsEmpty |
|||
Vue.prototype.stringIsNotEmpty = stringIsNotEmpty |
|||
|
|||
import { |
|||
getQueryString, |
|||
} from "@/common/getQuery.js" |
|||
Vue.prototype.getQueryString = getQueryString |
|||
|
|||
import { |
|||
shortToast, |
|||
longToast |
|||
} from "@/common/toast.js" |
|||
Vue.prototype.shortToast = shortToast |
|||
Vue.prototype.longToast = longToast |
|||
|
|||
|
|||
import bus from './common/bus.js'; |
|||
|
|||
//挂载到this上
|
|||
Vue.prototype.$bus = bus; |
|||
|
|||
|
|||
import {pay} from './uni_modules/common-pay/utils/pay.js' |
|||
//挂载到this上
|
|||
Vue.prototype.$pay = pay; |
|||
|
|||
|
|||
import {convertPrice} from './common/price.js' |
|||
//挂载到this上
|
|||
Vue.prototype.convertPrice = convertPrice; |
|||
|
|||
const app = new Vue({ |
|||
store, |
|||
...App |
|||
}) |
|||
app.$mount() |
|||
@ -0,0 +1,73 @@ |
|||
{ |
|||
"name" : "yxt-yyth", |
|||
"appid" : "__UNI__1500881", |
|||
"description" : "", |
|||
"versionName" : "1.0.1", |
|||
"versionCode" : 101, |
|||
"transformPx" : false, |
|||
/* 5+App特有相关 */ |
|||
"app-plus" : { |
|||
"usingComponents" : true, |
|||
"nvueStyleCompiler" : "uni-app", |
|||
"compilerVersion" : 3, |
|||
"splashscreen" : { |
|||
"alwaysShowBeforeRender" : true, |
|||
"waiting" : true, |
|||
"autoclose" : true, |
|||
"delay" : 0 |
|||
}, |
|||
/* 模块配置 */ |
|||
"modules" : {}, |
|||
/* 应用发布信息 */ |
|||
"distribute" : { |
|||
/* android打包配置 */ |
|||
"android" : { |
|||
"permissions" : [ |
|||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|||
] |
|||
}, |
|||
/* ios打包配置 */ |
|||
"ios" : {}, |
|||
/* SDK配置 */ |
|||
"sdkConfigs" : {} |
|||
} |
|||
}, |
|||
/* 快应用特有相关 */ |
|||
"quickapp" : {}, |
|||
/* 小程序特有相关 */ |
|||
"mp-weixin" : { |
|||
"appid" : "wx4724e3a3c27f36b5", |
|||
"setting" : { |
|||
"urlCheck" : false |
|||
}, |
|||
"usingComponents" : true, |
|||
"lazyCodeLoading" : "requiredComponents" |
|||
}, |
|||
"mp-alipay" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-baidu" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-toutiao" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"uniStatistics" : { |
|||
"enable" : false |
|||
}, |
|||
"vueVersion" : "2" |
|||
} |
|||
@ -0,0 +1,318 @@ |
|||
{ |
|||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages |
|||
{ |
|||
"path": "pages/login/login", |
|||
"style": { |
|||
"navigationBarTitleText": "", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path" : "pages/home/cloudCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_detail", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_detail2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/personCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
|
|||
|
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/giftCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
|
|||
|
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/pickUpCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
|
|||
|
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_booking", |
|||
"style": { |
|||
"navigationBarTitleText": "预约提货", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_record", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
|
|||
|
|||
{ |
|||
"path": "pages/bind/bind_pickUpCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/bind/bind_pickUpCard2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
"path": "pages/bind/bind_personCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
// 扫码进入 |
|||
{ |
|||
"path": "pages/bind/bind_personCard2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
|
|||
{ |
|||
"path": "pages/bind/bind_giftCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
// 扫码进入 |
|||
{ |
|||
"path": "pages/bind/bind_giftCard2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
"path": "pages/bind/bind_enterpriseCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/bind/bind_enterpriseCard2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/index/BindPhone", |
|||
"style": { |
|||
"navigationBarTitleText": "绑定账号", |
|||
"navigationStyle": "custom", |
|||
"app-plus": { |
|||
"scrollIndicator": false //禁用原生导航栏, |
|||
} |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
"path": "pages/card/card_record_detail", |
|||
"style": { |
|||
"navigationBarTitleText": "预约详情", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/recordList", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/recordList2", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/good/goodsDetail", |
|||
"style": { |
|||
"navigationBarTitleText": "产品详情", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/SelectAddressActivity", |
|||
"style": { |
|||
"navigationBarTitleText": "提货点列表", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/corporateCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/enterprise/corporate_card_detail", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/enterprise/corporate_card_detail2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/enterprise/welfare_card_detail", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/enterprise/welfare_card_detail2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
|
|||
{ |
|||
"path": "pages/detail/detail_affeection", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/detail/detail_affeection2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/detail/detail_family", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/detail/detail_family2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/detail/detail_enterprise", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/detail/detail_enterprise2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path" : "pages/cloud/detail_cloudCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path" : "pages/cloud/optionalCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "uni_modules/common-pay/pages/pay/pay", |
|||
"style": { |
|||
"navigationBarTitleText": "支付订单", |
|||
"backgroundColor": "#F8F8F8" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "uni_modules/common-pay/pages/success/success", |
|||
"style": { |
|||
"navigationBarTitleText": "支付完成", |
|||
"backgroundColor": "#F8F8F8" |
|||
} |
|||
} |
|||
|
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "white", |
|||
"navigationBarTitleText": "云菜窖", |
|||
"navigationBarBackgroundColor": "#FE9039", |
|||
"backgroundColor": "#FE9039" |
|||
}, |
|||
"tabBar": { |
|||
"color": "#7A7E83", |
|||
"selectedColor": "#191919", |
|||
"borderStyle": "black", |
|||
"backgroundColor": "#ffffff", |
|||
"list": [ |
|||
// { |
|||
// "pagePath": "pages/home/personCard", |
|||
// "text": "个人卡", |
|||
// "iconPath": "static/bomicon/bom_notPerson.png", |
|||
// "selectedIconPath": "static/bomicon/bom_person.png" |
|||
// }, { |
|||
// "pagePath": "pages/home/giftCard", |
|||
// "text": "福礼卡", |
|||
// "iconPath": "static/bomicon/bom_notGift.png", |
|||
// "selectedIconPath": "static/bomicon/bom_gift.png" |
|||
// }, { |
|||
// "pagePath": "pages/home/corporateCard", |
|||
// "text": "企业卡", |
|||
// "iconPath": "static/bomicon/bom_notCorporate.png", |
|||
// "selectedIconPath": "static/bomicon/bom_corporate.png" |
|||
// }, |
|||
// { |
|||
// "pagePath": "pages/home/recordList", |
|||
// "text": "预约记录", |
|||
// "iconPath": "static/bomicon/bom_notRecordNew.png", |
|||
// "selectedIconPath": "static/bomicon/bom_recordNew.png" |
|||
// } |
|||
{ |
|||
"pagePath": "pages/home/cloudCard", |
|||
"text": "选菜窖", |
|||
"iconPath": "static/bomicon/bom_notCloudCard.png", |
|||
"selectedIconPath": "static/bomicon/bom_cloudCard.png" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/home/pickUpCard", |
|||
"text": "提菜卡", |
|||
"iconPath": "static/bomicon/bom_notPickUp.png", |
|||
"selectedIconPath": "static/bomicon/bom_pickUp.png" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/home/recordList2", |
|||
"text": "预约记录", |
|||
"iconPath": "static/bomicon/bom_notRecordNew.png", |
|||
"selectedIconPath": "static/bomicon/bom_recordNew.png" |
|||
} |
|||
] |
|||
}, |
|||
"uniIdRouter": {} |
|||
} |
|||
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<view> |
|||
<view style="position: sticky;top: 0;background-color: #FE9039;"> |
|||
<view class="search-container"> |
|||
<!-- 搜索框 --> |
|||
<view class="search-container-bar"> |
|||
<!-- :cancelText="keyBoardPopup ? '取消' : '搜索'" --> |
|||
<uni-search-bar ref="searchBar" style="flex:1;margin-left: 20rpx;" radius="100" |
|||
v-model="associativeText" :focus="focus" :placeholder="hotWorld" clearButton="auto" |
|||
cancelButton="none" @clear="clear" /> |
|||
<view v-if="stringIsNotEmpty(associativeText) && associativeText!=page.key" @click="search" |
|||
style="margin-right: 10px;font-size: 13px; color: #FED6B5;">搜索</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="search-body"> |
|||
<view |
|||
style="font-size: 26rpx;padding-left: 50rpx;padding-right: 40rpx;padding-top: 10rpx;padding-bottom: 20rpx;color: #FED6B5;"> |
|||
输入关键字筛选提货点 |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
|
|||
<loading-state ref="pageView" @request="request"> |
|||
<!-- 搜索联想 --> |
|||
<view style="display: flex;flex-direction: column;background: #FFFFFF; |
|||
border-top-left-radius: 30px;border-top-right-radius: 30px; padding:10px 20px;margin-top: 10px;box-sizing: border-box;padding-bottom: 0px;" |
|||
v-for="(item,index) in dataList" :key="index"> |
|||
<!-- |
|||
<view |
|||
style="display: flex;flex-direction: row;width: 100%;box-sizing: border-box;width: 100%;margin-top:10rpx ;align-items: center;"> |
|||
<image src="../static/address_name.png" style="width: 50rpx;height: 50rpx;flex-shrink: 0;"> |
|||
</image> |
|||
<text |
|||
style="font-size: 31.5rpx;margin-left: 18rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.name}} |
|||
</text> |
|||
</view> |
|||
|
|||
<text |
|||
style="font-size: 24rpx;color: #999999;margin-top: 6rpx;box-sizing: border-box;width: 100%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">营业时间：{{item.businessHours}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 22rpx;"> |
|||
<image v-if="false" |
|||
style="width: 120rpx;height: 120rpx;border-radius: 20rpx;flex-shrink: 0;background-color: #fafafa;"> |
|||
</image> |
|||
<view style="display: flex;flex: 1;flex-direction: column;margin-left: 20rpx;margin-top: 10rpx;"> |
|||
<view style="display: flex;flex-direction: row;"> |
|||
<image src="../static/address_location.png" |
|||
style="width: 16px;height: 16px;flex-shrink: 0;margin-right: 3px;"> |
|||
</image> |
|||
<view style="color: #666666;font-size: 29.5rpx;">{{item.address}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;margin-top: 22rpx;"> |
|||
<image src="../static/address_phone.png" |
|||
style="width: 16px;height: 16px;margin-right: 3px;flex-shrink: 0;"> |
|||
</image> |
|||
<view style="color: #5259D7;font-size: 29.5rpx;">{{item.phone}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid;"> |
|||
<view style="flex: 1;"></view> |
|||
|
|||
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;" |
|||
@click.stop="phone(item.phone)"> |
|||
<image src="../static/address_phone2.png" style="width: 18px;height: 18px;"></image> |
|||
<view style="font-size: 13px;margin-left: 6px;">电话</view> |
|||
</view> |
|||
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;" |
|||
@click.stop="confirm(item)"> |
|||
<image src="../static/address_confirm.png" style="width: 18px;height: 18px;"></image> |
|||
<view style="font-size: 13px;margin-left: 6px;">确定</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: 333;">{{item.name}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">营业时间：{{item.businessHours}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/location.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;flex: 1;">门店地址：{{item.address}}</text> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/navigation.png" |
|||
style="width: 20px;height: 20px; margin-right: 20px;"></image> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid; justify-content: space-between; |
|||
padding-left: 30px;padding-right:30px;"> |
|||
|
|||
<view class="btn" @click.stop="phone(item.phone)"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/phone.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 14px; color: #666;">电话咨询</text> |
|||
</view> |
|||
|
|||
<view class="btn" @click.stop="confirm(item)"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/user.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 14px; color: #666;">预约自提</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</loading-state> |
|||
<view style="height: 20px;"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
key: '' |
|||
}, |
|||
associativeText: '', |
|||
hotWorld: '输入关键字搜索提货点', // 搜索热词，如果没有输入即回车，则搜索热词，但是不会加入搜索记录 |
|||
focus: true, // 是否自动聚焦 |
|||
dataList: [] |
|||
} |
|||
}, |
|||
created() { |
|||
// 首次请求 |
|||
this.request() |
|||
|
|||
// #ifdef APP-PLUS |
|||
uni.onKeyboardHeightChange((res) => { |
|||
this.keyBoardPopup = res.height !== 0; |
|||
}) |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.page.key = this.associativeText |
|||
this.request() |
|||
}, |
|||
phone(num) { |
|||
uni.makePhoneCall({ |
|||
phoneNumber: num |
|||
}); |
|||
}, |
|||
confirm(item) { |
|||
uni.$emit('address', item) |
|||
uni.navigateBack() |
|||
}, |
|||
request() { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
let _this = this |
|||
_this.$api.address({ |
|||
'name': this.page.key |
|||
}).then((resp) => { |
|||
_this.dataList = resp |
|||
if (resp.length == 0) { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(100) |
|||
}) |
|||
} else { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
} |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
clear(res) { |
|||
this.page.key = '' |
|||
this.request() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss"> |
|||
uni-page-body, |
|||
page { |
|||
background: #f3f4f6; |
|||
} |
|||
|
|||
.btn { |
|||
margin-top: 10px; |
|||
border: 1px solid #FEA561; |
|||
border-radius: 20px; |
|||
display: flex;flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 5px 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.search-body { |
|||
background-color: #FE9039; |
|||
border-bottom-right-radius: 10px; |
|||
border-bottom-left-radius: 10px; |
|||
} |
|||
|
|||
@mixin uni-flex { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
} |
|||
|
|||
$search-bar-height: 52px; |
|||
$word-container_header-height: 72rpx; |
|||
|
|||
.search-container { |
|||
height: $search-bar-height; |
|||
@include uni-flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
background: white; |
|||
|
|||
@at-root { |
|||
#{&}-bar { |
|||
@include uni-flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #FE9039; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<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: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
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.empcardBind(this.page).then((resp) => { |
|||
bus.$emit('order3', "监听回调"); |
|||
uni.navigateBack() |
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
height: 70vw; |
|||
} |
|||
</style> |
|||
@ -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_bj1.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.cardBind(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/personCard' |
|||
}) |
|||
} |
|||
|
|||
|
|||
}).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_bj1.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.cardBind(this.page).then((resp) => { |
|||
bus.$emit('order', "监听回调"); |
|||
uni.switchTab({ |
|||
url: '/pages/home/personCard' |
|||
}) |
|||
|
|||
}).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> |
|||
@ -0,0 +1,241 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="首页" :showIcon="false" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view style="display: flex;flex-direction: column;align-items: center;"> |
|||
<view class="btn" @click="bind"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/binding.png" style="width: 15px;height: 15px;"> |
|||
</image> |
|||
<text |
|||
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> |
|||
|
|||
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false"> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;" |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)"> |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }"> |
|||
|
|||
<!-- 外边 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 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;"> {{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 { |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.cardList({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"customerSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了，点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
dialogInputConfirm(val) { |
|||
// 网络请求 绑定 |
|||
}, |
|||
bind() { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_bind' |
|||
}) |
|||
}, |
|||
detail(item) { |
|||
|
|||
if (item.showBtn) { |
|||
// 正常 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail?sid=' + item.sid |
|||
}) |
|||
} else { |
|||
// 过期 已完成 |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_detail2?sid=' + item.sid |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
booking(item) { |
|||
|
|||
if (!item.notRese) { |
|||
this.shortToast("该卡商品已全部预约。") |
|||
return |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_booking?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/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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,249 @@ |
|||
<template> |
|||
|
|||
<!-- 不分页的时候用，没有封装 auto 首次使用需要自己在onload里调用 --> |
|||
<!-- 页面的几种状态 0 loading 1 错误 2正常 --> |
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view> |
|||
<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image> |
|||
<view style="display: flex;flex-direction: column;margin-top: -40vw;"> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;"> |
|||
<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;"> |
|||
<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;"> |
|||
{{data.state}} |
|||
</view> |
|||
<view |
|||
style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;box-sizing: border-box;"> |
|||
{{data.name}} |
|||
</view> |
|||
<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;"> |
|||
{{data.time}} |
|||
</view> |
|||
</view> |
|||
<image src='../../static/gift2.png' |
|||
style="width: 40px;height: 40px;padding-right: 30px;flex-shrink: 0;"> |
|||
</image> |
|||
</view> |
|||
|
|||
<view |
|||
style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;min-height: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;"> |
|||
<view style="display: flex;align-items: center;margin-top: 8px;"> |
|||
<text style="flex-shrink: 0;font-size: 13px;margin-left: 10px;">提货地点</text> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;border: 1px solid #EBEEF5;border-radius: 4px;min-height: 35px;margin: 0px 10px;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;align-items: center;padding-right: 10px;margin-top: 6px;margin-bottom: 8px;"> |
|||
<text style="flex-shrink: 0;font-size: 13px;margin-left: 10px;margin-right: 10px;">提货时间</text> |
|||
<uni-datetime-picker type="date" v-model="data.reserveDate" style="flex: 1;" :start="data.start" |
|||
:end="data.end" @showing='showing' /> |
|||
</view> |
|||
<view |
|||
style="display: flex;align-items: center;padding-right: 10px;margin-top: 6px;margin-bottom: 8px;"> |
|||
<text style="flex-shrink: 0;font-size: 13px;margin-left: 10px;margin-right: 10px; " |
|||
decode="true">提 货 人</text> |
|||
<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 |
|||
style="display: flex;align-items: center;padding-right: 10px;margin-top: 6px;margin-bottom: 8px;"> |
|||
<text style="flex-shrink: 0;font-size: 13px;margin-left: 10px;margin-right: 10px;">联系电话</text> |
|||
<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: #FFFFFF;border-radius: 20rpx;padding: 15px;margin: 10px 15px;"> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx #f1f2f3 solid;padding-bottom: 10px;"> |
|||
<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image> |
|||
<view style="margin-left: 10px;font-size: 14px;">商品明细</view> |
|||
</view> |
|||
<view v-for="(item,index) in data.goodsVos" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: row;margin-top: 15px;"> |
|||
<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image> |
|||
<view |
|||
style="margin-left: 10px;margin-right: 10px;flex: 1;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;"> |
|||
<text class="text" style="font-weight: 500;width: 100%;">{{item.goods}} |
|||
</text> |
|||
<text class="text" |
|||
style="width: 100%;font-size: 12px; color: #666666;margin-top: 10px;">{{item.remarks}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -25px;" :min="0" :max="item.lnum" |
|||
v-model="item.select" :showTextView="page.showTextView"></uni-number-box> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="height: 60px;"></view> |
|||
<view v-if="data.showBtn||data.showRecord" |
|||
style="position: fixed;bottom: 0;height: 50px;background: #f3f4f6;border-top: 1rpx #cacaca solid;width: 100%;display: flex;flex-direction: row;box-sizing: border-box;align-items: center;padding-right: 15px;"> |
|||
<view style="flex: 1;"></view> |
|||
<view v-if="data.showRecord" class="btn" style="flex-shrink: 0;color: #191919;" @click="save"> |
|||
提交预约</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</loading-state> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '', |
|||
showTextView: false |
|||
}, |
|||
data: { |
|||
time: "", |
|||
name: "", |
|||
pname: "", |
|||
state: "", |
|||
showBtn: false, |
|||
showRecord: false, |
|||
goodsVos: [], |
|||
value: "", |
|||
select: [], |
|||
userName: "", |
|||
userPhone: "", |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
uni.$on("address", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.data.value = e.sid; |
|||
this.data.addressName = e.name; |
|||
}) |
|||
}, |
|||
onUnload() { |
|||
uni.$off('address'); |
|||
}, |
|||
methods: { |
|||
address() { |
|||
uni.navigateTo({ |
|||
url: '/pages/SelectAddressActivity' |
|||
}) |
|||
}, |
|||
onKeyInput1: function(event) { |
|||
this.data.userName = event.target.value |
|||
}, |
|||
onKeyInput2: function(event) { |
|||
this.data.userPhone = event.target.value |
|||
}, |
|||
showing(e) { |
|||
this.page.showTextView = e |
|||
}, |
|||
request() { |
|||
let _this = this |
|||
_this.$api.cardBooking(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
// 成功 2 |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
// 错误 1 |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
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', "监听回调"); |
|||
uni.navigateBack() |
|||
|
|||
}).catch(e => { |
|||
_this.shortToast('发生异常') |
|||
}) |
|||
|
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,673 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view style="display: flex;flex-direction: column;margin-top: 25vw; margin-left: 5vw;"> |
|||
<view style="font-size: 17px;color: #fff;height: 8vw;line-height: 8vw;margin-top: 5vw;"> |
|||
{{data.state}} |
|||
</view> |
|||
<view |
|||
style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;box-sizing: border-box;"> |
|||
卡号：{{data.serialNumber}} |
|||
</view> |
|||
<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;"> |
|||
{{data.time}} |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: center; |
|||
background-color: #fff;height: 25vw; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftpack.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<text |
|||
style="color: #fff;font-size: 18px;z-index: 10;position: absolute;margin-top: 11vw;">{{data.pname}}</text> |
|||
|
|||
|
|||
</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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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-if="data.empCardGift!=null" style="display: flex;flex-direction: row;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftNormal.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;">福礼卡编码：{{data.empCardGift.code}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{data.empCardGift.codeKey}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{data.empCardGift.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;"> |
|||
<text |
|||
style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">{{data.empCardGift.goods}}</text> |
|||
|
|||
<button v-show="data.empCardGift.isShare=='1'" class='sharebtn' |
|||
:data-info="data.empCardGift" open-type="share">分享</button> |
|||
<button v-show="data.empCardGift.isShare=='2'" class='sharebtn2' |
|||
:data-info="data.empCardGift" open-type="share">已分享</button> |
|||
<button v-show="data.empCardGift.isShare=='3'" class='sharebtn3'>已绑定</button> |
|||
|
|||
|
|||
</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=" width: 20vw;font-size: 16px;color: #fff; background-color: #FF9D33; |
|||
padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog2">转赠卡券</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;"> |
|||
<textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;min-height: 50px;line-height: 20px;padding: 10px; |
|||
white-space: pre-wrap; |
|||
word-wrap: break-word;" :value="info.remarks" @input="onKeyInput3" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view style="background: #F5F5F5; border-radius: 5px;;margin: 20px;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;width: 100%;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: row; align-items: center; |
|||
padding: 10px;width: 100%; justify-content: space-between;"> |
|||
<text style="font-weight: 500;font-size: 14px; ">{{item.goods}} |
|||
</text> |
|||
<text |
|||
style="font-weight: 500;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: #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: { |
|||
empCardSid: "", |
|||
remarks: "", |
|||
goodsVoList: [] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
uni.$on("order", (e) => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
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'); |
|||
}, |
|||
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.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() { |
|||
|
|||
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) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
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_giftCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareGift.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: 20vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 20vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 20vw; |
|||
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,487 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column;"> |
|||
|
|||
<view class="top"> |
|||
<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight" |
|||
:end-change-height="page.endHeight"> |
|||
</NavBar> |
|||
<view style="display: flex;flex-direction: column;margin-top: 25vw; margin-left: 5vw;"> |
|||
<view style="font-size: 17px;color: #fff;height: 8vw;line-height: 8vw;margin-top: 5vw;"> |
|||
{{data.state}} |
|||
</view> |
|||
<view |
|||
style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;box-sizing: border-box;"> |
|||
卡号：{{data.serialNumber}} |
|||
</view> |
|||
<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;"> |
|||
{{data.time}} |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: center; |
|||
background-color: #fff;height: 25vw; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;"> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftpack.png" mode="aspectFit" |
|||
style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image> |
|||
|
|||
<text |
|||
style="color: #fff;font-size: 18px;z-index: 10;position: absolute;margin-top: 11vw;">{{data.pname}}</text> |
|||
|
|||
</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" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: column;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/date.png" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="margin-left: 5px;font-size: 12px; color: #999;">提货时间：{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/location.png" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">提货地点：{{item.store}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/user2.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="margin-left: 5px;font-size: 12px; color: #999;">提 货 人：{{item.userName}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/phone2.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">联系电话：{{item.userPhone}}</text> |
|||
</view> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<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-if="data.empCardGift!=null" style="display: flex;flex-direction: row;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/welfare_Card.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;">福礼卡编码：{{data.empCardGift.code}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{data.empCardGift.codeKey}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{data.empCardGift.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;"> |
|||
<text |
|||
style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">{{data.empCardGift.goods}}</text> |
|||
|
|||
<button v-show="data.empCardGift.isShare=='1'" class='sharebtn' |
|||
:data-info="data.empCardGift" open-type="share">分享</button> |
|||
<button v-show="data.empCardGift.isShare=='2'" class='sharebtn2' |
|||
:data-info="data.empCardGift" open-type="share">已分享</button> |
|||
<button v-show="data.empCardGift.isShare=='3'" class='sharebtn3'>已绑定</button> |
|||
|
|||
|
|||
</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() |
|||
uni.$on("order", (e) => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('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_giftCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareGift.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: 20vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 20vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 20vw; |
|||
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,101 @@ |
|||
<template> |
|||
<loading-state ref="pageView" @request="request"> |
|||
<view v-for="(item,index) in data" style="display: flex;flex-direction: column;margin-top: 15px; margin-left: 15px; margin-right: 15px;"> |
|||
<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> |
|||
</loading-state> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '', |
|||
}, |
|||
data: [ |
|||
|
|||
] |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
}, |
|||
methods: { |
|||
request() { |
|||
let _this = this |
|||
_this.$api.orderByCardSid(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
// 成功 2 |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
|
|||
// 无数据 |
|||
if(_this.data.length==0){ |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(100) |
|||
}) |
|||
} |
|||
|
|||
}).catch(e => { |
|||
// 错误 1 |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
detail(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_record_detail?sid=' + sid |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.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%); |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
|
|||
<loading-state ref="pageView" @request="request"> |
|||
|
|||
<view> |
|||
<image src="../../static/edit_bg.png" style="width: 100%;height: 40vw;z-index: 0;"></image> |
|||
<view style="display: flex;flex-direction: column;margin-top: -40vw;"> |
|||
<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;"> |
|||
<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;margin-left: 15px;"> |
|||
<view style="font-size: 17px;color: #FFFFFF;height: 8vw;line-height: 8vw;margin-top: 5vw;"> |
|||
{{data.state}} |
|||
</view> |
|||
<view |
|||
style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #f1f2f3;box-sizing: border-box;"> |
|||
{{data.name}} |
|||
</view> |
|||
<view style="font-size: 12px;color: white;line-height: 4vw;height: 4vw;color: #f1f2f3;"> |
|||
{{data.time}} |
|||
</view> |
|||
</view> |
|||
<image src='../../static/gift2.png' |
|||
style="width: 40px;height: 40px;padding-right: 30px;flex-shrink: 0;"> |
|||
</image> |
|||
</view> |
|||
|
|||
<view |
|||
style="background: #FFFFFF;border-radius: 20rpx;z-index: 1;height: 20vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex; |
|||
flex-direction: column; "> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image> |
|||
<view style="margin-left: 15px;font-size: 14px;">{{data.pname}}</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image> |
|||
<view style="margin-left: 15px;font-size: 14px;">{{data.reserveDate}}</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="../../static/pName.png" style="width: 15px;height: 15px;margin-left: 15px;"></image> |
|||
<view style="margin-left: 15px;font-size: 14px;">{{data.store}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="background: #FFFFFF;border-radius: 20rpx;padding: 15px;margin: 10px 15px;"> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx #f1f2f3 solid;padding-bottom: 10px;"> |
|||
<image src="../../static/mingxi.png" style="width: 15px;height: 15px;"></image> |
|||
<view style="margin-left: 10px;font-size: 14px;">商品明细</view> |
|||
</view> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px;"> |
|||
<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;">提货数量：{{item.orderNum}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="height: 60px;"></view> |
|||
</view> |
|||
|
|||
</loading-state> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '' |
|||
}, |
|||
data: { |
|||
time: "", |
|||
name: "", |
|||
pname: "", |
|||
state: "", |
|||
showBtn: false, |
|||
showRecord: false, |
|||
goodsVos: [] |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
}, |
|||
methods: { |
|||
request() { |
|||
let _this = this |
|||
_this.$api.orderDetails(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.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; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,284 @@ |
|||
1<template> |
|||
|
|||
<view style="display: flex;flex-direction: column; height: 100vh;box-sizing: border-box ; background-color: #fff;" 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: 10px; 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: 70px;height: 70px;" mode="aspectFit"></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: 12px;margin-top: 5px;line-height: 20px;">{{item.remark}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;align-items: center;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;height: 20px;align-items: center;"> |
|||
<text style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 10px; |
|||
margin-right: 20px;padding: 0px 5px;">{{convertPrice(item.jprice)}}元/{{item.specificationUnit}}</text> |
|||
<text |
|||
style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 10px;;padding: 0px 5px;">{{item.weight}}斤/{{item.unitName}}</text> |
|||
</view> |
|||
|
|||
|
|||
<text style="color: #FF5006;font-size: 15px;">￥{{convertPrice(item.totalValue)}}</text> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
<view style="height: 100px;background: #fff; "></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; border-top: 1px #F0F0F0 solid;"> |
|||
|
|||
<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;">{{convertPrice(page.price)}}元</text> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<text |
|||
style="background: #EE752F; text-align: center; color: #fff; border-radius: 5px;padding: 5px 20px; margin-right: 40px; " |
|||
@click="settlement()">结算入窖</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() |
|||
uni.$on("pay", (e) => { |
|||
|
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
}) |
|||
|
|||
}, |
|||
onUnload() { |
|||
uni.$off('pay'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
methods: { |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
request() { |
|||
let _this = this |
|||
|
|||
_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" |
|||
}, |
|||
settlement() { |
|||
// 支付 |
|||
|
|||
|
|||
if (!Number(this.page.number) > 0) { |
|||
this.shortToast('请输入要定制几份云菜窖') |
|||
return |
|||
} |
|||
|
|||
|
|||
let list = [] |
|||
|
|||
for (var i = 0; i < this.data.goods.length; i++) { |
|||
var item = this.data.goods[i] |
|||
if (item.goodsNumber > 0) |
|||
list.push({ |
|||
goodsSid: item.goodsSid, |
|||
goodsName: item.name, |
|||
partNumber: item.goodsNumber, |
|||
numofPart: item.weight, |
|||
priceUnit: item.jprice, |
|||
pricePart: item.price, |
|||
}) |
|||
} |
|||
// console.log("ddd", list); |
|||
|
|||
if(list.length==0){ |
|||
this.shortToast('请添加商品') |
|||
return |
|||
} |
|||
|
|||
|
|||
var params = { |
|||
customerSid: getApp().globalData.sid, |
|||
cardNumber: this.page.number, |
|||
totalTee: this.page.price, |
|||
ordOrderDetailsVoList: list |
|||
} |
|||
// console.log("params", params); |
|||
|
|||
let _this = this |
|||
_this.$api.createOrder(params).then((resp) => { |
|||
|
|||
// console.log("resp", resp); |
|||
this.$pay(resp) |
|||
}).catch(e => { |
|||
}) |
|||
|
|||
|
|||
|
|||
// var data = { |
|||
// "price": "0.01", |
|||
// "trade_no_url": { |
|||
// "url": "http://192.168.2.110:7777/order/orderQuery", |
|||
// "params": { |
|||
// "mainSid": "954fbec1-b12e-4f29-87c1-4d9ff6332e7c" |
|||
// } |
|||
// }, |
|||
// "pay_url": { |
|||
// "url": "http://192.168.2.110:7777/order/pay ", |
|||
// "params": { |
|||
// "mainSid": "954fbec1-b12e-4f29-87c1-4d9ff6332e7c" |
|||
// } |
|||
// }, |
|||
// "order_url": { |
|||
// "page": "/pages/index2/index2", |
|||
// "params": {} |
|||
// }, |
|||
// "orderId": "288320940398", |
|||
// "remainder": 96, |
|||
// "goods": "无骨鸡柳等3件商品", |
|||
// "bus": [ |
|||
// "pay" |
|||
// ] |
|||
// } |
|||
|
|||
} |
|||
} |
|||
} |
|||
</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,305 @@ |
|||
<template> |
|||
|
|||
<view style="display: flex;flex-direction: column; height: 100vh;box-sizing: border-box; background-color: #fff;" |
|||
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 10px 0px 20px;padding-bottom:10px; 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> |
|||
|
|||
<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: 70px;height: 70px;" mode="aspectFit"></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: 14px;">{{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;line-height: 20px;">{{item.remark}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 5px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;height: 20px;align-items: center;"> |
|||
<text style="border: 1px #EE752F solid; border-radius: 10px; color:#EE752F ; font-size: 10px; |
|||
margin-right: 20px;padding: 0px 5px;">{{convertPrice(item.jprice)}}元/{{item.specificationUnit}}</text> |
|||
<text |
|||
style="border: 1px #EE752F solid; border-radius: 10px; color: #EE752F;font-size: 10px;;padding: 0px 5px;">{{item.weight}}斤/{{item.unitName}}</text> |
|||
</view> |
|||
|
|||
|
|||
<text style="color: #FF5006;font-size: 15px;">￥{{convertPrice(item.price)}}</text> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
<view style="height: 200px;background: #fff; "></view> |
|||
|
|||
<view style="background-color: #fff;position: fixed;bottom: 0;overflow:hidden; |
|||
display: flex;flex-direction: column; width: 100%;flex-shrink: 1;"> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center; border-bottom: 1px #F0F0F0 solid;padding-top: 5px; padding-bottom: 5px;padding-left: 20px;"> |
|||
<view style="color: #888;font-size: 10px;">温馨提示：已定制了</view> |
|||
<view style="color: #FF5006;font-size: 15px;">{{page.weight}}斤</view> |
|||
<view style="color: #888;font-size: 10px;">，满200斤可定制云菜窖</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center; margin-top: 5px; padding: 10px 20px; width: 100%;"> |
|||
<view style="flex: 1; display: flex;flex-direction: row;align-items: center; ; |
|||
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;">{{convertPrice(page.price)}}元</text> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<text |
|||
style="background: #EE752F; text-align: center; color: #fff; border-radius: 5px;padding: 5px 20px; margin-right: 40px; " |
|||
@click="settlement()">结算入窖</text> |
|||
|
|||
|
|||
</view> |
|||
</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: [] |
|||
|
|||
} |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
|
|||
this.request() |
|||
uni.$on("pay", (e) => { |
|||
|
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
}) |
|||
|
|||
}, |
|||
onUnload() { |
|||
uni.$off('pay'); |
|||
}, |
|||
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].jprice) * Number(this.data[i].goodsNumber) * Number(this.data[i].weight); |
|||
} |
|||
|
|||
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) |
|||
|
|||
else |
|||
item.price = "0" |
|||
}, |
|||
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 |
|||
}, |
|||
settlement() { |
|||
// 支付 |
|||
|
|||
if (this.page.weight < 200) { |
|||
this.shortToast('满200斤才可定制云菜窖哦，请继续选菜吧。') |
|||
return |
|||
} |
|||
|
|||
if (!Number(this.page.number) > 0) { |
|||
this.shortToast('请输入要定制几份云菜窖') |
|||
return |
|||
} |
|||
|
|||
|
|||
|
|||
let list = [] |
|||
|
|||
for (var i = 0; i < this.data.length; i++) { |
|||
var item = this.data[i] |
|||
if (item.goodsNumber > 0) |
|||
list.push({ |
|||
goodsSid: item.goodsSid, |
|||
goodsName: item.name, |
|||
partNumber: item.goodsNumber, |
|||
numofPart: item.weight, |
|||
priceUnit: item.jprice, |
|||
pricePart: item.price, |
|||
}) |
|||
} |
|||
// console.log("ddd", list); |
|||
|
|||
if (list.length == 0) { |
|||
this.shortToast('请添加商品') |
|||
return |
|||
} |
|||
|
|||
var params = { |
|||
customerSid: getApp().globalData.sid, |
|||
cardNumber: this.page.number, |
|||
totalTee: this.page.price, |
|||
ordOrderDetailsVoList: list |
|||
} |
|||
// console.log("params", params); |
|||
|
|||
let _this = this |
|||
_this.$api.createOrder(params).then((resp) => { |
|||
|
|||
// console.log("resp", resp); |
|||
this.$pay(resp) |
|||
}).catch(e => {}) |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
</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,750 @@ |
|||
<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(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
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) |
|||
// ① |
|||
let shareData = JSON.stringify({ |
|||
params: { |
|||
code: data.code, |
|||
codeKey: data.codeKey, |
|||
customerSid: '' |
|||
}, |
|||
functionName: 'bindCard', |
|||
url: '/pages/detail/detail_affeection?sid=' + data.sid |
|||
|
|||
// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey, |
|||
// FunctionName:'share! |
|||
}) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(shareData) |
|||
|
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
// ② |
|||
path: '/pages/login/login?data=' + value, |
|||
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,516 @@ |
|||
<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'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
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) |
|||
// ① |
|||
let shareData = JSON.stringify({ |
|||
params: { |
|||
code: data.code, |
|||
codeKey: data.codeKey, |
|||
customerSid: '' |
|||
}, |
|||
functionName: 'bindCard', |
|||
url: '/pages/detail/detail_affeection?sid=' + data.sid |
|||
|
|||
// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey, |
|||
// FunctionName:'share! |
|||
}) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(shareData) |
|||
|
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
// ② |
|||
path: '/pages/login/login?data=' + value, |
|||
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,770 @@ |
|||
<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(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
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() |
|||
_this.$refs.nav.clickIcon() |
|||
|
|||
}).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) |
|||
|
|||
// ① |
|||
let shareData = JSON.stringify({ |
|||
|
|||
// 直接绑定 进入详情 |
|||
params: { |
|||
code: data.code, |
|||
codeKey: data.codeKey, |
|||
customerSid: '' |
|||
}, |
|||
functionName: 'bindCard', |
|||
url: '/pages/detail/detail_affeection?sid=' + data.sid |
|||
|
|||
// 分享 绑卡 |
|||
// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey, |
|||
// FunctionName:'share! |
|||
}) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(shareData) |
|||
|
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
// ② |
|||
path: '/pages/login/login?data=' + value, |
|||
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,510 @@ |
|||
<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'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
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) |
|||
// ① |
|||
let shareData = JSON.stringify({ |
|||
params: { |
|||
code: data.code, |
|||
codeKey: data.codeKey, |
|||
customerSid: '' |
|||
}, |
|||
functionName: 'bindCard', |
|||
url: '/pages/detail/detail_affeection?sid=' + data.sid |
|||
|
|||
// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey, |
|||
// FunctionName:'share! |
|||
}) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(shareData) |
|||
|
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
// ② |
|||
path: '/pages/login/login?data=' + value, |
|||
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,752 @@ |
|||
<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(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
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) |
|||
// ① |
|||
let shareData = JSON.stringify({ |
|||
params: { |
|||
code: data.code, |
|||
codeKey: data.codeKey, |
|||
customerSid: '' |
|||
}, |
|||
functionName: 'bindCard', |
|||
url: '/pages/detail/detail_affeection?sid=' + data.sid |
|||
|
|||
// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey, |
|||
// FunctionName:'share! |
|||
}) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(shareData) |
|||
|
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
// ② |
|||
path: '/pages/login/login?data=' + value, |
|||
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,518 @@ |
|||
<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'); |
|||
}, |
|||
onPageScroll(res) { |
|||
// 渐变 |
|||
this.$refs.nav.defaultColorBgAlpha(res) |
|||
}, |
|||
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) |
|||
// ① |
|||
let shareData = JSON.stringify({ |
|||
params: { |
|||
code: data.code, |
|||
codeKey: data.codeKey, |
|||
customerSid: '' |
|||
}, |
|||
functionName: 'bindCard', |
|||
url: '/pages/detail/detail_affeection?sid=' + data.sid |
|||
|
|||
// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey, |
|||
// FunctionName:'share! |
|||
}) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(shareData) |
|||
|
|||
return { |
|||
title: '汇融惠享-云菜窖', |
|||
// ② |
|||
path: '/pages/login/login?data=' + value, |
|||
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,698 @@ |
|||
<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> |
|||
<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: #4F9AFD; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #7DCEFB; 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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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/gift_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/gift_loction.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/gift_user.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/gift_phone.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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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/giftNormal.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.share=='1'" class='sharebtn' :data-info="item" |
|||
open-type="share">分享</button> |
|||
<button v-show="item.share=='2'" class='sharebtn2' :data-info="item" |
|||
open-type="share">已分享</button> |
|||
<button v-show="item.share=='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=" width: 20vw;font-size: 16px;color: #fff; background-color: #54A0FD; |
|||
padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog">生成卡券</text> |
|||
<view style="flex: 1;"></view> |
|||
<text style=" width: 20vw;font-size: 16px;color: #fff; background-color: #54A0FD; |
|||
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;" |
|||
type="number" :value="info.count" @input="onKeyInput1" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin: 20px;"> |
|||
<text>备注说明</text> |
|||
<view style="display: flex;align-items: center;margin-top: 6px;"> |
|||
<textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px; |
|||
min-height: 50px;line-height: 20px;padding: 10px; |
|||
white-space: pre-wrap; |
|||
word-wrap: break-word;" :value="info.remarks" @input="onKeyInput2" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view style="background: #F5F5F5; border-radius: 5px;;margin: 20px;"> |
|||
<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: #54A0FD; 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: #54A0FD; 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() |
|||
uni.$on("order3", (e) => { |
|||
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('order3'); |
|||
uni.$off('address'); |
|||
}, |
|||
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 => { |
|||
|
|||
}) |
|||
}, |
|||
save() { |
|||
|
|||
|
|||
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('order3', "监听回调"); |
|||
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('order3', "监听回调"); |
|||
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_giftCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share.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: 20vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 20vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 20vw; |
|||
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_bj3.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,469 @@ |
|||
<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> |
|||
<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: #4F9AFD; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #7DCEFB; 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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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/gift_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/gift_loction.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/gift_user.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/gift_phone.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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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/giftNormal.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.share=='1'" class='sharebtn' :data-info="item" open-type="share">分享</button> |
|||
<button v-show="item.share=='2'" class='sharebtn2' :data-info="item" open-type="share">已分享</button> |
|||
<button v-show="item.share=='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() |
|||
uni.$on("order3", (e) => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order3'); |
|||
}, |
|||
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_giftCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/share.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: 20vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 20vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 20vw; |
|||
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_bj6.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,658 @@ |
|||
<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> |
|||
<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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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/gift_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/gift_loction.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/gift_user.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/gift_phone.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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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-if="data.empCardGift!=null" style="display: flex;flex-direction: row;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/giftNormal.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;">福礼卡编码：{{data.empCardGift.code}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{data.empCardGift.codeKey}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{data.empCardGift.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;"> |
|||
<text |
|||
style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">{{data.empCardGift.goods}}</text> |
|||
|
|||
<button v-show="data.empCardGift.isShare=='1'" class='sharebtn' |
|||
:data-info="data.empCardGift" open-type="share">分享</button> |
|||
<button v-show="data.empCardGift.isShare=='2'" class='sharebtn2' |
|||
:data-info="data.empCardGift" open-type="share">已分享</button> |
|||
<button v-show="data.empCardGift.isShare=='3'" class='sharebtn3'>已绑定</button> |
|||
|
|||
|
|||
</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=" width: 20vw;font-size: 16px;color: #fff; background-color: #FF523D; |
|||
padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog2">转赠卡券</text> |
|||
<view style="flex: 1;"></view> |
|||
<text style=" width: 20vw;font-size: 16px;color: #fff; background-color: #FF523D; |
|||
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: #FF523D; 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;"> |
|||
<textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" |
|||
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;min-height: 50px;line-height: 20px;padding: 10px; |
|||
white-space: pre-wrap; |
|||
word-wrap: break-word;" :value="info.remarks" @input="onKeyInput3" /> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view style="background: #F5F5F5; border-radius: 5px;;margin: 20px;"> |
|||
<view v-for="(item,index) in data.goodsVos" |
|||
style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;width: 100%;"> |
|||
<view style="margin-left: 10px;margin-right: 10px;flex: 1; |
|||
display: flex;flex-direction: row; align-items: center; |
|||
padding: 10px;width: 100%; justify-content: space-between;"> |
|||
<text style="font-weight: 500;font-size: 14px; ">{{item.goods}} |
|||
</text> |
|||
<text |
|||
style="font-weight: 500;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: #FF523D; 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: { |
|||
empCardSid: "", |
|||
remarks: "", |
|||
goodsVoList: [] |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
this.getSun() |
|||
uni.$on("order2", (e) => { |
|||
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('order2'); |
|||
uni.$off('address'); |
|||
}, |
|||
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.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('order2', "监听回调"); |
|||
uni.navigateBack() |
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
save2() { |
|||
|
|||
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('order2', "监听回调"); |
|||
uni.navigateBack() |
|||
|
|||
}).catch(e => { |
|||
_this.shortToast(e.msg) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
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_giftCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareGift.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: 20vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 20vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 20vw; |
|||
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_bj2.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,475 @@ |
|||
<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> |
|||
|
|||
<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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: column;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/gift_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/gift_loction.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/gift_user.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/gift_phone.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: #FF472B; border-radius: 50%;width: 12px;height: 12px;"></view> |
|||
<view style="background: #FF7268; 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-if="data.empCardGift!=null" style="display: flex;flex-direction: row;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;width: 100%;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/welfare_Card.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;">福礼卡编码：{{data.empCardGift.code}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{data.empCardGift.codeKey}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{data.empCardGift.remarks}}</text> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;"> |
|||
<text |
|||
style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">{{data.empCardGift.goods}}</text> |
|||
|
|||
<button v-show="data.empCardGift.isShare=='1'" class='sharebtn' |
|||
:data-info="data.empCardGift" open-type="share">分享</button> |
|||
<button v-show="data.empCardGift.isShare=='2'" class='sharebtn2' |
|||
:data-info="data.empCardGift" open-type="share">已分享</button> |
|||
<button v-show="data.empCardGift.isShare=='3'" class='sharebtn3'>已绑定</button> |
|||
|
|||
|
|||
</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() |
|||
uni.$on("order2", (e) => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order2'); |
|||
}, |
|||
methods: { |
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.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_giftCard?code=' + data.code + '&codeKey=' + data.codeKey, |
|||
imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareGift.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: 20vw; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.sharebtn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn2 { |
|||
background: #FF7165; |
|||
width: 20vw; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sharebtn2::after { |
|||
border: none; |
|||
} |
|||
|
|||
.sharebtn3 { |
|||
background: #CFCFCF; |
|||
width: 20vw; |
|||
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_bj5.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,146 @@ |
|||
<template> |
|||
|
|||
<loading-state ref="pageView" @request="request"> |
|||
<view> |
|||
<image :src="data.picUrl" style="width: 100vw;height: 80vw;"></image> |
|||
<!-- <view |
|||
style="margin-top: 9px;margin-left: 9px;margin-right: 9px;border-top-left-radius: 13px;border-top-right-radius: 13px;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;padding-top: 11px;"> |
|||
<image src="../../static/goods_price_bg.png" |
|||
style="width: 90vw;height: 16vw;border-radius: 10px;position: absolute;"></image> |
|||
<view |
|||
style="display: flex;flex-direction: row;justify-content: space-between;width: 80vw;position: relative;height: 16vw;align-items: center;color: white;"> |
|||
<view> |
|||
<text style="font-size: 14px;font-weight: 600;">￥</text> |
|||
<text style="font-size: 24px;margin-left: 7px;font-weight: 500;">{{data.price}}</text> |
|||
</view> |
|||
<view>价值</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="left: 25px;font-size: 18px;width: 90vw;margin: 10px 0px;font-weight: 600;margin-left: 18px;"> |
|||
{{data.name}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;align-items: center;margin-left: 9px;margin-right: 9px;"> |
|||
<view |
|||
style="border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;background-color: #f9f9f9;width: 100%;display: flex;flex-direction: row;"> |
|||
<image src="../../static/guige.png" |
|||
style="width: 21px;height: 21px;margin-left: 12px;margin-top: 9px;margin-bottom: 12px;"></image> |
|||
<view |
|||
style="height: 21px;line-height: 21px;margin-top: 9px;font-size: 13px;color: #666666;margin-left: 5px;"> |
|||
规格： |
|||
{{data.remarks}} |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<view style="display: flex;flex-direction: column;background: #fff;padding: 20px;margin-top: 10px; |
|||
border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;"> |
|||
|
|||
<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;"> |
|||
<text style="font-size: 13px;color: #666;">规    格</text> |
|||
<text style="font-size: 13px;color: #999;">{{data.remarks}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;"> |
|||
|
|||
<view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view> |
|||
<text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 10px;" v-show="!data.appContent==''"> |
|||
<rich-text :nodes="data.appContent | formatRichText" ></rich-text> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</loading-state> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '' |
|||
}, |
|||
data: { |
|||
picUrl: '', |
|||
name: '', |
|||
price: '', |
|||
remarks: '', |
|||
appContent: "" |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
}, |
|||
filters: { |
|||
/** |
|||
* 处理富文本里的图片宽度自适应 |
|||
* 1.去掉img标签里的style、width、height属性 |
|||
* 2.img标签添加style属性：max-width:100%;height:auto |
|||
* 3.修改所有style里的width属性为max-width:100% |
|||
* 4.去掉<br/>标签 |
|||
* @param html |
|||
* @returns {void|string|*} |
|||
*/ |
|||
formatRichText(html) { |
|||
//控制小程序中图片大小 |
|||
if (html) { |
|||
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) { |
|||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); |
|||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); |
|||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); |
|||
return match; |
|||
}); |
|||
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) { |
|||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, |
|||
'max-width:100%;'); |
|||
return match; |
|||
}); |
|||
newContent = newContent.replace(/<br[^>]*\/>/gi, ''); |
|||
newContent = newContent.replace(/\<img/gi, |
|||
'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"'); |
|||
return newContent; |
|||
} else { |
|||
return '暂无商品详情'; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
request() { |
|||
let _this = this |
|||
_this.$api.goodsDetail(this.page.sid).then((resp) => { |
|||
console.log(resp); |
|||
_this.data = resp |
|||
|
|||
|
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
uni-page-body, |
|||
page { |
|||
background: #f3f4f6; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
<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: 10px; 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> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;"> |
|||
<text style="color: #FCA45C; font-size: 12px;margin-right: 5px;">订窖</text> |
|||
<image src="@/static/right_icon.png" style="width: 15px;height: 15px;"></image> |
|||
</view> |
|||
|
|||
</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: 70px;height: 70px;" mode="aspectFit"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-left: 20px;flex: 1; width: 100%; margin-top: 5px;"> |
|||
|
|||
<text style="color: #999;font-size: 13px;width: 100%;line-height: 20px;">{{item.remarks}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;justify-content:space-between;margin-top: 10px;"> |
|||
|
|||
<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: 12px;;padding: 0px 8px;">{{item.count}}</text> |
|||
</view> |
|||
|
|||
|
|||
<text style="color: #FF5006;font-size: 14px;">￥{{convertPrice(item.price)}}</text> |
|||
|
|||
</view> |
|||
|
|||
<view v-if="item.giftBagGoods.length>0"> |
|||
<view style="height: 10px;"></view> |
|||
|
|||
<view v-for="(child,pos) in item.giftBagGoods" :key="pos" |
|||
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;"> |
|||
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;"> |
|||
</image> |
|||
<view |
|||
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap"> |
|||
{{child.name}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;"> |
|||
{{child.count}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;"> |
|||
{{child.spec}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view slot="loadingMoreNoMore"> |
|||
<view style="display: flex;flex-direction: column;justify-content: center; align-items: center; margin-top: 20px; border-top: 2px #efefef solid; |
|||
padding-top: 20px; margin-left:20px;margin-right: 20px;;"> |
|||
<text style="color: #888888; font-size: 13px;">您也可以自由选菜，自建惠享云菜窖。</text> |
|||
|
|||
<text style="color: #fff; font-size: 16px; font-weight: 600; font-family: sans-serif; background: #FCA45C; border-radius: 8px; padding: 10px 15px; margin-top: 15px;;" @click="optionalClick()">自建云菜窖</text> |
|||
</view> |
|||
<view style="height: 20px;"></view> |
|||
</view> |
|||
|
|||
|
|||
</z-paging> |
|||
|
|||
<!-- </view> --> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject: { |
|||
// 'position': 'fixed', |
|||
// 'top':'80vw', |
|||
'margin-top': '68vw', |
|||
'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: 75vw; |
|||
/* 加载背景图 */ |
|||
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,533 @@ |
|||
<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> --> |
|||
<image @click="bind" src="https://supervise.yxtsoft.com/lpk/image/bind2.png" |
|||
style="margin-top: 60vw; margin-right: 25px;width: 20px;height: 20px;"> |
|||
</image> |
|||
</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" :auto="false"> |
|||
|
|||
<view v-for="(item,index) in data" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px; " |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)"> |
|||
|
|||
<!-- 家庭卡--> |
|||
<view 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 v-if="item.list.length>0"> |
|||
<view style="height: 10px;"></view> |
|||
|
|||
<view v-for="(child,pos) in item.list" :key="pos" |
|||
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;"> |
|||
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;"> |
|||
</image> |
|||
<view |
|||
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap"> |
|||
{{child.goodsName}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;"> |
|||
{{child.content}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;"> |
|||
{{child.remarks}} |
|||
</view> |
|||
</view> |
|||
</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 v-if="item.list.length>0"> |
|||
<view style="height: 10px;"></view> |
|||
|
|||
<view v-for="(child,pos) in item.list" :key="pos" |
|||
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;"> |
|||
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;"> |
|||
</image> |
|||
<view |
|||
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap"> |
|||
{{child.goodsName}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;"> |
|||
{{child.content}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;"> |
|||
{{child.remarks}} |
|||
</view> |
|||
</view> |
|||
</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 v-if="item.list.length>0"> |
|||
<view style="height: 10px;"></view> |
|||
|
|||
<view v-for="(child,pos) in item.list" :key="pos" |
|||
style="display: flex;flex-direction: row;align-items: center;width: calc(100vw - 120px);padding-top: 5px;box-sizing: border-box;"> |
|||
<image src="../../static/tck_mx_icon.png" style="width: 9px;height: 9px;"> |
|||
</image> |
|||
<view |
|||
style="font-size: 11px;color: #E99D42;padding-left: 5px;flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap"> |
|||
{{child.goodsName}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;flex-shrink: 0;margin-left: 23px;"> |
|||
{{child.content}} |
|||
</view> |
|||
<view style="font-size: 11px;color: #E99D42;min-width: 60px;text-align: right;padding-left: 5px;"> |
|||
{{child.remarks}} |
|||
</view> |
|||
</view> |
|||
</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 |
|||
}, |
|||
onShow() { |
|||
this.$refs.paging.reload(true); |
|||
}, |
|||
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 { |
|||
border-radius: 8px; |
|||
width: calc(100% - 5px); |
|||
background-color: rgba(255, 248, 248, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
box-shadow: 2px 3px 6px 0px rgba(255, 226, 222, 0.62); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); */ |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
/* background-size: 100% 100%; */ |
|||
/* width: calc(100% - 5px); */ |
|||
|
|||
width: calc(100% - 5px); |
|||
border-radius: 8px; |
|||
background-color: rgba(255, 251, 248, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15); |
|||
} |
|||
|
|||
.item3 { |
|||
/* 加载背景图 */ |
|||
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_affection.png); */ |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
/* background-size: 100% 100%; */ |
|||
/* width: calc(100% - 5px); */ |
|||
|
|||
border-radius: 8px; |
|||
background-color: rgba(255, 254, 249, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
box-shadow: 2px 3px 6px 0px rgba(224, 218, 168, 0.24); |
|||
} |
|||
|
|||
.item4 { |
|||
/* 加载背景图 */ |
|||
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); */ |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
/* background-size: 100% 100%; */ |
|||
/* width: calc(100% - 5px); */ |
|||
|
|||
width: calc(100% - 5px); |
|||
border-radius: 8px; |
|||
background-color: rgba(255, 251, 248, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15); |
|||
} |
|||
|
|||
|
|||
.item5 { |
|||
/* 加载背景图 */ |
|||
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_enterprise.png); */ |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
/* background-size: 100% 100%; */ |
|||
/* width: calc(100% - 5px); */ |
|||
|
|||
width: calc(100% - 5px); |
|||
border-radius: 8px; |
|||
background-color: rgba(255, 251, 248, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15); |
|||
} |
|||
|
|||
.item6 { |
|||
/* 加载背景图 */ |
|||
/* background-image: url(https://supervise.yxtsoft.com/lpk/image/home_itemBj_lose.png); */ |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
/* background-size: 100% 100%; */ |
|||
/* width: calc(100% - 5px); */ |
|||
|
|||
width: calc(100% - 5px); |
|||
border-radius: 8px; |
|||
background-color: rgba(255, 251, 248, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
box-shadow: 2px 3px 6px 0px rgba(238, 117, 47, 0.15); |
|||
} |
|||
|
|||
|
|||
.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> |
|||
@ -0,0 +1,243 @@ |
|||
<template> |
|||
<view> |
|||
<!-- 自定义导航栏 --> |
|||
<view class="navBarBox"> |
|||
<!-- 状态栏占位 --> |
|||
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> |
|||
<!-- 真正的导航栏内容 --> |
|||
<view class="navBar"> |
|||
<view>绑定账号</view> |
|||
</view> |
|||
</view> |
|||
<view style="margin-top: 30rpx;"> |
|||
<view class="inputRow"> |
|||
<!-- <image src="../../static/baseIcon/username.png" mode="aspectFill" class="drawableLeft"></image> --> |
|||
<input type="number" maxlength="11" @input="phoneText" placeholder="请输入手机号" class="input" /> |
|||
<SendCodeItem :phoneNum="page.mobile" url="/v1/wxuser/sendVerificationCode" @click="send" |
|||
ref="wxCodeItem"></SendCodeItem> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- <view class="inputRow"> |
|||
<image src="../../static/baseIcon/code.png" mode="aspectFill" class="drawableLeft"></image> |
|||
<input type="number" @input="codeText" maxlength="6" placeholder="请输入验证码" class="input" /> |
|||
</view> --> |
|||
|
|||
|
|||
<view class="btn" @click="next"> |
|||
<text class="btnText">绑定账号</text> |
|||
</view> |
|||
|
|||
<view v-show="!isShow"> |
|||
<view style="display: flex;flex-direction: column;justify-content: center;width: 100%;margin-top: 50px;"> |
|||
<text style="width: 100%;text-align: center;font-size: 35px;color: #f00;">抱歉！</text> |
|||
<text style="margin: 20px; text-align: center;font-size: 30px;color: #f00;">您的平台应用未被授权，请联系工作人员。</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShow: true, |
|||
// 状态栏高度 |
|||
statusBarHeight: 0, |
|||
// 导航栏高度 |
|||
navBarHeight: 82 + 11, |
|||
page: { |
|||
mobile: '', |
|||
openid: '', |
|||
code: '', |
|||
unionid: "" |
|||
} |
|||
}; |
|||
}, |
|||
|
|||
//第一次加载时调用 |
|||
created() { |
|||
//获取手机状态栏高度 |
|||
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; |
|||
}, |
|||
onShow() { |
|||
/* #ifdef MP-WEIXIN */ |
|||
wx.hideHomeButton(); |
|||
/* #endif */ |
|||
}, |
|||
onLoad(options) { |
|||
console.log('=======', options) |
|||
this.page.openid = options.openid |
|||
this.page.unionid = options.unionid |
|||
console.log('this.page', this.page) |
|||
|
|||
}, |
|||
methods: { |
|||
next() { |
|||
var mobileLength = this.page.mobile.length; |
|||
var codeLength = this.page.code.length; |
|||
if (mobileLength == 0) { |
|||
uni.showToast({ |
|||
icon: 'error', |
|||
title: '手机号不能为空' |
|||
}) |
|||
return; |
|||
} |
|||
|
|||
let _this = this |
|||
console.log('1111', _this.page) |
|||
_this.$api.wxBindMobile(_this.page).then((resp) => { |
|||
// if (resp.success) { |
|||
console.log('1111', resp) |
|||
|
|||
getApp().globalData.sid = resp |
|||
// getApp().globalData.token = resp.token |
|||
// getApp().globalData.sid = resp.sid |
|||
// getApp().globalData.mobile = resp.mobile |
|||
// getApp().globalData.isLogin = true |
|||
|
|||
// _this.WritePreference("sysUserSid", res.data) |
|||
// _this.WritePreference("isLogin", true) |
|||
// getApp().globalData.isLogin = true |
|||
// getApp().globalData.sysUserSid = res.data |
|||
|
|||
uni.switchTab({ |
|||
url: '/pages/card/card' |
|||
}) |
|||
|
|||
// uni.switchTab({ |
|||
// url: '/pages/home/WorkFragment' |
|||
// }); |
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
// uni.showModal({ |
|||
// title: '温馨提示', |
|||
// content: '您的平台应用未被授权，请联系工作人员。', |
|||
// showCancel: false, |
|||
// success: function(res) { |
|||
// if (res.confirm) { |
|||
|
|||
// } else { |
|||
// console.log('点击了取消') |
|||
// } |
|||
// } |
|||
// }) |
|||
|
|||
}) |
|||
|
|||
|
|||
// this.HTTP({ |
|||
// url: 'aos/v1/aosUser/wxBindMobile', |
|||
// data: { |
|||
// mobile: this.page.phone, |
|||
// sysUserWxAuthSid: this.page.sysUserWxAuthSid, |
|||
// code: this.page.code |
|||
// }, |
|||
// method: 'POST', |
|||
// paramsType: "JSON", |
|||
// loading: true |
|||
// }).then((res) => { |
|||
// console.log('=======', res) |
|||
// if (res.code == 200) { |
|||
// // 保存 |
|||
// _this.WritePreference("sysUserSid", res.data) |
|||
// _this.WritePreference("isLogin", true) |
|||
// getApp().globalData.isLogin = true |
|||
// getApp().globalData.sysUserSid = res.data |
|||
// console.log( |
|||
// '=======1111111111111111111111111111111sdfasdf;kjasdfjkasdklfkasdjf;asdddddddddddddd', |
|||
// res) |
|||
// // $emit 触发事件 （主要返回给webviwew页面） |
|||
// // uni.$emit('login', res.data.memberSid) |
|||
// uni.navigateBack({ |
|||
// delta: 10 |
|||
// }); |
|||
|
|||
// } |
|||
// }); |
|||
|
|||
|
|||
}, |
|||
phoneText(e) { |
|||
//手机号 |
|||
this.page.mobile = e.detail.value; |
|||
}, |
|||
send(e) { //发送验证码 |
|||
console.log(e); |
|||
this.isShow = e.success |
|||
console.log("this.isShow", this.isShow); |
|||
|
|||
}, |
|||
codeText(e) { |
|||
//验证码 |
|||
this.page.code = e.detail.value; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.navBarBox { |
|||
background: #007AFF; |
|||
} |
|||
|
|||
.navBarBox .statusBar {} |
|||
|
|||
.navBarBox .navBar { |
|||
padding-top: 15px; |
|||
padding-bottom: 13px; |
|||
display: flex; |
|||
font-size: 13px; |
|||
flex-direction: row; |
|||
color: #ffffff; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.inputRow { |
|||
display: flex; |
|||
margin-left: 30rpx; |
|||
margin-right: 30rpx; |
|||
margin-bottom: 10rpx; |
|||
margin-top: 10rpx; |
|||
padding-bottom: 10rpx; |
|||
border-bottom: 0.1px #F1F1F1 solid; |
|||
align-items: center; |
|||
|
|||
.input { |
|||
margin-left: 20rpx; |
|||
height: 70rpx; |
|||
flex: 1; |
|||
font-size: 32rpx; |
|||
} |
|||
|
|||
.drawableLeft { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
display: flex; |
|||
width: 90%; |
|||
height: 80rpx; |
|||
flex-direction: column; |
|||
background-color: #007AFF; |
|||
margin-top: 80rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
|
|||
.btnText { |
|||
color: #ffffff; |
|||
font-size: 33rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,261 @@ |
|||
<template> |
|||
|
|||
<view style="margin-left: 20px; margin-right: 20px;padding-bottom: 50px"> |
|||
|
|||
<view style="display: flex;width: 100%;"> |
|||
<view style="flex: 1;"></view> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;color: white; |
|||
margin-top: 10px;margin-right: 5px;border: none; padding: 5px 15px; |
|||
border-radius: 5px 5px; |
|||
background: #0498FD;" @click="download"> |
|||
下载 |
|||
</text> |
|||
</view> |
|||
|
|||
|
|||
<view |
|||
style="display: flex;width: 100%;justify-content: center;size: 25px;font-family: sans-serif;font-weight: 600;margin-top: 10px;"> |
|||
每日回款审核报告 |
|||
</view> |
|||
|
|||
<view style="margin-top: 20px;font-family: sans-serif;font-weight: 600;">石家庄汇融农村合作银行振头支行：</view> |
|||
|
|||
<view style=" line-height: 30px; margin-top: 10px;text-indent:2em;"> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.companyName}}</text> |
|||
<text>昨日销售及今日回款情况如下：昨日销售总计：</text> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.totalSales}}</text> |
|||
<text> 元，今日应回款：</text> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.collection}}</text> |
|||
<text> 元，今日实际回款：</text> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.actualCollection}}</text> |
|||
<text> 元，回款差额：</text> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.difference}}</text> |
|||
<text> 元，未回款原因平台扣除手续费、服务费等。具体原因详见附件今日回款明细。</text> |
|||
|
|||
<view> |
|||
<text>截至</text> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.endTime}}</text> |
|||
<text>，今日支付完毕款项后，账户余额为：</text> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.balance}}</text> |
|||
<text> 元。</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-top: 15px; line-height: 30px;"> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;">审核结果：</text> |
|||
<text style="text-indent:2em;">{{info.auditResult}}</text> |
|||
<!-- <view> |
|||
<text |
|||
style="margin-top: 10px;text-indent:2em;">实际回款资金已按要求回到{{info.companyName}}{{info.account}}（账号为</text> |
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.accountNumber}}</text> |
|||
<text>）。</text> |
|||
</view> --> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: column;width: 100%;align-items: flex-end; margin-top: 30px;"> |
|||
|
|||
<text style="font-family: sans-serif;font-weight: 600;">{{info.reviewedBy}}</text> |
|||
<text style="margin-top:10px ; font-family: sans-serif;font-weight: 600;">{{info.date}}</text> |
|||
|
|||
</view> |
|||
|
|||
|
|||
<view style="margin-top: 50px; display: flex; flex-direction: column;"> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;padding-bottom: 10px;">附件：今日回款明细</text> |
|||
<uni-table ref="table1" border stripe emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th align="center">销售日期</uni-th> |
|||
<uni-th align="center">支付渠道</uni-th> |
|||
<uni-th align="center">金额（元）</uni-th> |
|||
<uni-th align="center">对应公司主体</uni-th> |
|||
<uni-th align="center">回款金额</uni-th> |
|||
<uni-th align="center">回款差额</uni-th> |
|||
<uni-th align="center">备注</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData1" :key="index"> |
|||
<uni-td align="center">{{ item.salesDate }}</uni-td> |
|||
<uni-td align="center">{{ item.payChannels }}</uni-td> |
|||
<uni-td align="center">{{ item.money }}</uni-td> |
|||
<uni-td align="center">{{ item.mainBody }}</uni-td> |
|||
<uni-td align="center">{{ item.collection }}</uni-td> |
|||
<uni-td align="center">{{ item.different }}</uni-td> |
|||
<uni-td align="center">{{ item.notes }}</uni-td> |
|||
</uni-tr> |
|||
|
|||
</uni-table> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 30px; display: flex; flex-direction: column;"> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;padding-bottom: 10px;">附件：昨日销售报表</text> |
|||
|
|||
<uni-table ref="table2" border stripe emptyText="暂无更多数据"> |
|||
|
|||
<uni-tr> |
|||
<uni-th align="center">支付渠道</uni-th> |
|||
<uni-th align="center">金额（元）</uni-th> |
|||
<uni-th align="center">对应公司主体</uni-th> |
|||
<uni-th align="center">到账周期</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData2" :key="index"> |
|||
<uni-td align="center">{{ item.payChannels }}</uni-td> |
|||
<uni-td align="center">{{ item.money }}</uni-td> |
|||
<uni-td align="center">{{ item.mainBody }}</uni-td> |
|||
<uni-td align="center">{{ item.cycle }}</uni-td> |
|||
</uni-tr> |
|||
|
|||
</uni-table> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
dataDate: "2023-06-14", |
|||
companyName: "河北源蜂惠民科技集团有限公司" |
|||
}, |
|||
loading1: false, |
|||
loading2: false, |
|||
info: { |
|||
companyName: "", |
|||
totalSales: "", |
|||
collection: "", |
|||
actualCollection: "", |
|||
different: "", |
|||
endTime: "", |
|||
balance: "", |
|||
account: "", |
|||
accountNumber: "", |
|||
reviewedBy: "", |
|||
date: "", |
|||
}, |
|||
|
|||
tableData1: [ |
|||
// { |
|||
// "salesDate": "2023年6月7日", |
|||
// "payChannels": "批发-京东", |
|||
// "money": "397.09", |
|||
// "mainBody": "源蜂-汇融", |
|||
// "collection": "357.87", |
|||
// "different": "39.22", |
|||
// "notes": "6.7回小时购150.12" |
|||
// }, |
|||
], |
|||
tableData2: [ |
|||
// { |
|||
// "payChannels": "现金", |
|||
// "money": "63094.88", |
|||
// "mainBody": "-", |
|||
// "cycle": "每月19号归集" |
|||
// }, |
|||
], |
|||
|
|||
fileUrl: "" |
|||
}; |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
// this.queryParams = { |
|||
// dataDate: option.dataDate, |
|||
// companyName: option.companyName |
|||
// } |
|||
|
|||
console.log('1111', this.queryParams) |
|||
this.getData() |
|||
|
|||
}, |
|||
onShow() { |
|||
wx.hideHomeButton() |
|||
}, |
|||
methods: { |
|||
|
|||
download() { |
|||
if (this.fileUrl == '') { |
|||
uni.showToast({ |
|||
title: "下载地址错误，请重新进入页面。", |
|||
duration: 5000 |
|||
}) |
|||
return |
|||
} |
|||
|
|||
uni.downloadFile({ |
|||
url: this.fileUrl, // 网络文档地址 |
|||
success: (data) => { |
|||
if (data.statusCode === 200) { |
|||
uni.saveFile({ |
|||
tempFilePath: data.tempFilePath, //临时路径 |
|||
success: function(res) { |
|||
// 保存路径 |
|||
uni.showToast({ |
|||
title: "文件已保存：" + res.savedFilePath, |
|||
duration: 5000 |
|||
}) |
|||
setTimeout(() => { |
|||
//打开文档查看 |
|||
uni.openDocument({ |
|||
filePath: res.savedFilePath, |
|||
showMenu: true, //右上角是否有可以转发分享的功能 |
|||
success: function(res) { |
|||
console.log('打开文档成功') |
|||
} |
|||
}) |
|||
}, 3000); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
uni.showToast({ |
|||
title: '失败请重新下载' |
|||
}); |
|||
}, |
|||
}); |
|||
|
|||
|
|||
}, |
|||
|
|||
getData() { |
|||
console.log('getData', this.queryParams) |
|||
this.$api.getReportInfo(this.queryParams).then((resp) => { |
|||
console.log('1111>>>>>>', resp) |
|||
this.fileUrl = resp.downloadUrl |
|||
this.info = resp |
|||
|
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
|
|||
this.$api.getCsmReportTodayByComSid(this.queryParams).then((resp) => { |
|||
console.log('2222>>>>>>', resp) |
|||
this.loading1 = true |
|||
this.tableData1 = resp |
|||
|
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
|
|||
this.$api.getCsmReportYesterdayByComSid(this.queryParams).then((resp) => { |
|||
console.log('3333>>>>>>', resp) |
|||
this.loading2 = true |
|||
this.tableData2 = resp |
|||
|
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<view class="pages"> |
|||
<uni-card title="36524快消品动产质押项目" :isFull="true" extra="点击下载Excel文件" :thumbnail="avatar" |
|||
style="padding-top: 10px;"> |
|||
<template v-slot:title> |
|||
<uni-section :title="logInfo.title" title-font-size="25" type="line"> |
|||
<template v-slot:decoration> |
|||
<uni-icons type="location-filled" size="18" color="green"></uni-icons> |
|||
</template> |
|||
<template v-slot:right> <uni-tag :inverted="true" text="下载Excel文件" type="primary" |
|||
@click="onClick" /> </template> |
|||
</uni-section> |
|||
</template> |
|||
|
|||
<view style="display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;"> |
|||
<text>上报日期：</text> |
|||
<text>{{logInfo.reportTime}}</text> |
|||
</view> |
|||
|
|||
<view style="flex: 1;"> |
|||
<text>货值总计：</text> |
|||
<text>{{logInfo.countAmount}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <uni-list> |
|||
<uni-list-item title="上报日期:" :rightText="logInfo.reportTime"></uni-list-item> |
|||
<uni-list-item title="货值总计:" :right-text="logInfo.countAmount"></uni-list-item> |
|||
</uni-list> --> |
|||
|
|||
<view v-for="(item, index) in tableData1" style="margin-top: 10px;"> |
|||
<view> |
|||
<uni-title type="h3" :title="item.storeType" color="#444"></uni-title> |
|||
<uni-row> |
|||
<uni-col :span="8"> |
|||
<view class="table-header tleft"><text>仓库数量</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-header"><text>品种数量</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-header"><text>品种货值</text></view> |
|||
</uni-col> |
|||
</uni-row> |
|||
<uni-row> |
|||
<uni-col :span="8"> |
|||
<view class="table-body tleft"><text>{{item.storeNumber}}</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-body"><text>{{item.productCountNumber}}</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-body"><text>{{item.productAmount}}</text></view> |
|||
</uni-col> |
|||
</uni-row> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</uni-card> |
|||
|
|||
<uni-collapse style="margin-top: 10px;"> |
|||
|
|||
<uni-collapse-item title="仓库库存明细表" style="font-size: 18px;" :open="true"> |
|||
|
|||
<view style="display: flex;flex-direction: row;margin-left: 16px;"> |
|||
|
|||
<view style="flex: 1;"> |
|||
<text>商品数量合计：</text> |
|||
<text>{{logInfo2.countProductNumber}}</text> |
|||
</view> |
|||
|
|||
<view style="flex: 1;"> |
|||
<text>商品货值合计：</text> |
|||
<text>{{logInfo2.countAmount}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="ttbale"style="margin-top: 10px;" > |
|||
<uni-row> |
|||
<uni-col :span="8"> |
|||
<view class="table-header tleft"><text>序号</text></view> |
|||
</uni-col> |
|||
<uni-col :span="16"> |
|||
<view class="table-header"><text>仓库名称</text></view> |
|||
</uni-col> |
|||
</uni-row> |
|||
<uni-row> |
|||
<uni-col :span="8"> |
|||
<view class="table-header tleft"><text>商品数量</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-header"><text>商品品种数量</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-header"><text>货值</text></view> |
|||
</uni-col> |
|||
</uni-row> |
|||
</view> |
|||
|
|||
<view v-for="(item, index) in tableData2" > |
|||
|
|||
<view class="ttbale"> |
|||
<uni-row> |
|||
<uni-col :span="8"> |
|||
<view class="table-body tleft"><text>{{index+1}}</text></view> |
|||
</uni-col> |
|||
<uni-col :span="16"> |
|||
<view class="table-body"><text>{{item.storeCodeName}}</text></view> |
|||
</uni-col> |
|||
</uni-row> |
|||
<uni-row> |
|||
<uni-col :span="8"> |
|||
<view class="table-body tleft"><text>{{ item.productCountNumber}}</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-body"><text>{{item.typeNumber}}</text></view> |
|||
</uni-col> |
|||
<uni-col :span="8"> |
|||
<view class="table-body"><text>{{item.productAmount}}</text></view> |
|||
</uni-col> |
|||
</uni-row> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</uni-collapse-item> |
|||
|
|||
</uni-collapse> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
date: "2023-06-25", |
|||
tableData1: [], |
|||
logInfo: { |
|||
title: "", |
|||
reportTime: "", |
|||
countAmount: "", |
|||
}, |
|||
tableData2: [], |
|||
logInfo2: { |
|||
countProductNumber: "", |
|||
countAmount: "", |
|||
}, |
|||
tableData3: [], |
|||
logInfo3: { |
|||
countProductNumber: "", |
|||
countAmount: "", |
|||
}, |
|||
|
|||
|
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
// this.date = option.orderDate |
|||
|
|||
// console.log('1111', this.queryParams) |
|||
this.getData() |
|||
|
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
onClick(e) { |
|||
uni.showToast({ |
|||
title: '点击下载文件', |
|||
duration: 2000 |
|||
}); |
|||
console.log(e) |
|||
}, |
|||
actionsClick(text) { |
|||
uni.showToast({ |
|||
title: text, |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
getData() { |
|||
console.log('getData', this.date) |
|||
this.$api.getReportInventoryDayGather(this.date).then((resp) => { |
|||
console.log('1111>>>>>>', resp) |
|||
this.fileUrl = resp.downloadUrl |
|||
this.tableData1 = resp.list |
|||
this.logInfo = { |
|||
title: resp.title, |
|||
reportTime: resp.orderDate, |
|||
countAmount: resp.countAmount, |
|||
} |
|||
|
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
|
|||
this.$api.getReportInventoryDayStore(this.date).then((resp) => { |
|||
console.log('2222>>>>>>', resp) |
|||
this.tableData2 = resp.list |
|||
this.logInfo2 = { |
|||
countProductNumber: resp.countProductNumber, |
|||
countAmount: resp.countAmount, |
|||
} |
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
|
|||
// this.$api.getReportInventoryDayToStore(this.date).then((resp) => { |
|||
// console.log('3333>>>>>>', resp) |
|||
// this.tableData3 = resp.list |
|||
// this.logInfo3 = { |
|||
// countProductNumber: resp.countProductNumber, |
|||
// countAmount: resp.countAmount, |
|||
// } |
|||
// }).catch(e => { |
|||
// console.log('eeeee', e) |
|||
// }) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.pages {} |
|||
|
|||
$uni-success: #18bc37 !default; |
|||
|
|||
.table-header { |
|||
text-align: center; |
|||
border: 0.5px solid #ccc; |
|||
font-weight: bold; |
|||
font-size: 15px; |
|||
border-left: 0.0px; |
|||
padding: 5px; |
|||
} |
|||
|
|||
.table-body { |
|||
text-align: center; |
|||
border: 0.5px solid #ccc; |
|||
font-size: 13px; |
|||
padding: 5px; |
|||
border-left: 0.0px; |
|||
border-top: 0.0px; |
|||
} |
|||
|
|||
.tleft { |
|||
border-left: 0.5px solid #ccc; |
|||
} |
|||
|
|||
.ttbale { |
|||
margin: 0px 10px 0px 10px; |
|||
// border-bottom: 1px solid #ccc; |
|||
} |
|||
|
|||
.uni-wrap { |
|||
flex-direction: column; |
|||
/* #ifdef H5 */ |
|||
height: calc(100vh - 44px); |
|||
/* #endif */ |
|||
/* #ifndef H5 */ |
|||
height: 100vh; |
|||
/* #endif */ |
|||
flex: 1; |
|||
} |
|||
|
|||
.mb-10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.decoration { |
|||
width: 8px; |
|||
height: 8px; |
|||
margin-right: 4px; |
|||
border-radius: 50%; |
|||
background-color: $uni-success; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,247 @@ |
|||
<template> |
|||
<view class="charts-box" style="padding-bottom: 50px;"> |
|||
|
|||
<view class="top" style="margin-top: 15px;"> |
|||
<text>企业名称：</text> |
|||
<text>{{queryParams.businessName}}</text> |
|||
</view> |
|||
<view class="top"> |
|||
<text>核查日期：</text> |
|||
<text>{{queryParams.executionTime}}</text> |
|||
</view> |
|||
<view class="top"> |
|||
<text>核查结果：</text> |
|||
<text>{{result}}</text> |
|||
</view> |
|||
|
|||
<view v-show="isShow"> |
|||
|
|||
<view class="top"> |
|||
<text>异常信息详情：</text> |
|||
</view> |
|||
|
|||
<block v-for="item in list" :key="item.index"> |
|||
<!-- 包裹图片+两行文字 id="{{index}}"是给按下了那个item记录--> |
|||
<view class="view_tupian_wenzi" @click="clickData(item.index)"> |
|||
<!-- 包裹两行文字 --> |
|||
<view class="view_wenzi2"> |
|||
<view class="top2"> |
|||
<text>列入日期：</text> |
|||
<text>{{item.addDate}}</text> |
|||
</view> |
|||
<view class="top2"> |
|||
<text>列入经营异常名录原因：</text> |
|||
<text>{{item.addReason}}</text> |
|||
</view> |
|||
<view class="top2"> |
|||
<text>作出决定机关：</text> |
|||
<text>{{item.decisionOffice}}</text> |
|||
</view> |
|||
<view class="top2"> |
|||
<text>移出日期：</text> |
|||
<text>{{item.removeDate}}</text> |
|||
</view> |
|||
<view class="top2"> |
|||
<text>移出经营异常名录原因：</text> |
|||
<text>{{item.romoveReason}}</text> |
|||
</view> |
|||
<view class="top2"> |
|||
<text>移出决定机关：</text> |
|||
<text>{{item.removeDecisionOffice}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</block> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: "", |
|||
result: "", |
|||
isShow: false, |
|||
queryParams: { |
|||
businessName: "", |
|||
executionTime: "" |
|||
}, |
|||
list: [], |
|||
fileUrl:"", |
|||
}; |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
// var data = JSON.stringify(option) |
|||
|
|||
this.queryParams = { |
|||
businessName: option.businessName, |
|||
executionTime: option.executionTime |
|||
} |
|||
|
|||
console.log('1111', this.queryParams) |
|||
|
|||
// this.setData({ |
|||
// queryParams: JSON.stringify(option) |
|||
// }) |
|||
|
|||
// console.log('setData', this.queryParams) |
|||
this.getData() |
|||
|
|||
// console.log('App onLoad', JSON.stringify(option)) |
|||
// this.title = JSON.stringify(option) |
|||
// wx.showToast({ |
|||
// title: 'onLoad成功>>>>>' + JSON.stringify(option), |
|||
// icon: 'none', |
|||
// duration: 5000 //持续的时间 |
|||
// }) |
|||
|
|||
}, |
|||
onShow() { |
|||
wx.hideHomeButton() |
|||
}, |
|||
methods: { |
|||
download() { |
|||
uni.downloadFile({ |
|||
url: this.fileUrl,// 网络文档地址 |
|||
success: (data) => { |
|||
if (data.statusCode === 200) { |
|||
uni.saveFile({ |
|||
tempFilePath: data.tempFilePath, //临时路径 |
|||
success: function(res) { |
|||
// 保存路径 |
|||
uni.showToast({ title: "文件已保存："+res.savedFilePath,duration:5000 }) |
|||
setTimeout(()=>{ |
|||
//打开文档查看 |
|||
uni.openDocument({ |
|||
filePath:res.savedFilePath, |
|||
showMenu: true,//右上角是否有可以转发分享的功能 |
|||
success:function(res){ |
|||
console.log('打开文档成功') |
|||
} |
|||
}) |
|||
}, 3000); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
uni.showToast({ |
|||
title: '失败请重新下载' |
|||
}); |
|||
}, |
|||
}); |
|||
|
|||
|
|||
}, |
|||
getData() { |
|||
console.log('getData', this.queryParams) |
|||
this.$api.selectBusinessRiskInfo(this.queryParams).then((resp) => { |
|||
console.log('1111>>>>>>', resp) |
|||
this.list = resp |
|||
console.log('2222>>>>>>', this.list.length) |
|||
this.result = this.list.length == 0 ? "无异常信息" : "共有" + this.list.length + "条异常信息" |
|||
this.isShow = this.list.length == 0 ? false : true |
|||
|
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
}, |
|||
clickData(e) { |
|||
console.log("按了：", e.currentTarget.id) |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.top { |
|||
margin-left: 25px; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
/* 包裹图片和两行文字 */ |
|||
|
|||
.view_tupian_wenzi { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
|
|||
/* 圆角 */ |
|||
border-radius: 20rpx; |
|||
|
|||
/* 边 */ |
|||
border: 3rpx solid #E0E3DA; |
|||
box-shadow: 5rpx 5rpx 5rpx 5rpx #E0E3DA; |
|||
|
|||
background-color: #ffffff; |
|||
margin: 30rpx; |
|||
|
|||
/* padding使得文字和图片不至于贴着边框 */ |
|||
padding: 30rpx; |
|||
|
|||
} |
|||
|
|||
/* 图片 */ |
|||
|
|||
.image_1 { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
} |
|||
|
|||
/* 包裹两行文字 */ |
|||
|
|||
.view_wenzi2 { |
|||
|
|||
width: 100%; |
|||
margin-left: 25rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.top2 { |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.text1 { |
|||
font-size: 15px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.text2 { |
|||
flex: 1; |
|||
margin-top: 5px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
/* 小字 */ |
|||
|
|||
.text_small { |
|||
font-size: 30rpx; |
|||
word-break: break-all; |
|||
color: #7a7878; |
|||
margin-top: 10rpx |
|||
} |
|||
|
|||
.text_small2 { |
|||
font-size: 25rpx; |
|||
color: #f00; |
|||
margin-top: 10rpx |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<view class="charts-box"> |
|||
|
|||
<view style="display: flex;justify-content: center; width: 100%; "> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" @click="jump(1)">1</text> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" @click="jump(2)">2</text> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" @click="jump(3)">3</text> |
|||
</view> |
|||
|
|||
<view style="margin-top: 20px;margin-left: 20px;"> |
|||
<text>当日数据1</text> |
|||
<text style="margin-left: 10px;">{{newDate}}</text> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 15px;margin-left: 10px;margin-right: 10px;"> |
|||
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" /> |
|||
</view> |
|||
|
|||
|
|||
<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;"> |
|||
|
|||
<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th align="center">现金流量-经营活动产生的现金流量(元)</uni-th> |
|||
<uni-th align="center">总额</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData" :key="index"> |
|||
<uni-td align="center">{{ item.name }}</uni-td> |
|||
<uni-td align="center">{{ item.price }}</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;"> |
|||
|
|||
<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th width="200" align="center">销售渠道类别</uni-th> |
|||
<uni-th align="center">总额</uni-th> |
|||
<uni-th align="center">应收帐款</uni-th> |
|||
<uni-th align="center">扣除应收</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData2" :key="index"> |
|||
<uni-td align="center">{{ item.name }}</uni-td> |
|||
<uni-td align="center">{{ item.totalAmount }}</uni-td> |
|||
<uni-td align="center">{{ item.accountsReceivable }}</uni-td> |
|||
<uni-td align="center">{{ item.deductionAccountsReceivable }}</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
|
|||
|
|||
</view> |
|||
<navigator url="enterpriseRisk?businessName=aaaabbbb&executionTime=2023-03-15" hover-class="navigator-hover"> |
|||
<button type="default" style="margin-top: 20px;">测试企业经营页面</button> |
|||
</navigator> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
newDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), |
|||
tableData: [{ |
|||
name: "销售商品收到的现金(元)", |
|||
price: "2000000", |
|||
}, |
|||
{ |
|||
name: "收到其他与经营活动有关的现金(元)", |
|||
price: "28700", |
|||
}, |
|||
{ |
|||
name: "本项合计", |
|||
price: "123456", |
|||
}, |
|||
], |
|||
tableData2: [{ |
|||
name: "销售商品收到的现金(元)", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793" |
|||
}, |
|||
{ |
|||
name: "连锁内加盟", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793" |
|||
}, |
|||
{ |
|||
name: "配送中心", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793", |
|||
}, { |
|||
name: "连锁外加盟", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793", |
|||
} |
|||
], |
|||
chartData: {}, |
|||
opts: { |
|||
xAxis: { |
|||
disableGrid: true |
|||
}, |
|||
yAxis: { |
|||
data: [{ |
|||
min: 0 |
|||
}] |
|||
}, |
|||
extra: { |
|||
column: { |
|||
type: "group" |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getServerData(); |
|||
|
|||
}, |
|||
methods: { |
|||
getServerData() { |
|||
setTimeout(() => { |
|||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
|||
let res = { |
|||
categories: ["2016", "2017", "2018", "2019", "2020", "2021"], |
|||
series: [{ |
|||
name: "分销商进货额", |
|||
data: [35, 36, 31, 33, 13, 34] |
|||
}, |
|||
{ |
|||
name: "实际发货额", |
|||
data: [18, 27, 21, 24, 6, 28] |
|||
} |
|||
] |
|||
}; |
|||
this.chartData = JSON.parse(JSON.stringify(res)); |
|||
}, 100); |
|||
}, |
|||
jump(index) { |
|||
console.log("index>>", index) |
|||
switch (index) { |
|||
case 1: |
|||
|
|||
break; |
|||
|
|||
case 2: |
|||
uni.navigateTo({ |
|||
url: 'index2' |
|||
}); |
|||
|
|||
break; |
|||
|
|||
case 3: |
|||
uni.navigateTo({ |
|||
url: 'index3' |
|||
}); |
|||
|
|||
break; |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */ |
|||
.charts-box { |
|||
width: 100%; |
|||
height: 300px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,179 @@ |
|||
<template> |
|||
<view class="charts-box"> |
|||
|
|||
<view style="display: flex;justify-content: center; width: 100%; "> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" |
|||
@click="jump(1)">1</text> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" |
|||
@click="jump(2)">2</text> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" |
|||
@click="jump(3)">3</text> |
|||
</view> |
|||
|
|||
<view style="margin-top: 20px;margin-left: 20px;"> |
|||
<text>2当日数据</text> |
|||
<text style="margin-left: 10px;">{{newDate}}</text> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 15px;margin-left: 10px;margin-right: 10px;"> |
|||
<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" /> |
|||
</view> |
|||
|
|||
|
|||
<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;"> |
|||
<text>到货时间预警表</text> |
|||
</view> |
|||
|
|||
<view style="margin-top: 20px;margin-left: 15px;margin-right: 15px;"> |
|||
|
|||
<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th width="50" align="center">序号</uni-th> |
|||
<uni-th width="280" align="center">供应商名称</uni-th> |
|||
<uni-th align="center">到货日期</uni-th> |
|||
<uni-th align="center">是否延期</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData2" :key="index"> |
|||
<uni-td align="center">{{ index+1 }}</uni-td> |
|||
<uni-td align="center">{{ item.supplierName }}</uni-td> |
|||
<uni-td align="center">{{ item.allArrivedDate }}</uni-td> |
|||
<uni-td align="center">{{ item.isDelay }}</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
newDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), |
|||
|
|||
tableData2: [{ |
|||
supplierName: "中粮可口可乐饮料（河北）有限公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
}, |
|||
{ |
|||
supplierName: "中顺洁柔纸业股份有限公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
}, |
|||
{ |
|||
supplierName: "今麦郎食品股份有限公司石家庄分公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
}, { |
|||
supplierName: "农夫山泉股份有限公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
}, { |
|||
supplierName: "北京百事可乐饮料有限公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
}, { |
|||
supplierName: "今麦郎食品股份有限公司石家庄分公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
}, { |
|||
supplierName: "农夫山泉股份有限公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
}, { |
|||
supplierName: "北京百事可乐饮料有限公司", |
|||
allArrivedDate: "2022.12.29", |
|||
isDelay: "是", |
|||
} |
|||
], |
|||
chartData: {}, |
|||
opts: { |
|||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", |
|||
"#ea7ccc" |
|||
], |
|||
padding: [5, 5, 5, 5], |
|||
enableScroll: false, |
|||
extra: { |
|||
pie: { |
|||
activeOpacity: 0.5, |
|||
activeRadius: 10, |
|||
offsetAngle: 0, |
|||
labelWidth: 15, |
|||
border: true, |
|||
borderWidth: 3, |
|||
borderColor: "#FFFFFF", |
|||
linearType: "custom" |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getServerData(); |
|||
}, |
|||
methods: { |
|||
getServerData() { |
|||
//模拟从服务器获取数据时的延时 |
|||
setTimeout(() => { |
|||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
|||
let res = { |
|||
series: [{ |
|||
data: [{ |
|||
"name": "一班", |
|||
"value": 50 |
|||
}, { |
|||
"name": "二班", |
|||
"value": 30 |
|||
}, { |
|||
"name": "三班", |
|||
"value": 20 |
|||
}, { |
|||
"name": "四班", |
|||
"value": 18 |
|||
}, { |
|||
"name": "五班", |
|||
"value": 8 |
|||
}] |
|||
}] |
|||
}; |
|||
this.chartData = JSON.parse(JSON.stringify(res)); |
|||
}, 500); |
|||
}, |
|||
jump(index) { |
|||
console.log("index>>2",index) |
|||
switch (index) { |
|||
case 1: |
|||
uni.navigateTo({ |
|||
url: 'index' |
|||
}); |
|||
|
|||
break; |
|||
|
|||
case 2: |
|||
|
|||
break; |
|||
|
|||
case 3: |
|||
uni.navigateTo({ |
|||
url: 'index3' |
|||
}); |
|||
|
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */ |
|||
.charts-box { |
|||
width: 100%; |
|||
height: 300px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,236 @@ |
|||
<template> |
|||
<view class="charts-box"> |
|||
|
|||
<view style="display: flex;justify-content: center; width: 100%; "> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" |
|||
@click="jump(1)">1</text> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" |
|||
@click="jump(2)">2</text> |
|||
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;" |
|||
@click="jump(3)">3</text> |
|||
</view> |
|||
|
|||
<view style="margin-top: 20px;margin-left: 20px;"> |
|||
<text>3当日数据</text> |
|||
<text style="margin-left: 10px;">{{newDate}}</text> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 15px;margin-left: 10px;"> |
|||
<qiun-data-charts type="mix" :opts="opts" :chartData="chartData" /> |
|||
</view> |
|||
|
|||
|
|||
<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;"> |
|||
|
|||
<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th align="center">现金流量-经营活动产生的现金流量(元)</uni-th> |
|||
<uni-th align="center">总额</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData" :key="index"> |
|||
<uni-td align="center">{{ item.name }}</uni-td> |
|||
<uni-td align="center">{{ item.price }}</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;"> |
|||
|
|||
<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<uni-th width="200" align="center">销售渠道类别</uni-th> |
|||
<uni-th align="center">总额</uni-th> |
|||
<uni-th align="center">应收帐款</uni-th> |
|||
<uni-th align="center">扣除应收</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData2" :key="index"> |
|||
<uni-td align="center">{{ item.name }}</uni-td> |
|||
<uni-td align="center">{{ item.totalAmount }}</uni-td> |
|||
<uni-td align="center">{{ item.accountsReceivable }}</uni-td> |
|||
<uni-td align="center">{{ item.deductionAccountsReceivable }}</uni-td> |
|||
</uni-tr> |
|||
</uni-table> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
newDate: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(), |
|||
tableData: [{ |
|||
name: "销售商品收到的现金(元)", |
|||
price: "2000000", |
|||
}, |
|||
{ |
|||
name: "收到其他与经营活动有关的现金(元)", |
|||
price: "28700", |
|||
}, |
|||
{ |
|||
name: "本项合计", |
|||
price: "123456", |
|||
}, |
|||
], |
|||
tableData2: [{ |
|||
name: "销售商品收到的现金(元)", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793" |
|||
}, |
|||
{ |
|||
name: "连锁内加盟", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793" |
|||
}, |
|||
{ |
|||
name: "配送中心", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793", |
|||
}, { |
|||
name: "连锁外加盟", |
|||
totalAmount: "2000000", |
|||
accountsReceivable: "31914", |
|||
deductionAccountsReceivable: "35793", |
|||
} |
|||
], |
|||
chartData: {}, |
|||
opts: { |
|||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", |
|||
"#ea7ccc" |
|||
], |
|||
padding: [15, 15, 0, 15], |
|||
enableScroll: false, |
|||
legend: {}, |
|||
xAxis: { |
|||
disableGrid: true, |
|||
title: "" |
|||
}, |
|||
yAxis: { |
|||
disabled: false, |
|||
disableGrid: false, |
|||
splitNumber: 5, |
|||
gridType: "dash", |
|||
dashLength: 4, |
|||
gridColor: "#CCCCCC", |
|||
padding: 10, |
|||
showTitle: true, |
|||
data: [{ |
|||
position: "left", |
|||
title: "折线" |
|||
}, |
|||
{ |
|||
position: "right", |
|||
min: 0, |
|||
max: 200, |
|||
title: "柱状图", |
|||
textAlign: "left" |
|||
}, |
|||
] |
|||
}, |
|||
extra: { |
|||
mix: { |
|||
column: { |
|||
width: 20 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getServerData(); |
|||
}, |
|||
methods: { |
|||
getServerData() { |
|||
//模拟从服务器获取数据时的延时 |
|||
setTimeout(() => { |
|||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
|||
let res = { |
|||
categories: ["2018", "2019", "2020", "2021", "2022", "2023"], |
|||
series: [{ |
|||
name: "仓库货值", |
|||
index: 1, |
|||
type: "column", |
|||
data: [40, { |
|||
"value": 30, |
|||
"color": "#f04864" |
|||
}, 55, 110, 24, 58] |
|||
}, |
|||
{ |
|||
name: "在途货值", |
|||
index: 1, |
|||
type: "column", |
|||
data: [50, 20, 75, 60, 34, 38] |
|||
}, { |
|||
name: "门店货值", |
|||
index: 1, |
|||
type: "column", |
|||
data: [50, 20, 75, 60, 34, 38] |
|||
}, { |
|||
name: "账户余额", |
|||
index: 1, |
|||
type: "column", |
|||
data: [50, 20, 75, 60, 34, 38] |
|||
}, { |
|||
name: "应收账款", |
|||
index: 1, |
|||
type: "column", |
|||
data: [50, 20, 75, 60, 34, 38] |
|||
}, { |
|||
name: "借款金额", |
|||
index: 1, |
|||
type: "column", |
|||
data: [50, 20, 75, 60, 34, 38] |
|||
}, |
|||
{ |
|||
name: "折线", |
|||
type: "line", |
|||
color: "#D33682", |
|||
data: [120, 140, 105, 170, 95, 160] |
|||
}, |
|||
] |
|||
}; |
|||
this.chartData = JSON.parse(JSON.stringify(res)); |
|||
}, 500); |
|||
}, |
|||
jump(index) { |
|||
console.log("index>>3", index) |
|||
switch (index) { |
|||
case 1: |
|||
uni.navigateTo({ |
|||
url: 'index' |
|||
}); |
|||
break; |
|||
|
|||
case 2: |
|||
uni.navigateTo({ |
|||
url: 'index2' |
|||
}); |
|||
|
|||
break; |
|||
|
|||
case 3: |
|||
|
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */ |
|||
.charts-box { |
|||
width: 100%; |
|||
height: 300px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,268 @@ |
|||
<template> |
|||
|
|||
<view style="margin-left: 20px; margin-right: 20px;padding-bottom: 50px"> |
|||
|
|||
<view style="display: flex;width: 100%;"> |
|||
<view style="flex: 1;"></view> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;color: white; |
|||
margin-top: 10px;margin-right: 5px;border: none; padding: 5px 15px; |
|||
border-radius: 5px 5px; |
|||
background: #0498FD;" @click="download"> |
|||
下载 |
|||
</text> |
|||
</view> |
|||
|
|||
|
|||
<view |
|||
style="display: flex; width: 100%;justify-content: center; size: 25px;font-family: sans-serif;font-weight: 600;margin: 10px;"> |
|||
{{date}} |
|||
</view> |
|||
|
|||
<view style="margin-top: 20px; display: flex; flex-direction: column;"> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;padding-bottom: 10px;">库存日报汇总表</text> |
|||
<text>编号:{{logInfo.serialNumber}}</text> |
|||
<text>上报时间:{{logInfo.reportTime}}</text> |
|||
<text style="margin-bottom: 10px;">货值合计:{{logInfo.countAmount}}</text> |
|||
|
|||
<uni-table ref="table1" border stripe emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<!-- <uni-th align="center">序号</uni-th> --> |
|||
<uni-th align="center" width="180">仓库类型</uni-th> |
|||
<uni-th align="center" width="80">仓库数量</uni-th> |
|||
<uni-th align="center" width="80">品种数量</uni-th> |
|||
<uni-th align="center" width="100">品种货值</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData1" :key="index"> |
|||
<!-- <uni-td align="center">{{ index+1}}</uni-td> --> |
|||
<uni-td align="center">{{ item.storeType }}</uni-td> |
|||
<uni-td align="center">{{ item.storeNumber }}</uni-td> |
|||
<uni-td align="center">{{ item.productCountNumber }}</uni-td> |
|||
<uni-td align="center">{{ item.productAmount }}</uni-td> |
|||
</uni-tr> |
|||
|
|||
</uni-table> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 50px; display: flex; flex-direction: column;"> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;padding-bottom: 10px;">仓库库存明细表</text> |
|||
<text>商品数量合计:{{logInfo2.countProductNumber}}</text> |
|||
<text style="margin-bottom: 10px;">商品货值合计:{{logInfo2.countAmount}}</text> |
|||
<uni-table ref="table1" border stripe emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<!-- <uni-th align="center" width="50">序号</uni-th> --> |
|||
<uni-th align="center" width="180">仓库名称</uni-th> |
|||
<uni-th align="center" width="80">商品数量</uni-th> |
|||
<uni-th align="center" width="100">商品货值</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData2" :key="index"> |
|||
<!-- <uni-td align="center">{{ index+1 }}</uni-td> --> |
|||
<uni-td align="center">{{ item.storeCodeName }}</uni-td> |
|||
<uni-td align="center">{{ item.productCountNumber }}</uni-td> |
|||
<uni-td align="center">{{ item.productAmount }}</uni-td> |
|||
</uni-tr> |
|||
|
|||
</uni-table> |
|||
|
|||
</view> |
|||
|
|||
<view style="margin-top: 50px; display: flex; flex-direction: column;"> |
|||
<text style="size: 25px;font-family: sans-serif;font-weight: 600;padding-bottom: 10px;">烟草库存明细表</text> |
|||
<text>商品数量合计:{{logInfo3.countProductNumber}}</text> |
|||
<text style="margin-bottom: 10px;">商品货值合计:{{logInfo3.countAmount}}</text> |
|||
<uni-table ref="table1" border stripe emptyText="暂无更多数据"> |
|||
<uni-tr> |
|||
<!-- <uni-th align="center">序号</uni-th> --> |
|||
<uni-th align="center" width="180">仓库名称</uni-th> |
|||
<uni-th align="center" width="80">品种数量</uni-th> |
|||
<uni-th align="center" width="100">品种货值</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData3" :key="index"> |
|||
<!-- <uni-td align="center">{{ index+1 }}</uni-td> --> |
|||
<uni-td align="center">{{ item.storeCodeName }}</uni-td> |
|||
<uni-td align="center">{{ item.productCountNumber }}</uni-td> |
|||
<uni-td align="center">{{ item.productAmount }}</uni-td> |
|||
</uni-tr> |
|||
|
|||
</uni-table> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
date: "2023-07-26", |
|||
logInfo: { |
|||
serialNumber: "", |
|||
reportTime: "", |
|||
countAmount: "", |
|||
}, |
|||
logInfo2: { |
|||
countProductNumber: "", |
|||
countAmount: "", |
|||
}, |
|||
logInfo3: { |
|||
countProductNumber: "", |
|||
countAmount: "", |
|||
}, |
|||
tableData1: [], |
|||
tableData2: [], |
|||
tableData3: [], |
|||
tempFilePath: "", |
|||
// fileUrl:"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0F/ChMkJlbKwtmINC3iAAx4ozyK5jAAALGuAMGw3cADHi7853.jpg" |
|||
fileUrl: "" |
|||
}; |
|||
}, |
|||
onLoad(option) { |
|||
|
|||
// this.date = option.orderDate |
|||
|
|||
// console.log('1111', this.queryParams) |
|||
this.getData() |
|||
|
|||
|
|||
|
|||
}, |
|||
onShow() { |
|||
wx.hideHomeButton() |
|||
}, |
|||
methods: { |
|||
download() { |
|||
if (this.fileUrl == '') { |
|||
uni.showToast({ |
|||
title: "下载地址错误，请重新进入页面。", |
|||
duration: 5000 |
|||
}) |
|||
return |
|||
} |
|||
|
|||
|
|||
uni.downloadFile({ |
|||
url: this.fileUrl, // 网络文档地址 |
|||
success: (data) => { |
|||
if (data.statusCode === 200) { |
|||
uni.saveFile({ |
|||
tempFilePath: data.tempFilePath, //临时路径 |
|||
success: function(res) { |
|||
// 保存路径 |
|||
uni.showToast({ |
|||
title: "文件已保存：" + res.savedFilePath, |
|||
duration: 5000 |
|||
}) |
|||
setTimeout(() => { |
|||
//打开文档查看 |
|||
uni.openDocument({ |
|||
filePath: res.savedFilePath, |
|||
showMenu: true, //右上角是否有可以转发分享的功能 |
|||
success: function(res) { |
|||
console.log('打开文档成功') |
|||
} |
|||
}) |
|||
}, 3000); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
uni.showToast({ |
|||
title: '失败请重新下载' |
|||
}); |
|||
}, |
|||
}); |
|||
|
|||
|
|||
}, |
|||
getData() { |
|||
console.log('getData', this.date) |
|||
this.$api.getReportInventoryDayGather(this.date).then((resp) => { |
|||
console.log('1111>>>>>>', resp) |
|||
this.fileUrl = resp.downloadUrl |
|||
this.tableData1 = resp.list |
|||
this.logInfo = { |
|||
serialNumber: resp.serialNumber, |
|||
reportTime: resp.reportTime, |
|||
countAmount: resp.countAmount, |
|||
} |
|||
|
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
|
|||
this.$api.getReportInventoryDayStore(this.date).then((resp) => { |
|||
console.log('2222>>>>>>', resp) |
|||
this.tableData2 = resp.list |
|||
this.logInfo2 = { |
|||
countProductNumber: resp.countProductNumber, |
|||
countAmount: resp.countAmount, |
|||
} |
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
|
|||
this.$api.getReportInventoryDayToStore(this.date).then((resp) => { |
|||
console.log('3333>>>>>>', resp) |
|||
this.tableData3 = resp.list |
|||
this.logInfo3 = { |
|||
countProductNumber: resp.countProductNumber, |
|||
countAmount: resp.countAmount, |
|||
} |
|||
}).catch(e => { |
|||
console.log('eeeee', e) |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.title { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
background: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.titleSel { |
|||
color: #5f6fee; |
|||
font-size: 32rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
|
|||
.headerLineSel { |
|||
background: #5f6fee; |
|||
height: 6rpx; |
|||
width: 220rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.headerLineUnsel { |
|||
background: #fff; |
|||
height: 6rpx; |
|||
width: 40rpx; |
|||
position: relative; |
|||
margin-top: 10rpx; |
|||
} |
|||
|
|||
.swiper { |
|||
width: 100%; |
|||
flex: 1; |
|||
height: 100vh; |
|||
overflow: scroll; |
|||
} |
|||
|
|||
.recordItem { |
|||
margin-top: 10rpx; |
|||
background-color: white; |
|||
padding-bottom: 20rpx; |
|||
padding-top: 20rpx; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<uni-load-more :status="status" :contentText="contentText" @clickLoadMore="loadMore"></uni-load-more> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
stringIsNotEmpty |
|||
} from '../../common/empty' |
|||
export default { |
|||
data() { |
|||
return { |
|||
status: "loading", |
|||
contentText: { |
|||
contentdown: "获取信息失败，点击重试", |
|||
contentrefresh: "获取信息中，请稍后", |
|||
contentnomore: "没有更多数据了" |
|||
}, |
|||
// 中间件数据，不用改 |
|||
middleware: null |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
// 不用改 |
|||
if (options != undefined && options.data != undefined) { |
|||
let shareData; |
|||
try { |
|||
// 跳转携带数据 |
|||
shareData = JSON.parse(options.data) |
|||
} catch (e) { |
|||
shareData = JSON.parse(decodeURIComponent(options.data)) |
|||
} |
|||
this.middleware = shareData |
|||
} |
|||
|
|||
this.getWxCode() |
|||
}, |
|||
methods: { |
|||
loadMore(e) { |
|||
if ('more' === e.detail.status) { |
|||
// 重新获取 |
|||
this.getWxCode() |
|||
} |
|||
}, |
|||
getWxCode() { |
|||
|
|||
this.status = "loading" |
|||
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' |
|||
// _this.contentText.contentdown = res.data.msg+"，点击重试" |
|||
} |
|||
} 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); |
|||
|
|||
if (_this.middleware != null) { |
|||
// 走中间件的逻辑 |
|||
if ('share' == _this.middleware.functionName) { |
|||
uni.reLaunch({ |
|||
url: _this.middleware.url |
|||
}); |
|||
} else if ('bindCard' == _this.middleware |
|||
.functionName) { |
|||
|
|||
_this.middleware.params.customerSid = res.data.data |
|||
.sid |
|||
|
|||
_this.$api.pickUpCardBind(_this.middleware.params) |
|||
.then((resp) => { |
|||
uni.reLaunch({ |
|||
url: _this.middleware.url |
|||
}); |
|||
}).catch(e => { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: e.msg, |
|||
showCancel: false, |
|||
success: function(res) { |
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
} else { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '版本过低', |
|||
showCancel: false, |
|||
success: function(res) { |
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} else { |
|||
uni.switchTab({ |
|||
url: '/pages/home/pickUpCard' |
|||
}) |
|||
} |
|||
|
|||
if (_this.stringIsNotEmpty(_this.shareUrl)) { |
|||
|
|||
} else { |
|||
|
|||
} |
|||
} |
|||
} else { |
|||
_this.status = 'more' |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
_this.status = 'more' |
|||
} |
|||
}); |
|||
}, |
|||
fail: function(res) { |
|||
_this.status = 'more' |
|||
} |
|||
}); |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.container { |
|||
width: 100%; |
|||
height: 90vh; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
uni-page-body, |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
height: calc(100% + var(--window-bottom); ); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,334 @@ |
|||
<template> |
|||
<view style="padding: 30rpx;"> |
|||
<p style="text-align:center"> |
|||
<span style=";font-family:黑体;font-size:21px">汇融云眼程序隐私政策</span> |
|||
</p> |
|||
<p style="text-indent:28px; margin-top: 20rpx;"> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
<span style="font-family:微软雅黑">欢迎使用汇融云眼</span> |
|||
</span> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">。</span> |
|||
</p> |
|||
<p style="text-indent:28px"> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
请您务必仔细阅读和理解以下条款。若您一旦接受我公司产品或服务，则表示您同意接受我公司约定的以下各项条款的约束。若您不接受以下条款，请您立即停止使用我公司的产品及服务。 |
|||
</span> |
|||
</p> |
|||
<p style="text-indent:28px"> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
<span style="font-family:微软雅黑"> |
|||
为了使您充分理解本协议，本协议中与您的权益存在或可能存在重大关系的部分，我们已采用下划线、加粗等方式提示您注意。您点击 |
|||
</span> |
|||
"确认"或进行类似操作后，即表示您已同意我们按照本协议来使用和保护您的信息。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">一、声明与承诺</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（一）您理解并承诺，在您接受我公司的产品或服务前，您已充分阅读、理解并接受本协议的全部内容，您接受我公司的产品或服务，即表示您同意遵循本协议之所有约定。您理解并同意本协议规定的内容，并对相关法律法规有适当的了解，如您不能清楚地知晓或理解国家相关法律法规规定的内容，您应当咨询相关法律专业人士后再决定是否接受本协议。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（二）您在此确认知悉并同意，我公司有权依据国家法律法规及运营需求，对本协议条款不时地进行修改。我公司如更新本协议相关条款，将采用在“一诺云网”（www.enuoyun |
|||
.com）上公布，通知您该等修改、增加或删减的内容，以便您随时了解我公司产品或服务对您信息资料的收集和使用方法。一经公告，即视为上述内容已经通知到您。若您在本协议及各类规则变更后继续使用我公司产品或服务的，视为您已仔细认真阅读、充分理解并同意接受修改后的协议条款及各类规则。您有义务不时关注并阅读最新版的协议及网站公告等。如您不同意更新后的协议，应立即停止接受我公司产品或服务，否则视为您同意接受更新后的协议。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（三）您保证，作为自然人，在您同意接受本协议时，您已经年满16周岁；作为企业、事业单位等组织，您在中华人民共和国（“中国”）大陆地区（不含香港、台湾、澳门地区）合法开展经营活动或其他业务，或依照中国大陆地区（不含香港、台湾、澳门地区）法律登记注册成立；本协议内容不受您所属国家或地区法律的约束。不具备前述条件的，您应立即停止使用本软件提供的服务。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（四）我公司为遵守国家法律法规、向您提供服务、保护您的隐私及提升服务质量的目的，将按照本协议收集、使用您的信息（包括但不限于我公司认为了解您的需求和开展业务所必需的相关资料），本协议包含了我们收集、存储、保护、使用您的信息的条款，请您完整地阅读本协议项下各条款。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">二、信息收集</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
您在此不可撤销地同意并授权我公司收集以下信息： |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1.在您使用或接受我公司产品或服务时，我们会获取您的信息，包括但不限于基本信息、企业经营、商务交易信息等。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2.设备信息：我公司产品或服务会接收并记录您所使用的设备相关信息（例如设备型号、操作系统版本、设备设置、唯一设备标识符、设备环境等软硬件特征信息）、设备所在位置相关信息（例如IP |
|||
地址、GPS位置以及能够提供相关信息的WLAN接入点、蓝牙和基站等传感器信息）及您所授予的设备权限使用所获信息。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
3.服务日志信息：当您接受我公司提供的产品或服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存。例如搜索查询内容、IP地址、浏览器的类型、电信运营商、使用的语言、访问日期和时间及您访问的网页记录等。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
4.发票信息：当您接受我公司提供的产品或服务时，我们会收集您在使用我公司产品或服务时，主动提供的以及通过自动化方式收集您在使用功能或接受服务过程中产生的增值税发票信息，以及开具增值税发票需要的业务信息。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
5.为了更好地为您提供服务，经您授权通过合法途径从我公司产品或我公司提供的服务过程中获取的其他您信息。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
6.在法律、行政法规允许的范围内采集的您的您信息。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">三、除外信息</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
您了解并同意，以下信息属于您自愿、主动在公开领域传播的信息，我公司存储、使用以下信息无需您授权： |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1)您在使用我公司产品提供的搜索服务时，输入的关键字信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2)您在使用我公司产品或接受我公司服务时所产生的信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
3)您违反法律规定或违反我公司产品规则的行为，以及我公司已对您采取的措施。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">四、信息使用</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
一旦您使用我公司的产品或服务，我公司即有权依照自行设立的模型、模式、格式、规则、流程等对您的您信息进行整理、保存、加工。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
我公司将以高度的勤勉、审慎义务对待您信息，您不可撤销地授权并同意我公司将收集到的您信息用于以下用途： |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1)将信息进行整合和处理，以便更好地为您提供服务，并依此对我公司的产品或服务进行改进，保存、整理、加工您信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2)为达到服务您的目的，我公司可能通过使用您信息，向您提供您感兴趣的通知、营销活动及其他商业性电子信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
3)经您明确同意并授权的其他用途； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
4)除本协议明确阐述和相关法律法规规定外，我公司不会向任何无关第三方提供、出售、出租或交易您的信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
5)我公司不允许任何第三方以任何手段收集、编辑、出售或者传播您的信息。如您从事上述活动，一经发现，我公司有权立即终止与该您的服务协议，并要求赔偿相应损失。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">五、信息保护</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
我们致力于维护您对我公司的产品或服务的信任，因此我公司会使用商业上合理的技术和其他措施，防止您信息的丢失和被盗用，并对您信息的保护情况不定期进行自查，记录自查情况，以便及时消除自查中发现的安全隐患。为尽可能地保护您的信息安全，我公司提请您注意： |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1)我公司的产品账号均有安全保护功能，请妥善保管您的账号及密码信息。我公司将通过对您密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。尽管有前述安全措施，但同时也请您注意在信息网络上不存在“完善的安全措施”，您信息仍存在丢失、被盗用的可能，非因我公司过错而发生上述情况，我公司不承担任何责任； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2)请您妥善保护自己的信息，仅在必要的情形下向他人提供。如您发现信息泄露，尤其是您的账户及密码发生泄露，请您立即联络客服，以便采取相应措施。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">六、服务使用限制</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（一）您在使用我公司产品或服务时，应遵守中华人民共和国相关法律法规，不将本服务用于任何非法目的，也不以任何非法方式使用我公司产品或服务。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（二）您不得利用我公司产品或服务从事侵害他人合法权益之行为， |
|||
否则我们有权拒绝提供相关服务，且您应承担所有相关法律责任，因此导致我公司受损的，您应承担赔偿责任。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（三）您理解并同意，我公司不对因下述任一情况导致的任何损害赔偿承担责任，包括但不限于利润、商誉、数据等方面的损失或其他无形损失的损害赔偿（无论我公司是否已被告知该等损害赔偿的可能性）： |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1、如果您违反本协议的明文规定及精神，我们可能对您暂停、中断或终止提供本服务或其任何部分，但我们会在法律允许的范围内继续持有、保存您的您信息与使用本服务的记录。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2、在发现我公司产品或服务被异常使用，或对我公司产品或服务的使用有合理疑义，或对我公司产品或服务的使用有违反法律规定或本协议约定之虞时，我公司有权不经通知先行暂停或终止您对于本服务使用。具体可能导致暂停或终止本软件服务的情形包括但不限于： |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> 1）根据本协议的约定；</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2）根据法律法规及法律文书的规定； |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> 3）根据有权机关的要求；</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
4）您使用我公司的产品或服务的行为涉嫌违反国家法律法规及行政规定的； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
5）本公司依据自行合理判断认为可能产生风险的； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
6）您遭到他人投诉，且对方已经提供了一定证据的。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（四）若您停止使用我公司的产品或服务，我公司仍可能保有您的相关信息。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（五）禁止反向工程、反向编译和反向汇编：您不得对本软件产品进行反向工程（ReverseEngineer）、反向编译（Decompile）或反向汇编（Disassemble），同时不得改动编译在程序文件内部的任何资源。除法律、法规明文规定允许上述活动外，您必须遵守此协议限制。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（六） |
|||
组件分割:我公司的产品或服务是作为一个单一产品而被授予许可使用,您不得将各个部分分开用于任何目的。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（七）个别授权:如需进行商业性的销售、复制、分发，包括但不限于软件销售、预装、捆绑等，必须获得我公司的书面授权和许可。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
（八）保留权利：本协议未明示授权的其他一切权利仍归我公司所有，您使用其他权利时必须获得我公司的书面同意。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">七、信息披露</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
我公司对您提供的信息严格保密，除具备下列情形外，不会向任何外部机构披露： |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1)经过您事先同意而对外披露的您信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2)应法律法规或公权力部门（如法院、政府部门、上级监管机构等执法机构）的要求而披露的您信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
3)当我公司涉及合并、收购或资产出售等重大交易时，我公司有权依据交易的需要将您信息提供给交易相对方及交易各方聘请的各中介机构(包括但不限于律师、会计师等)，我们会在任何信息进行转让或受其他隐私权政策约束之前，继续确保其保密性并及时通知受影响方； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
4)我公司可能会为了保护我公司产品自身、我公司员工和客户、我公司合作伙伴和其他公众的合法权利、利益和安全而披露您的信息； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
<span style="font-family:微软雅黑">八、</span> |
|||
Cookies的使用 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1)在您未拒绝接受cookies的情况下，我公司的产品或服务会在您的客户端设定或取用cookies，以便您能登录或使用依赖于cookies的产品或服务。我公司的产品或服务使用cookies可为您提供更加周到的个性化服务，包括推广服务； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2)您有权选择接受或拒绝接受cookies。您可以通过修改设置的方式拒绝接受cookies。但如果您选择拒绝接受cookies，则您可能无法登录或使用依赖于cookies的产品的网络服务或功能； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
3)通过我公司的产品或服务所设cookies所取得的有关信息，将适用本协议。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">九、法律管辖和适用</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
本协议的订立、履行和解释及争议的解决均应适用中华人民共和国大陆地区适用之有效法律（但不包括其冲突法规则）。协议履行期间，凡因本协议引起的或与本协议有关的一切争议、纠纷，双方应首先友好协商解决；协商不成，您在此完全同意将纠纷或争议提交被告住所地人民法院管辖。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px">十、其他</span></p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
1)因台风、地震、海啸、洪水、战争、计算机病毒感染、黑客攻击、网络通信故障等不能预见、不能控制的不可抗力因素，造成本我公司产品不能正常向您提供服务而可能导致的损失，我公司不承担责任； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
2)您理解并同意，鉴于网络服务的特殊性，本协议可在您接受我公司产品或服务的过程中多次使用，未来为您提供服务时再次涉及到本协议服务内容时无需您另行签署； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
3)知识产权，与我公司产品及服务相关的任何内容和资源的知识产权均属于我公司所有。未经我公司书面明确许可，任何单位和个人不得以任何方式将我公司产品或服务之内容和相关资源作全部或部分复制、转载、引用、编辑； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
4)我公司产品或服务仅在您接受本协议条款并依此提供您信息且授权我公司产品按照上述条款的规定获取您信息的基础上提供服务，如您不同意本协议条款或不同意进行相应操作，则您将无法使用我公司产品的全部服务或相应部分服务； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
5)若本协议中任何一条无论因何种原因完全或部分无效或不具有执行力，本协议的其他条款仍继续有效； |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
6)您在本协议项下对我公司的产品或服务的授权，将视为对我公司的授权。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
7)您如需更正所提供的信息，或希望停止接受我公司的产品或服务，或对本协议有任何疑问，请通过联系我公司在线客服或直接拨打客服电话： |
|||
95113 的途径联系处理。 |
|||
</span> |
|||
</p> |
|||
<p> |
|||
<span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> |
|||
8)我公司对本协议有最终解释权。 |
|||
</span> |
|||
</p> |
|||
<p><span style="font-family: 微软雅黑;letter-spacing: 0;font-size: 14px"> </span></p> |
|||
<p><br /></p> |
|||
</view> |
|||
</template> |
|||
|
|||
<script></script> |
|||
|
|||
<style></style> |
|||
|
After Width: | Height: | Size: 363 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 363 B |
|
After Width: | Height: | Size: 507 B |
|
After Width: | Height: | Size: 880 B |
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 558 B |
|
After Width: | Height: | Size: 562 B |
|
After Width: | Height: | Size: 689 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 621 B |
|
After Width: | Height: | Size: 166 B |
|
After Width: | Height: | Size: 287 B |
|
After Width: | Height: | Size: 795 B |
@ -0,0 +1,75 @@ |
|||
import api from '@/common/request.api.js' |
|||
import authtoken from "@/utils/auth.token.js" |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
Vue.use(Vuex) |
|||
const store = new Vuex.Store({ |
|||
state: { |
|||
token: authtoken.getToken(), |
|||
hasLogin: false, |
|||
userinfo: {} |
|||
}, |
|||
mutations: { |
|||
SET_TOKEN: (state, token) => { |
|||
state.token = token |
|||
authtoken.setToken(token) |
|||
}, |
|||
SET_HASLOGIN: (state, hasLogin) => { |
|||
state.hasLogin = hasLogin |
|||
}, |
|||
SET_USERINFO: (state, userinfo) => { |
|||
state.userinfo = userinfo |
|||
} |
|||
}, |
|||
getters: { |
|||
token: state => state.token, |
|||
hasLogin: state => state.hasLogin, |
|||
userinfo: state => state.userinfo, |
|||
}, |
|||
actions: { |
|||
login({ |
|||
commit |
|||
}, loginUserInfo) { |
|||
return new Promise((resolve, reject) => { |
|||
api.login(loginUserInfo).then(res => { |
|||
console.log('login-result-info:', res) |
|||
commit('SET_HASLOGIN', true) |
|||
commit('SET_TOKEN', res.token) |
|||
commit('SET_USERINFO', { |
|||
userid: '123456', |
|||
name: res.name |
|||
}) |
|||
resolve(res) |
|||
}).catch(err => { |
|||
reject(err) |
|||
}) |
|||
}) |
|||
}, |
|||
logined({ |
|||
commit |
|||
}, loginUserInfo) { |
|||
return new Promise((resolve, reject) => { |
|||
commit('SET_HASLOGIN', true) |
|||
commit('SET_TOKEN', loginUserInfo.token) |
|||
commit('SET_USERINFO', { |
|||
userid: '123456', |
|||
name: loginUserInfo.name |
|||
}) |
|||
resolve() |
|||
}) |
|||
}, |
|||
logout({ |
|||
commit, |
|||
state |
|||
}) { |
|||
return new Promise((resolve, reject) => { |
|||
commit('SET_HASLOGIN', false) |
|||
commit('SET_TOKEN', null) |
|||
commit('SET_USERINFO', null) |
|||
resolve() |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
export default store |
|||
@ -0,0 +1,76 @@ |
|||
/** |
|||
* 这里是uni-app内置的常用样式变量 |
|||
* |
|||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 |
|||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App |
|||
* |
|||
*/ |
|||
|
|||
/** |
|||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 |
|||
* |
|||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 |
|||
*/ |
|||
|
|||
/* 颜色变量 */ |
|||
|
|||
/* 行为相关颜色 */ |
|||
$uni-color-primary: #007aff; |
|||
$uni-color-success: #4cd964; |
|||
$uni-color-warning: #f0ad4e; |
|||
$uni-color-error: #dd524d; |
|||
|
|||
/* 文字基本颜色 */ |
|||
$uni-text-color:#333;//基本色 |
|||
$uni-text-color-inverse:#fff;//反色 |
|||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 |
|||
$uni-text-color-placeholder: #808080; |
|||
$uni-text-color-disable:#c0c0c0; |
|||
|
|||
/* 背景颜色 */ |
|||
$uni-bg-color:#ffffff; |
|||
$uni-bg-color-grey:#f8f8f8; |
|||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色 |
|||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 |
|||
|
|||
/* 边框颜色 */ |
|||
$uni-border-color:#c8c7cc; |
|||
|
|||
/* 尺寸变量 */ |
|||
|
|||
/* 文字尺寸 */ |
|||
$uni-font-size-sm:12px; |
|||
$uni-font-size-base:14px; |
|||
$uni-font-size-lg:16; |
|||
|
|||
/* 图片尺寸 */ |
|||
$uni-img-size-sm:20px; |
|||
$uni-img-size-base:26px; |
|||
$uni-img-size-lg:40px; |
|||
|
|||
/* Border Radius */ |
|||
$uni-border-radius-sm: 2px; |
|||
$uni-border-radius-base: 3px; |
|||
$uni-border-radius-lg: 6px; |
|||
$uni-border-radius-circle: 50%; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-row-sm: 5px; |
|||
$uni-spacing-row-base: 10px; |
|||
$uni-spacing-row-lg: 15px; |
|||
|
|||
/* 垂直间距 */ |
|||
$uni-spacing-col-sm: 4px; |
|||
$uni-spacing-col-base: 8px; |
|||
$uni-spacing-col-lg: 12px; |
|||
|
|||
/* 透明度 */ |
|||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 |
|||
|
|||
/* 文章场景相关 */ |
|||
$uni-color-title: #2C405A; // 文章标题颜色 |
|||
$uni-font-size-title:20px; |
|||
$uni-color-subtitle: #555555; // 二级标题颜色 |
|||
$uni-font-size-subtitle:26px; |
|||
$uni-color-paragraph: #3F536E; // 文章段落颜色 |
|||
$uni-font-size-paragraph:15px; |
|||
@ -0,0 +1,6 @@ |
|||
<template> |
|||
</template> |
|||
<script> |
|||
</script> |
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
{ |
|||
"id": "common-pay", |
|||
"displayName": "common-pay", |
|||
"version": "1.0.0", |
|||
"description": "common-pay", |
|||
"keywords": [ |
|||
"common-pay" |
|||
], |
|||
"repository": "", |
|||
"engines": { |
|||
"HBuilderX": "^3.1.0" |
|||
}, |
|||
"dcloudext": { |
|||
"type": "component-vue", |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "", |
|||
"data": "", |
|||
"permissions": "" |
|||
}, |
|||
"npmurl": "" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "u", |
|||
"aliyun": "u", |
|||
"alipay": "u" |
|||
}, |
|||
"client": { |
|||
"Vue": { |
|||
"vue2": "u", |
|||
"vue3": "u" |
|||
}, |
|||
"App": { |
|||
"app-vue": "u", |
|||
"app-nvue": "u", |
|||
"app-uvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "u", |
|||
"Android Browser": "u", |
|||
"微信浏览器(Android)": "u", |
|||
"QQ浏览器(Android)": "u" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "u", |
|||
"IE": "u", |
|||
"Edge": "u", |
|||
"Firefox": "u", |
|||
"Safari": "u" |
|||
}, |
|||
"小程序": { |
|||
"微信": "u", |
|||
"阿里": "u", |
|||
"百度": "u", |
|||
"字节跳动": "u", |
|||
"QQ": "u", |
|||
"钉钉": "u", |
|||
"快手": "u", |
|||
"飞书": "u", |
|||
"京东": "u" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,252 @@ |
|||
<template> |
|||
<view style="height: 100%;display: flex;flex-direction: column;align-items: center;"> |
|||
<view |
|||
style="display: flex;flex-direction: column;align-items: center;overflow-y: scroll;flex:1;padding-top: 60rpx;"> |
|||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;"> |
|||
{{convertSecondsToHMS(page.countdown)}} |
|||
</view> |
|||
<view> |
|||
<text style="color: black;font-size: 35rpx;font-weight: bold;">￥</text> |
|||
<text style="color: black;font-size: 70rpx;font-weight: bold;">{{data.price}}</text> |
|||
</view> |
|||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;"> |
|||
{{data.goods}} |
|||
</view> |
|||
|
|||
<view style="background: #ffffff;margin-top: 100rpx;border-radius: 20rpx;width: calc(100vw - 40rpx);"> |
|||
<radio-group @change="radioChange"> |
|||
<label |
|||
style="width: 100%;height: 120rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;" |
|||
v-for="(item, index) in page.real" :key="index"> |
|||
<view style="width: 100%;height: 120rpx;display: flex;flex-direction: row;align-items: center;"> |
|||
<image :src="item.image" style="width: 55rpx;height: 55rpx;margin-left: 25rpx;"></image> |
|||
<text style="flex: 1;font-size: 30rpx;margin-left: 6rpx;">{{item.pay}}</text> |
|||
<radio style="transform:scale(0.8);margin-right: 25rpx;" :checked="index==0" |
|||
:value="index+''" :activeBackgroundColor="item.btnColor" /> |
|||
</view> |
|||
<view v-if="index != page.real.length-1" |
|||
style="width: 93%;height: 1px;background-color: #f1f2f3;"></view> |
|||
</label> |
|||
</radio-group> |
|||
</view> |
|||
</view> |
|||
<view class="btn" :style="{'background': page.real[page.selected].btnColor}" @click="createOrder"> |
|||
{{page.submitText}} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
http |
|||
} from '../../utils/pay_http.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
// 本插件提供的支付方式 |
|||
supports: [{ |
|||
payType: 'wxpay', |
|||
pay: '微信', |
|||
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADcUlEQVR4nO2ZfVLaUBDAdyFCAGekJyg9Qb2BMBX/lZ4APEHxBOIJSk+gnqD0X6EFT6A9QfUExZkCAUK2u1iYNF98+CiR8ptR92Xy8X4vm7cvEWFD2IqEjf9DJN3UMwMTihyunZgGV+2ccQ8++Iqk6vGPFkCZw9AQAah28v1TDl14iqQa8apF8IHD0BFB+NQ57LsG2CUi6dQ36QeHoSWu4RtnmrlEknW9QkBnHIaYyGkv36tyMOVFiiDgeTdvVMDGVmSdbEUWAx+QoIVR/rHgHmxwXcoCQQaQCgSwx5uWYsUieBMFqPzKGy2Yg2QjWSCyygB0wM2FWIkIn+AxAliYV8DJH6EqC73m5lwoF+EU+h7bSWTbuXabm0uTbqbTg2GvRQhvuTkTpSKqJCaITN80anxnDrgZiDIRPugxpiUyqiSEVEMvElGZAPa5GYg6EYy+7x52axw+C7kLw5FxbFlQ4VucAUYWhdaMBasSEUmp7lF/n8OlEYGBaXBnx3cgzZukI19iGpZlMZi81i8JqcibPVEiwmPmWrAJ0rlZqSYr68EIzoioBFPwgaftkn3We5rJRp859ESJiNcSetxBk24BoydeKbdb17MWQpFsAnzhR/5ddXZIkEHpm72fHHqCKkR6+b7rGCFZj9cI4DjCb3E7WuJc7o4IjADOOIWyYINPME0j8CFRjxP/8WSlIk+dpiaHY3inNvHgcmjDnUZ+rE1ESF7H77yKGh/gm0Z+rFwkriVeSdpw6CL1VS9ZFl1wOAUJr2I7UAlKIyfyzAW9bisRmVVD+FmRlNrjPW84jSrzpJETrwGxo0aER7h7ZJTABxnNIUTTnVznjptLwYNxSwEVXomIEJRez8U5aXihTAQRL7uHxgmHShnXj6HB9YgyEIAyEWHWs7IMyYZ+Qbai6YdaEa4TGMHTzjvjEhQwr4SgVGRCJIInz5FJNVP7ZJoXFPBwO1mJyKxZzA+Z3WQBCTT+EJHmTXOzGhHbSWXVyt9KjvmkrZ0o3DiL4O43/WBk4T6SlSUA3nc57NecwNf8m0VFooA5TdPvBmZP0mPpzi3CSkRkKiYLspxjGfhHrERkHWxFwsbGiHD1cn03cInI/B70LhAGvL4buESEjfhn6IQwyvhJCL4iwlOaYQGB0txcGwTYjmtUc6aTnUCRl8RWJGxsjMhvudpkUV3iI98AAAAASUVORK5CYII=', |
|||
btnColor: '#FE9039' |
|||
}], |
|||
// 可使用的方式，主要是对App,h5可进行定义，微信小程序定时时无效(因为仅支持微信支付) |
|||
use: [0], |
|||
real: [], |
|||
selected: 0, |
|||
countdown: 0, |
|||
submitText: '确认支付', |
|||
cancleText: '订单已取消' |
|||
}, |
|||
data: { |
|||
price: '价格', |
|||
goods: '商品名称', |
|||
remainder: 60000, |
|||
// 生成待支付订单时后台返回的,具体地址是啥，参数是啥由后台提供 |
|||
// 唯一支付方式固定为type参数 |
|||
pay_url: { |
|||
url: '底梦哲提供，王鹏飞进行组装成绝对地址返回', |
|||
// 底梦哲提接口传参要求，王鹏飞进行组装 |
|||
params: { |
|||
// 此参数由本工具进行返回，后台不需要传 |
|||
type: '支付方式，由本框架提供', |
|||
// ...更多参数 |
|||
} |
|||
}, |
|||
// 由前端去设置，查看订单的详情地址 |
|||
return_url: '订单详情的地址' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
wxPay(order, o) { |
|||
|
|||
wx.requestPayment({ |
|||
appId: order.appid, |
|||
timeStamp: order.timeStamp, //创建订单时间戳 |
|||
nonceStr: order.nonceStr, |
|||
package: order.package, // 订单包 |
|||
signType: order.signType, // 加密方式统一'MD5' |
|||
paySign: order.sign, // 后台支付签名返回 |
|||
success(res) { |
|||
// 数据源转换成字符 |
|||
let data = JSON.stringify(o) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(data) |
|||
uni.redirectTo({ |
|||
url: '/uni_modules/common-pay/pages/success/success?data=' + |
|||
value |
|||
}) |
|||
}, |
|||
fail(res) { |
|||
try { |
|||
if (err.errMsg != 'requestPayment:fail cancel') { |
|||
uni.showToast({ |
|||
icon: 'error', |
|||
title: '支付失败' |
|||
}) |
|||
} |
|||
} catch (e) { |
|||
//TODO handle the exception |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
convertSecondsToHMS(seconds) { |
|||
var hours = Math.floor(seconds / (60 * 60)); // 计算小时 |
|||
seconds %= (60 * 60); // 取余得到不足1小时的秒数 |
|||
|
|||
var minutes = Math.floor(seconds / 60); // 计算分钟 |
|||
seconds %= 60; // 取余得到不足1分钟的秒数 |
|||
|
|||
let result = '支付剩余时间 ' |
|||
if (hours > 0) { |
|||
result += (hours < 10 ? '0' + hours : hours) + ":" + (minutes < 10 ? '0' + minutes : minutes) + ":" + ( |
|||
seconds < 10 ? '0' + seconds : seconds) |
|||
} else { |
|||
// 不显示小时，直接显示 分钟：秒 |
|||
if (minutes > 0) { |
|||
result += (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds) |
|||
} else { |
|||
result += "00:" + (seconds < 10 ? '0' + seconds : seconds) |
|||
} |
|||
} |
|||
|
|||
return result |
|||
}, |
|||
startCountdown() { |
|||
setInterval(() => { |
|||
if (this.page.countdown > 0) { |
|||
this.page.countdown--; |
|||
} else { |
|||
// 秒杀倒计时结束的操作，例如弹出提示或触发秒杀请求 |
|||
this.page.submitText = this.page.cancleText |
|||
} |
|||
}, 1000); |
|||
}, |
|||
radioChange: function(evt) { |
|||
this.page.selected = parseInt(evt.detail.value) |
|||
}, |
|||
createOrder() { |
|||
|
|||
if (this.page.cancleText === this.page.submitText) { |
|||
uni.showToast({ |
|||
icon: 'error', |
|||
title: this.page.cancleText |
|||
}) |
|||
return |
|||
} |
|||
|
|||
// 额外组装type |
|||
let payType = this.page.real[this.page.selected].payType |
|||
this.data.pay_url.params.type = payType |
|||
|
|||
let o = this.data |
|||
o.color = this.page.real[this.page.selected].btnColor |
|||
o.pay = this.page.real[this.page.selected].pay |
|||
|
|||
http({ |
|||
url: this.data.pay_url.url, |
|||
data: this.data.pay_url.params |
|||
}).then((res) => { |
|||
if ('wxpay' === payType) { |
|||
this.wxPay(res.data, o) |
|||
} |
|||
}).catch((err) => { |
|||
console.log('fail', JSON.stringify(err)); |
|||
}); |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
|
|||
try { |
|||
// 跳转携带数据 |
|||
this.data = JSON.parse(options.data) |
|||
} catch (e) { |
|||
this.data = JSON.parse(decodeURIComponent(options.data)) |
|||
} |
|||
|
|||
this.page.countdown = this.data.remainder; |
|||
if (this.page.countdown <= 0) { |
|||
this.page.submitText = this.page.cancleText |
|||
} else { |
|||
// 开始倒计时 |
|||
this.startCountdown(); |
|||
} |
|||
|
|||
// ToDo h5，app下生效 |
|||
// 将来支持配置 |
|||
// #ifdef APP || H5 |
|||
|
|||
// #endif |
|||
// 微信下生效 |
|||
// #ifdef MP-WEIXIN |
|||
// 微信不支持配置 |
|||
this.page.use = [0] |
|||
// #endif |
|||
|
|||
for (var i = 0; i < this.page.use.length; i++) { |
|||
this.page.real.push(this.page.supports[this.page.use[i]]) |
|||
} |
|||
|
|||
if (this.page.real.length < 1) { |
|||
uni.showModal({ |
|||
content: '未正确配置支付方式', |
|||
showCancel: false, |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
}); |
|||
return |
|||
} |
|||
|
|||
// if (this.page.real.length == 1) { |
|||
// // 仅有一个选择时直接调用支付接口 |
|||
// this.createOrder() |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
uni-page-body, |
|||
page { |
|||
background-color: #f1f3f5; |
|||
height: 100%; |
|||
} |
|||
|
|||
.btn { |
|||
width: calc(100% - 40rpx); |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
border-radius: 50rpx; |
|||
margin-bottom: 30rpx; |
|||
margin-top: 30rpx; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,266 @@ |
|||
<template> |
|||
<view class="app"> |
|||
<view class="header" :style="{'background': data.color}"> |
|||
<image :src="page.icon" class="success-image"></image> |
|||
<view class="success-title">支付成功</view> |
|||
<view class="hr"></view> |
|||
</view> |
|||
<view class="info-box"> |
|||
<view class="info-amount" :style="{'color': data.color}">¥ {{ data.price }}</view> |
|||
<view class="left-circle"></view> |
|||
<view class="right-circle"></view> |
|||
<view class="info-main"> |
|||
<view class="info-cell"> |
|||
<view class="left">订单编号</view> |
|||
<view class="right">{{ data.orderId }}</view> |
|||
</view> |
|||
<view class="info-cell" v-if="!(page.createTime == undefined||page.createTime=='')"> |
|||
<view class="left">下单时间</view> |
|||
<view class="right">{{page.createTime}}</view> |
|||
</view> |
|||
<view class="info-cell"> |
|||
<view class="left">支付方式</view> |
|||
<view class="right">{{ data.pay }}</view> |
|||
</view> |
|||
<view class="info-cell" v-if="!(page.payTime == undefined||page.payTime=='')"> |
|||
<view class="left">支付时间</view> |
|||
<view class="right">{{page.payTime}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view v-if="!(data.order_url==undefined||data.order_url==null)" class="button-query" |
|||
:style="{'background': data.color}" @click="queryOrder">查看订单 |
|||
</view> |
|||
<view class="footer-hr"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
http |
|||
} from '../../utils/pay_http.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAEAYAAAD6+a2dAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAACAlJREFUeNrtnVlszF8Ux++d4B+JWhqERGJvlRJLJQ1RHsQeFEXFUmt5scWWiPVB2qKERIglSpEg9vJAYn8RQlRFI5ryYm+prbZ7/g/fOdPOtNPfdDrjzEx/n5dvf3fuTM895869v3t/997RKswhQ4ZM69a4SkpSWmmle/TAdbdu0JgYaIsW0ObNoU2auH/a16/QT5+gpaXQwkLos2fQggJFihTdvq0d2qEd795J+yHiQaD794dmZxMREeXnQ40hEfj/5ufDru3boQkJ0v4KW+DApk2hK1bAwU+fygS4rhQUuMphyJCJipL2b8gBR0VHQzdtgpaUSIcuOHC5Nm6EcpdUj0DBtcY3YuZMXL97Jx0aGT5+hC5ZAnU4pOMTvMAbMmS6dEFB796Vdn1ocucOtHNn6XgFLvBERJScDC0tlXZxeFBWBp06VTp+fgbc4YDu2CHtyrCHRxdEFNJdBAxt1AiGHj8u7bfI5Ngx+Llhw0DFTQcq8JiAOXsWqaNGyVXF+kBeHiaikpMxEfX7t7+f5HeTghqpNQK/fz9S7cD/G0aPht9zchAH/7uGOvYp2dnQmTOlXVI/SU1FS5CZ6e8n1LoLQJOfkoIaePKktAtsKjNtmtZaa33ihK/v8LkCoKnh8emDB9BmzaSLbFOZz5+hffuiIhQVWb3Dsgtw9fVKKaWOHIHagQ9NOC6HD7vHzTvW9wCkSNHcubgYMEC6iDa+MGgQ1PrezGsNQQ2KjkYFKCxEn9+ypXTRbGoDr1OIjUWXwOscKrBoAZYutQMfzvBCmcWLveWo0gLw83gEvrgYqfXwsWVEUVKClrxDB0wcffnCr3hpARYsgNqBjwyio/GFnj/f85WqFUArrfScOdIm1w/KyqA8hR5sZs/2THFVAF5zh6u4OGnXRDbfv0PHjoWmpEDPnQvu/42Px819nz6c4tECpKZKuyay+fEDOmYM7spv3oT+/Yv06dOhL18GzQRSpGjaNL6sqABaaaWHDZN2UWTy6xc0JQUBv369+ny8AKR9++DaM3Qo/6Vd6+q10kq/eeNMrvNjYhullOLHtJMmIfAXLnjmQJM8YgSuLl6ENmgQXLuI0BK0bu1sAZKSoHbgA8OfP9CpU2sOPPfF/FAt2IFn+DF+UpIDf8THS7ssMuC+PC0NgT9zxjMHWtx27XDFFUNqv0CPHs4WIDZWxoBIgZvURYsQ+GPHquQwZMg0a4Yv3OXLSOWKIEVsrLMCdO0qa0i4woFPT8cMG6+MqpTDkCHz338I/PnzSO3ZU9pyEBPj7HPsuf5aQ4oUrVrlNfBuj2MPHIAOHixttjstWzpbAM9dslIcOQLH8i7cUGXFCgR+27aa82VkQHl8H0KQIkVRUc6a+vOn7HLne/fcl5W3aIHr69dl7fJk7VpLvxoyZNLTpS31jfJy4QrAO4U6dqzekVwhcnNlHbV5s2+BHzMG+f/8kbXXV1wV4MMHGQNmzbJ0LBFVbCbdsuWfmWbIkMnK8s2+xETot28yfvS3fO/fOwtQXCxjxdOn7uNiH7ouIiKaMwf661dw7Nq1yzc7OnWCvn0r47+6UlTkLMj9+2I2GDJkXrzARadOtasII0dCv3wJjDF790K9z4jC3latkO/5czG/BYR795yODJW9fK9fw8G9evlcEQwZMj174v2vXvn3f3kVrfcdNni9cWNopGxvP3rUWWA+BEmaNm0wYXLjBgxMTLR6B4Zj+fm4SkzE8ObRI+uao0jRqVPQefMwg2dM9YF3OJAvNxepEbA6mhf7ooATJ0rXxerhffJDhvhcLueUK/Tateo/99QpvG798AX5d++W9kRwSE52HbOGBKnTtqwoL3cZXKuK0KAB3rdvH/TKFdfUrE+BX7VKuuTB4e9f+KHSDDBeePxY2rSa4bt+31cuIT8PI6331SP/lCkuR0UahgyZhw+5vBU3PaRI0bVrvjpWBg4gTwwtXGj1DvTtRFb76OEYXheRk+N0T+ieyFEnrl714oCEBOkK6h8bNvjrCrw/Lg4aqcfTedK7t4VD+ATOcCMjA2q9sgn52raFSk2E/WsKCjz9ULWJI0WKuAkMN1avhu7ZgwJXbcJdJ3aSIkV5eUgN9iLMUOHgQc8UL1vDoqIwHuflyeG6Q+jECQS60jMHrbTSvPhy+HBpC/8N3reGVRkHcwZ8g3hO3P8+VpbUVASc1zt8+ACtL4Fndu70DDxjsT2cv/k8U9iqlXRRbGrD27f45sfGogLwCSIVeB3mYPjE5+WvWSNdFJtaQooUrVzpLfCMj3fLfFd9+zZ04EDp8tnUxK1b0CFDeB7EW077kKiIgk8A6dcvYIdEMfjAFy/46Zl0UW2qY+5cXwPP1HqqE33K6dOoCHxQpI0sWVnediJZ4fdeQPd7g0OHoGlp0q6oXxw/Dp0xw9t6BisCdFh0w4YYb/MBB/aZwcHl0iW0wBMmiB0WzbgMIEWKxo2DcotgE1hycwMV+KDBXQNahq1bpR9/hDe8QCczExqG2/dh+Pjx0PryuLWufP4MnTxZOn4Brgi8jv7WLWkXhyY3b0Kr7pSKGFBAz5+NC9eNFXWFfzZuwQL2i3R8hCpE8+bQ9evdHRNp8Ba8detcB0bYuAPHNGkCRy1fDn3yRDp0/sErq5Yt43JJ+zdsgSP79HEfXTx6BJVavcvLqx8+5M2kSK9hzV2IEfZ9jmt9u/PUK4yTu3fHdVwcrvnn4/nM3Bp+Pp4UKeKHKiUlyF9Y6Dq4QiuttOfPx/NCk/Djf0hQD04eJaNOAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTEwLTI3VDE0OjAzOjAyKzA4OjAwisT1owAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0xMC0yN1QxNDowMzowMiswODowMPuZTR8AAABQdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX3ZwM212emVpcjcvemhpZnVjaGVuZ2dvbmcuc3ZntdPldAAAAABJRU5ErkJggg==", |
|||
payTime: '', |
|||
createTime: '', |
|||
seconds: 5, |
|||
threadA: null |
|||
}, |
|||
data: { |
|||
"price": "0.01", |
|||
"order_url": { |
|||
"page": "/pages/index2/index2", |
|||
"params": { |
|||
"trade_no": "velit Duis" |
|||
} |
|||
}, |
|||
"pay_url": { |
|||
"url": "http://192.168.2.110:7777/order/pay ", |
|||
"params": { |
|||
"mainSid": "9e04ee75-3b85-49eb-a24c-8a608814035d", |
|||
"type": "wxpay" |
|||
} |
|||
}, |
|||
"trade_no_url": { |
|||
"url": "http://192.168.2.110:7777/order/orderQuery", |
|||
"params": { |
|||
'mainSid': '9ebb7ca3-3203-4e91-b256-32ad0f821afd' |
|||
} |
|||
}, |
|||
"orderId": "288320940398", |
|||
"remainder": 33, |
|||
"goods": "无骨鸡柳等3件商品", |
|||
"color": "#09bb07", |
|||
"pay": "微信" |
|||
} |
|||
} |
|||
}, |
|||
// 监听 - 页面每次【加载时】执行(如：前进) |
|||
onLoad(options = {}) { |
|||
try { |
|||
// 跳转携带数据 |
|||
this.data = JSON.parse(options.data) |
|||
} catch (e) { |
|||
this.data = JSON.parse(decodeURIComponent(options.data)) |
|||
} |
|||
|
|||
let _this = this |
|||
|
|||
http({ |
|||
url: this.data.trade_no_url.url, |
|||
data: this.data.trade_no_url.params |
|||
}).then((res) => { |
|||
this.page.payTime = res.data.time_end |
|||
this.page.createTime = res.data.createTime |
|||
|
|||
uni.showLoading({ |
|||
mask: true, |
|||
title: '订单生成中 ' + _this.page.seconds |
|||
}) |
|||
|
|||
_this.page.threadA = setInterval(() => { |
|||
|
|||
_this.page.seconds -= 1 |
|||
|
|||
uni.showLoading({ |
|||
mask: true, |
|||
title: '订单生成中 ' + _this.page.seconds |
|||
}) |
|||
|
|||
if (_this.page.seconds <= 0) { |
|||
uni.hideLoading() |
|||
clearInterval(_this.page.threadA) |
|||
_this.page.threadA = null |
|||
uni.navigateBack() |
|||
} |
|||
}, 1000) |
|||
|
|||
}).catch((err) => { |
|||
console.log('fail', JSON.stringify(err)); |
|||
}); |
|||
}, |
|||
onUnload() { |
|||
this.page.seconds = 0 |
|||
let bus = this.data.bus |
|||
for (var i = 0; i < bus.length; i++) { |
|||
uni.$emit(bus[i] + '') |
|||
} |
|||
try { |
|||
if (this.page.threadA != null) { |
|||
clearInterval(this.page.threadA) |
|||
} |
|||
} catch (e) { |
|||
//TODO handle the exception |
|||
} |
|||
}, |
|||
// 函数 |
|||
methods: { |
|||
queryOrder() { |
|||
// 数据源转换成字符 |
|||
let data = JSON.stringify(this.data.order_url.params) |
|||
// 转码传输 |
|||
let value = encodeURIComponent(data) |
|||
uni.redirectTo({ |
|||
url: this.data.order_url.page + '?data=' + |
|||
value |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.app { |
|||
--bgcolor: #f3f3f3; |
|||
|
|||
background-color: var(--bgcolor); |
|||
min-height: calc(100vh - var(--window-bottom) - var(--window-top)); |
|||
} |
|||
|
|||
.header { |
|||
text-align: center; |
|||
color: #ffffff; |
|||
padding: 80rpx 30rpx 50rpx 30rpx; |
|||
|
|||
.success-image { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
} |
|||
|
|||
.success-title { |
|||
font-size: 34rpx; |
|||
margin-top: 40rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.hr { |
|||
margin-top: 40rpx; |
|||
width: 100%; |
|||
height: 30rpx; |
|||
border-radius: 20rpx; |
|||
opacity: 0.1; |
|||
background-color: #000000; |
|||
} |
|||
} |
|||
|
|||
.info-box { |
|||
width: calc(100% - 100rpx); |
|||
margin: 0 50rpx; |
|||
position: relative; |
|||
margin-top: -64rpx; |
|||
background-color: #ffffff; |
|||
|
|||
.info-amount { |
|||
height: 150rpx; |
|||
line-height: 150rpx; |
|||
text-align: center; |
|||
font-weight: bold; |
|||
font-size: 60rpx; |
|||
border-bottom: 4rpx dashed #f3f3f3; |
|||
} |
|||
|
|||
.left-circle { |
|||
background-color: var(--bgcolor); |
|||
position: absolute; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
top: calc(150rpx - 20rpx); |
|||
left: -20rpx; |
|||
} |
|||
|
|||
.right-circle { |
|||
background-color: var(--bgcolor); |
|||
position: absolute; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
top: calc(150rpx - 20rpx); |
|||
right: -20rpx; |
|||
} |
|||
|
|||
.info-main { |
|||
padding: 30rpx; |
|||
font-size: 26rpx; |
|||
color: #333333; |
|||
|
|||
.info-cell { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
line-height: 50rpx; |
|||
|
|||
.left { |
|||
width: 200rpx; |
|||
text-align: left; |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.button-query { |
|||
color: #ffffff; |
|||
width: calc(100% - 120rpx); |
|||
margin: 50rpx 60rpx 0 60rpx; |
|||
padding: 20rpx 30rpx; |
|||
border-radius: 50rpx; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.button-query:active { |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
.footer-hr { |
|||
height: 100rpx; |
|||
display: block; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,17 @@ |
|||
{ |
|||
"pages": [{ |
|||
"path": "uni_modules/common-pay/pages/pay/pay", |
|||
"style": { |
|||
"navigationBarTitleText": "支付订单", |
|||
"backgroundColor": "#F8F8F8" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "uni_modules/common-pay/pages/success/success", |
|||
"style": { |
|||
"navigationBarTitleText": "支付完成", |
|||
"backgroundColor": "#F8F8F8" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
# common-pay |
|||
|
|||
## 支付流程： |
|||
|
|||
1. 前端提交，后台生成待支付的订单 |
|||
2. 订单生成后，跳转到前端收银台页面 |
|||
3. 客户选择支付方式后，调后台接口生成orderInfo |
|||
|
|||
### 移植到项目： |
|||
|
|||
1. 复制 `common-pay`到自己的项目里 |
|||
2. 复制 `common-pay`里的`pages_init`到自己项目里的`page.json` |
|||
|
|||
### 配置支付方式： |
|||
|
|||
`pay.vue ` |
|||
|
|||
修改属性：`use:[]` |
|||
|
|||
### 跳转支付： |
|||
|
|||
`pay.js `,调用`pay`方法 |
|||
|
|||
``` |
|||
import { |
|||
pay |
|||
} from '../../uni_modules/common-pay/utils/pay.js' |
|||
|
|||
// 请按照格式去传参 |
|||
let o = { |
|||
price: '10.00', |
|||
goods: '测试商品' |
|||
... |
|||
} |
|||
|
|||
pay(o); |
|||
``` |
|||
|
|||
### 接参： |
|||
|
|||
|
|||
``` |
|||
try { |
|||
// 跳转携带数据 |
|||
this.data = JSON.parse(options.data) |
|||
} catch (e) { |
|||
this.data = JSON.parse(decodeURIComponent(options.data)) |
|||
} |
|||
``` |
|||
@ -0,0 +1,13 @@ |
|||
function pay(o) { |
|||
// 数据源转换成字符
|
|||
let data = JSON.stringify(o) |
|||
// 转码传输
|
|||
let value = encodeURIComponent(data) |
|||
uni.navigateTo({ |
|||
url: '/uni_modules/common-pay/pages/pay/pay?data=' + value |
|||
}) |
|||
} |
|||
|
|||
export { |
|||
pay |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
/** |
|||
* 支付专用网络请求 |
|||
* url: 绝对路径请求地址 |
|||
* token: 如需请传 |
|||
* data: 参数 |
|||
*/ |
|||
function http(options) { |
|||
|
|||
return new Promise((resolve, reject) => { |
|||
|
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}); |
|||
|
|||
var url = options.url |
|||
|
|||
uni.request({ |
|||
// 组装请求地址
|
|||
url: url, |
|||
// 请求方式 POST
|
|||
method: 'POST', |
|||
header: { |
|||
'content-type': "application/x-www-form-urlencoded", |
|||
'token': (options.token == undefined || options.token == '') ? "token is null" : options |
|||
.token |
|||
}, |
|||
// 具体参数
|
|||
data: options.data, |
|||
success: res => { |
|||
|
|||
// 关闭显示框
|
|||
uni.hideLoading(); |
|||
|
|||
console.log('Http网络路径', url) |
|||
console.log('Http网络请求结果', JSON.stringify(res.data)) |
|||
|
|||
if (res.statusCode == 200) { |
|||
|
|||
// 进行success字段检查
|
|||
|
|||
if (!res.data.success) { |
|||
|
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
// 保证文字长度
|
|||
icon: "none", |
|||
duration: 3000 |
|||
}) |
|||
|
|||
// 直接返回Response
|
|||
reject(res.data) |
|||
|
|||
} else { |
|||
// 直接返回Response
|
|||
resolve(res.data) |
|||
} |
|||
|
|||
} else { |
|||
|
|||
uni.showToast({ |
|||
title: res.statusCode + "：" + res.data.error, |
|||
// 保证文字长度
|
|||
icon: "none", |
|||
duration: 3000 |
|||
}) |
|||
|
|||
// 返回错误数据
|
|||
reject({ |
|||
success: false, |
|||
msg: res.data.error, |
|||
code: '1111' |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
fail: (err) => { |
|||
|
|||
// 关闭显示框
|
|||
uni.hideLoading(); |
|||
|
|||
console.log("Http网络请求fail", err) |
|||
|
|||
uni.showToast({ |
|||
title: err.errMsg, |
|||
icon: 'none' |
|||
}) |
|||
|
|||
// 返回错误数据
|
|||
reject({ |
|||
success: false, |
|||
msg: err.errMsg, |
|||
code: '1111' |
|||
}) |
|||
}, |
|||
complete: () => { |
|||
|
|||
} |
|||
}); |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
export { |
|||
http |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue