
@ -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,28 @@ |
|||
<script> |
|||
import config from "common/config.js"; |
|||
import { |
|||
navParams |
|||
} from "common/nav-calc-utils.js"; |
|||
export default { |
|||
globalData: { |
|||
wxSilentLoginURL: config.baseUrl + "/lpkcustomer/wxSilentLogin", |
|||
sid: "", |
|||
navInfo: { |
|||
|
|||
} |
|||
}, |
|||
onLaunch: function() { |
|||
this.globalData.navInfo = navParams() |
|||
}, |
|||
onShow: function() { |
|||
console.log('App Show') |
|||
}, |
|||
onHide: function() { |
|||
console.log('App Hide') |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
/*每个页面公共css */ |
|||
</style> |
@ -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,14 @@ |
|||
/** |
|||
* config 配置项说明 |
|||
* baseUrl = "", // 接口的根地址
|
|||
* tokenName = "Authorization", // 请求头中token的名字,与服务器端对应
|
|||
* loginTimeoutCode : "5000", // 登录超时或失效的情况下,服务器端返回的错误码
|
|||
* loginTimeoutPage = "/pages/login/index", // 登录超时或失效的情况下,跳转到的登录页面
|
|||
*/ |
|||
module.exports = { |
|||
// baseUrl: 'http://192.168.0.105:7212',
|
|||
baseUrl: 'https://ordermall.yxtsoft.com/lpk', |
|||
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,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,183 @@ |
|||
import request from '@/utils/requester.js' |
|||
import config from "@/common/config.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), |
|||
// 订单退款
|
|||
orderRetrun: (params = {}) => request.post("/refund/createOrder", 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), |
|||
// 预约记录
|
|||
orderListByUserSid: (params = {}) => request.post("/lpksreservoorder/orderListByUserSid", params, {}, {}), |
|||
// 取消预约记录
|
|||
cancelReservation: (params = {}) => request.get("/lpksreservoorders/cancelReservation/" + params, params, {}, {}), |
|||
// 转赠记录
|
|||
transferRecordsList: (params = {}) => request.post("/transferrecords/transferRecordsList", params, {}, {}), |
|||
|
|||
|
|||
// 我的
|
|||
// 获取头像 昵称
|
|||
getUserInfo: (params = {}) => request.get("/lpkcustomer/customerInfo/" + params, params), |
|||
// 用户基本信息
|
|||
getBaseInfo: (params = {}) => request.get("/lpkcustomer/getCustomerInfo/" + params, params, {}, {}, true), |
|||
// 修改头像
|
|||
uploadHandImage: (params = {}) => request.post("/lpkcustomer/uploadAvatar", params), |
|||
// 获取默认提菜信息
|
|||
getStoreBySid: (params = {}) => request.get("/customerstore/getStoreBySid/" + params, params), |
|||
// 推荐有礼
|
|||
myRecommend: (params = {}) => request.get("/newcomerrecorecord/recordList/" + params, params), |
|||
// 基本信息修改头像
|
|||
headerUpload: config.baseUrl + '/lpkcustomer/modifyHeadImage', |
|||
// 修改昵称
|
|||
changeNick: (params = {}) => request.formpost("/lpkcustomer/modifyUserNickName", params), |
|||
// 获取手机号
|
|||
getPhone: (params = {}) => request.formpost("/lpkcustomer/getPhoneNumber", params), |
|||
// 获取实名
|
|||
getRealInfo: (params = {}) => request.get("/lpkcustomer/getRealInfo/" + params, params, {}, {}, true), |
|||
// 保存实名
|
|||
saveRealInfo: (params = {}) => request.post("/lpkcustomer/saveRealInfo", params), |
|||
// 查询推荐支行
|
|||
searchTuiJianZhiHang: (params = {}) => request.get("/LpkCustomerBank/getBankList", params), |
|||
// 保存支行
|
|||
saveTuiJianZhiHang: (params = {}) => request.formpost("/lpkcustomer/updateCustomerBank", params), |
|||
// 我的 预约记录
|
|||
myOrderListByUserSid: (params = {}) => request.post("/lpksreservoorders/orderListByUserSid", params, {}, {}), |
|||
// 我的 订单列表
|
|||
ordersList: (params = {}) => request.post("/empsreservoorder/ordersList", params, {}, {}), |
|||
// 我的 订单详情
|
|||
orderDetails: (params = {}) => request.get("/empsreservoorder/OrderDetails/" + params, params, {}, {}, true), |
|||
// 我的 订单详情 修改订单状态
|
|||
changePayState: (params = {}) => request.get("/empsreservoorder/changePayState/" + params, params, {}, {}, true), |
|||
// 订单发票获取授权页链接
|
|||
wxElectronicInvoice: (params = {}) => request.post("/empsreservoorder/wxElectronicInvoice", params, {}, {}), |
|||
// 我的 失效商品
|
|||
vegeCellarInvalidList: (params = {}) => request.post("/lpkgoods/vegeCellarInvalidList", params, {}, {}), |
|||
|
|||
// 查询发票列表
|
|||
getInvoiceList: (params = {}) => request.get("/customerinvoice/listInvoice/" + params, params), |
|||
// 新增发票
|
|||
saveOrUpdateInvoice: (params = {}) => request.post("/customerinvoice/saveOrUpdate", params, {}, {}), |
|||
// 提交申请发票
|
|||
submitInvoice: (params = {}) => request.post("/invoicerecords/save", params, {}, {}), |
|||
// 我的 推荐有礼
|
|||
recommendNewUsers: (params = {}) => request.post("/newcomerrecorecord/recommendNewUsers", params, {}, {}), |
|||
// 新人助力
|
|||
recommendedAssistance: (params = {}) => request.post("/newcomerrecorecord/recommendedAssistance", params, {}, {}), |
|||
|
|||
|
|||
// 2024-1-15 新需求
|
|||
// 获取轮播图
|
|||
bannerList: (params = {}) => request.get("/wxapi/banner/list", params), |
|||
// 获取分类和品牌
|
|||
getGoodsTypeAndBrand: (params = {}) => request.get("/lpkgoods/getGoodsTypeAndBrand", {}, {}, {}, true), |
|||
// 判断企业菜窖是否认证
|
|||
isEnterprise: (params = {}) => request.get("/lpkgoods/isEnterprise/" + params.customerSid + "/" + params.brandId, + |
|||
params, {}, {}, {}, true, true), |
|||
// 保存企业认证
|
|||
saveAuthentication: (params = {}) => request.post("/enterprisecertification/save", params), |
|||
// 获取补充菜窖 商品分类列表
|
|||
getAllGoodsType: (params = {}) => request.get("/lpkgiftcard/getAllGoodsType/" + params, params), |
|||
// 获取补充菜窖 商品分类列表
|
|||
getGoodsByType: (params = {}) => request.post("/lpkgoods/getGoodsByType", params, {}, {}, true), |
|||
// 获取当前购物车总价及总斤数
|
|||
getGoodsWeight: (params = {}) => request.post("/shoppingcart/getGoodsWeight", params, {}, {}, true), |
|||
// 加入购物车
|
|||
addShoppingCart: (params = {}) => request.post("/shoppingcart/addShoppingCart", params), |
|||
// 购物车列表
|
|||
shoppingCartList: (params = {}) => request.post("/shoppingcart/shoppingCartList", params, {}, {}, true), |
|||
// 结算 跳过支付
|
|||
saveGoods: (params = {}) => request.post("/vegetablecellar/saveGoods", params), |
|||
// 正式结算 支付
|
|||
createVegeOrder: (params = {}) => request.post("/empsreservoorder/createVegeOrder", params), |
|||
|
|||
|
|||
// 我的菜窖 通知公告
|
|||
getNotices: (params = {}) => request.get("/appletnotice/getNotice", params), |
|||
// 我的菜窖 新人礼包列表
|
|||
newUserQuota: (params = {}) => request.post("/appletgiftbag/newUserQuota", params), |
|||
// 结算新人礼包 支付
|
|||
createNewUserBagOrder: (params = {}) => request.post("/empsreservoorder/createNewUserBagOrder", params), |
|||
// 我的菜窖 类型列表
|
|||
vegeCellarTypeList: (params = {}) => request.post("/lpkgoods/vegeCellarTypeList", params), |
|||
// 我的菜窖 商品列表
|
|||
vegeCellarList: (params = {}) => request.post("/lpkgoods/vegeCellarList", params), |
|||
// 我的菜窖 转赠亲友
|
|||
transSubmission: (params = {}) => request.post("/transferrecords/submission", params), |
|||
// 我的菜窖 获取转赠内容
|
|||
getTransferByCode: (params = {}) => request.post("/transferrecords/getTransferByCode/" + params, params), |
|||
// 我的菜窖 领取/绑定转赠菜窖
|
|||
receiveTransferGoods: (params = {}) => request.post("/vegetablecellar/receiveTransferGoods", params), |
|||
// 我的菜窖 绑定之前发出的礼品卡
|
|||
bindAllCard: (params = {}) => request.post("/lpkgiftcard/bindAllCard", params), |
|||
// 我的菜窖 预约提菜
|
|||
getStoreBySid: (params = {}) => request.get("/customerstore/getStoreBySid/" + params, params), |
|||
// 我的菜窖 预约提菜 选择时间范围
|
|||
getExtractSaturAndSun: (params = {}) => request.get("/customerstore/isSaturAndSun", params), |
|||
// 我的菜窖 保存预约提菜
|
|||
submissionExtract: (params = {}) => request.post("/lpksreservoorders/submission", params, {}, {}, true), |
|||
|
|||
} |
@ -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/card/card' |
|||
}) |
|||
} |
|||
|
|||
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,42 @@ |
|||
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; |
|||
|
|||
const app = new Vue({ |
|||
store, |
|||
...App |
|||
}) |
|||
app.$mount() |
@ -0,0 +1,75 @@ |
|||
{ |
|||
"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" : "wx11565021714ba796", |
|||
"setting" : { |
|||
"urlCheck" : false, |
|||
"postcss" : true, |
|||
"minified" : true |
|||
}, |
|||
"usingComponents" : true, |
|||
"lazyCodeLoading" : "requiredComponents" |
|||
}, |
|||
"mp-alipay" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-baidu" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-toutiao" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"uniStatistics" : { |
|||
"enable" : false |
|||
}, |
|||
"vueVersion" : "2" |
|||
} |
@ -0,0 +1,296 @@ |
|||
{ |
|||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages |
|||
// { |
|||
// "path": "pages/maintenance", |
|||
// "style": { |
|||
// "navigationBarTitleText": "惠享云菜窖", |
|||
// "enablePullDownRefresh": false |
|||
// } |
|||
// }, |
|||
{ |
|||
"path": "pages/login/login", |
|||
"style": { |
|||
"navigationBarTitleText": "", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_detail", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_detail2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card-223-12-12", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_booking", |
|||
"style": { |
|||
"navigationBarTitleText": "预约提货", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_record", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_bind", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
|
|||
// 扫码进入 |
|||
{ |
|||
"path": "pages/card/card_bind2", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_bind3", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/index/BindPhone", |
|||
"style": { |
|||
"navigationBarTitleText": "绑定账号", |
|||
"navigationStyle": "custom", |
|||
"app-plus": { |
|||
"scrollIndicator": false //禁用原生导航栏, |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/home/UserFragment", |
|||
"style": { |
|||
"navigationBarTitleText": "绑定账号", |
|||
"navigationStyle": "custom", |
|||
"app-plus": { |
|||
"scrollIndicator": false //禁用原生导航栏, |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/card/card_record_detail", |
|||
"style": { |
|||
"navigationBarTitleText": "预约详情", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/record/recordList", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/record/recordList2", |
|||
"style": { |
|||
"navigationBarTitleText": "预约记录" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/good/goodsDetail", |
|||
"style": { |
|||
"navigationBarTitleText": "产品详情", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/SelectAddressActivity", |
|||
"style": { |
|||
"navigationBarTitleText": "提货点列表", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/enterprise/corporateCard", |
|||
"style": { |
|||
"navigationStyle": "custom" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/bind/bind_cloudCard", |
|||
"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/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/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" |
|||
} |
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "white", |
|||
"navigationBarTitleText": "云菜窖", |
|||
"navigationBarBackgroundColor": "#FE9039", |
|||
"backgroundColor": "#FE9039" |
|||
}, |
|||
"tabBar": { |
|||
"color": "#7A7E83", |
|||
"selectedColor": "#191919", |
|||
"borderStyle": "black", |
|||
"backgroundColor": "#ffffff", |
|||
"list": [ |
|||
// { |
|||
// "pagePath": "pages/card/card-223-12-12", |
|||
// "text": "礼包", |
|||
// "iconPath": "static/bomicon/bom_notPack.png", |
|||
// "selectedIconPath": "static/bomicon/bom_pack.png" |
|||
// }, |
|||
{ |
|||
"pagePath": "pages/card/card", |
|||
"text": "礼包", |
|||
"iconPath": "static/bomicon/bom_notPack.png", |
|||
"selectedIconPath": "static/bomicon/bom_pack.png" |
|||
}, |
|||
// { |
|||
// "pagePath": "pages/enterprise/corporateCard", |
|||
// "text": "企业卡", |
|||
// "iconPath": "static/bomicon/bom_notCard.png", |
|||
// "selectedIconPath": "static/bomicon/bom_card.png" |
|||
// }, |
|||
{ |
|||
"pagePath": "pages/record/recordList2", |
|||
"text": "预约记录", |
|||
"iconPath": "static/bomicon/bom_notRecord.png", |
|||
"selectedIconPath": "static/bomicon/bom_record.png" |
|||
} |
|||
|
|||
] |
|||
}, |
|||
"uniIdRouter": {} |
|||
} |
@ -0,0 +1,244 @@ |
|||
<template> |
|||
<view> |
|||
<view style="position: sticky;top: 0;background-color: #FE9039;"> |
|||
<view class="search-container"> |
|||
<!-- 搜索框 --> |
|||
<view class="search-container-bar"> |
|||
<!-- :cancelText="keyBoardPopup ? '取消' : '搜索'" --> |
|||
<uni-search-bar ref="searchBar" style="flex:1;margin-left: 20rpx;" radius="100" |
|||
v-model="associativeText" :focus="focus" :placeholder="hotWorld" clearButton="auto" |
|||
cancelButton="none" @clear="clear" /> |
|||
<view v-if="stringIsNotEmpty(associativeText) && associativeText!=page.key" @click="search" |
|||
style="margin-right: 10px;font-size: 13px; color: #FED6B5;">搜索</view> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="search-body"> |
|||
<view |
|||
style="font-size: 26rpx;padding-left: 50rpx;padding-right: 40rpx;padding-top: 10rpx;padding-bottom: 20rpx;color: #FED6B5;"> |
|||
输入关键字筛选提货点 |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
|
|||
<loading-state ref="pageView" @request="request"> |
|||
<!-- 搜索联想 --> |
|||
<view style="display: flex;flex-direction: column;background: #FFFFFF; |
|||
border-top-left-radius: 30px;border-top-right-radius: 30px; padding:10px 20px;margin-top: 10px;box-sizing: border-box;padding-bottom: 0px;" |
|||
v-for="(item,index) in dataList" :key="index"> |
|||
<!-- |
|||
<view |
|||
style="display: flex;flex-direction: row;width: 100%;box-sizing: border-box;width: 100%;margin-top:10rpx ;align-items: center;"> |
|||
<image src="../static/address_name.png" style="width: 50rpx;height: 50rpx;flex-shrink: 0;"> |
|||
</image> |
|||
<text |
|||
style="font-size: 31.5rpx;margin-left: 18rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.name}} |
|||
</text> |
|||
</view> |
|||
|
|||
<text |
|||
style="font-size: 24rpx;color: #999999;margin-top: 6rpx;box-sizing: border-box;width: 100%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">营业时间:{{item.businessHours}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 22rpx;"> |
|||
<image v-if="false" |
|||
style="width: 120rpx;height: 120rpx;border-radius: 20rpx;flex-shrink: 0;background-color: #fafafa;"> |
|||
</image> |
|||
<view style="display: flex;flex: 1;flex-direction: column;margin-left: 20rpx;margin-top: 10rpx;"> |
|||
<view style="display: flex;flex-direction: row;"> |
|||
<image src="../static/address_location.png" |
|||
style="width: 16px;height: 16px;flex-shrink: 0;margin-right: 3px;"> |
|||
</image> |
|||
<view style="color: #666666;font-size: 29.5rpx;">{{item.address}} |
|||
</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;margin-top: 22rpx;"> |
|||
<image src="../static/address_phone.png" |
|||
style="width: 16px;height: 16px;margin-right: 3px;flex-shrink: 0;"> |
|||
</image> |
|||
<view style="color: #5259D7;font-size: 29.5rpx;">{{item.phone}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid;"> |
|||
<view style="flex: 1;"></view> |
|||
|
|||
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;" |
|||
@click.stop="phone(item.phone)"> |
|||
<image src="../static/address_phone2.png" style="width: 18px;height: 18px;"></image> |
|||
<view style="font-size: 13px;margin-left: 6px;">电话</view> |
|||
</view> |
|||
<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;" |
|||
@click.stop="confirm(item)"> |
|||
<image src="../static/address_confirm.png" style="width: 18px;height: 18px;"></image> |
|||
<view style="font-size: 13px;margin-left: 6px;">确定</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: 333;">{{item.name}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">营业时间:{{item.businessHours}}</text> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/location.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;flex: 1;">门店地址:{{item.address}}</text> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/navigation.png" |
|||
style="width: 20px;height: 20px; margin-right: 20px;"></image> |
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid; justify-content: space-between; |
|||
padding-left: 30px;padding-right:30px;"> |
|||
|
|||
<view class="btn" @click.stop="phone(item.phone)"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/phone.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 14px; color: #666;">电话咨询</text> |
|||
</view> |
|||
|
|||
<view class="btn" @click.stop="confirm(item)"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/user.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 14px; color: #666;">预约自提</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</loading-state> |
|||
<view style="height: 20px;"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
key: '' |
|||
}, |
|||
associativeText: '', |
|||
hotWorld: '输入关键字搜索提货点', // 搜索热词,如果没有输入即回车,则搜索热词,但是不会加入搜索记录 |
|||
focus: true, // 是否自动聚焦 |
|||
dataList: [] |
|||
} |
|||
}, |
|||
created() { |
|||
// 首次请求 |
|||
this.request() |
|||
|
|||
// #ifdef APP-PLUS |
|||
uni.onKeyboardHeightChange((res) => { |
|||
this.keyBoardPopup = res.height !== 0; |
|||
}) |
|||
// #endif |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.page.key = this.associativeText |
|||
this.request() |
|||
}, |
|||
phone(num) { |
|||
uni.makePhoneCall({ |
|||
phoneNumber: num |
|||
}); |
|||
}, |
|||
confirm(item) { |
|||
uni.$emit('address', item) |
|||
uni.navigateBack() |
|||
}, |
|||
request() { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
let _this = this |
|||
_this.$api.address({ |
|||
'name': this.page.key |
|||
}).then((resp) => { |
|||
_this.dataList = resp |
|||
if (resp.length == 0) { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(100) |
|||
}) |
|||
} else { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
} |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
clear(res) { |
|||
this.page.key = '' |
|||
this.request() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss"> |
|||
uni-page-body, |
|||
page { |
|||
background: #f3f4f6; |
|||
} |
|||
|
|||
.btn { |
|||
margin-top: 10px; |
|||
border: 1px solid #FEA561; |
|||
border-radius: 20px; |
|||
display: flex;flex-direction: row; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 5px 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.search-body { |
|||
background-color: #FE9039; |
|||
border-bottom-right-radius: 10px; |
|||
border-bottom-left-radius: 10px; |
|||
} |
|||
|
|||
@mixin uni-flex { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
} |
|||
|
|||
$search-bar-height: 52px; |
|||
$word-container_header-height: 72rpx; |
|||
|
|||
.search-container { |
|||
height: $search-bar-height; |
|||
@include uni-flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
background: white; |
|||
|
|||
@at-root { |
|||
#{&}-bar { |
|||
@include uni-flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: #FE9039; |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,280 @@ |
|||
<template> |
|||
<view style="display: flex;flex-direction: column;background-color: #fff;height: 100%;"> |
|||
|
|||
<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_new1.png" mode="scaleToFill" |
|||
style="width: 100%;height: 70vw"></image> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view |
|||
style="height: calc(100vh - 75vw - 98px); overflow: scroll; padding-left: 12px;padding-right: 12px;padding-bottom: 24px;box-sizing: border-box;"> |
|||
<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> |
|||
<view v-for="(item,index) in data.list" |
|||
style="display: flex;flex-direction: row;width: 100%;margin-top: 5px;"> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%; |
|||
padding-left: 20px;padding-right: 20px;margin-top: 8px;"> |
|||
<!-- <text style="font-size: 12px;color: #666;">{{item.goodsName}}</text> |
|||
<text style="font-size: 12px;color: #666;">{{item.remarks}}</text> --> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;box-sizing: border-box;"> |
|||
|
|||
<image :src="item.goodsPicUrl" mode="aspectFill" @click="itemClick(item.goodsSid)" |
|||
style="width: 90px;height: 90px;border-radius: 10px;flex-shrink: 0;"></image> |
|||
|
|||
<view style="display: flex;flex-direction: column;margin-left:16px;box-sizing: border-box;"> |
|||
|
|||
<text style="color: #000;font-size: 14px;font-weight: 600;font-family: sans-serif;" |
|||
@click="itemClick(item.goodsSid)">{{item.goodsName}}</text> |
|||
<text style="margin-top: 6px;color: #999;font-size: 12px;">{{item.goodsContent}}</text> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;"> |
|||
|
|||
<text style="color: #E36443;font-size: 12px;">{{item.goodsFs}}</text> |
|||
<text style="color: #E36443;margin-left: 10px;font-size: 12px;">{{item.goodsJs}}</text> |
|||
<!-- <text |
|||
style="margin-left: 10px;color: #E36443;border: 1px #E36443 solid;border-radius: 8px;padding: 1px 10px;font-size: 12px;">{{item.price}}</text> --> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;" |
|||
v-if="data.remarks!=''"> |
|||
<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 v-if="data.remarks!=''" |
|||
style="margin-top: 12px; padding-left: 20px;padding-right: 20px;text-indent: 2em;font-size: 16px;color: #333; |
|||
overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{data.remarks}}</text> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view v-if="codeType" style="position: absolute; bottom: 24px; display: flex;flex-direction: column;width: 100%; |
|||
padding-left: 21.5px;padding-right: 21.5px;box-sizing: border-box;border-top: 1px solid #EFEFEF; "> |
|||
|
|||
<text |
|||
style=" text-align: center;width: 100%;color: #4F4F4F;font-size: 12px;margin-top: 12px;">温馨提示:您的好友赠送您一份心意,请接收。</text> |
|||
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); |
|||
width: 100%;border-radius: 25px;height: 50px;text-align: center; |
|||
margin-top: 12px;line-height: 50px;color: #FFFFFF;font-size: 16px;" @click="save"> |
|||
接收</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 恢复预约提货弹框 --> |
|||
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal'></view> |
|||
<view class="modalDlg2" catchtouchmove='preventTouchMove' v-if='showModal'> |
|||
|
|||
<view style="display: flex;flex-direction: column;justify-content: center;align-items: center; |
|||
width: 80%; border-radius: 20px; background: linear-gradient(#FFF4E4, #fff);"> |
|||
|
|||
<image src="../../static/notices.png" style="width: 60px;height: 60px; margin-top: -30px;" |
|||
mode="scaleToFill"></image> |
|||
|
|||
<text |
|||
style="margin-top: 16px;font-size: 18px;color: #101010;font-weight: 600;font-family: sans-serif;">温馨提示</text> |
|||
<text |
|||
style="margin-top: 12px;font-size: 14px;color: #333;padding-left: 30px;padding-right: 30px;">您好,此卡已被领取。</text> |
|||
|
|||
<text style="margin-top: 25px;margin-bottom: 20px;border: 1px #FF9900 solid; color: #FF9900;font-size: 14px; |
|||
border-radius: 20px;height: 40px; line-height: 40px;padding-left: 30px;padding-right: 30px;" |
|||
@click="colseDialog()">确定</text> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
//引入bus |
|||
import bus from '@/common/bus'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
code: '', |
|||
codeKey: '', |
|||
customerSid: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: { |
|||
remarks: "" |
|||
}, |
|||
codeType: false, |
|||
showModal: false |
|||
} |
|||
}, |
|||
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 |
|||
this.getData() |
|||
}, |
|||
methods: { |
|||
colseDialog() { |
|||
this.showModal = false |
|||
uni.redirectTo({ |
|||
url: '/pages/login/login' |
|||
}) |
|||
}, |
|||
itemClick(goodsSid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/good/goodsDetail2?sid=' + goodsSid |
|||
}) |
|||
}, |
|||
getData() { |
|||
let _this = this |
|||
_this.$api.getTransferByCode(this.page.code).then((resp) => { |
|||
|
|||
// 1 未领取 2 已绑定 |
|||
|
|||
// 已绑定 |
|||
if ('2' == resp.state) { |
|||
|
|||
if (resp.recipientSid == _this.page.customerSid) { |
|||
uni.redirectTo({ |
|||
url: '/pages/login/login' |
|||
}) |
|||
} else { |
|||
_this.showModal = true |
|||
} |
|||
|
|||
} else { |
|||
_this.data = resp |
|||
_this.codeType = true |
|||
} |
|||
|
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
}, |
|||
|
|||
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 |
|||
|
|||
var params = { |
|||
customerSid: this.page.customerSid, |
|||
transferSid: this.page.codeKey |
|||
} |
|||
|
|||
console.log("params+++++++++++++++", params); |
|||
|
|||
_this.$api.receiveTransferGoods(params).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.redirectTo({ |
|||
url: '/pages/login/login' |
|||
}) |
|||
} |
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
height: 70vw; |
|||
} |
|||
|
|||
|
|||
/* 弹窗样式 */ |
|||
.model { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #000; |
|||
z-index: 100000; |
|||
opacity: 0.7; |
|||
top: 0; |
|||
left: 0; |
|||
|
|||
} |
|||
|
|||
.modalDlg2 { |
|||
/* 设置超出滚动 */ |
|||
overflow: auto; |
|||
position: fixed; |
|||
z-index: 100000; |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
</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.bindAllCard(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/card/card' |
|||
}) |
|||
} |
|||
|
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
height: 70vw; |
|||
} |
|||
</style> |
@ -0,0 +1,208 @@ |
|||
<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() { |
|||
|
|||
this.page.customerSid = getApp().globalData.sid |
|||
|
|||
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 |
|||
|
|||
console.log("+++++++++++", this.page); |
|||
|
|||
_this.$api.bindAllCard(this.page).then((resp) => { |
|||
// bus.$emit('order', "监听回调"); |
|||
uni.switchTab({ |
|||
url: '/pages/card/card' |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
@ -0,0 +1,357 @@ |
|||
<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 |
|||
style=" display: flex;flex-direction: row;align-items: center;justify-content: center;padding-top: 5vw;"> |
|||
|
|||
<view style="margin-right: 8vw;" :class="(currentTab!=0)?'tab-bj2':'tab-bj1'" @click="tab(0)">提货卡 |
|||
</view> |
|||
|
|||
<view style="margin-left: 8vw;" :class="(currentTab!=0)?'tab-bj1':'tab-bj2'" @click="tab(1)"> |
|||
福礼卡</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- 页面内容 --> |
|||
<swiper class="tab-box" :current="currentTab" duration="300" bindchange="switchTab" @change=tabChange> |
|||
<swiper-item class="tab-content"> |
|||
<view v-for="(item,index) in data" :key="index" |
|||
style="display: flex;flex-direction: column;align-items: center;margin-top: 14px;" |
|||
:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)"> |
|||
|
|||
<view class="item" :class="{ item2: !item.showBtn }"> |
|||
|
|||
<!-- 外边 18px 内边 32px = 50px --> |
|||
<view |
|||
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;"> |
|||
|
|||
<!-- 礼包图标 总60px --> |
|||
<view style="flex-shrink: 0;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill" |
|||
v-show="item.showBtn" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill" |
|||
v-show="!item.showBtn" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;"> |
|||
|
|||
<view style="flex: 1;display: flex;flex-direction: column;"> |
|||
<text class="_ellipsis" |
|||
style="font-size: 13px;color: #333;width: calc(100vw - 190px);">卡号: |
|||
{{item.serialNumber}}</text> |
|||
<text lass="_ellipsis" |
|||
style="font-size: 12px;color: #999;margin-top: 5px;width: calc(100vw - 182px);"> |
|||
{{item.time}}</text> |
|||
</view> |
|||
|
|||
<!-- 按钮 24 + 48 = 72px--> |
|||
<view :class="{ showBtn: !item.showBtn }" style="font-size: 12px;color:#fff;flex-shrink: 0; |
|||
border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;box-sizing: border-box; |
|||
background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view> |
|||
</view> |
|||
|
|||
<!-- 蔬菜礼包经典款+状态 --> |
|||
<view |
|||
style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text> |
|||
<text |
|||
style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding: 3px 10px; font-size: 12px; color: #FF6000;flex-shrink: 0;"> |
|||
{{item.state}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
</swiper-item> |
|||
|
|||
<swiper-item class="tab-content"> |
|||
<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> |
|||
</swiper-item> |
|||
</swiper> |
|||
|
|||
</z-paging> |
|||
</view> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
remarks: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: [], |
|||
currentTab: 0, |
|||
} |
|||
}, |
|||
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 |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
tab(index) { |
|||
this.currentTab = index |
|||
|
|||
}, |
|||
tabChange(event) { |
|||
console.log("eeee", event.detail.current) |
|||
this.currentTab = event.detail.current |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._ellipsis { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 85vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/hmoe_bj.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.btn { |
|||
/* margin-top: 97.86vw; */ |
|||
margin-top: 60vw; |
|||
width: 83%; |
|||
background-color: #FFF; |
|||
border-radius: 45px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.item { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.item2 { |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
width: calc(100% - 18px); |
|||
} |
|||
|
|||
.showBtn { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.use { |
|||
display: flex; |
|||
flex-direction: row; |
|||
border-top-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
color: #FFF; |
|||
align-items: center; |
|||
background: linear-gradient(89.8deg, rgba(218, 51, 33, 1) -3.76%, rgba(237, 113, 53, 0) 300.05%); |
|||
} |
|||
|
|||
.gray { |
|||
filter: grayscale(100%); |
|||
-webkit-filter: grayscale(100%); |
|||
transition: filter 0.2s; |
|||
} |
|||
|
|||
|
|||
|
|||
.oragin {} |
|||
|
|||
uni-page-body, |
|||
page { |
|||
background: #FFFFFF; |
|||
} |
|||
|
|||
.tab-box { |
|||
box-sizing: border-box; |
|||
height: 100vw; |
|||
} |
|||
|
|||
.tab-content { |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.tab-bj1 { |
|||
background: #FFF6EF; |
|||
color: #FF7200; |
|||
font-size: 16px; |
|||
border-radius: 25px; |
|||
border: 1px solid #FF7200; |
|||
padding: 5px 30px; |
|||
} |
|||
|
|||
.tab-bj2 { |
|||
background: #E7E7E7; |
|||
color: #9D9D9D; |
|||
font-size: 16px; |
|||
border-radius: 25px; |
|||
padding: 5px 30px; |
|||
border: none; |
|||
} |
|||
</style> |
@ -0,0 +1,550 @@ |
|||
<template> |
|||
|
|||
<view |
|||
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);"> |
|||
|
|||
<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: 50vw; margin-right: 25px;width: 30px;height: 30px;"> |
|||
</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': '59vw', |
|||
'border-top-left-radius': '25px', |
|||
'border-top-right-radius': '25px', |
|||
'border-bottom-left-radius': '25px', |
|||
'border-bottom-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); |
|||
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { |
|||
this.$mp.page.getTabBar().setData({ |
|||
selected: 1 |
|||
}) |
|||
|
|||
} |
|||
}, |
|||
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' |
|||
}) |
|||
|
|||
// uni.navigateTo({ |
|||
// url: '/pages/home/myHome' |
|||
// }) |
|||
}, |
|||
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>ss |
@ -0,0 +1,138 @@ |
|||
<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/card_example.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> |
|||
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.cardBind(this.page).then((resp) => { |
|||
uni.navigateBack() |
|||
uni.$emit('order', {}) |
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top{ |
|||
width: 100vw; |
|||
height: 70vw; |
|||
} |
|||
</style> |
@ -0,0 +1,199 @@ |
|||
<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/card_example.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> |
|||
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) => { |
|||
uni.switchTab({ |
|||
url: '/pages/card/card' |
|||
}) |
|||
uni.$emit('order', {}) |
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
@ -0,0 +1,138 @@ |
|||
<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/card_example.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> |
|||
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) => { |
|||
uni.navigateBack() |
|||
uni.$emit('order2', {}) |
|||
}).catch(e => { |
|||
_this.longToast(e.msg) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top{ |
|||
width: 100vw; |
|||
height: 70vw; |
|||
} |
|||
</style> |
@ -0,0 +1,247 @@ |
|||
<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> |
|||
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) => { |
|||
uni.navigateBack() |
|||
uni.$emit('order', {}) |
|||
uni.$emit('order2', {}) |
|||
}).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,604 @@ |
|||
<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 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 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;"> |
|||
<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> |
|||
<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: 14vw;margin-left: 15px;margin-right: 15px;margin-top: 4vw;display: flex;align-items: center;"> |
|||
<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="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" :key="index" @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;"> |
|||
<text class="text" style="font-weight: 500;">{{item.goods}} |
|||
</text> |
|||
<view style="font-size: 12px;color: #666666;margin-top: 10px;">{{item.remarks}}</view> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;"> |
|||
<text style="font-size: 12px;color: #666666;margin-right: 10px;">总数:{{item.num}} |
|||
</text> |
|||
<view style="font-size: 12px;color: #666666;">剩余:{{item.lnum}}</view> |
|||
</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.stop="showRecord(page.sid)"> |
|||
预约记录</view> |
|||
<view v-if="data.showBtn" class="btn" style="flex-shrink: 0;color: royalblue;" |
|||
@click.stop="booking(page.sid)">预约提货 |
|||
</view> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- 弹窗蒙版 --> |
|||
<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="background: #F8F8F8;" |
|||
:start="data.start" :end="data.end" @showing='showing' :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: 12px;">{{item.goods}} |
|||
</text> |
|||
<uni-number-box ref="box" style="margin-top: -20px;" :min="0" :max="item.lnum" |
|||
v-model="item.select" :showTextView="page.showTextView"></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> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
showModal: 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' |
|||
], |
|||
} |
|||
}, |
|||
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('order'); |
|||
uni.$off('address'); |
|||
}, |
|||
methods: { |
|||
showDialog() { |
|||
this.showModal = true |
|||
}, |
|||
colseDialog() { |
|||
this.showModal = 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 |
|||
}, |
|||
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.cardBookingSave(this.data).then((resp) => { |
|||
uni.navigateBack() |
|||
uni.$emit('order', {}) |
|||
}).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) |
|||
}) |
|||
}).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 |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/normal.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; |
|||
|
|||
} |
|||
|
|||
.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,353 @@ |
|||
<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 v-for="(item,index) in data.orderCardVoList" :key="index" @click="itemClick(item.goodsSid)" |
|||
style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;"> |
|||
|
|||
<view style="display: flex;flex-direction: column;background-color: #fff; |
|||
border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;"> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">提货时间:{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/location.png" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">提货地点:{{item.store}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/user2.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text |
|||
style="margin-left: 5px;font-size: 12px; color: #999;">提 货 人:{{item.userName}}</text> |
|||
</view> |
|||
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/phone2.png" mode="aspectFill" |
|||
style="width: 20px;height: 20px;"> |
|||
</image> |
|||
<text style="margin-left: 5px;font-size: 12px; color: #999;">联系电话:{{item.userPhone}}</text> |
|||
</view> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 8px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view style="height: 50px;"></view> |
|||
|
|||
|
|||
|
|||
</loading-state> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: { |
|||
sid: '', |
|||
startHeight: 0, |
|||
endHeight: 0 |
|||
}, |
|||
data: { |
|||
time: "", |
|||
name: "", |
|||
pname: "", |
|||
state: "", |
|||
notRese:false, |
|||
showBtn: false, |
|||
showRecord: false, |
|||
goodsVos: [], |
|||
value: "", |
|||
userName: "", |
|||
userPhone: "", |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.page.sid = options.sid |
|||
this.request() |
|||
uni.$on("order2", (e) => { |
|||
this.$nextTick(() => { |
|||
this.$refs.pageView.setLoadState(0) |
|||
}) |
|||
this.request(); |
|||
}) |
|||
|
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
this.page.startHeight = info.windowWidth * 0.6 |
|||
this.page.endHeight = info.windowWidth * 0.8 |
|||
}, |
|||
onUnload() { |
|||
uni.$off('order2'); |
|||
}, |
|||
methods: { |
|||
|
|||
request() { |
|||
let _this = this |
|||
_this.$api.cardDetail(this.page.sid).then((resp) => { |
|||
_this.data = resp |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(2) |
|||
}) |
|||
}).catch(e => { |
|||
_this.$nextTick(() => { |
|||
_this.$refs.pageView.setLoadState(1) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.top { |
|||
width: 100vw; |
|||
/* height: 126.66vw; */ |
|||
height: 65vw; |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/abnormal.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.text { |
|||
white-space: normal; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
uni-page-body, |
|||
page { |
|||
background: #F1F2F3; |
|||
} |
|||
|
|||
.btn { |
|||
border: 1px solid; |
|||
padding-left: 30rpx; |
|||
padding-right: 30rpx; |
|||
padding-top: 12rpx; |
|||
padding-bottom: 12rpx; |
|||
border-radius: 50rpx; |
|||
height: 15px; |
|||
margin-left: 25rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
/* 弹窗样式 */ |
|||
.model { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #000; |
|||
z-index: 999; |
|||
opacity: 0.5; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.modalDlg { |
|||
/* 设置超出滚动 */ |
|||
overflow: auto; |
|||
width: 90%; |
|||
position: fixed; |
|||
top: 50vw; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 9999; |
|||
margin: 0 auto; |
|||
padding: 35rpx; |
|||
background-color: #fff; |
|||
border-radius: 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
} |
|||
|
|||
.windowRow { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-bottom: 15rpx; |
|||
width: 100%; |
|||
} |
|||
|
|||
.userTitle { |
|||
font-size: 42rpx; |
|||
} |
|||
|
|||
.back { |
|||
text-align: center; |
|||
color: #f0a500; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.wishName { |
|||
width: 100%; |
|||
justify-content: center; |
|||
flex-direction: row; |
|||
display: flex; |
|||
margin: 40rpx 0rpx; |
|||
} |
|||
|
|||
.wish_put { |
|||
width: 100%; |
|||
border: #ededef 1rpx solid; |
|||
background-color: #f6f7fb; |
|||
border-radius: 12rpx; |
|||
padding: 30rpx 20rpx; |
|||
margin: 20rpx 0rpx; |
|||
} |
|||
|
|||
.holder_cls { |
|||
color: #909399; |
|||
} |
|||
|
|||
.wishbnt { |
|||
background-color: #fec600; |
|||
text-align: center; |
|||
border-radius: 50rpx; |
|||
padding: 25rpx; |
|||
color: white; |
|||
} |
|||
|
|||
/*弹窗样式结束*/ |
|||
|
|||
/* 下面的姓名样式,不要也没什么影响 */ |
|||
.jiantou { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.fenge { |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.xian { |
|||
border-bottom: #e5e5e5 1rpx solid; |
|||
} |
|||
|
|||
.yellow { |
|||
color: #f0a500; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.box { |
|||
background-color: white; |
|||
padding: 0rpx 25rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.row { |
|||
height: 120rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.you { |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.zhushi { |
|||
font-size: 28rpx; |
|||
color: #808080; |
|||
} |
|||
|
|||
/* 下面的姓名样式结束 */ |
|||
</style> |
@ -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,755 @@ |
|||
<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.serialNumber}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">分享时间:{{item.createTime}}</text> |
|||
<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: '汇融农链ss-云菜窖', |
|||
// ② |
|||
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_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.serialNumber}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">分享时间:{{item.createTime}}</text> |
|||
<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,777 @@ |
|||
<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.serialNumber}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">分享时间:{{item.createTime}}</text> |
|||
<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() |
|||
|
|||
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() |
|||
this.colseDialog2() |
|||
|
|||
}).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() |
|||
|
|||
this.colseDialog2() |
|||
|
|||
|
|||
}).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,512 @@ |
|||
<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.serialNumber}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">分享时间:{{item.createTime}}</text> |
|||
<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,757 @@ |
|||
<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.serialNumber}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">分享时间:{{item.createTime}}</text> |
|||
<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,520 @@ |
|||
<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.serialNumber}}</text> |
|||
<text |
|||
style="font-size: 12px; color: #333;margin-top: 5px;">分享时间:{{item.createTime}}</text> |
|||
<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,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,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,470 @@ |
|||
<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,657 @@ |
|||
<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,474 @@ |
|||
<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,147 @@ |
|||
<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) { |
|||
console.log("onLoad", options.sid) |
|||
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,165 @@ |
|||
<template> |
|||
<view class="page"> |
|||
|
|||
<view class="top"> |
|||
|
|||
<image class="img" :src="baseUrl" @click="chooseImage"></image> |
|||
|
|||
<view class="top_right"> |
|||
|
|||
<text class="top_right_text1">{{name}}</text> |
|||
<text class="top_right_text2">{{orgName}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<!-- <view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/wdxm.png' text="我的项目" @click="click" clickId="0"> |
|||
</UserItem> |
|||
</view> --> |
|||
|
|||
<!-- <view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/smxx.png' text="实名信息" notes="完善信息" @click="click" clickId="1"></UserItem> |
|||
|
|||
</view> --> |
|||
|
|||
<!-- <view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/sz.png' text="设置" @click="click" clickId="2"> |
|||
</UserItem> |
|||
</view> |
|||
|
|||
<view class="user-item-bg"> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/wdxm.png' text="关注公众号" @click="click" clickId="8"> |
|||
</UserItem> |
|||
</view> --> |
|||
|
|||
<!-- #ifdef APP-PLUS --> |
|||
<!-- <view class="user-item-bg"> --> |
|||
<!-- <UserItem src='https://supervise.yxtsoft.com/img/user/zzjg.png' text="组织结构" @click="click" clickId="3"></UserItem> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/xmgl.png' text="项目管理" @click="click" clickId="4"></UserItem> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/ycgl.png' text="云仓管理" @click="click" clickId="5"></UserItem> |
|||
<UserItem src='https://supervise.yxtsoft.com/img/user/xtgl.png' text="系统管理" @click="click" clickId="6"></UserItem> --> |
|||
<!-- <UserItem src='https://supervise.yxtsoft.com/img/user/xtgl.png' text="检查更新" :notes="version" @click="click" |
|||
clickId="7"> |
|||
</UserItem> --> |
|||
<!-- </view> --> |
|||
<!-- #endif --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
baseUrl: "", |
|||
name: "", |
|||
}; |
|||
}, |
|||
onShow() { |
|||
|
|||
|
|||
}, |
|||
methods: { |
|||
chooseImage() { |
|||
// uni.navigateTo({ |
|||
// url: '../index/SetUp2' |
|||
// }); |
|||
}, |
|||
click(id) { |
|||
|
|||
switch (id) { |
|||
case "0": |
|||
uni.navigateTo({ |
|||
url: '../index/MyProject' |
|||
}); |
|||
break; |
|||
case "1": |
|||
break; |
|||
case "2": |
|||
uni.navigateTo({ |
|||
url: '../index/SetUp' |
|||
}); |
|||
|
|||
// uni.navigateTo({ |
|||
// url: '../index/DeviceException?sid=994d75b6-eb29-4733-bd48-dcfdf9f7dd47' |
|||
// }); |
|||
break; |
|||
case "3": |
|||
break; |
|||
case "4": |
|||
break; |
|||
case "5": |
|||
break; |
|||
case "6": |
|||
break; |
|||
case "7": |
|||
APPUpdate(true); |
|||
break; |
|||
case "8": |
|||
uni.navigateTo({ |
|||
url: '../index/interestAccount' |
|||
}) |
|||
break; |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.page { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.top { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding: 15px 25px; |
|||
|
|||
.img { |
|||
margin-top: 10px; |
|||
margin-left: 10px; |
|||
width: 60px; |
|||
height: 60px; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.top_right { |
|||
margin-top: 10px; |
|||
flex: 1; |
|||
margin-left: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.top_right_text1 { |
|||
width: 100%; |
|||
font-size: 20px; |
|||
font-weight: 800; |
|||
font-family: sans-serif; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
|
|||
} |
|||
|
|||
.top_right_text2 { |
|||
margin-top: 5px; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.user-item-bg { |
|||
background-color: #FFFFFF; |
|||
margin-top: 26rpx; |
|||
} |
|||
|
|||
} |
|||
</style> |
@ -0,0 +1,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> |
@ -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> |
@ -0,0 +1,197 @@ |
|||
<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 |
|||
getApp().globalData.isNewUser = res.data.data.isNewUser |
|||
getApp().globalData.isPurchase = res.data.data |
|||
.isPurchase |
|||
getApp().globalData.mobile = res.data.data.mobile |
|||
uni.setStorageSync("satoken", res.data.data.token) |
|||
console.log("人员sid", res.data.data.sid); |
|||
console.log("token", res.data.data.token); |
|||
console.log("mobile", res.data.data.mobile); |
|||
|
|||
|
|||
console.log("middleware>>>>>>>>>>>>", _this.middleware); |
|||
|
|||
if (_this.middleware != null) { |
|||
_this.middleware.params.customerSid = res.data.data |
|||
.sid |
|||
|
|||
// 走中间件的逻辑 |
|||
if ('share' == _this.middleware.functionName) { |
|||
uni.reLaunch({ |
|||
url: _this.middleware.url |
|||
}); |
|||
} else if ('bindCard' == _this.middleware |
|||
.functionName) { |
|||
|
|||
// uni.reLaunch({ |
|||
// url: _this.middleware.url |
|||
// }); |
|||
|
|||
_this.$api.bindAllCard(_this.middleware |
|||
.params) |
|||
.then((resp) => { |
|||
// uni.reLaunch({ |
|||
// url: _this.middleware |
|||
// .url |
|||
// }); |
|||
|
|||
uni.switchTab({ |
|||
url: '/pages/card/card' |
|||
}) |
|||
|
|||
}).catch(e => { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: e.msg, |
|||
showCancel: false, |
|||
success: function(res) { |
|||
uni.switchTab({ |
|||
url: '/pages/card/card' |
|||
}) |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
} else { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '版本过低', |
|||
showCancel: false, |
|||
success: function(res) { |
|||
uni.switchTab({ |
|||
url: '/pages/card/card' |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} else { |
|||
uni.switchTab({ |
|||
// url: '/pages/home/pickUpCard', |
|||
// url: '/pages/home/myHome', |
|||
url: '/pages/card/card', |
|||
}) |
|||
} |
|||
|
|||
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> |
@ -0,0 +1,17 @@ |
|||
<template> |
|||
<view style="height: 100%;width: 100%;display: flex;flex-direction: column;background: #fff;"> |
|||
<text style="margin: 20px;color: #919191;">对不起,由于系统更新服务暂停,预计24小时内新版上线。</text> |
|||
<image src="https://supervise.yxtsoft.com/lpk/image/systemMaintenance.jpg" mode="scaleToFill" style="width: 100%;"> |
|||
|
|||
</image> |
|||
|
|||
|
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|||
<z-paging ref="paging" v-model="data" @query="queryList" :auto='true'> |
|||
|
|||
<view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-top: 15px;margin-left: 10px;margin-right: 10px;"> |
|||
<!-- <view |
|||
style="display: flex;flex-direction: column;border: 1px solid #e29a68;width: 100%;border-radius: 20rpx;margin-top: 8px;" |
|||
@click="detail(item.orderSid)"> |
|||
|
|||
<view class="use"> |
|||
<image style="width: 70rpx;height: 70rpx;position: absolute;right: 40px;" |
|||
src="../../static/card_line.png"></image> |
|||
<image src="../../static/gift.png" style="width: 30px;height: 30px;padding-left: 6px;"></image> |
|||
<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;"> |
|||
<view style="font-size: 14px;padding: 2px;padding-left: 5px;padding-top: 7px;">{{item.code}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view |
|||
style="flex-shrink: 0;padding: 9px;font-size: 13px;z-index: 1;font-weight: 600;">{{item.reserveDate}} |
|||
</view> |
|||
</view> |
|||
<view |
|||
style="display: flex;flex-direction: column; padding: 10px;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;background-color: #fdf0ee;"> |
|||
|
|||
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;"> |
|||
<text>礼包类型:</text> |
|||
<text>{{item.bagName}}</text> |
|||
</view> |
|||
<view style="width: 100%;display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text>提货门店:</text> |
|||
<text>{{item.store}}</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> --> |
|||
|
|||
<view class="item" :class="{ item2: item.state=='已提货' }" |
|||
style="display: flex;flex-direction: row;padding: 15px 5px;" |
|||
> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill" v-show="item.state=='未提货'" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill" v-show="item.state=='已提货'" |
|||
style="width: 50px;height: 50px;margin-right: 10px;" /> |
|||
|
|||
<view style=" display: flex;flex-direction: column;"> |
|||
|
|||
<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text> |
|||
|
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">卡    号:</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.serialNumber}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货门店:</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.store}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提货日期:</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">提 货 人:</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userName}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">联系电话:</text> |
|||
<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #333; font-size: 14px;">状    态:</text> |
|||
<text style="font-size: 14px;" |
|||
:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text> |
|||
</view> |
|||
<view style=" display: flex;flex-direction: row;align-items: center;margin-top: 5px;"> |
|||
<text style="color: #999; font-size: 12px;">- {{item.goods}}</text> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
</z-paging> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
data: [] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
uni.$on("order", (e) => { |
|||
// 相当与下拉刷新 |
|||
this.$refs.paging.reload(true); |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 分页的请求 |
|||
queryList(pageNo, pageSize) { |
|||
let _this = this |
|||
_this.$api.orderListByUserSid({ |
|||
"current": pageNo, |
|||
"size": pageSize, |
|||
"params": { |
|||
"userSid": getApp().globalData.sid |
|||
} |
|||
}).then((resp) => { |
|||
// 添加数据源 |
|||
this.$refs.paging.complete(resp.records) |
|||
}).catch(e => { |
|||
// 出错了,点击重试 |
|||
_this.$refs.paging.complete(false); |
|||
}) |
|||
}, |
|||
detail(sid) { |
|||
uni.navigateTo({ |
|||
url: '/pages/card/card_record_detail?sid=' + sid |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.item{ |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.item2{ |
|||
/* 加载背景图 */ |
|||
background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item2.png); |
|||
/* 让背景图基于容器大小伸缩 */ |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
|
|||
</style> |
@ -0,0 +1,282 @@ |
|||
<template> |
|||
<view |
|||
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);"> |
|||
<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 --> |
|||
<z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='false'> |
|||
|
|||
<view v-for="(item,index) in data" @click="detail(item.sid)" |
|||
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> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
styleObject: { |
|||
'padding-top': '10px', |
|||
'border-top-left-radius': '25px', |
|||
'border-top-right-radius': '25px', |
|||
'border-bottom-left-radius': '25px', |
|||
'border-bottom-right-radius': '25px', |
|||
'background': '#fff', |
|||
}, |
|||
data: [] |
|||
} |
|||
}, |
|||
|
|||
onShow() { |
|||
this.$refs.paging.reload(true); |
|||
}, |
|||
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> |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 6.7 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 621 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,59 @@ |
|||
<template> |
|||
|
|||
|
|||
<view> |
|||
<view v-if="state === 0"> |
|||
<uni-load-more status="loading"></uni-load-more> |
|||
</view> |
|||
<!-- 错误 --> |
|||
<z-paging-empty-view v-if="state === 1" emptyViewText="很抱歉,加载失败" :showEmptyViewReload="true" |
|||
:emptyViewImg="errorImg" @reload="reload"> |
|||
</z-paging-empty-view> |
|||
<view v-if="state != 0 && state != 1"> |
|||
<slot></slot> |
|||
</view> |
|||
|
|||
<!-- 无数据 --> |
|||
<uni-load-more v-if="state === 100" status="noMore" :content-text="contentText"></uni-load-more> |
|||
|
|||
</view> |
|||
</template> |
|||
<script> |
|||
import zStatic from '../../../z-paging/components/z-paging/js/z-paging-static.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
state: 0, |
|||
contentText: { |
|||
contentdown: "上拉显示更多", |
|||
contentrefresh: "正在加载...", |
|||
contentnomore: "无数据" |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
errorImg() { |
|||
return zStatic.base64Error |
|||
}, |
|||
notDataImg() { |
|||
return zStatic.base64Empty |
|||
} |
|||
}, |
|||
methods: { |
|||
setLoadState(state) { |
|||
this.state = state |
|||
}, |
|||
getLoadState() { |
|||
return this.state |
|||
}, |
|||
reload() { |
|||
this.request() |
|||
}, |
|||
request() { |
|||
this.$emit('request'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
</style> |
@ -0,0 +1,81 @@ |
|||
{ |
|||
"id": "loading-state", |
|||
"displayName": "loading-state", |
|||
"version": "1.0.0", |
|||
"description": "loading-state", |
|||
"keywords": [ |
|||
"loading-state" |
|||
], |
|||
"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" |
|||
}, |
|||
"client": { |
|||
"Vue": { |
|||
"vue2": "u", |
|||
"vue3": "u" |
|||
}, |
|||
"App": { |
|||
"app-vue": "u", |
|||
"app-nvue": "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 @@ |
|||
# loading-state |
@ -0,0 +1,320 @@ |
|||
## 2.5.0-20230101(2023-01-01) |
|||
- 秋云图表组件 修改条件编译顺序,确保uniapp的cli方式的项目依赖不完整时可以正常显示 |
|||
- 秋云图表组件 恢复props属性directory的使用,以修复vue3项目中,开启echarts后,echarts目录识别错误的bug |
|||
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug |
|||
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug |
|||
- uCharts.js 修复x轴使用labelCount时,并且boundaryGap = 'justify' 并且关闭Y轴显示的时候,最后一个坐标值不显示的bug |
|||
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug |
|||
- uCharts.js 修复玫瑰图半径显示不正确的bug |
|||
- uCharts.js 柱状图、山峰图增加正负图功能,y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定,后续版本优化自动显示0轴 |
|||
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition,数据标签位置,有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部 |
|||
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow,否显示各项标识文案是,默认true |
|||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding,提示窗边框填充距离,默认3px |
|||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize,提示窗字体大小配置,默认13px |
|||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight,提示窗文字行高,默认20px |
|||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow,是否显示左侧图例,默认true |
|||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape,图例形状,图例标识样式,有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line- |
|||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize,字体大小配置,默认13px |
|||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding,标签边框内填充距离,默认6px |
|||
- uCharts.js 折线图line增加 opts.extra.line.linearType,渐变色类型,可选值 none关闭渐变色,custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值 |
|||
- uCharts.js 折线图line增加 serie.linearColor,渐变色数组,格式为2维数组[起始位置,颜色值],例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']] |
|||
- uCharts.js 折线图line增加 opts.extra.line.onShadow,是否开启折线阴影,开启后请赋值serie.setShadow阴影设置 |
|||
- uCharts.js 折线图line增加 serie.setShadow,阴影配置,格式为4位数组:[offsetX,offsetY,blur,color] |
|||
- uCharts.js 折线图line增加 opts.extra.line.animation,动画效果方向,可选值为vertical 垂直动画效果,horizontal 水平动画效果 |
|||
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight,X轴字体行高,默认20px |
|||
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop,X轴文字距离轴线的距离,默认0px |
|||
- uCharts.js X轴xAxis增加 opts.xAxis.title,当前X轴标题 |
|||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize,标题字体大小,默认13px |
|||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY,标题纵向偏移距离,负数为向上偏移,正数向下偏移 |
|||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX,标题横向偏移距离,负数为向左偏移,正数向右偏移 |
|||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor,标题字体颜色,默认#666666 |
|||
|
|||
## 报错TypeError: Cannot read properties of undefined (reading 'length') |
|||
- 如果是uni-modules版本组件,请先登录HBuilderX账号; |
|||
- 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行; |
|||
- 如果是cli项目请使用码云上的非uniCloud版本组件; |
|||
- 或者添加uniCloud的依赖; |
|||
- 或者使用原生uCharts; |
|||
## 2.4.5-20221130(2022-11-30) |
|||
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画 |
|||
- uCharts.js 折线图修复特殊情况下只有单点数据,并改变线宽后点变为圆形的bug |
|||
- uCharts.js 修复Y轴disabled启用后无效并报错的bug |
|||
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug |
|||
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径 |
|||
- uCharts.js 折线图、区域图增加tooltip指示点,opts.extra.line.activeType/opts.extra.area.activeType,可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式 |
|||
## 2.4.4-20221102(2022-11-02) |
|||
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40) |
|||
- 秋云图表组件 修复使用echarts时,初始化时宽高不正确的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42) |
|||
- 秋云图表组件 修复uniapp的h5使用history模式时,无法加载echarts的bug |
|||
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出,方便一些特殊需求的交互获取数据。 |
|||
|
|||
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43) |
|||
- uCharts.js 地图新增参数opts.series[i].fillOpacity,以透明度方式来设置颜色过度效果,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38) |
|||
- uCharts.js 地图新增参数opts.extra.map.active,是否启用点击激活变色 |
|||
- uCharts.js 地图新增参数opts.extra.map.activeTextColor,是否启用点击激活变色 |
|||
- uCharts.js 地图新增渲染完成事件renderComplete |
|||
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug |
|||
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案 |
|||
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小,默认opts.fontSize |
|||
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色,默认#FFFFFF |
|||
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度,默认0 |
|||
- uCharts.js 进度条新增参数opts.extra.arcbar.direction,动画方向,可选值为cw顺时针、ccw逆时针 |
|||
- uCharts.js 混合图新增参数opts.extra.mix.line.width,折线的宽度,默认2 |
|||
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时,图表显示错位的bug |
|||
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画 |
|||
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑 |
|||
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题 |
|||
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug |
|||
|
|||
## 报错TypeError: Cannot read properties of undefined (reading 'length') |
|||
1. 如果是uni-modules版本组件,请先登录HBuilderX账号; |
|||
2. 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行; |
|||
3. 如果是cli项目请使用码云上的非uniCloud版本组件; |
|||
4. 或者添加uniCloud的依赖; |
|||
5. 或者使用原生uCharts; |
|||
## 2.4.3-20220505(2022-05-05) |
|||
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时,再次赋值后画布闪动的bug |
|||
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval,数据点位网格抽希,默认1 |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel, 是否显示刻度点值,默认false |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix,刻度点值小数位数,默认0 |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow,是否显示末端刻度圆点,默认false |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius,刻度圆点的半径,默认3 |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor,刻度圆点的颜色,默认#cccccc |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.linearType,渐变色类型,可选值"none"关闭渐变,"custom"开启渐变 |
|||
- uCharts.js 雷达图新增参数opts.extra.radar.customColor,自定义渐变颜色,数组类型对应series的数组长度以匹配不同series颜色的不同配色方案,例如["#FA7D8D", "#EB88E2"] |
|||
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性 |
|||
- uCharts.js 柱状图中温度计式图标,优化支持全圆角类型,修复边框有缝隙的bug,详见官网【演示】中的温度计图表 |
|||
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth,当前点击柱状图的背景宽度,默认一个单元格单位 |
|||
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色 |
|||
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度,默认0.2 |
|||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelText,自定义标签文字,避免formatter格式化的繁琐,详见官网【演示】中的饼图 |
|||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelShow,自定义是否显示某一个指示标签,避免因饼图类别太多导致标签重复或者居多导致图形变形的问题,详见官网【演示】中的饼图 |
|||
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText(与series.name同级)自定义图例显示文字的方法 |
|||
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参,统一为fromatter:function(value,index,opts){} |
|||
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug |
|||
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug |
|||
- 【官网模板】增加外部自定义图例与图表交互的例子,[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2) |
|||
|
|||
## 注意:非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下,请到码云更新非 unimodules 版本组件,[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6) |
|||
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0" |
|||
## 2.4.2-20220421(2022-04-21) |
|||
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题 |
|||
## 2.4.2-20220420(2022-04-20) |
|||
## 重要!此版本uCharts新增了很多功能,修复了诸多已知问题 |
|||
- 秋云图表组件 新增onzoom开启双指缩放功能(仅uCharts),前提需要直角坐标系类图表类型,并且ontouch为true、opts.enableScroll为true,详见实例项目K线图 |
|||
- 秋云图表组件 新增optsWatch是否监听opts变化,关闭optsWatch后,动态修改opts不会触发图表重绘 |
|||
- 秋云图表组件 修复开启canvas2d功能后,动态更新数据后画布闪动的bug |
|||
- 秋云图表组件 去除directory属性,改为自动获取echarts.min.js路径(升级不受影响) |
|||
- 秋云图表组件 增加getImage()方法及@getImage事件,通过ref调用getImage()方法获,触发@getImage事件获取当前画布的base64图片文件流。 |
|||
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。 |
|||
- 秋云图表组件 新增加【非uniCloud】版本组件,避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题,请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6),或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。 |
|||
- uCharts.js 新增dobuleZoom双指缩放功能 |
|||
- uCharts.js 新增山峰图type="mount",数据格式为饼图类格式,不需要传入categories,具体详见新版官网在线演示 |
|||
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug |
|||
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug |
|||
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts),方便格式化时有更多参数可用 |
|||
- uCharts.js 标记线功能增加labelText自定义显示文字,增加labelAlign标签显示位置(左侧或右侧),增加标签显示位置微调labelOffsetX、labelOffsetY |
|||
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug |
|||
- uCharts.js 修复X轴开启disabled后,X轴仍占用空间的bug |
|||
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后,X轴文字与滚动条重叠的bug |
|||
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度,取值范围(-90至90) |
|||
- uCharts.js 修复地图文字标签层级显示不正确的bug |
|||
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug |
|||
- uCharts.js 修复当opts.padding上边距为0时,Y轴顶部刻度标签位置不正确的bug |
|||
|
|||
## 另外我们还开发了各大原生小程序组件,已发布至码云和npm |
|||
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts) |
|||
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun) |
|||
|
|||
## 对于原生uCharts文档我们已上线新版官方网站,详情点击下面链接进入官网 |
|||
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/) |
|||
## 2.3.7-20220122(2022-01-22) |
|||
## 重要!使用vue3编译,请使用cli模式并升级至最新依赖,HbuilderX编译需要使用3.3.8以上版本 |
|||
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。 |
|||
## 2.3.7-20220118(2022-01-18) |
|||
## 注意,使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder! |
|||
## 2.3.67-20220118(2022-01-18) |
|||
- 秋云图表组件 组件初步支持vue3,全端编译会有些问题,具体详见下面修改: |
|||
1. 小程序端运行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts,将.uCharts去掉。 |
|||
2. 小程序端发行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts,将.uCharts去掉,变为 new e。 |
|||
3. 如果觉得上述步骤比较麻烦,如果您的项目只编译到小程序端,可以修改u-charts.js最后一行导出方式,将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后,H5和App端的renderjs会有问题,请开发者自行选择。(此问题非组件问题,请等待DC官方修复Vue3的小程序端) |
|||
## 2.3.6-20220111(2022-01-11) |
|||
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0) |
|||
## 2.3.6-20211201(2021-12-01) |
|||
- uCharts.js 修复bar条状图开启圆角模式时,值很小时圆角渲染错误的bug |
|||
## 2.3.5-20211014(2021-10-15) |
|||
- uCharts.js 增加vue3的编译支持(仅原生uCharts,qiun-data-charts组件后续会支持,请关注更新) |
|||
## 2.3.4-20211012(2021-10-12) |
|||
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug |
|||
## 2.3.3-20210706(2021-07-06) |
|||
- uCharts.js 增加雷达图开启数据点值(opts.dataLabel)的显示 |
|||
## 2.3.2-20210627(2021-06-27) |
|||
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug |
|||
## 2.3.1-20210616(2021-06-16) |
|||
- uCharts.js 修复圆角柱状图使用4角圆角时,当数值过大时不正确的bug |
|||
## 2.3.0-20210612(2021-06-12) |
|||
- uCharts.js 【重要】uCharts增加nvue兼容,可在nvue项目中使用gcanvas组件渲染uCharts,[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts) |
|||
- 秋云图表组件 增加tapLegend属性,是否开启图例点击交互事件 |
|||
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数,以便在页面中调用参数 |
|||
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法,详见showOptsTooltip方法 |
|||
## 2.2.1-20210603(2021-06-03) |
|||
- uCharts.js 修复饼图、圆环图、玫瑰图,当起始角度不为0时,tooltip位置不准确的bug |
|||
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置 |
|||
## 2.2.0-20210529(2021-05-29) |
|||
- uCharts.js 增加条状图type="bar" |
|||
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo |
|||
## 2.1.7-20210524(2021-05-24) |
|||
- uCharts.js 修复大数据量模式下曲线图不平滑的bug |
|||
## 2.1.6-20210523(2021-05-23) |
|||
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug |
|||
## 2.1.5-2021051702(2021-05-17) |
|||
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug |
|||
## 2.1.5-20210517(2021-05-17) |
|||
- uCharts.js 修复Y轴自定义min和max时,未按指定的最大值最小值显示坐标轴刻度的bug |
|||
## 2.1.4-20210516(2021-05-16) |
|||
- 秋云图表组件 优化onWindowResize防抖方法 |
|||
- 秋云图表组件 修复APP端uCharts更新数据时,清空series显示loading图标后再显示图表,图表抖动的bug |
|||
- uCharts.js 修复开启canvas2d后,x轴、y轴、series自定义字体大小未按比例缩放的bug |
|||
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表 |
|||
## 2.1.3-20210513(2021-05-13) |
|||
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法,支持带滚动条的数据动态打点 |
|||
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言,如尘般染指流年づ |
|||
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时,原数据闪现的bug |
|||
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法 |
|||
- uCharts.js 增加tooltip显示category(x轴对应点位)标题的功能,opts.extra.tooltip.showCategory,默认为false |
|||
- uCharts.js 修复mix混合图只有柱状图时,tooltip的分割线显示位置不正确的bug |
|||
- uCharts.js 修复开启滚动条,图表在拖动中动态打点,滚动条位置不正确的bug |
|||
- uCharts.js 修复饼图类数据格式为echarts数据格式,series为空数组报错的bug |
|||
- 示例项目 修改uCharts.js更新到v2.1.2版本后,@getIndex方法获取索引值变更为e.currentIndex.index |
|||
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新(数据动态打点)的demo |
|||
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo |
|||
## 2.1.2-20210509(2021-05-09) |
|||
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug |
|||
## 2.1.1-20210509(2021-05-09) |
|||
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行,支持在config-echarts.js配置文件内写function配置。 |
|||
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。 |
|||
- 秋云图表组件 修复APP端报错Error: Not Found:Page[6][-1,27] at view.umd.min.js:1的bug。 |
|||
## 2.1.0-20210507(2021-05-07) |
|||
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug |
|||
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug |
|||
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug |
|||
## 2.1.0-20210506(2021-05-06) |
|||
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug |
|||
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用,无法显示图表的bug |
|||
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图(type="tline")、时间轴区域图(type="tarea")、散点图(type="scatter")、气泡图demo(type="bubble")、倒三角形漏斗图(opts.extra.funnel.type="triangle")、金字塔形漏斗图(opts.extra.funnel.type="pyramid") |
|||
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例 |
|||
- uCharts.js 升级至v2.1.0版本 |
|||
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug |
|||
- uCharts.js 修复 玫瑰图点击图例,只剩一个类别显示空白的bug |
|||
- uCharts.js 修复 饼图类图点击图例,其他图表tooltip位置某些情况下不准的bug |
|||
- uCharts.js 修复 x轴为矢量轴(时间轴)情况下,点击tooltip位置不正确的bug |
|||
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug |
|||
- uCharts.js 增加 直角坐标系图表X轴format格式化方法(原生uCharts.js用法请使用formatter) |
|||
- uCharts.js 增加 漏斗图扩展配置,倒三角形(opts.extra.funnel.type="triangle"),金字塔形(opts.extra.funnel.type="pyramid") |
|||
- uCharts.js 增加 散点图(opts.type="scatter")、气泡图(opts.type="bubble") |
|||
- 后期计划 完善散点图、气泡图,增加markPoints标记点,增加横向条状图。 |
|||
## 2.0.0-20210502(2021-05-02) |
|||
- uCharts.js 修复词云图获取点击索引不正确的bug |
|||
## 2.0.0-20210501(2021-05-01) |
|||
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下,v-for循环使用图表,显示不正确的bug |
|||
## 2.0.0-20210426(2021-04-26) |
|||
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug |
|||
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug |
|||
- uCharts.js 增加 extra.column.categoryGap 参数,柱状图类每个category点位(X轴点)柱子组之间的间距 |
|||
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数,标题纵向偏移距离,负数为向上偏移,正数向下偏移 |
|||
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数,标题横向偏移距离,负数为向左偏移,正数向右偏移 |
|||
- uCharts.js 增加 extra.gauge.labelOffset 参数,仪表盘标签文字径向便宜距离,默认13px |
|||
## 2.0.0-20210422-2(2021-04-22) |
|||
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug |
|||
## 2.0.0-20210422(2021-04-22) |
|||
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug |
|||
## 2.0.0-20210421(2021-04-21) |
|||
- uCharts.js 修复多行图例的情况下,图例在上方或者下方时,图例float为左侧或者右侧时,第二行及以后的图例对齐方式不正确的bug |
|||
## 2.0.0-20210420(2021-04-20) |
|||
- 秋云图表组件 修复微信小程序开启canvas2d模式后,windows版微信小程序不支持canvas2d模式的bug |
|||
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件 |
|||
## 2.0.0-20210419(2021-04-19) |
|||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。 |
|||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑; |
|||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。 |
|||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。 |
|||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn) |
|||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font> |
|||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn) |
|||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) |
|||
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug |
|||
- uCharts.js 修复多Y轴单独设置fontSize时,开启canvas2d后,未对应放大字体的bug |
|||
## 2.0.0-20210418(2021-04-18) |
|||
- 秋云图表组件 增加directory配置,修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug |
|||
## 2.0.0-20210416(2021-04-16) |
|||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。 |
|||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑; |
|||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。 |
|||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。 |
|||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn) |
|||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font> |
|||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn) |
|||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) |
|||
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员 |
|||
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员 |
|||
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug |
|||
## 2.0.0-20210415(2021-04-15) |
|||
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug |
|||
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug |
|||
## 2.0.0-20210414(2021-04-14) |
|||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。 |
|||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑; |
|||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。 |
|||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。 |
|||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn) |
|||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font> |
|||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn) |
|||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) |
|||
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug |
|||
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue) |
|||
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor |
|||
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug |
|||
## 2.0.0-20210413(2021-04-13) |
|||
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug |
|||
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug |
|||
- 秋云图表组件 修改ontouch时,@getTouchStart@getTouchMove@getTouchEnd的触发条件 |
|||
- uCharts.js 修复饼图类数据格式series属性不生效的bug |
|||
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue |
|||
## 2.0.0-20210412-2(2021-04-12) |
|||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。 |
|||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX。如仍不好用,请重启电脑,此问题已于DCloud官方确认,HBuilderX下个版本会修复。 |
|||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn) |
|||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) |
|||
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug |
|||
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图(条状图)的示例 |
|||
## 2.0.0-20210412(2021-04-12) |
|||
- 秋云图表组件 修复created中判断echarts导致APP端无法识别,改回mounted中判断echarts初始化 |
|||
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug |
|||
## 2.0.0-20210411(2021-04-11) |
|||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。 |
|||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,并清空小程序开发者工具缓存。 |
|||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn) |
|||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) |
|||
- uCharts.js 折线图区域图增加connectNulls断点续连的功能,详见示例项目中ucharts.vue |
|||
- 秋云图表组件 变更初始化方法为created,变更type2d默认值为true,优化2d模式下组件初始化后dom获取不到的bug |
|||
- 秋云图表组件 修复左右布局时,右侧图表点击坐标错误的bug,修复tooltip柱状图自定义颜色显示object的bug |
|||
## 2.0.0-20210410(2021-04-10) |
|||
- 修复左右布局时,右侧图表点击坐标错误的bug,修复柱状图自定义颜色tooltip显示object的bug |
|||
- 增加标记线及柱状图自定义颜色的demo |
|||
## 2.0.0-20210409(2021-04-08) |
|||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn) |
|||
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) |
|||
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug,修复2d模式下饼图类activeRadius为按比例放大的bug |
|||
- 修复组件在支付宝小程序端点击位置不准确的bug |
|||
## 2.0.0-20210408(2021-04-07) |
|||
- 修复组件在支付宝小程序端不能显示的bug(目前支付宝小程不能点击交互,后续修复) |
|||
- uCharts.js 修复高分屏下柱状图类,圆弧进度条 自定义宽度不能按比例放大的bug |
|||
## 2.0.0-20210407(2021-04-06) |
|||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn) |
|||
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode` |
|||
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) |
|||
## 2.0.0-20210406(2021-04-05) |
|||
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页 |
|||
## 2.0.0(2021-04-05) |
|||
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页 |
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<view class="container loading1"> |
|||
<view class="shape shape1"></view> |
|||
<view class="shape shape2"></view> |
|||
<view class="shape shape3"></view> |
|||
<view class="shape shape4"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'loading1', |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped="true"> |
|||
.container { |
|||
width: 30px; |
|||
height: 30px; |
|||
position: relative; |
|||
} |
|||
.container.loading1 { |
|||
-webkit-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
.container .shape { |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 1px; |
|||
} |
|||
.container .shape.shape1 { |
|||
left: 0; |
|||
background-color: #1890FF; |
|||
} |
|||
.container .shape.shape2 { |
|||
right: 0; |
|||
background-color: #91CB74; |
|||
} |
|||
.container .shape.shape3 { |
|||
bottom: 0; |
|||
background-color: #FAC858; |
|||
} |
|||
.container .shape.shape4 { |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: #EE6666; |
|||
} |
|||
|
|||
.loading1 .shape1 { |
|||
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate; |
|||
animation: animation1shape1 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation1shape1 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(16px, 16px); |
|||
transform: translate(16px, 16px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation1shape1 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(16px, 16px); |
|||
transform: translate(16px, 16px); |
|||
} |
|||
} |
|||
.loading1 .shape2 { |
|||
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate; |
|||
animation: animation1shape2 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation1shape2 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-16px, 16px); |
|||
transform: translate(-16px, 16px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation1shape2 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-16px, 16px); |
|||
transform: translate(-16px, 16px); |
|||
} |
|||
} |
|||
.loading1 .shape3 { |
|||
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate; |
|||
animation: animation1shape3 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation1shape3 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(16px, -16px); |
|||
transform: translate(16px, -16px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation1shape3 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(16px, -16px); |
|||
transform: translate(16px, -16px); |
|||
} |
|||
} |
|||
.loading1 .shape4 { |
|||
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate; |
|||
animation: animation1shape4 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation1shape4 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-16px, -16px); |
|||
transform: translate(-16px, -16px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation1shape4 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-16px, -16px); |
|||
transform: translate(-16px, -16px); |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<view class="container loading2"> |
|||
<view class="shape shape1"></view> |
|||
<view class="shape shape2"></view> |
|||
<view class="shape shape3"></view> |
|||
<view class="shape shape4"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'loading2', |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped="true"> |
|||
.container { |
|||
width: 30px; |
|||
height: 30px; |
|||
position: relative; |
|||
} |
|||
|
|||
.container.loading2 { |
|||
-webkit-transform: rotate(10deg); |
|||
transform: rotate(10deg); |
|||
} |
|||
.container.loading2 .shape { |
|||
border-radius: 5px; |
|||
} |
|||
.container.loading2{ |
|||
-webkit-animation: rotation 1s infinite; |
|||
animation: rotation 1s infinite; |
|||
} |
|||
|
|||
.container .shape { |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 1px; |
|||
} |
|||
.container .shape.shape1 { |
|||
left: 0; |
|||
background-color: #1890FF; |
|||
} |
|||
.container .shape.shape2 { |
|||
right: 0; |
|||
background-color: #91CB74; |
|||
} |
|||
.container .shape.shape3 { |
|||
bottom: 0; |
|||
background-color: #FAC858; |
|||
} |
|||
.container .shape.shape4 { |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: #EE6666; |
|||
} |
|||
|
|||
|
|||
.loading2 .shape1 { |
|||
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate; |
|||
animation: animation2shape1 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation2shape1 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(20px, 20px); |
|||
transform: translate(20px, 20px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation2shape1 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(20px, 20px); |
|||
transform: translate(20px, 20px); |
|||
} |
|||
} |
|||
.loading2 .shape2 { |
|||
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate; |
|||
animation: animation2shape2 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation2shape2 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-20px, 20px); |
|||
transform: translate(-20px, 20px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation2shape2 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-20px, 20px); |
|||
transform: translate(-20px, 20px); |
|||
} |
|||
} |
|||
.loading2 .shape3 { |
|||
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate; |
|||
animation: animation2shape3 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation2shape3 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(20px, -20px); |
|||
transform: translate(20px, -20px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation2shape3 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(20px, -20px); |
|||
transform: translate(20px, -20px); |
|||
} |
|||
} |
|||
.loading2 .shape4 { |
|||
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate; |
|||
animation: animation2shape4 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation2shape4 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-20px, -20px); |
|||
transform: translate(-20px, -20px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation2shape4 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-20px, -20px); |
|||
transform: translate(-20px, -20px); |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,173 @@ |
|||
<template> |
|||
<view class="container loading3"> |
|||
<view class="shape shape1"></view> |
|||
<view class="shape shape2"></view> |
|||
<view class="shape shape3"></view> |
|||
<view class="shape shape4"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'loading3', |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped="true"> |
|||
.container { |
|||
width: 30px; |
|||
height: 30px; |
|||
position: relative; |
|||
} |
|||
|
|||
.container.loading3 { |
|||
-webkit-animation: rotation 1s infinite; |
|||
animation: rotation 1s infinite; |
|||
} |
|||
.container.loading3 .shape1 { |
|||
border-top-left-radius: 10px; |
|||
} |
|||
.container.loading3 .shape2 { |
|||
border-top-right-radius: 10px; |
|||
} |
|||
.container.loading3 .shape3 { |
|||
border-bottom-left-radius: 10px; |
|||
} |
|||
.container.loading3 .shape4 { |
|||
border-bottom-right-radius: 10px; |
|||
} |
|||
|
|||
.container .shape { |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 1px; |
|||
} |
|||
.container .shape.shape1 { |
|||
left: 0; |
|||
background-color: #1890FF; |
|||
} |
|||
.container .shape.shape2 { |
|||
right: 0; |
|||
background-color: #91CB74; |
|||
} |
|||
.container .shape.shape3 { |
|||
bottom: 0; |
|||
background-color: #FAC858; |
|||
} |
|||
.container .shape.shape4 { |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: #EE6666; |
|||
} |
|||
|
|||
.loading3 .shape1 { |
|||
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate; |
|||
animation: animation3shape1 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation3shape1 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(5px, 5px); |
|||
transform: translate(5px, 5px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation3shape1 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(5px, 5px); |
|||
transform: translate(5px, 5px); |
|||
} |
|||
} |
|||
.loading3 .shape2 { |
|||
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate; |
|||
animation: animation3shape2 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation3shape2 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-5px, 5px); |
|||
transform: translate(-5px, 5px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation3shape2 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-5px, 5px); |
|||
transform: translate(-5px, 5px); |
|||
} |
|||
} |
|||
.loading3 .shape3 { |
|||
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate; |
|||
animation: animation3shape3 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation3shape3 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(5px, -5px); |
|||
transform: translate(5px, -5px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation3shape3 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(5px, -5px); |
|||
transform: translate(5px, -5px); |
|||
} |
|||
} |
|||
.loading3 .shape4 { |
|||
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate; |
|||
animation: animation3shape4 0.5s ease 0s infinite alternate; |
|||
} |
|||
|
|||
@-webkit-keyframes animation3shape4 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-5px, -5px); |
|||
transform: translate(-5px, -5px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation3shape4 { |
|||
from { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
to { |
|||
-webkit-transform: translate(-5px, -5px); |
|||
transform: translate(-5px, -5px); |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<view class="container loading5"> |
|||
<view class="shape shape1"></view> |
|||
<view class="shape shape2"></view> |
|||
<view class="shape shape3"></view> |
|||
<view class="shape shape4"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'loading5', |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped="true"> |
|||
.container { |
|||
width: 30px; |
|||
height: 30px; |
|||
position: relative; |
|||
} |
|||
|
|||
.container.loading5 .shape { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
|
|||
.container .shape { |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 1px; |
|||
} |
|||
.container .shape.shape1 { |
|||
left: 0; |
|||
background-color: #1890FF; |
|||
} |
|||
.container .shape.shape2 { |
|||
right: 0; |
|||
background-color: #91CB74; |
|||
} |
|||
.container .shape.shape3 { |
|||
bottom: 0; |
|||
background-color: #FAC858; |
|||
} |
|||
.container .shape.shape4 { |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: #EE6666; |
|||
} |
|||
|
|||
.loading5 .shape1 { |
|||
animation: animation5shape1 2s ease 0s infinite reverse; |
|||
} |
|||
|
|||
@-webkit-keyframes animation5shape1 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, 15px); |
|||
transform: translate(0, 15px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(15px, 15px); |
|||
transform: translate(15px, 15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(15px, 0); |
|||
transform: translate(15px, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation5shape1 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, 15px); |
|||
transform: translate(0, 15px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(15px, 15px); |
|||
transform: translate(15px, 15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(15px, 0); |
|||
transform: translate(15px, 0); |
|||
} |
|||
} |
|||
.loading5 .shape2 { |
|||
animation: animation5shape2 2s ease 0s infinite reverse; |
|||
} |
|||
|
|||
@-webkit-keyframes animation5shape2 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(-15px, 0); |
|||
transform: translate(-15px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-15px, 15px); |
|||
transform: translate(-15px, 15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, 15px); |
|||
transform: translate(0, 15px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation5shape2 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(-15px, 0); |
|||
transform: translate(-15px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-15px, 15px); |
|||
transform: translate(-15px, 15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, 15px); |
|||
transform: translate(0, 15px); |
|||
} |
|||
} |
|||
.loading5 .shape3 { |
|||
animation: animation5shape3 2s ease 0s infinite reverse; |
|||
} |
|||
|
|||
@-webkit-keyframes animation5shape3 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(15px, 0); |
|||
transform: translate(15px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(15px, -15px); |
|||
transform: translate(15px, -15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, -15px); |
|||
transform: translate(0, -15px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation5shape3 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(15px, 0); |
|||
transform: translate(15px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(15px, -15px); |
|||
transform: translate(15px, -15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, -15px); |
|||
transform: translate(0, -15px); |
|||
} |
|||
} |
|||
.loading5 .shape4 { |
|||
animation: animation5shape4 2s ease 0s infinite reverse; |
|||
} |
|||
|
|||
@-webkit-keyframes animation5shape4 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, -15px); |
|||
transform: translate(0, -15px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-15px, -15px); |
|||
transform: translate(-15px, -15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(-15px, 0); |
|||
transform: translate(-15px, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation5shape4 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, -15px); |
|||
transform: translate(0, -15px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-15px, -15px); |
|||
transform: translate(-15px, -15px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(-15px, 0); |
|||
transform: translate(-15px, 0); |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,229 @@ |
|||
<template> |
|||
<view class="container loading6"> |
|||
<view class="shape shape1"></view> |
|||
<view class="shape shape2"></view> |
|||
<view class="shape shape3"></view> |
|||
<view class="shape shape4"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'loading6', |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped="true"> |
|||
.container { |
|||
width: 30px; |
|||
height: 30px; |
|||
position: relative; |
|||
} |
|||
|
|||
.container.loading6 { |
|||
-webkit-animation: rotation 1s infinite; |
|||
animation: rotation 1s infinite; |
|||
} |
|||
.container.loading6 .shape { |
|||
width: 12px; |
|||
height: 12px; |
|||
border-radius: 2px; |
|||
} |
|||
.container .shape { |
|||
position: absolute; |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 1px; |
|||
} |
|||
.container .shape.shape1 { |
|||
left: 0; |
|||
background-color: #1890FF; |
|||
} |
|||
.container .shape.shape2 { |
|||
right: 0; |
|||
background-color: #91CB74; |
|||
} |
|||
.container .shape.shape3 { |
|||
bottom: 0; |
|||
background-color: #FAC858; |
|||
} |
|||
.container .shape.shape4 { |
|||
bottom: 0; |
|||
right: 0; |
|||
background-color: #EE6666; |
|||
} |
|||
|
|||
|
|||
.loading6 .shape1 { |
|||
-webkit-animation: animation6shape1 2s linear 0s infinite normal; |
|||
animation: animation6shape1 2s linear 0s infinite normal; |
|||
} |
|||
|
|||
@-webkit-keyframes animation6shape1 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, 18px); |
|||
transform: translate(0, 18px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(18px, 18px); |
|||
transform: translate(18px, 18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(18px, 0); |
|||
transform: translate(18px, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation6shape1 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, 18px); |
|||
transform: translate(0, 18px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(18px, 18px); |
|||
transform: translate(18px, 18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(18px, 0); |
|||
transform: translate(18px, 0); |
|||
} |
|||
} |
|||
.loading6 .shape2 { |
|||
-webkit-animation: animation6shape2 2s linear 0s infinite normal; |
|||
animation: animation6shape2 2s linear 0s infinite normal; |
|||
} |
|||
|
|||
@-webkit-keyframes animation6shape2 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(-18px, 0); |
|||
transform: translate(-18px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-18px, 18px); |
|||
transform: translate(-18px, 18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, 18px); |
|||
transform: translate(0, 18px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation6shape2 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(-18px, 0); |
|||
transform: translate(-18px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-18px, 18px); |
|||
transform: translate(-18px, 18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, 18px); |
|||
transform: translate(0, 18px); |
|||
} |
|||
} |
|||
.loading6 .shape3 { |
|||
-webkit-animation: animation6shape3 2s linear 0s infinite normal; |
|||
animation: animation6shape3 2s linear 0s infinite normal; |
|||
} |
|||
|
|||
@-webkit-keyframes animation6shape3 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(18px, 0); |
|||
transform: translate(18px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(18px, -18px); |
|||
transform: translate(18px, -18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, -18px); |
|||
transform: translate(0, -18px); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation6shape3 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(18px, 0); |
|||
transform: translate(18px, 0); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(18px, -18px); |
|||
transform: translate(18px, -18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(0, -18px); |
|||
transform: translate(0, -18px); |
|||
} |
|||
} |
|||
.loading6 .shape4 { |
|||
-webkit-animation: animation6shape4 2s linear 0s infinite normal; |
|||
animation: animation6shape4 2s linear 0s infinite normal; |
|||
} |
|||
|
|||
@-webkit-keyframes animation6shape4 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, -18px); |
|||
transform: translate(0, -18px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-18px, -18px); |
|||
transform: translate(-18px, -18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(-18px, 0); |
|||
transform: translate(-18px, 0); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation6shape4 { |
|||
0% { |
|||
-webkit-transform: translate(0, 0); |
|||
transform: translate(0, 0); |
|||
} |
|||
25% { |
|||
-webkit-transform: translate(0, -18px); |
|||
transform: translate(0, -18px); |
|||
} |
|||
50% { |
|||
-webkit-transform: translate(-18px, -18px); |
|||
transform: translate(-18px, -18px); |
|||
} |
|||
75% { |
|||
-webkit-transform: translate(-18px, 0); |
|||
transform: translate(-18px, 0); |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,36 @@ |
|||
<template> |
|||
<view> |
|||
<Loading1 v-if="loadingType==1"/> |
|||
<Loading2 v-if="loadingType==2"/> |
|||
<Loading3 v-if="loadingType==3"/> |
|||
<Loading4 v-if="loadingType==4"/> |
|||
<Loading5 v-if="loadingType==5"/> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import Loading1 from "./loading1.vue"; |
|||
import Loading2 from "./loading2.vue"; |
|||
import Loading3 from "./loading3.vue"; |
|||
import Loading4 from "./loading4.vue"; |
|||
import Loading5 from "./loading5.vue"; |
|||
export default { |
|||
components:{Loading1,Loading2,Loading3,Loading4,Loading5}, |
|||
name: 'qiun-loading', |
|||
props: { |
|||
loadingType: { |
|||
type: Number, |
|||
default: 2 |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
}; |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
@ -0,0 +1,422 @@ |
|||
/* |
|||
* uCharts® |
|||
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台 |
|||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
|||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
|||
* 复制使用请保留本段注释,感谢支持开源! |
|||
* |
|||
* uCharts®官方网站 |
|||
* https://www.uCharts.cn
|
|||
* |
|||
* 开源地址: |
|||
* https://gitee.com/uCharts/uCharts
|
|||
* |
|||
* uni-app插件市场地址: |
|||
* http://ext.dcloud.net.cn/plugin?id=271
|
|||
* |
|||
*/ |
|||
|
|||
// 通用配置项
|
|||
|
|||
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
|||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc']; |
|||
|
|||
const cfe = { |
|||
//demotype为自定义图表类型
|
|||
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"], |
|||
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
|
|||
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"], |
|||
//instance为实例变量承载属性,option为eopts承载属性,不要删除
|
|||
"instance": {}, |
|||
"option": {}, |
|||
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
|||
"formatter":{ |
|||
"tooltipDemo1":function(res){ |
|||
let result = '' |
|||
for (let i in res) { |
|||
if (i == 0) { |
|||
result += res[i].axisValueLabel + '年销售额' |
|||
} |
|||
let value = '--' |
|||
if (res[i].data !== null) { |
|||
value = res[i].data |
|||
} |
|||
// #ifdef H5
|
|||
result += '\n' + res[i].seriesName + ':' + value + ' 万元' |
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS
|
|||
result += '<br/>' + res[i].marker + res[i].seriesName + ':' + value + ' 万元' |
|||
// #endif
|
|||
} |
|||
return result; |
|||
}, |
|||
legendFormat:function(name){ |
|||
return "自定义图例+"+name; |
|||
}, |
|||
yAxisFormatDemo:function (value, index) { |
|||
return value + '元'; |
|||
}, |
|||
seriesFormatDemo:function(res){ |
|||
return res.name + '年' + res.value + '元'; |
|||
} |
|||
}, |
|||
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在eopts参数,会将demotype与eopts中option合并后渲染图表。
|
|||
"demotype":{ |
|||
"color": color, |
|||
//在这里填写echarts的option即可
|
|||
|
|||
}, |
|||
//下面是自定义配置,请添加项目所需的通用配置
|
|||
"column": { |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"tooltip": { |
|||
"trigger": 'axis' |
|||
}, |
|||
"grid": { |
|||
"top": 30, |
|||
"bottom": 50, |
|||
"right": 15, |
|||
"left": 40 |
|||
}, |
|||
"legend": { |
|||
"bottom": 'left', |
|||
}, |
|||
"toolbox": { |
|||
"show": false, |
|||
}, |
|||
"xAxis": { |
|||
"type": 'category', |
|||
"axisLabel": { |
|||
"color": '#666666' |
|||
}, |
|||
"axisLine": { |
|||
"lineStyle": { |
|||
"color": '#CCCCCC' |
|||
} |
|||
}, |
|||
"boundaryGap": true, |
|||
"data": [] |
|||
}, |
|||
"yAxis": { |
|||
"type": 'value', |
|||
"axisTick": { |
|||
"show": false, |
|||
}, |
|||
"axisLabel": { |
|||
"color": '#666666' |
|||
}, |
|||
"axisLine": { |
|||
"lineStyle": { |
|||
"color": '#CCCCCC' |
|||
} |
|||
}, |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'bar', |
|||
"data": [], |
|||
"barwidth": 20, |
|||
"label": { |
|||
"show": true, |
|||
"color": "#666666", |
|||
"position": 'top', |
|||
}, |
|||
}, |
|||
}, |
|||
"line": { |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"tooltip": { |
|||
"trigger": 'axis' |
|||
}, |
|||
"grid": { |
|||
"top": 30, |
|||
"bottom": 50, |
|||
"right": 15, |
|||
"left": 40 |
|||
}, |
|||
"legend": { |
|||
"bottom": 'left', |
|||
}, |
|||
"toolbox": { |
|||
"show": false, |
|||
}, |
|||
"xAxis": { |
|||
"type": 'category', |
|||
"axisLabel": { |
|||
"color": '#666666' |
|||
}, |
|||
"axisLine": { |
|||
"lineStyle": { |
|||
"color": '#CCCCCC' |
|||
} |
|||
}, |
|||
"boundaryGap": true, |
|||
"data": [] |
|||
}, |
|||
"yAxis": { |
|||
"type": 'value', |
|||
"axisTick": { |
|||
"show": false, |
|||
}, |
|||
"axisLabel": { |
|||
"color": '#666666' |
|||
}, |
|||
"axisLine": { |
|||
"lineStyle": { |
|||
"color": '#CCCCCC' |
|||
} |
|||
}, |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'line', |
|||
"data": [], |
|||
"barwidth": 20, |
|||
"label": { |
|||
"show": true, |
|||
"color": "#666666", |
|||
"position": 'top', |
|||
}, |
|||
}, |
|||
}, |
|||
"area": { |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"tooltip": { |
|||
"trigger": 'axis' |
|||
}, |
|||
"grid": { |
|||
"top": 30, |
|||
"bottom": 50, |
|||
"right": 15, |
|||
"left": 40 |
|||
}, |
|||
"legend": { |
|||
"bottom": 'left', |
|||
}, |
|||
"toolbox": { |
|||
"show": false, |
|||
}, |
|||
"xAxis": { |
|||
"type": 'category', |
|||
"axisLabel": { |
|||
"color": '#666666' |
|||
}, |
|||
"axisLine": { |
|||
"lineStyle": { |
|||
"color": '#CCCCCC' |
|||
} |
|||
}, |
|||
"boundaryGap": true, |
|||
"data": [] |
|||
}, |
|||
"yAxis": { |
|||
"type": 'value', |
|||
"axisTick": { |
|||
"show": false, |
|||
}, |
|||
"axisLabel": { |
|||
"color": '#666666' |
|||
}, |
|||
"axisLine": { |
|||
"lineStyle": { |
|||
"color": '#CCCCCC' |
|||
} |
|||
}, |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'line', |
|||
"data": [], |
|||
"areaStyle": {}, |
|||
"label": { |
|||
"show": true, |
|||
"color": "#666666", |
|||
"position": 'top', |
|||
}, |
|||
}, |
|||
}, |
|||
"pie": { |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"tooltip": { |
|||
"trigger": 'item' |
|||
}, |
|||
"grid": { |
|||
"top": 40, |
|||
"bottom": 30, |
|||
"right": 15, |
|||
"left": 15 |
|||
}, |
|||
"legend": { |
|||
"bottom": 'left', |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'pie', |
|||
"data": [], |
|||
"radius": '50%', |
|||
"label": { |
|||
"show": true, |
|||
"color": "#666666", |
|||
"position": 'top', |
|||
}, |
|||
}, |
|||
}, |
|||
"ring": { |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"tooltip": { |
|||
"trigger": 'item' |
|||
}, |
|||
"grid": { |
|||
"top": 40, |
|||
"bottom": 30, |
|||
"right": 15, |
|||
"left": 15 |
|||
}, |
|||
"legend": { |
|||
"bottom": 'left', |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'pie', |
|||
"data": [], |
|||
"radius": ['40%', '70%'], |
|||
"avoidLabelOverlap": false, |
|||
"label": { |
|||
"show": true, |
|||
"color": "#666666", |
|||
"position": 'top', |
|||
}, |
|||
"labelLine": { |
|||
"show": true |
|||
}, |
|||
}, |
|||
}, |
|||
"rose": { |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"tooltip": { |
|||
"trigger": 'item' |
|||
}, |
|||
"legend": { |
|||
"top": 'bottom' |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'pie', |
|||
"data": [], |
|||
"radius": "55%", |
|||
"center": ['50%', '50%'], |
|||
"roseType": 'area', |
|||
}, |
|||
}, |
|||
"funnel": { |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"tooltip": { |
|||
"trigger": 'item', |
|||
"formatter": "{b} : {c}%" |
|||
}, |
|||
"legend": { |
|||
"top": 'bottom' |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'funnel', |
|||
"left": '10%', |
|||
"top": 60, |
|||
"bottom": 60, |
|||
"width": '80%', |
|||
"min": 0, |
|||
"max": 100, |
|||
"minSize": '0%', |
|||
"maxSize": '100%', |
|||
"sort": 'descending', |
|||
"gap": 2, |
|||
"label": { |
|||
"show": true, |
|||
"position": 'inside' |
|||
}, |
|||
"labelLine": { |
|||
"length": 10, |
|||
"lineStyle": { |
|||
"width": 1, |
|||
"type": 'solid' |
|||
} |
|||
}, |
|||
"itemStyle": { |
|||
"bordercolor": '#fff', |
|||
"borderwidth": 1 |
|||
}, |
|||
"emphasis": { |
|||
"label": { |
|||
"fontSize": 20 |
|||
} |
|||
}, |
|||
"data": [], |
|||
}, |
|||
}, |
|||
"gauge": { |
|||
"color": color, |
|||
"tooltip": { |
|||
"formatter": '{a} <br/>{b} : {c}%' |
|||
}, |
|||
"seriesTemplate": { |
|||
"name": '业务指标', |
|||
"type": 'gauge', |
|||
"detail": {"formatter": '{value}%'}, |
|||
"data": [{"value": 50, "name": '完成率'}] |
|||
}, |
|||
}, |
|||
"candle": { |
|||
"xAxis": { |
|||
"data": [] |
|||
}, |
|||
"yAxis": {}, |
|||
"color": color, |
|||
"title": { |
|||
"text": '' |
|||
}, |
|||
"dataZoom": [{ |
|||
"type": 'inside', |
|||
"xAxisIndex": [0, 1], |
|||
"start": 10, |
|||
"end": 100 |
|||
}, |
|||
{ |
|||
"show": true, |
|||
"xAxisIndex": [0, 1], |
|||
"type": 'slider', |
|||
"bottom": 10, |
|||
"start": 10, |
|||
"end": 100 |
|||
} |
|||
], |
|||
"seriesTemplate": { |
|||
"name": '', |
|||
"type": 'k', |
|||
"data": [], |
|||
}, |
|||
} |
|||
} |
|||
|
|||
export default cfe; |
@ -0,0 +1,606 @@ |
|||
/* |
|||
* uCharts® |
|||
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台 |
|||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
|||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
|||
* 复制使用请保留本段注释,感谢支持开源! |
|||
* |
|||
* uCharts®官方网站 |
|||
* https://www.uCharts.cn
|
|||
* |
|||
* 开源地址: |
|||
* https://gitee.com/uCharts/uCharts
|
|||
* |
|||
* uni-app插件市场地址: |
|||
* http://ext.dcloud.net.cn/plugin?id=271
|
|||
* |
|||
*/ |
|||
|
|||
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
|||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc']; |
|||
|
|||
//事件转换函数,主要用作格式化x轴为时间轴,根据需求自行修改
|
|||
const formatDateTime = (timeStamp, returnType)=>{ |
|||
var date = new Date(); |
|||
date.setTime(timeStamp * 1000); |
|||
var y = date.getFullYear(); |
|||
var m = date.getMonth() + 1; |
|||
m = m < 10 ? ('0' + m) : m; |
|||
var d = date.getDate(); |
|||
d = d < 10 ? ('0' + d) : d; |
|||
var h = date.getHours(); |
|||
h = h < 10 ? ('0' + h) : h; |
|||
var minute = date.getMinutes(); |
|||
var second = date.getSeconds(); |
|||
minute = minute < 10 ? ('0' + minute) : minute; |
|||
second = second < 10 ? ('0' + second) : second; |
|||
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;} |
|||
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;} |
|||
if(returnType == 'h:m'){return h +':' + minute;} |
|||
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;} |
|||
return [y, m, d, h, minute, second]; |
|||
} |
|||
|
|||
const cfu = { |
|||
//demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
|
|||
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"], |
|||
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"], |
|||
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
|
|||
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
|
|||
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"], |
|||
//instance为实例变量承载属性,不要删除
|
|||
"instance":{}, |
|||
//option为opts及eopts承载属性,不要删除
|
|||
"option":{}, |
|||
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
|||
"formatter":{ |
|||
"yAxisDemo1":function(val, index, opts){return val+'元'}, |
|||
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)}, |
|||
"xAxisDemo1":function(val, index, opts){return val+'年';}, |
|||
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')}, |
|||
"seriesDemo1":function(val, index, series, opts){return val+'元'}, |
|||
"tooltipDemo1":function(item, category, index, opts){ |
|||
if(index==0){ |
|||
return '随便用'+item.data+'年' |
|||
}else{ |
|||
return '其他我没改'+item.data+'天' |
|||
} |
|||
}, |
|||
"pieDemo":function(val, index, series, opts){ |
|||
if(index !== undefined){ |
|||
return series[index].name+':'+series[index].data+'元' |
|||
} |
|||
}, |
|||
}, |
|||
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
|
|||
"demotype":{ |
|||
//我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
|
|||
"type": "line", |
|||
"color": color, |
|||
"padding": [15,10,0,15], |
|||
"xAxis": { |
|||
"disableGrid": true, |
|||
}, |
|||
"yAxis": { |
|||
"gridType": "dash", |
|||
"dashLength": 2, |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"line": { |
|||
"type": "curve", |
|||
"width": 2 |
|||
}, |
|||
} |
|||
}, |
|||
//下面是自定义配置,请添加项目所需的通用配置
|
|||
"pie":{ |
|||
"type": "pie", |
|||
"color": color, |
|||
"padding": [5,5,5,5], |
|||
"extra": { |
|||
"pie": { |
|||
"activeOpacity": 0.5, |
|||
"activeRadius": 10, |
|||
"offsetAngle": 0, |
|||
"labelWidth": 15, |
|||
"border": true, |
|||
"borderWidth": 3, |
|||
"borderColor": "#FFFFFF" |
|||
}, |
|||
} |
|||
}, |
|||
"ring":{ |
|||
"type": "ring", |
|||
"color": color, |
|||
"padding": [5,5,5,5], |
|||
"rotate": false, |
|||
"dataLabel": true, |
|||
"legend": { |
|||
"show": true, |
|||
"position": "right", |
|||
"lineHeight": 25, |
|||
}, |
|||
"title": { |
|||
"name": "收益率", |
|||
"fontSize": 15, |
|||
"color": "#666666" |
|||
}, |
|||
"subtitle": { |
|||
"name": "70%", |
|||
"fontSize": 25, |
|||
"color": "#7cb5ec" |
|||
}, |
|||
"extra": { |
|||
"ring": { |
|||
"ringWidth":30, |
|||
"activeOpacity": 0.5, |
|||
"activeRadius": 10, |
|||
"offsetAngle": 0, |
|||
"labelWidth": 15, |
|||
"border": true, |
|||
"borderWidth": 3, |
|||
"borderColor": "#FFFFFF" |
|||
}, |
|||
}, |
|||
}, |
|||
"rose":{ |
|||
"type": "rose", |
|||
"color": color, |
|||
"padding": [5,5,5,5], |
|||
"legend": { |
|||
"show": true, |
|||
"position": "left", |
|||
"lineHeight": 25, |
|||
}, |
|||
"extra": { |
|||
"rose": { |
|||
"type": "area", |
|||
"minRadius": 50, |
|||
"activeOpacity": 0.5, |
|||
"activeRadius": 10, |
|||
"offsetAngle": 0, |
|||
"labelWidth": 15, |
|||
"border": false, |
|||
"borderWidth": 2, |
|||
"borderColor": "#FFFFFF" |
|||
}, |
|||
} |
|||
}, |
|||
"word":{ |
|||
"type": "word", |
|||
"color": color, |
|||
"extra": { |
|||
"word": { |
|||
"type": "normal", |
|||
"autoColors": false |
|||
} |
|||
} |
|||
}, |
|||
"funnel":{ |
|||
"type": "funnel", |
|||
"color": color, |
|||
"padding": [15,15,0,15], |
|||
"extra": { |
|||
"funnel": { |
|||
"activeOpacity": 0.3, |
|||
"activeWidth": 10, |
|||
"border": true, |
|||
"borderWidth": 2, |
|||
"borderColor": "#FFFFFF", |
|||
"fillOpacity": 1, |
|||
"labelAlign": "right" |
|||
}, |
|||
} |
|||
}, |
|||
"map":{ |
|||
"type": "map", |
|||
"color": color, |
|||
"padding": [0,0,0,0], |
|||
"dataLabel": true, |
|||
"extra": { |
|||
"map": { |
|||
"border": true, |
|||
"borderWidth": 1, |
|||
"borderColor": "#666666", |
|||
"fillOpacity": 0.6, |
|||
"activeBorderColor": "#F04864", |
|||
"activeFillColor": "#FACC14", |
|||
"activeFillOpacity": 1 |
|||
}, |
|||
} |
|||
}, |
|||
"arcbar":{ |
|||
"type": "arcbar", |
|||
"color": color, |
|||
"title": { |
|||
"name": "百分比", |
|||
"fontSize": 25, |
|||
"color": "#00FF00" |
|||
}, |
|||
"subtitle": { |
|||
"name": "默认标题", |
|||
"fontSize": 15, |
|||
"color": "#666666" |
|||
}, |
|||
"extra": { |
|||
"arcbar": { |
|||
"type": "default", |
|||
"width": 12, |
|||
"backgroundColor": "#E9E9E9", |
|||
"startAngle": 0.75, |
|||
"endAngle": 0.25, |
|||
"gap": 2 |
|||
} |
|||
} |
|||
}, |
|||
"line":{ |
|||
"type": "line", |
|||
"color": color, |
|||
"padding": [15,10,0,15], |
|||
"xAxis": { |
|||
"disableGrid": true, |
|||
}, |
|||
"yAxis": { |
|||
"gridType": "dash", |
|||
"dashLength": 2, |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"line": { |
|||
"type": "straight", |
|||
"width": 2, |
|||
"activeType": "hollow" |
|||
}, |
|||
} |
|||
}, |
|||
"tline":{ |
|||
"type": "line", |
|||
"color": color, |
|||
"padding": [15,10,0,15], |
|||
"xAxis": { |
|||
"disableGrid": false, |
|||
"boundaryGap":"justify", |
|||
}, |
|||
"yAxis": { |
|||
"gridType": "dash", |
|||
"dashLength": 2, |
|||
"data":[ |
|||
{ |
|||
"min":0, |
|||
"max":80 |
|||
} |
|||
] |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"line": { |
|||
"type": "curve", |
|||
"width": 2, |
|||
"activeType": "hollow" |
|||
}, |
|||
} |
|||
}, |
|||
"tarea":{ |
|||
"type": "area", |
|||
"color": color, |
|||
"padding": [15,10,0,15], |
|||
"xAxis": { |
|||
"disableGrid": true, |
|||
"boundaryGap":"justify", |
|||
}, |
|||
"yAxis": { |
|||
"gridType": "dash", |
|||
"dashLength": 2, |
|||
"data":[ |
|||
{ |
|||
"min":0, |
|||
"max":80 |
|||
} |
|||
] |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"area": { |
|||
"type": "curve", |
|||
"opacity": 0.2, |
|||
"addLine": true, |
|||
"width": 2, |
|||
"gradient": true, |
|||
"activeType": "hollow" |
|||
}, |
|||
} |
|||
}, |
|||
"column":{ |
|||
"type": "column", |
|||
"color": color, |
|||
"padding": [15,15,0,5], |
|||
"xAxis": { |
|||
"disableGrid": true, |
|||
}, |
|||
"yAxis": { |
|||
"data":[{"min":0}] |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"column": { |
|||
"type": "group", |
|||
"width": 30, |
|||
"activeBgColor": "#000000", |
|||
"activeBgOpacity": 0.08 |
|||
}, |
|||
} |
|||
}, |
|||
"mount":{ |
|||
"type": "mount", |
|||
"color": color, |
|||
"padding": [15,15,0,5], |
|||
"xAxis": { |
|||
"disableGrid": true, |
|||
}, |
|||
"yAxis": { |
|||
"data":[{"min":0}] |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"mount": { |
|||
"type": "mount", |
|||
"widthRatio": 1.5, |
|||
}, |
|||
} |
|||
}, |
|||
"bar":{ |
|||
"type": "bar", |
|||
"color": color, |
|||
"padding": [15,30,0,5], |
|||
"xAxis": { |
|||
"boundaryGap":"justify", |
|||
"disableGrid":false, |
|||
"min":0, |
|||
"axisLine":false |
|||
}, |
|||
"yAxis": { |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"bar": { |
|||
"type": "group", |
|||
"width": 30, |
|||
"meterBorde": 1, |
|||
"meterFillColor": "#FFFFFF", |
|||
"activeBgColor": "#000000", |
|||
"activeBgOpacity": 0.08 |
|||
}, |
|||
} |
|||
}, |
|||
"area":{ |
|||
"type": "area", |
|||
"color": color, |
|||
"padding": [15,15,0,15], |
|||
"xAxis": { |
|||
"disableGrid": true, |
|||
}, |
|||
"yAxis": { |
|||
"gridType": "dash", |
|||
"dashLength": 2, |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"area": { |
|||
"type": "straight", |
|||
"opacity": 0.2, |
|||
"addLine": true, |
|||
"width": 2, |
|||
"gradient": false, |
|||
"activeType": "hollow" |
|||
}, |
|||
} |
|||
}, |
|||
"radar":{ |
|||
"type": "radar", |
|||
"color": color, |
|||
"padding": [5,5,5,5], |
|||
"dataLabel": false, |
|||
"legend": { |
|||
"show": true, |
|||
"position": "right", |
|||
"lineHeight": 25, |
|||
}, |
|||
"extra": { |
|||
"radar": { |
|||
"gridType": "radar", |
|||
"gridColor": "#CCCCCC", |
|||
"gridCount": 3, |
|||
"opacity": 0.2, |
|||
"max": 200, |
|||
"labelShow": true |
|||
}, |
|||
} |
|||
}, |
|||
"gauge":{ |
|||
"type": "gauge", |
|||
"color": color, |
|||
"title": { |
|||
"name": "66Km/H", |
|||
"fontSize": 25, |
|||
"color": "#2fc25b", |
|||
"offsetY": 50 |
|||
}, |
|||
"subtitle": { |
|||
"name": "实时速度", |
|||
"fontSize": 15, |
|||
"color": "#1890ff", |
|||
"offsetY": -50 |
|||
}, |
|||
"extra": { |
|||
"gauge": { |
|||
"type": "default", |
|||
"width": 30, |
|||
"labelColor": "#666666", |
|||
"startAngle": 0.75, |
|||
"endAngle": 0.25, |
|||
"startNumber": 0, |
|||
"endNumber": 100, |
|||
"labelFormat": "", |
|||
"splitLine": { |
|||
"fixRadius": 0, |
|||
"splitNumber": 10, |
|||
"width": 30, |
|||
"color": "#FFFFFF", |
|||
"childNumber": 5, |
|||
"childWidth": 12 |
|||
}, |
|||
"pointer": { |
|||
"width": 24, |
|||
"color": "auto" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"candle":{ |
|||
"type": "candle", |
|||
"color": color, |
|||
"padding": [15,15,0,15], |
|||
"enableScroll": true, |
|||
"enableMarkLine": true, |
|||
"dataLabel": false, |
|||
"xAxis": { |
|||
"labelCount": 4, |
|||
"itemCount": 40, |
|||
"disableGrid": true, |
|||
"gridColor": "#CCCCCC", |
|||
"gridType": "solid", |
|||
"dashLength": 4, |
|||
"scrollShow": true, |
|||
"scrollAlign": "left", |
|||
"scrollColor": "#A6A6A6", |
|||
"scrollBackgroundColor": "#EFEBEF" |
|||
}, |
|||
"yAxis": { |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"candle": { |
|||
"color": { |
|||
"upLine": "#f04864", |
|||
"upFill": "#f04864", |
|||
"downLine": "#2fc25b", |
|||
"downFill": "#2fc25b" |
|||
}, |
|||
"average": { |
|||
"show": true, |
|||
"name": ["MA5","MA10","MA30"], |
|||
"day": [5,10,20], |
|||
"color": ["#1890ff","#2fc25b","#facc14"] |
|||
} |
|||
}, |
|||
"markLine": { |
|||
"type": "dash", |
|||
"dashLength": 5, |
|||
"data": [ |
|||
{ |
|||
"value": 2150, |
|||
"lineColor": "#f04864", |
|||
"showLabel": true |
|||
}, |
|||
{ |
|||
"value": 2350, |
|||
"lineColor": "#f04864", |
|||
"showLabel": true |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"mix":{ |
|||
"type": "mix", |
|||
"color": color, |
|||
"padding": [15,15,0,15], |
|||
"xAxis": { |
|||
"disableGrid": true, |
|||
}, |
|||
"yAxis": { |
|||
"disabled": false, |
|||
"disableGrid": false, |
|||
"splitNumber": 5, |
|||
"gridType": "dash", |
|||
"dashLength": 4, |
|||
"gridColor": "#CCCCCC", |
|||
"padding": 10, |
|||
"showTitle": true, |
|||
"data": [] |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"mix": { |
|||
"column": { |
|||
"width": 20 |
|||
} |
|||
}, |
|||
} |
|||
}, |
|||
"scatter":{ |
|||
"type": "scatter", |
|||
"color":color, |
|||
"padding":[15,15,0,15], |
|||
"dataLabel":false, |
|||
"xAxis": { |
|||
"disableGrid": false, |
|||
"gridType":"dash", |
|||
"splitNumber":5, |
|||
"boundaryGap":"justify", |
|||
"min":0 |
|||
}, |
|||
"yAxis": { |
|||
"disableGrid": false, |
|||
"gridType":"dash", |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"scatter": { |
|||
}, |
|||
} |
|||
}, |
|||
"bubble":{ |
|||
"type": "bubble", |
|||
"color":color, |
|||
"padding":[15,15,0,15], |
|||
"xAxis": { |
|||
"disableGrid": false, |
|||
"gridType":"dash", |
|||
"splitNumber":5, |
|||
"boundaryGap":"justify", |
|||
"min":0, |
|||
"max":250 |
|||
}, |
|||
"yAxis": { |
|||
"disableGrid": false, |
|||
"gridType":"dash", |
|||
"data":[{ |
|||
"min":0, |
|||
"max":150 |
|||
}] |
|||
}, |
|||
"legend": { |
|||
}, |
|||
"extra": { |
|||
"bubble": { |
|||
"border":2, |
|||
"opacity": 0.5, |
|||
}, |
|||
} |
|||
} |
|||
} |
|||
|
|||
export default cfu; |
@ -0,0 +1,5 @@ |
|||
# uCharts JSSDK说明 |
|||
1、如不使用uCharts组件,可直接引用u-charts.js,打包编译后会`自动压缩`,压缩后体积约为`120kb`。 |
|||
2、如果120kb的体积仍需压缩,请手到uCharts官网通过在线定制选择您需要的图表。 |
|||
3、config-ucharts.js为uCharts组件的用户配置文件,升级前请`自行备份config-ucharts.js`文件,以免被强制覆盖。 |
|||
4、config-echarts.js为ECharts组件的用户配置文件,升级前请`自行备份config-echarts.js`文件,以免被强制覆盖。 |
@ -0,0 +1,201 @@ |
|||
Apache License |
|||
Version 2.0, January 2004 |
|||
http://www.apache.org/licenses/ |
|||
|
|||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
|||
|
|||
1. Definitions. |
|||
|
|||
"License" shall mean the terms and conditions for use, reproduction, |
|||
and distribution as defined by Sections 1 through 9 of this document. |
|||
|
|||
"Licensor" shall mean the copyright owner or entity authorized by |
|||
the copyright owner that is granting the License. |
|||
|
|||
"Legal Entity" shall mean the union of the acting entity and all |
|||
other entities that control, are controlled by, or are under common |
|||
control with that entity. For the purposes of this definition, |
|||
"control" means (i) the power, direct or indirect, to cause the |
|||
direction or management of such entity, whether by contract or |
|||
otherwise, or (ii) ownership of fifty percent (50%) or more of the |
|||
outstanding shares, or (iii) beneficial ownership of such entity. |
|||
|
|||
"You" (or "Your") shall mean an individual or Legal Entity |
|||
exercising permissions granted by this License. |
|||
|
|||
"Source" form shall mean the preferred form for making modifications, |
|||
including but not limited to software source code, documentation |
|||
source, and configuration files. |
|||
|
|||
"Object" form shall mean any form resulting from mechanical |
|||
transformation or translation of a Source form, including but |
|||
not limited to compiled object code, generated documentation, |
|||
and conversions to other media types. |
|||
|
|||
"Work" shall mean the work of authorship, whether in Source or |
|||
Object form, made available under the License, as indicated by a |
|||
copyright notice that is included in or attached to the work |
|||
(an example is provided in the Appendix below). |
|||
|
|||
"Derivative Works" shall mean any work, whether in Source or Object |
|||
form, that is based on (or derived from) the Work and for which the |
|||
editorial revisions, annotations, elaborations, or other modifications |
|||
represent, as a whole, an original work of authorship. For the purposes |
|||
of this License, Derivative Works shall not include works that remain |
|||
separable from, or merely link (or bind by name) to the interfaces of, |
|||
the Work and Derivative Works thereof. |
|||
|
|||
"Contribution" shall mean any work of authorship, including |
|||
the original version of the Work and any modifications or additions |
|||
to that Work or Derivative Works thereof, that is intentionally |
|||
submitted to Licensor for inclusion in the Work by the copyright owner |
|||
or by an individual or Legal Entity authorized to submit on behalf of |
|||
the copyright owner. For the purposes of this definition, "submitted" |
|||
means any form of electronic, verbal, or written communication sent |
|||
to the Licensor or its representatives, including but not limited to |
|||
communication on electronic mailing lists, source code control systems, |
|||
and issue tracking systems that are managed by, or on behalf of, the |
|||
Licensor for the purpose of discussing and improving the Work, but |
|||
excluding communication that is conspicuously marked or otherwise |
|||
designated in writing by the copyright owner as "Not a Contribution." |
|||
|
|||
"Contributor" shall mean Licensor and any individual or Legal Entity |
|||
on behalf of whom a Contribution has been received by Licensor and |
|||
subsequently incorporated within the Work. |
|||
|
|||
2. Grant of Copyright License. Subject to the terms and conditions of |
|||
this License, each Contributor hereby grants to You a perpetual, |
|||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|||
copyright license to reproduce, prepare Derivative Works of, |
|||
publicly display, publicly perform, sublicense, and distribute the |
|||
Work and such Derivative Works in Source or Object form. |
|||
|
|||
3. Grant of Patent License. Subject to the terms and conditions of |
|||
this License, each Contributor hereby grants to You a perpetual, |
|||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|||
(except as stated in this section) patent license to make, have made, |
|||
use, offer to sell, sell, import, and otherwise transfer the Work, |
|||
where such license applies only to those patent claims licensable |
|||
by such Contributor that are necessarily infringed by their |
|||
Contribution(s) alone or by combination of their Contribution(s) |
|||
with the Work to which such Contribution(s) was submitted. If You |
|||
institute patent litigation against any entity (including a |
|||
cross-claim or counterclaim in a lawsuit) alleging that the Work |
|||
or a Contribution incorporated within the Work constitutes direct |
|||
or contributory patent infringement, then any patent licenses |
|||
granted to You under this License for that Work shall terminate |
|||
as of the date such litigation is filed. |
|||
|
|||
4. Redistribution. You may reproduce and distribute copies of the |
|||
Work or Derivative Works thereof in any medium, with or without |
|||
modifications, and in Source or Object form, provided that You |
|||
meet the following conditions: |
|||
|
|||
(a) You must give any other recipients of the Work or |
|||
Derivative Works a copy of this License; and |
|||
|
|||
(b) You must cause any modified files to carry prominent notices |
|||
stating that You changed the files; and |
|||
|
|||
(c) You must retain, in the Source form of any Derivative Works |
|||
that You distribute, all copyright, patent, trademark, and |
|||
attribution notices from the Source form of the Work, |
|||
excluding those notices that do not pertain to any part of |
|||
the Derivative Works; and |
|||
|
|||
(d) If the Work includes a "NOTICE" text file as part of its |
|||
distribution, then any Derivative Works that You distribute must |
|||
include a readable copy of the attribution notices contained |
|||
within such NOTICE file, excluding those notices that do not |
|||
pertain to any part of the Derivative Works, in at least one |
|||
of the following places: within a NOTICE text file distributed |
|||
as part of the Derivative Works; within the Source form or |
|||
documentation, if provided along with the Derivative Works; or, |
|||
within a display generated by the Derivative Works, if and |
|||
wherever such third-party notices normally appear. The contents |
|||
of the NOTICE file are for informational purposes only and |
|||
do not modify the License. You may add Your own attribution |
|||
notices within Derivative Works that You distribute, alongside |
|||
or as an addendum to the NOTICE text from the Work, provided |
|||
that such additional attribution notices cannot be construed |
|||
as modifying the License. |
|||
|
|||
You may add Your own copyright statement to Your modifications and |
|||
may provide additional or different license terms and conditions |
|||
for use, reproduction, or distribution of Your modifications, or |
|||
for any such Derivative Works as a whole, provided Your use, |
|||
reproduction, and distribution of the Work otherwise complies with |
|||
the conditions stated in this License. |
|||
|
|||
5. Submission of Contributions. Unless You explicitly state otherwise, |
|||
any Contribution intentionally submitted for inclusion in the Work |
|||
by You to the Licensor shall be under the terms and conditions of |
|||
this License, without any additional terms or conditions. |
|||
Notwithstanding the above, nothing herein shall supersede or modify |
|||
the terms of any separate license agreement you may have executed |
|||
with Licensor regarding such Contributions. |
|||
|
|||
6. Trademarks. This License does not grant permission to use the trade |
|||
names, trademarks, service marks, or product names of the Licensor, |
|||
except as required for reasonable and customary use in describing the |
|||
origin of the Work and reproducing the content of the NOTICE file. |
|||
|
|||
7. Disclaimer of Warranty. Unless required by applicable law or |
|||
agreed to in writing, Licensor provides the Work (and each |
|||
Contributor provides its Contributions) on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
|||
implied, including, without limitation, any warranties or conditions |
|||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A |
|||
PARTICULAR PURPOSE. You are solely responsible for determining the |
|||
appropriateness of using or redistributing the Work and assume any |
|||
risks associated with Your exercise of permissions under this License. |
|||
|
|||
8. Limitation of Liability. In no event and under no legal theory, |
|||
whether in tort (including negligence), contract, or otherwise, |
|||
unless required by applicable law (such as deliberate and grossly |
|||
negligent acts) or agreed to in writing, shall any Contributor be |
|||
liable to You for damages, including any direct, indirect, special, |
|||
incidental, or consequential damages of any character arising as a |
|||
result of this License or out of the use or inability to use the |
|||
Work (including but not limited to damages for loss of goodwill, |
|||
work stoppage, computer failure or malfunction, or any and all |
|||
other commercial damages or losses), even if such Contributor |
|||
has been advised of the possibility of such damages. |
|||
|
|||
9. Accepting Warranty or Additional Liability. While redistributing |
|||
the Work or Derivative Works thereof, You may choose to offer, |
|||
and charge a fee for, acceptance of support, warranty, indemnity, |
|||
or other liability obligations and/or rights consistent with this |
|||
License. However, in accepting such obligations, You may act only |
|||
on Your own behalf and on Your sole responsibility, not on behalf |
|||
of any other Contributor, and only if You agree to indemnify, |
|||
defend, and hold each Contributor harmless for any liability |
|||
incurred by, or claims asserted against, such Contributor by reason |
|||
of your accepting any such warranty or additional liability. |
|||
|
|||
END OF TERMS AND CONDITIONS |
|||
|
|||
APPENDIX: How to apply the Apache License to your work. |
|||
|
|||
To apply the Apache License to your work, attach the following |
|||
boilerplate notice, with the fields enclosed by brackets "[]" |
|||
replaced with your own identifying information. (Don't include |
|||
the brackets!) The text should be enclosed in the appropriate |
|||
comment syntax for the file format. We also recommend that a |
|||
file or class name and description of purpose be included on the |
|||
same "printed page" as the copyright notice for easier |
|||
identification within third-party archives. |
|||
|
|||
Copyright [yyyy] [name of copyright owner] |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
@ -0,0 +1,81 @@ |
|||
{ |
|||
"id": "qiun-data-charts", |
|||
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件", |
|||
"version": "2.5.0-20230101", |
|||
"description": "uCharts 新增正负柱状图!支持H5及APP用 ucharts echarts 渲染图表,uniapp可视化首选组件", |
|||
"keywords": [ |
|||
"ucharts", |
|||
"echarts", |
|||
"f2", |
|||
"图表", |
|||
"可视化" |
|||
], |
|||
"repository": "https://gitee.com/uCharts/uCharts", |
|||
"engines": { |
|||
"HBuilderX": "^3.3.8" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "474119" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "插件不采集任何数据", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/~qiun", |
|||
"type": "component-vue" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "y", |
|||
"联盟": "y" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,84 @@ |
|||
 |
|||
|
|||
|
|||
[](https://gitee.com/uCharts/uCharts/stargazers) |
|||
[](https://gitee.com/uCharts/uCharts/members) |
|||
[](https://www.apache.org/licenses/LICENSE-2.0.html) |
|||
[](https://www.npmjs.com/~qiun) |
|||
|
|||
|
|||
## uCharts简介 |
|||
|
|||
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等更多支持 canvas API 的平台。 |
|||
|
|||
## 官方网站 |
|||
|
|||
## [https://www.ucharts.cn](https://www.ucharts.cn) |
|||
|
|||
## 快速体验 |
|||
|
|||
一套代码编到多个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!其他平台请自行编译。 |
|||
|
|||
 |
|||
|
|||
 |
|||
|
|||
## 致开发者 |
|||
|
|||
感谢各位开发者`五年`来对秋云及uCharts的支持,uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具,我们推出了新版官网,增加了在线定制、问答社区、在线配置等一些增值服务,为确保您能更好的应用图表组件,建议您先`仔细阅读官网指南`以及`常见问题`,而不是下载下来`直接使用`。如仍然不能解决,请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。 |
|||
|
|||
## 视频教程 |
|||
|
|||
## [uCharts新手入门教程](https://www.bilibili.com/video/BV1qA411Q7se/?share_source=copy_web&vd_source=42a1242f9aaade6427736af69eb2e1d9) |
|||
|
|||
|
|||
## 社群支持 |
|||
|
|||
uCharts官方拥有5个2000人的QQ群及专属VIP会员群支持,庞大的用户量证明我们一直在努力,请各位放心使用!uCharts的开源图表组件的开发,团队付出了大量的时间与精力,经过四来的考验,不会有比较明显的bug,请各位放心使用。如果您有更好的想法,可以在`码云提交Pull Requests`以帮助更多开发者完成需求,再次感谢各位对uCharts的鼓励与支持! |
|||
|
|||
#### 官方交流群 |
|||
- 交流群1:371774600(已满) |
|||
- 交流群2:619841586(已满) |
|||
- 交流群3:955340127(已满) |
|||
- 交流群4:641669795(已满) |
|||
- 交流群5:236294809(只能扫码加入) |
|||
|
|||
 |
|||
|
|||
- 口令`uniapp` |
|||
|
|||
#### 专属VIP会员群 |
|||
- 开通会员后详见【账号详情】页面中顶部的滚动通知 |
|||
- 口令`您的用户ID` |
|||
|
|||
## 版权信息 |
|||
|
|||
uCharts始终坚持开源,遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议,意味着您无需支付任何费用,即可将uCharts应用到您的产品中。 |
|||
|
|||
注意:这并不意味着您可以将uCharts应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷或法律问题,uCharts相关方及秋云科技不承担任何责任。 |
|||
|
|||
## 合作伙伴 |
|||
|
|||
[](https://www.diygw.com/) |
|||
[](https://gitee.com/howcode/has-chat) |
|||
[](https://www.uviewui.com/) |
|||
[](https://ext.dcloud.net.cn/plugin?id=7088) |
|||
[](https://ext.dcloud.net.cn/publisher?id=202) |
|||
[](https://www.firstui.cn/) |
|||
[](https://ext.dcloud.net.cn/plugin?id=5169) |
|||
[](https://www.graceui.com/) |
|||
|
|||
|
|||
## 更新记录 |
|||
|
|||
详见官网指南中说明,[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100) |
|||
|
|||
|
|||
## 相关链接 |
|||
- [uCharts官网](https://www.ucharts.cn) |
|||
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271) |
|||
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers) |
|||
- [uCharts npm开源地址](https://www.ucharts.cn) |
|||
- [ECharts官网](https://echarts.apache.org/zh/index.html) |
|||
- [ECharts配置手册](https://echarts.apache.org/zh/option.html) |
|||
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1) |