封装标题、新增公共方法
commit
ac853194a0
|
|
@ -0,0 +1,9 @@
|
|||
/vendor
|
||||
/node_modules
|
||||
/public/storage
|
||||
/unpackage
|
||||
/.hbuilderx
|
||||
Homestead.yaml
|
||||
Homestead.json
|
||||
.env
|
||||
.idea
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<script>
|
||||
import toolAll from '@/jsFile/tools.js';
|
||||
export default {
|
||||
// 全局域名配置
|
||||
globalData:{
|
||||
appletName:'佩丽商城',//小程序名称
|
||||
},
|
||||
// 优先于show方法
|
||||
onLaunch: function() {
|
||||
// 获取窗口的高度
|
||||
let windowHeight = uni.getSystemInfoSync().windowHeight;
|
||||
// 获取状态栏的高度
|
||||
let statusHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
uni.setStorageSync('hostapi','https://peili.scdxtc.cn'); // 配置全局域名
|
||||
uni.setStorageSync('publicColor','#000000'); // 设置主色调
|
||||
uni.setStorageSync('statusBar',statusHeight); // 缓存状态栏高度
|
||||
// 设置scroll-view的高度一
|
||||
uni.setStorageSync('scrollHeight-one',windowHeight - (statusHeight + 50 + 59)); // 头部 + 底部
|
||||
// 查询状态栏的高度、并设置导航栏的高度
|
||||
// 设置底部导航栏图片与标题
|
||||
uni.setStorageSync('footTitle',['首页','分类','我的','购物车'])
|
||||
uni.setStorageSync('footimg',[
|
||||
{
|
||||
iconPath: "/static/public/mo-home.png",
|
||||
selectedIconPath: "/static/public/active-home.png"
|
||||
},
|
||||
{
|
||||
iconPath: "/static/public/mo-function.png",
|
||||
selectedIconPath: "/static/public/active-function.png"
|
||||
},
|
||||
{
|
||||
iconPath: "/static/public/mo-person.png",
|
||||
selectedIconPath: "/static/public/active-person.png"
|
||||
},
|
||||
{
|
||||
iconPath: "https://s6.jpg.cm/2022/02/17/LBETnT.png",
|
||||
selectedIconPath: "https://s6.jpg.cm/2022/02/17/LBETnT.png"
|
||||
}
|
||||
])
|
||||
},
|
||||
onShow: function() {
|
||||
// 检测是否登录过期或是否登录
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
toolAll.tools.updaX();
|
||||
// 刷新token
|
||||
toolAll.tools.timedRefreshToken();
|
||||
}
|
||||
},
|
||||
onHide: function() {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
/* 阿里巴巴矢量图标库 start */
|
||||
@import url("./commons/icon-font.css");
|
||||
/* 阿里巴巴矢量图标库 end */
|
||||
|
||||
/* 项目主体样式 start */
|
||||
@import url("./commons/hengmei.css");
|
||||
/* 项目主体样式 end */
|
||||
|
||||
/* 动画样式 start */
|
||||
@import url("./commons/animate.min.css");
|
||||
/* 动画样式 end */
|
||||
|
||||
page {background-color: rgba(255, 255, 255, 1);}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,453 @@
|
|||
/* 分类 */
|
||||
.sort-box {background-color: #ececee;position: sticky;z-index: 6;}
|
||||
.screen-box{position: fixed;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 12;}
|
||||
.screen-box > view{background-color: #FFFFFF;margin-left: 200rpx; height: 100%;float: right;padding: 50rpx 30rpx;box-sizing: border-box;}
|
||||
.sort-price input {height: 50rpx;border: 2rpx solid #8c8c9b;}
|
||||
.screen-btn {position: absolute;bottom: 30rpx;right: 30rpx;left: 30rpx;}
|
||||
.screen-btn view {height: 80rpx;width: 229rpx;text-align: center;line-height: 80rpx;}
|
||||
.screen-btn view:first-child{border: 2rpx solid #8c8c9b;}
|
||||
.screen-btn view:last-child{border: 2rpx solid #000000;background-color: #000000;}
|
||||
/* 我的页面 */
|
||||
.red-num{width: 36rpx;height: 36rpx;line-height: 36rpx;border-radius: 100%;background: #F96969;right: 50rpx;top: 0;font-size: 22rpx;color: #FFFFFF;text-align: center;}
|
||||
.icon-img{width: 60rpx;height: 60rpx;}
|
||||
/* 暂无内容时，显示的图片大小 */
|
||||
.zanw-img{width: 474rpx;height: 273rpx;}
|
||||
/* 商品详情 */
|
||||
.activity-img{background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;}
|
||||
/* 准备下单 */
|
||||
.activeT,.expressT{width: 124rpx;height: 60rpx;line-height: 60rpx;text-align: center;margin-left: 20rpx;border-radius: 20rpx;}
|
||||
.activeT{color: #FFFFFF;}
|
||||
.activeQuan::before{content: '';display: block;width: 50%;height: 8rpx;background: #3875F6;position: absolute;bottom: -20rpx;left: 50%;transform: translateX(-50%);}
|
||||
.xiaDan-next{width: 16px;height: 16px;flex-shrink: 0;}
|
||||
.there{width: 90rpx;height: 86rpx;flex-shrink: 0;}
|
||||
.order-image{width: 166rpx;height: 166rpx;border-radius: 15rpx;margin-right: 12rpx;}
|
||||
.order-sy{font-size: 22rpx;color: #808080;font-weight: 500;margin-top: 6rpx;}
|
||||
.order-item-price{color: #F85050;font-size: 32rpx;font-weight: bold;}
|
||||
.goPayment{color: #FFFFFF;font-size: 28rpx;font-weight: bold;width: 170rpx;height: 70rpx;line-height: 70rpx;text-align: center;background: #3875F6;border-radius: 35rpx;margin-left: 10rpx;}
|
||||
.quan-item-box{height: 200rpx;}
|
||||
.quan-item-box>view:first-child{width: 218rpx;height: 200rpx;flex-shrink: 0;text-align: center;color: #FFFFFF;}
|
||||
.quan-item-box>view:first-child image{width: 218rpx;height: 200rpx;left: 0;top: 0;}
|
||||
.quan-item-box>view:last-child{display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 200rpx;padding: 0 20rpx;background-color: #F5F5F5;}
|
||||
.quan-item-box>view:last-child image{float: right;}
|
||||
.quan-list-box{max-height: 600rpx;}
|
||||
.quan-list-box .mar-x40:last-child{margin-bottom: 0rpx;}
|
||||
.ling-btn{font-size: 36rpx;color: #FFFFFF;font-weight: bold;margin: 0 auto;background: #3875F6;border-radius: 20rpx;height: 90rpx;line-height: 90rpx;text-align: center;margin-top: 156rpx;margin-bottom: 20rpx;}
|
||||
.zhun-dui-box{display: flex;justify-content: center;align-items: center;padding: 0 85rpx;}
|
||||
.zhun-dui-btn view{width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 500;border-radius: 10rpx;color: #FFFFFF;}
|
||||
.zhun-dui-btn view:first-child{background: #C8C8C8;}
|
||||
.zhun-dui-btn view:last-child{background: #3875F6;}
|
||||
.success-box{padding: 27rpx 20rpx;text-align: center;}
|
||||
.success-box image{width: 194rpx;height: 194rpx;}
|
||||
.success-hj{font-size: 46rpx;margin-bottom: 120rpx;color: #F85050;}
|
||||
/* 立即支付页面 */
|
||||
.success-btn{margin-bottom: 150rpx;}
|
||||
.success-btn view{width: 244rpx;height: 70rpx;border-radius: 10rpx;text-align: center;line-height: 70rpx;}
|
||||
.success-btn view:first-child{background: #E9E9E9;color: #333333;}
|
||||
/* 我的订单页面 */
|
||||
.order-hx-img{width: 325rpx;height: 325rpx;}
|
||||
.order-close-btn{width: 40rpx;height: 40rpx;right: 50rpx;top: 20rpx;}
|
||||
.order-btn{width: 210rpx;height: 75rpx;line-height: 75rpx;text-align: center;border-radius: 10rpx;background: #F85050;color: #FFFFFF;margin-left: 45rpx;}
|
||||
.order-cancle{width: 210rpx;height: 75rpx;line-height: 75rpx;text-align: center;border-radius: 10rpx;background: #E9E9E9;color: #808080;}
|
||||
.heyan-close{width: 96rpx;height: 96rpx;left: 50%;transform: translateX(-50%);bottom: -150rpx;}
|
||||
.confirm-btn{font-size: 36rpx;color: #FFFFFF;font-weight: bold;margin: 0 auto;background: #3875F6;border-radius: 20rpx;height: 90rpx;line-height: 90rpx;text-align: center;margin: 80rpx 100rpx 20rpx 100rpx;}
|
||||
/* 地址管理页面 */
|
||||
.address_active{width: 40rpx;height: 40rpx;}
|
||||
.address_add{font-size: 30rpx;color: #FFFFFF;font-weight: bold;margin: 0 auto;background: #3875F6;border-radius: 30rpx;height: 98rpx;line-height: 98rpx;text-align: center;margin: 0 30rpx;}
|
||||
.xiao-sanj image{width: 14rpx;height: 11rpx;}
|
||||
.xiao-sanj image:last-child{margin-top: 4rpx;}
|
||||
.address-btn-add{font-size: 30rpx;color: #FFFFFF;font-weight: bold;margin: 0 auto;background: #3875F6;border-radius: 30rpx;height: 98rpx;line-height: 98rpx;text-align: center;margin: 80rpx 0rpx 20rpx 0rpx;}
|
||||
.address-close-btn{width: 77rpx;height: 77rpx;right: -80rpx;top: -36rpx;}
|
||||
.info-box{background: #fff;left: 0;right: 0;top: 52rpx;height: 0rpx;transition: all 0.5s;border: 2rpx solid #E6E6E6;opacity: 0; z-index: 6;overflow: hidden;overflow-y: scroll;color: #666;}
|
||||
.info-box view{margin: 10rpx;font-size: 24rpx;}
|
||||
.dong {height: 200rpx;border: 2rpx solid #E6E6E6;opacity: 1;}
|
||||
/* 订单详情 */
|
||||
.orderInfo-btn{width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;background: #3875F6;color: #FFFFFF;margin-left: 20rpx;}
|
||||
.paid-btn-box view{width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;}
|
||||
.paid-btn-box view:first-child{background: #E9E9E9;color: #808080;}
|
||||
.paid-btn-box view:last-child{background: #3875F6;color: #FFFFFF;margin-left: 20rpx;}
|
||||
.consumption-box{margin: 40rpx 0 40rpx 0;text-align: right;}
|
||||
.orderDetail-box{padding: 0rpx 20rpx 27rpx 20rpx;}
|
||||
.orderDetail-box image{width: 166rpx;height: 166rpx;border-radius: 15rpx;margin-right: 12rpx;}
|
||||
.orderDetail-sku{font-size: 22rpx;color: #808080;font-weight: 500;}
|
||||
.orderDetail-bottom-box{height: 124rpx;padding: 0 32rpx;display: flex;align-items: center;border-top: 2rpx solid #F5F5F5;}
|
||||
.orderDetail-bottom-box image{width: 56rpx;height: 56rpx;}
|
||||
.order-btn{
|
||||
width: 150rpx;height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
text-align: center;
|
||||
border-radius: 20rpx;
|
||||
background-color: #f6f6f6;
|
||||
color: #8c8c9b;
|
||||
border: 1rpx solid #d3d3d3;
|
||||
}
|
||||
/* 关于我们 */
|
||||
.navigate-to-where {height: 98rpx;line-height: 98rpx;}
|
||||
/* 分销中心 */
|
||||
.withdrawal-btn{height: 98rpx;line-height: 98rpx;}
|
||||
.withdrawal-box{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,.2);}
|
||||
.withdrawal-box image{position: absolute;right: -36rpx;top: -36rpx; width: 77rpx;height: 77rpx;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* @media screen and (height:812px){
|
||||
}
|
||||
@media screen and (height:844px){
|
||||
}
|
||||
@media screen and (height:896px){
|
||||
}
|
||||
@media screen and (min-height:926px){
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.bottoc{margin-top: 6rpx;color: #414141;}
|
||||
.opc{opacity: 0.7;}
|
||||
.width100{width: 100%;}
|
||||
.width55{width: 55%;}
|
||||
.width50{width: 50%;}
|
||||
.width48{width: 48%;}
|
||||
.width47{width: 47%;}
|
||||
.width46{width: 46%;}
|
||||
.width45{width: 45%;}
|
||||
.width33{width: 33%;}
|
||||
.width25{width: 25%;}
|
||||
|
||||
.posAll{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.45);z-index: 12;}
|
||||
.posir{position: relative;}
|
||||
.posia{position: absolute;}
|
||||
.poszy{position: fixed;left: 0;right: 0;z-index: 3;}
|
||||
.posiszy{position: fixed;left: 0;right: 0;z-index: 5;}
|
||||
.posixzy{position: fixed;left: 0;right: 0;z-index: 2;bottom: 0;}
|
||||
.posia-op{position: absolute;top: 0;right: 0;left: 0;bottom: 0;opacity: 0;}
|
||||
.syxzo{top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
||||
|
||||
|
||||
.dis{display: flex;}
|
||||
.disac{display: flex;align-items: center;}
|
||||
.disja{display: flex;justify-content: space-around;}
|
||||
.disjb{display: flex;justify-content: space-between;}
|
||||
.disje{display: flex;justify-content: flex-end;}
|
||||
.disjbac{display: flex;justify-content: space-between;align-items: center;}
|
||||
.disjcac{display: flex;justify-content: center;align-items: center;}
|
||||
.fc{flex-direction: column;}
|
||||
.fw{flex-wrap: wrap;}
|
||||
.fe{justify-content: flex-end;}
|
||||
.flexs{flex-shrink: 0;}
|
||||
|
||||
|
||||
.wh42{width: 42rpx;height: 42rpx;}
|
||||
.wh44{width: 44rpx;height: 44rpx;}
|
||||
|
||||
button:after{content: none!important;}
|
||||
.borbot{border-bottom: 2rpx solid #E6E6E6;}
|
||||
.borbot:last-child{border-bottom: none;}
|
||||
.bbot{border-bottom: 2rpx solid #E6E6E6;}
|
||||
.borbot-df{border: 2rpx solid #DFDFDF;}
|
||||
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
||||
|
||||
/* 行高 */
|
||||
.line-h30{line-height: 30rpx;}
|
||||
.line-h32{line-height: 32rpx;}
|
||||
.line-h34{line-height: 34rpx;}
|
||||
.line-h36{line-height: 36rpx;}
|
||||
.line-h38{line-height: 38rpx;}
|
||||
.line-h40{line-height: 40rpx;}
|
||||
.line-h42{line-height: 42rpx;}
|
||||
.line-h44{line-height: 44rpx;}
|
||||
.line-h46{line-height: 46rpx;}
|
||||
.line-h48{line-height: 48rpx;}
|
||||
.line-h50{line-height: 50rpx;}
|
||||
.line-h52{line-height: 52rpx;}
|
||||
.line-h54{line-height: 54rpx;}
|
||||
.line-h56{line-height: 56rpx;}
|
||||
.line-h58{line-height: 58rpx;}
|
||||
.line-h60{line-height: 60rpx;}
|
||||
.line-h62{line-height: 62rpx;}
|
||||
.line-h64{line-height: 64rpx;}
|
||||
.line-h66{line-height: 66rpx;}
|
||||
.line-h68{line-height: 60rpx;}
|
||||
.line-h70{line-height: 70rpx;}
|
||||
.line-h72{line-height: 72rpx;}
|
||||
.line-h74{line-height: 74rpx;}
|
||||
|
||||
|
||||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
|
||||
|
||||
/* 字体大小 */
|
||||
.fon20{font-size: 20rpx;}
|
||||
.fon22{font-size: 22rpx;}
|
||||
.fon24{font-size: 24rpx;}
|
||||
.fon25{font-size: 25rpx;}
|
||||
.fon26{font-size: 26rpx;}
|
||||
.fon27{font-size: 27rpx;}
|
||||
.fon28{font-size: 28rpx;}
|
||||
.fon30{font-size: 30rpx;}
|
||||
.fon32{font-size: 32rpx;}
|
||||
.fon34{font-size: 34rpx;}
|
||||
.fon36{font-size: 36rpx;}
|
||||
.fon38{font-size: 38rpx;}
|
||||
.fon40{font-size: 40rpx;}
|
||||
.fon42{font-size: 42rpx;}
|
||||
.fon44{font-size: 44rpx;}
|
||||
.fon46{font-size: 46rpx;}
|
||||
.fon48{font-size: 48rpx;}
|
||||
.fon50{font-size: 50rpx;}
|
||||
.fon52{font-size: 52rpx;}
|
||||
.fon54{font-size: 54rpx;}
|
||||
.fon56{font-size: 56rpx;}
|
||||
.fon58{font-size: 58rpx;}
|
||||
.fon60{font-size: 60rpx;}
|
||||
.fon62{font-size: 62rpx;}
|
||||
.fon64{font-size: 64rpx;}
|
||||
.fon66{font-size: 66rpx;}
|
||||
.fon68{font-size: 68rpx;}
|
||||
.fon70{font-size: 70rpx;}
|
||||
.fon72{font-size: 72rpx;}
|
||||
|
||||
/* 字体颜色 */
|
||||
.colf{color: #FFFFFF;}
|
||||
.colf6{color: #f6f6f6;}
|
||||
.colb{color: #000000;}
|
||||
.colc{color: #CCCCCC;}
|
||||
.col3{color: #333333;}
|
||||
.col34{color: #343434;}
|
||||
.col6{color: #666666;}
|
||||
.colf8{color: #F85050;}
|
||||
.col9{color: #999999;}
|
||||
.pcol{color: #3875F6;}
|
||||
.col2c{color: #2C2C2C;}
|
||||
.col80{color: #808080;}
|
||||
.col7D{color: #7D7D7D;}
|
||||
.colB3{color: #B3B3B3;}
|
||||
.col5b{color: #5B5B5B;}
|
||||
.colpeili{color: #868695;}
|
||||
/* 佩丽字体颜色 */
|
||||
.peili-colorRed{color: #fe2525;}
|
||||
|
||||
|
||||
/* 字体位置 */
|
||||
.tc{text-align: center;}
|
||||
.tright{text-align: right;}
|
||||
|
||||
/* 行间距 */
|
||||
.linh40{line-height: 40rpx;}
|
||||
.linh50{line-height: 50rpx;}
|
||||
.linh60{line-height: 60rpx;}
|
||||
.linh70{line-height: 70rpx;}
|
||||
|
||||
/* 粗体 */
|
||||
.bold{font-weight: bold;}
|
||||
.bold400{font-weight: 400;}
|
||||
.bold500{font-weight: 500;}
|
||||
.font5{font-weight: 500;}
|
||||
.font4{font-weight: 400;}
|
||||
|
||||
|
||||
/* 背景颜色 */
|
||||
.pbackc{background-color: #3875F6;}
|
||||
.bacf{background-color: #FFFFFF;}
|
||||
.bac0{background-color: #000000;}
|
||||
.bcdb{background-color: #DBDBDB;}
|
||||
.bcf8{background: #F85050;}
|
||||
.bacf5{background: #F5F5F5;}
|
||||
.bacf6{background-color: #f6f6f6;}
|
||||
/* 佩丽商城背景色 */
|
||||
.peili-backColor{background-color: #fe2525;}
|
||||
|
||||
|
||||
/* 文本居中方式 */
|
||||
.tcenter{text-align: center;}
|
||||
|
||||
|
||||
/* 圆角 */
|
||||
.radius10{border-radius: 10rpx;}
|
||||
.radius15{border-radius: 15rpx;}
|
||||
.radius20{border-radius: 20rpx;}
|
||||
.radius30{border-radius: 30rpx;}
|
||||
.radius35{border-radius: 35rpx;}
|
||||
.radius40{border-radius: 40rpx;}
|
||||
.radius45{border-radius: 45rpx;}
|
||||
|
||||
/* 上下左右---外边距 */
|
||||
.mar10{margin: 10rpx;}
|
||||
.mar20{margin: 20rpx;}
|
||||
.mar25{margin: 25rpx;}
|
||||
.mar30{margin: 30rpx;}
|
||||
.mar32{margin: 32rpx;}
|
||||
.mar36{margin: 36rpx;}
|
||||
.mar40{margin: 40rpx;}
|
||||
.mar50{margin: 50rpx;}
|
||||
/* 上下---外边距 */
|
||||
.mar-sx10{margin-top: 10rpx;margin-bottom: 10rpx;}
|
||||
.mar-sx20{margin-top: 20rpx;margin-bottom: 20rpx;}
|
||||
.mar-sx25{margin-top: 25rpx;margin-bottom: 25rpx;}
|
||||
.mar-sx30{margin-top: 30rpx;margin-bottom: 30rpx;}
|
||||
.mar-sx32{margin-top: 32rpx;margin-bottom: 32rpx;}
|
||||
.mar-sx36{margin-top: 36rpx;margin-bottom: 36rpx;}
|
||||
.mar-sx40{margin-top: 40rpx;margin-bottom: 40rpx;}
|
||||
.mar-sx50{margin-top: 50rpx;margin-bottom: 50rpx;}
|
||||
/* 左右---外边距 */
|
||||
.mar-zy10{margin-left: 10rpx;margin-right: 10rpx;}
|
||||
.mar-zy20{margin-left: 20rpx;margin-right: 20rpx;}
|
||||
.mar-zy25{margin-left: 25rpx;margin-right: 25rpx;}
|
||||
.mar-zy30{margin-left: 30rpx;margin-right: 30rpx;}
|
||||
.mar-zy32{margin-left: 32rpx;margin-right: 32rpx;}
|
||||
.mar-zy36{margin-left: 36rpx;margin-right: 36rpx;}
|
||||
.mar-zy40{margin-left: 40rpx;margin-right: 40rpx;}
|
||||
.mar-zy50{margin-left: 50rpx;margin-right: 50rpx;}
|
||||
.mar-zy85{margin-left: 85rpx;margin-right: 85rpx;}
|
||||
/* 上---外边距 */
|
||||
.mar-s10{margin-top: 10rpx;}
|
||||
.mar-s20{margin-top: 20rpx;}
|
||||
.mar-s25{margin-top: 25rpx;}
|
||||
.mar-s30{margin-top: 30rpx;}
|
||||
.mar-s32{margin-top: 32rpx;}
|
||||
.mar-s36{margin-top: 36rpx;}
|
||||
.mar-s40{margin-top: 40rpx;}
|
||||
.mar-s50{margin-top: 50rpx;}
|
||||
.mar-s60{margin-top: 60rpx;}
|
||||
.mar-s70{margin-top: 70rpx;}
|
||||
.mar-s80{margin-top: 80rpx;}
|
||||
.mar-s90{margin-top: 90rpx;}
|
||||
.mar-s100{margin-top: 100rpx;}
|
||||
.mar-s120{margin-top: 120rpx;}
|
||||
.mar-s140{margin-top: 140rpx;}
|
||||
.mar-s160{margin-top: 160rpx;}
|
||||
.mar-s180{margin-top: 180rpx;}
|
||||
/* 下---外边距 */
|
||||
.mar-x10{margin-bottom: 10rpx;}
|
||||
.mar-x20{margin-bottom: 20rpx;}
|
||||
.mar-x25{margin-bottom: 25rpx;}
|
||||
.mar-x30{margin-bottom: 30rpx;}
|
||||
.mar-x32{margin-bottom: 32rpx;}
|
||||
.mar-x36{margin-bottom: 36rpx;}
|
||||
.mar-x40{margin-bottom: 40rpx;}
|
||||
.mar-x50{margin-bottom: 50rpx;}
|
||||
.mar-x60{margin-bottom: 60rpx;}
|
||||
.mar-x70{margin-bottom: 70rpx;}
|
||||
.mar-x80{margin-bottom: 80rpx;}
|
||||
.mar-x90{margin-bottom: 90rpx;}
|
||||
.mar-x100{margin-bottom: 100rpx;}
|
||||
.mar-x120{margin-bottom: 120rpx;}
|
||||
.mar-x140{margin-bottom: 140rpx;}
|
||||
.mar-x160{margin-bottom: 160rpx;}
|
||||
.mar-x180{margin-bottom: 180rpx;}
|
||||
/* 左---外边距 */
|
||||
.mar-z10{margin-left: 10rpx;}
|
||||
.mar-z20{margin-left: 20rpx;}
|
||||
.mar-z25{margin-left: 25rpx;}
|
||||
.mar-z30{margin-left: 30rpx;}
|
||||
.mar-z32{margin-left: 32rpx;}
|
||||
.mar-z36{margin-left: 36rpx;}
|
||||
.mar-z40{margin-left: 40rpx;}
|
||||
.mar-z50{margin-left: 50rpx;}
|
||||
/* 右---外边距 */
|
||||
.mar-y10{margin-right: 10rpx;}
|
||||
.mar-y20{margin-right: 20rpx;}
|
||||
.mar-y25{margin-right: 25rpx;}
|
||||
.mar-y30{margin-right: 30rpx;}
|
||||
.mar-y32{margin-right: 32rpx;}
|
||||
.mar-y36{margin-right: 36rpx;}
|
||||
.mar-y40{margin-right: 40rpx;}
|
||||
.mar-y50{margin-right: 50rpx;}
|
||||
|
||||
/* 上下左右---内边距 */
|
||||
.pad10{padding: 10rpx;}
|
||||
.pad20{padding: 20rpx;}
|
||||
.pad25{padding: 25rpx;}
|
||||
.pad30{padding: 30rpx;}
|
||||
.pad32{padding: 32rpx;}
|
||||
.pad36{padding: 36rpx;}
|
||||
.pad40{padding: 40rpx;}
|
||||
.pad50{padding: 50rpx;}
|
||||
/* 上下---内边距 */
|
||||
.pad-sx10{padding-top: 10rpx;padding-bottom: 10rpx;}
|
||||
.pad-sx20{padding-top: 20rpx;padding-bottom: 20rpx;}
|
||||
.pad-sx25{padding-top: 25rpx;padding-bottom: 25rpx;}
|
||||
.pad-sx30{padding-top: 30rpx;padding-bottom: 30rpx;}
|
||||
.pad-sx32{padding-top: 32rpx;padding-bottom: 32rpx;}
|
||||
.pad-sx36{padding-top: 36rpx;padding-bottom: 36rpx;}
|
||||
.pad-sx40{padding-top: 40rpx;padding-bottom: 40rpx;}
|
||||
.pad-sx50{padding-top: 50rpx;padding-bottom: 50rpx;}
|
||||
/* 左右---内边距 */
|
||||
.pad-zy10{padding-left: 10rpx;padding-right: 10rpx;}
|
||||
.pad-zy20{padding-left: 20rpx;padding-right: 20rpx;}
|
||||
.pad-zy25{padding-left: 25rpx;padding-right: 25rpx;}
|
||||
.pad-zy30{padding-left: 30rpx;padding-right: 30rpx;}
|
||||
.pad-zy32{padding-left: 32rpx;padding-right: 32rpx;}
|
||||
.pad-zy36{padding-left: 36rpx;padding-right: 36rpx;}
|
||||
.pad-zy40{padding-left: 40rpx;padding-right: 40rpx;}
|
||||
.pad-zy50{padding-left: 50rpx;padding-right: 50rpx;}
|
||||
/* 上---内边距 */
|
||||
.pad-s10{padding-top: 10rpx;}
|
||||
.pad-s20{padding-top: 20rpx;}
|
||||
.pad-s25{padding-top: 25rpx;}
|
||||
.pad-s30{padding-top: 30rpx;}
|
||||
.pad-s32{padding-top: 32rpx;}
|
||||
.pad-s36{padding-top: 36rpx;}
|
||||
.pad-s40{padding-top: 40rpx;}
|
||||
.pad-s50{padding-top: 50rpx;}
|
||||
/* 下---内边距 */
|
||||
.pad-x10{padding-bottom: 10rpx;}
|
||||
.pad-x20{padding-bottom: 20rpx;}
|
||||
.pad-x25{padding-bottom: 25rpx;}
|
||||
.pad-x30{padding-bottom: 30rpx;}
|
||||
.pad-x32{padding-bottom: 32rpx;}
|
||||
.pad-x36{padding-bottom: 36rpx;}
|
||||
.pad-x40{padding-bottom: 40rpx;}
|
||||
.pad-x50{padding-bottom: 50rpx;}
|
||||
.pad-x120{padding-bottom: 120rpx;}
|
||||
.pad-x140{padding-bottom: 140rpx;}
|
||||
.pad-x160{padding-bottom: 160rpx;}
|
||||
.pad-x180{padding-bottom: 180rpx;}
|
||||
.pad-x260{padding-bottom: 260rpx;}
|
||||
/* 左---内边距 */
|
||||
.pad-z10{padding-left: 10rpx;}
|
||||
.pad-z20{padding-left: 20rpx;}
|
||||
.pad-z25{padding-left: 25rpx;}
|
||||
.pad-z30{padding-left: 30rpx;}
|
||||
.pad-z32{padding-left: 32rpx;}
|
||||
.pad-z36{padding-left: 36rpx;}
|
||||
.pad-z40{padding-left: 40rpx;}
|
||||
.pad-z50{padding-left: 50rpx;}
|
||||
/* 右---内边距 */
|
||||
.pad-y10{padding-right: 10rpx;}
|
||||
.pad-y20{padding-right: 20rpx;}
|
||||
.pad-y25{padding-right: 25rpx;}
|
||||
.pad-y30{padding-right: 30rpx;}
|
||||
.pad-y32{padding-right: 32rpx;}
|
||||
.pad-y36{padding-right: 36rpx;}
|
||||
.pad-y40{padding-right: 40rpx;}
|
||||
.pad-y50{padding-right: 50rpx;}
|
||||
|
||||
.pad-sx27-zy20{padding: 27rpx 20rpx;}
|
||||
|
||||
|
||||
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3180711 */
|
||||
src: url('https://at.alicdn.com/t/font_3180711_ox3eswimm9g.woff2?t=1645410881050') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_3180711_ox3eswimm9g.woff?t=1645410881050') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_3180711_ox3eswimm9g.ttf?t=1645410881050') format('truetype');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-address-check:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.icon-address-unchecked:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-navigate-now:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.icon-send-goods:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-payment:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-finish:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-take:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.icon-refund:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-customer-black:before {
|
||||
content: "\ec2e";
|
||||
}
|
||||
|
||||
.icon-customer:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-check:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-del-white:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.icon-screen:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-caidan-mo:before {
|
||||
content: "\e73e";
|
||||
}
|
||||
|
||||
.icon-renwu-mo:before {
|
||||
content: "\e73f";
|
||||
}
|
||||
|
||||
.icon-shopp-cart:before {
|
||||
content: "\e73d";
|
||||
}
|
||||
|
||||
.icon-caidan-active:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-renwu-acitve:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.icon-home-mo:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.icon-home-active:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.icon-return:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-next:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<view v-if="showPhone" @touchmove.stop.prevent="moveHandle" class="disjcac posAll">
|
||||
<view class="bacf radius20 width100 tank-box">
|
||||
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
||||
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
||||
<view class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
||||
<view class="pad-sx10 radius10 tank-btn posir pbackc">
|
||||
立即绑定
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"wx_auth_phone",
|
||||
data() {
|
||||
return {
|
||||
showPhone:true
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
moveHandle(){//禁止底层滑动
|
||||
return false
|
||||
},
|
||||
getphonenumber(e){//授权绑定手机号
|
||||
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
||||
this.$requst.post('user/bind-phone',{iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
||||
// console.log('手机号信息：',res);
|
||||
if(res.code==0){
|
||||
this.showPhone = false;
|
||||
this.$toolAll.tools.showToast('手机号绑定成功','success');
|
||||
}
|
||||
},error=>{})
|
||||
} else {
|
||||
console.log('用户拒绝');
|
||||
this.showPhone = true;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<template>
|
||||
<view v-if="visible">
|
||||
<!-- 用户信息授权 -->
|
||||
<view v-if="userInfo_mobile" @touchmove.stop.prevent="moveHandle" :class="isAnimation==2?'card-box-userinfo':''" class="auth-box">
|
||||
<view :class="isAnimation==1?'card-box-userinfo':''" class="userinfo-box">
|
||||
<view class="auth-top">
|
||||
<image :src="appletImg" mode="" lazy-load class="auth-img"></image>
|
||||
<view class="auth-top-content">
|
||||
<view class="userinfo-info">恒美植发客服代表提醒您：</view>
|
||||
<view class="userinfo-info">您当前是游客身份</view>
|
||||
<view class="userinfo-info">是否选择授权登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="auth-center">申请 获取你的昵称、头像、地区及性别</view>
|
||||
<view class="auth-bottom">
|
||||
<view @tap="chooseBtn(0)" :class="isNo?'isNyin':'noyin'" class="btn btn-no">暂不授权</view>
|
||||
<view @tap="chooseBtn(1)" :class="isOk?'isOyin':'noyin'" class="btn btn-yes">
|
||||
<text>立即授权</text>
|
||||
<button open-type="getUserInfo" @tap="shouq" class="auth-btn">立即授权</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 手机号授权 -->
|
||||
<view v-if="!userInfo_mobile" @touchmove.stop.prevent="moveHandle" class="disjcac posAll">
|
||||
<view class="bacf radius20 width100 tank-box">
|
||||
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
||||
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
||||
<view class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
||||
<view class="pad-sx10 radius10 tank-btn posir pbackc">
|
||||
立即绑定
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"empower",
|
||||
props:{
|
||||
optionObj:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {}
|
||||
}
|
||||
},
|
||||
appletImg:{//小程序头像
|
||||
type:String,
|
||||
default:'/static/public/like.png'
|
||||
},
|
||||
appletName:{//小程序名称
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
url:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
isWhere:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOk:false,
|
||||
isNo:false,
|
||||
isAnimation:0,
|
||||
visible:false,
|
||||
userInfo_mobile:true,
|
||||
currentPage:''//当前页面路径
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.optionObj,'参数');
|
||||
if(uni.getStorageSync('is_active')!=1){this.visible = true;}
|
||||
if(this.optionObj.invite_code!='' && this.optionObj.invite_code!=undefined){
|
||||
this.loginEv(this.optionObj.invite_code);
|
||||
} else if(this.optionObj.source_code!='' && this.optionObj.source_code!=undefined){
|
||||
this.loginEv('',this.optionObj.source_code,this.optionObj.channel);
|
||||
}
|
||||
//转发进入
|
||||
let pages = getCurrentPages(); //获取加载的页面
|
||||
let currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
||||
this.currentPage = currentPage.route ;//当前页面url
|
||||
console.log(this.currentPage,'当前页面路径');
|
||||
},
|
||||
methods:{
|
||||
loginEv(invite_code='',source='',channel=''){
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (res)=> {
|
||||
if (res.code) {
|
||||
var params = {
|
||||
code:res.code,
|
||||
invite_code:invite_code,//用户邀请码
|
||||
source_code:source,
|
||||
channel:channel
|
||||
}
|
||||
this.$requst.post('/api/user/login',params).then(res => {
|
||||
if(res.data.token!=''){
|
||||
if(res.data.is_active==0) {
|
||||
this.visible = true;
|
||||
}
|
||||
}
|
||||
},error => {})
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
moveHandle(){
|
||||
return false
|
||||
},
|
||||
tiaoZ(){//跳转方式
|
||||
if(this.isWhere==0) uni.navigateBack({delta:1}) //返回上一页
|
||||
if(this.isWhere==1) uni.navigateTo({url:this.url})//跳转到指定页面
|
||||
if(this.isWhere!=0 && this.isWhere!=1) return//不跳转
|
||||
this.isOk = false;
|
||||
},
|
||||
chooseBtn(index){//暂不授权、立即授权
|
||||
this.$emit('cancleEv',index)//继承事件
|
||||
if(index==0){//暂不授权
|
||||
// this.tiaoZ()
|
||||
uni.navigateTo({
|
||||
url:`/${this.currentPage}`
|
||||
})
|
||||
this.isOk = false
|
||||
} else {
|
||||
this.isOk = !this.isOk
|
||||
this.isNo = false
|
||||
}
|
||||
},
|
||||
shouq(){//立即授权事件
|
||||
let ya = this;
|
||||
this.$toolAll.tools.showToast('正在调起授权...')
|
||||
let code = ''//声明code
|
||||
uni.login({// 获取登录用户code
|
||||
provider: 'weixin',
|
||||
success: function(result) {
|
||||
uni.hideToast()
|
||||
code = result.code
|
||||
},
|
||||
});
|
||||
uni.getUserProfile({//调起微信授权弹框
|
||||
desc: '登录',
|
||||
lang: 'zh_CN',
|
||||
success: (res) => {
|
||||
ya.updateUserInfo(code,res.userInfo);
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('用户拒绝授权');
|
||||
this.tiaoZ()
|
||||
this.$emit('cancleEv',0)
|
||||
this.isOk = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//调用登录接口
|
||||
updateUserInfo(code,userInfo) {
|
||||
let ya = this;
|
||||
uni.showToast({title: '授权中...',icon:'loading',})
|
||||
var params = {
|
||||
code:code,
|
||||
nickname: userInfo.nickName,//用户昵称
|
||||
headimgurl: userInfo.avatarUrl,//用户头像
|
||||
country: userInfo.country,//用户所在国家
|
||||
province: userInfo.province,//用户所在省份
|
||||
city: userInfo.city,//用户所在城市
|
||||
gender: userInfo.gender,//用户性别
|
||||
language:userInfo.language,//语言
|
||||
is_active:1,
|
||||
channel:uni.getStorageSync('channel')
|
||||
}
|
||||
this.$requst.post('/api/user/login',params).then(res => {
|
||||
if(res.data.token!=''){
|
||||
uni.setStorageSync('params',params);
|
||||
uni.setStorageSync('userId',res.data.account_id);
|
||||
uni.setStorageSync('token',res.data.token);//缓存token
|
||||
uni.setStorageSync('expire',res.data.expire);//缓存失效时间（时间戳格式）
|
||||
uni.setStorageSync('is_active',res.data.is_active);//是否第一次授权
|
||||
uni.setStorageSync('invite_code',res.data.invite_code);
|
||||
ya.successAfterEv(userInfo);
|
||||
ya.isAnimation++;
|
||||
ya.userInfo_mobile = false;
|
||||
ya.$emit('onload');
|
||||
}
|
||||
},error => {})
|
||||
},
|
||||
successAfterEv(userInfo){//缓存信息
|
||||
let ya = this
|
||||
uni.hideToast();
|
||||
// console.log(uni.getStorageSync('headImg'));
|
||||
ya.$toolAll.tools.showToast('授权成功','success')
|
||||
ya.$emit('cancleEv',0)
|
||||
ya.$emit('buttonH',true)
|
||||
if(ya.url!=''){
|
||||
setTimeout(()=>{uni.navigateTo({url:ya.url})},1000)
|
||||
}
|
||||
},
|
||||
getphonenumber(e){//授权绑定手机号
|
||||
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
||||
this.$requst.post('user/bind-phone',{iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
||||
// console.log('手机号信息：',res);
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('手机号绑定成功','success');
|
||||
this.visible = false;
|
||||
uni.reLaunch({
|
||||
url:`/${this.currentPage}`
|
||||
})
|
||||
}
|
||||
},error=>{})
|
||||
} else {
|
||||
console.log('用户拒绝');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-box {position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 3;}
|
||||
.auth-box .userinfo-box{background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;}
|
||||
.auth-top {display: flex;}
|
||||
.auth-top .auth-img {width: 96rpx;height: 96rpx;flex-shrink: 0;}
|
||||
.auth-top-content {margin-left: 20rpx;}
|
||||
.auth-top-content .userinfo-info {font-size: 28rpx;margin-top: 20rpx;color: #999999;}
|
||||
.auth-top-content .userinfo-info:nth-child(1) {font-size: 30rpx;font-weight: bold;margin-top: 0;}
|
||||
.auth-center {font-size: 28rpx;margin: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;border-top: 1rpx solid #F5F5F5;padding: 20rpx 0;}
|
||||
.auth-bottom {display: flex;justify-content: center;align-items: center;font-size: 24rpx;}
|
||||
.btn {padding: 12rpx 40rpx;border-radius: 4rpx;}
|
||||
.btn-no {color: #07ad60;background-color: #FFFFFF;border: 1rpx solid #CCCCCC;}
|
||||
.btn-yes {color: #FFFFFF;background-color: #07ad60;border: 1rpx solid #07ad60;position: relative;margin-left: 20rpx;}
|
||||
.auth-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
||||
.isNyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,.5);}
|
||||
.isOyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,1);}
|
||||
.card-box-userinfo {transform: rotate(360deg) scale(0);transition: all 1s ease-in-out;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,411 @@
|
|||
<template>
|
||||
<view :class="modal?'show-qrcode':'hide-qrcode'">
|
||||
<view class="box-qrcode" :style="{'margin-left': marginLeft + 'px'}" @longtap="longtapCode">
|
||||
<!-- style="width: 550rpx;height: 550rpx;" -->
|
||||
|
||||
<canvas class="canvas-qrcode" :style="style_w_h" :canvas-id="qrcode_id">
|
||||
|
||||
<!-- #ifndef MP -->
|
||||
<view v-if="modal&&is_themeImg" :style="style_w_h" class="box-img-qrcode">
|
||||
<image :style="style_w_h_img" mode="scaleToFill" :src="themeImg"></image>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
</canvas>
|
||||
|
||||
<!-- <image mode="scaleToFill" :src="imagePath"></image> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var qr_we = require("./qrcode_wx.js");
|
||||
const qrCode = require('./weapp-qrcode.js')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isAndroid : false ,
|
||||
show: true,
|
||||
imagePath: '',
|
||||
// qrcode_id: 'qrcode_id',
|
||||
marginLeft: 0,
|
||||
//一般的安卓app只需加30就能显示全
|
||||
//苹果app的不加就能显示全，加了就要弄margin-left
|
||||
//有些安卓app显示不全
|
||||
add_num : 30 ,
|
||||
add_num_key : 'rectify_code_key',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 260
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 260
|
||||
},
|
||||
themeColor: {
|
||||
type: String,
|
||||
default: '#333333',
|
||||
},
|
||||
qrcode_id: {
|
||||
type: String,
|
||||
default: 'qrcode_id',
|
||||
},
|
||||
is_themeImg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
themeImg: {
|
||||
type: String,
|
||||
default: 'https://cdn.pixabay.com/photo/2016/11/29/13/24/balloons-1869816__340.jpg',
|
||||
},
|
||||
h_w_img: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
watch:{
|
||||
|
||||
},
|
||||
computed: {
|
||||
style_w_h() {
|
||||
return this.set_style_w_h();
|
||||
},
|
||||
style_w_h_img() {
|
||||
let that = this;
|
||||
var height = parseInt(that.h_w_img);
|
||||
var width = parseInt(that.h_w_img);
|
||||
var style = '';
|
||||
if (height > 0) {
|
||||
style = `height:${height*2}rpx;`;
|
||||
}
|
||||
if (width > 0) {
|
||||
style += `width:${width*2}rpx;z-index: 2;`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
},
|
||||
created: function() {
|
||||
let that = this;
|
||||
try {
|
||||
//app苹果二维码不居中
|
||||
//#ifndef MP
|
||||
let isAndroid = false ;
|
||||
const res = uni.getSystemInfoSync();
|
||||
if(res.platform == 'android'){
|
||||
isAndroid = true ;
|
||||
}else{
|
||||
isAndroid = false ;
|
||||
}
|
||||
|
||||
|
||||
if (!isAndroid) {
|
||||
that.marginLeft = 46;
|
||||
}
|
||||
|
||||
that.isAndroid = isAndroid ;
|
||||
try {
|
||||
const add_num = uni.getStorageSync(that.add_num_key);
|
||||
if (add_num) {
|
||||
that.add_num = add_num;
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
// error
|
||||
|
||||
}
|
||||
// #endif
|
||||
|
||||
} catch (e) {
|
||||
// error
|
||||
}
|
||||
|
||||
//#ifdef MP
|
||||
//that.marginLeft = 40;
|
||||
// #endif
|
||||
|
||||
},
|
||||
methods: {
|
||||
set_style_w_h(){
|
||||
|
||||
let that = this;
|
||||
var height = parseInt(that.height);
|
||||
var width = parseInt(that.width);
|
||||
var style = '';
|
||||
var height = height*2 ;
|
||||
var width = width*2 ;
|
||||
|
||||
//#ifndef MP
|
||||
var add = that.add_num ;
|
||||
|
||||
height += add;
|
||||
width += add;
|
||||
// #endif
|
||||
|
||||
if (height > 0) {
|
||||
style = `height:${height}rpx;`;
|
||||
}
|
||||
if (width > 0) {
|
||||
style += `width:${width}rpx;`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
hideQrcode() {
|
||||
this.$emit("hideQrcode")
|
||||
},
|
||||
// 二维码生成工具
|
||||
crtQrCode() {
|
||||
let that = this;
|
||||
//#ifndef MP
|
||||
new qrCode(that.qrcode_id, {
|
||||
text: this.url,
|
||||
width: that.width,
|
||||
height: that.height,
|
||||
colorDark: that.themeColor,//#333333
|
||||
colorLight: "#FFFFFF",
|
||||
correctLevel: qrCode.CorrectLevel.H,
|
||||
})
|
||||
// #endif
|
||||
//#ifdef MP
|
||||
that.createQrCode(this.url, that.qrcode_id, that.width, that.height,that.themeColor,that.is_themeImg,that.themeImg,that.h_w_img);
|
||||
// #endif
|
||||
|
||||
//that.createQrCode(this.url, that.qrcode_id, that.width, that.height);
|
||||
},
|
||||
//#ifdef MP
|
||||
|
||||
createQrCode: function(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize) {
|
||||
//调用插件中的draw方法，绘制二维码图片
|
||||
qr_we.api.draw(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize, this, this.canvasToTempImage);
|
||||
// setTimeout(() => { this.canvasToTempImage();},100);
|
||||
|
||||
},
|
||||
|
||||
// #endif
|
||||
//获取临时缓存照片路径，存入data中
|
||||
canvasToTempImage: function() {
|
||||
var that = this;
|
||||
},
|
||||
saveImage: function() {
|
||||
var that = this;
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: that.qrcode_id,
|
||||
success: function(res) {
|
||||
var tempFilePath = res.tempFilePath;
|
||||
// console.log(tempFilePath);
|
||||
that.imagePath = tempFilePath;
|
||||
|
||||
//保存到相册
|
||||
// uni.saveFile({
|
||||
// tempFilePath: tempFilePath,
|
||||
// success: function (res2) {
|
||||
// var savedFilePath = res2.savedFilePath;
|
||||
|
||||
|
||||
// }
|
||||
// });
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath : tempFilePath ,
|
||||
success: function (res3) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '保存成功',
|
||||
confirmText: '确定',
|
||||
showCancel: false,
|
||||
confirmColor: '#33CCCC',
|
||||
success(res4) {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
// console.log(res);
|
||||
}
|
||||
}, that);
|
||||
},
|
||||
//微信小程序支持：长按二维码，提示是否保存相册
|
||||
//安卓APP长按校正二维码
|
||||
longtapCode(){
|
||||
var that = this;
|
||||
|
||||
//#ifndef MP
|
||||
uni.showModal({
|
||||
title: '校正二维码',
|
||||
content: '二维码是否异常',
|
||||
confirmText: '确定',
|
||||
confirmColor: '#33CCCC',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
that.rectify_code();
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
//#ifdef MP-WEIXIN
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否保存到相册',
|
||||
confirmText: '确定',
|
||||
confirmColor: '#33CCCC',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
that.saveImage();
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
//安卓有些手机不正常，长按可选择矫正
|
||||
rectify_code(){
|
||||
var that = this;
|
||||
let add_num = that.add_num ;
|
||||
add_num += 30 ;
|
||||
that.add_num = add_num;
|
||||
that.crtQrCode();//重新生成才会立即覆盖
|
||||
try {
|
||||
//第一次长按校正设置了就不用在设置
|
||||
uni.setStorage({
|
||||
key: that.add_num_key,
|
||||
data: add_num,
|
||||
success: function() {
|
||||
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// error
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// .qrcode-box {
|
||||
// position: fixed;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// height: 100vh;
|
||||
// width: 100vw;
|
||||
// background-color: rgba(59, 59, 59, 0.6);
|
||||
// // opacity: 0.8;
|
||||
// text-align: center;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// display: none;
|
||||
|
||||
// .qrcode-item {
|
||||
// flex: 1;
|
||||
// position: relative;
|
||||
// text-align: center;
|
||||
|
||||
// .item-box {
|
||||
// width: 90%;
|
||||
// margin: auto;
|
||||
// display: inline-block;
|
||||
// margin-top: 30%;
|
||||
// padding-bottom: 30rpx;
|
||||
|
||||
// // animation: show 0.7s;
|
||||
// .title {
|
||||
// font-size: 46rpx;
|
||||
// text-align: center;
|
||||
// margin-bottom: 24rpx;
|
||||
// }
|
||||
|
||||
// .canvas {
|
||||
// margin: auto;
|
||||
// display: inline-block;
|
||||
// margin: auto;
|
||||
// }
|
||||
|
||||
// background-color: #FFFFFF;
|
||||
// }
|
||||
|
||||
// }
|
||||
// }
|
||||
.box-qrcode{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.box-img-qrcode{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
image{
|
||||
width: 60upx;
|
||||
height: 60upx;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
.canvas-qrcode {
|
||||
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.opacity-qrcode {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.show-qrcode {
|
||||
display: block;
|
||||
animation: fade 0.7s;
|
||||
|
||||
// -moz-animation: fade 0.5s; /* Firefox */
|
||||
// -webkit-animation: fade 0.5s; /* Safari 和 Chrome */
|
||||
// -o-animation: fade 0.5s;
|
||||
}
|
||||
|
||||
.hide-qrcode {
|
||||
animation: hide 0.7s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,872 @@
|
|||
!(function() {
|
||||
|
||||
// alignment pattern
|
||||
var adelta = [
|
||||
0, 11, 15, 19, 23, 27, 31,
|
||||
16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24,
|
||||
26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28
|
||||
];
|
||||
|
||||
// version block
|
||||
var vpat = [
|
||||
0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d,
|
||||
0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9,
|
||||
0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75,
|
||||
0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64,
|
||||
0x541, 0xc69
|
||||
];
|
||||
|
||||
// final format bits with mask: level << 3 | mask
|
||||
var fmtword = [
|
||||
0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976, //L
|
||||
0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0, //M
|
||||
0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed, //Q
|
||||
0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b //H
|
||||
];
|
||||
|
||||
// 4 per version: number of blocks 1,2; data width; ecc width
|
||||
var eccblocks = [
|
||||
1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17,
|
||||
1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28,
|
||||
1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22,
|
||||
1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16,
|
||||
1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22,
|
||||
2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28,
|
||||
2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26,
|
||||
2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26,
|
||||
2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24,
|
||||
2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28,
|
||||
4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24,
|
||||
2, 2, 92, 24, 6, 2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28,
|
||||
4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22,
|
||||
3, 1, 115, 30, 4, 5, 40, 24, 11, 5, 16, 20, 11, 5, 12, 24,
|
||||
5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24,
|
||||
5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19, 24, 3, 13, 15, 30,
|
||||
1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28,
|
||||
5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2, 19, 14, 28,
|
||||
3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26,
|
||||
3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10, 15, 28,
|
||||
4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30,
|
||||
2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13, 24,
|
||||
4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30,
|
||||
6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30,
|
||||
8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30,
|
||||
10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30,
|
||||
8, 4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30,
|
||||
3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30,
|
||||
7, 7, 116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30,
|
||||
5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30,
|
||||
13, 3, 115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30,
|
||||
17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30,
|
||||
17, 1, 115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30,
|
||||
13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30,
|
||||
12, 7, 121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30,
|
||||
6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30,
|
||||
17, 4, 122, 30, 29, 14, 46, 28, 49, 10, 24, 30, 24, 46, 15, 30,
|
||||
4, 18, 122, 30, 13, 32, 46, 28, 48, 14, 24, 30, 42, 32, 15, 30,
|
||||
20, 4, 117, 30, 40, 7, 47, 28, 43, 22, 24, 30, 10, 67, 15, 30,
|
||||
19, 6, 118, 30, 18, 31, 47, 28, 34, 34, 24, 30, 20, 61, 15, 30
|
||||
];
|
||||
|
||||
// Galois field log table
|
||||
var glog = [
|
||||
0xff, 0x00, 0x01, 0x19, 0x02, 0x32, 0x1a, 0xc6, 0x03, 0xdf, 0x33, 0xee, 0x1b, 0x68, 0xc7, 0x4b,
|
||||
0x04, 0x64, 0xe0, 0x0e, 0x34, 0x8d, 0xef, 0x81, 0x1c, 0xc1, 0x69, 0xf8, 0xc8, 0x08, 0x4c, 0x71,
|
||||
0x05, 0x8a, 0x65, 0x2f, 0xe1, 0x24, 0x0f, 0x21, 0x35, 0x93, 0x8e, 0xda, 0xf0, 0x12, 0x82, 0x45,
|
||||
0x1d, 0xb5, 0xc2, 0x7d, 0x6a, 0x27, 0xf9, 0xb9, 0xc9, 0x9a, 0x09, 0x78, 0x4d, 0xe4, 0x72, 0xa6,
|
||||
0x06, 0xbf, 0x8b, 0x62, 0x66, 0xdd, 0x30, 0xfd, 0xe2, 0x98, 0x25, 0xb3, 0x10, 0x91, 0x22, 0x88,
|
||||
0x36, 0xd0, 0x94, 0xce, 0x8f, 0x96, 0xdb, 0xbd, 0xf1, 0xd2, 0x13, 0x5c, 0x83, 0x38, 0x46, 0x40,
|
||||
0x1e, 0x42, 0xb6, 0xa3, 0xc3, 0x48, 0x7e, 0x6e, 0x6b, 0x3a, 0x28, 0x54, 0xfa, 0x85, 0xba, 0x3d,
|
||||
0xca, 0x5e, 0x9b, 0x9f, 0x0a, 0x15, 0x79, 0x2b, 0x4e, 0xd4, 0xe5, 0xac, 0x73, 0xf3, 0xa7, 0x57,
|
||||
0x07, 0x70, 0xc0, 0xf7, 0x8c, 0x80, 0x63, 0x0d, 0x67, 0x4a, 0xde, 0xed, 0x31, 0xc5, 0xfe, 0x18,
|
||||
0xe3, 0xa5, 0x99, 0x77, 0x26, 0xb8, 0xb4, 0x7c, 0x11, 0x44, 0x92, 0xd9, 0x23, 0x20, 0x89, 0x2e,
|
||||
0x37, 0x3f, 0xd1, 0x5b, 0x95, 0xbc, 0xcf, 0xcd, 0x90, 0x87, 0x97, 0xb2, 0xdc, 0xfc, 0xbe, 0x61,
|
||||
0xf2, 0x56, 0xd3, 0xab, 0x14, 0x2a, 0x5d, 0x9e, 0x84, 0x3c, 0x39, 0x53, 0x47, 0x6d, 0x41, 0xa2,
|
||||
0x1f, 0x2d, 0x43, 0xd8, 0xb7, 0x7b, 0xa4, 0x76, 0xc4, 0x17, 0x49, 0xec, 0x7f, 0x0c, 0x6f, 0xf6,
|
||||
0x6c, 0xa1, 0x3b, 0x52, 0x29, 0x9d, 0x55, 0xaa, 0xfb, 0x60, 0x86, 0xb1, 0xbb, 0xcc, 0x3e, 0x5a,
|
||||
0xcb, 0x59, 0x5f, 0xb0, 0x9c, 0xa9, 0xa0, 0x51, 0x0b, 0xf5, 0x16, 0xeb, 0x7a, 0x75, 0x2c, 0xd7,
|
||||
0x4f, 0xae, 0xd5, 0xe9, 0xe6, 0xe7, 0xad, 0xe8, 0x74, 0xd6, 0xf4, 0xea, 0xa8, 0x50, 0x58, 0xaf
|
||||
];
|
||||
|
||||
// Galios field exponent table
|
||||
var gexp = [
|
||||
0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1d, 0x3a, 0x74, 0xe8, 0xcd, 0x87, 0x13, 0x26,
|
||||
0x4c, 0x98, 0x2d, 0x5a, 0xb4, 0x75, 0xea, 0xc9, 0x8f, 0x03, 0x06, 0x0c, 0x18, 0x30, 0x60, 0xc0,
|
||||
0x9d, 0x27, 0x4e, 0x9c, 0x25, 0x4a, 0x94, 0x35, 0x6a, 0xd4, 0xb5, 0x77, 0xee, 0xc1, 0x9f, 0x23,
|
||||
0x46, 0x8c, 0x05, 0x0a, 0x14, 0x28, 0x50, 0xa0, 0x5d, 0xba, 0x69, 0xd2, 0xb9, 0x6f, 0xde, 0xa1,
|
||||
0x5f, 0xbe, 0x61, 0xc2, 0x99, 0x2f, 0x5e, 0xbc, 0x65, 0xca, 0x89, 0x0f, 0x1e, 0x3c, 0x78, 0xf0,
|
||||
0xfd, 0xe7, 0xd3, 0xbb, 0x6b, 0xd6, 0xb1, 0x7f, 0xfe, 0xe1, 0xdf, 0xa3, 0x5b, 0xb6, 0x71, 0xe2,
|
||||
0xd9, 0xaf, 0x43, 0x86, 0x11, 0x22, 0x44, 0x88, 0x0d, 0x1a, 0x34, 0x68, 0xd0, 0xbd, 0x67, 0xce,
|
||||
0x81, 0x1f, 0x3e, 0x7c, 0xf8, 0xed, 0xc7, 0x93, 0x3b, 0x76, 0xec, 0xc5, 0x97, 0x33, 0x66, 0xcc,
|
||||
0x85, 0x17, 0x2e, 0x5c, 0xb8, 0x6d, 0xda, 0xa9, 0x4f, 0x9e, 0x21, 0x42, 0x84, 0x15, 0x2a, 0x54,
|
||||
0xa8, 0x4d, 0x9a, 0x29, 0x52, 0xa4, 0x55, 0xaa, 0x49, 0x92, 0x39, 0x72, 0xe4, 0xd5, 0xb7, 0x73,
|
||||
0xe6, 0xd1, 0xbf, 0x63, 0xc6, 0x91, 0x3f, 0x7e, 0xfc, 0xe5, 0xd7, 0xb3, 0x7b, 0xf6, 0xf1, 0xff,
|
||||
0xe3, 0xdb, 0xab, 0x4b, 0x96, 0x31, 0x62, 0xc4, 0x95, 0x37, 0x6e, 0xdc, 0xa5, 0x57, 0xae, 0x41,
|
||||
0x82, 0x19, 0x32, 0x64, 0xc8, 0x8d, 0x07, 0x0e, 0x1c, 0x38, 0x70, 0xe0, 0xdd, 0xa7, 0x53, 0xa6,
|
||||
0x51, 0xa2, 0x59, 0xb2, 0x79, 0xf2, 0xf9, 0xef, 0xc3, 0x9b, 0x2b, 0x56, 0xac, 0x45, 0x8a, 0x09,
|
||||
0x12, 0x24, 0x48, 0x90, 0x3d, 0x7a, 0xf4, 0xf5, 0xf7, 0xf3, 0xfb, 0xeb, 0xcb, 0x8b, 0x0b, 0x16,
|
||||
0x2c, 0x58, 0xb0, 0x7d, 0xfa, 0xe9, 0xcf, 0x83, 0x1b, 0x36, 0x6c, 0xd8, 0xad, 0x47, 0x8e, 0x00
|
||||
];
|
||||
|
||||
// Working buffers:
|
||||
// data input and ecc append, image working buffer, fixed part of image, run lengths for badness
|
||||
var strinbuf = [],
|
||||
eccbuf = [],
|
||||
qrframe = [],
|
||||
framask = [],
|
||||
rlens = [];
|
||||
// Control values - width is based on version, last 4 are from table.
|
||||
var version, width, neccblk1, neccblk2, datablkw, eccblkwid;
|
||||
var ecclevel = 2;
|
||||
// set bit to indicate cell in qrframe is immutable. symmetric around diagonal
|
||||
function setmask(x, y) {
|
||||
var bt;
|
||||
if (x > y) {
|
||||
bt = x;
|
||||
x = y;
|
||||
y = bt;
|
||||
}
|
||||
// y*y = 1+3+5...
|
||||
bt = y;
|
||||
bt *= y;
|
||||
bt += y;
|
||||
bt >>= 1;
|
||||
bt += x;
|
||||
framask[bt] = 1;
|
||||
}
|
||||
|
||||
// enter alignment pattern - black to qrframe, white to mask (later black frame merged to mask)
|
||||
function putalign(x, y) {
|
||||
var j;
|
||||
|
||||
qrframe[x + width * y] = 1;
|
||||
for (j = -2; j < 2; j++) {
|
||||
qrframe[(x + j) + width * (y - 2)] = 1;
|
||||
qrframe[(x - 2) + width * (y + j + 1)] = 1;
|
||||
qrframe[(x + 2) + width * (y + j)] = 1;
|
||||
qrframe[(x + j + 1) + width * (y + 2)] = 1;
|
||||
}
|
||||
for (j = 0; j < 2; j++) {
|
||||
setmask(x - 1, y + j);
|
||||
setmask(x + 1, y - j);
|
||||
setmask(x - j, y - 1);
|
||||
setmask(x + j, y + 1);
|
||||
}
|
||||
}
|
||||
|
||||
//========================================================================
|
||||
// Reed Solomon error correction
|
||||
// exponentiation mod N
|
||||
function modnn(x) {
|
||||
while (x >= 255) {
|
||||
x -= 255;
|
||||
x = (x >> 8) + (x & 255);
|
||||
}
|
||||
return x;
|
||||
}
|
||||
|
||||
var genpoly = [];
|
||||
|
||||
// Calculate and append ECC data to data block. Block is in strinbuf, indexes to buffers given.
|
||||
function appendrs(data, dlen, ecbuf, eclen) {
|
||||
var i, j, fb;
|
||||
|
||||
for (i = 0; i < eclen; i++)
|
||||
strinbuf[ecbuf + i] = 0;
|
||||
for (i = 0; i < dlen; i++) {
|
||||
fb = glog[strinbuf[data + i] ^ strinbuf[ecbuf]];
|
||||
if (fb != 255) /* fb term is non-zero */
|
||||
for (j = 1; j < eclen; j++)
|
||||
strinbuf[ecbuf + j - 1] = strinbuf[ecbuf + j] ^ gexp[modnn(fb + genpoly[eclen - j])];
|
||||
else
|
||||
for (j = ecbuf; j < ecbuf + eclen; j++)
|
||||
strinbuf[j] = strinbuf[j + 1];
|
||||
strinbuf[ecbuf + eclen - 1] = fb == 255 ? 0 : gexp[modnn(fb + genpoly[0])];
|
||||
}
|
||||
}
|
||||
|
||||
//========================================================================
|
||||
// Frame data insert following the path rules
|
||||
|
||||
// check mask - since symmetrical use half.
|
||||
function ismasked(x, y) {
|
||||
var bt;
|
||||
if (x > y) {
|
||||
bt = x;
|
||||
x = y;
|
||||
y = bt;
|
||||
}
|
||||
bt = y;
|
||||
bt += y * y;
|
||||
bt >>= 1;
|
||||
bt += x;
|
||||
return framask[bt];
|
||||
}
|
||||
|
||||
//========================================================================
|
||||
// Apply the selected mask out of the 8.
|
||||
function applymask(m) {
|
||||
var x, y, r3x, r3y;
|
||||
|
||||
switch (m) {
|
||||
case 0:
|
||||
for (y = 0; y < width; y++)
|
||||
for (x = 0; x < width; x++)
|
||||
if (!((x + y) & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
break;
|
||||
case 1:
|
||||
for (y = 0; y < width; y++)
|
||||
for (x = 0; x < width; x++)
|
||||
if (!(y & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
break;
|
||||
case 2:
|
||||
for (y = 0; y < width; y++)
|
||||
for (r3x = 0, x = 0; x < width; x++, r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!r3x && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
for (r3y = 0, y = 0; y < width; y++, r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = r3y, x = 0; x < width; x++, r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!r3x && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
for (y = 0; y < width; y++)
|
||||
for (r3x = 0, r3y = ((y >> 1) & 1), x = 0; x < width; x++, r3x++) {
|
||||
if (r3x == 3) {
|
||||
r3x = 0;
|
||||
r3y = !r3y;
|
||||
}
|
||||
if (!r3y && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
break;
|
||||
case 5:
|
||||
for (r3y = 0, y = 0; y < width; y++, r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = 0, x = 0; x < width; x++, r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!((x & y & 1) + !(!r3x | !r3y)) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 6:
|
||||
for (r3y = 0, y = 0; y < width; y++, r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = 0, x = 0; x < width; x++, r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!(((x & y & 1) + (r3x && (r3x == r3y))) & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 7:
|
||||
for (r3y = 0, y = 0; y < width; y++, r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = 0, x = 0; x < width; x++, r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!(((r3x && (r3x == r3y)) + ((x + y) & 1)) & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Badness coefficients.
|
||||
var N1 = 3,
|
||||
N2 = 3,
|
||||
N3 = 40,
|
||||
N4 = 10;
|
||||
|
||||
// Using the table of the length of each run, calculate the amount of bad image
|
||||
// - long runs or those that look like finders; called twice, once each for X and Y
|
||||
function badruns(length) {
|
||||
var i;
|
||||
var runsbad = 0;
|
||||
for (i = 0; i <= length; i++)
|
||||
if (rlens[i] >= 5)
|
||||
runsbad += N1 + rlens[i] - 5;
|
||||
// BwBBBwB as in finder
|
||||
for (i = 3; i < length - 1; i += 2)
|
||||
if (rlens[i - 2] == rlens[i + 2] &&
|
||||
rlens[i + 2] == rlens[i - 1] &&
|
||||
rlens[i - 1] == rlens[i + 1] &&
|
||||
rlens[i - 1] * 3 == rlens[i]
|
||||
// white around the black pattern? Not part of spec
|
||||
&&
|
||||
(rlens[i - 3] == 0 // beginning
|
||||
||
|
||||
i + 3 > length // end
|
||||
||
|
||||
rlens[i - 3] * 3 >= rlens[i] * 4 || rlens[i + 3] * 3 >= rlens[i] * 4)
|
||||
)
|
||||
runsbad += N3;
|
||||
return runsbad;
|
||||
}
|
||||
|
||||
// Calculate how bad the masked image is - blocks, imbalance, runs, or finders.
|
||||
function badcheck() {
|
||||
var x, y, h, b, b1;
|
||||
var thisbad = 0;
|
||||
var bw = 0;
|
||||
|
||||
// blocks of same color.
|
||||
for (y = 0; y < width - 1; y++)
|
||||
for (x = 0; x < width - 1; x++)
|
||||
if ((qrframe[x + width * y] && qrframe[(x + 1) + width * y] &&
|
||||
qrframe[x + width * (y + 1)] && qrframe[(x + 1) + width * (y + 1)]) // all black
|
||||
||
|
||||
!(qrframe[x + width * y] || qrframe[(x + 1) + width * y] ||
|
||||
qrframe[x + width * (y + 1)] || qrframe[(x + 1) + width * (y + 1)])) // all white
|
||||
thisbad += N2;
|
||||
|
||||
// X runs
|
||||
for (y = 0; y < width; y++) {
|
||||
rlens[0] = 0;
|
||||
for (h = b = x = 0; x < width; x++) {
|
||||
if ((b1 = qrframe[x + width * y]) == b)
|
||||
rlens[h]++;
|
||||
else
|
||||
rlens[++h] = 1;
|
||||
b = b1;
|
||||
bw += b ? 1 : -1;
|
||||
}
|
||||
thisbad += badruns(h);
|
||||
}
|
||||
|
||||
// black/white imbalance
|
||||
if (bw < 0)
|
||||
bw = -bw;
|
||||
|
||||
var big = bw;
|
||||
var count = 0;
|
||||
big += big << 2;
|
||||
big <<= 1;
|
||||
while (big > width * width)
|
||||
big -= width * width, count++;
|
||||
thisbad += count * N4;
|
||||
|
||||
// Y runs
|
||||
for (x = 0; x < width; x++) {
|
||||
rlens[0] = 0;
|
||||
for (h = b = y = 0; y < width; y++) {
|
||||
if ((b1 = qrframe[x + width * y]) == b)
|
||||
rlens[h]++;
|
||||
else
|
||||
rlens[++h] = 1;
|
||||
b = b1;
|
||||
}
|
||||
thisbad += badruns(h);
|
||||
}
|
||||
return thisbad;
|
||||
}
|
||||
|
||||
function genframe(instring) {
|
||||
var x, y, k, t, v, i, j, m;
|
||||
|
||||
// find the smallest version that fits the string
|
||||
t = instring.length;
|
||||
version = 0;
|
||||
do {
|
||||
version++;
|
||||
k = (ecclevel - 1) * 4 + (version - 1) * 16;
|
||||
neccblk1 = eccblocks[k++];
|
||||
neccblk2 = eccblocks[k++];
|
||||
datablkw = eccblocks[k++];
|
||||
eccblkwid = eccblocks[k];
|
||||
k = datablkw * (neccblk1 + neccblk2) + neccblk2 - 3 + (version <= 9);
|
||||
if (t <= k)
|
||||
break;
|
||||
} while (version < 40);
|
||||
|
||||
// FIXME - insure that it fits insted of being truncated
|
||||
width = 17 + 4 * version;
|
||||
|
||||
// allocate, clear and setup data structures
|
||||
v = datablkw + (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
|
||||
for (t = 0; t < v; t++)
|
||||
eccbuf[t] = 0;
|
||||
strinbuf = instring.slice(0);
|
||||
|
||||
for (t = 0; t < width * width; t++)
|
||||
qrframe[t] = 0;
|
||||
|
||||
for (t = 0; t < (width * (width + 1) + 1) / 2; t++)
|
||||
framask[t] = 0;
|
||||
|
||||
// insert finders - black to frame, white to mask
|
||||
for (t = 0; t < 3; t++) {
|
||||
k = 0;
|
||||
y = 0;
|
||||
if (t == 1)
|
||||
k = (width - 7);
|
||||
if (t == 2)
|
||||
y = (width - 7);
|
||||
qrframe[(y + 3) + width * (k + 3)] = 1;
|
||||
for (x = 0; x < 6; x++) {
|
||||
qrframe[(y + x) + width * k] = 1;
|
||||
qrframe[y + width * (k + x + 1)] = 1;
|
||||
qrframe[(y + 6) + width * (k + x)] = 1;
|
||||
qrframe[(y + x + 1) + width * (k + 6)] = 1;
|
||||
}
|
||||
for (x = 1; x < 5; x++) {
|
||||
setmask(y + x, k + 1);
|
||||
setmask(y + 1, k + x + 1);
|
||||
setmask(y + 5, k + x);
|
||||
setmask(y + x + 1, k + 5);
|
||||
}
|
||||
for (x = 2; x < 4; x++) {
|
||||
qrframe[(y + x) + width * (k + 2)] = 1;
|
||||
qrframe[(y + 2) + width * (k + x + 1)] = 1;
|
||||
qrframe[(y + 4) + width * (k + x)] = 1;
|
||||
qrframe[(y + x + 1) + width * (k + 4)] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// alignment blocks
|
||||
if (version > 1) {
|
||||
t = adelta[version];
|
||||
y = width - 7;
|
||||
for (;;) {
|
||||
x = width - 7;
|
||||
while (x > t - 3) {
|
||||
putalign(x, y);
|
||||
if (x < t)
|
||||
break;
|
||||
x -= t;
|
||||
}
|
||||
if (y <= t + 9)
|
||||
break;
|
||||
y -= t;
|
||||
putalign(6, y);
|
||||
putalign(y, 6);
|
||||
}
|
||||
}
|
||||
|
||||
// single black
|
||||
qrframe[8 + width * (width - 8)] = 1;
|
||||
|
||||
// timing gap - mask only
|
||||
for (y = 0; y < 7; y++) {
|
||||
setmask(7, y);
|
||||
setmask(width - 8, y);
|
||||
setmask(7, y + width - 7);
|
||||
}
|
||||
for (x = 0; x < 8; x++) {
|
||||
setmask(x, 7);
|
||||
setmask(x + width - 8, 7);
|
||||
setmask(x, width - 8);
|
||||
}
|
||||
|
||||
// reserve mask-format area
|
||||
for (x = 0; x < 9; x++)
|
||||
setmask(x, 8);
|
||||
for (x = 0; x < 8; x++) {
|
||||
setmask(x + width - 8, 8);
|
||||
setmask(8, x);
|
||||
}
|
||||
for (y = 0; y < 7; y++)
|
||||
setmask(8, y + width - 7);
|
||||
|
||||
// timing row/col
|
||||
for (x = 0; x < width - 14; x++)
|
||||
if (x & 1) {
|
||||
setmask(8 + x, 6);
|
||||
setmask(6, 8 + x);
|
||||
}
|
||||
else {
|
||||
qrframe[(8 + x) + width * 6] = 1;
|
||||
qrframe[6 + width * (8 + x)] = 1;
|
||||
}
|
||||
|
||||
// version block
|
||||
if (version > 6) {
|
||||
t = vpat[version - 7];
|
||||
k = 17;
|
||||
for (x = 0; x < 6; x++)
|
||||
for (y = 0; y < 3; y++, k--)
|
||||
if (1 & (k > 11 ? version >> (k - 12) : t >> k)) {
|
||||
qrframe[(5 - x) + width * (2 - y + width - 11)] = 1;
|
||||
qrframe[(2 - y + width - 11) + width * (5 - x)] = 1;
|
||||
}
|
||||
else {
|
||||
setmask(5 - x, 2 - y + width - 11);
|
||||
setmask(2 - y + width - 11, 5 - x);
|
||||
}
|
||||
}
|
||||
|
||||
// sync mask bits - only set above for white spaces, so add in black bits
|
||||
for (y = 0; y < width; y++)
|
||||
for (x = 0; x <= y; x++)
|
||||
if (qrframe[x + width * y])
|
||||
setmask(x, y);
|
||||
|
||||
// convert string to bitstream
|
||||
// 8 bit data to QR-coded 8 bit data (numeric or alphanum, or kanji not supported)
|
||||
v = strinbuf.length;
|
||||
|
||||
// string to array
|
||||
for (i = 0; i < v; i++)
|
||||
eccbuf[i] = strinbuf.charCodeAt(i);
|
||||
strinbuf = eccbuf.slice(0);
|
||||
|
||||
// calculate max string length
|
||||
x = datablkw * (neccblk1 + neccblk2) + neccblk2;
|
||||
if (v >= x - 2) {
|
||||
v = x - 2;
|
||||
if (version > 9)
|
||||
v--;
|
||||
}
|
||||
|
||||
// shift and repack to insert length prefix
|
||||
i = v;
|
||||
if (version > 9) {
|
||||
strinbuf[i + 2] = 0;
|
||||
strinbuf[i + 3] = 0;
|
||||
while (i--) {
|
||||
t = strinbuf[i];
|
||||
strinbuf[i + 3] |= 255 & (t << 4);
|
||||
strinbuf[i + 2] = t >> 4;
|
||||
}
|
||||
strinbuf[2] |= 255 & (v << 4);
|
||||
strinbuf[1] = v >> 4;
|
||||
strinbuf[0] = 0x40 | (v >> 12);
|
||||
} else {
|
||||
strinbuf[i + 1] = 0;
|
||||
strinbuf[i + 2] = 0;
|
||||
while (i--) {
|
||||
t = strinbuf[i];
|
||||
strinbuf[i + 2] |= 255 & (t << 4);
|
||||
strinbuf[i + 1] = t >> 4;
|
||||
}
|
||||
strinbuf[1] |= 255 & (v << 4);
|
||||
strinbuf[0] = 0x40 | (v >> 4);
|
||||
}
|
||||
// fill to end with pad pattern
|
||||
i = v + 3 - (version < 10);
|
||||
while (i < x) {
|
||||
strinbuf[i++] = 0xec;
|
||||
// buffer has room if (i == x) break;
|
||||
strinbuf[i++] = 0x11;
|
||||
}
|
||||
|
||||
// calculate and append ECC
|
||||
|
||||
// calculate generator polynomial
|
||||
genpoly[0] = 1;
|
||||
for (i = 0; i < eccblkwid; i++) {
|
||||
genpoly[i + 1] = 1;
|
||||
for (j = i; j > 0; j--)
|
||||
genpoly[j] = genpoly[j] ?
|
||||
genpoly[j - 1] ^ gexp[modnn(glog[genpoly[j]] + i)] : genpoly[j - 1];
|
||||
genpoly[0] = gexp[modnn(glog[genpoly[0]] + i)];
|
||||
}
|
||||
for (i = 0; i <= eccblkwid; i++)
|
||||
genpoly[i] = glog[genpoly[i]]; // use logs for genpoly[] to save calc step
|
||||
|
||||
// append ecc to data buffer
|
||||
k = x;
|
||||
y = 0;
|
||||
for (i = 0; i < neccblk1; i++) {
|
||||
appendrs(y, datablkw, k, eccblkwid);
|
||||
y += datablkw;
|
||||
k += eccblkwid;
|
||||
}
|
||||
for (i = 0; i < neccblk2; i++) {
|
||||
appendrs(y, datablkw + 1, k, eccblkwid);
|
||||
y += datablkw + 1;
|
||||
k += eccblkwid;
|
||||
}
|
||||
// interleave blocks
|
||||
y = 0;
|
||||
for (i = 0; i < datablkw; i++) {
|
||||
for (j = 0; j < neccblk1; j++)
|
||||
eccbuf[y++] = strinbuf[i + j * datablkw];
|
||||
for (j = 0; j < neccblk2; j++)
|
||||
eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
|
||||
}
|
||||
for (j = 0; j < neccblk2; j++)
|
||||
eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
|
||||
for (i = 0; i < eccblkwid; i++)
|
||||
for (j = 0; j < neccblk1 + neccblk2; j++)
|
||||
eccbuf[y++] = strinbuf[x + i + j * eccblkwid];
|
||||
strinbuf = eccbuf;
|
||||
|
||||
// pack bits into frame avoiding masked area.
|
||||
x = y = width - 1;
|
||||
k = v = 1; // up, minus
|
||||
/* inteleaved data and ecc codes */
|
||||
m = (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
|
||||
for (i = 0; i < m; i++) {
|
||||
t = strinbuf[i];
|
||||
for (j = 0; j < 8; j++, t <<= 1) {
|
||||
if (0x80 & t)
|
||||
qrframe[x + width * y] = 1;
|
||||
do { // find next fill position
|
||||
if (v)
|
||||
x--;
|
||||
else {
|
||||
x++;
|
||||
if (k) {
|
||||
if (y != 0)
|
||||
y--;
|
||||
else {
|
||||
x -= 2;
|
||||
k = !k;
|
||||
if (x == 6) {
|
||||
x--;
|
||||
y = 9;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (y != width - 1)
|
||||
y++;
|
||||
else {
|
||||
x -= 2;
|
||||
k = !k;
|
||||
if (x == 6) {
|
||||
x--;
|
||||
y -= 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
v = !v;
|
||||
} while (ismasked(x, y));
|
||||
}
|
||||
}
|
||||
|
||||
// save pre-mask copy of frame
|
||||
strinbuf = qrframe.slice(0);
|
||||
t = 0; // best
|
||||
y = 30000; // demerit
|
||||
// for instead of while since in original arduino code
|
||||
// if an early mask was "good enough" it wouldn't try for a better one
|
||||
// since they get more complex and take longer.
|
||||
for (k = 0; k < 8; k++) {
|
||||
applymask(k); // returns black-white imbalance
|
||||
x = badcheck();
|
||||
if (x < y) { // current mask better than previous best?
|
||||
y = x;
|
||||
t = k;
|
||||
}
|
||||
if (t == 7)
|
||||
break; // don't increment i to a void redoing mask
|
||||
qrframe = strinbuf.slice(0); // reset for next pass
|
||||
}
|
||||
if (t != k) // redo best mask - none good enough, last wasn't t
|
||||
applymask(t);
|
||||
|
||||
// add in final mask/ecclevel bytes
|
||||
y = fmtword[t + ((ecclevel - 1) << 3)];
|
||||
// low byte
|
||||
for (k = 0; k < 8; k++, y >>= 1)
|
||||
if (y & 1) {
|
||||
qrframe[(width - 1 - k) + width * 8] = 1;
|
||||
if (k < 6)
|
||||
qrframe[8 + width * k] = 1;
|
||||
else
|
||||
qrframe[8 + width * (k + 1)] = 1;
|
||||
}
|
||||
// high byte
|
||||
for (k = 0; k < 7; k++, y >>= 1)
|
||||
if (y & 1) {
|
||||
qrframe[8 + width * (width - 7 + k)] = 1;
|
||||
if (k)
|
||||
qrframe[(6 - k) + width * 8] = 1;
|
||||
else
|
||||
qrframe[7 + width * 8] = 1;
|
||||
}
|
||||
return qrframe;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var _canvas = null;
|
||||
|
||||
var api = {
|
||||
|
||||
get ecclevel() {
|
||||
return ecclevel;
|
||||
},
|
||||
|
||||
set ecclevel(val) {
|
||||
ecclevel = val;
|
||||
},
|
||||
|
||||
get size() {
|
||||
return _size;
|
||||
},
|
||||
|
||||
set size(val) {
|
||||
_size = val
|
||||
},
|
||||
|
||||
get canvas() {
|
||||
return _canvas;
|
||||
},
|
||||
|
||||
set canvas(el) {
|
||||
_canvas = el;
|
||||
},
|
||||
|
||||
getFrame: function(string) {
|
||||
return genframe(string);
|
||||
},
|
||||
//这里的utf16to8(str)是对Text中的字符串进行转码，让其支持中文
|
||||
utf16to8: function(str) {
|
||||
var out, i, len, c;
|
||||
|
||||
out = "";
|
||||
len = str.length;
|
||||
for (i = 0; i < len; i++) {
|
||||
c = str.charCodeAt(i);
|
||||
if ((c >= 0x0001) && (c <= 0x007F)) {
|
||||
out += str.charAt(i);
|
||||
} else if (c > 0x07FF) {
|
||||
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
|
||||
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
|
||||
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
|
||||
} else {
|
||||
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
|
||||
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
|
||||
}
|
||||
}
|
||||
return out;
|
||||
},
|
||||
/**
|
||||
* 新增$this参数，传入组件的this,兼容在组件中生成
|
||||
*/
|
||||
draw: function(str, canvas, cavW, cavH, cavColor, haveImg, imageUrl, imageSize, $this, cb = function() {}, ecc) {
|
||||
var that = this;
|
||||
ecclevel = ecc || ecclevel;
|
||||
canvas = canvas || _canvas;
|
||||
if (!canvas) {
|
||||
console.warn('No canvas provided to draw QR code in!')
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let pre_background = "#ffffff";
|
||||
var size = Math.min(cavW, cavH);
|
||||
str = that.utf16to8(str); //增加中文显示
|
||||
|
||||
var frame = that.getFrame(str);
|
||||
// 组件中生成qrcode需要绑定this
|
||||
var ctx = uni.createCanvasContext(canvas, $this);
|
||||
var px = Math.round(size / (width ));
|
||||
|
||||
var roundedSize = px * (width);
|
||||
// var px = 1 ;
|
||||
// var roundedSize = px * (width + 8) ;
|
||||
|
||||
//var roundedSize = 0 ;
|
||||
//var offset = Math.floor((size - roundedSize) / 2);
|
||||
var offset = 0 ;
|
||||
size = roundedSize;
|
||||
//ctx.clearRect(0, 0, cavW, cavW);
|
||||
ctx.setFillStyle(pre_background)
|
||||
ctx.fillRect(0, 0, cavW, cavW);
|
||||
ctx.setFillStyle(cavColor);
|
||||
for (var i = 0; i < width; i++) {
|
||||
for (var j = 0; j < width; j++) {
|
||||
if (frame[j * width + i]) {
|
||||
ctx.fillRect(px * ( i) + offset, px * ( j) + offset, px, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//画图片
|
||||
if (haveImg) {
|
||||
try {
|
||||
var x = Number(((cavW - imageSize - 14) / 2).toFixed(2));
|
||||
var y = Number(((cavH - imageSize -14) / 2).toFixed(2));
|
||||
drawRoundedRect(ctx, x, y, imageSize, imageSize, imageSize / 2, 6, true, true)
|
||||
|
||||
let isNetImg = false;
|
||||
|
||||
isNetImg = imageUrl.substr(0, 4) == 'http' ? true : false;
|
||||
|
||||
if (isNetImg) {
|
||||
//网络图片下载到本地
|
||||
uni.getImageInfo({
|
||||
src: imageUrl,
|
||||
success: function(res) {
|
||||
ctx.drawImage(res.path, x, y, imageSize, imageSize);
|
||||
//--增加绘制完成回调
|
||||
ctx.draw(false, function() {
|
||||
cb();
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
ctx.drawImage(imageUrl, x, y, imageSize, imageSize);
|
||||
//--增加绘制完成回调
|
||||
ctx.draw(false, function() {
|
||||
cb();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 画圆角矩形
|
||||
function drawRoundedRect(ctxi, x, y, width, height, r, lineWidth, fill, stroke) {
|
||||
ctxi.setLineWidth(lineWidth);
|
||||
ctxi.setFillStyle(pre_background);
|
||||
ctxi.setStrokeStyle(pre_background);
|
||||
ctxi.beginPath(); // draw top and top right corner
|
||||
ctxi.moveTo(x + r, y);
|
||||
ctxi.arcTo(x + width, y, x + width, y + r, r); // draw right side and bottom right corner
|
||||
ctxi.arcTo(x + width, y + height, x + width - r, y + height, r); // draw bottom and bottom left corner
|
||||
ctxi.arcTo(x, y + height, x, y + height - r, r); // draw left and top left corner
|
||||
ctxi.arcTo(x, y, x + r, y, r);
|
||||
ctxi.closePath();
|
||||
if (fill) {
|
||||
ctxi.fill();
|
||||
}
|
||||
if (stroke) {
|
||||
ctxi.stroke();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
|
||||
} else {
|
||||
//--增加绘制完成回调
|
||||
ctx.draw(false, function() {
|
||||
cb();
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
module.exports = {
|
||||
api
|
||||
}
|
||||
})();
|
||||
|
|
@ -0,0 +1,424 @@
|
|||
//Core code comes from https://github.com/davidshimjs/qrcodejs
|
||||
|
||||
var QRCode;
|
||||
|
||||
(function () {
|
||||
/**
|
||||
* Get the type by string length
|
||||
*
|
||||
* @private
|
||||
* @param {String} sText
|
||||
* @param {Number} nCorrectLevel
|
||||
* @return {Number} type
|
||||
*/
|
||||
function _getTypeNumber(sText, nCorrectLevel) {
|
||||
var nType = 1;
|
||||
var length = _getUTF8Length(sText);
|
||||
|
||||
for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {
|
||||
var nLimit = 0;
|
||||
|
||||
switch (nCorrectLevel) {
|
||||
case QRErrorCorrectLevel.L:
|
||||
nLimit = QRCodeLimitLength[i][0];
|
||||
break;
|
||||
case QRErrorCorrectLevel.M:
|
||||
nLimit = QRCodeLimitLength[i][1];
|
||||
break;
|
||||
case QRErrorCorrectLevel.Q:
|
||||
nLimit = QRCodeLimitLength[i][2];
|
||||
break;
|
||||
case QRErrorCorrectLevel.H:
|
||||
nLimit = QRCodeLimitLength[i][3];
|
||||
break;
|
||||
}
|
||||
|
||||
if (length <= nLimit) {
|
||||
break;
|
||||
} else {
|
||||
nType++;
|
||||
}
|
||||
}
|
||||
|
||||
if (nType > QRCodeLimitLength.length) {
|
||||
throw new Error("Too long data");
|
||||
}
|
||||
|
||||
return nType;
|
||||
}
|
||||
|
||||
function _getUTF8Length(sText) {
|
||||
var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');
|
||||
return replacedText.length + (replacedText.length != sText ? 3 : 0);
|
||||
}
|
||||
|
||||
function QR8bitByte(data) {
|
||||
this.mode = QRMode.MODE_8BIT_BYTE;
|
||||
this.data = data;
|
||||
this.parsedData = [];
|
||||
|
||||
// Added to support UTF-8 Characters
|
||||
for (var i = 0, l = this.data.length; i < l; i++) {
|
||||
var byteArray = [];
|
||||
var code = this.data.charCodeAt(i);
|
||||
|
||||
if (code > 0x10000) {
|
||||
byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
|
||||
byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
|
||||
byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
|
||||
byteArray[3] = 0x80 | (code & 0x3F);
|
||||
} else if (code > 0x800) {
|
||||
byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
|
||||
byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
|
||||
byteArray[2] = 0x80 | (code & 0x3F);
|
||||
} else if (code > 0x80) {
|
||||
byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
|
||||
byteArray[1] = 0x80 | (code & 0x3F);
|
||||
} else {
|
||||
byteArray[0] = code;
|
||||
}
|
||||
|
||||
this.parsedData.push(byteArray);
|
||||
}
|
||||
|
||||
this.parsedData = Array.prototype.concat.apply([], this.parsedData);
|
||||
|
||||
if (this.parsedData.length != this.data.length) {
|
||||
this.parsedData.unshift(191);
|
||||
this.parsedData.unshift(187);
|
||||
this.parsedData.unshift(239);
|
||||
}
|
||||
}
|
||||
|
||||
QR8bitByte.prototype = {
|
||||
getLength: function (buffer) {
|
||||
return this.parsedData.length;
|
||||
},
|
||||
write: function (buffer) {
|
||||
for (var i = 0, l = this.parsedData.length; i < l; i++) {
|
||||
buffer.put(this.parsedData[i], 8);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// QRCodeModel
|
||||
function QRCodeModel(typeNumber, errorCorrectLevel) {
|
||||
this.typeNumber = typeNumber;
|
||||
this.errorCorrectLevel = errorCorrectLevel;
|
||||
this.modules = null;
|
||||
this.moduleCount = 0;
|
||||
this.dataCache = null;
|
||||
this.dataList = [];
|
||||
}
|
||||
QRCodeModel.prototype = {
|
||||
addData: function (data) { var newData = new QR8bitByte(data); this.dataList.push(newData); this.dataCache = null; }, isDark: function (row, col) {
|
||||
if (row < 0 || this.moduleCount <= row || col < 0 || this.moduleCount <= col) { throw new Error(row + "," + col); }
|
||||
return this.modules[row][col];
|
||||
}, getModuleCount: function () { return this.moduleCount; }, make: function () { this.makeImpl(false, this.getBestMaskPattern()); }, makeImpl: function (test, maskPattern) {
|
||||
this.moduleCount = this.typeNumber * 4 + 17; this.modules = new Array(this.moduleCount); for (var row = 0; row < this.moduleCount; row++) { this.modules[row] = new Array(this.moduleCount); for (var col = 0; col < this.moduleCount; col++) { this.modules[row][col] = null; } }
|
||||
this.setupPositionProbePattern(0, 0); this.setupPositionProbePattern(this.moduleCount - 7, 0); this.setupPositionProbePattern(0, this.moduleCount - 7); this.setupPositionAdjustPattern(); this.setupTimingPattern(); this.setupTypeInfo(test, maskPattern); if (this.typeNumber >= 7) { this.setupTypeNumber(test); }
|
||||
if (this.dataCache == null) { this.dataCache = QRCodeModel.createData(this.typeNumber, this.errorCorrectLevel, this.dataList); }
|
||||
this.mapData(this.dataCache, maskPattern);
|
||||
}, setupPositionProbePattern: function (row, col) { for (var r = -1; r <= 7; r++) { if (row + r <= -1 || this.moduleCount <= row + r) continue; for (var c = -1; c <= 7; c++) { if (col + c <= -1 || this.moduleCount <= col + c) continue; if ((0 <= r && r <= 6 && (c == 0 || c == 6)) || (0 <= c && c <= 6 && (r == 0 || r == 6)) || (2 <= r && r <= 4 && 2 <= c && c <= 4)) { this.modules[row + r][col + c] = true; } else { this.modules[row + r][col + c] = false; } } } }, getBestMaskPattern: function () {
|
||||
var minLostPoint = 0; var pattern = 0; for (var i = 0; i < 8; i++) { this.makeImpl(true, i); var lostPoint = QRUtil.getLostPoint(this); if (i == 0 || minLostPoint > lostPoint) { minLostPoint = lostPoint; pattern = i; } }
|
||||
return pattern;
|
||||
}, createMovieClip: function (target_mc, instance_name, depth) {
|
||||
var qr_mc = target_mc.createEmptyMovieClip(instance_name, depth); var cs = 1; this.make(); for (var row = 0; row < this.modules.length; row++) { var y = row * cs; for (var col = 0; col < this.modules[row].length; col++) { var x = col * cs; var dark = this.modules[row][col]; if (dark) { qr_mc.beginFill(0, 100); qr_mc.moveTo(x, y); qr_mc.lineTo(x + cs, y); qr_mc.lineTo(x + cs, y + cs); qr_mc.lineTo(x, y + cs); qr_mc.endFill(); } } }
|
||||
return qr_mc;
|
||||
}, setupTimingPattern: function () {
|
||||
for (var r = 8; r < this.moduleCount - 8; r++) {
|
||||
if (this.modules[r][6] != null) { continue; }
|
||||
this.modules[r][6] = (r % 2 == 0);
|
||||
}
|
||||
for (var c = 8; c < this.moduleCount - 8; c++) {
|
||||
if (this.modules[6][c] != null) { continue; }
|
||||
this.modules[6][c] = (c % 2 == 0);
|
||||
}
|
||||
}, setupPositionAdjustPattern: function () {
|
||||
var pos = QRUtil.getPatternPosition(this.typeNumber); for (var i = 0; i < pos.length; i++) {
|
||||
for (var j = 0; j < pos.length; j++) {
|
||||
var row = pos[i]; var col = pos[j]; if (this.modules[row][col] != null) { continue; }
|
||||
for (var r = -2; r <= 2; r++) { for (var c = -2; c <= 2; c++) { if (r == -2 || r == 2 || c == -2 || c == 2 || (r == 0 && c == 0)) { this.modules[row + r][col + c] = true; } else { this.modules[row + r][col + c] = false; } } }
|
||||
}
|
||||
}
|
||||
}, setupTypeNumber: function (test) {
|
||||
var bits = QRUtil.getBCHTypeNumber(this.typeNumber); for (var i = 0; i < 18; i++) { var mod = (!test && ((bits >> i) & 1) == 1); this.modules[Math.floor(i / 3)][i % 3 + this.moduleCount - 8 - 3] = mod; }
|
||||
for (var i = 0; i < 18; i++) { var mod = (!test && ((bits >> i) & 1) == 1); this.modules[i % 3 + this.moduleCount - 8 - 3][Math.floor(i / 3)] = mod; }
|
||||
}, setupTypeInfo: function (test, maskPattern) {
|
||||
var data = (this.errorCorrectLevel << 3) | maskPattern; var bits = QRUtil.getBCHTypeInfo(data); for (var i = 0; i < 15; i++) { var mod = (!test && ((bits >> i) & 1) == 1); if (i < 6) { this.modules[i][8] = mod; } else if (i < 8) { this.modules[i + 1][8] = mod; } else { this.modules[this.moduleCount - 15 + i][8] = mod; } }
|
||||
for (var i = 0; i < 15; i++) { var mod = (!test && ((bits >> i) & 1) == 1); if (i < 8) { this.modules[8][this.moduleCount - i - 1] = mod; } else if (i < 9) { this.modules[8][15 - i - 1 + 1] = mod; } else { this.modules[8][15 - i - 1] = mod; } }
|
||||
this.modules[this.moduleCount - 8][8] = (!test);
|
||||
}, mapData: function (data, maskPattern) {
|
||||
var inc = -1; var row = this.moduleCount - 1; var bitIndex = 7; var byteIndex = 0; for (var col = this.moduleCount - 1; col > 0; col -= 2) {
|
||||
if (col == 6) col--; while (true) {
|
||||
for (var c = 0; c < 2; c++) {
|
||||
if (this.modules[row][col - c] == null) {
|
||||
var dark = false; if (byteIndex < data.length) { dark = (((data[byteIndex] >>> bitIndex) & 1) == 1); }
|
||||
var mask = QRUtil.getMask(maskPattern, row, col - c); if (mask) { dark = !dark; }
|
||||
this.modules[row][col - c] = dark; bitIndex--; if (bitIndex == -1) { byteIndex++; bitIndex = 7; }
|
||||
}
|
||||
}
|
||||
row += inc; if (row < 0 || this.moduleCount <= row) { row -= inc; inc = -inc; break; }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
QRCodeModel.PAD0 = 0xEC;
|
||||
QRCodeModel.PAD1 = 0x11;
|
||||
QRCodeModel.createData = function (typeNumber, errorCorrectLevel, dataList) {
|
||||
var rsBlocks = QRRSBlock.getRSBlocks(typeNumber, errorCorrectLevel); var buffer = new QRBitBuffer(); for (var i = 0; i < dataList.length; i++) { var data = dataList[i]; buffer.put(data.mode, 4); buffer.put(data.getLength(), QRUtil.getLengthInBits(data.mode, typeNumber)); data.write(buffer); }
|
||||
var totalDataCount = 0; for (var i = 0; i < rsBlocks.length; i++) { totalDataCount += rsBlocks[i].dataCount; }
|
||||
if (buffer.getLengthInBits() > totalDataCount * 8) {
|
||||
throw new Error("code length overflow. ("
|
||||
+ buffer.getLengthInBits()
|
||||
+ ">"
|
||||
+ totalDataCount * 8
|
||||
+ ")");
|
||||
}
|
||||
if (buffer.getLengthInBits() + 4 <= totalDataCount * 8) { buffer.put(0, 4); }
|
||||
while (buffer.getLengthInBits() % 8 != 0) { buffer.putBit(false); }
|
||||
while (true) {
|
||||
if (buffer.getLengthInBits() >= totalDataCount * 8) { break; }
|
||||
buffer.put(QRCodeModel.PAD0, 8); if (buffer.getLengthInBits() >= totalDataCount * 8) { break; }
|
||||
buffer.put(QRCodeModel.PAD1, 8);
|
||||
}
|
||||
return QRCodeModel.createBytes(buffer, rsBlocks);
|
||||
};
|
||||
QRCodeModel.createBytes = function (buffer, rsBlocks) {
|
||||
var offset = 0; var maxDcCount = 0; var maxEcCount = 0; var dcdata = new Array(rsBlocks.length); var ecdata = new Array(rsBlocks.length); for (var r = 0; r < rsBlocks.length; r++) {
|
||||
var dcCount = rsBlocks[r].dataCount; var ecCount = rsBlocks[r].totalCount - dcCount; maxDcCount = Math.max(maxDcCount, dcCount); maxEcCount = Math.max(maxEcCount, ecCount); dcdata[r] = new Array(dcCount); for (var i = 0; i < dcdata[r].length; i++) { dcdata[r][i] = 0xff & buffer.buffer[i + offset]; }
|
||||
offset += dcCount; var rsPoly = QRUtil.getErrorCorrectPolynomial(ecCount); var rawPoly = new QRPolynomial(dcdata[r], rsPoly.getLength() - 1); var modPoly = rawPoly.mod(rsPoly); ecdata[r] = new Array(rsPoly.getLength() - 1); for (var i = 0; i < ecdata[r].length; i++) { var modIndex = i + modPoly.getLength() - ecdata[r].length; ecdata[r][i] = (modIndex >= 0) ? modPoly.get(modIndex) : 0; }
|
||||
}
|
||||
var totalCodeCount = 0; for (var i = 0; i < rsBlocks.length; i++) { totalCodeCount += rsBlocks[i].totalCount; }
|
||||
var data = new Array(totalCodeCount); var index = 0; for (var i = 0; i < maxDcCount; i++) { for (var r = 0; r < rsBlocks.length; r++) { if (i < dcdata[r].length) { data[index++] = dcdata[r][i]; } } }
|
||||
for (var i = 0; i < maxEcCount; i++) { for (var r = 0; r < rsBlocks.length; r++) { if (i < ecdata[r].length) { data[index++] = ecdata[r][i]; } } }
|
||||
return data;
|
||||
};
|
||||
var QRMode = { MODE_NUMBER: 1 << 0, MODE_ALPHA_NUM: 1 << 1, MODE_8BIT_BYTE: 1 << 2, MODE_KANJI: 1 << 3 };
|
||||
var QRErrorCorrectLevel = { L: 1, M: 0, Q: 3, H: 2 };
|
||||
var QRMaskPattern = { PATTERN000: 0, PATTERN001: 1, PATTERN010: 2, PATTERN011: 3, PATTERN100: 4, PATTERN101: 5, PATTERN110: 6, PATTERN111: 7 };
|
||||
var QRUtil = {
|
||||
PATTERN_POSITION_TABLE: [[], [6, 18], [6, 22], [6, 26], [6, 30], [6, 34], [6, 22, 38], [6, 24, 42], [6, 26, 46], [6, 28, 50], [6, 30, 54], [6, 32, 58], [6, 34, 62], [6, 26, 46, 66], [6, 26, 48, 70], [6, 26, 50, 74], [6, 30, 54, 78], [6, 30, 56, 82], [6, 30, 58, 86], [6, 34, 62, 90], [6, 28, 50, 72, 94], [6, 26, 50, 74, 98], [6, 30, 54, 78, 102], [6, 28, 54, 80, 106], [6, 32, 58, 84, 110], [6, 30, 58, 86, 114], [6, 34, 62, 90, 118], [6, 26, 50, 74, 98, 122], [6, 30, 54, 78, 102, 126], [6, 26, 52, 78, 104, 130], [6, 30, 56, 82, 108, 134], [6, 34, 60, 86, 112, 138], [6, 30, 58, 86, 114, 142], [6, 34, 62, 90, 118, 146], [6, 30, 54, 78, 102, 126, 150], [6, 24, 50, 76, 102, 128, 154], [6, 28, 54, 80, 106, 132, 158], [6, 32, 58, 84, 110, 136, 162], [6, 26, 54, 82, 110, 138, 166], [6, 30, 58, 86, 114, 142, 170]], G15: (1 << 10) | (1 << 8) | (1 << 5) | (1 << 4) | (1 << 2) | (1 << 1) | (1 << 0), G18: (1 << 12) | (1 << 11) | (1 << 10) | (1 << 9) | (1 << 8) | (1 << 5) | (1 << 2) | (1 << 0), G15_MASK: (1 << 14) | (1 << 12) | (1 << 10) | (1 << 4) | (1 << 1), getBCHTypeInfo: function (data) {
|
||||
var d = data << 10; while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15) >= 0) { d ^= (QRUtil.G15 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G15))); }
|
||||
return ((data << 10) | d) ^ QRUtil.G15_MASK;
|
||||
}, getBCHTypeNumber: function (data) {
|
||||
var d = data << 12; while (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18) >= 0) { d ^= (QRUtil.G18 << (QRUtil.getBCHDigit(d) - QRUtil.getBCHDigit(QRUtil.G18))); }
|
||||
return (data << 12) | d;
|
||||
}, getBCHDigit: function (data) {
|
||||
var digit = 0; while (data != 0) { digit++; data >>>= 1; }
|
||||
return digit;
|
||||
}, getPatternPosition: function (typeNumber) { return QRUtil.PATTERN_POSITION_TABLE[typeNumber - 1]; }, getMask: function (maskPattern, i, j) { switch (maskPattern) { case QRMaskPattern.PATTERN000: return (i + j) % 2 == 0; case QRMaskPattern.PATTERN001: return i % 2 == 0; case QRMaskPattern.PATTERN010: return j % 3 == 0; case QRMaskPattern.PATTERN011: return (i + j) % 3 == 0; case QRMaskPattern.PATTERN100: return (Math.floor(i / 2) + Math.floor(j / 3)) % 2 == 0; case QRMaskPattern.PATTERN101: return (i * j) % 2 + (i * j) % 3 == 0; case QRMaskPattern.PATTERN110: return ((i * j) % 2 + (i * j) % 3) % 2 == 0; case QRMaskPattern.PATTERN111: return ((i * j) % 3 + (i + j) % 2) % 2 == 0; default: throw new Error("bad maskPattern:" + maskPattern); } }, getErrorCorrectPolynomial: function (errorCorrectLength) {
|
||||
var a = new QRPolynomial([1], 0); for (var i = 0; i < errorCorrectLength; i++) { a = a.multiply(new QRPolynomial([1, QRMath.gexp(i)], 0)); }
|
||||
return a;
|
||||
}, getLengthInBits: function (mode, type) { if (1 <= type && type < 10) { switch (mode) { case QRMode.MODE_NUMBER: return 10; case QRMode.MODE_ALPHA_NUM: return 9; case QRMode.MODE_8BIT_BYTE: return 8; case QRMode.MODE_KANJI: return 8; default: throw new Error("mode:" + mode); } } else if (type < 27) { switch (mode) { case QRMode.MODE_NUMBER: return 12; case QRMode.MODE_ALPHA_NUM: return 11; case QRMode.MODE_8BIT_BYTE: return 16; case QRMode.MODE_KANJI: return 10; default: throw new Error("mode:" + mode); } } else if (type < 41) { switch (mode) { case QRMode.MODE_NUMBER: return 14; case QRMode.MODE_ALPHA_NUM: return 13; case QRMode.MODE_8BIT_BYTE: return 16; case QRMode.MODE_KANJI: return 12; default: throw new Error("mode:" + mode); } } else { throw new Error("type:" + type); } }, getLostPoint: function (qrCode) {
|
||||
var moduleCount = qrCode.getModuleCount(); var lostPoint = 0; for (var row = 0; row < moduleCount; row++) {
|
||||
for (var col = 0; col < moduleCount; col++) {
|
||||
var sameCount = 0; var dark = qrCode.isDark(row, col); for (var r = -1; r <= 1; r++) {
|
||||
if (row + r < 0 || moduleCount <= row + r) { continue; }
|
||||
for (var c = -1; c <= 1; c++) {
|
||||
if (col + c < 0 || moduleCount <= col + c) { continue; }
|
||||
if (r == 0 && c == 0) { continue; }
|
||||
if (dark == qrCode.isDark(row + r, col + c)) { sameCount++; }
|
||||
}
|
||||
}
|
||||
if (sameCount > 5) { lostPoint += (3 + sameCount - 5); }
|
||||
}
|
||||
}
|
||||
for (var row = 0; row < moduleCount - 1; row++) { for (var col = 0; col < moduleCount - 1; col++) { var count = 0; if (qrCode.isDark(row, col)) count++; if (qrCode.isDark(row + 1, col)) count++; if (qrCode.isDark(row, col + 1)) count++; if (qrCode.isDark(row + 1, col + 1)) count++; if (count == 0 || count == 4) { lostPoint += 3; } } }
|
||||
for (var row = 0; row < moduleCount; row++) { for (var col = 0; col < moduleCount - 6; col++) { if (qrCode.isDark(row, col) && !qrCode.isDark(row, col + 1) && qrCode.isDark(row, col + 2) && qrCode.isDark(row, col + 3) && qrCode.isDark(row, col + 4) && !qrCode.isDark(row, col + 5) && qrCode.isDark(row, col + 6)) { lostPoint += 40; } } }
|
||||
for (var col = 0; col < moduleCount; col++) { for (var row = 0; row < moduleCount - 6; row++) { if (qrCode.isDark(row, col) && !qrCode.isDark(row + 1, col) && qrCode.isDark(row + 2, col) && qrCode.isDark(row + 3, col) && qrCode.isDark(row + 4, col) && !qrCode.isDark(row + 5, col) && qrCode.isDark(row + 6, col)) { lostPoint += 40; } } }
|
||||
var darkCount = 0; for (var col = 0; col < moduleCount; col++) { for (var row = 0; row < moduleCount; row++) { if (qrCode.isDark(row, col)) { darkCount++; } } }
|
||||
var ratio = Math.abs(100 * darkCount / moduleCount / moduleCount - 50) / 5; lostPoint += ratio * 10; return lostPoint;
|
||||
}
|
||||
};
|
||||
var QRMath = {
|
||||
glog: function (n) {
|
||||
if (n < 1) { throw new Error("glog(" + n + ")"); }
|
||||
return QRMath.LOG_TABLE[n];
|
||||
}, gexp: function (n) {
|
||||
while (n < 0) { n += 255; }
|
||||
while (n >= 256) { n -= 255; }
|
||||
return QRMath.EXP_TABLE[n];
|
||||
}, EXP_TABLE: new Array(256), LOG_TABLE: new Array(256)
|
||||
}; for (var i = 0; i < 8; i++) { QRMath.EXP_TABLE[i] = 1 << i; }
|
||||
for (var i = 8; i < 256; i++) { QRMath.EXP_TABLE[i] = QRMath.EXP_TABLE[i - 4] ^ QRMath.EXP_TABLE[i - 5] ^ QRMath.EXP_TABLE[i - 6] ^ QRMath.EXP_TABLE[i - 8]; }
|
||||
for (var i = 0; i < 255; i++) { QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]] = i; }
|
||||
function QRPolynomial(num, shift) {
|
||||
if (num.length == undefined) { throw new Error(num.length + "/" + shift); }
|
||||
var offset = 0; while (offset < num.length && num[offset] == 0) { offset++; }
|
||||
this.num = new Array(num.length - offset + shift); for (var i = 0; i < num.length - offset; i++) { this.num[i] = num[i + offset]; }
|
||||
}
|
||||
QRPolynomial.prototype = {
|
||||
get: function (index) { return this.num[index]; }, getLength: function () { return this.num.length; }, multiply: function (e) {
|
||||
var num = new Array(this.getLength() + e.getLength() - 1); for (var i = 0; i < this.getLength(); i++) { for (var j = 0; j < e.getLength(); j++) { num[i + j] ^= QRMath.gexp(QRMath.glog(this.get(i)) + QRMath.glog(e.get(j))); } }
|
||||
return new QRPolynomial(num, 0);
|
||||
}, mod: function (e) {
|
||||
if (this.getLength() - e.getLength() < 0) { return this; }
|
||||
var ratio = QRMath.glog(this.get(0)) - QRMath.glog(e.get(0)); var num = new Array(this.getLength()); for (var i = 0; i < this.getLength(); i++) { num[i] = this.get(i); }
|
||||
for (var i = 0; i < e.getLength(); i++) { num[i] ^= QRMath.gexp(QRMath.glog(e.get(i)) + ratio); }
|
||||
return new QRPolynomial(num, 0).mod(e);
|
||||
}
|
||||
};
|
||||
function QRRSBlock(totalCount, dataCount) { this.totalCount = totalCount; this.dataCount = dataCount; }
|
||||
QRRSBlock.RS_BLOCK_TABLE = [[1, 26, 19], [1, 26, 16], [1, 26, 13], [1, 26, 9], [1, 44, 34], [1, 44, 28], [1, 44, 22], [1, 44, 16], [1, 70, 55], [1, 70, 44], [2, 35, 17], [2, 35, 13], [1, 100, 80], [2, 50, 32], [2, 50, 24], [4, 25, 9], [1, 134, 108], [2, 67, 43], [2, 33, 15, 2, 34, 16], [2, 33, 11, 2, 34, 12], [2, 86, 68], [4, 43, 27], [4, 43, 19], [4, 43, 15], [2, 98, 78], [4, 49, 31], [2, 32, 14, 4, 33, 15], [4, 39, 13, 1, 40, 14], [2, 121, 97], [2, 60, 38, 2, 61, 39], [4, 40, 18, 2, 41, 19], [4, 40, 14, 2, 41, 15], [2, 146, 116], [3, 58, 36, 2, 59, 37], [4, 36, 16, 4, 37, 17], [4, 36, 12, 4, 37, 13], [2, 86, 68, 2, 87, 69], [4, 69, 43, 1, 70, 44], [6, 43, 19, 2, 44, 20], [6, 43, 15, 2, 44, 16], [4, 101, 81], [1, 80, 50, 4, 81, 51], [4, 50, 22, 4, 51, 23], [3, 36, 12, 8, 37, 13], [2, 116, 92, 2, 117, 93], [6, 58, 36, 2, 59, 37], [4, 46, 20, 6, 47, 21], [7, 42, 14, 4, 43, 15], [4, 133, 107], [8, 59, 37, 1, 60, 38], [8, 44, 20, 4, 45, 21], [12, 33, 11, 4, 34, 12], [3, 145, 115, 1, 146, 116], [4, 64, 40, 5, 65, 41], [11, 36, 16, 5, 37, 17], [11, 36, 12, 5, 37, 13], [5, 109, 87, 1, 110, 88], [5, 65, 41, 5, 66, 42], [5, 54, 24, 7, 55, 25], [11, 36, 12], [5, 122, 98, 1, 123, 99], [7, 73, 45, 3, 74, 46], [15, 43, 19, 2, 44, 20], [3, 45, 15, 13, 46, 16], [1, 135, 107, 5, 136, 108], [10, 74, 46, 1, 75, 47], [1, 50, 22, 15, 51, 23], [2, 42, 14, 17, 43, 15], [5, 150, 120, 1, 151, 121], [9, 69, 43, 4, 70, 44], [17, 50, 22, 1, 51, 23], [2, 42, 14, 19, 43, 15], [3, 141, 113, 4, 142, 114], [3, 70, 44, 11, 71, 45], [17, 47, 21, 4, 48, 22], [9, 39, 13, 16, 40, 14], [3, 135, 107, 5, 136, 108], [3, 67, 41, 13, 68, 42], [15, 54, 24, 5, 55, 25], [15, 43, 15, 10, 44, 16], [4, 144, 116, 4, 145, 117], [17, 68, 42], [17, 50, 22, 6, 51, 23], [19, 46, 16, 6, 47, 17], [2, 139, 111, 7, 140, 112], [17, 74, 46], [7, 54, 24, 16, 55, 25], [34, 37, 13], [4, 151, 121, 5, 152, 122], [4, 75, 47, 14, 76, 48], [11, 54, 24, 14, 55, 25], [16, 45, 15, 14, 46, 16], [6, 147, 117, 4, 148, 118], [6, 73, 45, 14, 74, 46], [11, 54, 24, 16, 55, 25], [30, 46, 16, 2, 47, 17], [8, 132, 106, 4, 133, 107], [8, 75, 47, 13, 76, 48], [7, 54, 24, 22, 55, 25], [22, 45, 15, 13, 46, 16], [10, 142, 114, 2, 143, 115], [19, 74, 46, 4, 75, 47], [28, 50, 22, 6, 51, 23], [33, 46, 16, 4, 47, 17], [8, 152, 122, 4, 153, 123], [22, 73, 45, 3, 74, 46], [8, 53, 23, 26, 54, 24], [12, 45, 15, 28, 46, 16], [3, 147, 117, 10, 148, 118], [3, 73, 45, 23, 74, 46], [4, 54, 24, 31, 55, 25], [11, 45, 15, 31, 46, 16], [7, 146, 116, 7, 147, 117], [21, 73, 45, 7, 74, 46], [1, 53, 23, 37, 54, 24], [19, 45, 15, 26, 46, 16], [5, 145, 115, 10, 146, 116], [19, 75, 47, 10, 76, 48], [15, 54, 24, 25, 55, 25], [23, 45, 15, 25, 46, 16], [13, 145, 115, 3, 146, 116], [2, 74, 46, 29, 75, 47], [42, 54, 24, 1, 55, 25], [23, 45, 15, 28, 46, 16], [17, 145, 115], [10, 74, 46, 23, 75, 47], [10, 54, 24, 35, 55, 25], [19, 45, 15, 35, 46, 16], [17, 145, 115, 1, 146, 116], [14, 74, 46, 21, 75, 47], [29, 54, 24, 19, 55, 25], [11, 45, 15, 46, 46, 16], [13, 145, 115, 6, 146, 116], [14, 74, 46, 23, 75, 47], [44, 54, 24, 7, 55, 25], [59, 46, 16, 1, 47, 17], [12, 151, 121, 7, 152, 122], [12, 75, 47, 26, 76, 48], [39, 54, 24, 14, 55, 25], [22, 45, 15, 41, 46, 16], [6, 151, 121, 14, 152, 122], [6, 75, 47, 34, 76, 48], [46, 54, 24, 10, 55, 25], [2, 45, 15, 64, 46, 16], [17, 152, 122, 4, 153, 123], [29, 74, 46, 14, 75, 47], [49, 54, 24, 10, 55, 25], [24, 45, 15, 46, 46, 16], [4, 152, 122, 18, 153, 123], [13, 74, 46, 32, 75, 47], [48, 54, 24, 14, 55, 25], [42, 45, 15, 32, 46, 16], [20, 147, 117, 4, 148, 118], [40, 75, 47, 7, 76, 48], [43, 54, 24, 22, 55, 25], [10, 45, 15, 67, 46, 16], [19, 148, 118, 6, 149, 119], [18, 75, 47, 31, 76, 48], [34, 54, 24, 34, 55, 25], [20, 45, 15, 61, 46, 16]];
|
||||
QRRSBlock.getRSBlocks = function (typeNumber, errorCorrectLevel) {
|
||||
var rsBlock = QRRSBlock.getRsBlockTable(typeNumber, errorCorrectLevel); if (rsBlock == undefined) { throw new Error("bad rs block @ typeNumber:" + typeNumber + "/errorCorrectLevel:" + errorCorrectLevel); }
|
||||
var length = rsBlock.length / 3; var list = []; for (var i = 0; i < length; i++) { var count = rsBlock[i * 3 + 0]; var totalCount = rsBlock[i * 3 + 1]; var dataCount = rsBlock[i * 3 + 2]; for (var j = 0; j < count; j++) { list.push(new QRRSBlock(totalCount, dataCount)); } }
|
||||
return list;
|
||||
};
|
||||
QRRSBlock.getRsBlockTable = function (typeNumber, errorCorrectLevel) { switch (errorCorrectLevel) { case QRErrorCorrectLevel.L: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 0]; case QRErrorCorrectLevel.M: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 1]; case QRErrorCorrectLevel.Q: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 2]; case QRErrorCorrectLevel.H: return QRRSBlock.RS_BLOCK_TABLE[(typeNumber - 1) * 4 + 3]; default: return undefined; } };
|
||||
function QRBitBuffer() { this.buffer = []; this.length = 0; }
|
||||
QRBitBuffer.prototype = {
|
||||
get: function (index) { var bufIndex = Math.floor(index / 8); return ((this.buffer[bufIndex] >>> (7 - index % 8)) & 1) == 1; }, put: function (num, length) { for (var i = 0; i < length; i++) { this.putBit(((num >>> (length - i - 1)) & 1) == 1); } }, getLengthInBits: function () { return this.length; }, putBit: function (bit) {
|
||||
var bufIndex = Math.floor(this.length / 8); if (this.buffer.length <= bufIndex) { this.buffer.push(0); }
|
||||
if (bit) { this.buffer[bufIndex] |= (0x80 >>> (this.length % 8)); }
|
||||
this.length++;
|
||||
}
|
||||
};
|
||||
var QRCodeLimitLength = [[17, 14, 11, 7], [32, 26, 20, 14], [53, 42, 32, 24], [78, 62, 46, 34], [106, 84, 60, 44], [134, 106, 74, 58], [154, 122, 86, 64], [192, 152, 108, 84], [230, 180, 130, 98], [271, 213, 151, 119], [321, 251, 177, 137], [367, 287, 203, 155], [425, 331, 241, 177], [458, 362, 258, 194], [520, 412, 292, 220], [586, 450, 322, 250], [644, 504, 364, 280], [718, 560, 394, 310], [792, 624, 442, 338], [858, 666, 482, 382], [929, 711, 509, 403], [1003, 779, 565, 439], [1091, 857, 611, 461], [1171, 911, 661, 511], [1273, 997, 715, 535], [1367, 1059, 751, 593], [1465, 1125, 805, 625], [1528, 1190, 868, 658], [1628, 1264, 908, 698], [1732, 1370, 982, 742], [1840, 1452, 1030, 790], [1952, 1538, 1112, 842], [2068, 1628, 1168, 898], [2188, 1722, 1228, 958], [2303, 1809, 1283, 983], [2431, 1911, 1351, 1051], [2563, 1989, 1423, 1093], [2699, 2099, 1499, 1139], [2809, 2213, 1579, 1219], [2953, 2331, 1663, 1273]];
|
||||
|
||||
// QRCode object
|
||||
QRCode = function (canvasId, vOption) {
|
||||
this._htOption = {
|
||||
width: 256,
|
||||
height: 256,
|
||||
typeNumber: 4,
|
||||
colorDark: "#000000",
|
||||
colorLight: "#ffffff",
|
||||
correctLevel: QRErrorCorrectLevel.H
|
||||
};
|
||||
|
||||
if (typeof vOption === 'string') {
|
||||
vOption = {
|
||||
text: vOption
|
||||
};
|
||||
}
|
||||
|
||||
// Overwrites options
|
||||
if (vOption) {
|
||||
for (var i in vOption) {
|
||||
this._htOption[i] = vOption[i];
|
||||
}
|
||||
}
|
||||
|
||||
this._oQRCode = null;
|
||||
this.canvasId = canvasId
|
||||
|
||||
if (this._htOption.text && this.canvasId) {
|
||||
this.makeCode(this._htOption.text);
|
||||
}
|
||||
};
|
||||
|
||||
QRCode.prototype.makeCode = function (sText) {
|
||||
this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
|
||||
this._oQRCode.addData(sText);
|
||||
this._oQRCode.make();
|
||||
this.makeImage();
|
||||
};
|
||||
|
||||
QRCode.prototype.makeImage = function () {
|
||||
var _oContext
|
||||
if (this._htOption.usingIn) {
|
||||
_oContext = wx.createCanvasContext(this.canvasId, this._htOption.usingIn)
|
||||
}
|
||||
else {
|
||||
_oContext = wx.createCanvasContext(this.canvasId)
|
||||
}
|
||||
var _htOption = this._htOption;
|
||||
var oQRCode = this._oQRCode
|
||||
|
||||
var nCount = oQRCode.getModuleCount();
|
||||
var nWidth = _htOption.width / nCount;
|
||||
var nHeight = _htOption.height / nCount;
|
||||
var nRoundedWidth = Math.round(nWidth);
|
||||
var nRoundedHeight = Math.round(nHeight);
|
||||
|
||||
if (_htOption.image && _htOption.image != '') {
|
||||
_oContext.drawImage(_htOption.image, 0, 0, _htOption.width, _htOption.height)
|
||||
}
|
||||
|
||||
for (var row = 0; row < nCount; row++) {
|
||||
for (var col = 0; col < nCount; col++) {
|
||||
var bIsDark = oQRCode.isDark(row, col);
|
||||
var nLeft = col * nWidth;
|
||||
var nTop = row * nHeight;
|
||||
_oContext.setStrokeStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
|
||||
// _oContext.setStrokeStyle('yellow')
|
||||
_oContext.setLineWidth(1)
|
||||
_oContext.setFillStyle(bIsDark ? _htOption.colorDark : _htOption.colorLight)
|
||||
// _oContext.setFillStyle('red')
|
||||
// if (bIsDark) {
|
||||
_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
|
||||
// }
|
||||
|
||||
// 안티 앨리어싱 방지 처리
|
||||
// if (bIsDark) {
|
||||
_oContext.strokeRect(
|
||||
Math.floor(nLeft) + 0.5,
|
||||
Math.floor(nTop) + 0.5,
|
||||
nRoundedWidth,
|
||||
nRoundedHeight
|
||||
);
|
||||
|
||||
_oContext.strokeRect(
|
||||
Math.ceil(nLeft) - 0.5,
|
||||
Math.ceil(nTop) - 0.5,
|
||||
nRoundedWidth,
|
||||
nRoundedHeight
|
||||
);
|
||||
// }
|
||||
// _oContext.fillRect(
|
||||
// Math.floor(nLeft) + 0.5,
|
||||
// Math.floor(nTop) + 0.5,
|
||||
// nRoundedWidth,
|
||||
// nRoundedHeight
|
||||
// );
|
||||
// _oContext.fillRect(
|
||||
// Math.ceil(nLeft) - 0.5,
|
||||
// Math.ceil(nTop) - 0.5,
|
||||
// nRoundedWidth,
|
||||
// nRoundedHeight
|
||||
// );
|
||||
// _oContext.clearRect(
|
||||
// Math.floor(nLeft) + 0.5,
|
||||
// Math.floor(nTop) + 0.5,
|
||||
// nRoundedWidth,
|
||||
// nRoundedHeight
|
||||
// );
|
||||
// _oContext.clearRect(
|
||||
// Math.ceil(nLeft) - 0.5,
|
||||
// Math.ceil(nTop) - 0.5,
|
||||
// nRoundedWidth,
|
||||
// nRoundedHeight
|
||||
// );
|
||||
}
|
||||
}
|
||||
|
||||
_oContext.draw()
|
||||
};
|
||||
|
||||
// 保存为图片，将临时路径传给回调
|
||||
QRCode.prototype.exportImage = function (callback) {
|
||||
if (!callback) {
|
||||
return
|
||||
}
|
||||
wx.canvasToTempFilePath({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this._htOption.width,
|
||||
height: this._htOption.height,
|
||||
destWidth: this._htOption.width,
|
||||
destHeight: this._htOption.height,
|
||||
canvasId: this.canvasId,
|
||||
success: function (res) {
|
||||
// console.log(res.tempFilePath)
|
||||
callback(res.tempFilePath)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
QRCode.CorrectLevel = QRErrorCorrectLevel;
|
||||
})();
|
||||
|
||||
module.exports = QRCode
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="showTop" class="backTop-box">
|
||||
<image class="animated pulse infinite" @tap="backTop" src="/static/public/backTop.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"backTop",
|
||||
props:{
|
||||
showTop:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
// console.log(e);
|
||||
},
|
||||
methods:{
|
||||
backTop(){
|
||||
this.$emit('backTop')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.backTop-box{position: fixed;right: 20rpx;bottom: 160rpx;}
|
||||
.backTop-box>image{width: 60rpx;height: 50rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<view class="pad-x140">
|
||||
<scroll-view scroll-y @scrolltolower="touchBottomEv" :style="{height: scrolViewheigh + 'px'}">
|
||||
<view class="fon42 col0 mar-sx30">购物车</view>
|
||||
<view v-for="(item,index) in dataList" :key="index"
|
||||
class="item-box display-between-center">
|
||||
<view @tap="chooseItem(index)" class="display-center-center flex-shrink">
|
||||
<!-- 勾选按钮 -->
|
||||
<view class="circle-box display-center-center flex-shrink" :class="item.isActive ? 'circle-box-active' : ''"></view>
|
||||
<!-- 商品图片 -->
|
||||
<image class="shop-img" :src="item.imgSrc" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="item-right-box display-between-column width100">
|
||||
<view @tap="goDetail(item.id)">
|
||||
<!-- 商品标题 -->
|
||||
<view class="clips2 item-title">{{item.title}}</view>
|
||||
</view>
|
||||
<!-- 规格 -->
|
||||
<view class="item-specs fc line-h50">
|
||||
<view v-for="(item1,index1) in item.specs" :key="index1">{{item1}}</view>
|
||||
</view>
|
||||
<view class="display-between-center">
|
||||
<!-- 价格 -->
|
||||
<view class="item-price">￥{{item.price}}</view>
|
||||
<!-- 加减按钮 -->
|
||||
<view class="display-between-center">
|
||||
<!-- 减 -->
|
||||
<image @tap="deladdEvent( item.id , index , 0)" src="/static/public/icon-delnum.png" class="item-btn display-center-center" mode="widthFix"></image>
|
||||
<!-- <view @tap="deladdEvent( item.id , index , 0)" :disabled="item.num==1" class="item-btn display-center-center">-</view> -->
|
||||
<!-- 输入框 -->
|
||||
<view class="input-box display-center-center">
|
||||
<input type="text" @input="inputEv(index,$event)" @focus="inputFocus(index)" @blur="inputBlur(index,item.id)" v-model="item.num" />
|
||||
</view>
|
||||
<!-- 加 -->
|
||||
<image @tap="deladdEvent( item.id , index , 1)" src="/static/public/icon-addnum.png" class="item-btn display-center-center" mode="widthFix"></image>
|
||||
<!-- <view @tap="deladdEvent( item.id , index , 1)" class="item-btn display-center-center">+</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<pitera v-if="total==dataList.length || dataList.length==0"></pitera>
|
||||
</scroll-view>
|
||||
<!-- 底部导航 -->
|
||||
<view class="display-between-center cart-foot-box">
|
||||
<!-- 全选 -->
|
||||
<view @tap="chooseAll" class="display--center">
|
||||
<view class="circle-check-all display-center-center"
|
||||
:class="ifCheckAll ? 'circle-check-all-active' : ''"></view>
|
||||
全选
|
||||
</view>
|
||||
<!-- 合计 -->
|
||||
<view class="allprice-box">合计：{{totalPrice}}</view>
|
||||
<!-- 立即结算 -->
|
||||
<view class="cart-settlement" @tap="gopageEv">{{dataList.length ? '立即结算' : '去购物'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
name:"cart",
|
||||
computed:{
|
||||
totalPrice(){
|
||||
let totalPrice = 0;
|
||||
this.dataList.forEach(item=>{
|
||||
if(item.isActive) totalPrice += item.reckonPrice*1 * item.num*1;
|
||||
})
|
||||
return this.$toolAll.tools.addXiaoShu(totalPrice);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList:[],//数据列表
|
||||
scrolViewheigh:uni.getSystemInfoSync().screenHeight - 141,
|
||||
ifCheckAll:false,//是否全选
|
||||
page:1, // 页数
|
||||
size:20, // 数量
|
||||
total:0, // 总数
|
||||
tempraryData:'',//暂时储存input数据
|
||||
unchangedData:''//不变的input数据
|
||||
};
|
||||
},
|
||||
// 执行顺序 第一
|
||||
beforeCreate(){
|
||||
|
||||
},
|
||||
// 执行顺序 第四
|
||||
mounted() {
|
||||
// 查询购物车列表
|
||||
this.checkList();
|
||||
},
|
||||
methods:{
|
||||
touchBottomEv(){// scroll-view触底事件
|
||||
if(this.total != this.dataList.length && this.dataList.length!=0){
|
||||
this.page++;
|
||||
this.checkList();
|
||||
}
|
||||
},
|
||||
// 输入框获取焦点
|
||||
inputFocus(index){
|
||||
this.tempraryData = this.dataList[index].num;
|
||||
this.unchangedData = this.dataList[index].num;
|
||||
},
|
||||
// 输入框失去焦点
|
||||
inputBlur(index,id){
|
||||
this.dataList[index].num = this.tempraryData;
|
||||
// 如果改变后的数据大于初始数据，就调用加数据方法
|
||||
if(this.unchangedData < this.tempraryData){
|
||||
this.setShopNum(id,this.tempraryData,'up');
|
||||
} else if(this.unchangedData > this.tempraryData){
|
||||
this.setShopNum(id,this.tempraryData,'down');
|
||||
}
|
||||
},
|
||||
// 输入框改变事件
|
||||
inputEv(index,e){
|
||||
let val = e.detail.value;
|
||||
if(val!=0 && val!=''){
|
||||
this.tempraryData = val;
|
||||
}
|
||||
},
|
||||
// 去商品详情
|
||||
goDetail(id){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
},
|
||||
// 去结算、去购物事件
|
||||
gopageEv(){
|
||||
if(this.dataList.length){
|
||||
if(this.totalPrice!='0.00'){
|
||||
let newList = [];
|
||||
this.dataList.forEach(item=>{
|
||||
if(item.isActive){
|
||||
let obj = {
|
||||
id:item.id,//商品id
|
||||
imgSrc:item.imgSrc,//商品图片
|
||||
coding:item.coding,//商品coding
|
||||
price:item.reckonPrice,//商品价格
|
||||
num:item.num,//商品数量
|
||||
title:item.title,//商品名称
|
||||
specs:item.specs,//商品规格
|
||||
}
|
||||
newList.push(obj);
|
||||
}
|
||||
})
|
||||
uni.setStorageSync('orderList',newList);
|
||||
uni.navigateTo({url:'/pagesA/getReadyDan/getReadyDan'});
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('请选择要购买的商品');
|
||||
}
|
||||
} else {
|
||||
uni.navigateTo({url:'/pages/tabbar/cate/cate'});
|
||||
}
|
||||
},
|
||||
// 商品数量变更
|
||||
setShopNum(id,num,type){
|
||||
let parmas = {
|
||||
id,// id:商品id
|
||||
num,// num:商品数量
|
||||
type// type:变更方式down减，up加
|
||||
}
|
||||
this.$requst.post('/api/order/shopping-cart-change-num',parmas).then(res=>{
|
||||
if(res.code==0){} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
chooseItem(index){// 商品选择
|
||||
this.dataList[index].isActive = !this.dataList[index].isActive
|
||||
let one = this.dataList.filter(function(item){
|
||||
return item.isActive == false;
|
||||
})
|
||||
one.length==0 ? this.ifCheckAll = true : this.ifCheckAll = false
|
||||
},
|
||||
chooseAll(){// 全选
|
||||
if(this.dataList.length){
|
||||
this.ifCheckAll = !this.ifCheckAll
|
||||
this.dataList.forEach((item,index)=>{
|
||||
this.ifCheckAll ? item.isActive = true : item.isActive = false
|
||||
})
|
||||
} else this.$toolAll.tools.showToast('亲，购物车空空的哟','',3000)
|
||||
},
|
||||
deladdEvent(id,cur,index){//数量加减事件
|
||||
if(index==0){//减少数量
|
||||
if(this.dataList[cur].num!=0){
|
||||
this.dataList[cur].num--;
|
||||
}
|
||||
if(this.dataList[cur].num > 1){
|
||||
this.setShopNum(id,this.dataList[cur].num,'down');
|
||||
}
|
||||
if(this.dataList[cur].num==0){
|
||||
this.delShop(id,cur);
|
||||
}
|
||||
} else {//增加数量
|
||||
this.dataList[cur].num++;
|
||||
this.setShopNum(id,this.dataList[cur].num,'up');
|
||||
}
|
||||
// this.changeNum()//调用数量变更事件
|
||||
},
|
||||
checkList(){//查询购物车列表
|
||||
this.$requst.post('/api/order/shopping-cart',{page:this.page,size:this.size}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.total = res.data.total;
|
||||
if(res.data.list.length){
|
||||
res.data.list.forEach(item=>{
|
||||
// let newspec = [];
|
||||
// if(item.sku.spec_text.length){
|
||||
// item.sku.spec_text.forEach(itemspec=>{
|
||||
// for (let key in itemspec) {
|
||||
// newspec.push(`${key}：${itemspec[key]}`);
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
if(item.sku!=null){
|
||||
let obj = {
|
||||
id:item.id,
|
||||
coding:item.sku.coding,
|
||||
isActive:false,
|
||||
imgSrc:item.spu.spu_cover,
|
||||
title:item.spu_name,
|
||||
specs:item.sku.spec_info,
|
||||
// price:this.$toolAll.tools.changeNum(item.price*1),
|
||||
price:item.price,
|
||||
reckonPrice:item.price,
|
||||
num:item.num
|
||||
}
|
||||
this.dataList.push(obj);
|
||||
}
|
||||
})
|
||||
this.dataList.concat(this.dataList);
|
||||
}
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
// 删除购物车商品
|
||||
delShop(id,index){
|
||||
this.$requst.post('/api/order/shopping-cart-del',{id:id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('删除成功');
|
||||
setTimeout(()=>{
|
||||
this.dataList.splice(index,1);
|
||||
},1000)
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.flex-shrink{flex-shrink: 0;}
|
||||
.display-between-center {display: flex;justify-content: space-between;align-items: center;}
|
||||
.display--center {display: flex;align-items: center;}
|
||||
.display-center-center {display: flex;justify-content: center;align-items: center;}
|
||||
.display-between-column {display: flex;justify-content: space-between;flex-direction: column;}
|
||||
.item-box {border-bottom: 1rpx solid #d3d3d3;padding: 40rpx 0;}
|
||||
.item-box:last-child{border-bottom: none;}
|
||||
.circle-box,.circle-check-all{width: 32rpx;height: 32rpx;border: 1rpx solid #8c8c9b;box-sizing: border-box;border-radius: 100%;}
|
||||
.circle-box-active,.circle-check-all-active {
|
||||
border: 1rpx solid #000000;
|
||||
}
|
||||
.circle-box-active::after,.circle-check-all-active::after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 18rpx;height: 18rpx;background-color: #000000;border-radius: 100%;
|
||||
}
|
||||
.shop-img {width: 223rpx;height: 223rpx;border-radius: 30rpx;margin: 0 20rpx;}
|
||||
.allprice-box{width: 30%;}
|
||||
.item-right-box{font-size: 24rpx;height: 223rpx;}
|
||||
.item-title {color: #000000;}
|
||||
.item-specs{color: #8c8c9b;}
|
||||
.item-price{font-size: 30rpx;}
|
||||
|
||||
.input-box {width: 78rpx;height: 40rpx;border-radius: 10rpx;margin: 0 6rpx; border: 1rpx solid #000000;overflow: hidden;}
|
||||
input {text-align: center;}
|
||||
.item-btn {width: 40rpx;height: 40rpx;border-radius: 10rpx;background-color: #000000;color: #FFFFFF;padding: 0rpx;}
|
||||
.item-btn:first-child {padding-top: -12rpx!important;}
|
||||
/* 底部导航 */
|
||||
.cart-foot-box{position: fixed;bottom: 0;left: 0;right: 0;z-index: 2; height: 130rpx;background-color: #efefef;font-size: 30rpx;}
|
||||
.circle-check-all {width: 33rpx;height: 33rpx;margin: 0 10rpx 0 30rpx;}
|
||||
.circle-check-all-active::after{
|
||||
width: 19rpx;height: 19rpx;
|
||||
}
|
||||
.cart-settlement{width: 242rpx;height: 130rpx;background-color: #f81c1c;color: #FFFFFF;font-size: 36rpx;text-align: center;line-height: 130rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<view>
|
||||
<scroll-view scroll-x >
|
||||
<view class="" :class="isCenter?'disac':'disjb'">
|
||||
<view @tap="choosecate(index)" v-if="item.title!='仿真设计'"
|
||||
:style="{
|
||||
background : newCurrent==index ? activeb:newbmo,
|
||||
fontSize:newfmo+'px',
|
||||
borderRadius:newRadius+'px',
|
||||
minWidth:isMinW ? newMinWidth+'px':'',
|
||||
color : newCurrent==index ? activec:newcmo}"
|
||||
class="flexs cateitem" :class="(!isCenter && newcateList.length<=3)?'maright0':''"
|
||||
v-for="(item,index) in newcateList" :key="index">{{item.title}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"cate-pu",
|
||||
props:{
|
||||
isCenter:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
activeb:{//选中背景色
|
||||
type:String,
|
||||
default:'#3875F6'
|
||||
},
|
||||
activec:{//选中字体颜色
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
newcateList:{//分类列表
|
||||
type:Array,
|
||||
default:function(){
|
||||
return [
|
||||
{title:'热门问题'},
|
||||
{title:'病种'},
|
||||
{title:'案例日记'},
|
||||
{title:'效果模拟'},
|
||||
{title:'效果模拟'},
|
||||
]
|
||||
}
|
||||
},
|
||||
newbmo:{//默认背景色
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
newcmo:{//默认字体颜色
|
||||
type:String,
|
||||
default:'#333333'
|
||||
},
|
||||
newfmo:{//默认字体大小
|
||||
type:String,
|
||||
default:'15'
|
||||
},
|
||||
newRadius:{//圆角
|
||||
type:String,
|
||||
default:'10'
|
||||
},
|
||||
isMinW:{//是否使用最小宽度
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
newMinWidth:{//最小宽度
|
||||
type:String,
|
||||
default:'52'//49
|
||||
},
|
||||
newCurrent:{//默认选中
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current:0,
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
choosecate(index){//二级分类选择
|
||||
// console.log('二级分类：',index);
|
||||
this.$emit('choosecateEv',index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.catetwomo{background-color: #FFFFFF;color: #4D4D4D;}
|
||||
.disac{display: flex;align-items: center;}
|
||||
.flexs{flex-shrink: 0;}
|
||||
.cateitem{padding: 16rpx 20rpx;text-align: center;margin-right: 20rpx;}
|
||||
.maright0{margin-right: 0!important;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<view v-if="list.lenght!=0">
|
||||
<view v-for="(item,index) in list" :key="index">
|
||||
<!-- 一级title -->
|
||||
<view class="disjbac mar-x30 mar-s10">
|
||||
<view class="fon34 bold col3">{{item.title}}</view>
|
||||
<image class="mar-y50" @tap="delSearch" v-if="item.src!=''" :src="item.src" style="width: 30rpx;height: 30rpx;" mode="heightFix"></image>
|
||||
</view>
|
||||
<view class="fon24 col6 disac fw">
|
||||
<!-- 二级title -->
|
||||
<view @tap="choosetwo(index,indexo)"
|
||||
v-for="(itemo,indexo) in item.list" :key="indexo"
|
||||
class="radius10 mar-y20 flexs mar-x20 cate-tu-item">{{itemo.content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"cate-tu",
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
isDetail:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
choosetwo(e1,e2){
|
||||
// console.log('一级索引：',e1);
|
||||
// console.log('二级索引：',e2);
|
||||
// console.log(this.list[e1].list[e2].content);
|
||||
},
|
||||
delSearch(){
|
||||
// this.list = []
|
||||
this.$emit('delev')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
.lotus-address-picker {
|
||||
font-size: 26rpx;
|
||||
padding-top: 30rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: normal;
|
||||
padding-right: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lotus-address-picker-box {
|
||||
/*display: -webkit-box;
|
||||
display: -webkit-flex;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
.lotus-address-picker-box-item {
|
||||
height: 600upx;
|
||||
overflow-y: auto;
|
||||
width: 33.333%;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lotus-address-picker2 {
|
||||
color: #e93b3d;
|
||||
position: relative;
|
||||
}
|
||||
.lotus-address-picker2:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 65%;
|
||||
transform: translateY(-35%) rotate(-45deg);
|
||||
width: 20rpx;
|
||||
height: 10rpx;
|
||||
border-left-width: 4rpx;
|
||||
border-bottom-width: 4rpx;
|
||||
border-left-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-color: #e93b3d;
|
||||
border-bottom-color: #e93b3d;
|
||||
}
|
||||
.lotus-address-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.lotus-address-box {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.lotus-address-action {
|
||||
font-size: 30rpx;
|
||||
/*display: -webkit-box;
|
||||
display: -webkit-flex;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
padding: 25rpx 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
.lotus-address-action:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-top: 1px solid #eee;
|
||||
color: #eee;
|
||||
transform-origin: 0 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.lotus-address-action:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #eee;
|
||||
transform-origin: 0 100%;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.lotus-address-action-cancel {
|
||||
color: #969696;
|
||||
}
|
||||
.lotus-address-action-affirm {
|
||||
color: #e93b3d;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<!--地址picker-->
|
||||
<view :status="checkStatus" v-if="lotusAddressData.visible" class="lotus-address-mask">
|
||||
<view :class="lotusAddressData.visible?'lotus-address-box':'lotus-address-box lotus-address-box-out'">
|
||||
<view class="lotus-address-action">
|
||||
<text @tap="cancelPicker" class="lotus-address-action-cancel">取消</text>
|
||||
<text @tap="chosedVal" class="lotus-address-action-affirm">确认</text>
|
||||
</view>
|
||||
<view class="lotus-address-picker-box">
|
||||
<!--省-->
|
||||
<scroll-view scroll-y :scroll-into-view="'pid'+pChoseIndex" class="lotus-address-picker-box-item">
|
||||
<view @tap="clickPicker(0,pIndex,pItem);" :id="'pid'+pIndex" :class="pIndex === pChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(pItem,pIndex) in province" :key="pIndex">{{pItem}}</view>
|
||||
</scroll-view>
|
||||
<!--市-->
|
||||
<scroll-view scroll-y :scroll-into-view="'cid'+cChoseIndex" class="lotus-address-picker-box-item">
|
||||
<view @tap="clickPicker(1,cIndex,cItem);" :id="'cid'+cIndex" :class="cIndex === cChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(cItem,cIndex) in city" :key="cIndex">{{cItem}}</view>
|
||||
</scroll-view>
|
||||
<!--区-->
|
||||
<scroll-view scroll-y :scroll-into-view="'tid'+tChoseIndex" class="lotus-address-picker-box-item">
|
||||
<view @tap="clickPicker(2,tIndex,tItem);" :id="'tid'+tIndex" :class="tIndex === tChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(tItem,tIndex) in town" :key="tIndex">{{tItem}}</view>
|
||||
</scroll-view>
|
||||
<!--区END-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--地址picker END-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {lotusAddressJson} from "./city.js";
|
||||
export default {
|
||||
props:['lotusAddressData'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
province:[],
|
||||
city:[],
|
||||
town:[],
|
||||
provinceName:'',
|
||||
cityName:'',
|
||||
townName:'',
|
||||
type:0,//0新增1编辑
|
||||
pChoseIndex:-1,
|
||||
cChoseIndex:-1,
|
||||
tChoseIndex:-1
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
//取消
|
||||
cancelPicker(){
|
||||
const provinceCode = this.getTarId(this.provinceName);
|
||||
const cityCode = this.getTarId(this.cityName);
|
||||
const townCode = this.getTarId(this.townName);
|
||||
this.visible = false;
|
||||
this.$emit("choseVal",{
|
||||
province:this.provinceName,
|
||||
provinceCode,
|
||||
city:this.cityName,
|
||||
cityCode,
|
||||
town:this.townName,
|
||||
townCode,
|
||||
isChose:0,
|
||||
visible:false
|
||||
});
|
||||
},
|
||||
//获取最后选择的省市区的值
|
||||
chosedVal() {
|
||||
this.type = 1;
|
||||
const provinceCode = this.getTarId(this.provinceName);
|
||||
const cityCode = this.getTarId(this.cityName);
|
||||
const townCode = this.getTarId(this.townName);
|
||||
this.visible = false;
|
||||
let isChose = 0;
|
||||
//已选省市区 isChose = 1
|
||||
if((this.provinceName&&this.cityName)||(this.provinceName&&this.cityName&&this.townName)){
|
||||
isChose = 1;
|
||||
}
|
||||
this.$emit("choseVal",{
|
||||
province:this.provinceName,
|
||||
provinceCode,
|
||||
city:this.cityName,
|
||||
cityCode,
|
||||
town:this.townName,
|
||||
townCode,
|
||||
isChose,
|
||||
visible:false
|
||||
});
|
||||
},
|
||||
//获取省市区value
|
||||
getTarId(name,type){
|
||||
let id = 0;
|
||||
lotusAddressJson.map((item,index)=>{
|
||||
if(item.name === name){
|
||||
id = item.value;
|
||||
}
|
||||
});
|
||||
return id;
|
||||
},
|
||||
//获取市数据
|
||||
getCityArr(parentId){
|
||||
let city = [];
|
||||
lotusAddressJson.map((item,index)=>{
|
||||
if(item.parent === parentId){
|
||||
city.push(item.name);
|
||||
}
|
||||
});
|
||||
return city;
|
||||
},
|
||||
//获取区数据
|
||||
getTownArr(parentId){
|
||||
let town = [];
|
||||
lotusAddressJson.map((item,index)=>{
|
||||
if(index>34&&item.parent === parentId){
|
||||
town.push(item.name);
|
||||
}
|
||||
});
|
||||
return town;
|
||||
},
|
||||
//初始化数据
|
||||
initFn(){
|
||||
if(!this.province.length){
|
||||
lotusAddressJson.map((item,index)=>{
|
||||
if(index<=34){
|
||||
this.province.push(item.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
//已选择省市区，高亮显示对应选择省市区
|
||||
const p = this._props.lotusAddressData.provinceName;
|
||||
const c = this._props.lotusAddressData.cityName;
|
||||
const t = this._props.lotusAddressData.townName;
|
||||
//已选省
|
||||
if(p){
|
||||
this.pChoseIndex = this.getTarIndex(this.province,p);
|
||||
}
|
||||
//已选市
|
||||
if(p&&c){
|
||||
const pid = this.getTarId(p);
|
||||
this.city = this.getCityArr(pid);
|
||||
this.cChoseIndex = this.getTarIndex(this.city,c);
|
||||
}
|
||||
//已选区
|
||||
if(p&&c&&t){
|
||||
const cid= this.getTarId(c);
|
||||
this.town = this.getTownArr(cid);
|
||||
this.tChoseIndex = this.getTarIndex(this.town,t);
|
||||
}
|
||||
//未选省市区
|
||||
if(!p&&!c&&!t){
|
||||
this.pChoseIndex = -1;
|
||||
this.cChoseIndex = -1;
|
||||
this.tChoseIndex = -1;
|
||||
this.city = [];
|
||||
this.town = [];
|
||||
}
|
||||
},
|
||||
//获取已选省市区
|
||||
getChosedData(){
|
||||
const pid = this.getTarId(this.provinceName,'province');
|
||||
this.city = this.getCityArr(pid);
|
||||
const cid= this.getTarId(this.cityName,'city');
|
||||
this.town = this.getTownArr(cid);
|
||||
//已选省市区获取对应index
|
||||
if(this.provinceName){
|
||||
this.pChoseIndex = this.getTarIndex(this.province,this.provinceName);
|
||||
}
|
||||
if(this.cityName){
|
||||
this.cChoseIndex = this.getTarIndex(this.city,this.cityName);
|
||||
}
|
||||
if(this.townName){
|
||||
this.tChoseIndex = this.getTarIndex(this.town,this.townName);
|
||||
}
|
||||
},
|
||||
//选择省市区交互
|
||||
clickPicker(type,index,name){
|
||||
//省
|
||||
if(type === 0){
|
||||
this.pChoseIndex = index;
|
||||
this.provinceName = name;
|
||||
this.cChoseIndex = -1;
|
||||
this.tChoseIndex = -1;
|
||||
this.cityName = '';
|
||||
this.townName = '';
|
||||
}
|
||||
//市
|
||||
if(type ===1){
|
||||
this.cChoseIndex = index;
|
||||
this.cityName = name;
|
||||
this.tChoseIndex = -1;
|
||||
this.townName = '';
|
||||
}
|
||||
//区
|
||||
if(type === 2){
|
||||
this.tChoseIndex = index;
|
||||
this.townName = name;
|
||||
}
|
||||
//获取省市区数据
|
||||
this.getChosedData();
|
||||
},
|
||||
//获取已选省市区index
|
||||
getTarIndex(arr,tarName){
|
||||
let cIndex = 0;
|
||||
arr.map((item,index)=>{
|
||||
if(item === tarName){
|
||||
cIndex = index;
|
||||
}
|
||||
});
|
||||
return cIndex;
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
checkStatus(){
|
||||
let t = null;
|
||||
const _this = this;
|
||||
if(!_this.visible){
|
||||
_this.visible = _this._props.lotusAddressData.visible;
|
||||
//获取省市区
|
||||
_this.provinceName = _this._props.lotusAddressData.provinceName;
|
||||
_this.cityName = _this._props.lotusAddressData.cityName;
|
||||
_this.townName = _this._props.lotusAddressData.townName;
|
||||
//生成初始化数据
|
||||
_this.initFn();
|
||||
t = _this.visible;
|
||||
}
|
||||
return t;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "./city.css";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="loading" class="container-loading">
|
||||
<view class="loading-box">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else :style="{paddingTop: statusBarHeight +'px'}" class="pad-zy30">
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"container-subgroup",
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
loading:true,
|
||||
exist:''
|
||||
};
|
||||
},
|
||||
// 执行顺序 第一
|
||||
beforeCreate(){
|
||||
this.exist = uni.getStorageSync('token');
|
||||
this.exist ? this.loading = false : this.loading = true;
|
||||
},
|
||||
// 执行顺序 第二
|
||||
created(){
|
||||
|
||||
},
|
||||
// 执行顺序 第三
|
||||
beforeMount(){
|
||||
|
||||
},
|
||||
// 执行顺序 第四
|
||||
mounted(){
|
||||
setTimeout(()=>{
|
||||
this.loading = false;
|
||||
},500)
|
||||
},
|
||||
// 组件更新前
|
||||
beforeUpdate(){
|
||||
|
||||
},
|
||||
// 组件更新后
|
||||
updated(){
|
||||
|
||||
},
|
||||
// 组件销毁前：实例销毁之前调用。在这一步，实例仍然完全可用
|
||||
beforeDestroy(){
|
||||
|
||||
},
|
||||
// 销毁所有实例
|
||||
destroyed(){
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container-loading {position: fixed;top: 0;left: 0;bottom: 0;right: 0;display: flex;justify-content: center;align-items: center;}
|
||||
.container-loading .loading-box {width: 80rpx;display: flex;flex-wrap: wrap;animation: rotate 3s linear infinite;}
|
||||
@keyframes rotate{
|
||||
to{transform: rotateZ(360deg);}
|
||||
}
|
||||
.container-loading .loading-box span {width: 32rpx;height: 32rpx;background-color: #000000;margin: 4rpx;animation: scale 1.5s linear infinite;}
|
||||
@keyframes scale{
|
||||
50%{transform: scale(1);}
|
||||
}
|
||||
.container-loading .loading-box span:nth-child(1){border-radius: 50% 50% 0 50%;transform-origin: bottom right;}
|
||||
.container-loading .loading-box span:nth-child(2){border-radius: 50% 50% 50% 0;transform-origin: bottom left;animation-delay: .5s;}
|
||||
.container-loading .loading-box span:nth-child(3){border-radius: 50% 0 50% 50%;transform-origin: top right;animation-delay: 1.5s;}
|
||||
.container-loading .loading-box span:nth-child(4){border-radius: 0 50% 50% 50%;transform-origin: top left;animation-delay: 1s;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-nav-box display-between-center">
|
||||
<button type="default" @tap="immediatelyBuy">立即购买</button>
|
||||
<button type="default" @tap="addCartEv">加入购物车</button>
|
||||
</view>
|
||||
<!-- 底部按钮弹框 -->
|
||||
<view v-show="showFrame" class="frame-box" @tap="showFrame=false">
|
||||
<view @tap.stop="showFrame=true" class="item-box">
|
||||
<view class="frame-top">
|
||||
<image class="frame-img" :src="shopImg" mode="aspectFill" lazy-load></image>
|
||||
<view class="frame-content">
|
||||
<!-- 商品标题 -->
|
||||
<view class="clips2 frame-title">{{detailObj.detail.name}}</view>
|
||||
<!-- 商品价格 -->
|
||||
<view class="frame-price">
|
||||
<!-- 折扣价 -->
|
||||
<view class="discount-box">￥{{discountPrice}}</view>
|
||||
<!-- 原价 -->
|
||||
<view class="original-box">￥{{originalPrice}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品尺寸、规格 -->
|
||||
<view class="frame-color-box">
|
||||
<!-- 颜色 -->
|
||||
<!-- <drop-down></drop-down> -->
|
||||
<!-- 尺寸 -->
|
||||
<!-- <drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down> -->
|
||||
</view>
|
||||
<!-- 商品库存 -->
|
||||
<view class="frame-stock">库存：{{detailObj.detail.stock}}</view>
|
||||
<!-- 加减按钮 -->
|
||||
<view class="frame-add-del">
|
||||
<view class="display-between-center add-del-box">
|
||||
<!-- 减 -->
|
||||
<button @tap="deladdEvent(0)" :disabled="buyNum==1" class="item-btn display-center-center">-</button>
|
||||
<!-- 输入框 -->
|
||||
<view class="input-box display-center-center">
|
||||
<input class="input" type="text" v-model="buyNum" />
|
||||
</view>
|
||||
<!-- 加 -->
|
||||
<button @tap="deladdEvent(1)" class="item-btn display-center-center">+</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 立即购买、加入购物车按钮 -->
|
||||
<view class="frame-btn-box">
|
||||
<button class="btn" type="default" @tap="immediatelyBuy">立即购买</button>
|
||||
<button class="btn" type="default" @tap="addCartEv">加入购物车</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dropDown from '@/components/drop-downs/drop-down.vue';
|
||||
export default {
|
||||
name:"bottom-nav",
|
||||
components:{
|
||||
dropDown
|
||||
},
|
||||
props:{
|
||||
detailObj:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFrame:false,
|
||||
dropObj:{
|
||||
title:'尺寸',
|
||||
childrenList:[
|
||||
{
|
||||
id:1,
|
||||
childrenTitle:'1.2'
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
childrenTitle:'6'
|
||||
}
|
||||
]
|
||||
},
|
||||
buyNum:1,//购买数量
|
||||
originalPrice:0,//商品原价
|
||||
discountPrice:0,//商品折扣价
|
||||
shopImg:''//商品图片
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// 原价
|
||||
this.originalPrice = this.detailObj.detail.original_price;
|
||||
// 折扣价
|
||||
this.discountPrice = this.detailObj.detail.price;
|
||||
// 商品图片
|
||||
this.shopImg = this.$http + this.detailObj.detail.cover;
|
||||
},
|
||||
methods:{
|
||||
// 立即购买
|
||||
immediatelyBuy(){
|
||||
let params = {};
|
||||
if(this.showFrame) {
|
||||
params = {
|
||||
id:this.detailObj.detail.id,//商品id
|
||||
imgSrc:this.detailObj.detail.cover,//商品图片
|
||||
coding:this.detailObj.sku[0].coding,//商品coding
|
||||
price:this.discountPrice,//商品价格
|
||||
num:this.buyNum || 1,//商品数量
|
||||
title:this.detailObj.detail.name,//商品名称
|
||||
}
|
||||
} else {
|
||||
// 进入详情就立即购买事件
|
||||
params = {
|
||||
id:this.detailObj.detail.id,//商品id
|
||||
imgSrc:this.detailObj.detail.cover,//商品图片
|
||||
coding:this.detailObj.sku[0].coding,//商品coding
|
||||
price:this.discountPrice,//商品价格
|
||||
num:this.buyNum || 1,//商品数量
|
||||
title:this.detailObj.detail.name,//商品名称
|
||||
}
|
||||
}
|
||||
uni.setStorageSync('orderList',[params]);
|
||||
uni.navigateTo({
|
||||
url:`/pagesA/getReadyDan/getReadyDan`
|
||||
})
|
||||
},
|
||||
// 尺寸选择
|
||||
chooseItem(e){
|
||||
this.log(e)
|
||||
},
|
||||
// 添加购物车事件
|
||||
addCartEv(){
|
||||
this.$requst.post('/api/order/shopping-cart-add',{sku_id:this.detailObj.sku[0].id,num:this.buyNum}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('添加成功');
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
// 数量加减事件
|
||||
deladdEvent(index){
|
||||
if(index==0){//减少数量
|
||||
this.buyNum--
|
||||
} else {//增加数量
|
||||
this.buyNum++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.display-center-center {display: flex;justify-content: center;align-items: center;}
|
||||
.display-between-center{display: flex;justify-content: space-between;align-items: center;}
|
||||
.bottom-nav-box{position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx 40rpx;background-color: #FFFFFF;}
|
||||
button{
|
||||
width: 310rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx!important;
|
||||
border-radius: 30rpx;
|
||||
font-size: 36rpx;
|
||||
border: 1rpx solid #FFFFFF;
|
||||
color: #FFFFFF!important;
|
||||
}
|
||||
button:first-child{border: 1rpx solid #f81c1c;background-color: #f81c1c;}
|
||||
button:last-child{border: 1rpx solid #000000;background-color: #000000;}
|
||||
|
||||
.frame-box{position: fixed;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.5);z-index: 12;}
|
||||
.frame-box .item-box{background-color: #FFFFFF;position: absolute;bottom: 0;left: 0;right: 0;padding: 30rpx;}
|
||||
.frame-top {display: flex;justify-content: space-between;}
|
||||
.frame-top .frame-img {width: 223rpx;height: 223rpx;border-radius: 20rpx;flex-shrink: 0;margin-right: 30rpx;margin-top: -80rpx;}
|
||||
.frame-top .frame-content{width: 100%;display: flex;justify-content: space-between;flex-direction: column;}
|
||||
|
||||
.frame-title{font-size: 36rpx;color: #000000;line-height: 50rpx;}
|
||||
.frame-price{display: flex;align-items: center;}
|
||||
.frame-price .discount-box{font-size: 40rpx;margin-right: 10rpx;}
|
||||
.frame-price .original-box{font-size: 28rpx;color: #868695;text-decoration: line-through;}
|
||||
.frame-color-box{margin-top: 20rpx;}
|
||||
.frame-btn-box{display: flex;align-items: center;justify-content: space-around;margin-top: 100rpx;}
|
||||
.frame-btn-box .btn{height: 80rpx;line-height: 80rpx!important;border-radius: 20rpx;}
|
||||
.frame-stock{font-size: 24rpx;color: #000000;text-align: right;}
|
||||
/* 加减按钮 */
|
||||
.frame-add-del{display: flex;justify-content: flex-end;}
|
||||
.add-del-box{width: 180rpx;margin-top: 20rpx;}
|
||||
.input-box {width: 78rpx;height: 40rpx;font-size: 24rpx; border-radius: 16rpx;margin: 0 6rpx; border: 1rpx solid #000000;overflow: hidden;}
|
||||
.input-box .input {text-align: center;}
|
||||
.item-btn {width: 40rpx;height: 40rpx;border-radius: 12rpx;background-color: #000000!important;border: 1rpx solid #000000!important; color: #FFFFFF;padding: 0rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="drop-title">{{dropObj.title}}</view>
|
||||
<view class="drop-box display-between-center" @tap="tuneUpEv">
|
||||
<view>{{activeText}}</view>
|
||||
<i class="icon icon-next colpeili flexs" style="transition: all .3s;" :style="{transform: `rotate(${showFrame ? '0' : '90'}deg)`}"></i>
|
||||
<view v-if="showFrame" class="drop animated " :class="showFrame?'fadeIn':'fadeOut'">
|
||||
<view class="item-title" :class="activeItem==index?'itemActive':'itemMo'"
|
||||
@tap.stop="chooseItem(index,item.id,item.title,dropObj.title)" v-for="(item,index) in dropObj.children" :key="index">
|
||||
<view class="clips1">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"drop-down",
|
||||
props:{
|
||||
dropObj:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {
|
||||
title:'颜色',
|
||||
children:[
|
||||
{
|
||||
id:1,
|
||||
childrenTitle:'粉色'
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
childrenTitle:'蓝色'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFrame:false, // 是否显示下拉框
|
||||
activeText:'', // 选中的标题
|
||||
activeItem:-1 // 选中的下标
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if(this.dropObj.children.length){
|
||||
this.activeText = `请选择${this.dropObj.title}`;
|
||||
} else {
|
||||
this.activeText = `暂无可选项`;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 选择事件
|
||||
chooseItem(index,id,title,mainTitle){
|
||||
// 选中的下标
|
||||
this.activeItem = index;
|
||||
// 选中的标题
|
||||
this.activeText = title;
|
||||
// 隐藏弹框
|
||||
this.showFrame = false;
|
||||
this.$emit('chooseItem',{id:id,title:title,mainTitle:mainTitle})
|
||||
},
|
||||
// 调起选择弹框
|
||||
tuneUpEv(){
|
||||
if(this.activeText!=`暂无可选项`){
|
||||
this.showFrame = !this.showFrame;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drop-title{font-size: 30rpx;color: #000000;}
|
||||
.display-between-center{display: flex;justify-content: space-between;align-items: center;}
|
||||
.drop-box{position: relative; border: 1rpx solid #8c8c9b;padding: 20rpx;box-sizing: border-box;margin: 20rpx 0;font-size: 24rpx;color: #000000;}
|
||||
.drop{
|
||||
position: absolute;top:39px;left: -1rpx;right: -1rpx;z-index: 2;
|
||||
max-height: 280rpx;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
border: 1rpx solid #8c8c9b;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.itemActive{background-color: #000000;color: #FFFFFF;}
|
||||
.itemMo{background-color: #FFFFFF;color: #000000;}
|
||||
.item-title{padding: 20rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
<template>
|
||||
<view @touchmove.stop.prevent="moveHandle" v-if="vision" class="auth-box">
|
||||
<view>
|
||||
<view class="auth-top">
|
||||
<image :src="appletImg" mode=""></image>
|
||||
<view class="auth-top-content">
|
||||
<view>佩丽饰品客服代表提醒您：</view>
|
||||
<view>您当前是游客身份</view>
|
||||
<view>是否选择授权登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="auth-center">申请 获取你的昵称、头像</view>
|
||||
<view class="auth-bottom">
|
||||
<view @tap="chooseBtn(0)" :class="isNo?'isNyin':'noyin'" class="btn btn-no">暂不授权</view>
|
||||
<view @tap="chooseBtn(1)" :class="isOk?'isOyin':'noyin'" class="btn btn-yes">
|
||||
<text>立即授权</text>
|
||||
<button open-type="getUserInfo" @tap="shouq" class="auth-btn">立即授权</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"empower",
|
||||
props:{
|
||||
paramObj:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {}
|
||||
}
|
||||
},
|
||||
appletImg:{//小程序头像
|
||||
type:String,
|
||||
default:'/static/public/like.png'
|
||||
},
|
||||
appletName:{//小程序名称
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
url:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
isWhere:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOk:false,
|
||||
isNo:false,
|
||||
vision:false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.paramObj);
|
||||
setTimeout(()=>{
|
||||
console.log(1);
|
||||
if(this.paramObj.invite_code!=undefined && uni.getStorageSync('is_active')!=1){
|
||||
this.vision = true;
|
||||
}
|
||||
},2000)
|
||||
},
|
||||
methods:{
|
||||
moveHandle(){
|
||||
return false
|
||||
},
|
||||
tiaoZ(){//跳转方式
|
||||
if(this.isWhere==0) uni.navigateBack({delta:1}) //返回上一页
|
||||
if(this.isWhere==1) uni.navigateTo({url:this.url})//跳转到指定页面
|
||||
if(this.isWhere!=0 && this.isWhere!=1) return//不跳转
|
||||
this.isOk = false
|
||||
},
|
||||
chooseBtn(index){//暂不授权、立即授权
|
||||
this.$emit('cancleEv',index)//继承事件
|
||||
if(index==0){//暂不授权
|
||||
// this.tiaoZ()
|
||||
uni.navigateTo({
|
||||
url:'/pages/tabbar/pagehome/pagehome'
|
||||
})
|
||||
this.isOk = false
|
||||
} else {
|
||||
this.isOk = !this.isOk
|
||||
this.isNo = false
|
||||
}
|
||||
},
|
||||
shouq(){//立即授权事件
|
||||
let ya = this;
|
||||
this.$toolAll.tools.showToast('正在调起授权...')
|
||||
let code = ''//声明code
|
||||
uni.login({// 获取登录用户code
|
||||
provider: 'weixin',
|
||||
success: function(result) {
|
||||
uni.hideToast()
|
||||
code = result.code
|
||||
},
|
||||
});
|
||||
uni.getUserProfile({//调起微信授权弹框
|
||||
desc: '登录',
|
||||
lang: 'zh_CN',
|
||||
success: (res) => {
|
||||
ya.updateUserInfo(code,res.userInfo)
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('用户拒绝授权');
|
||||
this.tiaoZ()
|
||||
this.$emit('cancleEv',0)
|
||||
this.isOk = false
|
||||
}
|
||||
});
|
||||
},
|
||||
//调用登录接口
|
||||
updateUserInfo(code,userInfo) {
|
||||
let ya = this;
|
||||
uni.showToast({title: '授权中...',icon:'loading',})
|
||||
var params = {
|
||||
code:code,
|
||||
nickname: userInfo.nickName,//用户昵称
|
||||
headimgurl: userInfo.avatarUrl,//用户头像
|
||||
country: userInfo.country,//用户所在国家
|
||||
province: userInfo.province,//用户所在省份
|
||||
city: userInfo.city,//用户所在城市
|
||||
gender: userInfo.gender,//用户性别
|
||||
language:userInfo.language,//语言
|
||||
is_active:1
|
||||
}
|
||||
this.$requst.post('/api/user/login',params).then(res => {
|
||||
if(res.data.token!=''){
|
||||
uni.setStorageSync('params',params)
|
||||
uni.setStorageSync('userId',res.data.account_id)
|
||||
uni.setStorageSync('token',res.data.token)//缓存token
|
||||
uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
|
||||
uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
|
||||
uni.setStorageSync('invite_code',res.data.invite_code)
|
||||
ya.successAfterEv(userInfo)
|
||||
}
|
||||
},error => {})
|
||||
},
|
||||
successAfterEv(userInfo){//缓存信息
|
||||
uni.hideToast()
|
||||
// console.log(uni.getStorageSync('headImg'));
|
||||
this.$toolAll.tools.showToast('授权成功','success')
|
||||
this.$emit('cancleEv',0)
|
||||
this.$emit('buttonH',true)
|
||||
if(this.url!=''){
|
||||
setTimeout(()=>{uni.navigateTo({url:this.url})},1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.auth-box {position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 3;}
|
||||
.auth-box > view {background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;}
|
||||
.auth-top {display: flex;}
|
||||
.auth-top image {width: 96rpx;height: 96rpx;flex-shrink: 0;}
|
||||
.auth-top-content {margin-left: 20rpx;}
|
||||
.auth-top-content view {font-size: 28rpx;margin-top: 20rpx;color: #999999;}
|
||||
.auth-top-content view:nth-child(1) {font-size: 30rpx;font-weight: bold;margin-top: 0;}
|
||||
.auth-center {font-size: 28rpx;margin: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;border-top: 1rpx solid #F5F5F5;padding: 20rpx 0;}
|
||||
.auth-bottom {display: flex;justify-content: center;align-items: center;font-size: 24rpx;}
|
||||
.btn {padding: 12rpx 40rpx;border-radius: 4rpx;}
|
||||
.btn-no {color: #07ad60;background-color: #FFFFFF;border: 1rpx solid #CCCCCC;}
|
||||
.btn-yes {color: #FFFFFF;background-color: #07ad60;border: 1rpx solid #07ad60;position: relative;margin-left: 20rpx;}
|
||||
.auth-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
|
||||
.isNyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,.5);}
|
||||
.isOyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,1);}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="foot-boxtwo"
|
||||
:style="{
|
||||
background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 20%, ${colorThree} 80%, ${colorFour} 100%)` : `url(${backgroundImage}) ${backgroundColor} `,
|
||||
boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})`
|
||||
}">
|
||||
<!-- 后台动态改变的icon与标题 start -->
|
||||
<!-- tab-图标列表 -->
|
||||
<view class="item-box" :style="{marginBottom: marginBottomNum +'px'}">
|
||||
<view @tap="choosefoot(index)" class="foot-icon"
|
||||
:style="{width: 100 / imgList.length +'%'}"
|
||||
:class="index == isIcon ? 'centerBox' : ''"
|
||||
v-for="(itemi,index) in imgList" :key="index">
|
||||
<view class="posir" :class="index == isIcon ? 'centerBox-item':''">
|
||||
<image :class="index == isIcon ? 'centerImg':'moImg'" v-if="newcurrent == index" :src="itemi.selectedIconPath" :style="{width: [39,41,32,120][index]+'rpx',height: [40,41,38,120][index]+'rpx'}"></image>
|
||||
<image :class="index == isIcon ? 'centerImg':'moImg'" v-else :src="itemi.iconPath" :style="{width: [39,41,32,120][index]+'rpx',height: [40,41,38,120][index]+'rpx'}"></image>
|
||||
<button v-if="index == isIcon && isCustomerService" class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tab-标题列表 -->
|
||||
<view class="item-box">
|
||||
<view @tap="choosefoot(index)" class="foot-title"
|
||||
:style="{width:100 / imgList.length +'%', color:newcurrent == index ? colorActive : colorMo}"
|
||||
v-for="(itemt,index) in titleList" :key="index">{{itemt}}</view>
|
||||
</view>
|
||||
<!-- 后台动态改变的icon图 end -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'foot-tab',
|
||||
props:{
|
||||
// 当前选中项
|
||||
newcurrent:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
// 标题内容
|
||||
titleList:{
|
||||
type:Array,
|
||||
default:function(){
|
||||
return uni.getStorageSync('footTitle')
|
||||
}
|
||||
},
|
||||
// icon图标
|
||||
imgList:{
|
||||
type:Array,
|
||||
default:function(){
|
||||
return uni.getStorageSync('imgList');
|
||||
}
|
||||
},
|
||||
// 默认哪个图标突出
|
||||
isIcon:{
|
||||
type:Number,
|
||||
default:3
|
||||
},
|
||||
// 底部导航背景图片
|
||||
backgroundImage:{
|
||||
type:String,
|
||||
default:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg'
|
||||
},
|
||||
// 背景颜色
|
||||
backgroundColor:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
// 是否开启背景颜色渐变
|
||||
isGradualChange:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 渐变方向
|
||||
direction:{
|
||||
type:String,
|
||||
default:'right top'
|
||||
},
|
||||
// 第一种颜色
|
||||
colorOne:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
// 第二种颜色
|
||||
colorTwo:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
// 第三种颜色
|
||||
colorThree:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
// 第四种颜色
|
||||
colorFour:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
// 阴影大小0~1之间 0表示没有阴影
|
||||
boxShadowNum:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
// 图标与文字的间距
|
||||
marginBottomNum:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
// 默认的标题颜色
|
||||
colorMo:{
|
||||
type:String,
|
||||
default:'#999999'
|
||||
},
|
||||
// 选中的标题颜色
|
||||
colorActive:{
|
||||
type:String,
|
||||
default:'#000000'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCustomerService:false,//是否存在客服 默认不存在客服
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
choosefoot(index){
|
||||
if(index==0){
|
||||
uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
||||
return
|
||||
} else {
|
||||
if(uni.getStorageSync('phone_active')) {
|
||||
switch (index){
|
||||
case 1:
|
||||
uni.reLaunch({url:'/pages/tabbar/cate/cate'})
|
||||
break;
|
||||
case 2:
|
||||
uni.reLaunch({url:'/pages/tabbar/my/my'})
|
||||
break;
|
||||
case 3:
|
||||
uni.reLaunch({url:'/pages/tabbar/cart/cart'})
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login',
|
||||
animationType:'slide-in-bottom'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 外框样式 start */
|
||||
.foot-boxtwo{
|
||||
height: 120rpx;
|
||||
font-size: 24rpx;
|
||||
position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;
|
||||
display: flex;flex-direction: column;justify-content: center;
|
||||
background-repeat: no-repeat;background-size: 100% 100%;
|
||||
}
|
||||
/* 外框样式 end */
|
||||
|
||||
/* 公共 start*/
|
||||
.moImg{width: 64rpx;height: 64rpx;vertical-align: bottom;}
|
||||
/* 公共 end*/
|
||||
|
||||
/* 图标-文字外框样式 start */
|
||||
.item-box{display: flex;justify-content: space-around;align-items: center;}
|
||||
.item-box .foot-icon,.item-box .foot-title{text-align: center;box-sizing: border-box;}
|
||||
/* 图标-文字外框样式 end */
|
||||
|
||||
/* 突出的图标样式 start */
|
||||
.centerBox{display: flex;justify-content: center;align-items: center;vertical-align: bottom;}
|
||||
.centerBox-item{margin-top: -80rpx;vertical-align: bottom;margin-left: -50rpx;}
|
||||
.centerImg{width: 140rpx;height: 140rpx;vertical-align: bottom;}
|
||||
/* 突出的图标样式 end */
|
||||
|
||||
.item-box .foot-title{padding-top: 16rpx;}
|
||||
.item-box .foot-title:last-child{text-align: left;padding-left: 40rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<view>
|
||||
<view @tap="chooseItem(index)" v-for="(item,index) in list" :key="index"
|
||||
class="item-box display-between-center">
|
||||
<view class="display-between-center">
|
||||
<image v-if="item.leftImg!=''" :style="{width:[26,38,40,33][index]+'rpx',height:[36,38,40,31][index]+'rpx'}" class="left-img" :src="item.leftImg" mode="widthFix"></image>
|
||||
<view class="item-title">{{item.title}}</view>
|
||||
</view>
|
||||
<view class="display-between-center">
|
||||
<view class="item-content">{{item.content}}</view>
|
||||
<!-- <image :src="item.rightImg" mode="aspectFill"></image> -->
|
||||
<i class='icon icon-next' style="font-size: 28rpx;color: #8c8c9b;"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"function-list",
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return [
|
||||
{
|
||||
leftImg:'/static/public/icon-address.png',
|
||||
title:'收货地址',
|
||||
num:0,
|
||||
content:'',
|
||||
rightImg:'',
|
||||
url:''
|
||||
},
|
||||
{
|
||||
leftImg:'/static/public/icon-distribution.png',
|
||||
title:'分销中心',
|
||||
num:0,
|
||||
content:'百万奖金等你来拿',
|
||||
rightImg:'',
|
||||
url:''
|
||||
},
|
||||
{
|
||||
leftImg:'/static/public/icon-duty.png',
|
||||
title:'免责声明',
|
||||
num:0,
|
||||
content:'',
|
||||
rightImg:'',
|
||||
url:''
|
||||
},
|
||||
{
|
||||
leftImg:'/static/public/icon-aboutus.png',
|
||||
title:'关于我们',
|
||||
num:0,
|
||||
content:'',
|
||||
rightImg:'',
|
||||
url:''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods:{
|
||||
chooseItem(index){
|
||||
uni.navigateTo({
|
||||
url: this.list[index].url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.display-between-center {display: flex;justify-content: space-between;align-items: center;}
|
||||
.item-box{padding: 30rpx 0;}
|
||||
.left-img{width: 40rpx;height: 40rpx;margin-right: 20rpx;}
|
||||
.item-title {font-size: 30rpx;color: #000000;}
|
||||
.item-content {font-size: 24rpx;color: #8c8c9b;margin-right: 10rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="disjb fw" v-if="list.length!=0">
|
||||
<!-- 左侧列表 -->
|
||||
<view class="list-box">
|
||||
<view @tap="goDetail(index)" v-if="index%2==0" :class="radiu?'radius15 mar-x10':'radius30 mar-x30'" class="posir colf zou" v-for="(item,index) in list" :key="index">
|
||||
<!-- 背景图 -->
|
||||
<image :class="radiu?'radius15':'radius30'" class=" width100 list-min" :src="item.main_img" mode="widthFix"></image>
|
||||
<view class="posia list-like-box" @tap.stop="chooseLike(index)">
|
||||
<!-- 不喜欢 -->
|
||||
<image v-if="item.is_collected!=1" src="/static/public/no-like.png" mode="aspectFill"></image>
|
||||
<!-- 喜欢 -->
|
||||
<image v-else :class="item.is_collected==1?'bounceIn':'bounceOut'" class="animated" src="/static/public/like.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view v-if="item.main_img!=''" :class="radiu?'list-cont-box15':'list-cont-box'" class="posia fon20">
|
||||
<!-- 视频标题 -->
|
||||
<view class="fon30 bold mar-x10 disac" :style="{fontSize:nFon+'px'}">
|
||||
<view class="clips1">{{item.title}}</view>
|
||||
<!-- <text v-if="item.isVideo && isVedio" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">视频</text> -->
|
||||
</view>
|
||||
<!-- 视频描述 -->
|
||||
<view class="mar-x10 clips1 opc">{{item.content}}</view>
|
||||
<view class="disjbac">
|
||||
<view class="disac">
|
||||
<!-- 发布者头像 -->
|
||||
<image class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
|
||||
<!-- 发布者昵称 -->
|
||||
<view class="clips1 opc">{{item.name}}</view>
|
||||
</view>
|
||||
<text v-if="item.isVideo && isVedio" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">视频</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <image v-if="item.isVideo && isVedio" :style="{width:nWidth+'rpx',height:nHeight+'rpx'}" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);" src="/static/public/video.png" mode=""></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧列表 -->
|
||||
<view class="list-box">
|
||||
<view @tap="goDetail(index)" v-if="index%2!=0" :class="radiu?'radius15 mar-x10':'radius30 mar-x30'" class="posir colf zou" v-for="(item,index) in list" :key="index">
|
||||
<!-- 背景图 -->
|
||||
<image :class="radiu?'radius15':'radius30'" class="width100 list-min" :src="item.main_img" mode="widthFix"></image>
|
||||
<view class="posia list-like-box" @tap.stop="chooseLike(index)">
|
||||
<!-- 不喜欢 -->
|
||||
<image v-if="item.is_collected!=1" src="/static/public/no-like.png" mode="aspectFill"></image>
|
||||
<!-- 喜欢 -->
|
||||
<image v-else :class="item.is_collected==1?'bounceIn':'bounceOut'" class="animated" src="/static/public/like.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view v-if="item.main_img!=''" :class="radiu?'list-cont-box15':'list-cont-box'" class="posia fon20 ">
|
||||
<!-- 视频标题 -->
|
||||
<view class="fon30 bold mar-x10 disac" :style="{fontSize:nFon+'px'}">
|
||||
<view class="clips1">{{item.title}}</view>
|
||||
<!-- <text v-if="item.isVideo && isVedio" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">视频</text> -->
|
||||
</view>
|
||||
<!-- 视频描述 -->
|
||||
<view class="mar-x10 clips1 opc">{{item.content}}</view>
|
||||
<view class="disjbac">
|
||||
<view class="disac">
|
||||
<!-- 发布者头像 -->
|
||||
<image class="list-headimg" :src="item.head_img" mode="aspectFill"></image>
|
||||
<!-- 发布者昵称 -->
|
||||
<view class="clips1 opc">{{item.name}}</view>
|
||||
</view>
|
||||
<text v-if="item.isVideo && isVedio" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs">视频</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <image v-if="item.isVideo && isVedio" :style="{width:nWidth+'rpx',height:nHeight+'rpx'}" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);" src="/static/public/video.png" mode=""></image> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="" style="display: flex;flex-direction: column;align-items: center;">
|
||||
<image src="/static/public/nothing.png" style="width: 474rpx;height: 273rpx;" mode="aspectFill"></image>
|
||||
<!-- <view class="fon24 col3" style="margin-bottom: 60rpx;">暂无内容</view> -->
|
||||
</view>
|
||||
<!-- 弹框 -->
|
||||
<pu-po :isShowT="isShowT" :contentVal="pu_content" @comfirmev="comfirmev" @cancleev="cancleev"></pu-po>
|
||||
<!-- 弹框授权 -->
|
||||
<empower :vision="vision" :isWhere="2" @cancleEv="cancleEv"></empower>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import empower from '@/components/empower.vue';
|
||||
export default {
|
||||
components:{
|
||||
empower
|
||||
},
|
||||
name:"list-pu",
|
||||
props:{
|
||||
list:{//数据
|
||||
type:Array,
|
||||
default:function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
nWidth:{
|
||||
type:String,
|
||||
default:'120'
|
||||
},
|
||||
nHeight:{
|
||||
type:String,
|
||||
default:'120'
|
||||
},
|
||||
nFon:{
|
||||
type:String,
|
||||
default:'15'
|
||||
},
|
||||
nmarz:{
|
||||
type:String,
|
||||
default:'10'
|
||||
},
|
||||
radiu:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vision:false,
|
||||
isShowT:false,
|
||||
pu_content:'是否需要取消收藏？',
|
||||
current:'-1',
|
||||
jieDuan:false,
|
||||
isVedio:uni.getStorageSync('isVedio')
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
cancleEv(e){
|
||||
if(e==0) this.vision = false
|
||||
},
|
||||
goDetail(index){//查看详情
|
||||
|
||||
},
|
||||
chooseLike(index){//喜欢不喜欢事件
|
||||
// console.log('喜欢不喜欢：',index);
|
||||
if(this.jieDuan==false){
|
||||
let isAuth = this.$toolAll.tools.returnAuth()
|
||||
if(!isAuth){
|
||||
this.$emit('chooseLike',index)
|
||||
this.current = index
|
||||
if(this.list[index].is_collected==1) {
|
||||
this.isShowT = true
|
||||
} else {
|
||||
let maiOjb = {
|
||||
e:3,//内容收藏
|
||||
c:this.list[index].id,
|
||||
t:new Date().getTime()//当前时间戳
|
||||
}
|
||||
this.$toolAll.tools.maiDian(maiOjb)
|
||||
}
|
||||
} else this.jieDuan = true
|
||||
}
|
||||
},
|
||||
comfirmev(){
|
||||
// console.log('取消收藏成功');
|
||||
this.$emit('comfirmev',this.current)
|
||||
this.isShowT = false
|
||||
},
|
||||
cancleev(){
|
||||
// console.log('关闭弹框');
|
||||
this.isShowT = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<view id="main-img">
|
||||
<!-- <view class="mar-x40" v-for="(item,index) in list" :key="index"> -->
|
||||
<!-- 活动商品 start -->
|
||||
<view v-for="(item,index) in activityList" :key="index" class="mar-x50">
|
||||
<h1 class="fon36 bold">{{item.name}}</h1>
|
||||
<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item.subtitle}}</view>
|
||||
<view class="posir" @tap="goDetail(item.id)">
|
||||
<image class="radius30 animated fadeIn" :src="item.cover" mode="aspectFill" lazy-load style="height: 425rpx;width: 100%;" :style="{height:activityHeight + 'px'}"></image>
|
||||
<view v-if="item.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 活动商品 end -->
|
||||
|
||||
<!-- 子商品 start -->
|
||||
<view class="disjbac fw">
|
||||
<view @tap="goDetail(item.id)" class="width47 mar-x50 posir" v-for="(item,index) in list" :key="index">
|
||||
<image :src="item.cover" mode="aspectFill" lazy-load style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.name}}</view>
|
||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||||
<view v-if="item.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 子商品 end -->
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"list-one",
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
},
|
||||
activityList:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
check:uni.getStorageSync('is_active'),
|
||||
activityHeight:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
uni.createSelectorQuery().in(this).select('#main-img').boundingClientRect().exec(rect => {
|
||||
this.activityHeight = rect[0].width;
|
||||
console.log(this.activityHeight,55);
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
goDetail(id){//前往详情页
|
||||
if(this.check){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:`/pages/login/login`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.activity-img{background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" show-scrollbar="false" :style="{height: scrollHeight +'px'}">
|
||||
<view class="disjbac fw pad-zy30">
|
||||
<view @tap="goDetail(item.id)" class="width47 mar-s50 posir" v-for="(item,index) in dataList" :key="index">
|
||||
<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 暂无更多数据 -->
|
||||
<pitera v-if="showpitera"></pitera>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 暂无更多组件
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
name:"list-two",
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
props:{
|
||||
// 高度类型
|
||||
scrollCate:{
|
||||
type:Number,
|
||||
default:1
|
||||
},
|
||||
// 页面来源
|
||||
pageSource: {
|
||||
type:Number,
|
||||
default:1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollHeight:uni.getStorageSync('scrollHeight'),
|
||||
// 数据
|
||||
dataList:[
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:true,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
}
|
||||
],
|
||||
page:1, // 第几页
|
||||
size:10, // 数量
|
||||
total:0, // 总数
|
||||
showpitera:true, // 是否显示暂无数据
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
switch (this.scrollCate){
|
||||
case 1:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-one'); // App.vue缓存的数据
|
||||
break;
|
||||
case 2:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-two'); // App.vue缓存的数据
|
||||
break;
|
||||
case 3:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-three'); // App.vue缓存的数据
|
||||
break;
|
||||
case 4:
|
||||
this.scrollHeight = uni.getStorageSync('scrollHeight-four'); // App.vue缓存的数据
|
||||
break;
|
||||
}
|
||||
switch (this.pageSource){
|
||||
case 1:
|
||||
this.checkList();
|
||||
break;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
checkList(){
|
||||
this.log('列表事件')
|
||||
},
|
||||
// 视图容器触底事件
|
||||
scrollBottomEv(){
|
||||
this.log('触底了',55)
|
||||
// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
|
||||
if(this.total!=this.dataList.length){
|
||||
// 页数每次+1
|
||||
this.page++
|
||||
switch (this.pageSource){
|
||||
case 1:
|
||||
// this.checkList();// 调用列表事件
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
// 显示暂无数据
|
||||
this.pitera = true;
|
||||
}
|
||||
},
|
||||
goDetail(id){//前往详情页
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.activity-img{background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"loading",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<text :style="{ color: color, 'font-size': size + 'rpx' }" :class="{isTheme:isTheme}" class="lw-icons"
|
||||
@click="_onClick">{{icons[icon]}}</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './icons.js';
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': 'iconfont',
|
||||
'src': 'url(\'https://at.alicdn.com/t/font_2294175_vq7ymlkpbtm.ttf\')',
|
||||
});
|
||||
// #endif
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 50
|
||||
},
|
||||
isTheme: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: icons
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
@font-face {
|
||||
font-family: iconfont;
|
||||
src: url('https://at.alicdn.com/t/font_2294175_vq7ymlkpbtm.ttf')
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.lw-icons {
|
||||
font-family: iconfont;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
'aixin':'\ue8ab',
|
||||
'rules':'\ue909',
|
||||
'sound':'\ue8ea',
|
||||
'arrowright':'\uee02'
|
||||
}
|
||||
|
|
@ -0,0 +1,373 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="contentBox" v-if="list.length" @click="toEmit()"
|
||||
:style="'color:' + color + ';background-color:' + backgroundColor + ';height:' + height+'rpx;'">
|
||||
<view v-if="showIcon" class="supBox">
|
||||
<lwIcon :size="32" :color="iconColor" icon="sound"></lwIcon>
|
||||
</view>
|
||||
<view v-if="list.length > 1" class="content">
|
||||
<view v-for="(item, index) in list" :key="index" @tap.stop="dangGao(index)">
|
||||
<view class="loopItemBase" :class="index==0&&firstIn?'fistInClass':''"
|
||||
:animation="realAnimation(index)" v-if="aindexArr.includes(index)"
|
||||
:style="'line-height:'+height+'rpx;'">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length == 1" class="content">
|
||||
<view :style="'line-height:'+height+'rpx;'" @tap.stop="dangGao(0)" class="loopItemBaseShow">{{ list[0] }}</view>
|
||||
</view>
|
||||
<view v-if="showMore" class="offBox">
|
||||
<lwIcon :size="32" :color="moreColor" icon="arrowright"></lwIcon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
lw-notice公告上下轮询组件（组件内依赖了自有的字体图标组件，可自行替换为uni或自身项目的图标组件）
|
||||
color:字体颜色
|
||||
backgroundColor:背景色
|
||||
list:要循环的列表数据
|
||||
height:组件高度
|
||||
showScale:是否有缩放动画
|
||||
runTime:间隔切换时间
|
||||
showIcon:是否显示头部小喇叭
|
||||
iconColor:小喇叭的颜色
|
||||
showMore:是否显示尾部更多
|
||||
moreColor:显示更多的颜色
|
||||
*/
|
||||
import lwIcon from './iconFont.vue'
|
||||
export default {
|
||||
components: {
|
||||
lwIcon
|
||||
},
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#666666'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#f5f5f5'
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 80
|
||||
},
|
||||
showScale: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
runTime: {
|
||||
type: Number,
|
||||
default: 4000
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showMore: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#aaaaaa'
|
||||
},
|
||||
moreColor: {
|
||||
type: String,
|
||||
default: '#aaaaaa'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 第一次展示
|
||||
firstIn: true,
|
||||
// 当前显示的项
|
||||
aindexArr: [],
|
||||
// 创建动画的实例
|
||||
animation: null,
|
||||
// 动画对象一
|
||||
animationData: null,
|
||||
// 动画对象二
|
||||
animationDataTwo: null,
|
||||
// 显示项和动画之间的映射关系
|
||||
indexLinkAnimationObj: {},
|
||||
setTimerOne: null,
|
||||
setTimerTwo: null,
|
||||
setTimerThree: null,
|
||||
setTimerFour: null,
|
||||
setTimerFive: null
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.resetPage()
|
||||
},
|
||||
computed: {
|
||||
// 计算展示项应该展示的动画
|
||||
realAnimation() {
|
||||
return function(value) {
|
||||
if (this.indexLinkAnimationObj[value]) {
|
||||
return this[this.indexLinkAnimationObj[value]]
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 开始 按3000毫秒的运行示例图
|
||||
// 1.a显示 执行动画1 锁定动画1 0ms
|
||||
// 2.b显示 执行动画2 锁定动画2 200ms
|
||||
// 3.a隐藏 停止动画1 释放动画1 300ms
|
||||
// 4.c显示 执行动画1 锁定动画1 400ms
|
||||
// 5.b隐藏 停止动画2 释放动画2 500ms
|
||||
// 6.a显示 执行动画2 锁定动画2 600ms
|
||||
// 7.c隐藏 停止动画1 释放动画1 700ms
|
||||
// 8.b显示 执行动画1 锁定动画1 800ms
|
||||
// 9.a隐藏 停止动画2 释放动画2 900ms
|
||||
// 10.c显示 执行动画2 锁定动画2 1000ms
|
||||
initPage() {
|
||||
this.resetPage();
|
||||
if (this.list && this.list.length) {
|
||||
if (this.list.length > 1) {
|
||||
this.aindexArr.push(0);
|
||||
this.animation = uni.createAnimation({
|
||||
timingFunction: 'linear',
|
||||
})
|
||||
// #ifdef H5
|
||||
this.animationDataH5 = this.animation.translateY(-100).step({
|
||||
duration: 10000
|
||||
}).export()
|
||||
// #endif
|
||||
this.runAnimation(0, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 重置页面动画
|
||||
resetPage() {
|
||||
// 移除所有定时器
|
||||
clearTimeout(this.setTimerOne);
|
||||
clearTimeout(this.setTimerTwo);
|
||||
clearTimeout(this.setTimerThree);
|
||||
clearTimeout(this.setTimerFour);
|
||||
clearTimeout(this.setTimerFive);
|
||||
// 重置页面属性
|
||||
this.aindexArr = [];
|
||||
this.animation = null;
|
||||
this.animationData = null;
|
||||
this.animationDataTwo = null;
|
||||
this.indexLinkAnimationObj = {};
|
||||
},
|
||||
// 执行动画方法(此方法内不要清除赋值的定时器)
|
||||
runAnimation(value, firstIn) {
|
||||
let that = this;
|
||||
if (!firstIn) {
|
||||
that.aindexArr.push(value);
|
||||
}
|
||||
// 获取执行动画对象
|
||||
let lockText = that.createAni(firstIn);
|
||||
// 延迟50毫秒执行(等待dom渲染)
|
||||
that.setTimerOne = setTimeout(() => {
|
||||
// 创建执行动画和执行方之间的映射关系
|
||||
that.indexLinkAnimationObj[value] = lockText;
|
||||
// console.log('已经创建完成绑定关系')
|
||||
// console.log(that.indexLinkAnimationObj)
|
||||
// 获取基础执行时间单位
|
||||
let unitRunTime = (that.runTime - 50) / 6;
|
||||
let waitTime = firstIn ? unitRunTime * 4 : unitRunTime * 5;
|
||||
let waitTimeTwo = firstIn ? (that.runTime - unitRunTime) : that.runTime;
|
||||
// #ifdef H5
|
||||
waitTimeTwo = firstIn ? (that.runTime - (1.5 * unitRunTime)) : that.runTime;
|
||||
//H5重新刷新一下动画绑定关系
|
||||
if (firstIn) {
|
||||
that.aindexArr.splice(0, 1);
|
||||
that.aindexArr.push(0);
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 开启下一个动画
|
||||
that.setTimerTwo = setTimeout(() => {
|
||||
let Index = value == that.list.length - 1 ? 0 : value + 1;
|
||||
that.runAnimation(Index)
|
||||
}, waitTime)
|
||||
// 释放上一个执行方
|
||||
that.setTimerThree = setTimeout(() => {
|
||||
let index = that.aindexArr.indexOf(value);
|
||||
that.aindexArr.splice(index, 1)
|
||||
that.firstIn = false;
|
||||
delete that.indexLinkAnimationObj[value]
|
||||
}, waitTimeTwo)
|
||||
}, 50)
|
||||
},
|
||||
// 创建动画方法
|
||||
createAni(firstIn) {
|
||||
let that = this;
|
||||
let unitRunTime = (that.runTime - 50) / 6;
|
||||
|
||||
let delayTime = unitRunTime * 4;
|
||||
let durationTime = unitRunTime;
|
||||
let dispairTime = unitRunTime;
|
||||
// #ifdef H5
|
||||
delayTime = unitRunTime * 3.5;
|
||||
dispairTime = unitRunTime * 1.5;
|
||||
// #endif
|
||||
|
||||
let showTransformHeight = -uni.upx2px(that.height);
|
||||
let hideTransformHeight = showTransformHeight * 2;
|
||||
// 创建动画
|
||||
if (that.showScale) {
|
||||
if (firstIn) {
|
||||
// that.animation.translateY(1).scale(1,1).step({ duration: 5 });
|
||||
that.animation.translateY(showTransformHeight).scale(0.5, 0.5).step({
|
||||
delay: delayTime,
|
||||
duration: dispairTime
|
||||
});
|
||||
} else {
|
||||
that.animation.translateY(showTransformHeight).scale(1, 1).step({
|
||||
duration: durationTime
|
||||
});
|
||||
that.animation.translateY(hideTransformHeight).scale(0.5, 0.5).step({
|
||||
delay: delayTime,
|
||||
duration: dispairTime
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (firstIn) {
|
||||
// that.animation.translateY(1).step({ duration: 5 });
|
||||
that.animation.translateY(showTransformHeight).step({
|
||||
delay: delayTime,
|
||||
duration: dispairTime
|
||||
});
|
||||
} else {
|
||||
that.animation.translateY(showTransformHeight).step({
|
||||
duration: durationTime
|
||||
});
|
||||
that.animation.translateY(hideTransformHeight).step({
|
||||
delay: delayTime,
|
||||
duration: dispairTime
|
||||
});
|
||||
}
|
||||
}
|
||||
// 判断动画赋值项并赋值
|
||||
if (!that.animationData) {
|
||||
that.animationData = that.animation.export()
|
||||
that.setTimerFour = setTimeout(() => {
|
||||
clearTimeout(that.setTimerFour)
|
||||
that.animationData = false;
|
||||
}, that.runTime)
|
||||
return 'animationData'
|
||||
} else {
|
||||
that.animationDataTwo = that.animation.export()
|
||||
that.setTimerFive = setTimeout(() => {
|
||||
clearTimeout(that.setTimerFive)
|
||||
that.animationDataTwo = false;
|
||||
}, that.runTime)
|
||||
return 'animationDataTwo'
|
||||
}
|
||||
},
|
||||
// 抛出点击事件
|
||||
toEmit() {
|
||||
let that = this
|
||||
if (that.list.length == 1) {
|
||||
that.$emit('itemClick', that.list[0])
|
||||
} else {
|
||||
that.$emit('itemClick', that.list[that.aindexArr[0]])
|
||||
}
|
||||
},
|
||||
dangGao(index){
|
||||
let that = this
|
||||
if (that.list.length != 0) {
|
||||
that.$emit('dangGao', index)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 判断list有值后开启动画
|
||||
// setTimeout()
|
||||
this.initPage()
|
||||
},
|
||||
watch: {
|
||||
list(value) {
|
||||
this.initPage()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// padding: 0 20rpx;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
.supBox {
|
||||
width: 50rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.offBox {
|
||||
width: 50rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
|
||||
.loopItemBase {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.fistInClass {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loopItemBaseShow {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<view class="nothing">
|
||||
<view class="nothing-box">
|
||||
<image class="nothing-img" :src="imgSrc" mode="aspectFill" lazy-load></image>
|
||||
<view class="nothing-con">{{content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"nothing-page",
|
||||
props:{
|
||||
imgSrc:{
|
||||
type:String,
|
||||
default:'/static/public/nothing.png'
|
||||
},
|
||||
content:{
|
||||
type:String,
|
||||
default:'暂无内容'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nothing{position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;}
|
||||
.nothing-box{display: flex;justify-content: center;flex-direction: column;align-items: center;}
|
||||
.nothing-box .nothing-img{width: 474rpx;height: 273rpx;}
|
||||
.nothing-con{font-size: 24rpx;font-family: PingFang SC;font-weight: 500;line-height: 33rpx;color: #333333;text-align: center;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<view :style="{
|
||||
color: textColor,
|
||||
fontSize: textFontSize,
|
||||
fontWeight: `${ ifBold ? 'bold' : 0 }`,
|
||||
textAlign: `${ ifCenter ? 'center' : 'left' }`,
|
||||
padding: paddingStr
|
||||
}">{{textStr}}</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"pitera",
|
||||
props:{
|
||||
// 内容
|
||||
textStr: {
|
||||
type:String,
|
||||
default:'-- NO MORE --'
|
||||
},
|
||||
// 字体颜色
|
||||
textColor: {
|
||||
type:String,
|
||||
default:'#999999'
|
||||
},
|
||||
// 字体大小
|
||||
textFontSize: {
|
||||
type: String,
|
||||
default: '24rpx'
|
||||
},
|
||||
// 是否加粗
|
||||
ifBold: {
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
// 是否居中
|
||||
ifCenter: {
|
||||
type:Boolean,
|
||||
default: true
|
||||
},
|
||||
// 内边距的值
|
||||
paddingStr: {
|
||||
type:String,
|
||||
default:'20rpx'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<!-- 底部导航 -->
|
||||
<view class="display-between-center payment-foot-box">
|
||||
<!-- 合计 -->
|
||||
<view class="payment-price">合计：￥{{totalPrice}}</view>
|
||||
<!-- 立即结算 -->
|
||||
<view @tap="immediatePaymentEv" class="payment-settlement">立即支付</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"payment",
|
||||
props:{
|
||||
totalPrice:{
|
||||
type:String,
|
||||
default: "0.00"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
immediatePaymentEv(){
|
||||
this.$emit('immediatePayment');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.display-between-center {display: flex;justify-content: space-between;align-items: center;}
|
||||
.payment-foot-box{position: fixed;bottom: 0;left: 0;right: 0;height: 130rpx;background-color: #efefef;font-size: 30rpx;}
|
||||
.payment-price{font-size: 36rpx;color: #f81c1c;font-weight: bold;margin-left: 60rpx;}
|
||||
.payment-settlement{width: 242rpx;height: 130rpx;background-color: #f81c1c;color: #FFFFFF;font-size: 36rpx;text-align: center;line-height: 130rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<view>
|
||||
<view @tap="lianK"
|
||||
:style="{
|
||||
background: backgroundColor,
|
||||
right:nright+'rpx',
|
||||
bottom:nbottom+'rpx',
|
||||
boxShadow: `0rpx 0rpx 30rpx rgba(0,0,0,${shadowNum})`,
|
||||
borderRadius: radiusNum,
|
||||
width: widthHeight,
|
||||
height: widthHeight}"
|
||||
class="customer-box">
|
||||
<i class="icon" :style="{color:iconColor}" :class="['icon-customer','icon-customer-black'][iconNum]" style="font-size: 70rpx;"></i>
|
||||
<!-- <image class="posia" src="/static/public/btnKF.png" style="width: 50rpx;height: 50rpx;top: 20rpx;" mode=""></image> -->
|
||||
<view v-if="showText" class="fon20" style="margin-top: -20rpx;">在线客服</view>
|
||||
<button class="fon24 posia-op" open-type="contact"></button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"public-customer",
|
||||
props:{
|
||||
// 客服框框大小
|
||||
widthHeight:{
|
||||
type:String,
|
||||
default:'110rpx'
|
||||
},
|
||||
// 客服框背景色
|
||||
backgroundColor:{
|
||||
type:String,
|
||||
default:'#000000'
|
||||
},
|
||||
// 阴影大小0~1
|
||||
shadowNum:{
|
||||
type:Number,
|
||||
default:0.55
|
||||
},
|
||||
// 圆角大小
|
||||
radiusNum:{
|
||||
type:String,
|
||||
default: '26rpx'
|
||||
},
|
||||
//距离右边多宽
|
||||
nright:{
|
||||
type:Number,
|
||||
default:20
|
||||
},
|
||||
nbottom:{//距离底部多高
|
||||
type:Number,
|
||||
default:260
|
||||
},
|
||||
// 是否显示在线客服文本
|
||||
showText:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 客服图标选中
|
||||
iconNum:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
// 客服图标颜色
|
||||
iconColor:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
nid:{//内容id
|
||||
type:String,
|
||||
default:'0'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicColor:uni.getStorageSync('publicColor'),
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
lianK(){
|
||||
this.$requst.post('user/rand-bind-service').then(res=>{})
|
||||
this.$requst.post('user/record',{type:'other',action:'ask',id:this.nid}).then(res=>{},error=>{})
|
||||
let maiOjb = {
|
||||
e:5,//内容咨询
|
||||
t:new Date().getTime()//当前时间戳
|
||||
}
|
||||
this.$toolAll.tools.maiDian(maiOjb)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-box {
|
||||
position: fixed;z-index: 2;
|
||||
display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<view v-if="isShowT" class="disjcac posAll" @tap="closeXial">
|
||||
<view class="bacf radius20 width100 tank-box">
|
||||
<view v-if="isXiala" class="pad-x20">
|
||||
<view class="mar-s30 mar-x40 tc">请选择客服</view>
|
||||
<view @tap.stop="openXia" class="disjbac radius10 pad-zy20 mar-zy20 xialak mar-x50 posir">
|
||||
<view class="col3" v-if="!isTag">{{category[current].title}}</view>
|
||||
<view class="col3 disac width100" v-if="isTag"><input class="width100 mar-y20" disabled v-model="tagStr"></view>
|
||||
<image :class="isZhuan?'zhuan':'nozhuan'" src="/static/public/sanj.png" mode="aspectFill"></image>
|
||||
<!-- 下拉列表 -->
|
||||
<view v-if="isZhuan" class="posia bacf radius10 xial-box">
|
||||
<!-- 普通下拉 -->
|
||||
<view class="pad-zy20 xial-item-box" v-if="!isTag">
|
||||
<view @tap.stop="chooseXia(index)":class="current==index?'pcol':''" v-for="(item,index) in category" :key="index">{{item.title}}</view>
|
||||
</view>
|
||||
<!-- 标签下拉 -->
|
||||
<view class="pad-zy20 xial-item-box" v-if="isTag">
|
||||
<!-- <view class="disac" @tap.stop="quanEv" :class="isAll?'pcol':''">
|
||||
<checkbox style="width: 60rpx;height: 60rpx;display: inherit;" color="#3875F6" :checked="isAll" />
|
||||
全选
|
||||
</view> -->
|
||||
<view @tap.stop="chooseXiaTag(index)" class="disac" :class="item.checked?'pcol':''" v-for="(item,index) in category" :key="index">
|
||||
<view v-if="" class="disac">
|
||||
<checkbox style="width: 60rpx;height: 60rpx;display: inherit;" color="#3875F6" :data-id="item.id" :checked="item.checked" />
|
||||
</view>
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="tc tank-box-itemone">{{contentVal}}</view>
|
||||
<view :class="isCenter?'disjcac':'disjb'" class="fon28 colf pad-x30 pad-zy30 tc">
|
||||
<view @tap="cancleEv" v-if="!isCenter" class="pad-sx20 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">{{clearVal}}</view>
|
||||
<view @tap="comfirEv" :style="{background:publicColor}" class="pad-sx20 radius10 tank-btn">{{comfrimVal}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"pupo",
|
||||
props:{
|
||||
isShowT:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
isCenter:{//按钮是否居中，或只显示蓝色按钮
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
contentVal:{
|
||||
type:String,
|
||||
default:'是否清除历史搜索？'
|
||||
},
|
||||
clearVal:{//取消文本
|
||||
type:String,
|
||||
default:'取消'
|
||||
},
|
||||
comfrimVal:{//确认文本
|
||||
type:String,
|
||||
default:'确认'
|
||||
},
|
||||
isXiala:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
category:{
|
||||
type:Array,
|
||||
default:function(){
|
||||
return ['许嵩']
|
||||
}
|
||||
},
|
||||
isTag:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicColor:uni.getStorageSync('publicColor'),
|
||||
isZhuan:false,
|
||||
current:0,
|
||||
tagIds:[],
|
||||
tagVal:[],
|
||||
tagStr:'请选择',
|
||||
isAll:false
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
// 关闭下拉
|
||||
closeXial(){
|
||||
this.isZhuan = false;
|
||||
},
|
||||
comfirEv(){//确认事件
|
||||
this.isZhuan = false
|
||||
this.current = 0
|
||||
this.$emit('comfirmev')
|
||||
},
|
||||
cancleEv(){//取消事件
|
||||
this.isZhuan = false
|
||||
this.current = 0
|
||||
this.$emit('cancleev')
|
||||
},
|
||||
chooseXia(index){
|
||||
this.current = index
|
||||
this.$emit('chooseXiaT',this.category[index])
|
||||
},
|
||||
openXia(){
|
||||
this.isZhuan = !this.isZhuan
|
||||
},
|
||||
// 标签单选
|
||||
chooseXiaTag(index){
|
||||
let isexistence = this.tagIds.indexOf(this.category[index].id);
|
||||
this.category[index].checked = !this.category[index].checked;
|
||||
if(isexistence!=-1){
|
||||
this.tagIds.splice(isexistence,1);
|
||||
this.tagVal.splice(isexistence,1)
|
||||
} else {
|
||||
this.tagIds.push(this.category[index].id)
|
||||
this.tagVal.push(this.category[index].title)
|
||||
}
|
||||
this.tagStr = this.tagVal.join(',')
|
||||
// 单选时，控制全选按钮是否选中
|
||||
if(this.tagIds.length==this.category.length){
|
||||
this.isAll = true;
|
||||
} else this.isAll = false;
|
||||
if(!this.tagIds.length) {
|
||||
this.tagStr = '请选择'
|
||||
}
|
||||
this.$emit('chooseXiaT',{arr:this.category,id:this.tagIds.join(',')})
|
||||
},
|
||||
// 标签全选
|
||||
quanEv(){
|
||||
this.isAll = !this.isAll;
|
||||
this.tagIds = [];
|
||||
this.tagVal = [];
|
||||
if(this.isAll){
|
||||
this.category.forEach(item=>{
|
||||
item.checked = true;
|
||||
this.tagIds.push(item.id)
|
||||
this.tagVal.push(item.title)
|
||||
})
|
||||
this.tagStr = this.tagVal.join(',')
|
||||
} else {
|
||||
this.category.forEach(item=>{item.checked = false;})
|
||||
this.tagStr = '请选择'
|
||||
}
|
||||
this.$emit('chooseXiaT',{arr:this.category,id:this.tagIds.join(',')})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<view class="htz-rate-main">
|
||||
<template v-for="(item,index) in count">
|
||||
<image @tap="checkItem((index+1))" class="htz-rate-image" :key="index"
|
||||
:style="{'width':size+'rpx','height':size+'rpx','padding-right':gutter+'rpx'}"
|
||||
:src="checkedVal<(index+1)?defImgSrc:selImgSrc"></image>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'htz-rate',
|
||||
props: {
|
||||
value: { //受控分值
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
count: { //数量
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
size: { //图标大小
|
||||
type: Number,
|
||||
default: 42,
|
||||
},
|
||||
gutter: { //图标间距
|
||||
type: Number,
|
||||
default: 15,
|
||||
},
|
||||
type: { //内置类型
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
disHref: { //自定义默认图片
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
checkedHref: { //自定义选中图片
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
readonly: { //是否只读
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ImgData: ['/static/img/rate/rate1_0.png', '/static/img/rate/rate2_0.png',
|
||||
'/static/img/rate/rate3_0.png', '/static/img/rate/rate4_0.png', '/static/img/rate/rate5_0.png',
|
||||
'/static/img/rate/rate6_0.png'
|
||||
],
|
||||
defImgSrc: '',
|
||||
selImgSrc: '',
|
||||
checkedVal: 0,
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.$nextTick(function() {
|
||||
this.checkedVal = this.value;
|
||||
if (this.disHref != '') {
|
||||
this.defImgSrc = this.disHref;
|
||||
this.selImgSrc = this.checkedHref;
|
||||
} else {
|
||||
//if (this.type != undefined) {
|
||||
this.defImgSrc = this.ImgData[this.type];
|
||||
this.selImgSrc = this.ImgData[this.type].replace('_0', '_1');
|
||||
//}
|
||||
}
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
value(val, oldVal) {
|
||||
this.checkedVal = this.value;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkItem(index) {
|
||||
if (!this.readonly) {
|
||||
this.checkedVal = index;
|
||||
this.$emit('input', index);
|
||||
this.$emit('change', index);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.htz-rate-main {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.htz-rate-image {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.htz-image-upload-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.htz-image-upload-Item {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 13rpx;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.htz-image-upload-Item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.htz-image-upload-Item-add {
|
||||
font-size: 105rpx;
|
||||
/* line-height: 160rpx; */
|
||||
text-align: center;
|
||||
border: 1px dashed #d9d9d9;
|
||||
color: #d9d9d9;
|
||||
}
|
||||
|
||||
.htz-image-upload-Item-del {
|
||||
background-color: #f5222d;
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
line-height: 35rpx;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="showShare" @tap="closeShare" style="position: fixed;top: 0;right: 0;left: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 10;">
|
||||
</view>
|
||||
<view v-if="showShare" style="display: flex;flex-direction: column;justify-content: space-around;
|
||||
position: fixed;bottom: 0;left: 0;right: 0;z-index: 100; background-color: #FFFFFF;padding: 40rpx;">
|
||||
<view class="posir" v-for="(item,index) in cateArr" :key="index" style="display: flex;justify-content: center;align-items: center;flex-direction: column;width: 25%;">
|
||||
<image style="width: 100rpx;height: 100rpx;margin-bottom: 10rpx;" :src="item.src" mode=""></image>
|
||||
<view class="fon28 color33">{{item.title}}</view>
|
||||
<button data-name="shareBtn" open-type="share" plain="true" class="posia" style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;">分享</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'shareAll',
|
||||
props:{
|
||||
showShare:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cateArr:[
|
||||
{src:'/static/img/share/weix.png',title:'微信好友'},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
closeShare(){
|
||||
this.$emit('closeShare')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<view class="pad20 shop_list_box">
|
||||
<view style="width: 48.6%;float: left;">
|
||||
<view v-if="index1%2==0" v-for="(item1,index1) in newList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn" @tap="goPage(item1.id,index1)">
|
||||
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||
<view class="pad-zy20 pad-s10 pad-x30">
|
||||
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
|
||||
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
|
||||
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
|
||||
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
|
||||
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
|
||||
</view>
|
||||
<view class="disac">
|
||||
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
|
||||
<view v-if="item1.isIntegral" class="mar-s20">
|
||||
<view>积分:{{item1.integral}}</view>
|
||||
<view class="disac mar-s20" v-if="item1.grade!=0">
|
||||
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
|
||||
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<span v-if="item1.isPing">拼团价</span>
|
||||
<span v-if="item1.isXian">促销价</span>
|
||||
￥{{item1.zhePrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
|
||||
</view>
|
||||
<view v-if="item1.isPing" class="disjbac mar-s20">
|
||||
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
|
||||
<view class="disac">
|
||||
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 48.6%;float: right;">
|
||||
<view v-if="index1%2!=0" v-for="(item1,index1) in newList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn" @tap="goPage(item1.id,index1)">
|
||||
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||
<view class="pad-zy20 pad-s10 pad-x30">
|
||||
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
|
||||
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
|
||||
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
|
||||
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
|
||||
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
|
||||
</view>
|
||||
<view class="disac">
|
||||
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
|
||||
<view v-if="item1.isIntegral" class="mar-s20">
|
||||
<view>积分:{{item1.integral}}</view>
|
||||
<view class="disac mar-s20" v-if="item1.grade!=0">
|
||||
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
|
||||
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<span v-if="item1.isPing">拼团价</span>
|
||||
<span v-if="item1.isXian">促销价</span>
|
||||
￥{{item1.zhePrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
|
||||
</view>
|
||||
<view v-if="item1.isPing" class="disjbac mar-s20">
|
||||
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
|
||||
<view class="disac">
|
||||
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"shop-list",
|
||||
props:{
|
||||
dataList:{
|
||||
type:Array,
|
||||
default:function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
iswhere:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicColor:uni.getStorageSync('publicColor'),
|
||||
newList:[],
|
||||
timeList:[],//时间列表
|
||||
timer:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if(this.dataList.length!=0){
|
||||
this.dataList.forEach((item,index)=>{
|
||||
if(item.activity_end_at!='') {
|
||||
let obj = {
|
||||
id:item.id,
|
||||
reponseTime:item.reponseTime,
|
||||
time:item.activity_end_at,
|
||||
nIndex:index
|
||||
}
|
||||
this.timeList.push(obj);
|
||||
}
|
||||
})
|
||||
this.$toolAll.tools.showToast('加载中...','none',1000);
|
||||
if(this.timeList!=0){
|
||||
this.timer = setInterval(()=>{//定时器
|
||||
if(this.timeList.length!=0){
|
||||
this.timeList.forEach((item,index)=>{
|
||||
if(item.id==this.dataList[item.nIndex].id){
|
||||
let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
|
||||
this.timeList[index].reponseTime = new Date(this.timeList[index].reponseTime).getTime() + 1000;//请求接口的时间递增，即：开始时间
|
||||
if(this.timeList[index].reponseTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
|
||||
this.dataList[item.nIndex].activity_end_at = "活动已结束";
|
||||
} else {
|
||||
// 继续进行倒计时
|
||||
this.dataList[item.nIndex].activity_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,this.timeList[index].reponseTime);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},1000)
|
||||
setTimeout(()=>{
|
||||
this.newList = this.dataList;
|
||||
},1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
destroyev(){
|
||||
uni.clearInterval(this.timer);
|
||||
this.$emit('destroyEv')
|
||||
},
|
||||
goPage(id,index){//进入商品详情事件
|
||||
let is_activity = 0;
|
||||
let shopId = 0;
|
||||
if(this.dataList[index].isTuan==true || this.dataList[index].isPing==true || this.dataList[index].isXian==true) {
|
||||
is_activity = 1;
|
||||
shopId = this.dataList[index].activity_id;
|
||||
} else {
|
||||
shopId = id;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${shopId}&isIntegral=${this.dataList[index].isIntegral}&is_activity=${is_activity}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,143 @@
|
|||
/* eslint-disable */
|
||||
var provinceData = [{
|
||||
"label": "北京市",
|
||||
"value": "11"
|
||||
},
|
||||
{
|
||||
"label": "天津市",
|
||||
"value": "12"
|
||||
},
|
||||
{
|
||||
"label": "河北省",
|
||||
"value": "13"
|
||||
},
|
||||
{
|
||||
"label": "山西省",
|
||||
"value": "14"
|
||||
},
|
||||
{
|
||||
"label": "内蒙古自治区",
|
||||
"value": "15"
|
||||
},
|
||||
{
|
||||
"label": "辽宁省",
|
||||
"value": "21"
|
||||
},
|
||||
{
|
||||
"label": "吉林省",
|
||||
"value": "22"
|
||||
},
|
||||
{
|
||||
"label": "黑龙江省",
|
||||
"value": "23"
|
||||
},
|
||||
{
|
||||
"label": "上海市",
|
||||
"value": "31"
|
||||
},
|
||||
{
|
||||
"label": "江苏省",
|
||||
"value": "32"
|
||||
},
|
||||
{
|
||||
"label": "浙江省",
|
||||
"value": "33"
|
||||
},
|
||||
{
|
||||
"label": "安徽省",
|
||||
"value": "34"
|
||||
},
|
||||
{
|
||||
"label": "福建省",
|
||||
"value": "35"
|
||||
},
|
||||
{
|
||||
"label": "江西省",
|
||||
"value": "36"
|
||||
},
|
||||
{
|
||||
"label": "山东省",
|
||||
"value": "37"
|
||||
},
|
||||
{
|
||||
"label": "河南省",
|
||||
"value": "41"
|
||||
},
|
||||
{
|
||||
"label": "湖北省",
|
||||
"value": "42"
|
||||
},
|
||||
{
|
||||
"label": "湖南省",
|
||||
"value": "43"
|
||||
},
|
||||
{
|
||||
"label": "广东省",
|
||||
"value": "44"
|
||||
},
|
||||
{
|
||||
"label": "广西壮族自治区",
|
||||
"value": "45"
|
||||
},
|
||||
{
|
||||
"label": "海南省",
|
||||
"value": "46"
|
||||
},
|
||||
{
|
||||
"label": "重庆市",
|
||||
"value": "50"
|
||||
},
|
||||
{
|
||||
"label": "四川省",
|
||||
"value": "51"
|
||||
},
|
||||
{
|
||||
"label": "贵州省",
|
||||
"value": "52"
|
||||
},
|
||||
{
|
||||
"label": "云南省",
|
||||
"value": "53"
|
||||
},
|
||||
{
|
||||
"label": "西藏自治区",
|
||||
"value": "54"
|
||||
},
|
||||
{
|
||||
"label": "陕西省",
|
||||
"value": "61"
|
||||
},
|
||||
{
|
||||
"label": "甘肃省",
|
||||
"value": "62"
|
||||
},
|
||||
{
|
||||
"label": "青海省",
|
||||
"value": "63"
|
||||
},
|
||||
{
|
||||
"label": "宁夏回族自治区",
|
||||
"value": "64"
|
||||
},
|
||||
{
|
||||
"label": "新疆维吾尔自治区",
|
||||
"value": "65"
|
||||
},
|
||||
{
|
||||
"label": "台湾",
|
||||
"value": "66"
|
||||
},
|
||||
{
|
||||
"label": "香港",
|
||||
"value": "67"
|
||||
},
|
||||
{
|
||||
"label": "澳门",
|
||||
"value": "68"
|
||||
},
|
||||
{
|
||||
"label": "钓鱼岛",
|
||||
"value": "69"
|
||||
}
|
||||
]
|
||||
export default provinceData;
|
||||
|
|
@ -0,0 +1,420 @@
|
|||
<template>
|
||||
<view class="simple-address" v-if="showPopup" @touchmove.stop.prevent="clear">
|
||||
<!-- 遮罩层 -->
|
||||
<view
|
||||
class="simple-address-mask"
|
||||
@touchmove.stop.prevent="clear"
|
||||
v-if="maskClick"
|
||||
:class="[ani + '-mask', animation ? 'mask-ani' : '']"
|
||||
:style="{
|
||||
'background-color': maskBgColor
|
||||
}"
|
||||
@tap="hideMask(true)"
|
||||
></view>
|
||||
|
||||
<view class="simple-address-content simple-address--fixed" :class="[type, ani + '-content', animation ? 'content-ani' : '']">
|
||||
<view class="simple-address__header">
|
||||
<view class="simple-address__header-btn-box" @click="pickerCancel">
|
||||
<text class="simple-address__header-text" :style="{ color: cancelColor, fontSize: btnFontSize }">取消</text>
|
||||
</view>
|
||||
<view class="simple-address__header-btn-box" @click="pickerConfirm">
|
||||
<text class="simple-address__header-text" :style="{ color: confirmColor || themeColor, fontSize: btnFontSize }">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="simple-address__box">
|
||||
<picker-view indicator-style="height: 70rpx;" class="simple-address-view" :value="pickerValue" @change="pickerChange">
|
||||
<picker-view-column>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in provinceDataList" :key="index">{{ item.label }}</text>
|
||||
<!-- #endif -->
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in cityDataList" :key="index">{{ item.label }}</text>
|
||||
<!-- #endif -->
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text class="picker-item" :style="{ fontSize: fontSize }" v-for="(item, index) in areaDataList" :key="index">{{ item.label }}</text>
|
||||
<!-- #endif -->
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Simple-addres 地址联动组件
|
||||
* @description 三级地址联动，支持（app）nvue、小程序、H5
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=1084
|
||||
* @property {String} animation 是否开启动画
|
||||
* @property {String} type = [bottom] 弹出层类型，暂时只支持底部弹出
|
||||
* @property {Boolean} maskClick = [true | false] 是否允许点击遮罩层关闭
|
||||
* @property {Boolean} show = [true | false] 显示或隐藏地址组件
|
||||
* @property {String} maskBgColor 遮罩层背景颜色
|
||||
* @property {String} cancelColor 取消按钮颜色，默认为：#1aad19
|
||||
* @property {String} confirmColor 确认按钮颜色，默认为：themeColor
|
||||
* @property {String} themeColor 主题颜色，后续会废弃该配置，建议使用`cancelColor`或`confirmColor`
|
||||
* @property {String} btnFontSize 取消、确认按钮字体大小，默认为`uni.scss里的 $uni-font-size-base `
|
||||
* @property {String} fontSize picker-item字体大小，默认为：28rpx
|
||||
* @property {Array} pickerValueDefault 默认值，可以通过function queryIndex 获取
|
||||
* @property {Function} queryIndex 根据自定义信息返回对应的index
|
||||
* @property {Function} open 打开
|
||||
* @example <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
|
||||
*/
|
||||
|
||||
import provinceData from './city-data/province.js';
|
||||
import cityData from './city-data/city.js';
|
||||
import areaData from './city-data/area.js';
|
||||
export default {
|
||||
name: 'simpleAddress',
|
||||
props: {
|
||||
mode: {
|
||||
// 地址类型
|
||||
// default 则代表老版本根据index索引获取数据
|
||||
//
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/* 弹出层类型，可选值；
|
||||
bottom：底部弹出层
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBgColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)' //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
|
||||
},
|
||||
themeColor: {
|
||||
type: String,
|
||||
default: '' // 确认按钮颜色（向下兼容）
|
||||
},
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '' // 取消按钮颜色
|
||||
},
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '' // 确认按钮颜色
|
||||
},
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: '28rpx' // picker-item字体大小
|
||||
},
|
||||
btnFontSize: {
|
||||
type: String,
|
||||
default: '' // 按钮的字体大小
|
||||
},
|
||||
/* 默认值 */
|
||||
pickerValueDefault: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [0, 0, 0];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ani: '',
|
||||
showPopup: false,
|
||||
pickerValue: [0, 0, 0],
|
||||
provinceDataList: [],
|
||||
cityDataList: [],
|
||||
areaDataList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show(newValue) {
|
||||
if (newValue) {
|
||||
this.open();
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
pickerValueDefault() {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
|
||||
this.provinceDataList = provinceData;
|
||||
this.cityDataList = cityData[this.pickerValueDefault[0]];
|
||||
this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
|
||||
this.pickerValue = this.pickerValueDefault;
|
||||
},
|
||||
handPickValueDefault() {
|
||||
if (this.pickerValueDefault !== [0, 0, 0]) {
|
||||
if (this.pickerValueDefault[0] > provinceData.length - 1) {
|
||||
this.pickerValueDefault[0] = provinceData.length - 1;
|
||||
}
|
||||
if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
|
||||
this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
|
||||
}
|
||||
if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
|
||||
this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
pickerChange(e) {
|
||||
let changePickerValue = e.detail.value;
|
||||
if (this.pickerValue[0] !== changePickerValue[0]) {
|
||||
// 第一级发生滚动
|
||||
this.cityDataList = cityData[changePickerValue[0]];
|
||||
this.areaDataList = areaData[changePickerValue[0]][0];
|
||||
changePickerValue[1] = 0;
|
||||
changePickerValue[2] = 0;
|
||||
} else if (this.pickerValue[1] !== changePickerValue[1]) {
|
||||
// 第二级滚动
|
||||
this.areaDataList = areaData[changePickerValue[0]][changePickerValue[1]];
|
||||
changePickerValue[2] = 0;
|
||||
}
|
||||
this.pickerValue = changePickerValue;
|
||||
this._$emit('onChange');
|
||||
},
|
||||
_$emit(emitName) {
|
||||
let pickObj = {
|
||||
label: this._getLabel(),
|
||||
value: this.pickerValue,
|
||||
cityCode: this._getCityCode(),
|
||||
areaCode: this._getAreaCode(),
|
||||
provinceCode: this._getProvinceCode(),
|
||||
labelArr: this._getLabel().split('-')
|
||||
};
|
||||
this.$emit(emitName, pickObj);
|
||||
},
|
||||
_getLabel() {
|
||||
let pcikerLabel =
|
||||
this.provinceDataList[this.pickerValue[0]].label + '-' + this.cityDataList[this.pickerValue[1]].label + '-' + this.areaDataList[this.pickerValue[2]].label;
|
||||
return pcikerLabel;
|
||||
},
|
||||
_getCityCode() {
|
||||
return this.cityDataList[this.pickerValue[1]].value;
|
||||
},
|
||||
_getProvinceCode() {
|
||||
return this.provinceDataList[this.pickerValue[0]].value;
|
||||
},
|
||||
_getAreaCode() {
|
||||
return this.areaDataList[this.pickerValue[2]].value;
|
||||
},
|
||||
queryIndex(params = [], type = 'value') {
|
||||
// params = [ 11 ,1101,110101 ];
|
||||
// 1.获取省份的index
|
||||
let provinceIndex = provinceData.findIndex(res => res[type] == params[0]);
|
||||
let cityIndex = cityData[provinceIndex].findIndex(res => res[type] == params[1]);
|
||||
let areaIndex = areaData[provinceIndex][cityIndex].findIndex(res => res[type] == params[2]);
|
||||
return {
|
||||
index: [provinceIndex, cityIndex, areaIndex],
|
||||
data: {
|
||||
province: provinceData[provinceIndex],
|
||||
city: cityData[provinceIndex][cityIndex],
|
||||
area: areaData[provinceIndex][cityIndex][areaIndex]
|
||||
}
|
||||
};
|
||||
},
|
||||
clear() {},
|
||||
hideMask() {
|
||||
this._$emit('onCancel');
|
||||
this.close();
|
||||
},
|
||||
pickerCancel() {
|
||||
this._$emit('onCancel');
|
||||
this.close();
|
||||
},
|
||||
pickerConfirm() {
|
||||
this._$emit('onConfirm');
|
||||
this.close();
|
||||
},
|
||||
open() {
|
||||
this.showPopup = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.ani = 'simple-' + this.type;
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
close(type) {
|
||||
if (!this.maskClick && type) return;
|
||||
this.ani = '';
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showPopup = false;
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.simple-address {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.simple-address-mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.mask-ani {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.simple-bottom-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.simple-center-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.simple-address--fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460rpx);
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.simple-address-content {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.simple-content-bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(500rpx);
|
||||
}
|
||||
|
||||
.content-ani {
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.simple-bottom-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.simple-center-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.simple-address__header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
border-bottom-color: #f2f2f2;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1rpx;
|
||||
}
|
||||
|
||||
.simple-address--fixed-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-top-color: $uni-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1rpx;
|
||||
}
|
||||
|
||||
.simple-address__header-btn-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.simple-address__header-text {
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-base;
|
||||
color: #1aad19;
|
||||
line-height: 70rpx;
|
||||
padding-left: 40rpx;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
|
||||
.simple-address__box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.simple-address-view {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
height: 408rpx;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.picker-item {
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<view class="status-box statusHNH">
|
||||
<!-- 网络、电量栏 start -->
|
||||
<view :style="{height: statusBarHeight+'px',background: backgroudColor}"></view>
|
||||
<!-- 网络、电量栏 end -->
|
||||
|
||||
<!-- 头部状态栏 start -->
|
||||
<view class="status-nav"
|
||||
:style="{background: backgroudColor,height: navBarHeight+'px'}">
|
||||
<!-- 返回键 -->
|
||||
<view class="return-box" @tap="backEv" v-if="ifReturn"
|
||||
:style="{height: navBarHeight+'px'}">
|
||||
<i class="icon icon-return" style="font-size: 40rpx;"
|
||||
:style="{color: returnColor}"></i>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="tab-title" v-if="ifTitle"
|
||||
:style="{
|
||||
color: titleColor,
|
||||
justifyContent: ifCenter ? 'center' : '',
|
||||
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
||||
<view class="title-box" :class="['','clips1','clips2'][clipNumber]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">{{navBarTitle}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 头部状态栏 end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'status-nav',
|
||||
props:{
|
||||
//状态栏、导航栏背景颜色
|
||||
backgroudColor:{
|
||||
type:String,
|
||||
default:'#FFFFFF'
|
||||
},
|
||||
// 默认导航栏高度
|
||||
navBarHeight: {
|
||||
type:Number,
|
||||
default:50
|
||||
},
|
||||
//是否显示返回键
|
||||
ifReturn:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 返回键颜色
|
||||
returnColor: {
|
||||
type:String,
|
||||
default:'#000'
|
||||
},
|
||||
//是否显示标题
|
||||
ifTitle:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 导航栏标题
|
||||
navBarTitle: {
|
||||
type:String,
|
||||
default:'佩丽商城'
|
||||
},
|
||||
// 标题最多几行显示
|
||||
clipNumber: {
|
||||
type:Number,
|
||||
default:1
|
||||
},
|
||||
//标题颜色
|
||||
titleColor:{
|
||||
type:String,
|
||||
default:'#333333'
|
||||
},
|
||||
// 标题是否居中
|
||||
ifCenter: {
|
||||
type:Boolean,
|
||||
default: true
|
||||
},
|
||||
// 来自哪里
|
||||
fromWhere: {
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
statusBarHeight: uni.getStorageSync('statusBar'),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 缓存状态栏+标题栏的高度
|
||||
// const query = wx.createSelectorQuery().in(this)
|
||||
// query.select('.statusHNH').boundingClientRect((rect) => {
|
||||
// uni.setStorageSync('statusHNH',rect.height)
|
||||
// }).exec();
|
||||
|
||||
// 获取当前页面路径
|
||||
let pages = getCurrentPages();
|
||||
let route = pages[pages.length - 1].route;
|
||||
console.log(route,99);
|
||||
uni.setStorageSync('url',`/${route}?invite_code=${uni.getStorageSync('invite_code')}`);
|
||||
this.log(route,'status-nav组件打印：当前页面路径')
|
||||
},
|
||||
methods:{
|
||||
//返回事件
|
||||
backEv(){
|
||||
if(uni.getStorageSync('outside')*1==2){
|
||||
this.fromWhere = uni.getStorageSync('outside')*1;
|
||||
}
|
||||
switch (this.fromWhere){
|
||||
case 1:
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url:'/pages/tabbar/pagehome/pagehome'
|
||||
})
|
||||
uni.setStorageSync('outside',0)
|
||||
break;
|
||||
case 0:
|
||||
uni.navigateBack({
|
||||
delta:1
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
|
||||
.status-box{
|
||||
position: fixed;top: 0;left: 0;right: 0;z-index: 10;
|
||||
}
|
||||
.status-nav{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.return-box {
|
||||
display: flex;justify-content: center;align-items: center;flex-shrink: 0;
|
||||
position: absolute;
|
||||
padding: 0rpx 10rpx;
|
||||
}
|
||||
.return-box i {font-size: 56rpx;}
|
||||
.tab-title{
|
||||
width: 100%;
|
||||
font-size: 38rpx;
|
||||
display: flex;
|
||||
}
|
||||
.tab-title .title-box{margin-top: -4rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="isDot" class="banner-box">
|
||||
<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight+'px'}" :autoplay="isplay" :circular="true" :interval="3000" :duration="500">
|
||||
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
||||
<view @tap="chooseImg(index,item.url)" class="img-box">
|
||||
<image :style="{borderRadius:newRadius+'px',height:newHeight+'px'}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill"></image>
|
||||
<image @tap.stop="playVideo(index)" v-if="item.isVideo && isVedio" class="posia animated bounceIn" style="width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 指示点 -->
|
||||
<view class="dot-box" :style="{bottom:newBottom+'px'}">
|
||||
<view :class="bcurrent==indexd ? 'dotActive' : 'dotMo'" v-for="(itemd,indexd) in bannerList.length" :key="indexd"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"swiper-pu",
|
||||
props:{
|
||||
isplay:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
isDot:{//是否显示指示点
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
bannerList:{//默认轮播图片
|
||||
type:Array,
|
||||
default:function(){
|
||||
return [
|
||||
{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''},
|
||||
{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''},
|
||||
]
|
||||
}
|
||||
},
|
||||
newHeight:{//swiper的高
|
||||
type:String,
|
||||
default:'200'
|
||||
},
|
||||
newBottom:{//指示点距离底部位置
|
||||
type:String,
|
||||
default:'18'
|
||||
},
|
||||
newRadius:{//图片圆角
|
||||
type:String,
|
||||
default:'0'
|
||||
},
|
||||
browseP:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bcurrent:0,
|
||||
isShowVideo:false,
|
||||
autoplay:false,
|
||||
isVedio:uni.getStorageSync('is_vedio')
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
chooseImg(index,url){
|
||||
// console.log('当前banner图',index);
|
||||
this.bcurrent = index
|
||||
if(this.browseP){
|
||||
let imgList = []
|
||||
this.bannerList.forEach(item=>{
|
||||
let nurl = ''
|
||||
let obj = {}
|
||||
if(this.isVedio) {
|
||||
item.url=='' ? nurl = item.imgSrc : nurl = item.url
|
||||
obj = {
|
||||
url:nurl,
|
||||
type:item.isVideo?'video':'image',
|
||||
poster:item.poster
|
||||
}
|
||||
} else {
|
||||
nurl = item.imgSrc
|
||||
obj = {
|
||||
url:nurl,
|
||||
type:'image',
|
||||
poster:item.poster
|
||||
}
|
||||
}
|
||||
imgList.push(obj)
|
||||
})
|
||||
uni.previewMedia({
|
||||
current:this.bcurrent,
|
||||
sources:imgList
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:`/${url}`
|
||||
})
|
||||
}
|
||||
},
|
||||
changeBanner(e){
|
||||
this.bcurrent = e.detail.current//当前的指示点下标
|
||||
},
|
||||
playVideo(index){
|
||||
// console.log('播放视频');
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.banner-box{position: relative;}
|
||||
.img-box{position: relative;display: flex;justify-content: center;align-items: center;}
|
||||
.img{width:100%;vertical-align: bottom;}
|
||||
.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
|
||||
.dotActive{width: 20rpx;height: 20rpx;margin-right: 10rpx;border-radius: 20rpx; background-color: rgba(255, 255, 255, 1);}
|
||||
.dotMo{width: 20rpx;height: 20rpx;margin-right: 10rpx;border-radius: 100%;background-color: rgba(191, 191, 191, 0.8);}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view class="tabBlock" v-if="list.length > 0">
|
||||
<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabsScrollLeft" @scroll="scroll">
|
||||
<view class="tab" id="tab_list">
|
||||
<!-- 循环体 -->
|
||||
<view v-for="(item, index) in list" :key="index"
|
||||
:class="['tab__item', {'tab__item--active': currentIndex === index}]"
|
||||
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
|
||||
@click="select(item, index)">
|
||||
<!-- 标题 -->
|
||||
<!-- <view><slot name="title" :title="item.title"></slot></view> -->
|
||||
<!-- 标题 -->
|
||||
<view v-if="!showTitleSlot">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下划线 -->
|
||||
<view class="tab__line"
|
||||
:style="{background: lineColor, width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}">
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: [Number, String],
|
||||
list: { // 传值
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
itemColor: String, // tab内容颜色
|
||||
lineColor: String, // 下划线颜色
|
||||
lineAnimated: { // 是否展示下划线动画
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
lineStyle: {},
|
||||
scrollLeft: 0,
|
||||
tabsScrollLeft: 0,
|
||||
duration: 0.3
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showTitleSlot() {
|
||||
return this.$scopedSlots.title
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list() {
|
||||
this.setTabList()
|
||||
},
|
||||
value() {
|
||||
this.currentIndex = this.value
|
||||
this.setTabList()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.currentIndex = this.value
|
||||
this.setTabList()
|
||||
if (!this.lineAnimated) {
|
||||
this.duration = 0
|
||||
}
|
||||
console.log(this.$scopedSlots)
|
||||
},
|
||||
methods: {
|
||||
select(item, index) {
|
||||
this.$emit('input', index)
|
||||
},
|
||||
setTabList() {
|
||||
this.$nextTick(() => {
|
||||
if (this.list.length > 0) {
|
||||
this.setLine()
|
||||
this.scrollIntoView()
|
||||
}
|
||||
})
|
||||
},
|
||||
setLine() {
|
||||
let lineWidth = 0,
|
||||
lineLeft = 0
|
||||
this.getElementData(`#tab_item`, (data) => {
|
||||
let el = data[this.currentIndex]
|
||||
this.$emit('tabheight',el.height)
|
||||
lineWidth = el.width / 2
|
||||
// lineLeft = el.width * (this.currentIndex + 0.5) // 此种只能针对每个item长度一致的
|
||||
lineLeft = el.width / 2 + (-data[0].left) + el.left
|
||||
this.lineStyle = {
|
||||
width: `${lineWidth}px`,
|
||||
transform: `translateX(${lineLeft}px) translateX(-50%)`,
|
||||
transitionDuration: `${this.duration}s`
|
||||
};
|
||||
})
|
||||
},
|
||||
scrollIntoView() { // item滚动
|
||||
let lineLeft = 0;
|
||||
this.getElementData('#tab_list', (data) => {
|
||||
let list = data[0]
|
||||
this.getElementData(`#tab_item`, (data) => {
|
||||
let el = data[this.currentIndex]
|
||||
// lineLeft = el.width * (this.currentIndex + 0.5) - list.width / 2 - this.scrollLeft
|
||||
lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
|
||||
this.tabsScrollLeft = this.scrollLeft + lineLeft
|
||||
})
|
||||
})
|
||||
},
|
||||
getElementData(el, callback) {
|
||||
uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
|
||||
callback(data[0]);
|
||||
});
|
||||
},
|
||||
scroll(e) {
|
||||
this.scrollLeft = e.detail.scrollLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tabBlock {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
padding-bottom: 15rpx;
|
||||
white-space: nowrap;
|
||||
&__item {
|
||||
// flex: 1;
|
||||
width: 20%;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
color: #868695;
|
||||
&--active {
|
||||
color: $uni-color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-title {
|
||||
margin: 0 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab__line {
|
||||
display: block;
|
||||
height: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
background: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
## 功能描述
|
||||
根据内容生成二维码，并返回图片地址
|
||||
|
||||
## 平台兼容性
|
||||
兼容APP、H5及微信小程序。其他平台未测试
|
||||
|
||||
## 安装方式
|
||||
安装到components文件夹，支持[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)组件模式。
|
||||
|
||||
## 使用方式
|
||||
**<font color=#FF0000 >可根据属性自定义二维码</font>**
|
||||
``` javascript
|
||||
<yz-qr></yz-qr>
|
||||
```
|
||||
|
||||
## 属性说明
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|-- |-- |-- |-- |
|
||||
|text |String |'hello' |二维码内容 |
|
||||
|size |Number |340 |单位是px |
|
||||
|colorDark |String |'#000000' |黑色二维码 |
|
||||
|colorLight |String |'#ffffff' |白色背景 |
|
||||
|
||||
## 示例代码
|
||||
``` javascript
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 通过 ref 为子组件赋予一个 ID 引用,访问子组件实例 -->
|
||||
<yz-qr ref="qrPath" :text="text" :size="size" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
|
||||
|
||||
<view class="text">
|
||||
二维码内容:<text>{{text}}</text>
|
||||
</view>
|
||||
<view class="text">
|
||||
图片地址:<text>{{canvasQrPath}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
canvasQrPath: '',
|
||||
text: 'hello',
|
||||
size: 200,
|
||||
colorDark: '#ff0000',
|
||||
colorLight: '#ffffff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getQrPath()
|
||||
},
|
||||
methods: {
|
||||
getQrPath() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.canvasQrPath = that.$refs.qrPath.canvasQrPath;
|
||||
console.log('获取二维码地址:', that.canvasQrPath)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.text {
|
||||
background-color: #f3f3f3;
|
||||
margin: 24rpx;
|
||||
padding: 24rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.text text {
|
||||
font-weight: 700;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
```
|
||||
## <font color=#FF0000 >canvas踩坑</font>
|
||||
1. uni-app中的canvas的width、height的值依赖于父元素的宽高。canvas的父级如果被隐藏。canvas的width、height则都为0。
|
||||
2. 当父元素出现，canvas的高度也就有了。但是canvas并不会绘制显示。解决方法：可以将绘制方法写在异步方法中，同时要注意组件的生命周期，确保实例挂载成功之后再执行。
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="qrcode">
|
||||
<canvas :style="{width:size+ 'px', height:size+ 'px', background:bgc}" canvas-id="couponQrcode"></canvas>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const qrCode = require('./weapp-qrcode.js')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgc: 'rgba(200, 200, 200, 0.1)', //测试画布是否与内容相同大小
|
||||
canvasQrPath: '', //
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: 'hello'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 340
|
||||
},
|
||||
colorDark: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
colorLight: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
},
|
||||
// 在实例创建完成后被立即调用
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.couponQrCode()
|
||||
}, 0)
|
||||
},
|
||||
methods: {
|
||||
// 二维码生成工具
|
||||
couponQrCode() {
|
||||
var that = this;
|
||||
new qrCode('couponQrcode', {
|
||||
text: this.text,
|
||||
width: this.size,
|
||||
height: this.size,
|
||||
showLoading: true, // 是否显示loading
|
||||
loadingText: '二维码生成中', // loading文字
|
||||
colorDark: this.colorDark, //二维码暗部颜色
|
||||
colorLight: this.colorLight, //二维码亮部颜色
|
||||
correctLevel: qrCode.CorrectLevel.H, //二维码质量L/M/Q/H
|
||||
usingIn: this //在自定义组件下，第二个参数传入组件实例this
|
||||
})
|
||||
// 把当前画布指定区域的内容导出生成图片，并返回文件路径。
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'couponQrcode',
|
||||
success: function(res) {
|
||||
// 在H5平台下，tempFilePath 为 base64
|
||||
console.log('yz-qr图片路径:',res.tempFilePath)
|
||||
that.canvasQrPath = res.tempFilePath
|
||||
}
|
||||
}, this)
|
||||
this.$emit('update:canvasQrPath', that.canvasQrPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.qrcode {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
function getLocalFilePath(path) {
|
||||
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf(
|
||||
'_downloads') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('file://') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('/storage/emulated/0/') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('/') === 0) {
|
||||
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
|
||||
if (localFilePath !== path) {
|
||||
return localFilePath
|
||||
} else {
|
||||
path = path.substr(1)
|
||||
}
|
||||
}
|
||||
return '_www/' + path
|
||||
}
|
||||
|
||||
function dataUrlToBase64(str) {
|
||||
var array = str.split(',')
|
||||
return array[array.length - 1]
|
||||
}
|
||||
|
||||
var index = 0
|
||||
|
||||
function getNewFileId() {
|
||||
return Date.now() + String(index++)
|
||||
}
|
||||
|
||||
function biggerThan(v1, v2) {
|
||||
var v1Array = v1.split('.')
|
||||
var v2Array = v2.split('.')
|
||||
var update = false
|
||||
for (var index = 0; index < v2Array.length; index++) {
|
||||
var diff = v1Array[index] - v2Array[index]
|
||||
if (diff !== 0) {
|
||||
update = diff > 0
|
||||
break
|
||||
}
|
||||
}
|
||||
return update
|
||||
}
|
||||
// 图片路径转base64
|
||||
export function pathToBase64(path) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
if (typeof window === 'object' && 'document' in window) {
|
||||
if (typeof FileReader === 'function') {
|
||||
var xhr = new XMLHttpRequest()
|
||||
xhr.open('GET', path, true)
|
||||
xhr.responseType = 'blob'
|
||||
xhr.onload = function() {
|
||||
if (this.status === 200) {
|
||||
let fileReader = new FileReader()
|
||||
fileReader.onload = function(e) {
|
||||
resolve(e.target.result)
|
||||
}
|
||||
fileReader.onerror = reject
|
||||
fileReader.readAsDataURL(this.response)
|
||||
}
|
||||
}
|
||||
xhr.onerror = reject
|
||||
xhr.send()
|
||||
return
|
||||
}
|
||||
var canvas = document.createElement('canvas')
|
||||
var c2x = canvas.getContext('2d')
|
||||
var img = new Image
|
||||
img.onload = function() {
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
c2x.drawImage(img, 0, 0)
|
||||
resolve(canvas.toDataURL())
|
||||
canvas.height = canvas.width = 0
|
||||
}
|
||||
img.onerror = reject
|
||||
img.src = path
|
||||
return
|
||||
}
|
||||
if (typeof plus === 'object') {
|
||||
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
|
||||
entry.file(function(file) {
|
||||
var fileReader = new plus.io.FileReader()
|
||||
fileReader.onload = function(data) {
|
||||
resolve(data.target.result)
|
||||
}
|
||||
fileReader.onerror = function(error) {
|
||||
reject(error)
|
||||
}
|
||||
fileReader.readAsDataURL(file)
|
||||
}, function(error) {
|
||||
reject(error)
|
||||
})
|
||||
}, function(error) {
|
||||
reject(error)
|
||||
})
|
||||
return
|
||||
}
|
||||
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||
wx.getFileSystemManager().readFile({
|
||||
filePath: path,
|
||||
encoding: 'base64',
|
||||
success: function(res) {
|
||||
resolve('data:image/png;base64,' + res.data)
|
||||
},
|
||||
fail: function(error) {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
reject(new Error('not support'))
|
||||
})
|
||||
}
|
||||
// base64转图片路径
|
||||
export function base64ToPath(base64) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
if (typeof window === 'object' && 'document' in window) {
|
||||
base64 = base64.split(',')
|
||||
var type = base64[0].match(/:(.*?);/)[1]
|
||||
var str = atob(base64[1])
|
||||
var n = str.length
|
||||
var array = new Uint8Array(n)
|
||||
while (n--) {
|
||||
array[n] = str.charCodeAt(n)
|
||||
}
|
||||
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], {
|
||||
type: type
|
||||
})))
|
||||
}
|
||||
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
|
||||
if (extName) {
|
||||
extName = extName[1]
|
||||
} else {
|
||||
reject(new Error('base64 error'))
|
||||
}
|
||||
var fileName = getNewFileId() + '.' + extName
|
||||
if (typeof plus === 'object') {
|
||||
var basePath = '_doc'
|
||||
var dirPath = 'uniapp_temp'
|
||||
var filePath = basePath + '/' + dirPath + '/' + fileName
|
||||
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime
|
||||
.innerVersion)) {
|
||||
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
|
||||
entry.getDirectory(dirPath, {
|
||||
create: true,
|
||||
exclusive: false,
|
||||
}, function(entry) {
|
||||
entry.getFile(fileName, {
|
||||
create: true,
|
||||
exclusive: false,
|
||||
}, function(entry) {
|
||||
entry.createWriter(function(writer) {
|
||||
writer.onwrite = function() {
|
||||
resolve(filePath)
|
||||
}
|
||||
writer.onerror = reject
|
||||
writer.seek(0)
|
||||
writer.writeAsBinary(dataUrlToBase64(base64))
|
||||
}, reject)
|
||||
}, reject)
|
||||
}, reject)
|
||||
}, reject)
|
||||
return
|
||||
}
|
||||
var bitmap = new plus.nativeObj.Bitmap(fileName)
|
||||
bitmap.loadBase64Data(base64, function() {
|
||||
bitmap.save(filePath, {}, function() {
|
||||
bitmap.clear()
|
||||
resolve(filePath)
|
||||
}, function(error) {
|
||||
bitmap.clear()
|
||||
reject(error)
|
||||
})
|
||||
}, function(error) {
|
||||
bitmap.clear()
|
||||
reject(error)
|
||||
})
|
||||
return
|
||||
}
|
||||
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
|
||||
wx.getFileSystemManager().writeFile({
|
||||
filePath: filePath,
|
||||
data: dataUrlToBase64(base64),
|
||||
encoding: 'base64',
|
||||
success: function() {
|
||||
resolve(filePath)
|
||||
},
|
||||
fail: function(error) {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
reject(new Error('not support'))
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import requst from './requst.js';
|
||||
import toolAll from './tools.js';
|
||||
|
||||
export function collectionEV(data){//收藏事件
|
||||
return requst.post('/api/archives/record',data).then(res=>{
|
||||
if(res.code==0) {
|
||||
let newMsg = '点赞成功'
|
||||
let num = 2
|
||||
if(data.action=='collect'){
|
||||
num = 3
|
||||
newMsg = '收藏成功'
|
||||
}
|
||||
let maiOjb = {
|
||||
e:num,//内容收藏
|
||||
c:data.archive_id*1,
|
||||
t:new Date().getTime()//当前时间戳
|
||||
}
|
||||
toolAll.tools.maiDian(maiOjb)
|
||||
toolAll.tools.showToast(newMsg,'none',1500)
|
||||
}
|
||||
},error=>{})
|
||||
}
|
||||
export function cancleCollectionEV(data){//取消收藏事件
|
||||
return requst.post('/api/archives/un-record',data).then(res=>{
|
||||
if(res.code==0) {
|
||||
let newMsg = '已取消点赞'
|
||||
if(data.action=='collect'){
|
||||
newMsg = '已取消收藏'
|
||||
}
|
||||
toolAll.tools.showToast(newMsg,'none',1500)
|
||||
}
|
||||
},error=>{})
|
||||
}
|
||||
// 商品收藏、积分收藏
|
||||
export function collectionShopEV(data){//收藏事件
|
||||
console.log(data);
|
||||
return requst.post('/api/spu/record',data).then(res=>{
|
||||
if(res.code==0) {
|
||||
let newMsg = ''
|
||||
let num = 0
|
||||
if(data.action=='collect'){
|
||||
num = 3
|
||||
newMsg = '收藏成功'
|
||||
}
|
||||
let maiOjb = {
|
||||
e:num,//内容收藏
|
||||
c:data.id*1,
|
||||
t:new Date().getTime()//当前时间戳
|
||||
}
|
||||
toolAll.tools.maiDian(maiOjb)
|
||||
toolAll.tools.showToast(newMsg,'none',1500)
|
||||
}
|
||||
},error=>{})
|
||||
}
|
||||
export function cancleCollectionShopEV(data){//取消收藏事件
|
||||
return requst.post('/api/spu/un-record',data).then(res=>{
|
||||
if(res.code==0) {
|
||||
let newMsg = ''
|
||||
if(data.action=='collect'){
|
||||
newMsg = '已取消收藏'
|
||||
}
|
||||
toolAll.tools.showToast(newMsg,'none',1500)
|
||||
}
|
||||
},error=>{})
|
||||
}
|
||||
export function buriedPoint(){//查询埋点类型事件
|
||||
return requst.post('/api/statistics/event').then(res=>{
|
||||
// console.log('查询所有需要埋点的类型：',res);
|
||||
if(res.code==0) uni.setStorageSync('buriedPoint',res.data)
|
||||
},error=>{})
|
||||
}
|
||||
export function reportBuriedPoint(data){//上报埋点事件
|
||||
// console.log('埋点的数据：',data);
|
||||
return requst.post('/api/statistics/report',data).then(res=>{},error=>{})
|
||||
}
|
||||
// export function zhuColor(){//查询主题色
|
||||
// return requst.post('index/mini-program-setting').then(res=>{
|
||||
// if(res.code==0){
|
||||
// uni.setStorageSync('publicColor', res.data.mainColor) //#3875F6 #2E8B57
|
||||
// // uni.setStorageSync('publicColor', '#2E8B57') //#3875F6 #2E8B57
|
||||
// }
|
||||
// },error=>{})
|
||||
// }
|
||||
|
||||
// 查询轮播图位置
|
||||
export function checkCarouselLocation(){
|
||||
return requst.post('/api/common/slide-positions').then(res=>{
|
||||
if(res.code==0){
|
||||
console.log(res);
|
||||
}
|
||||
},error=>{})
|
||||
}
|
||||
|
||||
// 查询轮播图列表
|
||||
export function checkBanner(data){
|
||||
return requst.post('/api/common/slides',data)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
// 判断当前环境
|
||||
const ENV = process.env.NODE_ENV;
|
||||
console.log(ENV,'当前环境'); // development：开发环境 test：测试环境 production：生产环境
|
||||
|
||||
// 清理所有缓存并前往授权页
|
||||
const goLogin = () => {
|
||||
uni.clearStorageSync();
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
// 请求错误处理
|
||||
const checkError = (e, reject) => {
|
||||
// console.error("----接口错误----", e)
|
||||
if (e.data) {
|
||||
if (e.data.code) {
|
||||
switch (Number(e.data.code)) {
|
||||
case 4003:
|
||||
// 参数错误
|
||||
console.log('4003参数错误');
|
||||
break;
|
||||
case 4004:
|
||||
// 记录不存在
|
||||
console.log('4004记录不存在');
|
||||
break;
|
||||
case 5001:
|
||||
// xxx错误
|
||||
console.log('5001xxx错误');
|
||||
break;
|
||||
case 5050:
|
||||
// 服务器错误，请稍后重试
|
||||
console.log('5050服务器错误，请稍后重试');
|
||||
break;
|
||||
case 5051:
|
||||
// 未知错误
|
||||
console.log('5051未知错误');
|
||||
break;
|
||||
case 6001:
|
||||
// token验证失败或已失效
|
||||
console.log('6001token验证失败或已失效');
|
||||
goLogin();
|
||||
break;
|
||||
}
|
||||
}
|
||||
reject(e.data)
|
||||
}
|
||||
}
|
||||
|
||||
// 封装request的(GET、POST)请求
|
||||
const request = (method, url, options) => {
|
||||
let methods = '';
|
||||
let headers = {};
|
||||
switch (method) {
|
||||
case 'get':
|
||||
methods = 'GET'
|
||||
headers = {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||
}
|
||||
break;
|
||||
case 'post':
|
||||
methods = 'POST'
|
||||
headers = {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||
}
|
||||
break;
|
||||
case 'postForm':
|
||||
methods = 'POST'
|
||||
headers = {
|
||||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
|
||||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||
}
|
||||
break;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: `${uni.getStorageSync('hostapi')}${url}`,
|
||||
method: methods,
|
||||
data: options,
|
||||
header: headers,
|
||||
success: res => {
|
||||
console.log(`${url}返的结果===>`,res);
|
||||
if (res.statusCode == 200) {
|
||||
if (res.data.code == 0) {
|
||||
// 接口调用成功
|
||||
resolve(res.data);
|
||||
} else {
|
||||
// 接口返回错误信息
|
||||
checkError(res);
|
||||
}
|
||||
} else {
|
||||
// 接口返回错误信息
|
||||
checkError(res);
|
||||
}
|
||||
},
|
||||
fail: e => {
|
||||
// 接口请求错误
|
||||
checkError(e, reject);
|
||||
},
|
||||
complete: rest => {
|
||||
// 是否成功，都会执行
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 上传文件 封装请求
|
||||
const uploadFile = (url, options) => {
|
||||
let tempData = options || {}
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: `${uni.getStorageSync('hostapi')}${url}`,
|
||||
filePath: tempData.file,
|
||||
name: 'image',
|
||||
fileType:'image',
|
||||
formData: tempData,
|
||||
header: {
|
||||
'Content-Type': 'multipart/form-data;charset=UTF-8',
|
||||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||
},
|
||||
success: res => {
|
||||
if (res.statusCode == 200) {
|
||||
let temp = JSON.parse(res.data)
|
||||
if (temp.code == 0) {
|
||||
resolve(temp)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
get: (url, options) => {
|
||||
return request('get', url, options)
|
||||
},
|
||||
// JOSN格式
|
||||
post: (url, options) => {
|
||||
return request('post', url, options)
|
||||
},
|
||||
// form-data格式
|
||||
postForm: (url, options) => {
|
||||
return request('postForm', url, options)
|
||||
},
|
||||
// 上传
|
||||
upload: (url, options) => {
|
||||
return uploadFile(url, options)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
export default {
|
||||
onShareAppMessage(res) { //发送给朋友
|
||||
return {
|
||||
title: '', // 默认是小程序的名称(可以写slogan等)
|
||||
path: uni.getStorageSync('url') // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
}
|
||||
},
|
||||
onShareTimeline(res) {//分享到朋友圈
|
||||
return {}
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,544 @@
|
|||
import {buriedPoint,reportBuriedPoint} from './publicAPI.js';
|
||||
const tools = {
|
||||
timer:'',
|
||||
timerNot:'',
|
||||
// 埋点倒计时
|
||||
daoTime(){
|
||||
let daoTime = uni.getStorageSync('daoTime')
|
||||
if(daoTime==''){//初次判断倒计时是否为空
|
||||
uni.setStorageSync('daoTime',60)//设置倒计时
|
||||
daoTime = uni.getStorageSync('daoTime')
|
||||
this.timer = setInterval(()=>{
|
||||
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
||||
// console.log('埋点倒计时初次：',daoTime);
|
||||
// console.log('埋点长度初次：',uni.getStorageSync('maiList').length);
|
||||
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
||||
uni.removeStorageSync('daoTime')//清空倒计时
|
||||
clearInterval(this.timer)//关闭倒计时
|
||||
// console.log('上/报，埋点');
|
||||
// reportBuriedPoint(uni.getStorageSync('maiList'))//上报事件
|
||||
uni.removeStorageSync('maiList')//清空上报参数
|
||||
this.daoTime()//重新倒计时
|
||||
}
|
||||
},1000)
|
||||
} else {//继续当前倒计时倒计
|
||||
this.timer = setInterval(()=>{
|
||||
uni.setStorageSync('daoTime',daoTime--)//设置倒计时
|
||||
// console.log('埋点倒计时：',daoTime);
|
||||
// console.log('埋点长度：',uni.getStorageSync('maiList').length);
|
||||
if(uni.getStorageSync('daoTime')<=0 || uni.getStorageSync('maiList').length==5){
|
||||
uni.removeStorageSync('daoTime')//清空倒计时
|
||||
clearInterval(this.timer)//关闭倒计时
|
||||
// console.log('上报，埋点');
|
||||
// reportBuriedPoint(uni.getStorageSync('maiList'))//上报事件
|
||||
uni.removeStorageSync('maiList')//清空上报参数
|
||||
this.daoTime()//重新倒计时
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
},
|
||||
networkStatus(){//检查网络状态
|
||||
uni.getNetworkType({
|
||||
success: function (res) {
|
||||
console.log('当前网络状态：',res.networkType);//none：当前无网络连接
|
||||
if(res.networkType=='none'){
|
||||
uni.setStorageSync('isNet',false)
|
||||
} else {
|
||||
uni.setStorageSync('isNet',true);
|
||||
// 微信小程序原生API性能优化
|
||||
// #ifdef MP-WEIXIN
|
||||
// 连网下，检测小程序是否有更新
|
||||
tools.updaX();
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
closeTimer(){
|
||||
clearInterval(this.timer)//关闭倒计时
|
||||
console.log('倒计时清空了');
|
||||
clearInterval(this.timerNot)//关闭倒计时
|
||||
},
|
||||
buriedPointAll(){//查询埋点类型事件
|
||||
buriedPoint()
|
||||
},
|
||||
maiDian(data){//埋点事件
|
||||
let maiList = uni.getStorageSync('maiList')
|
||||
// console.log(maiList);
|
||||
if(maiList==''){
|
||||
maiList = [data]
|
||||
} else maiList.push(data)
|
||||
uni.setStorageSync('maiList',maiList)
|
||||
},
|
||||
weekDate(){//获取未来七天星期几，几号
|
||||
let date = new Date()
|
||||
let year = date.getFullYear()
|
||||
let month = date.getMonth()+1
|
||||
let day = date.getDate()
|
||||
let nth = date.getDay()//星期几
|
||||
// console.log(year,month,day);
|
||||
let xingq = ['周一','周二','周三','周四','周五','周六','周日']
|
||||
|
||||
},
|
||||
// 手机号验证
|
||||
isPhone:function(phone){
|
||||
// 手机号正则表达式
|
||||
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
||||
// if(!reg_tel.test(phone)){
|
||||
// return true
|
||||
// }
|
||||
// return false
|
||||
return !reg_tel.test(phone);
|
||||
},
|
||||
// 手机号中间四位用"****"带替
|
||||
hideMPhone(phone){
|
||||
return `${phone.substr(0, 3)}****${phone.substr(7)}`
|
||||
},
|
||||
// 昵称从第一个字开始，后面的都用"*"代替
|
||||
hideName(name,num){
|
||||
return `${name.substr(0, 1)}****${name.substr(name.length-1)}`
|
||||
},
|
||||
// 金额转换各三位数使用英文","隔开
|
||||
changeNum(num){
|
||||
if (num) {
|
||||
// 针对整数部分进行格式化处理，这是此方法的核心，也是稍难理解的一个地方，逆向的来思考或者采用简单的事例来实现就容易多了
|
||||
/*
|
||||
也可以这样想象，现在有一串数字字符串在你面前，如果让你给他家千分位的逗号的话，你是怎么来思考和操作的?
|
||||
字符串长度为0/1/2/3时都不用添加
|
||||
字符串长度大于3的时候，从右往左数，有三位字符就加一个逗号，然后继续往前数，直到不到往前数少于三位字符为止
|
||||
*/
|
||||
num = num+''; // 数字转换为字符串，数字是没有.length属性的
|
||||
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
|
||||
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3))
|
||||
}
|
||||
// 将数据（符号、整数部分、小数部分）整体组合返回
|
||||
return num;
|
||||
}
|
||||
},
|
||||
// 整数添加.00，小数就不添加
|
||||
addXiaoShu(num){
|
||||
let str = num.toString();
|
||||
if(str.length > 9){
|
||||
str = str*1;
|
||||
str = str.toFixed(2);
|
||||
str = str+'';
|
||||
}
|
||||
return str.includes('.') ? str*1 : str = num + '.00';
|
||||
},
|
||||
// type:+加、-减、*乘、/除
|
||||
// len:小数后保留几位
|
||||
operationEv(num1,num2,type,len=0){
|
||||
// 将数字转化成字符串
|
||||
num1 = num1.toString();
|
||||
num2 = num2.toString();
|
||||
// 获取小数点的位置
|
||||
var index1 = num1.indexOf(".");
|
||||
var index2 = num2.indexOf(".");
|
||||
// 如果小数点存在，那么就再获取各自的小数位数
|
||||
var ws1 = 0;
|
||||
var ws2 = 0;
|
||||
if(index1 != -1){
|
||||
ws1 = num1.split(".")[1].length;
|
||||
}
|
||||
if(index2 != -1){
|
||||
ws2 = num2.split(".")[1].length;
|
||||
}
|
||||
// 看谁的小数位数大，谁的小数位数小
|
||||
var bigger = (ws1 > ws2) ? ws1 : ws2;
|
||||
var smaller = (ws1 < ws2) ? ws1 : ws2;
|
||||
// 计算得到需要补齐的0的个数
|
||||
var zerosCount = bigger - smaller;
|
||||
// 好了，现在不管三七二十，全部去除小数点
|
||||
num1 = num1.replace(".","");
|
||||
num2 = num2.replace(".","");
|
||||
// 比较num1和num2谁大，比较方法就是看谁是smaller，是smaller的一方就补0
|
||||
if(ws1 == smaller){
|
||||
for (var i = 0; i < zerosCount; i++) {
|
||||
num1 += "0";
|
||||
}
|
||||
} else {
|
||||
for (var i = 0; i < zerosCount; i++) {
|
||||
num2 += "0";
|
||||
}
|
||||
}
|
||||
// 开始计算
|
||||
var sum = "";
|
||||
if(type=="+"){
|
||||
// 加
|
||||
sum = parseInt(num1) + parseInt(num2);
|
||||
}
|
||||
if(type=="-"){
|
||||
// 减
|
||||
sum = parseInt(num1) - parseInt(num2);
|
||||
}
|
||||
if(type=="*"){
|
||||
// 乘
|
||||
sum = parseInt(num1) * parseInt(num2);
|
||||
}
|
||||
if(type=="/"){
|
||||
// 除
|
||||
sum = parseInt(num1) / parseInt(num2);
|
||||
}
|
||||
// 根据较大的小数位数计算倍数
|
||||
var beishu = 1;
|
||||
for (var i = 0; i < bigger; i++) {
|
||||
beishu = beishu*10;
|
||||
}
|
||||
sum = sum/beishu;
|
||||
if(type=="*"){
|
||||
switch (bigger){
|
||||
case 1:
|
||||
sum = sum / 10;
|
||||
break;
|
||||
case 2:
|
||||
sum = sum / 100;
|
||||
break;
|
||||
case 3:
|
||||
sum = sum / 1000;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(type=="/"){
|
||||
switch (bigger){
|
||||
case 1:
|
||||
sum = sum * 10;
|
||||
break;
|
||||
case 2:
|
||||
sum = sum * 100;
|
||||
break;
|
||||
case 3:
|
||||
sum = sum * 1000;
|
||||
break;
|
||||
}
|
||||
}
|
||||
len!=0 ? sum = sum.toFixed(len) : '';
|
||||
return sum;
|
||||
},
|
||||
// 时间戳===>日期
|
||||
timestampToTime(timestamp) {
|
||||
var date = timestamp.toString().length==13 ? new Date(timestamp*1) : new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||||
var Y = date.getFullYear();
|
||||
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
|
||||
var D = date.getDate() < 10 ? '0'+date.getDate() : date.getDate();
|
||||
var h = date.getHours() < 10 ? '0'+date.getHours() : date.getHours();
|
||||
var m = date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes();
|
||||
var s = date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds();
|
||||
return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' +s;
|
||||
},
|
||||
// 日期===>时间戳
|
||||
timeToTimestamp(time){
|
||||
var date = new Date(time);
|
||||
var timestamp = date.getTime();//精确到毫秒
|
||||
return timestamp
|
||||
// var date = new Date('2014-04-23 18:55:49:123');
|
||||
// 有三种方式获取
|
||||
// var time1 = date.getTime();//精确到毫秒
|
||||
// var time2 = date.valueOf();//精确到毫秒
|
||||
// var time3 = Date.parse(date);//只能精确到秒，毫秒用000替代
|
||||
// console.log(time1);//1398250549123
|
||||
// console.log(time2);//1398250549123
|
||||
// console.log(time3);//1398250549000
|
||||
},
|
||||
// 随机数生成
|
||||
randomStr(){
|
||||
var strData = "";
|
||||
//如果觉得12个数太少也可以多放点，将i<4修改即可
|
||||
for(var i=0;i<4;i++){
|
||||
var num = random(0,9); //数字
|
||||
var upper = String.fromCharCode(random(65,90)); //大写字母
|
||||
var lower = String.fromCharCode(random(97,122)); //小写字母
|
||||
strData = strData+num+upper+lower; //将所有结果放进strData中
|
||||
|
||||
}
|
||||
var str = "";
|
||||
for (var i = 0; i < 4; i++) {
|
||||
str += strData[random(0,strData.length-1)]; //在strData里面随机抽取四个数
|
||||
}
|
||||
return str;
|
||||
},
|
||||
// 金额输入框验证
|
||||
checkPrice(number,zong){
|
||||
let reg = /^[0-9]*$/;//数字正则表达式
|
||||
let newObj = {}
|
||||
zong = parseInt(zong).toString()//取小数点左边的整数
|
||||
if(!reg.test(number)){//不是数字时
|
||||
newObj = {
|
||||
len:zong.length,//动态设置长度
|
||||
val:zong//动态设置值正整数的总金额
|
||||
}
|
||||
} else {//是数字时
|
||||
newObj = {
|
||||
len:zong.length,
|
||||
val:number//动态设置当前输入的值
|
||||
}
|
||||
if(number*1 > zong*1){//输入的金额大于总金额
|
||||
newObj.val = zong//赋值总金额
|
||||
}
|
||||
}
|
||||
return newObj
|
||||
},
|
||||
// 提示方法
|
||||
showToast: function(msg, icon,time) {
|
||||
// 弹框图标：none默认无图标、loading、success
|
||||
var newIncon = 'none';
|
||||
if (icon) {newIncon = icon;}
|
||||
// 弹框显示时间：默认2秒
|
||||
var newTime = 2000
|
||||
if (time) {newTime = time;}
|
||||
return uni.showToast({
|
||||
title: msg,
|
||||
icon: newIncon,
|
||||
duration:newTime
|
||||
})
|
||||
},
|
||||
formatDuring: function(mss) {
|
||||
// let dangTime = Math.round(new Date()/1000)//获取当前时间戳
|
||||
var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = (mss % (1000 * 60)) / 1000;
|
||||
hours = hours < 10 ? ('0' + hours) : hours;
|
||||
minutes = minutes < 10 ? ('0' + minutes) : minutes;
|
||||
seconds = seconds < 10 && seconds >= 1 ? ('0' + seconds) : seconds;
|
||||
return hours + ' : ' + minutes + ' : ' + seconds;
|
||||
},
|
||||
escape2Html(str) {//富文本
|
||||
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
|
||||
return str.replace(/&(lt|gt|nbsp|amp|quot|src);/ig, function (all, t) {
|
||||
return arrEntities[t];
|
||||
})
|
||||
.replace('<section', '<div')
|
||||
.replace(/\<img/g, '<img @tap="pre" style="max-width:100%!important;height:auto" ')
|
||||
.replace(/src=\"/g,'src="https://oss.hmzfyy.cn');
|
||||
},
|
||||
updaX(){//检测小程序版本以及更新小程序
|
||||
// 获取小程序的运行环境、版本号、appId 注意：线上小程序版本号仅支持在正式版小程序中获取，开发版和体验版中无法获取。
|
||||
const accountInfo = wx.getAccountInfoSync();//使用详情：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html
|
||||
var version = accountInfo.miniProgram.version;
|
||||
console.log(version,319);
|
||||
// 检测小程序的更新
|
||||
const updateManager = wx.getUpdateManager()//以下使用详情：https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81
|
||||
updateManager.onCheckForUpdate(function (res) {
|
||||
// 请求完新版本信息的回调
|
||||
// console.log('检测是否有更新：',res.hasUpdate)
|
||||
})
|
||||
updateManager.onUpdateReady(function (res) {
|
||||
wx.showModal({
|
||||
title: `更新`,
|
||||
content: `新版本${version}已上线，是否重启应用`,
|
||||
success:(res)=> {
|
||||
if (res.confirm) {
|
||||
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
||||
updateManager.applyUpdate()
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
updateManager.onUpdateFailed(function (res) {
|
||||
// 新版本下载失败
|
||||
// console.log('新版本下载失败:',res);
|
||||
})
|
||||
},
|
||||
// 文本复制
|
||||
clickCopy(data){
|
||||
uni.setClipboardData({
|
||||
data: data,
|
||||
success: ()=> {
|
||||
uni.showToast({title: '复制成功',duration: 2000,icon: 'none'});
|
||||
}
|
||||
});
|
||||
},
|
||||
dayTime(endTime,startTime=''){//开启倒计时
|
||||
let totalSecond = '';
|
||||
// 本地倒计时
|
||||
// if(startTime=='') totalSecond = Math.floor((new Date(endTime).getTime() - new Date().getTime())/1000);
|
||||
// 解决苹果手机问题
|
||||
let date = endTime;
|
||||
date = endTime.replace(/-/g,'/')
|
||||
// 服务器倒计时
|
||||
if(startTime!='') totalSecond = Math.floor((new Date(date).getTime() - startTime)/1000);
|
||||
// 总秒数
|
||||
let second = totalSecond;
|
||||
// 天数
|
||||
let day = Math.floor(second / 3600 / 24);
|
||||
let dayStr = day.toString();
|
||||
if(dayStr.length == 1) dayStr = '0' + dayStr;
|
||||
// 小时
|
||||
let hr = Math.floor((second - day * 3600 * 24) / 3600);
|
||||
let hrStr = hr.toString();
|
||||
if(hrStr.length == 1) hrStr = '0' + hrStr;
|
||||
// 分钟
|
||||
let min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
|
||||
let minStr = min.toString();
|
||||
if(minStr.length == 1) minStr = '0' + minStr;
|
||||
// 秒
|
||||
let sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
|
||||
let secStr = sec.toString();
|
||||
if(secStr.length == 1) secStr = '0' + secStr;
|
||||
|
||||
let newTime = '';
|
||||
if(dayStr==0) {
|
||||
newTime = hrStr +'时'+ minStr +'分'+ secStr +'秒';
|
||||
} else {
|
||||
newTime = dayStr +'天'+ hrStr +'时'+ minStr +'分'+ secStr +'秒';
|
||||
}
|
||||
return newTime;
|
||||
},
|
||||
// 刷新token
|
||||
timedRefreshToken(){
|
||||
console.log('进入检测token是否过期');
|
||||
var date = new Date();
|
||||
var timestamp = date.getTime();//精确到毫秒
|
||||
// 如果过期时间 减 10分钟 小于当前时间，刷新token
|
||||
if((uni.getStorageSync('expire')*1000 - 600000) < timestamp) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (res)=> {
|
||||
if (res.code) {
|
||||
var params = {code:res.code}
|
||||
uni.request({
|
||||
url: `${uni.getStorageSync('hostapi')}/api/user/login`,
|
||||
method: 'post',
|
||||
data: params,
|
||||
header: {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
|
||||
},
|
||||
success: res => {
|
||||
if(res.data.data.token!=''){
|
||||
uni.setStorageSync('token',res.data.data.token)//缓存token
|
||||
uni.setStorageSync('openid',res.data.data.openid)//缓存Openid
|
||||
uni.setStorageSync('expire',res.data.data.expire)//缓存失效时间（时间戳格式）
|
||||
uni.setStorageSync('is_active',res.data.data.is_active)//是否第一次授权
|
||||
uni.setStorageSync('phone_active',res.data.data.phone_active)//是否绑定手机号
|
||||
uni.setStorageSync('userId',res.data.data.account_id)//用户id
|
||||
uni.setStorageSync('invite_code',res.data.data.invite_code)//邀请码
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
// 判断是否授权，没授权，前往登录页面授权
|
||||
judgeAuth(){
|
||||
let auth = true;
|
||||
switch (uni.getStorageSync('phone_active')*1){
|
||||
case 0: // 未注册
|
||||
uni.navigateTo({url:'/pages/login/login'});
|
||||
auth = false
|
||||
break;
|
||||
case 1: // 已注册
|
||||
auth = true
|
||||
break;
|
||||
}
|
||||
return auth;
|
||||
},
|
||||
// 判断当前环境、清空日志、设置全局域名
|
||||
currentContext(){
|
||||
// #ifdef APP-PLUS
|
||||
if(uni.getSystemInfoSync().platform != "devtools"){//devtools：开发版 值域为：ios、android、mac（3.1.10+）、windows（3.1.10+）、linux（3.1.10+）
|
||||
console.log = () =>{}
|
||||
}
|
||||
// #endif
|
||||
// 微信小程序原生API性能优化
|
||||
// #ifdef MP-WEIXIN
|
||||
let hInfo = wx.getAccountInfoSync();
|
||||
// console.log(hInfo.envVersion);//develop:开发版 trial：体验版 release：正式版
|
||||
// if(hInfo.miniProgram.envVersion == "develop"){
|
||||
if(hInfo.miniProgram.envVersion == "develop" || hInfo.miniProgram.envVersion == "trial"){
|
||||
// (开发版,体验版)-配置全局域名
|
||||
// uni.setStorageSync('hostapi','https://hengmei.scdxtc.cn/api/');
|
||||
} else {
|
||||
// 清除所有输出日志
|
||||
console.log = () =>{};
|
||||
// 正式版-配置全局域名
|
||||
// uni.setStorageSync('hostapi','https://hm.hmzfyy.cn/api/');
|
||||
// 开启埋点倒计时
|
||||
this.daoTime();//开启埋点倒计时
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
// 禁止小程序使用分享
|
||||
disableShareEv(){
|
||||
wx.hideShareMenu({
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
})
|
||||
},
|
||||
// 获取当前页面url，不带参数
|
||||
obtainUrl(){
|
||||
let pages = getCurrentPages();
|
||||
let route = pages[pages.length - 1].route;
|
||||
uni.setStorageSync('url',`/${route}?invite_code=${uni.getStorageSync('invite_code')}`);
|
||||
// console.log(`/${route}`,'tools.js：当前页面路径不带参数')
|
||||
},
|
||||
// 获取当前页面url，带参数
|
||||
obtainUrlParam(){
|
||||
let pages = getCurrentPages();
|
||||
let routeParam = pages[pages.length - 1].$page.fullPath;
|
||||
uni.setStorageSync('urlParam',`/${routeParam}?invite_code=${uni.getStorageSync('invite_code')}`);
|
||||
// console.log(`/${routeParam}`,'tools.js：当前页面路径带参数')
|
||||
},
|
||||
// 去这里
|
||||
goFlag:true,
|
||||
goThere(){
|
||||
if(this.flag){
|
||||
this.flag = false;
|
||||
wx.getLocation({//获取当前经纬度
|
||||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||||
success: (res)=> {
|
||||
wx.openLocation({//使用微信内置地图查看位置。
|
||||
latitude: 30.656693,//要去的纬度-地址
|
||||
longitude: 104.136425,//要去的经度-地址
|
||||
name: '大向天诚有限责任公司',
|
||||
address: '四川省成都市成华区双店路B口',
|
||||
fail:err=>{
|
||||
this.showToast('地址信息错误');
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.flag = true;
|
||||
},2000)
|
||||
} else {
|
||||
this.showToast('请勿多次点击');
|
||||
}
|
||||
},
|
||||
// 拨打电话
|
||||
countCustomer(phone){
|
||||
const res = uni.getSystemInfoSync();
|
||||
if(res.platform=='ios'){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber:phone,
|
||||
success: () => {},
|
||||
fail: () => {}
|
||||
})
|
||||
} else {
|
||||
uni.showActionSheet({
|
||||
itemList:[phone,'立即呼叫'],
|
||||
itemColor:'#3875F6',
|
||||
success: (res) => {
|
||||
if(res.tapIndex==1){
|
||||
uni.makePhoneCall({
|
||||
phoneNumber:phone
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
tools
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
|
||||
import statusNav from './components/status-nav.vue';//引入状态栏组件
|
||||
Vue.component('status-nav',statusNav);//全局注册状态栏组件
|
||||
|
||||
import nothingPage from './components/nothing-page.vue';//引入无内容组件
|
||||
Vue.component('nothing-page',nothingPage);//全局注册无内容组件
|
||||
|
||||
import containerSubgroup from './components/containers/container-subgroup.vue';//引入容器组件
|
||||
Vue.component('container-subgroup',containerSubgroup);//全局注册容器组件
|
||||
|
||||
import share from './jsFile/share.js';// 全局注册分享事件
|
||||
Vue.mixin(share);
|
||||
|
||||
// 常用工具
|
||||
import tools from '@/jsFile/tools.js';
|
||||
Vue.prototype.$toolAll = tools;
|
||||
// 响应数据
|
||||
import requst from '@/jsFile/requst.js';
|
||||
Vue.prototype.$requst = requst;
|
||||
|
||||
App.mpType = 'app';
|
||||
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
{
|
||||
"name" : "佩利商城",
|
||||
"appid" : "__UNI__B0099F7",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"compilerVersion" : 3,
|
||||
/* 5+App特有相关 */
|
||||
"modules" : {
|
||||
"Payment" : {},
|
||||
"Share" : {}
|
||||
},
|
||||
/* 模块配置 */
|
||||
"distribute" : {
|
||||
/* 应用发布信息 */
|
||||
"android" : {
|
||||
/* android打包配置 */
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
"ios" : {},
|
||||
/* ios打包配置 */
|
||||
"sdkConfigs" : {
|
||||
"maps" : {},
|
||||
"payment" : {
|
||||
"weixin" : {
|
||||
"__platform__" : [ "ios", "android" ],
|
||||
"appid" : "wx2654bc27c419ada6",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
},
|
||||
"push" : {},
|
||||
"geolocation" : {},
|
||||
"share" : {
|
||||
"weixin" : {
|
||||
"appid" : "wx2654bc27c419ada6",
|
||||
"UniversalLinks" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : false,
|
||||
"waiting" : false
|
||||
}
|
||||
},
|
||||
/* SDK配置 */
|
||||
"quickapp" : {},
|
||||
/* 快应用特有相关 */
|
||||
"mp-weixin" : {
|
||||
/* 小程序特有相关 */
|
||||
"appid" : "wx2654bc27c419ada6",
|
||||
"setting" : {
|
||||
"urlCheck" : true,
|
||||
"es6" : true
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "您的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
}
|
||||
},
|
||||
"h5" : {
|
||||
"sdkConfigs" : {
|
||||
"maps" : {}
|
||||
}
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"appid" : "24346353"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"id": "zhuge-swiper",
|
||||
"name": "轮播视频和图片",
|
||||
"version": "1.0.1",
|
||||
"description": "自动轮播视频和图片组件。播放视频时停止轮播，手动滑动swiper时视频停止播放",
|
||||
"keywords": [
|
||||
"vue",
|
||||
"swiper",
|
||||
"zhuge"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
{
|
||||
"pages": [
|
||||
{
|
||||
"path" : "pages/tabbar/pagehome/pagehome",
|
||||
"style" :{}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/tabbar/my/my",
|
||||
"style" :{}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/login/login",
|
||||
"style" :{}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/tabbar/cate/cate",
|
||||
"style" : {}
|
||||
}
|
||||
,{
|
||||
"path": "pages/login/agreement",
|
||||
"style" :{}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/tabbar/cart/cart",
|
||||
"style" :{}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
{//A包
|
||||
"root": "pagesA",
|
||||
"pages": [
|
||||
{
|
||||
"path" : "nodifyData/nodifyData",//修改资料
|
||||
"style" : {}
|
||||
}
|
||||
,{
|
||||
"path" : "getReadyDan/getReadyDan",
|
||||
"style" : {}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "myOrder/myOrder",
|
||||
"style" : {}
|
||||
}
|
||||
,{
|
||||
"path" : "myAddress/myAddress",
|
||||
"style" : {}
|
||||
}
|
||||
,{
|
||||
"path" : "distributionCenter/distributionCenter",
|
||||
"style" : {}
|
||||
}
|
||||
]
|
||||
},
|
||||
{//B包
|
||||
"root": "pagesB",
|
||||
"pages": [
|
||||
{
|
||||
"path" : "searchPage/searchPage",//搜索页
|
||||
"style" :{}
|
||||
}
|
||||
,{
|
||||
"path" : "aboutUs/aboutUs",//关于我们
|
||||
"style" : {}
|
||||
}
|
||||
,{
|
||||
"path":"video/playVideo",
|
||||
"style":{}
|
||||
}
|
||||
,{
|
||||
"path" : "shopDetail/shopDetail",
|
||||
"style" : {}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "orderDetail/orderDetail",
|
||||
"style" : {}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "disclaimers/disclaimers",
|
||||
"style" : {}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"preloadRule": {
|
||||
"pages/tabbar/pagehome/pagehome": {
|
||||
"network": "all",
|
||||
"packages": ["pagesA"]
|
||||
}
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "佩利商城",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",//导航栏背景色
|
||||
"backgroundColor": "#FFFFFF",//窗口背景色
|
||||
"navigationStyle":"custom"//去掉所有原生导航栏
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="true"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'用户服务协议'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
content:'<p>1.用户协议谢谢授权的小姐姐，小哥哥。</p>'
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.$requst.get('/api/index/agreement').then(res=>{
|
||||
console.log(res,'用户协议');
|
||||
this.content = this.$toolAll.tools.escape2Html(res.data.content);
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="true"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'登录'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<view class='login-header'>
|
||||
<image class="infoImg" :style="{boxShadow: '0px 0px 20px '+ publicColor}" mode="aspectFit" :src="userInfo.avatarUrl || imgSrc"></image>
|
||||
<view class="logo-name">{{appletName}}</view>
|
||||
</view>
|
||||
<view class="login-box">
|
||||
<button class='login-btn' :style="{background:publicColor}" type='primary' @click="bindGetUserInfo">微信授权</button>
|
||||
<view class="xie-box">登录代表您已同意<text @tap="goAgreement" class="xieCon">《用户服务协议》</text></view>
|
||||
</view>
|
||||
<!-- 弹框 -->
|
||||
<view v-if="isShowP" class="disjcac posAll">
|
||||
<view class="bacf radius20 width100 tank-box">
|
||||
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
||||
<view class="fon28 colf pad-sx30 pad-zy30 tc disjb">
|
||||
<view class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
||||
<view :style="{background:publicColor}" class="pad-sx10 radius10 tank-btn posir">
|
||||
立即绑定
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
appletName: getApp().globalData.appletName,
|
||||
userInfo: {},//用户信息
|
||||
publicColor:uni.getStorageSync('publicColor'),
|
||||
canIGetUserProfile: false,
|
||||
imgSrc: '',//默认logo头像
|
||||
isShowP:false,
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
// let ya = this;
|
||||
// // 微信扫码后会自动编码,所以需要解码
|
||||
// if (options && options.q) {
|
||||
// let arr = decodeURIComponent(options.q).split('?')[1].split('&')
|
||||
// let obj = {}
|
||||
// arr.forEach(item => {
|
||||
// let brr = item.split('=')
|
||||
// obj[brr[0]] = brr[1]
|
||||
// })
|
||||
// // console.log(obj) //得到参数组成的对象
|
||||
// ya.invite_code = obj.invite_code
|
||||
// }
|
||||
if (uni.getUserProfile) {
|
||||
this.canIGetUserProfile = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refuse(){//暂不绑定事件
|
||||
this.isShowP=false;
|
||||
this.$toolAll.tools.showToast('登录成功','success')
|
||||
uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
||||
},
|
||||
getphonenumber(e){//授权绑定手机号
|
||||
let ya = this;
|
||||
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
||||
this.$requst.post('/api/user/bind-phone',{iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('手机号绑定成功','success');
|
||||
uni.setStorageSync('phone_active',1)//是否第一次授权
|
||||
let newUrl = uni.getStorageSync('transientUrl');
|
||||
// 如果是其他地方过来的有路径，授权成功后返回到过来的页面
|
||||
if(newUrl){
|
||||
uni.reLaunch({
|
||||
url:newUrl
|
||||
})
|
||||
} else {
|
||||
// 返回首页
|
||||
uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
||||
}
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
},error=>{})
|
||||
} else {
|
||||
// this.$toolAll.tools.showToast('登录成功','success')
|
||||
// uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
||||
}
|
||||
},
|
||||
goAgreement(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/agreement'
|
||||
})
|
||||
},
|
||||
//调起登录授权
|
||||
bindGetUserInfo(e) {
|
||||
//新版登录方式
|
||||
uni.getUserProfile({
|
||||
desc: '登录',
|
||||
lang: 'zh_CN',
|
||||
success: (res) => {
|
||||
this.userInfo = res.userInfo;
|
||||
this.login();
|
||||
},
|
||||
fail: (res) => {}
|
||||
});
|
||||
},
|
||||
login() {
|
||||
// 获取登录用户code
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (res)=> {
|
||||
if (res.code) {
|
||||
this.updateUserInfo(res.code);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '登录失败！',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
//调用登录接口
|
||||
updateUserInfo(code) {
|
||||
uni.showToast({
|
||||
title: '登录中...',
|
||||
icon:'loading',
|
||||
duration:10000
|
||||
})
|
||||
var params = {
|
||||
code:code,
|
||||
nickname: this.userInfo.nickName,//用户昵称
|
||||
headimgurl: this.userInfo.avatarUrl,//用户头像
|
||||
country: this.userInfo.country,//用户所在国家
|
||||
province: this.userInfo.province,//用户所在省份
|
||||
city: this.userInfo.city,//用户所在城市
|
||||
gender: this.userInfo.gender,//用户性别
|
||||
language:this.userInfo.language,//语言
|
||||
is_active:1,
|
||||
invite_code: uni.getStorageSync('existCode'),
|
||||
}
|
||||
this.$requst.post('/api/user/login',params).then(res => {
|
||||
if(res.data.token!=''){
|
||||
uni.setStorageSync('params',params)
|
||||
uni.setStorageSync('userId',res.data.account_id)
|
||||
uni.setStorageSync('token',res.data.token)//缓存token
|
||||
uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
|
||||
uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
|
||||
uni.setStorageSync('phone_active',res.data.phone_active)//是否第一次授权
|
||||
uni.setStorageSync('invite_code',res.data.invite_code)
|
||||
if(res.data.phone_active){
|
||||
let newUrl = uni.getStorageSync('transientUrl');
|
||||
// 如果是其他地方过来的有路径，授权成功后返回到过来的页面
|
||||
if(newUrl){
|
||||
uni.reLaunch({
|
||||
url:newUrl
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:'/pages/tabbar/pagehome/pagehome'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.isShowP = true;
|
||||
}
|
||||
}
|
||||
},error => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@tcolor:#333333;
|
||||
@tcolorp:#3875F6;
|
||||
.login-header {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 40%;}
|
||||
.infoImg {width: 192rpx;height: 192rpx;border-radius: 100%;}
|
||||
.logo-name {font-size: 30rpx;font-weight: bold;margin-top: 20rpx;color: @tcolor;}
|
||||
.login-box {margin-top: 60rpx;text-align: center;}
|
||||
.login-btn {width: 80%;margin-top: 50%;}
|
||||
.xie-box{display: flex;justify-content: center;align-items: center;color: @tcolor;margin-top: 30rpx;}
|
||||
.xieCon{color: @tcolorp;}
|
||||
|
||||
.tank-box{margin: 0 60rpx;}
|
||||
.tank-box-itemone{margin: 30rpx 0;}
|
||||
.tank-btn{padding: 10rpx 30rpx;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="true"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'购物车'"
|
||||
:fromWhere="1"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<cart></cart>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cart from '@/components/cart-subgroup/cart.vue';
|
||||
export default {
|
||||
components:{
|
||||
cart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
} else {
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('existCode',options.invite_code)
|
||||
uni.setStorageSync('transientUrl',`/pages/tabbar/cate/cate`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,383 @@
|
|||
<template>
|
||||
<view class="pad-x180">
|
||||
<!-- 状态栏 -->
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="false"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'分类'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<view class="pad30 sort-box mar-x20" style="margin-left: -30rpx;margin-right: -30rpx;" :style="{top: statusBarHeight+'px'}">
|
||||
<view class="col0 fon38 disjbac">
|
||||
<view>分类筛选</view>
|
||||
<i @tap="clikScreenIcon" class="icon icon-screen" style="font-size: 50rpx;"></i>
|
||||
</view>
|
||||
<view v-if="chooseCateList.length" class="disac fw fon24">
|
||||
<view class="disac pad-sx10 pad-zy20 radius20 bac0 colf mar-y20 mar-s20"
|
||||
v-for="(item,index) in chooseCateList" :key="index"
|
||||
@tap="delCate(index)">
|
||||
{{item}}<i class="icon icon-del-white mar-z20" style="font-size: 20rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view class="disjbac fw">
|
||||
<view @tap="goDetail(item.id)" class="width47 mar-s50 posir" v-for="(item,index) in dataList" :key="index">
|
||||
<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无更多 -->
|
||||
<pitera v-if="total==dataList.length"></pitera>
|
||||
<!-- 筛选框 -->
|
||||
<view v-show="isScreen" @tap="isScreen=false" class="screen-box" :style="{top:statusBarHeight+'px'}">
|
||||
<view @tap.stop="isScreen=true" class="posir">
|
||||
<view class="fon24">筛选</view>
|
||||
<!-- 类型 -->
|
||||
<view v-for="(item,index) in screenList" :key="index">
|
||||
<view class="fon30 bold mar-sx20">{{item.mainTitle}}</view>
|
||||
<view class="disac fw fon24">
|
||||
<view class="disac pad-sx10 pad-zy20 radius20 mar-y20 mar-x20"
|
||||
:class="childitem.isCheck ? 'bac0 colf' : 'colpeili'"
|
||||
v-for="(childitem,childindex) in item.childrenList" :key="childindex"
|
||||
@tap.stop="chooseCate(index,childindex,item.mainTitle)">
|
||||
{{childitem.title}}<i v-if="childitem.isCheck" class="icon icon-check mar-z20" style="font-size: 30rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 价格 -->
|
||||
<view class="sort-price">
|
||||
<view class="fon30 bold mar-sx20">价格</view>
|
||||
<view class="disac fon24">
|
||||
<input class="radius20 pad-zy20" v-model="minPrice" type="number" placeholder="0" />
|
||||
<view class="mar-zy20">~</view>
|
||||
<input class="radius20 pad-zy20" v-model="maxPrice" type="number" placeholder="9999" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="disjbac fon30 screen-btn">
|
||||
<view @tap.stop="isScreen=false" class="radius30 colpeili">取消</view>
|
||||
<view @tap.stop="defineEv" class="radius30 colf">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 全局客服 -->
|
||||
<public-customer :nbottom="520"></public-customer>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='1'></foot-tab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
// 客服按钮组件
|
||||
import publicCustomer from '@/components/public-customer.vue';
|
||||
// 底部组件
|
||||
import footTab from '@/components/foot-tab.vue';
|
||||
export default {
|
||||
components:{
|
||||
footTab,
|
||||
publicCustomer,
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
publicColor:uni.getStorageSync('publicColor'),
|
||||
chooseCateList:[],//选中的分类列表
|
||||
temporaryCate:[],//暂存分类数据
|
||||
isScreen:false,//是否隐藏筛选弹框
|
||||
// 筛选弹框内容
|
||||
screenList:[
|
||||
{
|
||||
mainTitle:'类型',
|
||||
childrenList:[
|
||||
{
|
||||
title:'全部',
|
||||
isCheck:true,
|
||||
},
|
||||
{
|
||||
title:'翡翠',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'白玉',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'彩宝',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'琥珀',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'其他',
|
||||
isCheck:false,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
mainTitle:'活动',
|
||||
childrenList:[
|
||||
{
|
||||
title:'全部',
|
||||
isCheck:true,
|
||||
},
|
||||
{
|
||||
title:'折扣',
|
||||
isCheck:false,
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
minPrice:'',//最低价格
|
||||
maxPrice:'',//最高价格
|
||||
dataList:[//数据列表
|
||||
|
||||
],
|
||||
showTop:false,//是否显示返回顶部
|
||||
page:1,
|
||||
size:10,
|
||||
total:'',//总数
|
||||
titleList:uni.getStorageSync('footTitle'), // 底部导航文字
|
||||
imgList:uni.getStorageSync('footimg'), // 底部导航图标
|
||||
activityStr:'',
|
||||
categoryId:''
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||||
},
|
||||
onReachBottom() {//触底事件
|
||||
if(this.total!=this.dataList.length){
|
||||
this.page++
|
||||
this.implementEv();
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
var shareObj = {
|
||||
path: `/pages/tabbar/cate/cate?invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onLoad(options) {
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
// 调用获取筛选条件列表事件
|
||||
this.obtainScreen();
|
||||
// 调用商品列表查询事件
|
||||
this.implementEv();
|
||||
} else {
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pages/tabbar/cate/cate`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取筛选条件列表
|
||||
obtainScreen(){
|
||||
this.$requst.post('/api/spu/condition').then(res=>{
|
||||
if(res.code==0){
|
||||
this.screenList = [];
|
||||
if(res.data.length){
|
||||
res.data.forEach((item,index)=>{
|
||||
let obj = {};
|
||||
let newlist = [];
|
||||
item.children.forEach((item1,index1)=>{
|
||||
let childObj = {
|
||||
id:item1.value,
|
||||
title:item1.name,
|
||||
isCheck:index1==0 ? true : false
|
||||
}
|
||||
newlist.push(childObj)
|
||||
})
|
||||
obj = {
|
||||
mainTitle:item.title,
|
||||
childrenList:newlist
|
||||
}
|
||||
this.screenList.push(obj)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
|
||||
// 点击筛选按钮图标
|
||||
clikScreenIcon(){
|
||||
this.isScreen = true;
|
||||
},
|
||||
// 分类选择事件
|
||||
chooseCate(mainIndex,childrenIndex,title){
|
||||
// 清除分类所有选中项
|
||||
this.screenList[mainIndex].childrenList.forEach((item,index)=>{
|
||||
item.isCheck = false;
|
||||
})
|
||||
let screenIndex = this.screenList.findIndex(item=>item.mainTitle==title);
|
||||
if(screenIndex==0){
|
||||
// 设置分类id
|
||||
if(childrenIndex==0){
|
||||
this.categoryId = '';
|
||||
} else {
|
||||
this.categoryId = this.screenList[screenIndex].childrenList[childrenIndex].id;
|
||||
}
|
||||
}
|
||||
if(screenIndex==1){
|
||||
// 设置限时优惠
|
||||
if(childrenIndex==0){
|
||||
this.activityStr = '';
|
||||
} else {
|
||||
this.activityStr = this.screenList[screenIndex].childrenList[childrenIndex].id;
|
||||
}
|
||||
}
|
||||
// 将当前选择的类别下的数组置空
|
||||
this.temporaryCate[mainIndex] = [];
|
||||
// 设置当前选中项为true
|
||||
this.screenList[mainIndex].childrenList[childrenIndex].isCheck = true;
|
||||
// 向二维数组存储选中项
|
||||
this.screenList[mainIndex].childrenList.forEach((item,index)=>{
|
||||
if(item.isCheck){
|
||||
if(index!=0){
|
||||
this.temporaryCate[mainIndex].push(item.title);
|
||||
} else {
|
||||
this.temporaryCate.splice(mainIndex,1);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除选中的分类列表
|
||||
delCate(index){
|
||||
this.chooseCateList.splice(index,1);
|
||||
if(index==0){//清空分类id
|
||||
this.categoryId = '';
|
||||
}
|
||||
if(index==1){//清空活动限时字段
|
||||
this.activityStr = '';
|
||||
}
|
||||
// 清除选中
|
||||
this.screenList.forEach((item1,index1)=>{
|
||||
item1.childrenList.forEach((item2,index2)=>{
|
||||
if(index2!=0){
|
||||
this.screenList[index1].childrenList[index2].isCheck = false;
|
||||
}
|
||||
})
|
||||
})
|
||||
if(this.chooseCateList.length){
|
||||
this.chooseCateList.forEach((existItem,existIndex)=>{
|
||||
// 设置存在的选中状态
|
||||
this.screenList.forEach((item,mainIndex)=>{
|
||||
let nameIndex = item.childrenList.findIndex((childItem)=>{
|
||||
return childItem.title == existItem;
|
||||
})
|
||||
if(nameIndex!=-1){
|
||||
this.screenList[mainIndex].childrenList[nameIndex].isCheck = true;
|
||||
} else {
|
||||
this.screenList[mainIndex].childrenList[0].isCheck = true;
|
||||
}
|
||||
})
|
||||
// 变更暂存的分类数组
|
||||
this.temporaryCate.forEach((temporaryItem,temporaryIndex)=>{
|
||||
let newIndex = temporaryItem.findIndex(titem=>{
|
||||
return titem == existItem;
|
||||
})
|
||||
if(newIndex==-1){
|
||||
this.temporaryCate[temporaryIndex].splice(0,1);
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {// 传递的分类数组长度为0
|
||||
this.screenList.forEach((item1,index1)=>{
|
||||
item1.childrenList.forEach((item2,index2)=>{
|
||||
if(index2==0){
|
||||
this.screenList[index1].childrenList[index2].isCheck = true;
|
||||
}
|
||||
})
|
||||
})
|
||||
this.temporaryCate = [];
|
||||
// 设置分类id
|
||||
this.categoryId = '';
|
||||
// 设置限时优惠
|
||||
this.activityStr = '';
|
||||
// 调用搜索执行事件
|
||||
this.implementEv();
|
||||
}
|
||||
},
|
||||
// 分类筛选确认事件
|
||||
defineEv(){
|
||||
this.log(this.temporaryCate)
|
||||
// 二维数组this.temporaryCate 降一维数组this.chooseCateList
|
||||
let newChoose = this.temporaryCate.join().split(',');
|
||||
// 置空选中的分类列表
|
||||
this.chooseCateList = [];
|
||||
newChoose.forEach(item=>{
|
||||
if(item!=''){
|
||||
this.chooseCateList.push(item);
|
||||
}
|
||||
})
|
||||
this.isScreen = false;
|
||||
this.page = 1;
|
||||
// 调用搜索执行事件
|
||||
this.implementEv();
|
||||
},
|
||||
// 搜索执行事件
|
||||
implementEv(){
|
||||
this.$toolAll.tools.showToast('搜索中...')
|
||||
let params = {
|
||||
keyword:'', //商品关键字 支持模糊搜索
|
||||
page:this.page, // 页数
|
||||
size: this.size, // 每页数量
|
||||
activity:this.activityStr,// 活动类型 默认normal=普通商品；limit_time=限时促销
|
||||
category_id:this.categoryId,// 分类ID 多个分类用英文逗号分割
|
||||
price_from:this.minPrice,// 价格区间 最低价格 0不限
|
||||
price_to:this.maxPrice,// 价格区间 最大价格 0不限
|
||||
}
|
||||
this.$requst.post('/api/spu/list',params).then(res=>{
|
||||
if(res.code==0){
|
||||
if(this.page==1) this.dataList = [];
|
||||
// 设置商品总数
|
||||
this.total = res.data.total;
|
||||
if(res.data.list.length){
|
||||
res.data.list.forEach(item=>{
|
||||
let obj = {
|
||||
id:item.id,
|
||||
imgSrc:item.cover,
|
||||
title:item.name,
|
||||
// price:this.$toolAll.tools.changeNum(item.price*1),
|
||||
price:item.price,
|
||||
isActivity:item.tag == '' ? false : true,
|
||||
}
|
||||
this.dataList.push(obj);
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
goDetail(id){//前往详情页
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<view class="pad-x180">
|
||||
<!-- 状态栏 -->
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="false"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'个人中心'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<view class="disjcac fc">
|
||||
<image class="mar-sx20" :src="userInfo.headimgurl" mode="aspectFill" style="width: 224rpx;height: 224rpx;border-radius: 60rpx;"></image>
|
||||
<view class="fon36 bold">{{userInfo.nickname}}</view>
|
||||
</view>
|
||||
<!-- 我的订单状态 -->
|
||||
<view style="margin-top: 100rpx;">
|
||||
<view class="mar-x50 disjbac">
|
||||
<view class="fon36 col0">我的订单</view>
|
||||
<navigator url="/pagesA/myOrder/myOrder?index=0" hover-class="none">
|
||||
<view class="disac colpeili">
|
||||
<view class="fon24 mar-y10">全部订单</view>
|
||||
<i class="icon icon-next bold400" style="font-size: 28rpx;"></i>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="disjbac fon28 col3 mar-x50">
|
||||
<view @tap="chooseOrderStatus(indexo)" v-for="(itemo,indexo) in orderStatus" :key="indexo">
|
||||
<view class="disac fc posir">
|
||||
<image :src="itemo.src" :style="{width:[50,46,48,49,49][indexo]+'rpx',height:[44,40,42,44,45][indexo]+'rpx'}" class="icon-img" mode="widthFix"></image>
|
||||
<view class="mar-sx10 fon24 col0">{{itemo.title}}</view>
|
||||
<view class="posia red-num" style="right: 0;top: -20rpx;" v-if="itemo.num!=0">{{itemo.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 功能列表 -->
|
||||
<function-list :list="funcList"></function-list>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='2'></foot-tab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import functionList from '@/components/function-list/function-list.vue';
|
||||
// 底部组件
|
||||
import footTab from '@/components/foot-tab.vue';
|
||||
export default {
|
||||
components:{functionList,footTab},
|
||||
data() {
|
||||
return {
|
||||
orderStatus:[//我的订单状态
|
||||
{src:'/static/public/icon-payment.png',title:'待付款',num:0},
|
||||
{src:'/static/public/icon-send-goods.png',title:'待发货',num:0},
|
||||
{src:'/static/public/icon-take.png',title:'待收货',num:0},
|
||||
{src:'/static/public/icon-finish.png',title:'已完成',num:0},
|
||||
{src:'/static/public/icon-refund.png',title:'已取消',num:0},
|
||||
],
|
||||
funcList:[//个人中心列表数组
|
||||
{
|
||||
leftImg:'/static/public/icon-address.png',
|
||||
title:'收货地址',
|
||||
num:0,
|
||||
content:'',
|
||||
rightImg:'',
|
||||
url:'/pagesA/myAddress/myAddress'
|
||||
},
|
||||
{
|
||||
leftImg:'/static/public/icon-distribution.png',
|
||||
title:'分销中心',
|
||||
num:0,
|
||||
content:'百万奖金等你来拿',
|
||||
rightImg:'',
|
||||
url:'/pagesA/distributionCenter/distributionCenter'
|
||||
},
|
||||
{
|
||||
leftImg:'/static/public/icon-duty.png',
|
||||
title:'免责声明',
|
||||
num:0,
|
||||
content:'',
|
||||
rightImg:'',
|
||||
url:'/pagesB/disclaimers/disclaimers'
|
||||
},
|
||||
{
|
||||
leftImg:'/static/public/icon-aboutus.png',
|
||||
title:'关于我们',
|
||||
num:0,
|
||||
content:'',
|
||||
rightImg:'',
|
||||
url:'/pagesB/aboutUs/aboutUs'
|
||||
}
|
||||
],
|
||||
userInfo:{},//用户信息
|
||||
titleList:uni.getStorageSync('footTitle'), // 底部导航文字
|
||||
imgList:uni.getStorageSync('footimg'), // 底部导航图标
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 查询用户信息
|
||||
this.checkInfo();
|
||||
},
|
||||
onShareAppMessage() {
|
||||
var shareObj = {
|
||||
path: `/pages/tabbar/my/my?invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onLoad(options) {
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
} else {
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pages/tabbar/my/my`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseOrderStatus(index){
|
||||
let statusIndex = ''
|
||||
if(index==0) statusIndex = 1;
|
||||
if(index==1) statusIndex = 2;
|
||||
if(index==2) statusIndex = 3;
|
||||
if(index==3) statusIndex = 4;
|
||||
if(index==4) statusIndex = 5;
|
||||
uni.navigateTo({
|
||||
url:'/pagesA/myOrder/myOrder?index='+statusIndex
|
||||
})
|
||||
},
|
||||
checkInfo(){
|
||||
this.$requst.post('/api/user/info').then(res=>{
|
||||
// console.log('用户信息：',res);
|
||||
if(res.code==0 && res.data.length!=0) {
|
||||
this.userInfo = res.data;
|
||||
this.orderStatus[0].num = this.userInfo.order_count.waiting;//待付款
|
||||
this.orderStatus[1].num = this.userInfo.order_count.paid;//待发货
|
||||
this.orderStatus[2].num = this.userInfo.order_count.shipped;//待收货
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
this.$toolAll.tools.goLogin();
|
||||
}
|
||||
},error=>{this.$toolAll.tools.showToast(error.msg);})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,329 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="false"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'首页'"></status-nav>
|
||||
<view :style="{paddingTop: statusBarHeight +'px'}">
|
||||
<view class="pad-sx20 pad-zy40">
|
||||
<!-- 搜索输入框 start -->
|
||||
<view class="radius30 disac pad-zy40 pad-sx30 mar-x40" style="background-color: #f2f1f7;">
|
||||
<image src="/static/public/icon-search.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
|
||||
<input @confirm="searchEv" class="pad-z20 width100 fon36" type="text" v-model="searchText" placeholder="搜索" />
|
||||
</view>
|
||||
<!-- 搜索输入框 end -->
|
||||
|
||||
<!-- 轮播图 start -->
|
||||
<swiper-pu v-if="bannerList.length" :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'230'" :newRadius="'15'" :newBottom="'10'"></swiper-pu>
|
||||
<!-- 轮播图 end -->
|
||||
</view>
|
||||
<!-- <view class="tab-nav" style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}"> -->
|
||||
<swiper-tab :list="classifyList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000"></swiper-tab>
|
||||
<!-- </view> -->
|
||||
<view class="pad40 pad-x180">
|
||||
<listOne :list="dataList[1]" :activityList="dataList[0]"></listOne>
|
||||
<pitera v-if="noMore"></pitera>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var app = getApp();
|
||||
// tab组件
|
||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||
// 轮播图组件
|
||||
import swiperPu from '@/components/swiper-pu.vue';
|
||||
// 暂无更多组件
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
// 列表组件
|
||||
import listOne from '@/components/list/list-one.vue';
|
||||
// 公共接口
|
||||
import {checkBanner} from '@/jsFile/publicAPI.js';
|
||||
// 底部导航组件
|
||||
import footTab from '@/components/foot-tab.vue';
|
||||
export default {
|
||||
components:{
|
||||
swiperPu,
|
||||
pitera,
|
||||
swiperTab,
|
||||
listOne,
|
||||
footTab
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
searchText:'',// 搜索内容
|
||||
classifyList: [
|
||||
// {//默认结构
|
||||
// id:1,
|
||||
// title: '翡翠'
|
||||
// }
|
||||
],
|
||||
current:0, // 当前显示tab及swiper列表
|
||||
publicColor:'', // 主题颜色
|
||||
showTop:false, // 是否显示回到顶部
|
||||
dataList:[], // 数据列表
|
||||
page:1, // 第几页
|
||||
size:10, // 数量
|
||||
total:0, // 总数
|
||||
titleList:uni.getStorageSync('footTitle'), // 底部导航文字
|
||||
imgList:uni.getStorageSync('footimg'), // 底部导航图标
|
||||
ifNet:true,
|
||||
noNetwork:'当前无网络连接',
|
||||
refTime:null, // 刷新定时器
|
||||
refNum:0, // 刷新次数
|
||||
bannerList:[], // 轮播图
|
||||
isAutoPlay:false,// 是否开启自动轮播
|
||||
classifyId:'',//分类id
|
||||
noMore:false,
|
||||
isScroll:false
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false;
|
||||
},
|
||||
onHide() {
|
||||
// 关闭自动轮播
|
||||
this.isAutoPlay = false;
|
||||
},
|
||||
onUnload() {
|
||||
// 关闭自动轮播
|
||||
this.isAutoPlay = false;
|
||||
},
|
||||
onReady() {
|
||||
// uni.createSelectorQuery().in(this).select('#swiper-box').boundingClientRect().exec(rect => {
|
||||
// this.swiperHeight = rect[0].width
|
||||
// });
|
||||
},
|
||||
onShow() {
|
||||
// 网络检测
|
||||
this.checkNet();
|
||||
this.isAutoPlay = true; // 开启自动轮播
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
var shareObj = {
|
||||
title: '', // 默认是小程序的名称(可以写slogan等)
|
||||
path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.total != (this.dataList[0].length + this.dataList[1].length)){
|
||||
this.page++
|
||||
this.checkList();
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 获取当前页面url
|
||||
this.$toolAll.tools.obtainUrl();
|
||||
// if(options.q!=undefined){
|
||||
// // 解码一：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")；
|
||||
// // 解码二：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
|
||||
// let str = unescape(options.q);
|
||||
// // console.log(str);
|
||||
// let len1 = str.indexOf('invite_code=');
|
||||
// let len2 = str.indexOf('channel=');
|
||||
// let len3 = str.indexOf('source_code=');
|
||||
// let newInvite = '';
|
||||
// let newChanel = '';
|
||||
// let newsource_code = '';
|
||||
// if(len1!=-1) newInvite = str.slice((len1+12),(len1+12+32));
|
||||
// if(len2!=-1) newChanel = str.slice((len2+8),(len2+8+8));
|
||||
// if(len3!=-1) newsource_code = str.slice((len3+12),(len3+12+32));
|
||||
// }
|
||||
// const query = wx.createSelectorQuery()
|
||||
// query.select('.statusHNH').boundingClientRect((rect) => {
|
||||
// // log('状态栏+标题栏：',rect.height);
|
||||
// uni.setStorageSync('statusHNH',rect.height)
|
||||
// this.statusHNH = rect.height
|
||||
// }).exec()
|
||||
this.checkSwi();//查询轮播图
|
||||
this.classifyEv();// 调用分类查询事件
|
||||
if(options.invite_code!=undefined){
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pages/tabbar/my/my`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goDetail(id){//前往详情页
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:`/pages/login/login`
|
||||
})
|
||||
}
|
||||
},
|
||||
// 分类查询
|
||||
classifyEv(){
|
||||
this.$requst.post('/api/spu/category').then(res=>{
|
||||
if(res.code==0){
|
||||
this.classifyList = res.data;
|
||||
if(this.classifyList.length){
|
||||
// 分类第一次加载，设置分类id
|
||||
this.classifyId = this.classifyList[0].id;
|
||||
this.$nextTick(()=>{
|
||||
//查询商品列表
|
||||
this.checkList();
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
// 查询商品列表
|
||||
checkList(){
|
||||
let params = {
|
||||
page:this.page,
|
||||
size:this.size,
|
||||
category_id: this.classifyId,//分类id
|
||||
}
|
||||
if(this.page!=1){
|
||||
uni.showLoading({
|
||||
title:'加载中...'
|
||||
})
|
||||
}
|
||||
this.$requst.post('/api/spu/home',params).then(res=>{
|
||||
if(res.code==0){
|
||||
if(this.page==1) {
|
||||
this.dataList = [[],[]];
|
||||
}
|
||||
// 设置列表总数
|
||||
this.total = res.data.total;
|
||||
if(res.data.list.length){
|
||||
res.data.list.forEach(item=>{
|
||||
if(item.home_display=='big'){
|
||||
this.dataList[0].push(item);
|
||||
} else {
|
||||
let twoObj = {
|
||||
amount: item.amount,
|
||||
cover: item.cover,
|
||||
home_display: item.home_display,
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
original_price: this.$toolAll.tools.changeNum(item.original_price),
|
||||
price: this.$toolAll.tools.changeNum(item.price),
|
||||
stock: item.stock,
|
||||
subtitle: item.subtitle,
|
||||
tag: item.tag
|
||||
}
|
||||
this.dataList[1].push(item);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.total == (this.dataList[0].length + this.dataList[1].length)){
|
||||
this.noMore = true;
|
||||
}
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
// 顶部轮播查询事件
|
||||
checkSwi(){
|
||||
checkBanner({position:'home-banner'}).then(res=>{
|
||||
if(res.code==0){
|
||||
if(res.data.length!=0){
|
||||
res.data.forEach(item=>{
|
||||
let isVideo = false
|
||||
if(item.type!='img') isVideo = true
|
||||
let banObj = {
|
||||
imgSrc:this.$http + item.src,
|
||||
url:item.url,
|
||||
isVideo:isVideo,
|
||||
poster:this.$http + item.src,
|
||||
}
|
||||
this.bannerList.push(banObj)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
searchEv(){//搜索事件
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/searchPage/searchPage?keyWorld=${ this.searchText }`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 网络检测事件
|
||||
checkNet(){
|
||||
uni.getNetworkType({
|
||||
success: (res)=> {
|
||||
if(res.networkType=='none'){
|
||||
uni.setStorageSync('isNet',false)
|
||||
this.ifNet = false
|
||||
if((this.refNum++)==5){
|
||||
clearInterval(this.refTime)
|
||||
this.noNetwork = '刷新失败'
|
||||
this.refNum = 0
|
||||
}
|
||||
this.publicColor = uni.getStorageSync('publicColor')
|
||||
} else {
|
||||
uni.setStorageSync('isNet',true)
|
||||
this.ifNet = true
|
||||
clearInterval(this.refTime)
|
||||
if(this.noNetwork == '正在刷新...') {
|
||||
getCurrentPages()[getCurrentPages().length - 1].onLoad()
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 刷新事件
|
||||
refresh(){
|
||||
this.noNetwork = '正在刷新...'
|
||||
this.refTime = setInterval(()=>{
|
||||
this.checkNet()
|
||||
},1000)
|
||||
},
|
||||
// tab点击事件
|
||||
clickTab(index){
|
||||
// 设置选中下标
|
||||
this.current = index;
|
||||
// 调用执行列表查询事件
|
||||
this.executeCheckList();
|
||||
},
|
||||
// 执行列表查询事件
|
||||
executeCheckList(){
|
||||
this.page = 1;
|
||||
this.classifyId = this.classifyList[this.current].id
|
||||
// 调用列表查询事件
|
||||
this.checkList();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'分销中心'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<!-- 标题 -->
|
||||
<view class="fon30 col0 mar-s30 mar-x10 tcenter">我的佣金</view>
|
||||
<!-- 佣金 -->
|
||||
<view class="fon72 peili-colorRed tcenter bold">￥{{commission}}</view>
|
||||
<!-- 统计 -->
|
||||
<view class="disja mar-s30">
|
||||
<view class="disjcac fc">
|
||||
<view class="fon24 colpeili">累计收益</view>
|
||||
<view class="fon36 col0 bold mar-s20">￥{{distributionInfo.commission_total}}</view>
|
||||
</view>
|
||||
<view class="disjcac fc">
|
||||
<view class="fon24 colpeili">累计提现</view>
|
||||
<view class="fon36 col0 bold mar-s20">￥{{distributionInfo.withdrawal_total}}</view>
|
||||
</view>
|
||||
<view class="disjcac fc">
|
||||
<view class="fon24 colpeili">分享好友</view>
|
||||
<view class="fon36 col0 bold mar-s10">{{distributionInfo.invite_count}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提现按钮 -->
|
||||
<view @tap="tuneEv" class="withdrawal-btn radius30 colf fon36 tcenter peili-backColor mar-s50 mar-x30">立即提现</view>
|
||||
<!-- 佣金记录 -->
|
||||
<view class="fon36 col0 bold pad-sx20 bbot">佣金记录</view>
|
||||
<!-- 列表 -->
|
||||
<view v-if="dataList.length">
|
||||
<view class="bbot pad-sx20" v-for="(item,index) in dataList" :key="index">
|
||||
<view class="disjbac">
|
||||
<view class="fon30 col0 bold">{{item.name}}</view>
|
||||
<!-- <view class="fon24 colpeili">{{item.status}}</view> -->
|
||||
</view>
|
||||
<view class="disjbac mar-s20">
|
||||
<view class="fon24 colpeili">{{item.created_at}}</view>
|
||||
<view class="fon30 peili-colorRed bold">{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 暂无 -->
|
||||
<pitera v-if="total==dataList.length"></pitera>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
<!-- 提现弹框 -->
|
||||
<view v-show="showwithdrawal" :style="{top: statusBarHeight+'px'}" @tap="showwithdrawal=false" class="withdrawal-box">
|
||||
<view @tap.stop="showwithdrawal=true" class="bacf radius20 pad30 posir fon30 col0 mar-zy50 mar-s100">
|
||||
<view class="tcenter">提现申请</view>
|
||||
<view class="mar-s20">
|
||||
<view class="fon24 colpeili">提现金额</view>
|
||||
<input type="text" class="pad-sx10 width100 bbot" v-model="commissionPrice" placeholder="请输入金额" placeholder-style="color:#000000;" />
|
||||
</view>
|
||||
<view class="mar-s20">
|
||||
<view class="fon24 colpeili">微信号码</view>
|
||||
<input type="text" class="pad-sx10 width100 bbot" v-model="wechatStr" placeholder="请输入微信号码" placeholder-style="color:#000000;" />
|
||||
</view>
|
||||
<view @tap="commissionExchange" class="withdrawal-btn radius30 colf fon36 tcenter peili-backColor mar-s70">立即提现</view>
|
||||
<!-- 关闭按钮 -->
|
||||
<image @tap.stop="showwithdrawal=false" src="/static/public/icon-close-01.png" mode="" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
commission:0, // 我的佣金
|
||||
dataList:[
|
||||
{
|
||||
name:'提现',
|
||||
created_at:'2022-2-19 16:56:18',
|
||||
num:300,
|
||||
},
|
||||
{
|
||||
name:'提现',
|
||||
created_at:'2022-2-19 16:56:18',
|
||||
num:300,
|
||||
},
|
||||
{
|
||||
name:'提现',
|
||||
created_at:'2022-2-19 16:56:18',
|
||||
num:300,
|
||||
},
|
||||
{
|
||||
name:'提现',
|
||||
created_at:'2022-2-19 16:56:18',
|
||||
num:300,
|
||||
},
|
||||
{
|
||||
name:'提现',
|
||||
created_at:'2022-2-19 16:56:18',
|
||||
num:300,
|
||||
},
|
||||
{
|
||||
name:'提现',
|
||||
created_at:'2022-2-19 16:56:18',
|
||||
num:300,
|
||||
},
|
||||
{
|
||||
name:'提现',
|
||||
created_at:'2022-2-19 16:56:18',
|
||||
num:600,
|
||||
}
|
||||
],
|
||||
showwithdrawal:false, // 是否显示提现弹框
|
||||
distributionInfo:{}, // 分销数据详情
|
||||
commissionPrice:'' ,// 输入金额
|
||||
wechatStr:'',//微信号
|
||||
page:1,
|
||||
size:10,
|
||||
total:0
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.total!=this.dataList.length){
|
||||
this.page++;
|
||||
// 调取查询分享信息事件
|
||||
this.checkCommissionEv();
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
// 调取佣金信息事件
|
||||
this.checkCommissionEv();
|
||||
} else {
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pagesA/distributionCenter/distributionCenter`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查询佣金信息
|
||||
checkCommissionEv(){
|
||||
this.$requst.post('/api/user/commission',{page:this.page,size:this.size}).then(res=>{
|
||||
if(res.code==0){
|
||||
if(this.page==1) this.dataList = [];
|
||||
// 分销中心数字信息
|
||||
this.distributionInfo = res.data;
|
||||
// 累计首页
|
||||
this.distributionInfo.commission = this.$toolAll.tools.addXiaoShu(this.distributionInfo.commission);
|
||||
// 累计提现
|
||||
this.distributionInfo.withdrawal_total = this.$toolAll.tools.addXiaoShu(this.distributionInfo.withdrawal_total);
|
||||
// 我的佣金
|
||||
this.commission = this.distributionInfo.commission;
|
||||
// 设置总数
|
||||
this.total = this.distributionInfo.log.total;
|
||||
// 设置列表
|
||||
this.dataList = this.dataList.concat(this.distributionInfo.log.list);
|
||||
// this.log(this.total,this.dataList.length)
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
// 调起弹框
|
||||
tuneEv(){
|
||||
if(this.commission*1 == 0 ){
|
||||
this.$toolAll.tools.showToast('剩余佣金不足');
|
||||
} else {
|
||||
this.showwithdrawal = true;
|
||||
}
|
||||
},
|
||||
// 发起提现
|
||||
commissionExchange(){
|
||||
if(!this.commissionPrice || this.commissionPrice==0){
|
||||
this.$toolAll.tools.showToast('请输入提现金额');
|
||||
} else if(!this.wechatStr){
|
||||
this.$toolAll.tools.showToast('请输入微信号');
|
||||
} else {
|
||||
this.$requst.post('/api/user/commission-withdrawal',{commission:this.commissionPrice,wechat:this.wechatStr}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('申请提现已提交');
|
||||
this.page = 1;
|
||||
setTimeout(()=>{
|
||||
// 关闭提现弹框
|
||||
this.showwithdrawal = false;
|
||||
// 更新数据-调取佣金信息事件
|
||||
this.checkCommissionEv();
|
||||
},2000)
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,357 @@
|
|||
<template>
|
||||
<view class="pad-x160">
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'确认订单'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<view class="bacf6 fon30 col3 radius20 mar-s20 disjbac pad-sx27-zy20">
|
||||
<view class="bold">配送方式</view>
|
||||
<view class="disac">
|
||||
<view @tap="expressEv(0)" :class="isExpress?'activeT':'expressT'" :style="{background:isExpress?publicColor:''}">快递</view>
|
||||
<view @tap="expressEv(1)" :class="!isExpress?'activeT':'expressT'" :style="{background:isExpress?'':publicColor}">自提</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 地址信息 -->
|
||||
<view v-if="isExpress" class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20">
|
||||
<view class="bold">收件人信息</view>
|
||||
<navigator url="/pagesA/myAddress/myAddress?isWhere=0" hover-class="none">
|
||||
<view class="disjbac pad-s30">
|
||||
<view v-if="addressInfo!=''">
|
||||
<view class="fon28 bold mar-x10">{{addressInfo.name}}<span class="mar-z20">{{userPphone}}</span></view>
|
||||
<view class="fon24 col9">{{addressInfo.province_str}}{{addressInfo.city_str}}{{addressInfo.county_str || ''}}{{addressInfo.address || ''}}</view>
|
||||
</view>
|
||||
<view v-else class="fon24 col9">请完善收件人信息</view>
|
||||
<i class="icon icon-next col0"></i>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<!-- 自提地址 -->
|
||||
<view v-else class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20">
|
||||
<view class="bold">自提地址</view>
|
||||
<input type="number" maxlength="11" :focus="isFocus" @blur="blurEv" v-model="zPhone" class="mar-s50 mar-x20" style="border: 2rpx solid #E0E0E0;padding: 20rpx;border-radius: 10rpx;font-size: 24rpx;" placeholder="请输入收货人手机号" />
|
||||
<view class="disjbac mar-s50">
|
||||
<view>
|
||||
<view class="fon28 bold mar-x20">佩丽饰品</view>
|
||||
<view class="fon24 col9">{{goAddress}}</view>
|
||||
</view>
|
||||
<!-- 立即导航 -->
|
||||
<view @tap="goThere(goAddress)" class="disjcac fc col0 fon24">
|
||||
<i class="icon icon-navigate-now " style="font-size: 50rpx;"></i>
|
||||
<view>立即导航</view>
|
||||
</view>
|
||||
<!-- <image src="/static/public/daoh.png" class="there" mode="aspectFill"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单信息 -->
|
||||
<view class="bacf6 fon30 radius20 mar-s20 pad-sx27-zy20">
|
||||
<view class="bold">订单信息</view>
|
||||
<view v-for="(item,index) in orderList" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||||
<image @tap="goShopDetail(item.id)" :src="item.imgSrc" class="flexs order-image" mode="aspectFill"></image>
|
||||
<view class="width100 disjb fc" style="height: 166rpx;">
|
||||
<view @tap="goShopDetail(item.id)" class="fon30 col3 bold clips2">{{item.title}}</view>
|
||||
<view class="fon24 colpeili disac fw">
|
||||
<view class="mar-y40" v-for="(item1,index1) in item.specs" :key="index1">{{item1}}</view>
|
||||
</view>
|
||||
<view class="disjbac mar-s10 width100">
|
||||
<view class="order-item-price">￥{{item.price}}</view>
|
||||
<view class="fon30 col6">x{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fon30 disjbac mar-s20 pad-s10">
|
||||
<view class="col6">共{{allNum}}件</view>
|
||||
<view class="bold colf8">应付款：{{allPrice}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠 -->
|
||||
<view class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20 disjbac">
|
||||
<view class="bold">折扣优惠</view>
|
||||
<view class="colf8 bold">￥{{discountPrice}}</view>
|
||||
</view>
|
||||
<!-- 快递费用 -->
|
||||
<view v-if="isExpress" class="bacf6 fon30 radius20 mar-s20 disjbac pad-sx27-zy20">
|
||||
<view class="bold">快递费用</view>
|
||||
<view class="colf8 bold">￥{{expressInfo.default_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
<!-- 底部导航 -->
|
||||
<payment :totalPrice="totalPrice" @immediatePayment="goPayment"></payment>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import payment from '@/components/payment-subgroup/payment.vue';
|
||||
export default {
|
||||
components:{
|
||||
payment
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||
isExpress:true,
|
||||
orderList:uni.getStorageSync('orderList'),
|
||||
goAddress:'四川省成都市青羊区草堂东路88号',
|
||||
discountPrice:0,// 折扣优惠
|
||||
isNei:0,
|
||||
addressInfo:'',//地址信息
|
||||
zPhone:'',//自提时的手机号
|
||||
isFocus:false,
|
||||
times:0,//点击次数
|
||||
expressInfo:{
|
||||
code:'',//快递编号
|
||||
default_price:0 //快递费
|
||||
},
|
||||
userPphone:'', // 快递时的手机号
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
// 所有商品数量
|
||||
allNum(){
|
||||
let num = 0;
|
||||
this.orderList.forEach(item=>{
|
||||
num += item.num;
|
||||
})
|
||||
return num;
|
||||
},
|
||||
// 应付款金额
|
||||
allPrice(){
|
||||
let newPrice = 0;
|
||||
this.orderList.forEach(item=>{
|
||||
newPrice += item.num * item.price;
|
||||
})
|
||||
return this.$toolAll.tools.addXiaoShu(newPrice);
|
||||
},
|
||||
// 合计金额
|
||||
totalPrice(){
|
||||
let price1 = this.$toolAll.tools.operationEv(this.allPrice, this.discountPrice, '-', 2);
|
||||
// 是否计算快递费
|
||||
let expressPrice = 0;
|
||||
this.isExpress ? expressPrice = this.expressInfo.default_price : expressPrice = 0;
|
||||
return this.$toolAll.tools.operationEv(price1, expressPrice, '+', 2);
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.checkChoose();//调用检测地址
|
||||
},
|
||||
onLoad(options) {
|
||||
// 调取查询快递公司信息事件
|
||||
this.checkexpress();
|
||||
},
|
||||
methods: {
|
||||
//检测地址
|
||||
checkChoose(){
|
||||
console.log(uni.getStorageSync('chooseAddress'),165);
|
||||
if(uni.getStorageSync('chooseAddress')==''){
|
||||
this.checkAddress();//查询地址
|
||||
} else {
|
||||
console.log(uni.getStorageSync('chooseAddress'));
|
||||
let naddress = uni.getStorageSync('chooseAddress');
|
||||
this.addressInfo = {
|
||||
id:naddress.id,
|
||||
name:naddress.userName,
|
||||
phone:naddress.userPhone,
|
||||
province_str:naddress.province,
|
||||
city_str:naddress.city,
|
||||
county_str:naddress.county,
|
||||
address:naddress.address
|
||||
}
|
||||
this.userPphone = this.$toolAll.tools.hideMPhone(naddress.userPhone);
|
||||
}
|
||||
},
|
||||
goShopDetail(id){
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
},
|
||||
goPayment(){//去付款
|
||||
this.isFocus = false;
|
||||
let nphone = this.zPhone; // 自提时的手机号
|
||||
if(this.isExpress) nphone = this.addressInfo.phone; // 默认地址的手机号
|
||||
let self = 1; // 自提的方式
|
||||
if(this.isExpress) self = 0; // 快递的配送方式
|
||||
let nsku_list = [];
|
||||
this.orderList.forEach(item=>{
|
||||
let obj = {
|
||||
sku_coding:item.coding,
|
||||
num:item.num,
|
||||
group_id:item.pin_user_id
|
||||
}
|
||||
nsku_list.push(obj);
|
||||
})
|
||||
let parmas = {
|
||||
sku_list: nsku_list,//商品单号和数量数组
|
||||
total: this.totalPrice,//总金额
|
||||
address_id: this.isExpress ? this.addressInfo.id : 0,//地址ID
|
||||
express_code: this.isExpress ? this.expressInfo.code : '',//快递编码
|
||||
pick_self: self,//是否自提0 快递， 1自提
|
||||
pick_self_phone: nphone,//联系电话
|
||||
original_total: this.allPrice,//原价总金额
|
||||
freight: this.isExpress ? this.expressInfo.default_price : 0,//快递费
|
||||
discount:0
|
||||
}
|
||||
if(this.addressInfo=='' && self==0){
|
||||
this.$toolAll.tools.showToast('请完善收件人信息');
|
||||
} else if(nphone=='' && self==1) {
|
||||
this.$toolAll.tools.showToast('请填写收货人手机号');
|
||||
this.focusEv();
|
||||
} else if(this.$toolAll.tools.isPhone(nphone) && self==1) {
|
||||
this.$toolAll.tools.showToast('请正确填写收货人手机号');
|
||||
this.focusEv();
|
||||
} else {
|
||||
if(this.times==0){
|
||||
this.times++;
|
||||
if(this.allPrice==0){
|
||||
this.$toolAll.tools.showToast('正在支付','loading',1500);
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('正在调起支付','loading',1500);
|
||||
}
|
||||
this.$requst.post('/api/order/create',parmas).then(res=>{
|
||||
if(res.code==0){
|
||||
// 调取微信支付
|
||||
this.payment(res.data);
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
this.times = 0;
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
payment(info){
|
||||
if(info.needPay){
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
appId:info.payment_params.appId,//appId
|
||||
timeStamp: info.payment_params.timeStamp,//时间戳
|
||||
nonceStr: info.payment_params.nonceStr,//随机字符串
|
||||
package: info.payment_params.package,//package
|
||||
signType: info.payment_params.signType,//MD5
|
||||
paySign: info.payment_params.sign,//签名
|
||||
success:(res)=> {
|
||||
this.times = 0;
|
||||
// 支付成功通知
|
||||
this.$requst.post('/api/order/paid',{order_coding:info.coding}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('支付成功');
|
||||
setTimeout(()=>{
|
||||
uni.navigateTo({
|
||||
url:'/pagesA/myOrder/myOrder?index=2'
|
||||
})
|
||||
},2000)
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
})
|
||||
},
|
||||
fail:(err)=> {
|
||||
this.$toolAll.tools.showToast('取消支付');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 支付成功通知
|
||||
this.$requst.post('/api/order/paid',{order_coding:info.coding}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('支付成功');
|
||||
setTimeout(()=>{
|
||||
uni.navigateTo({
|
||||
url:'/pagesA/myOrder/myOrder?index=2'
|
||||
})
|
||||
},2000)
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
})
|
||||
}
|
||||
},
|
||||
goThere(val){//去这里
|
||||
wx.getLocation({//获取当前经纬度
|
||||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||||
success: function (res) {
|
||||
wx.openLocation({//使用微信内置地图查看位置。
|
||||
latitude: 30.657707,//要去的纬度-地址
|
||||
longitude: 104.036007,//要去的经度-地址,
|
||||
name: val,
|
||||
address: val
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
checkAddress(){//默认地址查询
|
||||
this.$requst.post('/api/user/address').then(res=>{
|
||||
if(res.code==0){
|
||||
if(res.data.length){
|
||||
res.data.forEach(item=>{
|
||||
if(item.is_default==1) {
|
||||
this.addressInfo = item;
|
||||
} else {
|
||||
if(res.data.length==1){
|
||||
this.addressInfo = item;
|
||||
}
|
||||
}
|
||||
})
|
||||
this.userPphone = this.$toolAll.tools.hideMPhone(this.addressInfo.phone);
|
||||
} else {
|
||||
this.addressInfo = '';
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//查询快递费
|
||||
checkexpress(){
|
||||
if(this.isExpress) {
|
||||
this.$requst.post('/api/common/express-list').then(res=>{
|
||||
if(res.code==0){
|
||||
if(res.data.length!=0){
|
||||
res.data.forEach(item=>{
|
||||
// 如果查询到有默认地址，赋值默认地址，没有默认地址就取地址列表第一位
|
||||
item.is_default==1 ? this.expressInfo = item : this.expressInfo = res.data[0];
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
expressEv(index){//快递自取切换事件
|
||||
if(index==0) {
|
||||
this.isExpress = true;
|
||||
if(this.addressInfo==''){this.$toolAll.tools.showToast('请完善收件人信息','none',1500);}
|
||||
}
|
||||
if(index==1) {
|
||||
this.isExpress = false;
|
||||
}
|
||||
},
|
||||
checkOrderDetail(){//查询订单准备信息
|
||||
let nsku_list = [];
|
||||
this.orderList.forEach(item=>{
|
||||
let obj = {
|
||||
sku_coding:item.coding,
|
||||
num:item.num
|
||||
}
|
||||
nsku_list.push(obj)
|
||||
})
|
||||
let parmas = {
|
||||
sku_list: nsku_list,
|
||||
pick_self: 0
|
||||
}
|
||||
this.$requst.post('/api/order/prepare-info',parmas).then(res=>{
|
||||
if(res.code==0){
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
})
|
||||
},
|
||||
goDetail(){//去订单列表
|
||||
uni.navigateTo({
|
||||
url:'/pagesA/myOrder/myOrder'
|
||||
})
|
||||
},
|
||||
focusEv(){//获取焦点
|
||||
this.isFocus = true;
|
||||
},
|
||||
blurEv(){//失去焦点
|
||||
this.isFocus = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,403 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'地址管理'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<view class="pad-x140">
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<view v-if="loading">
|
||||
<view @tap="goBack(index)" v-for="(item,index) in dataList" :key="index" class="bacf6 radius20 pad30 mar-s30">
|
||||
<view class="pad-y20 disjbac">
|
||||
<view class="fon28 col3 bold">{{item.userName}} {{item.userPhone}}</view>
|
||||
</view>
|
||||
<view class="fon24 col9 mar-s25">{{item.userAddress}}</view>
|
||||
<view class="disjbac fon28 col3 mar-s32">
|
||||
<view @tap.stop="setMo(index)" class="disac">
|
||||
<i class="icon" :class="item.isActive ? 'icon-address-check' : 'icon-address-unchecked'" style="font-size: 36rpx;"></i>
|
||||
<view class="mar-z10" :class="item.isActive?'':'col0'">设为默认地址</view>
|
||||
</view>
|
||||
<view class="disac col0">
|
||||
<view @tap.stop="editAddress(index)">编辑</view>
|
||||
<view @tap.stop="delAddress(index)" class="mar-y10 mar-z50">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @tap.stop="obtainLngLat" class="posixzy address_add" :style="{backgroundColor:publicColor}" style="bottom: 20rpx;">新增地址</view>
|
||||
<nothing-page v-if="dataList.length==0" :content="'暂无可用地址'"></nothing-page>
|
||||
</view>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
<!-- 添加地址、修改地址 -->
|
||||
<view v-if="idEdit" @tap.stop="idEdit=false" class="posAll disjcac" style="padding: 0 46rpx;z-index: 3;">
|
||||
<view class="bacf width100" @tap.stop="idEdit=true" style="padding: 0 55rpx;border-radius: 23rpx;">
|
||||
<view class="pad-sx20 posir">
|
||||
<view class="fon28 bold col3 width100 tc">收件人地址</view>
|
||||
<image class="posia address-close-btn" @tap.stop="idEdit=false" src="/static/public/addressClose.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="pad-sx20 fon28 col3">
|
||||
<view class="fon26 col9 mar-s30">收件人</view>
|
||||
<view class="bbot mar-s30 pad-x10">
|
||||
<input type="text" class="width100" v-model="userName" placeholder="请输入姓名" />
|
||||
</view>
|
||||
<view class="fon26 col9 mar-s30">手机号码</view>
|
||||
<view class="bbot mar-s30 pad-x10">
|
||||
<input type="num" maxlength="11" class="width100" v-model="userPhone" placeholder="请输入联系电话" />
|
||||
</view>
|
||||
<view class="fon26 col9 mar-s30">地址</view>
|
||||
<view class="disjbac">
|
||||
<view class="bbot mar-s30 pad-x10 posir disac" @tap="chooseProvinceCityCounty(0)">
|
||||
<input type="text" class="width100 pad-y20" disabled v-model="userProvince" placeholder="四川" />
|
||||
<view class="posia disjcac fc xiao-sanj" style="right: 0;">
|
||||
<image src="/static/public/address-top.png" mode=""></image>
|
||||
<image src="/static/public/address-down.png" mode=""></image>
|
||||
</view>
|
||||
<view :class="isAddress==1?'dong':''" class="posia info-box">
|
||||
<view @tap.stop="chooseProvince(index)" class="clips1" v-for="(item,index) in provinceArr" :key="index">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bbot mar-s30 pad-x10 posir disac mar-zy30" @tap="chooseProvinceCityCounty(1)">
|
||||
<input type="text" class="width100 pad-y20" disabled v-model="userCity" placeholder="成都" />
|
||||
<view class="posia disjcac fc xiao-sanj" style="right: 0;">
|
||||
<image src="/static/public/address-top.png" mode=""></image>
|
||||
<image src="/static/public/address-down.png" mode=""></image>
|
||||
</view>
|
||||
<view :class="isAddress==2?'dong':''" class="posia info-box">
|
||||
<view @tap.stop="chooseCity(index)" class="clips1" v-for="(item,index) in cityArr" :key="index">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bbot mar-s30 pad-x10 posir disac" @tap="chooseProvinceCityCounty(2)">
|
||||
<input type="text" class="width100 pad-y20" disabled v-model="userCounty" placeholder="成华区" />
|
||||
<view class="posia disjcac fc xiao-sanj" style="right: 0;">
|
||||
<image src="/static/public/address-top.png" mode=""></image>
|
||||
<image src="/static/public/address-down.png" mode=""></image>
|
||||
</view>
|
||||
<view :class="isAddress==3?'dong':''" class="posia info-box">
|
||||
<view @tap.stop="chooseCounty(index)" class="clips1" v-for="(item,index) in countyArr" :key="index">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fon26 col9 mar-s30">详细地址</view>
|
||||
<view class="bbot mar-s30 pad-x10">
|
||||
<input type="text" class="width100" v-model="userAddress" placeholder="请输入详细地址" />
|
||||
</view>
|
||||
<!-- 确认保存按钮 -->
|
||||
<view @tap.stop="addAddress" class="address-btn-add" :style="{backgroundColor:publicColor}">确认保存</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {lotusAddressJson} from '@/components/city/city.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||
dataList:[],
|
||||
idEdit:false,
|
||||
userName:'',//名字
|
||||
userPhone:'',//电话
|
||||
userProvince:'',//省份
|
||||
userCity:'',//城市
|
||||
userCounty:'',//区县
|
||||
userAddress:'',//详细地址
|
||||
isChoose:'',//选中的id
|
||||
delNum:0,//删除条件
|
||||
loading:false,
|
||||
provinceArr:[],//省份列表
|
||||
cityArr:[],//城市列表
|
||||
countyArr:[],//区县列表
|
||||
isAddress:0,//选中的是哪个地址选项
|
||||
isWhere:1,//来自哪个页面
|
||||
isMo:0,//是否是默认地址
|
||||
flag:true//允许点击
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
this.checkList();
|
||||
this.isWhere = options.isWhere;
|
||||
} else {
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pagesA/myAddress/myAddress`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack(index){//返回到订单准备页
|
||||
if(this.isWhere==0) {
|
||||
uni.setStorageSync('chooseAddress',this.dataList[index]);
|
||||
uni.navigateBack({delta:1})
|
||||
}
|
||||
},
|
||||
obtainLngLat(){//添加地址事件
|
||||
this.idEdit = true;
|
||||
this.isMo = 0;
|
||||
this.clearAll();
|
||||
// 获取当前位置的经纬度
|
||||
wx.getLocation({
|
||||
success:(res)=> {
|
||||
// 逆解析经纬度
|
||||
this.getDistrict(res.latitude, res.longitude)
|
||||
},
|
||||
})
|
||||
|
||||
},
|
||||
getDistrict(latitude, longitude) {//获取当前位置的省市区县
|
||||
let ya = this
|
||||
wx.request({
|
||||
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
|
||||
header: {
|
||||
'Content-Type':'application/json'
|
||||
},
|
||||
success:(res)=> {
|
||||
// console.log('地址数据：',res)
|
||||
ya.userProvince = res.data.result.address_component.province
|
||||
ya.userCity = res.data.result.address_component.city
|
||||
ya.userCounty = res.data.result.address_component.district
|
||||
lotusAddressJson.forEach((itema,index)=>{
|
||||
if(ya.userProvince==itema.name) {
|
||||
ya.chooseProvinceCityCounty(0);
|
||||
ya.chooseProvince(index);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
chooseProvinceCityCounty(index){
|
||||
if(index==0){//获取省数据
|
||||
this.isAddress = 1;
|
||||
this.provinceArr = []
|
||||
lotusAddressJson.forEach((item,index)=>{
|
||||
if(item.value.slice(2) =='0000'){
|
||||
this.provinceArr.push(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
if(index==1){//获取市数据
|
||||
if(this.cityArr.length!=0){
|
||||
this.isAddress = 2;
|
||||
}
|
||||
}
|
||||
if(index==2){//获取区数据
|
||||
if(this.countyArr.length==0){
|
||||
this.$toolAll.tools.showToast('暂无可选项');
|
||||
} else {
|
||||
this.isAddress = 3;
|
||||
}
|
||||
}
|
||||
},
|
||||
chooseProvince(index){//选择省
|
||||
this.countyArr = this.cityArr = [];
|
||||
this.userProvince = this.provinceArr[index].name;
|
||||
lotusAddressJson.forEach(itema=>{
|
||||
if(this.provinceArr[index].value==itema.parent) {
|
||||
this.cityArr.push(itema)
|
||||
}
|
||||
})
|
||||
this.isAddress = 0;
|
||||
this.userCity = this.cityArr[0].name;//默认市的第一个
|
||||
this.chooseCity(0);
|
||||
},
|
||||
chooseCity(index){//选择市
|
||||
this.countyArr = [];
|
||||
this.userCity = this.cityArr[index].name;
|
||||
lotusAddressJson.forEach(itema=>{
|
||||
if(this.cityArr[index].value==itema.parent) {
|
||||
this.countyArr.push(itema)
|
||||
}
|
||||
})
|
||||
this.isAddress = 0;
|
||||
if(this.countyArr.length!=0) {
|
||||
this.userCounty = this.countyArr[0].name;//默认选中第一个区
|
||||
} else this.userCounty = '未知';
|
||||
},
|
||||
chooseCounty(index){//选择区
|
||||
this.isAddress = 0;
|
||||
this.userCounty = this.countyArr[index].name;
|
||||
},
|
||||
async checkList(){//查询地址列表
|
||||
this.$requst.post('/api/user/address',{page:1,size:100}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.flag = true;
|
||||
this.dataList = [];
|
||||
if(res.data.length){
|
||||
res.data.forEach(item=>{
|
||||
let newActive = false;
|
||||
if(item.is_default==1) newActive = true
|
||||
let obj = {
|
||||
id:item.id,
|
||||
user_id:item.user_id,
|
||||
userName:item.name,
|
||||
userPhone:item.phone,
|
||||
userAddress:item.province_str + item.city_str + item.county_str + item.address,
|
||||
province:item.province_str,
|
||||
city:item.city_str,
|
||||
county:item.county_str,
|
||||
address:item.address,
|
||||
isActive:newActive,
|
||||
is_default:item.is_default
|
||||
}
|
||||
this.dataList.push(obj);
|
||||
})
|
||||
this.checkActive();
|
||||
} else {
|
||||
uni.removeStorageSync('chooseAddress');
|
||||
}
|
||||
this.loading = true;
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
},
|
||||
checkActive(){//把默认地址放到第一位
|
||||
let have = this.dataList.findIndex((res)=>{
|
||||
return res.isActive == true;
|
||||
});
|
||||
this.dataList.unshift(this.dataList[have]);
|
||||
this.dataList.splice(have+1,1);
|
||||
},
|
||||
async addAddress(){//新增、编辑地址
|
||||
if(this.userName=='') {
|
||||
this.$toolAll.tools.showToast('请输入姓名');
|
||||
} else if(this.userPhone=='') {
|
||||
this.$toolAll.tools.showToast('请输入联系电话');
|
||||
} else if(this.$toolAll.tools.isPhone(this.userPhone)) {
|
||||
this.$toolAll.tools.showToast('请输入正确的联系电话');
|
||||
} else if(this.userAddress=='') {
|
||||
this.$toolAll.tools.showToast('请输入详细地址');
|
||||
} else {
|
||||
let params = {
|
||||
id:this.isChoose,
|
||||
name:this.userName,
|
||||
phone:this.userPhone,
|
||||
city:'',//城市编码
|
||||
county:'',//区县编码
|
||||
province_str:this.userProvince,//省
|
||||
city_str:this.userCity,//市
|
||||
county_str:this.userCounty,//区
|
||||
address:this.userAddress,
|
||||
is_default:this.isMo//是否默认
|
||||
}
|
||||
if(this.flag){
|
||||
this.flag = false;
|
||||
this.$requst.post('/api/user/address-save',params).then(res=>{
|
||||
if(res.code==0){
|
||||
this.idEdit = false;
|
||||
if(this.isChoose!='') {
|
||||
this.$toolAll.tools.showToast('地址修改成功');
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('新增地址成功');
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.checkList();
|
||||
this.clearAll();
|
||||
},1000)
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
setTimeout(()=>{
|
||||
this.flag = false;
|
||||
},3000)
|
||||
}
|
||||
}).catch(res=>{
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
setTimeout(()=>{
|
||||
this.flag = false;
|
||||
},3000)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setMo(index){//设置默认地址
|
||||
let params = {
|
||||
id:this.dataList[index].id,
|
||||
name:this.dataList[index].userName,
|
||||
phone:this.dataList[index].userPhone,
|
||||
city:'',//城市编码
|
||||
county:'',//区县编码
|
||||
province_str:this.dataList[index].province,//省
|
||||
city_str:this.dataList[index].city,//市
|
||||
county_str:this.dataList[index].county,//区
|
||||
address:this.dataList[index].address,
|
||||
is_default:1//是否默认
|
||||
}
|
||||
this.$requst.post('/api/user/address-save',params).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('设置默认地址成功');
|
||||
this.dataList.forEach(item=>{
|
||||
item.isActive = false;
|
||||
});
|
||||
this.dataList[index].isActive = true;
|
||||
this.dataList[index].is_default = 1;
|
||||
this.checkActive();
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
},
|
||||
editAddress(index){//编辑按钮
|
||||
this.idEdit = true;
|
||||
this.isChoose = this.dataList[index].id,
|
||||
this.userName = this.dataList[index].userName;
|
||||
this.userPhone = this.dataList[index].userPhone;
|
||||
this.userProvince = this.dataList[index].province;
|
||||
this.userCity = this.dataList[index].city;
|
||||
this.userCounty = this.dataList[index].county;
|
||||
this.userAddress = this.dataList[index].address;
|
||||
this.isMo = this.dataList[index].is_default
|
||||
},
|
||||
delAddress(index){//删除地址事件
|
||||
this.delNum++
|
||||
setTimeout(()=>{
|
||||
this.delNum = 0;
|
||||
},3000)
|
||||
if(this.delNum==1) {
|
||||
this.$toolAll.tools.showToast('双击即可删除');
|
||||
}
|
||||
if(this.delNum==2 && this.flag) {
|
||||
this.flag = false;
|
||||
this.$requst.post('/api/user/address-del',{id:this.dataList[index].id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('删除成功');
|
||||
if(uni.getStorageSync('chooseAddress').id==this.dataList[index].id) {
|
||||
uni.removeStorageSync('chooseAddress');
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.checkList();
|
||||
},1500)
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
setTimeout(()=>{
|
||||
this.flag = true;
|
||||
},2000)
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
setTimeout(()=>{
|
||||
this.flag = true;
|
||||
},2000)
|
||||
})
|
||||
}
|
||||
},
|
||||
clearAll(){//清空输入框
|
||||
this.isChoose = '',
|
||||
this.userName = '';
|
||||
this.userPhone = '';
|
||||
this.userProvince = '';
|
||||
this.userCity = '';
|
||||
this.userCounty = '';
|
||||
this.userAddress = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
<template>
|
||||
<view class="pad-x20">
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'我的订单'"></status-nav>
|
||||
<view :style="{paddingTop: statusBarHeight +'px'}">
|
||||
<!-- 导航栏 -->
|
||||
<view style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}">
|
||||
<swiper-tab id="tab" :list="navList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000"></swiper-tab>
|
||||
</view>
|
||||
<swiper :style="{ height: swiperHeight - statusBarHeight +'px'}" class="pad-zy30 fon30" :current="current" @change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in navList.length" :key="index">
|
||||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||||
<!-- 列表数据 -->
|
||||
<view class="radius20 mar-s20 bacf6" v-for="(item1,index1) in orderList[index]" :key="index1">
|
||||
<view @tap="goDetail(item1.id)" class="disjbac col0 fon30 pad30" style="border-bottom: 1rpx solid #d3d3d3;">
|
||||
<view>订单号：{{item1.coding}}</view>
|
||||
<view class="" :style="{color: ['','#f83030','#f83030','#61cf00','#8c8c9b','#8c8c9b'][item1.status]}">{{['','待付款','待发货','待收货','已完成','已取消'][item1.status]}}</view>
|
||||
</view>
|
||||
<view v-for="(item2,index2) in item1.skuList" :key="index2" class="fon26 col3 disjbac pad-sx50 mar-zy30 disjbac borbot posir">
|
||||
<image @tap="goDetail(item1.id)" :src="item2.sku_cover" class="flexs mar-y20 radius30" style="width: 224rpx;height: 224rpx;" mode="aspectFill"></image>
|
||||
<view @tap="goDetail(item1.id)" class="width100 disjb fc" style="height: 224rpx;">
|
||||
<view class="fon28 col3 bold clips2 line-h50">{{item2.spu_name}}</view>
|
||||
<view class="disac fw">
|
||||
<view class="order-sy mar-y40" v-for="(item3,index3) in item2.spec_info" :key="index3">{{item3}}</view>
|
||||
</view>
|
||||
<view class="colpeili disjbac"><span class="order-price">￥{{item2.price}}</span><span class="fon24">x{{item2.num}}</span></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="colpeili pad30 disjbac" style="border-top: 1rpx solid #d3d3d3;">
|
||||
<view class="order-price">合计：{{item1.totalPrice}}</view>
|
||||
<view class="disjbac">
|
||||
<!-- 取消订单 -->
|
||||
<view @tap="transferFrame(index1)" v-if="item1.status==1 || item1.status==2" class="order-btn">取消订单</view>
|
||||
<!-- 立即支付 -->
|
||||
<view @tap="payMentEv(item1.coding)" v-if="item1.status==1" class="order-btn" style="background-color: #f83030;color: #FFFFFF;">立即支付</view>
|
||||
<!-- 确认收获 -->
|
||||
<view @tap="confirmReceipt(item1.id)" v-if="item1.status==3" class="order-btn" style="background-color: #000000;color: #FFFFFF;">确认收货</view>
|
||||
<!-- 再次购买 -->
|
||||
<view @tap="againBuy(index1)" v-if="item1.status==4 || item1.status==5" class="order-btn">再次购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 暂无更多数据 -->
|
||||
<pitera v-if="total==orderList[current].length"></pitera>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 取消订单弹框 -->
|
||||
<view v-if="isCancle" @tap.stop="isCancle=false" class="posAll">
|
||||
<view class="bacf posixzy order-cancle-tk" @tap.stop="isCancle=true">
|
||||
<view>
|
||||
<view class="bbot pad-sx20 posir">
|
||||
<view class="fon28 bold col3 width100" style="text-align: center;">取消订单</view>
|
||||
<image class="posia order-close-btn" @tap.stop="isCancle=false" src="/static/public/cha-close.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="pad-zy32 pad-sx20 col5b">
|
||||
<view class="fon24 linh40">
|
||||
<view>温馨提示：</view>
|
||||
<view>订单取消需要提交工作人员审核，商品金额将原路径返还账户，订单一旦取消，系统无法恢复。</view>
|
||||
</view>
|
||||
<view @tap.stop="chooseReason(indexy)" v-for="(itemy,indexy) in reasonList" :key="indexy" class="disac mar-s40">
|
||||
<image v-if="itemy.isActive" src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
|
||||
<image v-else src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
|
||||
<view class="mar-z20 fon28">{{itemy.title}}</view>
|
||||
</view>
|
||||
<!-- 确认取消按钮 -->
|
||||
<view @tap.stop="confirmEv" class="confirm-btn">确认取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||
chuTop:'',//导航高度
|
||||
navList:[{title:'全部'},{title:'待付款'},{title:'待发货'},{title:'待收货'},{title:'已完成'},{title:'已取消'}],
|
||||
// 取消订单原因
|
||||
reasonList:[
|
||||
{title:'不想要了/买多了/买错了',isActive:true},
|
||||
{title:'地址信息填写错误',isActive:false},
|
||||
{title:'其他原因',isActive:false},
|
||||
],
|
||||
isCancle:false,//是否取消订单
|
||||
orderList:[[],[],[],[],[],[]],
|
||||
zanList:[],//暂存列表数据
|
||||
page:1,
|
||||
size:200,
|
||||
total:'',//总数
|
||||
isZanw:true,
|
||||
tag:'',//默认全部 waiting=待付款 paid=已付款待发货 shipped=已发货 completed=已完成 check=待核验
|
||||
current:0,//选中的订单
|
||||
remarks:'',//原因
|
||||
times:0,//点击次数
|
||||
timer:null,
|
||||
zanArr:[],
|
||||
timeList:[],
|
||||
orderInfo:{},
|
||||
checkGrounpId:0,
|
||||
orderCoding:''//选中的订单编号
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
var shareObj = {
|
||||
title: ``, // 默认是小程序的名称(可以写slogan等)
|
||||
path: ``, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onReady() {
|
||||
// 获取ID为tab元素的信息
|
||||
uni.createSelectorQuery().in(this).select('#tab').boundingClientRect().exec(rect => {
|
||||
this.swiperHeight = this.swiperHeight - rect[0].height
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
uni.removeStorageSync('isorderDetail')
|
||||
},
|
||||
onShow() {
|
||||
if(uni.getStorageSync('isorderDetail')==1){
|
||||
// 调用查询事件
|
||||
this.checkList();
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
options.index==undefined ? this.current = 0 : this.current = options.index;
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
if(this.current==0){
|
||||
// 调用查询事件
|
||||
this.checkList();
|
||||
}
|
||||
} else {
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pagesA/myOrder/myOrder?index=0`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 触底事件
|
||||
scrollBottomEv(){
|
||||
if(this.total!=this.orderList[this.current].length){
|
||||
this.page++
|
||||
this.checkList();
|
||||
}
|
||||
},
|
||||
// 状态判断事件
|
||||
statejubEv(){
|
||||
if(this.current == 0) this.tag = "";
|
||||
if(this.current == 1) this.tag = "waiting";
|
||||
if(this.current == 2) this.tag = "paid";
|
||||
if(this.current == 3) this.tag = "shipped";
|
||||
if(this.current == 4) this.tag = "completed";
|
||||
if(this.current == 5) this.tag = "closed";
|
||||
// 调用查询我的订单列表事件
|
||||
this.checkList();
|
||||
},
|
||||
// tab点击事件
|
||||
clickTab(index){
|
||||
this.current = index;
|
||||
this.statejubEv();
|
||||
},
|
||||
// 列表滑动事件
|
||||
swiperChange(e){
|
||||
this.current = e.detail.current;
|
||||
this.statejubEv();
|
||||
},
|
||||
checkList(){//查询我的订单列表事件
|
||||
this.$requst.post('/api/user/order',{page:this.page,size:this.size,tag:this.tag}).then(res=>{
|
||||
if(res.code==0){
|
||||
if(this.page==1) this.orderList[this.current] = [];
|
||||
// 设置总数
|
||||
this.total = res.data.total;
|
||||
if(res.data.list.length!=0){
|
||||
res.data.list.forEach(item=>{
|
||||
let statusNum = 0;
|
||||
if(item.status=="waiting") statusNum = 1;
|
||||
if(item.status=="paid") statusNum = 2;
|
||||
if(item.status=="shipped") statusNum = 3;
|
||||
if(item.status=="completed") statusNum = 4;
|
||||
if(item.status=="closed") statusNum = 5;
|
||||
let obj = {
|
||||
id:item.id,
|
||||
skuList:item.skus,
|
||||
totalPrice:item.price,
|
||||
status:statusNum,
|
||||
coding:item.coding
|
||||
}
|
||||
this.orderList[this.current].push(obj);
|
||||
})
|
||||
}
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
},
|
||||
payMentEv(coding){//付款
|
||||
if(this.times==0){
|
||||
this.times++;
|
||||
this.$requst.post('/api/order/pay',{order_coding:coding}).then(res=>{
|
||||
if(res.code==0){
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
appId:res.data.payment_params.appId,//appId
|
||||
timeStamp: res.data.payment_params.timeStamp,//时间戳
|
||||
nonceStr: res.data.payment_params.nonceStr,//随机字符串
|
||||
package: res.data.payment_params.package,//package
|
||||
signType: res.data.payment_params.signType,//MD5
|
||||
paySign: res.data.payment_params.sign,//签名
|
||||
success:(res)=> {
|
||||
this.$requst.post('/api/order/paid',{order_coding:this.orderList[this.current][index].coding}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('付款成功');
|
||||
// 调用查询列表事件
|
||||
this.implementListEv();
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
},
|
||||
fail:()=> {
|
||||
this.$toolAll.tools.showToast('取消支付');
|
||||
// 调用查询列表事件
|
||||
this.implementListEv();
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
transferFrame(index){//调起取消原因弹框
|
||||
this.isCancle = true;
|
||||
this.orderCoding = this.orderList[this.current][index].coding;
|
||||
this.reasonList.forEach(item=>{
|
||||
item.isActive = false;
|
||||
})
|
||||
this.reasonList[0].isActive = true;
|
||||
},
|
||||
chooseReason(index){//取消订单原因选择事件
|
||||
this.reasonList.forEach(item=>item.isActive = false);
|
||||
this.reasonList[index].isActive = true;
|
||||
this.remarks = this.reasonList[index].title;
|
||||
},
|
||||
confirmEv(){//确认取消订单事件
|
||||
if(this.times==0){
|
||||
this.times++;
|
||||
this.$toolAll.tools.showToast('正在取消...');
|
||||
this.$requst.post('/api/order/cancel',{order_coding:this.orderCoding,remarks:this.remarks}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.isCancle = false;
|
||||
this.$toolAll.tools.showToast('取消成功');
|
||||
// 调用查询列表事件
|
||||
this.implementListEv();
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
}
|
||||
},
|
||||
confirmReceipt(id){//确认收货事件
|
||||
this.$requst.post('/api/order/accepted',{order_id:id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('收货成功');
|
||||
// 调用查询列表事件
|
||||
this.implementListEv();
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
},
|
||||
goDetail(id){//去订单详情
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/orderDetail/orderDetail?id=${id}`
|
||||
})
|
||||
},
|
||||
// 执行查询列表事件
|
||||
implementListEv(){
|
||||
setTimeout(()=>{
|
||||
this.times = 0;
|
||||
this.page = 1;
|
||||
this.checkList();
|
||||
},2000)
|
||||
},
|
||||
// 再次购买事件
|
||||
againBuy(index){
|
||||
let newList = [];
|
||||
this.orderList[this.current][index].skuList.forEach(item=>{
|
||||
let obj = {
|
||||
id:item.spu_id,//商品id
|
||||
imgSrc:item.spu_cover,//商品图片
|
||||
coding:item.coding,//商品coding
|
||||
price:item.price,//商品价格
|
||||
num:item.num,//商品数量
|
||||
title:item.spu_name,//商品名称
|
||||
}
|
||||
newList.push(obj);
|
||||
})
|
||||
uni.setStorageSync('orderList',newList);
|
||||
uni.navigateTo({url:'/pagesA/getReadyDan/getReadyDan'});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.activeD::after{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 8rpx;
|
||||
background: #3875F6;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.order-price{color: #f83030;}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :titleVal="'修改资料'" :whereCome="whereCome" :statusTitle="true"></status-nav>
|
||||
<!-- 自定义二级分类 -->
|
||||
<!-- 列表 -->
|
||||
<view :style="{paddingTop: statusHNH+'px'}" class="fon28 pad-x20">
|
||||
<view v-for="(itemd,indexd) in dataList" :key="indexd"
|
||||
class="disjbac borbot mar-zy40" :class="(indexd!=1 && indexd!=5 && indexd!=6) ? 'pad-sx40':''">
|
||||
<!-- 标题 -->
|
||||
<view class="col9 flexs" style="width: 17.8%;">
|
||||
<view v-if="indexd!=2 && indexd!=3 && indexd!=7">{{itemd.title}}:</view>
|
||||
<!-- 恒美ID -->
|
||||
<view v-if="indexd==2" class="disjb">
|
||||
<view class="disjb width100">
|
||||
<view>{{itemd.title.charAt(0)}}</view>
|
||||
<view>{{itemd.title.charAt(1)}}</view>
|
||||
<view>{{itemd.title.charAt(2)}}{{itemd.title.charAt(3)}}</view>
|
||||
</view>
|
||||
<view>:</view>
|
||||
</view>
|
||||
<!-- 性别、地址 -->
|
||||
<view v-if="indexd==3 || indexd==7" class="disjb">
|
||||
<view class="disjb width100">
|
||||
<view>{{itemd.title.charAt(0)}}</view>
|
||||
<view>{{itemd.title.charAt(1)}}</view>
|
||||
</view>
|
||||
<view>:</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="disac fe width100 tright">
|
||||
<!-- 内容 -->
|
||||
<view v-if="itemd.content!='' && (indexd!=1 && indexd!=5 && indexd!=6)" :class="indexd==1?'nic':'col3'" class="mar-y20 width100" :style="{marginRight:indexd==2?'39rpx':''}">{{itemd.content}}</view>
|
||||
<!-- 性别下拉弹框 -->
|
||||
<picker v-if="indexd==3" class="col3 mar-y20 width100" @change="changePicker" :value="current" :range="pickerData">
|
||||
<view>{{pickerData[current]}}</view>
|
||||
</picker>
|
||||
<!-- 出生日期下拉框 -->
|
||||
<picker v-if="indexd==4" mode="date" class="col3 mar-y20 width100" @change="changeTime" :value="currentt" :range="pickerTime">
|
||||
<view>{{pickerTime[currentt]}}</view>
|
||||
</picker>
|
||||
<!-- 地址下拉框 -->
|
||||
<!-- <picker v-if="indexd==7" mode="multiSelector" class="col3 mar-y20 width100" @change="changeAddress" :value="currenta" :range="pickerAddress">
|
||||
<view>{{pickerAddress[0]}}{{pickerAddress[1]}}{{pickerAddress[2]}}</view>
|
||||
</picker> -->
|
||||
<!-- <view v-if="indexd==7" @tap="openPicker" class="width100 mar-y20">{{region}}</view> -->
|
||||
<view v-if="indexd==7" @tap="openAddres2" class="width100 mar-y20">{{pickerText}}</view>
|
||||
<!-- 用户昵称、真实姓名、联系电话输入框 -->
|
||||
<input @focus="inputFo(indexd)" @blur="inputB(indexd)" v-if="indexd==1 || indexd==5 || indexd==6" :disabled="indexd==6" :type="(indexd==1 || indexd==5)?'text':'number'" :maxlength="indexd==6?11:10" v-model="itemd.content" class="mar-y20 tright pad-sx40 width100" style="border: none;" :placeholder="itemd.fcon"/>
|
||||
<!-- 用户头像 -->
|
||||
<image v-if="indexd==0" :src="itemd.imgSrc || moHead" :class="indexd==0?'head_img':'head_next'" class="" mode="aspectFill"></image>
|
||||
<!-- <image @tap="chooseHead" v-if="itemd.imgSrc!=''" :src="itemd.imgSrc" :class="indexd==0?'head_img':'head_next'" class="" mode="aspectFill"></image> -->
|
||||
<!-- 前进键 -->
|
||||
<image v-if="indexd!=0 && indexd!=2" src="/static/public/nexth.png" class="head_next flexs"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" @tap="updataInfo" style="height: 90rpx;line-height: 90rpx;margin: 80rpx 100rpx 120rpx 100rpx;" class="radius20 fon40 bold colf tc" :style="{background:publicColor}">{{btnCon}}</view>
|
||||
<!-- 底部弹框 -->
|
||||
<!-- <city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city> -->
|
||||
<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
|
||||
<!-- 底部客服 -->
|
||||
<public-customer :nbottom="100"></public-customer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import city from '@/components/city/city.vue';
|
||||
import simpleAddress from '@/components/simple-address/simple-address.vue';
|
||||
export default {
|
||||
components:{
|
||||
// city,
|
||||
simpleAddress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusHNH:uni.getStorageSync('statusHNH'),
|
||||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||
moHead:'/static/public/logo.png',
|
||||
dataList:[
|
||||
{title:'用户头像',content:'',imgSrc:'',fcon:''},
|
||||
{title:'用户昵称',content:'',imgSrc:'',fcon:'请输入用户昵称'},
|
||||
{title:'恒美ID',content:'',imgSrc:'',fcon:''},
|
||||
{title:'性别',content:'',imgSrc:'',fcon:''},
|
||||
{title:'出生日期',content:'',imgSrc:'',fcon:''},
|
||||
{title:'真实姓名',content:'',imgSrc:'',fcon:'请输入真实姓名'},
|
||||
{title:'联系电话',content:'',imgSrc:'',fcon:'请输入联系电话'},
|
||||
{title:'地址',content:'',imgSrc:'',fcon:''},
|
||||
],
|
||||
isKuang:true,
|
||||
current:0,
|
||||
pickerData:['未知','男','女'],
|
||||
currentt:0,
|
||||
pickerTime:['1997-01-01'],
|
||||
currenta:0,
|
||||
// pickerAddress:['四川省 ','成都市 ','青羊区'],
|
||||
// lotusAddressData:{
|
||||
// visible:false,
|
||||
// provinceName:'',
|
||||
// cityName:'',
|
||||
// townName:'',
|
||||
// },
|
||||
// region:'四川省成都市成华区',
|
||||
cityPickerValueDefault: [0, 0, 1],
|
||||
pickerText: '四川省成都市成华区',
|
||||
btnCon:'保存',
|
||||
uinfo:{},
|
||||
addressInfo:[],
|
||||
newProvice:'',//当前省份
|
||||
newCity:'',//当前城市
|
||||
newDistrict:'',//当前区县
|
||||
whereCome:0,
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
uni.removeStorageSync('firstInfo')
|
||||
},
|
||||
onLoad(options) {
|
||||
if(options.whereNum==2){
|
||||
this.whereCome = options.whereNum
|
||||
}
|
||||
let chuo = new Date().getTime()// 获取当前时间戳
|
||||
let time = this.$toolAll.tools.timestampToTime(chuo)// 转换日期格式为XXXX-XX-XX
|
||||
// 获取当前位置的经纬度
|
||||
wx.getLocation({
|
||||
success:(res)=> {
|
||||
// 逆解析经纬度
|
||||
this.getDistrict(res.latitude, res.longitude)
|
||||
},
|
||||
})
|
||||
let firstObj = uni.getStorageSync('firstInfo')
|
||||
if(firstObj==''){
|
||||
let obj = uni.getStorageSync('uinfo')
|
||||
console.log(obj);
|
||||
if(obj!='') this.uinfo = obj
|
||||
this.dataList[0].imgSrc = obj.headimgurl//用户头像
|
||||
this.dataList[1].content = obj.nickname//用户昵称
|
||||
this.dataList[2].content = obj.coding//恒美ID
|
||||
this.current = obj.gender//性别1男，2女,0未知
|
||||
obj.birthday!='' ? this.pickerTime = [obj.birthday.slice(0,10)] : this.pickerTime = [time.slice(0,10)]//出生日期
|
||||
obj.real_name!=null && obj.real_name !='' ? this.dataList[5].content = obj.real_name : this.dataList[5].fcon = '未知'//真实姓名
|
||||
obj.mobile!='' ? this.dataList[6].content = obj.mobile : this.dataList[6].fcon = '未知'//电话
|
||||
if(obj.county!='') this.pickerText = obj.province + obj.city + obj.county//省市区县
|
||||
} else {
|
||||
this.dataList[0].imgSrc = firstObj.headimgurl//用户头像
|
||||
this.dataList[1].content = firstObj.nickname//用户昵称
|
||||
this.dataList[2].content = firstObj.coding//恒美ID
|
||||
this.current = firstObj.gender//性别1男，2女,0未知
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updataInfo(){//修改资料事件
|
||||
let params = {
|
||||
real_name:this.dataList[5].content,//姓名
|
||||
nickname:this.dataList[1].content,//昵称
|
||||
mobile:this.dataList[6].content,//手机号
|
||||
gender:this.current,//性别，0未知，1男，2女
|
||||
province:this.addressInfo[0],//省份
|
||||
city:this.addressInfo[1],//市
|
||||
county:this.addressInfo[2],//区县
|
||||
birthday:this.pickerTime[0]//生日（出生年月），日期格式：2021-08-10
|
||||
}
|
||||
this.$requst.post('user/edit-info',params).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('资料修改成功')
|
||||
setTimeout(()=>{
|
||||
if(this.whereCome==2){
|
||||
uni.navigateTo({
|
||||
url:'/pages/tabbar/my/my'
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack({delta:1})
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
},error=>{})
|
||||
},
|
||||
getDistrict(latitude, longitude) {//获取当前位置的省市区县
|
||||
let ya = this
|
||||
wx.request({
|
||||
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
|
||||
header: {
|
||||
'Content-Type':'application/json'
|
||||
},
|
||||
success:function(res) {
|
||||
// console.log('地址数据：',res)
|
||||
ya.newProvice = res.data.result.address_component.province
|
||||
ya.newCity = res.data.result.address_component.city
|
||||
ya.newDistrict = res.data.result.address_component.district
|
||||
if(ya.pickerText=='') ya.pickerText = ya.newProvice + ya.newCity + ya.newDistrict
|
||||
}
|
||||
})
|
||||
},
|
||||
openAddres2() {//地址弹框事件
|
||||
// 根据 label 获取
|
||||
var index = this.$refs.simpleAddress.queryIndex([this.newProvice, this.newCity, this.newDistrict], 'label');
|
||||
this.cityPickerValueDefault = index.index;
|
||||
this.$refs.simpleAddress.open();
|
||||
},
|
||||
onConfirm(e) {//地址确认事件
|
||||
this.pickerText = e.labelArr[0]+e.labelArr[1]+e.labelArr[2];
|
||||
this.addressInfo = [e.labelArr[0],e.labelArr[1],e.labelArr[2]]
|
||||
},
|
||||
chooseHead(){//选择头像事件
|
||||
uni.chooseImage({
|
||||
count:1,
|
||||
success: (res) => {
|
||||
this.dataList[0].imgSrc = res.tempFilePaths[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
changePicker(e){//性别选择
|
||||
this.current = e.detail.value
|
||||
},
|
||||
changeTime(e){//出生日期选择
|
||||
this.pickerTime = [e.detail.value]
|
||||
},
|
||||
changeAddress(e){
|
||||
|
||||
},
|
||||
inputFo(index){//输入框获取焦点
|
||||
if(this.dataList[index].content!=''){
|
||||
this.dataList[index].fcon = this.dataList[index].content//将当前输入框的实际值赋值给当前输入框的placeholder属性
|
||||
this.dataList[index].content = ''//清空当前输入框的实际值
|
||||
}
|
||||
},
|
||||
inputB(index){//输入框失去焦点
|
||||
if(index==1){
|
||||
if(this.dataList[1].content==''){
|
||||
this.dataList[1].content = this.uinfo.nickname
|
||||
}
|
||||
}
|
||||
if(index==5){
|
||||
if(this.dataList[5].content==''){
|
||||
this.dataList[5].content = this.uinfo.real_name
|
||||
}
|
||||
}
|
||||
if(index==6){
|
||||
if(this.dataList[6].content==''){
|
||||
this.dataList[6].content = this.uinfo.mobile
|
||||
}
|
||||
}
|
||||
}
|
||||
//打开picker
|
||||
// openPicker() {
|
||||
// this.lotusAddressData.visible = true;
|
||||
// this.lotusAddressData.provinceName = this.newProvice;
|
||||
// this.lotusAddressData.cityName = this.newCity;
|
||||
// this.lotusAddressData.townName = this.newDistrict;
|
||||
// },
|
||||
//回传已选的省市区的值
|
||||
// choseValue(res){
|
||||
// //res数据源包括已选省市区与省市区code
|
||||
// // console.log(res);
|
||||
// this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
|
||||
// //res.isChose = 1省市区已选 res.isChose = 0;未选
|
||||
// if(res.isChose){
|
||||
// this.lotusAddressData.provinceName = res.province;//省
|
||||
// this.lotusAddressData.cityName = res.city;//市
|
||||
// this.lotusAddressData.townName = res.town;//区
|
||||
// this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
|
||||
// this.regionObj = {
|
||||
// province:res.province,
|
||||
// provinceCode:res.provinceCode,
|
||||
// city:res.city,
|
||||
// cityCode:res.cityCode,
|
||||
// town:res.town,
|
||||
// townCode:res.townCode
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{background-color: #FFFFFF;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'关于我们'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<!-- 地图 -->
|
||||
<view class="radius30" style="overflow: hidden;border: 2rpx solid #8c8c9b;">
|
||||
<map :latitude="lat" :longitude="lng" :enable-scroll="enableScroll" :enable-zoom="enableZoom" scale="11" style="height: 390rpx;width: 100%;"></map>
|
||||
</view>
|
||||
<!-- 导航按钮 -->
|
||||
<view @tap="goThere" class="navigate-to-where mar-s30 radius30 bac0 colf fon36 tcenter">导航至佩丽</view>
|
||||
<!-- 关于佩丽 -->
|
||||
<view class="fon48 col0 mar-sx50">关于佩丽</view>
|
||||
<rich-text :nodes="richText" class="fon30 colpeili line-h50"></rich-text>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components:{
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||
lat:25.603183,
|
||||
lng:100.211328,
|
||||
enableZoom:true,//是否支持缩放
|
||||
enableScroll:true,//是否支持拖动
|
||||
richText:'',//富文本
|
||||
address:'',//目的地
|
||||
flag:true
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
// 调取关于我们信息事件
|
||||
this.checkAboutUs();
|
||||
} else {
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pagesB/aboutUs/aboutUs`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查询关于我们信息
|
||||
checkAboutUs(){
|
||||
this.$requst.post('/api/index/about').then(res=>{
|
||||
if(res.code==0){
|
||||
this.lat = res.data.lat;
|
||||
this.lng = res.data.lon;
|
||||
this.richText = this.$toolAll.tools.escape2Html(res.data.content);
|
||||
this.address = res.data.address;
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
goThere(){//去这里
|
||||
if(this.flag){
|
||||
this.flag = false;
|
||||
wx.getLocation({//获取当前经纬度
|
||||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||||
success: (res)=> {
|
||||
wx.openLocation({//使用微信内置地图查看位置。
|
||||
latitude: this.lat*1,//要去的纬度-地址
|
||||
longitude: this.lng*1,//要去的经度-地址
|
||||
name: this.address,
|
||||
address: this.address,
|
||||
fail:err=>{
|
||||
this.$toolAll.tools.showToast('地址信息错误');
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.flag = true;
|
||||
},2000)
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('请勿多次点击');
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'免责声明'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<rich-text :nodes="disclaimerRich" class="fon24 colpeili line-h46"></rich-text>
|
||||
<!-- 标题 -->
|
||||
<!-- <view class="fon30 col0 mar-sx30 tcenter">责任条款</view> -->
|
||||
<!-- 内容 -->
|
||||
<!-- <view class="fon24 colpeili line-h40">
|
||||
<view>本网站所提供的信息，只供参考之用。</view>
|
||||
<view class="mar-sx30">本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误对用户或任何其他人士负任何直接或间接的责任。</view>
|
||||
<view class="mar-sx30">在法律允许的范围内，本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接或项目所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿（包括但不限于收益、预期利润的损失或失去的业务、未实现预期的节省）。</view>
|
||||
<view class="mar-sx30">本网站所提供的信息，若在任何司法管辖地区供任何人士使用或分发给任何人士时会违反该司法管辖地区的法律或条例的规定或会导致本网站或其第三方代理人受限于该司法管辖地区内的任何监管规定时，则该等信息不宜在该司法管辖地区供该等任何人士使用或分发给该等任何人士。用户须自行保证不会受限于任何限制或禁止用户使用或分发本网站所提供信息的当地的规定。</view>
|
||||
<view class="mar-sx30">本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。</view>
|
||||
<view class="mar-sx30">凡以任何方式登录本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
disclaimerRich:''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
// 调取免责声明信息事件
|
||||
this.checkDisclaimerEv();
|
||||
} else {
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pagesB/disclaimers/disclaimers`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查询免责声明信息
|
||||
checkDisclaimerEv(){
|
||||
this.$requst.post('/api/index/statement').then(res=>{
|
||||
if(res.code==0){
|
||||
this.disclaimerRich = this.$toolAll.tools.escape2Html(res.data.content);
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<view class="pad-x160">
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'订单详情'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<!-- 订单类型 -->
|
||||
<block v-if="loading">
|
||||
<view class="bacf6 radius20 mar-s20 fon30 line-h50 pad30">
|
||||
<view class="disjbac">
|
||||
<view>订单编号</view>
|
||||
<view class="bold">{{orderInfo.coding}}</view>
|
||||
</view>
|
||||
<view class="disjbac">
|
||||
<view>下单时间</view>
|
||||
<view class="bold">{{orderInfo.created_at}}</view>
|
||||
</view>
|
||||
<view class="disjbac">
|
||||
<view>订单状态</view>
|
||||
<view class="bold">
|
||||
<view v-if="orderInfo.status=='waiting'" class="colf8">待付款</view>
|
||||
<view v-if="orderInfo.status=='paid'" class="colf8">待发货</view>
|
||||
<view v-if="orderInfo.status=='shipped'" style="color: #61cf00;">待收货</view>
|
||||
<view v-if="orderInfo.status=='completed'" class="col0">已完成</view>
|
||||
<view v-if="orderInfo.status=='closed'" class="col9">已取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单信息 -->
|
||||
<view class="bacf6 radius20 mar-s20 orderDetail-box">
|
||||
<view v-for="(item,index) in orderInfo.skus" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||||
<image :src="item.sku_cover" class="flexs" mode="aspectFill" style="width: 224rpx; height: 224rpx;"></image>
|
||||
<view class="width100 disjb fc" style="height: 224rpx;">
|
||||
<view class="fon28 col3 bold clips2">{{item.spu_name}}</view>
|
||||
<view class="orderDetail-sku disac fw" v-if="item.spec_info.length">
|
||||
<view class="mar-y40" v-for="(item2,index2) in item.spec_info" :key="index2">{{item2}}</view>
|
||||
</view>
|
||||
<view class="mar-s10">
|
||||
<view class="colf8 fon32 bold disjbac width100"><span>￥{{item.price}}</span><span class="fon28 col6 mar-z20 font4">x{{item.num}}</span></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fon28 disjbac mar-s40 mar-x20">
|
||||
<view class="col6">共{{allNum}}件</view>
|
||||
<view class="colf8 bold">共计：{{orderInfo.original_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 物流信息 -->
|
||||
<view v-if="orderInfo.address!='自提'" class="bacf6 radius20 mar-s20 fon28 pad30">
|
||||
<view class="bold">物流信息</view>
|
||||
<view class="bold col3 mar-s40 fon26 disjbac">
|
||||
<view>{{orderInfo.express_name}}：{{orderInfo.express_number||'暂无快递单号'}}</view>
|
||||
<view v-if="orderInfo.express_number" @tap="copyCont">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 地址信息 -->
|
||||
<view v-if="orderInfo.address!='自提'" class="bacf6 radius20 mar-s20 pad30">
|
||||
<view class="bold">收件人信息</view>
|
||||
<view class="fon26 col3">
|
||||
<view class="fon28 col3 bold" style="margin: 52rpx 0 20rpx 0;">{{addressInfo.userName}}<span class="mar-z10">{{addressInfo.userPhone}}</span></view>
|
||||
<view class="fon24 col9">{{addressInfo.userAddress}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="bacf6 radius20 mar-s20 pad30">
|
||||
<view class="disjbac">
|
||||
<view>配送方式</view>
|
||||
<view>自提</view>
|
||||
</view>
|
||||
<view class="fon26 col3 disjbac mar-s30">
|
||||
<view>
|
||||
<view class="fon28 col3 bold mar-x20">{{appletName}}</view>
|
||||
<view class="fon24 col9">{{goAddress}}</view>
|
||||
</view>
|
||||
<!-- 立即导航 -->
|
||||
<view @tap="goThere(goAddress)" class="disjcac fc col0 fon24">
|
||||
<i class="icon icon-navigate-now " style="font-size: 50rpx;"></i>
|
||||
<view>立即导航</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 金额详情 -->
|
||||
<view class="bacf6 radius20 mar-s20 fon30 col0 line-h60 pad30">
|
||||
<view class="disjbac">
|
||||
<view>商品总金额</view>
|
||||
<view class="colf8">￥{{orderInfo.original_price}}</view>
|
||||
</view>
|
||||
<view class="disjbac">
|
||||
<view>折扣优惠</view>
|
||||
<view class="colf8">0</view>
|
||||
</view>
|
||||
<view class="disjbac" v-if="orderInfo.address!='自提'">
|
||||
<view>快递费用</view>
|
||||
<view class="colf8">{{orderInfo.freight}}</view>
|
||||
</view>
|
||||
<view class="disjbac">
|
||||
<view class="width100" style="text-align: right;">实付：</view>
|
||||
<view class="colf8 flexs bold">￥{{orderInfo.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<view class="posixzy disja fe bacf pad-sx20 pad-y40">
|
||||
<!-- 取消订单 -->
|
||||
<view @tap="cancleEv" v-if="orderInfo.status=='paid' || orderInfo.status=='waiting'" class="order-btn">取消订单</view>
|
||||
<!-- 立即支付 -->
|
||||
<view @tap="paymentEv" v-if="orderInfo.status=='waiting'" class="order-btn" style="background-color: #f83030;color: #FFFFFF;">立即支付</view>
|
||||
<!-- 确认收获 -->
|
||||
<view @tap="confirmReceipt(orderInfo.id)" v-if="orderInfo.status=='shipped'" class="order-btn" style="background-color: #000000;color: #FFFFFF;">确认收货</view>
|
||||
<!-- 再次购买 -->
|
||||
<view @tap="againBuy" v-if="orderInfo.status=='completed' || orderInfo.status=='closed'" class="order-btn" style="background-color: #f83030;color: #FFFFFF;">再次购买</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHNH:uni.getStorageSync('statusHNH'),
|
||||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||
loading:false,
|
||||
isExpress:true,
|
||||
switchQuan:true,
|
||||
showQuan:false,
|
||||
express:'',
|
||||
orderInfo:'',//订单信息
|
||||
addressInfo:'',//地址信息
|
||||
allPrice:0,//共计
|
||||
allNum:0,//共
|
||||
times:0,//点击次数
|
||||
appletName:'佩丽饰品',
|
||||
goAddress:'四川省成都市青羊区草堂东路88号',
|
||||
isHeyan:false,
|
||||
canvasQrPath: '',
|
||||
text: 'hello',
|
||||
size: 162,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
timer:null,
|
||||
daoTime:'',
|
||||
timerDao:null,
|
||||
orderId:''//订单id
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
var shareObj = {
|
||||
title: '', // 默认是小程序的名称(可以写slogan等)
|
||||
path: `/pagesB/orderDetail/orderDetail?id=${this.orderId}&invite_code=${uni.getStorageSync('invite_code')}}` // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onUnload() {
|
||||
uni.setStorageSync('isorderDetail',1);
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderId = options.id;
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
this.checkInfo(this.orderId);
|
||||
} else {
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('transientUrl',`/pagesB/orderDetail/orderDetail?id=${options.id}`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmReceipt(id){//确认收货事件
|
||||
this.$requst.post('/api/order/accepted',{order_id:id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('收货成功');
|
||||
this.checkInfo(this.orderInfo.id);
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
},
|
||||
make(index){
|
||||
this.isHeyan = true;
|
||||
this.text = `${this.orderInfo.coding}H${this.orderInfo.skus[index].id}`;
|
||||
let params = {
|
||||
order_coding:this.orderInfo.coding,
|
||||
id:this.orderInfo.skus[index].id,
|
||||
not_check_num:this.orderInfo.skus[index].not_check_num
|
||||
}
|
||||
this.timer = setInterval(()=>{
|
||||
this.$requst.post('/api/order/check-result',params).then(res=>{
|
||||
if(res.code==0){
|
||||
if(res.data.result==1){
|
||||
this.isHeyan = false;
|
||||
this.$toolAll.tools.showToast('已完成');
|
||||
this.checkInfo(this.orderInfo.id);
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
},3000)
|
||||
},
|
||||
cancleEv(){//取消订单
|
||||
this.times++;
|
||||
if(this.times==2){
|
||||
this.$requst.post('/api/order/cancel',{order_coding:this.orderInfo.coding}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.$toolAll.tools.showToast('取消订单成功');
|
||||
this.checkInfo(this.orderInfo.id);
|
||||
this.times = 0;
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
} else {
|
||||
setTimeout(()=>{
|
||||
this.times = 0;
|
||||
},1500)
|
||||
this.$toolAll.tools.showToast('双击即可取消订单');
|
||||
}
|
||||
},
|
||||
paymentEv(){//立即支付
|
||||
if(this.times==0){
|
||||
this.$toolAll.tools.showToast('正在调起支付','loading',1500)
|
||||
this.times++;
|
||||
this.$requst.post('/api/order/pay',{order_coding:this.orderInfo.coding}).then(res=>{
|
||||
if(res.code==0){
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
appId:res.data.payment_params.appId,//appId
|
||||
timeStamp: res.data.payment_params.timeStamp,//时间戳
|
||||
nonceStr: res.data.payment_params.nonceStr,//随机字符串
|
||||
package: res.data.payment_params.package,//package
|
||||
signType: res.data.payment_params.signType,//MD5
|
||||
paySign: res.data.payment_params.sign,//签名
|
||||
success:(res)=> {
|
||||
this.$requst.post('/api/order/paid',{order_coding:this.orderInfo.coding}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.times = 0;
|
||||
this.$toolAll.tools.showToast('支付成功');
|
||||
this.checkInfo(this.orderInfo.id);
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
}
|
||||
},
|
||||
checkInfo(id){//查询订单信息
|
||||
this.$requst.post('/api/user/order-detail',{id:id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.allPrice = 0;
|
||||
this.allNum = 0;
|
||||
let narr = res.data;
|
||||
narr.skus.forEach(item=>{
|
||||
// 共多少件，总计
|
||||
if(narr.is_score==0){
|
||||
this.allPrice += item.price*item.num;
|
||||
} else {
|
||||
this.allPrice += item.score*item.num;
|
||||
}
|
||||
this.allNum += item.num;
|
||||
})
|
||||
this.orderInfo = narr;
|
||||
let naddress = this.orderInfo.address.split(',');
|
||||
if(naddress[0]!='自提'){
|
||||
let nphone = this.$toolAll.tools.hideMPhone(naddress[1].trim())
|
||||
this.addressInfo = {
|
||||
userName:naddress[0].trim(),
|
||||
userPhone:nphone,
|
||||
userAddress:naddress[2].trim()
|
||||
}
|
||||
}
|
||||
this.loading = true;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 再次购买事件
|
||||
againBuy(){
|
||||
let newList = [];
|
||||
this.orderInfo.skus.forEach(item=>{
|
||||
let obj = {
|
||||
id:item.spu_id,//商品id
|
||||
imgSrc:item.spu_cover,//商品图片
|
||||
coding:item.coding,//商品coding
|
||||
price:item.price,//商品价格
|
||||
num:item.num,//商品数量
|
||||
title:item.spu_name,//商品名称
|
||||
}
|
||||
newList.push(obj);
|
||||
})
|
||||
uni.setStorageSync('orderList',newList);
|
||||
uni.navigateTo({url:'/pagesA/getReadyDan/getReadyDan'});
|
||||
},
|
||||
copyCont(){//复制快递单号
|
||||
if(this.times==0){
|
||||
this.times++;
|
||||
if(this.orderInfo.express_number!=null){
|
||||
this.$toolAll.tools.clickCopy(this.orderInfo.express_number);
|
||||
this.$toolAll.tools.showToast('复制快递单号成功');
|
||||
} else this.$toolAll.tools.showToast('暂无可查询的快递信息');
|
||||
setTimeout(()=>{
|
||||
this.times = 0;
|
||||
},2000)
|
||||
}
|
||||
},
|
||||
goThere(val){//去这里
|
||||
wx.getLocation({//获取当前经纬度
|
||||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||||
success: function (res) {
|
||||
wx.openLocation({//使用微信内置地图查看位置。
|
||||
latitude: 30.657707,//要去的纬度-地址
|
||||
longitude: 104.036007,//要去的经度-地址,
|
||||
name: val,
|
||||
address: val
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<view class="pad-x20">
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'搜索'"></status-nav>
|
||||
<!-- 输入框 -->
|
||||
<view class="search-input-box bacf" :style="{paddingTop: statusBarHeight+'px'}">
|
||||
<view class="disac pad-zy30 mar-s20 pad-x20">
|
||||
<!-- 输入框 -->
|
||||
<input @confirm="searchEv" v-model="searchStr" placeholder="请输入关键词" class="width100 fon34 radius10" type="text"/>
|
||||
<!-- 搜索 -->
|
||||
<view @tap="searchEv" class="search-btn" :style="{background:publicColor}">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view class="disjbac fw pad-zy30">
|
||||
<view @tap="goDetail(item.id)" class="width47 mar-s50 posir" v-for="(item,index) in dataList" :key="index">
|
||||
<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无更多 -->
|
||||
<pitera v-if="total==dataList.length"></pitera>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pitera from '@/components/nothing/pitera.vue';
|
||||
export default {
|
||||
components:{
|
||||
pitera
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||||
searchStr:'',//输入框的值
|
||||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||||
dataList:[],
|
||||
showTop:false,//是否显示返回顶部
|
||||
page:1, // 第几页
|
||||
size:10, // 数量
|
||||
total:0, // 总数
|
||||
pitera:false, // 是否显示暂无数据
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||||
},
|
||||
onReachBottom() {//触底事件
|
||||
if(this.total!=this.dataList.length){
|
||||
this.page++
|
||||
this.implementEv()//调用自主预约列表事件
|
||||
} else {
|
||||
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
|
||||
this.isZanw = false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
this.searchStr = options.keyWorld;
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
this.searchEv();
|
||||
} else {
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('transientUrl',`/pagesB/searchPage/searchPage?keyWorld=${this.searchStr}`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchEv(){//搜索事件
|
||||
this.page = 1;
|
||||
// 调用搜索执行事件
|
||||
this.implementEv();
|
||||
},
|
||||
// 搜索执行事件
|
||||
implementEv(){
|
||||
this.$toolAll.tools.showToast('搜索中...')
|
||||
let params = {
|
||||
keyword:this.searchStr, //商品关键字 支持模糊搜索
|
||||
page:this.page, // 页数
|
||||
size: this.size, // 每页数量
|
||||
}
|
||||
this.$requst.post('/api/spu/list',params).then(res=>{
|
||||
if(res.code==0){
|
||||
if(this.page==1) this.dataList = [];
|
||||
// 设置商品总数
|
||||
this.total = res.data.total;
|
||||
if(res.data.list.length){
|
||||
res.data.list.forEach(item=>{
|
||||
let obj = {
|
||||
id:item.id,
|
||||
imgSrc:item.cover,
|
||||
title:item.name,
|
||||
// price:this.$toolAll.tools.changeNum(item.price*1),
|
||||
price:item.price,
|
||||
isActivity:item.tag == '' ? false : true,
|
||||
}
|
||||
this.dataList.push(obj);
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
goDetail(id){//前往详情页
|
||||
uni.navigateTo({
|
||||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.search-input-box input{border: 2rpx solid #E0E0E0;padding: 0rpx 20rpx;height: 80rpx;line-height: 80rpx;}
|
||||
.search-input-box .search-btn {height: 80rpx;line-height: 80rpx;margin-left: 30rpx;border-radius: 10rpx;padding: 0 40rpx;font-size: 34rpx;color: #FFFFFF;flex-shrink: 0;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :navBarTitle="'商品详情'"></status-nav>
|
||||
<!-- 容器 -->
|
||||
<view class="pad-x140" style="background-color: #fafafa;">
|
||||
<container-subgroup>
|
||||
<view slot="content">
|
||||
<view style="margin: 0 -30rpx;">
|
||||
<swiper-pu v-if="cateCurrent==0" :isplay="isAutoPlay" :browseP="true" :bannerList="bannerList" :newHeight="swiperHeight" :newRadius="'0'" :newBottom="'5'"></swiper-pu>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="mar-s30 mar-x20 fon36 bold clips2 line-h50">{{detailObj.name}}</view>
|
||||
<!-- 描述 -->
|
||||
<view class="colpeili fon30 clips3 line-h50">{{detailObj.subtitle}}</view>
|
||||
<view class="disac mar-s20 mar-x50">
|
||||
<!-- 是否限时优惠 -->
|
||||
<view v-if="detailObj.tag!=''" class="fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||||
<!-- 价格 -->
|
||||
<view class="disac">
|
||||
<view class="fon40 bold col0 mar-y10">￥{{discountPrice}}</view>
|
||||
<view class="fon30 colpeili" style="text-decoration: line-through;">￥{{originalPrice}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(item,index) in specList" :key="index">
|
||||
<drop-down :dropObj="item" @chooseItem="chooseItem"></drop-down>
|
||||
</view>
|
||||
<!-- 颜色 -->
|
||||
<!-- 尺寸 -->
|
||||
<!-- <drop-down :dropObj="dropObj" @chooseItem="chooseItem"></drop-down> -->
|
||||
<view class="pad-zy30" style="background-color: #FFFFFF;margin: 0 -30rpx;">
|
||||
<!-- 作品介绍 -->
|
||||
<view class="mar-s100 mar-x30 fon36 bold col0 tcenter pad-s50">作品介绍</view>
|
||||
<!-- 富文本 -->
|
||||
<rich-text :nodes="shopRich"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</container-subgroup>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<!-- 底部按钮 -->
|
||||
<view class="bottom-nav-box display-between-center">
|
||||
<button type="default" @tap="immediatelyBuy">立即购买</button>
|
||||
<button type="default" @tap="addCart">加入购物车</button>
|
||||
</view>
|
||||
<!-- <view v-if="shopDetail!=''">
|
||||
<bottom-nav :detailObj="shopDetail"></bottom-nav>
|
||||
</view> -->
|
||||
<!-- 全局客服 -->
|
||||
<public-customer
|
||||
:nbottom="180"
|
||||
:backgroundColor="'#FFFFFF'"
|
||||
:radiusNum="'40rpx'"
|
||||
:showText="false"
|
||||
:iconNum="1"
|
||||
:iconColor="'#000000'"></public-customer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperPu from '@/components/swiper-pu.vue';
|
||||
import shopList from '@/components/shop-list.vue';
|
||||
import dropDown from '@/components/drop-downs/drop-down.vue';
|
||||
import bottomNav from '@/components/detail-bottom-nav/bottom-nav.vue';
|
||||
// 客服按钮组件
|
||||
import publicCustomer from '@/components/public-customer.vue';
|
||||
export default {
|
||||
components:{
|
||||
swiperPu,
|
||||
shopList,
|
||||
dropDown,
|
||||
bottomNav,
|
||||
publicCustomer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiperHeight:uni.getSystemInfoSync().windowWidth,
|
||||
cateCurrent:0,
|
||||
specList:[],//规格列表
|
||||
dropObj:{
|
||||
title:'尺寸',
|
||||
childrenList:[
|
||||
{
|
||||
id:1,
|
||||
childrenTitle:'1.2'
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
childrenTitle:'6'
|
||||
}
|
||||
]
|
||||
},
|
||||
shopRich:'',//商品富文本
|
||||
bannerList:[],//轮播
|
||||
originalPrice:0,//商品原价
|
||||
discountPrice:0,//商品折扣价
|
||||
detailObj:{},//详情
|
||||
skuDetail:{},//sku详情
|
||||
shopDetail:'',
|
||||
buyNum:1,//购买数量
|
||||
csNum:0,//点击次数,
|
||||
isAutoPlay:false,
|
||||
specIdList:[],//多规格id
|
||||
specCehckList:[],//存查询的规格数据
|
||||
transmitData:[],//要传递的数据
|
||||
shopId:'',//商品id
|
||||
multi_spec:1//是否是单规格商品0-单规格，1-多规格
|
||||
}
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
var shareObj = {
|
||||
title: `${this.detailObj.name}`, // 默认是小程序的名称(可以写slogan等)
|
||||
path: `/pagesB/shopDetail/shopDetail?id=${this.shopId}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||||
imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||||
};
|
||||
return shareObj;
|
||||
},
|
||||
onShow() {
|
||||
uni.removeStorageSync('chooseAddress');
|
||||
this.isAutoPlay = true;
|
||||
this.csNum = 0;
|
||||
},
|
||||
onHide() {
|
||||
this.isAutoPlay = false;
|
||||
},
|
||||
onUnload() {
|
||||
this.isAutoPlay = false;
|
||||
},
|
||||
onLoad(options) {
|
||||
this.shopId = options.id;
|
||||
if(uni.getStorageSync('phone_active')){
|
||||
this.$toolAll.tools.clearShare();
|
||||
// 查询订单详情
|
||||
this.checkDetail(options.id);
|
||||
} else {
|
||||
uni.setStorageSync('existCode',options.invite_code);
|
||||
uni.setStorageSync('outside',2);
|
||||
uni.setStorageSync('transientUrl',`/pagesB/shopDetail/shopDetail?id=${options.id}`);
|
||||
uni.navigateTo({
|
||||
url:'/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//规格查询接口
|
||||
specsEv(id){
|
||||
this.$requst.post('/api/spu/spec',{id}).then(res=>{
|
||||
if(res.code==0){
|
||||
this.specList = res.data.spec;
|
||||
this.specCehckList = res.data.sku_list;
|
||||
} else {
|
||||
this.$toolAll.tools.showToast(res.msg);
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
// 查询商品详情
|
||||
checkDetail(id){
|
||||
this.$requst.post('/api/spu/detail',{id}).then(res=>{
|
||||
if(res.code==0){
|
||||
// 设置商品详情
|
||||
this.detailObj = res.data.detail;
|
||||
this.shopDetail = res.data;
|
||||
// 设置单多规格判断
|
||||
this.multi_spec = this.detailObj.multi_spec;
|
||||
// 调用查询规格事件
|
||||
this.specsEv(id);
|
||||
// 轮播 start
|
||||
// 图片字符串转数组
|
||||
let arrImg = this.detailObj.images.split(',')
|
||||
arrImg.forEach(item=>{
|
||||
let newImgObj = {
|
||||
imgSrc:item,
|
||||
url:'',
|
||||
isVideo:false,
|
||||
poster:'',
|
||||
}
|
||||
// 存图片
|
||||
this.bannerList.push(newImgObj)
|
||||
})
|
||||
// 存视频
|
||||
if(this.detailObj.video!=''){
|
||||
this.bannerList[0] = {
|
||||
imgSrc:arrImg[0],
|
||||
url:this.detailObj.video,
|
||||
isVideo:true,
|
||||
poster:'',
|
||||
}
|
||||
}
|
||||
// 轮播 end
|
||||
// 原价金额转换
|
||||
// this.originalPrice = this.$toolAll.tools.changeNum(this.detailObj.original_price);
|
||||
this.originalPrice = this.detailObj.original_price;
|
||||
// 折扣价金额转换
|
||||
// this.discountPrice = this.$toolAll.tools.changeNum(this.detailObj.price);
|
||||
this.discountPrice = this.detailObj.price;
|
||||
// 设置富文本
|
||||
this.shopRich = this.$toolAll.tools.escape2Html(res.data.detail.content);
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{
|
||||
this.$toolAll.tools.showToast(err.msg);
|
||||
})
|
||||
},
|
||||
// 尺寸选择事件
|
||||
chooseItem(e){
|
||||
let specIndex = this.specList.findIndex(item=>item.title==e.mainTitle);
|
||||
this.specIdList[specIndex*1] = e.id;
|
||||
let specStr = this.specIdList.join('-');
|
||||
this.transmitData = this.specCehckList.filter(item=>item.indexes==specStr);
|
||||
if(this.transmitData.length){
|
||||
// 改变折扣价
|
||||
this.discountPrice = this.transmitData[0].price;
|
||||
// 改变原价
|
||||
this.originalPrice = this.transmitData[0].original_price;
|
||||
}
|
||||
},
|
||||
// 立即购买
|
||||
immediatelyBuy(){
|
||||
// 调用加入购物车事件
|
||||
this.addCart(1);
|
||||
},
|
||||
addCart(index=0){//添加购物车事件
|
||||
// console.log(this.multi_spec,this.transmitData.length,214);
|
||||
if(this.transmitData.length || this.multi_spec==0){
|
||||
if(this.csNum==0){
|
||||
this.csNum++;
|
||||
let newId = '';
|
||||
this.multi_spec==1 ? newId = this.transmitData[0].id : newId = this.shopDetail.sku[0].id;
|
||||
if(index==0){
|
||||
this.$toolAll.tools.showToast('正在加入购物车...');
|
||||
}
|
||||
this.$requst.post('/api/order/shopping-cart-add',{sku_id:newId,num:1}).then(res=>{
|
||||
if(res.code==0) {
|
||||
if(index==1){
|
||||
setTimeout(()=>{
|
||||
uni.navigateTo({
|
||||
url:'/pages/tabbar/cart/cart'
|
||||
})
|
||||
},0)
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('添加购物车成功(*^▽^*)');
|
||||
this.csNum = 0;
|
||||
}
|
||||
} else this.$toolAll.tools.showToast(res.msg);
|
||||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||||
}
|
||||
} else {
|
||||
this.$toolAll.tools.showToast('请选择商品参数')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.display-between-center{display: flex;justify-content: space-between;align-items: center;}
|
||||
.bottom-nav-box{position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx 40rpx;background-color: #FFFFFF;}
|
||||
button{
|
||||
width: 310rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx!important;
|
||||
border-radius: 30rpx;
|
||||
font-size: 36rpx;
|
||||
border: 1rpx solid #FFFFFF;
|
||||
color: #FFFFFF!important;
|
||||
}
|
||||
button:first-child{border: 1rpx solid #f81c1c;background-color: #f81c1c;}
|
||||
button:last-child{border: 1rpx solid #000000;background-color: #000000;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div style="width:100%;overflow-x:hidden;">
|
||||
<image class="" @tap="backEv" :style="{top:statusHNH/2+'px'}" src="/static/public/videoBack.png" style="width: 33rpx;height: 33rpx;position: fixed;z-index: 10;left: 20rpx;" mode="aspectFill"></image>
|
||||
<video id="myVideo" style="width: 100%;" :style="{height:newHeight+'px'}" autoplay="true"
|
||||
:src="videoSrc" :enable-play-gesture="dans" :poster="posterSrc"
|
||||
:controls="isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
|
||||
@play="comePlay" @pause="comePause"></video>
|
||||
<!-- 封面图 -->
|
||||
<image v-if="isPlayImg" @tap="playEv" src="/static/public/video.png" style="position: fixed;top: 50%;left: 50%;
|
||||
width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
statusHNH:uni.getStorageSync('statusHNH'),
|
||||
newHeight:uni.getSystemInfoSync().windowHeight,
|
||||
videoSrc:'',
|
||||
isPlayImg:uni.getStorageSync('is_vedio'),
|
||||
autoplay:true,
|
||||
videoContext:'',
|
||||
title:'',//视频的标题，全屏时在顶部展示
|
||||
posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
|
||||
isControls: false,//是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
|
||||
dans:true,//是否开启播放手势，即双击切换播放/暂停
|
||||
isCenterImg:false,//是否显示视频中间的播放按钮
|
||||
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
||||
isFull:true//是否显示全屏按钮
|
||||
}
|
||||
},
|
||||
onReady: function (res) {
|
||||
this.videoContext = uni.createVideoContext('myVideo', this)
|
||||
},
|
||||
onLoad(options) {
|
||||
this.videoSrc = options.src
|
||||
this.posterSrc = options.posterSrc
|
||||
},
|
||||
methods:{
|
||||
backEv(){
|
||||
uni.navigateBack({
|
||||
delta:1
|
||||
})
|
||||
},
|
||||
playEv(){
|
||||
this.isPlayImg = false;
|
||||
this.autoplay = false;
|
||||
this.videoContext.play();
|
||||
},
|
||||
comePlay(){//当开始/继续播放时触发play事件
|
||||
this.isControls = true;
|
||||
},
|
||||
comePause(){
|
||||
this.isPlayImg = true;
|
||||
this.isControls = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
{
|
||||
"description": "项目配置文件",
|
||||
"packOptions": {
|
||||
"ignore": []
|
||||
},
|
||||
"setting": {
|
||||
"urlCheck": true,
|
||||
"es6": true,
|
||||
"enhance": true,
|
||||
"postcss": true,
|
||||
"preloadBackgroundData": false,
|
||||
"minified": true,
|
||||
"newFeature": false,
|
||||
"coverView": true,
|
||||
"nodeModules": false,
|
||||
"autoAudits": false,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"scopeDataCheck": false,
|
||||
"uglifyFileName": false,
|
||||
"checkInvalidKey": true,
|
||||
"checkSiteMap": true,
|
||||
"uploadWithSourceMap": true,
|
||||
"compileHotReLoad": false,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"useMultiFrameRuntime": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"useIsolateContext": false,
|
||||
"userConfirmedBundleSwitch": false,
|
||||
"packNpmManually": false,
|
||||
"packNpmRelationList": [],
|
||||
"minifyWXSS": true,
|
||||
"disableUseStrict": false,
|
||||
"minifyWXML": true,
|
||||
"showES6CompileOption": false,
|
||||
"useCompilerPlugins": false,
|
||||
"ignoreUploadUnusedFiles": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.22.0",
|
||||
"appid": "wx987dc41899f719e8",
|
||||
"projectname": "%E4%BD%A9%E4%B8%BD%E5%95%86%E5%9F%8E",
|
||||
"debugOptions": {
|
||||
"hidedInDevtools": []
|
||||
},
|
||||
"scripts": {},
|
||||
"staticServerOptions": {
|
||||
"baseURL": "",
|
||||
"servePath": ""
|
||||
},
|
||||
"isGameTourist": false,
|
||||
"condition": {
|
||||
"search": {
|
||||
"list": []
|
||||
},
|
||||
"conversation": {
|
||||
"list": []
|
||||
},
|
||||
"game": {
|
||||
"list": []
|
||||
},
|
||||
"plugin": {
|
||||
"list": []
|
||||
},
|
||||
"gamePlugin": {
|
||||
"list": []
|
||||
},
|
||||
"miniprogram": {
|
||||
"list": []
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 997 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 B |
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 720 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue